Základy HTML
Úvod HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. HTML soubor je obyčejný text obalený značkami, které se nazývají tagy. tagy určují, jak bude text vypadat, tedy jakou bude mít formu. všechny tagy jsou uzavřeny v <ostrých závorkách>. co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky: <tag>text
Obecná syntaxe HTML HTML má několik málo zásad: Nezáleží na velikosti písem, <body> je totéž co <BODY> V adresách a jménech souborů záleží na velikosti písmen, nesmí obsahovat mezery a češtinu. Tagy, které prohlížeč nezná, jako by nebyly. Na začátku tagu nesmí být mezera, třeba < br> je špatně. Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery.
Struktura dokumentu <html> <head> <title>úvod</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> </html> hlavička dokumentu tělo dokumentu
Struktura dokumentu <html> </html> - začíná a končí celý dokument, celý obsah musí být uvnitř <head> </head> - hlavička dokumentu se nezobrazuje, obsahuje nepovinně další tagy (title, meta, link, style, script aj.) <body></body> - tělo dokumentu, obsahuje veškerý zobrazovaný obsah stránky.
Psaní dokumentu Stránku pomocí HTML můžeme psát v jakémkoli textovém editoru, přičemž nejvhodnější je poznámkový blok. Soubor pak musíme uložit s příponou .html, jako typ zvolíme Všechny soubory
Zdrojový kód
Stránka v prohlížeči
Vytvoření nového dokumentu Použití editoru HTMl Editor HTML je vhodný pro začátečníky na vytváření webových stránek, nabízí u každého tagu atributy a barevně zvýrazňuje správnou syntaxi. Vytvoření nového dokumentu
Použití editoru HTMl Jednotlivým tagům můžeme nastavit vlastnosti tak, že umístíme kurzor „dovnitř“ tagu a editor nám nabídne, co můžeme ovlivnit
Použití editoru HTMl Vzhled stránky si můžeme prohlédnout v HTML náhledu
Volba písma Tag <font> - nastavení barvy, velikosti a fontu písma Při volbě typu písma je vhodné použít větu Příliš žluťoučký kůň úpěl své ďábelské ódy která obsahuje všechna česká písmena s diakritikou
Další tagy Nadpisy h1 až h6 - zobrazují se automaticky tučně, různým stupněm písma a mají kolem sebe vertikální mezery. atribut align – right, left, center, justify <br> - break – nepárový tag, který ukončí řádek <p> </p> - odstavec atribut align – zarovná text odstavce - right, left, center, justify
Vložení obrázku <img> - obrázek (angl. image), nepárový tag; do stránky se vloží obrázek načtený z jiného souboru; artibuty: src - umístění souboru s obrázkem; v souboru je umístěna pouze cesta k obrázku. Po přemístění „html souboru“ na jiný počítač, na server v internetu apod., cesta se změní a obrázek se nezobrazí. Řešením je umístění obrázku do stejné složky s „html souborem“ a do src napsat jen název obrázku. Název by měl být bez diakritiky a jedno slovo - <img src="fotbal.jpg">
Vložení obrázku alt - alternativní text, zobrazuje se ve stránce tam, kde se nenačte obrázek width, height – šířka a výška obrázku, udává se v pixelech nebo v %, zadáme-li pouze jeden rozměr, je druhý dopočítán a obrázek se nedeformuje border – tloušťka rámečku (border=“0“- bez rámečku) vspace, hspace - vertikální a horizontální odsazení od okolních objektů align – zarovnání obrázku s okolím, obtékání obrázku (right, left), vertikální umístění obrázku na řádku (top, middle, bottom, baseline atd.)
Zdrojový kód
Stránka v prohlížeči