Fortsättning om hur man skriver en Internet webb-sida


Fortsättning

Detta är en fortsättning på vår föregående sida "Grundkurs i hur man skriver en Internet webb-sida".


Innehållsförteckning

  1. Justering av stycken och rubriker
  2. Horisontella linjer
  3. Dynamisk uppdatering
  4. Listor
  5. Teckensätt attribut
  6. Dokument attribut
  7. RGB värde och namn för färgerna

Justering av stycken och rubriker

Kommandot <P> ....text.... </P> talar om för webb-läsaren att texten innanför är ett stycke. Med hjälp av ALIGN attributen kan man ändra styckets placering.

<P ALIGN=LEFT el. CENTER el. RIGHT>
Stycket blir vänsterjusterat (ALIGN=LEFT), centrerad (ALIGN=CENTER) eller högerjusterat (ALIGN=RIGHT). Om ALIGN inte används, blir stycket vänsterjusterad.

Kommandona <H1> ....text.... </H1> t.o.m. <H6> ....text.... </H6> talar om för webb-läsaren att texten innanför är en rubrik. Med hjälp av ALIGN attributen kan man ändra rubrikens placering.

<H1 ALIGN=LEFT el. CENTER el. RIGHT>
Rubriken blir vänsterjusterat (ALIGN=LEFT), centrerad (ALIGN=CENTER) eller högerjusterat (ALIGN=RIGHT). Om ALIGN inte används, blir rubriken vänsterjusterad.

Horisontella linjer

Kommandot <HR> visar som standard en skuggad horisontell linje med samma bredd som fönstret i din webb-läsare. Med hjälp av ett antal attribut är det möjligt att ändra linjens storlek, utseende och placering. Man kan kombinera flera attribut, så att linjen blir som önskad.

<HR SIZE=tjocklek>
SIZE attributet beskriver hur tjock linjen ska vara i punkter (=pixlar). Om SIZE inte används, blir linjen 2 punkter tjock.
<HR WIDTH=punkter el. procent>
Med hjälp av WIDTH attributet kan man välja hur bred linjen ska vara. Man kan specificera bredden som ett antal punkter eller som en viss procent av fönstrets vidd.
<HR ALIGN=LEFT el. CENTER el. RIGHT>
Om linjen är mindre än hela fönstrets vidd, vill man kunna specificera linjens placering. Linjen kan placeras vid höger marginal (ALIGN=RIGHT), vid vänster marginal (ALIGN=LEFT) eller centrerad (ALIGN=CENTER). Om ALIGN inte används, blir linjen centrerad.
<HR NOSHADE>
Vill man ej ha linjen skuggad, tilläggs NOSHADE.

Exempel:

   <HR ALIGN=RIGHT WIDTH=50%>

Linjen kommer att ser ut så här:


Exempel:

   <HR ALIGN=CENTER NOSHADE WIDTH=50% SIZE=6>

Linjen kommer att ser ut så här:



Dynamisk uppdatering

Möjligheten att kunna uppdatera en webb-sida dynamisk infördes först i Netscape Navigator 1.1 och andra webb-läsare har nu följt efter. Typiska applikationer för denna teknik inkluderar regelbunden uppdatering av aktiekurser eller en presentation av en serie bilder.

Denna teknik kan användas för upprepning av samma dokument med kontinuerlig ändring av innehållet (t.ex aktiekurser) eller att visa en serie oförändrade dokument (t.ex. presentation).

Två olika metoder implementerades:

"client-pull"
Klienten begär uppdateringen från servern efter den angivna tiden.
"server-push"
Servern skickar uppdateringen till klienten efter den angivna tiden.

"Client-pull" har ett antal fördelar framför "server-push". Den behöver endast ett enkelt HTML kommando i dokumentet, medans "server-push" kräver extra programmering i servern. "Server-push" kräver att kopplingen mellan servern och klienten hålls uppe hela tiden, medan "client-pull" kopplar upp och ned för varje ny sida.

Denna sektion beskriver hur man adderar dynamisk "client-pull" uppdatering till ett HTML dokument.

Kommandot <META> kan användas för att automatiskt länka till ett annat dokument efter en viss tid. Kommandot <META> ingår i dokumentets <HEAD> del. I kommandot specificerar man tiden för byte till nästa dokument (i sekunder) och dess URL. Vissa webb-läsare tillåter ej att en relativ URL anges, men kräver att hela URL:n specificeras. Kommandot har formatet:

   <META HTTP-EQUIV="REFRESH" CONTENT="sekunder; URL=dokumentnamn">

Exempel: Då dokumentet som innehåller följande rad laddas, väntar webb-läsaren i fem sekunder och byter automatiskt till dokumentet index_e.html:

   <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=index_e.html">

Eftersom URL:n i föregående exempel är en relativ URL, kommer det ej att fungera med alla webb-läsare. Exemplet fungerar med min Microsoft Internet Explorer 2.0, men om jag istället hade Netscape Navigator 1.1 installerad skulle man vara tvungen att använda följande:

   <META HTTP-EQUIV="REFRESH" CONTENT="5; 
      URL=http://www.april.se/index_e.html">

Om upprepning av samma dokument önskas behövs inte URL:n anges igen. I följande exempel kommer dokumentet att upprepas var 5:e minut, troligtvis med ändrat innehåll.

   <meta http-equiv="refresh" content=300>


Listor

Denna sektion beskriver tillägg till de kommandon för att skapa listor. Tilläggen kom först i Netscape Navigator 1.1. Alla tillägg stöds ej av alla webb-läsare. T.ex Microsoft Internet Explorer 2.0 har stöd för TYPE= för numrerade listor (OL kommandot) men ej för onumrerade listor (UL kommandot) .

Onumrerade listor

<UL TYPE=DISC el. CIRCLE el. SQUARE>
TYPE attributen används för att sätta en punkt, en cirkel eller en ruta framför varje enhet i en onumrerad lista.
<LI TYPE=DISC el. CIRCLE el. SQUARE>
TYPE attributen kan även användas för att sätta en punkt, en cirkel eller en ruta framför en viss enhet och alla efterföljande enheter i en onumrerad lista.

Ett exempel på en tre-enhets lista:

   <UL TYPE=SQUARE>
   <LI>Norrland
   <LI>Svealand
   <LI>Götaland
   </UL>

Resultatet blir:

Numrerade listor

<OL TYPE=1 el. A el. a el. I el. i>
TYPE attributen används för att välja vilken typ av numrering listan ska ha. Numreringen framför en listenhet kan vara versaler (TYPE=A), gemener (TYPE=a), stora romerska sifror (TYPE=I), små romerska sifror (TYPE=i) eller vanliga siffror (TYPE=1).
<OL START=nummer>
START attributen används för att börja en lista på ett värde annat än 1 (eller A,a,I,i). START attributen anges alltid i vanliga siffror, även om listan har en annan TYPE.
<LI TYPE=1 el. A el. a el. I el. i>
TYPE attributen kan även användas för att välja vilken typ av numrering en viss enhet och alla efterföljande enheter i en numrerad lista ska ha.
<LI VALUE=nummer>
På en enhet i en numrerad lista, kan man använda VALUE= för att ändra värdet av en viss enhet och alla efterföljande enheter.

Ett exempel på en tre-enhets lista:

   <OL TYPE=A START=5>
   <LI>Umeå
   <LI>Uppsala
   <LI>Lund
   </OL>

Resultatet blir:

  1. Umeå
  2. Uppsala
  3. Lund

Teckensätt attribut

<FONT> ...text... </FONT>
FONT kommandon används för att ändra teckenstil på den text som ligger innanför kommandot.
<FONT SIZE=storlek>
SIZE attributen används för att att ändra storleken på teckensnittet. Storleken anger en fontstorlek mellan 1 och 7, där 7 är störst. Ett plus eller minus framför storleken anger storleken relaterad till basfontstorleken.
<FONT COLOR=färg>
COLOR attributen används för att att ändra färgen på teckensnittet. Färgen specificeras vanligtvis som ett RGB värde (t.ex. COLOR=#FF0000). I de flesta webb-läsare kan också engelska färgnamn användas (t.ex COLOR=RED). För att förenkla, har vi gjort en tabell med de mest användbara färgerna.
<FONT FACE="typsnittlista">
FACE attributen används för att ändra typsnitt. Den specificerar en lista av olika typsnitt åtskilda av kommatecken. Webb-läsaren använder det första typsnittet i listan som den har tillgängligt. Om inget finns tillgängligt, ändras ej typsnittet. Varje enhet i listan kan vara ett specifikt typsnittsnamn (t.ex. "helvetica"), eller kan vara ett generiskt typsnittsnamn (som anger en viss grupp av typsnitt). Generiska typsnittsnamn kan vara "serif", "sans-serif", "cursive", "monospace", eller "fantasy".
T.ex för att göra teckensnittet mindre (notera minus-tecknet framför ettan):

   K<FONT SIZE=-1>EITH </FONT>B<FONT SIZE=-1>ARKER</FONT>

Detta ser ut så här:

KEITH BARKER

T.ex för att göra teckensnittet större:

   <FONT SIZE=+2>C</FONT>AROLINA <FONT SIZE=+2>C</FONT>ARLBERG

Detta ser ut så här:

CAROLINA CARLBERG

T.ex för att göra teckensnittet rött och byta typsnitt till timesroman (eller on det inte finns till serif):

   <FONT COLOR=#FF0000 face="timesroman,serif">Texten är Röd och Times Roman</FONT>

Detta ser ut så här:

Texten är Röd och Times Roman


Dokument attribut

<BODY> ...text... </BODY>
BODY kommandot innehåller hela webb-sidan förutom rubriken (HEAD). Attributerna på BODY kommandot påverkar hela webb-sidan.
<BODY BACKGROUND=grafikfil>
Grafikfilen kommer att användas istället för den vanliga enfärgade bakgrunden. Bakgrundsfilen brukar vara ett diskret mönster i grått- eller pastellfärg. Vi har använt oss av en grafikfil som bakgrund till denna sida.
<BODY BGCOLOR=färg>
BGCOLOR attributen används för att att ändra färgen på bakgrunden. Färgen specificeras vanligtvis som ett RGB värde (t.ex. BGCOLOR=#FF0000). I de flesta webb-läsare kan också engelska färgnamn användas (t.ex BGCOLOR=RED). För att förenkla, har vi gjort en tabell med de mest användbara färgerna.
<BODY TEXT=färg>
TEXT attributen används för att att ändra färgen av hela texten i dokumentet.
<BODY LINK=färg>
LINK attributen används för att att ändra färgen på texten innanför en länk; som standard är detta blått.
<BODY VLINK=färg>
VLINK attributen används för att att ändra färgen på texten efter en länk har besökts; som standard är detta vinrött.
Exempel:
   <body background="backgrnd.gif">

   <body BGCOLOR=#FFFFFF TEXT=#0000FF LINK=#00FF00 VLINK=#FF0000>


RGB-värde och namn för färgerna

Färgen specificeras vanligtvis som ett RGB-värde (t.ex. COLOR=#FF0000). Alla färger på bildskärmen byggs upp av tre grundfärger; rött, grönt och blått. En färgs RGB-värde talar om hur mycket av varje grundfärg den innehåller. De första två tecknen efter brädstapeln (#) står för hur mycket rött färgen innehåller (i hexadecimal). De nästa två tecknen står för hur mycket grönt färgen innehåller. De sista två tecknen står för hur mycket blått färgen innehåller.

I de flesta webb-läsare kan också engelska färgnamn användas (t.ex BGCOLOR=RED).

RGB värde för färgerna

Exempel:

   <body BGCOLOR=#E6E8FA>

FÄRGRGB VÄRDE
Vitt#FFFFFF
Rött#FF0000
Grönt#00FF00
Blått#0000FF
Svart#000000
Anilinrött#FF00FF
Cyanblått#00FFFF
Gult#FFFF00
Brunt#A62A2A
Mörkgrönt#2F4F2F
Skogsgrönt#238E23
Mellanblått#3232CD
Midnattsblått#2F2F4F
Marinblått#23238E
Guld#CD7F32
Silver#E6E8FA
Grått#C0C0C0
Kastanjebrunt#8E236B
Plommon#EAADEA

Namn för färgerna

Exempel:

   <body BGCOLOR=antiquewhite>

antiquewhite aqua aquamarine
azure beige bisque
black blanchedalmond blue
blueviolet brown burlywood
cadetblue chartreuse chocolate
coral cornflowerblue cornsilk
crimson cyan darkblue
darkcyan darkgoldenrod darkgray
darkgreen darkkhaki darkmagenta
darkolivegreen darkorange darkorchid
darkred darksalmon darkseagreen
darkslateblue darkslategray darkturquoise
darkviolet deeppink deepskyblue
dimgray dodgerblue firebrick
floralwhite forestgreen fuchsia
gainsboro ghostwhite gold
goldenrod gray green
greenyellow honeydew hotpink
indianred indigo ivory
khaki lavender lavenderblush
lawngreen lemonchiffon lightblue
lightcoral lightcyan lightgoldenrodyellow
lightgreen lightgrey lightpink
lightsalmon lightseagreen lightskyblue
lightslategray lightsteelblue lightyellow
lime limegreen linen
magenta maroon mediumaquamarine
mediumblue mediumorchid mediumpurple
mediumseagreen mediumslateblue mediumspringgreen
mediumturquoise mediumvioletred midnightblue
mintcream mistyrose moccasin
navajowhite navy oldlace
olive olivedrab orange
orangered orchid palegoldenrod
palegreen paleturquoise palevioletred
papayawhip peachpuff peru
pink plum powderblue
purple red rosybrown
royalblue saddlebrown salmon
sandybrown seagreen seashell
sienna silver skyblue
slateblue slategray snow
springgreen steelblue tan
teal thistle tomato
turquoise violet wheat
white whitesmoke yellow
yellowgreen    


Uppdaterad 19:e november 2000