HTML-kurs del 1



Med HTML (Hyper Text Markup Langue) kan du kode dine egne hjemmesider. Jeg skal prøve å forklare deg hvordan. Med HTML har du mer kontroll, og hvis du skal offentlig-gjøre din side, er dette meget lett. Ja, så hva er kostnadene? Vel, HTML er gratis å bruke, men det koster hvis du skal ha ett host. Men ved å bruke It’s Learning er det problemet løst.

Dette er del 1 i det fire deler lange kurset.

Om du ikke skulle få det til, anbefales du til å gå innom FAQen:

Unnskyld meg, hva er HTML?

HTML er basisen i hjemmeside-koding. Det er faktisk ikke så vanskelig som du kunne tro, og faktisk ikke så dyrt som du skulle frykte. Hvis du skal lage virkelig store sider, er ikke HTML nok – men du er nødt til å lære HTML for å kunne lære deg noen andre kodingsarter. I dette kurset vil du kunne lære:

  • Å lage hjemmesider
  • hvordan designe sider
  • hvordan lage pene sider

Men hvorfor bruke HTML, når vi har gode, greie Piczo? Trenger du grunner, eller;

  • Piczo er ikke så populært blant folk.
  • Med HTML har du mer kontroll.
  • Du kan skryte av at du kan lage sider uten Piczo.
  • Ingen reklame
  • Intet rart Piczo-system

Dette kurset er lagt opp til at Piczo brukere lett kan skifte over til HTML,, og at nye kan lære det seg like lett. Alt du trenger er motivasjon – og en Datamaskin. (Det mangler fortsatt en del om Piczo folkens, bare vent og ta det med ro…

Prinsippet

For å kunne skrive inn HTML koder, må du åpne notisblokk ved å trykke START > Programmer > Tilbehør > Notisblokk. Eller du kan åpne Mine dokumenter, høyreklikke, Ny, Nytt tekstdokument. (Forutsatt at du bruker Windows. Hvis du bruker Ubuntu, Linux: Programmer > Tilbehør > Tekstredigering)

Koder – eller såkalte «tags» i HTML er inni <>, og de fleste taggs må avsluttes med ett </>. F. eks: <html>BLABLABLA</html> Husk at hver kode (fil) her starter med <HTML> og slutter med </HTML>. Disse er ikke tatt med, det kan være god trening. Åpne Notisblokken, og tast inn kode 1.0

Kode 3.0

<body>
 Dette er en test
</body>

Du ser at vi starter koden <body>, og putter innhold immelom start koden og sluttkoden(</body>) I dette tilfellet, litt tekst. Deretter avslutter vi koden <body> med </body>. Husk at FØR <body> må vi ha <HTML>, og etter, på slutten, må vi ha </HTML>.

Lagre notisblokken – ved å

  • Trykke Fil > Lagre som
  • Velg filtypen Alle filer (*.*).
  • Skriv inn eks.html.

Dette må du gjøre hver eneste gang du lager et nytt HTML dokument. Filnavnet er slik: FILNAVN . HTML F. eks: eks.html Men IKKE slik: æøå.html grunnet at det er skandinaviske tegn i filnavnet.

Filetternavnet kan også være .htm , det spiller ingen rolle.


Tips: Det spiller ingen rolle om du skriver koden i STORE BOKSTAVER eller i småe bokstaver. MEN: enten eller. Ikke <HtMl>, f. eks. Det kan faktisk være god trening å holde taggs i STORE BOKSTAVER og resten i små.


Dette er prinsippet i HTML. Du vet egentlig ikke hva du har skrevet, men la oss se litt på det.

Basisen

La oss se litt på kode 3.0, hva den består av. Først må vi huske at vi har <html> – denne koden sier til browseren at dette er et HTML-dokument.


Tips: Det er et par uttrykk i teksten over som er litt nye; med browser menes det nettleseren – f. eks. Internet Explorer, Mozilla Firefox eller norske Opera.


Etter på starter vi <body> – Alt immelom startkoden (<body>) og sluttkoden (</body>) er «kroppen» på HTML siden. dvs. alt av innhold. Tekst, bilder, koder – ALT. Vi har også <head> til å lage hodet, men det tar vi for oss i kode 2.0. Innemellom <body> kodene – eller taggene – har vi tekst, før alle koder avsluttes (husk på at </html> er der!).

Nå, la oss se på litt flere koder. Tast inn Kode 4.0, og lagre dette som eks2.html.

Kode 4.0

<head>
 <title>Jeg er smart</title>
</head>
<body>
 <p>Mitt navn er Tobinus;<br>
 og jeg er SMART!</p>
</body>

Tips: Ja, ta det bokstavelig, SKRIV inn kodene. Du lærer null og niks ved å kopiere og lime inn tekst.


Nå ble med et verre. Vi støtte på fire nye koder her, la oss forklare dem, en etter en.

  • <head> inneholder en rekke nyttige data – som <META> tagger (vi kommer til dem senere,), <link> tagger (senere, det også,) og mest nyttig av alt – <title>. Husk at <head> avsluttes etter dets innhold, og før <body> starter, med sluttkoden (selvfølgelig; </head>.).
  • <title> lar deg endre på teksten på den blåe linja helt, helt, på toppen.
  • <p> lar deg skrive inn vanlig tekst – selvom det går fint uten. Men du har mer muligheter med form og design, vi kommer til det lenger ute i kurset.
  • <br> gjør et linjeskift – og er et av unntakene når det gjelder sluttkodene. Her trenger du ingen! Husk at HTML ignorerer dobble mellomrom og linjeskift, så denne koden må du bruke.
  • Husk å avslutte <title> når teksten på den blå linja er ferdig. Det samme med- denne må avsluttes når all teksten du vil ha for denne omgang, er skrivd inn.

Hvordan se siden jeg lager?

Du kan se siden du har laget ved å åpne browseren, og enten:

  • a) Trykke på CTRL og L, eller
  • b) Trykke Fil > Åpne

Deretter ser du etter .html filen du har laget (eller .htm). Nå skulle du helst se noe lignende Figur 4.0

Figur 4.0

Mitt navn er Tobinus;
og jeg er SMART!

Ganske kjedelig, men man må igjennom det kjedelige før det morsomme kommer. Men det finnes lettere metoder; vi skal se på dem veldig, veldig snart.

Hvordan bruke It’s Learning til nettsider

Hvis du har en bruker på It’s Learning, noe de fleste på Fetskolene har, finnes det en editor for hjemmeside-mekkere. For å finne den må du:

  • Logge innpå It’s Learning.
  • a) Hvis du bruker It’s Learning 3.0, gjør følgende: Trykk på Mine filer.
  • b) Hvis du bruker It’s Learning 3.1, gjør følgende: Trykk på Min eportfolio > Mine filer.
  • Deretter trykker du på Mine Webfiler.

Oppe ser du en laaaaaang URL adresse.


Tips: Med URL mener man det du skriver for å komme innpå en side, f. eks. http://www.vg.no/ .


Denne skulle gjerne starte slik:
http://its-learning.nr-skolene.no/data/ralingen/
Deretter kommer et fire-sifret nummer, f. eks: /1332/ .
Det betyr: dette er ditt webområde!

Kanskje er det en fil med navn It’s.html der inne fra før. Den har vi ikke bruk for, så la oss bli kjent med slette-kommandoen.

  • Trykk på firkanten til venstre for filnavnet.
  • Trykk på Velg operasjon.

Nå skulle du helst se Kopier til, Slett, Flytt til, med mer. Akkurat nå skal vi bruke slette kommandoen.

  • Velg Slett.
  • Trykk OK. Kanskje lurt å sjekke en ekstra gang at du ikke sletter alt?
  • Bekreft hvis du er HELT sikker.

Jepp, da var den kommandoen utført. La oss legge til en fil.

Trykk på Legg til fil. Skriv inn eks3.html’, og filen ligger der. Trykk på notisblokken på høyre side for å redigere.

Nå åpnes Javaen. Hvis det skulle komme en feilmelding, er det noe galt med It’s Learning systemet. Nå kan du skrive alt du har på hjertet – uten å kode. Hvis du ser nederst, står det «HTML editor». Trykk der for å kunne skrive inn koder. La oss skrive inn Kode 5.0.

Kode 5.0

<head>
 <title>Verdens undergang</title>
</head>
<body>
 <h1>Verdens</h1>
  <h2>undergang</h2>
   <h3>er</h3>
    <h4>nær</h4>
 <h1>!!!!</h1>
</body>

Trykk på lagre. Nå trykker du på filnavnet eks3.html . Har du husket på <html> nå?


Tips: Ditt sted på It’s Learning støttes kun av Internet Explorer. Dvs. at hvis du bruker Mozilla Firefox fungerer ikke nettsiden. Da vil Firefox spørre om du skal laste ned siden eller ikke.


Se, der er siden! Jeg kan ikke bruke noen figur, fordi koden <h1> lager en overskrift.

Nå, la oss redigere siden igjen. Du husker hvordan? Trykk på notisblokken til høyre.

Trykk på HTML Editor for å redigere HTML koden, også ser v… Hva i alle?

Figur 5.1

<head>
 <title>Verdens undergang</title>
</head>
<body>
 <h1>Verdens</h1>
  <h2>undergang</h2>
   <h3>er</h3>
    <h4>n&aelig;r</h4>
 <h1>!!!!</h1>
</body>

Det som har skjedd her, er at It’s Learning formaterer noen spesialtegn, som æ,ø,å. Med spesialtegn mener man «ikke normale tegn». F. eks. må jeg bruke &lt; for å få til en <. Siden It’s Learning gjør dette for deg, er jobben litt lettere. Når du lager et nytt HTML dokument, legger It’s Learning til noen koder som er nyttige å ha. Men også noen unyttige, vi ser mer på det når vi kommer til CSS.

Tilbake til koden. Uffda! Fem nye koder! …nei vent, <h1> er brukt to ganger! Altså fire…

Eller, kun 1. HTML koder består av forkortelser av engelske, logiske ord. «h» står for heading – som på norsk blir overskrift. Logisk?

Koden <h1> er den største overskriften, også minsker det helt ned til <h7> – som faktisk er mindre enn vanlig tekststørrelse. Kjekt å vite, eller hva?


Tips: Vi ser mer på spesialtegn senere i kurset.


Mer om tekst

Du har lært at det er mulig å bruke <p> for å skrive inn tekst. Dette kan kombineres med en rekke andre koder. Blant annet fet, kursiv og understreket. Vi kan også få teksten

i midten
eller til høyre eller venstre. Ganske mange muligheter! Det er jo trossalt tekst som det er mest av på hjemmesider!

La oss se på noen tekst-koder.

Fet skrift

<p><b>Fet skrift</b></p>

Kursiv skrift

<p><i>Kursiv skrift</i></p>

Understreket skrift

<p><u>Understreket skrift</u></p>

Puh! Det var mye! La oss blande dette litt i Kode 6.0.

Kode 6.0

<head>
 <title>Tekst</title>
</head>
<body>
 <p>
 <b>Velkommen<br>
 <i>Dette er en test.</i></b>
 <br><br>
 <u>Laget av meg</u>
 </p>
</body>

Lagre dette som tekst.html , og åpne den i browseren. (Se Hvordan se siden jeg lager.) Se FAQ på diskusjon hvis det ikke fungerer. Men la oss se nærmere på Kode 4.0.
Først må vi huske <html>, og deretter kommer <head>. Dette har vi sett på tidligere, men legg merke til at vi har endret teksten mellom <title> og </title> til Tekst.

Deretter avslutter vi <head> koden, og åpner opp <body> koden. Inne i body starter vi litt tekst med <p>. Nå bruker vi kodene vi så på i begynnelsen av kapitlet. Hvis du ser på det endelige resultatet av nettsiden blir den noe lignende Figur 6.0.

Figur 6.0

Velkommen
Dette er en test

Laget av meg

Tilbake til koden. Først starter vi <b>. Vi skriver noe tekst, også, legg merke til dette, Putter vi inn <i> koden FØR vi har avsluttet <b> taggen (kommer til å bruke den varianten (tagg) resten av kurset.). Vi skriver noe tekst som er både tjukk og kursiv. Deretter avslutter vi <i> også <b>


Tips: Vær obs på rekkefølgen vi starter kodene: <b><i> og avslutter dem: </i></b>. Siden vi har startet <b> først, avslutter vi den sist også. Slik fortsetter det. Men ikke gjør sånn: <b><i>BLABLABLA</b></i>


Vi kommer inn på en ny linje med <br>, og starter understreking med <u> og avslutter den når teksten er ferdig. Dermed avslutter vi alle taggene som er åpnet (husk </html>!).
Jaja, der forsvant logistikken med kodene. Neida, B, I og U står for hver sin ting.

  • B står for Bold som betyr fet.
  • I står for Italic som betyr kursiv.
  • U står for Underlining som betyr understreking.

La oss se på taggen som fikk teksten i midten!

Atributter

La oss begynne med det enkleste. For å få teksten i midten kan du ganske enkelt bruke taggen <center>. Men hvis du vil bestemme litt mer, blir det to hakk vanskeligere.

Hittil har vi kun hatt tagger som bare har <tagg>. Men nå legger vi til mer informasjon. Dette er nødvendig på en del koder.

Vi har tidligere brukt kun <p>. La oss nå putte mer informasjon i taggen:

<p align=»right»>Tekst</p>
Denne gangen har jeg uthevet skriften align=»right», som er atributten i dette tilfellet. Det er også mulig å ha flere atributter i en kode – noe som veldig ofte er tilfellet.

På figur 7.0 ser du nøkkelen til koden.

Figur 7.0

<TAGG ATRIBUTT=»VERDI»>

TAGG er, rett og slett taggen i koden. Atributt er tingen vi angir en verdi på. Verdien er, i eksemplet ovenfor, «right». Husk å ha mellomrom mellom taggen og atributten. Hvis flere atributter må du ha mellomrom; <TAGG ATRIBUTT=»VERDI» ATRIBUTT=»VERDI»>
MEN: på sluttkoden slipper du å ha alle atributtene, selvom startkoden skulle inneholde noen. Og det er ekstremt bra.

Men la oss se på en kode hvor vi bruker både <center>, skriftkodene (Bold, Italic og dem) og vår første atributt.

Kode 7.1

<head>
 <title>Historien om Ole Jakob</title>
</head>
<body>
 <h1><center>Historien om Ole Jakob</center></h1>
  <p><b>Ole Jakob gikk i klasse 6A.</b><br>
  B-klassingene ertet ham hvert eneste friminutt.<br>
  De sier han er teit.<br>
  Ikke minst på grunn av at faren var purk.<br></p>
  <h2 align="right"><u>Hvordan går dette?</u></h2>
</body>

Lagre Kode 7.1 som hist.html og åpne den opp i browseren. Du ser hva du vil se?
Jaja, fortsettelse følger. Eller..? Blir man nødt til å bla gjennom alt for å finne fortsettelsen? Eller finnes det lettere metoder..? Eller blir vi nødt til å skrive masse? FORTSETTELSE FØLGER!

Oppsummering

I del 1 har du lært hva HTML er, og en del tags. Du har lært litt om atributter, og tekst-koder.

Men det er så mye mer! Følg med, i HTML kurs del 2 lærer du mer om…

  • Farger
  • Lenker
  • Bilder

Du er velkommen til å ha dette som et lite oppslagsverk, men Hjemmeside-hjelpen gjør den jobben mye bedre.

Farvel for denne gang, hjemmesidemakere!

 

Kommentarer

kommentarer

Forfatter: Tobinus

Del denne artikkelen på
468 ad
Start chat
1
Close chat
Hei! Takk for at du besøker oss! Trykk på knappen under for å starte en chat.

Start chat