XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.

En presentation över ämnet: "XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering."— Presentationens avskrift:

1 XHTML 1 Designa din egen webbsida

2 david.gunnarsson@hb.se Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering

3 david.gunnarsson@hb.se Nästa gång  Metadata  Elementen div och span  Klasser och id:n  Bilder

4 david.gunnarsson@hb.se Strukturen i ett dokument Dokument Kapitel 1 Kapitel 2 Rubrik 1 Stycke 1 Stycke 2 Mening 1 Ord 1 Ord 2 Ord 3 Mening 2 Stycke 3 Kapitel 3

5 david.gunnarsson@hb.se Uppmärkning  Uppmärkning = processen att bestämma (träd-) strukturen i ett dokument med hjälp av märken  Märken = taggar  Uppmärkning handlar inte om visuell formatering  Uppmärkning handlar alltså om strukturmässig design och inte layoutmässig dito

6 david.gunnarsson@hb.se Visuell formatering SCENE III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do. Text lånad från http://www.clicknotes.com/macbeth/T13.html

7 david.gunnarsson@hb.se HTML  HyperText Markup Language  Skapades av Tim Berners-Lee  Resultatet av hopkopplingen mellan hypertext och TCP- och DNS-idéer  Definieras av SGML  Begränsad vokabulär

8 david.gunnarsson@hb.se HTML  Tre typer av uppmärkning Struktur Presentation Referens  Strävan mot uppmärkning av struktur (innehåll) snarare än presentation (form)  För det senare används CSS

9 david.gunnarsson@hb.se XHTML  En striktare variant av HTML  XML+HTML=XHTML  eXtensible HyperText Markup Language

10 david.gunnarsson@hb.se Uppmärkning med XHTML Scene III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do.

11 david.gunnarsson@hb.se Element, taggar och attribut SCENE I Element Starttagg SluttaggInnehåll Attribut- värde Attribut Element- namn

12 david.gunnarsson@hb.se Element  Vanliga element Start- och sluttagg Rubrik Stycke  Tomma element Stängs inom taggen

13 david.gunnarsson@hb.se Jämför med trafikmärken

14 david.gunnarsson@hb.se Attribut  Placeras i starttaggen  Kan vara obligatoriska… Högskolan i Borås  …eller valfria Det var en gång...

15 david.gunnarsson@hb.se Jämför med trafikmärken

16 david.gunnarsson@hb.se Regler för element  Gemener används för taggnamn och attributnamn Rätt: Fel:  Citationstecken omger attribut Rätt: Länk Fel: Länk

17 david.gunnarsson@hb.se Regler för element  Överlapp är inte tillåtet Rätt: Fet text i ett stycke. Fel: Fet text i ett stycke.  Element måste stängas Rätt: Ett stycke text. Ett annat stycke text. Fel: Ett stycke text. Ett annat stycke text. Rätt: Fel:

18 david.gunnarsson@hb.se Block- och radelement  Blockelement Exempel: body, p, div, pre, ul, ol, dl, table, h1, h2 Ett blockelement kan innehålla andra block- element och samtliga radelement (samt text). p kan dock inte innehålla andra blockelement. body, ul, ol, dl och table kan inte innehålla text, de måste innehålla andra element. Ett blockelement innebär alltid en radbrytning före och efter elementet.

19 david.gunnarsson@hb.se Block- och radelement  Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text.

20 Kommentarer  Med märkena kan man infoga kommentarer i koden  Exempel:  Kod kan även kommenteras bort för att webbläsaren inte ska tolka den  Exempel: Rubrik -->  Används ofta då JavaScript och CSS-kod ska döljas för äldre webbläsare

21 david.gunnarsson@hb.se När ska vilket element användas?  p för uppmärkning av hela stycken  span för uppmärkning av enstaka ord och meningar (inom ett annat element)  div för uppmärkning av större sektioner  br för kontrollerade radbrytningar inom ett element  br ska aldrig användas som mellanrum mellan två element

22 david.gunnarsson@hb.se Standarder  Standardiseringsorganet W3C World Wide Web Consortium http://www.w3.org  W3C skapar dokumenttypsdefinitionerna som man hänvisar till i elementet DOCTYPE  CSS, HTML, RDF, XHTML, XML är standarder utvecklade av W3C

23 david.gunnarsson@hb.se Validering  Olika versioner av HTML har utvecklats  4.01 är den senaste versionen  XHTML är den senaste standarden  HTML 4.01 är ett försök att skapa renare kod genom att skilja på innehåll och presentation  XHTML drar detta ett steg ytterligare

24 david.gunnarsson@hb.se Validering  På http://validator.w3.org kan en webbsida validerashttp://validator.w3.org  Kontrollerar att webbsidan är korrekt kodad enligt den DTD man har angivit i DOCTYPE  Varför ska en webbsida vara valid?

25 david.gunnarsson@hb.se Strukturen i ett XHTML-dokument DOCTYPE Talar om vilken dokumenttypsdefinition som används HEAD Innehåller titel, metadata, eventuella skript och stilmallar BODY Sidans innehåll, det som visas i webbläsarfönstret

26 david.gunnarsson@hb.se Obligatoriska delar Titel placeras här

27 david.gunnarsson@hb.se DOCTYPE  Dokumenttypsdeklaration  Pekar på en dokumenttypsdefinition (DTD)  En DTD specificerar de element och attribut som är tillåtna  Flera DTD:er finns Strict Transitional Frameset

28 david.gunnarsson@hb.se Strict  Skiljer helt på innehåll och presentation etc…

29 david.gunnarsson@hb.se Transitional  Lite mer tillåtande etc…  Används ofta tillsammans med Content Management-system  Tillåter bland annat länkattributet target

30 david.gunnarsson@hb.se Strukturen i HEAD headHuvud titleTitel styleIntern eller importerad stilmall linkLänk till extern stilmall scriptInteraktivitet

31 david.gunnarsson@hb.se Strukturen i BODY bodyKropp divSektion h1Rubrik h2Underrubrik pStycke ul, ol, dlLista preFörformatterad text

32 david.gunnarsson@hb.se Hyperlänk  Länkar infogas i dokumentet  En länk består av: 1 – Länktext 2 – Destination (url) 3 – Mål (önskat webbläsarfönster, "_blank"=nytt fönster) 4 – Titel (en beskrivning på vart länken leder)  Högskolan i Borås (1) http://www.hb.se

33 david.gunnarsson@hb.se Hyperlänk  En url kan vara relativ eller absolut  http://www.hb.se är exempel på en absolut url http://www.hb.se Högskolan i Borås http://www.hb.se  start.htm är exempel på en relativ url Till startsidan

34 david.gunnarsson@hb.se Relativ url  En relativ url utgår från den mapp där det aktuella dokumentet befinner sig  Med hjälp av../ och mappnamn kan man navigera i mapphierarkin Exempel 1: Om filen befinner sig ett steg upp i hierarkin  Till startsidan Exempel 2: Om filen befinner sig i en annan mapp på samma nivå i hierarkin  Länk till bild.gif Exempel 3: Om filen befinner sig i samma mapp  Hem

35 david.gunnarsson@hb.se Ankare – länkning inom dokumentet Kapitel 1 länkar till Kapitel 1

36 david.gunnarsson@hb.se Ankare – komplettera med tillbakalänk Kapitel 1 länkar till Kapitel 1 som i sin tur länkar tillbaka

37 david.gunnarsson@hb.se Inbäddning av bilder  En bild infogas i ett dokument med hjälp av taggen  innehåller två obligatoriska uppgifter: 1 – Bildens url (src) 2 – Alternativ text (alt)  Exempel:

38 david.gunnarsson@hb.se En bild som en del av en länk  Bilder kan användas som länkar http://www.hb.se

39 david.gunnarsson@hb.se Tabeller  Skapades främst för att strukturera tabulära data (som i ett excel-ark)…  …men används ofta för layout där tabellen utgör ett rutnät i vilket HTML-elementen infogas

40 david.gunnarsson@hb.se En tabell består av…  Själva tabellen  Tabellrad  Tabell-/kolumnrubrik  Cell

41 david.gunnarsson@hb.se Exempel på en tabell Moment Tid Lokal XHTML 17-20 A604, A608

42 david.gunnarsson@hb.se Mer om tabeller  Med attributen colspan och rowspan kan man skapa celler som spänner över flera kolumner och rader  anger att cellen spänner över två kolumner  anger att cellen spänner över två rader

43 david.gunnarsson@hb.se Listor - numrerad XHTML 1 CSS 1 XHTML 2 1. XHTML 1 2. CSS 1 3. XHTML 2

44 david.gunnarsson@hb.se Listor - onumrerad XHTML 1 CSS 1 XHTML 2 XHTML 1 CSS 1 XHTML 2

45 david.gunnarsson@hb.se Listor - definitionslista XHTML 1 Inledande föreläsning om XHTML CSS 1 Inledande föreläsning om CSS XHTML 2 Andra föreläsningen om XHTML XHTML 1 Inledande föreläsning om XHTML CSS 1 Inledande föreläsning om CSS XHTML 2 Andra föreläsningen om XHTML