Základní struktura www stránky

Vytvořit si svoji www stránku lze více způsoby, například:
- využít nabídku různých poskytovatelů prostoru pro stránky (například různé blogy) a vytvořit stránku pomocí jejich editorů, většinou bez potřeby znalosti HTML - výhodou je snadná a rychlá tvorba, nevýhodou někdy i velmi omezené možnosti tvorby nebo práce se zdrojovým kódem stránky
- vytvořit dokument v některé aplikaci určené pro Windows (např. Microsoft Oficce (Word, Excel, Powerpoint, Acces), Corel apod.) a v této aplikaci dokument uložit jako WWW stránku, výhodou je jednoduchost vytvoření, nevýhody jsou velikost zdrojového souboru, velká nepřehlednost zdrojového kódu, do kterého je velmi obtížné zasahovat
- využít tzv. WYSIWYG (výsledek bude týž jako vidíš na monitoru) editory HTML (například Frontpage), které umožňují vytvořit stránku bez podrobné znalosti jazyka HTML také poměrně snadno a rychle, zdrojový soubor už nebývá tak velký ale stále obsahuje řadu zbytečností
- další editory jsou určené přímo k práci s HTML kódem (HomeSite, Dreamweaver apod.), je potřebná znalost HTML

Nejlepší je porozumět alespoň základům kódu HTML a potom se rozhodnout podle potřeb pro některý z uvedeného typu editorů. Proto budeme své první stránky tvořit nejpracnější cestou, při které ale základy HTML můžeme pochopit, a to v textovém editoru, který si do textu nepřidává žádné řídící znaky, např. Poznámkovém bloku (Notepad) nebo PSPadu (ve složce Y:/HTML). Dokument v jazyce HTML je totiž prostý textový popis vzhledu www stránky s příponou html nebo htm. V těchto lekcích byste mohli získat základní znalosti HTML a CSS ať už pro osobní tvorbu nebo případné další studium "profesionálů". Zdrojů k dalšímu studiu existuje například na Internetu mnoho, mezi odkazy níže jsou uvedeny ty, ze kterých jsem čerpal při tvorbě těchto lekcí.


Popis vzhledu www stránky se provádí pomocí značek, kterým se říká tagy. Uzavírají se do špičatých závorek <> (které lze psát na české klávesnici pomocí pravý Alt + > nebo < ). Většina tagů je párových, první určuje začátek a druhý konec vymezené části HTML dokumentu, například <b> a </b> ohraničují text, který má být zobrazený tučně, všimněte si, že koncový tag se liší lomítkem. Koncový tag lze v HTML někdy vynechávat, budeme ho ale uvádět všude abychom mohli v budoucnu přejít k XHTML. Je jedno, jestli budete používat malá nebo velká písmena, pokud ale budete chtít pokročit k jazyku XHTML, používejte malá písmena.

Začátek a konec www stránky tvoří tagy <html> a </html> (později doplníme i některé parametry, ale i bez tohoto tagu by prohlížeče stránku zobrazily). Dál se stránka dělí na hlavičku <head> a </head> a vlastní tělo, jehož obsah se zobrazí v hlavním okně prohlížeče <body> a </body> . Hlavička obsahuje různé informace o dokumentu, mimojiné také titulek <title> a </title> , který se zobrazí v horním modrém titulkovém pruhu okna prohlížeče a který využívají a zobrazují různé vyhledávače (například Google), proto je vhodné titulek uvádět a použít do něj smysluplný text. Nyní už můžete vytvořit svoji první www stránku, spusťte Poznámkový blok a zapište do něj například:

<html>

<head>
<title> Výuka HTML </title>
</head>

<body>
Vítám všechny na své první skvělé www stránce.
</body>

</html>

Na rozvržení zapsaného textu prohlížeči nezáleží, klidně mohl být celý text napsaný v jednom řádku, výsledek by byl stejný, prohlížeč se řídí jen použitými tagy. Soubor uložte například pod názvem index.html (pozor, důležitá je přípona, při uložení je potřeba vybrat typ dokumentu - všechny dokumenty), přípona řekne prohlížeči (Internet Explorer - dále jen IE, Netscape, Opera, Mozilla atd.), že jde o dokument html. Pokud otevřete složku, do které jste soubor správně uložili, měl by před názvem mít ikonu IE (nebo jiného prohlížeče) a měl by jít otevřít v prohlížeči dvojím kliknutím. V titulkovém pruhu obsahuje text z tagu <title> a zobrazuje text ohraničený tagem <body>.
Nyní zkuste provést na vaší první stránce změny - v prohlížeči v nabídce Zobrazit vyberte Zdrojový kód, otevře se Poznámkový blok s kódem, který jste zapsali. Zkuste změnit titulek nebo text na stránce, v Poznámkovém bloku soubor uložte a v prohlížeči použijte tlačítko Obnovit - provedené změny by se měly projevit. Toto je nejčastější operace, kterou budete provádět, vyzkoušejte si ji víckrát.


Úkoly:

Vytvořte si složky Moje a Úkoly. Do první si budete ukládat svoje vlastní pokusy a stránky vytvářené ve volném čase po splnění úkolů, do druhé řešení zadaných úkolů a vše co se jich týká. Každý úkol bude ohodnocen počtem bodů, dosažený počet bodů bude nejdůležitějším kritériem hodnocení. Budu také vyžadovat znalosti všech tagů a parametrů uvedených ve stručném obsahu lekcí.

Úkol (3 body)

Do složky Úkoly uložte stránku index.html vytvořenou podle přechozího textu, má obsahovat titulek Můj první HTML úkol a text: Dnes jsem poznal tyto tagy: , a doplňte jejich názvy bez špičatých závorek.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_01_10B_tvorba www1
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.