Jazyk HTML

transcript

Jazyk HTMLJazyk HTML

Zdrojový kódZdrojový kód

ElementyElementy

<n<název parametryázev parametry>obsah</n>obsah</názevázev>>

př. př. důležitédůležité

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

</a></a>

RodiRodičče a potomcie a potomci

PPř. ř.

......... SPR......... SPRÁVNĚÁVNĚ

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

<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

texttext odstavceodstavce

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

Formátování textuFormátování textu

Tučné písmoTučné písmotexttext

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

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

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:sloupova@gop.pilsedu.czmailto:sloupova@gop.pilsedu.czfile:///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

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:sla@gop.pilsedu.cz"> text mailto:sla@gop.pilsedu.cz"> 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>>

……

</</ulul>>

SeznamySeznamy

Číslovaný seznamČíslovaný seznam

<<olol>>

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

Jazyk HTML

Documents