Annons:
Etikett05-webbdesignskolan
Läst 7460 ggr
Anna
2009-01-31 12:49

Webbdesignskolan: Textformatering

Bild 1. Klicka för att öppna i full storlek.

I del ett av vår nya artikelserie Webbdesignskolan tar jag på ett enkelt sätt upp hur man kan formatera text med hjälp av HTML eller CSS.

Teckensnitt, storlek och färg

HTML

Väljer man att formatera sina texter med hjälp av HTML använder man sig av -taggar. Jag personligen tycker just textformatering är smidigare att korrigera med hjälp av HTML än CSS (som du kan läsa mer om nedan), men det är antagligen bara en vanesak.

Vad gäller teckensnitt använder man följande kod:
Text

Inom "" skriver man då självklart in det teckensnitt man vill ha. De bästa stilarna till just webbplatser är Arial, Arial Black, Times New Roman, Courier New, Verdana, Trebuchet MS, Comic Sans MS, Impact eller Georgia.

Koden för att byta textfärg ser ut såhär:
Text

De olika hexkoderna (koderna för webbsäkra färger) kan du hitta här.

Koden för svart text är alltså Text. Glöm inte bort att #-tecknet är nödvändigt för att det ska fungera korrekt.

Hur bestämmer man textens storlek då? Det är lika enkelt. Man kan göra på flera sätt, bl.a såhär:
Text

För att koppla ihop alla de tre taggarna vi gått igenom skriver man bara ihop dem såhär, Text. Svårare är det inte!

CSS

Ska man välja teckensnitt och färg med hjälp av CSS-koder gör man på följande vis.
Skapa ett nytt dokument på ditt webbhotell som du döper till exempelvis text.css. I det dokumentet klistrar du sedan in följande kod:
**
body {font-family: Textsnittet;}
**
Sedan ska man inkludera taggen för textfärg också. Då blir det på följande vis:

body {font-family: Textsnittet; color: #hexkoden;}

För att bestämma textstorlek med CSS-koder anger man storleken i pixlar, px.

body {font-family: teckensnitt; font-size: storlekpx; color: #hexkod;}

För att få svart text i textstilen Trebuchet MS, storlek 12px skriver man alltså såhär:

body {font-family: trebuchet ms; font-size: 12px; color: #000000;}

Spara sedan dokumentet text.css och gå in på de sidor du vill att CSS-koderna ska gälla i. Där, inom -taggarna, skriver du in följande kod.


Inkluderar du inte den koden fungerar det ej!

Fetstilt, kursivt och understruket

För att få texten fetstilt skriver man text. B står för bold, som är ett engelskt ord för fet/halvfet.
Vill man ha texten kursiv skriver man text.
För att få en understruken text lägger man -taggar runt texten, dvs text.

-------------------------------------------------

I kommande delar av Webbdesignskolan, som är vår nya artikelserie, kommer vi ta upp fler saker, både enklare som den här, samt mer avancerad kodning. Vi planerar artiklar om Textjustering, Länkar, Lightbox m.m.

Hoppas ni uppskattar idén!

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Annons:
Marija
2009-01-31 15:38
#1

Jättebra Anna :)

//Marija, medarbetare på Hästfoto.ifokus

Adrina
2009-01-31 15:47
#2

Super!

Fiaa2
2009-01-31 16:36
#3

Kanon! :)

Anna
2009-02-01 12:33
#4

Kul att ni gillar den!

Fler delar dyker upp snart…

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Magster
2009-02-01 12:41
#5

Super! :D

Maggan, mgfotografi.webb.se
Medarbetare på Hästfoto.

evisj
2009-02-01 13:52
#6

Väldigt bra, synd att jag missade den igår, då jag gjorde om med teckensnitt och sånt, men jätte, JÄTTE bra :D det är jobbigt att behövs googla hela tiden om koder man inte har.

Annons:
Jojaton
2009-02-01 14:06
#7

Jättebra.

Dock funkar inte länken till färgkoderna ;D

Johanna - Instagram

Anna
2009-02-01 14:17
#8

#7 Ordnat!

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Upp till toppen
Annons: