1 / 31

Jazyk HTML

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

chase-knox
Download Presentation

Jazyk HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jazyk HTML

  2. 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

  3. Tag HTML • Párový • Označuje začátek a konec dat tvořících webovou stránku <html> ..... dokument HTML </html>

  4. 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>

  5. Tag BODY • Párový • Obsahuje vše, co se objeví uvnitř okna prohlížeče <body> obsah stránky </body>

  6. Komentáře • Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich nedozvíme <!– text komentáře -->

  7. Nadpisy • V HTML jsou definovány nadpisy různých úrovní, může jich být 6 <h1>text nadpisu</h1>

  8. Odstavce • 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>textodstavce</p> • Je možné vynechat koncovou značku.

  9. 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>

  10. Čá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

  11. 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>

  12. Zarovnávání více odstavců současně • <div align=“.....”> Tento text bude zarovnáván podle zadané hodnoty atributu align </div>

  13. 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

  14. Barvy - použití • Barva pozadí a textu dokumentu <body bgcolor=“barva” text=“barva”> • Barva části textu <font color=“barva”></font>

  15. Písmo • Velikost <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>

  16. Formátování textu • Tučné písmo <b>text</b> • Kurzíva <i>text</i> • Podtržené písmo <u>text</u> • Neproporcionální písmo <tt>text</tt>

  17. Formátování textu • Přeškrtnutí <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>

  18. Formátování textu • Horní index <sup>text</sup> • Dolní index <sub>text</sub>

  19. 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

  20. Obrázky • Animované gify • Obrázky na pozadí <body background=“obrazek.jpg”>

  21. 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í

  22. 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

  23. 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á.

  24. 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>

  25. Barvy a odkazy • Odkazy • nenavštívené • navštívené • Aktivní <body link=“red” vlink=“lime” alink=“green”>

  26. Odkazy a obrázky • <a href=„soubor.html" title=„titulek"><img src=“obrazek.jpg”></a>

  27. Seznamy • Nečíslovaný seznam <UL> <LI></LI> <LI></LI> … </UL> • Typ odrážky: disc, square, circle

  28. Seznamy • Číslovaný seznam <OL> <LI></LI> <LI></LI> … </OL> • 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…

  29. Seznamy • Definiční seznamy <DL> <DT>Pojem</DT> <DD>Vysvětlení</DD> … </DL> • Typ odrážky: disc, square, circle

  30. Tabulky <TABLE> <TR> <TD></TD> <TD></TD> … </TR> … </TABLE> Pozn. <TH></TH>… záhlaví tabulky

  31. 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

More Related