doczákladní příkazy HTML
download 
Stížnost Transkript
základní příkazy HTML
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> – konec hlavičky stránky <BODY> – počátek těla stránky ... vlastní tělo 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 Význam: 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 : Značka <P> <I> <B> <U> <BR> <SUB> <SUP> <DIV> <FONT> Význam 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: Značka <UL></UL> Význam Nečíslovaný výčet TYPE – typ odrážky square (čtverec), disc (prázdné kolečko), circle (plné kolečko) <OL></OL> Čí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í <LI> 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. Značka <TABLE> <TR> <TD> Význam 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 <TH> Ukázka HTML zápisu tabulky: <TABLE> <TR> <TD>Buňka A1</TD> <TD>Buňka B1</TD> </TR> <TR> Buňka A1 Buňka B1 <TD>Buňka A2</TD> <TD>Buňka B2</TD> Buňka A3 Buňka B3 </TR> <TR> <TD>Buňka A3</TD> <TD>Buňka B3</TD> </TR> </TABLE> Buňka A2 Buňka B2 Základní parametry tabulky: Značka ALIGN BACKGROUND BGCOLOR BORDER CELLPADDING CELLSPACING WIDTH VALIGN HEIGHT COLSPAN ROWSPAN Význam 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> </TR> <TR> <TD>Buňka A2</TD> <TD bordercolor="#FF00FF">Buňka B2</TD> </TR> <TR valign="middle" align="right"> <TD>Buňka A3</TD> <TD bordercolor="#FF00FF" bgcolor="#FF00FF">Buňka B3</TD> </TR> </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 black blue green lime maroon navy jasná tmavozelená černá modrá zelená citrónově zelená kaštanová tmavá modř purple red silver teal white yellow olive purpurová červená stříbrná tmavá modrozelená bílá žlutá olivová Vybrané entity (speciální znaky) < > & " ­ © ¡ ¢ £ ¤ ¥ ¦ § ¨ ª « ¬ ® < > & " nedělitelná mezera rozdělitelný spojovník © ¡ ¢ £ obecná měna ¥ ¦ § ¨ ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ ¸ · ¹ º » ¼ ½ ¾ ¿ × ÷ ¯ ° ± ² ³ ´ µ ¶ ¸ · ¹ º » ¼ ½ ¾ ¿ × ÷
