HTML Programmering, del 2 av 7
HTML struktur og oppbygging
Det enkle først, oppbyggingen i en html-side for at den skal kunne vises i din nettleser er bygd opp av tekst i kodet form, i selve sidens kildekode. En programmeringskode for html-siden, med andre ord.
Du vet at på en enhver webside kan du høyreklikke på et vilkårlig tomt område, og fra den menyen som da vises kan du klikke på "Vis kilde" ("Vis kildekode") som da er den websidens kode. Prøv det før du leser videre.
Høyreklikk her! Fra menyen velger du så "Vis kilde". Gjør det nå!
Slik er kildekoden på denne siden. Jada, vet den kan se kaotisk ut, men det ser bedre ut i en html editor. Dette kan du gjøre ved senere anledninger også, på sider du ønsker å utforske!
Bilder og tekst på en webside er altså programmert med spesielle koder som får de til å fremkomme på siden. All kode må følge spesielle syntakser (regler) i bestemte rekkefølger og gjentakelser innenfor en fast grunnoppbygging.
Grunnoppbyggingen i en HTML side er slik:
<html>
<head>
<title>Vår eksempel side!</title>
</head>
<body>
Mellom disse body taggene ligger innholdet du ser på en webside
</body>
</html>
Det som er skrevet med blått er tagger. Disse kan også inneholde innenfor samme tagg definerte elementfunksjoner og attributter. Uff, ble litt innviklet, det der! Vi utdyper litt mer.
En tagg er en funksjon, beskrevet med et html-definert ord eller en bokstavforkortning innlemmet i en "større enn" eller "mindre enn" klamme. Slik ser taggklammene ut: < >
En slik funksjonskommando starter alltid med en bestemt definert
<tagg>, og likeledes avsluttes med samme tagg
med skråstrek først inkludert, slik </tagg>. Dette vil da være selve html elementet, og alt som står mellom start og slutt tagg er innhold i elementet.
Eksempel: <title>Vår eksempel side!</title>, er et element.
Title taggen er forøvrig sidens navn, og vises oppe i den blå tittellinjen på nettleser vinduet ditt, helt øverst til venstre.
Tagger kan også ha en eller flere attributter som gir elementet spesielle funksjoner. Et attributt angis alltid i start taggen, og er bygd opp med et navn og deklarasjon (hva det utfører).
Eksempel:
name="attributt" (name kunne f.eks. også vært style="attributt" etc).
Attributt deklarasjonen skal også alltid angis i anførseltegn/gåseøyne. Imidlertid kan det i spesielle situasjoner angis mellom enkle anførseltegn når selve deklarasjonen inneholder anførseltegn selv.
Eksempel: name='deklarasjon "attributt" deklarasjon'
Åpnes døren, må den lukkes også
Se for deg en enorm sikkerhetsdeklarert bygning du skal bevege deg gjennom. Denne bygningen er helt avhengig av at du som bruker åpner og lukker alle dører med en kode når du passerer i din ferd gjennom rommene i bygningen.
Dette for at ikke andre skal passere uten å være godkjente og deklarert. Akkurat slik fungerer det med tagger også (Satt på spissen). Start taggen åpner, mens slutt taggen lukker døren, med de rette kodene.
Alle tagger er forøvrig bygd opp av ord og/eller tegn som har bestemte forhåndssatte funksjonskommandoer fra det engelske språket.
Nøyaktig hvor mye sitter du nå og tenker på helt andre ting? Skru ned musikken, lukk alle vinduer og gjem bort telefonen! Her må vi konse :)
Om du titter litt på eksemplet grunnoppbyggingen av HTML ovenfor, ser du at det er satt opp i et nestet hieraki! Studer litt hvordan denne <klammen> har sammenheng med denne </klammen> i bruk av skråstrek uten og med.
Hent en kaffe, ta en pause, og begynn på nytt. Når du er klar, kan du klikke deg videre til del 3.
SØK ressurser
HJELP til Hjemmesiden
Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.