Mgr. Stěpan Stěpanov, 2013

Rozměr: px

Začít zobrazení ze stránky:

Download "Mgr. Stěpan Stěpanov, 2013"

Ilona Staňková
před 8 lety
Počet zobrazení:

1 Mgr. Stěpan Stěpanov, 2013

2 Abstrakt V tomto kurzu se seznámíme se základními pojmy HTML, klíčovými pravidly pro práci se značkami a atributy a strukturou dokumentu. Také se dozvíte, jak a v čem lze vytvářet webové stránky.

3 Obsah Co to je HTML? Značky Atributy Struktura dokumentu První stránka za dvě minuty HTML editory a standardy

Co to je HTML? HTML HyperText Markup Language, hypertextový značkovací jazyk. Hypertext nelineárně strukturovaný text, obsahuje hyperlinky nebo-li odkazy.

4 Co to je HTML? HTML HyperText Markup Language, hypertextový značkovací jazyk. Hypertext nelineárně strukturovaný text, obsahuje hyperlinky nebo-li odkazy. HTML je základní a nejrozšířenější jazyk pro tvorbu webových stránek. První funkční verze byla vydána v roce Česká Wiki Anglická Wiki HTML 4 HTML 5

HTML je základní a nejrozšířenější jazyk pro tvorbu webových stránek.

5 Značky Do běžného textu se vkládají HTML <tagy>, tedy značky, určující význam, vzhled, způsob chování jednotlivých částí běžného textů. Tak vzniká hypertextový dokument nebo-li webová stránka. Značky se dělí na párové a nepárové. Název značky se vkládá mezi symboly < а >. Párová značka určuje počátek a konec svého působení, například počátek a konec zvýraznění tučným písmem nebo počátek a konec odkazu. Nepárová značka má jednorázový účinek, například vložení jednoho nového řádku.

Název značky se vkládá mezi symboly < а >.

Značky Začátek párové značky obsahuje její jméno a případné atributy v lomených závorkách < >. Konec párové značky obsahuje lomítko / a jméno značky v lomených závorkách < >.

6 Značky Začátek párové značky obsahuje její jméno a případné atributy v lomených závorkách < >. Konec párové značky obsahuje lomítko / a jméno značky v lomených závorkách < >. Případné atributy není třeba uvádět. Nepárová značka se píše stejně jako začátek párové značky, ale nemá žádný konec. Nepárová značka <br> Začátek <p> a konec </p> párové značky P

Konec párové značky obsahuje lomítko / a jméno značky v lomených Případné atributy není

7 Atributy značek Každá značka má specifikovanou množinu svých atributů. Atributy rozšiřují možnosti značek, řada značek má bez atributů minimální význam. Atributy se uvádí po jménu značky spolu s jejich hodnotou, neuvádí se při uzavření párové značky. Značka P obsahuje atribut align s hodnotou right Začátek <p> a konec </p> párové značky P

Atributy se uvádí po jménu značky spolu s jejich hodnotou, neuvádí se při uzavření

8 Tolerance Párová značka by měla mít svůj jasně stanovený počátek a konec. Nicméně HTML toleruje absenci konce u celé řády párových značek. Pozor! Neuzavřená párová značka, které chybí konec, může způsobit značné problémy! HTML také toleruje překlepy a nesprávně napsané značky. Pokud nerozpozná název značky nebo atributu značky, ignoruje takovou chybu. Ale i v tomto případě mohou utrpět finální vzhled a funkčnost stránky. Spustit příklad

Neuzavřená párová značka, které chybí konec, může způsobit značné problémy!

9 Tolerance Rozeberme příklad z minulého snímku: Párové značky <html>, <body> a <div> by měly mít svůj začatek a konec. Zde chybí </div>! Třetí značka <div> však postrádá uzavření, tudíž její platnost pokračuje dal. Ve výsledku i poslední odstavec je obarven červenou barvou.

Třetí značka <div> však postrádá uzavření, tudíž její platnost

10 Struktura dokumentu Základní struktura webové stránky: 1. Informace o dodržovaném DTD standardu. Pokud není uveden, prohlížeč sám rozhodně o zpětné kompatibility některých značek. 2. Kořenový element <html> na začátku a konci. 3. Hlavička <head>, obsahující název stránky <title>, informace o stylech, metadata o kódování dokumentu, klíčových slovech, autorovi atd. Do hlavičky se také umisťuje kód skriptovacích jazyků jako JavaScript, VB Script atd. 4. Tělo <body>, obsahující vlastní obsah dokumentu. Ve vzácných případech se nevyužívá.

Hlavička <head>, obsahující název stránky <title>, informace o stylech, metadata o kódování dokumentu, klíčových slovech, autorovi atd.

11 Struktura dokumentu Příklad kódu, obsahující, mimo jiné: 1. Informace o DTD standardu 4.01 Transitional. 2. Název stránky ve značce <title> 3. Metadata o českém kódování a autorovi. Spustit příklad

12 První stránka za dvě minuty 1. Otevřete program, zvaný Poznámkový Blok. Dá se spustit pomoci příkazu notepad.exe. 2. Napište do něj HTML kód, například tento: <html><body>ahoj světe!</body></html> 3. Uložte soubor pod libovolným názvem s příponou.html. 4. Dvakrát na něj kliknete, aby prohlížeč zobrazil vámi napsanou webovou stránku. Máme stejnou? Spustit příklad

Napište do něj HTML kód, například tento: <html><body>ahoj světe!</body></html> 3.

13 HTML editory Většina tvůrců webových stránek dnes používá HTML editory, zrychlující a usnadňují práci. Není zapotřebí vlastnit drahý složitý editor, stačí aby váš editor zobrazoval HTML kód stránky, zvýrazňoval značky a atributy, umožňovat náhled zpracovávané stránky a uměl kontrolovat případné chyby jako neuzavřené párové značky. Pozor! Většina konvertorů do formátu HTML dělají stránku nepřehlednou a těžkou na údržbu. Podívejte se po Free HTML editorech na Google!

atributy, umožňovat náhled zpracovávané stránky a uměl kontrolovat případné chyby jako neuzavřené párové značky.

14 Standardy HTML Postupem času mnoho značek HTML začalo být považováno za zastaralé a jejich využívaní se nedoporučuje. Objevily se kaskádové styly a skriptovací jazyky, rozšiřující možnosti původního HTML. Moderní prohlížeče stále nedodržují všechny standardy HTML. To způsobuje tvůrcům stránek mnoho problémů musí kontrolovat funkčnost stránek pro každý prohlížeč! Splňuje váš prohlížeč standard HTML 5?

Objevily se kaskádové styly a skriptovací jazyky, rozšiřující možnosti původního HTML.

15 Shrnutí Dozvěděli jsme se dnes o: HTML jako jazyce pro tvorbu webových stránek Značkách HTML párových i nepárových Atributech HTML Toleranci jazyka HTML a následcích chyb Struktuře dokumentu Editorech a standardech HTML a nyní umíme sami vytvářit jednoduchou stránku! Gratulujeme!

Toleranci jazyka HTML a následcích chyb Struktuře dokumentu Editorech

Podobné dokumenty

Stránka se dá otevřít dvěma způsoby

Stránka se dá otevřít dvěma způsoby Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá