43646
TWS-HTML
WWW vysvetlivky
- HTML (HyperText Markup Language) - jazyk pre tvorbu webovských stránok.
- CSS (Cascading Style Sheets) - jazyk pre formátovanie elementov HTML.
- JPEG (Joint Photographic Experts Group) - formát pre záznam statických obrázkov. Kompresia so stratou kvality.
- MPEG (Motion Picture Experts Group) - formát pre záznam videosekvencií. Kompresia so stratou kvality.
- URL (Uniform Resource Locator) - univerzálny ukazovateľ na objekt prístupný na internete (napr.: http://www.zoznam.sk/index.htm)
- WWW (World Wide Web = celosvetová pavučina) - služba pre interaktívny prístup k dátam na Internete.
ZÁKLADY JAZYKA HTML
Vývoj jazyka HTML koordinuje konzorcium W3C (www.w3c.org).
Základné kamene
►TAG
Tag (štítok, menovka) je kľúčové slovo HTML uzavreté do špicatých zátvoriek (<body>).
- Párové tagy - 2 rovnaké tagy medzi ktorými je uzavretý obsah
<head> hlavička dokumentu </head>
- Nepárové tagy - jeden tag s parametrami. Podľa štandardu HTML 4.01 Strict sa končí vždy lomítkom.
<img src="obraz.gif" />
Textové reťazce sú uzavreté v úvodzovkách " ".
►LINK
Link = hyperlink = odkaz na inú stránku, alebo objekt.
Základné časti stránky
Štruktúra stránky (poznámky sú v zátvorkách <!-- -->) :
na začiatku je typ dokumentu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
alebo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Formát Transitional je menej prísny a povoľuje aj príkazy, ktoré sú už v špecifikácii HTML 4.01 zakázané, ale v HTML verzie 3 boli povolené.
<html> <!-- začiatok textu vo formáte HTML -->
<head> <!-- začiatok hlavičky -->
</head> <!-- koniec hlavičky -->
<body> <!-- začiatok tela strany - vlastný zobrazovaný obsah -->
</body> <!-- koniec tela strany -->
</html> <!-- koniec textu vo formáte HTML -->
<!-- --> - komentár
<!-- komentár -->
Komentár na ľubovoľnom mieste HTML dokumentu.
Môže byť ešte použitý ako premenná pre server SSI - Server Side Includes:
<!--#var ... -->
<head>
Položky v sekcii HEAD sa nezobrazujú, okrem TITLE, ktorý sa zobrazuje v hlavnej lište okna prehliadača (modrý pás úplne navrchu okna).
<title>
<title>text</title>
Text popisujúci stručne obsah stránky.
Správny titulok je dôležitý, pretože indexovacie stroje priraďujú týmto slovám vysokú prioritu.
<base />
<base href="http://www.myhost.com/" />
Základná adresárová cesta. Ďalšie odkazy môžu byť potom zjednodušené. Príklad :
<img src="obrazky/logo.gif" alt="nazov">
<meta />
<meta name="typ informácie" content="informácia" />
<meta http-equiv="typ informácie" content="informácia" />
pomocné informácie o dokumente - kľúčové slová, indexy, identifikácia.
vyhľadávacie služby indexujú dokument podľa údajov v tomto tagu. príklad :
<meta name="description" content="informácie o produktoch.">
<meta name="keywords" content="servis, pc, hw, sw">
<meta name="author" content="moje meno">
<meta name="revised" content="dátum poslednej úpravy: 23/03/2012" />
<meta name="copyright" content="©2012 mojemeno" />
<meta name="robots" content="noindex" />
<meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT" />
<meta http-equiv="content-type" content="text/html;charset=windows-1250" />
<meta http-equiv="refresh" content="30" />
<script>
<script>Programový kód scriptu</script>
Definícia script programov. Sú písané v inom jazyku, ako je HTML a CSS.
<style>
<style>Definícia kaskádových štýlov</style>
Interná definícia kaskádových štýlov.
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style><link>
Tento príkaz definuje vzťah medzi HTML súborom a externým zdrojom. Príklady:Definícia externého súboru pre kaskádové štýly:
<link href="styles.css" type="text/css" rel="stylesheet" />Definícia súboru pre ikonu zobrazujúcu sa v prehliadači:
<link rel="shortcut icon" href="grafx/favicon.ico" />
Rozmery ikony: štandard 57x57 bodov, pre iPhone4 114x114 bodov, pre iPad a iPad2 72x72 bodov a pre iPad3 144x144 bodov.<body>
Táto sekcia obsahuje všetko, čo sa zobrazuje na stránke.
<body style="background:color; color:color;">
Uzatvára v sebe celú zobrazovanú stránku a pomocou parametrov definuje jej vlastnosti (ako napr. farba textu a farba pozadia).
background:rgb(200,200,200); Farba pozadia (default=White).
color:#000000; Základná farba textu (default=Black).
Zadávanie farieb
Farby sa zadávajú buď menom, dekadicky alebo hexa hodnotou RGB palety:
color:white; color:rgb(255,255,255); color:#FFFFFF;
Základné farby :
black = #000000 čierna green = #008000 zelená
gray = #808080 šedá olive = #808000 olivovo zelená
silver = #c0c0c0 svetlošedá lime = #00ff00 neónová zelená
white = #ffffff biela yellow = #ffff00 žltá
red = #ff0000 červená blue = #0000ff základná modrá
maroon = #800000 gaštanovo hnedý navy = #000080 tmavomodrá
purple = #800080 tmavofialová teal = #008080 modrozelená
fuchsia = #ff00ff svetlofialová aqua = #00ffff svetlomodrá
Pomocné formátovacie prvky
<hr> - horizontal rule (vodorovná čiara)
<hr style="width:200px; height:10px; color:blue; background:red;" />
height Hrúbka linky v pixeloch.
width Šírka cez okno v pixeloch, alebo %.
color farba okraja
background farba pozadia
Odkazy - linky
<a> - anchor (kotva) - hyperlink
<a href="odkaz" name="indexová_zarážka">zobrazený text </a>
href hyperlink reference - odkaz na iný súbor, alebo iné miesto v dokumente.
name označenie miesta v aktuálnom dokumente (index) kde ukazuje odkaz v href.
Odkazy na externé súbory
Internetová adresa (URL) :
<a href="http://www.suvke.sk/">www.suvke.sk</a>
Zobrazenie : www.suvke.sk
Interný súbor na disku - *.HTML. Zvláda obidva druhy lomítok path/file = path\file :
<a href="/lib/test2.html">Test page 2. level</a>
Zobrazenie : Test page 2. level
Interný súbor na disku - *.* :
*.TXT Otvorí a načíta.
*.RTF Otvorí a načíta.
*.DOC Otvorí a načíta.
*.ZIP Spustí dialógové okno Open / Download.
*.EXE Spustí dialógové okno Run / Download.
Mail
<a href="mailto:john@yahoo.com?subject=Správa%20... &body=Telo%20správy">Test mail@</a>
Zobrazenie : Test mail@
Miesto medzier sa doporučuje používať %20.
Odkaz na miesto v aktuálnom dokumente
Ukazovátko na miesto v dokumente - text, ktorý začína znakom "#". Po kliknutí to preskočí na index :
<a href="#index1">Odkaz na index číslo 1</a>
Indexované miesto - zobrazí sa riadok, ktorý nasleduje za príkazom <A> :
<a name="#index1">Cieľ - Index číslo 1</a>
Je možné urobiť odkaz na indexované miesto v inom súbore :
<a href="test2.html#index2">File - test2.html - Index číslo 2</a>
Ďalšie parametre tagu <a>
title="text" Podrobnejší popis odkazu - zobrazí sa ak podržíš kurzor myši nad odkazom.
target="par" Pri kliknutí sa otvorí samostatné okno. Parametre :
_blank - odkaz je načítaný do nového okna prehliadača.
_self - odkaz je načítaný do rámu (frame) z ktorého bol odkaz vyvolaný.
_parent - odkaz je načítaný do okna, ktoré je nadriadené oknu aktuálnemu (príkaz FRAMESET, ten sa už ale nedoporučuje používať).
Top - odkaz je načítaný do okna s najvyššou prioritou.
<a href="http://www.superzoznam.sk/" title="superzoznam" target="_blank">www.superzoznam.sk</a>
Formátovanie textu
Tagy pre formátovanie textu sa môžu do seba vnárať.
Normálne je Enter (¶) na konci riadku ignorovaný.
Viac ako jedna medzera v texte je tiež ignorovaná - výsledok je iba jedna medzera.
Nadpisy
<hx> text </hx>
<h1>hlavný nadpis</h1>
6 úrovní h1(najväčší) .. h6 (najmenší). V praxi sa používajú h1 .. h3.
Počiatočné nastavenie hx : tučné písmo, zarovnaný doľava.
h1 spôsobí pri tlači zalomenie strany.
Text - odstavce
text <br /> Break - zalomenie riadku na konci.
<p> text </p> Paragraph - odstavec, zalomenie riadku na začiatku, zvislé odsadenie.
<div> text </div> Samostatné okno v rámci stránky.
<blockquote> text </blockquote> Blok textu odsadený zľava aj sprava, zvislé odsadenie.
Text - reťazec
<b> text </b> Bold.
<i> text </i> Italic.
<small> text </small> Písmo o 1 bod menšie ako okolie.
<big> text </big> Písmo o 1 bod väčšie ako okolie.
<sub> text </sub> Dolný index.
<sup> text </sup> Horný index (super).
<code> text </code> Text písaný písmom Courier (neproporciálny).
Font
<p style="font-family:názvy; color:color; font-size:10px;"> text </p>
size Relatívne zväčšenie/menšenie oproti základnej veľkosti +/- 1..7 (lepšie ako absolútna veľkosť).
font-family: Font. Uveď viac druhov fontov, ak by ich užívateľ nemal inštalované. Prvý font, ktorý nájde, použije. Príklady :
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Špeciálne znaky
&#xxx Znak, kde xxx=ASCII kód.
"<" < less then
">" > greather then
"&" & ampersand
"©" © copyright
" " &NBSP non-breaking space - tvrdá medzera
" " " " quote - úvodzovka
Zoznamy
<ul> - unnumbered list
<ul style="list-style-type:disc;">
<li>položka zoznamu</li>
<li>položka zoznamu</li>
</ul>
Odsadí odstavec o 3 znaky doprava, položky zoznamu sú uvedené odrážkou (bullet). Zvislé odsadenie zhora aj zdola.
list-style-type: Typ odrážky: disc = plná guľka, circle = prázdny kruh, square = štvorec, none = bez odrážky.
Pri vnorení odsadí ďalší zoznam a zmení mu bullet. Príklad :
HTML kód :
<ul>
<li>1. položka zoznamu</li>
<li>2. položka zoznamu</li>
<ul>
<li>2.1 položka</li>
<li>2.2 položka</li>
<ul>
<li>2.2.1 položka</li>
<li>2.2.2 položka</li>
</ul>
<li>2.3 položka</li>
</ul>
<li>3. položka zoznamu</li>
</ul>
Vzhľad :
- 1. položka zoznamu
- 2. položka zoznamu
- 2.1 položka
- 2.2 položka
- 2.2.1 položka
- 2.2.2 položka
- 2.3 položka
- 3. položka zoznamu
<ol> - ordered list
<ol style="list-style-type:decimal;">
<li>položka zoznamu</li>
<li>položka zoznamu</li>
</ol>
Rovnaké vlastnosti ako UL, len miesto bulletov sú čísla. Pri vnorení to len odsadí, ale nemení štýl číslovania. Zvislé odsadenie zhora aj zdola.
list-style-type: Typ číslovania: armenian; cjk-ideographic; decimal; decimal-leading-zero; georgian; hebrew; hiragana; hiragana-iroha; inherit; katakana; katakana-iroha; lower-alpha; lower-greek; lower-latin; lower-roman; upper-alpha; upper-latin; upper-roman
<dl> - definition list
<dl> <dt> pojem <dd> vysvetlenie pojmu </dl>
Zoznam pojmov. Zvislé odsadenie zhora aj zdola. Príklad :
HTML kód :
<dl>
<dt>pojem 1 <dd> vysvetlenie pojmu 1
<dt>pojem 1 <dd> vysvetlenie pojmu 1
</dl>
Vzhľad :
pojem 1
vysvetlenie pojmu 1
pojem 1
vysvetlenie pojmu 1
Obrázky
<img /> - image
<img src="názov_obrázku" alt="názov obrázku" width="200" height="100" style="..." />
Obvykle sa používajú obrázky typu:
.gif - 256 farieb, možná transparentnosť, bezstratová kompresia
.png - 16 miliónov farieb, možná transparentnosť, bezstratová kompresia
.jpg - 16 miliónov farieb, nemožná transparentnosť, stratová kompresia
Príkazy v style="..." :
vertical-align:middle; vertikálne zarovnanie na stred
vertical-align:top; vertikálne zarovnanie na vrchol
vertical-align:bottom; vertikálne zarovnanie na spodok
float:left; horizontálne zarovnanie vľavo, text ho obteká sprava.
float:right; horizontálne zarovnanie vpravo, text ho obteká zľava.
display:block;margin-left:auto;margin-right:auto; horizontálne zarovnanie na stred
width, height
... width="počet_pixlov" ...
Lepšie je nezadávať rozmery obrázku vôbec - vtedy sa vykreslí v pomere 1:1. Ak zadáš iný, ako skutočný rozmer obrázku, dochádza ku skresleniu.
alt - alternatívny text
... alt="text" ...
Zobrazuje sa :
- Počas načítania obrázku.
- Keď zaparkuješ na chvíľu kurzor myši nad obrázkom.
- Na mieste obrázku, ak máš vypnuté zobrazovanie obrázkov.
Je potrebné tento text zadať, špecifikácia HTML 4.01 Strict to vyžaduje!
Imagemapy
Ich používanie sa nedoporučuje, pretože ich ovládanie nemusí byť intuitívne. Ak je nutné ich použiť, dodržuj zásady :
- Ohranič regióny v imagemape, aby bolo jasné, kde je aktívna plocha. Obrázok sa môže meniť pri prechádzaní kurzora myši, ale to sú funkcie napísané v Jave, alebo v ActiveX.
- Vytvor imagemapu ako súhrn tlačítok - natiahnutie je rýchlejšie ako jednotlivé tlačítka po sebe (prehliadač musí vyslať samostatnú žiadosť pre každé tlačítko).
<map name="mapa">
<area shape="rect" coords="0,0,82,126" href="stranka1.htm" alt="obdĺžnik" />
<area shape="circle" coords="90,58,3" href="stranka2.htm" alt="kruh" />
<area shape="poly" coords="100,150,115,120,120,150" href="stranka3.htm" alt="trojuholník" />
</map><img src="obrazok.gif" width="145" height="126" alt="Obrazky" usemap="#mapa" />
Transparentnosť pozadia
Obrázky typu .GIF alebo .PNG môžu mať transparentné pozadie - použije sa priamo pozadie vytvorené na web stránke. Ideálne použitie je pre ikonky, malé obrázky alebo tlačítka. Transparentnosť je nutné nastaviť v grafickom programe pred uložením obrázku. V HTML kóde samotnom sa transparentnosť nenastavuje.
Vstupné formuláre
<form> - formulár
<form>
...
</form>
Vnorené do príkazu form sa používajú:
<fieldset> - okraj formuláru
<fieldset>
<legend>Názov</legend>
</fieldset>
<input> - vstup
<input type="type" src="url" align="align" checked="checked" maxlength="chars" name="name" size="chars" title="text" value="text">
name Meno premennej, ktorej sa priradí hodnota, ktorú zadal užívateľ. Vstup pre script.
TEXT - jednoriadkový string
<input type="text" size="30" maxlength="50" value="text">
Textové pole pre zadanie textového reťazca.
size Dĺžka políčka v znakoch.
maxlength Dĺžka reťazca v znakoch - môže byť väčší ako size.
value Defaultný text do políčka.
PASSWORD
<input type="password" size="30 maxlength="50" value="text">
Textové pole pre zadanie textového reťazca - miesto zadávaných znakov sa zobrazujú "*".
Parametre rovnaké ako pre INPUT TYPE="text".
BUTTON
<input type="button" value="text">
Tlačítko - stlačenie vyvolá script.
value Nápis na tlačítku - šírka tlačítka je daná šírkou textu, medzery sa rátajú všetky.
CHECKBOX - zaškrtávacie políčko
<input type="checkbox" checked="checked" value="text">
Zaškrtávacie políčko (¨ / þ).
checked Prednastavená hodnota - zaškrtnuté políčko (þ), ak zadáme checked="checked", ak nezadáme, bude prázdne políčko.
value Vracia serveru hodnotu, ktorú si užívateľ vybral.
RADIO - výberové políčko 1 z X
<input type="radio" name="name" checked="checked" value="text">
Radiobutton - výber 1 z X (¡ / ¤).
name Meno - identifikácia skupiny tlačítok.
checked Prednastavená hodnota - zaškrtnuté políčko (¤).
value Vracia serveru hodnotu, ktorú si užívateľ vybral.
IMAGE
<input type="image" src="picname.gif" alt="názov">
Obrázok ako tlačítko - stlačenie vyvolá script.
src Súbor s obrázkom.
alt Pomenovanie obrázku, ako pri tagu <IMG>.
RESET - návrat prednastavených hodnôt
<input type="reset" value="text">
Tlačítko - stlačenie vráti do textových políčok prednastavené hodnoty.
VALUE Nápis na tlačítku - šírka tlačítka je daná šírkou textu, medzery sa rátajú všetky.
SUBMIT - odoslanie formulára
<input type="submit" value="text">
Tlačítko - stlačenie odošle celý formulár serveru.
value Nápis na tlačítku - šírka tlačítka je daná šírkou textu, medzery sa rátajú všetky.
TEXTAREA - textové pole
<textarea cols="chars" rows="chars">default text</textarea>
Textové pole pre zadanie väčšieho textu.
cols Počet stĺpcov - šírka oblasti v znakoch.
rows Počet riadkov oblasti.
name Meno pre script.
wrap Spôsob zalamovania :
off - (default) text sa nezalamuje, zalomiť ho môžeš ručne cez [Enter].
virtual - text sa zalamuje, je ale odoslaný ako jeden reťazec.
physical - text sa zalamuje, na mieste zalomenia sa vloží znak konca riadku.
SELECT - roleta
<select name="name" size="3" multiple="multiple"> <option>item1</option>
<option>item2</option>
<option>item3</option>
</select>
Výber zo zoznamu prvkov.
name Meno pre script.
option Položka zoznamu.
optgroup Skupina položiek zoznamu.
multiple Možnosť vybrať viac prvkov zoznamu (Ctrl+klik myšou).
size Počet viditeľných riadkov v roletkovom menu.
<select>
<optgroup label="Prvá kategória áut">
<option value="Volvo">Volvo</option>
<option value="Saab">Saab</option>
</optgroup>
<optgroup label="Druhá kategória áut">
<option value="Mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>Tabuľky
<table>
<table width="width" border="pix" cellpadding="pix" cellspacing="pix" >obsah tabuľky</table>
Tabuľka - sadzba stránky do oddelených oblastí.
width Šírka tabuľky v pixeloch, alebo v percentách šírky okna.
border Šírka rámu tabuľky v pixeloch (šírka len vonkajšej tieňovanej časti). Rám je tieňovaný. Ak nie je uvedený - nie je rám.
cellpadding Vzdialenosť medzi okrajom bunky a jej obsahom v pixeloch (všetky strany naraz). Default=1.
cellspacing Určuje vzdialenosť medzi bunkami - vzdialenosť medzi vonkajšou (tieň) a vnútornou časťou rámu. Default = 2.
<tr> - table row - riadok tabuľky
<tr align="align" valign="align" border="pix" obsah riadku</tr>
Definícia jedného riadku tabuľky.
align Vodorovné zarovnanie textu v tabuľkách - left, right, center, justify, char. Default=left.
valign Zvislé zarovnanie textu v bunkách - top, bottom, middle, baseline. Default=middle.
middle - viacriadkové texty sú zarovnané na stred riadku.
top - viacriadkové texty sú zarovnané na vrch riadku.
bottom - viacriadkové texty sú zarovnané na spodok riadku.
baseline - ak sú v bunkách rôzne veľkosti fontov, sú zarovnané na spodok riadku.
<td> - table data - bunka tabuľky
<td align="horiz" valign="vertikal" colspan="cols" rowspan="rows" style="width:20px;height:30px;">obsah bunky</td>
Definícia jednej bunky.
align, valign Parametre sú nadradené definícii tabuľky aj riadku.
align Vodorovné zarovnanie textu v tabuľkách - left, right, center, justify, char. Default=left.
colspan Zlúčenie buniek vedľa seba. Default colspan=1.
colspan=3 - zlúči sa aktuálna bunka s ďalšími 2 vpravo.
rowspan Zlúčenie buniek pod sebou. Default rowspan=1.
rowspan=3 - zlúči sa aktuálna bunka s ďalšími 2 pod ňou.
width Šírka bunky v pixeloch, alebo v percentách šírky tabuľky (platí pre celý stĺpec).
height Výška bunky v pixeloch, alebo v percentách výšky tabuľky (platí pre celý riadok).
Príklad štandardnej tabuľky :
<table border="1">
<tr>
<td>1/1</td>
<td>1/2</td>
</tr>
<tr>
<td>2/1</td>
<td>2/2</td>
</tr>
</table>
<th> - Table Header - hlavička
Rovnaké parametre ako tag <TD>, ale písmo je implicitne tučné a vystredené.
<colgroup> - formátovanie stĺpcov
<colgroup align="align" valign="align" width="pix/%" span="cols" >
Formát buniek v jednom stĺpci. Je vo vnútri tagu <TABLE>, ale mimo tagu <TR>. Keď chceš formátovať iný ako prvý stĺpec, musíš pre každý stĺpec uviesť parameter <COLGROUP>.
Parametre :
align, width, valign - rovnaké parametre ako pri tagu <TD>.
span Počet nasledujúcich stĺpcov, na ktoré sa tieto pravidlá aplikujú. Default SPAN=1.
SPAN=2 - formátuje sa aktuálny stĺpec a ešte jeden vpravo.
Príklad :
Formátovanie 3. stĺpca :
<colgroup>
<colgroup>
<colgroup align="right">
To isté, len zjednodušené cez SPAN:
<colgroup span="2">
<colgroup align="right">
<caption> - legenda tabuľky
<caption>text legendy</caption>
Legenda - nadpis tabuľky. Je odsadený od tabuľky a zalomený tak že nikdy nepresahuje okraje tabuľky.