2.ročník IKT - tvorba webových stránek

Základy

Co je to webová stránka

Webová stránka je dokument, který náš webový prohlížeč (např. Firefox, Chrome, InternetExplorer,...) získá od nějakého webového serveru a zobrazí jej. Zapisuje se v jazyce HTML. Je to text ve kterém se používají tzv. řídící značky - tagy. HTML dokument je zdrojový kod webové stránky.

Struktura html dokumentu

Struktura stránky obsahuje základní značky začínající úvodem, titulem,hlavičkou. Pak je obsah těla ve kterém se dá vytvořit menu a vložit odkazy na stránky. Pak se dají vložit odkazy na webové stránky a ruzné aktivity. Tělo dokumentu je složeno z nadpisů a odstavců.

Formátování textu

Webový prohlížeš si odstavce textu sám formátuje podle toho, jak má široké okno. Snadno si to ověčím tak, že zkusím velikost okna změnit - prohlížeč si text přeformátuje sám podle nové velikosti okna

Tabulka

Text lze uspořádat i vytvořením html tabulky, což je trochu složitější, ale nabízí to více možností. Celá tabulka se skládá z řádků a sloupců, při čemž je každý řádek rozdělen na jednotlivé buňky:

Odkazy

Jak se dělá odkaz

Odkaz se tvoří párovým tagem <a>. Část textu ohraničená tímto tagem bude fungovat jako odkaz na jinou webovou stránku. Na jakou stránku odkaz míří, určíme argumentem href.

Jiné užitečné argumenty tagu <a> jsou name nebo target.

Příklady odkazů

Odkaz na stránky seznam.cz
Odkaz na konkrétní článek na seznamu.
Odkaz na dokument ve stejné složce.
Tento odkaz se otevře v novém okně
Odkaz na dloooooouhý dokument ve stejné složce
Tento odkaz se otevře v novém okně
Odkaz na 2.kapitolu dloooooouhého dokumentu
Odkaz na předposlední kapitolu dloooooouhého dokumentu
Odkaz na poslední kapitolu dloooooouhého dokumentu
Tento odkaz se otevře v novém okně jménem Charlie
Tento odkaz se otevře v novém okně jménem Charlie

Příklady praktických HTML stránek

rozvržení webové stránky pomocí prvků <div>
rozvržení webové stránky pomocí mřížky
uwu eddie is a little bitch muhehehe
Weboy formulář verze 1
můj vlastní formuář
hráči

Obrázky

Jak se vkládá obrázek

Obrázek na webovou stránku vložím nepárovým tagem <img> ,který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totiž umístění obrázku. Do stránky vloží obrázek, který se nějak jmenuje a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Doporučuji zadávat rozměry obrázků jako parametry tagu img. Například zápis <img src="nejaky_obrazek.gif" width="60" height="100"> je lepší než zápis <img src="nejaky_obrazek.gif">

Příklady

obrázek mimo textový odstavec

homosexuálové se muckaj

obrázek v textovém odstavci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ipsum. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nullam faucibus mi quis velit. Nullam rhoncus aliquam metus. Praesent vitae arcu tempor neque lacinia pretium. Sed convallis magna eu sem. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Proin mattis lacinia justo. Sed ac dolor sit amet purus malesuada congue. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

uspořádání více obrázků



Bitch BoyTM


Šiřte lásku jednorožčí

Odkaz na můj playlist ABIWTGR

UwU kukni sem

Něco o mé úžasnosti? Rád hraji hry!


Třeba Genshin! Můj main dps je Sucrose! Dále v týmu mám Xiaa, Raiden Shogun a Jean. Nejnovější 5* je Jean (No Yae for me)😩.
Tento Sucrose aesthetic není má práce, tady je odkaz na místo kde jsem to sehnal 🧪Sucrose
Taky hraji Stardew Valley, můj fave je Shane, Sebastian a Penny 🥰


Kinnie momenty



Isabela Madrigal 😩 that's it, just Isabela.

Stránku spravuje Charlie Kestler