Formatering af tekst


En korrekt og pæn formatering af tekst er en meget vigtig faktor ved webdesign. Det er desværre også en meget overset faktor, - hvilket er årsagen til at mange hjemmesider ikke fremtræder særligt pænt.

HTML-koder


En simpel HTML-kode betegnes ofte som et tag. Nogle tags er så lange at der nærmere er tale om et script. Jeg skal hverken forvirre mig selv eller læserne af denne HTML-vejledning ved at begynde og skelne mellem tags og scripts, - så her hedder et tag et tag.

Overskrifter


Til overskrifter anvendes meget ofte dette simple tag således som det der kan ses her:

<H1>Tekst</H1>

Med dette tag kan du lave overskrifter i 6 forskellige skriftstørrelser, hvor tallet 1 er den største font og tallet 6 er den mindste. Jo lavere tal desto større font. Du kan se et eksempel her:

Her er det anvendte tag: <H3>Flemming</H3> og det ser sådan ud:

Flemming

Bemærk det store mellemrum (tomrum) der bliver både over og under overskriften med H-tagget. Dette mellemrum er ikke tilstræbt, og det er blot een af flere ulemper ved at bruge H-tagget til overskrifter.
H-tagget kan udvides til at du selv kan vælge din egen skriftfarve. Så ser tagget således ud i stedet:

<H3><font color="#0000FF">Flemming</font></H3>

Du kan ligeledes udvide tagget til også at omfatte en mulighed for eget valg af skrifttype. Så ser tagget således ud:

<H3><font color="#0000FF" face="Arial">Flemming</font></H3>

Hvis du ønsker at se et eksempel på alle 6 størrelser overskrifter kan du klikke på dette link: [KLIK HER]

En bedre styring af tekst og overskrifter


Jeg bryder mig personligt ikke ret meget om H-tagget i dets simple form, da det ikke levner mange valgmuligheder for at styre teksten med hensyn til fontvalg, fontstørrelse, fontfarve med mere. Jeg vil langt hellere foretrække et tag som dette:

<p align="center"><font face="arial" size="2" color="#0000FF">

Med dette tag kan man styre alt omkring teksten, fontvalg, fontfarve, fontstørrelse og om skriften skal være højrestillet, venstrestillet eller centreret.
Højre, venstre eller centreret styres ved at indsætte denne tekst efter align=" i den nævnte rækkefølge: right, left, center. Så i dette eksempel er teksten altså formateret til at være centreret (midterstillet)

Tagget indsættes foran teksten sådan her:

<p align="center">
<font face="arial" size="2" color="#0000FF">Din tekst

og når man har afsluttet sin tekst skal tagget også afsluttes, og det gøres således:

<p align="center">
<font face="arial" size="2" color="#0000FF">Din tekst</font></P>

Tagget </P> (paragraph) udløser altid et linieskift med et mellemrum på en hel linie. Hvis man ikke ønsker dette mellemrum kan man i stedet positionere sin tekst med dette tag:

<div align="center">

Og så skal man selvfølgelig også huske at afslutte sit tag på den rigtige måde, og da der nu er brugt div i stedet for paragraph, så ser tagget med den rigtige afslutning nu således ud i stedet:

<div align="center"> </div>

Nu kan jeg lave mine overskrifter igen, - og med dette tag kan jeg selv bestemme hvilken font jeg vil bruge, og hvor meget luft der skal være over og under overskriften, - og jeg har i dette tilfælde valgt ikke at have noget mellemrum mellem linierne:

Her er overskriften med fonten arial i størrelse 1
Her er overskriften med fonten arial i størrelse 2
Her er overskriften med fonten arial i størrelse 3

Ændring til en anden font i en anden farve og størrelse er nem. Man ændrer blot værdierne i tagget til eksempelvis disse:

<p align="left">
<font face="Times New Roman" size="3" color="#FF0000">

Og så har jeg skrifttypen Times New Roman i størrelsen 3 og farven rød.

Bemærk: Det skyldes kun den ringe sidebredde her på siden at nogle af taggene er delt op på 2 linier. Taggene kan sagtens skrives ud i et.
Og nu hvor vi alligevel taler om linieskift, så ser HTML-tagget for et linieskift uden mellemrum således ud: <br>

Attributterne fed, kursiv, understreget


I tilknytning til det før viste tekstformaterings-tag kan man anvende forskellige attributter for at gøre teksten fed, kursiv og understreget
Taggene kan også kombineres således at teksten bliver både fed og kursiv, sådan her, eller alle tre kombinationer, sådan at teksten bliver både fed, kursiv og understreget, sådan her.

Dette tag giver fed tekst: <b>Flemming</b>
Dette tag giver kursiv tekst: <i>Flemming</i>
Dette tag giver understreget tekst: <u>Flemming</u>
Og her en kombination af alle tre: <b><i><u>Flemming</u></i></b>

Og til de meget videnbegærlige kan det oplyses at bogstaverne b, i og u står for henholdsvis bold, italic og underline i den nævnte rækkefølge.

Marginer


Marginer er et vigtigt værktøj til formatering af tekst. Det ser ikke ret pænt ud når teksten er tværet helt op af websidens kant eller af noget som helst andet på siden.
Den mest almindelige og mest anvendte form for margin er en simpel venstremargin, - og tagget for denne ser således ud:

<p style="margin-left: 10">

Tallet 10 angiver det antal pixel marginen skal være på. Dette tal kan naturligvis ændres til en hvilken som helst anden ønsket størrelse. Tagget kan også bruges som højre-margin, - så skal man bare skrive margin-right i stedet for margin-left.

Med et lidt mere avanceret tag kan man styre alle fire marginer på siden på een gang, - det vil sige topmargin, bundmargin, højremargin og venstremargin. Dette tag ser således ud:

<style type="text/css">
p.margin {margin: 10px 10px 10px 10px}
</style>
<p class="margin">

Her er alle fire marginer sat til 10 pixel, men dette kan naturligvis ændres til en hvilken som helst anden ønsket størrelse. Da det ikke fremgår af tagget hvilke værdier der gælder hvilke marginer, så skal det lige nævnes at værdierne læst fra venstre mod højre gælder for disse marginer i den angivne rækkefølge:

topmargin, højremargin, bundmargin, venstremargin

Lige højre- venstre-margin


Hvis du kigger efter i den tekst du sidder og læser lige nu, så vil du kunne se at mine marginer er lige både i højre og venstre side af teksten. Det synes jeg selv ser rigtigt pænt ud, og denne funktion styres naturligvis også af et tag, - nemlig dette, som du sætter ind foran det tekstafsnit som du ønsker at bruge denne funktion på:

<div align=justify>

Styring af tekstbredde


Jeg sætter stort set altid mine tekster ind i en tabel bestående af een eneste celle. Det er ret smart - synes jeg selv - for på den måde kan jeg med et enkelt hug justere hele tekstbredden, - nemlig ved at ændre bredden på tabellen. På samme måde kan jeg ligeledes ved hjælp af tabellen flytte teksten til højre eller venstre, eller midterstille den ved at midterstille tabellen. Det er også smart, for en midterstillet tekst giver jo ulige lange linier både til højre og venstre, men det gør det ikke når teksten midterstilles ved hjælp af en tabel
I nedenstående eksempel er tabellen synlig for eksemplets skyld. Det skal den naturligvis ikke være i virkeligheden. En tabelramme gøres usynlig ved at sætte "border" til 0 (nul)

Her er min tekst centreret ved hjælp af en tabel. Her er min tekst centreret ved hjælp af en tabel. Her er min tekst centreret ved hjælp af en tabel. Her er min tekst centreret ved hjælp af en tabel.


Tags skal altid afsluttes


Meget rod på hjemmesider skyldes uafsluttede tags. Et tag skal altid afsluttes. Et tag er altid omsluttet af disse to tegn: <> og enhver afslutning på et tag er de samme to tegn med en skråstreg imellem, - således: </> Her er nogle eksempler på hvorledes dette bruges:

Start og slut på skrifttype: <font> </font>
Start og slut på HTML-kode: <html> </html>
Start og slut på lige marginer: <div align=justify> </div>

Artikel om brug af skrifttyper / fonte.


Her er en artikel om brug af skrifttyper / fonte på hjemmesider. Hvis du har interesse i at lave et flot tekst-design, så bør du læse denne artikel. Den er hverken lang eller særligt tung at komme igennem:

Mange hjemmeside-snedkere går ofte totalt amok i begejstring over de mange spændende skrifttyper der findes. En del af dem glemmer desværre bare at een eller anden helt specielt valgt skrifttype overhovedet ikke kan ses af andre, medmindre disse andre også selv har den pågældende font installeret på deres computer.
Ikke definerbare skrifttyper vil almindeligvis blive erstattet af fonten "Times", men er der tale om en skrifttype der familiemæssigt befinder sig alt for langt væk fra "Times-familien", så kan resultatet ofte blive særdeles uforudsigeligt og højst mærkværdigt at se på.
Hvis du absolut vil bruge en meget speciel font, - eksempelvis til overskrifter, eller kortere tekstafsnit, så lav teksten som et billede i et billedbehandlingsprogram og gem den som en jpg-fil eller en gif-fil. På den måde vil teksten og fonten få en ens visning på alle computerskærme.

De mest almindelige skrifttyper til hjemmesidebrug er Arial, Comic Sans, Courier, Sans Serif, arial, Tahoma og Times, - også kaldet "Times New Roman". De tilhører alle de fonte som kaldes "Websikre fonte". Der findes også andre websikre fonte end disse, - men så begynder vi at komme ud i nogle der ikke er helt så almindeligt brugte.
Med disse få fonte har du et utal af variationsmuligheder fordi du ved hjælp at HTML-koder kan variere på størrelsen af disse fonte, og vælge om din tekst skal være fed, kursiv, eller begge dele på een gang.

Dette tekstafsnit er skrevet med fonten arial i størrelse 2 og med skriftfarven blå, angivet ved denne farvekode: #0000FF.
Med HTML-koder kan jeg vælge at gøre min tekst fed eller kursiv eller begge dele, både fed og kursiv

Mange hjemmesider ser ganske forfærdelige ud fordi hjemmeside-snedkeren vælger en usmagelig font og en dårlig kombination af fontfarve og baggrund, som eksempelvis en lys font på en lys baggrund eller en mørk font på en mørk baggrund. Det er rent ud sagt pisseirriterende at side og læse sådan en tekst:
Se selv her hvor utroligt irriterende det er, - overdrivelse fremmer forståelsen, men jeg har virkeligt set så grelle eksempler som dette.
Brug fonte med omhu og omtanke. Valget af fonte, fontstørrelse og fontfarve har en utrolig stor indflydelse på helhedsindtrykket af din hjemmeside.
Hvis du har lyst til at lære mere om formatering af fonte med HTML-koder, så er der her et link til nogle forskellige websider med den mest grundlæggende HTML-kodning: [KLIK HER]

Hvis du har fået lyst til at fordybe dig lidt mere i emnet "Fonte", så er der her en række link hvor du kan søge mere viden om dette omfattende emne.

Brug af skrifttyper - Artikel af Erik Østergaard. [KLIK HER]
Font Viewer - Se eksempler på forskellige fonte. [KLIK HER]
Gratis fonte - Link til masser af gratis skrifttyper. [KLIK HER]
Oversigt over skrifttyper - Udarbejdet af Steen Larris [KLIK HER]
Valg af skrifttype - Artikel af Carl Madsen. [KLIK HER]

© Copyright 2005 Flemming Nielsen FN Webdesign
Eftertryk og publicering af denne artikel er ikke tillaldt


DIN COMPUTERS IP-ADRESSE ER:  38.107.191.104
Du åbnede denne webside Søndag den 05 September 2010. kl. 18:09:02


* TILBAGE TIL TOPPEN AF SIDEN *