KREATiV -- Text I Foto I Design

Det här är en favorit-tutorial från en av mina gamla bloggar.

Ibland händer det att man vill formatera texter man skriver på nätet för hand, även som 'vanlig' användare. Du har säkert sett hur andra människor skriver i fetstil, kursivt eller stryker över ett ord mitt i texten. Här har du sju frågor och svar om textformatering i xHtml för nybörjare. Lathund är trots allt människans bästa vän.

1) Hur gör jag delar av min text fet?

Skriv <strong>texten jag vill ska vara fet</strong>
eller <b>texten jag vill ska vara fet</b>
så får du nästan garanterat fram raden texten jag vill ska vara fet

2) Hur gör jag delar av min text kursiv?

Skriv <em>texten jag vill ska vara kursiv </em>
eller <i>texten jag vill ska vara kursiv</i>
så får du nästan garanterat fram raden texten jag vill ska vara kursiv

3) Hur gör jag delar av min text överstruken?

Skriv <strike>texten jag vill ska vara överstruken</strike>
eller <span style="text-decoration: line-through;">texten jag vill ska vara överstruken</span>
så får du nästan garanterat fram raden texten jag vill ska vara överstruken

4) Hur gör jag delar av min text understruken?

Skriv <u>texten jag vill ska vara understruken</u>
Om du har tur så fungerar det som texten jag vill ska vara understruken

xHtml vill dock gärna att du använder det mer komplicerade
<span style="text-decoration: underline;">texten jag vill ska vara understruken</span>
alltså texten jag vill ska vara understruken

5) Hur lägger jag en färg bakom min text som om jag strukit över den med markeringspenna?

Skriv <span style="background-color:yellow;">texten jag vill ska ha en färgad bakgrund</span>
så får du nästan garanterat fram raden texten jag vill ska ha en färgad bakgrund

Att skriva ut färgnamn fungerar med 16 olika så kallade webbsäkra, namngivna färger. Du finner en lista på dessa namn bland annat här.

Du kan också skriva <span style="background-color:#ffff00;">texten jag vill ska ha en färgad bakgrund</span>
så får du också nästan garanterat fram raden texten jag vill ska ha en färgad bakgrund

I det andra exemplet skriver du hexadecimalkoden för samma färg. Detta ger mer kontroll över färgnyansen. HEX-koden bygger på RGB-färgsystemet. De två första siffrorna/bokstäverna står för mängden rött i färgen, de två mittersta för mängden grönt och de två sista för mängden blått.

HEX-koden hittar du med hjälp av en colorpicker online  eller till exempel i Photoshop. Den har alltid och ska alltid ha ett nummertecken (#) framför sex (6, varken mer eller mindre) siffror/bokstäver.

Det finns faktiskt ett tredje alternativ också, nämligen att använda RGB-kod direkt.

Skriv <span style="background-color: rgb(255, 255, 0);">texten jag vill ska ha en färgad bakgrund</span>
så blir det nästan garanterat också texten jag vill ska ha en färgad bakgrund

Vanligen använder man dock något av de två tidigare alternativen.

6) Hur ändrar jag färg på min text?

Skriv <span style="color: blue;">texten jag vill ska ha en annan färg</span>
så får du nästan garanterat fram raden texten jag vill ska ha en annan färg

eller skriv HEX-koden istället för 'blue'. För detaljer se fråga fem.

7) Hur ändrar jag färg på både bakgrund och text samtidigt?

Skriv <span style="background-color: black; color: white;">texten jag vill ska ha en annan färg och bakgrund</span>
så får du nästan garanterat fram raden texten jag vill ska ha en annan färg och bakgrund

Du kan ersätta färgnamnen med HEX-koden (hexadecimalkoden), för mer information se fråga fem.