Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.

Prezentace na téma: "Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy."— Transkript prezentace:

1 Štěpán Šípal Gymnázium Čakovice

2 Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy  Základní konstrukce v XHTML  Strukturování textu  Vkládání obrázků  Vkládání odkazů

3 Vznik XHTML  XHTML je nástupce HTML, založený na technologii XML.  HTML vzniklo v roce 1991 pro nejjednodušší prezentaci strukturovaných textových dat na síti.  HTML používá k formátování dat tagy.  Poslední verze HTML 4,01 je z roku 1999.  XHTML se snaží více oddělit prezentační vlastnosti (grafika, formátování) od struktury dat.

4 Verze XHTML  Verze Strict  Čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu.  Verze Transitional  Povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy.  Verze Frameset  Používá se pro rozdělení v rámcích.

5 Pravidla XHTML  Na začátku dokumentu se nachází deklarace xml   Dále se deklaruje typ dokumentu DTD  Document type definition. 

6 Pravidla XHTML  Kořenový element (tag) obsahuje atribut xmlns a atribut, který určuje jazyk dokumentu.   Uvnitř elementu jsou vždy elementy a.  Hlavička musí obsahovat element title a měla by obsahovat meta tag s uvedením kódování stránky.  Všechny tagy musí být malým písmem.

7 Základy XHTML  Všechny tagy jsou párové  Při použití tagu „bez obsahu“ se ten musí uzavřít lomítkem na konci.  Příklad:  Zanořované tagy se nesmí nikdy křížit.

8 Tagy  Tagy jsou uzavřené ve špičatých závorkách  Ke každému tagu musí v XHTML existovat zakončení – zakončuje se zpětným lomítkem /  Pokud je tag „samostatný“, je zpětné lomítko před uzavírací špičatou závorkou.   Pokud má tag obsah, zakončuje se stejným tagem s lomítkem za otevírací špičatou závorkou

9 Elementy  Elementem nazýváme vše obsažené mezi otevíracím a uzavíracím tagem.  Rozlišujeme elementy  Blokové  Odstavce, nadpisy,...  Mohou obsahovat další blokové i řádkové elementy.  Řádkové (in-line)  Odkazy, vytučnění,...  Mohou obsahovat text, nebo další in-line elementy

10 Atributy  Vlastnosti elementů.  Zapisují se v otevíracím tagu.  Pokud jich je více, oddělují se mezerou.  Jejich hodnota se zapisuje v uvozovkách.  >Text zobrazovaný na stránce.

11 Základní tagy   Označuje html dokument.   Hlavička dokumentu.  Obsahuje meta tagy, title, odkazy na stylopis a další.   Titulek dokumentu, který se zobrazí jako název okna v prohlížeči.

12 Základní tagy II.   V tomto elementu se nachází samotná data stránky – informace.   Označení jednotlivého odstavce.  Základní tag pro formátování textu.  Nadpisy až  Označují nadpisy řazené dle důležitosti.  H1 je nejdůležitější.

13 Odkazy  Pro vkládání odkazů se používá tagu a  Tvorba  Text mezi otevíracím a zavíracím tagem se zobrazuje jako text odkazu.  Pokud na konec adresy zadáme #formular a podobne, stranka se automaticky presune na dane misto dokumentu.  Atributy  Target  Například otevírání do nového okna – target=“_blank“.

14 Odkazy II.  Atribut title  Text, který se zobrazí ve většině prohlížešů v bublině po najetí myší nad odkaz.  Výukové stránky

15 Obrázky  Tag  Povinně musí obsahovat atributy src a alt.  src = atribut obsahující adresu na které je obrázek umístěn.  alt = alternativní text, který se zobrazí v případě nedostupnosti obrázku, případně jejich zakázání v prohlížeči.  Mimo jiné důležitý také pro slepce prohlížející web.

16 Obrázky II.  Další atributy  width = šířka obrázku  height = výška obrázku  Je dobré je zadávat, prohlížeč si na ně tak připraví místo ještě před jejich samotným načtením a stránka při načítání „neskáče“.  Není dobré zadávat jiné hodnoty než skutečnou velikost – zmenšování v prohlížeči neprobíhá příliš sofistikovaně a obrázky jsou pak zkreslené.

17 Důležité meta tagy  Meta tag charset  Nejdůležitější.   Meta tag description  Popis obsahu stránky.  Některé vyhledávače (google) používají při vypisování nalezených stránek jako text pod odkazem. 

18 Meta tagy  Meta tag language   Meta tag autor   Meta tag robots   Říká vyhledávačům, zda mají indexovat tuto stránku.  Meta tag keywords 

19 Konec  Děkuji za pozornost.