tmw 1 html1_2010

doc. Ing. Zdislav EXNAR, CSc.

Tvorba multimediálnych web stránokTvorba multimediálnych web stránok

HTML

Cieľ a obsah predmetu

• Cieľ predmetu: na konci predmetu by študent mal vedieť navrhnúť a vytvoriť WEB stránku s podporou multimediálnych prvkov.

• Obsah predmetu:základné prvky WEB stránok,

dizajn a optimálna štruktúra stránky,

technické prostriedky používané pri vývoji stránky,

skriptovacie jazyky,

používanie kaskádových štýlov, multimediálna podpora WEB stránky.

Literatúra

Písek, S.: HTML tvorba jednoduchých internetových stránok.Grada,2001

Dellwing,I.: HTML príručka tvorcu webu.Grada,2002Buranský, I.: HTML a DHTLM. Hotová řešení. Computer

press, Brno, 2003Williams, H. E.: PHP a MySQL. Vvytváříme databázové

aplikace.Computer press, Praha, 2002Bott E.: Microsoft Windows XP. Windows XP do nejmenších

podrobností a do posledního detailu. Computer press, Praha, 2002

Mikuš, L.: Efektívna tvorba WWW stránok. EDIS, Žilina, 2003.Hlavenka, j. a kol.: Vytváříme WWW stránky a spravujeme

moderní WEB sitě. ComputerrPress, Praha, 2000.

http://www.lm.uniza.sk/~exnar/hlavni/web/web_index.html

Obsah prednášky

1. Podstata WEB

2. Štruktúra WEB dokumentu

3. Typy WEB dokumentov

4. Hlavička WEB dokumentu

5. Telo WEB dokumentu – HTML značky

6. Pravidlá pre tvorbu WEB dokumentu

7. Práca s textom

Podstata WEB

Jednou zo základných služieb Internetu je World Wide Web ( www služba). Jedná sa o informačný systém, ktorý v sebe spája text, grafiku, hypertextové odkazy a ďalšie prvky.

WWW vznikol na prelome osemdesiatych a deväťdesiatych rokov. Základom je značkovací jazyk, ktorý popisuje ako má byť obsah stránky formátovaný. Najpoužívanejším značkovacím jazykom je HTML (Hyper Text Markup Language), ktorý vznikol v roku 1991. Najpoužívanejšia verzia je HTML4.

Na zobrazenie www stránok na PC je treba použiť špeciálny software – prehliadač.

Podstata WEB

Zobrazenie www stránky

PC užívateľa

ServerSlužba www

Požiadavka na prenos www stránky

Prenos požadovanejwww stránka Vyhľadanie www

stránky

InternetInternet

PC užívateľa

ServerSlužba www

Požiadavka na prenos a vytvorenie www stránky

Prenos požadovanejwww stránka Vytvorenie www

stránky

InternetInternet

Zobrazenie www stránky

PC užívateľa

ServerSlužba www

Požiadavka na prenos www stránky

Prenos požadovanejwww stránka Vyhľadanie/vytvorenie

www stránky

InternetInternet

Vytvorenie a zobrazenie www stránky

Základné pojmy

Význam základných skratiek:• WWW World Wide Web• ML Markup Language• SGML Standard Generalized Markup Language

• HTML Hyper Text Markup Language

• XHTML eXtensible Hyper Text Markup Language• XML eXtensible Markup Languag• CSS Cascading Style Sheets• W3C Worl Wide Web Consortium

Prehliadač

Programové vybavenie, ktoré umožňuje zobrazenie web dokumentov a interaktívne prepojenie - komunikáciu užívateľa a sieťového prostredia.

Základné typy prehliadačov:

Firefox, Opera, Internet Explorer, Maxthon, Mozila, Fasterfox, Akcelerátor CPROXY, K-Meleon, ...

Prostriedky pre vývoj web aplikácií

Vývoj web aplikácií je možné realizovať pomocou:• jednoduchých textových editorov, ktoré do textu nevkladajú formátovacie značky (napr. poznámkový blok,...),• editorov web aplikácií, ktoré umožňujú písanie html kódu a jeho následné zobrazenie vo finálnej podobe (napr. HTML- Kit, ...),• WYSIWYG editorov, v ktorých sa vytvára výsledné zobrazenie web stránky a následne sa preloží do html kódu ( väčšina textových procesorov napr. Word, ...)• špecializované vývojové prostredie pre úpravu univerzálnych web stránok na serveri ( napr. MODx Content Management System, ...).

• .

Syntaktická pravidla značkovacích jazykov

• Základný stavebný kameň dokumentu je element

<nazov_elementu> Obsah elementu </nazov_elemntu>

Počiatočná značka

Koncová značka

Vlastný obsah elementu

<h1> Nadpis </h1>

• Prázdny element

<nazov_elementu></nazov_elemntu>

<br></br>

<br/>

Základná pravidla pre prácu s elementmi

• Elementy sa nesmi krížiť

<h1>Nadpis<h2>Podnadpish</h2> </h1>

<h1>Nadpis<h2>Podnadpis</h1></h2>

Základná pravidla pre prácu s elementmi

• Atribúty elementov

<element atribut=“hodnota atributu“> obsah </element>

<hr color=“red“> Nadpis </hr>

Štruktúra HTML dokumentu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

.

.

</head>

<body>

.

.

</body>

</html>

hlavička

telo

kód stránky

typ dokumentu

Typy dokumentu

DTD - Document Type Definition

Strict — Najprísnejšia norma, neobsahuje formátovacie prvky

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional — „Prechodná“ norma, snaží sa zachovať spätnú kompatibilitu, preto je pomerne mierna — v súčasnej dobe najrozšírenejší XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Typy dokumentu

Frameset — Norma určená pre stránky s rámcami (angl. frames).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 definuje len

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Typy dokumentu

Typy dokumentov definované pre normu HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Základné údaje v hlavičke

<head>

<title>Názov stránky</title>

<meta name="description" content="Popis obsahu " />

<meta name="keywords" content="Kľúčové slová charakterizujúce stránku" />

<meta name="author" content="Meno autora" />

<meta name="generator" content=„Typ generátora" />

<meta http-equiv="content-type" content=„text/html; charset=windows-1250 " />

</head>

Telo dokumentu

HTML kód je vytváraný pomocou značiek (tágov). Na základe týchto značiek prehliadače vytvárajú požadované zobrazenie.

Kód značky sa uvádza v špicatých zátvorkách < >. Značky sú:

• párové – obsahujú počiatočný a koncový znak napr. <body>......</body>. Kód koncového znaku začína lomítkom /,

• nepárové – obsahujú len počiatočný znak, ktorý je pred koncovou zátvorkou ukončený lomítkom / napr. <br />.

Základné značky

ZnačkaVýznam

počiatočná koncová

<!-- --> Komentár

<h1> </h1> Nadpis (header) úrovne 1

<h2> </h2> Nadpis (header) úrovne 2

<h3> </h3> Nadpis (header) úrovne 3

<h4> </h4> Nadpis (header) úrovne 4

<h5> </h5> Nadpis (header) úrovne 5

<h6> </h6> Nadpis (header) úrovne 6

<p> </p> Odsek (paragraph)

<br /> Zalomenie riadku (break)

<hr /> Vodorovná čiara

Atribúty značiek

Značkám je možné podľa typu prideliť atribúty.

Napríklad pre čiaru:

<hr size=“3“ /> hrúbka čiary 3 pixely,

<hr width=“100“ /> dĺžka čiary 100 pixelov,

<hr width=“50%“ /> čiara dlhá 50% šírky okna,

<hr noshade /> čiara bez tieňov,

<hr color="#ff0000" /> čiara červenej farby,

<hr color="red" /> čiara červenej farby,

<hr align="left” /> zarovnanie čiary doľava, (center, right) zarovnanie na stred a doprava.

Spojovanie atribútov

<body>

<hr color="olive" />

<hr color="#ff0000" size="15" width="50%" />

<hr color="yellow" align="left" size="25" width="150"/>

</body>

Obecné atribúty

Atribúty, ktoré môže mať každý HTML tag. Atribút Význam Platnosť pre

class trieda pre CSS sekciu všetky elementy

id identifikátor pre CSS a skripty všetky elementy

style zápis CSS štýlu zobrazené elementy

title titulok elementu (info v bubline) všetky elementy

lang jazyk elementu všetky elementy

name meno pre spoluprácu s ďalšími prvkami rôzna použiteľnosť

accesskey funkčný kláves aktívne elementy

tabindex poradie aktivácie tabulátorom aktívne elementy

language jazyk skriptu všetky elementy

dir smer textu najmä <bdo>

contenteditable užívateľ môže upravovať obsah všetky elementy

udalosti udalosti, ktoré spúšťajú skripty zobrazené elementy

Základné pravidlá pre tvorbu www stránok

1. Názvy značiek, ich atribútov a hodnôt písať malými písmenami.

2. Hodnoty atribútov písať do úvodzoviek (apostrofov).

3. Každá značka musí byť uzatvorená.

4. Značky sa nesmú krížiť.

5. Nepoužívať minimalizáciu atribútov.

6. Odporúča sa ukladať skripty a štýly do externých súborov.

7. Oddeliť obsah a formu dokumentu pomocou CSS.

Práca s textom

Neformátovaný text je základným prvkom, ktorým sa publikujú dáta na Internete. Na jeho zobrazenie nie je potrebná žiadna značka. Za text sa považuje všetko, čo sa nachádza vo vnútri sekcie <body> mimo značiek. Prehliadač nerozlišuje znak Enter a vypúšťa všetky nadbytočné medzery. Na odriadkovanie sa musí použiť značka <br />. Na vytvorenie viacnásobnej medzery sa musí použiť znak &nbsp;

Text dokumentu <br />pokračovanie textu &nbsp; dokumentu

Odseky a ich zarovnanie

Definícia odsekov:

<p> ... </p>

<div>...</div>

<body>Text dokumentu<p>Použitie značky p</p>Text dokumentu<div>Použitie značky div</div>Text dokumentu</body>

Charakteristika <div>

Div zahŕňa v ľubovoľne veľkú oblasť textu vrátanie nadpisov, obrázkov a tabuliek. Nezriedka sa celá stránka vyskytuje vo vnútri jedného elementu <div>.

Pred a za odsekom sa zalomí riadok. <div> je veľmi podobný odseku (<p>). Na rozdiel od odseku ale <div> nerobí pred a za sebou vizuálne medzery (má nulový východzí margin).

Tag <div> bol do HTML pridaný najmä z dôvodu kaskádovým štýlov. Podobá sa tagu <span>, ktorý tiež pribudol v súvislosti so štýlmi. Rozdiel medzi <div> a <span> je v tom, že <div> je blokový element (spôsobuje zalomení riadku pred a po), <span> je in-line element (riadkový).

Mimo obecných atribútov (v prípade <div> veľmi dôležitých) je možné použiť atribút align (zarovnávanie), ktoré má rovnaké hodnoty ako v prípade tagu <p> (odsek).

Parametre značiek <p> a <div>

Parameter textu align: left, right, center.<body>Text dokumentu<p align="center">Použitie značky p s paramertom</p>Text dokumentu<div align="right">Použitie značky div s parametrom</div>Text dokumentu</body>

Citácia

Na citáciu autora textu je možné použiť značku

<blockquote>...</blockquote>

<body>Text, ktorý je citovaný.<blockquote>Autor</blockquote></body>

Efekty zvýrazňovania písma

ZnačkaVýznam

počiatočná koncová

<b> </b> Tučné písmo

<i> </i> Kurzíva (šikmé písmo)

<u> </u> Podčiarknuté písmo

<strike> </strike> Prečiarknuté písmo

<big> </big> Písmo, ktoré je o 1 bod väčšie ako štandardné

<small> </small> Písmo, ktoré je o 1 bod menšie ako štandardné

 Dolný index

 Horný inde

Efekty zvýrazňovania písma

<body>

<b>Tučné písmo</b><i> kurzíva</i><b><i> kurzíva tučné</i></b><br />

<u>podtrhnuté </u><strike>prečiarknuté </strike><br />

<big>veľké</big> normál<small> malé</small><br />

Z = X_i + Y²

</body>

Fonty

Umožňuje s použitím atribútov nastaviť veľkosť, farbu a typ písma.

<body>Základný text <font size="5">Písmo veľkosti 5</font><br /><font color="#ff0000">Text s použitím atribútu color</font><br /><font face="arial">Použitie typu písma Arial</font></body>

Logické štýly písma

Logické štýly písma dopĺňajú fyzické štýly a umožňujú zvýraznenie textu so zvláštnym významom. Spôsob zobrazenia logických štýlov písma je závislý na typu prehliadača.

ZnačkaVýznam

počiatočná koncová

<cite> </cite> Citácie, napr. názvy kníh

<blockquote> </blockquote> Citát umiestnený do samostatného odseku

<code> </code> Jednoriadkové ukážky zdrojového kódu

<em> </em> Zvýraznenie fráze

<dfn> </dfn> Definícia termínu

<kbd> </kbd> Označuje text, ktorý sa zadáva z klávesnice PC

<samp> </samp> Výstup z programov PC

<var> </var> Mena premenných

<strong> </strong> Zvýraznenie časti textu

Logické štýly písma

<body>

<cite>Citácia</cite></br>

<blockquote>Dlhšia citácia</blockquote><br>

<code>Zdrojový kód</code></br>

<em>Definovaný termín</em></br>

<kbd>Text, zadávaný z klávesnice</kbd></br>

<samp>Výstup z programu</samp></br>

<var>Mená premenných</var></br>

<strong>Špeciálne zvýraznenie</strong>

</body>

Zobrazenie zdrojových textov

Prehliadač ignoruje všetky zvyšné medzery a konce riadkov. Na zobrazenie textu, tak ako je napísaný v zdrojovom kóde je potrebné použiť značku

<pre>.....</pre>Function Nastav() { dokument.linkColor="red"; return true; }<pre>Function Nastav() { dokument.linkColor="red"; return true; }</pre>

Zobrazenie špeciálnych znakov

Znak Entita Znak Entita Znak Entita

> &lt; Ł &pound; č &egrave;

> &gt; ± &plusmn; ř &oslash;

„ &quot; ü &#252; ň &ograve;

& &amp; á &aacute; ď &iuml;

$ &#36; é &eacute; medzera &nbsp;

@ &#64; ú &uacute; ě &igrave;

© &copy; ů &#249; í &iacute;

® &reg; ý &yacute; ó &oacute;

§ &sect; š &scaron; ~ &tilde;