det klarar en validering.">

Presentation laddar. Vänta.

Presentation laddar. Vänta.

2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.

Liknande presentationer


En presentation över ämnet: "2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript."— Presentationens avskrift:

1 2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript

2 Lektion1a Lektion1a-2I1073/IV1006

3 Lektion1a Lektion1a Det är inte mycket till innehåll i detta dokument. Men det fungerar och det klarar en validering.

4 Lektion1a Valid XHTML 1.1!

5 Lektion1b XHTML Lektion1b-2I1073

6 Lektion1b XHTML Lektion1b Nu testar vi med lite stilsättning. Ett C ascading S tyle S heet är inlänkat. Nu blir det andra teckensnitt och färger än i Lektion1a. Här finns en länk till lektionens CSS. Varför ändras bakgrundsfärgen när man skall klicka på länken? Vad i stilmallen gör att textraderna bryts? Är bilderna inlänkade på olika sätt?

7 Lektion1b XHTML C ascading S tyle S heet

8 Lektion1b XHTML Valid CSS!

9 Lektion1b CSS h1 { background-color : #ffffff; color : #000000; font-size : 23pt; font-weight : bold; font-family: Garamond, serif; }

10 Lektion1b CSS body { background-color : #FFFFFF; color : #000000; margin-top : 40px; margin-left : 120px; font-size : 11pt; font-family : Verdana, Geneva, Helvetica, sans-serif; background-image : url(./fern.gif); background-repeat : no-repeat; }

11 Lektion1b CSS p { width : 420px; } p#lektion1b { width : 100px; margin-left : 100px; } span.anfang{ font: bold 400% sans-serif; color: #004400; background-color: #ffffff; width: 30pt; float: left; }

12 Lektion1b CSS a { background-color : #ffffff; color : #008000; } a:hover { background-color : #ffff00; color : #008000; } img { border : 0; } CSS Examples:

13 Lektion1c Lektion1c Det är inte mycket till innehåll i detta dokument. Men det fungerar med inlänkningen av ett Javascript.

Google-annonser