En närmare titt på en webbsidas uppbyggnadLektion två

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).

Min första webbsida

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.

Min första rubrik!

Den högsta rubriknivån. Header, rubrik, nivå 1.

Ett fösta stycke text.

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-taggen innefattar hela sidan. Head översta delen och body själva innehållet.

HTML-element

Alla html-element har en start-tagg och en avslutningstagg:

Min första rubrik!

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 , och ? Ha i åtanke att några av dem kommer ha påhakade attribut som till exempel start-taggen som på Digiteket också innehåller information om vilket språk sidan är på: . Här är lang ett attribut till html som berättar vilket språk sidan är på. Om du inte hittar kan du tjuvtitta på facit här!

Överkurs! Kan du hitta hr-taggen som vi använde ovan i koden?

Högerklickmeny i Chrome på webbsida: Visa sidkälla.

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.

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Ola Nilsson

Publicerad:

Reviderad: