HTML Grunder - Bild och länk
Första sidan - UTÖKAD
Den är inte så spännande layoutmässigt. Men vi bygger ut grundmallen med de vanligaste elementen (och några få ovanliga). Det blir en okej sida att starta med. Vi får med stycken, rubriker(olika nivåer). Bild och det självklara, länkar. Länkar som är hypertext, det vill säga klickbar text som gör att en ny webbsida hämtas.
<!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 />
<h2><em>Lägga in</em> en <em>bild</em> förhöjer <em>sidans</em> trista <em>design</em>.</h2>
<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.vgy.se">Värmdö Gymnasiums hemsida</a>
<br />
<a href="http://www.w3schools.com/html5/html5_reference.asp" target="_blank">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>
<hr />
<p>
Validerad? <a href="https://validator.w3.org" target="_blank">https://validator.w3.org</a>
</p>
</body>
</html>
Våra nya element bild(img) och länk(a) har olika attribut som ska finnas med i starttaggen.
Bildelementet vill ha källan(src), dvs var finns bildfilen i förhållande till själva webbsidan i filstrukturen eller en absolut webbadress(inte så vanligt). Dessutom måste vi med attributet "alt" där vi gärna beskriver vad bilden visar främst för de som har nedsatt syn och inte kan se bilder (de får innehållet uppläst). Det är så viktigt att det blir valideringsfel om vi glömmer alt-attributet.
Länken, vår "hypertext", vill också ha källan på webbsidan vi vill ladda in men heter här "href" som står för "hypertext reference". Källan anges med en filsökväg till html-filen eller med
en webbadress. Här kan vi lägga till attributet target="_blank" om vi vill att webbsidan ska visas i en ny flik annars kommer den upp i samma flik och visas istället för den ursprungliga sidan.
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
"Engineer Man" om HTML grunder, minut 6-11(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)
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"> .