JavaScript.nu / HTML-kurs / Text, typsnitt och f�rger

Text, typsnitt och f�rger

I detta kapitel:
Radbyten
Rubriker
Stor text
Typsnitt
Textf�rg
Textstilar
Centrera text
Mellanslag
PRE-taggen
Tecken
Test

Hittills har du skapat en sida genom att kopierat av en mall och sedan �ndra den efter instruktioner. Fram�ver kommer du f� klistra in de HTML-koder du l�r dig sj�lv i din kod. Dvs, du ska redan nu f� m�jlighet att skapa din sida precis som du sj�lv vill. T�nk p� att dina taggar alltid ska l�gga n�gonstans mellan din <BODY>-tagg och dennes avslutningstagg, dvs. </BODY>.
Bilden nedan visar vart du ska klistra in de exempelkoder du fram�ver l�r dig.
NotePad

Vill du ha nya rader i din hemsida r�cker det inte med att g�ra n�gra radbyten i NotePad. Du m�ste ha en BR-tagg f�r att f� fram en ny rad. Har du en P-tagg f�r du inte bara fram en ny rad, utan det blir en tom rad mellan dina rader ocks�. Exemplet nedan visar hur du f�r nya raderbyten i din hemsida:
NotePad

Bilden nedan visar att vi f�tt en tom rad d�r vi haft och en ny rad d�r vi haft .
F�rsta hemsidan med radbyten

BR

BR st�r f�r "BReak" och byter rad

P

P st�r f�r Paragraph och skapar ett nytt stycke

Attribut

ALIGN Till�tna v�rden �r left, right eller center

I HTML kan man skapa rubriker med HX-taggen (X = en siffra mellan 1 och 6). Nedan visas hur resultatet blir p� din sida med en rubrik. V�lj den som passar din sida b�st:

<H1>skriv detta f�r att f� denna storlek</H1>

<H2>skriv detta f�r att f� denna storlek</H2>

<H3>skriv detta f�r att f� denna storlek</H3>

<H4>skriv detta f�r att f� denna storlek</H4>

<H5>skriv detta f�r att f� denna storlek</H5>

<H6>skriv detta f�r att f� denna storlek</H6>

F�r att sammanfatta HX-taggarna: Du f�r allts� mindre text med <H6>-taggen och st�rre med <H1>-taggen.

Exempel: Anta att du gillar denna tagg och nu vill anv�nda dig av tre rubriker p� din sida. 1 av storleksordningen H2 och 2 st av storleksordningen H3. D� blir din HTML-kod s�h�r:
NotePad

Om du nu sparar koden ovan till din hemsida s� ser du att resultatet blir:
F�rsta hemsidan med rubriker

P� precis samma s�tt som du nyss gjorde n�r du klistrade in den tagg du ville anv�nda dig av i din HTML-kod (din index.html-fil) s� g�r du precis likadant med alla framtida taggar du vill testa. �ppna allts� din index.html-fil med NotePad, skriv in taggen precis som denna kurs visar, spara din sida och �ppna nu denna med din webbl�sare. Nu f�r du den efterfr�gade effekten (i detta fall tre rubriker med taggarna <H2> och <H3>) d�r du vill ha den p� din sida.

H1, H2, H3, H4, H5, H6

H st�r f�r Header och skapar en rubrik

Attribut

ALIGN Till�tna v�rden �r left, right eller center

Observera att du f�r b�de tjock och stor text d� du g�r rubriker med <Hx> (x = ett nummer). F�rutom detta f�r du en tom rad f�re och efter din rubrik. Om du bara vill ha en st�rre text f�r du anv�nda FONT-taggen. Bara FONT-taggen i sig g�r ingenting! Du m�ste allts� anv�nda dig utav en SIZE-attribut om du vill �ndra textens storlek.
Exempel: Denna text �r v�ldigt liten
Denna text �r liten
Denna text �r normal
Denna text �r stor
Denna text �r v�ldigt stor
L�gg m�rke till att du med FONT-taggen �ven kan ange hur mycket texten ska bli st�rre respektive mindre �n vad man skriver med fr�n b�rjan. F�r att f�rklara detta lite b�ttre, kolla p� exemplet nedan:
 Denna text �r stor (storlek 4 = 4) Denna text �r liten (storlek 2 = 4-2) Denna text �r stor (storlek 4 = 4) Denna text �r v�ldigt liten (storlek 1 = 4-3) Denna text �r liten (storlek 2 = 4-3+1) 

Om du vanligtvis bara vill �ndra den storlek du skriver med f�r att f� en lite st�rre eller lite mindre text s� kan du med andra ord anv�nda dig utav:
St�rre text
Mindre text

Med FONT-taggen kan du �ven byta typsnitt p� den text du anv�nder. Du kan allts� anv�nda FONT-taggen b�de f�r att byta textstorlek och f�r att byta typsnitt, eller om du s� vill, f�r att g�ra b�de och.
F�r att byta typsnittet p� texten skriver du:
en text

N�gra konkreta exempel p� typsnitt �r dessa.
Vill du kan du kopiera koden direkt till din sida f�r att se att det fungerar:

arial
wild latin
wingdings (wingdings)
persian
courier
impact
garamond
modern
pafet
pcfon
verdana
times new roman

M�rker du att n�gon av typsnitten ser helt normal ut?
Om s� �r fallet s� har du inte typsnittet installerat p� din dator.
S� t�nk p� att typsnittet du v�ljer m�ste vara installerat p� bes�karens dator f�r att det typsnitt du valt ska visas.
Skriver jag t.ex...
KalleAnkasTypsnitt
...S� ser du att typsnittet ut som all annan text. Detta f�r att webbl�saren letar efter ett typsnitt som heter "KalleAnkasTypsnitt" i din dator, och om det inte finns visas ett s� kallat "default-typsnitt", dvs. din webbl�sares standardtypsnitt.
Om du vill kan du lista flera typsnitt i rad, d� kan du vara s�ker p� att om inte det f�rsta typsnittet finns, d� visas n�sta, om det finns. Som exempel:
en text
I f�rsta hand visas typsnitt1, i andra hand typsnitt2. Om inte detta heller finns visas typsnitt3. Finns inte heller detta s� visas webbl�sarens default-typsnitt.

Tack vare detta kan du med Wingdings f� fram 100 tals roliga figurer.
H�r �r n�gra exempel (f�r att se vilken "riktiga bokstav" som motsvarar vilket tecken kopierar och klistrar du tecknet till ett skrivf�lt s� ser du den riktiga bokstaven):
qwertyuiop�asdfghjkl��zxcvbnm
QWERTYUIOP�ASDFGHJKL��ZXCVBNM
1234567890/*-+,.;:<>|��
�^~'?=`�)(/&%�#"!@�${[]}\

F�r att skriva detta har jag skrivit:
 qwertyuiop�asdfghjkl��zxcvbnm QWERTYUIOP�ASDFGHJKL��ZXCVBNM 1234567890/*-+,.;:<>|�� �^~'?=`�)(/&%�#"!@�${[]}\

Nu har du l�rt dig 2 olika attribut till FONT-taggen. SIZE och FACE. Nu ska vi g� genom det sista viktiga attributet f�r FONT-taggen. N�mligen COLOR. Vad skulle webben vara utan textf�rger?
Sj�lvklart kan du med FONT-taggen �ven byta f�rg p� din text. F�r att byta textf�rg skriver du:
texten som ska f�rgas

Ett konkret exempel kan allts� vara:
Nu ska jag skriva n�got viktigt h�r!

Om du inte �r j�tteduktig p� engelska s� finns h�r en lista med n�gra vanliga f�rger du kanske kan ha nytta av:

red
orange
white
blue
black
yellow

I m�nga av fallen kan du s�tta "light" eller "dark" framf�r f�rgens namn. T.ex:

lightblue
blue
darkblue

Som �verkurs ska ocks� n�mnas att du kan f� fram en massa f�rger genom att ange en f�rg i den s� kallade RGB-skalan, som anges med 6 tecken, 1-9 och/eller a-f. RGB-koden ska b�rja med ett #. N�gra exempel �r allts�:

#FF0000
#00FF00
#FFFFFF
#0000FF
#000000
#FFFF00

Sj�lvklar kan du anv�nda flera attribut samtidigt i FONT-taggen. T.ex:
Hej hej

FONT

FONT st�r f�r just FONT (=font, sats, stilsats, stil) och g�r det m�jligt att �ndra en texts f�rg, storlek och typsnitt.

Attribut

SIZE     Ange textens storlek som v�rde.

FACE     Ange textens typsnitt som v�rde.

COLOR     Ange textens f�rg som v�rde.

Nedan visas flertalet taggar som kan komma till nytta n�r du skapar din sida.

Text: Understruken text

Text: Kursiv text

Text: Fet text

Text: <BLINK>Blinkande text (Fungerar bara med Netscape)</BLINK>

Text: Tjock text

Text: <TT>Maskinskriven text</TT>

Text: Betona en text

Text: <CODE>K�llkodstext</CODE>

Text: <DFN>En definitionstext</DFN>

Text: <CITE>Ett citat</CITE>

Text: <KBD>Text en anv�ndare ska skriva</KBD>

Text: <SAMP>Utmatning fr�n ett program</SAMP>

Text: <VAR>Ett variabelnamn</VAR>

Text: <BIG>Stor och tjock text</BIG>

Text: Liten text

Text: _{Neds�nkt text}

Text: ^{Upph�jd text}

Text: ~~<STRIKE>Struken text</STRIKE>~~

<MARQUEE>Text: Scrollande text (Fungerar bara med Internet Explorer)</MARQUEE>

Du kan ocks� blanda med olika typer genom att skriva t.ex. en text

Med CENTER-taggen kan du centrera text:

<CENTER>texten som ska centreras</CENTER>

CENTER

CENTER centrerar text

Som du tidigare l�rt dig startar P-taggen ett nytt stycke. Fast som du kanske lagt m�rke till s� har P-taggen �ven ett attribut som heter ALIGN. Denna best�mmer om texten ska finnas till v�nster, till h�ger eller vara centrerad.

left (till v�nster)

right (till h�ger)

center (i mitten)

Som du s�kert lagt m�rke till s� spelar det ingen roll hur m�nga mellanrum du har i din HTML-kod. De visas �nd� inte i din hemsida. F�r att de ska visas m�ste du skriva mellanrum med denna HTML-kod:
 

Koden nedan visar hur du kan g�ra mellanrum:
NotePad

Resultatet blir d�:
F�rsta hemsidan med mellanslag

Undantaget �r om du s�tter texten mellan <PRE> och </PRE>. D� blir texten EXAKT som du skrivit den i dokumentet. D� blir det ett mellanrum f�r vart mellanrum och en ny rad f�r var ny rad. Ett exempel �r:

<PRE>
Ord1   Ord2

Ord3
</PRE>

Ovanst�ende kod resulterar i detta:

Ord1   Ord2

Ord3

Notera att jag nu inte har anv�nt n�gra " ". Med PRE-taggen kan man �ven skapa mindre tabeller som nedan: