TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 25.11.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 HTML og CSS 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:
14 Kapittel 4 Formgi nettsider 4.1 Megafunpark utvidelse Før du går i gang er det en god ide å ha utført eksempelet «Interaktivtet» side 87-89 Oppgaven baserer seg på at du har utført oppgave Megafunpark s 100-102 Finn noen bilder av attraksjoner som kan brukes som illustrasjon til «The raptor» og «Dizzyrun» og lagre i kapittel4 Bruk semantisk tag og lag en meny som vist i eksempelet Interaktivitet (starter nederst s 87) Bakgrunnsfarge skal være lik tekstfargen på <h1> Når du peker på knappen, skal bakgrunnsfargen endres til fargen på <h2> Legg også på nødvendig kode i stilarket slik at man kun ser innhold til det menyvalget du har klikket på Bruk bildene, angi størrelse, ramme og legg på skyggeeffekter som vist på s. 105 Finn gjerne skyggefarge på https://www.w3.org/tr/css3-color/#svg-color
15 Kapittel 5 Mer om layout og design 5.1 Hvordan lage midtstilt nettsted som kan skaleres Hoveddelen skal utvides etter hvert som den fylles med innhold. Nettsiden skal alltid være midstilt uansett zoomverdi. Menyen skal lages som en unordered liste. 1. Opprett mappen layout i mappen kapittel5 2. Åpne malfila og lagre som index.html i denne mappa 3. Skriv inn følgende kode i index.html: Alt innhold på nettsiden legges inne i en <div> som vi gir navnet «wrapper» Inne i wrapperen ligger <header>, <nav> og <main> <ul> vil utgjøre menyen som vist over
16 4. Opprett en mappe bilder i mappen layout 5. Lagre bildet logo.png i bildemappen 6. Opprett en ny fil og gi den navnet stil.css. Husk å endre i index.html slik at den refererer til riktig stilfil 7. Skriv inn koden under i stil.css for å formatere «wrapperen» - den delen av koden som sørger for nettsidens størrelse og posisjonering 1 2 3 4 5 6 Forklaring: 1. Vi vil benytte flexbox som er den nye måten å posisjonere innhold på i CSS 2. Vi vil ha innholdet i «wrapperen» i hver sin rad (ikke kolonne) 3. Vi vil ha radene under hverandre 4. Heltrukken kantlinje, rød farge 5. Bredden på nettsiden er 970px 8. Skriv inn koden under i stil.css for å formatere <header>-del altså den delen som inneholder logoen Forklaring: 1 2 1. Vi vil benytte heltrukken kantlinje rundt logoen 2. Vi vil at størrelsen på logoen skal være 100% (=970 px i dette tilfelle) når nettsiden åpnes
17 9. Skriv inn koden under i stil.css for å formatere <nav>-delen, altså den delen om inneholder menyen Forklaring: 1 2 1. Vi vil benytte heltrukken kantlinje rundt menyen 2. Vi vil at størrelsen på menyen skal være 100% (=970 px i dette tilfelle) når nettsiden åpnes Skriv inn koden under i stil.css for å formatere den delen av nettsiden hvor innholdet skal være. Forklaring: 1 2 1. Flex: auto medfører at <main> endrer størrelse avhengig av innholdet 2. Uansett mengde innhold skal høyden være minimum 800 px 10. Vi skal nå formatere punktlisten slik at den fungerer bedre som en meny. Skriv inn koden under i stil.css. 1 2 3 Forklaring: 1. Fjerner kulepunkter 2. Fjerner marger 3. Sørger for at menyen dekker hele bredden av <nav>-delen
18 11. Vi skal nå formatere menyen videre. Merk at dette kun vil gjelde for punktlistelementer som fungerer som en hyperkobling (<a>). Husk at vi leser fra høyre mot venstre. Skriv inn koden som vist under i stil.css Forklaring: 1 2 3 4 5 1. Listen holder seg innenfor <nav>delen 2. Fjerner tekstformatering her sørger vi for at menyvalget ikke blir understreket, noe som ellers er standard for et <a>-element 3. Farge på menyen (http://www.w3schools.com/colors/c olors_names.asp) 4. Tekstfarge sort, størrelse 30px 5. Setter avstand 10px til kantlinja (topp, høyre, bunn og venstre) 1 1 2 Forklaring: 1. Når vi tar musepeker over et menyvalg, endres fargen til angitt hexakode (rødfargen fra logoen) Forklaring: 1. Sørger for at menyen blir horisontal 2. Hvert menyvalg dekker 25% av total størrelse som er tilgjengelig 12. Sørg for at du står i index.html i editoren. Endre <h1>-teksten til «Bestilling». Velg Fil > Lagre som og gi den navnet bestille.html Endre så <h1>-teksten til «Kontakt oss» og lagre som kontaktoss.html. Endre så <h1>-teksten til «Vareutvalg» og lagre som vareutvalg.html.
19 Du vil nå ha følgende filer i mappen layout: 5.2 Håndtere innhold som går utover skjermens høyde Løsning 1 (oppgave midstilt nettside): - Main utvides ved økt innhold vil gå utover det som vises i nettleservinduet - For å lese innhold som ikke vises, benyttes scrollbaren i nettleseren Løsning 2: - Hele main vil alltid vises i nettleservinduet - Dersom innhold overskrider størrelsen på main, blir det satt inn en scrollbar i main
20 Utfør følgende endringer i selectoren main i stilarket: main { border-style: solid; flex: auto; height: 820px; overflow-y:auto; } Sett fast størrelse på main Vis scrollbar dersom innholdet overstigerer størrelsen på main
21 5.3 Serie Du har fått i oppdrag av en serieprodusent å lage et nettsted som presenterer en serie for norsk ungdom mellom 16 og 20 år. Du må gjerne få inspirasjon fra andre nettsider om samme serie, men du skal utvikle et nettsted med «ditt» brukergrensesnitt. Oppgavebeskrivelse Se s.126 -> for alternative oppsett Lag en collage som synliggjør det visuelle utrykket i valgt serie. Denne collagen skal danne utgangspunkt for det brukergrensesnittet du velger deg Lag så en fargepalett, bruk https://color.adobe.com/ med utgangspunkt i bildet fra punktet over Lag et bilde i et bildebehandlingsprogram som viser «din» fargepalett. Sett på fargekoden til hver farge, og skriv også hva den enkelte farge skal brukes til (for eksempel farge på bakgrunn, farge på tekster, bilderammer, logo ) Velg én eller flere fonter du vil bruke på nettstedet, og begrunn valget. Bruk gjerne en google-font, evt. last ned en egen font Lage et webområde/site på localhost på egen maskin, gi siten et passende navn. Siten skal kun inneholde de filene som trengs for å vise nettstedet på nett. Filene skal ha fornuftige navn og formater Presenter historien, persongalleriet og annen informasjon med både tekst og bilde. Nettstedet skal også ha en egenutviklet logo som skal gå igjen på hver side, og logoen skal inneholde tekst og bilde Nettsidene skal bygges opp ved hjelp av wrapper og semantiske tagger (s. 126-129). Samtlige nettsider skal ha det samme oppsettet Wrapper, semantiske tagger og andre tagger skal formateres i et eksternt stilark (CSS) Nettstedet skal ha et menysystem, bruk liste som formateres i stilarket (se s. 130). Nettstedet skal ha et ikon (favicon) som lages i Photoshop eller ved hjelp av en favicon-generator. Kode til <head>-del: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> Bytt ut filnavn og type med det som passer ditt favicon. Hver enkelt nettside i webløsningen skal ha en egen tekst i tittellinja Alle bilder du bruker, skal bearbeides i valgt bildebehandlingsprogram, for eksempel ved tilpasning av bildestørrelse. Sørg for at filmseriens navn vises som en tekst på bildet Nettstedet skal inneholde minst én animasjon. En animert gif laget i valgt bildebehandlingsprogram settes inn som et vanlig bilde. Bruk følgende kode dersom du har laget en animasjon i verktøy som Adobe Animate CC: <embed src="navn på animasjon.swf">
22 Forbered deg på å vise løsningen din for lærer hvor du viser det ferdige nettstedet viser collage og fargeprofilen i valgt bildebehandlingsprogram begrunner valg av font forklarer kode fra dine nettsider (både HTML og CSS) Favicon-generator http://www.favicon.cc/ http://www.favicon-generator.org/ Kapittel 11 i IT 1-boka om lov om opphavsrett Kap. 12 i IT 1-boka om brukergrensesnitt Kap. 1-5 i boka Webutvikling Til inspirasjon: Eksempel på en nettside for serie http://www.itv.com/downtonabbey/