Presentation laddar. Vänta.

Presentation laddar. Vänta.

XHTML & CSS Introduktion Erik Nahkala

Liknande presentationer


En presentation över ämnet: "XHTML & CSS Introduktion Erik Nahkala"— Presentationens avskrift:

1 XHTML & CSS Introduktion Erik Nahkala

2 Några uttalanden om nätet…

3 ”Internet är en fluga som kanske blåser förbi. Jag tror inte att folk i längden kommer att vilja ägna så mycket tid, som det faktiskt tar, åt att surfa på nätet.” 12 maj Ines Uusman, IT-ansvarig minister

4 “Om två år ska 98 procent av hushållen ha tillgång till bredband” Björn Rosengren, näringsminister, 2000

5 XHTML (Extensible HyperText Markup Language)

6 Vad är XHTML?

7 Markup languages SGML, Standard Generalized Markup Language – HTML, HyperText Markup Language – XML, eXtensible Markup Language XHTML, eXtensible HyperText Markup Language SVG, Scalable Vector Graphics Atom RSS, Really Simple Syndication (osv)

8 XHTML vs. HTML XHTML … Är XML kompatibelt Kräver välformaterade dokument Är Case sensitive Stöder Namespaces Är Semantiskt Relativt bakåtkompatibelt med HTML

9 XHTML versioner XHTML 1.0 – Strict – Transitional – Framesets XHTML 1.1 XHTML Mobile Profile XHTML 2.0 (”kommer snart”)

10 XHTML 2.0 Påbörjades 2002 Inte klart ännu Kommer inte vara bakåtkompatibelt

11 Att skapa XHTML dokument

12 Sidans titel

13 XHTML uppbyggnad Element Attribut

14 Element Element används för att strukturera upp information Exempel: –

15 Attribut Attribut används för att sätta egenskaper på element Exempel: –

16 Uppgift: Element – Table – Ul – Div – P – Span – Img – Strong – Em – Head – Body – Html – Ol Attribut – Id – Class – Href – Alt – Src – Style

17 Demo

18 Uppgift: Personlig sida Lite kort om dig själv En bild En top-fem lista En lista över rekommenderade glassar/filmer/skivor/böcker eller liknande. En tabell En länk Extra om du redan kan: Defenitionslista, Ankarpunkter, formulär (utan funktion)

19 CSS Cascading Style Sheets

20 Vad är CSS? Beskriver för webbläsaren hur HTML/XHTML kod ska presenteras visuellt.

21 CSS Demo

22 Historia HTML skapades för att beskriva struktur och semantik i text på webben. Netscape och Internet Explorer konkurerade om webben – Skapade egna taggar för att sätta färg och form på webbsidor. W3C tog fram CSS och lanserade det som ett tillägg till HTML 4.0 för att lösa problemet

23 Fördelar med CSS Separerar design från information Gör det enkelt att ändra design på alla sidor i en webbplats

24 3 olika sätt att implementera Inline Per fil Extern fil

25 Inline - CSS Skrivs i style attributet Föredelar – Enkelt för att testa Nackdelar – Går inte att återanvända enkelt – Blir mycket kod


26 Per fil - CSS Strivs i taggen i taggen. Existerar bara i den filen den finns i. Fördelar – Kan definiera class, id och andra globala stilar Nackdelar – Måste skrivas i varje fil

27 taggen

28 Extern fil - CSS Hämtas hem på ett av dessa sätt: url(style.css) i taggen – i taggen

29 Peka ut element En sorts element – Ex:,, En class Ett id

30 Syntax selector {property: value;} Ex: p{color: blue;} Ex 2: table{ color: blue; font-family: ”Times new roman”; }

31 Demo

32 Gruppering h1,h2,h3 { color: red; } Genom att gruppera ihop element får alla samma utseende.

33 Klasser och Id Klasser markeras med en. i CSS. HTML: CSS: p.intro { color: red; } Id markeras med ett # i CSS. HTML: CSS: p#unik{ color: red; }

34 Multipla klasser Ett element i HTML koden kan ha flera klasser samtidigt. Ex: Elementet ovan får då alla egenskaper för både intro och big klassen

35 Attribut input[type=”text”] { color: red; } Pekar ut alla input element som har text som värde i attributet type Ex:

36 ”Sökvägar” i CSS Det är möjligt att genom CSS komma åt till exempel alla som finns i en på sidan. CSS: div p { color: red; }

37 Kommentera CSS Kommentarer i CSS skrivs mellan /* och */ Kommentarer läses inte av webbläsaren

38 Försköna era sidor Färger på text Typsnitt Bakgrund index/text.htm index/text.htm

39 Övning Skapa en sida med en mittcentrerad kolumn. Texten ska dock vara vänstercentrerad. Den ska fungera i både IE och FF.

40 Övning Skapa en sida som innehåller det som syns i bilden till höger. Den enda HTML koden du får ha i är: Tips: Använd float.

41 CSS - Fusklapp sheets/css-cheat-sheet/

42 Laboration Webbsidan CSS Zen Garden skapades för att folk skulle kunna visa vad som är möjligt att skapa med enbart CSS. På sidan finns ett gigantiskt arkiv av olika designer på samma sida. Ingen av designerna har haft möjlighet att påverka HTML koden utan enbart arbetat med CSS. Er laboration går ut på att skapa en egen CSS till just sidan CSS Zen Garden. Instruktioner finns på deras sida. Det är helt okej att arbeta i grupp men alla ska skapa en egen unik design. Tänk på att uppgiften går ut på att utmana sig själv i CSS och inte i design. Webbsidans adress:


Ladda ner ppt "XHTML & CSS Introduktion Erik Nahkala"

Liknande presentationer


Google-annonser