ZÁKLADY JAZYKA HTML Číslo projektu CZ.1.07/1.5.00/34.0265 Název školy Střední odborná škola stavební a Střední odborné učiliště stavební, Kolín II, Pražská 112 Označení materiálu 7/HK/IKT/2/19 Tematický okruh Software PC Cílová skupina Žáci studijního oboru Mechanik instalatérských a elektrotechnických zařízení Předmět/ročník Informační a komunikační technologie/3. ročník Autor, datum vytvoření Radek Hanka, březen 2013 Anotace Výukový učební materiál je zaměřen počítačový jazyk HTML. Seznamuje žáky se základními charakteristikami, použitím a zápisem kódu HTML. Klíčová slova Osobní počítač, software, programovací jazyk, tag. Pokud není uvedeno jinak, použitý materiál je z vlastních zdrojů autora
Základy jazyka HTML
JAZYK HTML vysvětlení pojmu HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.
JAZYK HTML historie 1989 – spolupracovali Tim Berners-Lee navrhuje jazyk HTML 1991 – verze 0.9 (nepodporuje grafický režim) 1994 – verze 2.0 (podpora grafického režimu) 1997 – verze 3.2 (nově podpora tabulek) a 4.0 (nově podpora stylů) 1999 – verze 4.01 (opravuje chyby verze 4.0) 2007 – vývoj nové verze (není dokončen)
JAZYK HTML koncepce Jazyk HTML je charakterizován množinou značek (tzv. tagů) a jejich atributů. Mezi značky se uzavírají části textu dokumentu a tím se určuje význam obsaženého textu. Názvy jednotlivých značek se uzavírají mezi úhlové závorky < a >.
JAZYK HTML struktura dokumentu Dokument v jazyku HTML má předepsanou strukturu: deklarace DTD – je uvedena direktivou <!DOCTYPE kořenový element – element html (značky <html> a </html>) reprezentuje celý dokument hlavička elementu – definují název dokumentu, jazyk, kódování. Je uzavřena mezi značky <head> a </head> tělo dokumentu – obsahuje vlastní text dokumentu. Vymezuje se značkami <body> a </body>
JAZYK HTML nejdůležitější tagy Kromě již zmíněných tagů HTML, HEAD a BODY jsou nejpoužívanějšími tagy: <p></p> (vytvoření nového odstavece) <img src="name"> (vložení obrázku) <hl></hl> (vytvoření největšího nadpisu) <table></table> (vytvoření tabulky) <a href="URL"></a> (vytvoření odkazu)
JAZYK HTML příklad zdrojového kódu <!doctype html> <html> <!-- toto je komentář --> <head> <meta charset="kódování"> <title>Titulek stránky</title> </head> <!-- tělo dokumentu --> <body> <h1>Nadpis stránky</h1> <p>Toto je tělo dokumentu</p> </body> </html>
JAZYK HTML editory jazyka HTML Editory HTML jsou programy pro snadnou tvorbu webových stránek. Dělíme je na dva základní druhy: textové editory WYSIWYG editory
JAZYK HTML textové editory jazyka HTML editorem HTML může být ve své podstatě jakýkoliv program pracující s textem běžný editor HTML zvládá barevnou syntaxi (barevně rozlišuje jednotlivé části kódu jako například HTML značky či atributy a prostý text) nejznámější textové editory jsou: Gedit, Notepad++ nebo PSPad
JAZYK HTML WYSIWYG editory jazyka HTML WYSIWYG je zkratka od anglického „What you see is what you get“, v překladu „Co vidíš, to dostaneš“. ve WYSIWYG editoru se pracuje s již hotovou stránkou a můžeme si ji poskládat podle svého - program následně vygeneruje požadovaný kód mezi nejznámější WYSIWYG editory patří Adobe Dreamweaver nebo Microsoft Expression Web
JAZYK HTML procvičování 1.) Co je to HTML a proč se používá? 2.) V jakém roce se poprvé objevil pojem HTML? 3.) Uveď alespoň pět tagů jazyka HTML? 4.) Co je to textový editor HTML? Uvěď dva příklady. 5.) Co je to WYSIWYG editor HTLM? Uveď dva příklady.
POUŽITÉ ZDROJE 1. AUTOR NEUVEDEN. HTMLWhiteBG2.jpg (2000×1500) [online]. [cit. 17.3.2013]. Dostupný na WWW: http://www.zachgraeve.com/wp-content/uploads/HTMLWhiteBG2.jpg