Transcript HTML
<!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 aneb <br><h1> </h1><br> 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 </body> dokumentu Základní struktura stránky typ dokumentu hlavička tělo <!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 – – – – • Velikost písma <b>tučné</b> <i>kurzíva</i> <u>podtržené</u> <s>přeškrtnuté</s> – <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 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í <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!