Digitale dokumenter 2
|
|
- Ludvik Aasen
- 7 år siden
- Visninger:
Transkript
1 Digitale dokumenter 2 Struktur: HTML5 Tine Lodberg Frost Digitale dokumenter Delvis basert på forelesningsnotater av Tor Arne Dahl
2 Dagens program Praktiske informasjon Hva lærte vi siste gang? HTML elementer HTML attributter
3 Praktisk informasjon Nettside knyttet til pensumboka (kodeeksempler): Oppgave 1 på fagsidene Rettelse i publiseringsveiledning ( Ordliste for vevpublisering med XHTML NB! Ikke oppdatert for HTML5, men dekker grunnleggende terminologi for faget.
4 Ny plan for Digitale dokumenter Forelesninger/seminarer Tidspunkt Tema Forelesning nov. Introduksjon og struktur: HTML5 Forelesning nov. Struktur: HTML5 Seminar 1 14./15. nov. HTML5 og presentasjon med CSS Forelesning nov. Struktur og metadata: HTML5 Seminar 2 21./22. nov. HTML5 og metadata
5 HTML5 kort sagt Markeringsspråk Skrives som ren tekst Er definert med et vokabular og en grammatikk i en DTD Inneholder et begrenset antall språklige elementer (tags) Brukes for å angi dokumentets struktur Presentasjon angis med stilark (CSS) Skille mellom dokumentets struktur og presentasjon! Kan serialiseres som enten HTML eller XML XML=strengere syntaks
6 Fakta om HTML HTML markering består av: Elementer (tags) Attributter Innhold Elementene vises ikke i nettleseren, bare innholdet
7 Hvordan lage et element? Vanlig element Start-tag Innhold Slutt-tag <h1>dette elementet er en overskrift</h1> vinkeltegn skråstrek Tomt element Skråstrek <br /> Ingen slutt-tag! vinkeltegn
8 Obligatoriske elementer i HTML5 DTD Rotelement <!DOCTYPE html> <html xmlns=" Hode Kropp </html> <head> </head> <body> </body> <meta charset="utf-8" /> <title>et HTML-dokument</title> <h1>et HTML-dokument</h1> <p>her kommer selve dokumentinnholdet.</p>
9 Hierarki <HTML> <head> <body> <meta /> <title> <h1> <p>
10 Dokumenttre (hierarki) Attributt <HTML> Forelder (Rotelement) xmlns=" w3.org/1999/xhtml" <head> Søsken <body> barn <meta /> <title> <h1> <p> charset="utf-8" Et HTMLdokument Et HTMLdokument Her kommer selve dokumentinnholdet. Innhold
11 Tips Start alltid HTML-dokumentet ditt med <!DOCTYPE html> Det er vanlig å skrive HTML med små bokstaver (bortsett fra DOCTYPE): <h1> </h1> <H1> </H1> Nettsidens innhold skal være i (barn av) <body>. Tenk semantikk først, presentasjon etterpå Lag filnavn med små bokstaver Bruk bindestrek i stedet for mellomrom
12 Inspirasjon fra andre Slik kan man se kildekoden fra andre nettsider: Firefox (3 muligheter) 1. Ctrl+U 2. Høyreklikk i nettleservinduet-> velg View Page Source / Vis Kildekode 3. Firefox meny > Web Developer > Page Source Internet Explorer 1. Høyreklikk i nettleservinduet > View source 2. Velg View i toppmeny > Source Opera 1. Ctrl+U 2. Høyreklikk i nettleservinduet > Source 3. Opera meny > Page > Developer Tools > Source Safari 1. Safari meny > Preferences > Advanced. Klikk "Show Develop menu in menu bar«. Lukk Preferences. Develop menu > Show Page Source
13 Syntaks Elementer Husk både start- og slutt-tag <h1>et HTML-dokument</h1> <h1>et HTML-dokument Nøsting <article><h1>et HTML-dokument</h1></article> <article><h1>et HTML-dokument</article></h1> Attributt navn="verdi" href="
14 Forskjellige typer elementer Strukturelle elementer Blokkelementer (i tidligere versjoner av HTML) Deler siden inn i «seksjoner» Visuelt: Vises på en ny linje og avsluttes med et linjeskift Innhold: Kan generelt inneholde ren tekst, andre blokkelementer og inline-elementer Elementer i løpende tekst (phrasing content) Inline-elementer (i tidligere versjoner av HTML) brukes til å merke opp bokstaver, ord eller setninger i blokkelementer Visuelt: Vises ikke på en ny linje, men flyter som en del av teksten i blokkelementet Innhold: Kan inneholde ren tekst og andre inline-elementer, men ikke blokkelementer
15 Eksempel på elementtyper <article> <h1>dette er en overskrift</h1 <p>dette er et avsnitt. Man kan markere elementer midt i teksten med det som før het <em>inline elementer</em>. Det het de fordi de vises i løpende tekst, i stedet for å lage linjeskift.</p> <p>her starter det et nytt avsnitt. Legg merke til at det er linjeskift mellom avsnittende. Her kan man se noe tekst jeg vil legge<strong>ekstra vekt på</strong>.</p> </article>
16 Overskrifter HTML har seks nivåer med overskrifter <h1> - <h6> Bruk overskrifter hierarkisk etter dokumentets struktur Start med <h1> Hopp aldri over nivåer! Ikke slik: <h1>forord</h1> <p>bla bla bla.</p> <h3>takk</h3> <p>mer bla bla bla.</p>... men slik: <h1>forord</h1> <p>bla bla bla.</p> <h2>takk</h2> <p>mer bla bla bla.</p>
17 Eksempel på et sideoppsett Sidetopp med navigasjon Hovedinnhold Relatert informasjon Sidefot Eksempel:
18 Sidetopp <header></header> Brukes til innledende eller navigerende innhold Inneholder ofte logo, hovednavigasjon, andre lenker og en kanskje en søkeboks. Kan også brukes andre steder, for eksempel ved innholdsfortegnelser. Kan inneholde sitt eget hierarki av overskrifter Inneholder ofte et <nav>-element Eksempel fra Castro og Hyslop Eksempel publiseringsveiledning
19 Navigasjon <nav></nav> Brukes til nettsidens navigasjon Inneholder grupper av lenker Lenkene er gjerne organisert i en liste (mere om lister senere) Nøstes ofte inni <header>-elementet Skal bare brukes på sidens viktigste navigasjon, ikke alle lenker. Eksempel fra Castro og Hyslop Eksempel publiseringsveiledning
20 «Artikler» <article></article> Definisjon fra W3C: The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. Eksempler på innhold i <article>: Forum post Tidsskrift- eller avisartikkel Blogpost Brukerkommentar Interaktiv widget eller gadget Inneholder gjerne mange andre elementer, som: kapitler/seksjoner, avsnitt, lister, video, bilder, figurer mm. Eksempel fra Castro og Hyslop Eksempel publiseringsveiledning
21 Seksjoner <section></section> Brukes til generiske seksjoner med innhold Tematiske grupperinger av innhold Innledes gjerne med en overskrift Eksempler på innhold i <section>: Kapitler Inndeling på en nettsider, som: introduksjon, nyheter og kontaktinformasjon Kan være vanskelig å skille mellom <article> og <section> Eksempel fra Castro og Hyslop Eksempel publiseringsveiledning
22 Relatert informasjon <aside></aside> Brukes til innhold som relaterer seg til hovedinnholdet, men som kan stå på egne ben. Brukes ofte til en sidestolpe (sidebar), men trenger ikke å være det. Eksempler på innhold i <aside>: Boks med lenker til relaterte artikler Blog roll Twitter feed Uthevet sitat i en avisartikkel (pull quote) Reklame Eksempel fra Castro og Hyslop
23 Sidefot <footer></footer> Brukes gjerne som sidefot, men kan brukes flere steder på en side. Fungerer som «footer» for det elementet det er nøstet i, som: <body>, <article>, <aside>, <section> etc. Eksempler på innhold i <footer> er: Lenker til relaterte dokumenter Informasjon om copyright Forfatter/ansvarlig for siden Eksempel fra Castro og Hyslop: <footer> <p><small> Copyright 2011</small></p> </footer>
24 Inndelinger <div></div> (division) Et generelt element, som brukes for å dele inn siden i områder. Har ingen semantisk verdi. Brukes gjerne for å knytte CSS til enkelte områder. Bokmerkes ofte med id-attributtet Eksempel fra Bruce og Hyslop
25 Andre nyttige elementer <p> (paragraph) Starter et nytt avsnitt <address> Brukes til forfatterens kontaktinformasjon F.eks. <figure> Brukes til grafer, figurer, bilder, illustrasjoner etc. <figcaption> kan brukes til å lage bildetekst (caption) <time> Brukes f.eks. til publiseringstidspunkt
26 Elementer i løpende tekst Vektlegge ord Viktig tekst: <em> (emphasize) Eksempel: <p>noen mener at Snorre fordelte storverk mellom Ynglingeættens konger, og at han dermed <em>byttet ut Harald Blåtanns navn med Harald Hardrådes</em>.</p> I nettleser: Noen mener at Snorre fordelte storverk mellom Ynglingeættens konger, og at han dermed byttet ut Harald Blåtanns navn med Harald Hardrådes. Enda viktigere tekst: <strong> Eksempel: <p><strong>snorre Sturlason</strong> hevdet at det var Harald Hardråde som grunnla Oslo</p> I nettleser: Snorre Sturlason hevdet at det var Harald Hardråde som grunnla Oslo
27 Elementer i løpende tekst Hevet skrift: <sup> (superscript) Eksempel: <p>gjøre angrep mot Danmark. <sup>1</sup></p> I nettleser: gjøre angrep mot Danmark. 1 Senket skrift <sub> (subscript) Eksempel: <p> C<sub>14</sub>-dateringer</p> I nettleser: C 14 -dateringer
28 Elementer i løpende tekst <span> Markere tekst, hovedsakelig for å knytte CSS til det: Eksempel <p>her står det noe tekst i et avsnitt, hvor jeg ønsker å marker akkurat <span class="obs">dette<span> ordet på en spesiell måte.</p> <small> «Det som står med smått» Informasjon om copyright og slike ting <kbd> (Keyboard input) Brukerinstruksjoner, for eksempel i veiledning til bruk av programvare eller lignende.
29 Punktlister <ul> (unordered list) Hvert enkeltpunkt er et <li>(list item)-element Eksempel: <h1>middelalderen</h1> <p>man har funnet spor etter:</p> <ul> <li>arkitektur</li> <li>kunst </li> <li>kultur </li> </ul>
30 Nummererte lister <ol> (ordered list) Hvert enkeltpunkt er et <li>-element (som i punktlister) Eksempel: <h1>middelalderen</h1> <p>middelalderen deles ofte inn i tre ulike epoker:</p> <ol> <li>den tidlige middelalder</li> <li>høymiddelalderen </li> <li>senmiddelalderen </li> </ol>
31 Lister med flere nivåer Vi kan kombinere ulike listetyper i flere nivåer <h1>middelalderen</h1> <p> Man har funnet spor etter:</p> <ul> <li>arkitektur</li> <li>kunst <ol> <li>mye bruk av farger</li> <li>dekor, skulpturer og malerier</li> </ol> </li> <li>kultur <ol> <li>bøker</li> <li>instrumenter</li> <li>gjøglere og teater</li> </ol> </li> </ul>
32 Attributter De fleste HTML-elementer kan ha ett eller flere attributter Eksempel: <a href=" til HiOA</a> Attributter er par av navn og verdi Verdien skrives med anførselstegn rundt Gir ekstra informasjon om elementet Brukes ofte som knagger til CSS Digitale dokumenter
33 Attributter id Unik ID (dvs. må være unikt i dokumentet) Brukes til bokmerker/navigasjon Kan brukes som CSS-selektor, men det anbefales ikke. class Brukes ofte til å knytte CSS til grupper av elementer Gjør det enkelt å endre utseende på elementer som tilhører samme klasse. Velg navne som har semantisk verdi IKKE class="blue" (du endrer kanskje mening om fargen i morgen!) Kan brukes med et sett forhåndsbestemte verdier fra microformats.org title Brukes til å gi elementer en merkelapp som synes når man holder musen over (tool tip). Også nyttige for universell utforming
34 Eksempel på bruk av id <article> <section> <h1 id="kap1">kapittel1</h1> <p>her kommer første avsnitt i kapittel 1.</p> </section> <section> <h1 id="kap2">kapittel2</h1> <p>her kommer første avsnitt i kapittel 1.</p> </section> </article> Eksempel publiseringsveiledning
35 Eksempel på bruk av class <article class="architect" role="main"> <h1 id="gaudi">barcelona's Architect</h1> <p>antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p> </article> <section class="project"> <h2 id="sagrada-familia" lang="es">la Sagrada Família</h2> <p>...</p> </section> <section class="project"> <h2 id="park-guell">park Guell</h2> <p>...</p> </section> Eksempel hentet fra Castro og Hyslop
36 Hypertekstlenker til eksterne nettsider Elementet <a> med attributtet href brukes generelt for å lage hypertekstlenker i HTML href-attributtet angir en URL Lenke til et eksternt nettsted: <p><a href=" Oslo middelalderfestival</a> arrangeres hvert år.</p> I nettleser: Oslo middelalderfestival arrangeres hvert år.
37 Andre lenker Lenke for å sende e-post: <p>send en e-post til <a Frost</a> for mer informasjon</p> I nettleser: Send en e-post til Tine Frost for mer informasjon Lenke til intern id i dokumentet: <a href="#trinn1">trinn 1: Oppretting av en HTML-fil</a> Lenker til et element med id= trinn1. Eksempel: <h2 id="trinn1">trinn 1: Oppretting av en HTML-fil</h2>
38 Lenker Absolutte adresser URL: ublisering.html For interne lenker på et nettsted kutter vi ut protokoll og navn på tjenermaskin Eksempel: <p>lenke til </p> <a href="/bibin/kog1/2013/html/ressurser/publisering.html"> Publiseringsveiledning</a> Lenke til Publiseringsveiledning Kalles en absolutt adresse
39 Lenker Relative adresser Som regel bruker vi relative adresser internt på et nettsted Tenk deg følgende mappestruktur: Ettersom publiseringsveiledningen og ordlisten ligger i samme mappe (ressurser), kan vi adressere slik: <p>lenke til <a href="ordliste.html">ordliste</a></p> Adressere filen fil-1.html i mappen forelesninger fra mappen html: forelesninger/fil-1.html Adressere filen fil-2.html i mappen eksempler fra mappen forelesninger:../eksempler/fil-2.html
40 Bilder <img /> (image) Tomt inline -element Attributter src (source): En URL som angir adressen til bildet Alt (alternative text): En tekstbeskrivelse av bildet som vises dersom nettleseren ikke kan vise bilder. Svært viktig for blinde og svaksynte brukere! (Samt Google og andre søkemotorer.) Eksempel <figure><img src="../bilder/tim_berners_lee.jpeg" alt="bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /></figure>
41 Bildeformater GIF Graphic Interchange Format Komprimering uten tap av informasjon Kan maksimalt inneholde 256 farger (Opprinnelig) patentert Passer best på strektegninger og logoer, eller generelt bilder med store ensfargete bildeflater JPEG Joint Photographic Experts Group Komprimerer med tap av informasjon Kan ha millioner av farger Passer best for fotografier PNG Portable Network Graphics En W3C-standard Komprimering uten tap av informasjon Kan ha millioner av farger God erstatning for GIF
42 Gjenbruk av andre bilder Bilder kan ikke brukes uten tillatelse Tillatelse gis i form av lisens, som f.eks. Creative Commons Finn bilder på Flickr som kan gjenbrukes: Flickr.com > Search > Advanced Search > Klikk av for Only search within Creative Commons-licensed content og start søket Høyre-klikk på bildet og velg størrelse. Høyre-klikk på bildet og velg Save images as... Lagre på M: og i mappen public_html/html5/bilder Oppgi hvem som har tatt bildet og under hvilken lisens
43 Eksempel på bruk av bilde fra flickr <figure> </figure> <img src="../bilder/tim_berners_lee.jpeg" alt="bilde av Sir Tim Berners-Lee, grunnleggeren av WWW" /> <figcaption>bildet er tatt av </figcaption> <a href=" Bojār</a> med <a href=" Creative Commons Navngivelse-Ikkekommersiell-Del på samme vilkår 3.0 Unported lisens</a>
Digitale dokumenter 1
Digitale dokumenter 1 Struktur: HTML5 Tine Lodberg Frost Digitale dokumenter 11.11.2013 Delvis basert på forelesningsnotater av Tor Arne Dahl Dagens forelesning Introduksjon Praktisk informasjon Bakgrunn
DetaljerIntro 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
DetaljerHTML: 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
DetaljerMMT105 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
DetaljerGrunnleggende 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.
DetaljerDigitale dokumenter 3
Digitale dokumenter 3 HTML5 og metadata Digitale dokumenter 18.11.2013 Delvis basert på forelesningsnotater av Tor Arne Dahl Dagens forelesening Praktisk informasjon Oppgave 2 Søkemotoroptimalisering Metadata
Detaljer1. XHTML. Innhold Innledning
Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag XHTML Lene Hoff 19.9.2006 Lærestoffet er utviklet for faget XML Teknologi 1. XHTML Resymé: I denne leksjonen skal vi ta for oss standarden
DetaljerEKSAMEN 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
DetaljerNCE 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
DetaljerEKSAMEN 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
DetaljerINF1040 Oppgavesett 2: Nettsider og XHTML
INF1040 Oppgavesett 2: Nettsider og XHTML (Kapittel 4) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der
Detaljerthe 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
DetaljerOppgave 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
DetaljerIntroduksjon til HyperText Markup Language
Introduksjon til HyperText Markup Language Skrevet av Atle Nes Avdeling for informatikk og e-læring Høgskolen i Sør-Trøndelag Dette er en kort introduksjon til hvordan du kan lage websider med en enkel
DetaljerOblig 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
DetaljerPubliseringsveiledning 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:...
DetaljerOppgavesamling 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
DetaljerOppbygging 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
DetaljerOblig 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
DetaljerOppgave 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
DetaljerOBLIG 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
DetaljerLæringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari
1 2 Læringsmål og pensum TDT4105/4110 Informasjonsteknologi grunnkurs: Uke 35/36 HTML Førsteamanuensis Alf Inge Wang Læringsmål Lære å lage statiske hjemmesider Bilder Lenker Lister Tabeller Skjema for
DetaljerEt forsøk på definisjon
Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michaelp@hio.no) 21/08-16 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner (eksempel
DetaljerSteg 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
DetaljerUtvikling av dynamiske nettsteder med PHP og databaser, høsten 2006
Page 1 Page 2 Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006 Introduksjon Michael Preminger (michaelp@hio.no) 23/08-06 I denne forelesningen: Motivasjon: Hvorfor vi lærer å programmere
DetaljerSENSORVEILEDNING. 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
DetaljerSteg 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
DetaljerUlike bildeformater og komprimering. Ferdighet 7. trinn Produsere og bearbeide
Ulike bildeformater og komprimering Ferdighet 7. trinn Produsere og bearbeide I korte trekk Det finnes mange ulike typer bildeformater, og man må kjenne til noen av dem for å gjøre gode valg når man skal
DetaljerI 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
DetaljerOblig 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
DetaljerEt forsøk på definisjon. Eksempel 1
[Kurssidene] [ ABI - fagsider bibin ] Introduksjon Michael Preminger (michael.preminger@hioa.no) 13/12-13 I denne forelesningen: Utvikling av dynamiske nettsteder med PHP og databaser, våren 2014 Motivasjon:
DetaljerCASCADING 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
DetaljerLæringsmål XML. Markering av tekst. SGML-familien. Forstå prinsippene bak XML og XHTML. Forstå hva XML kan brukes til og hvordan.
Markeringsspråk og XML Læringsmål XML Forstå prinsippene bak XML og XHTML. Forstå hva XML kan brukes til og hvordan.
DetaljerManual 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
DetaljerBrukerveiledning for SI Norge. Publiseringsverktøy for klubbenes hjemmesider
Brukerveiledning for SI Norge Publiseringsverktøy for klubbenes hjemmesider Innhold Hva finner du hvor?...s. 2 Ordliste..s. 3 Innlogging til Umbraco...s. 4 Opprette ny artikkel.s. 5 - Skrive tekst og laste
DetaljerCSS-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
DetaljerHå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
DetaljerCSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS
CSS Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS står for Cascading Style Sheets CSS blir brukt til å bestemme hvordan HTML-elementene skal se ut (farge, størrelse,
DetaljerEt forsøk på definisjon
Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michaelp@hio.no) 18/08-17 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner (eksempel
DetaljerCSS: 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å
DetaljerEt forsøk på definisjon. Eksempel 1
Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michael.preminger@hioa.no) 19/08-15 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner
Detaljerfile:///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
DetaljerLø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
DetaljerOblig 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
Detaljer1. Lage og vise et enkelt XML-dokument
Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lage og vise et enkelt XML-dokument Lene Hoff (revidert av Tore Mallaug) 1.9.2013 Lærestoffet er utviklet for faget XML Teknologi 1. Lage
DetaljerOblig 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
DetaljerCSS: 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
Detaljer(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
DetaljerOBLIG 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
DetaljerHTML-del. 1. <!-- ikke slett min kode, vær så snill --> er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag
HTML-del 1. er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag 2. Grafisk elementer på web skal være a) 72 ppi b) 144
DetaljerI denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.
JS: Hei JavaScript! Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon I denne oppgaven blir du introdusert for
DetaljerOppsummering 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
DetaljerWordPress for transmark-subsea.com
WordPress for transmark-subsea.com Nettsiden nås på følgende adresserer: Før lansering: http://transmark.wpengine.com Etter lansering: http://transmark-subsea.com WordPress for transmark-subsea.com Side
DetaljerKF Lokal personalhåndbok - brukerveiledning for redaktør
KF Lokal personalhåndbok - brukerveiledning for redaktør Innhold 1. KF Lokal personalhåndbok og KF Infoserie... 2 2 Din rolle - Redaktør... 4 3 Skriv lokal tekst... 4 4 Lag lenker i lokal tekst... 6 5.
Detaljer1.2 Dynamiske, tjenerbaserte og interaktive nettsteder
Kapittel 1 Innledning og motivasjon 1.1 Innledning Mye av dagens virksomhet på WWW, alt fra nettbanker til bibliotekkataloger, er dynamisk, interaktiv og databasestyrt. Alle som leser denne boken har brukt
DetaljerI denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.
JS: Hei JavaScript! Introduksjon Web Introduksjon I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Steg 1: Bruke
DetaljerForsvunnet 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
DetaljerUB Intranett Brukerveiledning For WIKI/Confluence
UB Intranett Brukerveiledning For WIKI/Confluence NTNU UB 20-07-13 Roar Storleer Innholdsfortegnelse HVORDAN KOMME I GANG?... 3 HJELP BRUKERMANUALER - VEILEDNINGER... 3 INNLOGGING... 4 ÅPNINGSSIDE FOR
DetaljerI denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.
Hei JavaScript! Introduksjon Web Introduksjon I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Steg 1: Bruke JS Bin
DetaljerGruppeoppgave i dag. Tilgjengelige nettsteder. Fordel roller i gruppa. Skrekkeksempler. En del ting å tenke på. Leselist Satellite fra Bojo as
Gruppeoppgave i dag Tilgjengelige nettsteder 23. August 2007 Kirsten Ribu Begynn å planlegge nettstedet. Hva skal det inneholde? Hvor mange sider? Hvordan skal navigeringen være? Tegn opp hvordan man lenker
DetaljerBusinesscatalyst 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
DetaljerHø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
DetaljerNy på nett Internett. Bruk av nettleser.
Ny på nett Internett. Bruk av nettleser. 180311 Litt film Hva er internett? Verdensomspennende nettverk av datamaskiner Mange forskjellige typer tjenester Informasjon Kommunikasjon Først: litt om sikkerhet
DetaljerVedlikeholde 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
DetaljerHvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)?
Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)? Av Ole Petter Vik, Asker Versjon 2.3-24.02.2012 RSS (Really Simple Syndication, på norsk Levende bokmerker) er en metode informasjonsutgivere
DetaljerWebutvikling 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å
DetaljerVeileder i bruk av GoodReader
RISØR KOMMUNE Veileder i bruk av GoodReader Innhold 1. Laste ned dokument fra kommunens hjemmeside til GoodReader... 2 2. Bruke GoodReader... 7 3. Redigere filnavn... 8 4. Opprette kataloger / mapper...
Detaljeren 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
DetaljerKursdokumentasjon 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
DetaljerDen beste måten hvis du skal endre allerede eksisterende artikler
OPPLÆRING I NETTPUBLISERING MED JOOMLA 3 Sist oppdatert: 2. October 2018 13:49 redigering fra FORSIDEN Den beste måten hvis du skal endre allerede eksisterende artikler Side 2 Innhold Forsiden - redigere
DetaljerBrukerdokumentasjon 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.
DetaljerEKSAMEN / 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
DetaljerBrukerveiledning http://www.hovikif.no/ Bruk av siden. Når du går inn på siden får du opp følgende bilde:
Brukerveiledning http://www.hovikif.no/ Bruk av siden Når du går inn på siden får du opp følgende bilde: Øverst i høyre hjørne kan du endre størrelsen på teksten og søke etter lagrede artikler. De enkelte
DetaljerVis filer fra banken Filoverføring forenklet
Vis filer fra banken gir deg en oversikt over de filer som kan hentes fra banken. Dette forutsetter som regel at du tidligere har opprettet en filbestilling. Bestillingen opprettes via Bestill fil fra
DetaljerWeb fundamentals. Web design. Frontend vs. Backend 17.01.2008. Webdesign 17. januar 2008 3. Monica Strand
Web fundamentals Webdesign 17. januar 2008 Monica Strand Webdesign 17. januar 2008 1 Web design Fagområdet Web design inneholder flere disipliner Grafisk design Informasjonsdesign Brukergrensesnittdesign
DetaljerINF1040 Oppgavesett 4: CSS
INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett
Detaljerfile:///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
DetaljerDRI1002 IKT og Informasjonssøking Våren forelesning 16. Januar Arild Jansen, Avd. for forvaltningsinformatikk, UiO
DRI 2010 Internett, informasjonssøking og kildekritikk Hovedpunktene på forelesningen Forelesninger/seminarer og obligatoriske oppgaver Overblikk over emnets ulike temaer og sammenheng mellom dem: Grunnleggende
DetaljerKom i gang. Nå er det enklere en noensinne å redigere hjemmesiden din med Plone CMS. 17. mars 2010
Kom i gang Nå er det enklere en noensinne å redigere hjemmesiden din med Plone CMS. 17. mars 2010 Innholdsfortegnelse Introduksjon til Bedrift Online 4 Web-basert publiseringsverktøy 4 Hva du trenger 4
DetaljerBrukermanual. 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
DetaljerCSS: 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
DetaljerNorskavdelingen ALFA A1 A2 B1 B2
Voksenopplæringen i Skien Norskavdelingen IKT plan; læringsmål og progresjon ALFA A1 A2 B1 B2 - slå på/av PC - lære innlogging; brukernavn - lære å forstå skrivebordet - bruk av hodetelefoner - øve bruk
Detaljer6105 Windows Server og datanett
6105 Windows Server og datanett Denne øvingen forutsetter at du har gjort disse øvingene tidligere: Labøving 7b Skriveradministrasjon Laboving 9a Installere og konfigurere webtjeneren IIS I denne øvingen
DetaljerFø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
DetaljerPUBLISERING PÅ WWW.HIT.NO
2. 2. 2011 HØGSKOLEN I TELEMARK PUBLISERING PÅ WWW.HIT.NO Publisering på www.hit.no Frode Evenstad 1 Innholdsfortegnelse 2 Komme i gang...3 2.1 Logge inn...3 2.2 Verktøylinja...4 3 Nettside...5 3.1 Brødtekst...5
DetaljerMarkeringsspråk og XML Nettsider og XHTML
Markeringsspråk og XML Nettsider og XHTML Det var en gang og snipp, snapp, snute, så var det eventyret ute. Læreboka kapittel 3 og 4 5. september 2007 XML og XHTML XML = EXtensible
Detaljerpraktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS
DOM og praktiske eksempler Gløer Olav Langslet Sandvika VGS Høst 2013 Informasjonsteknologi 2 DOM Document Object Model Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller
DetaljerBrukerveiledning NHO digitale håndbøker. Veileder
Brukerveiledning NHO digitale håndbøker Veileder Innhold 1. Velg håndbok/opprett ny 2. Bestill 3. Velg pakke og faktura 4. Opprette håndbok 5. Innstillinger 6. Legge til/fjern kapitler 7. Tilpass innhold
DetaljerDigitale bilder. Det er i hovedsak to måter å representere digitale bilder på: rastergrafkk (punkter) og vektorgrafkk (linjer og fater).
Høgskolen i Østfold Digital Medieproduksjon Oppgave T4/Digitale bilder Uke 38/23.09.10 Jahnne Feldt Hansen Digitale bilder Det er i hovedsak to måter å representere digitale bilder på: rastergrafkk (punkter)
DetaljerIntroduksjon til WordPress 2013
Introduksjon til WordPress 2013 Opplæring i WordPress ved UiT Norges arktiske universitet 09.12.2013 Avdeling for IT Flickr: doug88888, ytwhitelight INNHOLDSFORTEGNELSE Kontakt... 1 1 Opprette en WordPress
DetaljerInnhold. Bruksanvisning for Zotero (oppdatert 11/11/2017)
Bruksanvisning for Zotero (oppdatert 11/11/2017) Zotero er et program som brukes til å samle, spare og organisere referanser bøker, bokkapittel, artikler, websider, etc. Du kan lage samlinger med referanser
DetaljerBrukerveiledning wikispaces. Kursholder Kari Saasen Strand
Brukerveiledning wikispaces Kursholder Kari Saasen Strand Våren 2011 2 Innhold Hvordan lage en wiki?... 4 Opprette konto.... 4 Rediger din side... 5 Manage wiki... 5 Rediger din velkomstside... 6 Verktøymeny...
DetaljerLa oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer!
Lesson 4 CSS 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
DetaljerWEBUTVIKLING OBLIG 4. Installasjon
WEBUTVIKLING OBLIG 4 Installasjon 1. Jeg lastet ned MAMP gratis fra www.mamp.info og installerte på maskinen. Trykker så på Start Server og ser at det fungerer når Apache Server og MySQL Server lyser grønt.
DetaljerTilbakestille nettleser
Tilbakestille nettleser Dersom nettbanken ikke vises eller fungerer som den skal, hjelper det ofte å slette midlertidige filer i din nettleser. Midlertidige filer er informasjon som lagres hver gang du
Detaljerversjon 1.1 Brukermanual
Side 1 05.11.2004 versjon 1.1 Brukermanual Side 2 05.11.2004 Beskrivelse av IKT-verktøy for strukturering og organisering av referanser til store mengder informasjon. GrandView er et program for strukturering
Detaljerrunsjanistenes rbund HJEMMESIDE på TNTURNETT FoR TELEPENSJONISTENE S LANDSFORBUND TELEPENSJONISTENE.NO
rbund runsjanistenes TELEPENSJONISTENE.NO HJEMMESIDE på TNTURNETT FoR TELEPENSJONISTENE S LANDSFORBUND Ord og begreper som en redaktør må forholde seg til Utarbeidet av: Kjell Engen Mailadresse: kjellengen@online.no
DetaljerOblig 4 Webutvikling. Oppgave
Oblig 4 Webutvikling Oppgave Lag din egen Wordpress- site der du tester ut CMS- systemet. Det å lage egne templates fra bunnen kan være noe komplisert, så det holder for dette prosjektet om dere modifiserer
DetaljerInnhold. Bruker manual BlueprintEasy PDF tagger. versjon: P a g e
Innhold INNHOLD... 1 INTRODUKSJON... 2 INSTALLASJON... 2 LAGE PRODUKT LISTER / BILDER... 2 VELG FIL LOKASJON (DIRECTORY)... 2 LAGE BILDER / IKONER / SYMBOLER... 2 EXCEL ARK / PRODUKT LISTE... 3 WEB LINK
DetaljerJavascript. Mer om layout
Javascript. Mer om layout Kirsten Ribu 04.10.04 Kirsten Ribu - Webpublisering - HiO -2004 1 Men først. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-)
Detaljer