Tvorba www stránek v HTML a CSS - soscb.cz · Tvorba www stránek v HTML a CSS Publikace vznikla v rámci projektu OPVK „Vyškolený pedagog – záruka kvalitní výuky“ na

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:

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.

1 2 3 4 5 6

7 8 9 10 11

12

- 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í podpora

skriptů

záhlaví dokumentu 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 -







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


<bdo> mění směr zobrazení textu ve značce přímo vložené elementy stf

<br /> zalomí řádek - odřádkuje přímo vložené elementy stf

<em> zvýrazní text uvnitř značky přímo vložené elementy stf

<strong> vypíše text uvnitř značky tučně přímo vložené elementy stf

<dfn> označuje první výskyt pojmu v dokumentu přímo vložené elementy stf

<code> text uvnitř značky je programový kód přímo vložené elementy stf

<samp> označuje ukázku nebo příklad přímo vložené elementy stf

<kbd> označuje text zapsaný na klávesnici přímo vložené elementy stf

<var> text uvnitř značky je proměnná přímo vložené elementy stf

<cite> text uvnitř značky je citace přímo vložené elementy stf

<abbr> říká že text uvnitř je zkratka přímo vložené elementy stf

<acronym> říká že text uvnitř je složené slovo přímo vložené elementy stf

<q> označuje citaci přímo vložené elementy stf

<sub> zobrazí text uvnitř značky jako dolní index přímo vložené elementy stf

<sup> zobrazí text uvnitř značky jako horní index přímo vložené elementy stf

<tt> zobrazí text neproporcionálním písmem přímo vložené elementy stf

<i> text uvnitř značky zobrazí kurzívou přímo vložené elementy stf

<b> zobrazí text uvnitř značky tučně přímo vložené elementy stf

<big> zvětší velikost písma o jednu úroveň přímo vložené elementy stf

<small> zmenší velikost písma o jednu úroveň přímo vložené elementy stf

<u> zobrazí text uvnitř značky podtržený přímo vložené elementy tf

<s> vypíše text uvnitř přeškrtnutý čárou přímo vložené elementy tf

- 15 -


<strike> vypíše text uvnitř přeškrtnutý čárou přímo vložené elementy tf

<basefont /> určuje základní font dokumentu přímo vložené elementy tf

<font> nastaví vzhled písma přímo vložené elementy 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 -


<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"?>


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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

<?xml version="1.0" encoding="utf-8"?> (verze XHTML)


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ( DTD)

<html> (začátek HTML dokumentu)

<head> (začátek záhlaví - hlavičky)

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

(tzv. Meta informace - kódování textu)

<meta name="description" content="... obsah dokumentu.." />

(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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Layout stránky</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </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> <li><a href="zaklad.html">položka</a></li> <li><a href="zaklad.html">položka</a></li> <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 { margin: 0px auto 5px auto; width: 900px; border: 1px solid black; 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; background-color: white; 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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Layout stránky</title> <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> <li><a href="zaklad.html">položka</a></li> <li><a href="zaklad.html">položka</a></li> <li><a href="zaklad.html">položka</a></li> <li><a href="zaklad.html">položka</a></li> </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 { margin: 5px auto 5px auto; width: 890px; border: 1px solid black; background-color: #FFFFFF; padding: 5px; } .obsah { margin: 0px auto 5px auto; width: 900px; border: 1px solid black; 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; } .levy a { display: block; color: black; font-weight: bold; text-decoration: none; padding: 5px; } .levy a:hover { background-color: #E5E5E5; } .stredni {

- 30 -

padding: 0px 10px 0px 10px; float: left; width: 678px; background-color: white; border-left: 1px solid black; border-right: 1px solid black; } .pravy { float: right; width: 80px; background-color: yellow; padding: 0px 10px 0px 10px; } .zapati { border-top: 1px solid black; background-color: white; 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; /*velikost písma*/ font-style: italic; } /*kurzíva*/ h4 { color: red; text-align: center; /*stylopis, barva textu červená, zarovnávání na střed*/ font-size: 14px; /*velikost písma*/ font-style: italic; } /*kurzíva*/

2. soubor – vlastní WWW stránka

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Layout stránky</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </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


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

pozadí

background-repeat: repeat

repeat-x

repeat-y

no-repeat

Pohyb obrázku (se stránkou,

nebo fixovaný)

background-attachment: scroll

fixed

Poloha obrázku na pozadí background-position: „%“

- 42 -

„délka“

top

center

bottom

left

right

Vlastnosti textu


Velikost mezer mezi slovy word-spacing: 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, malá a velká

písmena

text-transform: capitalize

uppercase

lowercase

none

Zarovnání textu text-align: left

right

center

justify

Odsazení první řádky

odstavce

text-indent: „délka“

„%“

Výška řádky line-height: normal

„délka“

„%“

- 44 -

Vlastnosti boxů


Velikost horního okraje margin-top: „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 vnitřního horního

okraje

padding-top: „délka“

„%“

Velikost vnitřního pravého

okraje

padding-right: „délka“

„%“

Velikost vnitřního spodního

okraje

padding-bottom: „délka“

- 45 -

„%“

Velikost vnitřního levého

okraje

padding-left: „délka“

„%“

Šířka horní části rámečku 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í horní

části rámečku

border-top: border-top-width

border-style

„barva“

Nastavenívlastností pravé

části rámečku

border-right: border-top-width

border-style

„barva“

Nastavenívlastností spodní

části rámečku

border-bottom: border-top-width

border-style

„barva“

Nastavenívlastností levé části

rámečku

border-left: 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


Druh elementu display: 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; upper-alpha;

none

Obrázek jako odrážka

v seznamu

list-style-image: „URL“

none

umístění odrážky list-style-position: inside

outside

- 49 -

Řízení pozice


Způsob pozicování elementu position: 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,

která bude viditelná

clip: auto

rect

Způsob zobrazení elementu overflow: none

- 50 -

clip

scroll

Pozice elementu na

pseudoose Z

z-index: auto

„číslo“

Viditelnost elementu 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> - uspořádaný seznam

<menu></menu> - 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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>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"> <li>Mechanizační obor</li> <li>Veterinární obor</li> <li>Zahradnický obor</li>

- 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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Seznamy</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </head> <body> <h3>Neuspořádaný seznam</h3> <ul> <li>Mechanizační obor</li> <li>Veterinární obor</li> <li>Zahradnický obor</li> </ul> <h3>Uspořádaný seznam</h3> <ol> <li>Mechanizační obor</li> <li>Veterinární obor</li> <li>Zahradnický obor</li> </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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Menu</title> <link rel="stylesheet" href="menu.css" type="text/css" /> </head> <body>

- 57 -

<ul> <li><a href="#">Odkaz1</a></li> <li><a href="#">Odkaz2</a></li> <li><a href="#">Odkaz3</a></li> <li><a href="#">Odkaz4</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 -

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>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> <li><a href="#">Odkaz1.2</a></li> </ul> </li> <li><a href="#">Odkaz2</a> <ul> <li><a href="#">Odkaz2.1</a></li> <li><a href="#">Odkaz2.2</a></li> <li><a href="#">Odkaz2.3</a></li> <li><a href="#">Odkaz2.4</a></li> </ul> </li> <li><a href="#">Odkaz3</a></li> <li><a href="#">Odkaz4</a></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

mailto:[email protected]

- 61 -

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Obrázky</title>

- 63 -

<link rel="stylesheet" href="styl.css" type="text/css" /> </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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Tabulka</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </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 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Tabulka</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </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 DTD-

s 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.

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Iframe</title> <link rel="stylesheet" href="styl.css" type="text/css" />

- 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/form-

data"

<input type="file" name="soubor">

Vícenásobný výběr

<select name="os">

<option value="2007">Windows 2007

<option value="2008">Windows 2008

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

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>Iframe</title> <link rel="stylesheet" href="styl.css" type="text/css" /> </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="98">Windows 98 <option value="li">Linux <option value="be">Be</td></tr> <tr><td><b>Poznámka</b></td><td><textarea cols="40" rows="5" name="poznamka"></textarea></td></tr> <tr><td></td><td><input type="submit" value="Odeslat!"></td></tr> </table> </form> </body> </html>

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

Documents

Tvorba www stránek v HTML a CSS - soscb.cz · Tvorba www stránek v HTML a CSS Publikace vznikla v rámci projektu OPVK „Vyškolený pedagog – záruka kvalitní výuky“ na