Cvičení – přidání základního HTML do webové aplikace

10 min

V tuto chvíli má váš web prázdný soubor HTML. Pojďme přidat nějaký kód! Cílem je použít jazyk HTML (Hypertext Markup Language) k popisu webové stránky prohlížeče vašich zákazníků. Nemělo by být hezké mít počáteční šablonu? Editory můžou pohodlně vyplnit některé typické často používané struktury nebo struktury HTML za vás.

V této lekci přidáte základní obsah HTML, otevřete stránku HTML v prohlížeči a získáte první pohled na vývojářské nástroje.

Přidání kódu HTML

Visual Studio Code poskytuje základní podporu programování v HTML. Zvýraznění syntaxe, inteligentní dokončování pomocí IntelliSense a přizpůsobitelné formátování.

Otevřete složku webu v editoru Visual Studio Code a pak ho otevřete index.html tak, že ho vyberete v Průzkumníku.
Na index.html stránce zadejte html:5a pak vyberte Enter. Kód šablony HTML5 se přidá do souboru.

Poznámka:

Pokud kód šablony HTML5 není do index.html souboru přidaný, zkuste soubor zavřít a znovu otevřít.

Upravte kód šablony tak, aby připomínal následující kód. Potom soubor uložte tak, že vyberete Control+S ve Windows nebo Command+S v macOS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Existují různé verze HTML. Typ dokumentace<!DOCTYPE html> označuje, že tento dokument HTML obsahuje kód HTML5.

I když se nebudeme hlouběji zabývat významem všech prvků HTML, chceme upozornit na několik důležitých položek. Značka meta označuje informace o metadatech, které nejsou obvykle viditelné pro diváka, pokud v prohlížeči nezobrazují zdrojový kód. Meta elementy nebo značky poskytují popisné informace o webové stránce. Pomáhají například vyhledávacím webům zpracovávat, které informace na webových stránkách se mají vrátit do výsledků hledání.

Znaková sada (charset) pro UTF-8 se může zdát nevýznamná, ale je zásadní pro stanovení způsobu interpretace znaků počítači. Pokud metadata znakové sady chybí, může to vést k ohrožení zabezpečení. Za atributem charset je poměrně hodně historie a technických informací, ale důležité poznatky z tohoto cvičení jsou, že často používaný editor Visual Studio Code poskytuje rozumné výchozí hodnoty.

Úprava hlavy

Element <head> v kódu HTML obsahuje informace o vašem webu, které nejsou viditelné na kartě prohlížeče.

Metadata definují data o dokumentu HTML, jako jsou znaková sada, skripty a prohlížeč, ve kterém se webová stránka otevře.

Název webové stránky se zobrazí v horní části okna prohlížeče a je významný mnoha způsoby. Například název se používá a zobrazuje ve vyhledávacích webech. Pojďme přidat název.

Důležité

Od tohoto okamžiku tři tečky (...) označují, že dříve deklarovaný kód předchází nebo následuje. Jako kontext by měl být k dispozici dostatek kódu pro provedení nezbytných změn nebo aktualizaci práce, ale neměli byste kopírovat a vkládat tři tečky do kódu.

V editoru <title> upravte prvek tak, aby vypadal podobně jako v následujícím příkladu.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Pokud chcete použít styly na elementy HTML na webové stránce, můžete napsat kód CSS přímo do hlavičky webové stránky. Psaní CSS kódu na stránce HTML se nazývá interní CSS. Osvědčeným postupem je ale oddělit strukturu HTML a styl stylů CSS. Mít samostatnou CSS stránku se nazývá externí CSS. Kód je obvykle srozumitelnější, když je stručný a rozdělený. Pomocí jedné nebo více externích šablon stylů můžete obsluhovat více webových stránek. Místo aktualizace každé stránky HTML pomocí replikovaného kódu CSS můžete provádět změny v jednom souboru CSS a tyto aktualizace se použijí na všechny závislé webové stránky. Pojďme vytvořit odkaz na externí soubor CSS.

V editoru Visual Studio Code přidejte za element prázdný řádek <title> , zadejte linka pak vyberte Enter. Visual Studio Code by měl do index.html souboru přidat následující řádek.
```
<link rel="stylesheet" href="">
```

href= Aktualizujte soubor href="main.css"a uložte ho výběrem kombinace kláves Control+S ve Windows nebo Command+S v systému macOS.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Úprava textu

Pojďme teď začít <body> vyplňovat prvek.

Tento <body> prvek obsahuje obsah vašeho webu, který je viditelný pro vaše zákazníky v jejich prohlížečích.

Uvnitř elementu <body> přidejte prvek nadpisu<h1> , za kterým následuje prvek odstavce<p> , a pak vytvořte neuspořádaný seznam<ul> , který obsahuje několik prvků položky<li> seznamu.

Upravte kód nebo ho zkopírujte a vložte tak, aby vypadal jako v následujícím příkladu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Atribut ID (použitý v elementu <p> ) můžete použít pro styling jednoho prvku, zatímco atribut třídy (použitý v elementu <li> ) je pro stylování všech prvků stejné třídy.

Před dalším krokem se ujistěte, že je soubor uložený tak, že vyberete Control+S nebo Command+S.

Otevřít v prohlížeči

Náhled webové stránky můžete zobrazit místně tak, že otevřete soubor HTML v prohlížeči. Místo adresy webu, která začíná https://, prohlížeč odkazuje na místní cestu k souboru, který by měl vypadat podobně jako C:/dev/simple-website/index.html.

Pokud chcete zobrazit náhled pomocí editoru Visual Studio Code, klikněte pravým tlačítkem myši index.html a vyberte Otevřít ve výchozím prohlížeči nebo vyberte index.html soubor a použijte klávesovou zkratku Alt+B.

Důležité

Pokud máte potíže, ujistěte se, že přímo kliknete pravým tlačítkem myši na ikonu nebo text názvu souboru. Pokud se zobrazí dialogové okno editoru Visual Studio Code, vyberte Ano, důvěřuji autorům; toto je funkce důvěryhodnosti pracovního prostoru, která umožňuje rozhodnout, jestli mají složky projektu povolit nebo omezit automatické spouštění kódu. Právě jste soubor vytvořili, takže je v bezpečí.

Webová stránka se otevře ve výchozím prohlížeči.

Zobrazení stránky pomocí vývojářských nástrojů

Webovou stránku můžete zkontrolovat pomocí vývojářských nástrojů v prohlížeči. Pojďme to zkusit.

Otevřete Vývojářské nástroje tak, že kliknete pravým tlačítkem na webovou stránku a vyberete Možnost Zkontrolovat, nebo vyzkoušejte tyto klávesové zkratky:
- Stiskněte klávesovou zkratku vývojářských nástrojů, což je F12.
- Stiskněte Kombinaci kláves Ctrl+Shift+I ve Windows a Linuxu nebo Option+Command+I na Macu.
Tyto klávesové zkratky fungují v Microsoft Edgi, Chromu a Firefoxu. Pokud používáte Safari, podívejte se na nástroje pro vývoj webu. Po instalaci vyberte Předvolby Safari >a pak vyberte Upřesnit. V dolní části podokna zaškrtněte políčko Zobrazit nabídku Vývoj v panelu nabídek. Vyberte Vyvíjet > zobrazení webového inspektoru. Další informace najdete v dokumentaci webového inspektoru Safari.

Další informace o otevírání vývojářských nástrojů a hlavních dostupných funkcí najdete v článku Přehled nástrojů DevTools.
Vyberte záložku Prvky.
Přesuňte myš nad prvky HTML zobrazené na kartě Prvky a rozbalte obsah různých prvků.

Karta Prvky ve vývojářských nástrojích ukazuje, jak je model objektu dokumentu (DOM) vykreslen v prohlížeči. Při ladění je často důležité vidět, jak prohlížeč interpretuje váš zdrojový kód.

Kontrola stránky v prohlížeči poskytuje nejrůznější užitečné informace a může vám pomoct s řešením problémů. Podrobnosti šablon stylů CSS můžete zobrazit také pomocí inspektoru, jak uvidíte v další části.

Váš názor

Byla tato stránka užitečná?