HTML Grunder

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.

I HTML5 så dyker ett antal nya element(taggar) 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, nu skriver vi endast taggen:

<!doctype html>

längst upp i dokumenrtet. Nu kommer vårt startläge se ut på följande sätt (vi förutsätter att alla har någorlunda nya webbläsare):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grundkod för HTML5</title>
</head>
<body>

</body>
</html>

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 i HTML att blanda stora och små.

T ex tolkas <a href=”#”>xxx</a>
lika som <A HRef=”#”>xxx</a> lika i HTML5.

Använd sluttagg fär alla taggar som omsluter något, <p>Lite text</p>.

Även om det inte är nödvändigt med citattecken runt attributvärden så använd det för tydligheten (<p class=”specialare”>).

Det går att använda en slut “slash” för taggar som inte innesluter något, <hr />, <img src=”x.jpg” alt=”xx” />, osv. Det är en kvarleva för att vara bakåtkompatibel med XHTML, HTML har inga krav på detta.

Första sidan

<!doctype html>

<html>

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

<hr>

<h1><em>Lägga in en bild förhöjer sidans trista <sup>d</sup> <sub>e</sub> s <sup>i</sup> <sub>g</sub> <sup>n</sup>.</em></h1>

<p>

<!-- Bra att samla alla bilder i en separat mapp -->

<img src="bilder/musslor.jpg" alt ="musslor">

</p>

<h2>Några länkar...</h2>

<p>

<a href="http://www.boras.se">Borås hemsida</a>

<br />

<a href="http://www.w3schools.com/html5/html5_reference.asp">Alla html-taggar. OBS! Vi kommer lära oss de flesta så småningom.</a>

<br><br>

Högerklickar du på sidan, så kan du välja att få se själva koden som skapar denna sida.

</p>

<p>

Validerad? <a href="http://validator.w3.org" target="_blank">http://validator.w3.org</a>

</p>

</body>

</html>

En tagg (på svenska märkord) är till exempel <p> som betyder stycke. Ett element är allt från starttaggen till sluttaggen.

Några element är som osynliga (sätter vi bakgrundsfärg på dom så syns de tydligt) rutor på sidan, de kallas block-element och kan innehålla andra block-element och inline-element (som länk <a>, bild <img>, <strong>, osv . Inline-element kan inte innehålla block-element. Vi får också valideringsfel om vi stoppar in en h1-h6 tagg i en p-tagg.

Ofta när vi pratar nämner vi ett taggnamn och menar hela elementet.

Källor

HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)w3schools – html5 

Filmer

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)

XHTML and CSS Tutorial – 6 – Adding Links to our Webpage (thenewboston 7 min)

XHTML and CSS Tutorial – 9 – Adding Images to the Webpage (thenewboston 5 min)

XHTML and CSS Tutorial – 10 – Resizing Images (thenewboston 5 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”> .