Markeringsspråk og XML

Like dokumenter
Markeringsspråk og XML Nettsider og XHTML

Markeringsspråk og XML

Markeringsspråk og XML

Læringsmål XML. Markering av tekst. SGML-familien. Forstå prinsippene bak XML og XHTML. Forstå hva XML kan brukes til og hvordan.

XML og XHTML. Hva er nå egentlig denne teksten? Et litt mer avansert XML-eksempel. Et meget enkelt XML-eksempel. For å få fortalt hva teksten er

Nettsider og XHTML. SGML-familien. Hvordan lage et nettsted

Markeringsspråk og XML

1. XHTML. Innhold Innledning

INF1040 Oppgavesett 2: Nettsider og XHTML

Intro til WWW, HTML5 og CSS

Stilark Cascading Style Sheets - CSS

Stilark Cascading Style Sheets - CSS

INF1040 Oppgavesett 5: XML

Grunnleggende om websider og HTML-kode

1. Lage og vise et enkelt XML-dokument

HUMIT1731. Tekstkoding. Koding/merking av tekst Uke 35. Tekster som teknologiske produkter. Koding/merking på flere nivå. Utvikling av notesystemet

Tabeller. Tabeller på nettsider. Tabell eksempel 2. Tabell eksempel 1. <table> <tr><th>overskrift1</th>< th>overskrift2</th><th>overskrift3</th></tr>

Oppsummering 2008 del 1

Oppsummering 2008 del 1

INF1040 Digital representasjon Oppsummering

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012

Web fundamentals. Web design. Frontend vs. Backend Webdesign 17. januar Monica Strand

Steg 1: Vi starter fra toppen

XML. Figur Et eksempel på et XML-dokument

Brukermanual til Domenia Norges adminløsning

Rammer. Mer om Javascript

the web Introduksjon Lesson

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.

Løsningsskisse prøve IT1

OBLIG 1 - WEBUTVIKLING

Introduksjon til HyperText Markup Language

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

INF1040 Oppgavesett 4: CSS

LO130A Webpublisering. Forelesning

Steg 1: Felix har forsvunnet!

EKSAMEN Web-publisering

CSS-formatering: stilark med kommentarer

(X)HTML, CSS og JavaScript HTML. Det første dokumentet Grunnleggende programmering i Java Monica Strand 26.

Dobbelklikk på program-ikonet!

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.

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari

Stilark "Cascading Style Sheets" CSS

Forsvunnet katt webside

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

MMT105 Internettprogrammering Uke 44, høst 2007

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.

CASCADING STYLESHEETS (CSS)

Et forsøk på definisjon

Stilark "Cascading Style Sheets" CSS

Kursdokumentasjon for Dreamweaver

1. XML Grunnlag

Et forsøk på definisjon. Eksempel 1

Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006

Brukerdokumentasjon for LabOra portal - forfattere

EKSAMEN. Elektronisk publisering. INNFØRING MED PENN, evt. trykkblyant som gir gjennomslag

Håkon Tolsby Håkon Tolsby

Publiseringsveiledning for

Oppbygging av innhold på responsive nettsider.

Høgskoleni østfold EKSAMEN

Høgskolen i Telemark EKSAMEN Webpublisering (inkludert denne) Hjelpemiddel: Ingen

BRUK AV TEKSTEDITOREN

XML Schema. David Massey MBIB

Dette er en demonstrasjonsside som vi skal bruke for å se litt nærmere på HTTP protokollen. Eksemplet vil også illustrere et par ting i PHP.

Oppgavesamling til Webutvikling < >

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

1.2 Dynamiske, tjenerbaserte og interaktive nettsteder

HTML: Del inn nettsiden

Semistrukturerte data og XML

TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

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.

WordPress for transmark-subsea.com

Digitale dokumenter 1

Innstillinger. Endre Personalia

Datakunnskap: - utskrift: finne rett skriver skrive ut. Tekstbehandling: - endre tekstutseende: skrifttype og skriftfarge - stavekontroll.

Ordliste 2. Byte (byte) En streng på 8 biter som behandles som en enhet.

Revidert _fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

Del 1: Overgang fra gammel hjemmeside til ny hjemmeside

Oblig 1 Webutvikling av Jon-Håkon Rabben

InfoRed Publisering. - produktbeskrivelse. TalkPool WebServices Postboks Åneby

Javascript. Mer om layout

Håkon Tolsby Håkon Tolsby

Webutvikling oblig 1 Marius Hanssen

Oblig 1 Erlend Hannestad

Brukermanual.

Brukerkurs 16.februar 2012

Brukerveiledning for SI Norge. Publiseringsverktøy for klubbenes hjemmesider

Kravspesifikasjon. Leserveiledning Kravspesifikasjonen består av følgende deler: Presentasjon Om bedriften

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html

CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu

Revidert _fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted.

Den beste måten hvis du skal endre allerede eksisterende artikler

CSS: Endre utseende og stil på tekst Nybegynner

HTML: Publiser nettsiden din. Publiser nettsiden din på Internett. Github. Brukernavn.github.io

Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006

<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01

Manual for innlegging av standard sideinnhold og nyheter via «backend»

Oversikt. Intro til LaTex. Hva du trenger å kunne for å skrive en bra rapport til oblig 1, inf3190 L A T E X. Filens utseende.

En enkel innføring i HTML koding

Brukermanual. Support: Skytterkontoret Tlf: 02419, tast 2 support@dfs.no Velkommen til EPI-Server 7.

Transkript:

Markeringsspråk og XML <?xml version = "1.0" encoding="iso-8859-1"?> <eventyr> Det var en gang og snipp, snapp, snute, så var det eventyret ute. </eventyr> Læreboka kapittel 3 INF1040-XML-1

Rå tekst vs. formatert tekst Standarder som ASCII, ISO 8859-x og Unicode gjelder rå tekst ( plain text ) og omfatter derfor svært lite om hvordan teksten skal vises fram I tillegg til råteksten trengs formateringsdirektiver for å påvirke Valg av glyfer (skrifttype, skriftstørrelse, skriftfarge, ) Bruk av white space (avsnitts- og linjeavstand, innrykk, ) Integrasjon med andre visuelle elementer (bilder, ) INF1040-XML-2

Markeringsprinsipper ( markup principles ) Spesifikk markering (eksempel fra WordStar).PL 66 page length 66 linjer.mt 6 margin top = 6 linjer.mb 9 margin bottom = 9 linjer ^B Innhold INF1040^B switch bold on and off I ^BINF1040^B skal vi blant annet lære Generalisert markering (eksempel fra XHTML) <h1>innhold INF1040</h1> <p>i <strong>inf1040</strong> skal vi blant annet lære </p> Generisk markering (eksempel fra XML) <chapter> <chapter name>innhold INF1040</chapter name> <paragraph>i<span>inf1040</span> skal vi blant annet lære </paragraph> </chapter> INF1040-XML-3

Redigeringsprogrammer (editorer) To hovedtyper ( se eksempler på de følgende lysark) WYSYWYG What you see is what you get Direkte redigering av markeringer De to trinn i moderne tekstbehandling Trinn 1 Generalisert eller generisk markering: Hver enkelt del av teksten deklareres til å være av en bestemt type (eksempelvis overskrift, brødtekst, sitat, opplisting,...) Trinn 2 Formatering: Hver av teksttypene tilordnes en kombinasjon av formater (ofte kalt en stil) Dette prinsippet gjør at dersom man ønsker å endre utseende f.eks. på alle overskrifter, er det tilstrekkelig å endre stilen Skill mellom innhold (hva er teksten) og visualisering (hvordan vise fram teksten) INF1040-XML-4

Eksempel: WYSIWYG i MS-Word I Produserer en fil testeksempel.doc (på proprietært format) INF1040-XML-5

teksteksempel.tex Direkte redigering LaTeX \documentclass[a4paper,12pt]{article} \usepackage[latin1]{inputenc} \begin{document} \section{innhold INF1040} I \textbf{inf1040} skal vi blant annet teksteksempel.dvi teksteksempel.ps lære om hvordan vi i en datamaskin representerer \begin{itemize} \item tekst \item tall \item lyd \item bilder \end{itemize} og hva dette innebærer for \textit{lagring, overføring} og \textit{fremvisning} \end{document} LaTeX dvips INF1040-XML-6

<?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>beskrivelse INF1040</title> </head> <body> <h1> Innhold INF1040</h1> <p>i <b>inf1040</b> skal vi blant annet lære om hvordan vi i en datamaskin representerer</p> <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> <p>og hva dette innebærer for <i>lagring, overføring</i> og <i>fremvisning</i> </p> </body> </html> Direkte redigering XHTML nettleser (browser) INF1040-XML-7

SGML-familien SGML Standard General Markup Language ISO 8879:1985 HTML Hypertext Markup Language XML Extensible Markup Language XHTML Extensible Hypertext Markup Language Other XML-based Languages INF1040-XML-8

XML Extensible Markup Language Et standardisert format for data + beskrivelse av data Standardisert av World Wide Web Consortium se www.w3.org Eksempel se neste lysark INF1040-XML-9

Et meget enkelt XML-eksempel Alle XML-filer begynner slik! startmarkering (starttag) <?xml version = "1.0" encoding="iso-8859-1"?> <eventyr> Det var en gang Tegnsett brukt i XML-filen sluttmarkering (endtag) og snipp, snapp, snute, så var det eventyret ute. </eventyr> element (element) INF1040-XML-10

XML er ikke ment for direkte fremvisning XML-teksten kan oversettes til egnet XHTML (eller et hvilket som helst annet tekstformat) ved hjelp av en XSLT-prosessor, et program som styres av instrukser på en XSLT-fil. (XSLT = Extensible Style Sheet Language Translator) Enkelte moderne nettlesere har en XSLT-prosessor innebygd XSLT-fil CSS-fil XML-fil XHTML-fil XSLTprosessor Nettleser andre formater INF1040-XML-11

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

Velstrukturerte XML-dokumenter Et XML-dokument er sammensatt av elementer, avgrenset med markeringer ( tags ) 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> Sjekk av struktur kan gjøres med http://www.w3schools.com/dom/dom_validate.asp http://www.xml.com/pub/a/tools/ruwf/check.html Er XML-dokumentet på lysark 13 velstrukturert? INF1040-XML-13

Elementene danner en hierarkisk struktur emne emnekode emnenavn emnebeskrivelse INF1040 - Digital representasjon I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer temaliste og hva dette innebærer for stikkord* og stikkord tema* lagring overføring fremvisning tekst tall lyd bilder INF1040-XML-14

Oppbyggingen av et element <elementnavn attributtnavn= "verdi"> tekst og/eller elementer </elementnavn> sluttmarkering Et element må ha både en startmarkering og en sluttmarkering <markering>elementinnhold</markering> Elementer kan ha attributter i startmarkeringen: attributt="verdi" Tomme elementer kan ha en kombinert kombinert start- og sluttmarkering <markering/> Regler for elementnavn 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 tall, skilletegn eller xml, XML, Xml (men med _) Unngå.: De kan lett misforstås startmarkering elementinnhold INF1040-XML-15

Spesielle tegn Tegnene < > & har en spesiell betydning i XML (de brukes som escape -tegn) 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-16

Gyldige XML-dokumenter I utgangspunktet kan markeringer, attributter og verdier velges 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 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 for eksempel med http://www.stg.brown.edu/service/xmlvalid/ Det finnes en mengde standardiserte DTDer for ulike formål elektronisk handel, geografiske informasjonssystemer, elektroniske valg, undervisning, varslingssystemer, INF1040-XML-17

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 vanlig tekst INF1040-XML-18

Et XML-skjema På filen emne.xsd: <?xml version = "1.0" encoding="iso-8859-1"?> xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" <emne xsi:schemalocation="emne.xsd"> <emnekode>inf1040</emnekode> <?xml version="1.0" encoding="iso-8859-1"?> <xs:schema xmlns:xs="http://www.w3.org/2001/xmlschema"> <xs:complextype> <xs:sequence> <xs:element name = "emnekode" type="xs:string"/> <xs:element name = "emnenavn" type="xs:string"/> <xs:element name = "emnebeskrivelse"> <xs:complextype mixed= true > <xs:element name = "tema" type="xs:string" minoccurs= 2 maxoccurs= 10 /> <xs:element name = "stikkord" type="xs:string" minoccurs= 0 maxoccurs= unbounded /> </xs:complextype> </xs:sequence> </xs:complextype> </xs:schema> INF1040-XML-19

To anvendelser av XML Som et lingua franca mellom systemer Endelig en standard! Emneorienterte markeringer må defineres (begge systemer må ha samme oppfatning av <eventyr>) Er tekstiig format alltid hensiktsmessig? Stor datamessig overhead Men: Store muligheter for komprimering Lagring av XML-dokumenter i en database Native XML-database Trenger vi enda en type database? INF1040-XML-20

XML i datalageret og på datanettet XML! XML? XML? Kan også være: Mobiltelefoner Måleinstrumenter Skrivere Tekst-TV. INF1040-XML-21

XHTML - XML-spesialisering for nettsider <?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> <body> <p>hallo, verden!</p> </body> </html> Læreboka kapittel 4 INF1040-XML-22

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 bilde ) web-tjener www.ifi.uio.no index.html INF1040-XML-23

Tre varianter av XHTML For XHTML kan vi velge mellom tre ulike DTDer Transitional Litt romslig DTD som bl.a. tillater elementer og attributter som har med visuell presentasjon å gjøre. Egnet for XHTML som er oppussede versjoner av tradisjonell HTML http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd Frameset DTD som tillater bruk av rammer ( frames ). Omdiskutert teknologi. Ligg unna! http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd Vi skal bruke strict! Strict DTD som utelukker elementer og attributter som har med visuell presentasjon å gjøre dette skal uttrykkes i stiler og stilark http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd INF1040-XML-24

Hva INF1040 ikke dekker Dynamiske nettsider Nettsider som bygges opp on the fly på web-tjeneren, ofte på grunnlag av data som hentes fra en database Forms Formularer som brukeren av nettstedet kan fylle ut Image-maps Klikkbare bilder Klient-programmering Bruk av skriptspråk for å skape liv i nettsiden Java-Applets og ActiveX-controls Små programmer som lastes ned fra web-tjeneren og som utføres på klienten De to første temaene Sikkerhetsaspekter inngår i INF1050 INF1040-XML-25

Den minimale XHTML nettside <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html Angivelse av DTD 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> Angivelse av navnerom <title> En minimal nettside </title> </head> <body> <p>hallo, verden!</p> </body> </html> INF1040-XML-26

Redigeringsverktøy Generelle editorer emacs Notepad (save som "filnavn.html ) Spesielle XHTML/HTML-editorer Dreamweaver Hot Metal Pro Word save as HTML Amaya (W3C open source) Vi skal ikke bruke altfor hjelpsomme spesielle XHTML/HTML-editorer, for vi skal lære XHTML INF1040-XML-27

Validering av XHTML-dokumenter For å kontrollere at et XHTML-dokument er gyldig, kan du bruke valideringstjenesten på http://validator.w3.org Valider alltid dine nettsider! INF1040-XML-28

Publisering av nettsiden (på Ifi) 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://folk.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-29

Strukturen på en nettside Nettsidehode Nettsidekropp Tittel etc. Sideoverskrift Link Brødtekst / bilder <html> <head> nettsidehode </head> <body> nettsidekropp </body> </html> Dato for siste oppdatering Redaktør, med e-post-adresse INF1040-XML-30

Tegnentiteter 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å: < < eller < > > eller > & & eller & I XHTML kan også andre tegn kodes på tilsvarende måte æ æ eller æ ø ø eller ø å å eller å. For konvertering fra Unicode-tegn til heksadesimal, bruk for eksempel http://pioneer.stereo.lu/converter.html INF1040-XML-31

Tegnentiteter eksempel <body> <h1>inf1040 Digital representasjon</h1> <p> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer</p> <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> <p>og hva dette innebærer for lagring, overføring og fremvisning. </p> </body> INF1040-XML-32

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> INF1040-XML-33

Tittel XHTML-element for å gi web-siden en tittel <title> Tittel </title> Inngår i nettsidehodet Påkrevet i XHTML-strict 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-34

Nettsidekropp (forslag) <body> <h1> Sideoverskrift (ofte samme som title) </h1> <p> brødtekst (evt. med linker) </p> <hr /> <p> eventuelle navigasjonslinker <br /> Oppdatert av NN dato, link til NN s epost-adresse </p> </body> Legg merke til mellomrommet foran /. Dette er satt inn av hensyn til enkelte eldre nettlesere. INF1040-XML-35

Vanlige markeringer i nettsidekroppen <h1> </h1> Overskrift. Finnes i 6 nivåer, fra h1 til h6 <p> </p> Paragraf omslutter brødteksten. Nettleseren skiller paragrafer med to linjeskift <br /> Tvunget linjeskift. <hr /> Horisontal Ruler horisontal linje. <!-- dette er en kommentar --> Bemerk at en vanlig CR og LF ignoreres av nettleseren INF1040-XML-36

Nettsidekropp eksempel <body> <h1>inf1040 Digital representasjon</h1> <p> 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 lagring, overføring og fremvisning. </p> <hr /> <p> Oppdatert 28. august 2006 av gerhard&0x0040;ifi.uio.no </p> </body> INF1040-XML-37

Lister Unummerert liste: <ul> <li>...</li> <li> </li> </ul> Nummerert liste: <ol> <li>...</li> <li> </li> </ol> <ul> <li> første element</li> </ul> <li> andre element</li> første element andre element <ol> </ol> <li> første num-element</li> <li> andre num-element</li> 1 første num-element 2 andre num-element INF1040-XML-38

Lister eksempel <body> <h1>inf1040 Digital representasjon</h1> <p> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer</p> <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> <p>og hva dette innebærer for lagring, overføring og fremvisning. </p> </body> INF1040-XML-39

Linker <a href="url">tekst som beskriver linken</a> attributt verdi Eksempel: <body> <h1>inf1040 Digital representasjon</h1> <p> 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.. </p> </body> INF1040-XML-40

Absolutte og relative URLer En absolutt URL er komplett med Internettnode-adresse eks.: http://www.uio.no/studier/emner/matnat/ifi/inf1040/index.html En relativ URL har ingen Internettnode-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 INF1040-XML-41

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> <body>. 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 INF1040-XML-42

Relative URLer eksempel <body> <h1>inf1040 XHTML-kurs</h1> <p> Denne nettsidestrukturen inneholder eksempler på ulik utforming av en nettside </p> <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> </body> INF1040-XML-43

mailto mailto er en spesiell type URL som kaller opp e-post-programmet og setter den oppgitte e-post-adressen inn i TO-feltet. Brukes for å gjøre det enkelt for nettsurferen å sende en e-post. 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> spesialtegnoppsett for @ Publiser ALDRI en e-postadresse i klartekst på en nettside! INF1040-XML-44

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. Angi alltid alt. Beskriver bildet, for eksempel hvis det ikke kan vises INF1040-XML-45

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. Alternativ: Se senere nettsidemal INF1040-XML-46

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: <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-47

Tabeller på nettsider Kolonne1 Kolonne2 Kolonne3 Rad1 data11 data12 data13 Rad2 data21 data22 data23 <table> <tr><th> </th> <th>kolonne1</th><th>kolonne2</th><th>kolonne3</th></tr> <tr><th>rad1</th><td>data11</td><td>data12</td><td>data13</td></tr> <tr><th>rad2</th><td>data21</td><td>data22</td><td>data23</td></tr> </table> se http://www.w3schools.com/html/html_tables.asp INF1040-XML-48

Tabell eksempel 1 <?xml version="1.0" encoding="iso-8859-1"?> <!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>vanlige forkortelser på nettet</title> </head> <body> <h1>vanlige forkortelser på nettet</h1> <table> <tr><th>forkortelse</th><th>lang form</th></tr> <tr><td>afaik</td><td>as Far As I Know</td></tr> <tr><td>imho</td><td>in My Humble Opinion</td></tr> <tr><td>otoh</td><td>on the Other Hand</td></tr> </table> </body> </html> Eksempel fra http://www.htmlhelp.com/reference/html40/tables/table.html INF1040-XML-49

Tabell eksempel 2 <?xml version="1.0" encoding="iso-8859-1"?> <!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>vanlige forkortelser på nettet</title></head> <body> <table> <caption>vanlige forkortelser på nettet</caption> <thead> <tr><th>forkortelse</th><th>lang form</th></tr> </thead> <tbody> <tr><td>afaik</td><td>as Far As I Know</td></tr> <tr><td>imho</td><td>in My Humble Opinion</td></tr> <tr><td>otoh</td><td>on the Other Hand</td></tr> </tbody> </table> </body> Eksempel fra http://www.htmlhelp.com/reference/html40/tables/table.html </html> Mer moderne versjon med flere elementer, egnet for bruk av stilark INF1040-XML-50

Tabeller mer avanserte muligheter Tabellceller kan slås sammen, se for eksempel http://www.htmlhelp.com/reference/html40/tables/colgroup.html Stiler kan brukes til setting av tykkelse og farger på kantlinjer størrelse og farge på teksten polstring ("padding") rundt teksten bakgrunnsfarger INF1040-XML-51

Gode råd om nettsideutforming La nettsiden fortelle en selvstendig historie. Du vet ikke hvor leseren kommer fra, og hvor han drar.. 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! INF1040-XML-52