Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
<. 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>
2
Co je to HTML? HyperText MarkUp Language
Obyčejný text obohacený značkami – tagy Soubor s příslušnou příponou - *.html
3
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>
4
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>
5
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>
6
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">
7
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“>
8
Nadpisy <h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2> <h3>Nadpis třetí úrovně</h3> <h4>Nadpis čtvrté úrovně</h4>
9
Ú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>
10
Hrátky s řádky <p>ohraničení odstavce</p>
<br>zalomení řádku (nepárový tag) <sub>dolní index</sub> <sup>horní index</sup>
11
<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>
12
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
13
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ů
14
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ě
15
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=„ kterým se odkazuji</a> Něco více o odkazech
16
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>
17
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>
18
Další informace najdete mimo jiné na stránkách:
které byly i mým zdrojem. Hodně zdaru při práci!
Podobné prezentace
