Teckensnitt och format

Text och teckensnitt (fonter, typsnitt) som visas på websidan beskrivs av HTML-koden för webläsaren och själva teckensnittet laddas alltså inte ned när du läser in sidan i webläsaren.

Då teckensnittet inte bäddas in och följer med HTML-filen kan textens utseende variara på olika datorer. Om inte det valda teckensnittet finns på användarens dator ersätts det helt enkelt av ett teckensnitt som finns. Det innebär att din layout kan förändras en hel del, förutom att texten inte visas som du vill så kan förskjutning i texten uppstå vilket i sin tur kan placera bilder och grafik felaktigt. Förutom alfabetets bokstäver kan du använda dig av specialtecken » som framgår av tabellen längst ned på denna sida.

Vill du vara säker på att din layout bibehålls så kan du använda något av dessa teckensnitt:

Arial	Arial Black	Times New Roman
Courier New	Verdana	Comic Sans
Impact	Georgia	Trebuchet
Webdings abcdefgh

Teckensnittens utseende kan variera beroende på vilken storlek du valt och dessutom beror det på vilken bildskärmsupplösning dina besökare har. Här är några exempel på teckensnitt i olika storlekar där du själv kan avgöra läsbarheten:

TIMES NEW ROMAN size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!

För att ha ännu bättre kontroll över sina websidor kan man i HTML-koden lägga in ett eller flera ersättningsteckensnitt. Om det valda teckensnittet inte finns visas istället det valda erättningsteckensnittet. Ange de valda teckensnitten åtskilda med kommatecken:

Du kan bifoga och bädda in de fonterna som används i en teckensnittsfil. Den här metoden är inte helt tillförlitlig och rekommenderas inte. Läs mer i guiden "Egna teckensnitt" »

Storlekar på tecken

HTML-koden kan innehålla 7 storlekar på teckensnitten:

1 ( 8 punkter)
2 (10 punkter)
3 (12 punkter)
4 (14 punkter)
5 (18 punkter)
6 (24 punkter)
7 (36 punkter

HTML-koden för att ange teckensnittstorlek är:

TIPS! Om du använder CSS kan du ange de storlekar du vill utan begränsningar! När du är klar med HTML-grunderna går du vidare till guiden CSS-grunder »

Rubriker - Headings

Det finns också möjlighet att använda märket för HEADING som ett alternativ till  Rubrikerna finns i fasta storlekar som är ungefär desamma som i exemplet ovan. Egenskaperna för märket är dessutom att ett avstånd till nästa text skapas och att för styckeformatering inte behövs. Idag används HEADING oftast tillsammans med CSS » för att ange fördefinierade Rubrikformat och kan då få valfria storlekar. Här är dock de fasta storlekar som gäller direkt i HTML-koden:

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

HEADING anges med märket <H1>, <H2>, <H3> osv. Här anges den största rubriken:

<h1>Rubrik</h1>
Texten som kommer i stycket efter...

ÖVNING 2: TECKENSNITT OCH FORMAT

Fortsätt med ditt dokument min_forsta.htm som du började med tidigare. För att dela upp texten i olika stycken används märket  (Paragraph). Märket ger även ett extra radavstånd till texten som kommer efter. Om du har behov av att göra en radbrytning kan du använda märket  
men använd radbrytning sparsamt, låt istället texten löpa till webläsarens kant. Vill du ha större kontroll över radlängden kan du istället lägga texten i Tabeller »

Textformat

Skriv mer text och formatera med stycken och teckensittsstorlek enligt nedan. Nya ändringar visas i fet stil:

se färdigt exempel »

<html>
<head><title>Min Internetplats</title></head>
<body bgcolor=#FFFFFF>
Det här är min första websida!  
Jag har precis lärt mig att använda olika storlekar på texten.
</body>
</html>

Spara och granska i webläsaren:

Fet stil

För att märka upp vissa ord som feta, kursiva eller understrukna använder du märkena  och  samt . Det finns även möjlighet att använda alternativa, sk logiska taggar istället. Fet stil kan kodas som  och kursiv stil som ).

Skriv mer text och ändra teckensnittens färg och attribut:

se färdigt exempel »

<html>
<head><title>Min Internetplats</title></head>
<body bgcolor=#ffffff>
Det här är min första websida!
Jag har precis lärt mig att använda olika storlekar på texten.
<Jag kan också göra vissa ord i fet stil, andra i kursiv stil eller understruket.
Den här texten är färgad i
Rött,
Blått och
Grönt!
</body>
</html>

Spara och granska i webläsaren:

Specialtecken

Vissa specialtecken motsvaras i HTML-koden av ett namn eller ett nummer. I vissa fall krävs det för att tecknet ska visas och i andra fall rekommenderas det för korrekt återgivning i de webläsare som inte är svenskspråkiga. Våra bokstäver ÅÄÖ brukar ersättas vilket gör att chansen att de visas korrekt på flera plattformar och webläsare då är större än om du anger själva tecknet i HTML-koden. Så här ersätts bokstäverna ÅÄÖåäö:

å = å
Å = Å
ä = ä
Ä = Ä
ö = ö
Ö = Ö

Liten översättningstabell för vanliga specialtecken:
Tecken	Kod	Tecken	Kod	Tecken	Kod
å	å	©	©	§	§
ä	ä	®	®	«	«
ö	ö	™		»	»
<	<	£	£	°	°
>	>	¥	¥	æ	æ
&	&	€	€	ø	ø
£	£	“		‰
´	´	”		ü	ü
"	"	—		˜

Större översättningstabell för specialtecken. Du kan ange kod eller mostvarande ASCII-nummer:
Tecken	Kod	ASCII	Tecken	Kod	ASCII
nonbraking space			Ð	Ð	Ð
¡	¡	¡	Ñ	Ñ	Ñ
¢	¢	¢	Ò	Ò	Ò
£	£	£	Ó	Ó	Ó
¤	¤	¤	Ô	Ô	Ô
¥	¥	¥	Õ	Õ	Õ
¦	¦	¦	Ö	Ö	Ö
§	§	§	×	×	×
¨	¨	¨	Ø	Ø	Ø
©	©	©	Ù	Ù	Ù
ª	ª	ª	Ú	Ú	Ú
«	«	«	Û	Û	Û
¬	¬	¬	Ü	Ü	Ü
			Ý	Ý	Ý
®	®	®	Þ	Þ	Þ
¯	¯	¯	ß	ß	ß
°	°	°	à	à	à
±	±	±	á	á	á
²	²	²	â	â	â
³	³	³	ã	ã	ã
´	´	´	ä	ä	ä
µ	µ	µ	å	å	å
¶	¶	¶	æ	æ	æ
·	·	·	ç	ç	ç
¸	¸	¸	è	è	è
¹	¹	¹	é	é	é
º	º	º	ê	ê	ê
»	»	»	ë	ë	ë
¼	¼	¼	ì	ì	ì
½	½	½	í	í	í
¾	¾	¾	î	î	î
¿	¿	¿	ï	ï	ï
À	À	À	ð	ð	ð
Á	Á	Á	ñ	ñ	ñ
Â	Â	Â	ò	ò	ò
Ã	Ã	Ã	ó	ó	ó
Ä	Ä	Ä	ô	ô	ô
Å	Å	Å	õ	õ	õ
Æ	Æ	Æ	ö	ö	ö
Ç	Ç	Ç	÷	÷	÷
È	È	È	ø	ø	ø
É	É	É	ù	ù	ù
Ê	Ê	Ê	ú	ú	ú
Ë	Ë	Ë	û	û	û
Ì	Ì	Ì	ü	ü	ü
Í	Í	Í	ý	ý	ý
Î	Î	Î	þ	þ	þ
Ï	Ï	Ï	ÿ	ÿ	ÿ

Gå vidare: Listor - definition lists »