4A Mgr. Jan Dolejš

Obsah hodiny Webové stránky Základní pojmy potřebné pro vytváření webové stránky Základy HTML

Dělení webových stránek Statické Každá stránka je tvořena jedním HTML dokumentem. To znamená, že její vzhled se bez změny HTML dokumentu nemění. Pro každou změnu je nutné upravit kód stránky!

Ukázka statické stránky

Dělení webových stránek Dynamické Dynamické stránky využívají skriptovací jazyky a databáze (například MySql). Takové stránky mohou umět reagovat na podněty od uživatele. Skriptování a vytváření obsahu na straně klienta (javascript) Skriptování a vytváření obsahů na straně serveru (php) Kombinování stran klienta a serveru (AJAX, google mapy)

Ukázka dynamické stránky

Základy HTML

Vývoj jazyka HTML VerzePodporovaná funkcionalita Verze Byly vytvářeny postupně v letech Nepodporují grafické rozhraní. Verze 2.0Byla vydána v listopadu 1995 komunitou IETF a zachycovala stav jazyka k červnu Přidává k původní specifikaci interaktivní formuláře a podporu grafiky. Verze 3.2Byla vydána 14. ledna 1997 komunitou W3C a zachycovala stav jazyka k počátku roku Tato verze přidává k jazyku tabulky, zarovnávání textu a stylové prvky pro ovlivňování vzhledu. Verze 4.0Byla vydána 18. prosince 1997 komunitou W3C. Do specifikace jazyka přibyly nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Tato verze se snaží dosáhnout původního účelu – prvky by měly vyznačovat význam (sémantiku) jednotlivých částí dokumentu, vzhled je ovlivňován připojovanými styly.

Vývoj jazyka HTML VerzePodporovaná funkcionalita Verze 4.01Byla vydána 24. prosince 1999 komunitou W3C. Tato verze opravuje některé chyby verze předchozí. Podle původního předpokladu se mělo jednat o poslední verzi, po které by se přešlo na XHTML. Verze 5.0Bude vydána v posledním čtvrtletí roku 2014 pracovní skupinou HTML Working Group komunity W3C. Od 17. prosince 2012 je specifikace ve fázi „Candidate Recommendation“ (vývojáři webových aplikací ji již mohou využívat). Tato verze ukončuje závislost HTML na SGML opravuje mnoho chyb předešlé verze, vyřazuje mnoho zastaralých a již nepoužívaných prvků a přidává nové sémantické prvky. Verze 5.1, 5.2Podle „Plánu 2014“, uvedeného HTML Working Group 20. září 2012, budou nové verze vydávány zhruba ve dvouletých cyklech. Verze 5.1 bychom se tedy měli dočkat v posledním čtvrtletí roku 2016 a verze 5.2 pravděpodobně v roce 2018.

Základy HTML HTML se skládá ze značek (tzv. tagů). Sám o sobě umožňuje hlavně dodávat prvkům (dále elementům) na stránce určitý význam a to je i jeho hlavní úkol. Tagy slouží k tomu, abychom jimi mohli obalovat text a tak mu dávat určitý význam. Píší do ostrých závorek. Velmi specifickým tagem je odkaz, který umožňuje procházet mezi jednotlivými stránkami a tak je provázat.

Druhy značek Strukturální značky Rozvrhují strukturu dokumentu, příkladem jsou třeba odstavce ( ) nebo nadpisy (, ). Dodávají dokumentu formu Popisné (sémantické) značky Popisují povahu obsahu prvku, příkladem je nadpis ( ) nebo adresa ( ) Stylistické značky Určují vzhled prvku při zobrazení, typickým příkladem je značka pro tučné písmo ( ). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu

Programy pro tvorbu HTML Editorem HTML může být ve své podstatě jakýkoliv program pracující s textem. Textové editory Běžný textový editor HTML zvládá barevnou syntaxi (barevně rozlišuje jednotlivé části kódu jako například HTML značky či vlastnosti a prostý text), dokáže napovídat značky, zná chytré tabulátory nebo zvládá validovat dokument podle předepsané specifikace

Programy pro tvorbu HTML WYSIWYG editory WYSIWYG je zkratka od anglického „What you see is what you get“, v překladu „Co vidíš, to dostaneš“ Editory tohoto typu pracují na opačném principu než textové editory – ve WYSIWYG editoru pracujete přímo s již hotovou stránkou uživatel tohoto editoru nemusí znát jazyk HTML Ve WYSIWYG editoru si může uživatel poskládat stránku a program následně vygeneruje požadovaný kód HTML

Programy pro tvorbu HTML Textový editor WYSIWYG editor

Struktura HTML dokumentu TagVýznam tagu htmlVymezuje HTML dokument. headVymezuje hlavičku dokumentu. title Název konkrétní stránky (HTML dokumentu), pro každou HTML stránku (HTML soubor) by měl být unikátní, zapisuje se do hlavičky. Zobrazí se v záhlaví prohlížeče – úplně nahoře. bodyVymezuje obsah stránky. To co napíšeme mezi značky se zobrazí v prohlížeči.

Párové a nepárové tagy Párové se skládají ze dvou částí z označení začátku ( ) a konce ( ), na rozdíl od nepárových. Nepárové ( ) se skládají pouze z jedné části. Nepárové tagy v závislosti na verzi mohou být psány, což je ale starší zápis a vzhledem k vývoji jazyka HTML a jeho nástupci xHTML je doporučeno psát nepárový tag spíše. Tedy ukončit ho mezerou a lomítkem.

Atributy K některým tagům se dají navíc přidělit další hodnoty a ty se označuji jako atributy. Hodnota atributu může být, ale ani nemusí být v uvozovkách. Opět to závisí na verzi HTML a zase platí, že použití uvozovek je modernější a slučitelné s xHTML.

Základy HTML – změna vzhledu TagVýznam tagu h1Nadpis první úrovně (obecně se do něj vkládá název či slogan stránky) h2–h6Nadpisy dalších úrovní pOdstavec bTučný text iKurzíva

Základy HTML – změna vzhledu TagVýznam tagu spanVymezuje nějak odlišný text spanstyle="color: red;"; V tomto případě vymezuje text, který bude obarven červeně brZalomení řádky, tzv. měkký enter. Text po tomto tagu bude vždy začínat na novém řádku

Základy HTML – pozadí a odkazy TagVýznam tagu aOdkaz, hyperlink, záložka. a href="odkaz"; Kliknutí na odkaz se prohlížeč přepne na jeho adresu. Adresa může být absolutní (celá adresa) nebo relativní (adresa vzhledem k aktuální adrese) Anologie s absolutními/relativními adresami u souborů v OS. imgsrc="odkaz"; Odkaz na obrázek ve formátu gif nebo jpg může být absolutní nebo relativní.

Základy HTML – pozadí a odkazy TagVýznam tagu body style="background-color: green; color: yellow;„ Způsob, jak stanovit barvy celého těla dokumentu. V tomto případě nastavuje barvu pozadí stránky (background-color) na zelenou a barvu textu (color) na žlutou. V zásadě se již jedná o použití kaskádových stylů = CSS. Kaskádové styly jsou základní prostředek na úpravu vzhledu stránek.

Základy HTML - Seznamy TagVýznam taguTagVýznam tagu ulOdrážkový seznam (unordered list)dlDefiniční seznam olČíslovaný seznam (ordered list)dtTermín liPoložka seznamuddDefinice termínu

Základy HTML - Tabulka TagVýznam tagu tableOhraničuje tabulku; je párový. tr Řádek tabulky V některých verzích HTML tento tag nemusí být párový td Buňka tabulky; Tento tag opět doporučuju psát opět jako párový Atributy pro table Význam atributu cellspacingVnější okraj buněk; hodnotu zadáváme jako číslo bez jednotky, prohlížeč si domyslí pixely. cellpaddingVnitřní okraj buněk border Rámeček, ve všech prohlížečích se však nevykreslí stejně; hodnota je číslo, prohlížeč si opět domyslí pixely.

Základy HTML - Tabulka Atributy pro td Význam atributu rowspan Sloučení buněk v rámci řádku; jako hodnotu zadáváme takové číslo, kolik buněk chceme spojit. colspanSloučení buněk v rámci sloupce Atributy pro table Význam atributu width Šířka tabulky; pozor, jedná se však o minimální šířku. Pokud zadáme šířku v procentech, bere se šířka z nadřazeného prvku (třeba okna prohlížeče) heightVýška tabulky, platí stejná pravidla jako pro šířku

DISKUSE