HTML Zkladyjednoduchch tvorby webovch strnek Tvorba webovch strnek
HTML Základyjednoduchých tvorby webových stránek Tvorba webových stránek
Struktura HTML dokumentu <HTML> <head> <title>zkouška</title> </head> <body> Ahoj ! </body> </HTML> • Začátek HTML • Hlavička, která obsahuje titulek stránky • Tělo – do něj se píše většina kódu • Konec HTML
Nadpisy <h 1>Ahoj !</h 1> - největší nadpis <h 2>Ahoj!</h 2> <h 3>Ahoj!</h 3> <h 4>Ahoj!</h 4> <h 5>Ahoj!</h 5> <h 6>Ahoj!</h 6> - nejmenší nadpis Takto se zobrazí nadpisy
Písmo • • • <b> tučné písmo</b> <i> kurzíva</i> <u> podtržené písmo </u> <s> přeškrtnutý text </s> index<sub> spodní</sub> index<sup> horní</sup>
Odřádkování a čáry • Odřádkování <br/> • Čára <hr/> jsou to nepárové tagy lomítko je za zkratkou <hr size="5„ color=„red"> tloušťka čáry 5 a barva zelená <hr width="350" align="left"> Délka čáry 350 bodů zarovnaná vlevo Délku čáry lze zadat i v procentech <hr width=“ 50%“>
Odstavce píší se mezi znaky <p> </p> <p align="left">. . . </p> - odstavec zarovnán vlevo <p align="center">. . . </p> - odstavec zarovnán na střed <p align="right">. . . </p> - odstavec zarovnán vpravo <p align="justify">. . . </p> - odstavec zarovnán do bloku
Obrázky tag <img> • Vkládáme obrázky s koncovkou. gif nebo. jpg • V tagu <img> je atribut src určujeme jím cestu, kde ten obrázek máme uložen a další atributy alt a title – titulek obrázku po najetí myši • <img src="images/obrazek. jpg" alt=„Obrázek" title="Toto je obrázek" width=150 height=214 border=0 > Atribut border=0 říká, že kolem obrázku nebudou žádné okraje
Odkazy tag <a> </a> • Do href=". . . " napíšeme adresu odkazu. <a href="adresa odkazu">Text, na který klikneme</a> atributu target="_blank" - otevře se v novém okně <a href="http: //seznam. cz" target="_blank">Seznam</a> Odkazy v dokumentu, přechod na další stránku <a href=“index. htm“>homepage</a>
Tabulka • Tabulka je uzavřena mezi tagy <table>. . . </table> Řádek tabulky je uzavřen mezi tagy <tr>. . . </tr> Buňka tabulky je uzavřena mezi tagy <td>. . . </td> <table> <tr><td>27</td> <td>44</td></tr> <tr><td>23</td><td>56</td></tr> </table>
<table WIDTH=300 BORDER=1 CELLPADDING=0 CELLSPACING=0 align="center"> <tr><td>27</td> <td>44</td></tr> <tr><td>23</td><td>56</td></tr> </table>
Propojení buněk v tabulce vodorovně (spojení dvou sloupců) je pomocí atributu colspan="2" svisle (spojení dvou řádků) je pomocí atributu rowspan="2" <table WIDTH=300 BORDER=1 CELLPADDING=1 CELLSPACING=1 align="center"> <tr><td colspan="2„>27</td><td rowspan="2„>44</td> </tr> <tr><td>23</td><td>56</td> </tr> </table>
Atributy tabulky border=hodnota - nastavuje tloušťku rámečku tabulky width=hodnota - nastavuje šířku tabulky v bodech nebo procentech bgcolor="barva" - nastavuje barvu pozadí tabulky cellspacing=hodnota - určuje vzdálenost mezi jednotlivými buňkami v tabulce • cellpadding=hodnota - určuje vzdálenost textu od okraje buňky • • • <table WIDTH=300 BORDER=1 CELLPADDING=1 CELLSPACING=1 align="center” bgcolor="Yellow“>
- Slides: 12