Start Index Sajt Info Html kurs 1 del2 del3 © Göran Olsson,1999.
 En Introduktion i HTML
Hyper Text Markup Language

Koder

HTML är en förkortning för: Hyper Text Markup Language och är egentligen inte ett programmeringsspråk utan en sidbeskrivningsspråk för att definiera dokument på webben.
Varje textutseende och layout har sin egen kod eller "tag" som man ibland kallar det.
Jag har valt att kalla det kod, eftersom detta är på svenska.
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.
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.

Start - Grund.

För att kunna börja med en sida måste du ha dessa HTML-koder: 

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

 

 

 

<HEAD>-koder

  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> 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, jag återkommer till det senare.

<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:

<TITLE>

</TITLE>

 
<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>

Färger och horisontella streck

 

 

 

 

 

 

 

 

 

 

 

 

Färgkoder

 

 

 

 

 "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å, tex så här: 
<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" 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 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:
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 mitt 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. 

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 216 färger du bör hålla dig till.

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 brett.
<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, detta <FONT COLOR="#00FF00"> gör texten grön.
</FONT> ändrar tillbaka till vanlig färg.
Färgkoderna är desamma som för t ex bakgrundsfärg. Glöm inte att spara dokument regelbundet.

 

Länkar

 

 

URL

 

 


Hypertext Referens

 

 

 

 

 

































 

 




E-post





































 

 









Bilder

 

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å.

Vilka är favoritlänkarna? Netscapes och Microsofts ä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 Macromedia blir:

<A HREF="http://www.netscape.com">Netscape</A>

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: Macromedia. 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!

Om du lägger vi till dem i sidan från tidigare ser det ut såhär: 

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" 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: [email protected], Vi bygger upp länken steg för steg:

<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:[email protected]">

Vad ska det stå på länken? För tydlighetens skull:

<A HREF="mailto:[email protected]">[email protected]</A>

Jag lade till slut-koden </A> på en gång, vi vet ju hur det fungerar nu.
Jag sätter in den på exempelsidan: 

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" 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!
lt;/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:gorano2.sbbs.se">gorano2.sbbs.se</A>
</FONT>
</CENTER>
</BODY>
</HTML>

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 exempel bilder vi kan använda här :


HTML-koden för bilden av de tre skönheterna är:

<IMG SRC="vacker.jpg" BORDER=1>

IMG (image) talar om att vi vill visa en bild.
SRC (source) talar om att källan (bilden) är "vacker.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 "vacker.jpg" hade legat i en underkatalog som heter "bilder" skulle koden ha blivit:

<IMG SRC="bilder/vacker.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/vacker.jpg" ALT="Skönheter" 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.

Jag lägger till bilderna på exempelsidan: 

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFF99" 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="vacker.jpg" ALT="Skönheter" 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:gorano2.sbbs.se">gorano2.sbbs.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 ju klokt att variera sej lite.




Ålrajt!		 
 

Ta och titta hur den ser ut.
Nu börjar det likna en riktig hemsida! fortsätta bygga ?

 

 

 

 

 

 

 

  

 

 

 

 

 

 

 

 

F�rfattare:

Göran Olsson , [email protected] Addressinformation visas oftast med kursiv stil, utformad precis som vanliga textstycken (v�nsterjusterad).