Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Transkript

1 Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se

2 1. Skapa ett nytt HTML-dokument I denna laboration ska du skapa tre sidor, som ska innehålla svar på var sin fråga. Frågorna kommer längre fram i detta dokument. Sidorna ska ligga i mappen u1, som du skapade i laboration 1. Sidorna ska länkas samman med navigeringslänkar, så att man enkelt kan gå fram och tillbaks mellan dem. Börja med att skapa ett nytt HTML-dokument för en sida, som du sedan gör klart enligt anvisningar i kommande övningar. Då den sidan är klar kan du använda den som mall för de övriga sidorna. Starta webbeditorn och skapa ett nytt dokument på samma sätt som i laboration 2. Ange lämplig titel i title-elementet. Sidan ska användas för Fråga A. Spara filen i mappen u1. Namnge filen till vad du vill, men tänk på vilka tecken du ska undvika och vilka som bör användas. Se råd i föreläsningen intro-3 Webbadresser i Föreläsning F1. A

3 2. Strukturera sidan med strukturelement Skapa en struktur för sidans kod, där du delar in i sidhuvud, navigering, huvudinnehåll och sidfot. Använd HTML5-elementen header, nav, main och footer för att göra indelningen. A I header lägger du in en rubrik. Sidan ska användas för Fråga A, så det kan vara en lämplig rubrik att börja med. Du kan sedan ändra den och eventuellt komplettera med en underrubrik. I nav lägger du in en lista med tre länkar för de olika sidorna. Det är alltså för sidorna för Fråga A, Fråga B och Fråga C. I main ska du sedan lägga in frågan och ditt svar på den. Det kommer i nästa övning. I footer lägger du in någon lämplig information. T.ex. ditt namn och datum för när du skapat sidan. Inuti dessa element får du sedan använda flera element för ytterligare strukturering. T.ex. section eller div för gruppering, samt element för blockquote, listor, fet eller kursiv stil, m.m. Dvs element som används i laboration 2 samt i exempel i föreläsningar och kursboken om HTML.

4 3. Fråga A Datakommunikation på webben Denna fråga handlar om protokoll i datakommunikation. Lägg in både nedanstående delfrågor och ditt svar i main-elementet på din första sida. Inom det elementet använder du valfria HTML-element för att strukturera. A Delfrågor A1: Beskriv allmänt vad ett protokoll är i datakommunikation. A2: I kommunikation på webben används bl.a. protokollen HTTP, TCP och IP. Beskriv vilken funktion dessa har. Observera att alla frågor ska besvaras av dig med dina ord. Du får söka information i föreläsningarna, kursböckerna och andra webbsidor, men du får naturligtvis inte fråga någon annan person och be dem besvara frågorna. Detta gäller samtliga frågor Fråga A till C. Omfattning på ditt svar ska vara ett par meningar för A1 och ett par meningar per protokoll i A2. Total text motsvarande knappt en halv A4-sida.

5 4. Validera HTML-koden Då sidan för Fråga A är klar, validerar du HTML-koden. Använd validatorn på på samma sätt som i laboration 2. A Rätta eventuella fel.

6 5. Sidor för de övriga frågorna Nu ska du skapa sidor för de två övriga frågorna, Fråga B och Fråga C. I operativsystemet gör du två kopior av filen för ditt HTML-dokument och ger dem lämpliga namn för de två kommande frågorna. Det ska naturligtvis vara de filnamn du la in i navigeringslänkarna på sidan i övning 2, så att navigeringen mellan sidorna fungerar. A B C Öppna också filerna i webbeditorn och uppdatera texten i title-elementet och i header, så att det stämmer med sidornas innehåll.

7 6. Fråga B Några HTML-element Denna fråga handlar om några element i HTML. Samtidigt ska du också skapa en tabell med HTML, för att ge svaret i tabellform. B Lägg in både nedanstående fråga och ditt svar i main-elementet på din andra sida. Inom det elementet lägger du in HTML-taggar för en tabell för ditt svar. Delfrågor Skapa en tabell där du har kolumner för elementens namn, kort beskrivning och exempel på attribut. Den korta beskrivningen behöver endast vara några ord, där du anger vad elementet är till för. Ange tre exempel på attribut för varje element. Attributen ska vara de som finns i HTML5 och är specifika för elementet. Då du tar fram underlag för tabellen, bör du också läsa vad attributen är till för (så att du lär dig dem), men i tabellen anger du endast attributens namn. Ta med följande element i tabellen: a img ol td Obs! Tips: Ta fram elementen i referenslistan på W3Schools webbplats, för att få fram underlag till ditt svar. Där kan du se vilka attribut som finns och vilka som inte längre ingår i HTML5. De sistnämnda ska du inte ta med i din lista. Obs! Tabellen kan nu inte formateras, så du får inga kantlinjer. Detta görs med CSS längre fram i kursen.

8 7. Fråga C Analys av navigering på en webbplats Du ska nu analysera och beskriva navigeringen på en webbplats. Välj en av följande webbplatser: C Lägg in både nedanstående delfrågor och ditt svar i main-elementet på din tredje sida. Inom det elementet använder du valfria HTML-element för att strukturera. Delfrågor C1: Ange namn och url för den webbplats du analyserat. C2: Hur sker global respektive lokal navigering? C3: Hur kommer man tillbaks till ingångssidan? C4: Vilket stöd finns det för användaren i navigeringen, för att se var man är och för att hitta rätt? Total omfattning på ditt svar ska vara text motsvarande en halv till en A4-sida.

9 8. Validera HTML-koden Validera nu också HTML-koden för sida B och C. Använd validatorn på på samma sätt som då du validerade sida A i övning 4. B C Rätta eventuella fel.

10 9. Länk från portfolions ingångssida På ingångssidan för din webbportfolio ska du ha en länk till sidan för Fråga A. Öppna sidan index.htm, dvs ingångssidan som du skapade i laboration 2, i din webbeditor. Lägg in en länk till webbplatsen för frågorna. Länken ska gå till den första sidan, den för Fråga A. Använd en relativ adress i länken. webbsidor (Web Publishing) index.htm dold Öppna i webbläsaren och testa att det fungerar. Från ingångssidan ska du alltså kunna gå till sidan för Fråga A. På sidan för frågorna, ska du kunna gå mellan sidorna m.h.a. länkarna i navigeringsmenyn. Det behöver inte finnas någon länk tillbaks till ingångssidan, men om du vill lägga in en sådan, får du naturligtvis göra det. u1 A B C

11 10. Publicera sidorna Publicera dina sidor i Web Publishing i FirstClass. Använd antingen FirstClass klientprogram eller ett FTP-program. Du gör på samma sätt som i laboration 1 och 2. Lägg upp filerna för de nya sidorna i mappen u1. Byt ut index.htm i Web Publishing. Öppna din webbportfolio i webbläsaren på adressen där anvid är ditt eget användarid och testa att alla länkar fungerar och att sidorna ser ut som de ska. Då du går in på sidorna för frågorna, ska det dyka upp en inloggningsruta för FirstClass. Om det inte gör det, kan det bero på att du redan var inloggad. Prova då att avsluta webbläsaren (för att loggas ut) och testa sedan igen.

12 Uppgift U1 Då du nu genomfört laboration 1 till 3 ska uppgift 1 vara klar. Men för att försäkra dig om att du fått med allt, går du igenom alla krav och kontrollerar dem mot dina sidor. Kraven finns dels i de allmänna kraven på uppgiftssidan och dels i kraven för respektive del på sidorna för laboration 1 till 3. Obs! Glöm inte bort att också skicka in ett meddelande i mappen för U1 i kursmappen i FirstClass, så vi vet att du redovisat uppgiften. 1ME321 h17 U1 Se även illustration av hur du ska redovisa i följande dokument: