HTML & CSS Rubriker & Text
Här beskrivs hur man strukturerar texten på sin webbsida.
Hur man infogar rubriker, textstycken, avdelare m.m. i HTML-koden.
Hur det sedan går till att förändra texten och rubrikernas utseende med CSS kan du hitta på nästa sida.
Rubriker
Det första man ser på en webbsida är väldigt ofta sidans rubrik. En rubrik ska infogas genom att använda HTML's taggar för rubriker (headings).
Det finns sex olika nivåer av rubriker att välja på. Rent utseendemässigt visas som standard <h1> störst och <h6> är minst. Själva rubriken skrivs in mellan start-taggen och slut-taggen.
Alla rubriker är ett s.k. block-element och visas automatiskt med radbrytning före och efter. Dessutom omges alltid en rubrik en marginal - över och under.
Så här kan de olika rubrikerna se ut:
Så här skrivs koden in på sidan:
|
<body> |
Observera mellanslaget innan slut-taggen - det underlättar för text-läsare med talsyntes!
Det är viktigt att rubrikerna på sidan struktureras i en logisk ordning. En huvudrubrik <h1> bör t.ex. endast förekomma en gång på varje sida.
- <h3> ska vara en underrubrik till <h2>.
- <h4> ska vara en underrubrik till <h3>.
- ...och så vidare!
Här hittar du ett exempel på hur man kan strukturera rubrikerna på sidan - öppnas i ett nytt fönster!
TIPS!
Genom att högerklicka på exempelsidorna och välja "Visa källa" kan du studera sidornas kod i sin helhet! Fungerar på vilken webbsida som helst!
Utseendet på rubrikerna styrs av inställningarna i din webbläsare. Vill du själv bestämma hur de ska se ut görs det med CSS.
Textstycken & Radbrytningar
När du skriver in text i på din sida kommer alltihop att visas som en lång rad eftersom vanliga radbrytningar i textprogrammet inte tolkas / uppfattas av webbläsaren. För att åstadkomma stycken och radbrytningar använder du taggarna: <p> och <br>.
All brödtext på din sida ska placeras mellan <p> och dess sluttagg </p>. Texten mellan dessa taggar representerar ett textstycke och kommer att visas som ett sådant.
Elementet <p> är ett block-element och visas automatiskt med radbrytning före och efter. Dessutom omges det alltid av en marginal - över och under. Marginalen gör att texten automatiskt visas som ett just ett stycke text.
Taggen <br> infogar en manuell radbrytning och används när du vill tvinga texten att byta rad på ett visst ställe - ingen slut-tagg behövs.
Man bör alltid infoga ett mellanslag direkt före en radbrytning med <br> - det ger texten en logisk formatering.
Taggen <br> ska användas för att byta rad INOM ett textstycke inte för att skapa luft MELLAN dem.
Elementet <br> är - trots att det skapar en radbrytning - ett inline-element.
Så här kan det se ut i koden:
<body>
<p>Här är en massa text som visas på sidan i ett enda lååångt stycke. Om texten byter rad beror det på att den stöter på "motstånd" till höger, antingen av att sidan "tar slut" eller i det här fallet att den snygga rutan som i själva verket är en s.k box inte rymmer mer text på raden! <br>Den här textraden börjar efter taggen "br" vilket betyder att den kommer att börja på ny rad oavsett var raden innan slutar...</p><p>Här kommer lite text som är skrivet i ett nytt stycke så att du kan se hur det blir. <br><br>Inte så svårt, va?</p>
</body>
Och så här på sidan med teckensnittet Arial:
Här är en massa text som visas på sidan i ett enda lååångt stycke. Om texten byter rad beror det på att den stöter på "motstånd" till höger, antingen av att sidan "tar slut" eller i det här fallet att den snygga rutan som i själva verket är en s.k box inte rymmer mer text på raden!
Den här textraden börjar efter taggen "br" vilket betyder att den kommer att börja på ny rad oavsett var raden innan slutar...
Här kommer lite text som är skrivet i ett nytt stycke så att du kan se hur det blir.
Inte så svårt, va?
Vad är ett textstycke?
När man läser text i en bok, tidning eller någon annan publikation indelas ju texten i stycken så att varje stycke får ett någorlunda logiskt sammanhang var för sig.
På en webbsida ska det fungera på samma sätt:
- Dela in din text i logiska stycken mellan taggarna <p> och </p>.
- Texten kommer byta rad automatiskt när den stöter på motstånd till höger!
- Använd inte taggen <br> för att skapa nya stycken i din text!
- Byt heller inte stycke förrän det är befogat med anledning av innehållet i texten.
- Om du vill att texten ska visas med radbrytningar - infoga radbrytningar med taggen <br> inom stycket!
OBS!
Ovanstående gäller när du skriver in din brödtext! Mellan <p> och </p> skrivs TEXT och eventuella LÄNKAR. Man ska inte skriva in andra block-element som tabeller, listor och sånt mellan p-taggar!
Hårt mellanslag
En webbläsare tolkar som sagt inte texten du skiver in på sidan precis som den är skriven. Därför måste du om du vill ha dubbla mellanslag mellan ord infoga det extra mellanslaget med HTML-kod i själva texten på sidan.
Vill du infoga extra mellanslag i texten använder du ett hårt mellanslag:
Det skrivs så här:
|
Huvudvärk? Ta en magnecyl! |
Och ser ut så här på sidan:
|
Huvudvärk? Ta en magnecyl! |
Ett hårt mellanslag kan också användas för att förhindra att texten radbryts mellan ord. Användbart när man vill att t.ex. en fras ska ha mellanslag mellan orden - men att orden alltid ska "hålla ihop" så att frasen visas utan radbrytning.
Så här:
|
To be or not to be a bee... |
Ovanstående kod "gör om" frasen till ett enda långt "ord"...
Och ser ut så här på sidan:
|
To be or not to be a bee... |
Blockquote
Taggen <blockquote> används för att infoga längre citat. Blockquote-taggen är ett block-element och ska inte innehålla "bara text" - texten som skrivs in mellan <blockquote> och dess slut-tagg </blockquote> ska placeras inom ett annat block-element - förslagsvis <p>.Så här:
|
<p>Bla bla bla. Här följer ett citat:</p> |
Så här kan det se ut på sidan:
|
Bla bla bla. Här följer ett citat:
Bla bla bla bla bla bla bla bla. |
Som du ser skapar taggen <blockquote> automatiskt en marginal över, under och till vänster om citatet. Det går att justera med CSS.
OBS!
Taggen är till för att märka upp ett citat i html-koden! Det ska inte användas för att skapa ett indrag i texten rent visuellt.
Förformaterad Text
Ingen regel som inte har ett undantag!
PRE betyder före...
... och om du använder taggen <pre> kan du få webbläsaren att tolka tabbar, mellanslag och radbrytningar precis som du skriver in det i textprogrammet.
Det kallas "förformaterad" text och kan vara finurligt att ta till om du vill klistra in en text från t.ex ett textdokument på din sida och behålla formateringen.
Så här kan det se ut i koden:
<body> <pre> Här har jag skrivit text med en massa konstiga radbrytningar och mellanslag för att illustrera hur det blir. Här har jag t.ex. bytt rad tre gånger. Den här texten har dubbla mellanslag mellan orden. Här har jag använt en tabb som indrag! Och här fortsätter den "tabbade" texten. </pre> </body> |
Och så här ser det ut på sidan med teckensnittet Arial:
Här har jag skrivit text med en massa konstiga radbrytningar och mellanslag för att illustrera hur det blir. Här har jag t.ex. bytt rad tre gånger. Den här texten har dubbla mellanslag mellan orden. Här har jag använt en tabb som indrag! Och här fortsätter den "tabbade" texten. |
Precis som elementet <p> är elementet <pre> ett block-element och visas automatiskt med radbrytning före och efter. Dessutom omges det alltid av en marginal - över och under.
I de flesta webbläsare visas text som skrivits mellan <pre> och </pre> som standard med teckensnittet Courier New eller liknande.
Vill du förändra det måste du byta teckensnitt med CSS. Förslagsvis ger du elementet samma formatering som elementet <p>.
Observera också att du MÅSTE byta rad manuellt! Det funkar inte alls att skriva "löpande text" mellan pre-taggar - då kommer texten att försvinna ut i evigheten...
Här finns ett exempel som visar hur det kan fungera - öppnas i nytt fönster!
Betoning, Fetstil, Kursivt m.m.
När du skriver in din text på sidan kanke du vill betona ett ord eller två som du anser är extra viktigt. Taggen <em> indikerar en svag betoning och <strong> en stark betoning.
Svagt betonad text visas oftast i webbläsaren med kursivering och starkt betonad text i fetstil. Men det går att förändra med CSS.
Det finns dessutom fler taggar som kan vara användbara när man vill strukturera texten och märka upp den logiskt:
| TAGGAR: | SKRIVS SÅ HÄR: | BLIR SÅ HÄR: |
|---|---|---|
| <em></em> | <em>Betoning</em> | Betoning |
| <strong></strong> | <strong>Betoning</strong> | Stark betoning |
| <del></del> | <del>Raderat</del> | |
| <sup></sup> | Upphöjt<sup>x</sup> | Upphöjtx |
| <sub></sub> | Variabel <sub>x</sub> | Variabel x |
Det finns också koder som är till för att märka upp texten visuellt. Om du vill att vissa ord ska visas i fetstil eller med kursivering används taggarna <b> och <i>.
Alltså! Taggarna <strong> och <em> ska användas när man vill betona sin text medan <b> och <i> är till endast för visuellt bruk.
Taggar som kan vara användbara när man vill märka upp texten visuellt:
| TAGGAR: | SKRIVS SÅ HÄR: | BLIR SÅ HÄR: |
|---|---|---|
| <b></b> | <b>Fetstil</b> | Fetstil |
| <i></i> | <i>Kursivt</i> | Kursivt |
| <big></big> | <big>STORT</big> | STORT |
| <small></small> | <small>litet</small> | litet |
Understrykning
Om du vanligtvis arbetar med text i ordbehandlinsprogram kanske du saknar en tagg för att skapa understruken text? Det kan man åstadkomma genom att skriva in texten mellan <u> och </u>.
MEN!
Understruken text är inte lämpligt att använda på webbsidor! Det uppfattas som om texten är en länk! Taggen <u> är inte tillåten om man kodar enligt STRICT standard!
Å, Ä, Ö - Teckenkoder
Med en meta-tagg i sidans huvud ska man ange med vilken teckenuppsättning sidan är kodad. Det gör att våra svenska tecken i de flesta fall visas korrekt.
Vill vara på den säkra sidan ska man ersätta de svenska (skandinaviska) tecknen med teckenkoder - det gör det lättare för webbläsare som inte är svenska att visa tecknen korrekt.
Här är koderna:
| å | å | svenskt å |
| Å | Å | svenskt Å |
| ä | ä | svenskt ä |
| Ä | Ä | svenskt Ä |
| ö | ö | svenskt ö |
| Ö | Ö | svenskt Ö |
| ø | ø | norskt, danskt ø |
| Ø | Ø | norskt, danskt Ø |
| æ | æ | norskt, danskt æ |
| Æ | Æ | norskt, danskt Æ |
Skriv helt enkelt in koden i stället för bokstaven - Sök och Ersätt är fiffigt!
Så här:
|
Mmm! Surströmming smakar så härligt! |
På sidan skulle det se ut så här med teckensnittet Arial:
|
Mmm! Surströmming smakar så härligt!
|
När det gäller Å, Ä och Ö är det alltså inte helt nödvändigt att ersätta tecknen - "svenska" webbläsare kommer att tolka bokstäverna korrekt ändå.
Men andra tecken är nödvändiga att ersätta! Vissa tecken går inte att avända som de är i ett HTML-dokument. De är nämligen reserverade för att användas i själva kodningen.
Tecknen: &, < och > måste ersättas med teckenkod.
| & | & | och |
| < | < | mindre än |
| > | > | större än |
Här är några andra teckenkoder som kan vara bra att ha!
| × | × | multiplikations tecken |
| ÷ | ÷ | divisions tecken |
| • | • | bullet, prick |
| £ | £ | pound sterling |
| € | € | euro |
| $ | $ | dollar |
| © | © | copyright |
| " | " | dubbelt citattecken |
Och det finns många fler! Här hittar du fler teckenkoder: HTML / Teckenkoder
Horisontell linje - Avdelare
För att infoga en avdelande horisontell linje (Horisontal Rule) använder man taggen <hr>. Avdelare tar som standard upp 100% av sidan och visas med automatisk radbrytning före och efter.
Så här ser en avdelare ut enligt standard (default):
Utseendet på avdelare kan variera en hel del i olika webbläsare.
Med CSS kan man styra hur man vill att avdelarna ska se ut. Färg, tjocklek och sånt. Hur det går till kan du läsa mer om på nästa sida.
