Download - Jazyk HTML
![Page 1: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/1.jpg)
Jazyk HTMLJazyk HTML
![Page 2: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/2.jpg)
Základní části stránkyZákladní části stránky
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Transitional//EN"> ..... označení typu dokumentu a verze ..... označení typu dokumentu a verze HTMLHTML
<html><html>..... začátek textu ve formátu HTML..... začátek textu ve formátu HTML <head><head>..... začátek hlavičky..... začátek hlavičky <meta http-equiv="content-type" content="text/html; <meta http-equiv="content-type" content="text/html;
charset=windows-1250"> charset=windows-1250"> <meta name="generator" content="PSPad editor, <meta name="generator" content="PSPad editor,
www.pspad.com">www.pspad.com"> <title><title>titulektitulek</title></title>..... popis zobrazovaný v titulku okna..... popis zobrazovaný v titulku okna </head></head>..... konec hlavičky..... konec hlavičky <body><body>..... začátek zobrazovaného obsahu stránky..... začátek zobrazovaného obsahu stránky
obsah stránkyobsah stránky </body></body>..... konec zobrazovaného obsahu stránky..... konec zobrazovaného obsahu stránky</html></html>..... konec textu ve formátu HTML..... konec textu ve formátu HTML
![Page 3: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/3.jpg)
Tag HTMLTag HTML
PárovýPárový Označuje začátek a konec dat Označuje začátek a konec dat
tvořících webovou stránkutvořících webovou stránku
<html<html>>
..... ..... dokumentdokument HTML HTML
</html></html>
![Page 4: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/4.jpg)
Tag HEADTag HEAD PPárovýárový Vymezuje hlavičku webové stránky, která obsahuje Vymezuje hlavičku webové stránky, která obsahuje
informace o obsahu stránkyinformace o obsahu stránky Údaje se nezobrazujíÚdaje se nezobrazují
• Výjimka – tag TITLEVýjimka – tag TITLE
<head><head> <meta http-equiv="content-type" content="text/html; <meta http-equiv="content-type" content="text/html;
charset=windows-1250">charset=windows-1250">..... meta informace..... meta informace <meta name="generator" content="PSPad editor, <meta name="generator" content="PSPad editor,
www.pspad.com">www.pspad.com">..... meta informace..... meta informace <title><title>titulektitulek</title> ></title> >..... popis zobrazovaný v titulku okna..... popis zobrazovaný v titulku okna </head></head>
![Page 5: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/5.jpg)
Tag BODYTag BODY
PárovýPárový Obsahuje vše, co se objeví uvnitř Obsahuje vše, co se objeví uvnitř
okna prohlížečeokna prohlížeče
<body<body>>
obsah stránkyobsah stránky
</body></body>
![Page 6: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/6.jpg)
KomentKomentářeáře
Nemají žádný vliv na vzhled stránky, Nemají žádný vliv na vzhled stránky, po zobrazení stránky se o nich po zobrazení stránky se o nich nedozvímenedozvíme
<<!– !– text komentářetext komentáře -- -->>
![Page 7: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/7.jpg)
NadpisyNadpisy
V HTML jsou definovV HTML jsou definovány nadpisy ány nadpisy různých úrovní, může jich být 6různých úrovní, může jich být 6
<h1><h1>text nadpisutext nadpisu</h1></h1>
![Page 8: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/8.jpg)
OdstavceOdstavce
PárovýPárový ProhlProhlížeče ignorují všechny mezery a ížeče ignorují všechny mezery a
znaky konce odstavce, které jsou ve znaky konce odstavce, které jsou ve zdrojovém kódu stránky, proto je zdrojovém kódu stránky, proto je nutné přesně označit, kde mají nutné přesně označit, kde mají odstavce býtodstavce být
<p><p>texttext odstavceodstavce</p></p>
• Je možné vynechat koncovou značku.Je možné vynechat koncovou značku.
![Page 9: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/9.jpg)
OdřádkováníOdřádkování
NepárovýNepárový Text v odstavci se automaticky Text v odstavci se automaticky
zalamuje podle velikosti okna. Když zalamuje podle velikosti okna. Když je třeba, aby text začínal na novém je třeba, aby text začínal na novém řádku, použijemeřádku, použijeme
<br><br> NeoddNeoddělitelná mezera ělitelná mezera
<nobr>text</nobr><nobr>text</nobr>
![Page 10: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/10.jpg)
ČáraČára
NepárovýNepárový
<hr><hr>• Atributy: Atributy:
size=“x”size=“x” .....tlou.....tloušťka čáry, v pixelechšťka čáry, v pixelech wwidth=idth=“x” .....d“x” .....délka čáry, v pixelech nebo v élka čáry, v pixelech nebo v
% šířky okna% šířky okna noshade ..... čára bez stínu noshade ..... čára bez stínu
![Page 11: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/11.jpg)
Zarovnávání dokumentuZarovnávání dokumentu
Atribut ALIGNAtribut ALIGN 3 způsoby 3 způsoby
• Vlevo ....... leftVlevo ....... left• Na střed ... centerNa střed ... center• Vpravo ..... RightVpravo ..... Right
Např. Např. <h1 align=“center”><h1 align=“center”>Úkoly na domaÚkoly na doma</h1></h1>
![Page 12: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/12.jpg)
Zarovnávání více odstavců Zarovnávání více odstavců současněsoučasně
<div<div align= align=“.....”>“.....”>
TTento text bude zarovento text bude zarovnáván podle náván podle zadané hodnoty atributu alignzadané hodnoty atributu align
</div></div>
![Page 13: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/13.jpg)
BarvyBarvy
V HTML je definováno 16 základních V HTML je definováno 16 základních barev, které se označují barev, které se označují odpovídajícími anglickými výrazy, odpovídajícími anglickými výrazy, např. blue, red atdnapř. blue, red atd
Tabulka barev např. na Tabulka barev např. na http://www.jakpsatweb.cz/archiv/barvyzakladni.htmlhttp://www.jakpsatweb.cz/archiv/barvyzakladni.html
RGB modelRGB model
![Page 14: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/14.jpg)
Barvy - použitíBarvy - použití
Barva pozadí a textu dokumentuBarva pozadí a textu dokumentu
<body bgcolor=“barva” <body bgcolor=“barva” text=“barva”>text=“barva”>
Barva Barva části textučásti textu
<font color=“barva”></font><font color=“barva”></font>
![Page 15: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/15.jpg)
PísmoPísmo
Velikost Velikost <font size=“velikost”>text</font><font size=“velikost”>text</font>• <basefont size=“velikost”><basefont size=“velikost”>
NejNejčastěji 3 nebo 4 častěji 3 nebo 4 • Absolutní, relativní velikostAbsolutní, relativní velikost
Typ písmaTyp písma<font face=“p<font face=“písmoísmo”>”>texttext</</fontfont>>
![Page 16: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/16.jpg)
Formátování textuFormátování textu
Tučné písmoTučné písmo<b>text</b><b>text</b>
KurKurzívazíva<<ii>text</>text</ii>>
Podtržené písmoPodtržené písmo<<uu>text</>text</uu>>
Neproporcionální písmoNeproporcionální písmo<<tttt>text</>text</tttt>>
![Page 17: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/17.jpg)
Formátování textuFormátování textu
PřeškrtnutíPřeškrtnutí<<strikestrike>text</>text</strikestrike>>
Tučné písmoTučné písmo<b>text</b><b>text</b>
Zvětšení a zmenšení písma o 1 bodZvětšení a zmenšení písma o 1 bod<b<bigig>text</>text</bigbig>>
<<smallsmall>text</>text</smallsmall>>
![Page 18: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/18.jpg)
Formátování textuFormátování textu
Horní indexHorní index<<supsup>text</>text</supsup>>
Dolní indexDolní index<<subsub>text</>text</subsub>>
![Page 19: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/19.jpg)
ObrázkyObrázky
HTML podporuje grafické formáty GIF HTML podporuje grafické formáty GIF a JPEGa JPEG
Tag Tag <IMG SRC=“obrazek.jpg”><IMG SRC=“obrazek.jpg”> URL obrURL obrázku lze zadat relativně, ázku lze zadat relativně,
nebo absolutněnebo absolutně Další atributy tagu IMG – ALIGN, ALT, Další atributy tagu IMG – ALIGN, ALT,
TITLE, BORDER,HEIGHT, WIDTH, TITLE, BORDER,HEIGHT, WIDTH, HSPACE, VSPACEHSPACE, VSPACE
![Page 20: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/20.jpg)
ObrázkyObrázky
Animované gifyAnimované gify Obrázky na pozadí Obrázky na pozadí
<body background=“obrazek.jpg”><body background=“obrazek.jpg”>
![Page 21: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/21.jpg)
Zásady správného používání Zásady správného používání obrázkůobrázků
Nikdy nepoužívat tam, kde to není Nikdy nepoužívat tam, kde to není bezpodmínečně nutnébezpodmínečně nutné
Vždy zadat atribut ALTVždy zadat atribut ALT Vždy použít atrobuty WIDTH, HEIGHTVždy použít atrobuty WIDTH, HEIGHT Animované obrázky používat v Animované obrázky používat v
rozumném množstvírozumném množství
![Page 22: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/22.jpg)
OdkazyOdkazy
HTML dokumnety je možno provázat HTML dokumnety je možno provázat pomocí hypetextových odkazůpomocí hypetextových odkazů
Je třeba znát jednoznačnou adresu, Je třeba znát jednoznačnou adresu, tj. URL (Uniform Resource Locator)tj. URL (Uniform Resource Locator)např. např. www.server.cz/soubor.htmlwww.server.cz/soubor.html
URL lze zadávat URL lze zadávat • absolutněabsolutně• RelativněRelativněviz. viz. http://www.http://www.jakpsatwebjakpsatweb..czcz/odkazy-/odkazy-htmlhtml.html.html
![Page 23: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/23.jpg)
Vložení odkazů do dokumentuVložení odkazů do dokumentu
<a href=„soubor.html" <a href=„soubor.html" title=„titulek">text odkazu</a>title=„titulek">text odkazu</a>
E-mailová adresa jako odkazE-mailová adresa jako odkaz
<a href=„mailto:[email protected]"> <a href=„mailto:[email protected]"> text odkazu</a>text odkazu</a>
Jiné formáty soubor:Jiné formáty soubor:prohlížeč má určený program, jimž prohlížeč má určený program, jimž se soubor otevírá. se soubor otevírá.
![Page 24: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/24.jpg)
ZáložkyZáložky
Lze odkazovat na jednotlivé části Lze odkazovat na jednotlivé části dokumentudokumentu
Definice záložky:Definice záložky: <a name= <a name=““kap1kap1”>Kapitola 1”>Kapitola 1</a></a>
Odkaz na Odkaz na záložkuzáložku <a href=„ <a href=„#kap1#kap1">">Kapitola 1 <Kapitola 1 </a>/a>
Pozn. Je mPozn. Je možné odkazovat i na záložky umístěné v jiném ožné odkazovat i na záložky umístěné v jiném dokumentu, např. dokumentu, např.
<a href=<a href=““soubor.htmlsoubor.html#kap1#kap1">text odkazu</a>">text odkazu</a>
![Page 25: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/25.jpg)
Barvy a odkazyBarvy a odkazy
Odkazy Odkazy • nnenavenavštívenéštívené• navštívenénavštívené• AktivníAktivní
<body link=“red” vlink=“lime” <body link=“red” vlink=“lime” alink=“green”>alink=“green”>
![Page 26: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/26.jpg)
Odkazy a obrOdkazy a obrázkyázky
<a href=„soubor.html" <a href=„soubor.html" title=„titulek">title=„titulek"><img src=“obrazek.jpg”><img src=“obrazek.jpg”></a></a>
![Page 27: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/27.jpg)
SeznamySeznamy
Nečíslovaný seznamNečíslovaný seznam
<UL><UL>
<LI></LI><LI></LI>
<LI></LI><LI></LI>
……
</UL></UL>• Typ odrTyp odrážky: disc, square, circleážky: disc, square, circle
![Page 28: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/28.jpg)
SeznamySeznamy
Číslovaný seznamČíslovaný seznam
<<OOL>L>
<LI></LI><LI></LI>
<LI></LI><LI></LI>
……
</</OOL>L>• Typ Typ číslování: arabskými číslicemi, římská čísla číslování: arabskými číslicemi, římská čísla
s použitím malých nebo velkých písmen, malaá s použitím malých nebo velkých písmen, malaá nebo velká písmena a, b, c…nebo velká písmena a, b, c…
![Page 29: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/29.jpg)
SeznamySeznamy
Definiční seznamyDefiniční seznamy
<<DDL>L>
<<DTDT>>PojemPojem</</DTDT>>
<<DDDD>>VysvětleníVysvětlení</</DDDD>>
……
</</DDL>L>• Typ odrTyp odrážky: disc, square, circleážky: disc, square, circle
![Page 30: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/30.jpg)
TabulkyTabulky
<TABLE><TABLE><TR><TR><TD></TD><TD></TD><TD></TD><TD></TD>……</TR></TR>……</TABLE></TABLE>
Pozn. Pozn. <TH></TH>… <TH></TH>… záhlaví tabulkyzáhlaví tabulky
![Page 31: Jazyk HTML](https://reader035.vdocuments.pub/reader035/viewer/2022062304/56812ac5550346895d8e977a/html5/thumbnails/31.jpg)
TabulkyTabulky - atributy - atributy
Rámeček tabulky BORDERRámeček tabulky BORDER Zarovnávání buněk, řádků ALIGNZarovnávání buněk, řádků ALIGN Slučování buněk COLSPAN, ROWSPANSlučování buněk COLSPAN, ROWSPAN Svislé zarovnávání buněk VALIGNSvislé zarovnávání buněk VALIGN Velikost buněk WIDTHVelikost buněk WIDTH Popisek tabulky Popisek tabulky
<CAPTION>Popisek</CAPTION><CAPTION>Popisek</CAPTION> OdsaOdsazení textu v buňkách CELLPADDINGzení textu v buňkách CELLPADDING Vzdálenost mezi buňkami CELLSPACINGVzdálenost mezi buňkami CELLSPACING