HTML Programmering, del 3 av 7
Deklarasjon og innhold
Går det bra? Om du allerede er kommet dit at du tenker i greske bokstaver er det bare å slappe helt av! Litt forvirret blir man ja, men hvem blir vel ikke det ved læring av nye ting! Litt egentrening og terping, så detter ting på plass. Tro meg!
Web dokumentet består av tre grunn seksjoner:
- HTML som omfavner hele dokumentet. Kan sammenlignes med en vegg rundt sikkerhets-bygningen vi ble kjent med i eksemplet tidligere.
- HEAD kan oversettes til hode, er delen der alt av dokumentets struktur fremkommer. Bygningens organiseringssenter!
- BODY som er selve kroppen i dokumentet, er der hvor bygningens interiør, befinner seg. Her plasseres alt du vil skal vises på siden, som tekst og bilder, etc.
På forrige side så du at grunnoppbyggingen i et HTML dokument startet med <html> taggen. Imidlertid skal du alltid legge inn en annen type deklarasjon før denne igjen, for å få dokumentet ditt godkjent og validert som standard i den HTML versjonen du koder i.
Dette er DOCTYPE taggen. Du kan sammenligne den med en guide som tar i mot gjester og gir informasjon om hva selve bygningen inneholder.
DOCTYPE taggen forteller deg altså hvilken html versjon som er brukt på siden, gir korrekt validering av siden samt at siden også blir bedre søkbar i søkemotorer. I vårt eksempel bruker vi XHTML. Se eksempel lenger ned.
Ja, du trodde at vi holdt på med HTML, hva? Neida, vi koder i XHTML, og det blir stort sett det samme, bare en liten videreutvikling.
Html 4.01 har vært, og er den mest brukte standarden enda, men denne versjonen er utgående, og xhtml er arvtageren. Siden HTML og XHTML er såpass like, er det ingen grunn til å dvele med vanlig html om du er helt nybegynner. Vi omtaler de to formatene som kun HTML, uansett.
Back to work
Slik eksemplet var skrevet i forrige del, vil det fremkomme som et tomt
dokument, siden ingenting er føyd til mellom BODY taggene.
(bortsett fra den forklarende linjen; "Mellom disse..")
Javel! En tom og blank, eller hvit webside inspirerer ingen til å stoppe opp ved, så vi skal legge til litt innhold så noe vises på selve siden.
La oss legge til noen definerte innholds tagger i BODY. Vi legger inn et bilde på siden med img taggen og en liten tekst, adskilt med et tomt avsnitt. Kråketegnene du ser mellom det ene settet med p tagger i eksemplet under er ascii tegnet for mellomrom ( ).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vår eksempel side!</title>
</head>
<body>
<p>
<img style="border: 0px none;"
src="468x60.gif" width="468"
height="60"
alt="Apasje" />
</p>
<p> </p>
<p>Denne setningen står mellom p tagger. P tagger er avsnitt.</p>
<p>Dette er et nytt avsnitt.</p>
</body>
</html>
Klikk linken under for å se hvordan eksemplet med koden ovenfor ser ut:
Vis vår halvferdige eksempel side!
Som du ser av eksemplet, består den av et bilde og en tekst, og hver <p> med </p> tagg utførers det et avsnitt på siden, og gir luft mellom linjene. Totalt har vi fire avsnitt på siden, som begynner med <p> taggen og slutter med </p> taggen, inkl det tomme avsnittet.
I avsnittene setter man gjerne tekst og annet materiale. I det første avsnittet har vi en img tagg innenfor p taggen! Dette er taggen for å vise et bilde på siden, og inneholder blant annet attributtet STYLE.
STYLE attributtet er egentlig et stilsett (css), og er deklarert med "border: 0px none" som betyr at kantlinje er 0 pixler, altså ingen kantlinje.
Src betyr "source" på engelsk, og angir bildets navn og URL til bildet. Width og height er henholdsvis bredde og høyden på bildet, mens alt (alternative) gir en beskrivelse av bildet (for nettlesere som ikke laster inn bilder!)
Angående bildets URL var det her bare angitt med bildets navn, 468x60.gif, og vil da ligge i samme mappe som selve HTML dokumentet! Har du en mappe med bilder du har kalt "images", vil URL være: images/468x60.gif - innenfor samme webområde.
(Du kan selvfølgelig ha en absolutt URL i src attributtet også, f.eks: http://www.apasje.com/html/images/468x60.gif)
Img taggen er en av noen elementer som er selvlukkende. Det vil si at slutt tagg ikke er nødvendig! (Jada, jeg vet, er litt innviklet dette til du forstår selve syntaksen/oppbyggingen) Ved slike tagger brukes et mellomrom etter siste anførseltegn, og en backslash til slutt for å lukke taggen.
Slike elementer og attributter som brukes i tagger finnes det mange av, så sett av litt tid til dette! Spesifiseringer finner du både på W3C og W3Schools. Du vil også ha utbytte av å gjennomgå seksjonen CSS og stilsett her på apasje, som du finner i menyen oppe til venstre.
La denne delen synke litt inn før du klikker neste..
SØK ressurser
HJELP til Hjemmesiden
Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.