[next][previous][contents]

5. Löpande text + formatering

5.1 Grundläggande formatering

När man formaterar text i HTML är det ofta med taggar som "spänner" över ett visst stycke text. Man kan se dem som en markering, och all text inom markeringen ges ett visst attribut.

Som exempel: 

Det här ger <B>fet</B> text!
Ger resultatet:
Det här ger fet text!
Ganska enkelt faktiskt, vi ser hur <B> börjar markeringen med fet stil och hur </B> avslutar den.

Man ska tänka på att inte röra ihop olika markeringar. Man kan (och bör) ha fler stycken av olika slag inuti varandra, men man ska aldrig avsluta taggarna i fel ordning. Alltid sist-in-först-ut! Gör man på något annat sätta kan browsern bli mycket konfunderad, och du likaså.

Det finns några stycken till, nämligen: 

<U>Understruken</U>, <I>kursiv (italics)</I>,
<TT>statisk bredd (typewriter text)</TT>, <BLINK>blinkande
(endast i netscape?)</BLINK> och <S>genomslagen (strikethrough)</S>.
Ger resultatet:
Understruken, kursiv (italics), statisk bredd (typewriter text), blinkande (endast i netscape?) och genomslagen (strikethrough).

5.2 FONT-taggen

Det där var de mest grundläggande. Vi går vidare till kommandot FONT. FONT har tre flitigt använda växlar, COLOR, FACE och SIZE.

FACE:
Med FACE väljer du teckensnitt, tänk på att olika plattformar brukar ha olika teckensnitt, och räkna inte med att alla har dina special-teckesnitt. Själv använder jag ofta FACE="Verdana, Arial, Helvetica". Verdana är snyggast, men finns inte den tar browsern Arial, och kör besökaren Mac så finns troligen Helvetica istället (precis likadan som Arial).

COLOR:
Precis vad det låter som, väljer färg på bokstäverna. Använd antingen färgernas namn eller hexkod, se avsnitt 4. T.ex. så fungerar COLOR="RED" utmärkt.

SIZE:
Lite krångligare, då det finns två sätt att sätta storlekar, relativa eller absoluta. T.ex. SIZE=3 och SIZE=+1. Den andra betyder att bokstäverna ska bli en storlek större än standardfonten, inget annat. Det finns begränsningar hur stora tecken man får använda, jag tror den ligger vid 7 nånstans. Standardfonten går att ändra genom att peta in kommandot BASEFONT=n i början där 'n' är önskad teckenstorlek. Det här kan vara praktiskt om man har mycket text man vill skriva med ett större eller mindre teckensnitt.

5.3 Stycke- och radbrytningar

HTML är ganska smidigt, i den mån att det struntar i om du har massa radbrytningar eller mellanslag i rad...

Skriv en textrad, och browsern ger den tillgänglig bredd, bryter den sen. Vill du ha en radbrytning så infogar du en <BR> (break line). Vill du markera styckeslut infogar du istället <P> (paragraph). Egentligen tror jag det är meningen att man ska använda <P> och </P>, men bara <P> funkar bra också. Text som formateras på detta sättet blir lätt att läsa, t.o.m. som HTML-kod. Vi tar ett exempel på hur jag tycker att text bör formateras: 

<B>YODA</B><BR>
Hmm. That face you make. Look I so old to
young eyes?<P>

Luke is sitting in a corner of the cramped space and, indeed, his
look has been woeful. Caught, he tries to hide it.<P>

<B>LUKE</B><BR>
No... of course not.<P>

<B>YODA</B> (tickled, chuckles)<BR>
I do, yes, I do!  Sick have I become. Old and
weak. (Points a crooked finger) When nine
hundred years old you reach, look as good you
will not. Hmm?<P>

Yoda chuckles at this, coughs, and hobbles over toward his bed.<P>

<B>YODA</B><BR>
Soon will I rest. Yes, forever sleep. Earned
it, I have.<P>

Yoda sits himself on his bed, with great effort.<P>

<B>LUKE</B><BR>
Master Yoda, you can't die.<P>

<B>YODA</B><BR>
Strong am I with the Force... but not that
strong! Twilight is upon me and soon night
must fall. That is the way of things ... the
way of the Force.<P>
Ger resultatet:
YODA
Hmm. That face you make. Look I so old to young eyes?

Luke is sitting in a corner of the cramped space and, indeed, his look has been woeful. Caught, he tries to hide it.

LUKE
No... of course not.

YODA (tickled, chuckles)
I do, yes, I do! Sick have I become. Old and weak. (Points a crooked finger) When nine hundred years old you reach, look as good you will not. Hmm?

Yoda chuckles at this, coughs, and hobbles over toward his bed.

YODA
Soon will I rest. Yes, forever sleep. Earned it, I have.

Yoda sits himself on his bed, with great effort.

LUKE
Master Yoda, you can't die.

YODA
Strong am I with the Force... but not that strong! Twilight is upon me and soon night must fall. That is the way of things ... the way of the Force.

Ganska lättläst alltså. Det går att göra bättre, men låt oss inte krångla till det.
vänj dig vid att göra radbrytningarna enkla för dig, det är vanligt att folk krånglar till saker helt i onödan.

5.4 PRE-taggen - skriva kod på hemsidor

Ibland kan det vara önskvärt att få med alla sina radbrytningar och mellanslag på en hemsida. Då går det utmärkt att använda PRE-taggen. Jag har använt den flitigt här, den finns runt alla mina exempel. PRE formaterar automatiskt texten till TT, bryter aldrig texten automatiskt men reagerar dock på länkar och formaterings-kommandon inuti textblocket.

För att undvika att browsern skulle reagera på varenda tag i exempel-koden har jag varit tvungen att byta ut < och > mot deras escape-codes (se avsnitt 12), &lt; och &gt; (less- och greater than). Eftersom jag sitter i Linux gör jag det smidigast i ett vanligt rxvt-fönster. Jag skrev först:

cat > fett
Klistrade sedan in min text, och tryckte Ctrl+D (avbryter). Därefter kör jag pipelinen:

cat fett | sed s/'<'/'\&lt;'/g | sed s/'>'/'\&gt;'/g
Ut kommer koden, med < och > utbytta, bara att klistra tillbaka i dokumentet. På liknande sätt går givetvis att göra med vilket kodstycke som helst, PRE-taggen är till för sånt.

5.5 HR

Ibland är det lämpligt att infoga en avdelare, en 'horizontal ruler'. HR-taggen tar några stycken argument. En ren HR infogar en smal linje som täcker tillgänglig bredd. SIZE och WIDTH bestämmer bredd och höjd, sedan finns även en växel NOSHADE, som ger linjen en lite annan stil. SIZE är alltid i antal pixlar, WIDTH kan vara antingen antal pixlar eller i procent av tillgänglig bredd.

<HR NOSHADE SIZE=5 WIDTH=50%>
<HR SIZE=3 WIDTH=500>
Ger resultatet:
Observera att den översta ändrar bredd, beroende på hur stort browser-fönstret är. HR kan vara bra att använda ibland, kan snygga upp en text mycket, men mitt intryck är att den inte bör användas för mycket, då blir texten ryckig och svårläst. Iakttag gärna hur jag använt HR i den här HOWTOn, vad tycker du, är det för mycket, lite, eller lagom?

5.6 Listor

Listor kan vara praktiska att använda ibland, t.ex. är de flitigt utnyttjade i den här HOWTOn (innehållsförteckningen har åtminstone några stycken). Det finns vad jag vet tre typer, ordnade listor (OL - ordered list), oordnade listor (UL - unordered list) och definitionslistor (DL). De två första är helt klart de mest använda, den tredje kan jag faktiskt inte syntaxen på och blir tvungen att kolla in på David Svenssons "Svensk webdesign"-sida. En lista skapas med sitt kommando (OL, UL, DL), sedan ska varje punkt i listan börjas med en List Item (LI), förutom definitionslistorna, de har DH, definition header, och DD, definition data istället. Efter att man har gjort en lista klar är det viktigt att den avslutas, annars fortsätter rest en av sidan som en lista, de avslutas förstås med /OL, /UL och /DL. Eftersom man inte manuellt måste infoga en radbrytning efter varje item, kan listor vara väldigt smidiga och prydliga att använda. De olika typernas användning åskådliggörs nog bäst med några exempel:

<OL TYPE=I START=7>
<LI> Ordnade listor finns i olika slag, TYPE=,I,i,a,A,1 osv... Observera man ska
ange hur första punkten i följden ser ut, sedan byggs listan efter det.
<LI> Man kan även sätta t.ex. START=n, där 'n' är en siffra i ordningsföljden.
</OL>
<UL TYPE=BULLET>
<LI> Oordnade listor finns i olika slag, TYPE=BULLET, DISC, CIRCLE, SQUARE osv...
<LI TYPE=SQUARE> Däremot är det lite jobbigt om man ska försöka starta från ett
visst värde...går inte juh...
</UL>

<UL>
<LI> Listor går utmärkt att 'threada'
        <UL>
        <LI> Bara att skapa flera
                <UL>
                <LI> listor under varandra...
                </UL>
        <LI> Sen ska man dock inte glömma att avsluta dem.
        </UL>
<LI> För annars kan det bli konstigt.
</UL>

<DL>

<DH>Definitionslistor
        <DD>Definitionslistor vet jag inte riktigt hur de fungerar, men de kan
        säkert vara jättefina, gulliga, praktiska, fula, alldeles
        underbara...hmm...sa jag underbar?
        <DD> ...praktiska ibland.
</DL>
Ger resultatet:
  1. Ordnade listor finns i olika slag, TYPE=,I,i,a,A,1 osv... Observera man ska ange hur första punkten i följden ser ut, sedan byggs listan efter det.
  2. Man kan även sätta t.ex. START=n, där 'n' är en siffra i ordningsföljden.
Definitionslistor
Definitionslistor vet jag inte riktigt hur de fungerar, men de kan säkert vara jättefina, gulliga, praktiska, fula, alldeles underbara...hmm...sa jag underbar?
...praktiska ibland.
Jepp, det var nog allt jag hade att säga om formatering just nu. "Move along, move along..."

[next][previous][contents]