Björn Mattsson - Webben: Kapitel 1 - Text, märken och WWW

Text, märken och www

Det pågår något av ett krig mellan dem som anser att Internet handlar om innehåll (contents) och dem som tycker att det ska vara en fest för ögonen och sätter layouten främst. Sanningen är nog att båda behövs. En sida som är innehållsrik men samtidigt ointressant att se på lockar ingen publik. Men en snygg sida utan innehåll är också tråkig. Därför kommer vi att gå igenom båda aspekterna av webbsidor och vi börjar med innehåll -- text.

Första sidan

För att en webbläsare ska förstå att dokumentet som anropas är en HTML-text måste man använda specifika HTML-märken, eller "tags". HTML står för Hyper Text Markup Language som i sin tur är en underavdelning till XML (eXtensive Markup Language). För att dokumentet överhuvudtaget ska kunna tolkas som en webbsida måste du sätta in märket <HTML> först på sidan. <HTML> anger att dokumentet är av typen HTML (Hyper Text Markup Language).

Därefter kan vi börja fylla sidan med innehåll. Då det här är den allra första lektionen börjar vi lugnt och fint, och använder bara de märken som är nödvändiga för att skapa en webbsida. Innehållet på en webbsida sätts in mellan <BODY> och </BODY>. I ett dokument som är så enkelt som detta behövs egentligen inte detta märke, men eftersom vi kommer att använda det senare är det lika bra att ta med det redan nu.

<HTML> och <BODY> är exempel strukturella märken. De påverkar inte utseendet på sidan, men de talar om för webbläsare att informationen som följer ska tolkas som HTML-kod.

Efter sidans innehåll (text) sätter vi in märket </BODY>. Märket föregås av ett snedstreck (/) vilket betyder att det är ett avslutande märke. De flesta märken vi går igenom har inledande och avslutande märken. För strukturella märken behöver man ofta inte ange det avslutande märket eftersom nästa märke automatiskt avslutar det föregående märket. I de fall då man måste ange ett avslutande märke är vissa webbläsare snälla och gissar var märket borde sitta. Det är dock god programmeringssed att ange avslutande märken, om inte annat för att koden blir lättare att tolka för den som önskar studera den. Som goda HTML-kodare sätter vi in ett avslutande </BODY> och </HTML>. Vår sida är klar!

Det är dags att praktisera det vi lärt oss. Öppna en texteditor eller din vanliga ordbehandlare. Den resulterande filen ska sparas som ren text så det spelar inte så stor roll vilket program du väljer. Skriv in koden i Exempel 1-1.

Exempel 1-1:

<HTML>
<BODY>
  Hejsan.

  Det här med www och Internet verkar ganska kul. Och en      
  hemsida kan ju inte vara så himla svår att tota 
  ihop. Det ska bli spännande att se hur den ser ut på 
  riktigt.

  Hej då!
</BODY>
</HTML>

Spara filen som en ren textfil, med namnet sida01.html. Hallå!, utropar du kanske. Ska inte filtypstillägget vara tre tecken långt, precis som .doc eller .txt? Nej, inte nödvändigtvis. De allra flesta Internet-servrar i världen hanterar vad som kallas för långa filnamn. Det är inte nödvändigt att följa den traditionella DOS 8.3-konventionen. Servrarna kan inte hantera svenska tecken, specialtecken eller mellanslag, men det är tillåtet att använda tilde (~), bindestreck, understreck (_), och punkt. En HTML-fil ges filtypstillägget .html eller .htm, och det är genom detta filtypstillägg som servern känner igen ett HTML-dokument.

Observera att många webbservrar gör skillnad på stora och små bokstäver. Man säger att de är versalkänsliga, vilket betyder att SIDA01.HTML inte är samma sak som sida01.html. Om du bara har en enda webbsida, utan länkar, bilder eller ljud, spelar det ingen roll _ men om du länkar till undersidor eller anropar bildfiler har det stor betydelse. En god regel är att alltid ange filnamn med små bokstäver.

Bild 1-1 visar hur sidan ser ut i Netscape Navigator 4.03. Lägg märke till att texten inte är utformad som i Exempel 1-1 ovan.

Bild 1.1 Texten visas i en enda följd)

Webbläsarna ignorerar alla typer av layoutinformation, såvida den inte anges i form av HTML-märken. Det beror på att språket från början bara avsett för att erbjuda ett sätt att snabbt och effektivt lagra text. Tabb-tecken och extra mellanslag syns inte. Om man vill ha mer än ett mellanslag i följd måste man använda specialtecknet   (non breaking space), se Bilaga B för andra specialtecken.

Namn               Adress                    Telefon

och

Namn Adress Telefon

ger båda resultatet

Namn Adress Telefon

Lika illa är att returtecken (¶) ignoreras, vilket gör att alla textstycken visas som en enda lång rad. Texten fortsätter tills den högra kanten av fönstret nås, där bryts raden och texten fortsätter på nästa rad.

Arne Andersson ¶
B-gatan 1A ¶
123 45 Östad ¶

blir

Arne Andersson B-gatan 1A 123 45 Östad

Textutformning

Tack och lov finns det en mängd HTML-kommandon som ser till att texten får det utseende vi vill ha, och vi ska gå igenom några av dem.

  används för att åstadkomma manuella radbrytningar. Även om de allra flesta sätter märket sist på kodraden behöver man inte göra det.

Rad 1<BR>Rad 2<BR>Rad 3

och

Rad 1<BR>
Rad 2<BR>
Rad 3<BR>

ger båda resultatet:

Rad 1
Rad 2
Rad 3

Om man på inga villkor vill att en rad ska brytas kan man använda märket , och det ska sättas in först på den aktuella raden.   har inget avslutande märke.

 står för paragraph (stycke) och lägger till en blankrad före och efter textblocket det är kopplat till. Ett textblock, d.v.s. en bestämd mängd text, skapas med hjälp av styckeutformningsmärken. Vi lägger in några  och   i vår webbsida, så att koden nu ser ut så här:

Exempel 1-2:

<HTML>
<BODY>
  <P>Hejsan.</P>
     
  <P>Det här med www och Internet verkar ganska kul. Och en <BR>
  hemsida kan ju inte vara så himla svår att tota <BR>
  ihop. Det ska bli spännande att se hur den ser ut på <BR>
  riktigt. </P>
     
  <P>Hej då!</P>
</BODY>
</HTML>

Nu börjar det likna nåt, se Bild 1-2. I Exempel 1-2 ovan har vi tre stycken: "Hejsan", "Det här med…" och "Hej då!". är inte nödvändigt eftersom varje nytt styckeutformningsmärke, i vårt fall , automatiskt avslutar föregående stycke.

Bild 1-2 Genom att använda delar vi upp texten i stycken

Om du vill att texten ska visas exakt som den ser ut i filen kan du använda märket <PRE>, som står för preformatted. Då tas alla tecken med, mellanslag såväl som returtecken. Märket är mycket användbart om du har information uppställd i en tabell. Eftersom det inte går att använda tabbar för att justera kolumnerna är <PRE> det mest praktiska tillvägagångssättet. Nackdelen är att texten visas med det icke proportionella teckensnitt som är valt som standard för din webbläsare. Vanligtvis är Courier förvalt icke proportionellt teckensnitt. Icke proportionellt innebär att varje tecken tar lika stor plats. Jämför de två raderna nedan:

Detta är skrivet med det proportionella teckensnittet Times
Detta är skrivet med det icke proportionella
teckensnittet Courier

I Netscape Navigator 3.0 ställer du in teckensnitt i genom att välja Alternativ | Allmänna inställningar och klicka på fliken Teckensnitt. I Netscape 4.0 väljer du Redigera | Inställningar och klickar på Teckensnitt. För Internet Explorer gäller (**)

Om du gillar Courier, eller det icke proportionella teckensnitt du valt som standard, och gärna utformar text med det kan du använda märket <TT>. Märket påverkar bara teckensnittet och ignorerar all utformning som inte är gjord med HTML-märken. Längre fram går vi igenom märket  med vilket du kan ange att ett specifikt teckensnitt ska användas.

Text skrivs ut från kant till kant i webbläsaren om man inte styr den med exempelvis   och <PRE>. Förutom att textraderna blir långa och svårlästa ser det inte så tilltalande ut. Läsligheten ökar avsevärt om man ökar marginalerna. Märket <BLOCKQUOTE> gör precis detta. Om du omger ett eller flera stycken med <BLOCKQUOTE> får texten ett par centimeters marginal till höger och vänster. Dessutom läggs en blankrad in ovan och under textblocket.

Justering av text

Om man inte anger något skrivs text ut vänsterjusterat, precis som är vanligt i tidningar och böcker. Man kan ändra justeringen genom att ange attribut till textmärken. Attribut är värden för märken. Du styr hur text skrivs ut genom att ange attribut för . Om du vill att texten ska centreras skriver du . Align är ett attribut till , och kan ställas in till olika värden.

Koden blir lätt att läsa om du anger märket med versaler och attributet med gemena. Det är inte nödvändigt att använda citattecken runt attributet om det bara är ett ord, men ibland anges attribut med flera ord, t.ex. <FONT FACE="Helvetica, Arial, Courier". Genom att alltid använda citattecken producerar du konsekvent kod.

Skriv ut text högerjusterat genom att ange 

En nyhet i HTML 4 är värdet justify. Texten får rak höger- och vänstermarginal, kallas marginaljustering. Påverkar bara stycket när radbrytning sker automatiskt och inte manuellt via  -märket. I Exempel 1-4 nedan är texten inskriven utan andra HTML-märken än , och resultatet ser du i översta stycket i Bild 1-3.

Exempel 1-4

<P ALIGN="justify">
I niohundra år har rymdskeppet Omega varit på väg. 8453 
män, kvinnor, barn och djur startade resan. Den 
postindustriella versionen av Noaks ark. Genetiska 
toppexemplar, perfekt matchade och förberedda att 
övervinna allt och plantera mänsklighetens frö i 
universum. Skeppet bar med sig en hel världs hopp 
och förväntningar. </P>

Bild 1-3 Uppifrån och ned: ALIGN="justify", "left", "right" och "center".

<DIV> (division) fungerar på sätt och vis som . Utan attribut gör märket ingenting förutom att definiera ett avsnitt av webbsidan. Genom att använda <DIV> kan du ange hur all text inom det definierade avsnittet ska justeras. Om du vill justera en stycke på ett annat sätt än det som angivits i avsnittsdefinitionen sätter du in ett märke runt den aktuella texten. Lokalt angivna märken åsidosätter alltid definition av större avsnitt. Man kan säga att det är närheten till märket som avgör utformningen.

Utformning av ord och enstaka tecken

De märken vi hittills diskuterat behandlar textstycken eller hela webbsidor. Men det finns märken som ändrar utseendet för ett tecken eller ett ord. Alla märken har inledande och avslutande tecken.

 eller  (italic) kursiverar text.

Den här texten är kursiv

 eller  (bold) gör texten fet.

Den här texten är fet

 (underscore) stryker under markerad text. Den här märkningen rekommenderas ej eftersom länkar nästan alltid representeras av understruken text.

Den här texten är understruken

<S> eller <STRIKE> (strikethrough) sätter ett streck genom texten.

Den här texten är genomstruken

 eller <SUPER> (superscript) höjer upp markerad text från övrig text. Användbart vid angivelse av exempelvis kvadratmeter (m²). Texten görs något mindre.

Den här texten är ^upphöjd

 (subscript) sänker ner texten nedanför övrig text. Gör texten något mindre

Den här texten är _nedsänkt

Alla dessa märken kan användas samtidigt, t.o.m.  och  även om de delvis tar ut varandra.

Den här texten är fet, genomstruken, 
understruken och kursiv

När man "nästlar" märken är det viktigt att inledande och avslutande märken anges i rätt ordning. Om du t.ex. vill att en <H1>-rubrik ska vara kursiv måste du först ange <H1>, sedan . I annat fall tar utformningen för <H1> över. Prova!

 gör texten mindre. Märket motsvarar  vilket är den näst minsta storleken man kan ange för text, se Teckensnitt nedan.

<BIG> gör texten större, motsvarar .

Med <BASEFONT> kan du ställa in storleken för all text som ska visas webbsidan. Ange värden mellan 1 och 7 för attributet SIZE (som inte har något avslutande märke):

<BASEFONT SIZE="3">

Rubriker

Webbsidor vars innehåll är satt med samma storlek och teckensnitt är trista och svårtillgängliga. Man behöver rubriker för att dela in sidan i informationsdelar. Något som bryter av från den övriga texten, och fångar läsarens intresse.

<Hn> (header) definierar text som rubrik, där n är ett tal mellan 1 och 6. <H1> är den största rubriken och <H6> är den minsta. En webbsida bör inte innehålla fler rubriknivåer än tre, även om det ibland förekommer. Generellt kan man säga att texten inte är tillräckligt genomarbetad om det krävs fler än tre rubriknivåer.

Vi återvänder till vår webbsida. Det första ordet, "Hejsan", passar bra som rubrik, så vi byter ut  mot <H1>:

<H1>Hejsan.</H1>

Bild 1-4 Sidan har fått en H1-rubrik.

Teckensnitt

Hittills har vi använt oss av webbläsarens standardteckensnitt. Det brukar vara någon variant av Times, eftersom det finns installerad på de flesta datorer. Kanske har du valt ett annat teckensnitt för din webbläsare. Nå, man behöver inte nöja sig med webbläsarens standardteckensnitt. Du kan själv ange vilket teckensnitt du vill att din text ska visas med. Märket som åstadkommer byte av teckensnitt heter ganska naturligt . Det finns tre attribut till : FACE, SIZE och COLOR.

FONT FACE

<FACE> bestämmer teckensnittet. Du anger helt enkelt vilket teckensnitt som ska användas:

<FONT FACE="Arial">

Även om det kan vara lockande att välja ditt favoritteckensnitt bör du tänka på att de tilltänkta besökarna måste ha teckensnittet installerat på sina datorer för att kunna se sidan som du har tänkt dig. Om det valda teckensnittet inte finns installerat använder webbläsaren standardteckensnittet. Du kan ange alternativa teckensnitt, genom att lägga in teckensnitten åtskilda med komma:

<FONT FACE="Arial, Helvetica, AvantGarde">

I exemplet ovan söker besökarens webbläsare efter det först angivna teckensnittet. Om det finns installerat används det, i annat fall försöker webbläsaren med nästa teckensnitt i listan. Försök utforma dina webbsidorna så att inte står och faller med ett bestämt teckensnitt. Kontrollera hur de ser ut med Times eller Helvetica. Är de åtminstone läsliga i Times vet du att besökare utan ditt förvalda teckensnitt i alla fall kan ta del av innehållet.

Du bör alltid ange minst två teckensnitt eftersom Mac och PC i de flesta fall inte använder samma teckensnitt, eller att de i alla fall har olika namn. Arial brukar motsvaras av Helvetica (eller Geneva) på Macintosh. Kontrollera sidorna på både Mac och PC om du har möjlighet.

Om du är osäker på vad teckensnittet du vill använda heter kan du öppna Redigera | Inställningar | Teckensnitt i Netscape Navigator 4.0, Alternativ | Allmänna inställningar och klicka på fliken Teckensnitt i Netscape 3.0 eller (**)i

Internet Explorer 3.0/4.0. Det är viktigt att du anger teckensnittet med korrekt namn annars fungerar det inte.

Vi vill att rubriken ska vara skriven med teckensnittet MetaPlusBoldCaps. Därför lägger vi in  framför rubriken, och märket  efteråt, se bild 1-5.

Bild 1-5 Rubriken har fått ett nytt teckensnitt.

Vi kommer att gå igenom en del typografiska konventioner längre fram men ett par regler kan vara bra att kunna redan nu. För brödtext (d.v.s. all "vanlig" text på en sida) bör du välja ett serif-teckensnitt. Till serifer räknas bl.a. Times, Garamond och Bookman. Motsatsen, som du kan använda till rubriker, heter sans serif. Hit hör Arial, Helvetica och AvantGarde. Läsbarheten är större om du använder ett serif-teckensnitt eftersom de små horisontella strecken "hjälper" ögonen vidare i texten på ett sätt som sans serifer inte gör.

FONT COLOR

Med <COLOR> anger du färg för texten. De moderna webbläsarna accepterar hexadecimala värden på färger. Men det finns även ett antal fördefinierade namn på färger (på engelska). Bland annat finns Red (röd), Blue (blå), Black (svart), White (vit), Grey (grå), Green (grön) och Yellow (gul). En fullständig lista finns i Bilaga C. En fördefinierad färg anger du via dess namn:

<FONT COLOR="red">

När det gäller färger som inte är fördefinierade måste de anges med hjälp av ett hexadecimalt tal, t.ex. FF00AA (åt magenta-hållet). Talet representerar de tre färgerna R(ött), G(rönt) och B(lått) RGB. Ytterst få, om några, vet vilka värden som producerar vilka färger. Det vanligaste är att man använder någon form av verktyg att räkna ut hexvärdena för en färg. För tillfället kan det räcka med att du veta att värdet anges på följande sätt:

<FONT COLOR="#FF00AA">

Var återhållsam med färger. Om du måste använda annan textfärg än svart på en sida, bör du hålla dig till en eller två extra färger. Fler färger gör att sidan ser oproffsig ut. Fundera på om det verkligen behövs en annan färg på texten. Kanske kan du ändra utformningen på något annat sätt?

Till sist

Alla inställningar gäller tills ett  eller nytt  påträffas. Observera att det går alldeles utmärkt att ange attribut där de behövs. Om du vill att texten ska vara satt med Colona MT, och att en del av texten ska vara röd och ha storleken 5, och att en annan del av texten ska ha storleken 5 och vara blå gör du så här:

Exempel 1-5

<FONT FACE="Colonna MT" SIZE="3">
Om man betänker att <FONT SIZE="5" COLOR="red">
Socialdemokraterna</FONT>

har 39,5% medan <FONT SIZE="5" COLOR="blue">Moderaterna
</FONT> bara har
23,9 procent kan man ana hur valet går.</FONT>

Bild 1-6 Exempel på hur man kan använda märket och dess attribut.

Varje -märke påverkar bara närmast föregående icke avslutade -märke. I exemplet ovan stänger  efter Socialdemokraterna -märket omedelbart framför Socialdemokraterna. Samma gäller runt Moderaterna. Nu har vi två -par vilket gör att det avslutande märket stänger det allra första -märket.

Sammanfattning

Vi har gått igenom märken som behövs för att vår webbsida ska tolkas som HTML. Vår webbsida använder märken för rubriker och vi har bytt teckensnitt, storlek och färg på text. Inte illa efter bara en lektion!

Bild 1-7 En exempelsida.

Märken

Nedan följer en tabell över de märken vi gick igenom den här lektionen.

Märke Attribut Kommentar

<HTML>..</HTML> Märke som talar om att filen innehåller HTML-kod.

<BODY>..</BODY> Märke som omger webbsidans innehåll. Tar emot flera attribut men dem går vi igenom längre fram.

  Radbrytningsmärke.

.. Märke som gör att efterföljande text inte radbryts.

.. Styckemärke. Definierar ett avsnitt som ett stycke.

ALIGN= left, right, center, justify Attribut till som gör texten högerjusterad, vänsterjusterad, centrerad eller marginaljusterad.

<PRE>..</PRE> Sätter all text till webbläsarens förvalda icke proportionella teckensnitt. Alla tecken skrivs ut, även retur och extra mellanslag.

<TT></TT> Anger att webbläsarens förvalda icke proportionella teckensnitt ska användas. TT står för Tele Type, vilket anspelar på gamla tiders teleprintrar.

<DIV>..</DIV> Markerar ett avsnitt på en sida. Anger tillsammans med attributet ALIGN hur text ska justeras. Se .

<BLOCKQUOTE>.. </BLOCKQUOTE> Sätter in marginaler runt texten. Textens utseende påverkas i övrigt inte.

.. alt.

.. Gör innesluten text kursiverad.

.. alt.
.. Gör innesluten text fet

.. Stryker under text. Bör ej användas eftersom den kan missförstås för en länk.
<S>..</S> alt.

<STRIKE>..</STRIKE> Gör ett streck igenom den markerade texten.

.. alt.
<SUPER>..</SUPER> Höjer upp texten, och minskar automatiskt storleken.

.. Märke för nedsänkt text, minskar automatiskt textstorleken.
.. Minskar textstorleken. Motsvarar SIZE="2".

<BIG>..</BIG> Ökar textstorleken. Motsvarar SIZE="4".

<BASEFONT> SIZE="1 - 7" Ställer in textstorleken för hela webbsidan. Tar ett argument,

SIZE.

<Hn>..</Hn> Rubrikmärken från H1 till H6, där H1 är störst och H6 minst.

.. Styr utseende på text. Ställ in teckensnitt, färg och storlek.

FACE="tknsn1, tknsn2..." Ange ett eller flera teckensnitt åtskilda med komma.

COLOR="färg" Ange något av de fördefinierade färgerna, se Bilaga X, eller ett hexadecimalt värde.

SIZE="1 - 7" Ange storlek för texten. 1 är minsta storlek och 7 är största.

Frågor

1. Vilka märken behövs för att innehållet i en fil ska tolkas som HTML-kod?

2. Vilken ändelse ska en HTML-fil ha?

3. Får man ha mellanslag i namnet på en HTML-fil?

4. Hur anger du att texten ska skrivas ut med AvantGarde BT, storlek 5 och att den ska vara blå?

5. Hur anger du att ett stycke ska vara marginaljusterat?

6. Hur skriver man 10 m²?

Svaren på dessa frågor finns i Bilaga A.

Senast uppdaterad 99-08-09