[obsah hlavičky]
</head>
[obsah těla]
</body>
je obyčejný textový soubor (tj. obsahuje pouze písmena) - lze jej editovat i např. v Poznámkovém bloku.
K jejímu zobrazení potřebuji speciální program (prohlížeč internetu) - např. Internet Explorer, Mozilla Firefox, Opera, Safari
Pojmenování souboru se stránkou:
WWW stránka je psána v kódu HTML (HyperText Markup Language). Podobá se jednoduchému
zápisu programu.
Stránku (~program) prohlížeč internetu postupně čte a provádí
v ní uvedené příkazy.
Začátek a konec příkazu tvoří "závorky" (tagy):
| <b> | tento text piš tučně | </b> |
| počáteční tag | koncový tag |
Ukázka: index-jednoduchy.
Úkol: vytvoř v
Poznámkovém bloku stránku jménem pojmenuj [tve-prijmeni].htm
Struktura stránky:
| <!DOCTYPE ... "> |
|
|
| <html> | ||
| <head> [obsah hlavičky] </head> |
<<< hlavička (head) | |
| <body> [obsah těla] </body> |
<<< tělo (body) | |
| </html> |
Obsah okna prohlížeče (Internet Explorer, Mozilla…) je "vytvořen" prakticky
jen podle sekce <body>.
Kontrola vzhledu vytvořené stránky (souboru s příponou HTM nebo HTML):
| <br> | zalomení řádku = piš na další řádek (nepárový tag) | |
| <hr> | vložení vodorovné čáry (nepárový tag) | |
| Fyzické - zvýraznění slova | ||
|---|---|---|
| <b> | tučné | |
| <i> | kurzíva | |
| <u> | podtržené | |
| <small> | zmenšení o stupeň | |
| <big> | zvětšení o stupeň | |
| <sub> | dolní index | |
| <sup> | horní index | |
| <strike> | přeškrtnuté | |
| Logické - vyjadřuje úlohu textu | ||
| <strong> | tučné | |
| <em> | kurzíva | |
| Blokové - vyjadřují poslání odstavce | ||
| <p> | odstavec | |
| <h1> až <h6> | nadpisy (h1 je největší) | |
| <center> | centrování = zarovnej na střed | |
| <pre> | předformátovaný text - všechny znaky jsou stejně široké | |
POZN: již navštívený odkaz změní barvu (abych věděl, že jsem jej již navštívil)
Obrázek zobrazený ve www stránce je samostatný soubor uložený na disku.
<img src=[jméno souboru] width=[šířka] height=[výška] border= [tloušťka ohraničení odkazu]>
<img src=[jméno souboru] width=[šířka] height=[výška] border= [tloušťka ohraničení odkazu]>
Používá se nejen ke tvorbě tabulek ve stránce, ale často ke vzájemnému
rozmístění prvků stránky (obrázků a textu). !!Obrázek jinak nelze přesně umístit
ve stránce, jak jsme byli zvyklí z text. editoru.!!
Prohlížeč "staví" tabulku po řádcích.
| <table> </table> | začátek a konec tabulky | |
| <tr> </tr> | začátek a konec řádku v tabulce | |
| <td> </td> | začátek a konec buňky | |
| <th> </th> | (buňka záhlaví - nadpis sloupce) |
Důležité vlastnosti tabulky:
Důležité vlastnosti buňky:
WYSYWYG (What Y See Ys What Y Get) editor = program, který při editaci www
stránky zobrazuje (téměř) to, jak stránka vypadá.
např. NVU (zdarma), Front Page…
Dokument MS Wordu, OpenOffice Writeru lze uložit jako www stránku (html) - diskutabilní kvality :-)
Ke všem objektům, které na svoji stránku zkopíruji z internetu, musím
minimálně udat dobu a zdroj stažení.
Za použití některých prvků (grafiky, spec. textů) autoři požadují poplatek.
Odkaz někam do Internetu: Seznam <A HREF="http://www.seznam.cz/">Seznam</a>
Odkaz na místo v dokumentu <A HREF="#misto">Místo</a> (řádek mezi)
Zde je místo v dokumentu, na něž vede odkaz <A NAME="misto">Sem</a>