jazyk html
DESCRIPTION
Jazyk HTML. Charakteristika HTML. HyperText Markup Language , 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 publikaci dokumentů na Internetu . HTML je jazyk a má svou přesnou syntaxi. - PowerPoint PPT PresentationTRANSCRIPT
Jazyk HTMLJazyk HTMLNázev školy Základní škola a Mateřská škola Tatenice
Číslo projektu CZ. 1.07Název šablony klíčové aktivity
Inovace a zkvalitnění výuky pomocí ICT
Vzdělávací oblast Informační a komunikační technologieVzdělávací období 3.Předmět Základy informatikyTéma hodiny Jazyk HTMLOznačení VY_32_INOVACE_03_Jazyk HTMLAutor Mgr. Petr Vitásek
Charakteristika HTMLCharakteristika HTML
HyperText Markup LanguageHyperText Markup Language, , označovaný zkratkou označovaný zkratkou HTMLHTML, je , je značkovací jazyk pro pro hypertext. Je . Je jedním z jazyků pro vytváření jedním z jazyků pro vytváření stránek v systému World Wide Web, stránek v systému World Wide Web, který umožňuje publikaci dokumentů který umožňuje publikaci dokumentů na Internetu. na Internetu.
HTML je jazyk a má svou přesnou HTML je jazyk a má svou přesnou syntaxi. syntaxi.
Tagy a odkazyTagy a odkazy TagTag (český výraz není používaný, (český výraz není používaný,
nejblíže je zřejmě slovo značka) je nejblíže je zřejmě slovo značka) je chráněné slovo jazyka HTML, uzavřené chráněné slovo jazyka HTML, uzavřené do špičatých závorek. Všechny příkazy do špičatých závorek. Všechny příkazy jazyka HTML jsou tagy – vše, co je mimo jazyka HTML jsou tagy – vše, co je mimo špičaté závorky, je vlastní obsah stránky.špičaté závorky, je vlastní obsah stránky.
Rozdělení: Rozdělení: Párové tagyPárové tagy – uzavírají mezi sebe obsah a – uzavírají mezi sebe obsah a
přiřazují mu tak danou hodnotu. přiřazují mu tak danou hodnotu. Nepárové tagyNepárové tagy – umísťují do stránky jediný – umísťují do stránky jediný
prvek.prvek.
Párové tagyPárové tagy
uzavírají mezi sebe obsah a uzavírají mezi sebe obsah a přiřazují mu tak danou hodnotu. přiřazují mu tak danou hodnotu. Tag na levé a pravé straně výrazu Tag na levé a pravé straně výrazu je stejný, ovšem uzavírající tag má je stejný, ovšem uzavírající tag má navíc za závorkou lomítko. navíc za závorkou lomítko. Příkladem párového tagu je tag Příkladem párového tagu je tag <title>, který v sobě uzavírá název <title>, který v sobě uzavírá název www stránky:www stránky:
<title>Název stránky</title><title>Název stránky</title>
Nepárové tagyNepárové tagy
umísťují do stránky umísťují do stránky jediný prvekjediný prvek, , který je už svou podstatou který je už svou podstatou nedělitelný. Jde například o tyto nedělitelný. Jde například o tyto prvky: prvky:
pozadí www stránkypozadí www stránky vodorovná linkavodorovná linka obrázek, aj. obrázek, aj.
<img src=“obrazek01.jpg“> <img src=“obrazek01.jpg“>
OdkazyOdkazy
Jsou důležitým principem HTMLJsou důležitým principem HTML Odkazují na místo v aktuálním dokumentu – Odkazují na místo v aktuálním dokumentu –
tzv. záložku:tzv. záložku:
<a href="#Výlet do hor">Výlet do <a href="#Výlet do hor">Výlet do hor</a> hor</a>
Vkládají obrázek do stránky:Vkládají obrázek do stránky:
<img src="obrazky/kvetina.gif"><img src="obrazky/kvetina.gif"> Mohou odkazovat na jiná data na jiné Mohou odkazovat na jiná data na jiné
stránce:stránce:<a href="http://www.seznam.cz">Seznam.cz</a><a href="http://www.seznam.cz">Seznam.cz</a>
Struktura kódu HTMLStruktura kódu HTML Správná struktura webové stránky je důležitá pro její bezchybné Správná struktura webové stránky je důležitá pro její bezchybné
zobrazení ve všech prohlížečích – tzv. „VALIDITA“ podle zobrazení ve všech prohlížečích – tzv. „VALIDITA“ podle mezinárodního standartu jazyka HTML, XHTML atd.mezinárodního standartu jazyka HTML, XHTML atd.
Ikonky vyjadřující validitu umístěné na některých stránkách Ikonky vyjadřující validitu umístěné na některých stránkách informují návštěvníky o tom, že jsou VALIDNÍ a splňují informují návštěvníky o tom, že jsou VALIDNÍ a splňují předepsaný standart: předepsaný standart:
Odkaz na český validátor: http://validator.w3.cz/ Odkaz na český validátor: http://validator.w3.cz/
Základní části stránkyZákladní části stránky
1. <!DOCTYPE HTML PUBLIC“-//W3C//DTH HTML 4.0//EN“> ...... jde o označení typu dokumentu, verze HTML 2. <html> .... počátek textu ve formátu HTML 3. <head> .... počátek hlavičky 4. <title>Název stránky</title> .... název stránky zobrazený v titulku
okna 5. <meta name=“popis“ content=“Co dokument obsahuje“> ...... jde o meta-informaci obsahu souboru HTML 6. </head> .... konec hlavičky 7. <body> .... počátek těla, vlastního zobrazovaného obsahu stránky 8. Obsah stránky - text, obrázky, odkazy, případně scripty aj. 9. </body> ..... konec těla stránky10. </html> ..... konec formátu HTML
Přehled tagůPřehled tagů
Kompletní přehled HTML značek Kompletní přehled HTML značek (tagů) potřebných pro vytváření (tagů) potřebných pro vytváření webové stránky najdete na adrese:webové stránky najdete na adrese:
http://www.jakpsatweb.cz/html/http://www.jakpsatweb.cz/html/
V čem programovat?V čem programovat?
Struktura webové stránky je textový Struktura webové stránky je textový kód, tzn. můžeme jej psát v textovém kód, tzn. můžeme jej psát v textovém editoru – Poznámkovém bloku Windows editoru – Poznámkovém bloku Windows a uložit soubor s příponou a uložit soubor s příponou *.html, *.html, *.htm*.htm nebo nebo *.php *.php
Editory HTMLEditory HTML Komerční: Komerční: Microsoft FrontPage 2003Microsoft FrontPage 2003 FreewareFreeware: NVU, PSPad, EasyPad aj.: NVU, PSPad, EasyPad aj.
Jak začít?Jak začít? Vložíme Vložíme hlavní tabulkuhlavní tabulku – pro lepší formátování – pro lepší formátování
umísťujeme texty a obrázky do tabulek...umísťujeme texty a obrázky do tabulek... Nastavíme Nastavíme pozadí stránkypozadí stránky (jednobarevné nebo (jednobarevné nebo
tapeta)...tapeta)... Píšeme Píšeme textytexty, vkládáme , vkládáme hypertextové odkazyhypertextové odkazy...... Vkládáme Vkládáme zmenšené obrázkyzmenšené obrázky (miniatury) s (miniatury) s
odkazem na velké (originální)...odkazem na velké (originální)... Optimalizujeme kód (nadpis stránky, kódování Optimalizujeme kód (nadpis stránky, kódování
aj.)...aj.)... První stránku (Home Page) uložíme pod názvem První stránku (Home Page) uložíme pod názvem
souboru „souboru „index.htmlindex.html““
KONECKONEC
prameny:prameny:http://validator.w3.cz/http://validator.w3.cz/
http://cs.wikipedia.org/wiki/Htmlhttp://cs.wikipedia.org/wiki/Htmlhttp://www.jakpsatweb.cz/ http://www.jakpsatweb.cz/