Specialarbete 980427

[Hem] [Jag] [Bilder] [Kompisar] [Roligheter] [C₂H₅OH] [Länkar] [Nyheter]

Magnus Sonanders HTML-nybörjarkurs

Inledning
Du läser nu de första raderna i Magnus Sonanders HTML-nybörjarkurs. Tanken med denna kurs är att Du skall få insikt i hemsideprogrammeringens främsta språk, HTML. Kursen är riktad till Dig som inte kan någonting om hemsideprogrammering, men som gärna vill lära dig. Det är tänkt att detta skall läsas parallellt med att Du gör de exempel som finns. Detta för att Du lättare skall lära dig. Fördelarna med att kunna nå ut på Internet är flera. Internet är fortfarande en relativt ny marknad och det gäller därför att vara först till kvarn, så att man kan bli den som får mjöla mest. Även den som inte vill nå ut med någon företagsprofilering, utan endast vill göra en presentation om sig själv i form av en hemsida har stor nytta av Internet. Kanske har Du en gammal barndomsvän som flyttat utomlands och Du tappat kontakten med? Med hjälp av Internet behöver det inte vara så svårt att återknyta bekantskapen, förutsatt att någon av er har en hemsida! Det jag kommer ta upp i den här kursen är grunderna, och efter att Du läst kursen skall Du utan problem på egen hand kunna utbilda dig vidare.

Vad är HTML?
HTML betyder Hypertext Markup Language och är det språk som en hemsida oftast skrivs i. HTML är ett beskrivningsspråk som idag är starkt förknippat med WWW – World Wide Web. Det mesta av informationen på WWW är skrivet i HTML. HTML definierades för första gången 1990 inom World Wide Web-projektet på forskningscentrumet Cern i Schweiz. Mycket har hänt med Internet och framförallt WWW sedan 1990. Det har kommit många nya och dessutom kommersiella WWW-verktyg. Något som gör HTML till det levande programmeringsspråk som det är idag är att det hela tiden förändras med tillägg och varianter.

Programvara
Det första Du måste se över innan Du börjar är den programvara Du har. Det finns flera program som automatiskt behandlar HTML-taggar (t.ex Microsoft Frontpage) men dessa kommer vi inte arbeta med i denna kurs. Det Du behöver är, förutom en dator, ett textbehandlingsprogram och en web-läsare (en sk BROWSER), t.ex. Netscape Navigator eller Microsoft Explorer. Textbehandlingsprogram finns inbyggt i Windows (Wordpad, Notepad eller Anteckningar), men Microsoft Word fungerar också bra. Huvudsaken är att Du kan spara dokumenten i ren textformat d.v.s. ascii-kod.

Taggar:
När jag i fortsättningen talar om sk. taggar menar jag den kommandorad som aktiverar en viss funktion. När man t.ex. vill ändra färgen på bakgrunden anger man det i taggen <BODY>. Taggar består oftast av en start- och en stopptagg. Starttaggen anges inom <> och sluttaggen inom </>. T.ex. om man vill skriva en text med fet stil skriver man <B> för att börja fetstil och </B> för att sluta. All text som står inom en tagg får det utseende som taggen ger. Man kan skriva flera HTML-taggar på samma rad om man vill och det spelar ingen roll om man har mellanslag eller inte mellan taggarna. Det viktigaste är att det är lätt att läsa. I kursen kommer jag oftast att ha en tagg per rad, eftersom jag anser att det då blir lättare att tyda taggarna. Några exempel på taggar:

Attribut:
Till de flesta taggar finns det attribut, tilläggskommandon som gör taggen mer detaljerad. Ett attribut är alltid kopplat till en tagg, den kan alltså aldrig stå själv. Om vi tar exemplet med bakgrundsfärgen nämnde jag ovan att den styrs i taggen BODY. Det räcker inte med att endast ange färg i taggen BODY, utan man måste skriva till attributet BGCOLOR. (BackGroundColor) Exempel:

BODY är taggen och BGCOLOR är attributet.

Ett första försök
Starta den texteditor eller ordbehandlare Du vill använda för att skriva HTML-dokument och skriv följande sex rader:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Dessa rader ska alltid finnas med i dina HTML-dokument! Det spelar ingen roll om Du skriver HTML-taggar 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-tagg som talar om att detta är ett HTML-dokument. Följaktligen betyder </HTML> "här slutar HTML-taggen". Utan dessa taggar 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>-taggarna anger man t.ex. sidans titel. Jag återkommer till det alldeles strax.

<BODY>-taggarna anger var dokumentets kropp börjar och slutar. Kroppen är den del av dokumentet där största delen av sidan finns.

Nu ska vi döpa sidan och fylla den med text. Infoga nedanstående rad mellan <HEAD>-taggarna:
<HTML>
<HEAD>
<TITLE>

Min första hemsida

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

<TITLE> -taggarna används för att döpa sidan. Det Du skriver mellan <TITLE>-taggarna ä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, den här gången mellan BODY-taggarna:
<HTML>
<HEAD>
<TITLE>

Min första hemsida

</TITLE>
</HEAD>
<BODY>
VÄLKOMMEN TILL MIN FÖRSTA HEMSIDA!
Detta är min första hemsida! Nu finns här endast vanlig text, men det kommer det inte att göra så länge till !
</BODY>
</HTML>

Nu är det hög tid att titta efter hur sidan ser ut. Spara dokumentet under namnet hemsida.htm. När Du sparar dokumentet är det viktigt att Du sparar det i textformat. En vanlig ordbehandlare lägger till en del styrkoder om man inte sparar dokumentet i textformat. 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. (Skillnaden på .htm och .HTML är endast den att i t.ex. Windows 3.1 kan man bara använda tre tecken i filtillägget. Funktionen är densamma oavsett vilket man använder.) Nu när Du har sparat återstår endast att öppna HTML-dokumentet i din internetläsare. Använder Du Netscape Navigator eller Microsofts Internet Explorer trycker Du Ctrl + O och letar reda på filen lektion1.htm.

Textformatering
En sida bör vara både funktionell och trevlig att titta på. Att behärska textformateringen är väldigt viktigt för sidans utseende, och även ganska enkelt ! Det hela bygger som tidigare på de sk. taggarna. Vi börjar med tre väldigt användbara :

<B> Fet stil </B> (Bold)

<I> Kursiv stil </I> (Italic)

<U>Understruken stil </U> (Underlined)

Liksom tidigare har varje tagg en slut-tagg, och allt mellan taggarna blir påverkade av taggens effekt. Det går även att kombinera flera taggar t.ex. om man vill göra både fet & kursiv stil. Då skriver man först de båda start-taggarna, fyller på med texten mellan och avslutar sedan med de båda slut-taggarna. Så här kan en rad se ut:

<B> <I> Textformatering är mycket användbart !!! </B> </I>

Du vet nu att <B> betyder fetstil och <I> betyder kursiv stil. Nu lägger Du in några nya taggar i HTML-dokumentet "hemsida.htm":

<HTML>
<HEAD>
 <TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>
<B>
VÄLKOMMEN TILL MIN HEMSIDA!
</B>
</H1>
</CENTER>
<FONT SIZE=4>
Nyheter på sidan :
<BR>
Detta är min första hemsida! Nu finns här nu text som är formaterad !
</FONT>
</BODY>
</HTML>

Nu till en förklaring vad alla de nya koderna står för:

<CENTER> = Centrera stycke. Allt efter <CENTER> centreras mitt på raden. </CENTER> talar om att centreringen ska upphöra.

<H1> betyder "rubrik storlek 1" (header1). Storlek 1 är störst och 6 är minst:

<H1> <H2> <H3> <H4> <H5> <H6>

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

<BR> är taggen man använder för att markera radbrytning.

<B> betyder fet stil (bold) som beskrivet ovan.

Nu tar vi och tittar efter hur sidan ser ut. Spara den och öppna den sedan med internetläsaren.

Nu börjar sidan att se lite bättre ut, inte sant ? Men fortfarande så finns det många funktioner vi inte har provat. Lite färger kanske skulle liva upp sidan ? Det skall vi snart lära oss!

BODY – Dokumentets kropp
I BODYtaggen anger man de generella inställningar som skall finnas i HTML-dokumentet. Man anger huruvida det skall finnas bakgrundsbild eller om man istället skall använda bakgrundsfärg. Man anger där vilken färg det skall vara på alla de olika sorters länkar som existerar. Allt detta anges i en och samma tagg, -BODYtaggen. Mellan BODYtaggen och dess sluttagg är kan man grovt säga att där är utrymmet som den största delen av hemsidan finns. En vanlig BODYtagg kan se ut så här:

Denna BODYtagg är skriven på flera rader, men den skulle lika gärna kunna varit skriven på en och samma rad. Färgerna är angivna i hexadecimal form. (Se avsnittet om färger X om färger). Nu till en förklaring vad de olika attributen representerar:

BGCOLOR är attributet för bakgrundsfärg

TEXT är attributet för textfärg.

LINK är attributet för länkfärg.

ALINK är attributet för aktiv länk (alltså den färg som visas när användaren klickar och håller kvar på en länk).

VLINK är attributet för besökt länk.

Alltså, om man vill ändra bakgrundsfärgen från den nuvarande vita (FFFFFF) till t.ex. svart (000000) ändrar man bara tecken efter attributet BGCOLOR.

Det svåra är inte att göra bakgrundsfärger och text i annan färg utan att hitta bra kombinationer. Det finns tyvärr många dåliga exempel idag. Anta utmaningen och använd färgerna estetiskt!

Bakgrundsbilder
Med BODYtaggen kan man inte bara byta färg på bakgrund, text och länkar. Dessutom finns möjligheten att använda en bild som bakgrundsmönster. Detta används på Internet med varierande framgång. Här följer därför två punkter som kan vara bra att tänka på när Du skall använda bakgrundsbilder.

Tänk på att göra små bakgrundsbilder annars tar det för lång tid att ladda ned dem och användare blir bara irriterade.

Tänk på att texten ska synas mot bakgrunden!

Att använda bakgrundsbilder anges, precis som i exemplet ovan, som ett attribut till elementet <BODY>. I följande exempel används bilden tegel.gif som bakgrundsbild:

OBS! Detta förutsätter att bilden tegel.gif finns i den katalog som HTML-dokumentet är i. Finns den någon annanstans måste Du skriva lite annorlunda. Om vi antar att bilden ligger i ett underbibliotek som heter bilder skriver Du istället:

Du kan även använda bilder som ligger någon annanstans på Internet. Då måste Du ange det med en sk. absolut URL. En sådan kan se ut så här:

Länkar
Hemsidor vore knappast så populära och användbara som de idag är om det inte vore för möjligheten att kunna använda länkar. Länkar erbjuder chansen att snabbt kunna förflytta sig mellan olika HTML-dokument. Nu skall jag försöka skapa lite förståelse kring länkarnas grunduppbyggnad. Alla länkar bygger på en sk. URL (Uniform Resource Locator). En URL är som en adress, den innehåller information om vilken sorts tjänst informationen är, vilken dator informationen är lagrad på och även namnet på resursen.. Det finns flera olika sorters länkar, de sex vanligaste formerna är:

Länk från text till specifik plats i samma dokument.

Länk från text till ett annat dokument.

Länk från text till specifik plats i annat dokument.

Länk från bild till ett annat dokument.

Länk från bild till specifik plats i annat dokument.

Länk från specifik plats i bild till ett annat dokument.

Var och en av dessa sex former av länkar definieras i HTML med taggen <A>, det är attributet som avgör vilken typ av länk det är. Nu skall vi testa hur det fungerar att göra en vanlig länk med attributet HREF. Skriv in den här raden i ditt HTML-dokument, mellan BODY-taggarna.

<A HREF=http://www.citynavigator.se> Hitta rätt i Stockholm ! </A>

Denna rad innebär att orden Hitta rätt i Stockholm ! kommer att presenteras med blå text och vara understruket (detta är den vanligaste presentationen av hypertext-knappar på www). När läsaren klickar på ordet laddas informationen på url:en http://www.citynavigator.se in i browsern. Är det fel på url:en kommer ett felmeddelande.

I nästa exempel använder vi samma teknik, men i stället för text vill vi infoga en bild som man skall trycka på för att aktivera länken. Raden kan då se ut:

Det spelar alltså ingen roll om Du använder text eller bild som länkknapp. Använder Du en bild kommer den att få en blå ram runt sig som visar att Du kan klicka på den.

Sammanfattningsvis listar jag här punktvis hur Du gör för att infoga länkar till din hemsida.

Du kontrollerar URL:en till web-information som Du vill länka till. Kopiera denna URL. Skriver Du av den kan det lätt bli fel.

Du skriver <A HREF="URL">, där URL är URL:en Du vill länka till. Klistra in URL som Du kopierade i steg 1 ("http://www.citynavigator.se" i exemplet ovan).

Du skriver texten eller referens till bilden som Du vill skall fungera som "knapp" ("Hitta rätt i Stockholm !" i exemplet ovan).

Du avslutar med </a> för att ange att

hypertext-"knappen" är klar.

Ankare
DÅ man använder attributet NAME har man möjligheten att länka till en viss plats på en sida. Det är två steg man måste följa: Man måste dels ha ett ankare och dels en länk som länkar till ankaret. Så här skapar Du ett ankare:

1. Skriv <A NAME="ankare"> framför det ord, bild eller stycke text Du vill göra till ankare. Istället för "ankare" skriver Du namnet på ankaret.

2. Skriv </A> efter ordet, bilden eller stycket text för att tala om gränserna för ankaret.

När Du sedan skall adressera detta ankare gör Du som det tidigare exemplet, fast med en liten ändring:

Klicka <A HREF= "#ankarnamn">här</A> För att se det som är längre ned.

Det är efter tecknet # som namnet på ankaret kommer. Om Du vill referera till ett ankare i ett externt dokument skriver Du in url:en precis som vid en vanlig länkning, men efter url:en lägger Du till # och namnet på ankaret. Ex:

<A HREF="http://www.citynavigator.se#ankarnamn"

Att länka till ett ankare:

Skriv <A HREF="URL#ankare"> framför det ord, bild eller stycke text Du vill göra till hypertext-knapp. Istället för "#ankare" skriver Du namnet på ankaret som Du tidigare definierat. URL kan vara tomt om Du refererar till ankare i samma dokument, annars är det en vanlig URL.

Skriv </A> efter ordet, bilden eller stycket text för att tala om gränserna för knappen.

Färger
Utan färger vore en hemsida väldigt tråkig. I HTML-programmering finns två olika sätt att ange färger. Dessa är :

Använda det färgsystem som kallas för RGB. (Red Green Blue) Systemnet bygger på att man med hjälp av 6 hexadecimala tal anger hur hög halt (vilken blandning) av de olika färgerna, röd, grön och blå man vill använda. I bilaga X har jag nedskrivet de tal som olika färger representerar.

Vill Du ha Blå, skriv Blue. Denna metod bygger på att Du helt sonika använder det engelska namnet på färgerna. Enkelt, jovisst, men nackdelen är att det i detta system inte finns många färgnyanser.

Typsnitt
Typsnitt är liksom färger en av grundstenarna för att kunna skapa varierande layout på hemsidor. De taggar jag tänk behandla i detta avsnitt är FONT och BASEFONT samt deras attribut. Skillnaden mellan BASEFONT och FONT är att den tidigare anger standardtypsnittet, medan den senare anger endast något tillfälligt. Taggen BASEFONT saknar även en sluttagg. Attributen är:

SIZE

FACE

COLOR

Size anger typsnittets storlek, kan vara antingen ett fast tal (t.ex. 4) eller ett relativt tal. (t.ex. +2) Relativa tal används endast i taggen FONT och är då relativt till storleken som är angiven i BASEFONT.

Face anger vilken sorts typsnitt det skall vara t.ex Times New Roman, Arial etc.

Color anger vilken färg som texten skall ha, hur man anger färger står i kapitlet Färger.

Ex.
<BASEFONT Face="Arial" Color="FFFFFF" Size="3">

I exemplet anger man standardtypsnittet som Arial, vit färg och med storleken 3. Ett annat exempel skulle kunna se ut så här:

Detta exempel anger att typsnittet skall öka med 2 steg fram till sluttaggen </FONT>.

Bilder
Att endast lägga in bilder på sin hemsida är inte särskilt krångligt. Det som är svårt är att veta vilken sorts bild man skall använda när samt vilka attribut som passar i olika lägen. I detta avsnitt tar jag upp taggen <IMG SRC> samt dess attribut. För att lägga in en bild i ditt HTML-dokument behöver Du endast skriva:

Bilden bild.gif kommer då att visas på den plats i dokumentet som Du placerade taggen. Nu är det dags att lägga till attribut till taggen !

Width & Height
Om Du vet höjd och vidd på bilden, och även anger detta kommer bilden att laddas fram snabbare på din sida, vilket är något som alla hemsideprogramerare strävar efter. För att ange vidd och bredd använder Du attributen Width & Height. Dessa följs av ett respektive värde som anger bredd eller höjd i antal pixlar, bildpunkter. Ett exempel på en bild som är 100 pixlar bred och 20 pixlar hög skulle kunna se ut så här:

Border
Attributet border används för att ange bredden på ramen kring bilden. Detta anges i antal pixlar. Anger man border="0" kommer det inte finnas någon ram överhuvudtagget!

Nu ett exempel hur det ser ut om man vill att bilden skall ha en 3 pixels bred ram:

ALT
Innan en bild har laddats klart, eller om det är något fel på bilden så att den inte kan laddas alls, så kan man på bildens plats se en förklaringstext. Det är mycket uppskattat av de som besöker sidan om det finns en förklaringstext vid varje bild. Denna text anger man i attributet ALT. Så här skriver man det:

VSPACE / HSPACE
VSPACE & HSPACE är attribut som används då man vill att det skall finnas mellanrum mellan bilden och dess omgivning. VSPACE är vertikalt mellanrum och HSPACE följaktligen horisontalt. Mellanrummet är angivet i pixlar. Exempel:

ALIGN
M h a attributet ALIGN kan man styra i vilken vertikal nivå man vill att bilden skall visas. Den har flera olika lägen nämligen: Top, Bottom, Middle samt AbsTop, AbsBottom & AbsMiddle. Nu implementerar jag detta på vårt exempel:

ImageMapping
En specialfunktion man ser används ganska ofta på Internet är sk. Imagemapping. Den innebär att man kan dela upp en bild i flera olika klickbara delar. Detta gör man med hjälp av koordinater och är en relativt avancerad procedur. Det finns dock flera program man kan använda som automatiskt sköter imagemappingen och därför tänker jag inte ta upp imagemapping mer ingående utan jag ville endast med denna paragraf sprida lite medvetenhet kring imagemappingens existens.

Program som gör färdig kod
Det finns några program Du kan använda för att underlätta hemsidebygget. T.ex. Microsoft Frontpage eller Hotdog. Dessa är program som via snabbknappar skapar färdig HTMLkod. Främst Microsofts Frontpage är det program som i framtiden kommer att användas vid hemsidetillverkning. Dock får det anses som farligt att endast förlita sig på dessa programs skicklighet. Allför ofta uppstår det något oförklarligt fel i programen, och behärskar Du då inte baserna i HTMLprogrammeringen blir det för dig svårt att åtgärda felen. Därför tycker jag att dessa program snarast skall ses som verktyg när din tränade hjärna blir handen som handskar dessa verktyg.

Avslutning
Nu har Du snart läst igenom hela denna HTMLkurs och jag hoppas att Du lärt dig mycket. Detta är, som jag tidigare klargjorde, en grundkurs och likt alla andra grundkurser finns det alltid flera saker som förblev oförklarade. Detta p.g.a. att Du som läsare inte skall behöva överbelastas utan helt enkelt läsa lite i taget. Min åsikt är att det som jag belyste i denna kurs är det mest nödvändiga Du behöver veta för att kunna programmera din egen hemsida. Vill Du ändå lära dig mer så har jag två förslag till dig. Förslag nummer ett är att Du köper dig ytterligare en kurs i HTML, fast då följaktligen en fortsättningskurs. Förslag nr två, vilket jag tycker är att föredra, är att Du helt enkelt surfar runt lite på internet och kikar i källkoderna på sidor Du besöker. Ser Du någon häftig funktion på en sida finns Du i källkoden alla svaren hur Du kan göra likadant. Internet är framtidens melodi, och lär Du dig att spela med redan nu är det endast din fantasi som sätter gränserna för din framgång.

[Hem] [Jag] [Bilder] [Kompisar] [Roligheter] [C₂H₅OH] [Länkar] [Nyheter]