Presentation laddar. Vänta.

Presentation laddar. Vänta.

1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.

Liknande presentationer


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

1 1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript

2 2 HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan även ha attribut HTML + XML = XHTML

3 3 XHTML Alla taggar ska skrivas med gemener Krav på perfekt nästling:  Medicinsk informatik  INTE  Medicinsk informatik  Validatorer för att kontrollera syntaxen

4 4 Stilsättning med CSS Innehållet i en XHTML-fil Stilsättningen som ett CSS Cascading Style Sheet Separera stilsättningen från innehållet CSS i en egen fil som länkas in 

5 5 Stilsättning med CSS Det går att åstadkomma många både vackra och hemska effekter med färger och bilder Ett allmänt råd är att ofta hålla igen på t ex antalet färger på en hemsida. Vilka färger passar tillsammans? Det viktigaste på en hemsida är väldigt ofta att formatera texten så att den är lätt att läsa

6 6 Textformatering från CSS Det finns massor av textegenskaper som går att styra från en stilmall. Några av de absolut viktigaste är: – Teckengrad – Teckensnitt – Radlängd – Textens färg – Bakgrundsfärg

7 7 XHTML- listor  Ordnade listor  de ingående objekten är numrerade  Oordnade listor  de ingående objekten är INTE numrerade  Båda varianterna använder  Definitionslistor  Använder och

8 8 Nästlade listor  Hur är detta nästlat?

9 9 Navigationslistor Nytt i XHTML 2.0 Kända programmerare Allmän översikt Kända personligheter Ada Lovelace Billy Joy Spelprogrammering Operativsystem

10 10 XHTML- tabeller Tabellstruktur i XHTML – data –

11 11 XHTML- tabeller Tabellformatering i CSS – color: green; – background-color: white; – border-style: solid; – border-width: 4px; Attributet rules för linjer mellan cellerna – rows, cols, all, none...

12 12 XHTML- tabeller  thead  tbody  caption  tfoot

13 PAUS 15 MIN! 13 IV1006/2I1073 – Föreläsning1

14 14 Bilder i XHTML  XHTML < 2  “Bild  XHTML >= 2  bild på en hund