HTML-MANUAL

WWW-sidans layout

3.1 Grundmärkord

Det finns vissa layoutmärkord som kan räknas som grundmärkord. Dessa påverkar hur texten ska presenteras på WWW-sidan.

3.1.1 Tvingad radbrytning

Det finns två märkord som tvingar browsern att byta rad. Dessa är <BR> (break) som bara byter till en ny rad och <P> (paragraph) som byter rad och börjar en extra rad ner.

3.1.2 Centrerad text

Det finns ett märkord för att få texten centrerad. Denna är <CENTER> plus dess slutmärkord </CENTER>. (Fungerar inte på alla browsrar bl.a. Mosaic.)

3.1.3 Horisontell linje

Man kan få en horisontell linje i en WWW-sida. Detta kan vara bra när man vill skilja en del i WWW-sidan från en annan t.ex. om man vill skilja resten av texten från t.ex. sin e-mail adress. Märkordet för detta är <HR> och det har två attribut (fungerar ej i HTML 1.0) som man kan skriva om man inte vill ha strecket över hela sidan. Attributen är SIZE som bestämmer bredden och WIDTH som bestämmer hur lång strecket ska vara. Värdena på dessa är siffervärden som ju större de är desto längre eller tjockare blir linjen. Attributet WIDTH kan också ha ett värde som är i procent. Då anpassar sig linjens längd efter hur bred browserns fönster är.

3.1.4 Exempel

Här är ett exempel på ett HTML-dokument som har dessa olika grundmärkord: <HTML><HEAD> <TITLE>En testsida</TITLE> </HEAD><BODY> Detta är en testsida. Efter denna text kommer en tvingad radbrytning (ny rad).<BR> Efter denna text kommer ett nytt stycke (tvingad radbrytning - ny paragraf). <P> <CENTER>Denna text är centrerad i HTML 2.0 och högre browsers </CENTER> Efter denna text kommer en horisontell linje.<HR> Här kommer en linje med bredden 5 och vidden 30. <HR size=5 width=30> Här kommer en linje med en längd som är 40% av fönstrets bredd <HR WIDTH=40%> </BODY></HTML>

Klicka här för att se hur WWW-sidan ser ut.

3.2 Rubriker

Det finns ett märkord som används för att skriva rubriker i en WWW-sida. Märkordet är <H#> där # är en siffra mellan 1 och 6. Dessa teckenstorlekar är olika beroende på vilken browser man har men för det mesta är <H1> störst och <H6> minst. Rubriken avslutas med ett slutmärkord som är detsamma som märkordet före rubriken (ex: <H1>Rubrik</H1>).

3.3 Bilder på WWW-sidor

När man vill ha en bild på en WWW-sida använder man märkordet <IMG> som är ett tomt märkord vilket betyder att det inte finns ett slutmärkord., Istället har det två olika attribut varav ett visar namnet på bildens fil, nämligen attributet SRC (<IMG SRC="VALUE">) vars värde är namnet på filen. Man behöver bara ha detta attribut. Det andra attributet är ALIGN <IMG ALIGN=VALUE SRC="filnamn"> där VALUE är något av följande värden RIGHT, LEFT, MIDDLE, TOP och BOTTOM. De visar var texten eller bilderna som kommer efter märkordet för bilden ska ligga.

Exempel på ett dokument med bilder:

<HTML> <HEAD> <TITLE>En testsida</TITLE> </HEAD> <BODY> <IMG SRC=test.gif> Detta är en bild utan något ALIGN attribut. <BR> <IMG ALIGN=MIDDLE SRC=test.gif> Detta är en bild där attributet ALIGN har värdet MIDDLE. </BODY> </HTML>

Klicka här för att se hur WWW-sidan ser ut.

3.4 Listor

Man kan göra olika listor i ett dokument, t.ex. om man ska lista upp WWW-sidans innehåll eller några länkar till andra sidor. De olika listformerna är definitionslistor och vanliga listor.

3.4.1 Definitionslistor

Definitionslistor används när man vill lista upp någonting och samtidigt vill definiera vad det är. Dessa listor finns mellan märkordet <DL> och dess slutmärkord. Före varje "term" i listan ska märkordet <DT> finnas och före dess definition ska märkordet <DD> finnas.

3.4.2 Vanliga listor

Det finns fyra olika vanliga listor. Dessa finns inom märkorden <UL>,<OL>, <MENU> eller <DIR> och dess respektive slutmärkord. Före varje nytt element i listan ska märkordet <LI> finnas med. <UL> betyder att varje listelement har en punkt framför sig, <OL> gör att listan blir en numrerad lista, <MENU> är till för en lista med kortare listelement som för det mesta bara en rad långa och <DIR> ska man använda om man ska ha en lista med listelement som är kortare än 20 tecken. Denna sortens lista kan man göra i kolumner.

3.4.3 Exempel

Exempel på ett dokument med olika listor: <HTML> <HEAD> <TITLE>En testsida</TITLE> </HEAD> <BODY> <DL> <DT> Första termen <DD> Första termens definition skall - även om den är lång - fortfarande synas klart och tydligt på WWW-sidan. <DT> Term två <DD> Definition av term två </DL> <UL> <LI> Ett listelement ... <LI> Ett annat listelement ... </UL> <OL> <LI> Först ska du göra detta ... <LI> Sedan detta ... </OL> <MENU> <LI> Apelsinerna bör vara färska <LI> Nötterna kan vara från en påse </MENU> <DIR> <LI>A-H<LI>I-M <LI>M-R<LI>S-Ö </DIR> </BODY></HTML>

Klicka här för att se hur WWW-sidan ser ut.

3.5 Attribut till märkordet <BODY>

Märkordet <BODY> har ett antal attribut som man kan använda om man vill ändra bakgrundsfärgen och/eller textens färg mot användarens grundinställningar på browsern.

Attributet för bakgrundbakgrundsfärgen på WWW-sidan är BGCOLOR (<BODY BGCOLOR="VALUE">) där value är ett sexsiffrigt hexadecimalt tal. (ex svart har värdet 000000). Attributen för att ändra färgen på texten är för vanlig text TEXT, ej följda länkar LINK, länkar som användaren har tittat på har attributet VLINK och attributet för att ställa in den färg länken får när man trycker på den med musen är ALINK. Dessa attribut fungerar likadant som för bakgrundsfärgsattributet.

Här är några exempel på färgvärden:

FFFFFF - vitt  000000 - svart   FF3300 - rött 3366FF - blått  55AADD - grönt   FFFF00 - gult  

Om du vill ha några andra färger kan du prova sig fram.

Det finns också ett attribut till <BODY> som gör att man kan ha en bakgrundsbild på WWW-sidan (HTML 3.0 och högre), detta attribut är BACKGROUND och dess värde är bildens filnamn (<BODY BACKGROUND="filnamn">).

Exempel på en sida med andra bakgrundsinställningar:

<HTML><HEAD> <TITLE>En testsida</TITLE> </HEAD><BODY BGCOLOR="000000" TEXT="FFFFFF" LINK="FFFFFF" VLINK="FF3300"> Detta är en testsida. <A HREF="exempel6.html">Här är en länk till en annan sida</A> <HR> <A HREF=mailto:Ingen.Ingensson@ingenstans.universum>Här är en annan länk </A> <! Länkar se kapitel 5> </BODY></HTML>
Klicka här för att se hur WWW-sidan ser ut.

Här är ett exempel på en sida med en bakgrundsbild:

<HTML><HEAD> <TITLE>En testsida</TITLE> </HEAD><BODY BACKGROUND="test.gif"> Detta är en testsida. </BODY></HTML> Klicka här för att se hur WWW-sidan ser ut.

3.6 Diverse övriga layoutmärkord

Det finns vissa andra märkord som bestämmer layouten på en WWW-sida.

3.6.1 Blinkande text

Om man vill att texten i ett dokument ska blinka så finns märkordet <BLINK>. Texten som ska blinka skrivs då mellan märkordet och dess slutmärkord, (<BLINK>Blinkande text</BLINK> (Fungerar inte på alla browsrar bl.a.Mosaic)

3.6.2 Att skriva en "vanlig" text på en WWW-sida

Det finns tre märkord som gör att texten följer hur du har skrivit i HTML-dokumentet (t.ex. så bryts raden på WWW-sidan där du har tryckt på ENTER i dokumentet.) dessa tre märkord är <PRE>, <XMP> och <PLAINTEXT>. Skillnaderna mellan dessa märkord är att <PRE> kan hantera märkord som finns mellan <PRE> och dess slutmärkord medan <XMP> inte kan göra detta. <PLAINTEXT> har inget slutmärkord utan gör att all text på resten av dokumentet är vanlig text och inga andra märkord fungerar. Man kan bestämma vilken stil man vill ha på texten. Dessa teckenstilar är uppdelade i två grupper: fysiska teckenstilar, vilket är de vanliga teckenstilarna, plus en stil som på engelska heter "fixed font" och som liknar skrivmaskinsstil. Den andra gruppen av textstilar är de s.k. logiska teckenstilarna som är till för att användas när man skriver en text som ska ha ett speciellt ändamål, t.ex. om man ska skriva en programmeringskod i ett dokument.
   När man ska skriva en text i en speciell stil så skriver man före texten märkordet för stilen och sedan avslutar man texten med stilens slutmärkord.
Emma Roos
pt94ero@pt.hk-r.se
Senast uppdaterad 950524