Výukový program HTML pro začátečníky

Pokud se chcete stát webmasterem a naučit se vytvářet webové stránky, může se vám zdát, že zvládnutí jazyka HTML je docela obtížné.

Tomu se však nelze vyhnout, protože naprostá většina vstupních stránek webových stránek, které navštívíte, bude napsána a strukturována pomocí prvků HTML. Ve skutečnosti jazyk HTML nyní používá více než 74 % všech známých webových stránek, přičemž tento jazyk také pomáhá vylepšit vše od designu vašich stránek až po kvalitu obsahu, který na nich najdete.

V této příručce se seznámíme se základními principy jazyka HTML a možnostmi jeho využití a poté se podíváme na příklady jednotlivých prvků, které se používají při kódování vašich webových stránek.

Co je to jazyk HTML?

Jednoduše řečeno, jazyk HTML představuje standardní značkovací jazyk pro vytváření webových stránek online. Je zkratkou pro Hyper Text Markup Language a jeho nejzákladnější funkcí je stanovení struktury, rozvržení a prezentace jednotlivých vstupních stránek. Přestože webové prohlížeče jazyk HTML přímo nezobrazují, hraje klíčovou roli při vytváření viditelných, přístupných a snadno použitelných stránek.

HTML je také podložen řadou jednotlivých prvků, které postupně vytvářejí webové stránky, strukturují prezentaci obsahu a oživují vaše webové stránky. Tyto prvky jsou vytvářeny a obsaženy ve „značkách“, které definují střídající se části obsahu, jako jsou nadpisy, odstavce a podobné příklady.

Těmito prvky a jejich stavbou se budeme podrobněji zabývat níže a zároveň se podíváme na to, jak je lze přizpůsobit a zavést na váš web barvy, odkazy a variabilní typografii.

Kde se používá HTML?

Jak vidíme, nejčastějším využitím jazyka HTML je návrh jednotlivých vstupních stránek, které tvoří váš web. To však není jediné využití tohoto oblíbeného kódovacího nástroje, pochopení jeho dalších způsobů použití vám jako začínajícím webmasterům pomůže vytěžit z tohoto jazyka maximum. Zde jsou tedy některé z dalších způsobů využití jazyka HTML:

• Vytváření přizpůsobitelných prvků v rámci existující stránky. Pokud hodláte na svých webových stránkách umožnit komentáře k příspěvkům na blogu nebo publikování obsahu vytvářeného uživateli, můžete k tomu použít fragmenty kódu HTML. Tyto prvky umožní uživatelům zdůrazňovat klíčová slova, vkládat odkazy a formátovat komentáře v závislosti na omezeních, která jako moderátor zavedete.
• Vytvoření dalšího obsahu pro e-mail. E-mail také používá jazyk HTML jako jazyk pro bohaté textové zprávy, které obsahují odkazy, text a řadu dalších prvků, které nelze zobrazit pouze v prostém textu. Pokud tedy chcete prostřednictvím e-mailu sdílet elektronickou knihu, která se vztahuje k vašim webovým stránkám, můžete využít jazyk HTML, abyste optimalizovali dopad své zprávy.
• Rozumějte offline dokumentům nápovědy, které jsou nainstalovány v počítači. Zajímavé je, že HTML se používá jako formát pro dokumenty nápovědy v počítači, které jsou přístupné offline. Základní znalost jazyka HTML vám tedy může pomoci porozumět problémům s hardwarem a rychleji je vyřešit, což vám zase může zajistit rychlejší obnovení webových stránek v případech, kdy došlo k jejich výpadku.

Struktura stránky HTML

Předtím, než můžete vytvořit stránku html, potřebujete mít hotové základy.

Typicky se stránka skládá ze tří strukturálních prvků:

1. Záhlaví: Záhlaví obsahuje obsah relevantní pro všechny stránky vašeho webu, například logo nebo název webu a navigační systém. Záhlaví se zobrazuje na každé stránce.
2. Hlavní část: Záhlaví se zobrazuje na každé stránce: To zabírá největší plochu na webové stránce. Obsahuje obsah specifický pro prohlíženou stránku.
3. Zápatí: Obsah zápatí obvykle obsahuje kontaktní informace, dodací adresu nebo právní upozornění. Stejně jako záhlaví se patička objevuje na každé stránce, ale je umístěna dole.

Takto vypadají tyto základní strukturální prvky, když se spojí dohromady:

Tady je další příklad, kdy pomocí značek záhlaví a tagu odstavce esteticky strukturujete obsah. Navíc jsme přihodili značku patičky pro obsah pod hlavním tělem stránky:

HTML značky

Výchozím bodem každého HTML kódu jsou jednotlivé značky, které slouží k vytvoření všech klíčových prvků a pomáhají strukturovat webové stránky.

Níže se podíváme na nejběžnější značky a poté prozkoumáme, jak je lze využít k vytvoření konkrétních prvků na stránce:

Záhlaví

Všechny online dokumenty, včetně webových stránek, začínají záhlavím. Ty jsou konstruovány pomocí značek HTML, přičemž jazyk v současné době umožňuje až šest různě velkých prvků, které rovněž umožňují strukturovat obsah pomocí dalších nadpisů, podnadpisů a zvýrazněných řádků tučného textu. Chcete-li začít nadpis, stačí před příslušný text předřadit značku <h1> , <h2> , <h3> , <h4> , <h5> nebo <h6> v závislosti na požadované velikosti.

Na konec nadpisu pak musíte použít uzavírací značku, která text zapouzdří a ve formátu HTML se zobrazí následovně:

Po potvrzení se to na vstupní stránce vašeho webu promítne do následující estetiky:

Zde jsou jasně vidět různé velikosti proměnných nadpisů, stejně jako to, že prohlížeč přidá řádek před a za nadpis. Všimněte si také, že uzavírací značka na konci textu nadpisu má trochu jiný estetický vzhled, ale tím se budeme zabývat v následující kapitole, až se budeme zabývat používáním značek k definování konkrétních prvků.

Značky odstavců

Podobný princip platí i pro značky začínajících odstavců, které jsou znázorněny <p>. To umožňuje strukturovat obsah a rozdělit jej do příslušných odstavců, což se následně projeví ve snazším a plynulejším čtení. Opět platí, že značka <p> by měla být umístěna na začátek příslušného textu, než bude na konci použita alternativní uzavírací značka, aby byl efekt dokončen. Na rozdíl od značek nadpisů však neexistují žádné číselné rozdíly, které by mohly změnit velikost textu uváděného v odstavci.

Mimo formát HTML se tím text na hotové webové stránce rozdělí takto:

Značky pro přerušení řádků

První příklady představují nejzákladnější značky HTML, ale existují i další, které využívají jiný formát a alternativní uzavírací záběry. Vezměme si například zalomení řádku, které vytváří rozdíl, na kterém řádku se text přeruší a pokračuje na následujícím řádku. Mezi zlomy řádků a odstavci je v oblasti jazyka HTML zásadní rozdíl, protože zatímco druhé jmenované jsou standardními blokovými prvky, které obsahují text, první z nich vytváří oddělení v rámci existujícího prvku <p>.

Z tohoto důvodu představují zlomy řádků v jazyce HTML prázdný prvek, a proto nejsou definovány otevíracími ani uzavíracími značkami. Místo toho jsou znázorněny značkou <br />, kterou lze vložit do existujících prvků <p> a rozdělit tak text a případně zvýraznit důležité informace. Jediná mezera mezi znakem <be> a lomítkem vpřed je klíčová, protože jinak není značka ve formátu HTML rozpoznatelná.

Po aplikaci se text rozdělí takto:

Jak vidíte, můžete v rámci existujícího prvku odstavce použít zalomení řádků tak často, jak chcete, pokud mají přidanou hodnotu a usnadňují zpracování informace. Uvidíte také, že úvodní a závěrečné značky odstavce zůstávají beze změny, přičemž značky zalomení řádku se používají ke změně rozložení textu, který je v nich obsažen.

Toto je jeden z příkladů, jak lze pomocí značek HTML měnit existující prvky, což hraje klíčovou roli při definování vizuálního uspořádání webových stránek a obsahu.

Horizontální čáry

Podobně existují další značky, které lze použít v rámci prvku <p> nebo k dalšímu oddělení částí textu na webové stránce. Jedním z nejpoužívanějších je značka <hr>, která pomáhá vytvořit prázdný prvek, který vizuálně vykresluje vodorovnou čáru mezi střídajícími se částmi online dokumentu. Čáru můžete chtít umístit například mezi dvě části textu, abyste přeorientovali čtenáře nebo jednoduše zavedli nový vizuální prvek. Takto vytvoříte takovýto zlom v jazyce HTML:

Zde zlom mezi znaky hr a lomítkem vpřed zvýrazňuje konstrukci prázdného prvku, přičemž k dokončení efektu opět není nutný uzavírací tag. Vznikne tak následující vizuální podoba:

Obrázkové značky

Obrázkové značky představují v jazyce HTML také prázdné prvky, což opět znamená, že neobsahují uzavírací značku. Protože obsahují pouze atributy, které se vztahují k adrese URL obrázku, který vkládáte na web, jsou jednoduše definovány značkou <img > na začátku elementu. Lze je umístit kdekoli na webu, ačkoli je neobvyklé vkládat je do existujících prvků, jako jsou odstavce nebo nadpisy. Takto se bude prezentovat typický tag obrázku HTML:

K obrázku byste měli uvést také alternativní text, který pomůže lidem při jeho zobrazení v případě pomalého načítání nebo použití čtečky obrazovky. Pokud tedy prohlížeč nemůže obrázek najít, zobrazí divákům hodnotu alternativního atributu. Toto opět používá značku obrázku, ale obsahuje jinou sadu atributů:

Elementy HTML

Předtím jsme se podívali, jak se jednoduché značky HTML používají k definování prvků na stránce, a zároveň jsme zkoumali, jak je lze dále přizpůsobit pomocí prázdných prvků obsahujících značky obrázku a zalomení řádku. To nám pomůže pochopit vztah, který existuje mezi značkami a prvky, a jak je lze použít k definování různých typů obsahu na webových stránkách.

Přestože všechny aspekty jazyka HTML jsou reprezentovány značkou, například definovaný prvek, který obsahuje obsah, musí mít počáteční i uzavírací značku. Nadpisy a odstavce jsou tedy prvky HTML, protože používají počáteční a uzavírací značky k zapouzdření a rozšíření příslušného textu. Naproti tomu prázdné prvky buď obsahují atributy, nebo neobsahují vůbec žádný obsah, což umožňuje jejich použití v rámci existujících prvků bez nutnosti použití uzavírací značky.

Definice prvků HTML

Při použití příkladů, jako jsou nadpisy a odstavce, je rozhodující správné použití počáteční a uzavírací značky. Právě počáteční značka (například <h1> nebo <p>) definuje daný prvek, zatímco uzavírací značka zajišťuje, aby tento prvek nepokračoval ve zbytku webové stránky. Pokud například na konci požadovaného odstavce nepoužijete uzavírací značku </ p>, text se zobrazí v jediném nevzhledném a velmi špatně čitelném bloku.

Všechny uzavírací značky jsou totožné s počátečními značkami kromě toho, že ty první mají před příslušnými znaky lomítko vpřed. Takže v případě nadpisu <h1> bude uzavírací značka </ h1> , zatímco u odstavců vždy použijete </ p> pro definování zlomu v textu. To vyžaduje při kódování pozornost k detailům a při programování nadpisů je důležité si uvědomit, že použité číslo (například h1 nebo h2) se použije jak v počáteční, tak v uzavírací značce.

Používání vnořených prvků HTML

V této fázi je zřejmé, že dokumenty HTML a webové stránky jsou tvořeny stromem různých prvků, které slouží jako stavební kameny pro řadu prostředků. Podívali jsme se také na to, jak lze tyto prvky tvořit a používat ke strukturování online obsahu, a nyní budeme pokračovat tím, že se podíváme na vnořené prvky HTML.

Stejně jako lze prázdné prvky a samostatné značky (jako <br / >mohou být začleněny do definovaných prvků HTML, mohou být v obsahu, jako jsou nadpisy a odstavce, umístěny také tzv. vnořené prvky. Patří mezi ně příklady, jako je tučné písmo a kurzíva a podtržený text, přičemž mohou být použity k tomu, aby dodaly obsahu osobitost a upozornily čtenáře na konkrétní body zájmu.

Tlusté písmo, kurzíva a přeškrtnutý text v HTML

Předpokládejme, že chcete zvýraznit slovo v rámci existujícího prvku odstavce. Můžete toho dosáhnout jeho ztučněním pomocí jednoduchých značek v rámci standardního elementu <p>. Pomocí jazyka HTML to naprogramujete takto:

Zde vnořený element má počáteční i závěrečnou značku, z nichž každá má podobný formát jako značky spojené s nadpisy a odstavci. Lze je bezproblémově použít v rámci existujících prvků a v tomto případě to přinese následující výsledky:

Teď řekněme, že chcete také změnit typografii tohoto slova tak, aby bylo také kurzívou. Toho lze dosáhnout jednoduše přidáním dalšího vnořeného elementu, který by měl být kódován takto:

Jak vidíte, počáteční a koncové značky kurzívou byly jednoduše začleněny do elementu <p>. Tím se nyní obsah uvnitř elementu změní tak, že bude vypadat následovně:

Můžete se ovšem rozhodnout, že byste toto slovo raději zvýraznili jiným způsobem. Můžete proto použít alternativní vnořený prvek, například přeškrtnutí (které je reprezentováno značkami <s> a </s>. Tyto značky lze použít stejným způsobem v rámci elementu <p>, který se v HTML zobrazuje takto:

V tomto případě bude text v dokumentu nebo na vstupní stránce vypadat následovně:

Toto nabízí pohled na prvky, které mohou být tvořeny značkami, které zase definují strukturu vašich webových stránek a obsah, který se na nich nachází. Nejen to, ale i prázdné a vnořené prvky lze použít k dalšímu definování obsahu.

Atributy HTML

Jsou-li značky stavebními prvky, které konstruují a definují prvky, pak atributy HTML lze použít k přizpůsobení jejich vlastností (například stylu, barvy a jazyka. Všechny prvky HTML mají základní atributy, které poskytují základní informace a jsou vždy uvedeny v rámci značky stat. Obvykle se vyskytují v párech, takže se často objevují v následujícím formátu: name=“value.“

Zjednodušeně řečeno, název představuje vlastnost, kterou chcete nastavit, zatímco hodnota se týká konkrétních kritérií, která chcete začlenit.

Existuje velké množství atributů, které lze aplikovat na prvky HTML, ale ty, které jsou pro začínající webmastery nejdůležitější, jsou:

Atribut „lang“

Jediný nejzákladnější atribut definuje jazyk dokumentu a jeho prvků. Deklaruje se pomocí atributu ‚lang‘, a přestože je snadno přehlédnutelný, jeho výhodou je lepší přístupnost obsahu pro čtečky obrazovky a vyhledávače. Obvykle se uvádí na začátku dokumentu v následujícím formátu:

Po atributu lang první dvě písmena určují jazyk (v tomto případě je to angličtina). Po pomlčce další dvě písmena určují dialekt, ačkoli ten nebude přítomen u každého jazyka. Pokud chcete úspěšně oslovit své publikum, je důležité, abyste tento atribut zvládli správně.

Atribut „align“

Již jsme se dotkli formátu atributů HTML (name=“value“) a nejlépe to ztělesňuje, když se snažíte zarovnat obsah v prvcích. Můžete se například rozhodnout vycentrovat všechny odstavce na určité stránce, přičemž zarovnání je vlastnost, kterou chcete nastavit. Následně je hodnotou atributu „center“, ačkoli máte na výběr, zda chcete text zarovnat doleva nebo doprava.

Tímto způsobem zarovnáte prvky <p> na střed stránky a vytvoříte jednotné rozvržení, které bude odpovídat specifickému charakteru vaší webové stránky (viz níže):

Atribut ‚href‘

Pokud se chystáte vytvořit viditelné webové stránky, je důležité, abyste zahrnuli jak příchozí, tak odchozí odkazy. Budování portfolia odkazů, které zahrnuje zpětné odkazy na interní vstupní stránky, je také životaschopnou strategií, takže se budete muset naučit, jak je kódovat v jazyce HTML.

HTML odkazy jsou definovány pomocí <a>tagu, který obsahuje cílový odkaz spolu s přidruženým textem kotvy, v němž bude umístěna adresa URL. Adresu webu určuje atribut ‚href ‚, který je však začleněn jako součást značky start. V jazyce HTML se kóduje takto:

Toto jasně zdůrazňuje rozdíl mezi počáteční a závěrečnou značkou a na vstupní stránce se přeloží takto:

Atribut „barva“

Jedná se o další důležitý atribut, protože použití barev může vašim webovým stránkám vdechnout život a zároveň pomoci vytvořit důležité kontrasty a výraznou estetiku designu. V jazyce HTML lze barvu specifikovat pomocí jejího názvu, ačkoli k dosažení tohoto cíle je možné použít také hodnotu RGB nebo HEX. První možnost je však nejjednodušší, přičemž ji lze použít i pro nadpisy, odstavce a další prvky na stránce.

Jedná se o atribut stylu, přičemž volba barvy představuje hodnotu, kterou chcete nastavit. Při použití červené barvy na hlavní nadpis to bude vypadat například takto:

Po použití bude tento prvek na vašich stránkách vypadat následovně:

Opět je zřejmý rozdíl mezi počáteční a koncovou značkou, které definují tento element, přičemž se jedná o jeden z nejsnadněji aplikovatelných atributů v HTML. Dále také upozorňuje na formát name=“value atributů HTML, díky čemuž je proces učení a jejich aplikace na celých webových stránkách mnohem jednodušší.

Vyzkoušejte si to sami

Se základními znalostmi jazyka HTML a jeho jednotlivých prvků je dalším krokem realizace několika jednoduchých projektů a aplikace teoretických znalostí při řešení praktických problémů.

V níže uvedeném cvičení jsme si představili text s výjimkou a požádali o formátování různých aspektů pomocí jazyka HTML. Použijte příručku a vše, co jste se dosud naučili, k dokončení úkolu při přípravě na kódování vlastních webových stránek.

Úkoly:

1. Doplňte prvek záhlaví správnou uzavírací značkou.
2. Udělejte záhlaví tučné.
3. Vložte pod záhlaví vodorovnou čáru.
4. Použijte atribut barva a odstín „Díky za návštěvu“ v zelené barvě
5. Vložte tento hypertextový odkaz (https://www.w3schools.com/html/) do kotevního textu „Více informací.“
6. V hlavičce stránky použijte formát name=“value“ pro zarovnání odstavců doleva

Statistiky a fakta o jazyce HTML

1. Elementy HTML, head a body jsou součástí specifikace jazyka HTML od poloviny devadesátých let a ještě před několika lety byly hlavními prvky používanými k vytváření struktury dokumentů HTML. Situace se však v posledních několika letech dramaticky změnila, protože do jazyka HTML5 přibyla řada nových značek, které lze použít k přidání bohatého sémantického významu do struktury dokumentu HTML.
2. Dokumenty HTML musí začínat deklarací typu dokumentu (neformálně „doctype“). V prohlížečích pomáhá doctype definovat režim vykreslování. HTML5 nedefinuje DTD, proto je v HTML5 deklarace doctype jednodušší a kratší.
3. Prohlížeče pro mobilní zařízení plně přijaly HTML5, takže vytváření projektů připravených pro mobilní zařízení je stejně snadné jako navrhování a konstrukce pro jejich menší dotykové displeje – proto je populární Responsive Design. Existuje několik skvělých metaznaček, které rovněž umožňují optimalizaci pro mobilní zařízení.
4. 78 % tvůrců obsahu souhlasí s tím, že tato struktura je vhodná pro vytváření mobilních aplikací, a 68 % tvrdí, že je vhodná pro navrhování jakýchkoli a všech druhů aplikací.
5. HTML5 také přichází s řadou skvělých rozhraní API, která umožňují vytvářet lepší uživatelské prostředí a výkonnější a dynamičtější webové aplikace – zde je stručný seznam nativních rozhraní API:
   • Drag and Drop (DnD)
   • Offline databáze úložišť
   • Správa historie prohlížeče
   • Úpravy dokumentů
   • Časované přehrávání médií
6. HTML5 není pod kontrolou jedné společnosti. Jedna z jeho nejlepších vlastností spočívá v tom, že se jedná o otevřený standard. Vývojáři mohou dát průchod své kreativitě a přidat tolik funkcí a vlastností, kolik je jen možné.
7. V porovnání s ostatními prohlížeči dbá každá aktualizace prohlížeče Google Chrome na to, aby obsahovala podporu HTML5. Kromě toho je nyní výchozí přehrávač YouTube ve formátu HTML5 a reklamy Google ve formátu Flash se nyní převádějí na HTML5.
8. Využití HTML5 vývojáři (podle regionů):
   • Severní a Latinská Amerika – 70 %
   • Jižní Amerika – 61 %
   • ASPAC – 60 %
   • Austrálie – 60 %
   • Evropa – 59 %
   • Afrika – 60 %
   • . 50%

Závěr

Ačkoli jazyk HTML vznikl teprve v roce 1991 (přičemž první verze kódovacího jazyka byla následně uvedena na trh v roce 1995), rychle se stal stěžejním nástrojem při tvorbě funkčních a vizuálně přitažlivých webových stránek. Míra vlivu jazyka HTML se také stále vyvíjí a jeho nejnovější iteraci (HTML5) používá stále více webových stránek po celém světě.

V tomto ohledu je naučení se základním prvkům jazyka HTML a jejich použití nejdůležitějším krokem při vytváření úspěšných, viditelných a nakonec i konkurenceschopných webových stránek.

V tomto ohledu je naučení se základním prvkům jazyka HTML a jejich použití nejdůležitějším krokem při vytváření úspěšných, viditelných a nakonec i konkurenceschopných webových stránek.