Digitale dokumenter 2

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>