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: