Introducerande övningar i HTML

Introducerande övningar i HTML
Medieteknik
En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att
formatera innehållet. Har man bilder på sidan, så finns de som separata filer och i HTML-koden finns
det koder för att referera till bildfilerna. På så sätt inkluderas de i presentationen i webbläsaren.
Webbläsaren behöver alltså tolka HTML-koderna dels för att formatera texten och dels för att läsa in
andra filer.
HTML (HyperText Markup Language) är ett beskrivningsspråk som består av ett antal koder för vad
som ska presenteras och hur det ska visas upp. De koder som används kallas ibland för "taggar" (från
engelska tag = etikett). Det finns koder för att formatera text, referera till bilder, definiera länkar, etc.
Rent allmänt har man först en kod som anger var direktivet ska börja gälla och sedan en slutkod som
anger var det ska upphöra att gälla. Alla koder anges inom mindre än och större än tecken (< >).
Slutkoden inleds med ett snedstreck (/). Ett exempel är koden som används för att markera början
och slut på ett stycke (paragraph), t.ex. Detta är ett textstycke..
I vissa fall behövs inte någon slutkod, t.ex. då man vill ha en radbrytning mitt i ett stycke med koden
. Då behövs endast en kod för att markera positionen i texten.
I många fall kan man också ange olika attribut för koderna. Dessa anges då i "taggen", efter namnet,
t.ex. , för att markera att här ska bildfilen bild.jpg inkluderas.
Det finns också andra koder för speciella tecken, t.ex. å, ä och ö. Dessa koder inleds med & och
avslutas med ;. T.ex. är koden för bokstaven å lika med &aring;. Men om man i början av HTMLdokumentet
specificerar vilken teckenkodning som används för filen, så behöver man inte dessa koder.
HTML har kommit i ett antal versioner och den senast standardiserade versionen är XHTML. Man har
dock arbetat med utveckling av HTML5 ett antal år nu och de moderna webbläsarna stödjer nu en stor
del av HTML5, även om den versionen ännu inte är standardiserad. I denna laboration kommer vi att
använda oss av HTML5, men vi tar här upp de grundläggande delarna och de är i stort sett lika oavsett
vilken version av HTML som används.
1. Skapa ett HTML-dokument
Du börjar med att skapa ett HTML-dokument med den grundläggande koden för en webbsida.
Sidans titel
Min första sida
Skapa ett nytt dokument i din editor
• Dreamweaver
o Använder du Dreamweaver väljer du menykommandot File->New... I fönstret som då
dyker upp väljer du HTML i kolumnen för Page Type och i kolumnen för Layout.
I popup-menyn för DocType väljer du HTML5. Klicka sedan på knappen Create. Du får
då ett dokument för grundstrukturen för ett HTML-dokument. Om inte HTML-koden
visas klickar du på knappen Code i fönstrets övre vänstra hörn.
o Skriv in en text mellan body-taggarna enligt koden ovan.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 1

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

3. Text i dokumentet
Medieteknik
Du ska nu skriva lite mer text på din webbsida och använda koderna för stycken och radbrytning. Efter
varje punkt går du över till webbläsaren och laddar om sidan, för att studera resultatet.
Textstycken och radbrytning
• Skriv in några textstycken mellan body-taggarna, t.ex.
Text i ett eget stycke.
Text i ett annat stycke.
Ett tredje stycke.
• Lägg in en radbrytning mitt i det andra stycket, t.ex.
Text i ett annat stycke.
• Observera skillnaden mellan p-taggen och br-taggen i webbläsaren.
• Textstycken utgör hela block med en eller flera rader i webbläsaren. Man kan inte lägga
textstycken inuti varandra, så man lägger inte en p-tagg inuti en annan p-tagg. Man avslutar alltså
först föregående stycke med en sluttagg innan man påbörjar ett nytt stycke med ett nytt .
Specialtecken
• Skriv in några specialtecken med s.k. entitets-koder (&kod;) i din text.
• Koderna för svenska tecken är:
Å = &Aring; Ä = &Auml; Ö = &Ouml; å = &aring; ä = &auml; ö = &ouml;
o Egentligen behöver du inte använda dessa, eftersom du i meta-taggen angett vilken
teckenuppsättning som din fil sparas i. Då fungerar det att skriva åäö som vanligt direkt i
texten. Men prova ändå några koder och kontrollera att de skrivs som svenska tecken i
webbläsaren.
• Det finns också en del andra specialtecken som man måste skriva med koder, för att det ska bli rätt
i webbläsaren.
o Tecknet & måste skrivas som &amp;. Skriver man bara & i texten, så tror webbläsaren att
det är början på en entitet och då kan det bli fel.
o Copyright, dvs ©, skrivs som &copy;
o Fler exempel hittar du i kursboken.
4. Rubriker
Rubriker finns i sex nivåer och skrivs med taggarna h1 till h6. Det är dock ingen strukturell skillnad
mellan dem, utan de skrivs endast i olika storlekar.
• Skriv t.ex. in följande rubriker på din webbsida:
Världen
Europa
Sverige
Småland
Växjö Universitetet
• Studera skillnaden i hur de skrivs i din webbläsare.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 3

5. Avskiljare
Medieteknik
Med taggar som p, br och rubrikerna h1-h6 får man nya rader. Ibland vill man också åtskilja dem mer
med en horisontell linje. Det kan man göra med hr-taggen ("horizontal rule").
• Lägg in hr mellan några av textstyckena i din HTML-kod, t.ex.
Text i ett eget stycke.
Text i ett annat stycke.
6. Annan formatering av texten
För ytterligare formatering av texten kan man använda koder för att markera olika avsnitt.
Fetstil och kursiv stil
• Omge någon del av texten i ett textstycke med b-taggen för att markera den i fetstil (bold), t.ex.
Text i ett eget stycke.
• Gör på samma sätt någon del av texten kursiv (italic) med i-taggen, t.ex.
Text i ett eget stycke.
• Använd taggarna b och i endast för att markera delar av text i textstycken.
o Du ska inte skapa rubriker genom att omge hela texten i ett stycke med b-taggen eller itaggen.
Vill du ha en rubrik, ska du istället använda någon av taggarna h1 till h6.
o Taggarna b och i anger direkt vilken stil man vill ha. Egentligen ska man inte göra det i
HTML, utan istället använda CSS som vi kommer in på senare i kursen. Men det är
ganska vanligt att man vill markera någon liten del av texten i fetstil eller kursiv stil, så
därför finns dessa taggar också i HTML.
Text med speciell betydelse
• Andra koder ger en "semantisk" markering. Dvs istället för att ange stilen, anger man att det är en
text som ska en speciell betydelse. Exempel på detta är strong och em (emphasized). Dessa
skrivs oftast i fetstil respektive kursiv stil av webbläsaren.
o Prova t.ex. att lägga in följande i något textstycke i din fil.
en text
en text
• Fler exempel hittar du i kursboken.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 4

7. Listor
Medieteknik
I HTML kan man skapa olika typer av listor. Vi ska här titta på hur man gör en punktlista (så som
dessa övningar är skrivna) och en numrerad lista. En punktlista (unordered list) skapas med ul-taggen
och en numrerad lista (ordered list) skapas med ol-taggen. Varje rad (list item) i listan skapas med litaggen.
Punktlista
• Skapa en punktlista med följande kod, som du skriver in efter ett textstycke i din HTML-kod.
Småland
Blekinge
Skåne
Halland
Numrerad lista
• Ändra listan till en numrerad lista genom att byta ut ul-taggen till en ol-tagg (både start- och
sluttagg).
Småland
Blekinge
Skåne
Halland
• Punkterna byts då till siffror.
• Lägg till ett attribut i starttaggen för ol, för att ändra siffrorna till en annan uppräkning.
• Raderna markeras då med bokstäver.
• Andra värden som man kan ha istället för a är A, i, I eller 1. Det sista ger siffror och är detsamma
som man får utan type-attributet.
Underlistor
• Det går också att lägga en lista inuti en lista, genom att lägga in en ny ul- eller ol-lista i en li-tagg.
Prova följande:
Småland
Jönköping
Kalmar
Växjö
Blekinge
Skåne
Halland
• Observera att det inte står efter Småland. Taggen avslutas istället på raden efter den lista
som lagts in där.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 5

8. Tabeller
Medieteknik
En tabell skapas på samma sätt som en lista, fast med en table-tagg som omger hela tabellen. Sedan
har man en tr-tagg för varje rad (table row) och en td-tagg för varje cell i raden (table data).
• Skriv in följande kod i ditt HTML-dokument:
Stad
Antal invånare
Kalmar
36.000
Växjö
60.000
Använd tabeller till data som ska spaltas upp
• Tabeller i HTML använder man för data som ska räknas upp som t.ex. ovanstående tabell eller ett
schema.
• Man kan också skapa en tabell inuti en tabell, men det bör undvikas, eftersom koden blir väldigt
rörig och omfattande.
• Förr var det vanligt att man använde en tabell för att skapa en layout för en sida. Man skapade då
en stor tabell som täckte hela dokumentet och fick rutor där man placerade logo, navigeringsmeny,
Sidans innehåll, etc. Det ska man dock också undvika, eftersom sidans kod då blir komplex och
svårtillgänglig för sökrobotar och personer med speciella webbläsare, t.ex. för synskadade. En
layout skapar man istället på annat sätt och det kommer vi in på i samband med att vi studerar
CSS.
9. Bilder
Nu ska du också ta med några bilder på din webbsida. Bilderna ligger lagrade som separata filer, så i
HTML-koden lägger man in en img-tagg (image) där man vill att bilden ska visas. I img-taggen har
man ett attribut kallat src (source), där man anger vilken bildfil som ska användas.
På webbsidan för denna laboration kan du ladda ner en zip-fil med ett par bilder, så om du inte redan
gjort det, laddar du ner den nu. Efter uppackning av zip-filen får du en mapp kallad bilder. Lägg den
mappen på samma plats som du sparat ditt HTML-dokument.
Inkludera en bild
• Lägg in följande kod någonstans i innehållet på din webbsida:
En bild mitt i texten.
o Bilden hamnar då på samma rad som texten.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 6

• Ändra koden till:
Medieteknik
o Bilden hamnar då i ett eget textstycke och därmed en egen rad.
o Vill man även justera bilden så att den t.ex. centreras på raden eller läggs till vänster om
texten, så måste man använda CSS, så det väntar vi med tills vi kommer in på det i kursen.
Alternativ text
• I en img-tagg finns det ytterligare ett obligatoriskt attribut och det är alt, där man anger en
alternativ text som visas då bilden inte kan visas. Detta är viktigt för t.ex. synskadade och
sökrobotar, som inte kan se bilden. Lägg till ett alt-attribut i img-taggen:
Ändra storlek på en bild
• Lägg in följande kod i din HTML-fil:
• Bilden är 800x600 pixlar, men det går att ändra storlek med attributen width och height. Lägg till
detta i din img-tagg:
• Storleken kan alltså lätt ändras. Men vill man ha en liten bild på sidan, så är det bäst att först
förminska den i ett bildredigeringsprogram. Man kan då påverka kvalitén på bilden och bildfilen
blir mindre.
Bild på en annan server
I ovanstående img-taggar användes en s.k. relativ adress till bildfilerna. De ligger på samma dator som
HTML-filen och i adressen utgår referenserna från HTML-dokumentets placering. Man kan också
referera till bilder på en annan server med en fullständig URL.
• Lägg in följande kod för att ta in en annan bild:
Slut
En bild på en egen rad.
Mer text.
Vi har nu introducerat grunderna i HTML. Öva nu på egen hand med att experimentera med de koder
som tagits upp här.
I nästa laboration kommer vi att ta upp mer om HTML och bl.a. titta på hur man skapar länkar.
2012-08-22 – Rune Körnefors (rune.kornefors@lnu.se) 7