Lektion 2 - Textformatering

Texten är vanligtvis den viktigaste ingridiensen på din sida. Den måste vara välskriven, varierad och uppdelad i stycken. Detta är ännu viktigare på Internet-sidor än på alla andra ställen. En enformig och tråkig text vill ingen läsa och surfar snabbt vidare.
För att formatera text använder man ett antal taggar. Nästan alla fungerar på samma sätt. Först en "på"-tagg, sedan texten man vill formatera och därefter en "av"-tagg.
Ex. Koden "<B>Internet är skoj</B>" kommer att resultera i att frasen "Internet är skoj" skrivs ut i fet stil.
Men det finns undantag. En radbrytning får man genom taggen <BR>. Den taggen har givetvis ingen "av"-tagg.

Nedan följer en lista över de vanligaste textformateringstabbarna.
Namn Tagg Förklaring Exempel
Radbrytning <BR> Börjar på ny rad
Nytt stycke <P> Börjar på ett nytt stycke
Vågrätt sträck <HR> Ritar ett vågrätt sträck över hela sidan
Rubrik <H1> </H1> Den största rubriken. Istället för 1 kan du sätta in alla heltal mellan 1 och 6. 1 är störst och 6 minst. Efter rubriken börjar man automatiskt på ny rad. Rubrik
Fetstil <B> </B> Texten mellan taggarna blir fet Provtext
Kursiv stil <I> </I> Texten mellan taggarna blir kursiv Provtext
Centrerad text <CENTER> </CENTER> Texten mellan taggarna centreras (läggs i mitten på raden)
Provtext
Understruken text <U> </U> Texten mellan taggarna blir understruken Provtext
Upphöjd text <SUP> </SUP> Texten mellan taggarna blir upphöjd 13,4 m3
Nedsänkt text <SUB> </SUB> Texten mellan taggarna blir nedsänkt H2O
Maskinskriven text <TT> </TT> Texten mellan taggarna skrivs med typisk maskinskrift med fast bokstavsbredd Provtext

Så här kan det se ut:

Exempel på ett HTML-dokument <HTML>
<HEAD>
<TITLE>Exempel 1, textformatering</TITLE>
</HEAD>
<BODY>
<U><H3>Vatten</H3></U> - ett <I>viktigt</I> ämne. <P>
Densitet: c:a 1 kg/dm <SUP>2</SUP> <BR>
Formel: H<SUB>2</SUB> <P>
<TT>Simrishamn 970912</TT>
</BODY>
</HTML>
Som ni säkert upptäckt går det att överlappa taggar så att en text blir både fet och understruken. Ett gott tips är då att börja och sluta med samma tag. Ett exempel:
<starttagg1><starttagg2><starttagg3>Text som ska formateras <sluttagg3><sluttagg2><sluttagg1>
Annars blir det lätt rörigt och svårförståligt.

Här följer mer eller mindre användbara textformateringstaggar:
Namn Tagg Förklaring Exempel
Genomstruken text <S> </S> Drar ett sträck igenom texten mellan taggarna Provtext
Förformaterad text <PRE></PRE> Texten mellan taggarna kommer inte att formateras av webläsaren. En förformaterad text ser likadan ut i webläsaren som i koden. 
Provtext
Blinkande text <BLINK> </BLINK> Texten mellan taggarna blinkar (Enbart i Netscape Navigator) Provtext
Stor stil <BIG> </BIG> Texten mellan taggarna blir större än vanligt (Enbart i Netscape Navigator och Internet Explorer 4.0) Provtext
Liten text <SMALL> </SMALL> Texten mellan taggarna blir mindre än vanligt (Enbart i Netscape Navigator och Internet Explorer 4.0) Provtext
Starkt betonad text <STRONG> </STRONG> Texten mellan taggarna blir starkt betonad (ungefär fet stil) Provtext
Betonad text <EM> </EM> Texten mellan taggarna blir betonad (ungefär kursiv) Provtext
Adress-format <ADDRESS> </ADDRESS> Adresser brukar på nätet skrivas inom dessa taggar
Provtext
Citat <BLOCKQUOTE> </BLOCKQUOTE> Texten mellan taggarna formateras som citat och texten får ökade utrymme runt omkring sig. Denna form av formatering används vid långa citat.
Provtext
Citat <CITE> </CITE> Texten mellan taggarna formatteras som citat. Denna tagg används vid korta citat eller hänvisningar till andra källor. Provtext
Kod <CODE> </CODE> HTML-koder (och andra koder) brukar på nätet skrivas inom dessa taggar Provtext
Ingen radbrytning <NOBR> </NOBR> Raden kommer inte att brytas mellan taggarna Provtext
Exempeltext <SAMP> </SAMP> Används för att framhäva att texten är utdata från något program eller någon annan datakälla. Provtext
Definierad term <DFN> </DFN> Framhäver en term som definieras i efterkommande text. Provtext
Variabel <VAR> </VAR> Används när en variabel av något slag ska skrivas ut. Provtext
Tangentbordstext <KBD> </KBD> Text som användaren ska skriva på tangentbordet. Provtext

Flera av dessa textformateringtabbarna är inte särskilt användbara men de kan vara bra att kunna för att förstå andras HTML-kod.

Få färg på tillvaron

Nu är vi så utbildade i textformattering att vi kan tillverka en läsvärd sida.Det är bara en sak som saknas. Färg.
Taggen som fixar detta och mycket annat är <FONT>. Denna tagg är lite annorlunda än de som nämnts ovan. Taggen har nämligen attribut. Man måste ju kunna välja färg på något sätt. Det finns två sätt:
1. <FONT COLOR=Blue>Hej</FONT>.
2. <FONT COLOR="#00FF20">Hej</FONT>.
Det finns 16 förvalda färger att välja mellan. Dessa färger är Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow or Aqua. I de senaste versionerna av webläsarna Netscape och Internet Explorer går dessa utmärkt at använda.
När inte dessa räcker till kan man i stället skriva in en RGB-kod (RGB=Red-Green-Blue). Det är en sexsiffrig hexadecimal kod där varje tecken kan vara 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E eller F (F är störst). De två första tecknen efter # anger hur mycket röd färg som ska användas. Nästa två hur mycket grön och till sist hur mycket blå.
Det finns flera hjälpmedel för att hitta den där perfekta färgen. Pröva tex http://kuler.adobe.com/
Några exempel på färger:
Kod Resultat
<FONT COLOR="#FF0000">Provtext</FONT> Provtext
<FONT COLOR="#00FF00">Provtext</FONT> Provtext
<FONT COLOR="#2D0022">Provtext</FONT> Provtext
<FONT COLOR="#A03296">Provtext</FONT> Provtext
<FONT COLOR="#2D59C8">Provtext</FONT> Provtext
<FONT COLOR="#FF6496">Provtext</FONT> Provtext

Liksom du kan ställa om färgen med taggen <FONT> kan du även byta storlek på texten. Här är några exempel:
<FONT SIZE="-2">Provtext</FONT>
<FONT SIZE="-1">Provtext</FONT>
<FONT>Provtext</FONT>
<FONT SIZE="+1">Provtext</FONT>
<FONT SIZE="+2">Provtext</FONT>
<FONT SIZE="+3">Provtext</FONT>
<FONT SIZE="+4">Provtext</FONT>
Som du ser kan värdena vara mellan -2 och +4 där 0 är standardvärde. Siffrorna måste anges med + och - eftersom de anger den relativa storleken. Om man vill ändra standard värdet på teckenstorleken kan det göras med taggen:
<BASEFONT SIZE=5>
Denna tagg ändrar standardstorleken till 5. Nu kommer +1 att ge storleken 6, -1 att ge storleken 4 osv. Ett annat sätt att göra samma sak är att numrera från 1 till 7 med 3 som standardvärde. Så här:
<FONT SIZE=1>Provtext</FONT>
<FONT SIZE=2>Provtext</FONT>
<FONT SIZE=3>Provtext</FONT>
<FONT SIZE=4>Provtext</FONT>
<FONT SIZE=5>Provtext</FONT>
<FONT SIZE=6>Provtext</FONT>
<FONT SIZE=7>Provtext</FONT>

Det är inte nog med detta. Taggen <FONT> kan byta teckensnitt också. Här ska man dock höja ett varningens finger. Det som ser bra ut på din skärm behöver inte se bra ut på någon annans. Det krävs att mottagardatorn har det teckensnitt du valt installerat för att det ska fungera. Använd därför bara de mest vanliga teckensnitten som Arial, Helvetica, Times New Roman, System osv. Som tur är kan man gardera sig något eftersom man kan välja tre teckensnitt. Om inte det första finns installerat används nummer 2 osv. Taggen kan se ut så här:

<FONT FACE="Arial,System,Times New Roman">Provtext</FONT> ger resultatet Provtext. Medans taggen:

<FONT FACE="System,Times New Roman, Arial">Provtext</FONT> ger resutatet Provtext

Ett riktigt exempel

Nu har vi fått så mycket kunskap om textformatering att vi kan tillverka ett riktigt trevligt och läsvärt dokument. Titta igenom följande exempel och försök förstå det. Får du problem får du titta tillbaka i texten.

Exempel på ett HTML-dokument <HTML>
<HEAD><TITLE>Vilhelm Moberg</TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT COLOR="#0000A0">
<H1>Vilhelm Moberg</H1>
-Ett svenskt författargeni
</FONT>
</CENTER>
<P>
Carl Arthur <U>Vilhelm</U> Moberg föddes den 20 augusti 1898 i ett soldattorp i Småland. Han var det fjärde barnet på en syskonkull på sju. Hans familj var fattig men led aldrig nöd. Vilhelm ville <I>inte</I> gå i sin fars fotspår och bli soldat. Han var orolig, upprorisk och ofta stressad. Hans far lär en gång ha sagt:
<FONT COLOR="#400080">
<BLOCKQUOTE>
"Vad du jäktar, till graven hinner du alltid"
</BLOCKQUOTE>
</FONT> <P>
Vilhelms första bok kom 1921 och hette <I>"I vapenrock och linnebyxor"</I> och behandlade hans värnpliktstid. 1927 kom hans genomslag med <I>Raskens</I>. Efter dessa hann Vilhelm med att ge ut ett 20-tal böcker (däribland Utvandrar krönikan). Han nöjde sig emellertid inte med detta utan skrev ett 30-tal skådespel.<P>
1973 tog Vilhelm av okänd anledning sitt liv. Han var då 75 år.<P>
För kommentarer och synpunkter. Skriv till<BR>
<ADDRESS>
<FONT COLOR="#800040">
Karl Karlsson<BR>
e-mail: Kalle@kallesserver.se
</FONT>
</ADDRESS>
</BODY>
</HTML>


Vissa tecken måste ersättas

Alla datorer talar inte samma språk. Olika operativsystem och olika teckenuppsättning sätter upp hinder. De mest problematiska tecknen är specialtecknen som används mera sällan. Till dessa hör de svenska å, ä och ö. För att få en japansk Macintosh-dator att förstå vad vi kodar på en svensk PC finns det koder som kan ersätta vissa tecken. Om man ersätter tecknet med koden är man säker på att alla kan läsa texten på rätt sätt.
Här följer en lista över de vanligaste koderna. Skriv alltså koden istället för tecknet i HTML-dokumentet.

Tecken Kod      Tecken Kod
< &lt;   > &gt;
& &amp;   " &#34;
ä &auml;   Ä &Auml;
ö &ouml;   Ö &Ouml;
å &ring;   Å &Aring;
Hårt mellanslag &nbsp;   © &copy;
® &reg;  
Tänk på att i detta fallet spelar det roll hur små och stora bokstäver kombineras.
Den speciella koden för mellanslag behöver man inte använda i vanliga fall. Vid ett hårt mellenslag bryter inte webläsaren raden. Hårt mellanslag kan också användas om man vill ha flera mellanslag efter varandra.
Lista över alla specialkoderna

Tycker du det verkar jobbigt att ändra alla tecken? Jag med. Därför har jag gjort ett program som automatiskt byter ut å,ä och ö mot det speciella koderna i HTML. Programmet heter Svenska tecken för HTML 1.0 och får laddas hem och användas gratis.

Rullande text

Det är enkelt att göra en rullande text. Så här kan det se ut:
HTML räddar världen
Taggen som ordnar en rullande text är <MARQUEE></MARQUEE>. Den har en hel del attribut.
Attribut Förklaring
BGCOLOR Bestämmer färgen bakom texten.
ALIGN Talar om hur den rullande texten ska placeras i förhållande till annan text. Se kapitlet om bilder för närmare beskrivning.
HEIGHT och WIDTH Bestämmer rutans storlek i pixlar.
VSPACE och HSPACE Anger hur mycket tom plats texten ska omges av vertikalt och horisontellt. Värdet anges i pixlar.
DIRECTION Kan sättas till right eller left och bestämmer åt vilket håll texten ska rulla.
BEHAVIOR Ställer in textens uppförande. Kan anta värdena scroll, slide eller alternate. Scroll innebär att texten rör sig från ena sidan till den andra och försvinner där innan den börjar om. Vid slide rullar texten in och stannar när den stöter mot kanten av rutan. Alternate innebär att texten studsar fram och tillbaka i rutan.
LOOP Anger hur många gånger texten ska rulla i rutan.
SCROLLAMOUNT Anger hur många pixlar som texten ska flytta sig vid varje förflyttning.
SROLLDELAY Talar om hur många millisekunder det ska vara mellan förflyttningarna

En rullande text kan vara effektfull och få uppmärksamhet från användaren. Men för mycket som rör sig och blinkar upplevs ofta som besvärande. Använd med måtta!

Huvud-
meny		 Prov på
lektionen		 Nästa
lektion