:: HTML - Kodspråket #1 ::
:: Första hemsidan! ::
Filformatet
När du skriver din kod i Anteckningar sparas filen vanligtvis som
en .txt fil.
För att kunna öppna sidan i en webbläsare måste den vara sparad
i antingen .html eller .htm format!
När du ska spara sidan, välj "Spara som..." och sen alla filtyper,
och spara sidan som "namn.html".
Taggarnas attributer
För att i HTML skapa ett nytt stycke, används följande syntax:
<p>
Texten i stycket.
</p>
När p används behövs inget annat än just ett p
inom taggarna. Då berättar dokumentet för webbläsaren att
ett nytt stycke ska initieras.
I många andra taggar behövs mer än ett ord eller en bokstav
för att de ska fylla någon funktion. Exempel:
<font color="#000000" size="2" face="verdana">
Det här är text med färgkod 000000, storlek två skrivet med verdana!
</font>
De vanligaste, och viktigaste, listas nedan.
- <body> - allmäna inställningar för hela dokumentet
- link - anger färg för länkar (t.ex. #000000 som betyder svart)
- text - anger textfärg (t.ex. #000000 som betyder svart)
- bgcolor - anger bakgrundsfärg
- <font> - textformatering
- color - anger färg i hexadecimal kod (t.ex. #000000 som betyder svart)
- size - anger storlek (t.ex 2)
- face - anger typsnitt (t.ex. times new roman eller verdana)
- <img> - infogar bild
- href - anger sökväg för bild (t.ex. "bilder/bild.gif" där "bilder" är mappen där bilden ligger)
- height - anger bildens höjd i pixlar (t.ex. 250)
- width - anger bildens bredd i pixlar (t.ex. 250)
- border - anger hur tjock ram bilden ska ha i pixlar (t.ex. 0)
- alt - anger en sträng av text som visas när musen hålls över bilden och när den inte kan visas
- align - anger vilken position bilden ska ha på sidan (left eller right)
- <a> - skapar ankare (hyperlänk, förkortas länk)
- href - anger sökväg för länk (t.ex. "sida.html" då HTML-dokumentet ligger i samma mapp)
- title - anger en text som visas när musen hålls över länken
- target - anger var länken ska öppnas (t.ex. _blank, som betyder att länken öppnas i nytt fönster)
Syntax för länkar
<a
href="mapp/filnamn.html"
target="_blank" title="Titel!"
name="link1">
Det här blir själva länken. Alla attributer behöver givetvis inte användas!
</a>
Den första blåa delen i koden definierar ett ankare.
HTML-dokumentet säger alltså till browsern att det här börjar en
länk. Den andra blåa delen säger till browser att länken slutar där.
Den gula delen beskriver för browsern var målet som länken siktar på
finns, alltså var någonstans HTML-filen vi länkar till ligger.
I det här fallet låtsas vi att det finns en fil som heter "filnamn.html" i
en mapp som heter "mapp". Ifall filen finns en mapp uppåt i trädstrukturen
av mappar, skriver man "../filnamn.html".
Om filen ligger i samma mapp som dokumentet där länken finns, räcker det med
att skriva filnamnet (filnamn.html).
För att länka till en extern hemsida skriver man helt enkelt
href="http://www.hemsida.com".
I området av rött anges hur det länkade dokumentet ska öppnas - i en frame,
i samma fönster eller i ett eget fönster. _blank, som exemplet är, öppnar
dokumentet i ett nytt fönster. _self öppnar länken i samma fönster, men det
behöver man inte egentligen ange då det är standard. Man kan, med andra ord,
skippa att använda "target" alls om man önskar att dokumentet ska öppnas i
samma fönster.
Den gröna "title" anger vad det ska stå i en liten ruta som dyker upp när man
håller muspekaren över länken.
"name", färgad i lila, ger länken ett namn som gör länken till ett så kallat
"bokmärke". Det används för att i t.ex. långa texter kunna göra avskiljare, så
att man med ett länkklick kan hoppa nedåt i texten till respektive bokmärke.
Man länkar alltså till en annan del av samma HTML-dokument.
Notera att vi i vår guide använder oss av just bokmärken, när man i listan väljer
vilken del av guiden man vill besöka.
Första sidan
Det är dags att skapa din första hemsida!
Sidan skall ha bakgrundsfärg, länkar som öppnas i nytt fönster, en bild och text.
Vi har tidigare talat om attribut till taggarna.
I rutan nedan står ett kodexempel på en enkel html-sida.
Studera gärna koden och undersök attributen och uppbyggnaden!
Se även denna kod i webbläsaren, här!
OBS!!
Det är viktigt att du övar på att faktiskt skriva egna hemsidor
under den här kursens gång. Om du inte försöker, kommer du inte
heller att lära dig. Om du vill ha feedback, eller bara hjälp, går det
bra att kontakta oss när du vill. :)
Nästa sida >>