Jonas Webresurs: Mina kurser

Undervisningsmaterial
Webbdesignövning 2

Den här övningen går ut på att du skall lära dig HTML och att koda för hand. Vi utgår ifrån ett layoutprogram och tittar på den kod programmet skapar.

Du kan läsa sidorna om HTML om du känner dig osäker: Läs mer >

Den här övningen ligger på följande sida:

www.jonasweb.nu/utbildning/kurser/webbdesign_1u.html

Gå ner en bit på sidan och klicka på "HTML-övningar".

Ta god tid på dig! Detta ser svårt ut i början, men går ganska lätt att lära sig!

Vad du skall kunna när du är klar med övningarna

Känna till olika visningslägen i GoLive.
Veta vad ett HTML-element är.
Känna till vad HTML, HEAD och BODY är och vad de används till.
Veta hur man ändrar dokumentets bakgrundsfärg, länkarnas färger och textfärgen.
Känna till skillnaden mellan P och BR.
Veta vad TABLE, TR, TD är, samt några attribut som hör till tabeller, t.ex för bakgrundsfärg, textjustering, bredd och kantlinje.
Veta hur koden för en länk ser ut.
Veta hur koden för en bild ser ut.
Kunna felsöka kod för att hitta enkla fel.

Övning 1

Starta GoLive och klicka på fliken Source, som bilden visar

- GoLive har skapat en hel del kod. Försök lista ur vad den betyder! Här är facit:

<html>
talar om att en hemsida skall skapas i webbläsaren

<head>
här börjar sidans dolda information!

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
"meta" är information till söktjänster, till webbläsaren och liknande. Dessa kan vara bra att ha sett, men du behöver inte kunna förstå dem. Den översta säger att det är en hemsida med västerländskt, Windows-baserat teckensnitt. Den undre att sidan är gjord i Adobe GoLive 5.

Tips!
Du hittar fler META-element i snabbkursen!

<title>Welcome to Adobe GoLive 5</title>
sidans titel måste alltid finnas med. Denna står sedan längst upp på sidan när den öppnas si webbläsaren.

</head>
här slutar huvudet - den dolda informationen.

<body bgcolor="#ffffff">
här börjar den information som skall visas i webbläsaren. Attributet "bgcolor" säger att det skall vara en viss färg och "#FFFFFF" säger att det skall vara vit bakgrundsfärg. Stora och små bokstäver spelar ingen roll!

<p></p>
här är ett stycke, där P står för engelskans "paragraph". Avslutningen behöver sällan finnas med, men GoLive lägger in den ändå.

</body>
</html>
dessa avslutar hemsidan.

Övning 2

- Fortsätt på samma dokument i GoLive

- Klicka på fliken "Layout" för att gå tillbaka till layoutläget. Skriv in nånting med svenska tecken. Gå sedan tillbaka till HTML-koden. Ser du att tecknen översatts?

å = å	Dessa översättningar sker för att webbläsaren skall kunna visa rätt tecken på skärmen. Windows å, ä och ö skiljer sig t.ex från de i en Mac och de som saknar ett svenskt operativsystem kan då ändå få upp rätt tecken på skärmen.
ä = ä
ö = ö

Klicka på fliken Source Dra in objektet för en bild i layoutläget. Det ser ut som ett frågetecken, som bilden visar.

Kolla sedan på koden. Elementet heter IMG och attributen används för att ställa in bredden, höjden och berätta var filen finns (där står det nu "Empty Reference" eftersom du inte lagt in nån bild ännu).

Observera att bilder som läggs in på en hemsida inte sparas med hemsidan, utan är egna filer!

Övning 3

- Lägg på samma sätt in en tabell och studera koden! Pröva att ändra vissa värden för att se vad som händer, t.ex border till 10 och cellspacing till 20.

Övning 4

- Testa att lägga in en bild och andra objekt och försök förstå hur koden förändras. Ändra även bakgrundsfärgen, textfärgen, lägg in text och ändra den, lägg in en punktlista, o.s.v.

Övning 5

- Lämna nu GoLive för en stund. Vi skall nu se hur man kan skapa en hemsida genom att skriva koden för hand.

- Öppna ett nytt textdokument i Anteckningar eller WordPad (Windows) eller Simple Text (Mac). Skriv in följande kod:

<html>
<title>En hemsida, typ!</title>
<body bgcolor="#FFCC99" text="#990000" link="#cc0000" vlink="#ff6699" alink="#ff6699">
<center>
<h1>Hej!</h1>
<p><font face="Verdana"><b>Detta är en handkodad sida.</b></font>
</ center >
</body>
</html>

- Välja att spara dokumentet som index.html, som bilden visar.

- Spara filen i en mapp på datorn. Döp mappen till "Hemsida" eller liknande.

- Se till så att du väljer alternativet "textdokument". Detta för att förhindra att filen får annat format, som webbläsaren inte kan läsa.

- Öppna sedan sidan i Internet Explorer (eller annan webbläsare) och se hur den ser ut.

Övning 6

- I den här övningen skall du hitta 13 fel i koden nedan. Du hittar facit på Jonas Webresurs, på följande adress: www.jonasweb.nu/utbildning/kurser/kursexempel/webbovning_1_facit.html

...men försök först själv!!

<htlm>

<head>
<tilte>Sidans rubrik<title>
</head>

<TD><a href="bild.jpg">Detta är en bild</a></td>
table/>
<body>
</html>

Övning 7

Besvara följande frågor. Du får använda dig av det material du fått på papper och på webben. Lycka till!

Du hittar facit på Jonas Webresurs, på följande adress: www.jonasweb.nu/utbildning/kurser/kursexempel/webbovning_1_facit.html

Fråga 1: Varför använder man HTML för webbsidor? (1 poäng)

Fråga 2: Till vad använder man <P> och när använder man <BR>? (2)

Fråga 3: Var syns titeln på sidan när den öppnas i webbläsaren? (1)

Fråga 4: Med vilket element lägger man in en bild? Varför är det så viktigt att ange rätt sökvägar för bilder? (2)

Fråga 5: Öppna ett nytt dokument i en texteditor, t.ex Anteckningar eller SimpleText. Gör en hemsida som innehåller följande. Försök skriva koden för hand.

En lämplig titel på sidan. (2 poäng)
Uppgifter om författare, copyright, bra nyckelord och en lämplig beskrivning av sidan. (5 p.)
Översättningar av svenska tecken. (4 p.)
En tabell med två rader och två kolumner. Gör översta raden gul och nedersta blå. Högra kolumnen skall vara 500 pixlar bred. (6 p.)
Justera innehållet i varje tabellcell längst upp. (2 p.)
Lägg in en bild i översta vänstra cellen. Bilden heter Nalle.jpg och ligger i en tänkt mapp som heter Bilder. Bilden är 230 pixlar bred och 380 pixlar hög. (5 p.)
Lägg in en rubrik i översta högra cellen och gör den med ganska stor stil. Gör den också fet och grön. (4 p.)
Lägg in en länk som leder till Hotmail och en som leder till Aftonbladet i någon tabellcell. Färga också tabellcellen röd och se till så att texten syns väl. (6 p.)
Skriv in ditt namn någonstans på sidan och ändra teckensnittet till Impact och storlek +4. (2 p.)

Övning 8

- I den här övningen skall du skapa koden utifrån vad du ser på sidan. Du hittar en sida du skall försöka härma här: www.jonasweb.nu/html/composer_x.html

Titta på sidan och försök sedan skriva sådan kod som du tror gör en likadan sida. Det är ingen idé att du kolla källkoden på sidan, eftersom koden skapats i Netscapes Composer och innehåller jättemycket onödig kod!

Skriv koden på datorn. Bilden hämtar du från exemplet på nätet:

Facit finns på följande adress: www.jonasweb.nu/utbildning/kurser/kursexempel/webbovning_1_facit.html