HTML je nezbytnou součástí webu, jak jej známe. A zatímco jen málo webových designérů vytváří stránky manuálním zadáváním HTML, je stále užitečné o tom něco vědět.

Budeme se zabývat některými základy jazyka, včetně toho, co ve skutečnosti je HTML, některých základních konceptů a toho, jak interaguje s jinými jazyky. Myslete na to jako na “HTML pro figuríny” nárazový kurz.

Základy HTML: Co je to HTML?

HTML znamená Hyper Text Markup Language. A i když je to někdy spojeno s programovacími jazyky, není to přesné.

Jako značkovací jazyk, HTML umožňuje pouze vytvořit rozvržení zobrazení stránek. Pravda programovací jazyk, jako Java nebo C ++, obsahuje logiku a prováděné příkazy.

I když je to jednoduché, HTML je páteří každé stránky na webu. Je zodpovědný za to, co se text zobrazuje tučně, přidává obrázky a odkazuje na jiné stránky. Máme HTML FAQ - základní HTML FAQ, které byste měli přidat do záložek Essential HTML FAQ, které byste měli přidat do záložek HTML už nějakou dobu existuje, takže je na čase naučit se základy. Zde je, co to je, jak to funguje a jak můžete dnes napsat nějaké běžné prvky v HTML! to vysvětluje více.

Můžete kliknout pravým tlačítkem na většinu webových stránek v prohlížeči a vybrat Zobrazit zdroj stránky nebo podobně, abyste viděli HTML za nimi. To bude pravděpodobně také obsahovat spoustu kódu, který není HTML, ale můžete jej prosévat.

I když máte nulové zkušenosti se značkovacími nebo programovacími jazyky, naučíte se trochu o HTML, abyste se stali informovanějšími uživateli webu. Podívejme se na pět základních kroků, které vám pomohou pochopit, jak funguje HTML. Cestou poskytneme příklady.

Krok 1: Porozumění konceptu značek

HTML používá systém značky kategorizovat různé prvky dokumentu.

Většina značek přichází v párech, aby do nich zabalil ovlivněný text. Zde je jednoduchý příklad ( značka vytvoří text tučně; budeme o tom mluvit více za chvíli.)

Toto je nějaký odvážný text.

Všimněte si, jak uzavírací značka začíná lomítkem (/). To znamená uzavírací značku, což je důležité. Pokud značku nezavřete, bude mít tento atribut vše od začátku.

Ne všechny značky však mají pár. Některé prvky HTML, nazývané prázdné prvky, nemají žádný obsah a existují samy o sobě. Příkladem je
tag, což je konec řádku. Můžeš “zavřít” takové značky přidáním lomítka (například
), ale není to nezbytně nutné.

Krok 2: Rozložení kostry HTML

Správný dokument HTML musí mít určité značky definovány, aby byl správně rozložen. To jsou základní části:

• Každý dokument HTML musí začínat sám sebe prohlásit. Tedy jeho závěrečná značka, , je poslední položka v souboru HTML.
• Další, sekce obsahuje informace jako název stránky, různé skripty, které se na stránce spouští a podobně. Jak název napovídá, obvykle přichází hned po počátečním štítek. Koncový uživatel nevidí velkou část obsahu v těchto značkách.
• Konečně, značka obsahuje text stránky, kterou čtenář vidí (a ještě mnohem více). Zde najdete obrázky, odkazy a další.

Od roku část tvoří většinu dokumentu HTML, zbytek našeho návodu se věnuje prvkům, které se k němu vztahují.

Krok 3: Základní značky HTML pro formátování

Dále se podívejme na některé běžné značky, které tvoří dokumenty HTML. Samozřejmě není možné pokrýt každý prvek, proto si projdeme některé z nejdůležitějších. Pokryli jsme mnoho dalších příkladů HTML 17 Příklady jednoduchých HTML kódů, které se můžete naučit za 10 minut 17 Příklady jednoduchých HTML kódů, které se můžete naučit za 10 minut Chcete vytvořit základní webovou stránku? Naučte se tyto příklady HTML a vyzkoušejte je v textovém editoru a podívejte se, jak vypadají v prohlížeči. pokud vás to neuspokojí.

Pokud se tyto tagy zdají docela základní, pamatujte, že HTML bylo vytvořeno až v roce 1993. Web byl tehdy velmi textově založený v jeho raných fázích.

Jednoduché formátování textu

HTML podporuje základní styly textu, jaké byste našli v aplikaci Microsoft Word:

• značky vytvářejí text tučně.
• tagy (což znamená “důraz”) vůle italicize text.

HTML také podporuje starší značka pro tučně a kurzívou. Je však lepší použít výše uvedené.

Ve zkratce, a ukázat, jak by se mělo něco rozumět, zatímco poslední značky vám říkají, jak by to mělo vypadat. Tyto bývalé značky jsou přístupnější pro čtečky obrazovky používané zrakově postiženými.

Odstavec a další divize

HTML tag umožňuje definovat část dokumentu. Obvykle je to spárováno s CSS (viz níže), aby se určitým způsobem formátovala sekce.

Do dokumentu můžete přidat záhlaví a usnadnit sledování pomocí

přes

značky. H1 je nejdůležitější záhlaví, zatímco H6 je nejméně důležité. Téměř každý článek MakeUseOf používá k uspořádání informací záhlaví H2 a H3.

Bít Vstoupit přidání konce řádků do dokumentu HTML je ve skutečnosti nezobrazí. Místo toho můžete použít
přidat konec řádku.

Zde je příklad, který používá všechny tyto:

 
Příklad nadpisu
 
Toto je jeden odstavec.
 
To je vteřina
odstavec rozdělený mezi dva řádky.
  

Krok 4: Vkládání obrázků

Obrázky jsou důležitou součástí většiny webových stránek. Můžete je snadno přidat pomocí HTML a dokonce pro ně nastavit různé vlastnosti.

Vložíte obrázek pomocí

Ale teď máme mnohem víc. CSS (Cascading Style Sheets) je jazyk používaný k popisu toho, jak by měl vypadat text připravený v HTML. Pamatovat na tag jsme diskutovali? Uvnitř tohoto (a dalších značek) můžete definovat a třída atribut. Poté můžete v průvodním dokumentu CSS napsat pokyny, jak to provést třída by měl vypadat.

Tyto prvky stylu můžete definovat inline v kódu HTML, ale to se považuje za špatnou praxi, protože je mnohem obtížnější udržovat. Další informace s těmito jednoduchými příklady CSS 10 Příklady jednoduchých kódů CSS, které se můžete naučit za 10 minut 10 Příklady jednoduchých kódů CSS, které se můžete naučit za 10 minut Budeme se zabývat tím, jak vytvořit inline šablonu stylů, abyste si mohli procvičit své dovednosti CSS. Poté se přesuneme na 10 základních příkladů CSS. Odtud je vaše představivost limitem! .

JavaScript

Viděli jsme, že HTML definuje obsah a CSS určuje vzhled. JavaScript, poslední člen tria, který je pro web životně důležitý, umožňuje webovým stránkám reagovat na akce lidí bez nutnosti načítání nové stránky pokaždé.

Například JavaScript umožňuje webové stránce, aby vás před pokusem o odeslání varovala, že zadané heslo nesplňuje jeho požadavky. Webový designér může pomocí JavaScriptu procházet obrázky v prezentaci nebo vyzvat uživatele k zadání.

Toto je jen několik základních příkladů. JavaScript je skriptovací jazyk, který je schopen dělat spoustu věcí a je poměrně komplikovanější než HTML a CSS. Podívejte se na náš přehled JavaScriptu Co je to JavaScript a jak to funguje? Co je to JavaScript a jak to funguje? Co je Javascript? Je to programovací jazyk používaný k vylepšení webových stránek. Zahrnuje dynamickou aktualizaci webových stránek, uživatelských rozhraní a další. Pojďme se ponořit do toho, o čem je Javascript. pro mnohem více.

Zkoumání celého rozsahu webdesignu přesahuje rámec tohoto článku, ale stačí říci, že HTML interaguje s jinými jazyky a vytváří webové stránky, které známe dnes.

Evoluce HTML

Je důležité si uvědomit, že HTML není statické. HTML prošlo několika revizemi, z nichž poslední je HTML 5. Tento standard zejména podporuje vkládání nativního videa namísto spoléhání se na proprietární formáty, jako je Adobe Flash..

Nové iterace HTML také prohlašují, že určité archaické značky jsou čas od času zastaralé. Mezi ně patří hrozné značky jako a (které posouvají text, resp. text flash) běžně viditelné v designu webových stránek 90. ​​let. Takže mějte na paměti, že standardy se postupem času mění.

Trocha znalostí HTML jde dlouhou cestu

Udělali jsme krátkou prohlídku toho, jak dokument HTML funguje. Nyní víte, jak jsou strukturovány webové stránky. I když nepokračujete v tvorbě webových stránek, jste si o webu, který používáte každý den, trochu více vědomi.

Chcete-li se dozvědět více, upgradujte své dovednosti pro vývoj webových aplikací pomocí základních nástrojů Upgradujte své dovednosti pro vývoj webových aplikací pomocí těchto 10 základních nástrojů Upgradujte své dovednosti pro vývoj webových aplikací pomocí těchto 10 základních nástrojů Jste připraveni začít vyvíjet webové stránky? Tyto online nástroje pro nové a zkušené vývojáře webu jsou zaručeny, že zvýší vaše dovednosti! a poté se podívejte na našeho průvodce, jak navrhnout svůj první web. Jak si vytvořit web: pro začátečníky Jak si vytvořit web: pro začátečníky Dnes vás budu provázet procesem vytváření kompletního webu od nuly. Nebojte se, pokud to zní obtížně. Provedu vás tímto krokem na každém kroku. .

Obrázek Kredit: Belyaevskiy / Depositphotos