Intro til (x)html Del 1. HUMIT1731 uke35b Kåre A. Andersen 2 En mal … 1. 2. 3. 4. 5. Dette er en mal for DTD XHTML 1.0 Transitional 6. 7. 8. 9. Her kommer.

Presentasjon om: "Intro til (x)html Del 1. HUMIT1731 uke35b Kåre A. Andersen 2 En mal … 1. 2. 3. 4. 5. Dette er en mal for DTD XHTML 1.0 Transitional 6. 7. 8. 9. Her kommer."— Utskrift av presentasjonen:

1 Intro til (x)html Del 1

2 HUMIT1731 uke35b Kåre A. Andersen 2 En mal … 1. 2. 3. 4. 5. Dette er en mal for DTD XHTML 1.0 Transitional 6. 7. 8. 9. Her kommer innholdet… 10. 11.

3 HUMIT1731 uke35b Kåre A. Andersen 3 XML-deklarasjonen Vi har tidligere nevnt at xhtml skal oppfattes som en DTD laget i XML (eXtensible Markup Language). Av den grunn bør alle xhtml-dokument innledes med en XML-deklarasjon I dette tilfellet gis beskjed om at versjon 1 skal brukes, og at tegnsettet er ” iso-8859-1” (med bl.a. de norske tegnene)

4 HUMIT1731 uke35b Kåre A. Andersen 4 Document Type Definition (DTD) Vi har tre xhtml-dokumenttyper xhtml 1.0 Transitional Overgangs-dtd som bl.a. både tillater CSS og tradisjonell formatering f.eks. vha. fonter xhtml 1.0 Strict Krever bl.a. CSS xhtml 1.0 Frameset (Vi kommer tilbake til bruk av rammer…)

5 HUMIT1731 uke35b Kåre A. Andersen 5 Deklarasjon av dokumenttypen Et gyldig xhtml-dokument må ha en referanse til URL’en hvor DTD’en er lagret! NB! Sjekk skrivemåten (feil i noen utgaver av læreboka hvor det står WC3 istedenfor W3C)

6 HUMIT1731 uke35b Kåre A. Andersen 6 XML navnerom (Namespaces) Alle XML-dokument har et såkalt rotelement: Dette elementet kan ha et attributt som forteller hvilke elementnavn som tilhører navnerommet Men også andre elementsett kan brukes i samme dokument, og hvis ulike sett definerer samme elementnavn oppstår konflikt. Dette unngås vha. navnerom: jfr. vs.. Vi skal ikke gå i detalj her, bare anbefale at attributtet tas med…

7 HUMIT1731 uke35b Kåre A. Andersen 7 Oppsummert: Legg disse tre linjene først i alle xhtml-dokumentene 1. 2. 3. (… når du bruker Transitional-dtd’en, men kanskje vi allerede først som sist bør bruke ”strict-dtd’en”)

8 HUMIT1731 uke35b Kåre A. Andersen 8 -seksjonen 1. 2. Testside for DTD XHTML 1.0 Transitional 3. -taggen bør alltid fylles ut. Brukes bl.a. av søkemotorer når tefflista skal vises. Også andre elementer har plass i header’en, f.eks. opplysninger om nøkkelord:

9 HUMIT1731 uke35b Kåre A. Andersen 9 -seksjonen Her legges selve innholdet… 1. 2. 3. Dette er vår første xhtml-side…. 4.

10 HUMIT1731 uke35b Kåre A. Andersen 10 Innskriving vha. teksteditor 1. 2. 3. 4. 5. Testside for DTD XHTML 1.0 Transitional 6. 7. 8. 9. Dette er vår første xhtml-side…. 10. 11.

11 HUMIT1731 uke35b Kåre A. Andersen 11 Editorer & redigering… Vi bruker altså en enkel teksteditor (emacs, textpad, notepad o.a. og lagrer med typefelt ”htm” eller ”html” – test.html Mer komplette ”editorer”/publiseringssystem (bl.a. Dreamweaver) skal vi se på senere. I første omgang skal vi kun åpne test.html som fil …

12 HUMIT1731 uke35b Kåre A. Andersen 12 Test deg selv… 1. Åpne en ny fil i en teksteditor. 2. Skriv inn dokumentet vi nå har gjennomgått. 3. Lagre dokumentet f.eks. som test.html på disken/hjemmeområdet. 4. Hent samme fil inn i en nettleser ved å bruke menyvalg som ”Åpne fil…” 5. Da burde resultatet bli omtrent som følger:

13 HUMIT1731 uke35b Kåre A. Andersen 13 Editorer & redigering…

14 HUMIT1731 uke35b Kåre A. Andersen 14 Elementer, attributter og attributtverdier Eksempel: Element/tag: Attributt: bgcolor Attributtverdi: red (Enkle eller doble anførselstegn rundt verdien. Fargen oppgis ofte som et heksadesimalt tall: #FF0000 tilsvarer en slags rødfarge.) Et element kan ha flere attributter. Tomme tagger: eller best:

15 HUMIT1731 uke35b Kåre A. Andersen 15 Viktig XHTML-syntaks Alle elementnavn og attributter skrives med små bokstaver Tagger må ikke overlappe Start- og sluttagg nødvendig Tomme element må også lukkes, f.eks. Anførselstegn rundt attributtverdier Dokumentet bør innledes med XML- deklarasjonen etterfulgt av angivelse av DTD Man bør bruke Strict-DTD’en og (følgelig) CSS Og annet…

16 HUMIT1731 uke35b Kåre A. Andersen 16 Flere eksempler… Med dette som bakgrunn skal vi nå – gjennom eksempler - se på flere elementer, samt diskutere forholdet mellom ”løse” (HTML) og ”strenge” (XHTML) DTD’er: Hovedpunkter uke35 Hovedpunkter uke35 (http://folk.uio.no/kaarean/humit1731/forelesninger/html/uke35.htm)