HTML dokument
Seznam a použití HTML tagů
To co by mělo vždy být v dokumentu HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"/>
| <HTML> |
<!-- začátek html dokumentu --> |
<HEAD> |
<!-- začátek hlavičky --> |
<TITLE>
|
<!-- titulek, který bude napsán v hlavičce dokumentu - v té modré liště --> |
</TITLE>
|
<!-- konec titulku --> |
<META NAME=" " CONTENT=" ">
|
<!-- to jsou pomocné informace k identifikaci dokumentu "NAME" bývá:"Generator", "Author", "Keywords", "Description"... "CONTENT" obsahuje Hodnotu toho NAME --> |
</HEAD> |
<!-- konec hlavičky --> |
<BODY> |
<!-- Tělo dokumentu = vše, co bude ta stránka obsahovat; začáteční tag --> |
</BODY> |
<!-- koncový tag --> |
| </HTML> |
<!-- konec html dokumentu --> |
<!-- Takhle se píše poznámka = vše to, co překladač bude ignorovat, přecházet bez zobrazení, prostě ho to nezajímá -->
Tady je seznam základních tagů s jejich atribity:
Nezapomínat, některé tagy jsou párové a některé ne, některé nemusí, ale můžou! Počáteční tag je klíčové slovo v hranatých závorkách a koncový tag je stejný, ale má před daným slovem lomítko (např.: <b> a </b>). Aby vás to nepřekvapilo, některé nemusejí na všech prohlížečích fungovat (kde je prohlížeč neumí použít, ignoruje je).
<HTML> je párový tag, který ohraničuje celý dokument a podle toho prohlížeč pozná začátek a konec. Skládá se ze dvou částí, hlavička a tělo dokumentu.
<HEAD> také párový tag, ve kterém bývá zahrnut hlavě titulek.
<TITLE> je také párový tag. Titulkem se rozumí text, který bude v okně prohlížeče napsán nahoře v modrém pruhu. Měl by co nejvíce vystihovat obsah stránky, protože právě on bude případně uložen v seznamu. Není povinný, ale je velice vhodný.
<BODY> jak jinak než párový tag označující samotné tělo dokumentu. Počáteční tag se píše zpravidla hned za konečný tag hlavičky a koncový tag se píše až na konec, těsně před koncový tag <HTML>
atributy pro tag <BODY> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- BACKGROUND="adresa obrázku" - definuje adresu obrázku, který má být použit na pozadí stránky, bude vložen tolikrát, aby zaplnil celou stránku.
- BGCOLOR="barva" - definuje barvu pozadí (pokud není nastaven obrázek, nebo pokud se nezobrazí). Barvu můžete zadat buď číselně (#000FF - hexadecimální číslo) nebo anglickým slovem (blue, red,...).
- TEXT="barva" - definuje barvu textu, která bude použita pro celou stránku. Opět použití barvy viz. barva pozadí.
- LINK="barva" - definuje barvu hypertextového odkazu. Pokud ho nepoužijete, bude modrá.
- VLINK="barva" - definuje barvu navštíveného hypertextového odkazu.
- ALINK="barva" - definuje barvu aktivního hypertextového odkazu, na který jste právě klikli myší.
<BR> tento tag je nepárový a zalomí řádek tam, kde ho umístíme obdobně jako klávesa <ENTER>, která ve zdrojovém kódu html tohoto nedocílí.
<P> tento tag může být párový i nepárový. Má podobnou funkci jako předchozí, ale s tím rozdílem, že tento se používá jako odstavcový, protože ještě vynechá řádek před dalším odstavcem.
atribut pro tag <P> (zapisuje se do tagu za klíčové slovo oddělen mezerou)
- ALIGN="kam" - nastavuje způsob zarovnání; možná zarovnání jsou: right, left, center
<CENTER> párový tag, centrující odstavec mezi tagy.
<FONT> párový teg pro změnu velikosti, barvy a typu písma.
atributy pro tag <FONT> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- SIZE=velikost - mění velikost písma.
- COLOR="barva" - definuje barvu textu. Barvu můžete zadat buď číselně (#000FF - hexadecimální číslo) nebo anglickým slovem (blue, red,...).
- FACE="font" - definuje font písma.
párové tagy pro formátování písma:
<B> tučné, ukázka
<I> kurzíva, ukázka
<U> podtržené, ukázka
<S> přeškrtnuté, ukázka
<TT> s pevnou šířkou, ukázka
<BIG> velké, ukázka
<SMALL> malé, ukázka
<SUB> dolní index, ukázka
<SUP> horní index, ukázka
<BLINK> blikající text,
párové tagy pro formátování nadpisů:
<H1> až <H6> Různé úrovně nadpisů 1(největší),..., 6(nejmenší).
<HR> odělovací čára (nepárový tag).
atributy pro tag <HR> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- SIZE=velikost - mění tloušťku čáry.
- NOSHADE - zabezpečí, že čára nebude stínovaná.
- ALIGN="kam" - nastavuje způsob zarovnání; možná zarovnání jsou: right, left, center
- WIDTH=velikost - umožňuje měnit velikost čáry (délku). Hodnoty se udávají buď v bodech, nebo v % (v tomto případě musíme uvést i "procentítko").
párové tagy pro tvorbu seznamů:
<UL> vytvoří seznam s odrážkami.
atribut pro tag <UL> (zapisuje se do tagu za klíčové slovo oddělen mezerou)
- TYPE=co - nsatavuje typ odrážek: disc = puntík, circle = závorky, square = čtverečky.
<OL> vytvoří číslovaný seznam.
atributy pro tag <OL> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- TYPE=co - nsatavuje typ číslování: a = malými písmeny, A = velkými písmeny, i = malými římskými číslicemi, I = velkými římskými číslicemi, 1 = arabskými čslicemi.
- START="počáteční hodnota" - od jaké počáteční hodnoty se má seznam číslovat.
- CONTINUE - pokračuje v předchozím číslování seznamu.
- ALIGN="kam" - nastavuje způsob zarovnání; možná zarovnání jsou: right, left, center, justify
<LI> mezi tyto tagy se píšou jednotlivé položky seznamu.
<A> párový tag pro vložení hypetextového odkazu. Odkezem je vše, co je vloženo mezi tagy (když tam vložíte obrázek, bude odkazem obrázek).
atributy pro tag <A> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- HREF="adresa" - adresa odkazu. Může být:
- absolutní - př. http://www.sweb.cz/eliska.kymlickova/skola/index.html (ať stojíme kde stojíme, vždy se tam dotaneme)
- relativní - př. index.html (dostaneme se do souboru v adresáři, kde stojíme)
- v dokumentu - př. #název (dostaneme se tam, kde jsme nastavili odkaz s atributem NAME)
- NAME="název" - definuje název místa v dokumentu, kam se pak budeme chtít odkazovat.
<IMG> samostatný tag pro vložení obrázku.
atributy pro tag <IMG> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- SCR="adresa" - adresa obrázku. Může být:
- absolutní - př. http://www.sweb.cz/eliska.kymlickova/skola/index.jpg (ať stojíme kde stojíme, vždy se tam dotaneme)
- relativní - př. index.jpg (dostaneme se do souboru v adresáři, kde stojíme)
- ALT="text" - napíše daný text do místa v dokumentu, kam má přijít obrázek (když je zakázáno zobrazování nebo je příliž pomalé).
- ALIGN="kam" - nastavuje způsob zarovnání; možná zarovnání jsou: bottom, top, middle, right, left
- WIDTH=šířka - nastavuje šířku obrázku.
- HEIGHT=výška - nastavuje výšku obrázku.
- VSPACE=hodnota - nastavuje vzdálenost mezi obrázkem a otékajícím textem
- HSPACE=hodnota - nastavuje vzdálenost mezi obrázkem a otékajícím textem
- BORDER=hodnota - nastavuje šířku rámečku okolo obrázku (standardně je obrázek bez rámečku).
Tvorba tabulek
<TABLE> párový tag pro označení a ukončení tabulky. Tabulka je definována jako sloupce v řádcích. (Po řádcích = řádek a v něm všechny jeho sloupce, pak daší řádek,...)
atributy pro tag <TABLE> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- BORDER=hodnota - nastavuje tloušťku rámečku v tabulce.
- WIDTH=hodnota - nastavuje šířku tabulky. Hodnoty se udávají buď v bodech, nebo v % (v tomto případě musíme uvést i "procentítko").
- BGCOLOR="barva" - definuje barvu pozadí tabulky. Barvu můžete zadat buď číselně (#000FF - hexadecimální číslo) nebo anglickým slovem (blue, red,...).
- CELLSPACING=hodnota - nastavuje vzdálenost mezi jednotlivými buňkami v tabulce.
- CELLSPADDING=hodnota - nastavuje vzdálenost textu od okraje buňky.
<TR> párový tag pro označení řádku tabulky. Používá se jako první.
<TD> párový tag pro označení sloupce tabulky
<TH> párový tag pro zvýraznění hlavičky v tabulce (Použití jako <TD>)
atributy pro tagy <TR>, <TD>, <TH> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- ALIGN=kam - nastavuje způsob vodorovného zarovnání v jedné konkrétní buňce; možná zarovnání jsou: right, left, center, justify, char.
- VALIGN=kam - nastavuje způsob svislého zarovnání v jedné konkrétní buňce; možná zarovnání jsou: top, middle, bottom, baseline.
atributy pro tagy <TD>, <TH> (zapisují se do tagu za klíčové slovo odděleny mezerou)
- ROWSPAN=hodnota - sloučí více buněk (v řádku) do jedné buňky a zabere jejich místo.
- COLSPAN=hodnota - sloučí více buněk (ve sloupci) do jedné buňky a zabere jejich místo.
• • • • • • • • • • • • • • • • • • • • • • • •
veškeré dotazy na