Jazyk HTML

Jazyk HTMLJazyk HTML

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

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>

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>

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>

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

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>

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.

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>

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

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>

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>

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

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>

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

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


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


Horní indexHorní index<<supsup>text</>text</supsup>>

Dolní indexDolní index<<subsub>text</>text</subsub>>

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

ObrázkyObrázky

Animované gifyAnimované gify Obrázky na pozadí Obrázky na pozadí

<body background=“obrazek.jpg”><body background=“obrazek.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í

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

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

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>

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”>

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>

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

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…

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

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

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

Documents

Jazyk HTML