Š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.

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Tagy neboli příkazy Olga Kasafírková Základy HTML.
Tvorba webových stránek
WWW stránky.
Tvorba WWW stránek ÚVOD
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
TNPW1 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
Základní struktura, metainformace
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
HyperText Markup Language
Jazyk HTML Název školyZákladní škola a Mateřská škola Tatenice Číslo projektuCZ Název šablony klíčové aktivity Inovace a zkvalitnění výuky pomocí.
VY_32_INOVACE_4.3.IV1.02/Ku Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/
Nové modulové výukové a inovativní programy - zvýšení kvality ve vzdělávání Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem.
Úvod do HTML. Co je HTML  zkratka pro HyperText Markup Language  značkovací jazyk pro hypertext  umožňuje publikaci dokumentů na internetu.
Programování HTML stránek
Serialization (převod) Úvod 1 SGML W3C HTML 1.x. HTML4.0 xHTML 1.0. xHTML 2.x HTML 5 (xHTML 5) HTML 4.0 xml (xHTML 1.0) xHTML je dobřé zformovaný (well-formed)
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
TVORBA WEBOVÝCH STRÁNEK
Číslo šablony: III/2 VY_32_INOVACE_P4_3.10 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - tagy Typ: DUM - kombinovaný Předmět:
Návrh a tvorba WWW Cvičení 2 CSS 3. Cascading Style Sheet Cascading Style Sheet (kaskádové styly) je stylový jazyk, který se používá pro popis vzhledu.
Tvorba webových stránek II. Odkazy, obrázky, seznamy.
XHTML Tvorba webových stránek. Vývoj značkovacích jazyků HTML – HyperText Markup Language  Značkovací jazyk pro vytváření www stránek. Pomocí značek.
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.11/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Veronika Hladíková. V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám.
VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
GWEB2 MGR. VLASTISLAV KUČERA 2. PŘEDNÁŠKA. Obsah přednášky  Prvky rozdělující obsah  article, aside, nav, section  header  footer.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:
Tvorba WWW stránek HTML - XHTML Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Každá.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_258 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Maturitní okruh 22: Úvod do HTML. Značkovací a klasické jazyky Klasické: převládá strukturovaný text (programovací kód), skripty jsou prováděny na straně.
HTML, XHTML a CSS Základy jazyků značek.
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
Návrh a tvorba WWW Cvičení 4
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
CSS Cascading Style Sheets Kaskádové styly
DTD DTD (Document Type Definition) je jinými slovy návod pro prohlížeč zpracovávající dokument. DTD (Document Type Definition) je jinými slovy návod pro.
XHTML – obrázky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
Brána k poznání Dokončení první fáze – základní značky HTML.
CO NÁS ČEKÁ ve cvičení 5 Oč. - KIT PEF CZU 1. O DKAZY Chceme-li, aby čtenář naší html stránky někam odklepnul..... Oč. - KIT PEF CZU.
WWW stránky – Úvod Mgr. Lenka Švancarová.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.
Párová a nepárová značka, atributy a jejich hodnoty
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Tvorba efektních www stránek pro každého Od historie až po současnost… Úvod Porovnání Validace Prohlížeče Závěr.
HTML a spol.. Nejpoužívanější formát dat textových dokumentů poskytovaných v rámci služby WWW. HTML (Hyper Text Markup Language) je jazyk pro popis struktury.
Odkazy. Href Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Úvod do XML S využitím materiálů z Zdeněk Žabokrtský.
HTML stránka – vložení obrázku Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín Tematická oblastTvorba WWW stránky v HTML Datum vytvoření2013.
Inf Webová stránka, princip HTML a CSS. Výukový materiál Číslo projektu: CZ.1.07/1.5.00/ Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím.
Tvorba WEBOVÝCH stránek – kostra dokumentu Šablona 32 VY_32_INOVACE_12_10_Tvorba webových stránek-kostra dokumentu.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
WWW a HTML Základní pojmy Ivo Peterka.
WWW a HTML Základní pojmy Ivo Peterka.
Základy HTML TNPW1 Ing. Jiří Štěpánek.
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
HTML Vojtěch novotný 9.a.
Transkript prezentace:

Š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  Základní konstrukce v XHTML  Strukturování textu  Vkládání obrázků  Vkládání odkazů

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  XHTML se snaží více oddělit prezentační vlastnosti (grafika, formátování) od struktury dat.

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.

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

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.

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.

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

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

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.

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.

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ší.

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“.

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

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.

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é.

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. 

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

Konec  Děkuji za pozornost.