Ladda ner presentationen
Presentation laddar. Vänta.
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“>
" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“> " Frameset//EN”> "
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>
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/>
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>
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
Liknande presentationer
