HTML - značkovací jazyk: Rozdiel medzi revíziami

Z Kiwiki
Skočit na navigaci Skočit na vyhledávání
Riadok 156: Riadok 156:
 
!Popis
 
!Popis
 
|-
 
|-
−
|class
+
|'''class'''
 
|názov definovanej triedy pomocou CSS
 
|názov definovanej triedy pomocou CSS
 
|Trieda elementu
 
|Trieda elementu
 
|-
 
|-
−
|id
+
|'''id'''
 
|id označenie elementu
 
|id označenie elementu
 
|Unikátne id pre daný element
 
|Unikátne id pre daný element
 
|-
 
|-
−
|style
+
|'''style'''
 
|definícia štýlu
 
|definícia štýlu
 
|in-line definícia štýlu pre daný HTML element
 
|in-line definícia štýlu pre daný HTML element
 
|-
 
|-
−
|title
+
|'''title'''
 
|bublinka s popisom
 
|bublinka s popisom
 
|Text, ktorý sa zobrazí pri podržaní myši nad HTML elementom
 
|Text, ktorý sa zobrazí pri podržaní myši nad HTML elementom
Riadok 180: Riadok 180:
 
!Popis
 
!Popis
 
|-
 
|-
−
|dir
+
|'''dir'''
 
|lrt, rtr
 
|lrt, rtr
 
|smer textu (ltr-zľava doprava, rtl-sprava doľava)
 
|smer textu (ltr-zľava doprava, rtl-sprava doľava)
 
|-
 
|-
−
|lang
+
|'''lang'''
 
|kód jazyka
 
|kód jazyka
 
|Hovorí o (prirodzenom) jazyku, v ktorom je obsah HTML elementu napísaný
 
|Hovorí o (prirodzenom) jazyku, v ktorom je obsah HTML elementu napísaný
Riadok 196: Riadok 196:
 
!Popis
 
!Popis
 
|-
 
|-
−
|accesskey
+
|'''accesskey'''
 
|znak
 
|znak
 
|Nastaví klávesovú skratku pre prístup k danému HTML elementu
 
|Nastaví klávesovú skratku pre prístup k danému HTML elementu
 
|-
 
|-
−
|tabindex
+
|'''tabindex'''
 
|číslo
 
|číslo
 
|nastaví poradie získavania fokusu, resp. poradie elementov.
 
|nastaví poradie získavania fokusu, resp. poradie elementov.
Riadok 225: Riadok 225:
  
 
'''Výsledok:'''
 
'''Výsledok:'''
−
<div style="background-color:#FFFF66">
+
<div style="border:1px solid green">
 
<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="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="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>
Riadok 245: Riadok 245:
 
!Popis
 
!Popis
 
|-
 
|-
−
|src
+
|'''src'''
 
|URL
 
|URL
 
|adresa súboru s obrázkom
 
|adresa súboru s obrázkom
 
|-
 
|-
−
|alt
+
|'''alt'''
 
|text
 
|text
 
|Alternatívny text. Zobrazí sa, ak neexistuje obrázok.
 
|Alternatívny text. Zobrazí sa, ak neexistuje obrázok.
Riadok 261: Riadok 261:
 
!Popis
 
!Popis
 
|-
 
|-
−
|align
+
|'''align'''
 
|top
 
|top
 
bottom
 
bottom
Riadok 269: Riadok 269:
 
|<span style="color:red">Neschválený atribút</span>. Definuje zarovnanie obrázku vzhľadom na susedné elementy.
 
|<span style="color:red">Neschválený atribút</span>. Definuje zarovnanie obrázku vzhľadom na susedné elementy.
 
|-
 
|-
−
|border
+
|'''border'''
 
|pixely
 
|pixely
 
|<span style="color:red">Neschválený atribút</span>. Definuje hrúbku orámovania.
 
|<span style="color:red">Neschválený atribút</span>. Definuje hrúbku orámovania.
Riadok 278: Riadok 278:
 
|Definuje výšku obrázka.
 
|Definuje výšku obrázka.
 
|-
 
|-
−
|hspace
+
|'''hspace'''
 
|pixely
 
|pixely
 
|<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj naľavo a naprav od obrázku.
 
|<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj naľavo a naprav od obrázku.
 
|-
 
|-
−
|vspace
+
|'''vspace'''
 
|pixely
 
|pixely
 
|<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj hore a dole od obrázku.
 
|<span style="color:red">Neschválený atribút</span>. Definuje priehľadný okraj hore a dole od obrázku.
 
|-
 
|-
−
|width
+
|'''width'''
 
|pixely
 
|pixely
 
%
 
%
Riadok 317: Riadok 317:
 
!Popis
 
!Popis
 
|-
 
|-
−
|href
+
|'''href'''
 
|URL
 
|URL
 
|Definuje cieľ odkazu
 
|Definuje cieľ odkazu
 
|-
 
|-
−
|name
+
|'''name'''
 
|Názov sekcie
 
|Názov sekcie
 
|Definuje názov lokálneho odkazu
 
|Definuje názov lokálneho odkazu
 
|-
 
|-
−
|rel <ref>Atribút rel - http://www.w3schools.com/tags/att_a_rel.asp</ref>
+
|'''rel''' <ref>Atribút rel - http://www.w3schools.com/tags/att_a_rel.asp</ref>
 
|text
 
|text
 
|Určuje vzťah medzi aktuálnym dokumentom a odkazovaným dokumentom
 
|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>
+
|'''rev''' <ref>Atribút rev - http://www.w3schools.com/tags/att_a_rev.asp</ref>
 
|text
 
|text
 
|Určuje vzťah medzi prepojeným dokumentom a aktuálnym dokumentom
 
|Určuje vzťah medzi prepojeným dokumentom a aktuálnym dokumentom
 
|-
 
|-
−
|target
+
|'''target'''
 
|_blank
 
|_blank
 
_parent
 
_parent
Riadok 348: Riadok 348:
  
 
'''Výsledok:'''
 
'''Výsledok:'''
−
<div style="background-color:#FFFF66">
+
<div style="border:1px solid green">
 
[http://kiwiki.fmtnuni.sk KiWiKi]
 
[http://kiwiki.fmtnuni.sk KiWiKi]
  
Riadok 370: Riadok 370:
 
!Popis
 
!Popis
 
|-
 
|-
−
|compact
+
|'''compact'''
 
|compact
 
|compact
 
|<span style="color:red">Neschválený atribút</span>Určuje, že zoznam by mal byť menší ako obvykle.
 
|<span style="color:red">Neschválený atribút</span>Určuje, že zoznam by mal byť menší ako obvykle.
 
|-
 
|-
−
|start
+
|'''start'''
 
|číslo
 
|číslo
 
|<span style="color:red">Neschválený atribút</span>. Definuje začiatočné číslovanie.
 
|<span style="color:red">Neschválený atribút</span>. Definuje začiatočné číslovanie.
 
|-
 
|-
−
|type
+
|'''type'''
 
|1,A,a,I,i,disc,square,circle
 
|1,A,a,I,i,disc,square,circle
 
|<span style="color:red">Neschválený atribút</span>. Definuje typ odrážok, resp. číslovania.
 
|<span style="color:red">Neschválený atribút</span>. Definuje typ odrážok, resp. číslovania.
Riadok 397: Riadok 397:
 
</source>
 
</source>
 
'''Výsledok:'''
 
'''Výsledok:'''
−
<div style="background-color:#FFFF66">
+
<div style="border:1px solid green">
  
 
#Káva
 
#Káva
Riadok 409: Riadok 409:
 
</div>
 
</div>
 
===Tabuľka===
 
===Tabuľka===
 +
'''HTML element''': <nowiki><table></nowiki><ref>table - http://www.w3schools.com/tags/tag_table.asp</ref>
 +
 +
'''Funkcia:'''Na web stránku vkladá tabuľku
 +
 
{|class="wikitable"
 
{|class="wikitable"
 +
|+ Element Table
 
|-
 
|-
 
!Atribút
 
!Atribút
Riadok 415: Riadok 420:
 
!Popis
 
!Popis
 
|-
 
|-
−
|
+
|'''align'''
−
|
+
|left
−
|
+
center
 +
right
 +
|<span style="color:red">Neschválený atribút</span>. Zarovnanie tabuľky.
 +
|-
 +
|'''border'''
 +
|pixely
 +
|Hrúbka orámovania tabuľky.
 +
|-
 +
|'''cellpadding'''
 +
|pixely
 +
|Odsadenie medzi obsahom bunky okrajom bunky.
 +
|-
 +
|'''cellspacing'''
 +
|pixely
 +
|Medzera medzi bunkami tabuľky
 +
|-
 +
|'''rules'''
 +
|none
 +
groups
 +
rows
 +
cols
 +
all
 +
|Definuje ktoré časti vnútorného okraja budú viditeľné
 +
|-
 +
|'''summary'''
 +
|text
 +
|Sumarizácia obsahu tabuľky
 +
|-
 +
|'''width'''
 +
|pixely
 +
%
 +
|Širka tabuľky
 +
|}
 +
 
 +
'''HTML element''': <nowiki><tr></nowiki><ref>tr - http://www.w3schools.com/tags/tag_tr.asp</ref>
 +
 
 +
'''Funkcia:'''V rámci tabuľky definuje riadok tabuľky.
 +
 
 +
{|class="wikitable"
 +
|+ Element tr
 +
|-
 +
!Atribút
 +
!Hodnota
 +
!Popis
 +
|-
 +
|'''align'''
 +
|right
 +
left
 +
 
 +
center
 +
justify
 +
char
 +
|Zarovanie obsahu v riadku tabuľky
 +
|-
 +
|'''char'''
 +
|znak
 +
|Zarovná obsah v tabuľke na daný znak.
 +
|-
 +
|'''charoff'''
 +
|číslo
 +
|Nastaví počet znakov. Obsah bude zarovnaný od znaku definovanom v atribúte char.
 +
|-
 +
|'''valign'''
 +
|top
 +
 
 +
middle
 +
 
 +
bottom
 +
 
 +
baseline
 +
|Vertikálne zarovnanie riadku tabuľky.
 +
|}
 +
 
 +
'''HTML element''': <nowiki><td></nowiki><ref>tr - http://www.w3schools.com/tags/tag_td.asp</ref>
 +
 
 +
'''Funkcia:'''V rámci riadka tabuľky definuje bunku tabuľky.
 +
 
 +
{|class="wikitable"
 +
|+ Element td
 +
|-
 +
!Atribút
 +
!Hodnota
 +
!Popis
 +
|-
 +
|'''abbr'''
 +
|text
 +
|Určuje skrátenú verziu obsahu v bunke
 +
|-
 +
|'''align'''
 +
|left
 +
right
 +
 
 +
center
 +
 
 +
justify
 +
 
 +
char
 +
|Zarovná obsah v bunke tabuľky
 +
|-
 +
|'''char'''
 +
|znak
 +
|Zarovná obsah v bunke tabuľky na daný znak.
 +
|-
 +
|'''charoff'''
 +
|číslo
 +
|Nastaví počet znakov. Obsah bude zarovnaný od znaku definovanom v atribúte char.
 +
|-
 +
|'''colspan'''
 +
|číslo
 +
|Definuje počet stĺpcov, ktoré budú zlúčené
 +
|-
 +
|'''rowspan'''
 +
|číslo
 +
|Definuje počet riadkov, ktoré budú zlúčené
 +
|-
 +
|'''height'''
 +
|pixely
 +
%
 +
|<span style="color:red">Neschválený atribút</span>. Nastaví výšku bunky tabuľky.
 +
|-
 +
|'''scope'''
 +
|col
 +
colgroup
 +
row
 +
 
 +
rowgroup
 +
|Definuje spôsob, ako spojiť hlavičky buniek a dáta buniek v tabuľke
 +
|-
 +
|'''valign'''
 +
|top
 +
middle
 +
 
 +
bottom
 +
 
 +
baseline
 +
|Vertikálne zarovnanie obsahu bunky tabuľky
 +
|-
 +
|'''width'''
 +
|pixely
 +
%
 +
|<span style="color:red">Neschválený atribút</span>. Nastaví šírku bunky tabuľky.
 
|}
 
|}
−
Príklad použitia:
+
 
 +
Príklady použitia:
 +
<source lang="html4strict">
 +
<table border="1">
 +
  <tr>
 +
    <th>Mesiac</th>
 +
    <th>Úspory</th>
 +
  </tr>
 +
  <tr>
 +
    <td>Január</td>
 +
    <td>100 €</td>
 +
  </tr>
 +
</table>
 +
</source>
 +
 
 +
<div style="border:1px solid green;padding:10px">
 +
<table border="1">
 +
  <tr>
 +
    <th>Mesiac</th>
 +
    <th>Úspory</th>
 +
  </tr>
 +
  <tr>
 +
    <td>Január</td>
 +
    <td>100 €</td>
 +
  </tr>
 +
</table>
 +
</div>
 +
 
 
<source lang="html4strict">
 
<source lang="html4strict">
 +
<table border="1" cellpadding="10" cellspacing="0">
 +
  <tr>
 +
    <th>Mesiac</th>
 +
    <th>Úspory</th>
 +
  </tr>
 +
  <tr>
 +
    <td>Január</td>
 +
    <td rowspan="2" align="right">100 €</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Február</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Marec</td>
 +
    <td>100 €</td>
 +
  </tr>
 +
  <tr>
 +
    <td colspan="2">ostatné...</td>
 +
  </tr>
 +
</table>
 
</source>
 
</source>
 +
 +
<div style="border:1px solid green;padding:10px">
 +
<table border="1" cellpadding="10" cellspacing="0">
 +
  <tr>
 +
    <th>Mesiac</th>
 +
    <th>Úspory</th>
 +
  </tr>
 +
  <tr>
 +
    <td>Január</td>
 +
    <td rowspan="2" align="right">100 €</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Február</td>
 +
  </tr>
 +
  <tr>
 +
    <td>Marec</td>
 +
    <td>100 €</td>
 +
  </tr>
 +
  <tr>
 +
    <td colspan="2">ostatné...</td>
 +
  </tr>
 +
</table>
 +
</div>
 +
 
===Formulár===
 
===Formulár===
 
{|class="wikitable"
 
{|class="wikitable"
Riadok 436: Riadok 652:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
</source>
 
</source>
 +
<div style="border:1px solid green">
 +
</div>
 
===Kontajner===
 
===Kontajner===
 
{|class="wikitable"
 
{|class="wikitable"
Riadok 450: Riadok 668:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
</source>
 
</source>
 +
<div style="border:1px solid green">
 +
</div>
 
==HTML farby==
 
==HTML farby==
 
{|class="wikitable"
 
{|class="wikitable"

Verzia zo dňa a času 10:58, 21. september 2010

Webovské technológie

HTML

CSS - kaskákové štýly

JavaScript

PHP

XML

Google API

Java

Java applety

Java servlety

Webové služby

.NET framework

ASP .NET

Imbox draft.png
 Toto je projekt, na ktorom sa ešte stále pracuje!!

Aj keď sú v tomto dokumente použiteľné informácie, ešte nie je dokončený. Svoje návrhy môžete vyjadriť v diskusii o tejto stránke.

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

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

Tabuľka základných HTML značiek
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)

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

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="right">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:

Wiki praca.png Wiki praca 200.png

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:

KiWiKi

#HTML hlavička

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:

  1. Káva
  2. Čaj
  3. Mlieko
  • Káva
  • Čaj
  • Mlieko

Tabuľka

HTML element: <table>[7]

Funkcia:Na web stránku vkladá tabuľku

Element Table
Atribút Hodnota Popis
align left

center right

Neschválený atribút. Zarovnanie tabuľky.
border pixely Hrúbka orámovania tabuľky.
cellpadding pixely Odsadenie medzi obsahom bunky okrajom bunky.
cellspacing pixely Medzera medzi bunkami tabuľky
rules none

groups rows cols all

Definuje ktoré časti vnútorného okraja budú viditeľné
summary text Sumarizácia obsahu tabuľky
width pixely

%

Širka tabuľky

HTML element: <tr>[8]

Funkcia:V rámci tabuľky definuje riadok tabuľky.

Element tr
Atribút Hodnota Popis
align right

left

center justify char

Zarovanie obsahu v riadku tabuľky
char znak Zarovná obsah v tabuľke na daný znak.
charoff číslo Nastaví počet znakov. Obsah bude zarovnaný od znaku definovanom v atribúte char.
valign top

middle

bottom

baseline

Vertikálne zarovnanie riadku tabuľky.

HTML element: <td>[9]

Funkcia:V rámci riadka tabuľky definuje bunku tabuľky.

Element td
Atribút Hodnota Popis
abbr text Určuje skrátenú verziu obsahu v bunke
align left

right

center

justify

char

Zarovná obsah v bunke tabuľky
char znak Zarovná obsah v bunke tabuľky na daný znak.
charoff číslo Nastaví počet znakov. Obsah bude zarovnaný od znaku definovanom v atribúte char.
colspan číslo Definuje počet stĺpcov, ktoré budú zlúčené
rowspan číslo Definuje počet riadkov, ktoré budú zlúčené
height pixely

%

Neschválený atribút. Nastaví výšku bunky tabuľky.
scope col

colgroup row

rowgroup

Definuje spôsob, ako spojiť hlavičky buniek a dáta buniek v tabuľke
valign top

middle

bottom

baseline

Vertikálne zarovnanie obsahu bunky tabuľky
width pixely

%

Neschválený atribút. Nastaví šírku bunky tabuľky.

Príklady použitia: 

<table border="1">
  <tr>
    <th>Mesiac</th>
    <th>Úspory</th>
  </tr>
  <tr>
    <td>Január</td>
    <td>100 €</td>
  </tr>
</table>
Mesiac Úspory
Január 100 € 
<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th>Mesiac</th>
    <th>Úspory</th>
  </tr>
  <tr>
    <td>Január</td>
    <td rowspan="2" align="right">100 €</td>
  </tr>
  <tr>
    <td>Február</td>
  </tr>
  <tr>
    <td>Marec</td>
    <td>100 €</td>
  </tr>
  <tr>
    <td colspan="2">ostatné...</td>
  </tr>
</table>
Mesiac Úspory
Január 100 €
Február
Marec 100 €
ostatné...

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.

Tabuľka vybraných HTML farieb
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

  1. ↑ element p - http://www.w3schools.com/tags/tag_p.asp
  2. ↑ element img - http://www.w3schools.com/tags/tag_img.asp
  3. ↑ element a - http://www.w3schools.com/tags/tag_a.asp
  4. ↑ Atribút rel - http://www.w3schools.com/tags/att_a_rel.asp
  5. ↑ Atribút rev - http://www.w3schools.com/tags/att_a_rev.asp
  6. ↑ element ul - http://www.w3schools.com/tags/tag_ul.asp
  7. ↑ table - http://www.w3schools.com/tags/tag_table.asp
  8. ↑ tr - http://www.w3schools.com/tags/tag_tr.asp
  9. ↑ tr - http://www.w3schools.com/tags/tag_td.asp
Zdroj: „http://www.kiwiki.info/index.php?title=HTML_-_značkovací_jazyk&oldid=7144“