Referensbok

HTML © Eva von Pepel

* [ HTML-referensbok ] * [ Referensböcker ] *

Text formatering - fonter

Logisk och stilistisk, SUP/SUB, FONT, BODY-attribut, BASEFONT

Inledning

Alla element som beskrivs i avsnitten "Logisk och stilistisk formatering och "Font" är s.k. inlineelement. Inlineelement är element som inte skapar några styckebrytningar utan följer texten.

Elementen är behållare, dvs har en start- och sluttagg samt något innehåll mellan dessa två, t ex text. Båda är obligatoriska. Som inlineelement får de bara innehålla andra inlineelement. Blockelementen t ex P eller TABLE får inte förekomma i dem. Om du vill ändra fonter i en tabell måste du ändra fonter i varje enskild tabellcell, dvs text som finns mellan <TD> och </TD>. Det är otillåtet att omfånga hela tabellen med "font-taggarna".

"Font-elementen" kan förekomma i varandra. Det betyder att du kan både (t ex) betona och förminska/förstora eller färgsätta samma text. Markerar du texten med ett antal markord, måste det markordet som öppnar strängen även stänga den, den andra i raden stängs som näst sist osv:

<kod1><kod2><kod3>text</kod3></kod2></kod1>

* Logisk och stilistisk formatering

Det finns två sätt att framhäva texten i ett HTML-dokument - logiskt och fysiskt. Logiska element lägger till strukturell information till texten medan de stilistiska uttryckligen specificerar stilen.

Det är det logiska sättet som rekommenderas - HTML är ju ett logiskt markeringsspråk och struktureras därefter. En logisk strukturering tillåter andra än visuella klienter t ex taldatorer att betona ett ord enligt markeringarna och på så sätt åtskilja det från texten, t ex genom att läsa ordet högre. En taldator har inga svårigheter att betona ett strukturellt markerat ord däremot den kan inte "tala kursivt".

Logiska element

Markeras: <EM></EM>, <STRONG></STRONG>, <DFN></DFN>, <VAR></VAR>, <CODE></CODE>, <SAMP></SAMP>, <KDB></KDB>, CITE></CITE>, <ABBR></ABBR>, <ACRONYM></ACRONYM> - båda obligatoriska

Får innehålla: inlineelement

Får finnas i: blockelement, inlineelement

HTML 4.0 och HTML 4.0 Transitional

HTML 3.2

Samma som ovan förutom ABBR och ACRONYM

Exempel på olika stilar

De två sista element, ABBR och ACRONYM introducerades i HTML 4.0 och finns inte tillgängliga i HTML 3.2. Genom att tilldela dessa element attributet TITLE kan du specificera vad förkortning/akronym representerar.

Exempel

<ABBR title="World Wide Web">WWW</ABBR>

Stilistiska element

Markeras: <TT></TT>, <I></I>, <B></B>, <BIG></BIG>, <SMALL></SMALL>, <U></U> (T), <S></S> (T), <STRIKE></STRIKE> (T) - båda obligatoriska

Får innehålla: inlineelement

Får finnas i: TT, I, B, U, S, STRIKE - blockelement, inlineelement BIG, SMALL - blockelement exklusive PRE, inlineelement

HTML 4.0

HTML 4.0 Transitional

HTML 3.2

Exempel på olika stilar

* SUP, SUB

Markeras: <SUP></SUP>, <SUB></SUB> - båda obligatoriska

Får innehålla: inlineelement

Får finnas i: blockelement exklusive PRE, inlineelement

Dessa två element tillhörde tidigare (HTML 3.2) stilistiska fonter men fick en "egen grupp" i HTML 4.0. Elementen används för att kunna presentera t ex skripter eller matematiska formler som kräver nedsänkta eller upphöjda tecken.

Elementen får stöd i HTML 4.0, HTML 4.0 Transitional och HTML 3.2.

Exempel

Attribut

HTML 4.0 och HTML 4.0 TransitionalHTML 3.2
Alla ovan nämnda element kan ta attributen som beskrivs i %attrs; Inga

Upp

* FONT

Markeras: <FONT></FONT> - båda obligatoriska

Får innehålla: inlineelement

Får finnas i: blockelement exklusive PRE, inlineelement

OBS! Elementet är nedskrivet och får endast användas i HTML 4.0 Transitional. Nedskrivna element är sådana vars support i framtida versioner av HTML inte garanteras.

Om besökaren inte har ändrat inställningarna i sin www-klient visas fonterna i svart färg och standardstorlek som är ca 12 punkter men små skillnader kan förekomma.

Början på elementet markerar du med starttaggen <FONT> och slut med </FONT>. Båda är obligatoriska. FONT är ett inline element och får endast finnas i samt förekomma i andra inline element.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
Elementet saknas %coreattrs; och i18n; som beskrivs i %attrs; (OBS! EJ %events) och
SIZE, COLOR, FACE
SIZE, COLOR

SIZE

Med detta attribut kan du förstora, förminska eller specificera fasta (absoluta) fontstorlekar.

Det är alltid bättre att förstora eller förminska fonterna och på så sätt relativt förstora/förminska användarens standardfont så att han/hon kan anpassa fontstorleken till sin egen läsförmåga.

Storleksskala varierar från 1 till 7. Standardfonten är 3. "+1" till exempel betyder en storlek större än standardfonten och "-3" tre storlekar mindre. OBS! värden innehållande plus eller minus tecken måste citeras.

Exempel

<P>Standardtext <FONT SIZE="+2">text två storlekar större</FONT> standardtext</P>

Standardtext text två storlekar större standardtext

För att specificera en absolut fontstorlek tilldelar du attributet ett fast mått. Storleksskala är från 1 till 7. Värdet behöver inte citeras.

<P>Standardstorlek <FONT SIZE=4>text med fast mått 4</FONT> standardstorlek</P>

Standardstorlek text med fast mått 4 standardstorlek

COLOR

Med detta attribut kan du färgsätta fonterna.

Attributets värde är färgens RGB-nummer. RGB står för "red" - röd, "blue" - blå och "green" - grön. Du kan även skriva färgens engelska namn på de 16 vanligaste färgerna:

Black = #000000, Green = #008000, Silver = #C0C0C0, Lime = #00FF00, Gray = #808080, Olive = #808000, White = #FFFFFF, Yellow = #FFFF00, Maroon = #800000, Navy = #000080, Red = #FF0000, Blue = #0000FF, Purple = #800080, Teal = #008080, Fuchsia= #FF00FF, Aqua = #00FFFF

De flesta grafikprogram visar färgens RGB-värde. Det finns också en mängd olika små och praktiska applikationer där du kan blanda dina egna färger och samtidigt avläsa deras RGB-värde. Ett sådant program på bara 14 kB och dessutom freeware heter Color Browser och kan hämtas på http://maximized.com/freeware/clrbrwsr/ eller välj din färg från denna färgkarta.

När du anger egna färger glöm inte att behålla kontrasten mellan bakgrundsfärgen och texten, annars kan texten vara oläslig. Observera att 30% av den manliga befolkningen lär vara färgblinda och har svårt att åskilja visa färger.

Exempel

<P>Standardfärg <FONT COLOR="#FF0000">röd text </FONT> standardfärg</P>

Standardfärg röd text standardfärg

OBServera stegen # förre rgb-värdet samt citationstecken.

FACE

Med detta attribut kan du specificera textens typsnitt. För att texten ska visas enligt det specificerade värde måste användaren ha det aktuella typsnittet installerat på sin dator. Om ett sådant typsnitt inte finns används standardtypsnittet.

Du kan även lista ett antal olika typsnitt. Typsnitten separeras med ett komma. Om det första typsnittet som finns på listan inte är installerat på användarens dator används det andra. Om det andra är inte installerat används det tredje osv. Om inget är installerat används standardtypsnittet.

Exempel

<P>Standardtypsnitt <FONT FACE="Arial,Palatino">ändrat typsnitt (kanske) </FONT> standardtypsnitt</P>

Standardtypsnitt ändrat typsnitt (kanske) standardtypsnitt

SIZE, COLOR, FACE

Du kan använda alla tre attribut samtidigt. Separera dem med ett mellanslagg.

Exempel

<P>Standard <FONT SIZE="+2" COLOR="#FF0000" FACE="Arial,Palatino">ändrade fonter </FONT> standard</P>

Standard ändrade fonter standard

Upp

* BODY-attribut

OBS! Attributen är nedskrivna och får endast användas i HTML 4.0 Transitional och HTML 3.2.

Via de olika BODY-attributen kan du specificera en viss färg som ska gälla i hela dokumentet. Om du senare vill ändra något specifikt inlineelements färg använd FONT-elementet för att överskrida den i BODY specificerade färgen.

För bättre läslighet behåll alltid kontrast mellan bakgrundsbilden eller -färgen och textfärgen.

text:
<BODY text="#000000"> eller <BODY text=black>
länk:
<BODY link="#0000FF"> eller <BODY text=blue>
aktiv länk:
<BODY alink="#FF0000"> eller <BODY text=red>
besökt länk:
<BODY vlink="#800080"> eller <BODY text=purple>

<BODY background="bild.gif" bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#FF0000" vlink="#800080">

I HTML 4.0 specificeras alla BODY-attribut via stilmallar, t ex

Exempel

BODY {background: white url(bakgrundsbild.gif); color: black}
A:link {background: transparent; color: red}
A:visited {background: transparent; color: blue}
A:active {background: transparent; color: green}

För att inte få en del fäger överskidna av användaren som i sin tur kan orsaka att dokumenten blir oläsliga bör alla BODY-attribut specificeras eller inga.

Exempel: säg du enbart specificerar bakgrundsfärg (bgcolor) t ex vit och jag specificerar svart bakgrundsfärg och vit text. När jag besöker din sajt visas då "din" vit bakgrund men "min" vit text. Vit på vit syns inte.

Upp

* BASEFONT

Markeras: <BASEFONT> - sluttagg saknas

Får innehålla: inget - tomt element

Får finnas i: blockelement exklusive PRE, inlineelement

OBS! Elementet är nedskrivet och får endast användas i HTML 4.0 Transitional och HTML 3.2.

Med detta element kan du specificera basfärg, -fontstorlek och -typsnitt för hela dokumentet, eller rättare sagt hela dokumentet förutom tabeller. (Pga den buggiga implementationen av tabeller i våra populära www-klienter betraktas inte tabeller som ett av BODY-elementen.)

BASEFONT är ett tomt element och saknar sluttagg. Placera det direkt efter BODY om du vill att attributet(n) ska gälla hela dokumentet.

Attribut

HTML 4.0HTML 4.0 TransitionalHTML 3.2
Elementet saknas SIZE, COLOR, FACE och ID (se %attrs; SIZE

Attributen fungerar på samma sätt som i elementet FONT. Du kan specificera alla tre eller enstaka. Attribut specificerade i BASEFONT kan överskridas med attribut specificerade i FONT. I ett sådant fall kommer den fontstorlek som specificeras i FONT vara relativ till den specificerade i BASEFONT. I likhet med FONT varierar storleksskalan i BASEFONT från 1 till 7 men endast fasta mått får uppges. Standardstorlek är 3.

Exempel

<BASEFONT SIZE=4 COLOR=BLACK FACE=ARIAL>

Upp | HTML-referensbok | Referensböcker

Valid HTML 4.0 dok.