Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány HTML značkami anglicky tagy, tyto se ohraničují lomenými závorkami, např. <H1>, mohou být párové nebo nepárové. Párové značky ohraničují definici např. nadpisu, odstavce, tabulky, nepárové značky vkládají do dokumentu nějaký objekt (obrázek). Struktura HTML stránky: <!DOCTYPE HTML PUBLIC //W3C//DTD HTML 3.2//EN > verze použitého jazyka (nepovinné ale doporučuje se) <HTML> počátek textu ve formátu HTML <HEAD> počátek hlavičky stránky, hlavičku prohlížeč nezobrazuje, zapisují se zde ale důležité informace o obsahu stránky <TITLE>Jméno stránky</title> <META NAME= popis CONTENT= co stránka obsahuje > jedna z možností použití značky META (jsou zde uvedene informace pro vyhledávání) </HEAD> <BODY>... vlastní tělo stránky... konec hlavičky stránky počátek těla stránky </BODY> </HTML> konec těla stránky konec formátu HTML Výklad základních tagů Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou </HTML> Tag HEAD <HEAD> Párová značka. Určuje hlavičku dokumentu, kterou prohlížeč nezobrazuje. Končí značkou
</HEAD> <TITLE> Uvádí titulek webové stránky, který se zobrazí v titulkové liště prohlížeče. Většina prohlížečů nabízí titulek jako výchozí jméno při ukládání stránky do seznamu oblíbených oložek. </TITLE> <BASE> Parametr HREF určuje kořenový adresář stránek a usnadní směrování odkazů v rámci adresáře. <BASE HREF= http://www.firma.cz/stranky/index.html > Tag BODY <BODY> Párový tag určuje aktuální obsah stránky, který se zobrazí v prohlížeči, dále se v tomto tagu definují základní vlastnosti stránky </BODY> Vlastnosti stránky: Parametry: BACKGROUND= pozadi.gif BGPROPERTIES= fixed BGCOLOR TEXT LINK VLINK ALINK LEFTMARGIN TOPMARGIN : obrázek na pozadí stránky ukotvení obrázku na pozadí (neplatí u prohlížečů Netscape) barva pozadí stránky barva textu (výchozí je černá) barva ještě nenavštíveného odkazu barva již navštíveného odkazu barva aktuálního odkazu při klepnutí myší udává kolik pixelů od levého okraje okna začíná zobrazení stránky udává kolik pixelů od horního okraje okna začíná zobrazení stránky Při zadávání barev používejte bezpečné barvy Internetu, které vzniknou kombinací hexadecimálních hodnot tří barev RGB (ty jsou schopny zobrazit i 256barevné grafické karty): 00, 33, 66, 99, cc, ff. Před ně je předsazen znak #. Lze použít také názvy barev white, red, blue apod. Příklad: <BODY BACKGROUND= /ie/obrazky/vodoznak.gif BGPROPERTIES= fixed BGCOLOR= #FFFFFF TEXT= #000000 LINK= #ff6600 VLINK= #330099 >
Odkazy Odkazy se používají pro přechod na jinou stránku, soubor, obrázek či jakýkoliv objekt. Po zvolení odkazu se přesunete na další stránku, na jiné místo webu atd. Hypertextový odkaz je definován párovou značkou <A>. Jakýkoliv objekt uzavřený uvnitř této značky (text, obrázek) bude aktivní tj. po klepnutí na něj se provede skok na adresu, která je v odkazu definovaná. HREF= adresa udává odkaz, ten je buď absolutně včetně adresy, nebo relativně pouze název stránky (obrázku apod). Příklad odkazu: <A HREF= http://www.feec.vutbr.cz >Domovská stránka FEKT VUT v Brně</A> Hierarchii dělají nadpisy Na webové stránce můžeme použít celkem šest úrovní nadpisů, které prohlížeče identifikují, označují se pomocí párových značek: <H1>, <H2>, <H3>, <H4>,<H5>, <H6>. Způsoby zarovnání: ALIGN= left zarovná nadpis vlevo ALIGN= right zarovná nadpis vpravo ALIGN= center zarovná nadpis na střed ALIGN= justify zarovná nadpis do bloku (na oba okraje) Příklad zápisu: <H1 ALIGN= left >První řádek zarovnaný vlevo, úroveň H1<BR></H1> <H2 ALIGN= center >Vystředěný řádek, úrovň H2</H2> <H3>ALIGN= right >Řádek zarovnaný vpravo, úroveň H3</H3> Text a formátování Text je základem webové stránky. Pro jeho formátování se používají tyto nejdůležitější párové značky : <P> <I> <B> <U> <BR> <SUB> <SUP> <DIV> <FONT> Nový odstavec Text se zvýrazní zásadně kurzívou Text se zobrazí tučným řezem písma Definuje zobrazení podtrženého textu Nový řádek, nepárová značka Ohraničuje text psaný jako dolní index Ohraničuje text psaný jako horní index Označení související části dokumentu Definice písma
Seznamy a výčty: <UL></UL> <OL></OL> <LI> Nečíslovaný výčet TYPE typ odrážky square (čtverec), disc (prázdné kolečko), circle (plné kolečko) Číslovaný seznam TYPE typ číslování seznamu A číslování velkými písmeny a číslování malými písmeny I číslování římskými číslicemi i číslování malými římskými číslicemi 1 číslovaní pomocí latinských čísel (standardní nastavení) START od kterého čísla začíná číslování Položka seznamu Tabulky Čitelnost a strukturu webové stránky zlepšují tabulky, pomáhají nám při formátování stránky. Vkládáme do nich jak text tak obrázky. <TABLE> <TD> <TH> Začátek definice tabulky Vytváří nový řádek tabulky Vytváří samostatnou buňku na řádku, počet buněk na řádku je roven počtu loupců tabulky Definuje hlavičku tabulky Ukázka HTML zápisu tabulky: <TABLE> </TABLE> <TD>Buňka A1</TD> <TD>Buňka B1</TD> <TD>Buňka A2</TD> <TD>Buňka B2</TD> <TD>Buňka A3</TD> <TD>Buňka B3</TD> Buňka A1 Buňka B1 Buňka A2 Buňka B2 Buňka A3 Buňka B3
Základní parametry tabulky: ALIGN BACKGROUND BGCOLOR BORDER CELLPADDING CELLSPACING WIDTH VALIGN HEIGHT COLSPAN ROWSPAN Zarovnání v tabulkách a buňkách left, right, center Určuje obrázek umístěný jako pozadí tabulky Určuje barvu pozadí celé tabulky Umožní vykreslit okraje kolem všech buněk tabulky, šířka je v pixelech Určuje odstup mezi okrajem políčka tabulky a jeho obsahem, opět údaj v pixelech Určuje odstup v pixelech mezi jednotlivými buňkami tabulky Umožňuje definovat šířku tabulky, buněk v pixelech nebo procentech šíře pracovního okna prohlížeče Určuje svislé zarovnání textu v buňkách celé řádky, parametry: top, middle, bottom, baseline Určuje výšku buňky, tj. celého řádku v pixelech nebo procentech výšky celého řádku Slouží ke spojení více buněk ležících v jednom řádku vedle sebe do skupiny Slouží ke spojení více buněk ležících ve více řádcích Ukázka HTML zápisu tabulky <TABLE border=5 width="241" height="171" bordercolor="#0000ff"> <TR align="center"> <TD bgcolor="#ff0000" bordercolor="#0000ff">buňka A1</TD> <TD bordercolor="#ff00ff">buňka B1</TD> <TD>Buňka A2</TD> <TD bordercolor="#ff00ff">buňka B2</TD> <TR valign="middle" align="right"> <TD>Buňka A3</TD> <TD bordercolor="#ff00ff" bgcolor="#ff00ff">buňka B3</TD> </TABLE>
Obrázky, koření stránek Vaše webové stránky budou vypadat mnohem lépe, pokud na nich použijete obrázky. Je však zapotřebí myslet na to, že obrázky představují oproti textu mnohem větší datový tok. Majitelé vytáčeného připojení tedy nebudou příliš nadšeni, pokud budou muset na načtení Vaší stránky čekat i několik minut. Obrázky tedy používejte uvážlivě, snažte se je využít účelně a pokuste se je co nejvíce zoptimalizovat. Syntaxe: <IMG SRC="jmeno_obrazku"> Základní parametry: ALT Text, který se zobrazí, pokud na obrázek najedete myší. Pokud prohlížeč nemůže obrázek zobrazit, například z důvodu neexistence obrázku, vypíše místo něj rovněž text uvedený v ALT, tedy alternativu. Příklad: <IMG SRC= obr/obrazek.jpg ALT= Logo naší firmy > WIDTH, HEIGHT Šířka a výška obrázku, zadává se v pixelech Příklad: <IMG SRC= obr/obrazek.gif ALT= Logo naší firmy WIDTH= 100 HEIGHT= 150 > BORDER Zobrazí kolem obrázku rámeček zadané šířky(v pixelech) ALIGN - zarovnávání obrázku. left - obrázek zarovná na levým okraj textu, text obtéká obrázek zprava right - obrázek zarovná s pravým okrajem textu, text obtéká obrázek zleva top zarovná horní okraj obrázku s nejvyšším prvkem v daném řádku bottom zarovná spodní okraj obrázku se základnou textového řádku middle zarovná základnu textového řádku s prostředkem obrázku baseline spodek obrázku se kryje se základnou aktuálního řádku Názvy barev aqua jasná tmavozelená purple purpurová black černá red červená blue modrá silver stříbrná green zelená teal tmavá modrozelená lime citrónově zelená white bílá maroon kaštanová yellow žlutá navy tmavá modř olive olivová
Vybrané entity (speciální znaky) < < > > & & ± ± " " ² ² nedělitelná mezera ³ ³ rozdělitelný spojovník µ µ obecná měna ¹ ¹ º º»» ¼ ¼ ½ ½ ª ª ¾ ¾ ««