Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Når man tar pilen over fanene, dukker det opp utrolig mange tagger. Dvs alt er lagt inn i <title>, alt av ting han selger. Det skal bare ligge et kort stikkord som forklarer siden. Han har lagt alt av design i html og css (noe han ikke har en gang). F.eks <font color="#996600" face="arial"><span style="font-size:14"> Han har ikke indetetert i koden. Alt i et kaos, uten noen pusterom. Man ser ikke hvem link som er til hvem bildet Oppgave 2.greenText{ color:green;.bigtext{ font-size:30px; <p class='greentext bigtext' > hei dette er en stor grønn tekst</p> http://jsfiddle.net/dwhqr8uf/ Oppgave 3 div { background-color: purple; width: 300px; padding: 25px; border: 25px solid navy; margin: 20px; border-style:solid; border-color:green;
#banner { width:1000px; height:100px; margin-left:auto; margin-right:auto; max-width:100%; border-style:solid; border-color: Oppgave 4 (Etter forelesning 1.3?) Finn eksempler på (deler av) nettsider som ikke skiller innhold og design på en god måte. Beskriv hva som er galt og hvordan det kan fikses. Diskuter spesielt tvilstilfellene Et kjempe fint eksempel på en nettside som ikke har design og innhold i praktisk bra stand er... http://www.biologyjunction.com/ Denne nettsiden er for barn og muligens tenåringer som skal lære biologi. Siden er lagd av en passion lærer som setter yrket sitt høyt oppe, men ikke hjemmeside tydeligvis. Denne hjemmesiden kunne vært veldig bra og lærerikt om designet ble prioritert helt anderledes enn hva det er nå. Noe som også må påpekes er at når man trykker på linkene helt nederst, vil du laste ned word dokumenter. Dette kunne vært unngått ved å lagd en ny side. Teksten på hjemmesiden og ikke minst bakgrunnen på enkelte sider, mange av dem er veldig vanskelig å lese og tyde. Oppgave 5 (Etter forelesning 1.4?) Beskriv tjenester/funksjoner du selv kommer opp med som bruker strukturelle tagger på en fornuftig måte. Vg.no bruker flere <article> tagger <paragraph>, <summary>, <aside>, <figure>
Oppgave 6 p.pos_fixed { position: fixed; top: 30px; right 5px; background_pic { background-image:url(«bilder/skog.jpg»); background-size:100 % 100%; background-repeat:no-repeat; h2.pos_left { position: relative; left:-20px; h2.pos_right { position:relative; left: 20px; Oppgave E1 A) <body> <h1>min flotte side</h1> </body>
B) <div id= «nav»> <ul id=»nav»> <li><a href=»index.html»> Hjem </a></li> <li><a href= «om_oss.html»> Om oss </a></li> </ul> or <nav> </nav> C) <div id= «main»> <p> Lorem ipsum osv... </p> D) <div id= «sidebar_reklame»> or <aside> </aside> E) <div id «sidebar_kalender»> G) <body> </body>
F) <footer> <p>laget av Tom Heine</p> </footer> Oppgave E3 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <header> <h1>logo og tittel</h1> </header> </head> <body> <h1>testside</h1> <p> Hei på deg. Se på bildet mitt: <img src="bilde.psd" alt="bilde" width="344" height="226"> </p> <br/> <br/> <p> Nok en paragraf </p> </body> </html> Oppgave E4 External style sheet er det idealt å bruke når stilen brukes til flere sider. Med denne sheeten kan utseende bli skiftet etter hvilken link tag man bruker. Eks <head> <link rel="stylesheet"type="text/css"href="mystyle.css">
</head> Det som menes med Internal style er at style sheeten blir bruket et singel dokument, som dette: <head> <style> body { background-color:linen; h1{ color:maroon; margin-left:40px; </style> </head> Oppgave E5 Det som menes med bakoverkompatibelt er at det funker i eldre nettlesere. Noen html5 elementer gjør ikke det, mens noen har lite støtte. Samme som støtte i CSS før det blir innført så må man ha prefixed som webkit og moz. Oppgave E6 <picture> taggen er slik at den laster opp dens bildekvalitet og størrelse etter hvilke skjermstørrelse brukeren er på. Det ville spart mye tid, gjort det mye enklere med tanke på skriving og endring av kode. Oppgave E7 Som box model menes det at alle de ulike elementene i HTML behandles som firkantede bokser. Det som er så bra med det et at boxene gis de samme egenskapene. Fint til å forme designet på hjemmesiden. Oppgave E8 Det som kunne bli anderledes er at Bill Gates kunne kjøpt rettigheten til «nettet», og ta betalt for Internett. Eller at andre leverandører at tatt betalt hver gang vi koblet oss opp mot nettet.
Oppgave E9 Fordelene med at en webside må være 100% validert er at det ikke vil vært noen feil på siden. Alle websidene vil være det beste på tilgjengelighet, brukervennlighet og synlighet. Alt av typiske feil vil være rettet opp og muligens flere sider hadde sett bedre ut med ulike og bedre funksjonaliteter. Ulempene med at webside skal være 100% validert er at det ville vært mye jobb om det er enkelte feil som det ikke er så farlig med. Selve siden kan være oppe og gå, men om det er småfeil som ikke er synlig, så kan det bli mye jobb. Oppgave E10 Det som er praktisk forskjellen mellom de to er at, den første er til kun enkelt bruk som om mn bare skal ha et bilde og ikke noe mer. Men velger man å ha bildet i CSS så er fint for å kunne endre på bildets størrelse osv, om bildet skulle bli borte setter man en tekst der og det er praktisk i forhold til å ha alt av design i CSS.