Presentation laddar. Vänta.

Presentation laddar. Vänta.

XHTML.

Liknande presentationer


En presentation över ämnet: "XHTML."— Presentationens avskrift:

1 XHTML

2 En webbsidas uppdelning
Struktur HTML, XHTML ………………………………………………….. Utseende CSS ……………………………………………… Beteende Java Script

3 HTML Hypertext Historia W3C XHTML HTML 5

4 Formatering Hyper Text Markup Language Inget programmeringsspråk
Struktur

5 Struktur

6 HTML 4.01 Tre versioner Strict Transitional Frameset

7 Versionerna <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“>
"http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“> "http://www.w3.org/TR/html4/loose.dtd"> Frameset//EN”> "http://www.w3.org/TR/html4/frameset.dtd">

8 Huvudstruktur <html> <head> <title>…</title>
<style>…</style> </head> <body>…</body> </html>

9 Syntax Element med innehåll:
<h1 align="center"> En stor rubrik</h1>

10

11 Element utan innehåll Alla taggar har start och sluttagg br, hr, img
Exempel: <h1 align="center">En stor rubrik</h1> <br /> <p align="center">En ny rad<p/> <hr/>

12

13 Semantisk markup Semantik=”ordets betydelse”
Struktur och innehåll, inte utseende Fördelar

14 Head Under HTML-taggen Innehåll Base Link Meta Script Style Title

15 Meta Author Keywords Description Distribution

16 Meta-exempel <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pulkafantasternas webbsida</title> <meta name="description" content="En sida om vinter, snö, kyla, höga hastigeter och vänskap"/> <meta name="keywords" content="snö, kyla, vinter, vänskap"/> </head>

17 Body Rubriker <h1> - <h6> Stycke <p>
Bild <img> Länk <a> Listor <ul>, <ol>, <li>

18 Body Radbrytning <br/> Vågrätt streck <hr/>
<!—kommentar-->

19 Länkar Själva grejen! Nät av dokument Hyperlänkar
<a></a> anchor <a href =”supersidan.htm”>läs på supersidan</a> URL

20 Länkar Till ett annat dokument En speciell punkt i ett annat dokument
En speciell punkt i samma dokument

21 Listor Ordnade Oordnade Definitionslistor

22 Oordnade listor <ul> Symbol
<ul type= “circle/disk/square”>

23 Ordnade listor <ol> Numrering <ol type =“A/a/I/i/1”

24 Definitionslistor <dl> <dt>Egen beteckning</dt>
<dd>Här är innehållet i listan</dd>

25 Tabeller För att strukturera data
Tabellkropp <table>…</table> Tabellrad<tr>…</tr> Tabellcell <td>…</td> Tabellrubrik <th>…</th> Tabelltitel <caption>…</caption>

26

27 <body> <table border="2" cellpadding="2" cellspacing="8" > <caption> Julklappshoppning</caption> <tr> <td>startnr </td> <td>Häst </td> <td>Ryttare </td> </tr> <td>1 </td> <td>Pinglan</td> <td>Menea </td> <td>2 </td> <td>Napoleon</td> <td>Helena </td> </table> </body>

28 Bilder Lägga till bild <img scr = ”bild.jpg”> Beskriv bilden!
<img scr = ”bild.jpg” alt=En brun shetlandsponny”> Visas inte av alla webbläsare Använd väsentliga bilder

29 Bilder Bildens storlek, height + width Thumbnails

30 Bilder Tre format Jpeg Gif Png

31 Två grafiska modeller (båda modellerna presenteras med pixelgrafik på skärm)
Uppbyggd av kvadatriska bildelement Pixlar (picture element) 800x600 punkter Fotografiska bilder För tryck 300 dpi Objektgrafik Matematisk beräkning av kurvor och linjer Konturlinjer med fyllning Skapas när den ritas upp på skärm eller skrivare Kräver lite minne Har ersatt vektorgrafiken

32 Färg Två modeller RGB CMY(K)

33 RGB Additiv 0-255 256x256x256=16,7 miljoner färgkombinationer
True color Visas med ljus

34 CMY(K) Subtraktiv Mer färg = mörkare Mindre område än RGB CMY 0-255

35 Komprimering Totala informationsinnehållet i en bild ”Luft” i bilder
Kompression Förstörande/icke förstörande

36 Gif Icke förstörande kompression Text och streckteckningar
256 färger/bild Olika bilder = olika paletter

37 Jpeg Förstörande komprimering Foto True color Ljus/färg 10% vanligt

38 Png Kombinerar fördelar från Gif och Png Icke förstörande True color
Arbets och publiceringsformat Större filer

39 Ramar Dynamiska delvyer Länkar mellan vyerna Påverkas inte av varandra

40 Server Side Include (SSI)
Webbserver hämtar in HTML-kod från externa HTML-dokument Sidhuvuden, menyer Filändelse .shtml

41 Dynamiska webbplatser
DHTML Kombination av formatmallar och JavaScript Interaktiva webbsidor

42 Dynamiska webbplatser
4 karaktäristiska funktioner Händelser Positionering av element Dynamiska formatmallar Dynamiskt innehåll

43 Formulär ”Digital blankett” Server tar emot och behandlar innehållet

44 Formulär Form method: Get Post Action: mail to Aktiv serversida

45 Formulär <form>…</form> Text Knappar Kryssrutor
Radioknappar Lösenordsfält Listor Rullgardin

46 Formulär exempel

47 <body> <form method="post" enctype="text/plain" Namn:<input type="text" name="namn" value="" /><br /> Favoritmat:<br /> <input type="checkbox" name="favoritmat" value="pizza" />pizza<br /> <input type="checkbox" name="favoritmat" value="pannkaka" />pannkaka<br /> <input type="checkbox" name="favoritmat" value="palt" />palt<br /> <input type="checkbox" name="favoritmat" value="potatis" />potatis <br/> <input type="submit" value="skicka" /> </form> </body>

48 Java och JavaScript Objektorienterade språk Funktionalitet
Interaktivitet

49 Tips Tänk på engelska! h – header, rubrik p – paragraph, stycke
img – image, bild

50 Specialtecken Å= å Ä= ä Ö= ö

51 Tänk på! Copyright Bilder, texter, program… Snegla men stjäl inte
Inget stötande material


Ladda ner ppt "XHTML."

Liknande presentationer


Google-annonser