XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
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
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
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
Uppdelning Struktur HTML 4.01 XHTML UtseendeCSS Beteende JavaScript (ECMAscript)
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
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)
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”
Identifikatorer Talar om att det är ett XML-dokument Anger att dokumentet är skrivet i XHTMLhttp:// Båda identifikatorerna ska alltid finnas med! (Fel – IE blir lurad av den första)
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
Taggar utan innehåll Gammal syntaxNy syntax
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…
Spagetti-HTML
Modern HTML
”Uppifrån och ned - head”” Doctype ska vara med! meta = information om informationen Infoga script, css m.m. i headern Visa exempel på detta!
”Uppifrån och ned – body” - = rubriker = stycke = bild = länk,, = listor = tabeller
”Uppifrån och ned – body” = radbrytning = vågrätt streck Logiska taggar: m.fl.
”Uppifrån och ned – body” Här kommer det som man också måste ha: = division = avdelning = avdelning inline (textradnivå) id=”left” class = ”red”
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
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
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
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
Lokalt (i taggar) Se upp!... Ska normalt undvikas!
Lokalt för hela filen body { background-color: blue; color: white; } h1 { color: orange; }... Används i vissa specialfall
Globalt med separat fil <link rel=”stylesheet” type=”text/css” href=”/style.css” />...
Syntax body { background-color: #ddf; font-family: verdana, arial, sans-serif; margin-left: 30px; margin-top: 20px; } p { margin-bottom: 20px; } Taggnamn EgenskapVärde
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!
Klassnamn Saab mil Pris: 3000 kr.carinfo { border-width: 1px; border-color: #000; padding: 5px; } Kan användas på mer än ett element
Resurser W3Schools CSS-skola: sp sp DevGuru XHTML Tag Index: html/quickref/xhtml_index.html html/quickref/xhtml_index.html W3Schools XHTML-skola:
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