Lektion 4: Tekst på din webside
Lektionen viser hvordan du laver tekst på din webside. Tekst med forskellige skrifttyper og farver.
At formatere tekst med HTML er simpelt - men nødvendigt.
Font tag'n
Hver gang du skriver tekst på en webside bør teksten "omkranses" af en HTML erklæring som fortæller hvordan teksten skal se ud. Dette kan f.eks. gøres vha. <font> tag'n. <font> tag'n gør ikke noget i sig selv, men den kan modtage en masse koder. Vi starter med et simpelt eksempel:
<font color="#A03333">
Velkommen til klikamok.dk
</font>
I ovenstående har vi brugt koden color="" til at angive tekstens farve med. Resultatet ser således ud:
Velkommen til klikamok.dk
En mere konsekvent brug af <font> tag'n bør f.eks. se således ud:
<font color="#229022" face="Comic Sans MS" size="-1">
Velkommen til klikamok.dk
</font>
Har erklærer vi at teksten skal skrives med "Comic Sans MS", at den skal være "grøn" og at den skal være "1 mindre" end standard størrelsen af tekst i browseren. Resultatet ser således ud:
Velkommen til klikamok.dk
Hvad tekst fonte angår anbefaler vi at du holder dig til flg. : "Arial", "Verdana", "Comic Sans MS" og "Times New Roman".
Tekst størrelsen (size) kan have flg.værdier: 1, 2, 3, 4, 5, 6 og 7. .. og du kan, som vi gjorde herover, vælge at angive den som "større" eller "mindre". F.eks. +3, +2, +1, -1, -2 og -3.
Fed, kursiv, understreget, stor og lille tekst
Der findes en lang række HTML erklæringer som er både enkle og brugbare. Herunder har du fem eksempler på sådanne erklæringer.
- Tekst imellem <b> ..og.. </b> bliver skrevet med fed tekst
- Tekst imellem <i> ..og.. </i> bliver skrevet med kursiv tekst
- Tekst imellem <u> ..og.. </u> bliver skrevet med understreget tekst
- Tekst imellem <big> ..og.. </big> bliver skrevet med større tekst
- Tekst imellem <small> ..og.. </small> bliver skrevet med mindre tekst
- Tekst imellem <sub> ..og.. </sup> bliver hævet en smule
- Tekst imellem <sup> ..og.. </sub> bliver sænket en smule
<font color="#3333A0">
<u>Dette</u> er <b>et <i>eksempel</i></b> på <big>formateret</big> tekst
</font>
Resultatet ser således ud:
Dette er et eksempel på formateret tekst
Bemærk den del af koden herover som er skrevet således: <b>et <i>eksempel</i></b>. Her har vi "flettet to HTML erklæringerne ind i hinanden". Dette er fuldt ud tilladt så længe du altid husker at afslutte erklæringer som er begyndt.
Placering af tekst
Når du er kommet længere i lektionerne vil du lære at benytte <table>'s til at placer tekst og andre elementer på din webside. Inden vi når der til er der dog et par koder og tags du bør kende.
Når du skriver tekst indholdet til din webside i din HTML fil, vil teksten automtisk stå i een lang sætning - linieskift vil automatisk ske i browseren når der ikke er plads til mere tekst - også selv om du i HTML filen laver linieskift.
HTML registrerer, med andre ord, ikke linieskift af sige selv - et linieskift laves med HTML tag'n <br>.
<font color="#A03333">
Her er..<br>(var) et linieskift
</font>
Resulterer i følgende:
Her er..
(var) et linieskift
Af og til kan det være nødvendigt at skrive <br clear="all"> for at få et komplet linieskift. Årsagen til dette kommer vi ind på i den lektion der omhandler grafik.
Det er også muligt at centrere, venstre stille og højrestille tekst. Dette kan f.eks. gøres således:
<font color="#229022">
<div align="right">Højre stillet tekst</div>
<div align="center">Centreret tekst</div>
<div align="left">Venstre stillet tekst</div>
<center>centreret tekst igen</center>
</font>
Resultatet ser således ud:
Højre stillet tekst
Centreret tekst
Venstre stillet tekst
centreret tekst igen
Herover bruger vi erklæringen <div></div>, som i sig selv ikke gør andet end at den automatisk fremtvinger et linieskift før <div> .. og efter </div>. <div> tag'n kan, som <font> tag'n, tage imod nogle koder. I dette tilfælde bruger vi koden align="" til at fortælle hvor teksten skal være placeret horizontalt.
Vha. <center>.. </center> så vi et andet eksempel på hvordan centrering af tekst kan udføres. <div align="center">..</div> og <center>..</center> fungerer principielt på nøjagtigt samme måde.
Afhængig af hvilken tag du bruger align="" i er der forskellige værdier du kan bruge. Som lillefingerregel virker "left", "center" og "right" altid. Af og til virker "top", "middle" og "bottom" også. Andre gange er du nødt til i stedet for
align="" at bruge valign="" for at få "top", "middle" og "bottom" til at virke.
Mellemrum og specielle tegn
Når du skriver tekst indhold til din webside vil mellemrum på mere end ét tegn ikke blive registreret. At lave mere end ét mellemrum imellem to bogstaver/ord kræver at du bruger koden: . Lad os sige at du skriver flg. i din HTML fil:
<font color="#3333A0">
Velkommen til klikamok.dk
</font>
Resultatet vil se således ud:
Velkommen til klikamok.dk
Skriver du derimod:
<font color="#3333A0">
Velkommen til klikamok.dk
</font>
Vil resultatet se således ud:
Velkommen til klikamok.dk
Vha. "&etellerandet;" er det muligt at skrive en lang række tegn du ellers normalt ikke kan skrive. Koden © resulterer f.eks. i tegnet ©.
I tabellen herunder kan du se en række af sådanne koder.
| |
|
> |
> |
< |
< |
¡ |
¡ |
¢ |
¢ |
£ |
£ |
| ¤ |
¤ |
¥ |
¥ |
¦ |
¦ |
÷ |
÷ |
§ |
§ |
¨ |
¨ |
| © |
© |
ª |
ª |
« |
« |
¬ |
¬ |
­ |
|
® |
® |
| ¯ |
¯ |
° |
° |
± |
± |
² |
² |
³ |
³ |
´ |
´ |
| µ |
µ |
¶ |
¶ |
· |
· |
¸ |
¸ |
× |
× |
º |
º |
| » |
» |
¼ |
¼ |
½ |
½ |
¾ |
¾ |
¿ |
¿ |
Æ |
Æ |
| Þ |
Þ |
þ |
þ |
ß |
ß |
Å |
Å |
Ø |
Ø |
Ð |
Ð |
Følgende HTML koder og tegn kan bruges på andre bogstaver end dem de er vist på heruder. Erstat bogstavet efter
& med det bogstav som tegnet ønskes brugt på.
| Ò |
Ò |
Ó |
Ó |
Ô |
Ô |
Õ |
Õ |
Ï |
Ï |
ç |
ç |
Skrevet okt. 2001 af Niels Rune Bøggild
| Tilføjet af Simon Glue den 02-12-2003 - Hits: 4741 |
   |