Download
1 / 18
E N D
<!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>
typ dokumentu hlavička tělo Základní struktura stránky <!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 • <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>
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 Přesnější info o barvách
Příklad použití <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 <ahref=„cesta k souboru“>text, kterým se odkazuji</a> • Absolutní – umístění je jednoznačně určeno <ahref=„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!
