Tentokrát zpátky na stromy: web pro totální … začátečníky

Dnes nebudu odpovídat na jeden jediný konkrétní dotaz. Utěšeně totiž narostla složka, do níž dávám...
Dnes nebudu odpovídat na jeden jediný konkrétní dotaz. Utěšeně totiž narostla složka, do níž dávám dopisy, v nichž se ptáte na základní věci z oblasti tvorby webových stránek. Rád bych tedy dnes všechny vaše otázky shrnul a tento díl věnoval všem, kteří hodlají začít vytvářet webové stránky.

Od základu: co je to HTML?

Jednak byste měli vědět, co vůbec taková webová stránka je. Je to v podstatě textový soubor (i když samozřejmě tento soubor nemá příponu .txt), obsahující text, který má být zobrazen v okně prohlížeče webových stránek. Aby tento text byl určitým způsobem zformátován, byl v okně prohlížeče umístěn na přesně požadovaném místě, měl barvu, kterou určíte, případně byl vložen do stránky obrázek či odkaz, po jehož kliknutí se dostanete na další stránku, je zapotřebí do zmiňovaného textového dokumentu vložit mimo samotného textu i určité značky, které říkají prohlížeči, jakým způsobem má text zformátovat. Tyto značky se nazývají tagy. Všechny tagy pak tvoří jazyk pojmenovaný zkratkou HTML (HyperText Markup Language). Značek (tagů) jazyka HTML není mnoho; pokud se je budete snažit spočítat, dojdete k číslu o něco vyššímu než sto. Ovšem i při tak malém počtu "příkazů" by se dá říci, že se jedná o jazyk v dostačující k popisu formátování stránky v okně prohlížeče.

Jak pracovat s tagy

Tagy (příkazy jazyka HTML) by se daly rozdělit do několika skupin, ovšem nejobecnější členění je na tagy párové a tagy nepárové. Co to znamená? Nepárový tag má vliv na vzhled dokumentu pouze na místě, kde je do něj vložen. Pokud chcete kupříkladu ukončit řádek textu, vložíte tag odsazující řádek jako klávesa Enter. Jedná se o nepárový tag, protože jeho platnost je omezena pouze na jedno místo stránky. Naproti tomu párové tagy "platí" od místa, kde byl do dokumentu vložen začáteční tag, až po místo, kde druhým tagem platnost prvního ukončíte. Kupříkladu budete-li chtít změnit řez písma v jistém rozsahu dokumentu, vložíte na začátek tag, který tuto změnu zajistí. Písmo bude změněno až do míst, kde je vložen druhý tag (párový), a ten tuto změnu ukončí.

Chyby jsou přehlíženy!

Prohlížeče webu pracují s jazykem HTML poměrně benevolentně. Pokud se kupříkladu spletete v názvu některého tagu, nic se nestane. Prohlížeč dokument zobrazí, všechny ostatní tagy budou mít vliv na formátování přesně podle vašich představ. Chybný tag se však nijak neprojeví. Prohlížeč nezobrazí žádné chybové hlášení, bude se k chybnému tagu chovat tak, jako by v dokumentu vůbec nebyl!

Než se spolu pustíme do vytváření webové stránky, je potřeba, abyste věděli ještě několik věcí. Především si musíte uvědomit, že i přesto, že prohlížeč chybné tagy ignoruje, existují určité tagy, které dokument musí bezpodmínečně obsahovat a které jsou bezpodmínečně nutné k jeho správnému zobrazení. Existují také tagy, které sice dokument obsahovat nemusí, ale pro korektní zobrazení či ovlivnění správné funkce prohlížeče by měly být uvedeny.

Uvození tagů

Každý tag je uveden mezi dvěma menšítky (tedy asi takto ). Jakmile tedy do dokumentu zapíšete jakýkoliv text uzavřený mezi značky , aplikace se jej pokusí identifikovat, a pokud se bude jednat o korektní tag, tak podle jeho významu změní formátování dokumentu. Většina tagů může mít navíc i několik parametrů. Jejich nastavení ovlivňuje způsob, jakým se má prohlížeč chovat. Může se kupříkladu jednat o parametr obsahující název obrázkového souboru, jenž má být do dokumentu vložen, či adresu stránky, na níž ukazuje hypertextový odkaz. Je třeba zdůraznit, že jazyk HTML nerozlišuje velká a malá písmena abecedy (je "case insensitive"). Tedy prohlížeči je jedno, jestli jsou tagy zapsány malými či velkými písmeny.

První stránka: nápis v liště

Nyní se již můžete pustit do vytvoření vaší první stránky. Abych vám ukázal, že se soubor popisující webovou stránku liší od textového souboru pouze svojí příponou, použijeme k vytvoření stránky obyčejný poznámkový blok, který je součástí každé instalace Windows 95. Připravte si také text, který má být součástí stránky.

Každá webová stránka musí na svém začátku mít informaci o tom, že právě zde začíná kód stránky HTML. Vložte tedy do dokumentu párový tag <HTML> a </HTML>. Mezi tyto dvě značky budete zapisovat vlastní kód stránky HTML. Důležitou součástí je hlavička stránky, ta v sobě obsahuje některé informace o stránce (kupříkladu v jakém kódování je pořízena, co obsahuje atd.; o těchto nastaveních se však dozvíte v dalších dílech mé poradny) a její název. Hlavička je uzavřena párovými tagy <HEAD> ... </HEAD>.

Jediné, co vás dnes naučím nastavit, je titulek dokumentu. Ten se objeví v modrém pruhu okna prohlížeče. Měl by proto výstižně charakterizovat vaši stránku. Řekněme, že první stránka, kterou vytvoříte, se bude jmenovat Ukázková stránka. Tento text musíte zapsat do hlavičky stránky HTML (mezi tagy <HEAD> ... </HEAD> a "uvnitř" jej ještě uzavřít mezi párové tagy <TITLE> a </TITLE>. Připravovaná stránka tedy v této chvíli vypadá takto

<HTML>

<HEAD>

</TITLE> Ukázková stránka </TITLE>

</HEAD>

</HTML>

V této chvíli by sice stránka již "fungovala", ovšem okno prohlížeče by zůstalo prázdné. Nyní je čas říci prohlížeči, kde je "tělo" (tedy to hlavní) vašeho dokumentu. Za tag </HEAD> zapište dva párové tagy <BODY> a </BODY>; tím jste vymezili prostor, v němž bude možné zapsat text, který je zobrazen v okně prohlížeče. Vložte tedy mezi tyto dva tagy připravený text.

<HTML>

<HEAD>

</TITLE> Ukázková stránka </TITLE>

</HEAD>

<BODY>

Zobrazovaný text

Toto je text, který bude zobrazen v okně prohlížeče.

</BODY>

</HTML>

V této chvíli již můžete stránku uložit (nezapomeňte, že přípona souboru musí být htm nebo html, nikoliv txt) na disk a posléze otevřít v prohlížeči webových stránek. Vidíte, že prohlížeč správně zobrazil vložený text. Ovšem provedl to bez jakéhokoliv formátování.

Poslední, co vám dnes vysvětlím, bude způsob, jak udělat odstavec, změnit barvu písma a část textu zapsat tučně.

Řekněme tedy, že první řádek bude zvýrazněn tučným písmem. V jazyku HTML existuje párový tag <B> ... </B>, který pro text uzavřený mezi značkami nastavuje tučné písmo. První řádek tedy upravte takto

<B>Zobrazovaný text</B>

Navíc tento řádek má být samostatný. Přidejte tedy na jeho konec tag <BR>, který prohlížeči říká, aby ukončil řádek a přesunul se na nový. Nakonec změníte barvu písma. K tomu použijete opět párový tag <FONT> ... </FONT>. Zapište jej tak, aby uzavíral celý text vaší stránky. Poté využijete jeho parametru COLOR, kterým určíte barvu textu. Řekněme, že má být modrá (anglicky "Blue"). Celý kód stránky potom bude vypadat takto.

<HTML>

<HEAD>

</TITLE> Ukázková stránka </TITLE>

</HEAD>

<BODY>

<FONT COLOR = "Blue"><B>Zobrazovaný text</B><BR>

Toto je text, který bude zobrazen v okně prohlížeče.

</FONT>

</BODY>

</HTML>

Prohlédněte si stránku v prohlížeči, uvidíte jak vypadá.

Diskuze (1) Další článek: HP, Baan a OR-CZ dohromady

Témata článku: Software, Prohlížeče, Programování, Ukázková stránka, HTML, Head, Str, Začátečník, Prohlížeč, Připravený text, První parametr


Určitě si přečtěte

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

Micro:bit V2: Tuto destičku plnou čipů dokáže naprogramovat i vaše babička

** Chcete se teď hned naučit programovat čipy? ** Nechcete nic instalovat a číst zdlouhavé manuály? ** Naprogramujeme si Micro:bit, který zahraje Tichou noc

Jakub Čížek | 33

Jakub Čížek
Pojďme programovat elektronikuProgramování pro děti
Zapomeňte na destičky. Raspberry Pi 400 je nový počítač zabudovaný do klávesnice
Lukáš Václavík
Raspberry PiPočítače
Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

** V nových mobilech se začíná objevovat tajemná zkratka UWB ** Jde o další technologii, jak navzájem propojit různá zařízení ** Oproti Wi-Fi a Bluetooth má řadu výhod

Lukáš Václavík | 36

Lukáš Václavík
UWBIoTTechnologie
Šéf Spotify: Budeme zdražovat. Náš obsah se zlepšil
Markéta Mikešová
PředplatnéSpotify
Lidl buduje chytrou domácnost, propojí všechno se vším
Lukáš Václavík
LidlChytrá domácnostIoT
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus
26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

** Prohlížeč Chrome obsahuje širokou škálu funkcí, neumí ale všechno ** Jeho schopnosti můžete rozšířit pomocí rozšíření ** Vybrali jsme pro vás zajímavé a užitečné doplňky

Karel Kilián | 44

Karel Kilián
Doplňky do prohlížečeChromeProhlížeče

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5