Denna hemsida beskriver bl.a. de fem grundläggande elementen som bör förekomma i alla hemsidor. Funktion hos taggars attribut (som bl.a. påverkar taggars utseende) behandlas liksom hur man markerar rubriker och stycken samt hur man infogar bilder.
... nya strukturella taggar i HTML 5.
... de fem som bör finnas i alla sidor, taggars attribut samt färg för bakgrund och text.
Det finns fem element som bör (måste) vara med i ett (X)HTML-dokument för att det ska vara en giltig hemsida. Webbläsare brukar dock vara "förlåtande" och visa hemsidan ändå, dock utan garanti om hur. Nedan visas taggarna för elementen och vad de betyder.
<!DOCTYPE ...><html><head><title><body>Nedan visas ett exempel på var taggarna (för "de fem" elementen) ska placeras i dokumentet och hur de förhåller sig till varandra.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Se exempel 1.1 - tom hemsida
I detta exempel ges sidan titeln "En demonstration av HTML-kod". Dokumentets kropp (body) innehåller lite text och en kommentar. Observera att trots att texten till kroppen har skrivits på tre rader i HTML-koden så visas eventuellt inte texten med radbrytningar på samma ställe!
Observera att taggen <!DOCTYPE ...> har utelämnats här och i alla efterföljande exempel.
<html>
<head>
<title>En demonstration av HTML-kod</title>
</head>
<body>
<p>Denna hemsida demonstrerar de grundläggande elementen i HTML. Texten i kroppen syns i webbläsarens fönster.</p>
<!-- Kommentar som inte syns -->
</body>
</html>
Se exempel 1.2 - med titel, text i kroppen och en kommentar.
Attribut används för att ange egenskaper för ett element. Egenskaperna kan ändra elementets utseende, position, m.m.. Värdet för ett attribut anges på något av följande sätt - attribut med värde resp. attribut utan värde (så som att kryssruta ska vara förbockad).
attributnamn="värde"
attributnamn="attributnamn"
Det är fortfarande möjligt att använda attribut så som color
och bgcolor för att ändra för- och bakgrundsfärger i vissa element.
Men man bör använda stilmallar (CSS) istället för att ange färger.
I HTML 5 introduceras ett antal strukturella taggar, d.v.s. taggar som inte påverkar webbsidans utseende (annat än kanske radbrytningar före och efter).
<header><footer><nav><section><article><aside><hgroup>Rubriker och stycken används, som i vilken ordbehandlare som helst, för att dela upp texten i mindre delar och därmed göra den mer lätt läst.
I (X)HTML finns 6 fördefinierade nivåer för rubriker och som alla oftast visas med fet stil.
Rubrikerna för de olika nivåerna markeras med taggarna <h1>
till <h6> (eng. heading). Som exempel 1.4
visar så är oftast nivåerna 5 och 6 för rubriker mindre en vanlig text. Genom
att använda de fördefinierade rubrikerna kan man ganska enkelt ändra
utseendet på dem (i alla hemsidor på t.ex. en hel webbplats) m.h.a.
CSS.
Stycken i (X)HTML (eller snarare i webbläsare) skiljer sig något från stycken i ordbehandlare då de oftast visas med en rads mellanrum mellan styckena. Stycken markeras med taggen <p> (eng. paragraph). Avslutande tagg bör alltid användas för att t.ex. CSS ska fungera).
<html>
<head>
<title>Rubriker och stycken</title>
</head>
<body>
<h1>Rubrik nivå 1</h1>
<h2>Rubrik nivå 2</h2>
<h3>Rubrik nivå 3</h3>
<h4>Rubrik nivå 4</h4>
<h5>Rubrik nivå 5</h5>
<h6>Rubrik nivå 6</h6>
<p>Ett stycke vanlig text</p>
<p>Ett stycke till med vanlig text. Observera den tomma raden mellan styckena men inte inom detta stycke (som bör vara minst två rader).</p>
</body>
</html>
Se exempel 1.4 - rubriker och stycken
Med risk för att låta lite klichéartat så vill även jag påstå att bilder säger mer än tusen ord. :-) Bilder gör även hemsidor roligare att titta på. Men viktigt att komma ihåg är att bilder tar tid att ladda ner - ganska lång tid om man har en dålig uppkoppling till Internet. Därför bör man begränsa antal och storlek på bilder i en hemsida för att minska nerladdningstiden för en hemsida (d.v.s. tiden det tar för webbläsaren att visa hela hemsidan).
Bilder kan vara något av formaten GIF (.gif), JPEG (.jpg) eller PNG (.png).
GIF-bilder används ofta för ikoner eller ritade bilder då detta format endast tillåter 256 färger.
För fotografier lämpar sig JPEG-bilder bättre då antalet färger kan vara mer än 256.
Den tredje bildtypen - PNG (uttals oftast "ping") - har utvecklats för Internet och är bl.a. tänkt som en ersättare till GIF-bilder (vilket är ett licensskyddat format).
<img>För att infoga (länka in) en bild i en hemsida så använder man
taggen <img> (eng. image) och anger sökvägen (URL:en) till
bildfilen i taggens attribut src (eng. source). Bildfilen är
m.a.o. inte en del av dokumentet (som i de flesta ordbehandlare) utan
måste finnas tillgänglig på webbservern (eller någon annan
webbserver). Attributet src är obligatoriskt.
Besökare på Internet kan vara ganska otåliga, d.v.s. ju längre tid det tar att ladda ner och visa en hemsida ju större chans är det att besökaren bestämmer sig för att gå till en annan hemsida. Ett sätt att snabba upp visningen av en hemsida med bilder är att alltid ange höjden och bredden på en bild. Genom att förse webbläsare med denna information kan webbläsaren snabbare avgöra en hemsidas uppbyggnad och därmed snabbare börja visa hemsidan för besökaren. Man bör m.a.o. alltid ange bredd och höjd på alla bilder.
<img src="bild.jpg"
alt="Text om bild
inte visas" />
För att ange bredd och höjd på en bild använder man attributen width
respektive height i taggen <img>. Värdet
för dessa attribut anges som bildpunkter (pixlar). I exemplet nedan har t.ex.
bilden bild.jpg bredden 283 pixlar och höjden 212 pixlar.
<img src="bild.jpg" width="283"
height="212" alt="..." />
Se exempel 1.5 - bild inlänkad med <img>.