Simpla taggar

I denna lektionen går vi igenom de mest simpla och använda taggarna som finns på alla vanliga hemsidor.

Paragrafer

Något som finns på alla vanliga hemsidor är paragrafer, och självklart finns det även en tagg i HTML som anger en paragraf, nämligen taggen <p>. P står för det engelska ordet paragraph, som på svenska betyder paragraf. Enkelt, va?

HTML - HyperText Markup Language
<p>Detta är en paragraf med enmassa text i. Om vi vill ha en till paragraf under denna så är det bara att lägga till det.</p> <p>Detta är en annan paragraf.</p>

Detta är en paragraf med enmassa text i. Om vi vill ha en till paragraf under denna så är det bara att lägga till det.

Detta är en annan paragraf.

Texter som står i paragrafer börjar automatiskt på en ny rad när de når den högra kanten. Detta gör att de besökare med bredare skärm ser texten på färre rader än de med smalare, så sidan ser inte exakt likadan ut för alla besökare (testa själv att ändra storleken på ditt webbläsarfönster och se resultatet).

Paragraferna ovan visas på två olika rader, men tro inte att det beror på att vi har med ett radbyte i koden ovan (att varje paragraf står på egen rad). De visas på två olika rader för att vi har märkt ut dem som paragrafer, och webbläsarna låter varje paragraf börja på en ny rad (det är ju så paragrafer är definierade!). Följande kod (samma som innan fast skriven på en rad) skulle webbläsarna alltså visa på exakt samma sätt:

HTML - HyperText Markup Language
<p>Detta är en paragraf med enmassa text i. Om vi vill ha en till paragraf under denna så är det bara att lägga till det.</p><p>Detta är en annan paragraf.</p>

Detta är en paragraf med enmassa text i. Om vi vill ha en till paragraf under denna så är det bara att lägga till det.

Detta är en annan paragraf.

Rubriker

En annan typ av text som ofta finns på hemsidor är rubriker. Till skillnad från paragrafer finns rubriker i olika "storlekar" (huvudrubrik, underrubrik och så vidare), vilket gör att det finns sex olika rubrikstorlekar i HTML: <h1>, <h2>, <h3>, <h4>, <h5> och <h6>. H står för det engelska ordet heading, som på svenska betyder rubrik, och siffran efter står för rubrikens nivå. Nivå 1 är den största, sedan avtar de ju mindre nivå man väljer.

HTML - HyperText Markup Language
<h1>En rubrik av största slag</h1> <h2>Den näst största rubriken</h2> <h3>En till rubrik</h3> <h4>En rubrik av klass 4</h4> <h5>Den näst minsta rubriken</h5> <h6>Den minsta rubriken</h6>

En rubrik av största slag

Den näst största rubriken

En till rubrik

En rubrik av klass 4

Den näst minsta rubriken
Den minsta rubriken

Radbyten

Med taggen <br> infogar man ett radbyte. Br står för engelskans break, som på svenska betyder bryt.

HTML - HyperText Markup Language
<p>Detta är en<br>paragraf med<br>radbyten.</p>

Detta är en
paragraf med
radbyten.

Som du ser finns inte </br>, för man kan inte ha någon text mellan starttaggen och sluttaggen, så de som skapade HTML bestämde att man inte skulle behöva skriva </br>. Bra beslutat av dem!

Streck

Man kan även infoga ett horisontellt streck på sin hemsida. Det gör man med taggen <hr>. Hr står för engelskans horizontal rule, som på svenska betyder horisontell linje.

HTML - HyperText Markup Language
<p>Detta är en paragraf.</p> <hr> <p>Detta är en annan paragraf.</p>

Detta är en paragraf.


Detta är en annan paragraf.

Som du ser, och kanske har räknat ut, finns inte </hr>. Anledningen är densamma som med taggen <br>.

Fet text

Med taggen <b> kan man ange fet text. B står för engelskans bold, som på svenska betyder fet.

HTML - HyperText Markup Language
<p>Detta <b>är</b> en paragraf med lite <b>fet text</b> i.</p>

Detta är en paragraf med lite fet text i.

Kursiv text

Med taggen <i> kan man ange kursiv text. I står för engelskans italic, som på svenska betyder kursiv.

HTML - HyperText Markup Language
<p>Boken är skriven av <i>Astrid Lindgren</i>.</p>

Boken är skriven av Astrid Lindgren.

Gå till nästa lektion, Listor.