 |
 |
http://www.monkeytoys.pp.se/htmlkurs/html.htm
Senast uppdaterad: 1997-01-05 klockan: 17.10
|
|
http://www.monkeytoys.pp.se/htmlkurs/html.htm
Senast uppdaterad: 1997-01-05 klockan: 17.10
Vem har sagt att det är svårt och dyrt att göra
hemsidor? Om du kan använda en ordbehandlare kan
du också göra egna hemsidor! För att bevisa det
har jag gjort en liten "kurs" i HTML, som är det
språk man använder för att skriva hemsidor.
En av de bästa sakerna med att göra hemsidor är att man inte behöver några dyra program eller avancerad utrustning. Det enda man måste ha är en texteditor och en internetläsare, till exempel Netscape Navigator eller Microsoft Internet Explorer. Internetläsaren har du ju redan. Då återstår texteditorn. Om du har Windows kan du använda "Anteckningsblocket" (i den engelska versionen heter det "Notepad"). Det går naturligtvis även bra att använda en ordbehandlare som Word, Word Perfect eller liknande, men eftersom man inte har någon användning för alla de avancerade funktionerna i en ordbehandlare är det ofta bättre att använda en enkel editor.
I slutet av varje lektion finns ett mail-formulär där du kan ställa frågor eller komma med synpunkter. Jag besvarar alla mail så snart som möjligt!
HTML är en förkortning för Hyper Text Markup Language och är egentligen inte ett
programmeringsspråk utan en uppsättning koder. Varje textutseende och layout har
sin egen kod eller "tag" som man ibland kallar det. Jag har valt att kalla det kod
eftersom det här är en svensk kurs! Koden för t ex fetstil är <B> (bold).
All text som står efter en kod får det utseende som koden ger. </B>
betyder "slut på fetstil". Alla HTML-koder är omgivna av <>. De flesta koder
fungerar på samma sätt. En start-kod och en slut-kod. Start-koden är omgiven av
<> och slut-koden är omgiven av </>, som t ex slut-koden för fetstil:
</B>. Koden för kursiv stil är <I> (italics) och </I>
är slut-koden för kursiv stil. Ganska enkelt vaŽ?! Man kan skriva flera HTML-koder på samma rad om man vill och det spelar
ingen roll om man har mellanslag eller inte mellan koderna. Det viktigaste är att det är lätt att
läsa koden. I kursen kommer vi oftast att ha en kod per rad. Det är lättare för en ovan att se
vad som händer då.
Nu när du har lärt dig grunderna är det dags att göra lite nytta!
Starta den texteditor eller ordbehandlare du vill använda för att skriva HTML-kod
och skriv följande sex rader:
<HTML> talar om för internetläsaren att här börjar den HTML-kod som talar om hur sidan
ska se ut. Följaktligen betyder </HTML> "här slutar HTML-koden". Utan dessa koder kommer
internetläsaren att visa sidan på samma sätt som den ser ut i texteditorn och det kan bli
rätt tröttsamt att läsa...
Innanför <HEAD>-koderna talar man t ex om vad sidan heter. Vi återkommer till det alldeles
strax.
<BODY>-koderna anger var det du skriver på sidan börjar och slutar. Det är mellan de
koderna som det mesta av innehållet i en hemsida står.
Nu ska vi döpa sidan och fylla den med text. Infoga en rad mellan <HEAD>-koderna:
Nu är det äntligen dags att titta hur sidan ser ut! Spara dokumentet under namnet lektion1.htm.
När du sparar dokumentet är det viktigt att du sparar det i text-format. En vanlig ordbehandlare
lägger till en del styrkoder om man inte sparar dokumentet i text-format. Om man använder en
texteditor slipper man det problemet. Filtillägget "htm" betyder att det är ett HTML-dokument.
Ett HTML-dokument måste ha filtillägget "htm" eller "html". Av praktiska skäl använder vi
filtillägget "htm" i våra övningar.
Öppna html-dokumentet i internetläsaren;:
Om du använder Netscape Navigator eller Microsofts Internet Explorer trycker du Ctrl + O och letar
reda på filen lektion1.htm.
Här kan du se hur sidan ser ut. Inte så snyggt, eller hur?! Det
fixar vi i nästa lektion!
Med några nya koder ska vi se till att hemsidan vi gjorde i förra lektionen blir lite trevligare
att titta på. Du vet redan att <B> betyder fetstil och <I> betyder kursiv stil. Lägg
till några nya koder i HTML-dokumentet "lektion1.htm":
<H1> betyder "rubrik storlek 1" (header1). Storlek 1 är störst och 6 är minst:
<P> betyder "nytt stycke" (paragraph). I vårt exempel visar det sig som en blankrad
mellan rubriken och brödtexten. Man kan inte sätta in flera
<P> efter varandra för att få ett stort mellanrum. Vill man ha det får man lösa det på
andra sätt. Det finns en slut-kod för "nytt stycke" (</P>), men den behöver man inte använda.
<FONT SIZE=4> talar om att vi vill ha den efterföljande texten i storlek 4. Det finns 7 storlekar. 1 är den minsta
och 7 är den största. Slutkoden är </FONT>.
Nu tar vi och tittar efter hur sidan ser ut. Spara den först, men byt namn till lektion2.htm.
Öppna HTML-dokumentet i internetläsaren.
Sidan ser ut så här. Det börjar arta sig, men lite mer färger skulle
se trevligt ut. Det tar vi i nästa lektion.
"Standardutseendet" på en hemsida är grå bakgrund, svart text, blå obesökta länkar och röda
besökta länkar. Det kan man lätt ändra på. Ändra i dokumentet "lektion2.htm" så att det ser ut
så här:
Tecknen efter # kan delas upp i tre grupper med två tecken vardera (FF DA 2D). De talar om hur
mycket rött, grönt och blått som ska blandas för att skapa den bakgrundsfärg man vill ha. Den
första gruppen innehåller det hexadecimala värdet för mängden röd färg, nästkommande grupp hur
mycket grönt och sista gruppen hur mycket blått som ska ingå i bakgrundsfärgen. I vårt exempel
betyder det att vi vill ha FF (255 decimalt) röd färg, DA (218 decimalt) grönt och 2D (45
decimalt) blått. En hög siffra betyder att det ska vara mycket av färgen och en låg siffra att
det ska vara lite. Minimum är 00 (ingen färg) och maximum är FF (max färg). Om du inte vill
prova dig fram kan du använda någon av nedanstående färger.
TEXT, LINK, VLINK och ALINK talar om vad det ska vara för färg på text, obesökta länkar, besökta
länkar och länkar i det ögonblick man klickar på dem. Färgkoderna fungerar på samma sätt som med
BGCOLOR.
HTML-koden <HR WIDTH="80%"> betyder att här vill vi ha ett horisontellt streck (horisontal rule)
som har en längd som motsvarar 80% av skärmens bredd. Om man anger en bredd, men utelämnar
%-tecknet betyder det att strecket ska vara så många punkter bred. <HR WIDTH=620> betyder att
strecket nästan räcker hela vägen över en skärm som är 640 punkter bred.
Om man vill kan man även ändra färgen på text. <FONT COLOR="#00FF00"> gör efterföljande
text grön. </FONT> ändrar tillbaka till vanlig färg. Färgkoderna är desamma som för
Spara dokumentet under namnet lektion3.htm och se hur det ser ut.
Det ser ut så här. I nästa lektion ska vi lägga till länkar.
En av de saker som gör hemsidor så spännande är att man kan placera länkar från en sida till
en annan och på det sättet hoppa mellan olika sidor. Man kan t ex göra en länk från en sida i
Sverige till en sida i Australien. Det enda som krävs är att man kan adressen till den sida
man vill länka. Det går naturligtvis även bra att göra länkar mellan sina egna sidor, eller
t o m inom en sida. Det går att använda länkar till annat också. Det ska vi snart titta på.
Vilka är våra favoritlänkar? Netscape och Microsoft är ganska bra. Då behöver vi veta vilka
adresser, eller URL:er (Uniform Resource Locator), de har. Netscape har
"http://www.netscape.com" och Microsoft har "http://www.microsoft.com". Länken till Netscape
blir:
Vad betyder detta? Länkar har koden <A>. <HREF> (Hypertext Referens) talar om vilken typ av
länk det är, nämligen en referens till en annan adress. Efter adress-koden talar man
om vad det ska stå på länken: Netscape. Sedan avslutar vi länken med </A>. Det var väl
inte så svårt? Nu ska vi skapa länken till Microsoft. Vi börjar med att tala om vilken typ av
länk vi vill göra:
<A HREF=
Sedan anger vi adressen till Microsoft:
<A HREF="http://www.microsoft.com">
Vad ska ska det stå på länken?
<A HREF="http://www.microsoft.com">Microsoft
Och avslutnings-koden:
<A HREF="http://www.microsoft.com">Microsoft</A>
Klart!
Nu lägger vi till dem i vår hemsida från lektion 3:
<A HREF=
Inga konstigheter så långt! Vi går vidare:
<A HREF="mailto:
Vänta nu! Vad var det där? Jo, "mailto:" talar om att internetläsaren ska öppna sin
e-post-funktion. Nu måste vi tala om vem vi vill skicka e-post till:
<A HREF="mailto:niklas@monkeytoys.pp.se">
Vad ska det stå på länken? För tydlighetens skull skriver vi e-postadressen:
Jag lade till slut-koden </A> på en gång. Du vet ju hur det fungerar nu. Vi sätter in den
här raden på hemsidan:
I nästa lektion ska vi lägga till bilder! Så här ser sidan ut nu.
Lite bilder kan lätta upp en hemsida. För att du ska kunna visa en bild på hemsidan måste det
vara en bild i antingen gif- eller jpg-format. Jpg-bilder är bra på det sättet att de är
relativt små. Ju större en bild är desto längre tid tar det att ladda in den. Gif-bilder
är något större än jpg-bilder, men har den fördelen att de kan göras "genomskinliga" och man
kan spara dem i ett sådant format att de laddas in gradvis med högre och högre upplösning
(interlaced gif). Det är bra eftersom man kan se vad bilden föreställer redan innan den är helt
laddad. Jag har några bilder vi kan använda:
HTML-koden för bilden av Mel Gibson är:
<IMG SRC="gibson.jpg" BORDER=1>
IMG (image) talar om att vi vill visa en bild. SRC (source) talar om att källan (bilden) är "gibson.jpg".
Man måste ange sökvägen till bilden om den inte ligger i samma katalog som den HTML-sida som
anropar den. Om "gibson.jpg" hade legat i en underkatalog som heter "bilder" skulle koden ha
blivit:
<IMG SRC="bilder/gibson.jpg" BORDER=1>
Observera att snedstrecket (/) ska luta framåt och inte bakåt som man kanske är van vid från
DOS-miljö! BORDER=1 betyder att vi vill ha en ram som är 1 punkt bred runt bilden. Om vi inte
vill ha någon ram skriver vi BORDER=0.
En del har Internet-program som inte kan visa bilder. För att de ändå ska veta vad en bild föreställer kan vi hjälpa
dem genom att lägga till lite kod:
<IMG SRC="bilder/gibson.jpg" ALT="Mel Gibson" BORDER=1>
ALT (alternative) gör att de som inte kan se bilden i stället ser den alternativa texten. Man
måste inte använda ALT, men det är hövligt att göra det.
Vi lägger till bilderna på hemsidan:
Spara sidan under namnet "lektion5.htm" och titta hur den ser ut.
Ålrajt!! Nu börjar det se ut som en riktig hemsida!
Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar
med enklast tänkbara tabell. En tabell med bara en ruta:
Nu ska vi gå igenom steg för steg hur man gör. Vi börjar med att tala om att vi vill ha en tabell:
<TABLE BORDER=2>
TABLE (tabell) betyder att vi vill göra en tabell. BORDER=2 talar om att vi vill ha en ram som
är 2 punkter bred mellan rutorna och runt tabellen. Nästa steg är att tala om att vi vill
påbörja en rad i tabellen:
När vi ändå är igång kan vi lägga till en rad i tabellen så att det blir två rader med vardera
två fält i:
Blev det mycket på en gång? Vi skriver om ovanstående HTML-kod på ett annat sätt och ritar ut
lite hjälplinjer så blir det lättare att förstå:
Utan att ändra ordningen på HTML-koderna har vi flyttat dem så att flera hamnar på samma rad. Då
ser vi att tabellen börjar med <TABLE> och slutar med </TABLE>.
Varje tabellrad börjar med en <TR> och slutar med en </TR>. Varje
ruta börjar med en <TD> och slutar med en </TD>. Det blev väl lite
mer överskådligt?
Du kan säkert gissa att tabellen ser ut så här:
Ibland händer det att man vill ha en ruta som är lika lång som flera fält. Vi gör en sådan och
sätter en rubrik i den:
Det finns fler funktioner att använda tillsammans med tabeller, men det kan vi lämna till
senare. Nu ska vi göra en tabell på vår hemsida. Vi gör en tabell med flera av våra
favoritlänkar i. Komplettera HTML-dokumentet från lektion 5 så att det ser ut så här:
Spara dokumentet under namnet "lektion6.htm" och ta en titt på sidan.
Så här ser den ut nu. Vi fortsätter med lektion 7.
Ibland kan det vara roligt att sätta en sökmaskin på sin hemsida. Det ska vi göra nu. Det finns
många olika sökmaskiner så vi väljer en i mängden: Lycos. Det som behövs för att göra en sökmaskin
är ett formulär där man kan fylla i det man söker efter och en knapp för att tala om att sökningen
ska börja. Dessutom behöver man ett program som utför själva sökningen. Formulär och knapp kan
vi enkelt göra själva och sökprogrammet kan vi "låna" hos Lycos. Med låna menar jag inte att vi
ska hämta programmet hos Lycos. Det räcker med att anropa det från vår hemsida. Så här går det
till:
<FORM ACTION="http://lycos-tmp1.psc.edu/cgi-bin/pursuit">
FORM talar helt enkelt om att här börjar formuläret.
ACTION="http://lycos-tmp1.psc.edu/cgi-bin/pursuit" betyder att när vi trycker på
startknappen ska ett program som heter pursuit startas.
pursuit-programmet ligger i katalogen cgi-bin på servern
lycos-tmp1.psc.edu. Programmet pursuit letar reda på det som
skrivs i formuläret.
Nästa steg är att skapa ett inmatningsfält:
<INPUT NAME="query">
INPUT anger att vi vill skapa ett inmatningsfält. Med koden
NAME="query" (namn) döper vi fältet till "query" (fråga). Anledningen till att vi
döper fältet till just "query" är att sökprogrammet hos Lycos söker efter det som står i
ett fält som heter "query". Om vi byter ut namnet mot någonting annat kommer inte sökningarna att
fungera.
För att kunna starta sökningar måste vi ha en knapp som anropar sökprogrammet:
<INPUT TYPE="submit" VALUE="Sök!">
INPUT skapar även här ett inmatningsfält, men TYPE="submit" betyder
att det här fältet är av typen "submit" (överlämna), det vill säga en knapp.
VALUE="Sök!" talar bara om vad det ska stå på knappen. I stället för "Sök!"
hade vi kunnat skriva "Kalle dussin" eller någonting annat. Det påverkar inte sökprogrammet.
Till sist lägger vi till slut-koden för formuläret:
</FORM>
Klart!
Detta är vad som sker: När vi trycker på knappen "submit" överlämnas det som står i
inmatningsfältet "query" till programmet "pursuit". Programmet "pursuit" söker reda
på alla sidor som innehåller det som står i fältet "query" och skickar tillbaka en ny sida
med svaren till oss.
Så här ser hela koden ut:
Vi skapar en ny sida och lägger in sökmaskinen på den. Kommer du ihåg hur man börjar?
Inledning
Lektion 1: "Min första hemsida"
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Dessa rader ska alltid finnas med i dina HTML-dokument! Det spelar ingen roll om man skriver
HTML-koder med gemener eller versaler. Jag tycker att det blir tydligare med versaler. Nu ska
vi gå igenom vad ovanstående rader betyder.
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<TITLE>-koderna används för att döpa sidan. Det du skriver mellan <TITLE>-koderna är
det som står längst upp i internetläsaren när man tittar på din sida. Vi ska snart titta
efter hur det ser ut, men först ska vi lägga till ytterligare några rader:
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
VÄLKOMMEN TILL MIN HEMSIDA!
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</BODY>
</HTML>
När det gäller specialtecken som å, ä och ö finns det en del saker att tänka
på, men det lämnar vi till senare.
Lektion 2: Textformatering
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
</BODY>
</HTML>
Vad koden <CENTER> betyder är inte svårt att gissa: centrera. Allt efter <CENTER>
centreras mitt på raden. </CENTER> talar om att centreringen ska upphöra.
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Lektion 3: Färger och horisontella streck
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<HR WIDTH="80%">
</BODY>
</HTML>
I koden <BODY> kan man lägga till flera parametrar som talar om hur sidan ska se ut.
BGCOLOR anger vilken bakgrundsfärg sidan ska ha. Färgkoden fungerar så här:
000000 = svart
FFFFFF = vitt
FF0000 = rött
00FF00 = grönt
0000FF = blått
FFFF00 = gult
00FFFF = cyan
FF00FF = lila
Saknar du någon färg? Här har du resten av de färger du bör hålla dig till.
Lektion 4: Länkar
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<P>
<A HREF="http://www.Netscape.com">Netscape</A>
<P>
<A HREF="http://www.Microsoft.com">Microsoft</A>
<HR WIDTH="80%">
</BODY>
</HTML>
Visst är det trevligt att få post! Därför ska vi lägga till en e-postlänk, så att den som
besöker hemsidan kan skicka några rader. Allt vi behöver är din e-postadress. Den kan jag inte
så vi kan använda:
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<P>
<A HREF="http://www.Netscape.com">Netscape</A>
<P>
<A HREF="http://www.Microsoft.com">Microsoft</A>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:niklas@monkeytoys.pp.se">niklas@monkeytoys.pp.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>
Spara dokumentet under namnet "lektion4.htm".
Lektion 5: Bilder
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="gibson.jpg" ALT="Mel Gibson" BORDER=1>
<IMG SRC="hatcher.jpg" ALT="Terri Hatcher" BORDER=1 >
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.Netscape.com"><IMG SRC="netscape.gif" ALT="Netscape" BORDER=1></A>
<P>
<A HREF="http://www.Microsoft.com"><IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1></A>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:niklas@monkeytoys.pp.se">niklas@monkeytoys.pp.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>
Jag bytte ut texterna "Netscape" och "Microsoft" mot koden för bilderna! Det betyder att
bilderna fungerar som länkar. När man klickar på bilderna blir man länkad till Netscapes eller
Microsofts hemsidor! Det är väl snyggt?
Lektion 6: Tabeller
En ruta med ram runt
<TABLE BORDER=2>
<TR>
<TR> (table row) betyder att här börjar en ny rad i tabellen. Vi måste tala om att vi vill ha ett
fält i tabellen också:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
<TD> (table data) gör att vi får ett datafält i tabellen. Dessa tre rader är vad vi behöver för
att definiera en enkel tabell. Vi sätter dit slut-koder också:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
</TD>
</TR>
</TABLE>
Nu ska vi lägga till en ruta i tabellen bredvid den vi redan har. Det ser ut så här:
<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En ruta till med ram runt
</TD>
</TR>
</TABLE>
Vi lägger alltså till ett datafält efter det första men före slutet på raden (</TR>). Då
ser tabellen ut så här:
En ruta med ram runt
En ruta till med ram runt
<TABLE BORDER=2>
<TR>
<TD>
En ruta med ram runt
</TD>
<TD>
En ruta till med ram runt
</TD>
</TR>
<TR>
<TD>
En ruta med ram runt på rad 2
</TD>
<TD>
En ruta till med ram runt på rad 2
</TD>
</TR>
</TABLE>
Vi lägger in koderna för den nya raden efter den första raden, men före tabellslutet (</TABLE>).
En ruta med ram runt
En ruta till med ram runt
En ruta med ram runt på rad 2
En ruta till med ram runt på rad 2
<TABLE BORDER=2>
<TR> <TH COLSPAN=2> Tabellrubrik </TH> </TR>
<TR>
<TD> En ruta med ram runt </TD>
<TD> En ruta till med ram runt </TD>
</TR>
<TR>
<TD> En ruta med ram runt på rad 2 </TD>
<TD> En ruta till med ram runt på rad 2 </TD>
</TR>
</TABLE>
<TH> (table header) fungerar på samma sätt som <TD>, med den skillnaden att allt som står i ett
<TH>-fält skrivs med fetstil. COLSPAN=2 betyder
att fältet ska vara lika brett som 2 kolumner (fält) i tabellen. På samma sätt finns det en kod
som heter ROWSPAN och som anger hur många rader högt ett fält ska vara.
Vi ser efter hur tabellen tar sig ut nu:
Tabellrubrik
En ruta med ram runt En ruta till med ram runt
En ruta med ram runt på rad 2 En ruta till med ram runt på rad 2
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="gibson.jpg" ALT="Mel Gibson" BORDER=1>
<IMG SRC="hatcher.jpg" ALT="Terri Hatcher" BORDER=1 >
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.Netscape.com"> <IMG SRC="netscape.gif" ALT="Netscape" BORDER=1> </A>
<P>
<A HREF="http://www.Microsoft.com"> <IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1> </A>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
<TR> <TH COLSPAN=2>Fler favoritlänkar:</TH> </TR>
<TR> <TH>Länk</TH> <TH>Kommentar</TH> </TR>
<TR>
<TD> <A HREF="http://www.sebank.se/sebank/fonder">S-E-Banken Fonder</A> </TD>
<TD> En trevlig sida med massor av bra information om S-E-Bankens fonder. </TD>
</TR>
<TR>
<TD> <A HREF="http://www.yahoo.com">Yahoo!</A> </TD>
<TD> En amerikansk sökmaskin </TD>
</TR>
</TABLE>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:niklas@monkeytoys.pp.se">niklas@monkeytoys.pp.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>
WIDTH="80%" är en frivillig kod som betyder att tabellen ska ha en bredd som motsvarar
80% av sidbredden. Du kan även ange bredden i punkter.
Lektion 7: Sökmaskiner
<FORM ACTION="http://lycos-tmp1.psc.edu/cgi-bin/pursuit">
<INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>
Och så här ser det färdiga formuläret ut:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Och så lite färg:
<HTML>
<HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080" LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
</BODY>
</HTML>
Och formuläret med sökmaskinen:
<HTML>
<HEAD>
<BODY BGCOLOR="#FFDA2D" TEXT="#000080" LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
</HEAD>
<BODY>
<CENTER>
<FORM ACTION="http://lycos-tmp1.psc.edu/cgi-bin/pursuit">
Sök med Lycos: <INPUT NAME="query">
<INPUT TYPE="submit" VALUE="Sök!">
</FORM>
</BODY>
</HTML>
Det var det. Spara sidan under namnet "lektion7.htm". Så här ser sidan ut.
"Frames" gör det möjligt att dela upp skärmen i flera fönster och visa olika saker i de
olika fönstren. Om man
Det man ska tänka på är att inte alla internetläsare kan visa frames. Två av de program som kan det är Netscape Navigator version 2.0 eller senare och Microsoft Internet Explorer version 3.0 eller senare.
Har du en internetläsare som kan visa frames? Om du är osäker kan du testa här. Har du inte det bör du skaffa ett om du vill lära dig hur man gör frames.
Nu ska vi lära oss hur man bygger en sida som innehåller frames!
Först talar vi om att vi vill göra frames:
<FRAMESET ROWS="60,*">
FRAMESET är start-koden för frames. ROWS="60,*" (rader) talar om att vi vill ha två fönster ovanför varandra och att det övre ska vara 60 punkter högt och det nedre ska uppta resten av skärmen (*). Om vi hade velat ha två lika stora fönster hade vi skrivit ROWS="50%,50%". Då tar varje fönster upp 50% av skärmens höjd. Vill man ha fönster bredvid varandra kan man i stället för ROWS skriva COLS (kolumner). ROWS och COLS går att kombinera så att skärmen delas upp i många fönster. Har man för många fönster kan det bli rörigt.
Vi fortsätter med att beskriva det första (övre) fönstret:
<FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud">
FRAME är start-koden för ett fönster. Koden SRC talar om vad vi vill visa i fönstret när det laddas. lektion7.htm är sidan med Lycos sökmaskin. När framesidan laddas kommer vi alltså att se sidan med sökmaskinen i det övre fönstret. Med SCROLLING="no" talar vi om att det inte ska finnas några rullningslister i fönstret. Förutom no kan man välja yes eller auto. Om man utelämnar SCROLLING helt blir det auto. NAME="huvud" döper fönstret till "huvud". Jag ska strax förklara varför man döper fönstren.
Vi går vidare till nästa fönster:
<FRAME SRC="lektion6.htm" NAME="visa">
SRC="lektion6.htm": när fönstret laddas visas sidan vi skapade i lektion 6. NAME="visa": fönstret döps till "visa".
Det som återstår nu är att avsluta sektionen med frames:
</FRAMESET>
Ingen överraskning direkt. Så här ser hela definitionen av våra frames ut:
<FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> </FRAMESET>Vi skapar en ny sida och lägger in koden:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> </FRAMESET> </HTML>Vad kommer den som har en internetläsare som inte kan visa frames att se? En tom sida. Vad kan vi göra åt det? Vi kan lägga till en kod som heter <NOFRAMES>. Det man skriver mellan <NOFRAMES>-koderna kommer de som inte har en internetläsare som kan visa frames att se. Vi ska vara hövliga och lägga till det i vår frames-sida:
<HTML> <HEAD> <TITLE>Min första hemsida</TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="lektion7.htm" SCROLLING="no" NAME="huvud"> <FRAME SRC="lektion6.htm" NAME="visa"> <NOFRAMES> Den här sidan kräver att man har en internetläsare som kan visa s k "frames". <P> Du som inte har det kan titta <A HREF="lektion6.htm">här</A> </NOFRAMES> </FRAMESET> </HTML>Spara sidan under namnet "lektion8.htm".
Innan vår hemsida fungerar som den ska måste vi lägga till en kod i sidan vi skapade i
<HTML> <HEAD> <BODY BGCOLOR="#FFDA2D" TEXT="#000080" LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80"> </HEAD> <BODY> <CENTER> <FORM ACTION="http://lycos-tmp1.psc.edu/cgi-bin/pursuit" TARGET="visa"> Sök med Lycos: <INPUT NAME="query"> <INPUT TYPE="submit" VALUE="Sök!"> </FORM> </BODY> </HTML>Med TARGET-koden kan man tala om för internetläsaren i vilket fönster man vill visa någonting. Vi vill att svaret på sökningar ska visas i det nedre fönstret som vi döpte till "visa". Det är därför man namnger de olika fönstren i frames. TARGET-koden kan man använda i vanliga länkar också, exempelvis
Nu kan vi titta på sidan.
Tycker du att det är krångligt med frames? Vi gör ett exempel till med lite fler fönster i.
Här är koden till den sidan:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*,*,*">
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="1"> <FRAME SRC="x.htm" NAME="2">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="3"> <FRAME SRC="x.htm" NAME="4">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="x.htm" NAME="5"> <FRAME SRC="x.htm" NAME="6">
</FRAMESET>
</FRAMESET>
</HTML>
Vi stuvar om bland koderna och ritar ut några hjälplinjer så att det blir lite tydligare:
Nu ser vi att man börjar med att tala om hur många rader frame-sidan ska innehålla, och hur höga de ska vara, med <FRAMESET ROWS="*,*,*">. Sen måste vi, för varje rad, tala om hur många kolumner den ska innehålla och hur breda de ska vara. Det gör vi med <FRAMESET COLS="*,*">. Därefter talar vi, för varje fönster i raden, om vilken sida vi vill visa i fönstret och vad det ska heta (FRAME SRC...). Till sist avslutar vi raden med slut-koden </FRAMESET>.
Vi fortsätter på samma sätt med rad 2 och 3. Frame-sidan avslutas med </FRAMESET>.
Visst blev det lite tydligare så?!
Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt
är att använda bakgrundsbilder. Man behöver en bild:
Enkel, men den duger i utbildningssyfte. HTML-koden för bakgrundsbilder är ganska lik den för
bakgrundsfärg.
BACKGROUND="rand.gif"
Man talar helt enkelt om vilken bild man vill ha som bakgrund. Om bilden inte ligger i samma
katalog som HTML-dokumentet måste man ange sökvägen, exempelvis: BACKGROUND="bild/rand.gif".
Nu lägger vi till koden i dokumentet från lektion 6:
Bakgrundsbilder
<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BACKGROUND="rand.gif" BGCOLOR="#FFDA2D" TEXT="#000080"
LINK="#8080FF" VLINK="#FF0000" ALINK="#FFFF80">
<CENTER>
<H1>
VÄLKOMMEN TILL MIN HEMSIDA!
</H1>
</CENTER>
<HR WIDTH="80%">
<P>
<FONT SIZE=4>
Det här är mitt första försök att göra en egen hemsida. Ju
mer jag lär mig desto bättre kommer sidan att bli. Ha
lite tålamod så kommer du att bli rikligt belönad!
</FONT>
<P>
<CENTER>
<H4>Här är mina idoler:</H4>
<P>
<IMG SRC="gibson.jpg" ALT="Mel Gibson" BORDER=1>
<IMG SRC="hatcher.jpg" ALT="Terri Hatcher" BORDER=1 >
</CENTER>
<P>
<CENTER>
<H4>Mina favoritlänkar:</H4>
<P>
<A HREF="http://www.Netscape.com"> <IMG SRC="netscape.gif" ALT="Netscape" BORDER=1> </A>
<P>
<A HREF="http://www.Microsoft.com"> <IMG SRC="microsft.gif" ALT="Microsoft" BORDER=1> </A>
</CENTER>
<P>
<CENTER>
<TABLE BORDER=2 WIDTH="80%">
<TR> <TH COLSPAN=2>Fler favoritlänkar:</TH> </TR>
<TR> <TH>Länk</TH> <TH>Kommentar</TH> </TR>
<TR>
<TD> <A HREF="http://www.sebank.se/sebank/fonder">S-E-Banken Fonder</A> </TD>
<TD> En trevlig sida med massor av bra information om S-E-Bankens fonder. </TD>
</TR>
<TR>
<TD> <A HREF="http://www.yahoo.com">Yahoo!</A> </TD>
<TD> En amerikansk sökmaskin </TD>
</TR>
</TABLE>
</CENTER>
<HR WIDTH="80%">
<CENTER>
<FONT SIZE=2>
<A HREF="mailto:niklas@monkeytoys.pp.se">niklas@monkeytoys.pp.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>
Som du ser ska BACKGROUND ligga innanför samma <> som BODY.
Tänk på att stora bakgrundsbilder tar längre tid att läsa in. Så här ser sidan ut nu.
| Tecken | Character entity |
|---|---|
| å | å |
| Å | Å |
| ä | ä |
| Ä | Ä |
| ö | ö |
| Ö | Ö |
| < | < |
| > | > |
| & | & |
| " | " |
| æ | æ |
| Æ | Æ |
| ø | ø |
| Ø | Ø |
Det finns fler, men detta är några av de mest användbara med svensk teckenuppsättning. Att ersätta specialtecken med character entities
kan vara ganska tidsödande. Det är faktiskt ett jobb som en enkel ordbehandlare kan hjälpa till med. De flesta ordbehandlare har
en funktion som heter någonting i stil med "sök - ersätt" (find - replace). Den kan man använda till att säga "sök alla å
och ersätt med å" o s v. Då går det ganska fort. Den som är duktig på att bygga macron i
Glöm inte inte att ändra alla specialtecken på din hemsida!
Ibland vill man ställa upp saker i punktform. Det finns några funktioner i HTML som är till för just det. Det enklaste är <LI> (list item).
Det finns en slut-kod (</LI>), men den behöver man inte använda. Vi gör en enkel lista:
Om man sätter <UL> och </UL> i början respektive slutet av
listan får man listan inflyttad en bit från vänstermarginalen:
I stora sidor är det ofta bra att kunna hoppa snabbt mellan olika ställen inom sidan. Det gör man med
interna länkar. För att kunna hoppa till ett ställe inom sidan måste man sätta ett så kallat "ankare"
på den plats man vill kunna hoppa till. Ett ankare kan se ut
<A NAME="ankare">
När man har ett ankare är det lätt att göra en länk till den platsen på sidan:
<A HREF="#ankare">
# betyder att länken refererar till ett ankare. Nu gör vi en riktig länk och ser hur det
fungerar.
Klicka på länken och se vad som händer.
Som du ser blev du förflyttad till den rad där jag visade hur ett ankare kan se ut. Interna länkar kan
även användas för förflyttning från en sida till ett namngivet ställe på en annan sida. En sådan länk kan
se ut så här:
<A HREF="annan_sida.htm#ankare">
eller om den ligger i en annan domän:
<A HREF="http://annan.domän.se/annan_sida.htm#ankare">
Ett bra användningsområde är innehållsförteckningar. Där kan man göra länkar från de olika innehållsposterna
till rätt plats på sidan.
När man är klar med sin hemsida hoppas man att någon ska komma och titta på den. Tyvärr brukar
det inte hända av sig själv. Det brukar krävas lite marknadsföring (och ibland räcker det inte
med lite heller). Ett bra ställe att börja sin marknadsföring, är att registrera sidan i några
av alla de sökmaskiner som finns.
När man söker i sökmaskinerna brukar det första man ser vara sidornas titel. Därför är det
viktigt att titeln beskriver sidans innehåll.
"- Men jag kan inte beskriva hela min sidas innehåll i en titel!"
Håller du med? Lyckligtvis finns det små knep man kan ta till för att hjälpa fler att hitta
sidan. Man kan göra sidor vars enda uppgift är att locka folk till huvudsidan. Jag kallar
dem för satelliter. Hittade du 'HTML på svenska' genom en sökmaskin? Då är sannolikheten stor
att du kom hit via en av mina satellit-sidor.
Här kan du se hur en satellit-sida fungerar.
Nu ska jag förklara vad du ska tänka på när du gör dina satellit-sidor.
Låt oss säga att en sida innehåller information om Porsche 356, rock-gruppen ZZ-Top och länkar
till olika HTML-kurser. Man kan givetvis skriva "Porsche 356, ZZ-Top och HTML-kurser" i titeln
på den sidan, men om man har fler ord som man vill att sidan ska förknippas med kan det lätt bli
långa titlar. I stället gör vi tre sidor med titlarna "Porsche 356", "ZZ-Top" och "HTML-kurser".
Sidorna behöver inte innehålla något annat än en länk till huvudsidan. Vi gör en sida:
Nu är det dags för någonting nytt! Meta-koder. De kan användas till lite av varje, men jag ska
gå igenom ett användningsområde. Vi börjar med att lägga till en Meta-kod på sidan:
Anledningen till att vi satte en länk på sidan är att en besökare med en internet-läsare som
inte stöder Meta-koder ska kunna hitta rätt.
Den här meta-koden kan man använda till annat också. Du skulle till exempel kunna göra en guidad
tur genom ett antal sidor där besökaren inte behöver klicka på några länkar utan bara kan sitta
tillbakalutad och titta.
När du har gjort dina satelliter får du inte glömma att registrera dem i olika sökmaskiner!
Här kan du registrera dem i AltaVista. Skriv hela adressen till sidan och tryck på 'Registrera':
Om du har gått igenom hela kursen har du förhoppningsvis lärt dig ganska mycket om HTML och hur man bygger
hemsidor. Har jag lyckats bevisa att det inte är svårt? Har jag missat några viktiga bitar? Är någonting
dåligt förklarat? Det vore trevligt att veta vad du tycker! Skriv några rader:
Den här kursen är ingen komplett HTML-manual och den är inte heller tänkt så. Vill du lära dig mer så finns
det tusentals ställen på nätet där du kan hitta information. Det mesta är på engelska. Jag har gjort en lista
över några platser som jag tycker förtjänar ett besök.
När du har gjort en hemsida kanske du vill lägga till lite mer avancerade funktioner.
Ett sätt är att använda JavaScript, ett enkelt scriptspråk. Stefan Koch
har skrivit en mycket bra introduktion till JavaScript. Jag tycker att den är så bra
att jag har översatt den till svenska (efter Stefan Kochs medgivande). Den svenska
översättningen hittar du
här.
Listor
<LI>Rad ett i vår lista
<LI>Rad två i vår lista
<LI>Rad tre i vår lista
<LI>O s v...
Så här ser ovanstående rader ut:
<UL>
<LI>Rad ett i vår lista
<LI>Rad två i vår lista
<LI>Rad tre i vår lista
<LI>O s v...
</UL>
<UL> betyder onumrerad lista (unnumbered list). Så här ser den ut:
Vi går vidare och gör en lista med flera nivåer. Det går till på det viset att man lägger flera listor
i varandra:
<UL>
<LI>Rad ett i första nivån
<LI>Rad två i första nivån
<UL>
<LI>Rad ett i andra nivån
<LI>Rad två i andra nivån
<UL>
<LI>Rad ett i tredje nivån
<LI>Rad två i tredje nivån
</UL>
</UL>
</UL>
Förskjutningen i nivå två och tre gjorde jag bara för att det skulle vara lättare att se vad
som händer. Ovanstående kod ser ut så här:
Eftersom <UL> betyder onumrerad lista är det lätt att gissa att det finns
numrerade listor också. <OL> (ordered list) fungerar precis på samma
sätt som <UL>. Skillnaden är att i stället för punkter och fyrkanter börjar
raderna med nummer:
Det finns en del andra sätt att definiera listor, men vi nöjer oss med det vi har gått igenom.
Det kommer man långt med.
Interna länkar
"Satelliter"
<HTML>
<HEAD>
<TITLE>Porsche 356</TITLE>
</HEAD>
<BODY>
<H1>
<CENTER>
<A HREF="minsida.htm">Välkommen</A>
</CENTER>
</H1>
</BODY>
</HTML>
Så här långt är det inga nyheter. Det viktiga är en bra titel och en länk till huvudsidan.
<HTML>
<HEAD>
<TITLE>Porsche 356</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="3; URL=http://www.mindomän.se/minsida.htm">
</HEAD>
<BODY>
<H1>
<CENTER>
<A HREF="http://www.mindomän.se/minsida.htm">Välkommen</A>
</CENTER>
</H1>
</BODY>
</HTML>
Den här Meta-koden kommer att öppna sidan http://www.mindomän.se/minsida.htm
efter 3 sekunder. Jag ska inte gå in på detaljerna i Meta-koden utan bara tala om vilka
variabler du kan ändra och vilka effekter det får. Siffran (3) i
CONTENT="3; URL=http://www.mindomän.se/minsida.htm" anger hur många sekunder
som ska förflyta innan sidan http://www.mindomän.se/minsida.htm öppnas. Du kan
byta ut trean mot vilken siffra som helst och på det sättet styra hur lång tid det ska dröja
innan en annan sida ska laddas. http://www.mindomän.se/minsida.htm kan du byta
ut mot adressen till vilken sida som helst.
Avslutning
HTML Superstars of HTML
Den första riktigt bra svenska sidan om HTML. Här hittar du det mesta. Jag rekommenderar ett
besök! HTML-nybörjarguide
En ny riktigt bra svensk HTML-guide. Svenska Skoldatanätet - HTML-kurs
Lite torr, men ganska innehållsrik sida om HTML. HTML Nybörjarguide
En svensk översättning av NCSA--A Beginner's Guide to HTML.
