Oppgavesamling til Webutvikling < >
|
|
|
- Stephen Madsen
- 8 år siden
- Visninger:
Transkript
1 TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert < >
2 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 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 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 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 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 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 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 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 10
11 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 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 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 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 Oppgaven baserer seg på at du har utført oppgave Megafunpark s 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å
15 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 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 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: 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 17 9. Skriv inn koden under i stil.css for å formatere <nav>-delen, altså den delen om inneholder menyen Forklaring: 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: 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 Forklaring: 1. Fjerner kulepunkter 2. Fjerner marger 3. Sørger for at menyen dekker hele bredden av <nav>-delen
18 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: 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 ( olors_names.asp) 4. Tekstfarge sort, størrelse 30px 5. Setter avstand 10px til kantlinja (topp, høyre, bunn og venstre) 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 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 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 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 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 ). 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 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 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
Oppgavesamling til Webutvikling < >
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
Oppgavesamling til Webutvikling < >
TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 17.02.2017 < > 2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar
Steg 1: Vi starter fra toppen
CSS: Layout Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Målet med oppgaven er å lære hvordan
I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene.
CSS: Layout Ekspert Web Introduksjon Målet med oppgaven er å lære hvordan man lager en nettside med en meny og et innholdsfelt. I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene
(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26.
(X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML
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
Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oblig 1 Oppdatert: 10/09 Nye oppgaver Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 2 (Etter
CSS-formatering: stilark med kommentarer
CSS-formatering: stilark med kommentarer /* Demonstrasjon av stilarkregler. Jeg har satt inn forslag til farger og fonter, men du setter inn dine egne valg selvfølgelig. */ /* Stilregler for html-taggen
HTML: Del inn nettsiden
HTML: Del inn nettsiden Erfaren Web Introduksjon Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom du ikke er kjent med tagg-strukturen
EKSAMEN Webpublisering
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 03.12.2015 Tid: Målform: Sidetal: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
Steg 1: Felix har forsvunnet!
HTML: Forsvunnet katt Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon Katten
Oblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oblig 1 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 arngren.net: 1. Nettsiden er SYKT uoversiktlig! 2. Det er
Kursdokumentasjon for Dreamweaver
Kursdokumentasjon for Dreamweaver Skrevet av 2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre
CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu
CSS: Style nettsider Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Nå skal vi lære å endre på
EKSAMEN Web-publisering
EKSAMEN 6101 Web-publisering 02.06.2016 Tid: Målform: Sidetall: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du bruker mellom
EKSAMEN / 6101N WebPublisering
EKSAMEN 6101 / 6101N WebPublisering 09.12.2016 Tid: Målform: Antall sider: 3 timer Bokmål 8 (inkludert denne) Hjelpemidler: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du
I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.
CSS: Skjul ninjaene Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi, Kunst og håndverk
file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html
1 of 9 15.04.2015 14:15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte
file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html
1 of 10 09.04.2015 15:49 Fra forrige gang: Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Skal ikke brukes for å legge ut sider Dreamweaver har fasiliteter for å opprette, redigere
Vedlikeholde nettstedet i Joomla 2.5 +
Vedlikeholde nettstedet i Joomla 2.5 + Innlogging: Klikk deg inn på din nettside. I menyen på ditt nettsted vil det være en link til logg inn eller adm. Klikk på denne og logg inn med det brukernavnet
CSS: Style nettsider Nybegynner
CSS: Style nettsider Nybegynner Web Introduksjon Nå skal vi lære å endre på stilen til nettsider. I denne oppgaven forventer vi at du har gjort HTML-oppgavene eller er litt kjent med HTML fra før av. I
MMT105 Internettprogrammering Uke 44, høst 2007
MMT105 Internettprogrammering Uke 44, høst 2007 Introduksjon til CSS MMT105 HiNT 2007 1 HTML-elementenes strukturerende egenskaper HTML-elementene skal markere strukturen i et webdokument, dvs. at de forskjellige
CSS: Animasjon Nybegynner
CSS: Animasjon Nybegynner Web Introduksjon I denne oppgaven skal du lære å animerer HTML-objekter ved hjelp av CSS. Under ser du hvordan resultatet vil bli til slutt: Men før vi starter å lage animasjonen
Brukermanual. Itpays W3 Publish. Sette opp, logge inn og komme i gang. Redigert den 23. mai 2005. http://www.itpays.no/produkter/publisering/
Brukermanual Itpays W3 Publish Sette opp, logge inn og komme i gang Redigert den 23. mai 2005 http://www.itpays.no/produkter/publisering/ Innholdsoversikt: 1 Generelt om Itpays w3 publish Side 3 2 Sette
EKSAMEN. Emne: Innføring i informasjons- og kommunikasjonsteknologi
EKSAMEN Emnekode: LA101IKT Emne: Innføring i informasjons- og kommunikasjonsteknologi Dato: 26.11.2010 Eksamenstid: kl. 09:00 til kl. 15:00 Hjelpemidler: Ingen trykte, kun hjelpefunksjoner på datamaskinen
Bildebehandling i GIMP
Bildebehandling i GIMP 9.1 Opprette et dokument & 9.2 Bildestørrelse For å opprette et nytt dokument velger du File > New (Fil > Ny...) Da vil følgende vindu dukke opp: Her er bildets oppløsning satt til
Publiseringsveiledning for www.tromsfylke.no
Publiseringsveiledning for www.tromsfylke.no Sist oppdatert 09.07.2013 av Khalil Dahbi Innholdsliste 1. Side:... 3 a. Lage en ny side:... 3 b. Endre innstilling til en side:... 3 c. Slette en side:...
Oblig 1 Erlend Hannestad
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
Intro til WWW, HTML5 og CSS
Intro til WWW, HTML5 og CSS Håkon Tolsby 20.08.2015 Håkon Tolsby 1 World Wide Web Webserver: Programvare som distribuerer websider og/eller maskin hvor programmet kjører Webbrowser (nettleser): Program
Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Svar: Ved første øyekast har utvikleren av nestesiden plasser altfor mange div
Forsvunnet katt webside
Lesson 3 Forsvunnet katt webside All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what
Dobbelklikk på program-ikonet!
En hjemmeside kan lages i hvilket som helst enkelt tekstbehandlingsprogram (som f.eks. Notepad i Windows eller EnkelTekst på en Mac). Forutsetningen for å kunne gjøre dette er at man behersker html. Html
Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
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
Steg 1: Animasjons-attributtet
CSS: Animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...
BRUKERMANUAL KOM I GANG... 2 SKRIV ET INNLEGG... 2 LEGG TIL UNDERSIDE... 2 LAST OPP BILDER... 2 REDIGER MENYINNHOLD... 3 LEGG INN SIDEMENY ELLER BUNNTEKST... 3 TILPASS BLOGGENS DESIGN... 3 BLOGGINNLEGG...
Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;
Oblig 2: Oppgave 1 Hva og hvorfor Jeg har valgt å lage et nettsted basert på relative målenheter. Det vil si at jeg tar i bruk prosent og em istedenfor pixler. For eksempel: section { width: 50%; height:
SiteGen CMS. Innføringsmanual
SiteGen CMS Innføringsmanual Copyright Barlind Solutions AS 2008 Hva er SiteGen CMS? SiteGen CMS er et såkalt content-management-system; eller med litt andre ord et publiseringssystem. Det kan brukes til
PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO
PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO Innhold Kapitel 1 - Registrering og innlogging... 2 Kapitel 2 - Lage ny artikkel uten bruk av bilder eller annen grafikk... 3 Kapitel 2a - Ingress... 4 Kapitel 3
Brukerveiledning for hjemmesider
Hegra Idrettslag Brukerveiledning for hjemmesider En kort innføring for bidragsytere på www.hegrail.no Ivar Friheim 2009-05-18 Innhold Innledning... 3 Nyheter... 3 Sider... 3 Kalenderinnslag... 3 Pålogging...
Oblig 1 Webutvikling av Jon-Håkon Rabben
Oblig 1 Webutvikling av Jon-Håkon Rabben Oppgave 2 og 3) http://www.it-stud.hiof.no/~jhrabben/boxmodel.html Oppgave 6) http://www.it-stud.hiof.no/~jhrabben/oblig1oppg6.html Oppgave 1) Siden tar lang tid
www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.
Webansvarlig ETF håndball Ver.02 / 2012 Geir Vold-webredaktør http://www.eidsvold-turn.no Hvordan formatere et bilde som skal inn på websiden.... 3 Hvordan beskjære et bilde... 3 Ingressbilder... 5 Brødtekstbilder...
Brukerveiledning WordPress. Innlogging:
Brukerveiledning WordPress Her er en liten guide for hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging Lage en side Lage et innlegg Innlogging: For å logge
SENSORVEILEDNING. Dato: Eventuelt:
SENSORVEILEDNING Emnekode: ITF10511 Emnenavn: Eksamensform: Webutvikling Digital Dato: 03.12.2018 Faglærer(e): Michael A. Lundsveen Eventuelt: Læringsutbytte for emnet KUNNSKAP: Studenten kan forstå nettsteders
Grunnleggende om websider og HTML-kode
Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker.
Brukermanual til Domenia Norges adminløsning
Brukermanual til Domenia Norges adminløsning 1. Login For å logge inn på løsningen din skriver du inn domenenavnet ditt og /siteadmin (f.eks www.domenia.no/siteadmin ). Skriv inn brukernavn og passord
Webutvikling oblig 1 Marius Hanssen
Webutvikling oblig 1 Marius Hanssen Oppgave 1 arngren.net er en rotete nettside, enkelt sett forpestet med et uorganisert layout og en kode så grov at jeg ikke skjønner hvordan de klarte å finne en så
Høgskolen i Telemark EKSAMEN Webpublisering (inkludert denne) Hjelpemiddel: Ingen
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 05.12.2013 Tid: Målform: Sidetal: 3 timer Bokmål 7 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
Høgskoleni østfold EKSAMEN
Høgskoleni østfold EKSAMEN Emnekode: Emne: ITF10511 Webutvikling Dato: Eksamenstid: 03/12-2014 09.00-13.00 Hjelpemidler: Faglærer: In en Tom Heine Nått Eksamensoppgaven: Oppgavesettet består av 6 sider
Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.
Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems. Redigert 10.februar 2010. For at det skal bli lettere å lese denne manualen kan du justere størrelsen på dette
Rammer. Mer om Javascript
Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004 Kirsten Ribu - HiO - LO 130 A 1 I dag Om rammer (Frames) Mer om Javascript Kirsten Ribu - HiO - LO 130 A 2 Innledende om rammer (Frames) Med rammer
Endre utseendet på nytt grensesnitt med Primo Studio
Endre utseendet på nytt grensesnitt med Primo Studio Ex Libris har lansert en ny funksjonalitet sommeren 2018 som gjør det lettere å tilpasse grensesnittet og se endringene live. Endringene har ingen virkning
HTML: Legg til lyd og video
HTML: Legg til lyd og video Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn:
Oblig 3 Webutvikling. Oppgave 1
Oblig 3 Webutvikling Oppgave 1 Ta for deg en selvvalgt bedrift (gjerne lokal/mindre) og tenk deg at du hadde fått i oppgave å være en SEOkonsulent for disse i én uke. På denne uken skulle du gjennomført
Administrering av SafariSøk
Administrering av SafariSøk Administrering av SafariSøk Revisjonshistorie Revisjon $Revision: 1.6 $ $Date: 2003/08/05 12:44:02 $ Innholdsfortegnelse 1. Om programmet... 1 Generelt... 1 2. Fremgangsmåter...
Oppbygging av innhold på responsive nettsider.
Oppbygging av innhold på responsive nettsider. HTML og CSS er koder som forteller nettleseren hvordan strukturen og utseende på en nettside skal vises på skjermen din. Selv om du ikke ser kildekoden når
WordPress. Brukerveiledning. Kjære kunde. Innlogging:
Brukerveiledning WordPress Sist oppdatert: 26.02.2014 Kjære kunde Her er en liten guide for å hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging - s.1 Kontrollpanel
Businesscatalyst PAGES
Businesscatalyst 1. Gå til http://www.businesscatalyst.com/ og login med brukernavn og passord. Du kommer da til administrasjonspanelet der du kan organisere nettsiden. Her kan du også se hvordan nettsiden
Manual for innlegging av standard sideinnhold og nyheter via «backend»
Manual for innlegging av standard sideinnhold og nyheter via «backend» 23.3.2006 Utarbeidet av: 2 Innlogging og beskrivelse av hovedelement i «backend» For å få tilgang til redigeringsmodul velges følgende
Steg 1: Canvas-elementet
JS: Partikkel-animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduction
SUKKERGRIS. Anita og Silje DAT100
SUKKERGRIS Anita og Silje DAT100 I NNHOLD 1. Innledning... 2 2. Beskrivelse av Sukkergris... 3 2.1 Struktur og grafisk design... 3 2.1.1 Sidens oppbygning... 3 2.1.2 CSS og Grafisk design... 4 2.2 Oversikt
CSS: Endre utseende og stil på tekst Nybegynner
CSS: Endre utseende og stil på tekst Nybegynner Web Introduksjon I denne oppgaven skal vi jobbe videre med skrift, størrelser og farger. Vi skal utforske forskjellige skrifttyper, se på bakgrunnsfarger
<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01
Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01 Side 2 Ett HTML dokument inneholder både tekst som skal vises og instruksjoner om hvordan den skal vises av nettleseren. Instruksjonene
www.borettslag.net Brukermanual Versjon 2.0
www.borettslag.net Brukermanual Versjon 2.0 Brukermanual for hjemmesider fra Borettslag.net Innholdsfortegnelse: Velkommen som redaktør...3 Innlogging...4 Meny...5 Generelle innstillinger...6 Hovedmeny...8
Innholdsfortegnelse. Side 1 av 33
Innholdsfortegnelse Viktige begrepsforklaringer... 2 Innlogging... 3 Lage en artikkel... 4 Redigere en artikkel... 7 Fjerne en artikkel... 7 Sette inn et bilde i en artikkel... 8 Bytte bilde i en artikkel...
OBLIG 2 WEBUTVIKLING
OBLIG 2 WEBUTVIKLING Oppgave 1 Design ved hjelp av skisser eller wireframes et nettsted med et "avansert" design. Lag spesifikke design for ulike skjermstørrelser og utskrift. Fokuser spesielt på å få
HTML5 og CSS. Webdesign med Dreamweaver. Glemmen vgs - Medier og kommunikasjon 1. januar Arly Dale 2013 Side 1
Webdesign med Dreamweaver Glemmen vgs - Medier og kommunikasjon 1. januar 2013 Arly Dale 2013 Side 1 Strukturere layout på en webside Layouten på en webside kan organiseres på forskjellige måter. Tidligere
Håkon Tolsby Håkon Tolsby
HTML5 og CSS Håkon Tolsby 27.08.2018 Håkon Tolsby 1 En webside min webside en html5 side dett er min første
the web Introduksjon Lesson
Lesson 1 the web All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon
Tilpassning av Wordpress - Enterprise Theme
Del 2 - Tilpassning Tilpassning av Wordpress - Enterprise Theme Del 1 var en gjennomgang av hvordan man setter opp det tekniske som kreves for å kjøre en Wordpress webside/blogg. Installere webserver (Apache)
Innhold. ailæring Lage/endre leksjon. Innledning Lage en leksjon Legge inn tekst, kulepunktliste og bilde... 6
Lage/endre leksjon 1 Innhold Innledning... 2 Lage en leksjon... 3 Legge inn tekst, kulepunktliste og bilde... 6 Kopiere og lime inn tekst fra andre programmer... 10 Bygge inn en video... 10 Sette inn hyperkobling...
CASCADING STYLESHEETS (CSS)
CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende
Brukerveiledning for NSFs nyhetsbrev
Brukerveiledning for NSFs nyhetsbrev VERSJON 2 nov 2015. Nye punkter er markert i rødt. A. Lag en profil 1. Nyhetsbrevet ligger på Min side/min side/administrer nyhetsbrev (Gi beskjed til IT dersom du
Memoz brukerveiledning
Memoz brukerveiledning http://memoz.hib.no Pålogging...1 Oversikt...2 Profilside...2 Inne i en memoz...3 Legg til ting...3 Tekstboks...3 Rediger og flytte på en boks...4 Bildeboks...5 Videoboks...7 HTML-boks...7
BRUK AV TEKSTEDITOREN
Dynamisk Internett-publisering med DM Web BRUK AV TEKSTEDITOREN BRUKERVEILEDNING 2007 Datamann AS er Brukermanualen er utarbeidet av Datamann AS Postboks 74 9551 ØKSFJORD Telefon 78 45 95 00 Telefaks 78
Hvordan redigere blogg sider i Joomla 3.x
Hvordan redigere blogg sider i Joomla 3.x Side 1/8 For å endre en side/artikkel i Joomla logger du inn. Velkomstskjermen er denne. Klikk på artikler. Eller velg artikler fra toppmenyen: Innhold >> Artikler
en hjemmeside Lesson Introduksjon Du kjenner en del HTML tagger, så nå er det på tide å lage din første hjemmeside! La oss begynne med en gang.
Lesson 2 en hjemmeside All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon
Løpende strekmann Erfaren Videregående Python PDF
Løpende strekmann Erfaren Videregående Python PDF Introduksjon I denne oppgaven skal du lage et spill der du styrer en strekmann som hopper over hindringer. Steg 1: Ny fil Begynn med å lage en fil som
King Kong Erfaren Scratch PDF
King Kong Erfaren Scratch PDF Introduksjon I dette spillet inspirert av historien om King Kong, skal vi se hvor lett det er å bruke grafikk som ikke allerede ligger i Scratchbiblioteket. I spillet styrer
Brukermanual. Support: Skytterkontoret Tlf: 02419, tast 2 support@dfs.no http://www.dfs.no/support. Velkommen til EPI-Server 7.
Velkommen til EPI-Server 7.5 (CMS) Levert av Skytterkontoret. EPI-Server 7.5 (CMS 7.5) er et publiseringssystem som gjør det enkelt for deg å oppdatere innholdet på dine Internettsider. I denne brukerdokumentasjonen
Kom i gang med Zotero: En enkel veiledning
Kom i gang med Zotero: En enkel veiledning Zotero er et gratis referanseverktøy for Windows og Mac. Du samler kildene fra nettsider og databaser og kan bruke de samme referansene i Word når du skriver.
AUTOCAD 2008. Artikkelserie. Tabeller
Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Tabeller Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8 Alle henvendelser
Om du allerede kjenner Scratch og har en Scratchbruker kan du gå videre til Steg 1.
Pingviner på tur Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Velkommen til Scratch. Vi skal
Oppsummering fra forelesning 2
1 of 16 02.04.2015 15:42 Oppsummering fra forelesning 2 Lenker Lenker er, historisk sett, webens første eksistensberettigelse Lenker kan være relative (går til sider innenfor samme nettsted) eller absolutte
Steg 1: Hente grafikk fra nettet
Scratch King Kong Skrevet av: Samuel Erik Abildsø og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill, Animasjon Fag: Engelsk, Kunst og håndverk, Matematikk, Programmering Klassetrinn: 1.-4. klasse,
SPO/IKT Kurshefter / Innføring i Microsoft Expression Web
1 of 9 15.02.2011 12:15 SPO/IKT Startsiden Kurshefter Veivisere Vår testside m/ versjon etc Testside Innføring i Microsoft Expression Web Formål: Å gi studenter en innføring i bruk av Microsoft Expression
Her prøver vi å gi en enkel introduksjon til Venstres publiseringssystem for nettsider (Venstre Publish):
9 IT i lokallaget 9.1 Hjemmesider Redigering av lokallagets hjemmesider skjer via et publiseringsverktøy som du finner på https://publish.venstre.no. Brukernavn og passord får du ved å henvende deg til
Brukermanual - Joomla. Kopiering av materiale fra denne Bonefish manualen for bruk annet sted er ikke tillatt uten avtale 2010 Bonefish.
Brukermanual - Joomla Bonefish brukermanual - Joomla Gratulerer med ny nettside fra Bonefish. Du er nå blitt eier og administrator for din egen nettside, noe som gir deg visse forpliktelser ovenfor din
Løsningsskisse prøve IT1
Løsningsskisse prøve IT1 Etikk og regler Forklar disse begrepene åndsverk litterært, vitenskapelig eller kunstnerisk visst minimum av original, skapende innsats verkshøyde for å ha opphavsrettslig vern
TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE
TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE JULIE HILL ROA MIRA THOEN FEIRING HVA ER WEBUTVIKLING? SERVER KLIENT HTTP request HTML, CSS, JavaScript HTTP response HTML Innhold CSS Utseende JAVASCRIPT Oppførsel
Brukerdokumentasjon for LabOra portal - forfattere
Brukerdokumentasjon for LabOra portal - forfattere Skin: Dnnbest-Grey-Skin1024 Skin: Metro7 Custom LabOra web-portal er et web-basert publiseringsprogram for publisering av informasjon på hjemmesider.
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.
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. Tar lang tid å laste inn siden: Mye bilder Mange animasjoner
Formatering og bruk av bilder på Hemings hjemmeside
Formatering og bruk av bilder på Hemings hjemmeside Generelt om bildebruk Bilder skaper liv på en side. Mange undersøkelser har vist at øynene dras mot bilder på nettet. Noe av det første våre øyne dras
- reklamebannere mobil og tablet
Spesifikasjoner - reklamebannere mobil og tablet FINN.no Versjon 2.4 Sist oppdatert 16.08.2013 1. Innhold Innhold Introduksjon Målsetning Spesifikasjoner HTML Fysisk størrelse 225 px* Eksempler Størrelser
Hvordan redigere sider i Joomla 3.x
Hvordan redigere sider i Joomla 3.x Side 1/6 For å endre en side/artikkel i Joomla logger du inn. Velkomstskjermen er denne. Klikk på artikler. Eller velg artikler fra toppmenyen: Innhold >> Artikler Siden
Brukermanual. www.bygdekvinnelaget.no
Brukermanual www.bygdekvinnelaget.no Viktige endringer Nye Bygdekvinnelaget.no er lagt opp på en måte der brukere og redaktører står for innhold, mens systemet i enda større grad en tidligere står for
Følgende «tommelfinger-regler» bør (må) følges:
Notat Denne «oppskriften» er basert på erfaringer om hva som går bra når en benytter Word til å lage navigasjonsdiagrammer. Det finnes sikkert andre måter som også gir et brukbart resultat. Det er bare
Oblig 3 Webutvikling
Oblig 3 Webutvikling Oppgave 1 Ta for deg en selvvalgt bedrift (gjerne lokal/mindre) og tenk deg at du hadde fått i oppgave å være en SEO-konsulent for disse i én uke. På denne uken skulle du gjennomført
Radix en enkel innføring
Radix en enkel innføring Dette er en enkel oppskrift på den mest vanlige bruken av Radix. 1 Utgangspunkt: Du har laget en video som du vil dele med dine studenter i Fronter. Du kan da bruke Radix som lagrings-
Webutvikling. Innholdsfortegnelse per Introduksjon til webutvikling. 2. HTML og CSS. 3. Strukturere websider
Webutvikling Innholdsfortegnelse per 22.8.2016 1. Introduksjon til webutvikling Utviklingsmiljø Ditt første prosjekt Lage nettsiden med HTML Knytte til et stilark Lage side nummer to Koble hovedside og
NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012
NCE TOURISM FJORD NORWAY FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012 HACKERS HOUR Hvor langt kommer vi med FjordNett rammeverket? Html CSS Javascript Hva er bestanddelene av en nettside? Html