| AVSNITT 2 - Grunder i HTML |
SYFTE: Även om vi senare kommer att använda oss av "verktyg" som skriver mycket av koden åt oss, så är det av synnerligen stor vikt att du förstår i alla fall grunderna i HTML, för att kunna(våga) gå in och editera koden när det inte blev som du hade tänkt. Gå igenom avsnittet noga - det omfattar bara det mest elementära.
Liten ordlista (helt efter mitt eget huvud, som jag tolkar dem)
WWW /Web=World Wide Web =Världsomspännande nätverk för information.
SGML =Standard Generalized Markup Language--en standard för att beskriva ett dokument (information) och vad det
innehåller på ett generellt sätt. Syftet är egentligen att så grundbeskriva vad ett dokument är (typ av information) att det
inte skall spela någon roll vilken progaramvara du har för att läsa dokumentet - alla programvaror nu och i framtiden skall
förstå!
DTD =Document Type Definition--en slags förklarings/översättningsmall till de programvaror som skall göra något med
informationen som är skriven i SGML. Är det text, bild ljud osv.
HTML =står för HyperText Markup Language och är en SGML DTD. Dvs. HTML är det dokumentformat som används
på WWW och är ett underformat till SGML. I HTML kan man definiera hyperlänkar samt lägga in bilderoch ljud, förutom
text.
HTML skapare var Tim Berners-Lee när han på den tiden arbetade på CERN (European Laboratory for Particle Physics in
Geneva. ).Historien med Internet skapades m.a.o. då.
Innehåll.
| 2:1 - Introduktion |
I Netscape kan du genom att först klicka här på sidan och sedan titta under "View/Frame Source" se HTML för just denna sida med den här texten.
Lär dig redan här att består sidan du tittar på av olika fönster/ramar/frames - så måste du klicka på det fönstret (göra det aktivt) som du vill titta på HTML till - och använda dig av "View/Frame Source". Har inte sidan några fönster/ramar/frames så blir med automatik Frame Source under View "skuggat" och då använder du i stället View/Document Source.
Eftersom det är enklare/snabbare att editera en sida som någon redan skrivit HTML till, så vet jag att du kommer att vilja spara någon sida då och då som du hittar på nätet - glöm då inte ovanstående om fönster/ramar/frames - för det gäller även när du vill spara en sida! Dvs klicka på fönstret du vill spara, gå in under File/Save Frame As..
- gör det!
a)Gå in under View och välj Frame Source(glöm inte att klicka först!).
b)Gå in under View och välj Document Source. Resultatet blev olika! (varför det blev så tar jag upp senare)
c)Skapa dig redan nu ett bibliotek på C:, som du döper till hemsida( C:\hemsida). I biblioteket skall vi i fortsättningen ha exakt samma struktur som vi har på vår riktiga hemsida ute på nätet. Det här gör att du kan sitta och göra allt arbetet med din sida lokalt och endast koppla upp dig då du skall överföra de filer du gjort.
d)Skapa ett nytt bibliotek på C: och döp det till C:\HTML . Gör även ett underbibliotek till HTML som du döper till kurs1( C:\HTML\kurs1). Gör ett underbibliotek till, som du kallar help (C:\HTML\help) och ytterligare ett underbiblotek som du döper till mallar (C:\HTML\mallar)
e) Klicka därefter på HTML-hjälp-fil nedan och spara hem filen till ditt nyss gjorda HTML bibliotek under help. Filen som är Zippad (packad), packar du upp genom att dubbelklicka på den i utforskaren och när sedan Win-Zip öppnar så väljer du att "EXTRACT"(packa upp), den till ditt C:\HTML\help -bibliotek. Filen som är en hjälpfil för HTML är det meningen att du skall använda för att "vid sidan av lära dig mer på egen hand"(Jag har för övrigt lagt ned massor av jobb på den, så använd den flitigt).När du behöver använda hjälp så öppnar du den med File/Open File in Browser och leta reda på C:\HTML\help\html_ord.htm, så öppnas hjälpen. Det kan vara smart att öppna upp två Browsrar, och i den ena alltid ha hjälpen öppen.
HTML-hjälp-fil (Som du skall spara till C:\HTML\help)
f)Spara nu den här kursen(l2.zip) till kurs1-biblioteket på samma sätt som du gör med hjälpfilen ovan, men du skall "Extract" den till kurs1-biblioteket
g)Gå in under File/Open File in Browser och leta reda på och öppna den nyss sparade/uppackade "l2.zip". Har du gjort rätt så kan du öppna filen H_index.htm och då står det nu file:///C|/HTML/kurs1/H_index.htm i Location fönstret. Det innebär att du i detta läge arbetar lokalt på din maskin.
h)Minimera Netscape och koppla från din Internet anslutning. Nu skall vi arbeta lokalt och det finns ingen anledning att ticka pengar åt Telia. Den här metoden: Att när du skall jobba med en uppgift som tar lite tid -förutsätter jag att du i fortsättningen gör som ovan - sparar hem Avsnittet(en), koppla från din Internet anslutning och arbetar lokalt.
| 2:2 - Grundelement |
I lite förenklat skick(!!!) så ser HTML- koden för denna sida som du såg ovan ut som följer: Den skall vi nu analysera.
<html>
<head>
<title>L2</title>
</head>
<body>
<p><center><H2>AVSNITT 2</H2></center></p>
<p><center><H3>Grunder i HTML</H3></center></p>
<hr>
<p>HTML står för HyperText Markup Language. HTML är det dokumentformat som används
på WWW. <br>
I HTML kan man definiera hyperlänkar samt lägga in bilder. <br>
HTML är ett underformat till det allmänna rika textformatet SGML. <br>
Ex I Netscape kan du titta under "View/Document Source" för att se HTML för denna sida. </p>
</body>
</html>
_______________________
En HTML-sida består av element sk <Taggar>.
De grundläggande taggarna är: (mina kommentarer i kursiv stil)
<HTML> (HTML-sida - start)
<HEAD> (Document huvud - start)
</HEAD> (Document huvud - slut)
<BODY> (Kroppen- Text,bilder,mm som läsaren ser - start)
</BODY> (Kroppen- Text,bilder,mm som läsaren ser - slut)
</HTML> (HTML-sida - slut)
ALLTID en Start-tagg och en slut-tagg, som skiljer sig åt med "/"
- gör det!
a)Titta nu på koden för denna sida igen och försök hitta igen dessa taggar!
b)Öppna någon annan sida och använd Viev och Document Source eller Frame Source, beroende på om sidan har ramar eller inte, och leta efter taggarna.
| 2:3 - <HTML> |
<HTML> och </HTML>, börja respektive avslutar alltid en sida.
- gör det!
a)Öppna notepad(anteckningar) genom att klicka på Start och sedan på Kör, skriv notepad i rutan och klicka på OK.
b)Skriv nu in <HTML> högst uppe på notepad sidan. Tryck på enter ett flertal gånger så att du kommer en bit ned på sidan och där skriver du in </HTML>
c)Spara nu sidan som C:\hemsida\index.htm
e)Jag vet inte hur grundläggande jag måste vara med annat runt omkring HTML i det här fallet med notepad. Så för säkerhets skull så Stäng notepad. Öppna notepad igen enligt sättet ovan och ta fram filen du nyss sparat, genom att använda Arkiv/Öppna i notepad och bläddra dig fram till C:\Hemsida\. För att se/kunna öppna filen så måste du först byta filformat i notepad från Textdokument till Alla filer (*.*), dubbelklicka på index.htm -så öppnas din sida. Kom ihåg det här!
| 2:4 - <HEAD> |
<HEAD> och </HEAD>
Vi vill ju att vår sida skall heta något, det som synns högst upp i din browser,det vill säga en titel på sidan. Då använder vi oss av taggen som heter <Title> och vi skall ge sidan titeln "Ditt namn hemsida"
- gör det!
a)Gå till notepad och skriv in/kopiera enligt nedan under <HTML>-taggen och spara
<HEAD>
<Title> Hans Hemsida </Title>
</HEAD>
b)Titta nu på din sida i browsern med File/Open File in Browser och välj C:\Hemsida\index.htm
c)Du ser då att din sida är helt tom men den har en titel. Gå in under Viev och Document Source och titta på din kod, den är precis lika dan som den du har skrivit i notepad.
| 2:5 - <BODY> |
<BODY> och </BODY>
Nu vill vi skriva in en text som läsaren skall kunna se, då använder vi oss av <BODY>-taggen.
Det skall stå: Välkommen! Det här är Ditt Namn hemsida. Jag tycker HTML är lätt!
- gör det!
a)Gå till notepad och skriv in/kopiera enligt nedan under </HEAD>-taggen och spara.
<BODY>
Välkommen!
Det här är Ditt Namn hemsida.
Jag tycker HTML är lätt!
</BODY>
b)Titta nu på din sida i browsern med File/Open File in Browser och välj C:\hemsida\index.htm
c)Du ser då att din sida har fått text och har en titel. Gå in under Viev och Document Source och titta på din kod, den är precis lika dan som den du har skrivit i notepad, men din sida ser ju inte ut som du skrev den utan all texten är ju på samma rad! Vi har inte formaterat texten än-därför ser den lite osnygg ut än.
| 2:6 - Blockelement |
Med dessa formaterar man ett block med text och/eller ord. Vi skall gå igenom några av de viktigaste.
<BR> - Gör ny rad/radbryt
<CENTER> ... </CENTER>- Centrerar texten på sidan.
<FONT ...> ... </FONT>- Sätter/ändrar fonternas storlek, färg och typ.
<H1> ... </H1> - 6 nivåer av huvudformat
<P> ... </P> - Anger vad som skall ingå i ett stycke.Ger också ett litet större radmellanrum, mellan styckena.
Vi återgår nu till texten vi skrev in i <BODY>-taggen:
______________________
Välkommen! (Vill vi ha med större text, skall vara centrerad,och stå på en egen rad)
(Här skall det vara en tom rad)
Det här är Ditt Namn hemsida. (Skall vara centrerad,och stå på en egen rad)
Jag tycker HTML är lätt!(Skall vara centrerad,och stå på en egen rad, texten skall vara röd)
(raderna skall ha lite större mellanrum en normalt)
_____________________
- gör det!
a)Gå till notepad och editera den förra texten enligt nedan under <BODY>-taggen och spara.
Först skall vi se till att texten kommer på tre olika rader, det kan vi göra med <BR> eller med <P>, som ju även ger lite större mellanrum en normalt.
<BODY>
<P>Välkommen!</P>
<P>Det här är Ditt Namn hemsida</P>
<P>Jag tycker HTML är lätt!</P>
</BODY>
b)Titta nu på din sida i browsern med File/Open File in Browser och välj C:\Hemsida\index.htm Du ser då att din text nu är på tre olika rader.
c)Under välkommen skulle vi ha en tom rad,det gör vi med <BR>, lägg in, spara och titta i browsern.
<BODY>
<P>Välkommen!</P> <BR>
<P>Det här är Ditt Namn hemsida</P>
<P>Jag tycker HTML är lätt!</P>
</BODY>
Du ser nu att du fått en tom rad under Välkommen
d) Välkommen skall ha större text, det gör vi med <H1>-taggen , lägg in, spara och titta i browsern.(storlek på text kan du även ändra med exvis <FONT SIZE=3>Välkommen </FONT>
<BODY>
<P><H1>Välkommen!</H1></P> <BR>
<P>Det här är Ditt Namn hemsida</P>
<P>Jag tycker HTML är lätt!</P>
</BODY>
e)Ändra <H1>-taggarna till någon av <H2>,<H3>,<H4>,<H5>,<H6> lägg in, spara och titta i browsern. Vad händer? Kanske den andra texten bör vara större också eller....(prova själv)
f) All text skulle vara centrerad på sidan, det gör vi med <CENTER>-taggen, lägg in, spara och titta i browsern.
<BODY>
<CENTER><P><H1>Välkommen!</H1></P> <BR>
<P><H3>Det här är Ditt Namn hemsida<H3></P>
<P>Jag tycker HTML är lätt!</P></CENTER>
</BODY>
g) Det som återstår nu är att sista raden skall vara röd, det gör vi med <FONT>-taggen, lägg in, spara och titta i browsern.
<BODY>
<CENTER><P><H1>Välkommen!</H1></P> <BR>
<P><H3>Det här är Ditt Namn hemsida<H3></P>
<P><FONT COLOR=RED SIZE=10 FACE=ARIAL>Jag tycker HTML är lätt!</FONT></P></CENTER>
<!-- Här ovan har jag även satt storleken 10 och typsnittet Arial, det kan vi väl kalla överkurs. Att jag skriver det här är bara för att du skall se hur en kommentar i HTML (som inte syns för läsaren) börjar och slutar-->
</BODY>
h) Exprimentera nu med alla taggarna,så du verkligen lär dig deras funktion!
Ett annat ex:
<BODY>
<CENTER><P><BLINK><H1>Välkommen!</H1></BLINK></P> <BR>
<P><H3>Det här är Ditt Namn hemsida<H3></P>
<P><FONT COLOR=GREEN SIZE=5 FACE=ARIAL>Jag tycker HTML är lätt!</FONT></P></CENTER>
</BODY>
| 2:7 - Länkar och bokmärken |
En av de viktigaste funktionerna i HTML är att man kan använda sk "hypertext",som väl närmast kan översättas till levande text. Funktionen innebär att man genom att klicka på något (text, bilder,mm) hoppar till ett annat ställe. Du kan se ett exempel på hopp om du scrollar till början på denna sida och klickar på 2:7 Länkar och bokmärken under Innehåll, så hamnar du här igen. Du kan även klicka här fär att komma till början av sidan
| 2:7:1 - Interna länkar |
Det du gjorde ovan var att du använde dig av interna länkar. En länk består av en utgångsplats för hoppet och ett bokmärke eller ankare-<a>, som är platsen där man skall hamna. För hoppet uppe ifrån början på sidan ned till detta moment 2:7 ser bokmärket/ankaret ut så här <a name="2:7"> och utgångsplatsen under Innehåll så här <a href="#2:7">. Här ser man ju lätt logiken, först skapa ett namn för bokmärke/ankare <a name="XXX"> och sedan ger man namnet som en hoppreferen <a href="XXX"> någonstans ifrån. För att det skall finnas någonting att hoppa ifrån (läsaren ser ju inte det som finns inom < >, så måste det finnas en synlig utgångsplats för hoppet. I vårt fall här ovan så blir den fullständiga hoppreferensen
<a href="#2:7"><strong>2:7 Länkar och bokmärken<br></strong></a> (Så här ser den ut, understruket =den synliga utgångsplatsen)
<a href="#2:7">2:7 Länkar och bokmärken</a> (och det är det här som gör att hoppet sker. Det övriga som <strong> betyder bara fet text och att <br> betyder radbrytning det vet du ju redan. Den lustiga texten som blir när man använder å,ä,ö återkommer vi till.)
Har du flera sidor och det är ju normalfallet så måste hoppreferensen även ange vilken sida som bokmärket/ankaret ligger på. I hoppreferensen ovan förutsätter din Browser att eftersom du inte angett någon sida så är det den här sidan som gäller.En fullständig hoppreferens från en annan sida till det här momentet ser ut som följer:
<a href="l2.htm#2:7">2:7 Länkar och bokmärken</a>
Ett som man kan kalla specialfall finns också, det är det jag använde ovan, då du kunde klicka på här och komma till början av sidan. Det ser ut så här <a href="l2.htm"> eller igentligen <a href="l2.htm#"> altså hopp till en sida utan att ange något bokmärke/ankare.
- gör det!
a) Nu skall du använda din påbörjade sida C:\hemsida\index.htm så öppna den i notepad igen för du skall göra några hopp i sidan. Börja först med att tabort <P><FONT COLOR=RED SIZE=10 FACE=ARIAL>Jag tycker HTML är lätt!</FONT></P>, för du har förhoppningsvis börjat tycka att HTML är ganska lätt. Din sida bör då börja ungefär som nedan, när du tittar på den i Browsern.
_________________________________________________________________________________________
b) Lägg nu till i vänsterkanten, en bit under ovanstående.
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:1b)
c) Öppna nu en notepad till, genom att klicka på start/kör...,som du gjorde tidigare. Du skall nämligen skapa en sida till, som du skall göra hopp till och då är det enklast att ha båda dokumenten öppna. Både det med hoppreferensen och det med bokmärket/ankaret. Gör den här nya sidan till ett HTML-dokument. Enklast gör du detta genom att markera och kopiera din index.htm - sida, och sedan ta bort allt utom grundelementen (2:2 ovan) och <title>-taggarna. Spara sedan sidan som C:\hemsida\egosidan.htm. Passa nu även på att spara den här rena "Startsidan" som en mall till C:\HTML\mallar\start.htm,så att när du i fortsättningen skall göra en ny HTML-sida, så öppnar du bara mallen start.htm och sparar den som...vad nu den nya sidan skall heta och till den plats den skall ligga.
d) Ge sidan titeln "Presentation av Ditt namn". På första raden skall det stå "Presentation av Ditt namn" och på andra raden "Vem är jag", båda med stor fet text, som även skall vara centrerad. Gör sedan 20 radbrytningar <br> och skriv på motsvarande sätt som nyss men med texten "Vad gör jag". Spara sidan och titta efter hur den blev.
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:1d)
e) Fyll nu på med text och skriv en riktig presentation om vem du är och vad du gör! Använd dig av "Blockelementen" (2:6) mm ,så att din text blir snygg och läsvärd.
f) Nu till hoppen: Du börjar med din egosida och gör bokmärken/ankare på två ställen, dels vid "Vem är jag" och dels vid "Vad gör jag". Ett ankare har formen <a name="XXX">, som vi gick igenom tidigare.
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:1f)
g) Sedan skall du göra hoppreferensen från din index-sida, givetvis från "Vem är jag" respektive "Vad gör jag". En hoppreferens ser ju ut <a href="NAMN.htm#ankare">HOPPTEXT</a>
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:1g)
| 2:7:2 - Externa länkar |
Det är ju inte alltid som man bara vill hoppa inom sina egna sidor, utan man vill kanske hoppa till någon annans sida ute på
nätet. Då gör man på motsvarande sätt. <A HREF="[URL][#ankare]">text eller bild</A>
URLen är såklart adressen till sidan/bilden/filmen/ljudet/programmet du vill skicka läsaren till, som exempel kan jag ju skriva
ett hopp till vår hemsida <A HREF="http://home5.swipnet.se/~w-50340">LSK Hemsida</A> .Som du ser har jag inte
angivit något bokmärke/ankare, vilket jag ju skulle kunna göra, men just nu ville jag bara att länken skall gå till sidan i sig
- gör det!
a)Ibland kan du specificera ett bokmärke/ankare även på en destinationssidan du inte "äger"! Hur?
(klarar du inte ovanstående så kan du titta på svaret 2:7:2a)
b) Nu skall du göra en ny sida (glöm inte att du har en mall som heter start.htm), som skall heta links.htm och skall sparas till C:\hemsida\links.htm. Sidan skall ha titeln LÄNKAR(det är länkar till kursdeltagarnas hemsidor du skall lägga in) och den skall se ut ungefär som nedan:
LSK hemsida
Deltagare 1
Deltagare 2
Deltagare 3
Deltagare 4
OSV.....
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:2b)
c) Slutligen skall vi göra ett hopp från vår hemsidas första sida (index.htm) till länkarna (links.htm). Du skall altså lägga till Länkar på din indexsida, och knyta den till länksidan.
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:7:2:c
| 2:8 - Tabeller |
För att få bilder och text placerade på en sidan på ett snyggt och prydligt sätt, måste man nästan alltid använda sig av tabeller. Dessa kan ha ramar(border) eller om man använder dem i placeringssyfte inga ramar.Exemplet nedan är en tabell med 1 rad och 2 kolumner, med border=0.Storleken på tabellen anges antingen i % av sidan eller i pixel.
| Här står det lite text jämte en bild | ![]() |
Tabellens tagg är <TABLE>
Tabellens innehåll är uppdelat på rader <TR> och datafält <TD>/<TH>.
Det första man gör är att börja en ny rad med <TR>. Sen kommer ett antal datafält/kolumner, som antingen kan vara en
<TD> eller en <TH>, där <TH>= table header (rubriken för en kolumn, som visas i fetstil). Sedan gör man det antal rader
och kolumner som behövs innan man avslutar med </TABLE>
Tabell 1 rad 1 kolumn:
<table border=1 width=100%><tr><td width=100%></td></tr></table>
Tabell 1 rad 2 kolumner:
<table border=1 width=100%><tr><td width=50%></td><td width=50%></td></tr></table>
| 2.8.1 <TABLE> och dess taggar |
<CAPTION>
<CAPTION [ALIGN=TOP|BOTTOM]>rubrik</CAPTION>
Används för att ge tabellen en överskrift eller rubrik. ALIGN bestämmer om rubriken placeras över eller under tabellen.
<table border=1 width=100% <CAPTION ALIGN=TOP> Tabell 1 rad 2 kolumner</CAPTION> <tr><td
width=50%></td><td width=50%></td></tr></table>
Ger nedanstående tabell med rubrik
| Tabell 1 rad 2 kolumner | |
BORDER
Används för att ge tabellen en trevlig tredimensionell look. Om bara BORDER anges utan värde blir det en smal
ram. Border=3
<table border=3 width=100%><tr><td width=100%></td></tr></table>
CELLSPACING
Bestämmer avståndet mellan celler. CELLSPACING=8
<table border=2 CELLSPACING=8 width=100%><tr><td width=50%></td><td width=50%></td></tr></table>
CELLPADDING
Bestämmer avståndet från cellens innehåll till cellkanten.CELLPADDING=20
<table border=2 CELLSPADDING=20 width=100%><tr><td width=50%>INNEHÅLL</td><td
width=50%>INNEHÅLL</td></tr></table>
| INNEHÅLL | INNEHÅLL |
WIDTH
Används för att sätta önskad bredd på tabellen, antingen i bildpunkter eller i procent av sidans bredd.
Procent:<table border=3 width=100%><tr><td width=100%></td></tr></table>
| 100% |
Pixel/bildpunkter:<table border=3 width=100><tr><td width=100%></td></tr></table>
| 100 Pixel |
| 2:8:2 Radtaggen <TR> och Celltaggen <TD> |
<TR [ALIGN=LEFT|CENTER|RIGHT] [VALIGN=TOP|MIDDLE|BOTTOM|BASELINE]>
ALIGN=LEFT|CENTER|RIGHT
Används för att bestämma justeringen av cellernas innehåll. Det kan göras radvis med <TR> eller för en enstaka
cell med <TD> eller <TH>.
VALIGN=TOP|MIDDLE|BOTTOM|BASELINE
Används för att bestämma den vertikala justeringen av cellernas innehåll. Det fungerar på samma sätt som ALIGN,
BASELINE anger att alla cellernas innehåll skall centreras vid en gemensam baslinje.
<TD/TH [ALIGN=LEFT|CENTER|RIGHT] [VALIGN=TOP|MIDDLE|BOTTOM|BASELINE] [NOWRAP]
[COLSPAN=n]
[ROWSPAN=n] [WIDTH=n]>
NOWRAP
Gör så att cellens innehåll inte radbryts av webklienten för att den ska få plats i cellen. Detta kan ge väldigt breda
celler.
COLSPAN=n
Används för att få ett datafält att sträcka sig över flera kolumner i tabellen. Sätt n till 2 så sträcker sig datafältet
över två kolumner.
ROWSPAN=n
Är som colspan men gäller för rader.
WIDTH=n
Som TABLE WIDTH fast för en specifik cell.
Tips: Celler som inte innehåller något (eller som bara innehåller mellanslag eller radbyten) får inga borders. För att kringgå
detta, lägg in antingen ett radbyte (BR) eller ett non-breaking space i ( ) - det vill säga ett mellanslag som behandlas
som ett vanligt tecken. Annat användningsområde: Om du skriver talet 10000 med ett mellanslag mellan 10 och 000 så kan
det resultera i en oönskad radbrytning. Om du ersätter det vanliga mellanslaget med ett så betraktas 10 000 som ett
ord.
- gör det!
a)Använd start.htm och gör en tabell som har 7 rader och 3 kolumner. Vidden skall vara 100%(totalt) och rambredden(border) skall vara 3. Spara den till C:\mallar\tabell.htm
(klarar du inte ovanstående så kan du titta på mitt Exemel 2:8:2a)
b) Se nu till att du har både tabell.htm och links.htm öppna! Kopiera tabell-taggen med innehåll från tabell.htm till links.htm. Lägg in taggen under det du skrivit tidigare men över </body>
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:8:2b)
c)Du skall nu lägga in rubriker på första raden <tr> i tabellen. Jag visar här hur första raden i tabellen skall se ut:
| NAMN/HEMSIDA | Anm |
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:8:2c)
d) Nu skall du lägga in Deltagarna i tabellen. Du kopierar helt enkelt från det du skrev förut när du gjorde länkar till deltagarnas hemsidor och klistrar in det inom <td> -taggen i första kolumnen. Resultatet blir då:
| NAMN/HEMSIDA | Anm | |
| LSK Hemsida | ||
| Deltagare 1 | ||
| Deltagare 2 | ||
| Deltagare 3 | ||
| Deltagare 4 | ||
| Deltagare 5 |
(klarar du inte ovanstående så kan du titta på mitt Exempel 2:8:2d)
e) Fyll i e-mail adressen och ev anm på motsv sätt. Spara och testa!
f) Öva dig på alla taggarna inom Tabeller INNAN du går vidare!