Tvorba www stránek v HTML a CSS

Rozměr: px
Začít zobrazení ze stránky:

Download "Tvorba www stránek v HTML a CSS"

Transkript

1 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/ Ing. Roman Blábolil České Budějovice, 2013

2 Jazyková korektura: Neprošlo jazykovou korekturou Sazba: Ing. Roman Blábolil Ing. Roman Blábolil

3 - 3 - OBSAH 1 Úvod WWW hypertextový informační systém Tvorba WWW stránek DTD Základní struktura XHTML dokumentu Metainformace XHTML dokumentu Layout (rozvržení) stránky Kaskádové styly - CSS Třídy Délkové jednotky používané v CSS stylech Barvy používané CSS stylech Nejpoužívanější atributy CSS stylů Typografické a formátovací značky Seznamy Odkazy Obrázky Tabulky Symboly Zvuk a video Rámy Formuláře... 69

4 - 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 - 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 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 - 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ě: adresa počítače/adresářová cesta/požadovaný dokument

7 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: Zpět Pokud kliknete na toto tlačítko, načte se předcházející stránka. Obr. 1 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-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 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 - 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" " 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" " 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" "

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 zá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> text uvnitř značky je nadpis úrovně 2 nadpisy stf <h3> text uvnitř značky je nadpis úrovně 3 nadpisy stf <h4> text uvnitř značky je nadpis úrovně 4 nadpisy stf <h5> text uvnitř značky je nadpis úrovně 5 nadpisy stf <h6> text uvnitř značky je nadpis úrovně 6 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 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 Značka Funkce Kategorie DTD <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 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 style="" class="" id="" lang="" dir="" title="" Funkce Definuje přímo vložený styl obsahu značky Definuje třídu stylu, specifikovanou uvnitř dokumentu pomocí značky <style></style>, nebo v externím souboru stylů připojeným značkou <link /> Definuje pro značku unikátní identifikátor (jméno), na který je později možné se odvolávat JavaScriptem Definuje jazyk obsahu značky. Uvdává se jako dvouznakový kód jazyka Udává směr zobrazení textu. Po našem "ltr", nebo zprava doleva "rtl" Definuje titulek značky

17 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"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ( DTD) <html> <head> (začátek HTML dokumentu) (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) <meta name="author" content="vaše jméno" /> (tzv. Meta informace - autor stránek) <title>základní struktura</title> (titulek v prohlížeči) <link rel="stylesheet" href="styl.css" type="text/css" /> (odkaz na externí stylopis) </head> <body> (konec záhlaví) (začátek těla schránky) </body> </html> (konec těla schránky) (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 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 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 <meta name="author" content="vaše jméno" /> Přesměrování na jinou stránku <meta http-equiv= refresh content= 5; url= /> 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" " <html xmlns=" 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" " <html xmlns=" 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 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: <link rel="stylesheet" href="styl.css" type="text/css" /> 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 a:active a:visited a:hover p:first-line - pro nenavštívený odkaz - pro odkaz, který je právě vyvoláván - pro navštívený odkaz - pro odkaz, nad nímž se právě nachází kurzor myši - 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; } h4 { color: red; text-align: center; font-size: 14px; font-style: italic; } /*velikost písma*/ /*kurzíva*/ /*stylopis, barva textu červená, zarovnávání na střed*/ /*velikost písma*/ /*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" " <html xmlns=" 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 DÉLKOVÉ JEDNOTKY POUŽÍVANÉ V CSS STYLECH Absolutní jednotky Popis px in pt pc cm mm Pixel (1 pixel = 1 bod obrazovky) Palec (1 palec = 2,54cm = 72pt) Bod (1 bod = 1/72in = 1/12pc) Pica (1 pica = 12pt) Centimetry Milimetrry Relativní jednotky em ex šířka velkého písmene M 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 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 #rgb pro každou barvu číslo 1-16 hexadecimálně 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 stříbrná silver C0C0C0 olivová olive purpurová purple základní červená maroon základní tyrkysová teal základní zelená green námořnická modř navy černá black

40 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 pozadí Pohyb obrázku (se stránkou, nebo fixovaný) background-repeat: background-attachment: repeat repeat-x repeat-y no-repeat scroll fixed Poloha obrázku na pozadí background-position: %

42 délka top center bottom left right Vlastnosti textu Popis Atribut Možné hodnoty 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 Kapitálky, malá a velká písmena text-transform: sub super top text-top middle bottom text-bottom % 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ů Popis Atribut Možné hodnoty 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 Velikost vnitřního pravého okraje Velikost vnitřního spodního okraje padding-top: padding-right: padding-bottom: délka % délka % 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í části rámečku horní border-top: border-top-width border-style barva Nastavenívlastností části rámečku pravé border-right: border-top-width border-style barva Nastavenívlastností části rámečku spodní 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 Popis Atribut Možné hodnoty 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; none upper-alpha; 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 Popis Atribut Možné hodnoty 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 Pozice elementu na pseudoose Z z-index: clip scroll 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 /> <hr /> <p> </p> <pre> </pre> - konec řádky, zalomení řádky (nepárový tag) - vodorovná čára (nepárový tag) - nový odstavec - 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> <i> </i> <u> </u> <s> </s> <sub> </sub> <sup> </sup> <small> </small> <big> </big> - tučný text - text kurzíva - podtržený text - přeškrtnutý text - dolní index - horní index - menší písmo než normální velikost - větší písmo než normální velikost <font> </font> - velikost písma (číslo může být od 1 do 7) <span></span> <em></em> <strong> </strong> <code> </code> <samp> </samp> <kbd> </kbd> <var></var> <cite></cite> <abbr></abbr> <acronym></acronym> <q></q> - určí styl textu uvnitř značky - zvýrazní text uvnitř značky - tučný text - text uvnitř značky je programový kód - označuje ukázku nebo příklad - označuje text psaný na klávesnici - text uvnitř značky je proměnná - text uvnitř značky je citace - říká že text uvnitř je zkratka - říká že text uvnitř je složené slovo - označuje citaci

52 <tt></tt> <strike></strike> - zobrazí text neproporcionálním písmem - 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> <li> </li> <lh> </lh> <ol> položky seznamu </ol> <menu></menu> - neuspořádaný seznam - položka seznamu - záhlaví seznamu - uspořádaný seznam - definuje seznam nabídek

53 Seznam definic <dl> položky seznamu </dl> <dt> </dt> <dd> <dd> - seznam definic - pojem - 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" " <html xmlns=" 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" " <html xmlns=" 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" " <html xmlns=" 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: px; 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" " <html xmlns=" 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 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 <a href= mailto:novak@sosvaz.cz > </a> - odkaz na novak@sosvaz.cz <a href= mailto:novak@sosvaz.cz?subject=pokus > </a> - odkaz na s vyplněným subjektem (předmětem) <a href= mailto:novak@sosvaz.cz?body=dobrý den > </a> - odkaz na s vyplněným tělem u <a href= mailto:novak@sosvaz.cz?subject=pokus&body=dobrý den > </a> - odkaz na s vyplněným subjektem (předmětem) a tělem dopisu Příklad: Obr. 11

61 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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=" 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 /> <img lowsrc= url src= url alt= text /> - zobrazení obrázku salternativním textem - 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 right - horizontální zarovnání vlevo na stránce, text obtéká zprava - 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" " <html xmlns=" 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> <caption> </caption> <tr> </tr> <td> </td> <th> </th> - tabulka - nadpis tabulky - řádek tabulky - datová buňka tabulky - 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" " <html xmlns=" 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" " <html xmlns=" 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 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. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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 FORMULÁŘE <form> </form> <form action= mailto: > </form> <form method= post (get) > </form> - formulář - definice ové adresy - 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 <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" " <html xmlns=" 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>

Blokový model v CSS:

Blokový model v CSS: Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing

Více

Kaskádové styly (CSS) Cascading Style Sheets

Kaskádové styly (CSS) Cascading Style Sheets CSS verze 22.11. 2007 1 Kaskádové styly (CSS) Cascading Style Sheets Existují 3 druhy zápisu CSS do webové stránky a) Vložením tagu STYLE do hlavičky dokumentu ...definice stylu atributy: type...

Více

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size.

CSS vlastnosti - stručný prehľad. Vlastnosti písma. Vlastnosti farby a pozadí. font-family. font-style. font-variant. font-weight. font-size. Page 1 of 6 CSS vlastnosti - stručný prehľad Vlastnosti písma font-family rodina písma font-style styl písma font-variant varianta písma font-weight duktus písma font-size veľkosť písma font písmo

Více

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Stránka č. 1 z 9 Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia

Více

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 vzájemně správně vnořeny <i><b>špatně</i></b> <i><b>správně</b></i> 1 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.

Více

Přehled základních html tagů

Přehled základních html tagů Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou

Více

HTML Hypertext Markup Language

HTML Hypertext Markup Language HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé

Více

CSS - stručná reference kaskádových stylů

CSS - stručná reference kaskádových stylů 1. font a parametry písma font, font-family, font-size, font-style, font-variant, font-weight 1.1 font Nastavuje většinu parametrů textu najednou. Jednotlivé atributy naleznete v kapitolách 1.2-1.6 a line-height

Více

HTML - Úvod. Zpracoval: Petr Lasák

HTML - Úvod. Zpracoval: Petr Lasák HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají

Více

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE

Více

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu

Více

Káskádové styly = CSS

Káskádové styly = CSS Návrh a tvorba WWW stránek 1/20 Káskádové styly = CSS CSS = Cascading Style Sheets = tabulky kaskádových stylů na začátku byl stylesheet soubor pravidel definující vzhled textu nezávisle na obsahu pomocí

Více

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1)

Referenční přehled vlastností CSS1 (Cascading Style Sheets, level 1) Referenční přehled CSS1 (Cascading Style Sheets, level 1) Tento dokument shrnuje jdůležitější informace o káskadových stylech dokumentů. Informace vycházejí z oficialního doporučení konsorcia W3C Cascading

Více

Vývoj Internetových Aplikací

Vývoj Internetových Aplikací 2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info

Více

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

Úvod do jazyka HTML (Hypertext Markup Language)

Úvod do jazyka HTML (Hypertext Markup Language) Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření

Více

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11

1: Úvod 9. Co a kde v knize naleznete... 9 Zdroje Doporučení pro další studium... 11 Obsah 3 1: Úvod 9 Dříve než začnete......................... 9 Co a kde v knize naleznete....................... 9 Zdroje............................... 10 Doporučení pro další studium.....................

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML

Více

Rozměry, okraje a rámečky

Rozměry, okraje a rámečky Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned

Více

(X)HTML, CSS a jquery

(X)HTML, CSS a jquery Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje

Více

CSS styly. Cascading Style Sheets kaskádové styly

CSS styly. Cascading Style Sheets kaskádové styly CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen

Více

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP Název školy: Číslo a název projektu: Číslo a název šablony klíčové

Více

Tvorba webu. Kaskádové styly (CSS) Martin Urza

Tvorba webu. Kaskádové styly (CSS) Martin Urza Tvorba webu Kaskádové styly (CSS) Martin Urza Motivace Proč používat kaskádové styly k formátování HTML? Dovolují více možností formátování než klasické HTML atributy a stále přibývají další (možnosti).

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený

Více

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

PODPORA ELEKTRONICKÝCH FOREM VÝUKY I N V E S T I C E D O R O Z V O J E V Z D Ě L Á V Á N Í PODPORA ELEKTRONICKÝCH FOREM VÝUKY CZ.1.07/1.1.06/01.0043 Tento projekt je financován z prostředků ESF a státního rozpočtu ČR. SOŠ informatiky a

Více

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány

Více

Základy CSS (3. přednáška)

Základy CSS (3. přednáška) Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze

Více

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera přednáška č. 2 Mgr. Vlastislav Kučera přednáška č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS

Více

CSS Kaskádové styly. formátování webových stránek

CSS Kaskádové styly. formátování webových stránek CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací

Více

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera lekce č. 2 Mgr. Vlastislav Kučera lekce č. 2 Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to je to, co se

Více

www.helpmark.cz Tomáš Herout

www.helpmark.cz Tomáš Herout 4. 1. 2015 1 Obsah prezentace» Jak naplánovat strukturu» Co je to HTML a CSS» Co používat za nástroje» Struktura a logika HTML» DOCTYPE» Hlavička (X)HTML» Tělo (X)HTML» Skupiny (X)HTML tagů» Vztah mezi

Více

Přehled vlastností stylů

Přehled vlastností stylů Přehled stylů Styly jsou ds jefektivnějším způsobem, jak ovládat grafický vzhled strák. Definují přes padesát, které slouží k vizuálních atributů elementů. V následujících tematicky rozčleněných tabulkách

Více

CSS Stylování stránek. Zpracoval: Petr Lasák

CSS Stylování stránek. Zpracoval: Petr Lasák CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze

Více

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1

Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Střední průmyslová škola a Vyšší odborná škola technická Brno, Sokolská 1 Šablona: Název: Téma: Autor: Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti

Více

22. Tvorba webových stránek

22. Tvorba webových stránek 22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči

Více

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD

Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se

Více

Obsah. Stručná historie World Wide Webu 7

Obsah. Stručná historie World Wide Webu 7 KAPITOLA I Web bez tajemství 1 Kde se vzal web a jeho stránky 2 Kouzlo jménem HTML 3 Jak stránky připravovat 5 Webová grafika 6 Web aktivní a interaktivní 6 Na straně serveru 6 Jak studovat tuto knihu

Více

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka - definuje vztah k jiným

Více

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML

Více

Tvorba stránek v HTML ve Wordu

Tvorba stránek v HTML ve Wordu Tvorba stránek v HTML ve Wordu HTML (hypertext markup language hypertextový značkovací jazyk). Internetová stránka jako soubor s příponou htm nebo html. Je to skoro obyčejný textový soubor obohacený o

Více

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění

Více

TVORBA WEBOVÝCH STRÁNEK

TVORBA WEBOVÝCH STRÁNEK TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03b Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03b 1. Kaskádové styly (CSS) 2. Vazba CSS na (X)HTML dokument 3. Syntaxe CSS 4. Barva a

Více

13. Vytváření webových stránek

13. Vytváření webových stránek 13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech

Více

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...

CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené... Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat

Více

NSWI096 - INTERNET. Úvod do HTML

NSWI096 - INTERNET. Úvod do HTML NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup

Více

12. Základy HTML a formuláře v HTML

12. Základy HTML a formuláře v HTML 12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura

Více

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag>

HTML. Úvod do (X)HTML. Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) <tag atribut1= hodnota atributu > text </tag> HTML Úvod do (X)HTML Tagy značky. Slouží ke strukturování dokumentu (párové a nepárové) text HTML HyperText Markup Language HTML první verze 1991 Značkovací jazyk

Více

O CSS podrobněji. Box model Document flow Layout

O CSS podrobněji. Box model Document flow Layout O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html

Více

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí!

Formuláře. Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! Formuláře Aby nám mohli uživatelé něco hezného napsat...... třeba co si o nás myslí! HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve

Více

Jak vytvořit jednoduché webové stránky.

Jak vytvořit jednoduché webové stránky. Jak vytvořit jednoduché webové stránky. Od vynálezu protokolu HTTP pro přenos dokumentů a jazyka HTML pro jejich popis již uběhlo více než 17 let. Za tu dobu se vyvíjel jak protokol, tak i jazyk. Od původního

Více

<link> - definuje vztah k jiným XHTML dokumentům, typicky

<link> - definuje vztah k jiným XHTML dokumentům, typicky Návrh a tvorba WWW stránek 1/10 Hlavička dokumentu mezi a obsahuje informace vztažené k dokumentu metadata - název stránky, povinná párová značka vzorová stránka

Více

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.

Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht. Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování

Více

Cascading Style Sheets CSS Selektory Selektory

Cascading Style Sheets CSS Selektory Selektory CSS JohanSebastianBachwasaprolificomposeṙ Bach'shomepage TITLE> BODY>Bach'shomepage H1> 1{color:red} h STYLE> HEAD>

Více

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace

CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace

Více

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra

Více

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda

Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích

Více

Návrh a tvorba WWW stránek 1/8. Formuláře

Návrh a tvorba WWW stránek 1/8. Formuláře Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou

Více

Základy HTML. Autor: Palito

Základy HTML. Autor: Palito Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete

Více

Ukázka knihy z internetového knihkupectví www.kosmas.cz

Ukázka knihy z internetového knihkupectví www.kosmas.cz Ukázka knihy z internetového knihkupectví www.kosmas.cz U k á z k a k n i h y z i n t e r n e t o v é h o k n i h k u p e c t v í w w w. k o s m a s. c z, U I D : K O S 1 8 0 6 5 9 U k á z k a k n i h

Více

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor

Více

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line)

Mimochodem, co je CSS? Formátování HTML. Drobný problém. Základy práce se styly. Trojí použití CSS. Přímo (in-line) Mimochodem, co je CSS? CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Ta zkratka znamená Cascading Style Sheets, česky "kaskádové styly". Kaskádové, protože

Více

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675

Tvorba WWW stránek. Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Tvorba WWW stránek Mojmír Volf mojmir.volf@tul.cz https://www.nti.tul.cz/wiki/wikiuser:mojmir.volf 485 353 675 Zdroje KRUG: Web design - nenuťte uživatele přemýšlet.. Computer Press, 2003. PROKOP M.: CSS

Více

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Mgr. Vlastislav Kučera Struktura stránky, hlavička, Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to

Více

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s

Více

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webu. Úvod a základní principy. Martin Urza Tvorba webu Úvod a základní principy Martin Urza World Wide Web (WWW) World Wide Web (doslova celosvětová pavučina ) je označení pro mnoho dokumentů rozmístěných na různých serverech po celém světě. Tyto

Více

WWW a HTML. Základní pojmy. Ivo Peterka

WWW a HTML. Základní pojmy. Ivo Peterka WWW a HTML Základní pojmy WWW World Wide Web systém navzájem propojených stránek Stránky se mohou skládat z částí nacházejících se v různých částech světa. HTML HyperText Markup Language Slouží k psaní

Více

SkautIS Remote Components absolventská práce

SkautIS Remote Components absolventská práce MUŠKA Moravská úřednická škola SkautIS Remote Components absolventská práce Martin Jašek Jedlík středisko Prof. Skoumala Přerov MUŠKA 2010/11 Obsah Úvod... 3 1. Seznámení se SkautIS komponentami... 3 1.1.

Více

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu

Více

Úvod do tvorby internetových stránek v jazyce HTML

Úvod do tvorby internetových stránek v jazyce HTML Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.

Více

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné

Více

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1. Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam

Více

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 3 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky 6.10.2015 aneta.bartuskova@uhk.cz Struktura stránky Sémantická - pomocí HTML Stránka je chápána jako skupina oblastí, každá oblast má svůj účel (menu,

Více

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES

Více

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014 Tvorba webových stránek pomocí HTML kódu v příkladech podpůrný text pro výuku M. Seménka, 2014 na příkladech se studenti seznámí se základními postupy tvorby www stránek Příklady je třeba důkladně prostudovat

Více

Internet 2 css, skriptování, dynamické prvky

Internet 2 css, skriptování, dynamické prvky Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní

Více

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování Tvorba WWW stránek přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování HTML/XHTML kaskádové styly PHP spolupráce PHP s databázemi Technologie

Více

Kaskádové styly (CSS)

Kaskádové styly (CSS) Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009 Cascading Style Sheets

Více

Jazyky XHTML, DHTML, CSS a WML

Jazyky XHTML, DHTML, CSS a WML Dodatky Petr Pexa 2007 pepe@pf.jcu.cz 1. Upravená kapitola 5.1 Vývojové verze jazyka XHTML Modularizace XHTML Modularizace je proces zařazení jednotlivých elementů do fiktivních modulů podle jejich funkce

Více

HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger

HTML. HyperText Markup Language. 25.9.2013 Josef Steinberger HTML HyperText Markup Language 25.9.2013 Josef Steinberger HTML historie, verze Hypertext Jazyk popisující strukturu dokumentu SGML/XML Aplikace Verze: HTML 1 1990+ TBL, CERN HTML 2.0 1995 as RFC 1866

Více

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se. Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)

Více

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

HTML. ICT_01., 02. konzultace; 2. ročník 1/6 ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,

Více

APLIKACE XML PRO INTERNET

APLIKACE XML PRO INTERNET APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je

Více

Manuál k editoru TinyMCE

Manuál k editoru TinyMCE Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,

Více

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

Výukový materiál vytvořen v rámci projektu EU peníze školám. Inovace výuky registrační číslo CZ.1.07/1.5.00/34.0585 Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

Více

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací

Více

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová (X)HTML-TAGY Mgr. Petr Slívko VOŠ a SŠT Česká Třebová Tagy Popis Značka tagu začíná levou ostrou závorkou. Za ní následuje jméno tagu, před kterým nesmí být mezera. Mohou následovat atributy. Před

Více

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat.

Odkazy se v normálním případě podtrhávají samy, není nutno to nastavovat. Úprava textu Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů). Fyzické formátování Fyzické formátování říká, jak má který

Více

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language

XHTML a tvorba webu. 1. Historie a základní struktura. HTML HyperText Markup Language XHTML a tvorba webu 1. Historie a základní struktura HTML HyperText Markup Language - HTML 0.9 první verze 1991 - Značkovací jazyk pro zápis dokumentů na webu - Vkládání do textu obrázků, hypertextových

Více

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage

1 Tvorba WWW stránek pomocí programu Microsoft FrontPage 1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou

Více

Uspořádání klient-server. Standardy pro Web

Uspořádání klient-server. Standardy pro Web Návrh a tvorba WWW stránek 1/11 Uspořádání klient-server klient na straně uživatele (browser, prohlížeč) server program obsluhující požadavky uživatele Standardy pro Web HTTP Hypertext Transfer Protocol

Více

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border

Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border

Více

Internetové technologie, cvičení č. 5

Internetové technologie, cvičení č. 5 Internetové technologie, cvičení č. 5 Náplň cvičení Obsahem 5. cvičení předmětu Internetové technologie je ukázka a procvičení XHTML značek a atributů používaných při vytváření hypertextových odkazů a

Více

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr

Více

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: 11. 9. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz Webové stránky 2. Úvod do jazyka HTML Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 11. 9. 2012 Webové Strana: 1/6 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická

Více

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře...

2.8.1 Nejdůležitější a nejpoužívanější <meta /> elementy... 35 2.9 Ostatní... 36 2.9.1 Znakové entity... 36 2.9.2 kontejnery... 36 2.9.3 komentáře... OBSAH Obsah... 4 1. Úvod... 7 1.1 Princip webových stránek... 7 1.1.1 WWW stránka... 7 1.2 Historie XHTML... 9 1.3 Obecně o XHTML... 10 1.4 XHTML editory... 12 1.4.1 Wysiwyg editory... 12 1.4.2 Strukturní

Více

Tvorba webových stránek

Tvorba webových stránek Tvorba webových stránek Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok

Více

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz 6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,

Více

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES

Více