Introducerande övningar i HTML

Medieteknik
• Komodo Edit
o Använder du Komodo Edit väljer du menykommandot File->New->File from Template...
I kolumnen Categories väljer du Web och sedan i kolumnen Template väljer du HTML5.
Klicka sedan på knappen Open. Du får då ett nytt dokument med HTML-kod.
o Kontrollera att filen sparas i teckenuppsättningen UTF-8, genom att ta fram programmets
inställningar (Preferences). Där klickar du på Internationalization. Mitt i fönstret finns en
popupmeny med HTML5 och till höger om den en annan meny för teckenuppsättningen.
Välj UTF-8 där och klicka sedan på OK.
o I HTML-koden lägger du till följande kod under raden med koden :
o Skriv också in en text mellan body-taggarna enligt koden ovan.
• Vanlig texteditor
o Använder du en vanlig texteditor skapar du ett nytt textdokument och skriver själv in
ovanstående kod.
o Kontrollera programmets inställningar, för att se till att filen sparas i UTF-8. I en del
editorer görs detta i inställningsfönstret, medan det i en del andra väljs först då man sparar
filen.
Spara ditt dokument på din hårddisk
• Spara ditt HTML-dokument i övningsmappen som du laddat ner till laborationen, så att ditt
dokument hamnar i samma mapp som dokumentet sida2.htm.
• Ge ditt HTML-dokumentet med något lämpligt namn, t.ex. webbsida.htm
o Som regel bör man endast använda bokstäver ur det engelska alfabetet i filnamnen. Det
går också bra att använda siffror och _, men filnamnen bör börja med en bokstav. Filerna
bör dessutom sluta med .htm eller .html med små bokstäver. Blanktecken eller andra
tecken bör inte användas i filnamnen. Följer du dessa regler brukar det inte bli några
problem då du flyttar över filerna till en server, som kanske har ett annat operativsystem
(och annat sätt att koda tecken som t.ex. åäö) än det du själv använder.
2. Titta på sidan i en webbläsare
För att studera resultatet av din HTML-kodning öppnar du den i en webbläsare (t.ex. Firefox).
Öppna sidan i en webbläsare
• Öppna en webbläsare. Välj Öppna fil i Arkiv-menyn och peka ut ditt nya dokument.
• Observera att det endast är den text som du skrev mellan body-taggarna som visas i fönstret.
o Om du använde åäö kan det ha blivit några andra tecken, om inte filen är sparad i den
teckenuppsättning som anges i meta-taggen. Kontrollera i så fall inställningarna i din
editor, så att du verkligen sparar i UTF-8. Använder du en vanlig texteditor, så kanske du
måste välja UTF-8, då du sparar filen.
• Observera också att den text som står i title-taggen visas i webbläsarfönstrets titelrad.
o Gå över till editorn och ändra texten i title-taggen till t.ex. Pelles sida, där du byter ut Pelle
mot ditt eget namn. Spara sedan filen och gå över till webbläsaren igen. Där klickar du på
"Ladda om"-knappen, så laddas den nya sidan in. Kontrollera att texten i fönstrets titelrad
ändras.
Dokumentet öppet både i editorn och webbläsaren
• Behåll nu sidan öppen både i din editor och i webbläsaren, så kan du lätt växla mellan dem i de
följande övningarna. När du gör förändringar i ditt HTML-dokument kan du titta på dessa i din
webbläsare genom att trycka på "Ladda om"-knappen (i de flesta webbläsare är det en böjd pil
intill adressfältet, för att uppdatera sidan).
o Har du en stor skärm, så kan du ändra fönsterstorlekarna, så att du lägger editorns fönster
och webbläsarens fönster intill varandra. Då kan du snabbt växla mellan dem.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 2