DKDM2: Introduksjon og bakgrunn

Oversikt over dagens forelesning

• Undervisningsform
• Fagsidene
• Pensum
• Innlevering
• Forelesninger
• Internett, hypertekst og World Wide Web (WWW)
• Markeringsspråk
• XHTML – en liten start

Undervisningsform

• Forelesninger og øvelser: torsdager kl 17-19
• NB ONSDAG 3.februar - studietur til Torshov bibliotek

Fagsidene

http://www.jbi.hio.no/bibin/dkdm2/2010/dkdm2_plan.html

HiO > Enheter > JBI > Fagsider - DKDM

Pensum

Se fagsiden.

Innleveringer

• Arbeidskrav 1
• Arbeidskrav 2
• Eksamen

Forelesninger

• XHTML
• CSS
• Universell utforming - Torshov bibliotek
• Dreamweaver
• Nettdesign - Sigrun Gill
• Informasjonsarkitektur - Søking og navigering
• Brukervennlighet

Verktøy

• XHTML-dokumenter kan skrives i en hvilken som helst teksteditor som lagrer ren tekst
  • Vi skal bruke Windows-programmet Notisblokk (Notepad)
  • Notisblokk finnes på alle Windows PCer. Start > Kjør > notepad
  • TextPad kan anbefales
  • Senere i faget skal vi bruke Dreamweaver
• XHTML-dokumenter kan vises i hvilken som helst nettleser
  • Microsoft Internet Explorer, Opera, Firefox, ...

Håndkoding versus verktøy

• Pedagogisk
• XHTML er ikke WYSIWYG
  • WYSIWYG = What You See Is What You Get
  • Gjelder ikke på WWW
  • Kan ikke forutsi brukernes nettleser, skjerm og operativsystem
• Brukes i praksis

World Wide Web

• Tim Berners-Lee, CERN, 1990
  • Mål: Deling av informasjonsressurser på tvers av teknologiske plattformer
  • URL (Uniform Resource Locator)
  • HTTP (HyperText Transfer Protocol)
  • HTML (HyperText Markup Language)
• Nytt fokus på tre «gamle» teknologier
  • Internett
  • Hypertekst
  • Markeringsspråk

Internett

• «Et nettverk av nettverk»
  • Lokale nettverk koblet sammen til et globalt
  • TCP/IP er kommunikasjonsprotokollen for dataoverføring mellom maskiner
• Startet som ARPAnet i USA 1969, finansiert av det amerikanske forsvarsdepartementet
• Internett er ikke det samme som World Wide Web

Internett (forts.)

• WWW er en tjeneste på Internett som bruker protokollen http
• Andre tjenester på Internett:
  • E-post (protokollen smtp)
  • Filoverføring (protokollen ftp)
  • Terminalemulering for innlogging på eksterne maskiner (protokollen telnet)
  • Usenet nyhetsgrupper (protokollen nntp)

Hypertekst

• Omtalt som idé av Vannevar Bush i 1945
  • Artikkelen As We May Think
• Omtalt ved navn av Ted Nelson i 1965.
• Ikke-sekvensiell tekst, i motsetning til tradisjonelle tekster som for eksempel bøker
  • Det er ingen forhåndsdefinert rekkefølge som teksten skal leses i
  • Leseren velger selv
• WWW er et hypertekstsystem

Hypertekst-eksempel¹

• A, B, C, D, E og F er tekstsider
• Hypertekststrukturen har seks noder og åtte lenker
• Leseren starter med siden A
• Flere mulige lesemåter:
  • A → B → C → F → E → D
  • A → B → E → D
  • A → E → D
  • A → D
  • ...

Slik virker WWW

• Nettleser
  • Microsoft Internet Explorer, Opera, Firefox, Netscape, Safari m.fl.
  • Håndholdte enheter: Mobiltelefoner, PDA (Personal Digital Assistant) m.m.
  • Utstyr for blinde og svaksynte
• Webtjener
  • En maskin på Internett satt opp med webtjenerprogramvare
  • Apache, Microsoft Internet Information Server m.fl.

URL (Uniform Resource Locator)

• Angir adressen til en ressurs på WWW
• Eksempel: http://www.jbi.hio.no/bibin/dkdm2/2010/dkdm2_1.html
  • URL til denne forelesningspresentasjonen

Markeringsspråk 1: SGML

• Utviklet av Charles F. Goldfarb m.fl. hos IBM på 1970-tallet
• Akseptert som en ISO-standard for dokumentutveksling i 1986 (ISO 8879)
• En samling regler for hvordan man lager markeringsspråk
• Strukturen markeres med tagger (<eksempel>, </eksempel>)
• SGML-baserte dokumenter lagres som ren tekst
• Et markeringsspråk – en applikasjon av SGML – beskrives i en DTD (Document Type Definition)

Markeringsspråk 2: HTML

• HTML (HyperText Markup Language): markeringsspråk for nettsider
• Definert av Tim Berners-Lee i 1990
• Kommet i flere utgaver, den siste var HTML 4.01
• HTML er et markeringsspråk og en applikasjon av SGML – beskrives dermed også i en DTD
• En webstandard som er publisert og vedlikeholdt av W3C

World Wide Web Consortium (W3C)

• URL: http://www.w3.org/
• Opprettet oktober 1994 ved MIT (Massachusetts Institute of Technology)
• Ledes av Tim Berners-Lee
• Skal sikre felles standarder for WWW-teknologien
• Både akademiske og kommersielle institusjoner er medlemmer
  • For eksempel IBM, Microsoft, Netscape og Sun

Markeringsspråk 3: XML

• XML står for Extensible Markup Language
• XML er en lettversjon av SGML
• W3C-standard
• Har høstet erfaringer fra HTML
  • Er tilpasset dokumentutveksling på World Wide Web
  • Støtter hypertekst og URL-er
• XHTML er en applikasjon av XML

Markeringsspråk 4: XHTML

• XHTML 1.0: W3C-standard i 2000
• «En reformulering av HTML 4 i XML»
• Tre varianter:
  • XHTML 1.0 Strict
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset
• Mindre tvetydige syntaksregler
• Det er denne vi skal lære!

XHTML

• Et rent tekstformat
  • Inneholder «pekere» til annen type innhold, slik som bilder, musikk og animasjoner
• Er definert med en grammatikk og syntaks i en DTD
• Inneholder et begrenset antall språklige elementer
• Brukes for å angi dokumentets struktur
  • Presentasjon angis med stilark (Cascading StyleSheets)
  • Skille mellom dokumentets struktur og presentasjon!

Markeringsspråk: En oppsummering

(Illustrasjon av Gerd Berget, 2005)

• HTML er en applikasjon av SGML, XHTML er en applikasjon av XML
• XML er en lettversjon av SGML, og er dermed enklere i bruk
• XML har høstet erfaringer fra HTML
• XHTML er en "reformulering" av HTML i XML

Sentrale begreper: Elementer

• Byggesteinene i XHTML-dokumenter er elementer
• Alle elementnavn skrives med små bokstaver
• Eksempel: <h1>Overskrift</h1>
  • Dette elementet heter h1
  • Elementets innhold er Overskrift
  • Start-tagg: <h1>
  • Slutt-tagg: </h1>
  • Alle elementer må åpnes med en start-tagg og lukkes med en slutt-tagg

Elementer (forts.)

• Elementer uten innhold kalles tomme
  • Det finnes et fåtall tomme elementer i XHTML
  • Eksempel: <br />
    • Lukkes ved å avslutte med en ordskiller og skråstrek i start-taggen

Sentrale begreper: Attributter

• De fleste XHTML-elementer kan ha ett eller flere attributter
• Eksempel: <a href="http://www.hio.no/">Lenke til HiO</a>
  • Attributter er par av navn og verdi
  • Verdien skrives med anførselstegn rundt

Et XHTML-dokument

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1" />
      <title>Et XHTML-dokument</title>
   </head>
   <body>
      <h1>Et XHTML-dokument</h1>
      <p>Her kommer selve dokumentinnholdet.</p>
   </body>
</html>

Forklaringer

Dokumenttypedeklarasjon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Angir hvilken versjon av HTML dokumentet er kodet etter. Her DTD-en for XHTML 1.0 Strict.
Ulike DTD-er er listet på URL: http://www.w3.org/QA/2002/04/Web-Quality.html.en#HTML

html

Dette kalles rotelementet i dokumentet. Kan bare forekomme én gang. html-elementet består av to deler:

head

Inneholder metadata som ikke vises på skjermen

body

Selve dokumentet som vises på skjermen

Elementer i head

meta

I vårt dokument-«skjelett»:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Det er mulig med flere meta-elementer, men dette er obligatorisk. Her angis tegnsettet som benyttes i dokumentet. iso-8859-1 er riktig tegnsett når dokumentet lagres i Windows' standard-tegnsett ANSI

title

Elementet angir en kort beskrivelse av dokumentets innhold, og må bare forekomme én gang

Mer om title-elementet

• Det er svært viktig å finne på en god tittel på dokumentet fordi:
  • Den vises i tittellinjen i nettleseren
    
  • Innholdet i title-elementet er standardnavnet hvis vi lager bokmerke for nettsiden
    
  • Søkemotorer som Google legger mer vekt på treff i title-elementet og tillater også direkte søk

body-elementet

• Nettleseren viser bare elementenes innhold, ikke start- og slutt-tagger
  • Du kan se på kildekoden til et (X)HTML-dokument i alle nettlesere
  • I Microsoft Internet Explorer: Vis → Kilde
• I eksemplene vises bare hvordan elementene benyttes
  • I praksis må de inngå i body-elementet i et fullstendig HTML-dokument

Avsnitt

• p (paragraph)
• Eksempel:
  <p>Middelalderen omtales i historiebøkene som "The Dark Ages". Mange ser for seg denne tidsperioden som en mørk og dyster tid der alt var grått, møkkete, uhygienisk og dystert. Arkeologiske funn viser imidlertid at dette ikke stemmer.</p>
  <p>Man har funnet spor etter: Arkitektur, Kunst (mye bruk av farger samt dekor, skulpturer og malerier), Kultur (bøker, instrumenter, gjøglere og teater). </p>

Avsnitt i nettleseren

Avsnitt: Fullstendig XHTML-eksempel

Whitespace

• Definisjon:
  • Ordskiller
  • Tabulator
  • Linjeskift
• Ekstra whitespace i elementinnhold blir vist som bare én ordskiller i XHTML-sider

Overskrifter

• Det er definert seks nivåer med overskrifter i XHTML
• h1, h2, h3, h4, h5 og h6 (header 1 til 6)
• Eksempel:
  <h1>Middelalderen</h1>
  <p>Middelalderen omtales i historiebøkene som "The Dark Ages". Mange ser for seg denne tidsperioden som en mørk og dyster tid der alt var grått, møkkete, uhygienisk og dystert. Arkeologiske funn viser imidlertid at dette ikke stemmer.</p>

Overskrifter i nettleseren

Overskrift: Fullstendig XHTML-eksempel

Overskrifter og dokumentstruktur

• 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>

Sitater

• blockquote
  • Kan tildeles attributtet cite, som skal være en URL til nettstedet sitatet er hentet fra
• Eksempel:
  <h1>Oslo i middelalderen</h1>
  <p>Snorre Sturlason hevdet at det var Harald Hardråde som grunnla Oslo:</p>
  <blockquote cite="http://www.museumsnett.no/iom/historie/oslosoppkomst.html"><p>"Kong Harald lot sette kaupstad aust i Oslo og satt der ofte, fordi det var godt om forråd der og lett å få hærmannskap i omegnen. Der satt han godt til for å forsvare landet mot danene og også til å gjøre angrep mot Danmark."</p></blockquote>

Sitat i nettleseren

Sitat: Fullstendig XHTML-eksempel

Blokk- og inline-elementer

• Alle elementene hittil er blokk-elementer
  • Visuelt: Vises på en ny linje og avsluttes med et linjeskift
  • Innhold: Kan generelt inneholde ren tekst, andre blokkelementer og inline-elementer
• Inline-elementer 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

Inline-elementer - vektlegging av 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.

Inline-elementer - vektlegging av ord (forts.)

• 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

Inline-elementer - hevet og senket skrift

• Hevet skrift: sup (superscript)
  • Eksempel: <p>gjøre angrep mot Danmark. ¹</p>
  • I nettleser: gjøre angrep mot Danmark.¹
• Senket skrift sub (subscript)
  • Eksempel: <p> C₁₄ dateringer</p>
  • I nettleser: C₁₄ dateringer

Inline-elementer i nettleseren

Inline-elementer: Fullstendig XHTML-eksempel

Velformet XHTML

• I XHTML må elementer være nøstet riktig
  • Hvis et element åpnes i et annet element, må det lukkes innenfor det samme elementet
• Feil: <p><em>Pass deg for <strong>hunden!</em></strong></p>
• Riktig: <p><em>Pass deg for <strong>hunden!</strong></em></p>

Lister

• Punktlister
• Nummererte lister
• Definisjonslister

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>

Punktliste i nettleseren

Punktliste: Fullstendig XHTML-eksempel

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>

Nummerert liste i nettleseren

Nummerert liste: Fullstendig XHTML-eksempel

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>

Flernivåliste i nettleseren

Liste med flere nivåer: Fullstendig XHTML-eksempel

Definisjonslister

• dl (definition list)
  • For definisjonstermer brukes elementet dt (definition term)
  • For beskrivelsen brukes dd (definition description)
• Eksempel:
  <h1>Ruinene i Gamlebyen</h1>
  <dl>
  <dt>Clemenskirken</dt>
  <dd>Rundt år 1100 ble kirken påbegynt. Det ble da reist en toskipet kirke i ...</dd>
  <dt>Korskirken</dt>
  <dd>Sognekirken ble nevnt første gang i 1248. Det har vært en liten enskipet ...</dd>
  </dl>

Definisjonsliste i nettleseren

Definisjonsliste: Fullstendig XHTML-eksempel

Hvorfor bruke definisjonslister?

• Semantisk markering
• Google bruker blant annet definisjonslister til å gi svar på søk på formen define: uttrykk

Øvelser

Start arbeidet med ditt nettsted. Det kan handle om hva som helst, for eksempel en hobby, forfatter, artist, deg selv el.l. Bruk elementene fra forelesningen (lister, overskrifter, avsnitt, osv.)

Instrukser for hvordan du kommer i gang finner du under fagsidene på HiO WWW

Bokmerker

• Du kan legge inn bokmerker i dokumentet ved å bruke attributtet id på et hvilket som helst XHTML-element
  • Ofte passer det å legge inn bokmerke til en underoverskrift eller referanse
  • Eksempel: <p id="ref1"> Sitatet er hentet fra Snorre Sturlasons bok "Heimskringla".</p>
  • NB! Navnet på bokmerket må være unikt i dokumentet

Referere til bokmerker

• Vi kan referere til et bokmerke ved å bruke inline-elementet a (anchor)
  • Innholdet i elementet er en tekst som beskriver bokmerket i kontekst
  • Vi bruker attributtet href for å angi navnet på bokmerket
    • Attributtets verdi skal være navnet på bokmerket med tegnet # foran
  • Eksempel: <p>(...) Der satt han godt til for å forsvare landet mot ... Danmark <a href="#ref1">¹</a>.</p>
  • I nettleser: (...) Der satt han godt til for å forsvare landet mot ... Danmark. ¹

Hypertekstlenker

• Elementet a med attributtet href brukes generelt for å lage hypertekstlenker i XHTML
  • href-attributtet angir en URL
  • Lenke til et eksternt nettsted:
    <p><a href="http://www.middelalderfestivalen.no/"> Oslo middelalderfestival</a> arrangeres hvert år.</p>
    • I nettleser: Oslo middelalderfestival arrangeres hvert år.

Hypertekstlenker (forts.)

• Lenke for å sende e-post:
  <p>Send en e-post til <a href="mailto:oslo.ladegaard@sensewave.com">Oslo Ladegård</a> for mer informasjon</p>
  • I nettleser: Send en e-post til Oslo Ladegård for mer informasjon

Absolutte adresser

• URL: http://www.jbi.hio.no/bibin/KoG1vev/forelesninger/vevpublisering-1.html
• For interne lenker på et nettsted kutter vi ut protokoll og navn på tjenermaskin
  • Eksempel: XHTML: <p>Lenke til <a href="/bibin/KoG1vev/forelesninger/vevpublisering-1.html">forrige forelesning</a></p>
  • Lenke til forrige forelesning
  • Kalles en absolutt adresse

Relative adresser

• Som regel bruker vi relative adresser internt på et nettsted
  • Ettersom denne og forrige forelesningspresentasjon ligger i samme mappe, kan vi adressere slik:
    <p>Lenke til <a href="vevpublisering-1.html">forrige forelesning</a></p>

• Adressere filen fil.html i forelesninger fra KoG1vev: forelesninger/fil.html
• Adressere filen fil.html i eksempler fra forelesninger: ../eksempler/fil.html

En liten avsporing: Entiteter

• Noen spesialtegn må kodes i XHTML
  • Eksempel: Aschehoug &amp; co
  • Blir: Aschehoug & co
  • &amp; kalles en entitet
• Entiteter må brukes for tegn som har spesiell betydning i XHTML
  • &amp; for & (tegnet er reservert for entiteter, så vi må si eksplisitt at vi mener tegnet)
  • &lt; for < (tegnet er reservert for tagger i XHTML)
  • &gt; for > (tegnet er reservert for tagger i XHTML)

Validering

• Bruk W3Cs valideringstjeneste for å sjekke at en nettside er korrekt XHTML
• URL: http://validator.w3.org/

Øvelser

Fortsett arbeidet med ditt nettsted. Legg inn noen lenker. Sjekk at siden kan valideres.