Uppdated 1999-04-15

Inledning till HTML-kurs

HTML är en förkortning av Hyper Text Markup Language och är egentligen inte ett programmeringsspråk utan en uppsättning element.
Varje textutseende och layout har sitt eget element eller 'tag' som man ibland kallar det.

Taggen (element) för t ex fetstil är <B> (bold). All text som står efter taggen får det utseende som elementet ger. </B> betyder "slut på fetstil". Alla HTML-element är omgivna av <>.
De flesta koder fungerar på samma sätt. En start-tag och en stängnings-tag. Start-taggen är omgiven av <> och slutkoden är omgiven av </>,
Elementet för kursiv stil är <I> (italics) och </I> är slutkoden 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 jag oftast att ha ett elemenet per rad. Det är lättare för en ovan att se vad som händer då.
Nu till kodningen, om det är så att ni inte har en HTML-editor (finns ett antal på Internet). använder själv Homesite, som är en shareware.
Tycker personligen att den är en av de bättre som jag har tittat på. En annan som också är bra är Einstein den är Svensk och har en bra hjälp.Det kan i bland vara lite svårt att förstå vad som menas på Engelska (om man inte är riktigt duktig).
Tycker därimot inte om FronPage97/98 (och det är min personliga åsikt) eftersom den lusar ner så väldigt med kod som man inte vet vad de skall vara till, tycker att det är bra att kunna förstå vad det är som koden gör.

Men det går lika bra med en vanlig texteditor,så starta den texteditor eller ordbehandlare du vill använda för att skriva HTML-kod och skriv följande sex rader:

Som bilderna ovan visar är ett HTML-dokument uppdelat i två delar, HEAD (huvud) och BODY (kropp). Denna uppdelning för att din Webläsare (Browser) skall veta vad som är information för Browsen och vad som skall presenteras, alltså informationen den del som är 'osynlig' ligger mellan HEAD-elementen och den del som är 'synlig' ligger mellan BODY-elementen.

Dessa rader bör alltid finnas med i dina HTML-dokument! Det spelar ingen roll om man skriver HTML-taggar med gemener eller versaler.
Jag kommer att använda mig av gemener vid HTML-koden för att förtydliga att det just är kod.
Nu ska vi gå igenom vad ovanstående rader betyder.

Upp

<HTML>

<HTML> talar om för browsen 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 Browsen att visa sidan på samma sätt som den ser ut i texteditorn och det kan bli rätt tröttsamt att läsa.

Upp

<HEAD>

Innanför <HEAD>-taggen talar man t ex om vad sidan heter. Denna taggen är den tag som man inte behöver ha med i sitt dokument, sidan kommer inte att presenteras felaktigt för de.
Men man bör nog ha med, för det är den som Browsen läser in först och kan användas till att

Ge information om dokumentet, som man inte vill att Browsen skall presentera.
Separera dokumentet i två delar.
Starta vissa rutiner innan resten av dokumentet laddas.

I och med att man delar upp sidan i en osynlig och en synlig del, kan man ge information till sökmotorer och besökare.
Man kan även starta vissa funktioner, <STYLE> är ett exempel på hur man skapar en stilmall för dokumentet. Med <LINK> anropar man extern stilmall, <SCRIPT> , <APPLET> och <META> är några fler fuktoiner som startas är ifrån.
Utvecklingen på vad man kan göra i <HEAD>-taggen ändras hela tiden och nya saker kommer till så det är svårt att hänga med, nöjer mig med dessa funktionerna så länge.

Upp

<TITLE>

Dokumentets titel ur ett vidare perspektiv, det enda obligatoriska elementet i hela HTML-dokumentet. Sidans titel hjälper sökmotorerna att katalogisera och indexera sidan så andra lättare kan hitta den.
Det du skriver mellan <TITLE>-taggen är det som står längst upp på de fönster som Browsen öppnas för att presentera sidan när man tittar på din sida.
Titeln är också den text som blir namnet på det bokmärke andra lägger till din sida, bör därför vara kort och informativ ( ca: 30 tecken).

Upp

<BODY>

<BODY>-taggen anger var det du visar på sidan börjar och slutar. Det är mellan de koderna som det mesta av innehållet i en hemsida står. Upp

<META>

<META> är den taggen som sökrobortarna använder sig av för att indexera och lägga upp i sin databas, så när någon söker på ett ord eller en kombination av ord, och din <META>-tag innehåller ett ord som sökaren använder sig av så kommer även din sida att presenteras som en träff och listas upp.
<META>-taggen kan ha olika attribut och varje attribut kan ha olika värden. Jag kommer att ha med de vanliga attribut, sedan finns det special attribut som används unikt på vissa sajter (platser). NAME och CONTENT är de vanligaste attributen i META-taggen.

<META NAME="keywords" CONTENT="ord,ord,ord">
Nu har vi gett attributet NAME ett värde "keyword" samt attributet CONTENT också ett värde. För sökmotorerna är "keyword" en funktion som aktiveras och de som följer där efter är de ord som sökmotorn kommer att hitta och indexsera sidan med. Du måste skilja orden med komma (,) och inget mellanrum.
Kan vara ide att inte använda sig av samma ord mer än tre gånger i följd.
Tips!!
Vissa sökmotorer rangordar efter hur många gånger ett ord kommer upp efter CONTENT, kan därför vara skäl att upprepa vissa ord. Men andra sökmotorer tolka mer än tre som upprepning och försök till spamming (reklam) och kanske struntar i att indexsera sidan. Tips!!

<META NAME="description" CONTENT=" en beskrivning av vad sidan innehåller">
Den beskrivning som man skriver in här kommer att presenteras med sidas URL, vid sökmotorns presentation av sidan.

<META NAME="generator" CONTENT="notpadde">
Talar vilket program sidan är skapad med.

<META NAME="author" CONTENT="Anders Blomgren" lang="sw">
Talar om vem som skapat sida. Röststyrda Browsers får hjälp här av lang-attributet, liksom översättningsprogrammen att hitta rätt språkligt uttal. "sw" står för Swedish (Svenska). Sökmotorerna får även hjälp här om någon letar information på ett visst språk. (Kommer att bli mycket användbart i framtiden ).

<MET NAME="copyright" CONTENT="Copyright by Anders Blomgren 1999">
Anger att sidan är coyright skyddad. Talar om att ingen får kopiera texten utan att fråga mig först.

<META NAME="expires" CONTENT="12 july 2020">
Används av den som vill att en sida skall försvinna ur sökmotorenas index lister, och ur datorns cache vid en viss datum. Vet inte ur långt i förväg man kan bestämma detta, kommandot används framförallt av nyhetssajter.

<META NAME="robots" CONTENT="noindex,nofollow">
Anger för sökmotorerna att sidan värken skall indexeras eller leta efter länkar i. Andra möjliga värden är all, none, index, follow.

Nytt META-attribut (HTTP-EQUIV)

<META HTTP-EQUIV ="description" CONTENT="Anders sajt för HTML-snickeri">
Fungerar på samman sätt som NAME="description", men HTTP-EQUIV har många fler användarområden. Vet inte så mycket om dessa, så kommer inte att snurra in mig i dessa nu.

<META HTTP-EQUIV="refresh" CONTENT="5;URL=sidans.nya.URL">
Är bra att använda om man vill styra om trafiken från sidan, t ex om man har flyttat på sidan till en ny adress.
Detta funkar inte alltid så glöm inte att lägga in en klickbar länk till den nya adressen. Siffran 5 i CONTENT är de antal sekunder som den gamla adressen skall visa innan den nya adressen laddas in.
Går bra att ange lägre eller högre, ange ett högre och låt besökaren se ett meddelande om att sidan är flyttad. Några sidor angående HEAD-element som kan var värda att besöka, det finns hur mycket som helst om detta element.

Några sidor angående HEAD-element som kan var värda att besöka, det finns hur mycket som helst om detta element.
WebDeveloper:
Yahoos META-sidor:
W3

Upp

Nu vidare med kodningen

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
VÄLKOMMEN TILL MIN HEMSIDA! Hej det här är mitt första försök att göra en egen hemsida. Bla, bla skriv vad ni vill och hur mycket ni vill. Det är eran egna fantasi som sätter gränsen inte någon annan.
</BODY>
</HTML>
Se inte så rolig eller trevlig ut att läsa, så varför inte fixa till detta med desamma!!!

<HTML>
<HEAD>
<TITLE>Min hemsida</TITLE>
</HEAD>
<BODY>
<div align="center"><H1>VÄLKOMMEN TILL MIN HEMSIDA!</div><H1> Centrering av rubiken samt är satt till rubrik 1

VÄLKOMMEN TILL MIN HEMSIDA!

Hej det här är mitt första försök att göra en egen hemsida.

Bla, bla skriv vad ni vill och hur mycket ni vill. Det är eran egna fantasi som sätter gränsen inte någon annan.

HE M S I DA

</BODY>
</HTML>
Mixar här med lite färgsättning av enstaka ord, går bra att göra med enstaka tecken också, samt med blinkande ord
Kommer att redovisa dessa taggar längre fram.
Nu är det äntligen dags att titta hur sidan ser ut! Spara dokumentet under namnet forsta.html.
När du sparar dokumentet är det viktigt att du gör 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. Filändelse "htm" betyder att det är ett HTML-dokument. Ett HTML-dokument måste ha filändelse "htm" eller "html". Spelar ingen roll vilken filändelse du använder.
Rätt så tråkigt resultat eller vad tycker du? Men kul och inte svårt. Nu är det dags att sätta lite färg på tillvaron. (mer kodning)

| upp | startsidan | nästa |