HTML je značkovací jazyk, který se používá k vytváření webových stránek. Pokud právě začínáte svou cestu ve vývoji webu, pravděpodobně přemýšlíte, jak vytvořit více stránek v HTML. Nebojte se, pomůžeme vám to vyřešit!
Prvním krokem při vytváření více stránek v HTML je vytvoření samostatného souboru pro každou stránku. K tomu můžete použít jakýkoli textový editor, jako je Poznámkový blok (Windows) nebo textový editor (Mac).
Když vytvoříte soubor HTML, přidejte do něj základní značky HTML struktury. Začněte otevíráním a zavíráním značek . Mezi těmito značkami uvidíte další důležité značky, jako je a.
Uvnitř značky můžete přidat název stránky pomocí značky . Záhlaví se zobrazí na kartě prohlížeče.
Vytvoření nového souboru HTML
Chcete-li vytvořit nový soubor HTML, otevřete textový editor, jako je Notepad++ nebo Sublime Text, a vytvořte nový prázdný soubor. Pokud nemáte přístup k jiným programům, můžete také použít jednoduchý textový editor, jako je Poznámkový blok.
Po vytvoření nového souboru jej uložte s příponou."html " - To umožní počítači rozpoznat jej jako dokument HTML. Můžete si vybrat libovolný název souboru, ale je dobrým zvykem používat smysluplný název související s obsahem na webové stránce.
Otevřete nově vytvořený soubor v textovém editoru a začněte psát kód HTML. Veškerý obsah webové stránky bude umístěn mezi otevíracím a zavíracím tagem a .
Měli byste také přidat název stránky pomocí značky . Uvnitř značky můžete zadat název stránky pomocí značky . Příklad:
Моя первая веб-страница Místo komentáře "" můžete začít přidávat obsah své webové stránky, jako je text, obrázky, odkazy a další prvky HTML.
Jakmile dokončíte psaní kódu HTML pro Vaši webovou stránku, uložte soubor a otevřete jej webovým prohlížečem. Měli byste vidět svou novou stránku HTML s přidaným obsahem. Gratuluji, právě jste vytvořili nový soubor HTML!
Otevření souboru v editoru kódu
Existuje mnoho editorů kódu a každý z nich má své vlastní vlastnosti a možnosti. Některé oblíbené Editory kódu zahrnují:
- Visual Studio Code: Bezplatný editor kódu vyvinutý společností Microsoft. Podporuje mnoho programovacích jazyků včetně HTML.
- Sublime Text: Výkonný a flexibilní editor kódu se širokými možnostmi přizpůsobení a rozšíření.
- Atom: Bezplatný editor kódu vytvořený týmem GitHub. Má jednoduché rozhraní a mnoho rozšíření.
Chcete-li otevřít soubor HTML v editoru kódu, postupujte podle následujících kroků:
- Spusťte editor kódu, který si vyberete.
- Vyberte možnost " Otevřít soubor "nebo použijte příkaz" Ctrl+O "(na Windows) nebo" Cmd+O " (na Macu).
- Vyhledejte a vyberte soubor HTML, který chcete otevřít.
- Stiskněte tlačítko " Otevřít "nebo stiskněte klávesu"Enter".
Jakmile tyto kroky provedete, editor kódu, který si vyberete, otevře soubor HTML a můžete jej začít upravovat. Budete moci vidět všechny značky HTML, text a další prvky, které tvoří stránku.
Úprava souboru HTML v editoru kódu vám umožňuje změnit strukturu a obsah stránky, přidat nové položky a přizpůsobit design. Jakmile provedete změny, můžete soubor uložit a vidět výsledky ve webovém prohlížeči.
Použití editoru kódu usnadňuje proces vytváření webových stránek a umožňuje vám pracovat se soubory HTML na pokročilejší úrovni. Díky mnoha funkcím a schopnostem editoru můžete vytvářet efektivní a kvalitní webové stránky.
Definice hlavní struktury stránky
Když vytváříte webovou stránku, je důležité určit její hlavní strukturu. To pomůže uspořádat obsah stránky a zajistit srozumitelnost její organizace pro uživatele.
Hlavní struktura stránky obsahuje Nadpis, hlavní obsah a zápatí.
Název je důležitý, protože informuje uživatele o tématu stránky. Obvykle se nachází v horní části stránky a může obsahovat název stránky nebo konkrétní stránky.
Hlavní obsah je tam, kde jsou všechny základní informace, které chcete na stránce poskytnout. Obvykle se zde nachází text, obrázky, videa a další obsahové prvky.
Zápatí je oblast ve spodní části stránky, která může obsahovat další informace, jako jsou odkazy na sociální média, datum vytvoření stránky nebo copywriting.
Organizace hlavní struktury stránky může být narušena, pokud nepoužíváte příslušné značky a prvky HTML. K určení názvu můžete použít značku h1 nebo h2 a pro zbytek obsahu značky odstavců
nebo položky seznamů
- ,
- . Můžete například použít seznam položek
pro vytvoření navigačního menu v zápatí. Při vytváření webové stránky tedy nezapomeňte definovat její základní strukturu, aby byla srozumitelná a uživatelsky přívětivá.
Přidání záhlaví
V kódu HTML se Nadpis používá k označení hlavního názvu stránky nebo oddílu. K přidání záhlaví do HTML se používá značka,, a tak dále do . Číslo za " h " V štítku označuje úroveň důležitosti záhlaví. Čím menší číslo, tím důležitější je titulek. Pokud například potřebujete označit hlavní název stránky, můžete použít následující kód:
Моя веб-страница
a tak dále. Například:
Введение
Текст
Пункт 1
Текст
Пункт 2
Текст
Přidání záhlaví do HTML kódu tedy pomáhá organizovat informace na stránce a strukturovat je pro snadné čtení.
Vkládání textového obsahu
Lze také použít značku pro zvýraznění textu kurzívou a zvláštní emoční zabarvení. Příklad použití: Tento text bude tučně zvýrazněn Tento text bude zvýrazněn kurzívou a bude mít zvláštní emocionální zabarvení Pomocí HTML tedy můžeme snadno a pohodlně vložit textový obsah na webovou stránku.
Přidání obrázků
Zde je příklad kódu, který přidá obrázek na stránku:
- Začněte otevřením značky
.
- V atributu src zadejte cestu k obrázku (může to být buď místní cesta v počítači, nebo adresa URL na internetu).
- Pokud chcete, můžete do obrázku přidat alternativní text pomocí atributu alt . Tento text se zobrazí, pokud není obrázek nalezen nebo stažen z jakéhokoli důvodu.
Zde je příklad kódu s obrázkem kočky:
Všimněte si, že cesta k obrázku ( src ) je indikována vzhledem k umístění souboru HTML. Pokud je obrázek ve stejném adresáři jako soubor HTML, stačí zadat pouze název souboru.
Při přidávání obrázků na webovou stránku se doporučuje specifikovat šířku a výšku obrázku pomocí atributů width a height , aby se zabránilo stahování a pomalému načítání obrázku.
Nyní víte, jak přidat obrázky na webovou stránku pomocí značky . Užijte si kódování!
Vytváření odkazů
Chcete-li vytvořit odkaz, musíte použít následující syntaxi:
- href-atribut, který označuje adresu (URL) stránky nebo zdroje, na který bude odkaz;
- text odkazu je text, který se zobrazí jako odkaz.
V důsledku toho se na webové stránce zobrazí odkaz s textem "kliknutím sem přejdete na web". Po kliknutí na tento odkaz bude uživatel přesměrován na adresu, která je uvedena v atributu href.
Kromě textových odkazů můžete vytvářet odkazy na obrázky nebo jiné multimediální zdroje. K tomu je třeba použít následující syntaxi:
- src-atribut, který označuje cestu k obrázku;
- ALT je atribut, který označuje alternativní text, který se zobrazí, pokud nelze obrázek nahrát.
V důsledku toho se na webové stránce zobrazí obrázek, který bude odkazovat na webovou stránku. Po kliknutí na tento obrázek bude uživatel přesměrován na adresu, která je uvedena v atributu href.
Ukládání a prohlížení stránky
Když jste vytvořili stránku v HTML, musíte ji uložit, abyste si ji mohli prohlédnout webovým prohlížečem. Chcete-li stránku uložit, musíte postupovat podle následujících kroků:
Krok 1: Otevřete textový editor, ve kterém jste stránku vytvořili.
Krok 2: Klikněte na tlačítko Uložit v horní nabídce editoru.
Krok 3: Vyberte složku, do které chcete stránku uložit.
Krok 4: Zadejte název souboru pro vaši stránku. Název by měl mít rozšíření "html" nebo "htm", například " mypage.html".
Krok 5: Kliknutím na tlačítko Uložit uložíte stránku do vybrané složky.
Nyní, když je vaše stránka uložena, můžete ji zobrazit webovým prohlížečem. Chcete-li to provést, postupujte podle následujících kroků:
Krok 1: Otevřete webový prohlížeč v počítači.
Krok 2: Klikněte na tlačítko" Otevřít soubor "nebo zadejte příkaz"Ctrl+O".
Krok 3: V okně, které se zobrazí, vyberte Soubor své stránky a klikněte na "Otevřít".
Krok 4: Nyní byste měli vidět svou stránku webového prohlížeče.
Všimněte si, že chcete-li zobrazit svou stránku, musíte být připojeni k internetu, Pokud ke stažení stránky používáte webový prohlížeč.