XHTML
En webbsidas uppdelning Struktur HTML, XHTML ………………………………………………….. Utseende CSS ……………………………………………… Beteende Java Script
HTML Hypertext Historia W3C XHTML HTML 5
Formatering Hyper Text Markup Language Inget programmeringsspråk Struktur
Struktur
HTML 4.01 Tre versioner Strict Transitional Frameset
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">
Huvudstruktur <html> <head> <title>…</title> <style>…</style> </head> <body>…</body> </html>
Syntax Element med innehåll: <h1 align="center"> En stor rubrik</h1>
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/>
Semantisk markup Semantik=”ordets betydelse” Struktur och innehåll, inte utseende Fördelar
Head Under HTML-taggen Innehåll Base Link Meta Script Style Title
Meta Author Keywords Description Distribution
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>
Body Rubriker <h1> - <h6> Stycke <p> Bild <img> Länk <a> Listor <ul>, <ol>, <li>
Body Radbrytning <br/> Vågrätt streck <hr/> <!—kommentar-->
Länkar Själva grejen! Nät av dokument Hyperlänkar <a></a> anchor <a href =”supersidan.htm”>läs på supersidan</a> URL
Länkar Till ett annat dokument En speciell punkt i ett annat dokument En speciell punkt i samma dokument
Listor Ordnade Oordnade Definitionslistor
Oordnade listor <ul> Symbol <ul type= “circle/disk/square”>
Ordnade listor <ol> Numrering <ol type =“A/a/I/i/1”
Definitionslistor <dl> <dt>Egen beteckning</dt> <dd>Här är innehållet i listan</dd>
Tabeller För att strukturera data Tabellkropp <table>…</table> Tabellrad<tr>…</tr> Tabellcell <td>…</td> Tabellrubrik <th>…</th> Tabelltitel <caption>…</caption>
<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>
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
Bilder Bildens storlek, height + width Thumbnails
Bilder Tre format Jpeg Gif Png
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
Färg Två modeller RGB CMY(K)
RGB Additiv 0-255 256x256x256=16,7 miljoner färgkombinationer True color Visas med ljus
CMY(K) Subtraktiv Mer färg = mörkare Mindre område än RGB CMY 0-255
Komprimering Totala informationsinnehållet i en bild ”Luft” i bilder Kompression Förstörande/icke förstörande
Gif Icke förstörande kompression Text och streckteckningar 256 färger/bild Olika bilder = olika paletter
Jpeg Förstörande komprimering Foto True color Ljus/färg 10% vanligt
Png Kombinerar fördelar från Gif och Png Icke förstörande True color Arbets och publiceringsformat Större filer
Ramar Dynamiska delvyer Länkar mellan vyerna Påverkas inte av varandra
Server Side Include (SSI) Webbserver hämtar in HTML-kod från externa HTML-dokument Sidhuvuden, menyer Filändelse .shtml
Dynamiska webbplatser DHTML Kombination av formatmallar och JavaScript Interaktiva webbsidor
Dynamiska webbplatser 4 karaktäristiska funktioner Händelser Positionering av element Dynamiska formatmallar Dynamiskt innehåll
Formulär ”Digital blankett” Server tar emot och behandlar innehållet
Formulär Form method: Get Post Action: mail to Aktiv serversida
Formulär <form>…</form> Text Knappar Kryssrutor Radioknappar Lösenordsfält Listor Rullgardin
Formulär exempel
<body> <form method="post" enctype="text/plain" action="mailto:elin.johansson@tfe.umu.se"> 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>
Java och JavaScript Objektorienterade språk Funktionalitet Interaktivitet
Tips Tänk på engelska! h – header, rubrik p – paragraph, stycke img – image, bild
Specialtecken Å= å Ä= ä Ö= ö
Tänk på! Copyright Bilder, texter, program… Snegla men stjäl inte Inget stötande material