HTML (z angl. HyperText Markup Language je standardní značkovací jazyk pro vytváření webových stránek. Vytváření souborů HTML se může zdát jako náročný úkol pro začátečníky, ale proces je poměrně jednoduchý a je k dispozici pomocí základních nástrojů.
HTML soubory skládá se z textového obsahu a speciálních značek, které určují strukturu a výběr prvků stránky. Chcete-li vytvořit soubor HTML, budete potřebovat textový editor a nějaké znalosti o syntaxi HTML.
Chcete se naučit vytvářet soubory HTML? V tomto článku vám řekneme, jak vytvořit jednoduchý soubor HTML pomocí základních značkovacích značek. Naučíte se vytvářet nadpisy, paragrafy, seznamy, odkazy a další. Začněme!
Vytvoření souboru HTML
1. Otevřete svůj textový editor, jako je Poznámkový blok na Windows nebo TextEdit na Macu.
2. Zadejte následující kód:
3. Uložte soubor s příponou."html". Například " index.html".
4. Otevřete uložený soubor ve webovém prohlížeči poklepáním na něj. Měli byste vidět prázdnou webovou stránku bez obsahu.
Nyní máte základ pro vytváření webových stránek pomocí HTML!
Krok 1. Výběr editoru
Jednou z oblíbených možností je Sublime Text, placený editor s širokou škálou funkcí a podporou syntaxe HTML. Dalším oblíbeným programem je Atom, bezplatný a otevřený editor s pokročilými možnostmi přizpůsobení a rozsáhlou podporou pluginů.
Pokud dáváte přednost práci na webovém rozhraní, editory jako CodePen, JSFiddle a Glitch mohou být dobrými možnostmi. Umožňují vám psát, provádět a prohlížet VÁŠ HTML kód za běhu, aniž byste museli instalovat jakýkoli software.
Pokud s vytvářením souborů HTML začínáte a chcete začít něčím jednoduchým, můžete použít editory, jako je Notepad++ nebo Visual Studio Code. Jsou k dispozici zdarma a mají minimální sadu funkcí, díky čemuž se snadno používají a jsou ideální pro začátečníky.
Ať už si vyberete jakýkoli Editor, je důležité si uvědomit, že by měl podporovat ukládání souborů ve formátu HTML (.html). Zkontrolujte nastavení editoru nebo jeho dokumentaci, abyste se ujistili, že můžete ukládat soubory s příponou .html, protože další manipulace s vaším souborem bude vyžadovat uložení v HTML formátu.
Krok 2. Vytvoření základní struktury
Po vytvoření nového souboru ve formátu .html, musíte vytvořit základní strukturu dokumentu. K tomu slouží sada základních značek HTML. Je důležité dodržovat správnou hierarchii a umístit prvky do jiných prvků.
Nejprve musíte zadat verzi HTML, kterou používáte. Chcete-li to provést, vložte následující řádek na začátek dokumentu:
Poté vytvořte kořenový prvek dokumentu, který zabalí veškerý obsah. K tomu použijte značku . Uvnitř této značky budou umístěny všechny ostatní prvky vašeho webu.
Po otevření značky následuje otevření značky . V rámci této značky lze zadat metadata a další informace o dokumentu, jako je název stránky, popis, klíčová slova a další. V tomto okamžiku však jednoduše vytvoříme minimální strukturu, takže tuto sekci můžete nechat prázdnou nebo přidat například název stránky:
Můj první HTML dokument
Po zavírací značce následuje otevírání a zavírání značky . Právě v této značce bude obsažen veškerý viditelný obsah vaší stránky. Přidejte následující řádek:
V důsledku toho by váš soubor HTML měl mít následující strukturu:
Мой первый HTML документ Tímto způsobem jste vytvořili základní strukturu dokumentu, která bude obsahovat všechny prvky vašeho souboru HTML. Dále můžete pokračovat v přidávání a umísťování různých položek, jako jsou nadpisy, odstavce, obrázky a další, do příslušných značek .
Krok 3. Přidání obsahu
Po vytvoření základní struktury souboru HTML je čas přidat obsah. K tomu použijeme různé značky.
Jednou z nejpoužívanějších značek pro přidání textového obsahu je TAG
. Tato značka se používá k označení samostatného odstavce textu.
-
a pro každou položku seznamu je štítek
. Například:
- První položka seznamu
- Druhá položka seznamu
- Třetí položka seznamu
-
používá se značka
. Například:
- První položka seznamu
- Druhá položka seznamu
- Třetí položka seznamu
-
a
mohou být vzájemně vnořeny, aby se vytvořila hierarchie seznamů.
Podobně lze použít jiné značky k přidání různých prvků na stránku, jako jsou názvy ( - ), odkazy (), obrázky ( ), tabulky (), a mnoho dalších.