XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink 2 2006-11-29.

En presentation över ämnet: "XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink 2 2006-11-29."— Presentationens avskrift:

1 XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink 2 2006-11-29

2 I början HTML 1.0 (1990) var bara avsett för akademiska rapporter, hanterade bara text Vissa ad hoc-finesser lades till på eget bevåg av webbläsarutvecklarna Dessa finesser formaliserades i HTML 2.0, som blev en IETF-standard 1994

3 Babels torn Allt urartade runt 1995 Kreativa webbskapare med dålig smak fick för mycket att säga till om Netscape Extension Tags HTML blev en sörja av struktur, utseende och beteende

4 Uppstyrning (~1997) W3C – the World Wide Web Consortium Webben skulle göras tillgänglig för alla Webben skulle bli mer teknikoberoende Väldefinierade, formaliserade, standarder för struktur, utseende och beteende

5 Uppdelning Struktur HTML 4.01 XHTML UtseendeCSS Beteende JavaScript (ECMAscript)

6 Vad är XHTML? Omdefinition av HTML, från ett separat språk till en delmängd av XML Funnits sedan 1999 Kraftigt rationaliserat Total uppdelning av struktur, beteende och utseende

7 HTML 4.01 då? Tre varianter: Transitional, Frameset, Strict Strict är nästan samma sak som XHTML Transitional är för bakåtkompatibilitet Frameset är för sidor med frames Låt bli Transitional och Frameset! (brodera – visa exempel)

8

9 En trädstruktur html |–> head | |–> title | |–> “Min webbsida” |–> body |–> h1 | |–> “Detta är en sida som…” |–> p | |–> “Inte för att det finns…” |–> a |–> “Till TFE:s webbsida”

10 Identifikatorer Talar om att det är ett XML-dokument Anger att dokumentet är skrivet i XHTMLhttp://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd Båda identifikatorerna ska alltid finnas med! (Fel – IE blir lurad av den första)

11 Taggar utan innehåll I XHTML och HTML 4.01 Strict har alla taggar en starttagg och en sluttagg Det gäller även taggar som inte får ha något innehåll, t.ex. “hr”, “br”, “img” etc. Man kan deklarera en tagg som självavslutande i stället Man skriver alla taggar med små tecken

12 Taggar utan innehåll Gammal syntaxNy syntax

13 Semantisk markup HTML ska hantera strukturer och innebörder, inte utseende Semantik = “ordets betydelse” Taggar som detaljstyr utseende hör inte hemma i modern HTML Bara fördelar: Lätt att byta utseende, bättre ranking i sökmotorer, underlättar för synskadade, fungerar i mobiltelefoner…

14 Spagetti-HTML

15 Modern HTML

16 ”Uppifrån och ned - head”” Doctype ska vara med! meta = information om informationen Infoga script, css m.m. i headern Visa exempel på detta!

17 ”Uppifrån och ned – body” - = rubriker = stycke = bild = länk,, = listor = tabeller

18 ”Uppifrån och ned – body” = radbrytning = vågrätt streck Logiska taggar: m.fl.

19 ”Uppifrån och ned – body” Här kommer det som man också måste ha: = division = avdelning = avdelning inline (textradnivå) id=”left” class = ”red”

20 Hur ska man tänka Inte så svårt som det låter Tänk bara på vad innehållet betyder! Tänk inte det minsta på hur sidan ska se ut, det problemet löser du med CSS i stället

21 Bra taggar (Emphasis) används för att betona (Strong emphasis) är till för stark betoning, d.v.s. saker som är jätteviktiga betecknar ett stycke, etc. anger rubriknivåer

22 Arbetsmetoder Läs på w3c eller w3cschools eller webbdesignskolan eller … Jobba - gör - testa – diskutera – töj gränser Forum, webbplatser (Alistapart, EricMayerWebb), Blogga, Samla RSS:er etc. Surfa – titta - analysera

23 CSS CSS-information kan inkluderas på tre sätt:  i varje html-tagg, med “style”-attributet  inom -taggar i - sektionen  globalt genom att länka till en separat css-fil

24 Lokalt (i taggar) Se upp!... Ska normalt undvikas!

25 Lokalt för hela filen body { background-color: blue; color: white; } h1 { color: orange; }... Används i vissa specialfall

26 Globalt med separat fil <link rel=”stylesheet” type=”text/css” href=”/style.css” />...

27 Syntax body { background-color: #ddf; font-family: verdana, arial, sans-serif; margin-left: 30px; margin-top: 20px; } p { margin-bottom: 20px; } Taggnamn EgenskapVärde

28 ID-attributet Den här texten ska bli blå! #content { font-weight: bold; font-family: arial; color: blue; } OBS: Varje ID måste vara unikt!

29 Klassnamn Saab 99 10 000 mil Pris: 3000 kr.carinfo { border-width: 1px; border-color: #000; padding: 5px; } Kan användas på mer än ett element

30 Resurser W3Schools CSS-skola: http://www.w3schools.com/css/default.a sp http://www.w3schools.com/css/default.a sp DevGuru XHTML Tag Index: http://www.devguru.com/Technologies/x html/quickref/xhtml_index.html http://www.devguru.com/Technologies/x html/quickref/xhtml_index.html W3Schools XHTML-skola: http://www.w3schools.com/xhtml/default.asp http://www.w3schools.com/xhtml/default.asp

31 Intressanta artiklar Alistapart: Fix Your site with the right Doctype.Fix Your site with the right Doctype. Alistapart: Long Live the Q TagLong Live the Q Tag Annica Thigers sida om xhtml