HTML - značkovací jazyk: Rozdiel medzi revíziami
| Riadok 1: | Riadok 1: | ||
{{navigacne menu - webovske technologie}} | {{navigacne menu - webovske technologie}} | ||
| + | {{draft}} | ||
HTML je jazyk pre popis webových stránok. | HTML je jazyk pre popis webových stránok. | ||
* HTML je skratka pre Hyper Text Markup Language | * HTML je skratka pre Hyper Text Markup Language | ||
| Riadok 5: | Riadok 6: | ||
* Značkovací jazyk je množina značiek, pomocou ktorých určujeme vlastnosti textu | * Značkovací jazyk je množina značiek, pomocou ktorých určujeme vlastnosti textu | ||
* HTML používa značky značky na opis webovej stránky | * HTML používa značky značky na opis webovej stránky | ||
| − | |||
==HTML tagy== | ==HTML tagy== | ||
* HTML tagy sú kľúčové slová, obklopený hranatých zátvorkách ako <nowiki><html></nowiki> | * HTML tagy sú kľúčové slová, obklopený hranatých zátvorkách ako <nowiki><html></nowiki> | ||
| Riadok 147: | Riadok 147: | ||
|} | |} | ||
| + | ===Všeobecne použiteľné atribúty=== | ||
| + | Každý HTML element má definovaní svoje atribúty, ktoré sa delia na povinné a nepovinné. Medzi nepovinné atribúty patria aj 4 atribúty, ktoré môže obsahovať ľubovolný HTML element. Tieto atribúty sa nazývajú základné atribúty (core attributes) | ||
| + | {|class="wikitable" | ||
| + | |+ Zoznam základných 4 atribútov | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |class | ||
| + | |názov definovanej triedy pomocou CSS | ||
| + | |Trieda elementu | ||
| + | |- | ||
| + | |id | ||
| + | |id označenie elementu | ||
| + | |Unikátne id pre daný element | ||
| + | |- | ||
| + | |style | ||
| + | |definícia štýlu | ||
| + | |in-line definícia štýlu pre daný HTML element | ||
| + | |- | ||
| + | |title | ||
| + | |bublinka s popisom | ||
| + | |Text, ktorý sa zobrazí pri podržaní myši nad HTML elementom | ||
| + | |} | ||
| + | |||
| + | {|class="wikitable" | ||
| + | |+ Zoznam atribútov pre text | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |dir | ||
| + | |lrt, rtr | ||
| + | |smer textu (ltr-zľava doprava, rtl-sprava doľava) | ||
| + | |- | ||
| + | |lang | ||
| + | |kód jazyka | ||
| + | |Hovorí o (prirodzenom) jazyku, v ktorom je obsah HTML elementu napísaný | ||
| + | |} | ||
| + | |||
| + | {|class="wikitable" | ||
| + | |+ Zoznam atribútov pre prístup pomocou klávesnice | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |accesskey | ||
| + | |znak | ||
| + | |Nastaví klávesovú skratku pre prístup k danému HTML elementu | ||
| + | |- | ||
| + | |tabindex | ||
| + | |číslo | ||
| + | |nastaví poradie získavania fokusu, resp. poradie elementov. | ||
| + | |} | ||
===Odstavec=== | ===Odstavec=== | ||
| + | '''HTML element''': <nowiki><p></nowiki><ref>element p - http://www.w3schools.com/tags/tag_p.asp</ref> | ||
| + | |||
| + | '''Funkcia:'''Vytvára textový odstavec | ||
| + | |||
| + | '''Atribúty:''' | ||
| + | |||
| + | * '''align''' Tento atribút nie je schválený (deprecated) v špecifikácii HTML 4.01 a XHTML 1.0 Možné hodnoty: | ||
| + | **left - zarovanie vľavo | ||
| + | **right - zarovanie vpravo | ||
| + | **justigy - zarovanie do bloku | ||
| + | **center - zarovanie na stred | ||
| + | |||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | <p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> | ||
| + | <p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> | ||
| + | <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> | ||
| + | </source> | ||
| + | |||
| + | '''Výsledok:''' | ||
| + | <div style="background-color:#FFFF66"> | ||
| + | <p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo</p> | ||
| + | <p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo</p> | ||
| + | <p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo</p> | ||
| + | </div> | ||
===Obrázok=== | ===Obrázok=== | ||
| + | '''HTML element''': <nowiki><img></nowiki><ref>element img - http://www.w3schools.com/tags/tag_img.asp</ref> | ||
| + | |||
| + | '''Funkcia:'''Na web stránku vkladá obrázok | ||
| + | |||
| + | '''Poznámka:''' Značka ''img'' je nepárová. | ||
| + | |||
| + | '''Povinné atribúty:''' | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |src | ||
| + | |URL | ||
| + | |adresa súboru s obrázkom | ||
| + | |- | ||
| + | |alt | ||
| + | |text | ||
| + | |Alternatívny text. Zobrazí sa, ak neexistuje obrázok. | ||
| + | |} | ||
| + | |||
| + | '''Nepovinné atribúty:''' | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |align | ||
| + | |top | ||
| + | bottom | ||
| + | middle | ||
| + | left | ||
| + | right | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje zarovnanie obrázku vzhľadom na susedné elementy. | ||
| + | |- | ||
| + | |border | ||
| + | |pixely | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje hrúbku orámovania. | ||
| + | |- | ||
| + | |height | ||
| + | |pixely | ||
| + | % | ||
| + | |Definuje výšku obrázka. | ||
| + | |- | ||
| + | |hspace | ||
| + | |pixely | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj naľavo a naprav od obrázku. | ||
| + | |- | ||
| + | |vspace | ||
| + | |pixely | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj hore a dole od obrázku. | ||
| + | |- | ||
| + | |width | ||
| + | |pixely | ||
| + | % | ||
| + | |Definuje šírku obrázku | ||
| + | |} | ||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | <img title="kiwiki" alt="kiwiki" src="http://kiwiki.fmtnuni.sk/mediawiki/images/Wiki praca.png"/> | ||
| + | <img title="kiwiki" alt="kiwiki" src="http://kiwiki.fmtnuni.sk/mediawiki/images/Wiki praca.png" width="200"/> | ||
| + | </source> | ||
| + | |||
| + | '''Výsledok:''' | ||
| + | <div style="background-color:#FFFF66"> | ||
| + | [[Súbor:Wiki praca.png]] | ||
| + | [[Súbor:Wiki praca.png|200px]] | ||
| + | </div> | ||
===Odkaz=== | ===Odkaz=== | ||
| + | '''HTML element''': <nowiki><a></nowiki><ref>element a - http://www.w3schools.com/tags/tag_a.asp</ref> | ||
| + | |||
| + | '''Funkcia:'''Na web stránku vkladá hypertextový odkaz | ||
| + | |||
| + | '''Poznámka:''' Medzi značkami<nowiki> <a> a </a></nowiki> môže byť text (jedná sa o textový odkaz) alebo obrázok (jedná sa o grafický odkaz) | ||
| + | |||
| + | '''Nepovinné atribúty:''' | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |href | ||
| + | |URL | ||
| + | |Definuje cieľ odkazu | ||
| + | |- | ||
| + | |name | ||
| + | |Názov sekcie | ||
| + | |Definuje názov lokálneho odkazu | ||
| + | |- | ||
| + | |rel <ref>Atribút rel - http://www.w3schools.com/tags/att_a_rel.asp</ref> | ||
| + | |text | ||
| + | |Určuje vzťah medzi aktuálnym dokumentom a odkazovaným dokumentom | ||
| + | |- | ||
| + | |rev <ref>Atribút rev - http://www.w3schools.com/tags/att_a_rev.asp</ref> | ||
| + | |text | ||
| + | |Určuje vzťah medzi prepojeným dokumentom a aktuálnym dokumentom | ||
| + | |- | ||
| + | |target | ||
| + | |_blank | ||
| + | _parent | ||
| + | _self | ||
| + | _top | ||
| + | |Definuje kde sa otvorí odkazovaný dokument. | ||
| + | |} | ||
| + | |||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | <a href="http://kiwiki.fmtnuni.sk">KiWiKi</a> <br/> | ||
| + | <a href="#HTML hlavička">HTML hlavička</a> | ||
| + | </source> | ||
| + | |||
| + | '''Výsledok:''' | ||
| + | <div style="background-color:#FFFF66"> | ||
| + | [http://kiwiki.fmtnuni.sk KiWiKi] | ||
| + | |||
| + | [[#HTML hlavička]] | ||
| + | </div> | ||
===Zoznam=== | ===Zoznam=== | ||
| + | '''HTML element''': <nowiki><ul>, <ol>, <li></nowiki><ref>element ul - http://www.w3schools.com/tags/tag_ul.asp</ref> | ||
| + | |||
| + | '''Funkcia:'''Na web stránku vkladá odrážkový zoznam | ||
| + | |||
| + | '''Poznámka:''' | ||
| + | *Číslovaný zoznam: značka <nowiki><ol></nowiki> (Ordened List) | ||
| + | *Nečíslovaný zoznam: značka <nowiki><ul></nowiki> (Unordened List) | ||
| + | *Položka zoznamu: <nowiki><li></nowiki> (List Item) | ||
| + | |||
| + | '''Nepovinné atribúty:''' | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | |compact | ||
| + | |compact | ||
| + | |<span style="color:red">Neschválený atribút</span>Určuje, že zoznam by mal byť menší ako obvykle. | ||
| + | |- | ||
| + | |start | ||
| + | |číslo | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje začiatočné číslovanie. | ||
| + | |- | ||
| + | |type | ||
| + | |1,A,a,I,i,disc,square,circle | ||
| + | |<span style="color:red">Neschválený atribút</span>. Definuje typ odrážok, resp. číslovania. | ||
| + | |} | ||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | <ol> | ||
| + | <li>Káva</li> | ||
| + | <li>Čaj</li> | ||
| + | <li>Mlieko</li> | ||
| + | </ol> | ||
| + | |||
| + | <ul> | ||
| + | <li>Káva</li> | ||
| + | <li>Čaj</li> | ||
| + | <li>Mlieko</li> | ||
| + | </ul> | ||
| + | </source> | ||
| + | '''Výsledok:''' | ||
| + | <div style="background-color:#FFFF66"> | ||
| + | |||
| + | #Káva | ||
| + | #Čaj | ||
| + | #Mlieko | ||
| + | |||
| + | *Káva | ||
| + | *Čaj | ||
| + | *Mlieko | ||
| + | |||
| + | </div> | ||
===Tabuľka=== | ===Tabuľka=== | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | | | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | </source> | ||
===Formulár=== | ===Formulár=== | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | | | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | </source> | ||
===Kontajner=== | ===Kontajner=== | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | | | ||
| + | | | ||
| + | | | ||
| + | |} | ||
| + | Príklad použitia: | ||
| + | <source lang="html4strict"> | ||
| + | </source> | ||
==HTML farby== | ==HTML farby== | ||
| + | {|class="wikitable" | ||
| + | |- | ||
| + | !Atribút | ||
| + | !Hodnota | ||
| + | !Popis | ||
| + | |- | ||
| + | | | ||
| + | | | ||
| + | | | ||
| + | |} | ||
Jazyk HTML definuje farby pomocou ich mien, pomeru farebných zložiek RGB (Červená, Zelená, Modrá) v percentuálnom pomere, alebo vyjadrením v hexadecimálnych číslach. | Jazyk HTML definuje farby pomocou ich mien, pomeru farebných zložiek RGB (Červená, Zelená, Modrá) v percentuálnom pomere, alebo vyjadrením v hexadecimálnych číslach. | ||
{|class="wikitable" | {|class="wikitable" | ||
| Riadok 210: | Riadok 514: | ||
==Zdroje a odkazy== | ==Zdroje a odkazy== | ||
* HTML 4.01 / XHTML 1.0 Reference (W3schools) http://www.w3schools.com/tags/ | * HTML 4.01 / XHTML 1.0 Reference (W3schools) http://www.w3schools.com/tags/ | ||
| + | <references/> | ||
Verzia zo dňa a času 20:30, 16. september 2010
HTML je jazyk pre popis webových stránok.
- HTML je skratka pre Hyper Text Markup Language
- HTML nie je programovací jazyk, je to značkovací jazyk
- Značkovací jazyk je množina značiek, pomocou ktorých určujeme vlastnosti textu
- HTML používa značky značky na opis webovej stránky
Obsah
HTML tagy
- HTML tagy sú kľúčové slová, obklopený hranatých zátvorkách ako <html>
- HTML tagy bežne prichádzajú v pároch, ako je <b> a </ b>
- Prvá značka v páre je štart značka, druhá značka je značka koniec
- Začiatok a koniec značky sú taktiež tzv. otváranie značky a uzatváracie značky (tagy)
HTML stránka pozostáva z HTML elementov. HTML elementy definujú HTML značky. Príkladom HTML elementu môže byť nadpis (H1, H2, ...), obrázok (IMG), formulár (FORM) a iné. HTML element môže mať atribúty. Atribút je doplňujúca informácia HTML elementu. Príkladom atribútu elementu img môže byť atribút src:
<img src="subor.jpg"/>
HTML dokumenty = webové stránky
- HTML dokumenty popisujú webové stránky
- HTML dokumenty obsahujú HTML tagy a čistý text
- HTML dokumenty sú tiež známe ako webové stránky
Úlohou webového prehliadača (napríklad Internet Explorer, Firefox alebo Opera), je čítať HTML dokumenty a zobraziť ich ako webové stránky. Prehliadač nezobrazuje HTML tagy, ale používa ich na interpretovanie obsahu stránky:
<html>
<body>
<h1>Môj prvý nadpi</h1>
<p>Môj prvý odstavec.</p>
</body>
</html>
Vysvetlenie:
- Značky <html> a </ html> určuje začiatok a koniec stránky. Text medzi nimi popisuje obsah webovej stránky.
- Text medzi <body> a </ body> je viditeľný obsah stránky
- Text medzi <h1> a </ h1> sa zobrazí ako nadpis
- Text medzi <p> a </ p> sa zobrazí ako odstavec
Pravidlá pre HTML značky
- HTML značka je obklopená dvomi znakmi: < a >
- HTML tagy sa zvyčajne objavujú v pároch, ako je <b> a </ b>
- Prvá značka v páre je štart značka, druhá značka je koncová značka
- Text medzi začiatočnou a koncovou značkou je obsah HTML elementu
- HTML značky nerozlišujú malé a veľké písmená; <b> znamená to isté ako <B>
Základné HTML značky
| Nadpisy | 1. úroveň | <h1>...</h1> |
|---|---|---|
| 2. úroveň | <h2>...</h2> | |
| 3. úroveň | <h3>...</h3> | |
| 4. úroveň | <h4>...</h4> | |
| 5. úroveň | <h5>...</h5> | |
| 6. úroveň | <h6>...</h6> | |
| Odstavec | Zoskupí text do bloku | <p>...</p> |
| Obrázok | (nepárová značka) Vloží na stránku obrázok | <img src="cesta k obrazku" alt="alternativky text" title="nazov obrazku"/> |
| Odkazy | Odkaz na inú stránku | <a href="adresa">text odkazu</a> |
| Odkaz v rámci HTML stránky | <a href="#odskok">text odkazu</a> | |
| Zoznam | Číslovaný zoznam | <ol>...</ol> |
| Nečíslovaný zoznam | <ul>...</ul> | |
| Položka zoznamu | <li>...</li> | |
| Značky pre formátovanie textu | Tučný text | <b>...<b/> |
| Veľký text | <big>...</big> | |
| Šikmý text | <i>...<i/> | |
| Malý text | <small>...</small> | |
| Hrubo tlačený text | <strong>...</strong> | |
| Dolný index | <sub>...</sub> | |
| Horný index | <sup>...</sup> | |
| Tabuľky | Tabuľka | <table>...</table> |
| Riadok tabuľky | <tr>...</tr> | |
| Bunka tabuľky | <td>...</td> | |
| Formulár | Formulár | <form>...</form> |
| Vstupné políčko | <input>...</input> | |
| Tlačidlo na odoslanie | <submit>...</submit> | |
| Textový blok | <textarea>...</textarea> | |
| Výber z viacerých možností | <select>...</select> | |
| Kontajner | Samostatný blok s zadefinovanými rozmermi | <div>...</div> |
Všeobecne použiteľné atribúty
Každý HTML element má definovaní svoje atribúty, ktoré sa delia na povinné a nepovinné. Medzi nepovinné atribúty patria aj 4 atribúty, ktoré môže obsahovať ľubovolný HTML element. Tieto atribúty sa nazývajú základné atribúty (core attributes)
| Atribút | Hodnota | Popis |
|---|---|---|
| class | názov definovanej triedy pomocou CSS | Trieda elementu |
| id | id označenie elementu | Unikátne id pre daný element |
| style | definícia štýlu | in-line definícia štýlu pre daný HTML element |
| title | bublinka s popisom | Text, ktorý sa zobrazí pri podržaní myši nad HTML elementom |
| Atribút | Hodnota | Popis |
|---|---|---|
| dir | lrt, rtr | smer textu (ltr-zľava doprava, rtl-sprava doľava) |
| lang | kód jazyka | Hovorí o (prirodzenom) jazyku, v ktorom je obsah HTML elementu napísaný |
| Atribút | Hodnota | Popis |
|---|---|---|
| accesskey | znak | Nastaví klávesovú skratku pre prístup k danému HTML elementu |
| tabindex | číslo | nastaví poradie získavania fokusu, resp. poradie elementov. |
Odstavec
HTML element: <p>[1]
Funkcia:Vytvára textový odstavec
Atribúty:
- align Tento atribút nie je schválený (deprecated) v špecifikácii HTML 4.01 a XHTML 1.0 Možné hodnoty:
- left - zarovanie vľavo
- right - zarovanie vpravo
- justigy - zarovanie do bloku
- center - zarovanie na stred
Príklad použitia:
<p align="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
Výsledok:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis odio ut sapien iaculis tristique. Sed rhoncus euismod nisi, a porttitor velit dapibus eget. Morbi massa orci, varius in consequat ut, euismod sed velit. Sed eget erat tortor, a ullamcorper metus. Nam quis sapien leo
Obrázok
HTML element: <img>[2]
Funkcia:Na web stránku vkladá obrázok
Poznámka: Značka img je nepárová.
Povinné atribúty:
| Atribút | Hodnota | Popis |
|---|---|---|
| src | URL | adresa súboru s obrázkom |
| alt | text | Alternatívny text. Zobrazí sa, ak neexistuje obrázok. |
Nepovinné atribúty:
| Atribút | Hodnota | Popis |
|---|---|---|
| align | top
bottom middle left right |
Neschválený atribút. Definuje zarovnanie obrázku vzhľadom na susedné elementy. |
| border | pixely | Neschválený atribút. Definuje hrúbku orámovania. |
| height | pixely
% |
Definuje výšku obrázka. |
| hspace | pixely | Neschválený atribút. Definuje priehľadný okraj naľavo a naprav od obrázku. |
| vspace | pixely | Neschválený atribút. Definuje priehľadný okraj hore a dole od obrázku. |
| width | pixely
% |
Definuje šírku obrázku |
Príklad použitia:
<img title="kiwiki" alt="kiwiki" src="http://kiwiki.fmtnuni.sk/mediawiki/images/Wiki praca.png"/>
<img title="kiwiki" alt="kiwiki" src="http://kiwiki.fmtnuni.sk/mediawiki/images/Wiki praca.png" width="200"/>
Výsledok:
Odkaz
HTML element: <a>[3]
Funkcia:Na web stránku vkladá hypertextový odkaz
Poznámka: Medzi značkami <a> a </a> môže byť text (jedná sa o textový odkaz) alebo obrázok (jedná sa o grafický odkaz)
Nepovinné atribúty:
| Atribút | Hodnota | Popis |
|---|---|---|
| href | URL | Definuje cieľ odkazu |
| name | Názov sekcie | Definuje názov lokálneho odkazu |
| rel [4] | text | Určuje vzťah medzi aktuálnym dokumentom a odkazovaným dokumentom |
| rev [5] | text | Určuje vzťah medzi prepojeným dokumentom a aktuálnym dokumentom |
| target | _blank
_parent _self _top |
Definuje kde sa otvorí odkazovaný dokument. |
Príklad použitia:
<a href="http://kiwiki.fmtnuni.sk">KiWiKi</a> <br/>
<a href="#HTML hlavička">HTML hlavička</a>
Výsledok:
Zoznam
HTML element: <ul>, <ol>, <li>[6]
Funkcia:Na web stránku vkladá odrážkový zoznam
Poznámka:
- Číslovaný zoznam: značka <ol> (Ordened List)
- Nečíslovaný zoznam: značka <ul> (Unordened List)
- Položka zoznamu: <li> (List Item)
Nepovinné atribúty:
| Atribút | Hodnota | Popis |
|---|---|---|
| compact | compact | Neschválený atribútUrčuje, že zoznam by mal byť menší ako obvykle. |
| start | číslo | Neschválený atribút. Definuje začiatočné číslovanie. |
| type | 1,A,a,I,i,disc,square,circle | Neschválený atribút. Definuje typ odrážok, resp. číslovania. |
Príklad použitia:
<ol>
<li>Káva</li>
<li>Čaj</li>
<li>Mlieko</li>
</ol>
<ul>
<li>Káva</li>
<li>Čaj</li>
<li>Mlieko</li>
</ul>
Výsledok:
- Káva
- Čaj
- Mlieko
- Káva
- Čaj
- Mlieko
Tabuľka
| Atribút | Hodnota | Popis |
|---|---|---|
Príklad použitia:
Formulár
| Atribút | Hodnota | Popis |
|---|---|---|
Príklad použitia:
Kontajner
| Atribút | Hodnota | Popis |
|---|---|---|
Príklad použitia:
HTML farby
| Atribút | Hodnota | Popis |
|---|---|---|
Jazyk HTML definuje farby pomocou ich mien, pomeru farebných zložiek RGB (Červená, Zelená, Modrá) v percentuálnom pomere, alebo vyjadrením v hexadecimálnych číslach.
| Názov farby | HEX kód | Desiatkový kód | Ukážka |
|---|---|---|---|
| Čierna | #000000 | rgb(0,0,0) | |
| Červená | #FF0000 | rgb(255,0,0) | |
| Zelená | #00FF00 | rgb(0,255,0) | |
| Modrá | #0000FF | rgb(0,0,255) | |
| Žltá | #FFFF00 | rgb(255,255,0) | |
| Tyrkysová | #00FFFF | rgb(0,255,255) | |
| Purpurová | #FF00FF | rgb(255,0,255) | |
| Šedá | #C0C0C0 | rgb(192,192,192) | |
| Biela | #FFFFFF | rgb(255,255,255) |
HTML hlavička
Elementy v HTML hlavičke nie sú zobrazené na web stránke. Informácie, ktoré môžu byť umiestnené v hlavičke sú hlavne:
- metainformácie o stránke (jej tvorcovi, obsahu, ...)
- odkazy na súbory so štýlmi (CSS)
- odkazy na súbory s Javascriptovým kódom
- informácie o názve stránky
Príklad hlavičky HTML stránky
<html>
<head>
<title>Názov stránky</title>
<link type="text/css" href="styl.css" rel="stylesheet"/>
<meta name="description" content="internetove technologie" />
</head>
...
</html>
Vloženie externých súborov do HTML
Vloženie CSS štýlov
Vloženie skriptovacieho kódu
Udalosti HTML elementov
Udalosti okna (window)
Udalosti myši
Udalosti formulára
Udalosti klávesnice
Zdroje a odkazy
- HTML 4.01 / XHTML 1.0 Reference (W3schools) http://www.w3schools.com/tags/
- ↑ element p - http://www.w3schools.com/tags/tag_p.asp
- ↑ element img - http://www.w3schools.com/tags/tag_img.asp
- ↑ element a - http://www.w3schools.com/tags/tag_a.asp
- ↑ Atribút rel - http://www.w3schools.com/tags/att_a_rel.asp
- ↑ Atribút rev - http://www.w3schools.com/tags/att_a_rev.asp
- ↑ element ul - http://www.w3schools.com/tags/tag_ul.asp
