22
HTML Text, seznamy, tabulky
HTML
Text, seznamy, tabulky
Formátování textu• Tučné <b>...</b>• Kurzíva <i>…</i>• Velké<big>…</big>• Malé <small>…</small>• Dolní index <sub>…</sub>• Horní index<sup>…</sup>• Přeškrtnuté<s>…</s>• Podtržené <u>…</u>
MOŽNO KOMBINOVATPříklad: <b><i>text</i></b>text
Velikost, barva, typ
• <font> … </font>Attributy
• Size 1-7 (standard 3)• Color anglicky, nebo RGB #552211• Face typ fontu musi existovat na
počítači
Příklad:<font size=6 color=red face=“Arial”>text</font>text
Odrážkový seznam
<ul><li> první položka </li>
<li> druhá položka </li></ul>
• první položka• druhá položka
uzavírací tag </li> je nepovinný
Odrážkový seznam: type
<ul type=“disk”><li> první položka </li>
<li> druhá položka </li></ul>
Type: disc, circle, square• první položka• druhá položka
Číslovaný Seznam
<ol> <li> první položka </li> <li> druhá položka </li></ol>
1. první položka2. druhá položka
Číslovaný Seznam – type
<ol type=“a”> <li> první položka </li> <li> druhá položka </li></ol>
Type : 1, I, i, A, a
Číslovaný Seznam – malá arabská
<ol type=“a”> <li> první položka </li> <li> druhá položka </li></ol>
Type : 1, I, i, A, a
a. první položkab. druhá položka
Číslovaný Seznam - velká arabská
<ol type=“A”> <li> první položka </li> <li> druhá položka </li></ol>
A. první položkaB. druhá položka
Číslovaný Seznam - velká římská
<ol type=“I”> <li> první položka </li> <li> druhá položka </li></ol>
I. první položkaII. druhá položka
Číslovaný Seznam - malá římská
<ol type=“i”> <li> první položka </li> <li> druhá položka </li></ol>
i. první položkaii. druhá položka
Číslovaný Seznam - start
<ol start=5> <li> první položka </li> <li> druhá položka </li></ol>
5. první položka6. druhá položka
Vnoření Seznamů<ol> <li> první položka </li> <li> druhá položka </li> <ul> <li> podpoložka </li> <li> podpoložka </li> </ul></ol>
1. první položka2. druhá položka
• podpoložka• podpoložka
Tabulky
buňka11 buňka12
buňka21 buňka22
Tabulka má řádky a sloupce buněk
tagy: <table> … </table> <tr> … </tr> <td>…</td> <th>…</th>
Tabulky
<table> <tr> <td>První buňka prvního řádku</td> <td>Druhá buňka prvního řádku</td> </tr> <tr> <td>První buňka druhého řádku</td> <td>Druhá buňka druhého řádku</td> </tr>
</table>
Definice řádkuDefinice buňky
Definice tabulky
Table atributy
• cellpaddingvnitřní okraj buněk pixely• cellspacing vnější okraj buněk pixely• border šířka rámečku buněk pixely• width šířka tabulky • height výška• background obrázek na pozadí• bgcolor barva pozadí• bordercolorbarva rámečku
Table atributy: příklady
<table width=300 border=3 cellspacing=5>…</table>
<table width=50% border=0 bgcolor=“blue”>…</table>
TR table row
• Řádek tabulky.• Musí být uvnitř elementu <table> a • smí obsahovat pouze buňky (<td> a <th>).
TD table data• Buňka tabulky. • Musí být umístěna v řádku <tr>• Atributy:
– align: horizontální zarovnání obsahu :• left, center, right, justify
– valign: vertikální zarovnání obsahu:• top, middle, bottom, baseline
– rowspan: spojení buněk v řádku• počet přesahujících řádků
– colspan: spojení buněk ve sloupci• počet přesahujících sloupců
TH table head
• Hlavičková buňka. • Chová se úplně stejně jako <td> pouze s
tím rozdílem, že text je tučný a v buňkách vystředěný.
• Má stejný zápis i atributy jako <td>.
TD,TH příklad
<table border=1><tr><th colspan=2 align=center>tabulka</th><tr><th>mesic</th><th>plat</th><tr><td>leden</td><td align=left>25000</td><tr><td>unor</td><td align=left>26000</td></table> Tabulka
mesic platleden 25000unor 26000
TD,TH příklad
<table border=1><tr><td>ref</td><td><a
href="http://cauky.unas.cz">unas</a></td><tr><td>obr</td><td><img
src="http://cauky.unas.cz/figs/aygo.jpg"></td></table>
ref unas
obr
