Tvorba www stránek v HTML a CSS

Transkript

Tvorba www stránek v HTML a CSS
Publikace vznikla v rámci projektu OPVK „Vyškolený pedagog – záruka kvalitní výuky“ na
Střední odborné škole veterinární, mechanizační a zahradnické a Jazykové škole s právem
státní jazykové zkoušky v Českých Budějovicích, reg. č. CZ.1.07/1.3.40/01.0007.
Ing. Roman Blábolil
České Budějovice, 2013
Jazyková korektura: Neprošlo jazykovou korekturou
Sazba: Ing. Roman Blábolil
© Ing. Roman Blábolil
-3-
OBSAH
1
Úvod ............................................................................................................................................................................. 4
2
WWW – hypertextový informační systém ................................................................................................... 5
3
Tvorba WWW stránek .......................................................................................................................................... 8
3.1
DTD .................................................................................................................................................................. 10
3.2
Základní struktura XHTML dokumentu ........................................................................................... 17
3.3
Metainformace XHTML dokumentu................................................................................................... 21
3.4
Layout (rozvržení) stránky.................................................................................................................... 22
4
Kaskádové styly - CSS ........................................................................................................................................ 31
4.1
Třídy ................................................................................................................................................................ 34
4.2
Délkové jednotky používané v CSS stylech ..................................................................................... 37
4.3
Barvy používané CSS stylech ............................................................................................................... 38
4.4
Nejpoužívanější atributy CSS stylů ..................................................................................................... 40
5
Typografické a formátovací značky ............................................................................................................. 50
6
Seznamy .................................................................................................................................................................. 52
7
Odkazy...................................................................................................................................................................... 59
8
Obrázky.................................................................................................................................................................... 61
9
Tabulky .................................................................................................................................................................... 63
10
Symboly .............................................................................................................................................................. 66
11
Zvuk a video ...................................................................................................................................................... 66
12
Rámy .................................................................................................................................................................... 67
13
Formuláře .......................................................................................................................................................... 69
-4-
1 ÚVOD
Tato publikace vznikla v rámci projektu OPVK „Vyškolený pedagog – záruka kvalitní výuky“.
Cílem publikace je zpracovat základní poznatky o tvorbě www stránek v HTML a CSS.
Publikace se bude zabývat těmito tématy:
Základní pojmy





Protokoly
URL
Client/server
Jak to vše funguje?
Jaká jména používat pro pojmenování souborů
Úvod do HTML



Co je to HTML a CSS
Co je to tag
Skladba HTML dokumentu (head, body)
Základní pravidla při práci s CSS




Vlastnosti a hodnoty
Deklarace
Třídy
Pseudotřídy
Jednotky a hodnoty


Barvy
Jednotky v CSS2
Práce s textem




Psaní prostého textu
Formátování písma (tučné, kurzíva, podtržené, horní a dolní index, velikost písma)
Psaní mezer
Typy písem
-5-

Barva písma
Práce s odstavci


Odstavec
Způsoby zarovnání textu
Odrážky a číslování
Obrázky

Formáty obrázků pro WEB (JPG, GIF, PNG)
Odkazy - hyperlinky






Relativní a absolutní URL
Práce s odkazy
Odkaz na www stránky a na e-mail
Obrázek jako odkaz
Nastavení „citlivých míst“ u obrázku - „klikací mapa“
Odkaz na záložku (bookmark)
2 WWW – HYPERTEXTOVÝ INFORMAČNÍ SYSTÉM
Nejpoužívanější a nejrozšířenější službou na Internetu je služba označovaná jako WWW
(World Wide Web) – celosvětová pavoučí síť. Pro využití této služby potřebujete takzvaný
prohlížeč - ten umí zdrojová data (text) převést do vizuální podoby a to včetně obrázků,
tabulek a dalších objektů, spuštění zvuku, videa a skriptů programovacího jazyka.
Tato služba je založena na principu hypertextových dokumentů. Základem hypertextu je
dokument, který obsahuje text, obrázky, video, zvuk a podobně. Tyto texty a objekty mohou
být propojeny jako odkazy na další dokumenty v rámci celé sítě Internet. Tyto dokumenty
mohou být prostřednictvím Internetu automaticky přeneseny ze vzdáleného počítače, ve
-6-
kterém jsou uloženy. Stačí jen stisknout na příslušném odkazu levé tlačítko myši. Takto
získané dokumenty obvykle obsahují další a další odkazy, takže v prohlížení hypertextových
dokumentů můžete neustále pokračovat.
Jednotlivé dokumenty jsou uloženy ve specializovaných počítačích tzv. WWW serverech,
které jsou připojeny k síti Internet. Tyto servery poskytují informace dalším počítačům
(klientům), které o ně požádají.
WWW dokumenty jsou psány v jazyce HTML (HyperText Markup Language). Takovýto
dokument obsahuje speciální příkazy, které určují jak se má dokument zobrazit na
obrazovce.
Chceme-li pracovat se službou WWW, musíme spustit program, který s touto službou umí
pracovat. Nejznámějšími a nejpoužívanějšími prohlížeči jsou v dnešní době Microsoft
Internet Explorer, Opera, FireFox a Safari.
Dále musíte znát adresu WWW serveru, který obsahuje požadovanou informaci. Protože
serverů je na Internetovou síť připojeno tisíce, je někdy při neznalosti adresy velmi obtížné
nalézt požadovanou informaci. Z tohoto důvodu jsou vytvořeny vyhledávací služby, které
vám usnadňují nalezení potřebné informace.
Kromě předchozí možnosti umožňuje služba WWW také přístup k dalším službám, jako je
elektronická pošta, přenos souborů a podobně.
Pro zobrazení informací pomocí služby WWW musíte zadat příslušnou URL adresu
k požadovanému dokumentu. Tvar URL adresy pro HTML dokumenty vypadá následovně:
http://www.DNS adresa počítače/adresářová cesta/požadovaný dokument
-7-
http://DNS adresa počítače/adresářová cesta/požadovaný dokument
Můžete také vyvolat HTML dokument, který je uložen na vašem lokálním disku:
file://disk:adresářová cesta/požadovaný soubor
Popis prohlížeče Microsoft Internet Explorer:
1
2
7
12
9
5
4
8
3
6
10
11
Obr. 1
1 – Zpět
Pokud kliknete na toto tlačítko, načte se předcházející stránka.
2 – Vpřed
Je to opak tlačítka Zpět. Toto tlačítko se používá k návratu na předcházející
stránku, kterou jste měli na obrazovce.
3 – Zastavit
Tímto tlačítkem přerušíte načítání aktuální stránky.
4 – Aktualizovat Tímto tlačítkem zajistíte, že se stránka znovu načte ze zdroje do vaší
operační paměti.
5 – Domů
Toto tlačítko zajistí načtení vaší domovské stránky.
6 – Hledat
Toto tlačítko zajistí spuštění webového vyhledávače.
7 – Oblíbené Tímto tlačítkem zobrazíte seznam vašich oblíbených stránek.
-8-
8 – Informační kanály Poskytují aktualizovaný obsah webových stránek.
9 – Záložky
Záložky označující načtené webové stránky.
10 – Tisk
Tímto tlačítkem zajistíte vytisknutí aktuálně otevřené stránky.
11 – Upravit Zvolením tohoto tlačítka otevřete program, kterým lze webové stránky
upravovat.
12 – Adresa
Do tohoto políčka můžete zapisovat požadované adresy webových stránek. Po
stisku klávesy Enter se stránka začne načítat.
3 TVORBA WWW STRÁNEK
Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka
HTML (Hypertext Markup Language). Mohou být použité i jiné programovací jazyky jako
XML, XHTML apod. Jednotlivým příkazům jazyka HTML se říká tagy (elementy) a vytvářený
soubor může mít podobu dokumentu bez formátovacích značek. Podle tagů prohlížeč
zobrazuje příslušné části dokumentu.
Tag může být buď párový – stejná značka je na začátku i na konci (koncová je doplněna o
symbol / - ukončení) nebo nepárový – má pouze jednu značku. Některé typy prohlížečů si
poradí s chybějícím ukončení tagů, jiné mají potíže při jejich zobrazení. Snažte se, aby vaše
internetové stránky byly bezchybné tzn. validní. Pro ověření bezchybnosti vašeho napsaného
kódu lze použít tzv. validátory. Nejznámější je validátor z konsorcia W3C –
http://validator.w3c.org. Výhodou je, že vám validítor zobrazí, na kterém programovém
řádku máte chybu.
V další části se budeme zabývat značkovacím jazykem XHTML.
-9-





XHTML je zkratkou EXtensible HyperText Markup Language
XHTML je vyvinut coby nástupce HTML
XHTML je téměř shodný se značkovacím jazykem HTML 4.01
XHTML je přísnější a čistější než jazyk HTML
XHTML je HTML definované jako aplikace XML
Podmínky pro používání značkovacího jazyka XHTML

Všechny značky musí být vzájemně správně vnořeny
<i><b>špatně</i></b>
<i><b>správně</b></i>

Všechny značky musí být ukončené koncovou značkou
<p>špatně
<p>správně</p>

U značek, u kterých není uzavírací značka, musíme danou značku uzavřít nejlépe
způsobem
<značka />
např.: <area /> <base /> <basefont /> <br /> <col /> <frame /> <hr />
<img /> <input /> <isindex /> <link /> <meta /> <param />

Všechny značka musíme psát malými písmeny
<A HREF="pokus.html">špatně</A>
<a href="pokus.html">správně</a>

Hodnoty atributů musí být v uvozovkách
<td colspan=2>špatně</td>
<td colspan="2">správně</td>
- 10 -

Používat externí skripty a šablony stylů
<script language="Javascript" src="pokus.js" type="text/javascript"></script>
<link rel="StyleSheet" type="text/css" href="index.css" />
Přísně oddělujte obsah stránek od formátování.
3.1
DTD
DTD (Document Type Definition) je jinými slovy návod pro prohlížeč zpracovávající
dokument. Říká mu, jaké elementy dokument používá a jak s nimi zacházet.
Jazyk XHTML má tři definice DTD, korespondující s definicemi pro HTML 4.01:



Strict (striktní)
Transitional (přechodnou)
Frameset (s podporou frames - rámců)
Každá z těchto definic definuje jinou sadu XHTML tagů. Element DOCTYPE není součástí
XHTML dokumentu, není elementem XHTML a nemusí mít tedy koncovou značku.
Strict
Tato definice obsahuje pouze plně podporované značky (události, atributy...) a jsou z ní
vypuštěné všechny ty nedoporučované. Přicházíme tak o řadu prvků pro formátování textu.
Toto formátování je možné nahradit pomocí kaskádových stylů (CSS) Cascading Style Sheets.
- 11 -
Striktní definice se deklaruje takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
Toto je definice nejméně bolestivá při přechodu do standardu XML. Definuje naprostou
většinu elementů HTML 4.01, tedy i ty nedoporučované. Její výhodou je možnost uplatnit v
maximální možné míře znalosti jazyka HTML, ale hlavně dostatečná podpora současných
prohlížečů.
Přechodná definice se deklaruje takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
Tuto definici je nutné použít, pokud pracujeme s frames (s rámečky). Ostatní elementy jsou
téměř totožné jako v definici Transitional.
Definice s podporou rámů se deklaruje takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- 12 -
SEZNAM ZNAČEK DEFINOVANÝCH V JEDNOTLIVÝCH DTD PRO XHTML 1.0.
(sloupec DTD strict – s, transitional – t, frameset – f)
Značka
Funkce
Kategorie
DTD
<html>
vymezuje dokument
struktura dokumentu
stf
<head>
definuje záhlaví dokumentu
záhlaví dokumentu
stf
<title>
definuje titulek dokumentu
záhlaví dokumentu
stf
<base />
určuje základní adresu pro relativní odkazy
záhlaví dokumentu
stf
<meta />
definuje doplňující informace o dokumentu
záhlaví dokumentu
stf
<link />
připojí jiný dokument
záhlaví dokumentu
stf
<style>
definuje styl formátující dokument
záhlaví dokumentu
stf
<script>
definuje v dokumentu skript
záhlaví dokumentu
stf
<noscript>
text uvnitř se zobrazí, když není podporazáhlaví dokumentu
skriptů
stf
<frameset>
definuje skupinu rámců
rámce
f
<frame />
definuje rámec
rámce
f
<iframe>
vloží do dokumentu rámec
rámce
tf
<noframes>
text uvnitř se zobrazí, když není podpora rámců rámce
tf
<body>
definuje tělo dokumentu
tělo dokumentu
stf
<div>
vytvoří nový oddíl dokumentu
tělo dokumentu
stf
<p>
vymezuje odstavec
odstavce
stf
<h1>
text uvnitř značky je nadpis úrovně 1
nadpisy
stf
- 13 -
Značka
Funkce
Kategorie
DTD
<h2>
nadpisy
stf
<h3>
nadpisy
stf
<h4>
nadpisy
stf
<h5>
nadpisy
stf
<h6>
nadpisy
stf
<ul>
definuje seznam s odrážkami
seznamy
stf
<ol>
definuje číslovaný seznam
seznamy
stf
<menu>
definuje seznam nabídek
seznamy
tf
<dir>
definuje seznam souborů či adresářů
seznamy
tf
<li>
vytvoří položku seznamu
seznamy
stf
<dl>
definuje seznam definicí
seznamy
stf
<dt>
uzavírá definici v seznamu definic
seznamy
stf
<dd>
uzavírá popis definice v seznamu definic
seznamy
stf
<address>
říká že text uvnitř je adresa
adresy
stf
<hr />
vloží do dokumentu vodorovný oddělovač
vodorovný oddělovač
stf
<pre>
zobrazí text přesně tak, jak je zapsán uvnitř
předformátované texty
stf
<blockquote>
označuje citaci bloku textu
bloky citace
stf
<center>
zarovná text uvnitř značky na střed
zarovnání textu
tf
<ins>
označí text uvnitř značky jako vložený text
vložené/smazané texty
stf
<del>
označuje odstraněnou část textu
vložené/smazané texty
stf
<a>
definuje propojení k jinému dokumentu
kotvy
stf
<span>
slouží pro určení stylu textu uvnitř značky
přímo vložené elementy
stf
- 14 -
Značka
Funkce
Kategorie
DTD
<bdo>
mění směr zobrazení textu ve značce
stf
<br />
zalomí řádek - odřádkuje
stf
<em>
zvýrazní text uvnitř značky
stf
<strong>
vypíše text uvnitř značky tučně
stf
<dfn>
označuje první výskyt pojmu v dokumentu
stf
<code>
text uvnitř značky je programový kód
stf
<samp>
označuje ukázku nebo příklad
stf
<kbd>
označuje text zapsaný na klávesnici
stf
<var>
text uvnitř značky je proměnná
stf
<cite>
text uvnitř značky je citace
stf
<abbr>
říká že text uvnitř je zkratka
stf
<acronym>
říká že text uvnitř je složené slovo
stf
<q>
označuje citaci
stf
<sub>
zobrazí text uvnitř značky jako dolní index
stf
<sup>
zobrazí text uvnitř značky jako horní index
stf
<tt>
zobrazí text neproporcionálním písmem
stf
<i>
text uvnitř značky zobrazí kurzívou
stf
<b>
zobrazí text uvnitř značky tučně
stf
<big>
zvětší velikost písma o jednu úroveň
stf
<small>
zmenší velikost písma o jednu úroveň
stf
<u>
zobrazí text uvnitř značky podtržený
tf
<s>
vypíše text uvnitř přeškrtnutý čárou
tf
- 15 -
Značka
Funkce
Kategorie
DTD
<strike>
vypíše text uvnitř přeškrtnutý čárou
tf
<basefont />
určuje základní font dokumentu
tf
<font>
nastaví vzhled písma
tf
<object>
vloží do dokumentu objekt
objekty
stf
<param />
definuje parametr značky
objekty
stf
<applet>
slouží ke stažení a spuštění appletu
java applet
tf
<img />
vloží do dokumentu obrázek
obrázky
stf
<map>
definuje obrázkovou mapu
obrázkové mapy
stf
<area />
definuje oblast v obrázkové mapě
obrázkové mapy
stf
<form>
vymezuje v dokumentu formulář
formuláře
stf
<label>
definuje popisek ovládacího prvku formuláře
formuláře
stf
<input />
vytvoří prvek formuláře
formuláře
stf
<select>
vytvoří ve formuláři nabídku
formuláře
stf
<optgroup>
vymezuje skupinu voleb nabídky
formuláře
stf
<option>
definuje položku nabídky
formuláře
stf
<textarea>
vytvoří textové pole ve formuláři
formuláře
stf
<fieldset>
vytvoří skupinu prvků ve formuláři
formuláře
stf
<legend>
definuje legendu ovládacích prvků formuláře
formuláře
stf
<button>
zobrazí tlačítko formuláře
formuláře
stf
<isindex />
zobrazí pole pro vyhledávání
formuláře
tf
<table>
vymezuje v dokumentu tabulku
tabulky
stf
<caption>
definuje titulek tabulky
tabulky
stf
- 16 -
Značka
Funkce
Kategorie
DTD
<thead>
vymezuje záhlaví tabulky
tabulky
stf
<tfoot>
vymezuje zápatí tabulky
tabulky
stf
<tbody>
definuje skupiny řádků tabulky
tabulky
stf
<colgroup>
definuje skupinu sloupců
tabulky
stf
<col />
definuje sloupec ve skupině sloupců
tabulky
stf
<tr>
definuje řádek buněk v tabulce
tabulky
stf
<th>
vytváří buňku v záhlaví tabulky
tabulky
stf
<td>
vytváří buňku tabulky
tabulky
stf
Vybrané atributy značek
Atribut
Funkce
style=""
Definuje přímo vložený styl obsahu značky
class=""
Definuje třídu stylu, specifikovanou uvnitř dokumentu
pomocí značky <style></style>, nebo v externím
souboru stylů připojeným značkou <link />
id=""
Definuje pro značku unikátní identifikátor (jméno), na
který je později možné se odvolávat JavaScriptem
lang=""
Definuje jazyk obsahu značky. Uvdává se jako
dvouznakový kód jazyka
dir=""
Udává směr zobrazení textu. Po našem "ltr", nebo
zprava doleva "rtl"
title=""
Definuje titulek značky
- 17 -
3.2
ZÁKLADNÍ STRUKTURA XHTML DOKUMENTU
Základní strukturu XHTML dokumentu můžeme rozdělit na hlavičku, kde najdete údaje o
pozadí stránky, autorovi, obsažených slovech, použitých barvách a jiné. Druhou částí je tělo
dokumentu – to obsahuje texty, obrázky, odkazy, tabulky a další zobrazované části
dokumentu. Pro oživení se ještě používají například skripty – jakési jednoduché programy.
Při zápisu tagů musíte používat malá písmena.
Aby vytvořená stránka byla přístupná na internetu, musíte hotovou stránku nahrát na
internetový server. Pokud nemáte vlastní internetový server, můžete využít nabízené
servery, které dávají prostor pro placené i neplacené služby, včetně domény, pod kterou
bude vaše stránka přístupná.
Placené služby většinou nabízí vyšší spolehlivost funkčnosti serveru, větší diskový prostor pro
uložení vašich internetových stránek, dokumentů a fotografií, pokročilé techniky – PHP,
MySQL, ASP a další. Ve freewarové verzi většinou máte k dispozici 10 MB diskového
prostoru, omezenou správu a bez možnosti používat databáze nebo skriptovací jazyky.
Pro tvorbu internetových stránek je ideální používat například program PSPad. Drobnou
nevýhodou pro méně zkušené uživatele je, že se musíte umět orientovat v kódu XHTML.
Velkou výhodou je, že programový kód máte pod svou kontrolou. Další možností je použít
program typu Wysiwyg – například Microsoft Front Page (placený program), Microsoft
Expression Web (placený program), KompoZer (neplacený program). S těmito porgramy se
pracuje podobně jako textovém editoru. Programový kód vygenerují za vás. Bohužel ne vždy
je programový kód bezchybný (validní) a optimalizovaný.
- 18 -
Optimální zápis základní struktury XHTML dokumentu
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="... obsah dokumentu.." />
<meta name="Author" content="vaše jméno" />
<title>Základní struktura</title>
<link rel="stylesheet" href="styl.css" type="text/css" />
</head>
<body>
</body>
</html>
- 19 -
Popis
(verze XHTML)
( DTD)
<html>
(začátek HTML dokumentu)
<head>
(začátek záhlaví - hlavičky)
(tzv. Meta informace - kódování textu)
(tzv. Meta informace - obsah dokumentu)
(tzv. Meta informace - autor stránek)
<title>Základní struktura</title>
(titulek v prohlížeči)
(odkaz na externí stylopis)
</head>
(konec záhlaví)
<body>
(začátek těla schránky)
</body>
(konec těla schránky)
</html>
(konec HTML dokumentu)
- 20 -
Vytvořená www stránka by měla být bez chyb tzn. validní a dle příslušných norem. Dále
musíte každou stránku optimalizovat pro nejpoužívanější internetové prohlížeče. Bohužel ne
vždy se bezchybně napsaná stránka zobrazí korektně v různých prohlížečích. Důvodem je
nedodržování standardů výrobci internetový prohlížečů.
Validaci (bezchybnost) svých stránek si nejlépe ověříte pomocí validátoru, např. na stránkách
http://validator.w3.org/.
Na těchto stránkách zadáte adresu vaší www stránky nebo na druhé záložce cestu k vašemu
www souboru. Po stisknutí tlačítka Check dojde ke kontrole souboru. Pokud nejsou
v souboru nalezeny žádné chyby, zobrazí se hlášení o bezchybnosti. V tomto případě máte
právo na svých stránkách použít ikony validátoru, které značí, že stránky neobsahují chyby.
Obr. 2
- 21 -
Pokud je na stránce nalezena nějaká chyba, validátor tuto chybu vypíše spolu s popisem
chyby a místem nalezení chyby. Tím lze nalezené chyby snadno opravit.
Obr. 3
3.3
METAINFORMACE XHTML DOKUMENTU
Metainformace podávají dplňující informace o dokumentu. Je to velmi významný element,
který by v žádném dokumentu neměl chybět.
Základní meta informace
Informace o typu dokumentu a použité znakové sadě
<meta http-equiv=“content-type“ content=“text/html; charset=“windows-1250“ />
(Pro správné zobrazení českých znaků se doporučuje používat znakovou sadu utf-8 nebo
windows-1250)
Anotace dokumentu
<meta name=“description“ content=“... obsah dokumentu..“ />
- 22 -
Klíčová slova
<meta name="Keywords" content="klíčová slova" />
Informace o autorovi
Přesměrování na jinou stránku
<meta http-equiv=“refresh“ content=“5; url=http://www.sosvaz.cz“ />
Zaindexování dokumentu vyhledávacím robotem
<meta name=“robots“ content=“index“ />
3.4
LAYOUT (ROZVRŽENÍ) STRÁNKY
Pro rozvržení stránky se dříve nejčastěji používala tabulka, protože jazyk HTML neměl žádné
univerzální značky pro tuto činnost. Při tvorbě rozvržení stránky pomocí CSS pozicování byly
vymezeny značky div a span. Tyto dva elementy jsou univerzální, můžeme obsah uvnitř nich
formátovat jakoukoliv vlastností CSS.
Tabulky nebyly, nejsou a nebudou určeny na rozvržení stránky. Tabulky se mají používat pro
formátování tabulkových údajů, jako jsou například různé statistiky nebo seznamy. Další
nevýhodou používání tabulek pro layout stránky je jejich pomalejší načítání.
- 23 -
Značka DIV
Tato značka nám ohraničí nějakou část stránky, která bude mít společné vlastnosti
nadefinované v CSS pomocí nějaké třídy. Do značky div můžeme vložit další (vnořený) div.
Značka div je bloková a hodí se nejlépe pro rozvržení stránky. Značka DIV před sebou a za
sebou udělá konec řádku.
Dvousloupcový layout se záhlavím a zápatím pomocí CSS
Obr. 4
- 24 -
Vlastní www stránka
<head>
<title>Layout stránky</title>
</head>
<body>
<div class="zahlavi">
<h1>Nadpis celé stránky</h1>
<p>text</p>
</div>
<div class="obsah">
<div class="levy">
<ul>
<li><a href="zaklad.html">položka</a></li>
</ul>
</div>
<div class="pravy">
<h2>Nadpis</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div class="zapati">
<p>© Ing. Blábolil</p>
- 25 -
</div>
</div>
</body>
</html>
Externí stylopis (styl.css)
body {
background-color: #BFBFBF;
font-size: 0.8em;
font-family: arial, helvetica, sans-serif;
}
.zahlavi {
margin: 5px auto 5px auto;
width: 890px;
border: 1px solid black;
background-color: #FFFFFF;
padding: 5px;
}
.obsah {
width: 900px;
background-color: #FFA500;
}
.levy {
float: left;
width: 100px;
}
.levy ul {
margin: 0px;
padding: 0px;
}
.levy li {
list-style-type: none;
border-bottom: 1px solid black;
padding: 0px;
background-color: yellow;
}
- 26 -
.levy a {
display: block;
color: black;
font-weight: bold;
text-decoration: none;
padding: 5px;
}
.levy a:hover {
background-color: #E5E5E5;
}
.pravy {
padding: 0px 10px 0px 10px;
float: right;
width: 779px;
background-color: white;
border-left: 1px solid black;
}
.zapati {
border-top: 1px solid black;
clear: both;
}
.zapati p {
padding: 5px;
margin: 0px;
text-align: center;
font-size: 0.8em;
}
- 27 -
Třísloupcový layout se záhlavím a zápatím pomocí CSS
Obr. 5
Vlastní www stránka
<head>
<link rel="stylesheet" href="styl2.css" type="text/css" />
</head>
<body>
<div class="zahlavi">
<h1>Nadpis celé stránky</h1>
<p>text</p>
- 28 -
</div>
<div class="obsah">
<div class="levy">
<ul>
</ul>
</div>
<div class="stredni">
<h2>Nadpis</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div class="pravy">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div class="zapati">
<p>© Ing. Blábolil</p>
</div>
</div>
</body>
</html>
Externí stylopis (styl2.css)
body {
background-color: #BFBFBF;
font-size: 0.8em;
font-family: arial, helvetica, sans-serif;
}
- 29 -
.zahlavi {
width: 890px;
background-color: #FFFFFF;
padding: 5px;
}
.obsah {
width: 900px;
background-color: #FFA500;
}
.levy {
float: left;
width: 100px;
}
.levy ul {
margin: 0px;
padding: 0px;
}
.levy li {
list-style-type: none;
border-bottom: 1px solid black;
padding: 0px;
}
.levy a {
display: block;
color: black;
font-weight: bold;
text-decoration: none;
padding: 5px;
}
.levy a:hover {
background-color: #E5E5E5;
}
.stredni {
- 30 -
float: left;
width: 678px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.pravy {
float: right;
width: 80px;
}
.zapati {
border-top: 1px solid black;
clear: both;
}
.zapati p {
padding: 5px;
margin: 0px;
text-align: center;
font-size: 0.8em;
}
Značka SPAN
Značka span není značkou blokovou, ale značkou řádkovou.. Pomocí této značky můžeme
formátovat určitou část textu (viz. kapitola „Filtry“). Značka SPAN nemůže v sobě obsahovat
blokové značky. Tuto značku použijeme například tehdy, pokud budete chtít mít kousek
textu, nad kterým se při přejetí myši zobrazí nápověda. To se dělá pomocí atributu title.
- 31 -
Příklad:
Normální text a najednou <span title="text bubliny">text, který má bublinu</span>.
4 KASKÁDOVÉ STYLY - CSS
Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný
vzhled publikovaných stránek. Technologii CSS podporují prohlížeče od verze IE 4.0.
CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových
stránek. Výhodou je, že lze oddělit formátování stránky do samostatného souboru.
Nástin možností CSS













Nastavení libovolné a přesné velikost písma, prokládání, kapitálek;
Odsazení prvního řádku odstavce, zvětšení řádkování;
Zrušení nebo zvětšení prázdného prostoru po odstavci;
Automatické formátování nadpisů;
Zvýrazňování odkazů po přejetí myší;
Automaticky grafické odrážky;
Zneviditelnění, zprůhlednění nebo nezobrazení určité části textu;
Předefinování grafického významu běžných tagů;
Nastavení pozadí čehokoliv;
Umístění libovolného objektu kamkoliv do stránky;
Přidání rolovacích lišt;
Orámování a nastavení okrajů;
Dynamické prvky na stránce.
- 32 -
CSS styl můžete definovat třemi způsoby:
1) in-line zápis (přímý zápis) – slouží k nastavení parametrů konkrétní značky. Za
požadovanou značkou se použije parametr STYLE=“ “. Hodnotou tohoto parametru je
seznam atributů, které tuto značku ovlivní.
<p style="color: red">Tento odstavec bude červený.</p>
2) stylopis – zapisuje se v hlavičce HTML stránky párovou značkou <style>. Uvnitř této
značky se definuje značka, kterou chcete nastavit a ve složených závorkách za touto
značkou je seznam atributů. Jednotlivé atributy se oddělují středníkem. Tento stylopis
se používá pro nastavení jedné WWW stránky.
<style>
p { color: red; }
h1 { font-size: 20pt; color: blue; }
</style>
3) externí stylopis – používá se pro více WWW stránek. Na těchto stránkách je
zaručen
stejný vzhled. Tento stylopis je tvořen externím souborem (např.
styl.css), vněmž je styl
definován. WWW stránka musí obsahovat link na tento
soubor. Pro přehlednost a budoucí úpravy vytvořených stránek se doporučuje
používat externí stylopis. Pro více stránek může být jeden stylopis (Stránka vždy musí
obsahovat příslušný link) nebo každá stránka může mít stylopis v jiném souboru.
Soubor styl.css
- 33 -
p { color: red; }
h1 { font-size: 20pt; color: blue; }
WWW stránka musí obsahovat link na jméno souboru stylopisu:
Pro větší přehlednost stylopisu je vhodné používat komentáře. Tyto komentáře jsou zapsány
mezi oddělovače /* komentář */. Parametry a hodnoty jsou psány písmeny malými.
Pokud potřebujeme nastavit společnou vlastnost pro více značek (selektrorů) najednou, musí
se značky od sebe oddělovat čárkou.
h1, h2, h3, h4 { color: red; }
Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a
čárky. Pokud si některé znaménko popleteme, nebude to pravděpodobně fungovat. Příklad
správného zápisu:
h2 {color: green; font-style: italic; }


h2 je selektor = jméno tagu, jehož formátování se mění
{} složené závorky vymezují deklaraci formátu onoho selektoru
- 34 -



color je vlastnost a blue jeho hodnota (barva: modrá), vlastnost a hodnota jsou
odděleny dvojtečkou a mezerou
font-style je další vlastnost a italic je její hodnota (řez-fontu: kurzíva)
dvě deklarace se oddělují středníkem.
4.1
TŘÍDY
Třídy umožňují ve stylopisech vytvářet několik různých stylů pro jednu značku. Tyto
definované styly se liší jménem své třídy. Tyto třídy jsou tzv. regulární, které mohou být
použity napřklad pro různé druhy odstavců.
p.velke { text-align: left; font-size: 30pt; color: blue; }
p.male { text-align: center; font-size: 10pt; color: red; }
Ve vlastním kódu WWW stránky použijeme parametr class=“název třídy“, který uvedeme u
značky.
<p class=“velke“>
Kromě regulárních tříd lze také definovat třídy generické, které lze použít u libovolné značky.
.cervena { color: red; }
Tuto generickou třídu používáme stejným způsobem jako třídu regulární.
- 35 -
<h1 class=“cervena“>
U kaskádových stylů existují ještě tzv. pseudotřídy, které se používají k definici stylu
zobrazení pro určité stavy značek. Jméno značky se odděluje od názvu pseudotřídy
dvojtečkou. Jednotlivé názvy tříd jsou předdefinovány, takže nemůžeme vytvářet další
pseudotřídy.
Nejpoužívanější pseudotřídy u odkazů a odstavců:
a:link
- pro nenavštívený odkaz
a:active
- pro odkaz, který je právě vyvoláván
a:visited
- pro navštívený odkaz
a:hover
- pro odkaz, nad nímž se právě nachází kurzor myši
p:first-line
- pro zvýraznění prvního řádku odstavce
p:first-letter - pro zvýraznění prvního znaku odstavce
Příklad externího stylopisu:
1. soubor styl.css
body { background-color: yellow; }/*nastavení barvy pozadí na žlutou*/
h1 { color: #000000; text-align: left;
/*stylopis, barva textu černá, zarovnávání vlevo*/
- 36 -
font-size: 25px;
font-style: italic; }
/*velikost písma*/
/*kurzíva*/
h4 { color: red; text-align: center;
font-size: 14px;
font-style: italic; }
/*stylopis, barva textu červená, zarovnávání na střed*/
/*velikost písma*/
/*kurzíva*/
2. soubor – vlastní WWW stránka
<head>
</head>
<body>
<h1>Obor: Mechanizace a služby</h1>
<h4>Zaměření: Zemědělská mechanizace a služby</h4>
<h1>Obor: Veterinářství</h1>
<h1>Obor: Zahradnictví</h1>
</body>
</html>
Obr. 6
- 37 -
4.2
DÉLKOVÉ JEDNOTKY POUŽÍVANÉ V CSS STYLECH
Absolutní jednotky
Popis
px
Pixel (1 pixel = 1 bod obrazovky)
in
Palec (1 palec = 2,54cm = 72pt)
pt
Bod (1 bod = 1/72in = 1/12pc)
pc
Pica (1 pica = 12pt)
cm
Centimetry
mm
Milimetrry
Relativní jednotky
em
šířka velkého písmene M
ex
výška malého písmene x
Jednotka, která je tvořena dvojicí písmen musí být připojena ihned za číslem (bez mezery).
Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost
písma může být ovlivněna jednak nadřazeným nastavením stylu (font-size), formátovacími
značkami (<big> a pod.) a také volbou uživatele.
- 38 -
4.3
BARVY POUŽÍVANÉ CSS STYLECH
Při zápisu barvy můžete pužívat několik způsobů. První možností je použití anglického názvu
barvy a druhou možností je zápis barvy ve formátu RGB (červená, zelená, modrá). Pokud
zadáváte barvu číslem, musíte před číslo vložit znak #.
Zápis
Popis
#rrggbb
pro každou barvu číslo 1-16 hexadecimálně
#rgb
pro každou barvu číslo 1-16 hexadecimálně
rgb(r, g, b)
r, g, b jsou od 0 do 255
rgb(r%, g%, b%)
r, g, b jsou od 0 do 100
Například zápisy body { background-color: blue; } a body { background-color: #0000ff; } jsou
shodné. V zápisu 0000FF značí první dvě hexadecimální čísla barvu červenou (R), druhá dvě
čísla barvu zelenou (G) a třetí dvě čísla barvu modrou (B). Při používání barev na
internetových stránkách se řiďte barevnými modely. Stránky musí být kontrastní a dobře
čitelné.
- 39 -
Příklady barev základních 16 odstínů (VGA):
jasná bílá
white
FFFFFF
jasná žlutá
yellow
FFFF00
jasná fialová
fuschia
FF00FF
jasná červená
red
FF0000
jasná tyrkysová
aqua
00FFFF
jasná zelená
lime
00FF00
jasná modrá
blue
0000FF
šedá
gray
808080
stříbrná
silver
C0C0C0
olivová
olive
808000
purpurová
purple
800080
základní červená
maroon
800000
základní tyrkysová
teal
008080
základní zelená
green
008000
námořnická modř
navy
000080
černá
black
000000
- 40 -
4.4
NEJPOUŽÍVANĚJŠÍ ATRIBUTY CSS STYLŮ
Vlastnosti písma
Popis
Atribut
Možné hodnoty
Rodina písma
font-family:
seznam dostupných písem
Styl písma
font-style:
normal
italic
oblique
Varianta písma
font-variant:
normal
small-caps
Tučnost písma
font-weight:
normal
bold
bolder
lighter
Velikost písma
font-size:
xx-small
x-small
small
medium
large
x-large
xx-large
- 41 -
larger
smaller
„délka“
„%“
Vlastnosti pro nastavení barev
Popis
Atribut
Možné hodnoty
Barva popředí
color:
„barva“
Barva pozadí
background-color:
„barva“
transparent
Obrázek na pozadí
background-image:
„URL“
none
Směr opakování obrázku na background-repeat:
pozadí
repeat
repeat-x
repeat-y
no-repeat
Pohyb obrázku (se stránkou, background-attachment:
nebo fixovaný)
scroll
Poloha obrázku na pozadí
„%“
background-position:
fixed
- 42 -
„délka“
top
center
bottom
left
right
Vlastnosti textu
Popis
Velikost mezer mezi slovy
Atribut
word-spacing:
Možné hodnoty
normal
„délka“
Velikost mezer mezi písmeny
letter-spacing:
normal
„délka“
Čáry a blikání
text-decoration:
none
underline
overline
line-trough
blink
Vertikální zarovnávání
vertical-align:
baseline
- 43 -
sub
super
top
text-top
middle
bottom
text-bottom
„%“
Kapitálky,
písmena
malá
a
velká text-transform:
capitalize
uppercase
lowercase
none
Zarovnání textu
text-align:
left
right
center
justify
Odsazení
odstavce
Výška řádky
první
řádky text-indent:
„délka“
„%“
line-height:
normal
„délka“
„%“
- 44 -
Vlastnosti boxů
Popis
Atribut
Velikost horního okraje
margin-top:
Možné hodnoty
„délka“
„%“
auto
Velikost pravého okraje
margin-right:
„délka“
„%“
auto
Velikost spodního okraje
margin-bottom:
„délka“
„%“
auto
Velikost levého okraje
margin-left:
„délka“
„%“
auto
Velikost
okraje
vnitřního
horního padding-top:
„délka“
„%“
Velikost vnitřního pravého padding-right:
okraje
„délka“
Velikost vnitřního spodního padding-bottom:
okraje
„délka“
„%“
- 45 -
„%“
Velikost
okraje
vnitřního
levého padding-left:
Šířka horní části rámečku
„délka“
„%“
border-top-width:
thin
medium
thick
„délka“
Šířka pravé části rámečku
border-right-width:
thin
medium
thick
„délka“
Šířka spodní části rámečku
border-bottom-width:
thin
medium
thick
„délka“
Šířka levé části rámečku
border-left-width:
thin
medium
thick
„délka“
Barva rámečku
border-color:
„barva“
Nastavení tvaru rámečku
border-style:
none
- 46 -
dotted
dashed
solid
double
groove
ridge
inset, outset
Nastavenívlastností
části rámečku
horní border-top:
border-top-width
border-style
„barva“
části rámečku
pravé border-right:
border-top-width
border-style
„barva“
části rámečku
spodní border-bottom:
border-top-width
border-style
„barva“
Nastavenívlastností levé části border-left:
rámečku
border-top-width
border-style
„barva“
Šířka
width:
„délka“
„%“
auto
- 47 -
Výška
height:
„délka“
auto
Plovoucí objekt
float:
left
right
none
Skončení plovoucího objektu
clear:
none
left
right
both
Blokový model v CSS:
Obr. 7
- 48 -
Klasifikační vlastnosti - odrážky
Popis
Atribut
Druh elementu
display:
Možné hodnoty
block
inline
list-item
none
Práce s mezerami
white-space:
normal
pre
nowrap
Druh odrážek v seznamech
list-style-type:
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha;
none
Obrázek
jako
v seznamu
umístění odrážky
odrážka list-style-image:
„URL“
none
list-style-position:
inside
outside
upper-alpha;
- 49 -
Řízení pozice
Popis
Způsob pozicování elementu
Atribut
position:
Možné hodnoty
absolute
relative
static
Posunutí elementu vpravo
left:
„délka“
„%“
auto
Posunutí elementu dolů
top:
„délka“
„%“
auto
Šířka elementu
width:
„délka“
„%“
auto
Výška elementu
height:
„délka“
„%“
auto
Definice obdelníkové části, clip:
která bude viditelná
auto
Způsob zobrazení elementu
none
overflow:
rect
- 50 -
clip
scroll
Pozice
elementu
pseudoose Z
Viditelnost elementu
na z-index:
auto
„číslo“
visibility:
inherit
visible
hidden
5 TYPOGRAFICKÉ A FORMÁTOVACÍ ZNAČKY
Pokud chcete profesionální internetové stránky, nahraďte formátovací značky správnými
zápisy do stylopisu. Formátování se snažte vždy oddělit od obsahu stránky. Zajistíte tím
přehlednest vašeho kódu a možnost rychlé úpravy stránky, pokud budete chtít změnit barvy,
velikost textu... (formát stránky).
<br />
- konec řádky, zalomení řádky (nepárový tag)
<hr />
- vodorovná čára (nepárový tag)
<p> </p>
- nový odstavec
<pre> </pre>
- předformátovaný text, nesmí se použít jiné
HTML tagy
- 51 -
<hčíslo> </hčíslo>
- hlavička – nadpis (číslo může být od 1 do 6 –
např. <h2> Nadpis </h2>)
<b> </b>
- tučný text
<i> </i>
- text kurzíva
<u> </u>
- podtržený text
<s> </s>
- přeškrtnutý text
<sub> </sub>
- dolní index
<sup> </sup>
- horní index
<small> </small>
- menší písmo než normální velikost
<big> </big>
- větší písmo než normální velikost
<font> </font>
- velikost písma (číslo může být od 1 do 7)
<span></span>
- určí styl textu uvnitř značky
<em></em>
- zvýrazní text uvnitř značky
<strong> </strong>
- tučný text
<code> </code>
- text uvnitř značky je programový kód
<samp> </samp>
- označuje ukázku nebo příklad
<kbd> </kbd>
- označuje text psaný na klávesnici
<var></var>
- text uvnitř značky je proměnná
<cite></cite>
- text uvnitř značky je citace
<abbr></abbr>
- říká že text uvnitř je zkratka
<acronym></acronym>
- říká že text uvnitř je složené slovo
<q></q>
- označuje citaci
- 52 -
<tt></tt>
- zobrazí text neproporcionálním písmem
<strike></strike>
- vypíše text uvnitř přeškrtnutý čárou
Příklad: Zapište pozdrav „Ahoj“ tučně, větším písmem.
Nedoporučovaný zápis pomocí formátovacích značek– dvě varianty
<p><b><font size="4">Ahoj</font></b></p>
<p><b><big>Ahoj</big></b></p>
Doporučovaný zápis pomocí stylopisu (ještě lepší možnost je pomocí externího stylopisu)
<p style="font-size: large; font-weight: bold">Ahoj</p>
6 SEZNAMY
<ul> položky seznamu </ul>
- neuspořádaný seznam
<li> </li>
- položka seznamu
<lh> </lh>
- záhlaví seznamu
<ol> položky seznamu </ol>
<menu></menu>
- uspořádaný seznam
- definuje seznam nabídek
- 53 -
Seznam definic
<dl> položky seznamu </dl>
- seznam definic
<dt> </dt>
- pojem
<dd> <dd>
- definice pojmu
Příklad: Vytvořte neuspořádaný seznam, uspořádaný seznam a seznam definic.
Řešení: stylopisem vloženým ke značce
<head>
<title>Seznamy</title>
</head>
<body>
<h3>Neuspořádaný seznam</h3>
<ul style="list-style-type: circle">
<li>Mechanizační obor</li>
<li>Veterinární obor</li>
<li>Zahradnický obor</li>
</ul>
<h3>Uspořádaný seznam</h3>
<ol style="list-style-type: upper-roman">
- 54 -
</ol>
<h3>Seznam definic</h3>
<dl>
<dt>Mechanizační obor</dt>
<dd>vše o strojích</dd>
<dt>Veterinární obor</dt>
<dd>vše o zvířatech</dd>
<dt>Zahradnický obor</dt>
<dd>vše o kytkách</dd>
</dl>
</body>
</html>
Obr. 8
- 55 -
Řešení: externím stylopisem
<head>
<title>Seznamy</title>
</head>
<body>
<h3>Neuspořádaný seznam</h3>
<ul>
</ul>
<h3>Uspořádaný seznam</h3>
<ol>
</ol>
<h3>Seznam definic</h3>
<dl>
<dt>Mechanizační obor</dt>
<dd>vše o strojích</dd>
<dt>Veterinární obor</dt>
<dd>vše o zvířatech</dd>
<dt>Zahradnický obor</dt>
<dd>vše o kytkách</dd>
</dl>
</body>
</html>
- 56 -
Externí stylopis styl.css
ul {list-style-type: circle}
ol {list-style-type: upper-roman}
Pomocí seznamů a stylopisu lze vytvořit elegantní menu. Nebudete muse ve svých stránkách
použít potenciálně nebezpečný JavaScript.
Příklad:Pomocí značek seznamu a stylopisu vytvořte jednoduché nerozevírací menu podle
předlohy. V kódu stránky jsou použity značky „a href“, které jsou vysvětleny v další kapitole.
Obr. 9
<head>
<title>Menu</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
- 57 -
<ul>
<li><a href="#">Odkaz1</a></li>
</ul>
</body>
</html>
Externí stylopis menu.css
li { float: left; display: inline; }
a { display: block; padding: 0 0 0 15px; background: #dcdcdc; }
a:hover { background: #bcbcbc; }
Příklad: Pomocí značek seznamu a stylopisu vytvořte jednoduché rozevírací menu podle
předlohy. V kódu stránky jsou použity značky „a href“, které jsou vysvětleny v další kapitole.
Obr. 10
- 58 -
<head>
<title>Menu</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<ul class="hlavni">
<li><a href="#">Odkaz1</a>
<ul>
<li><a href="#">Odkaz1.1</a></li>
</ul>
</li>
<li><a href="#">Odkaz2</a>
<ul>
</ul>
</li>
</ul>
</body>
</html>
Externí stylopis menu2.css
.hlavni ul { margin-top: 3px; padding-left: 0px; }
.hlavni li { float:left; padding:6px; width:120px; list-style: none; }
.hlavni a { color:black; background-color: #dcdcdc; display:block; border:2px;
border-style: solid; text-decoration: none; padding-left: 5px; }
.hlavni a:hover, ul a:hover {background-color:#bcbcbc; }
.hlavni ul { visibility: hidden; }
.hlavni li:hover ul { visibility:visible; }
.hlavni li li { padding: 0 0 1px 0; }
- 59 -
7 ODKAZY
Odkazy jsou většinou označeny barevně a podtrženy. Pokud na odkaz najede kurzorem myši,
změní se kurzor myši na kurzor znázorňující ruku nebo se odkaz barevně změní.
Odkaz na jiný soubor (WWW stránku)
<a href=“url“> </a>
- odkaz na url
<a href=“url“><img src=“obrázek.gif“></a>
- odkaz na url, který je tvořen obrázkem
<a href=“url“ target=“_blank“> </a>
- odkaz do nového okna
<a href=“url“ target =“_self“> </a>
- odkaz do toho samého okna
<a href=“url“ target =“_parent“> </a>
- odkaz do nejbližšího rámu
<a href=“url“ target =“_top“> </a>
- odkaz do celého okna – zruší rámy
Odkaz na část dokumentu
<a name=“návěští“> </a>
- označí část dokumentu
<a href=“#návěští“> </a>
- odkaz v tomtéž dokumentu
<a href=“index.html#návěští“> </a>
- odkaz z jiného dokumentu
<a href=“#návěští“ target=“_blank“> </a>
- odkaz do nového okna
<a href=“#návěští“ target=“_self“> </a>
- odkaz do toho samého okna
<a href=“#návěští“ target=“_parent“> </a>
- odkaz do nejbližšího rámu
<a href=“#návěští“ target=“_top“> </a>
- odkaz do celého okna – zruší rámy
- 60 -
Odkaz na e-mail
<a href=“mailto:[email protected]“> </a>
- odkaz na e-mail [email protected]
<a href=“mailto:[email protected]?subject=pokus“> </a> - odkaz na e-mail s vyplněným
subjektem (předmětem)
<a href=“mailto:[email protected]?body=Dobrý den“> </a> - odkaz na e-mail s vyplněným
tělem e-mailu
<a href=“mailto:[email protected]?subject=pokus&body=Dobrý den“> </a> - odkaz na
e-mail s vyplněným
subjektem
(předmětem) a tělem dopisu
Příklad:
Obr. 11
- 61 -
<head>
<title>Odkazy</title>
</head>
<body>
<h3>Odkaz na školu</h3>
<a href="http://www.sosvaz.cz"> SOŠ veterinární a zemědělská</a>
<h3>Odkaz v textu na obor Zahradnictví</h3>
<a href="#zahr"> Zahradnictví</a>
<br /><br />
<h5>Obory:</h5>
<h5>Mechanizace a služby</h5>
<h5>Veterinářství</h5>
<h5><a name="zahr">Zahradnictví</a></h5>
</body>
</html>
8 OBRÁZKY
Na stránkách WWW lze používat různé formáty obrázků. Nejčastěji se používají:
*.JPG (komprimované obrázky – ztrátová komprese)
*.GIF (animace, transparentní pozadí, komprimované obrázky – neztrátová komprese)
*.PNG (obdoba jako GIF)
- 62 -
<img src=“url“ alt=“text“ />
- zobrazení obrázku salternativním
textem
<img lowsrc=“url“ src=“url“ alt=“text“ />
- zobrazení počátečního obrázku
s nízkým rozlišením, než bude
načten obrázek s plným rozlišením
Obrázek lze zarovnat například vlevo od textu nebo vpravo.
left
- horizontální zarovnání vlevo na stránce, text obtéká zprava
right
- horizontální zarovnání vpravo na stránce, text obtéká zleva
Obr. 12
<head>
<title>Obrázky</title>
- 63 -
</head>
<body>
<img class="left" src="rybnik.gif" alt="Rybník" />
<p>zarovnání vlevo zarovnání vlevo zarovnání vlevo zarovnání vlevo
zarovnání vlevo zarovnání vlevo zarovnání vlevo zarovnání vlevo
zarovnání vlevo zarovnání vlevo zarovnání vlevo zarovnání vlevo
zarovnání vlevo zarovnání vlevo zarovnání vlevo zarovnání vlevo</p>
<img class="right" src="rybnik.gif" alt="Rybník" />
<p>zarovnání vpravo zarovnání vpravo zarovnání vpravo zarovnání vpravo
zarovnání vpravo zarovnání vpravo zarovnání vpravo zarovnání vpravo
zarovnání vpravo zarovnání vpravo zarovnání vpravo zarovnání vpravo
zarovnání vpravo zarovnání vpravo zarovnání vpravo zarovnání vpravo</p>
</body>
</html>
Externí stylopis
.left {float: left}
.right {float: right}
Jiné způsoby zarovnání obrázku proveďte pomocí tabulky. Obrázek vložte do příslušné buňky
tabulky a požadovaný text do další buňky.
9 TABULKY
<table> </table>
- tabulka
<caption> </caption>
- nadpis tabulky
<tr> </tr>
- řádek tabulky
<td> </td>
- datová buňka tabulky
<th> </th>
- hlavička tabulky
- 64 -
Příklad:
Obr. 13
<head>
<title>Tabulka</title>
</head>
<body>
<h3>Vytvořená tabulka</h3>
<table style="border-style: double; background-color:yellow">
<caption> Spotřeba PHM </caption>
<tr>
<th style="border-style: solid">Leden 2001</th>
<th style="border-style: solid">Leden 2002</th>
</tr>
<tr>
<td style="border-style: solid">25 litrů</td>
<td style="border-style: solid">46 litrů</td>
</tr>
<tr>
<td style="border-style: solid; text-align:center">78 litrů</td>
- 65 -
<td style="border-style: solid; text-align:center">86 litrů</td>
</tr>
</table>
</body>
</html>
Varianta s externím stylopisem
<head>
<title>Tabulka</title>
</head>
<body>
<h3>Vytvořená tabulka</h3>
<table>
<caption> Spotřeba PHM </caption>
<tr>
<th>Leden 2001</th>
<th>Leden 2002</th>
</tr>
<tr>
<td class="tableft">25 litrů</td>
<td class="tableft">46 litrů</td>
</tr>
<tr>
<td class="tabcenter">78 litrů</td>
<td class="tabcenter">86 litrů</td>
</tr>
</table>
</body>
</html>
Externí stylopis
table {border-style: double; background-color: yellow}
th {border-style: solid}
- 66 -
.tableft {border-style: solid}
.tabcenter {border-style: solid; text-align: center}
Ke značkám pro tvorbu tabulky je možno použít velké množství různých atributů. Tyto běžně používané atributy
se doporučuje nahradit CSS styly.
10 SYMBOLY
Zapisování Některých vybraných symbolů:
<
<
>
>
pevná mezera
 
&
&
©
©
®
®
11 ZVUK A VIDEO
Pro validní stránky v XHTML formátu se doporučuje používat formát Flash.
<a href=„zvuk.wav“> </a>
- odkaz na zvukový soubor
- 67 -
<a href=„video.avi“> </a>
- odkaz na videosoubor
12 RÁMY
Pro rozdělení stránky na více částí se již nepoužívají. Je lépe se použití rámů vyhnout. U DTDs a DTD-t nebudou stránky validní. S výhodou se v dnešní době používá pouze tzv. vnořený
rám – iframe. Pomocí něho lze vytvořit například statické menu a dynamickou změnu stránky
v oblasti iframu.
<iframe></iframe>
- vnořený rám
Všechny moderní prohlížeče podporují tag <iframe>. Ten umožňuje vložit do stránky rám
přesné velikosti a zobrazit v něm jinou stránku. Je to pak hodně podobné obrázku, akorát že
obsah může být zcela libovolný (textový a rolovaný).
Příklad:Vytvořte stránky tak, aby se při kliknutí na odkaz změnila pouze daná část stránky a
menu zůstalo zachováno.
<head>
<title>Iframe</title>
- 68 -
</head>
<body>
<div>
<a href="support.html" target="content">Hlavní stránka</a>
<a href="download.html"target="content">Download</a><br /><br />
</div>
<div style="left: 0px; top: 55px">
<iframe width="100%" height="300px" name="content" frameborder="1" src="support.html">
</iframe>
</div>
</body>
</html>
Obr. 14
- 69 -
13 FORMULÁŘE
<form> </form>
- formulář
<form action=„mailto: [email protected]“> </form>
- definice e-mailové adresy
<form method=„post (get)“> </form>
- způsob zakódování dat
Formuláře uzavíráme do elemntů <form> a </form>. Element form má několik atributů, z
nichž nejdůležitější jsou dva:
- action
- method
Atribut action určuje URL aplikace, která se stará o zpracování výsledku formuláře.
Atribut method určuje způsob, jakým jsou data z formuláře zaslána. Možnými hodnotami
jsou get a post. Pokud nezadáte atribut action odešle výsledky formulář sám na sebe (do
stejného souboru).
Prvky formuláře
 Pokud má formulář předat nějaká data, musí být ve formuláři uvedeny nějaké prvky.
Prvky formuláře zároveň udávají jaká vstupní pole bude formulář obsahovat.
 Každý prvek musí mýt atribut name. Tento atribut nastavuje jméno proměnné, ve
kterém se budou nacházet data.
Atribut value přednastavuje obsah daného pole. Tento obsah lze před odesláním formuláře
změnit.
- 70 -
 Textové pole
<input type="text" name="jmeno" size="20" maxlength="20" value="Zadej jméno">
 name – jméno proměnné
 size – velikost vstupního pole
 maxlength – maximální délka textu
 value – přednastavená hodnota
 Pole heslo
<input type="password" name="heslo">
 Zaškrtávací políčko
<input type="checkbox" name="cjl" value="čeština">čeština
<input type="checkbox" name="anj" value="angličtina">angličtina
 Pole přepínač
<input type="radio" name="rad1" value="muž">muž
<input type="radio" name="rad1" value="žena">žena
 Skryté pole
<input type="hidden" name="tajne">
- 71 -
 Pole pro přenos souboru – u značky <form> je potřeba zadat
enctype="multipart/formdata"
<input type="file" name="soubor">
 Vícenásobný výběr
<select name="os">
<option value="2007">Windows 2007
</select>
 Textové pole
<textarea cols="40" rows="5" name="poznamka"></textarea>
 Skupina polí
<fieldset>
<legend>Obory</legend>
MECH: <input type="text" name="mech"><br />
VET: <input type="text" name="vet"><br />
ZAH: <input type="text" name="zah">
</fieldset>
- 72 -
 Odesílací tlačítko (posílá i souřadnice kliknutí)
<input type="image" name="obr" src="obrazek.jpg">
 Odesílací tlačítko
<input type="submit" value="Odeslat!">
 Výmaz zadaných hodnot
<input type="reset" value="Vymazat!">
 Obecné tlačítko
<button name="tlacitko">Cokoliv</button>
Typ obecného tlačítka může být: submit, reset, button
Formátování formuláře pomocí CSS
Obr. 15
- 73 -
Obr. 16
Obr. 17
- 74 -
 Vysvětlení jednotlivých položek CSS.
.pole1 {border-radius: 2em 9px; – zaoblení rohů boxu
background-color: lime; – barva pozadí světle zelená
padding-left: 10px;} – vnitřní levý okraj 10 px
textarea, select {background-color: #ffffcc; – barva pozadí oranžová
color: navy; – barva popředí modrá
border-radius: 2em 9px; – zaoblení rohů boxu
padding-left: 10px;} – vnitřní levý okraj 10 px
.tlacitko {background: navy; – barva pozadí modrá
color: #ffffcc; – barva pozadí oranžová
font-weight: bold; – typ písma tučné
cursor: pointer;} – tvar kurzoru ručička
- 75 -
Příklad: Vytvořte formulář podle předlohy.
Obr. 18
<head>
<title>Iframe</title>
</head>
<body>
<form action="zpracuj.php" method="post">
<table>
<tr><td><b>Jméno:</b></td><td><input type="text" name="jmeno" size="30" maxlength="50"></td></tr>
<tr><td><b>Telefon:</b></td><td><input
type="text"
name="telefon"
size="10"
maxlength="10"></td></tr>
<tr><td><b>Jazyky:</b></td><td><input type="checkbox" name="cjl" value="čeština">čeština</td></tr>
<tr><td></td><td><input type="checkbox" name="anj" value="angličtina">angličtina</td></tr>
<tr><td><b>Pohlaví</b></td><td><input type="radio" name="rad1" value="muž">muž</td></tr>
<tr><td></td><td><input type="radio" name="rad1" value="žena">žena</td></tr>
- 76 -
<tr><td><b>Váš OS</b></td><td><select name="os">
<option value="xp">Windows XP
<option value="li">Linux
<option value="be">Be</td></tr>
<tr><td><b>Poznámka</b></td><td><textarea
name="poznamka"></textarea></td></tr>
cols="40"
<tr><td></td><td><input type="submit" value="Odeslat!"></td></tr>
</table>
</form>
</body>
</html>
rows="5"
- 77 -
SEZNAM POUŽITÉ LITERATURY
[1]
Hulán M.: Sylabus vzdělávacího kurzu – Tvorba www stránek v HTML a CSS, Boxed s.
r.o, 2013
[2]
Hulán M.: Prezentace vzdělávacího kurzu - Tvorba www stránek v HTML a CSS, Boxed
s. r.o, 2013
[3]
Blábolil R.: Informační a komunikační technologie (3. rozšířené vydání), nakladatelství
Kopp, 2011
Použité obrázky: vlastní

Tvorba www stránek v HTML a CSS

Transkript

Podobné dokumenty

Tvorba webových aplikací pomocí AJAX

Aplikovaná informatika 2 - Inovace studijních oborů na PdF UHK

Lect. dr. Lenka GARANČOVSKÁ LISTĂ DE LUCRĂRI

2004 / 11 červen

HTML v praxi

Best practice -- Pravidla pro tvorbu přístupného webu -

pod tímto odkazem naleznete ke stažení přednášku k

dokument v PDF - BEVE, spol. s ro

input

PHP příkazy PHP lze vkládat přímo do XHTML

Přehled html a css vlastností

XX-XX_Šeltiák Argo dostal druhou šanci.indd

Certifikační politika pro externí uživatele

Tvorba webových stránek

CSS reference

mojeID - motivační program podmínky

2011 - sigifun

Tvorba www

Otevřít soubor

GLI-11 - Gaming Laboratories International

Text práce ve formátu PDF

Specifika ovládání webových aplikací pro mobilní zařízení