1. lekce - v čem vytvářet a jak začít
V čem vytvářet
Webové stránky se dají vytvářet několika způsoby. Můžete si vytvořit dokument v nějakém textovém editoru (Word, OpenOffice apod.) a uloži ve formátu html. Je to nejednoduší způsob ale také ten nejhorší možný. Další variantou je použít editor typu WYSIWYG - to co vidíš také dostaneš, typickým příkladem je NVU. A nebo použít vývojová prostředí, čili editory které slouží k programování a vytváření aplikací. Zde je již potřeba používat a znát značkovací jazyk HTML, kdy si stránky budem vytvářet sami. Jako editor budem používat PSPad a Visual Studio Code.
Jak začít
Nejprve si spustíme editor a vytvoříme nový dokument s příponou .html
Objeví se dokument ve zdrojovem kódu se základní strukturou, kterou musí obsahovat každý dokument HTML.
<!DOCTYPE HTML>
<html lang="cs">
<head>
<title>Naše první stránka</title>
</head>
<body>
</body>
</html>
Jako další krok, napíšeme mezi značky <title> </title> - Naše první stránka.
Zdrojový kód si uložíme, pod názvem prvni.html. Po otevření stránky v prohlížeči, se nám objeví prázdná stránka. Kde pouze v záhlaví uvidíme, titulek stránky, který jsme napsali.
Pokud chceme, aby bylo na stránce něco vidět, zapisujeme to do kódu mezi značky <body> </body>. A jdeme si hned zkusit něco napsat. Začnete tradičním: Ahoj světe!
<body>
Ahoj světe!
</body>
Po uložení a zobrazení v prohlížeči, už uvidíme na naší stránce první text.
A zkusme si ještě zapsat další větu: Učím se vytvářet webové stránky.
Nyní již víme, že to co chceme vidět zapisujeme mezi značky <body> </body> A teď si ukažeme další značku která slouží k psaní nadpisů. Jedná se o značku <h1> až <h6>. Napišme si tento zdrojový kód, kde budou postupně nadpisy první až šesté úrovně.
<h1>Nadpis 1. úrovně </h1>
<h2>Nadpis 2. úrovně </h2>
<h3>Nadpis 3. úrovně </h3>
<h4>Nadpis 4. úrovně </h4>
<h5>Nadpis 5. úrovně </h5>
<h6>Nadpis 6. úrovně </h6>
Náš výsledný dokument na konci první hodiny by měl vypadat takto:
Pokračuj na 2. lekci.