<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

Rozměr: px

Začít zobrazení ze stránky:

Download "<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura"

Peter Pospíšil
před 5 lety
Počet zobrazení:

1 mv

2 Všechny html tagy jsou uzavřeny do závorek <>. Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (<body>, </body>) HTML tagy by měly udávat pouze logické členění dokumentu. Barvy, umístění elementů, by se měly udávat pouze pomocí CSS (kaskádové styly). Před započetím práce si vytvoříme základní strukturu složek (bez háčků, čárek a mezer!). HTML obrazky pomocne Hlavní stránka (rozcestník) je vždy označen názvem index.html (každý hned ví, co spustit). Vše, co použijeme na stránky uložíme nejprve do složky HTML pod názvy bez háčků, čárek a mezer!

3 <html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura dokumentu <html> <head> <title></title> </head> <body> </body> </html> <title> - párový, titulek dokumentu (na každé stránce by měl být jiný)

<b> <strong> <i> <u> <sub> <sup> <strike> <big> <small> <span> <div> <cite> - párový, z anglického bold, tučný - párový, stejný jako <b> - párový, kurzíva (italic) - párový, podtržený (underline) -

4 <b> <strong> <i> <u> <sub> <sup> <strike> <big> <small> <span> <div> <cite> - párový, z anglického bold, tučný - párový, stejný jako <b> - párový, kurzíva (italic) - párový, podtržený (underline) - párový, dolní index - párový, horní index - párový, přeškrtnuté písmo - párový, zvětšení písma o jeden stupeň - párový, zmenšení písma o jeden stupeň - párový, oblast bude jinak formátována, nezalamuje řádky - párový, oblast bude jinak formátována, zalamuje řádky - párový, citace

5 Bloky jsou též všechny párové tagy. Mezi tyto tagy uzavíráme různé oddíly textu. <p> - odstavec <div> - blok, jeho formátování budeme zadávat pomocí CSS <center> - vycentrování <hx> - nadpisy různých úrovní, kde x může být číslo 1, až 6. <blockquote> - citace, odsazení <address> - adresa <pre> - přeformátovaný text, prohlížeč jej zobrazí přesně tak, jak je napsáno ve zdrojovém kódu Nepárové <br /> <hr /> - řádkový zlom (odřádkování) - vodorovná čára

6 Odkazy (linky) slouží k propojování jednotlivých dokumentů na síti. Tag pro odkazy je opět párový.celý zápis odkazu vypadá následovně: <a href= URL title= jméno odkazu >odkaz</a> href = URL jméno souboru (serveru), na který se odkazujeme. URL můžeme rozdělit na absolutní a relativní. Absolutní adresa včetně (protokolu), jména serveru, cesty a souboru Př. Relativní adresa pouze cesta a jméno souboru. Př. priroda/more/priliv.html Doporučení: Relativní adresaci používáme při linkování v rámci jednoho serveru naší prezentace. Zdrojové soubory ukládáme do předem připravených složek. Pro odkazování na jiný server musíme samozřejmě použít u odkazů absolutní URL. Př: <a href= Historie/divadlo.htm title= O divadle > Historie divadla </a> <a href= > Odkaz na seznam </a>

7 Tagy seznamů jsou opět všechny párové. <ol> - číslovaný seznam <ul> - nečíslovaný seznam <li> - jednotlivé položky seznamu <dl> - definiční seznam <dt> - definovaný termín <dd> - definice termínu Př.: <ul type A> <li>html</li> <li>css</li> <li>java script</li> </ul>

8 Tag obrázku je nepárový; vychází z anglického názvu image, tj. <img /> Atributy img : Atribut Význam Hodnoty src umístění souboru s obrázkem URL alt alternativní popis libovolný text width šířka délka, nebo procento height výška délka, nebo procento border rámeček délka vspace vertikální okraj délka hspace horizontální okraj délka align zarovnání left, right, top, texttop,middle, absmiddle, baseline, bottom, absbottom Pozn. Jako odkaz lze použít i obrázek. Pokud nechceme, aby se polem obrázku objevil rámeček, použijeme parametr border s hodnotou 0. Př. <img src= obra zky/more.jpg alt= Moře border= 0 align =center /> Nikdy nepoužívejte parametry width a height ke zmenšení obrázku!!!

Tabulky jsou v HTML podporovány. Mnoho lidí je používá i k formátování stránky. Někteří to naopak považují za hrubou chybu. Vše lze upravit pomocí CSS. Všechny tagy pro tabulky jsou párové.

9 Tabulky jsou v HTML podporovány. Mnoho lidí je používá i k formátování stránky. Někteří to naopak považují za hrubou chybu. Vše lze upravit pomocí CSS. Všechny tagy pro tabulky jsou párové. <table> - tag tabulky <tr> - řádek <th> - hlavičková buňka <td> - buňka <caption> - hlavička tabulky Atribut Význam Hodnoty align zarovnání textu vertikální left, right, center valign zarovnání textu horizontální middle, top, bottom cellpadding vnitřní okraj buněk pixely cellspacing vnější okraj buněk pixely border šířka rámečku buněk pixely bordercolor barva rámečku barva (black, blue, gray, green, lime, navy, olive, purple, red, yellow, white) width minimální šířka tabulky délka, procento height minimální výška délka, procento bgcolor barva pozadí tabulky barva cols počet sloupců tabulky Číslo frame vykreslení rámečku okolo void, border, box, hsides, vsides, above, below, lhs, rhs, rules

10 Atribut buňky Význam Hodnoty align zarovnání textu vertikální left, right, center valign zarovnání textu horizontální middle, top, bottom colspan počet spojených buněk vedle sebe číslo rowspan počet spojených buněk nad sebou číslo Př: <table border= 1" width="100%"> <tr> <th width="25%">první </td> <th>druhý</td> <th colspan= 2 >třetí</td> </tr> <tr> <td align= right >škoda</td> <td align= center >mercedes</td> <td align= left >ferrari</td> <td>audi</td> </tr> <tr> <td >ČR</td> <td>srn</td> <td>it</td> <td>srn</td> </tr> </table> tabulka přes celou šířku stránky ohraničená tenkou čarou první řádek - hlavička první sloupec - buňka o šířce 25% tabulky druhý sloupec propojené dvě buňky vedle sebe druhý řádek text první buňky zarovnán vpravo text druhé buňky zarovnán na střed text třetí buňky zarovnán vlevo třetí řádek konec tabulky

11 <marquee align=... zarovnání textu, použít spolu s width width=... šířka obdélníku height=... výška obdélníku bgcolor= barva barva pozadí řádku behavior= alternate text se odrazí a roluje zpět = sroll text vyjede z obdélníku pryč = slide text se zastaví na 2. okraji direction= left ke kterému okraji text roluje (right, up, down) srollamount= číslo počet pixlů mezi posuny, nastaveno 6 srolldelay= číslo počet ms mezi posuny hspace= číslo vspace= číslo loop= číslo > počet opakování efektu </marquee>

12 <hr size= číslo tloušťka linky v pixlech width= číslo délka linky v % nebo v pixlech color= barva barva linky align= left vodorovné zarovnání linky (right, center) noshade /> vypnutí stínu pod linkou

Přehrávání videa (jen MSIE) přímo ve stránce docílíme upravením tagu <img src= URL /> na <img dynsrc= URL /> Jako další atributy se používá loop=číslo, pro počet přehrání (infinite, pro nekonečné

13 Přehrávání videa (jen MSIE) přímo ve stránce docílíme upravením tagu <img src= URL /> na <img dynsrc= URL /> Jako další atributy se používá loop=číslo, pro počet přehrání (infinite, pro nekonečné přehrávání), start a src pro obrázek. Jako video se používají soubory s příponou avi. Zvuk v pozadí (jen MSIE) použijeme tag <bgsound src= URL loop= číslo /> Používají se soubory s příponou mid a wav. Nezapomeňte však na fakt, že prodlužujete načítání stránky. Češtinu nastavíme v hlavičce dokumentu <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language content="cs" /> Automatické přesměrování provedeme tagem umístěným v hlavičce <meta HTTP-EQUIV="Refresh CONTENT="1; URL=adresa " />

Podobné dokumenty

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu