Koda HTML

HTML är inte ett programmeringsspråk utan det är ett språk för att beskriva text. För en snabb lathund se Lista över taggar.

Syntax

Formatering med HTML görs av så kallade "taggar". Allt som inte är mellan "taggar" behandlas som vanlig text. Man visar att en tagg börjar med <tagg> och att taggen är avslutad med </tagg>. Det finns taggar som inte har behov att ha något innehåll mellan start-taggen och slut-taggen, t.ex. radbrytartaggen . Då kan man kombinera starttaggen och sluttaggen i en tagg så att det blir istället för . HTML är inte heller hårt typat, d.v.s det kräver inte att syntaxen är riktig jämt utan accepterar ofta utlämnade sluttaggar så för att radbryta räcker det med . Det är ändå bra att vänja sig vid korrekt syntax, framförallt för att det är omöjligt att veta hur felaktig syntax tolkas i olika sammanhang, förutom av webbläsare t.ex. vid omvandling av HTML till andra format.

Grundläggande taggar

<html> All html-kod måste vara mellan start- och sluttaggen </html>
<head> och </head> Inom den här taggen kan man ange information om sidan, så kallad metainformation.
<!DOCTYPE> I senare versioner av HTML förutsätts att man anger vilken version av HTML man använder, med en länk till den formella beskrivningen av versionens syntax. Kontrollera hur koden skall se ut för den version du använder. Taggen är inte nödvändig för alldeles enkla webbsidor (som fungerar som HTML 1.0).
<title> </title> Koden som är mellan start- och sluttaggen här ger titeln, som ofta visas som namn på webbläsarfönstret, som namn på bokmärket till sidan och liknande. Den här taggen är mellan <head>-taggarna
<body> </body>All html-kod som har med själva sidan att göra, det som syns i webläsaren, ska vara mellan dessa taggar
Kommentarer kan läggas in i en speciell kommentartag:  (som inte får innehålla dubbla bindestreck)

Exempel

Kod:

<html>

<head>
<title>Hejsan världen!</title>
<⁠!-- detta är bara ett exempel -->
</head>
<body>
Hello world!
</body>
</html>

Utskrift:

Hello world!

Strukturtaggar

<h1> Ger sidans rubrik
<h2> Ger en underrubrik
...
Ger ett nytt stycke
<ul> Ger en "oordnad" lista (onumrerade punkter)
<ol> Ger en "ordnad" lista (numrerade punkter)
<li> Ger en punkt i listan

Listor

Kod:

<h4>Underrubrik</h4>
<ol>
<li>punkt1</li>
<li>>punkt2</li>
<ul>
<li>underpunkt, onumrerad</li>
</ul>
</ol>

Utskrift:

Underrubrik

punkt1
punkt2

underpunkt

Till strukturtaggarna hör också de som beskriver en tabell.

Länkar

Länkar till andra sidor kan läggas in på många olika sätt. I <head>-avsnittet kan man ha länkar som anger hur dokumentet förhåller sig till andra dokument med <link>- och <meta>-taggar. Med sådana kan man också inkludera CSS-beskrivningar, javascript mm.

De vanligaste länkarna är de där ett eller några ord på webbsidan blir en länk till ett annat dokument eller ett annat ställe i webbsidan:

<a href="webbadress">ord som skall bli länk</a>
<a href="http://www.example.org/någon/sida.html">sida på annan webbplats</a>
<a href="/någon/sida.html">sida på samma webbplats</a>
<a href="sida.html">sida i samma katalog</a>
<a href="#referens">plats i samma dokument</a>

För att länkar till en viss plats i dokumentet skall fungera måste man placera ut ankaren:

<a name=referens>rubrik eller andra lämpliga ord</a>

Bilder läggs in i dokumentet med <img>. Bilden kommer att placeras i samband med det stycke där taggen finns. alt-attributet ger en text istället för bild då bilder inte laddas (t.ex. p.g.a långsam förbindelse).

<img src="http://www.example.org/bildkatalog/bild.png" alt="">

Formulär

HTML innehåller taggar för ett antal element som kan behövas i formulär: text, knappar etc. Då läsaren trycker ”skicka” skickas formuläret till en i formuläret angiven webbadress. Webbservern förmedlar då formulärets innehåll till ett program angivet genom webbadressen, genom CGI-gränssnittet. Programmet är ofta skrivet i något av programspråken perl, php eller python.

Om man själv installerar CGI-program gäller det att försäkra sig om att den som underhåller programmet, och den som underhåller servern, har en god förståelse för webbsäkerhet. Det är lätt hänt att det går att trixa programmet att genomföra attacker på eller via servern.

Taggar för fysiska attribut

Ger fetstil
Ger kursiv stil
Ger mindre text
<big> Ger större text </big>

I allmänhet bör man inte använder dessa taggar, då HTML hellre skall beskriva sidinnehållet och själva utseendet på texten lämnas till webbläsaren, som bättre känner läsarens behov och omgivning. Till exempel är det oklart hur fetstil bör presenteras för en blind, medan taggen anger att läsaren skall betona texten på lämpligt sätt.

Om man vill ha bättre kontroll över sidans utseende skall man bekanta sig med CSS, som anger hur olika element skall presenteras på ett mycket mångsidigare sätt, utan att störa textens med HTML beskrivna struktur.

Exempel

Kod:

<html>

<head>
<title>Hejsan världen!</title>
</head>
<body>
Hello world! 
Hello people! 
Hello children! 
<big>Hello everybody!</big>
</body>
</html>

Utskrift:

Hello world!

Hello people!
Hello children!

Hello everybody!

Att skriva HTML

En väsentlig skillnad mellan HTML och dokument avsedda för utskrift är att en webbredaktör inte har någon kontroll över den omgivning i vilken HTML-dokumentet skall formateras: dokumentet kan läsas med en mobiltelefon, med hjälp av en skärmläsare eller med annan apparatur med begränsade förmågor. Också med en vanlig dator kan läsaren använda extremt stora eller små fonter, använda hela skärmen eller ett litet fönster och eventuellt använda avancerade filter för att få bort oönskat innehåll.

Det lönar sig inte att börja ett krig med användaren, utan istället bör man använda de medel som bjuds för att hjälpa läsarens utrustning att ge en optimal upplevelse i just den omgivningen.

Textredigerare

Enklare webbsidor kan lätt skrivas med en textredigerare. Koden skrivs då som i exemplen ovan. Textredigerare skiljer sig från ordbehandlare genom att de inte på eget bevåg lägger in styrkoder i texten och man har då kontroll över vad som skall finnas i filen som skickas till webbläsaren.

En del webbutvecklare använder mer avancerade textredigerare som sitt huvudsakliga verktyg också ifråga om avancerade webbplatser.

Ordbehandlare

De flesta ordbehandlare kan nuförtiden spara filer som HTML. Den kod de genererar är ofta svårläslig och också annars problematisk, till exempel kan typsnitt väljas som för pappersutskrifter, utan tanke på vad som är lämpligt på nätet. Om man skall använda en ordbehandlare som hjälp vid seriös webbutveckling gäller det att se till att man kan kontrollera koden, till exempel så att man har ett program som tar bort skräpet och så att man arbetar vidare på dokumentet med en textredigerare.

HTML-redigerare

Det finns också särskilda HTML-redigerare. Dessa ger möjlighet att använda avencerade tekniker, men kan ha samma problem som ordbehandlare, att de lägger in onödig problematisk kod.

Webbpubliceringssystem

Nuförtiden är det också vanligt att inte skriva själva webbsidorna själv utan använda ett programpaket som kombinerar olika filer lagrade i databaser till de sidor som skall visas upp, i enklare fall så att sidhuvud, sidfot, menyer, layout och liknande lagras skilt från sidans innehåll. En del av dem (såsom MediaWiki) använder ett eget märkspråk istället för HTML, och omvandlar sidan till HTML på egen hand.