Menu:

Grunnleggende om HTML


Alle websider er laget i HTML. HTML står for HyperText Mark-up Language, altså "hypertekst kodespråk".

Å skrive HTML er akkurat like enkelt som å skrive alminnelig tekst i et tekstbehandlings-program. Den eneste forskjellen er at HTML-tekster ikke bare inneholder ordene som skal stå på websiden, men også bestemte koder som styrer hvordan teksten skal se ut.

En webside er altså bare en enkel tekstfil med bestemte koder inni.

Her er et enkelt eksempel:

Denne teksten vises som vanlig tekst. Men hvis jeg legger inn en kode rundt noen av ordene i teksten, vil disse ordene se annerledes ut. For eksempel kan jeg skrive koden B (for "bold", altså fet tekst) før og etter ord jeg vil ha i fet skrift, og da kommer disse ordene frem i <B>fet tekst</B>.

Som du ser, er <B> koden som skrur fet tekst på, og </B> er koden som skrur fet tekst av. Den teksten som står imellom de to kodene er den teksten som blir vist slik koden angir.

En annen HTML-kode er <I> og </I>. I står for "italic", altså kursiv. Disse ordene kommer da som <I>tekst i kursiv</I>.

I eksempelet over kan du se selve kodene, men normalt vil man ikke se HTML-kodene på websiden. Man vil bare se teksten vist på den måten som koden angir.

En HTML-side er altså bare en tekstfil med koder inni. Alle websider må være HTML-sider, det vil si at alle websider må være tekstfiler som har de riktige HTML-kodene i seg.

Filnavn for websider

Når en tekstfil har HTML-koder i seg, skal den ha et filnavn som slutter på .html Dette gjør at datamaskinen skjønner at filen er en webside.

Ekspert-tips: Lag logiske filnavn

Lag filnavn som er logiske. Har du for eksempel en side som presenterer dine priser, kan denne siden gjerne hete "priser.html". Har du en side som forteller hvordan man kommer i kontakt med deg, kan siden hete "kontakt.html".

På denne måten husker du enkelt hvilke filer som er hvilke sider på nettstedet ditt.

Hver side på nettstedet er en egen HTML-fil, altså en egen tekstfil med koder i. Nettstedet som helhet er en samling av HTML-sider; en fil for hver side.

Nettstedet ditt har et domenenavn (for eksempel www.skogshytter.no). Hver av de enkelte sidene på nettstedet vil i tillegg ha sitt eget filnavn som webadresse. Domenenavnet og filnavnet skilles med en skråstrek.

Heter ditt domene www.skogshytter.no og din prisliste "priser.html", blir hele adressen til din prisliste slik: www.skogshytter.no/priser.html


Du kan godt skrive inn webadressen til en enkelt fil i adresse-feltet i nettleseren. Hvis du gjør det, så får du den spesielle siden du har angitt; her: filen "priser.html" på domenet www.skogshytter.no.

VIKTIG: Forsiden på et nettsted skal alltid ha navnet "index.html". Den siden du gir navnet index.html er den siden som kommer opp dersom brukeren bare skriver inn domenenavnet.

Skriver brukeren inn www.skogshytter.no i adressefeltet, er det altså siden www.skogshytter.no/index.html som kommer opp i nettleseren.

Oppgave:

Ta utgangspunkt i den oversikten over sider som du lagde i planleggingsfasen. Finn ut hva de forskjellige sidene bør hete.

Husk at forsiden må hete "index.html".

Før du begynner å lage sider, vil vi gjerne fortelle deg om to forskjellige typer koder som er spesielt viktige på web. Den ene er koden for å sette inn bilder, og den andre er koden for å lage linker fra en webside til en annen.

Slik setter du inn bilder i websiden

Når du skal sette inn et bilde på en webside, så må du først ha et bilde. Et bilde som kan vises på web må være av filtypene gif, jpg eller png (de første to er vanligst). Dette betyr at bildefilen må ha etternavnet .gif, .jpg eller .png.

Bildefilene som skal inn på siden må du også legge på webserveren når tiden kommer, sammen med selve webside-filene (= HTML-filene).

Filtyper for bilder

Hvilken filtype bildefilen er, styrer du når du lagrer bildefilen fra et bildebehandlingsprogram. Da kan du som regel velge hva slags filformat du vil lagre filen som.

Velg .gif filformat for grafikk med store fargeflater, velg .jpg filformat for fotografier, der fargeovergangene er dusere.



Velg .gif som filformat for enkle tegninger, logoer og grafikk


Velg .jpg som filformat for fotografier.

Mange digitalkameraer lagrer bildene automatisk som .jpg-bilder. Har du et bilde fra ditt eget digitale kamera som du vil ha inn på din webside, så kontroller at bildefilen har etternavnet .jpg.

Bilder som har etternavnet .jpg er filer av typen .jpg, bilder som har etternavnet .gif er filer av typen .gif og bilder som har etternavnet .png er filer av typen .png. Har du bilder med andre etternavn enn disse tre (for eksempel .tif eller .psd), er de andre typer filer. I så fall må du forandre filtypen før du kan bruke bildet på en webside.

NB! Du kan ikke forandre filformatet bare ved å forandre etternavnet på filen. Hvis bildet er av feil filtype så må du hente det inn i et bildebehandlingsprogram og lagre det derfra med filtype .jpg, .gif eller .png. (Av disse er .jpg som regel den beste filtypen for fotografier.)

De vanligste bildebehandlingsprogrammene på markedet er Photoshop og Photoshop Elements (den siste er en enklere versjon av den første).

Når du skal lage websider er det en stor fordel å kunne behandle bilder på en nogenlunde profesjonell måte. I det minste vil du trenge å forandre filformater, å forandre størrelsen og å beskjære bilder. Hvis du ikke allerede har et bildebehandlingsprogram, kan du laste ned Gimp her:

Klikk her for å laste ned bildebehandlingsprogrammet GIMP.

Du kan også lese veiledningen for installasjon av GIMP i kapittelet om Verktøy. GIMP er gratis og følger med i Web For Alle.

Når bildefilen er klar, kan du legge den inn i siden din på følgende måte:

Skriv inn denne koden:

<IMG SRC="bildenavn.jpg">

(Bytt ut "bildenavn.jpg" med det faktiske navnet på din bildefil.)

Denne koden gjør at du får bildet inn på egen linje i teksten, og teksten rundt bildet fortsetter i nederkant av bildet.

Ønsker du i stedet bildet ved siden av teksten, kan du bruke en av disse kodene:

<IMG SRC="bildenavn.jpg" align="left">
<IMG SRC="bildenavn.jpg" align="right">

Den øverste av disse kodene gjør at bildet kommer til venstre for teksten, den nederste gjør at bildet kommer til høyre for teksten.

I HTML-programmet som du snart skal lære å bruke, vil du også enkelt kunne sette inn bilder ved å klikke på en knapp i programmet.

Slik lenker du fra en webside til en annen

Å lenke fra en webside til en annen er selve essensen i å lage et nettsted. Et nettsted består jo av flere forskjellige enkeltsider som lenker til hverandre gjennom menyen på sidene.

Lenker bruker vi også for å lenke fra et nettsted til et annet.

Hvis du ønsker å lage en lenke til prislisten inne i teksten på ditt eget nettsted, kan du for eksempel gjøre det slik.

      Du finner prisene på alle våre produkter på <A HREF="priser.html">prisliste-siden.</A>

Som du ser så er det koden <A HREF> og navnet på siden man lenker til som starter lenken. Koden </A> avslutter lenken.

Ønsker man å lenke til et annet nettsted, er koden like enkel:

      <A HREF="http://www.vg.no">Klikk her for å komme til VG Nett</A>

Ekspert-tips: Lag logiske lenker

Når du lager lenker, så pass på at ordene inne i lenken beskriver det brukeren får når han klikker på lenken. Det gjør ikke noe om lenken er litt lang.

Lager du en lenke til prislisten din, har du for eksempel disse mulighetene:

Klikk her for å komme til prislisten
Se min prisliste
Alle prisene finner du på prislisten
Relevante lenker: Prisliste

Alle disse alternativene er gode. Det som derimot ikke er noe godt alternativ, er å lage en lenke bare på ordene "klikk her" eller lignende. Lenken skal alltid beskrive innholdet på den siden det lenkes til.

Logiske lenkebetegnelser hjelper brukeren å finne raskt fram på sidene dine, og det hjelper deg også med å få gode rangeringer på søkemotorer.

Du kan også legge inn ekstra spesifiseringer i lenken. Den viktigste av disse er når du vil at siden du lenker til skal åpnes i et nytt nettleservindu.

Denne lenken er slik:

     Denne koden åpner <A HREF="http://www.vg.no" target="_blank">VG Nett</A>
     i et nytt vindu. Som du ser, passer jeg på at selve lenketesten er logisk.

Det er tillegget target="_blank" inne i koden som gjør at den åpnes i et nytt vindu.

Klikk på lenken i avsnittet foran, så ser du hvordan nettleseren åpner et nytt vindu med VG Nett i. Fordi lenken åpner nytt vindu, kommer du ikke til å miste denne siden ved å klikke på lenken. Du kan bare lukke vinduet med VG Nett i etterpå, og så ligger denne siden fremdeles under.

Vil du vite mer?

Hvis du syns HTML er spennende og ønsker mer kunnskap om dette emnet, anbefaler vi deg disse nettressursene:

Om HTML på oppslagsverket Wikipedia (på norsk)
Kodeliste over HTML-koder (på norsk)
Skritt for skritt innføring i HTML på W3Schools (på engelsk)


Gå videre: Grunnleggende om CSS
Eller: Gå tilbake til oversikten