Ett märke i HTML anger att webläsaren ska göra någonting speciellt och om webläsaren inte skulle känna igen märket ignorerar den det helt enkelt. Det är väldigt tydligt vad som är märken i HTML-kod eftersom det börjar med tecknet '<', som inom matematiken betyder "mindre än", och slutar med tecknet '>', som inom matematiken betyder "större än".
Många märken består av två delar, exempelvis märket <HTML> som talar om att efterföljande text är HTML-kod ända tills märket </HTML> kommer och avslutar det hela. Generellt sett kan man se det som att ett märke slår på en sak och att samma märke med ett divisionstecken '/ ' slår av den. Märket <HTML> är det märke som vanligtvis är det första i ett HTML-dokument. Om man inte använder sig av märket kan det hända att webläsaren beslutar sig för att visa dokumentet som en vanlig textfil och ignorerar alla andra märken vilket inte alls leder till det resultat du troligtvis har väntat dig.
Det är vanligt att märket <HTML> efterföljs av märket <HEAD> som definierar att dokumentets huvud börjar. </HEAD> talar om att dokumenthuvudet tar slut. Ett HTML-dokument består vanligtvis av två delar, huvud och kropp. I huvudet kan man göra vissa inställningar som har med dokumentet att göra.
Efter huvud kommer dokumentets kropp som är det egentliga dokumentet. Här finns all text som dokumentet innehåller. Kroppen påbörjas med märket <BODY> och avslutas med märket </BODY>.
Samtidigt som man påbörjar det egentliga dokumentet med <BODY> kan man göra en hel del inställningar. Man kan ställa in bakgrundsfärgen genom att ange den som ett hexadecimalt RGB-värde. Genom att blanda färgerna röd, grön och blå kan man få fram alla andra färger. Exempelvis får man svart då man inte använder någon färg alls, det hexadecimala talet för svart blir således "#000000". Om man däremot blandar så mycket man kan av alla färger får man en vit färg och hexadecimalt blir det "#FFFFFF". För att få en vit bakgrundsfärg kan man alltså påbörja dokumentets kropp med <BODY BGCOLOR="#FFFFFF">. Observera att det hexadecimala talet ska inledas med en "fyrkant", '#'.
Man kan också ställa in färger för annat; med <BODY TEXT="#000000"> ställer man textfärgen till svart. Om man vill ändra färgen för länkarna anger man LINK, för besökta länkar anger man VLINK (eng. visited link). Det går också att ställa in vilken färg länkarna ska ha just då användaren klickar på dem, det anger man med ALINK (eng. active link).
För att göra det hela lite klarare kommer ett exempel där bakgrundsfärgen ställs till vit, textfärgen till svart, länkar till blå, besökta länkar till röd och länkar då man klickar på dem till grön. Det blir alltså: <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#00FF00">
Om du fortfarande tycker att det verkar väldigt avancerat och krångligt att räkna fram hexadecimala tal för att ange färger kanske du blir glad när du får veta att det finns 16 fördefinierade färger som ingår i HTML-standarden. Dessa är: Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia och Aqua.
Det kan också vara bra att veta att webläsare i normala fall mer eller mindre ignorerar så kallade "white space characters", det vill säga tecken som mellanslag, enter och liknande. Om man skriver ett mellanslag mellan två ord tar webläsaren givetvis inte bort mellanslaget; men om man däremot skriver fler så blir det i normala fall ingen skillnad.
I dokumentets huvud kan man ange ett flertal saker, bland det viktigare är dokumentets titel. Man skriver in titeln mellan märket <TITLE> och </TITLE>. Hur titeln sedan visas beror på vilken webläsare man använder men i Netscape visas titeln på namnlisten.
Nu kan vi tillräckligt många märken för att skapa en enkel webbsida med huvud, kropp och titel. För att skapa en hemsida med titeln "Min första hemsida" och innehållet "Det här är min första hemsida" behöver man skriva följande HTML-kod:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <BODY> Det här är min första hemsida </BODY> </HTML>
Indragen och radbrytningarna är det naturligtvis valfritt att placera där man tycker att de passar bäst.
Om du skriver in koden i en fil och tittar på den med en webläsare så kan du se din första hemsida. Men de svenska tecknen (å, ä och ö) kan se konstiga ut beroende på vilken editor och webläsare du använder. I sådana fall måste man ersätta dessa tecken med specialtecken. Det resulterar i följande HTML-kod:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <BODY> Det här ör min första hemsida </BODY> </HTML>
Själv använder jag mig alltid av dessa specialtecken för att vara säker på att tecknen ska ha rätt utseende oberoende av vilket system läsaren använder. I fortsättningen av detta dokument kommer jag dock inte att göra det eftersom det gör texten mer svårläst om man har teckenkoder istället för de verkliga tecknen. Här följer en tabell över de vanligaste specialtecknen:
| Tecken | Symbolisk kod | Numerisk kod | Kommentar |
|---|---|---|---|
| |   | Fast mellanslag | |
| ¡ | ¡ | ¡ | |
| ¢ | ¢ | ¢ | |
| £ | £ | £ | |
| ¤ | ¤ | ¤ | Symbolen för valuta |
| ¥ | ¥ | ¥ | yen |
| ¦ | ¦ | ¦ | |
| § | § | § | |
| ¨ | ¨ | ¨ | |
| © | © | © | skrivs även (C) - Copyright |
| ª | ª | ª | |
| « | « | « | |
| ¬ | ¬ | ¬ | Symbolen för icke |
| | ­ | ­ | |
| ® | ® | ® | |
| ¯ | ¯ | ¯ | |
| ° | ° | ° | Tecknet för grader |
| ± | ± | ± | Plus/Minus |
| ² | ² | ² | Upphöjd 2:a (kvadrat) |
| ³ | ³ | ³ | Upphöjd 3:a (kubik) |
| ´ | ´ | ´ | |
| µ | µ | µ | Tecknet för micro |
| ¶ | ¶ | ¶ | |
| · | · | · | |
| ¸ | ¸ | ¸ | |
| ¹ | ¹ | ¹ | Upphöjd 1:a |
| º | º | º | |
| » | ´ | » | |
| ¼ | ¼ | ¼ | En fjärdedel |
| ½ | ½ | ½ | En halv |
| ¾ | ¾ | ¾ | Tre fjärdedelar |
| ¿ | ¿ | ¿ | |
| À | À | À | |
| Á | Á | Á | |
| Â | Â | Â | |
| Ã | Ã | Ã | |
| Ä | Ä | Ä | |
| Å | Å | Å | |
| Æ | Æ | Æ | |
| Ç | Ç | Ç | |
| È | È | È | |
| É | É | É | |
| Ê | Ê | Ê | |
| Ë | Ë | Ë | |
| Ì | Ì | Ì | |
| Í | Í | Í | |
| Î | Î | Î | |
| Ï | Ï | Ï | |
| Ð | Ð | Ð | |
| Ñ | Ñ | Ñ | |
| Ò | &Ograev; | Ò | |
| Ó | Ó | Ó | |
| Ô | Ô | Ô | |
| Õ | õ | Õ | |
| Ö | Ö | Ö | |
| × | × | × | Multiplikationstecken |
| Ø | Ø | Ø | |
| Ù | Ù | Ù | |
| Ú | Ú | Ú | |
| Û | û | Û | |
| Ü | Ü | Ü | |
| Ý | Ý | Ý | |
| Þ | Þ | Þ | |
| ß | ß | ß | |
| à | à | à | |
| á | á | á | |
| â | â | â | |
| ã | ã | ã | |
| ä | ä | ä | |
| å | å | å | |
| æ | æ | æ | |
| ç | ç | ç | |
| è | è | è | |
| é | é | é | |
| ê | ê | ê | |
| ë | ë | ë | |
| ì | ì | ì | |
| í | í | í | |
| î | î | î | |
| ï | ï | ï | |
| ð | ð | ð | |
| ñ | ñ | ñ | |
| ò | ò | ò | |
| ó | ó | ó | |
| ô | ô | ô | |
| õ | õ | õ | |
| ö | ö | ö | |
| ÷ | ÷ | ÷ | Divisionstecken |
| ø | ø | ø | |
| ù | ù | ù | |
| ú | ú | ú | |
| û | û | û | |
| ü | ü | ü | |
| ý | ý | ý | |
| ´ | ´ | ´ | |
| þ | þ | þ | |
| ÿ | ÿ | ÿ |
Observera att när det gäller de symboliska teckenkoderna så är det skillnad på versaler och gemener. Jag rekommenderar användande av symboliska teckenkoder istället för numeriska eftersom de symboliska är lättare både att lära sig och att förstå då man läser ren HTML-kod.
Det finns ännu ett märke som kan användas i HTML-dokumentets huvud och det är märket <META>. Med meta kan man exempelvis ange dokumentets författare (author) och nyckelord (keywords). För att göra det i vår lilla webbsida skulle vi få skriva följande HTML-kod:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> <META NAME="author" CONTENT="Jonny Zetterström"> <META NAME="keywords" CONTENT="enkelt exempel på webbsida"> </HEAD> <BODY> Det här är min första hemsida </BODY> </HTML>
Det är i stort sett bara fantasin som begränsar vad du kan ange med hjälp av märket <META>. NAME kan nämligen vara i stort sett vad som helst.
Copyright (C) 1996-2019 Jonny Zetterström