<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML</title> </head> <body> <font color=„blue“> <h1><p align=„center“> Základy HTML </h1><br> aneb <br><h1> Jak si vytvořit základní stránku pomocí HTML </h1> </font> </body> </html>
Co je to HTML? HyperText MarkUp Language Obyčejný text obohacený značkami – tagy Soubor s příslušnou příponou - *.html
Jak vypadají tagy? Uzavírají se do špičatých závorek - <> Dělíme je na Párové - mají začátek a konec <začátek> text </konec> Př.: <h1>Nadpis 1. úrovně </h1> (stejné jméno tagu, ale koncovému předchází lomítko „/“) Nepárové – mají pouze začátek Př.: <br> Tagy mohou obsahovat atributy a jejich hodnoty. V tomto případě se ukončuje pouze příkaz tagu! Př.: <body bgcolor="white" text=„red" link=„blue" vlink=„yellow">text dokumentu </body>
Základní struktura stránky hlavička tělo typ dokumentu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jméno</title> </head> <body> samotný kód stránky </body> </html>
Doctype V podstatě říká „překladateli“ – prohlížeči v jakém jazyce mluvíte Pro naše účely můžeme vynechat – ale může nám to způsobit nesrovnalosti některých příkazů v různých prohlížečích Všechen následující text je uzavřen do tagů: <html> </html>
Hlavička Musí být v každém dokumentu Obsahuje název – uzavřen do tagů: <title> a </title> <meta> tagy např. tag týkající se kódování <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Pozadí Platí všeobecná zásada – žádné pozadí, dobré pozadí. Nicméně máme 2 možnosti: 1. Tapeta <body bgcolor=„green“> 2. Obrázek <body background=„jmeno.obrazku“>
Nadpisy <h1>Nadpis první úrovně</h1> <h2>Nadpis druhé úrovně</h2> <h3>Nadpis třetí úrovně</h3> <h4>Nadpis čtvrté úrovně</h4>
Úpravy písma Řez písma <big>větší</big> Velikost písma <b>tučné</b> <i>kurzíva</i> <u>podtržené</u> <s>přeškrtnuté</s> Velikost písma <small>menší</small> <big>větší</big> <font size=3>písmo o velikosti 3 body (rozmezí 1-7)</font>
Hrátky s řádky <p>ohraničení odstavce</p> <br>zalomení řádku (nepárový tag) <sub>dolní index</sub> <sup>horní index</sup>
<p align =„center“>odstavec zarovnaný na střed</p> Zarovnání textu <p align =„center“>odstavec zarovnaný na střed</p> <p align =„right“>odstavec zarovnaný vpravo</p> <p align =„left“>odstavec zarovnaný vlevo</p> <p align =„justify“>odstavec zarovnaný do bloku</p>
Jak zapisovat barvy Způsob zápisu Příklad tagu pro červenou barvu Jménem v angličtině <font color=„red“> Procentuálním RGB <font color=„rgb(100%,0%,0%)“> Desetinným RGB <font color=„rgb(255,0,0)“> Šestnáctkovým RGB <font color=„#ff0000“> Zkráceným šestnáctkovým RGB <font color=„#f00“> Přesnější info o barvách
Příklad použití Dokument je psán červeným písmem, bílé pozadí, <body bgcolor="white" text=„red" link=„blue" vlink=„green"> Dokument je psán červeným písmem, bílé pozadí, odkazy jsou psány modře, navštívené odkazy jsou zelené. Více o barvách odkazů
Obrázky <img src=„obrazek.jpg“> Přesnější specifikace rozměrů <img src=„cestaKobrazku“ width=„sirka“ height=„vyska“> Více o obrázcích a jejich přípravě
Odkazy Relativní – určuje trasu mezi adresáři <a href=„cesta k souboru“>text, kterým se odkazuji</a> Absolutní – umístění je jednoznačně určeno <a href=„http://www.jakpsatweb.cz“>text, kterým se odkazuji</a> Něco více o odkazech
Tabulka Začíná vždy <table> a končí </table> Každý řádek začíná <tr> a končí </tr> Každá buňka řádku začíná <td> a končí </td> Příklad: <table> <tr><td>text 1.ř, 1.sl</td> <td>text 1.ř, 2.sl</td></tr> <tr><td>text 2.ř, 1.sl</td> <td>text 2.ř, 2.sl</td></tr> </table>
Seznam s odrážkami odrážkový seznam <ul></ul> Položka seznamu s odrážkami <li></li> Př.: <ul><li>1. položka seznamu</li> <li>2. položka seznamu</li> </ul>
Další informace najdete mimo jiné na stránkách: http://www.jakpsatweb.cz/, http://polopate.jakpsatweb.cz/, http://www.klepal.cz/html/, které byly i mým zdrojem. Hodně zdaru při práci!