Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
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, <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
..... 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, 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
obsah stránky </body>
6
<!– text komentáře -->
Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich nedozvíme <!– text komentáře -->
7
<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>
8
<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.
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 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 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>
16
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>
17
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>
18
Formátování textu Horní index Dolní index <sup>text</sup>
<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ř. URL lze zadávat absolutně Relativně viz.
23
Vložení odkazů do dokumentu
<a href=„soubor.html" title=„titulek">text odkazu</a> ová adresa jako odkaz <a 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> …
Typ odrážky: disc, square, circle
28
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…
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> … </TR>
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
Podobné prezentace
