Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

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 <P> och en ny rad där vi haft <BR>.
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:
<FONT SIZE="1">Denna text är väldigt liten</FONT>
<FONT SIZE="2">Denna text är liten</FONT>
<FONT SIZE="3">Denna text är normal</FONT>
<FONT SIZE="4">Denna text är stor</FONT>
<FONT SIZE="6">Denna text är väldigt stor</FONT>

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:
<FONT SIZE="4">
Denna text är stor (storlek 4 = 4)
   <FONT SIZE="-2">
   Denna text är liten (storlek 2 = 4-2)
   </FONT>
Denna text är stor (storlek 4 = 4)
   <FONT SIZE="-3">
   Denna text är väldigt liten (storlek 1 = 4-3)
      <FONT SIZE="+1">
      Denna text är liten (storlek 2 = 4-3+1)
      </FONT>
   </FONT>
</FONT>

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:
<FONT SIZE="+1">Större text</FONT>
<FONT SIZE="-1">Mindre text</FONT>


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:
<FONT FACE="typsnitt">en text</FONT>

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:
<FONT FACE="arial">arial</FONT>

<FONT FACE="wild latin">wild latin</FONT>

<FONT FACE="wingdings">wingdings</FONT>           (wingdings)

<FONT FACE="persian">persian</FONT>

<FONT FACE="courier">courier</FONT>

<FONT FACE="impact">impact</FONT>

<FONT FACE="garamond">garamond</FONT>

<FONT FACE="modern">modern</FONT>

<FONT FACE="pafet">pafet</FONT>

<FONT FACE="pcfon">pcfon</FONT>

<FONT FACE="verdana">verdana</FONT>

<FONT FACE="times new roman">times new roman</FONT>

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...
<FONT FACE="KalleAnkasTypsnitt">KalleAnkasTypsnitt</FONT>
...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:
<FONT FACE="typsnitt1, typsnitt2, typsnitt3">en text</FONT>
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:
<FONT FACE="wingdings">
qwertyuiopåasdfghjklöäzxcvbnm
<BR>
QWERTYUIOPÅASDFGHJKLÖÄZXCVBNM
<BR>
1234567890/*-+,.;:<>|§½
<BR>
¨^~'?=`´)(/&%¤#"!@£${[]}\
</FONT>


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:
<FONT COLOR="en färg">texten som ska färgas</FONT>

Ett konkret exempel kan alltså vara:
Nu ska jag skriva <FONT COLOR="red">något viktigt</FONT> 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:
<FONT COLOR="red">red</FONT>
<FONT COLOR="orange">orange</FONT>
<FONT COLOR="white">white</FONT>
<FONT COLOR="blue">blue</FONT>
<FONT COLOR="black">black</FONT>
<FONT COLOR="yellow">yellow</FONT>

I många av fallen kan du sätta "light" eller "dark" framför färgens namn. T.ex:
<FONT COLOR="lightblue">lightblue</FONT>
<FONT COLOR="blue">blue</FONT>
<FONT COLOR="darkblue">darkblue</FONT>

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å:
<FONT COLOR="#FF0000">#FF0000</FONT>
<FONT COLOR="#00FF00">#00FF00</FONT>
<FONT COLOR="#FFFFFF">#FFFFFF</FONT>
<FONT COLOR="#0000FF">#0000FF</FONT>
<FONT COLOR="#000000">#000000</FONT>
<FONT COLOR="#FFFF00">#FFFF00</FONT>


Självklar kan du använda flera attribut samtidigt i FONT-taggen. T.ex:
<FONT COLOR="green" SIZE="+1" FACE="courier">Hej hej</FONT>

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: <U>Understruken text</U>

Text: <I>Kursiv text</I>

Text: <B>Fet text</B>

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

Text: <STRONG>Tjock text</STRONG>

Text: <TT>Maskinskriven text</TT>

Text: <EM>Betona en text</EM>

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: <SMALL>Liten text</SMALL>

Text: <SUB>Nedsänkt text</SUB>

Text: <SUP>Upphöjd text</SUP>

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. <U><I><B>en text</B></I></U>


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.

<P ALIGN="left">left (till vänster)</P>

<P ALIGN="right">right (till höger)</P>

<P ALIGN="center">center (i mitten)</P>


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:
&nbsp;

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 "&nbsp;". Med PRE-taggen kan man även skapa mindre tabeller som nedan:
-----------------------------------------------------------------------------------==
Fördelen med      PRE-taggen     är att   --  Dessutom kan man göra fina figurer!  ==
man kan           skapa          fina     --                                       ==
tabeller          utan           att      --        ---- _@              \/        ==
lära sig          TABLE-taggen   (taggen  --       ----_ \<._   =------m-00-m------==
som gör           tabeller!)              --      --- (_)/ (_)  =        `´        ==
-------------------------------------------------------======---=------------------==
PRE
PRE står för "PREformatted text" och gör så att varje tecken tar upp samma bredd på sidan och visar alla mellanslag, tabbar, radbyten etc.

Vissa äldre webbläsare kan få problem med att visa vissa tecken, t.ex. å, ä och ö. Då kan man istället skriva en "specialkod" som även dessa webbläsare klarar. Nedan visas vilken bokstav/tecken som fås fram av vilken kod.
Det är dock absolut inget måste att skriva tecken som å, ä och ö på detta vis!

< = &lt;
> = &gt;
Å = &Aring;
å = &aring;
Ä = &Auml;
ä = &auml;
Ö = &Ouml;
ö = &ouml;
É = &Eacute;
é = &eacute;
  = &nbsp;    (mellanrum)


Andra sätt att skriva tecken är att skriva in
&#ettnummer;

Tabellen nedan visar vilka olika tecken man kan få fram med vilken kod. Tänk på att olika webbläsare kan visa olika många tecken. Dvs., den här tabellen kommer med stor sannolikhet se olika ut om du kollar på den med Netscape och med Explorer.

"   &quot;
&   &amp;
<   &lt;
>   &gt;
©   &copy;
®   &reg;
À   &Agrave;
à   &agrave;
Á   &Aacute;
á   &aacute;
   &Acirc;
â   &acirc;
à  &Atilde;
ã   &atilde;
Ä   &Auml;
ä   &auml;
Å   &Aring;
å   &aring;
Æ   &AElig;
æ   &aelig;
Ç   &Ccedil;
ç   &ccedil;
È   &Egrave;
è   &egrave;
É   &Eacute;
é   &eacute;
Ê   &Ecirc;
Ë   &Euml;
ë   &euml;
Ì   &Igrave;
ì   &igrave;
Í   &Iacute;
í   &iacute;
Î   &Icirc;
î   &icirc;
Ï   &Iuml;
ï   &iuml;
Ð   &ETH;
ð   &eth;
Ñ   &Ntilde;
ñ   &ntilde;
Ò   &Ograve;
ò   &ograve;
Ó   &Oacute;
ó   &oacute;
Ô   &Ocirc;
ô   &ocirc;
Õ   &Otilde;
õ   &otilde;
Ö   &Ouml;
ö   &ouml;
Ø   &Oslash;
ø   &oslash;
Ù   &Ugrave;
ù   &ugrave;
Ú   &Uacute;
ú   &uacute;
Û   &Ucirc;
û   &ucirc;
Ü   &Uuml;
ü   &uuml;
Ý   &Yacute;
ý   &yacute;
Þ   &THORN;
þ   &thorn;
ÿ   &yuml;
ß   &szlig;


Test
I slutet av varje kapitel i HTML-kursen finns några frågor som du ska svara på för att testa dina kunskaper inom HTML. Om du har fått alla rätt så är det bara att gå vidare, fast har du haft något fel kan det kanske vara klokt att försöka lista ut vad som kan ha varit fel. Givetvis kan du gå vidare även om du inte svarar rätt på alla frågor.
Vilken tagg byter rad?
<BR>
<B>
<PRE>

Vilket av följande attribut kan användas med P-taggen?
ALIGN
BORDER
WIDTH

Vilket attribut kan ändra en texts storlek?
FONT
SIZE
H1

Vilket typsnitt kommer troligtvis denna text att visas med för dina besökare:
<FONT FACE="KalleAnka, Arial">text</FONT>

Ett typsnitt som heter "KalleAnka"
Ett typsnitt som heter "Arial"
Ett typsnitt som heter "KalleAnka, Arial"

Vilka färger motsvarar #FFFFFF respektive #000000?
Vit och svart
Ingen av koderna är en giltig färg
Blå och mörkblå

Nämn en anledning till att man kan behöva &nbsp; på sin sida?
Man vill att HTML-koden ska bli mer lättläst
Man vill ha flera radbyten utan att använda <BR>
Man vill ha flera mellanslag i rad

Vad kommer denna HTML-kod att resultera i med en webbläsare:
Nisses Bilsats (&reg;) av Nisses Industrier (&copy;)

Nisses Bilsats (&reg;) av Nisses Industrier (&copy)
Nisses Bilsats (®) av Nisses Industrier (©)
Nisses Bilsats (R) av Nisses Industrier (C)







Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]