XHTML och CSS En föreläsning om webbteknik 2007-11-08, SK, PK TFE Umeå Universitet.

En presentation över ämnet: "XHTML och CSS En föreläsning om webbteknik 2007-11-08, SK, PK TFE Umeå Universitet."— Presentationens avskrift:

1 XHTML och CSS En föreläsning om webbteknik 2007-11-08, SK, PK TFE Umeå Universitet

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 HTML 4.01 en annan tolkning Strict är nästan samma sak som XHTML och kan inte innehållanågot om utseende hos taggarna Transitional får och kan innehålla vissa attribut som styr utseende Titta på w3c:s sida - där hittar du attribut som är “descripted” = utgågna

9

10 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”

11 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)

12 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

13 Taggar utan innehåll Gammal syntaxNy syntax

14 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…

15 Spagetti-HTML

16 Modern HTML

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

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

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

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

21 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

22 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

23 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

24 CSS del 1

25 I början…

26 Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets bredd

27

28

29 I början… Kreativa webbskapare upptäckte att man kunde styra upp layouten med tabeller Netscape tryckte ur sig nya markuptaggar i hejdundrande fart Microsoft ville inte vara sämre… Webbsidorna blev en enda sörja av innehåll och utseende

30 Ljusning Håkon Wium Lie utarbetade 1994 ett förslag till språk enbart för att styra utseende CSS-standarden publicerades i dec 1996 Microsoft (av alla) högg direkt, Internet Explorer 4.0 var först med användbart CSS- stöd

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

32 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

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

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

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

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

37 Taggnamn Ett rött och fett citat! blockquote { font-weight: bold; font-family: arial; color: red; } Gäller för alla -taggar i hela dokumentet

38 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!

39 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

40 Vanliga textattribut font-weight: fet eller vanlig stil font-weight: bold; font-style: kursiv eller vanlig stil font-style: italic; text-decoration: t.ex. understruken text text-decoration: underline; color: anger textfärg color: #fff;

41 Vanliga textattribut font-family anger vilket typsnitt som ska användas Typsnitten anges som en lista Ange alltid en generisk familj på slutet! font-family: helvetica, arial, sans-serif;

42 Färger Kan anges på fyra sätt: Färgnamn: blue, red, purple, orange… 1-byte hexadecimalt: #FFF, #006, #0A0 2-byte hex: #FFFFFF, #000066, #00AA00 Decimalt: rgb(255,255,255), rgb(0,0,0)

43 Resurser W3Schools CSS-skola: http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp Orienterande om CSS: http://en.wikipedia.org/wiki/Cascading_Style _Sheets http://en.wikipedia.org/wiki/Cascading_Style _Sheets

44 CSS del 2

45 Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem { width: 600px; } Också möjligt att vara mer specifik div.newsitem { width: 600px; } h1#page_title { color: black; }

46 Pseudoklasser Fungerar precis som vanliga CSS-klasser... men: Du kan inte själv tilldela dem! Är en sorts CSS-klasser som webbläsaren delar ut och tar bort automatiskt

47 Pseudoklasser a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; text-decoration: underline; } input:focus { border: 3px solid red; } p:first-letter { font-size: 24pt; } Partiellt stöd i Explorer, fullt stöd i övriga mer: http://www.w3.org/TR/REC-CSS2/selector.html#q15

48 Enkel elementreferens h1 { font-size: 30pt; color: green; } Kurts bilskrot Välkommen!... Länkar

49 Nästlad elementref. Kurts bilskrot Välkommen!... Länkar #header h1 { font-size: 30pt; color: green; } #content h1 { font-size: 30pt; color: green; } #sidebar h1 { font-size: 30pt; color: green; }

50 Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content.nyhet a:hover { text-decoration: underline; font-weight: bold; color: red; }

51 Indirekt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content a:hover { text-decoration: underline; font-weight: bold; color: red; }

52 Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content > a:hover { text-decoration: underline; font-weight: bold; color: red; } Ingen matchning

53 Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer....nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

54 Direkt nästlad elementref. Man bet hund Lorem ipsum dolor... Läs mer... #content >.nyhet > a:hover { text-decoration: underline; font-weight: bold; color: red; }

55 Boxmodellen padding margintop/left width height top/right

56 Absolut positionering (position: absolute) flyttar elementet till en “egen värld” och placerar det relativt till föräldraelementet. Liten “kluring” – föräldraelementet måste också delklareras med position absolute Relativ positionering (position: relative) får ett element att anta en position relativ till det läge elementet annars skulle ha haft Positionering

57 Z-index Z-index bestämmer positionen i djupled Tänk lager i Photoshop! Ju högre Z-index, desto längre upp hamnar ett element Normalt har alla element Z-index noll

58 Flytande objekt Får ett element att flytta sig till vänster (float: left) eller höger (float: right) i det inneslutande elementet Bra för figursatta bilder, anfanger, och en del oväntade saker http://www.w3schools.com/css/css_classific ation.asp http://www.w3schools.com/css/css_classific ation.asp

59 CSS del 3

60 Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link-taggen, t.ex. ‘media=”screen”’ all, aural, braille, handheld, print, projection, screen, tty, tv

61 CSS-signaturer En och samma CSS-fil kan definiera flera stilar (t.ex. alternativ bakgrund) Kopplingen görs genom att sätta ett ID-värde på body-taggen Bra om man t.ex. vill ha lite avvikande förstasida men utan att bolla med olika CSS- filer

62 Sliding doors Ren CSS-lösning för snygga menyer Fixar bakgrunden på menyflikar med varierande bredd Ett grundkrav: Varje -tagg måste innehålla en annan tagg (en meny med länkar uppfyller det kravet)

63 CSS del 4

64 CSS Hacks and IE7 Det finns nästan oändligt att läsa om webbläsare och deras ofullkomligheter! Resultatet är alltid detsamma – en sida ser konstig ut i olika läsare. Internet Explorer är troligen värst! Speciellt mac-versionen. IE6 är den som är jobbigast. Varför?

65 CSS Hacks and IE7 Det har att göra med antalet användare… Se denna länk om Browser Statistics!Browser Statistics! Kommentarer?

66 CSS Hacks and IE7 Kort – IE6 är störst av de sämsta läsarna. Hack eller inte? CSS-hack är ett inlägg i stilmallen. Vanligen ser det ut så här: * html body{ margin: 0; } It’s called that ”star html hack”

67 CSS Hacks and IE7 Vad händer vid ett * html? 1. Alla webbläsare utom Internet Explorer hoppar över raderna 2. IE läser och skriver över det man skrivit tidigare 3. Observera att html-hack skrivs efter den ordinarie beskrivningen

68 CSS Hacks and IE7 Och IE7 som är ganska hygglig jämfört med IE6? Då duger inga * html! Goodbye – You are dead!

69 CSS Hacks and IE7 Nix då får man trixa till det i html-koden som här där alla webbläsare utom IE läser stilmallsinformationen: --> body { font-size:16px; }

70 CSS Hacks and IE7 Eller som här då man länkar in tre olika stilmallar: --> --> -->

71 CSS Hacks and IE7 Lite jobbigt men möjligt att genomföra. Bättre att: 1. Undvika att göra layouter som ger skillnader! 2. Lägga in en normaliserande stilmall, vanligen global.css. Den ”slätar ut” skillnaderna mellan läsarna.global.css 3. Det finns en listigare variant också.listigare variant

72 Ramverk för stilmallar… Artikel i Alistapart Någonstans därute finns en bra bas att bygga på - det är bara att leta! T.ex. här…