HTML-kodens uppbyggnad
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...
|
Taggarnas inbördes ordning
Om du tittar på din sida och det inte alls 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.
- Den tagg som skrivs först på sidan: <html> måste avslutas sist med: </html>.
- Däremellan måste alla elements taggar startas och avslutas på rätt plats.
- Man får inte avsluta dem om varandra och huller om buller!
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!
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">
|
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-block 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!
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: <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: <taggnamnattribut="värde">
INTE så här heller: <taggnamn attribut = "värde"> heller.
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!
|
Var man vill ha sina Rubriker, Stycken, Radbrytningar o.s.v. styrs av taggar i HTML-koden.
|
NinetNet 
HTML 
