Labora&on 3 HTML och struktur övningar/uppgi:er

Transkript

1 Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se

2 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som ska innehålla svar på var sin fråga. Frågorna kommer längre fram i dema dokument. Sidorna ska ligga i mappen u1, som du skapade i labora&on 1. Sidorna ska länkas samman med navigeringslänkar, så am man enkelt kan gå fram och &llbaks mellan dem. Börja med am skapa em nym 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 em nym dokument på samma säm som i labora&on 2. Ange lämplig &tel i #tle-elementet. Sidan ska användas för Fråga A. Spara filen i mappen u1. Namnge filen &ll 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 1. 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 am 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 am börja med. Du kan sedan ändra den och eventuellt komplemera 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 dim svar på den. Det kommer i nästa övning. I footer lägger du in någon lämplig informa&on. T.ex. dim namn och datum för när du skapat sidan. Inu& dessa element får du sedan använda flera element för ymerligare strukturering. T.ex. sec#on eller div för gruppering, samt element för blockquote, listor, fet eller kursiv s&l, m.m. Dvs element som används i labora&on 2 och i exempel i föreläsningar och kursboken om HTML.

4 3. Fråga A Datakommunika&on på webben Denna fråga handlar om protokoll i datakommunika&on. Lägg in både nedanstående fråga (delfrågor) och dim svar i main-elementet på din första sida. Inom det elementet använder du valfria HTML-element för am strukturera. A Delfrågor A1: Beskriv allmänt vad em protokoll är i datakommunika&on. A2: I kommunika&on på webben används bl.a. protokollen HTTP, TCP och IP. Beskriv vilken funk&on dessa har. Observera am alla frågor ska besvaras av dig med dina ord. Du får söka informa&on 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. DeMa gäller samtliga frågor Fråga A &ll C. OmfaMning på dim svar ska vara em par meningar för A1 och em 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å hmps://validator.nu på samma säm som i labora&on 2. A RäMa 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 opera&vsystemet gör du två kopior av filen för dim 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å am navigeringen mellan sidorna fungerar. A B C Öppna också filerna i webbeditorn och uppdatera texten i #tle-elementet, så am 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. Sam&digt ska du också skapa en tabell med HTML, för am ge svaret i tabellform. B Lägg in både nedanstående fråga och dim svar i main-elementet på din andra sida. Inom det elementet lägger du in HTML-taggar för en tabell för dim svar. Delfrågor Skapa en tabell där du har kolumner för elementens namn, kort beskrivning och lista på amribut. Den korta beskrivningen behöver endast vara några ord, där du anger vad elementet är &ll för. AMributen ska vara de som finns i HTML5 och är specifika för elementet, så du behöver inte ta med allmänna amribut som finns för alla element. Då du tar fram underlag för tabellen, bör du också läsa vad amributen är &ll för (så am du lär dig), men i tabellen anger du endast amributens namn. Obs! Tabellen kan nu inte Ta med följande element i tabellen: formateras, så du får inga kantlinjer. DeMa görs med a CSS längre fram i kursen. img ol td Tips: Ta fram elementen i referenslistan på W3Schools webbplats, för am få fram underlag &ll dim svar.

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: hmp:// hmp:// hmp:// hmp:// C Lägg in både nedanstående fråga (delfrågor) och dim svar i main-elementet på din tredje sida. Inom det elementet använder du valfria HTML-element för am strukturera. Delfrågor C1: Ange namn och url för den webbplats du analyserat. C2: Hur sker global respek&ve lokal navigering? C3: Hur kommer man &llbaks &ll ingångssidan? C4: Vilket stöd finns det för användaren i navigeringen, för am se var man är och för am hima räm? Total omfamning på dim svar ska vara text motsvarande en halv &ll en A4-sida.

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

10 9. Länk från porkolions ingångssida På ingångssidan för din webbporkolio ska du ha en länk &ll sidan för Fråga A. Öppna sidan index.htm, dvs ingångssidan som du skapade i labora&on 2, i din webbeditor. Lägg in en länk &ll webbplatsen för frågorna. Länken ska gå &ll den första sidan, den för Fråga A. Använd en rela&v adress i länken. webbsidor (Web Publishing) index.htm dold Öppna i webbläsaren och testa am det fungerar. Från ingångssidan ska du alltså kunna gå &ll 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 &llbaks &ll 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 an&ngen FirstClass klientprogram eller em FTP-program. Du gör på samma säm som i labora&on 1 och 2. Lägg upp filerna för de nya sidorna i mappen u1. Byt ut index.htm i Web Publishing. Öppna din webbporkolio i webbläsaren på adressen h@p:// där anvid är dim eget användarid och testa am alla länkar fungerar och am 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å am du redan var inloggad. Prova då am avsluta webbläsaren (för am loggas ut) och testa sedan igen.

12 Uppgi: U1 Då du nu genomfört labora&on 1 &ll 3 ska uppgi: 1 vara klar. Men för am försäkra dig om am du fåm med allt, går du igenom alla krav och kontrollerar dem mot dina sidor. Kraven finns dels i de allmänna kraven på uppgi:ssidan och dels i kraven för respek&ve del på sidorna för labora&on 1 &ll 3. Glöm inte bort am också skicka in em meddelande i mappen för U1 i kursmappen i FirstClass, så vi vet am du redovisat uppgi:en. 1ME321 h16 U1