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.

Slides:



Advertisements
Podobné prezentace
Web Michal Žůrek Jak se na něj dívám já..
Advertisements

Š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.
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 Cvičení 3 Nadpisy a základní formátovací elementy.
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Tvorba stránek  komu jsou stránky určeny  grafická úprava stránek  obsah  motivy vzhledu stránky
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í.
CSS a HTML 5. HTML 5 HTML5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích webových stránek. HTML5 umožňuje.
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/
Úvod do HTML. Co je HTML  zkratka pro HyperText Markup Language  značkovací jazyk pro hypertext  umožňuje publikaci dokumentů na internetu.
Základy html pro úplné začátečníky.
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)
Tvorba internetových aplikací v XHTML 2.0, XForms a XHTML Print Autor: Adam Zluky, Vedoucí práce: PaedDr. Petr Pexa, JČU, 2008 Diplomová práce.
Jak na web První krůčky Lukáš Reindl. Co je potřeba Budeme potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (ve Windows Notepad.
HYPERTEXT PREPROCESSOR. JAZYK PHP. Jazyk PHP (Hypertext PreProcessor) je intepretovaný jazyk určený pro web. Je celkem jednoduchý, snadno přenositelný.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Tvorba www stránek SYNTAXE ICT 4.ročník. Obsah TAGY TAGY ATRIBUTY ATRIBUTY KŘÍŽENÍ TAGŮ KŘÍŽENÍ TAGŮ VELIKOST PÍSMEN VELIKOST PÍSMEN MEZERY VE ZDROJOVÉM.
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:
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.
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.
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.
Mgr. Vlastislav Kučera přednáška č. 1.  jazyk (x)html  kaskádové styly.
VY_32_INOVACE_4.3.IVT1.10/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Validita stránek.
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_257 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
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.
Návrh a tvorba WWW Cvičení 4
HTML jazyk Označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
XML Schema Irena Mlýnková. Obsah XML – úvod, příklad, základní pojmy DTD – přehled XML Schema – podrobně.
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.
Brána k poznání Dokončení první fáze – základní značky HTML.
Internetový prohlížeč
AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011.
WWW stránky – Úvod Mgr. Lenka Švancarová.
TNPW1 Technologie pro publikování na webu Cvičení č. 2 Překlad URL na fyzickou adresu stránky Editor Macromedia Homesite „Hello world“ v XHTML (úvod do.
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
Párová a nepárová značka, atributy a jejich hodnoty
Vít Profant Obhajoba bakalářské práce
Jak učit tvorbu www stránek Navarová Adéla. Proč učit tvorbu www stránek? Prezentace na internetu (Výrobky, firmy, celebrity, kluby…)
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.
PHP Programy pro tvorbu WWW stránek - 01
Mgr. Ludmila Urbášková CDV UP Olomouc Jak dostaneme MM ke studentům? Standardy HTTP, HTML (XHTML), CSS WYSIWYG editor nebo jiný editor (X)HTML Grafický.
Petr Šmíd Obsah prezentace Co je to XML ?
Úvod do XML S využitím materiálů z Zdeněk Žabokrtský.
HYPERTEXT PREPROCESSOR. JAZYK PHP. VYUŽITÍ JAZYKA Programování dynamických internetových stránek a webových aplikací vytvoření šablony webu kniha návštěv.
HyperText Markup Language (zkratka HTML) je v informatice název značkovacího jazyka používaného pro tvorbu webových stránek, které jsou propojeny hypertextovými.
Jak fungují webové stránky Úvod do HTML (1). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická.
Tvorba WWW stránek. Hyperlink Odkaz, bývá označený jinou barvou a podtržený Odkaz, bývá označený jinou barvou a podtržený Reaguje na událost myši – Reaguje.
Tvorba www stránek – (01) úvod Autor: Mgr. Josef Motl Datum: , ročník: 7. ročník ZŠ Vzdělávací oblast: Informační technologie Anotace: Prezentace.
EU peníze školám Registrační číslo projektu CZ.1.07/1.4.00/ Název projektu Inovace školství Šablona - název Inovace a zkvalitnění výuky prostřednictvím.
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.
Návrh a tvorba WWW Cvičení 1 HTML 5. Pracovní prostředí Vývojové prostředí NetBeans ( Webový server Apache (
ŠKOLA: Gymnázium, Chomutov, Mostecká 3000, příspěvková organizace AUTOR:Mgr. Martin Jiřiště NÁZEV:VY_32_INOVACE_08C_17_uvod_do_html TEMA:Multimédia a grafika.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
XML a datový standard Zdeněk Jirkovec Softwarové Aplikace a systémy.
WWW a HTML Základní pojmy Ivo Peterka.
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír.
XHTML X HTML (Extensible Hypertext Markup Language)
WWW a HTML Základní pojmy Ivo Peterka.
Značkovací jazyk HTML Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
HTML Vojtěch novotný 9.a.
Transkript prezentace:

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

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Vznik HTML 1991, vychází z SGML nástroj pro spojování dokumentů z různých zdrojů zkratka HTML –HyperText Markup Language –hypertextový značkovací jazyk jazyk sice ochuzený, avšak jednoduchý popisuje –co má být na stránce umístěno –jak má stránka vypadat o vzhledu však bohužel rozhoduje klient - prohlížeč problémy –menší důraz na informace –větší důraz na vzhled webových stránek vývoj zajišťuje World-Wide-Web Consorcium ale od verze 4.01 už se dále nevyvíjí

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Vznik XML 1998, vychází z SGML zkratka XML –eXtensible Markup Language –rozšiřitelný značkovací jazyk umožňuje mimo jiné –vytvářet vlastní značky (předem žádné nedefinuje) –zpracovávat data pro předčítání nevidomým –vytvářet neomezené množství různých výstupů na základě oddělených dat (CSS, XSLT) vyvíjen jako –prostředek na překonání nedostatků a omezení prvků v HTML –standardní formát pro zpracování dat odděluje formátovací značky od sémantických –vzhled a obsah problémy při tvorbě vlastních značek

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Vznik XHTML 2000, vychází z HTML 4 se striktnější syntaxí zkratka XHTML –eXtensible Hypertext Markup Language –rozšiřitelný hypertextový značkovací jazyk výhody: –má dané standardní značky –umožňuje přidávat nové –snadnější přechod než na XML –zpětně kompatibilní s předchozími jazyky založen na tom,že –pravidla XML jsou jednoduchá –povědomí o HTML značné snaha o: –zpřehlednění syntaxe –zavedení pořádku –snadnou přenositelnost –zobrazitelnost na jiných platformách než PC

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Obecný úvod html soubor je obyčejný text proložený značkami, kterým se říká tagy tagy určují, co a jak bude na stránce umístěno rozdělení: –párové, nepárové –sémantické, formátovací příklady: Zde je obsah nějakého odstavce., možnost použití atributů Mgr. Marek Osuchowski

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Syntaxe HTML nezáleží na velikosti písma tagy, které prohlížeč nezná, ignoruje na začátku tagu nesmí být mezera dvě mezery po sobě mají stejný význam jako jedna mezera jména atributů je vhodné dávat do uvozovek nebo do apostrofů speciální znaky se do zdroje zadávají jako posloupnost znaků začínající znakem ’&’ a končící středníkem komentář se do zdroje vkládá mezi značky ‘ ‘ obsahem značky může být další značka zákaz křížení tagů

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Syntaxe XHTML všechny tagy musí být uzavřené, párové i nepárové tagy, které jsou nepárové je potřeba doplnit lomítkem všechny atributy musí mít svou hodnotu obsah atributů musíme uzavírat do uvozovek pozor na správné vnořování tagů tagy i atributy se musí psát malými písmeny nemůžeme používat speciální znaky přímo v textu stránky musí začínat platnou deklarací typu dokumentu

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Struktura stránky v HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> Moje první stránka v HTML Můj první odstavec

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Struktura stránky v XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="cs" lang="cs"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Moje první stránka v XHTML Můj první odstavec

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr !Doctype každý HTML i XHTML dokument musí uvést své DTD –Document Type Definition dává prohlížeči informace: –jaké elementy má používat –kdy je může použít –jaké jsou jejich vlastnosti –jak má s nimi zacházet ačkoliv tento prvek je součástí (X)HTML dokumentu, platí pro něj jiná pravidla, a proto jej není potřeba ukončovat

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr !Doctype 3 základní definice DTD: HTML 4.01: striktní přechodová s podporou rámců XHTML 1.0, resp. 1.1: striktní <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " přechodová <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " s podporou rámců <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Tabulka

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Validace proces, při kterém jsou dokumenty ověřovány proti příslušným DTD validace je ověření shody dokumentu se schématem validator načte vaši stránku, zjistí vůči jakému DTD (Strict/Transitional/Frameset) ji má validovat a přehledně vypíše seznam nalezených chyb, případně zprávu o tom, že je stránka validní jádrem validátoru je parser –program nebo programátorská knihovna

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Důvody validace nekompatibilita mezi prohlížeči nečitelnost obsahu stránek na jiných zařízeních zmatek v HTML kódu absence struktury problémy internetovým vyhledávačům velikost html souborů řešení, postup –oddělení obsahu a formy –strukturování dokumentů –čistý a standardům vyhovující kód

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr On-line a off-line validátory on-line validace – – možnosti validace ze souboru z webu přímo z textového pole off-line validace –PSPad –plugin do prohlížeče Mozilla Firefox

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Historie prohlížečů WorldWideWeb –1991 –první prohlížeč webových stránek –autor Tim Berners-Lee –přejmenován na Nexus Mosaic – –původně pro Unix –prvotní základ pro Netscape Navigator i IE

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Současnost prohlížečů Internet Explorer + verze IE 7 - otázky bezpečnosti Mozilla Firefox + stovky pluginů Opera + snaha o striktní dodržování standardů Safari -původně určen pro platformu Apple +nyní i pro Windows

Tvorba efektních www stránek pro každého Úvod Porovnání Validace Prohlížeče Závěr Děkuji za pozornost!