05. Webbdesignskolan

Webbdesignskolan: Textformatering

2009-01-31 12:49 #0 av: Anna

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 <font>-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:
<font face="teckensnittet">Text</font>

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:
<font color="#hexkoden">Text</font>

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

Koden för svart text är alltså <font color="#000000">Text</a>. 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:
<font size="storlek (anges i 1, 2, 3 osv)">Text</a>

För att koppla ihop alla de tre taggarna vi gått igenom skriver man bara ihop dem såhär, <font face="teckensnittet" color="#hexkoden" size="storlek">Text</font>. 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 <head>-taggarna, skriver du in följande kod.

<link rel="stylesheet" href="text.css">
Inkluderar du inte den koden fungerar det ej!

 

Fetstilt, kursivt och understruket

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

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

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

Anmäl
2009-01-31 15:38 #1 av: Marija

Jättebra Anna :)

Anmäl
2009-01-31 15:47 #2 av: Adrina

Super!

Anmäl
2009-01-31 16:36 #3 av: Fiaa2

Kanon! :)

Anmäl
2009-02-01 12:33 #4 av: Anna

Kul att ni gillar den!

Fler delar dyker upp snart...

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

annaattlid.se

Anmäl
2009-02-01 12:41 #5 av: Magster

Super! :D

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

Anmäl
2009-02-01 13:52 #6 av: evisj

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.

Anmäl
2009-02-01 14:06 #7 av: Jojaton

Jättebra.

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

Johanna
@bellasantorino på Instagram

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.