Oblig 1 Erlend Hannestad

Størrelse: px

Begynne med side:

Download "Oblig 1 Erlend Hannestad"

Alfhild Kristiansen
10 år siden
Visninger:

1 Oblig 1 Erlend Hannestad Oppgave 1 Nettsiden er ustrukturert og uryddig når det kommer til layout og design, det er vanskelig å holde oversikt over alt som vises på siden, det er rett og slett for mye som ligger plassert på en webside. Når det kommer til selve HTML koden er den på 6241 linjer, noe som er atlfor mange linjer, og er ustrukturerte. Når adressen ble kjørt gjennom validator.w3.org. ble det funnet 613 feil og 13 advarsler i html koden. Oppgave 2

2 HTML & CSS kode HTML <h2>denne skal være blå</h2> <h3>denne skal også være blå</h3> <p>denne skal i likhet med de andre også være blå.</p> CSS h2, h3, p { color: blue;

3 Oppgave 3 h1 { div.test { background-color: lightgrey; float: left; width: 350px; border: 5px dotted navy; margin: 100px; padding: 20px; div.test2 { background-color: red; float: right; width: 250px; border: 10px dotted blue; margin: 20px; padding: 30px; content: 10px;

4 Oppgave 4 Webstedet: Innhold i form av tekst kan fort bli misforstått for reklame når informasjon om webstedet (organisasjonen) blir framstilt innenfor et ipad-bilde, som fungerer som et bakgrunnsbilde. I section avdelingen av siden blir undertitler skrevet som paragrafer (<p>), i motsetning til den korrekte bruken av heading (<h2>, <h3> osv). Dette gjør av gjestene av siden kan hende ikke forstår hva de leser, at de ikke oppdager de forskjellige delene av siden. For eksempel hvor skille mellom «Our approach» og «Our advisors» er kan bli vanskelig å vite. Slik «forsvinner» innholdet inn i bakgrunnen, designet overskygger selve teksten. For å fikse dette kan design delen bli justert ned noen nivåer. Det er ikke nødvendig å føre inn et ipad-bilde med tekst for å illustrere informasjon om organisasjonen. La heller teksten stå alene i en enklere bakgrunn for å vise informasjonen. Samtidig kan de forskjellige bakgrunnene kuttes ned på. Bruk et bakgrunnsbilde slik at bakgrunnsfargene ikke endrer seg og slik at fargen på teksten ikke trengs å endres i flere avsnitt. Undertitlene kan endres fra <p> til <h2> eller <h3>. Oppgave 5 <aside> taggen kan bli brukt når det kommer til en mobilversjon av en webside, slik at den kan fjerne reklame fra websiden. Dette er praktisk med tanke på at mobilskjermen ikke er veldig stor, slik at det ikk er nødvendig å vise denne type informasjon på en så liten skjerm. Oppgave 6

I section avdelingen av siden blir undertitler skrevet som paragrafer (<p>), i motsetning til den korrekte bruken av heading (<h2>, <h3> osv).

5 CSS-koden: h1 { h2 { p { width: 1200px; height: 250px; color: blue; height: 250px; width: 300px; text-align: right; width: 300px; Tidligere eksamensoppgaver Oppgave E1 A: Header B: Nav C: div id= content D: aside E: aside F: Footer G: Main Oppgave E2 Svar: 1,4, 5, 8 Oppgave E3 Liste over feil: Ingen <body> eller </body> tag. <header> taggen skal ikke være inni <head>, men i <body> <br /> linjeavstand skal ikke brukes i html, det skal brukes i css. Siste <p> er ikke avsluttet. Oppgave E4 Når en nettbrowser ikke finner noen external css fil, bruker den sin egen css stilsett som er standard for browseren. Slik har browseren sin egen internal css som blir brukt når det er nødvendig. Når HTML koden inneholder css interneal, velger browseren å bruke denne isteden, siden dette overskrider nettleseren sin egen css.

<header> taggen skal ikke være inni <head>, men i <body> <br /> linjeavstand skal ikke brukes i html, det skal brukes i css. Siste <p> er ikke avsluttet.

6 Oppgave E5 Det vil si at den nye versjonen av nettleseren fortsatt støtter gamle elementer, f.eks. gamle tagger. Du kan i CSS også bruke bakoverkompatibilitet når det er snakk om f.eks. bilder, slik at alle nettlesere kan vise avrundende hjørner på bildene. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <h1>hallo! </body> </html> I denne koden mangler end taggen </h1>, men browseren leser fortsatt koden. Oppgave E6 Det blir mer tungvint å omskrive all den relevante informasjonen for at de forskjellige digitale mediene skal kunne lese koden best mulig. Koden trengs å forkortes ned. Uansett, hvis denne taggen fungerer, blir det mer brukervennlig for andre digitale medier, som f.eks. mobil og tv. Oppgave E7 Box-model beskrives som design og layout når det er snakk om CSS. Det er en box som legger seg rundt html-elementene, og som består av margins, borders, paddings og content. Box-model gjør det mulig å forme ethvert html element, fordi disse elementene kan tolkes som en box. Mulighetene for å plassere og forme elementene blir større ved bruk av box-model. Oppgave E8 (finpussing) Den kalde krigen er en viktig faktor. Det var en spionasje krig mellom USA og Sovjetunionen, hvor målet var å hente og sende informasjon. Hvis f.eks. det amerikanske militæret hadde startet utviklingen av internett, kunne det i dag vært noe som kun blir brukt av militæret. Oppgave E9 Utviklere må gjøre mye mer arbeid og bli bedre på å gjøre jobben sin. Det ville generelt krevd mer av arbeiderne. Brukere kunne fått en bedre brukeropplevelse, med tanke på at siden ville kunne vise alt den i utgangspunktet skulle vise. Alle sider ville fått samme standard, slik at alle skal være like bra når det kommer til HTML (innhold).

Oppgave E6 Det blir mer tungvint å omskrive all den relevante informasjonen for at de forskjellige digitale mediene skal kunne lese koden best mulig. Koden trengs å forkortes ned.

7 Oppgave E10 Fordelen ved å bruke HTML er at du vet akkurat hvor bildet vil ligge i forhold til andre deler av HTML dokumentet. Derimot når det kommer til CSS kan du lettere posisjonere bildet og beskrive hvor stor plass bildet skal ta i HTML. CSS metoden er best å bruke når det er snakk om å ha bildet i samme posisjon uansett nettleser. HTML er greit å bruke når bildet ikke er en altfor viktig del i forhold til teksten, at den kun skal illustrere et poeng.

Derimot når det kommer til CSS kan du lettere posisjonere bildet og beskrive hvor stor plass bildet skal ta i HTML.

Like dokumenter

OBLIG 1 - WEBUTVIKLING

OBLIG 1 - WEBUTVIKLING OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For