Cvičení – vytvoření stránky HTML

  • 5 min

V tomto cvičení začnete vytvářet webovou stránku pro svůj životopis. Začnete tím, že přidáte některé základní informace, jako je název a záhlaví oddílu. Přidáte také několik komentářů, které použijeme jako značky, kam přidat informace v pozdějším cvičení.

Toto cvičení používá vscode.dev – webovou verzi editoru Visual Studio Code a CodeSwing. Tyto nástroje pomáhají zjednodušit proces vývoje. K dokončení následujících cvičení není nutná žádná místní instalace.

Vytvoření stránky HTML pomocí CodeSwing

Začnete vytvořením složky, nastavením nástrojů a vytvořením "swing" pomocí CodeSwing v vscode.dev. Swing automaticky zobrazí výsledky kódu, který vytvoříte ve vscode.dev. Díky tomu můžete rychle provádět změny a aktualizace probíhat v reálném čase.

Následující video ukazuje, jak nainstalovat CodeSwing v editoru Visual Studio Code. Tyto kroky jsou také součástí cvičení.

  1. Vytvořte složku na ploše s názvem resume.
  2. Otevřete vscode.dev.
  3. Vyberte Otevřít složku.
  4. Přejděte do složky životopisu , kterou jste vytvořili dříve, a vyberte Vybrat složku.
  5. Po zobrazení výzvy k zobrazení souborů webu vyberte Zobrazit soubory.
  6. Vyberte tlačítko Rozšíření .

    Snímek obrazovky s ikonou Rozšíření

  7. Do textového pole Rozšíření vyhledávání na Marketplace zadejte CodeSwing.
  8. Vyberte Nainstalovat a nainstalujte CodeSwing.
  9. Otevřete paletu příkazů tak, že na Macu vyberete Ctl-Shift-P nebo Cmd-Shift-P .
  10. Do palety příkazů zadejte CodeSwing a vyberte CodeSwing: New Swing in Directory....
  11. Vyberte vybrat složku , pokud chcete použít aktuální adresář (což je adresář, který jste vytvořili v předchozím kroku).
  12. Vyberte Základní: Pouze HTML.
  13. Po zobrazení výzvy k uložení změn pro pokračování vyberteUložit změny.

Visual Studio Code vytvoří dvě okna vedle sebe. Levá strana je váš editor, kde můžete zadat kód HTML. Pravá strana funguje jako prohlížeč a zobrazuje výsledky vašeho kódu HTML.

Přidání HTML pro vytvoření struktury stránky

Dále přidáte kód HTML, který vytvoří strukturu stránky. Vytvoříte tři hlavní prvky html, heada body. Do pole body, přidáte oddíl, který obsahuje obecné informace o vás, jako je vaše jméno a informace o sociálních sítích. Pak přidáte oddíly, které uvádějí vaše vzdělání a zkušenosti.

Následující video ukazuje, jak vytvořit HTML v editoru Visual Studio Code a vykreslit kód v CodeSwing. Tyto kroky jsou také součástí cvičení.

Nebojte se nahradit své jméno svým jménem. V jiných cvičeních vytvoříte seznamy a odkazy na vaši e-mailovou adresu, uživatelská jména na sociálních sítích, a zkušenosti a vzdělání.

Po přidání kódu zkontrolujete, jaký kód se přidal.

  1. Uvnitř index.htmlpřidejte následující kód HTML:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Každý z prvků v HTML dělá určité věci. Následující tabulka popisuje značky, které jste použili ve formátu HTML, a způsob, jakým je prohlížeč rozumí.

Štítek Popis
<html> Značka kontejneru pro celý dokument HTML. Všechny ostatní značky se zapisují uvnitř elementu HTML.
<head> Kontejner hlavičky. Záhlaví obvykle obsahuje odkazy na jiné soubory, které stránka nebo web potřebuje. Může také obsahovat data, která vyhledávací weby a weby sociálních médií používají k lepšímu nalezení vašeho webu.
<body> Tato značka vytvoří kontejner textu pro webovou stránku. Většina prvků zobrazení se nachází v prvku .
<div> Značka dělení vytvoří oddíl ve formátu HTML. Oddíly obvykle mají podobný obsah nebo obsah, který se vzájemně souvisí.
<h1> - <h6> Jedná se o hlavičkové značky. Poskytují určité struktuře dokumentu HTML. Sdělí prohlížeči, aby text mezi nimi naformátoval určitým způsobem, aby zobrazil danou hierarchii.
<!-- comment text --> Tyto značky jsou komentáře ve formátu HTML. Nevytvoří vykreslený výstup. Vývojáři ho používají k usnadnění hledání, sdílení a pochopení kódu.
/* CSS comment */ Tyto značky komentářů se používají v šablonách stylů CASCADING.
  1. Při psaní se stránka automaticky aktualizuje; Konečný výsledek vypadá podobně jako na následujícím obrázku:

Snímek obrazovky se strukturou životopisu

Kontrola kódu

Každá stránka HTML má html jako kořenový základní prvek se veškerým obsahem obsaženým uvnitř. html má obvykle dvě přímé podřízené položky, head obsahující metadata a body obsahující informace, které se mají zobrazit.

Všimněte si, že pro název používáte jenom jeden prvek h1 a h2 elementy pro záhlaví pro každý oddíl. To vám pomůže zvýraznit nejdůležitější části stránky. Vaše jméno je nejdůležitější informace na stránce; proto má přednost s h1.

Nakonec existují komentáře k e-mailové adrese, sociálním médiím, vzdělávání a zkušenostem. Používají se jako zástupné symboly a v pozdějším cvičení tohoto modulu se nahrazují.