Transcript Jazyk HTML
V čem se píší web. dokumenty HTML XHTML JavaScript PHP Zajímavé odkazy HTML • HTML (HyperText Markup Language, značkovací jazyk pro hypertext) – standard pro vytváření stránek v systému World Wide Web – umožňuje publikaci stránek na Internetu – vývoj je ovlivněn vývojem webových prohlížečů, které zpětně ovlivňovaly definici jazyka – pro každou verzi existuje definice pravidel DTD (Document Type Definition) Značkovací jazyk • Značkovací jazyk (Markup Language) – jazyk, jehož zdrojový text obsahuje současně jak vlastní text, tak instrukce pro jeho zpracování – instrukce se zpravidla vyskytují v podobě: • příkazů (commands) • značek (tags) XHTML • XHTML(eXtensible Hypertext Markup Language – rozšiřitelný hypertextový značkovací jazyk) – je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý konsorciem W3C – původně se předpokládalo, že se stane nástupcem jazyka HTML, jehož vývoj byl verzí 4.01 ukončen – v roce 2007 však došlo k založení pracovní skupiny, která má za cíl vytvořit novou verzi HTML, která ponese označení HTML 5.0 – XHTML je stále paralelně vyvíjeno a nyní se pracuje na verzi 2.0. – XHTML oproti HTML nic nového nepřináší, snaží se o splnění všech norem – validitu (=platnost) Rozdíly XHTML oproti HTML • Některé věci platily už v HTML, XHTML je striktně vyžaduje: – Všechny atributy mají hodnoty v uvozovkách – Zákaz křížení tagů • Jaké jsou rozdíly XHML oproti HTML: – – – – – Tagy a atributy jsou malými písmeny Nepárové tagy končí lomítkem Párové tagy jsou párové povinně Všechny atributy musejí mít hodnotu Interní javascript a styly se zapisují jiným způsobem W3C • World Wide Web Consortium (W3C) – je mezinárodní konsorcium jehož členové společně s veřejností vyvíjejí webové standardy pro World Wide Web – cílem konsorcia je „Rozvíjet World Wide Web do jeho plného potenciálu vývojem protokolů a směrnic které zajistí dlouhodobý růst Webu“. – předsedou konsorcia je Tim Berners-Lee Client - Server • použití scriptu (=zdrojový kód programu) • rozdělení skriptů je podle toho, na kterém počítači program běží: – na klientovi nebo na serveru – Klient znamená počítač čtenáře s prohlížečem – Server je počítač, na kterém jsou stránky vystaveny JavaScript JavaScript je jednoduchý programovací jazyk, který je možno zapisovat přímo do HTML stránky. základ dynamického webu javaScript je klientský skript. To znamená, že se program odesílá se stránkou na klienta (do prohlížeče) a teprve tam je vykonáván. PHP PHP skripty jsou prováděny na straně serveru, k uživateli je přenášen až výsledek jejich činnosti. PHP Personal Home Page Tools, PHP Hypertext Preprocessor (tj. nástroj pro tvorbu osobních stránek) v kombinaci s databázovým serverem (především s MySQL) a webovým serverem Apache je využíván k tvorbě webových aplikací. zápis se vkládají do HTML souborů, odděluje se – značkami <? a ?> nejčastěji přípona php např. http://www.gyarab.cz/info.php?lang=cs http://www.jakpsatweb.cz/programovani.html Jazyk XML XML (eXtensible Markup Language) jde o rozšiřitelný značkovací jazyk, lze vytvářet vlastní značky byl vytvořen proto, aby uspokojil stále vzrůstající nároky na kvalitu a kvantitu zpracovávání informací. XML – zavazuje uživatele vytvořit dokument přísně v souladu se zadanou strukturou založen na principu obsahu a formy Příklad pomocí XML napíšete knihu, pak můžete prezentovat její krátký popis, zformovat obsah knihy a vytvořit v něm odkazy na každou kapitolu, vytisknout celý text Postup při práci na web. stránky 1. Důvod, cíl – komu je stránka určena 2. Grafický návrh 3. Editor – Poznámkový blok, WYSIWIG („What you see is what you get“ – „Co vidíš, to dostaneš“) 4. Grafický editor 5. Umístění stránky na web. server Jazyk HTML HyperText Markup Language (= nadtextový značkový jazyk) vzhled jednotlivých částí dokumentu jsou určeny značkami HTML dokument je možné napsat jednoduchým textovým editorem (např. Wordpad, Poznámkový blok) soubory mají příponu: .htm (Windows prostředí) .html (jiné prostředí) název souboru: bez diakritika a speciálních znaků HTML dokument užívané struktury běžný, formátovaný text obrázek hyperlink číslované a nečíslované seznamy tabulka HTML - značky • Html značky určují, jak bude vypadat holý text • značky se nazývají tagy <indentifikátor> • závorky lze napsat ALT+ <, ALT+> párové počáteční <tag> a koncová značka </tag> nepárové <tag> - zavádí na stránku nějaký objekt např. obrázek • < tag parametry> např. <body background="obrazek.gif" bgcolor="yellow" text="blue" link="green" vlink="olive" alink="#FF0000"> • tagy lze do sebe vnořovat Základní kostra dokumentu HTML • informace o verzi použitého HTML a typu DTD (Document Type Definition) např. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01"> • hlavička dokumentu • tělo dokumentu <html> <head> <title>Název stránky </title> </head> <body> …. </body> </html> Práce s textem <b>Tučný text</b> <center>Text bude centrovaný </center> <font size=5>Zvětší velikost písma </font> <br> – zalomení řádků Práce s obrázkem <img> • obrázek ze souboru <img src="obr.jpg"> Práce s hypertextovými odkazy <a> </a> • odkaz na stránku <a href=http://www.gyarab.cz> Školní stránky </a> Práce se seznamy s odrážkami <ul></ul> definuje seznam <li> </li> definuje položky, koncový tag je nepovinný • zápis <ul> <li> Hardware <li> Software </ul> zobrazení ● Hardware ● Software Práce se seznamy – pokračování číselný seznam <ol></ol> definuje seznam <li> </li> definuje položky, koncový tag je nepovinný • zápis zobrazení <ol> 1. Terie <li> Teorie 2. Praxe <li> Praxe </ol> • Oba seznamy lze kombinovat Ukázka na příkladu základní kostry dokumentu HTML <html> <head> <title> Studijní materiály </title> </head> <body> <b> Školní rok 2005/2006 </b> <center> Ivana Pechová </center> <a href=http://www.gyarab.cz> Školní stránky </a> <br> <font size=4> Materiály k výuce: </font> <ol> <li> Hardware <li> Software <li> <a href=ukol.htm>Zadání úkolu</a> </ol> Programy MS OFFICE <ul> <li> MS Word <li> MS Excel náhled v prohlížeči: ukázka.htm <li> MS PowerPoint <li> MS Access </ul> </body> </html> Zajímavé stránky Na následujících stránka má každý možnost získat další informace pro napsání vlastních stránek. http://www.jakpsatweb.cz http://www.kosek.cz http://www.grafikawww.cz http://barvy.gene.cz http://www.pixy.cz/apps/barvy http://www.drella.cz/templates http://www.pocitadlo.cz Zadání cvičení Tvorba – žákovských stránek • stránky zpracujete v poznámkové bloku • úvodní stránka (index.htm) – základní informace • něco o sobě, fotografie – portrét – odkaz na další stránku (zaliby.htm) • záliby (zaliby.htm) – zájmy, záliby – odkaz na oblíbenou stránku při zpracování použít: – použít minimálně jeden seznam (odrážky nebo číslování) – fotografie – upravit velikost obrázků Odevzdání práce • datum odevzdání: v týdnu od 3. 12. 2007 • stránky budou zveřejněny na školních webových stránkách, • obsah a zpracování musí tomu odpovídat