Blogg

Ge dina Texter stil

I denna digital era där bloggar är så pass stort som det är, måste man som blogg ägare göra texten lättläst för sina besökare. För att läsa på en datorskärm är inte samma sak som att läsa i en gammal hederlig bok. Man måste tänka på att inte ha för liten text, tillräckligt med mellanrum mellan raderna och troligen det viktigaste, att styckeindela texten!

Men bara för att du kanske inte äger en blogg, betyder det inte att du kan strunta i att göra texten lättläst. På Internet läser oftast inte besökaren hela texten, utan man börjar oftast med att scanna texten. Därför kan det vara bra att strukturera och skriva texten så den är lätt att först scanna, men också för att sedan läsas.

Så hur strukturerar man en text kanske ni undrar? Jo man kan använda sig av taggen <p> som står för ”paragraph” på svenska: paragraf, vilket är ganska solklart att man använder <p> för att styckeindela sin text.

<p>En liten text här som ligger i en paragraf</p>
<p>En till paragraf så att det bildar ett mellanrum mellan texterna</p>

Resultat:

En liten text här som ligger i en paragraf

En till paragraf så att det bildar ett mellanrum mellan texterna

Men om man inte vill ha ett mellanrum mellan texten utan bara vill byta rad, då måste man använda sig utav taggen <br /> för html är visar inte vanlig retur-byt-rad. <br /> står officiellt för ”BReak” men min inofficiella betydelse för <br /> är ”Byt Rad”, så kom ihåg vart ni hörde det först, om ingen annan har hunnit före mig.

Här har vi en text som kommer att bry<br />tas när man minst anar det.

Resultat:
Här har vi en text som kommer att bry
tas när man minst anar det.

Som ni ser så blir det inte samma mellanrum mellan raderna när man använder <br /> istället för <p>, vilket är <br />’s syfte att vara ett vanligt rad byte. Nu kanske ni tänker att man kan använda två <br /> efter varann för att få samma mellanrum. Svaret är Ja det kan man men det är inget att föredra då <p> skapar ”snyggare” indelningar samt att html strukturen blir etiskt snyggare också, det är även lättare att ändra mellanrummet mellan dom olika paragraferna med CSS då man använder <p>.

Det finns olika sätt för att betona och dra uppmärksamhet till vissa ord, detta kan vara bra att tänka på för besökarna som scannar texten. Betona dom ord med Tjock textstil som ger ett bra sammanhang och piggar upp läsarnas intresse.

Textstilar i XHTML

Kan tänka mig att det är många som känner till dom tre vanligaste textstilarna, tjock, itaclic, understruken. Dom två första kan man göra med två olika taggar vardera, antingen med en som är Presentationsmärkning och den andra är en Strukturmärkning.
Läs mer om detta i Vad är html?

En Tjock text
<strong> - Våran strukturmärkning för tjock text, definierar ett ord som har en stark betoning. Ett ord inom <strong> tolkas med större vikt av sökmotorer.
<strong>En strong text</strong>

<b> - Är då våran presentationsmärkning som bara gör texten tjock, i jämfört med <strong>.
<b>En bold text</b>

En Italic text
<em> - Börjar med strukturmärkningen, ett ord inom <em></em> är betonet, medans <strong> var starkt betonat. Tolkas något lättare än <strong> av sökmotorer.
<em>En betonad text</em>

<i>  – Visar bara att texten är Italic och är därför en presentationsmärkning.
<i>En italic text</i>

Detta är bra att veta så man vet vilket element man ska använda om man vill betona ett ord, eller bara göra den tjock eller italic för besökarna.

En understruken text
<u> - <u> är en presentationsmärkning och gör texten understruken för besökarna.
<u>En understruken text</u>

Andra presentationsmärkningar som kan vara bra att veta är element som <big></big> och <small></small>. Dom gör texten som dom omsluter stor och liten.
<big>Stor text</big>

<small>Liten text</small>

Sätt stil på texten med CSS

Hur skulle det vara om jag inte tog upp hur man ändrar stilen på texten med hjälp av CSS. Den stora fördelen med att använda CSS för att ändra utseendet på sin text är att man kan göra nästan vad som helst, och då man har det i en extern CSS fil kan man ändra det när som helst.

En bra grund CSS kod till text för hemsidor är denna, med den kan du ändra stilen på det mesta i texten.

p { 
    font-family: Verdana, Geneva, Arial, Helvetica;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    line-height:1.6em;
    letter-spacing: normal;
}

I detta fall är <p> våran selector vilket innebär paragraferna får den stil som vi har bestämt ovan.

Font-family bestämmer vilket typsnitt texten ska ha, man kan skriva in flera typsnitt och avskilja dom med , (komma tecken). Då i vårt fall om besökaren inte har Verdana på sin dator visas typsnittet Geneva istället, och om inte Geneva finns då visas Arial. Så fortsätter ordningen, att tänka på att välja ett typsnitt som är standard på dom flesta datorer och inte något konstigt typsnitt från en typsnitt hemsidan.

Font-size ändrar storleken på texten, och anges i px. Bra storlekar för webbtext är 12-14.

Color bestämmer vilken färg man ska ha på texten, i detta fall #000000 som är svart i hex-kod. Viktigt att veta att färger i hex-kod ska ha en # (fyrkant) innan sig.

Text-decorations standard inställning är none men för att få texten understruken skriver man bara in text-decoration: underline; förutom på länkar där är standard inställning med underline, då för att ta bort understrykelsen skriver man som vi har skrivit ovan.

Font-weight används för att göra texten fet, standard inställningen är normal, men för att få den tjock skriver man bara font-weight: bold;

Font-style bestämmer om texten ska vara i italic är inte, standard som normal, för att få italic skriver man font-style: italic;

Line-height är väldigt användbart för t.ex. bloggar, för det bestämmer höjden på utrymmet mellan textraderna. Anges oftast em som är en mer relativ enhet än pixlar, men px funkar också. Standard inställningen är line-height: normal;

Letter-spacing ändrar utrymmet på höger och vänster sida av varje bokstav. Anges oftast i px till exempel: letter-spacing: 10px;

Rubriker

Ska du använda rubriker på din hemsida och text ska headings elementen användas. Finns 6 olika rubrik taggar och dom har olika värden där 1 är högst och 6 är lägst. Men det är inte så vanligt att man använder 5 och 6 för dom anses inte ha något värde egentligen.

<h1>huvudrubriken</h1>
<h2>underrubriken</h2>
<h3>under-underrubriken</h3>
<h4>fjärde rubriken i skalan</h4>
<h5>femt rubriken</h5>
<h6>sjätte rubriken</h6>

Lorem Ipsum

När du håller på att bestämma typsnitt till dina texter och rubriker kan verktyget Lorem Ipsum vara användbart. Lorem Ipsum är bara en text för typsättning. Hämta Loreum Ipsum texten här

Föregående: Validera din kod

Nästa: Länkar

Kategori: XHTML-CSS     2 Kommentarer