Presentation laddar. Vänta.

Presentation laddar. Vänta.

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

Liknande presentationer


En presentation över ämnet: "XHTML. En webbsidas uppdelning •Struktur HTML, XHTML ………………………………………………….. •Utseende CSS ……………………………………………… •Beteende Java Script."— 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 Tre versioner •Strict •Transitional •Frameset HTML 4.01

7 Versionerna "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/html4/frameset.dtd">

8 Huvudstruktur … …

9 Syntax Element med innehåll: En stor rubrik

10

11 Element utan innehåll •Alla taggar har start och sluttagg •br, hr, img Exempel: En stor rubrik En ny rad

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 • • pulkafantasternas webbsida •

17 Body •Rubriker - •Stycke •Bild •Länk •Listor,,

18 Body •Radbrytning •Vågrätt streck •

19 Länkar •Själva grejen! •Nät av dokument •Hyperlänkar anchor läs på supersidan •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 • •Symbol •

23 Ordnade listor • •Numrering •


    24 Definitionslistor • Egen beteckning Här är innehållet i listan

    25 Tabeller •För att strukturera data •Tabellkropp … •Tabellrad … •Tabellcell … •Tabellrubrik … •Tabelltitel …

    26

    27 • • Julklappshoppning • • startnr • Häst • Ryttare • • 1 • Pinglan • Menea • • 2 • Napoleon • Helena •

    28 Bilder •Lägga till bild •Beskriv bilden! •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) Pixelgrafik •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 •CMYK 0-100

    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 • … •Text •Knappar •Kryssrutor •Radioknappar •Lösenordsfält •Listor •Rullgardin

    46 Formulär exempel

    47 • •Namn: •Favoritmat: • pizza • pannkaka • palt • potatis •

    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. En webbsidas uppdelning •Struktur HTML, XHTML ………………………………………………….. •Utseende CSS ……………………………………………… •Beteende Java Script."

Liknande presentationer


Google-annonser