Hva er nå egentlig denne teksten? XML og XHTML jfr. Cyganski avsnitt 2.4 2.7 Skagestein: Systemutvikling fra kjernen og ut, fra skallet og inn kapittel 13 http://www.w3schools.com/xml/ default.asp http://www.w3schools.com/xhtml/default.asp INF1040 Digital representasjon I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer tekst tall lyd bilder og hva dette innebærer for lagring, overføring og fremvisning. For å få fortalt hva teksten er XML Extensible Markup Language Såkalt plaintext Et standardisert format for data + beskrivelse av data Standardisert av World Wide Web Consortium se www.w3.org Eksempel se neste lysark INF1040-XML-XHTML-1 INF1040-XML-XHTML-2 Alle XML-filer begynner slik! startmarkering (starttag) sluttmarkering (endtag) Et meget enkelt XML-eksempel <?xml version = "1.0" encoding="iso-8859-1"?> <eventyr> Det var en gang og snipp, snapp, snute, så var det eventyret ute. </eventyr> Tegnsett brukt i XML-filen element (element) INF1040-XML-XHTML-3 Et litt mer avansert XML-eksempel <?xml version = "1.0" encoding="iso-8859-1"?> <emne id="ifi12345"> <emnekode>inf1040</emnekode> <emnenavn> Digital representasjon</emnenavn> <emnebeskrivelse>i INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <temaliste> <tema>tekst</tema> <tema>tall</tema> <tema>lyd</tema> <tema>bilder</tema> </temaliste> og hva dette innebærer for <stikkord>lagring</stikkord>, <stikkord>overføring</stikkord> og <stikkord>fremvisning</stikkord>. </emnebeskrivelse> </emne> Vi snakker gjerne om et XMLdokument, selv om det ikke er meningen å skrive det ut på papir. Terminologien understreker imidlertid at XML er et tekstbasert format. INF1040-XML-XHTML-4
Oppbyggingen av et element <elementnavn attributtnavn= "verdi"> tekst og/eller elementer </elementnavn> Regler for element-navn Kan inneholde bokstaver, tall og andre tegn. Ikke-engelske bokstaver er tillatt, men det er ikke sikkert all programvare forstår dem Kan ikke inneholde mellomrom (space) Kan ikke starte med et tall, et skilletegn eller xml, XML, Xml (men med _) Unngå.: De kan lett misforstås Spesielle tegn Tegnene < > & har en spesiell betydning i XML Hvis slike tegn inngår i teksten, må de kodes på en spesiell måte: &tegnnavn; eller &#kodepunkt; altså: < < < > > > & & & x betyr at kodepunktet er angitt i heksadesimal For konvertering fra Unicode-tegn til heksadesimal, bruk for eksempel http://pioneer.stereo.lu/converter.html INF1040-XML-XHTML-5 INF1040-XML-XHTML-6 Velstrukturerte XML-dokumenter Et XML-dokument er sammensatt av elementer, avgrenset med markeringer ( tags ) Et element må ha både en startmarkering og en sluttmarkering <markering>elementinnhold</markering> Tomme elementer kan ha en kombinert kombinert start- og sluttmarkering <markering/> Et XML-dokument skal ha ett eneste rotelement Elementer må være perfekt nøstet (danne en hierarkisk struktur) <m1><m2></m2><m1>, ikke <m1><m2></m1><m2> Elementer kan ha attributter i startmarkeringen: attributt= verdi Sjekk av struktur kan gjøres med Er XML-dokumentet på forrige lysark http://www.w3schools.com/dom/dom_validate.asp velstrukturert? http://www.xml.com/pub/a/tools/ruwf/check.html INF1040-XML-XHTML-7 Gyldige XML-dokumenter I utgangspunktet kan du velge markeringer, attributter og verdier helt fritt. Strengere regler kan pålegges ved hjelp av en Dokumenttypedefinisjon Document Type Definition (DTD) eller et XML-Schema Disse reglene kan blant annet spesifisere lovlige markeringer ( tags ) Et XML-dokument kan da være gyldig i henholdt til en gitt DTD eller et gitt XML Schema Sjekk av gyldighet (validering) kan gjøres med http://www.stg.brown.edu/service/xmlvalid/ Det finnes en mengde standardiserte DTDer for ulike formål elektronisk handel, geografiske informasjonssystemer, varslingssystemer, INF1040-XML-XHTML-8
Eksempel på en Dokumenttypedefinisjon - DTD Dokumenttypedefinisjon på filen emne.dtd: <!ELEMENT emne (emnekode, emnenavn, emnebeskrivelse)> <!ELEMENT emnekode (#PCDATA)> <!ELEMENT emnenavn (#PCDATA)> <!ELEMENT emnebeskrivelse (#PCDATA temaliste stikkord)*> <!ELEMENT temaliste (tema*)> <!ELEMENT tema (#PCDATA)> <!ELEMENT stikkord (#PCDATA)> På filen emne.xml <?xml version = "1.0" encoding="iso-8859-1"?> <!DOCTYPE emne SYSTEM "emne.dtd"> <emne> <emnekode>inf1040</emnekode> Dokumenttypedeklarasjon #PCDATA = Parced Character Data, dvs. tekst SGML-familien SGML Standard General Markup Language HTML Hypertext Markup Language XHTML Extensible Hypertext Markup Language ISO 8879:1985 XML Extensible Markup Language Other XML-based Languages INF1040-XML-XHTML-9 INF1040-XML-XHTML-10 Hvordan lage et nettsted XHTML Extensible Hypertext Markup Language XML med en spesiell DTD egnet for utforming av nettsider se http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd Erstatning for HTML Hypertext Markup Language Viktig bestanddel av Hypertext Transfer Protocol HTTP Nettleser Responsen tolkes og vises av nettleseren http://www.ifi.uio.no/index.html.html filtype XHTML-kodet tekst eller binærfil web-tjener www.ifi.uio.no index.html INF1040-XML-XHTML-11 INF1040-XML-XHTML-12
Sidehode Sidekropp Strukturen på en nettside Sideoverskrift Link Brødtekst / bilder Tittel etc. Navigasjonshjelpemidler Dato for siste oppdatering Redaktør, med e-post-adresse <html> <head> sidehode </head> sidekropp </html> Den minimale XHTML nettside <?xml version="1.0" encoding="utf-8"?> <!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> <title> En minimal nettside </title> </head> Hallo, verden! </html> INF1040-XML-XHTML-13 INF1040-XML-XHTML-14 Validering av XHTML-dokumenter For å kontrollere at et XHTML-dokument er gyldig, kan du bruke valideringstjenesten på http://validator.w3.org Publisering av nettsiden Legg opp en mappe med navn www_docs på brukerområdet ditt (hvis den ikke er der fra før), og gi den tilgangstillatelser 755 Legg XHTML-teksten du vil publisere i mappen www_docs, sørg for at filtypen er html eller htm, og gi filen tilgangstillatelser 644 Nå er nettsiden tilgjengelig under URLen http://heim.ifi.uio.no/~brukernavn/filnavn.html I det øyeblikk du har satt tilgangstillatelsene, er nettsiden offentlig tilgjengelig ved hjelp av nettlesere over hele Internett. Tenk over hva du publiserer! INF1040-XML-XHTML-15 INF1040-XML-XHTML-16
Nettsidehodet Inneholder data som er interessante for nettleseren og andre programvarer (spesielt søkemotorer), men innholdet vises ikke på selve nettsiden <head> <title> En minimal nettside </title>. </head> Tittel HTML-kode for å gi web-siden en tittel <title> Tittel </title> Inngår i sidehodet Brukes i ymse lister og oversikter, f.eks. Favoritter Brukes i søkemotorenes databaser over nettsider Vises vanligvis i øverst i nettleservinduet Vises ikke på selve nettsiden INF1040-XML-XHTML-17 INF1040-XML-XHTML-18 Nettsidekropp (forslag) <h1> Sideoverskrift (ofte samme som title) </h1> brødtekst (evt. med linker) <hr /> navigasjonslinker <br /> Oppdatert av NN dato, link til NN s epost-adresse Vanlige markeringer i sidekroppen <h1></h1> Overskrift. Finnes i 6 nivåer, fra h1 til h6 Paragraf omslutter brødteksten. Skilles fra andre paragrafer med linjeskift <br /> Tvunget linjeskift. <hr /> Horisontal Ruler horisontal linje. <em></em> Emphasis. Uthevet skrift (oftest kursiv) <strong></strong> Uthevet skrift (oftest fet) <!-- dette er en kommentar --> Bemerk at en vanlig CR ignoreres av nettleseren INF1040-XML-XHTML-19 INF1040-XML-XHTML-20
Nettsidekropp eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <br />tekst <br />tall <br />lyd <br />bilder <br />og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. <hr /> Oppdatert 27. august 2004 av gerhard&0x0040;ifi.uio.no korr. 1.sept 2004 Lister Unummerert liste: <ul> <li>...</li> <li></li> </ul> Nummerert liste: <ol> <li>...</li> <li></li> </ol> <ul> korr. 8.sept 2004 <li> første element</li> <li> andre element</li> første element andre element </ul> <ol> <li> første num-element</li> <li> andre num-element</li> 1 første num-element 2 andre num-element </ol> INF1040-XML-XHTML-21 INF1040-XML-XHTML-22 Lister eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer korr. 1.sept 2004 <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> korr. 1.sept 2004 og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. <dl> <dt>...</dt><dd>...</dt> <dt>...</dt><dd>...</dt> </dl> <dl> </dl> Liste med beskrivelser korr. 1.sept 2004 <dt>element 1 </dt> <dd> element1 beskrivelse </dd> <dt>element 2 </dt> <dd> element2 beskrivelse </dd> Element 1 Element 2 element1 beskrivelse element2 beskrivelse INF1040-XML-XHTML-23 INF1040-XML-XHTML-24
<dl> Liste med beskrivelser eksempel <dt>tekst</dt> <dd>både uformaterte og formaterte</dd> <dt>tall</dt> <dd>både heltall og reelle tall</dd> <dt>lyd</dt> <dd>både mono og stereo</dd> <dt>bilder</dt> <dd>både farge og svart/hvitt</dd> </dl> Spesielle tegn Vi husker at tegnene < > & har en spesiell betydning i XML Hvis slike tegn inngår i teksten, må de kodes på en spesiell måte: &tegnnavn; eller &#kodepunkt; altså: < < < > > > & & & I XHTML kan også andre tegn kodes på tilsvarende måte: æ æ æ ø ø ø å å å. INF1040-XML-XHTML-25 For konvertering fra Unicode-tegn til heksadesimal, bruk for eksempel http://pioneer.stereo.lu/converter.html INF1040-XML-XHTML-26 Spesielle tegn eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer korr. 1.sept 2004 <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> korr. 1.sept 2004 og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. INF1040-XML-XHTML-27 Linker <a href="url">tekst som beskriver linken</a> attributt verdi Eksempel: <h1>inf1040 Digital representasjon</h1> I <a href= "http://www.uio.no/studier/emner/matnat/ifi/inf1040/index.html"> INF1040</a> skal vi blant annet lære om hvordan vi i en datamaskin representerer.. INF1040-XML-XHTML-28
Absolutte og relative URLer En absolutt URL er komplett med node-adresse eks.: http://www.uio.no/studier/emner/matnat/ifi/inf1040/index.html En relativ URL har ingen node-adressedel eks.: versjon2.html Nettsiden ligger da i samme filhierarki som nettsiden som inneholder linken. Relativ URL som ikke begynner med / Filbanen er relativ til nivået over nettsiden som inneholder linken Relativ URL som begynner med / Filbanen tar utgangspunkt i roten til filhierarkiet til nettsiden som inneholder linken Relative URLer eksempel <h1>inf1040 XHTML-kurs</h1> Denne nettsidestrukturen inneholder eksempler på ulik utforming av en nettside <ul> <li> <a href="minimal.html">en minimal nettside</a> </li> <li> <a href="versjon1.html">en meget enkel nettside</a> </li> <li> <a href="versjon2.html">en nettside med liste</a> </li> <li> <a href="versjon6.html">en nettside med spesialtegn</a> </li> <li> <a href="versjon7.html">en nettside med link</a> </li> </ul> INF1040-XML-XHTML-29 INF1040-XML-XHTML-30 Strukturen på et nettsted mailto relativ URL underside Hjemmeside index.html link underside underside absolutt URL fremmed nettside Linker innen eget nettsted bør være relative mailto er en spesiell type URL som kaller opp e-postprogrammet (Eksempel: Se neste lysark) Mal for en mailto <a href="mailto:e-post-adresse"> beskrivende tekst for e-post-adresse</a> Eksempel: Oppdatert 27. august 2004 av <a href="mailto:gerhard@ifi.uio.no"> gerhard@ifi.uio.no</a> underside Linker til fremmede sider må være absolutte Det bør alltid være en link tilbake til hjemmesiden spesialtegnoppsett for @ Publiser ALDRI en e-postadresse i klartekst på en nettside! INF1040-XML-XHTML-31 INF1040-XML-XHTML-32
Fremmed nettsted i nytt vindu Hvordan få åpnet fremmed nettsted i nytt vindu? <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head>. </head>. I <a href="http://www.uio.no/studier/emner/matnat/ifi/inf1040/" target="new">inf1040</a> skal vi blant annet. Legg merke til: transitional, ikke strict Bilder på nettsiden <img src="url" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> Eksempel: <img src="binartall.gif" alt="binærtall" width="431" height="273"/> Angi alltid width og height. Da kan nettleseren bygge opp siden raskere. INF1040-XML-XHTML-33 INF1040-XML-XHTML-34 Bilder som utgangspunkt for linker <a href="url"><img src="url" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> Eksempel: <a href="index.html"> <img src="home.gif" alt="hjem" width="40" height="28"/> </a> Det er vanlig å bruke bildet av et hus som symbol for linken til hjemmesiden Bilder som utgangspunkt for linker thumbnails Bilder kan være store og tidkrevende å laste ned. En thumbnail er et lite bilde som gir nettsurferen valget om hun vil se det i full størrelse: <a href="urltilstortbilde"><img src="urltilthumbnail" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> bildetekst/størrelse Eksempel: korr. 1.sept 2004 <a href="storttre.gif"> <img src="litetre.gif" alt="tre" width="40" height="28"/></a> Et vakkert tre [full størrelse 8 kb] INF1040-XML-XHTML-35 INF1040-XML-XHTML-36
Gode råd om sideutforming La nettsiden fortelle en selvstendig historie. Du vet ikke hvor leseren kommer fra, og hvor han drar. Tving ikke brukeren oppover i sidehierarkiet for at han skal kunne komme til neste side. Lag korte, konsise sider. Begrens bruken av inline grafikk. Naturlig brødtekst også for linker: Unngå klikk her! Inkludér alltid en link til hjemmesiden! Generelle editorer emacs Redigeringsverktøy Notepad (save som "filnavn.html ) Spesielle XHTML/HTML-editorer Dreamweaver Hot Metal Pro Word save as HTML Vi skal ikke bruke hjelpsomme spesielle XHTML/HTML-editorer, for vi skal lære XHTML INF1040-XML-XHTML-37 INF1040-XML-XHTML-38