Jazyk HTML
Základní části stránky <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ..... označení typu dokumentu a verze HTML <html>..... začátek textu ve formátu HTML <head>..... začátek hlavičky <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>titulek</title>..... popis zobrazovaný v titulku okna </head>..... konec hlavičky <body>..... začátek zobrazovaného obsahu stránky obsah stránky </body>..... konec zobrazovaného obsahu stránky </html>..... konec textu ve formátu HTML
Tag HTML Párový Označuje začátek a konec dat tvořících webovou stránku ..... dokument HTML </html>
Tag HEAD Párový Vymezuje hlavičku webové stránky, která obsahuje informace o obsahu stránky Údaje se nezobrazují Výjimka – tag TITLE <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250">..... meta informace <meta name="generator" content="PSPad editor, www.pspad.com">..... meta informace <title>titulek</title> >..... popis zobrazovaný v titulku okna </head>
Tag BODY Párový Obsahuje vše, co se objeví uvnitř okna prohlížeče obsah stránky </body>
<!– text komentáře --> Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich nedozvíme <!– text komentáře -->
<h1>text nadpisu</h1> Nadpisy V HTML jsou definovány nadpisy různých úrovní, může jich být 6 <h1>text nadpisu</h1>
<p>text odstavce</p> Párový Prohlížeče ignorují všechny mezery a znaky konce odstavce, které jsou ve zdrojovém kódu stránky, proto je nutné přesně označit, kde mají odstavce být <p>text odstavce</p> Je možné vynechat koncovou značku.
Odřádkování Nepárový Text v odstavci se automaticky zalamuje podle velikosti okna. Když je třeba, aby text začínal na novém řádku, použijeme <br> Neoddělitelná mezera <nobr>text</nobr>
Čára Nepárový <hr> Atributy: size=“x” .....tloušťka čáry, v pixelech width=“x” .....délka čáry, v pixelech nebo v % šířky okna noshade ..... čára bez stínu
Zarovnávání dokumentu Atribut ALIGN 3 způsoby Vlevo ....... left Na střed ... center Vpravo ..... Right Např. <h1 align=“center”>Úkoly na doma</h1>
Zarovnávání více odstavců současně <div align=“.....”> Tento text bude zarovnáván podle zadané hodnoty atributu align </div>
Barvy V HTML je definováno 16 základních barev, které se označují odpovídajícími anglickými výrazy, např. blue, red atd Tabulka barev např. na http://www.jakpsatweb.cz/archiv/barvyzakladni.html RGB model
Barvy - použití Barva pozadí a textu dokumentu <body bgcolor=“barva” text=“barva”> Barva části textu <font color=“barva”></font>
Písmo Velikost Typ písma <font size=“velikost”>text</font> <basefont size=“velikost”> Nejčastěji 3 nebo 4 Absolutní, relativní velikost Typ písma <font face=“písmo”>text</font>
Formátování textu Tučné písmo Kurzíva Podtržené písmo <b>text</b> Kurzíva <i>text</i> Podtržené písmo <u>text</u> Neproporcionální písmo <tt>text</tt>
Formátování textu Přeškrtnutí Tučné písmo <strike>text</strike> Tučné písmo <b>text</b> Zvětšení a zmenšení písma o 1 bod <big>text</big> <small>text</small>
Formátování textu Horní index Dolní index <sup>text</sup> <sub>text</sub>
Obrázky HTML podporuje grafické formáty GIF a JPEG Tag <IMG SRC=“obrazek.jpg”> URL obrázku lze zadat relativně, nebo absolutně Další atributy tagu IMG – ALIGN, ALT, TITLE, BORDER,HEIGHT, WIDTH, HSPACE, VSPACE
Obrázky Animované gify Obrázky na pozadí <body background=“obrazek.jpg”>
Zásady správného používání obrázků Nikdy nepoužívat tam, kde to není bezpodmínečně nutné Vždy zadat atribut ALT Vždy použít atrobuty WIDTH, HEIGHT Animované obrázky používat v rozumném množství
Odkazy HTML dokumnety je možno provázat pomocí hypetextových odkazů Je třeba znát jednoznačnou adresu, tj. URL (Uniform Resource Locator) např. www.server.cz/soubor.html URL lze zadávat absolutně Relativně viz. http://www.jakpsatweb.cz/odkazy-html.html
Vložení odkazů do dokumentu <a href=„soubor.html" title=„titulek">text odkazu</a> E-mailová adresa jako odkaz <a href=„mailto:sla@gop.pilsedu.cz"> text odkazu</a> Jiné formáty soubor: prohlížeč má určený program, jimž se soubor otevírá.
Záložky Lze odkazovat na jednotlivé části dokumentu Definice záložky: <a name=“kap1”>Kapitola 1</a> Odkaz na záložku <a href=„#kap1">Kapitola 1 </a> Pozn. Je možné odkazovat i na záložky umístěné v jiném dokumentu, např. <a href=“soubor.html#kap1">text odkazu</a>
Barvy a odkazy Odkazy nenavštívené navštívené Aktivní <body link=“red” vlink=“lime” alink=“green”>
Odkazy a obrázky <a href=„soubor.html" title=„titulek"> <img src=“obrazek.jpg”> </a>
Seznamy Nečíslovaný seznam <UL> <LI></LI> … Typ odrážky: disc, square, circle
Seznamy Číslovaný seznam <OL> <LI></LI> … Typ číslování: arabskými číslicemi, římská čísla s použitím malých nebo velkých písmen, malaá nebo velká písmena a, b, c…
Seznamy Definiční seznamy <DL> <DT>Pojem</DT> <DD>Vysvětlení</DD> … </DL> Typ odrážky: disc, square, circle
Tabulky <TABLE> <TR> <TD></TD> … </TR> Pozn. <TH></TH>… záhlaví tabulky
Tabulky - atributy Rámeček tabulky BORDER Zarovnávání buněk, řádků ALIGN Slučování buněk COLSPAN, ROWSPAN Svislé zarovnávání buněk VALIGN Velikost buněk WIDTH Popisek tabulky <CAPTION>Popisek</CAPTION> Odsazení textu v buňkách CELLPADDING Vzdálenost mezi buňkami CELLSPACING