HTML-kod Struktur

Koderna i HTML utgår från Engelskan... Förstås!

Men misströsta inte! Det går utmärkt att lära sig HTML även om man inte begriper ett smack av den rappakaljan.

Men ibland det kan bli lite förvirrande när man försvenskar engelska uttryck! Till exempel uttrycket: tags.

På svenska översätts tags med både uttrycket taggar och uttrycket märken - vilket kan vara bra att veta.

Innan du förkovrar dig i hur HTML-koden är uppbyggd är det bra om du läst igenom introduktionen om HTML och CSS under rubriken: HTML & CSS / Introduktion.

Element & Taggar

Så här funkar HTML-kod:

  • HTML-kod är uppbyggd av element
  • HTML-taggar används för att märka upp HTML-kodens element
  • HTML-taggar omges av de två taggiga tecknen < och >
  • HTML-taggar förekommer oftast i par som t.ex. <b> and </b>
  • Den första taggen är start-taggen och den andra är slut-taggen
  • Texten mellan dessa taggar är HTML-elementets innehåll
  • HTML-koden börjar med start-taggen: <html> och slutar med dess slut-tagg </html> - vilket betyder att allt mellan dessa taggar är skrivet med html-kod.

HTML-koden är alltså uppbyggd av taggar! I de flesta fall har ett element både en start-tagg och en slut-tagg.

Exempel

Om du vill framhäva något visuellt i en text kanske du vill att den ska visas i fetstil. Då måste det anges i dokumentet med taggar. Start-taggen <b> anger att texten ska vara fet (bold) och slut-taggen </b> att fetstilen ska upphöra.

Så här skrivs den koden in i textavsnittet:

Sannolikhet - det betyder väl någonting som är likt <b>sanning</b>? Men riktigt lika sant som sanning är det inte om det är sannolikt...

På sidan kan det då se ut så här:

Sannolikhet - det betyder väl någonting som är likt sanning? Men riktigt lika sant som sanning är det inte om det är sannolikt...
 Till Toppen 

Taggarnas inbördes ordning

Om du tittar på din sida i din webbläsare och det inte ser ut som du har tänkt dig beror det ofta på att taggarna har skrivits i fel ordning. Till att börja med är det kanske inte så komplicerat...

Men när sidan växer och taggarna blir fler och fler kan det bli lite knivigt att hålla reda på allihop.

Exempel

Vilka taggar som hör ihop illustreras genom att de har samma färg:

<p>Mellan p-taggar skriver man in ett stycke text på en html-sida. <b>Den här texten visas i fetstil</b> och <i>den här texten blir kursiv</i> - eftersom rätt taggar har skrivits in på rätt plats och i rätt ordning!</p>

Så här kan det se ut på sidan:

Mellan p-taggar skriver man in ett stycke text på en html-sida. Den här texten visas i fetstil och den här texten blir kursiv - eftersom rätt taggar har skrivits in på rätt plats och i rätt ordning!

Krångligt? Oroa dig inte! Du får kläm på det så småningom!

 Till Toppen 

Attribut och Värden

En tagg kan också innehålla ett eller flera attribut. Attributen ger extra information om det aktuella elementet och skrivs alltid in i start-taggen. Attributet ger man sedan ett värde.

Principen för hur en tagg med attribut och värde skrivs - ser ut så här:

<taggnamn attribut="värde">Detta syns på sidan!</taggnamn>

Med fler än ett attribut ser det ut så här i start-taggen:

<taggnamn attribut="värde" attribut="värde">
 Till Toppen 

Block & Inline

Generellt kan man säga att HTML-kod är uppbyggd av två sorters element. Block-element och inline-element.

Block-element presenteras på sidan som ett "block" och visas med en automatisk radbrytning före och efter elementet.

Inline-element visas "i linje" - det vill säga utan radbrytning före eller efter elementet.

En sidas innehåll ska byggas upp av block-element. Ett inline-element ska alltså inte förekomma utanför, mellan block-elementen.

Ett block-element kan innehålla inline-element och ibland också andra block-element. Men ett inline-element ska aldrig innehålla ett block-element.

Komplicerat? Äsch! Ta det lugnt! Det ger sig vartefter!

 Till Toppen 

Kommentar

Kommentarer är en finurlig funktion att använda sig av när man kodar i HTML eftersom kommentaren fungerar som en parentes i koden. Det som skrivs i kommentaren kommer inte att synas på själva sidan.

I själva KODEN syns däremot kommentaren och det är det som är vitsen, liksom. Med hjälp av kommentarer kan du strukturera upp din sida så att det blir lättare för dig själv att hitta i koden.

Om du högerklickar på den här sidan och väljer "Visa källa" kommer du att se att koden vimlar av kommentarer...

Så här skriver man en kommentar i HTML-koden:

<!--  -->

Exempel:

<!-- DETTA ÄR EN KOMMENTAR -->
 Till Toppen 

Regler i HTML

För tydlighetens skull:

Generellt fungerar det så att det som skrivs in först i HTML-koden kommer att visas överst på din sida!

Man får inte

slarva med mellanslag i taggarna.

Det ska se ut så här:

JAPP:

<taggnamn attribut="värde">

Taggens namn skrivs för sig och attribut och värde ska hålla ihop.

Så här ska det INTE se ut:

NIX:

<taggnamnattribut="värde">

INTE så här heller:

NIX:

<taggnamn attribut  = "värde">

Så glöm att du nånsin har sett det!

Du bör alltid

skriva in ett attributs värde mellan citationstecken - såna här fnuttar:  "
Det är numer det som är korrekt enligt standard även om det ibland funkar ändå!

Om en tagg innehåller

flera olika attribut med tillhörande värden spelar det ingen roll i vilken ordning de infogas i taggen. Bra, va?

Tag för vana att

skriva dina html-koder med små bokstäver! I HTML är det här egentligen inte så noga. Men! Till exempel kodas XHTML och många andra programmerings-språk med bara små bokstäver. Och det kan vara bra att göra rätt från början!

Stora eller små bokstäver

har väldigt stor betydelse när det gäller filnamn, mappnamn och bilder. Om du vill infoga en bild på din sida vars filnamn ser ut så här: "Foto.JPG" och du skriver "Foto.jpg" eller "foto.jpg" i koden kommer inte bilden att visas. En del servrar skiljer inte heller på gemener och versaler utan tolkar alla filnamn som små bokstäver. Därför ska man alltid använda sig av såna - små bokstäver, alltså! Så här: foto.jpg

Å, Ä, och Ö

är inte heller poppis i filnamn eftersom allt kring HTML bygger på Engelskan. Använd inte våra svenska tecken i bild, fil eller mappnamn så slipper du mycket trassel.

Radbrytningar

Undvik att göra radbrytningar annat än mellan taggarna i koden på din html-sida. I vissa webbläsare kan det annars tolkas som ett oönskat mellanrum. Tänk särskilt på detta i brödtext och när du infogar adresser till länkar. Därför är det bra att använda ett program med "automatisk radbrytning" när man kodar sidan - då slipper man bläddra i sidled hela tiden.

När du skriver in text

på sidan kommer du att märka att den inte automatiskt visas precis som du skrivit in den i ditt textprogram.

Textens gemener och versaler tolkas - men inga tabbar och inte mer än ett mellanslag visas i webbläsaren. Med andra ord...

Om du skrivit så här i ditt textprogram...

Välkommen till Min Sida!

Här hittar du både det ena och det andra!

...visas det på samma sätt som om du skrivit så här:

Välkommen till Min Sida! Här hittar du både det ena och det andra!

Rubriker, Stycken, Radbrytningar o.s.v. styrs av taggar i HTML-koden.

 Till Toppen