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 •

    { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.se/7/1988264/slides/slide_23.jpg", "name": "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 0-255 •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