1 / 36

Jazyk HTML

Jazyk HTML. Zdrojový kód. Elementy <n ázev parametry >obsah</n ázev > př. <b> důležité </b> <n ázev parametry /> př. <img src=“xx.jpg” width=“300” />. Parametry př. < td colspan= “3”>Leden</td> Hodnoty př. <img src=“xx.jpg” width=“300” /> <body bgcolor=“red”></body>

adem
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. Zdrojový kód • Elementy <název parametry>obsah</název> př. <b>důležité</b> <název parametry /> př. <img src=“xx.jpg” width=“300” />

  3. Parametry př. <td colspan=“3”>Leden</td> • Hodnoty př. <img src=“xx.jpg” width=“300” /> <body bgcolor=“red”></body> <a href=“http://www.seznam.cz”> </a>

  4. Rodiče a potomci • Př. <p>...<b>...</b>...</p> SPRÁVNĚ <p>...<b>...</p></b> ŠPATNĚ

  5. Návrh webu • Proč stránky tvořím? • Pro koho? • Kolik stránek budu potřebovat? Jaká bude struktura? • Vymyslet systém pojmenování

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

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

  8. Tag HEAD • Vymezuje hlavičku webové stránky, která obsahuje informace o obsahu stránky <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>

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

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

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

  12. Odstavce • 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>

  13. Odřádkování • Text v odstavci se automaticky zalamuje podle velikosti okna. Když je třeba, aby text začínal na novém řádku, použijeme <br />

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

  15. Formátování textu • Přeškrtnutí <strike>text</strike> • Zvětšení a zmenšení písma o 1 bod <big>text</big> <small>text</small>

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

  17. URL • URL (Uniform Resource Locator) – jednoznačné umístění zdroje http://www.stranky.cz/abc/xxx.html Protokol https://www.stranky.cz ftp://ftp.stranky.cz/pub/prog.exe mailto:sloupova@gop.pilsedu.cz file:///c|/cesta/soubor.html

  18. Absolutní adresa URL • Obsahuje kompletní cestu k souboru, včetně protokolu, názvu serveru, cesty a názvu souboru • Používá se vždy, když odkazuji na soubor z jiného serveru nebo když adresa používá jiný protokol než http.

  19. Relativní adresa URL • Popisuje umístění požadovaného souboru s odkazem na umístění souboru, který obsahuje adresu URL samotnou • Používá se pro soubory na stejném serveru => jednodušší zápis, funguje, i když stránky přesuneme

  20. Relativní adresa URL • Př. xxx.html ... soubor je ve stejném adresáři jako stránka obrazky/deticky.jpg ... soubor je v podadresáři obrazky (aktuálního adresáře) ../info/data.html ... soubor je v adresáři na vyšší pozici ve stromové struktuře

  21. Obrázky • formát jpg, gif, png • velikost a rozlišení • rychlost načítání • průhlednost • animace

  22. Jak získat obrázky • Koupit nebo stáhnout už připravené • Digitalizovat nebo naskenovat fotky • Vyfotit digitálním fotoaparátem • Nakreslit v grafickém editoru • Grafické editory: Adobe Photoshop, Gimp, Irfan View, Paint Shop Pro atd.

  23. Vložení obrázku na stránku • <img src=“xxx.jpg” ... /> • další parametry: alt ... alternativní text width ... šířka height ... výška

  24. Zarovnávání obrázků • vlastnost align, hodnoty left, right, top, middle, bottom • Ukončení obtékání textu <br clear=“all”> další hodnoty left, right

  25. Mezery kolem obrázků • Parametry hspace, vspace • Zavržené parametry, lépe nastavit pomocí stylů

  26. Horizontální linka <hr /> • Atributy: • size=“x”.....tloušťka čáry, v pixelech • width=“x” .....délka čáry, v pixelech nebo v % šířky okna • align ..... zarovnávání • noshade ..... čára bez stínu

  27. Odkazy • Umožňují přecházet z jedné stránky na druhou, spouštět video nebo hudbu, stahovat soubory pomocí ftp atd. <a href=“stranka.html”>název odkazu</a> • Jiné formáty souboru:prohlížeč má určený program, jimž se soubor otevírá.

  28. Odkazy • <a href=“soubor.html" title="titulek">text odkazu</a> • E-mailová adresa jako odkaz <a href=“mailto:sla@gop.pilsedu.cz"> text odkazu</a> • <a href=“soubor.html" title=“titulek"><img src=“obrazek.jpg”></a>

  29. Odkazy • vlastnost target Př. <a href=“stranka.html” target=“okno”>název odkazu</a> <a href=“stranka.html” target=“_blank”>název odkazu</a>

  30. Odkazy • Výchozí cíl odkazů na stránce <base target=“okno” /> Pozn. <base href=“www.gop.pilsedu.cz/vt/vt22” />

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

  32. Seznamy • Nečíslovaný seznam <ul> <li></li> <li></li> … </ul>

  33. Seznamy • Číslovaný seznam <ol> <li></li> <li></li> … </ol>

  34. Seznamy • Definiční seznamy <dl> <dt>Pojem</dt> <dd>Vysvětlení</dd> … </dl>

  35. Tabulky <table> <tr> <td></td> <td></td> … </tr> … </table> Pozn. <th></th>… záhlaví tabulky

  36. Tabulky • Rámeček tabulky BORDER • Slučování buněk COLSPAN, ROWSPAN • Velikost buněk WIDTH • Odsazení textu v buňkách CELLPADDING • Vzdálenost mezi buňkami CELLSPACING

More Related