Die Tiere Německý jazyk VY_32_INOVACE_258 , 13. sada, D alší cizí jazyk
Jazyk HTML
description
Transcript of Jazyk HTML
Jazyk HTMLJazyk HTML
Zdrojový kódZdrojový kód
ElementyElementy
<n<název parametryázev parametry>obsah</n>obsah</názevázev>>
př. př. <b><b>důležitédůležité</b></b>
<n<název parametryázev parametry /> />
př. př. <img src=“xx.jpg” width=“300” /><img src=“xx.jpg” width=“300” />
Parametry Parametry
př. př. <<td colspan=td colspan=“3”>Leden</td>“3”>Leden</td> HodnotyHodnoty
př. př. <img src=“xx.jpg” width=“300” /><img src=“xx.jpg” width=“300” />
<body bgcolor=“red”></body><body bgcolor=“red”></body>
<a href=“http://www.seznam.cz”><a href=“http://www.seznam.cz”>
</a></a>
RodiRodičče a potomcie a potomci
PPř. ř.
<p>...<b>...</b>...</p> SPR<p>...<b>...</b>...</p> SPRÁVNĚÁVNĚ
<p>...<b>...</p></b> <p>...<b>...</p></b> ŠPATNĚŠPATNĚ
Návrh webuNávrh webu
Proč stránky tvořím?Proč stránky tvořím? Pro koho?Pro koho? Kolik stránek budu potřebovat? Jaká Kolik stránek budu potřebovat? Jaká
bude struktura?bude struktura? Vymyslet systém pojmenováníVymyslet systém pojmenování
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
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 Vymezuje hlavičku webové stránky, která Vymezuje hlavičku webové stránky, která
obsahuje informace o obsahu stránkyobsahuje informace o obsahu stránky <<head>head> <meta http-equiv="content-type" <meta http-equiv="content-type"
content="text/html; charset=windows-1250">content="text/html; charset=windows-1250">..... ..... meta informacemeta 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 ..... popis zobrazovaný v titulku oknatitulku okna
</head></head>
Tag BODYTag BODY
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
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>
OdřádkováníOdřádkování
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 />
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>>
Formátování textuFormátování textu
PřeškrtnutíPřeškrtnutí<<strikestrike>text</>text</strikestrike>>
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>>
Formátování textuFormátování textu
Horní indexHorní index<<supsup>text</>text</supsup>>
Dolní indexDolní index<<subsub>text</>text</subsub>>
URLURL
URL (Uniform Resource Locator) – URL (Uniform Resource Locator) – jednoznačné umístění zdrojejednoznačné umístění zdroje
http://www.stranky.cz/abc/xxx.htmlhttp://www.stranky.cz/abc/xxx.htmlProtokol Protokol https://www.stranky.czhttps://www.stranky.czftp://ftp.stranky.cz/pub/prog.exeftp://ftp.stranky.cz/pub/prog.exemailto:[email protected]:[email protected]:///cfile:///c|/cesta/soubor.html|/cesta/soubor.html
AbsolutnAbsolutní adresa URLí adresa URL
Obsahuje kompletní cestu k souboru, Obsahuje kompletní cestu k souboru, včetně protokolu, názvu serveru, včetně protokolu, názvu serveru, cesty a názvu souborucesty a názvu souboru
Používá se vždy, když odkazuji na Používá se vždy, když odkazuji na soubor z jiného serveru nebo když soubor z jiného serveru nebo když adresa používá jiný protokol než http.adresa používá jiný protokol než http.
Relativní adresa URLRelativní adresa URL
Popisuje umístění požadovaného Popisuje umístění požadovaného souboru s odkazem na umístění souboru s odkazem na umístění souboru, který obsahuje adresu URL souboru, který obsahuje adresu URL samotnousamotnou
Používá se pro soubory na stejném Používá se pro soubory na stejném serveru =serveru => jednodu> jednodušší zápis, šší zápis, funguje, i když stránky přesunemefunguje, i když stránky přesuneme
Relativní adresa URLRelativní adresa URL
Př. xxx.html ... soubor je ve stejném Př. xxx.html ... soubor je ve stejném adresáři jako stránkaadresáři jako stránka
obrazky/deticky.jpg ... soubor je v obrazky/deticky.jpg ... soubor je v podadresáři obrazky (aktuálního adresáře)podadresáři obrazky (aktuálního adresáře)
../info/data.html ... soubor je v ../info/data.html ... soubor je v adresáři na vyšší pozici ve stromové adresáři na vyšší pozici ve stromové struktuřestruktuře
ObrázkyObrázky
formát jpg, gif, pngformát jpg, gif, png velikost a rozlišenívelikost a rozlišení rychlost načítánírychlost načítání průhlednostprůhlednost animaceanimace
Jak získat obrázkyJak získat obrázky
Koupit nebo stáhnout už připravenéKoupit nebo stáhnout už připravené Digitalizovat nebo naskenovat fotkyDigitalizovat nebo naskenovat fotky Vyfotit digitálním fotoaparátemVyfotit digitálním fotoaparátem Nakreslit v grafickém editoruNakreslit v grafickém editoru
Grafické editory:Grafické editory:Adobe Photoshop, Gimp, Irfan View, Adobe Photoshop, Gimp, Irfan View,
Paint Shop Pro atd.Paint Shop Pro atd.
Vložení obrázku na stránkuVložení obrázku na stránku
<img src=“xxx.jpg” ... /><img src=“xxx.jpg” ... /> ddalalší parametry:ší parametry:
alt ... alternativní textalt ... alternativní text
width ... šířkawidth ... šířka
height ... výškaheight ... výška
Zarovnávání obrázkůZarovnávání obrázků
vlastnost align, hodnoty left, right, vlastnost align, hodnoty left, right, top, middle, bottomtop, middle, bottom
Ukončení obtékání textu Ukončení obtékání textu
<br clear=“all”><br clear=“all”>
daldalší hodnoty left, rightší hodnoty left, right
Mezery kolem obrázkůMezery kolem obrázků
Parametry hspace, vspaceParametry hspace, vspace Zavržené parametry, lépe nastavit Zavržené parametry, lépe nastavit
pomocí stylůpomocí stylů
Horizontální linkaHorizontální linka
<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 align ..... zarovnáváníalign ..... zarovnávání noshade ..... čára bez stínu noshade ..... čára bez stínu
OdkazyOdkazy
Umožňují přecházet z jedné stránky Umožňují přecházet z jedné stránky na druhou, spouštět video nebo na druhou, spouštět video nebo hudbu, stahovat soubory pomocí ftphudbu, stahovat soubory pomocí ftp atd.atd.
<a href=“stranka.html”>n<a href=“stranka.html”>název odázev odkazu</a>kazu</a>
Jiné formáty souboru:Jiné formáty souboru:prohlížeč má určený program, jimž se soubor prohlížeč má určený program, jimž se soubor otevírá. otevírá.
OdkazyOdkazy
<a href=<a href=““soubor.html" title=soubor.html" title=""titulek">text titulek">text odkazu</a>odkazu</a>
E-mailová adresa jako odkazE-mailová adresa jako odkaz<a href=<a href=““mailto:[email protected]"> text mailto:[email protected]"> text
odkazu</a>odkazu</a>
<a href=<a href=““soubor.html" title=soubor.html" title=““titulek">titulek"><img src=“obrazek.jpg”><img src=“obrazek.jpg”></a></a>
OdkazyOdkazy
vlastnost targetvlastnost target
Př. Př. <a href=“stranka.html”<a href=“stranka.html”
target=target=“okno”>n“okno”>název odázev odkazu</a>kazu</a>
<a href=“stranka.html”<a href=“stranka.html” target=target=““__blank”>nblank”>název odázev odkazu</a>kazu</a>
OdkazyOdkazy
Výchozí cíl odkazů na stránceVýchozí cíl odkazů na stránce<base target=“okno” /><base target=“okno” />
Pozn. <base Pozn. <base href=“www.gop.pilsedu.cz/vt/vt22” />href=“www.gop.pilsedu.cz/vt/vt22” />
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">text odkazu</a></a>
SeznamySeznamy
Nečíslovaný seznamNečíslovaný seznam
<<ulul>>
<<lili></></lili>>
<<lili></></lili>>
……
</</ulul>>
SeznamySeznamy
Číslovaný seznamČíslovaný seznam
<<olol>>
<<lili></></lili>>
<<lili></></lili>>
……
</</olol>>
SeznamySeznamy
Definiční seznamyDefiniční seznamy
<<dldl>>
<<dtdt>>PojemPojem</</dtdt>>
<<dddd>>VysvětleníVysvětlení</</dddd>>
……
</</dldl>>
TabulkyTabulky
<<tabletable>><<trtr>><<tdtd></></tdtd>><<tdtd></></tdtd>>……</</trtr>>……</</tabletable>>
Pozn. Pozn. <<thth></></thth>… >… záhlaví tabulkyzáhlaví tabulky
TabulkyTabulky
Rámeček tabulky BORDERRámeček tabulky BORDER Slučování buněk COLSPAN, Slučování buněk COLSPAN,
ROWSPANROWSPAN Velikost buněk WIDTHVelikost buněk WIDTH OdsaOdsazení textu v buňkách zení textu v buňkách
CELLPADDINGCELLPADDING Vzdálenost mezi buňkami Vzdálenost mezi buňkami
CELLSPACINGCELLSPACING