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

Verzia zo dňa a času 08:23, 21. september 2010

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

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:

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:

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.

Tabuľka vybraných HTML farieb
Názov farby	HEX kód	Desiatkový kód
Č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

[1] t p - http://www.w3schools.com/tags/tag_p.asp

[2] t img - http://www.w3schools.com/tags/tag_img.asp

[3] t 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] t ul - http://www.w3schools.com/tags/tag_ul.asp

[1]

[2]

[3]

[4]

[5]

[6]

@@ Riadok 221: / Riadok 221: @@
 <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>
+<p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
 </source>
@@ Riadok 228: / Riadok 228: @@
 <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>
+<p align="right">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===
 '''HTML element''': <nowiki><img></nowiki><ref>element img - http://www.w3schools.com/tags/tag_img.asp</ref>

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

Verzia zo dňa a času 08:23, 21. september 2010

Obsah

HTML tagy

Pravidlá pre HTML značky

Základné HTML značky

Všeobecne použiteľné atribúty

Odstavec

Obrázok

Odkaz

Zoznam

Tabuľka

Formulár

Kontajner

HTML farby

HTML hlavička

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

Navigačné menu

Osobné nástroje

Menné priestory

Varianty

Zobrazenia

Viac

Hľadať

Navigácia

Rýchle linky

Nástroje