En närmare titt på en webbsidas uppbyggnad
I din första webbsida så fick du stifta bekantskap med de grundläggande taggarna som utgör en html-sida. Nu ska vi ta och lära känna dem lite närmare och vi tittar på kodelement i första webbsidan igen.
Detta berättar för webbläsaren att det är den version som kallas HTML5 som används.
Innanför denna och dess avslutande tagg finns hela webbsidan (bortsett från !DOCTYPE)
Detta element innehåller metainformation om webbsidan, till exempel sidans titel (det som syns i fliken uppe i webbläsarfältet).
Webbsidans titel, det vill säga det som står i fliken längst upp i webbläsarfönstret.
Här avslutas huvudet, sidans metainformation.
Här börjar sidans kropp, det vill säga dess innehåll. Allt innanför body är det som visuellt syns.
Den högsta rubriknivån. Header, rubrik, nivå 1.
Ett stycke text (efter P som i paragraph, paragraf).
Sidans kropp avslutas.
Webbsidan avslutas.
Uppbyggnadens hierarki kan visuellt representeras som nedan, tänk på att det bara är det som är vitmarkerat som är inom body som syns för en besökare.
HTML-element
Alla html-element har en start-tagg och en avslutningstagg:
Innehållet mellan taggarna är det som påverkas av taggen. I detta fall så kommer texten ”Min första rubrik!” förevisas för besökaren på sidan i rubriknivå 1.
Det finns vissa taggar som inte har en avslutningstagg men de hör till undantagen. En är till exempel horisontellt streck-taggen hr
Övning
Högerklicka någonstans på skärmen där du läser detta och välj ”Visa sidkälla”. Du kommer nu få se ”bakom kulisserna” på Digiteket. Här finns all kod som styr all funktionalitet och hur den ska visas upp på din skärm.
Kan du hitta start- och avslutningstaggarna för html?
Överkurs! Kan du hitta hr-taggen som vi använde ovan i koden?
Uppgift
Skapa en ny tom Anteckningar-fil. Se om du kan återskapa html-sidans uppbyggnad utan att tjuvkika på det du gjort tidigare. Använd följande taggar och korrelerande slut-taggar:
- body
- head
- html
- p
- h1
- h2
- !DOCTYPE html
- title
Döp den till uppgift1.html och testa om du fick rätt på det genom att öppna den i webbläsaren. Om det blev vajsing så kan du pröva dig fram eller kolla i facit.