Ukázkový kód HTML: Základy vývoje webu
HTML je bez nadsázky hlavním jazykem internetu, který se s ním narodil. Jeho odpovědnost zahrnuje základní návrh webových stránek, jejich logické strukturování a formátování. Není třeba jít daleko pro příklady HTML, stačí otevřít prohlížeč. Jakékoli zobrazené stránky je HTML, který hledáte. Chcete-li ho poznat blíž, podívejte se na vývojářskou konzolu.
Za scénami internetu
Otevřete svůj oblíbený web v prohlížeči Google Chrome. Tento prohlížeč má nejvhodnější vývojový panel, takže je ideální pro učení.
Chcete-li se rychle dostat na panel, stiskněte klávesu F12 na klávesnici. Pokud z nějakého důvodu nefunguje, vyhledejte potřebnou položku v nabídce prohlížeče a vyberte ji klepnutím na "Další nástroje"> "Nástroje pro vývojáře".
Otevře se nový panel s několika záložkami, z nichž potřebujeme první - Elements. Právě zde je popsán celý kód HTML aktuální stránky.
Struktura dokumentu HTML
Pomocí panelu je možné na živém příkladu zjistit, jak je místo uspořádáno, abyste viděli jeho součásti. Je důležité si uvědomit, že konečný vzhled je poskytován nejen značkováním HTML, ale také styly popsanými pomocí CSS. V záložce Prvky se zobrazuje pouze základní struktura.
Všechny součásti stránky jsou uspořádány v hierarchickém pořadí. Vnořené položky můžete zobrazit pomocí šipek.
Celá stránka HTML je například zabalena do bloku s názvem HTML, uvnitř kterého jsou umístěny kontejnery hlavy a těla. Pokud je rozšiřujete, uvnitř najdete více úrovní prvků s různými jmény.
Vše v sekci hlavy není vykresleno prohlížečem. Jedinou výjimkou je název bloku, který je zobrazen na kartě. V "hlavě" webu jsou informace o službě nezbytné pro správný provoz internetového prohlížeče.
Obsah části těla je naopak viditelný pro uživatele. Konzola pro vývojáře dokonce umožňuje zobrazit přesně, kde je každý konkrétní blok umístěn na stránce. Chcete-li to provést, umístěte kurzor na něj.
Obrázek obrazovky ukazuje, jak se navigační lišta vyznačuje:
V horní části je také prvek DOCTYPE. Odkazuje také na údaje o službách.
Štítky a jejich atributy
Zkratka HTML doslovně znamená "Hypertext Markup Language". To znamená, že každá stránka je pouze označena určitým textem. Pro jeho formátování se používají speciální prvky - značky (deskriptory).
Chcete-li rozlišit značku od samotného textu, je uzavřena v hranatých závorkách. Pomocí příkladu kódu HTML můžete vidět různé značky: html, head, body, header, div. Jsou to dva typy:
- Uzavírací značky obsahují dvě části a text mezi nimi. Například popisovač záhlaví je uzavíratelný. Druhá část se liší od prvního dílu přítomností předního lomítka před jménem značky.
- Neuzavřené značky bez obsahu se skládají pouze z jedné části. Příkladem je metaznačka.
Vezměte prosím na vědomí, že deskriptory HTML se mohou navzájem integrovat. Výjimkou jsou neuzavřené značky, které nemají žádný obsah, takže do nich nemůže být vloženo nic.
Je důležité dodržet závěrečný pokyn. Na konzole můžete vidět, jak jsou umístěny pečlivě vnořené rukojeti. Externí prvek se nemůže zavřít před interním.
Každá značka může mít řadu parametrů (atributů), které definují její vlastnosti. V HTML je příkladem popisovač hypertextového odkazu a jeho atributu href, který obsahuje adresu stránky, na kterou se odkaz vytvoří při kliknutí na odkaz.
Visual Learning HTML
Pro začínající webové designéry, webové vývojáře a jen pro lidi, kteří se zajímají o základy internetových technologií, je učení HTML prvním krokem dlouhé a zajímavé cesty. Stovky kurzů a učebnic představují informace mnoha různými způsoby. Vyberte si mezi nimi vhodné není těžké.
Ale bez ohledu na to, jak dobrá je učebnice, jsou pro úspěch nutné další dvě složky:
- nezávislé zkušenosti s vyřizováním sázek;
- studovat příklady HTML jiných lidí.
Konzola pro vývojáře v populárních prohlížečích (kromě prohlížeče Google Chrome, dobré panely naleznete v Mozilla Firefoxu a Internet Exploreru) je nejlepší způsob, jak prozkoumat webové stránky. Umožňuje zvládnout základní rozložení vzorků, naučit se vidět konečnou prezentaci kódu a dokonce dynamicky provádět změny.