HTML Grunder - Baskod
Vad är HTML
HTML (HyperText Markup Language) är ett enkelt språk som innehåller instruktioner för hur en webbsida ska struktureras och visas. Webbläsaren tolkar instruktionerna, små koder(taggar) styr då logik och struktur på sidan.
HTML5 är den senaste specifikationen på hur vi ska skriva webbsidor och hur webbläsarna ska tolka detta. HTML5 är fortsättningen på HTML 4 och XHTML 1.0 (som är HTML 4 men med strikt XML syntax). HTML5 är skapat så att det är bakåtkompatibelt med de tidigare specifikationerna. Det ska alltså gå att ta bort header-specifikationen i validerade webbsidor och ersätta den med header-specifikationen för HTML5 och de ska fungera precis som tidigare. HTML5 är det som används idag och specifikationen är fortfarande under utveckling.
W3C (World Wide Web Consortium)är det organ som normalt skapar rekommenderade standarder för webbtekniker. En grupp skapades 2004 (WHATWG - Web Hypertext Application Technology Working Group) parallellt med W3C . De utvecklade specifikationer på var sitt håll. W3C arbetade med sin version men W3C gav upp sin egen utveckling och byggde sin på WHATWG's. Genom samarbete så skapades HTML5 som inte är klar utan fortfarande under utveckling.
I HTML5 så dyker ett antal nya element upp. En annan viktig del är också att förenkla video och ljud hantering på webbsidor.
Dokumenttyp och grundmall
Tidigare skrev vi en superkrånglig "doctype" för att webbsidan skulle tolkas korrekt av webbläsaren, dvs den skulle arbeta i "standard mode" iställer för att hamna "quirk mode" läget som var långsammare och där webbläsaren gjorde sitt bästa för att tolka webbsidan. Nu skriver vi endast
DOCTYPE är en deklaration som talar om för webbläsaren att här kommer ett HTML5-dokument.
Vårt startläge för grundsstrukturen kommer se ut på följande sätt :
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Grundkod för HTML5</title>
</head>
<body>
<!-- innehållet på webbsidan -->
</body>
</html>
<html> är vårt "root"-element. Det rekommenderas att lägga till attributet lang och talar om på vilket språk texten på sidan är skriven. Det blir inte fel syntax om hoppar över attributet lang, men om vi senare ska uppfylla kraven på korrekt webbtillgänglighet så måste det vara med.
<head> elementet innehåller lite instruktioner som är bra för webbläsaren att veta. Även för sökmotorer är det viktigt att sidan har en relevant och bra titel.
<meta> som i det här fallet säger att vi använder teckenkodning "utf-8". Meta-taggen är en av några få som inte innesluter något och därför är starttagg och sluttagg i samma tagg. I det här fallet så har taggen attributet "charset" som sätts till värdet "utf-8".
<title> är den text som visas i fliken eller fönstertiteln.
<body> innehåller det som ska visas i dokumentfönstret.
<!-- ... --> är en kommentar som webbläsaren hoppar över och som därmed inte syns i dokumentfönstret.
Sen avslutas i logisk ordning body-elementet och html-elementet.
Som vi ser
så har de flesta element en start och sluttagg, som talar om att viss inställning börjar och senare avslutas.
Första sidan
Den är inte så spännande layoutmässigt. Men vi bygger ut grundmallen med de vanligaste elementen. Det blir en okej sida att starta med. Vi får med stycken, rubriker(olika nivåer).
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title> FÖRSTA SIDAN </title>
</head>
<body>
<h1>Min första rubrik (i storlek h1)</h1>
<!-- En kommentar, kommer inte att synas när vi tittar i webbläsaren -->
<p>
Det här blir den allra första webbsidans allra första stycke. Innehållet kommer
inte att vinna några priser, men det är tanken som räknas. Här har vi lite text i
<strong>fetstil</strong> och <em>kursiv stil</em> som skrivs med html-taggarna
<strong>strong</strong> och <em>em</em>.
</p>
<p>
Nytt stycke med rad-<br />
byte mitt i en mening!<br />
Det får man enklast med br-taggen
</p>
<hr />
Runt rubriker som denna <h1>Största rubriken h1</h1> skapas automatiskt tomrum till texten. Trots att allt står på samma rad i koden.
<p>
Undvik att skriva text som inte finns i något block-element som p, h1-h6 (fler lär vi oss senare).
</p>
<h2>Näst största rubriken h2</h2>
<h3>Storlek h3</h3>
<h4>... h4...</h4>
<h5>...och så h5...</h5>
<h6>...och till SIST DEN SJÄTTE OCH MINSTA (h6)</h6>
<p></p>
<hr />
<p>
<!-- Fundera inte över hur nedanstående länkkod är uppbyggd, det kommer i nästa del. -->
Validerad? <a href="https://validator.w3.org" target="_blank">https://validator.w3.org</a>
</p>
</body>
</html>
Element respektive tagg
- Element
- Inledande och avslutande taggar och det mellan taggarna brukar gemensamt benämnas element, tex rubrikelementet <h1>Teori</h1> och stycken <p>...</p>.
- Tagg
- Det vi skriver mellan vinkelparenteser(krokodilerna!), tex <p> som används för att markera att ett stycke börjar. Eller </p> där stycket slutar.
Element inuti ett annat element
Vi kan inte stoppa in valfritt element i ett annat element utan vi måste följa en viss logik, mer om det i senare delar av kursen.
Vi får till exempel valideringsfel om vi stoppar in en h1-h6 tagg i en p-tagg.
HTML5 syntax
Här är några riktlinjer för enklare läsbarhet:
Använd små bokstäver för all kod (även om det okej att blanda stora och små, t ex tolkas <tiTLe>xxx</TItlE> lika som <TITLE>xxx</title>
lika som <title>xxx</title> i HTML5.
Enda gången vi vill/kan/bör använda stora bokstäver för kod är ordet DOCTYPE. Det ses ofta skrivet med stora bokstäver men det går även bra med små.
Använd sluttagg fär alla element som omsluter något, <p>Lite text</p>.
(Webbläsaren försöker alltid göra sitt bästa om vi glömt något och ibland ser det bra ut även om vi glömt sluttaggen.)
Även om det inte är nödvändigt med citattecken runt attributvärden så använd det för tydligheten (<html lang="sv">).
Använd en slut "slash" för taggar som inte innesluter något, <hr />, <meta charset="utf-8" />, osv. För ökad tydlighet. Det är en kvarleva för att vara bakåtkompatibel med tidigare versioner av XHTML. HTML har inga krav på detta.
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
"Engineer Man" om HTML grunder, första 5 minutrarna(aug 2020)
HTML5 Tutorial - 1 - Introduction (thenewboston 4 min)
HTML5 Tutorial - 2 - Creating a Basic Template (thenewboston 7 min)
Kommentar: Hoppa över link-taggen så länge.
Videos om från den tidigare HTML-standarden som visar hur allt fungerar
(Dessa behövs innan man går vidare med speciella HTML5 taggar)
XHTML and CSS Tutorial - 2 - Creating our First Webpage (thenewboston 9 min)
XHTML and CSS Tutorial - 3 - body and headers (thenewboston 5 min)
XHTML and CSS Tutorial - 4 - Paragraphs and Line Breaks (thenewboston 9 min)
XHTML and CSS Tutorial - 5 - Bold, Italics, and Comments (thenewboston 8 min)
Kommentar 1: I HTML5 behöver vi inte avsluta "tomma" taggar som meta, img, br, hr med /> utan det räcker med >.
Kommentar 2: I HTML5 är det nödvändigt att ange attributet alt i img-taggen.
Ett exempel <img src="xxx.jpg" alt="Gärna en kort beskrivning av bilden"> .