Tvorba webových stránek 1
HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený značkami = tagy. Programy pro tvorbu: 1) textové editory 2) HTML editory Soubor s koncovkou *.htm nebo *.html 2/17
Tagy = značky Tagy určují, jak bude text vypadat (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. Typy: párové / nepárové Symbolicky zapsáno: <tag> text </tag> a zase text <tag> a zase text... Příklad: <b>tučný text</b> = Tučný text 3/17
Ukázka kódu Kód: <b>tučný text</b>, <i>text kurzívou</i>, <u>podtržený</u> Výsledek: Tučný text, text kurzívou, podtržený 4/17
Obecná syntaxe HTML 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ějí tam být mezery a česká diakritika. 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. Konec řádku ve zdroji se chápe jako mezera. Speciální znaky typu se do zdroje zadávají jako posloupnost znaků &něco; například, pevná mezera je Poznámka se do zdroje vkládá mezi značky <!-- a --> <!-- Toto je poznámka, která se nezobrazí. --> 5/17
Šablona dokumentu <html> //začátek dokumentu <head> //začátek hlavičky, nezobrazuje se, ale obsahuje důležité informace <title> //vymezuje název dokumentu... </title> </head> //konec hlavičky <body> //tělo dokumentu bude se zobrazovat!!... </body> </html> //konec dokumentu 6/17
Text <b> tučné písmo </b> <i> kurzíva </i> <u> podtržení textu </u> horní <sup> index </sup> tučné písmo kurzíva podtržení textu horní index dolní <sub> index </sub> dolní index <strike> přeškrtnutý text </strike> přeškrtnutý text <br> zalomení textu (enter) mezera 7/17
Text - <font> <font> udává typ, barvu a velikost </font> Atributy: face="" typ písma (Arial, Courier New, Verdana, Garamond, Times New Roman, ) color="" barva písma (red, green, blue, silver, lime, yellow, black, ) size="" velikost písma (číslo od 1 do 7) <font face="times New Roman" size="5" color="blue"> velké modré písmo Times</font> velké modré písmo Times 8/17
Odstavce - Bloky <p> odstavec </p> odstavec Atribut align: align="left" zarovnání vlevo align="right" zarovnání vpravo align="center" zarovnání na střed align="justify" zarovnání do bloku Např. <p align="center">zarovnání na střed</p> zarovnání na střed 9/17
Odstavce - Nadpisy <h1>velikost h1</h1> <h2>velikost h2</h2> <h3>velikost h3</h3> <h4>velikost h4</h4> <h5>velikost h5</h5> <h6>velikost h6</h6> <h7>velikost h7</h7> velikost h1 velikost h2 velikost h3 velikost h4 velikost h5 velikost h6 velikost h7 10/17
Obrázky <img src="zdroj/obrazku.jpg" width="200px" height="200px" alt="alt. popis" title="popisek"> Atributy: src=" " zdrojová cesta k souboru, udává se absolutně nebo relativně width=" " šířka obrázku v px height=" " výška obrázku v px alt=" " alternativní popis, pokud se obrázek nezobrazí title=" " popisek, který se zobrazí po najetí myši na obrázek align=" " umístění obrázku vůči textu (left - vlevo, right - vpravo) 11/17
Odkazy <a href="http://www.seznam.cz">seznam.cz</a> Atributy: href=" " cíl odkazu target="_blank" otevře se v novém okně, cílový rám 12/17
Seznamy - odrážky <ul> <li> odrážka </li> <li> odrážka </li> </ul> odrážka odrážka Atributy: type="disc" puntík type= "circle" kolečko type= "square" čtvereček 13/17
Seznamy - číslovaný seznam <ol> <li> položka </li> <li> položka </li> </ol> 1. položka 2. položka Atributy: type="a" - Velká písmena type="a" - malá písmena type="i" - Římské velké type="i" - Římské malé 14/17
Tabulky <table> //začátek tabulky Výsledek: <tr> //začátek řádku A B <td>a</td> //buňka C D <td>b</td> //buňka </tr> <tr> //konec řádku <td>c</td> <td>d</td> </tr> </table> //konec tabulky 15/17
Tabulky Atributy <table>: border="1" šířka orámování (číslo v px) bordercolor="black" barva orámování Atributy <tr> / <td>: bgcolor="blue" výplň řádku / buňky align="center" vodorovné zarovnání (left, center, right) valign="top" svislé zarovnání (top, middle, bottom) Atributy <td>: rowspan="3" svislé sloučení tří buněk colspan="2" vodorovné sloučení dvou buněk 16/17
Zdrojové informace www.jakpsatweb.cz http://www.w3schools.com http://www.tvorba-webu.cz/html/ http://validator.w3.org/ 17/17