Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag XHTML Lene Hoff 19.9.2006 Lærestoffet er utviklet for faget XML Teknologi 1. XHTML Resymé: I denne leksjonen skal vi ta for oss standarden XHTML. Det er mange likhetstrekk mellom XHTML og XML, og flere av de regler som gjelder for XML vil også gjelde for XHTML. Innhold 1.1. INNLEDNING... 1 1.2. LAGE ET XHTML-DOKUMENT... 3 1.3. OVERSIKT OVER XHTML-SYNTAKS... 3 1.3.1. XML-deklarasjonen... 3 1.3.2. Dokument Type Deklarasjonen (DTD): XHTML 1.0... 4 1.3.3. Rotelementet og navnerom... 4 1.3.4. Velformede dokumenter... 5 1.4. BARNEELEMENTER TIL BODY-ELEMENTET... 5 1.4.1. Overskrifter... 5 1.4.2. Paragrafer... 5 1.4.3. Lister... 6 1.5. KJERNEATTRIBUTTENE TIL XHTML... 6 1.6. ANDRE ELEMENTER... 6 1.7. XHTML TABELLER... 7 1.8. KNYTTE STILARK OPP MOT ET XHTML-DOKUMENT... 8 1.1. Innledning HTML står for Hypertext Markup Language og brukes til å lage websider på Internett. Det er et fastsatt sett med elementer som programmereren kan velge mellom når websidene utvikles. Dermed vet nettleseren hvordan websiden skal se ut. Det medfører at HTML er mest egnet for presentasjon av tekstdokumenter. Etter hvert som HTML har utviklet seg, har selve HTMLkoden blitt rotete og mange hjemmesider er dårlig programmert. Det er ikke alltid så nøye med selve syntaksen da nettleserne likevel kan vise hjemmesiden. Det har etter hvert ble det behov for en standard for å representere selve dataene, og ikke bare for å presentere dem. Her kommer XML (Extensible Markup Language) inn. Programmereren kan selv lage de elementer han måtte ønske. Dermed kan en blant annet beskrive flere typer dokumenter i XML sammenlignet med HTML, som vi så i leksjon 1 og 2.
XHTML side 2 av 8 Støtten for XML utvides hele tiden og det er fortsatt et stykke igjen før det er ferdig utviklet. I mellomtiden ble en ny standard introdusert; XHTML. Denne standarden følger de strenge reglene til XML for oppsett av et dokument og et XHTML-dokument kan grovt sett betraktes som et XML-dokument. Med de tre standardene som her er presentert; HTML, XML og XHTML snakker en om: - Semantikk: refererer til meningen med innholdet og de ulike måtene informasjonen kan tolkes, hentes ut og manipuleres. - Syntaks: beskriver formen på dokumentet, altså hvordan det er organisert. Strukturen kan vi ofte se i et hierarkisk tre for dokumentene. - Stil: går på hvordan dokumentet er presentert. Vi vil nå gå over på XHTML. XHTML består av tre anbefalinger som er laget av W3C: 1. XHTML 1.0: gjelder for den siste versjonen av HTML 4.0 2. XHTML 1.1 Modularization: utvider XHTML 1.0 slik at det kommer nærmere XML og gir derfor bedre overgang til nye plattformer. De elementer i HTML 4.0 som etter hvert vil forsvinne, deprecated, er ikke inkludert. 3. XHTML Basic: er et sett med moduler som brukes for blant annet mobiltelefoner, PDA, TV og lignende. Som med XML-dokumenter er elementer også veldig viktig i XHTML-dokumenter. XHTML-elementer er også case-sensitive. Det vil altså si at det skilles mellom store og små bokstaver. Dermed vil <title> være ulik fra <TITLE>. Alle elementer må ha både et startmerke og en sluttmerke, med unntak av tomme elementer (elementer uten innhold): <p>her kommer det innhold</p> <hr /> - element med innhold - tomt element
XHTML side 3 av 8 1.2. Lage et XHTML-dokument I teksteditoren din skriver du inn følgende tekst: <?xml version ="1.0"?> <!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" xml:lang="en" lang="en"> <head> <title>praktisere XHTML</title> </head> <body> <h1>semantikk, Struktur, Stil</h1> <h2>xhtml gir strukturen </h2> <h3>css gir stilen</h3> </body> </html> Lagre filen som Intro.html (eller Intro.htm). Nå kan du åpne dokumentet ditt i en nettleser. Det vil se ut som: 1.3. Oversikt over XHTML-syntaks XHTML-dokumentet består av følgende deler: 1. XML-deklarasjonen. 2. DOCTYPE. Gjør at dokumentet må være i henhold til en DTD 3. Rotelementet. Rotelementet til XHTML-dokumenter er html. Innenfor dette elementet har vi head, body, script Nå vil vi gå gjennom delene fra eksemplet i kap 1.2. 1.3.1. XML-deklarasjonen XML-dokumenter begynner alltid med en XML-deklarasjon. Denne deklarasjonen er valgfri i XHTML, men ble brukte i eksemplet over: <?xml version="1.0"?> Denne deklarasjonen må stå helt først og forteller nettleseren at dette er et XML-dokument. Hvis du vil bruke et annet tegnsett enn det som er standard, må denne deklarasjonen være med.
XHTML side 4 av 8 1.3.2. Dokument Type Deklarasjonen (DTD): XHTML 1.0 Den andre linjen i eksemplet over var: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Denne linjen deklarerer dokumenttypen (DTD). En DTD viser strukturen til et dokument og definerer alle elementer og attributter som kan brukes. XHTML 1.0 har tre ulike DTD er: - Strict XHTML 1.0: dette er en streng versjon av XHTML 1.0. Den har ikke med de elementer som er deprecated (skal fjernes). Videre tilbyr den en ren og strukturert kode uten noen formateringer (stiler). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> - Transitional XHTML 1.0: inkluderer alle elementer og attributter, også de som er deprecated. Her kan man ha interne stilark og små justeringer på stil for de enkelte elementer (bra ved eldre nettlesere). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> - Frameset XHTML: for dokumenter som bruker frames. Frames er ikke støttet i XHTML Basic og vil ikke bli støttet i fremtidige XHTML-versjoner. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> I eksemplet over så du at vi inkluderte dokumenttypen Strict HTML. Det betyr altså at XHTML-dokumentet bare kan bruke de elementer som ikke er deprecated og kan heller ikke inkludere noen interne stiler. Når et dokument er knyttet opp mot en DTD vil det si at dokumentet er gyldig (valid). 1.3.3. Rotelementet og navnerom Den neste linjen var: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Her ser du at html-elementet er rotelementet i XHTML-dokumenter. Videre er det satt et navnerom for XHTML-dokumentet for å knytte det opp mot de gjeldende standardene. Vi husker navnerom fra leksjon 2. Her er navnerommet til XHTML satt som default, noe som gjør at alle elementene som brukes i dokumentet vil bli knyttet opp mot dette navnerommet. Kort oppsummerte betyr de ulike delene: - alle XHTML-dokumenter har html som rotelement - xmlns er ordet som brukes for å spesifisere et navnerom - http://www.w3.org/1999/xhtml er URI en til navnerommet - xml:lang= en lang= en spesifiserer språket (language) og en står for engelsk (english). Begge to må være med.
XHTML side 5 av 8 1.3.4. Velformede dokumenter Vi bruker begrepet velformet også om XHTML-dokumenter. Vi sier at XHTML-dokumenter er velformede hvis de følger disse kriteriene: 4. Elementene må være riktig nøstet 5. I XHTML-dokumenter skal navn på elementer og attributter være i små bokstaver 6. Elementer som ikke er tomme må ha en sluttmerke 7. Verdiene på attributtene må være omsluttet av 8. Attributt-verdi par må skrives fullstendig (spesifiserer dette senere) 9. Tomme elementer må enten ha med en sluttmerke, ellers må startmerket slutte med /> 10. Unngå flere mellomrom etter hverandre i attributtverdier siden disse blir behandlet ulikt av programmer som bruker dokumentet 11. Ikke bruk < eller & i script, eller style-elementer da dette vil bli sett på som start til elementer 12. Det er ikke lov å droppe ut elementer 13. I XHTML er id-attributtet definert til å være av typen ID. Det skal brukes for å definere fragment identifiseres og verdien skal være unik i dokumentet. 1.4. Barneelementer til body-elementet Nå er vi klare for å legge til elementer i body-elementet. Det er viktig at elementene blir korrekt nøstet, som med XML. Her et eksempel hvor dette er tilfelle: <partnumber> <partname>...</partname> </partnumber> <ol> <li>...</li> </ol> Det er ikke lov å for eksempel avslutte ol-elementet før li-elementet er avsluttet. Tre av de vanligste elementene som brukes er; overskrifter, paragrafer og lister. Vi vil nå beskrive raskt hva disse gjør. For de fleste elementene her er det gode eksempler på i boken fra side 556. Av den grunn vil det bare komme en kort beskrivelse av dem her. 1.4.1. Overskrifter For å fremheve de ulike overskriftene i en tekst brukes elementene h1 til h6, hvor h1 er den største overskriften og h6 er den minste overskriften. Der indeksen h er forkortelsen for header. 1.4.2. Paragrafer For å lage paragrafer av tekst (avsnitt) brukes p-elementet. Da vil det komme et linjeskift før og etter paragrafen. Hvis det bare ønskes et enkelt linjeskift kan br-elementet istedenfor (<br/>).
XHTML side 6 av 8 1.4.3. Lister Man har tre typer lister: - Usorterte lister (bulleted lists). Begynner med et ul-element som forteller at alle lielementene som kommer som barn skal ha en runding foran seg. - Sorterte lister har nummer foran seg. Her brukes ol-elementer med li-elementer som barneelementer - Definisjons lister er lister over termer som har en beskrivelse. Her er dl-elementet som forteller at hver enkelt term definert i dt-element, og med tilhørende beskrivelse innenfor et dd-element, skal bli formatert på en bestemt måte. 1.5. Kjerneattributtene til XHTML Attributter gir tilleggsinformasjon til elementer som kan brukes ved datamanipulering og formateringer. Det er plassert i elementets startmerke og står på følgende form: navn = verdi Alle attributter har et navn og den tilhørende verdien skal stå i anførselstegn ( ). Unngå linjeskift og flere mellomrom i verdien da dette vil bli behandlet ulikt. XHTML har fire universale attributter; - id: identifiserer et unikt navn for et element i et dokument. Verdien må være unik i dokumentet (i HTML er det mulig å ha flere id-attributter med samme verdi, men det er ikke i henhold til XHTML-standarden) - class: identifiserer en eller flere klasser som et element hører til. Kalles også for kategorier eller grupper. Et bruksområde er å sette en bestemt stil (formatering) på en klasse. Dermed vil alle elementer i denne klassen få denne stilen. - style: legger formateringsinformasjon direkte på et element. Det er ikke anbefalt å bruke dette attributtet. Formateringer bør heller legges i et eget stilark - title: gir en beskrivende tekst til et element eller dens innhold. Eksempel her kan være tool tip (f.eks. tekst som kommer opp når musmarkøren er over elementet). Man kan også legge til andre attributter. Vil da gjøre oppmerksom på at attributter som er knyttet til stil/formatering er deprecated og vil ble fjernet i senere standarder. Skrivemåten til attributtene vil være likt som tidligere. 1.6. Andre elementer I læreboken på sidene 561-569 står det om flere ulike elementer som kan brukes innenfor body-elementet. De fleste av disse kjennes igjen fra HTML og vil ikke bli så nøye gjennomgått. Her kommer en kort beskrivelse på noen av dem: - a: brukes for å spesifisere en hyperlenke. Elementet kan inneholde tekst, bilde eller begge deler. Det består av en URL til ressursen man lenker til, og denne kan enten være relativ
XHTML side 7 av 8 eller absolutt. I tillegg kan man også referere til bestemte deler av dokumentet ved å bruke id-attributtet. - img: brukes for å sette inn bilder på websiden. En URL brukes for å fortelle hvor bildet ligger. - br: for å sette inn linjeskift(enter) eller blanke linjer i dokumentet. Dette er et tomt element. - div: brukes for å strukturere XHTML-dokumentet i unike seksjoner/divisjoner. Dette er fint for å legge til formateringer og posisjonering av deler av en tekst. Kan sammenlignes med p-elementet, men div-elementet kan bestå av større deler av dokumentet - span: ligner på div-elementet men span identifiserer tekst innenfor andre elementer. F.eks. kan den identifisere en liten tekst innenfor p-elementet. 1.7. XHTML Tabeller Tabeller er en fin måte å lese relaterte data på og er mye brukt. Tabeller i XHTML er konstruert rad for rad. Tabeller brukes en del til sidelayout, men dette er ikke anbefalt. Her er en oversikt over de elementer som er knyttet til tabeller: - table: definerer hele tabellen og er topp elementet til tabellen. - caption: spesifiserer tittelen til tabellen og kan stå over, under, til høyre eller til venstre for tabellen. En tabell kan bare ha et caption-element. - tr (table row): definerer en enkelt rad i tabellen - th (table heading): definerer en overskriftscelle og må stå innenfor et tr-element - td (table data): definerer en celle med data innenfor en rad En tabell kan se ut som (figuren til høyre har ikke nødvendigvis de rette formateringer): <table> <tr> <th>fornavn</th> <th>etternavn</th> </tr> <tr> <td>per</td> <td>olsen</td> </tr> <tr> <td>kari</td> <td>larsen</td> </tr> </table> Les mer om tabeller på side 570-573. Fornavn Per Kari Etternavn Olsen Larsen
XHTML side 8 av 8 1.8. Knytte stilark opp mot et XHTML-dokument I leksjon 3 så vi hvordan stilark, som CSS, kunne knyttes opp mot et XML-dokument. I XHTML finnes det et tilsvarende element som gjør at et stilark kan brukes mot dokumentet. Det ser ut som følger: <link rel= stylesheet type= text/css href= stilark.css /> Her har vi et link-element får å koble dokumentet opp mot et stilark. Attributtet rel forteller hvilken type kobling det er snakk om, her stilark. De to neste kjenner vi igjen fra XMLdokumentet. Dette link-elementet skal plasseres i head-elementet til XHTML-dokumentet. Side 576 og utover i kapitlet er ikke pensum.