TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 08.09.2016 < >
2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar følgende spørsmål: 1. Hva er HTML en forkortelse for? 2. Hvilke seksjoner finner vi i et HTML-dokument (se nedenfor)? <!DOCTYPE html> <html> <head> </head> <body> </body> </html> <title> Vår første nettside</title> <meta charset="utf-8" /> <h1>velkommen til vår første nettside</h1> 3. I hvilken seksjon finner vi de taggene som blir synlig i nettleservinduet? 4. Hva gjør disse taggene: 1. <h1> </h1> 2. <p> </p> 5. Hvorfor bruker vi stilark (CSS)? 6. I hvilken seksjon plasserer vi metadata? Og hva er egentlig metadata? 7. <!DOCTYPE html> står først i HTML-dokumentet hva gjør denne taggen?
3 1.2 Dyreadopsjon html repetisjon Sørg for å opprette en undermappe i mappen Webutvikling/Kapittel1 som du kaller dyreadopsjon. Kopier følgende bildefiler hest.png, katt.png og hund.png inn i mappen dyreadopsjon. Opprett en oppstartsfil i mappen som du kaller index.html. Prøv å huske hvilke tagger du trenger (ved behov se sist i oppgaven) for å få resultatet under.
4 Opprett en ny side som heter katt.html med følgende innhold: Opprett en ny side som heter hund.html med følgende innhold Opprett siden hest.html med følgende innhold:
5 Endre i index.html slik som under. Legg inn hyperkoplinger til de html-filene du nettopp laget. Opprett stilarket stil.css og legg inn en kopling til dette stilarket i alle html-filene. Slik skal resultatet bli:
6 Tagger du vil få bruk for: Tagg <!DOCTYPE html> <html></html> <head></head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="filnavn.css" /> <body></body> Forklaring HTML5-standard Start og slutt på koden Seksjon med info til nettleser og søkemotorer Legge inn tittel i arkfanen på hver fil Tegnsett Sette inn lenke til et stilark Seksjon som blir synlig <h1></h1 <p></p> <img src="hest.png"> Nytt avsnitt Sette inn bilde <a href="hest.html">klikk her</a>
7 Kapittel 2 2.1 Pokemon GO 1. Opprett en mappe i kapittel1 som du gir navnet pokemon 2. Opprett en undermappe bilder i mappen pokemon I denne mappa legger du bilder av følgende Pokemon: Du skal også finne logoen til Pokeman GO og legge i bildemappa. Dette bildet skal ha navnet logo.jpg. 3. Opprett en ny fil som du lagrer i mappen pokemon med navnet index.html, og skriv inn følgende kode: Taggen <button> setter inn en menyknapp. Når du så også setter inn taggen <a>, sørger du for at denne knappen fungerer som en hyperlink slik at du kan hoppe til en side kalt pikachu.html.
8 Opprett en ny fil i samme mappe som du gir navnet pikachu.html, og skriv inn følgende kode: 4. Sørg for at begge filer er lagret og forhåndsvis begge i nettleseren. Du skal nå kunne bruke menyknappene for å hoppe fram og tilbake mellom sidene. 5. Du skal så opprette én side per pokemon og sørge for at det er en menyknapp for hver side i alle sider, inkludert index.html. Det betyr at taggen <body> i hver eneste fil skal inneholde følgende, bytt ut ** ** med riktig tekst:
9 6. Test at du kan hoppe fritt mellom alle sider. Du skal nå formatere samtlige sider og sørge for at bildene får en bredde på 200 px og at de får en ramme rundt med rødfargen fra pokemonballen. Alt innhold skal rykkes inn 20 piksler mot høyre. 7. Velg Fil > Ny i editoren og lagre som stilarkfil.css. 8. Skriv så inn følgende kode:
10
11 Kapittel 3 Strukturere websider 2.1 Reisebyrået «Ryk og Reis» Bruk kapittel 3 til oppslag for å finne nødvendige koder. Du skal lage et nettsted for et reisebyrå. Nettstedet skal presentere flere ulike reisemål med både tekst og bilde. 1. Opprett en mappe kalt reisebyrå i mappen kapittel3. 2. Opprett to undermapper, bilder og filmer. 3. I mappen bilder legger du bildene kajakk.jpg, skihopp.jpg, new york4.jpg og rovinj_by.jpg. 4. I mappen filmer legger du videotest.ogg. 5. Opprett en ny fil i notepad++ som du gir navnet index.html. 6. Skriv inn nødvendig kode for å få vist følgende innhold (husk å bruke tittellinjen): Som du ser, er deler av teksten formatert, og du trenger derfor et stilark. 7. Opprett en ny fil som du gir navnet feriestil.css, og skriv inn nødvendig kode slik at din index.html blir lik eksemplet over. 8. Gå så til index.html og sett inn bildene fra mappen bilder under teksten du allerede har. Bildene skal ha hvert sitt attributt slik at når du peker på bildet, kommer følgende tekster frem (tips: title): a. Norgesferie b. Skiferie i Sveits c. Storbyferie i New York d. Badeferie i Rovinj 9. Skriv inn nødvendig kode i stilarket ditt slik at bildene: - får en høyde på 300 piksler - får en felles bildetekst som sier «Pek på bildene for å få litt informasjon. Klikk på bildet for å gå til en side for å lese mer om reisemålet».
12 10. Sørg for at du står i index.html og legg til nødvendig kode slik at du får vist følgende tekst under bildene: 11. Legg så til kode slik at du får en strek før resten av teksten og avspilling av filmen videotest.ogg: 12. Endre igjen i stilarket slik at du får følgende resultat når du forhåndsviser index.html i nettleseren din:
13 Du skal nå sørge for at hvert bilde blir en hyperlink til en side som har informasjon om valgt destinasjon. 13. Lag en side for hver destinasjon og navngi de for eksempel slik: a. norge.html b. sveits.html c. newyork.html d. rovinj.html 14. Sørg for at hver av disse sidene har en mulighet for å komme tilbake til index.html og at de inneholder en tabell med informasjon om ulike reiser på valgt destinasjon. Finn på egne data, bruk gjerne internett for å finne relevant informasjon. 15. Formater tabellen i stilarket slik at den likner mest mulig på eksemplet som er vist under: