Skripta ke školení. Základy HTML a CSS. vypracoval: Tomáš Herout. tel:

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

Download "Skripta ke školení. Základy HTML a CSS. vypracoval: Tomáš Herout. tel:"

Transkript

1 Skripta ke školení Základy HTML a CSS vypracoval: Tomáš Herout herout@helpmark.cz tel:

2 Obsah HTML... 4 STRUKTURA DOKUMENTU WEBOVÉ STRÁNKY... 4 CO JE TO HTML... 4 Jak se nazývají části kódu HTML... 5 ZNAČKY PRO TEXTY, OBRÁZKY A ODKAZY... 5 <p> </p>... 5 <br>... 5 <a> </a>... 6 <img>... 6 <h1> </h1>... 6 <strong> </strong>... 7 <cite> </cite>... 7 <blockquote> </ blockquote >... 7 <code> </code>... 7 ZNAČKY PRO SEZNAMY... 7 <ul> </ul>... 7 <ol> </ol>... 7 <li> </li>... 8 ZNAČKY PRO TABULKY... 8 <table> </table>... 8 <thead> </thead>... 8 <tbody> </tbody>... 8 <tr> </tr>... 8 <td> </td>... 9 <th> </th>... 9 <caption> </caption>... 9 <colgroupe>... 9 ZNAČKY PRO FORMULÁŘE... 9 <form> </form>... 9 <select> </select> <textarea> </textarea> <button> </ button> <fieldset> </ fieldset> <legend> </legend> ZNAČKY PRO OHRANIČOVÁNÍ <div> </div> <span> </span> <hr> <iframe> </iframe> <object> </object> ZNAČKY DO <HEAD> <title> </title> <link> Tomáš Herout 1

3 <meta> <base> <script> </script> CSS CO JE TO CSS Druhy selektorů Pseudotřídy nejpoužívanější z nich Dědičnost, kaskádovost a specifičnost HODNOTY POUŽÍVANÉ V CSS STYLOVÁNÍ PÍSMA font-family font-size font-style font-variant font-weight font color line-height letter-spacing word-spacing text-align text-decoration text-overflow vertical-align STYLOVÁNÍ SEZNAMŮ A ODKAZŮ list-style-type list-style-position list-style-image list-style cursor VZHLED POZADÍ background-color background-image background-position background-repeat background-attachement background opacity STYLOVÁNÍ BOXŮ width min-width max-width height min-height max-height margin padding Tomáš Herout 2

4 border-width border-style border-color border border-radius overflow display visibility VZHLED TABULEK border-spacing empty-cells table-layout caption-side POZICOVÁNÍ LAYOUT float clear position z-index Tomáš Herout 3

5 HTML Struktura dokumentu webové stránky Dokument webové stránky se skládá z následujících stavebních bloků: 1. Deklarace podle jakého standardu je dokument napsán, aby prohlížeč věděl jak jej interpretovat (rozuměj, jak jej zobrazit). Nejmodernější deklarací je HTML5 <!DOCTYPE html> Starší deklarací je XHTML 1.1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"" Poz.: XHTML je v porovnání s HTML přísnější, dovoluje značky pouze malým písmem a nepárové značky se musejí ukončovat lomítkem ve značce. 2. HTML dokumentu, začíná značkou <html> a končí </html>. Dále dělí na: a. Hlavička HTML obsahuje doprovodné informace týkající se stránky samotné, ale i odkazy na externí soubory. Umí toho však více, např. přesměrovat uživatele na jinou stránku. Hlavička začíná <head> a končí </head> b. Tělo HTML je určeno pro samotný obsah stránky, který se zobrazuje návštěvníkovi Ukázka struktury dokumentu: <!DOCTYPE html> <html> <head>... </head> <body>... </body> </html> Co je to HTML HTML je značkovací jazyk sloužící jako nosná kostra webové stránky, mající za úkol přenášet obsah stránek a odkazovat na jiné části stránky jako jsou externí CSS styly, externí JavaScriptové soubory a knihovny, flashové soubory apod. Existují dva druhy HTML značek. Párové značky ohraničují nějaký obsah a skládají se 1. z otevírací značky, která může obsahovat i nějaké atributy (rozuměj, doprovodné informace), ukázka značky otevírající odstavec: <p> a 2. z uzavírací značky, jež má v sobě lomítko, ukázka </p>. Nepárové značky se používají v těch případech, kdy neohraničují žádný obsah. Jako příklad lze uvést značku <br>, která má za úkol zalomit text, a tudíž logicky nic ohraničuje. HTML značky se v praxi do sebe vnořují a tím mezi sebou vytvářejí vztahy. Vnořená značka se stává potomkem předka, tedy značky, do které je vnořena. Ukázka předka a potomka: <body> <p> <!--jeho předek je značka <body> --> <a> href="stranka.html"> </a> <!-- potomek <p> --> </p> </body> 2015 Tomáš Herout 4

6 Každou HTML značku můžete pojmenovat tak, aby se na ni dal použít styl CSS nebo aplikovat pravidla JavaScriptu. Pojmenovávají se dvěma způsoby: 1. Identifikátorem id="text" identifikátor stejného jména může být použit jen jednou v jednom dokumentu 2. Třídou class="text" jeden název třídy lze opakovaně používat v jednom dokumentu Název identifikátoru a třídy nesmí začínat číslicí a nesmí obsahovat mezeru. Na jednu značku může být současně použit jeden identifikátor a neomezené množství tříd. Ukázka označení značky: <p id="nazev" class="prvnitrida druhatrida tretitrida">... </p> Poz.: HTML zná jen jednu mezeru. Pokud při zápisu v HTML kódu uděláte více mezer, tak zobrazena bude pouze jedna. Pokud vytvoříte nový řádek kliknutím na ENTER, tak to se nezobrazí vůbec. Jak se nazývají části kódu HTML Značky pro texty, obrázky a odkazy Nenajdete zde všechny značky a všechny jejich atributy, ale hlavně ty nejčastěji používané. Úmyslně jsou vynechány zastaralé značky a atributy. Všechny značky mohou mít atribut id a class. <p> </p> Označuje začátek a konec odstavce textu. Může mít následující potomky (obklopovat je) <a>, <img>, <br>, <strong>, <abbr>, <citate>, <code>, <address>, Ukázka: <p>obsah odstavce...</p> <br> Značka, která označuje místo, na kterém má být zalomen obsah na nový řádek. Ukázka: <p>obsah odstavce <br>text na novém řádku</p> 2015 Tomáš Herout 5

7 <a> </a> Slouží pro ohraničení odkazu, nebo vytvoření kotvy. Měl by být uvnitř jiné obsahové značky (tedy potomkem) např. odstavce <p>, který by se stal jeho rodičem. Ukázka odkazu: <a href="helpmark.html#nazev-kotvy" title="titulek">odkaz</a> Ukázka označení místa kotvy: <a name="nazev-kotvy"></a> href="url" slouží k zadání URL adresy. Povinné! Ukázka absolutní URL: <a href=" </a> ukázka relativní URL: <a href="../stranka.html">... </a> title="text" může sloužit k zadání titulku, který se bude zobrazovat nad odkazem v případě, že na něm bude kurzor myši name="text" se používá k označení a pojmenování místa v HTML dokumentu, na které bude směřovat odkaz s kotvou ve tvaru #nazev-kotvy. V názvu nesmějí být mezery a nepoužívejte ani diakritiku. target="hodnota" jedná se o zastaralý atribut, ale stále používaný. Specifikuje to, v jakém okně se odkaz zobrazí: target="_blanc" otevře se v novém okně / záložce <img> Značka pro vložení obrázku. Ukázka odkazu: <img src="../image/obrazek.jpg" alt="popis obrázku" title="titulek"> src="url" označuje cestu k místu, na kterém je obrázek uložen. Povinné! alt="text" má obsahovat alternativní text, který by se zobrazil v případě, že se nezobrazí obrázek, ať z důvodu závady, nebo pro nevidomé a roboty vyhledávačů. Povinné! title="text" zobrazí se návštěvníkovi, když ukáže kurzorem myši na obrázek. widht="číslovka" určí šířku zobrazovaného obrázku. Pozor, nejedná se o zmenšení velikosti obrázku, pouze o rozměr jeho zobrazení. height="číslovka" určí výšku zobrazovaného obrázku. <h1> </h1> Značka označující nadpis. Nadpisy mají max. šest úrovní. Nadpis <h1> smí být použit pouze jednou v dokumentu. Ostatní úrovně lze používat neomezeně, ale pouze v sestupném pořadí vůči dokumentu. Ukázka správného řazení nadpisů: <h1>nadpis první úrovně</h1> <h2>nadpis druhé úrovně</h2> <h3>nadpis třetí úrovně</h3> <h4>nadpis čtvrté úrovně</h4> <h2>znovu nadpis druhé úrovně</h2> 2015 Tomáš Herout 6

8 <strong> </strong> Značka, označující slovo, nebo více slov, která mají být důležitější, než ostatní. Tuto značku prohlížeče obvykle zobrazí tučným písmem, ale to lze pochopitelně změnit v CSS. Obdobou je značka <b>, která však znamená pouze tučné, ale ne důležité. Ukázka: <p>obsah odstavce <strong>důležité</strong>...</p> <cite> </cite> Ohraničuje citaci. Pozor, zde dochází k zásadnímu rozdílu mezi HTML 4.01, ve které se tak označuje celý citovaný obsah, kdežto v HTML 5 se touto značkou označuje pouze název díla. Prohlížeče takto označený text zobrazí kurzívou, pokud CSS nestanoví jinak. <blockquote> </ blockquote > Používá se také k citaci, avšak jako velký blok, který v sobě může obsahovat značky jako je <p>, <table> cite="url" označuje URL adresu, ze které je citováno <code> </code> Používá se k ohraničení části, která obsahuje kód. Prohlížeč takovou část obvykle zobrazí neproporcionálním písmen většinou Courier, nezmění-li to CSS. Značky pro seznamy Uspořádané a neuspořádané seznamy se používají buď k původnímu účelu, tedy jako seznamy, avšak na webech se běžně užívají i k tvorbě menu, jelikož menu jsou ve své podstatě seznamy odkazů. Seznamy lze do sebe libovolně vnořovat. Ukázka použití seznamů: <ol> <!-- otevírací značka seznamu --> <li>první položka uspořádaného seznamu</li> <li>druhá položka uspořádaného seznamu <ul> <!-- otevírací značka vnořeného seznamu --> <li>položka vnořeného neuspořádaného seznamu</li> </ul> <!-- uzavírací značka vnořeného seznamu --> </li> </ol> <!-- uzavírací značka seznamu --> <ul> </ul> Značka určená pro ohraničení začátku a konce neuspořádaného seznamu. Neuspořádaný seznam znamená, že nezáleží na pořadí položek. Grafické provedení lze nastavit v CSS, byť existují atributy, kterými se dá omezeně nastavit vzhled přímo v HTML, ale je to zastaralá technika a nedoporučuje se. <ol> </ol> Značka určená pro ohraničení začátku a konce uspořádaného seznamu. Uspořádaný seznam znamená, že záleží na pořadí položek. Značení je možné: 1, A, a, I 2015 Tomáš Herout 7

9 <li> </li> Značka určená pro ohraničení začátku a konce položky uspořádaného i neuspořádaného seznamu. Ukázka tabulky: Značky pro tabulky <table> <thead> <tr> <th>záhlaví prvního sloupce na prvním řádku</th> <th>záhlaví druhého sloupce na prvním řádku </th> </tr> </thead> <tbody> <tr> <td>první sloupec na druhém řádku</td> <td>druhý sloupec na druhém řádku</td> </tr> <tr> <td clospan="2">sloučení dvou sloupců na třetím ř.</td> </tr> </tbody> </table> <table> </table> Značka určená pro ohraničení začátku a konce tabulky. Dávejte veliký pozor na ukončovací značku, protože její opomenutí může způsobovat značné problémy. border="číslice" určuje počet pixelů, které budou tvořit rámeček každé buňky tabulky. Prohlížeče je většinou sami nastavují na 1px, pokud není border určen webdesignerem. width="číslice" určuje minimální šířku celé tabulky. Pokud určena není, tak se přizpůsobuje obsahu tabulky. cellpadding="číslice" definuje vnitřní okraj jednotlivých buněk tabulky, tedy vzdálenost obsahu od rámečku. Prohlížeče jej většinou nastavují sami na 1px, není li definován. cellspacing="číslice" určuje vnější okraj buněk tabulky, čímž vytváří vzdálenost rámečků sousedních buněk. Prohlížeče jej většinou nastavují sami na 2px, není li definován. <thead> </thead> Ohraničí nadpis tabulky. Musí být vnořen do <table>. <tbody> </tbody> Ohraničí tělo tabulky. Musí být vnořen do <table>. <tr> </tr> Určuje řádek tabulky. Je vždy vnořen do <table> a do něj jsou vnořeny značky <td>, nebo <th>. Dříve používal atributy na vzhled, ale ty jsou dnes zastaralé. Doporučuji stylovat pomocí CSS Tomáš Herout 8

10 <td> </td> Určuje buňku tabulky. Je vždy vnořen do <tr>. Nemá-li buňka definovánu šířku, tak se přizpůsobuje obsahu, ale podle nejdelšího obsahu v příslušném sloupci. clospan="číslice" slouží ke sloučení buňky do více sousedních buněk sloupců. Číslicí se určuje počet sloupců, se kterými se sloučí. rowspan="číslice" slouží k přesahu buňky do sousedních řádků. Číslicí se určuje počet řádků, do kterých bude přesahovat. <th> </th> Určuje buňku tabulky, která slouží jako hlavička sloupce, nebo řádku. Je vždy vnořen do <tr>. Nemá-li buňka definovánu šířku, tak se přizpůsobuje obsahu podle nejdelšího obsahu v jejím sloupci. clospan="číslice" slouží ke sloučení buňky do více sousedních buněk sloupců. Číslicí se určuje počet sloupců, se kterými se sloučí. rowspan="číslice" slouží k přesahu buňky do sousedních řádků. Číslicí se určuje počet řádků, do kterých bude přesahovat. <caption> </caption> Může být použit pro titulek tabulky. Umisťuje se hned za značku <table>. <colgroupe> Někdy užitečná značka, která sdruží jeden, nebo více sloupců a usnadňuje tak jejich stylování. span="číslice" číslicí se určuje počet sousedících sloupců, které se sdružují. Značky pro formuláře Ukázka formuláře: <form action="/cesta-ke-zpracovani-formulare.php" method="post"> <label for="jmeno"> Jméno: </label> <input id="jmeno" type="text" name="jmeno"> <label for="ano"> Ano: </label> <input type="radio" name="vyber" id="ano"> <label for="ne"> Ne: </label> <input type="radio" name="vyber" id="ne"> </form> <form> </form> Tato značka ohraničuje začátek a konec formuláře, který bude v jeden okamžik odeslán. Má dva povinné atributy, a sice action a method. action="url" tento atribut předává cestu k souboru, který formulář po odeslání zpracuje. method="hodnota" určuje metodu, která bude použita k odeslání formuláře. Existují: o "get" obsah se ukládá a přenáší prostřednictvím URL adresy, a to tak, že se do URL zapíše za znak otazníku?. Výhodou této metody je to, že ji lze kopírovat spolu s URL, nevýhodou je bezpečnostní riziko způsobené viditelností a omezený počet znaků k přenosu. Používá se např. pro vyhledávání. o "post" obsah se ukládá a přenáší pomocí tzv. metaproměnné a není vidět v URL. Výhodou je možnost přenášet větší objem dat a díky tomu, že není vidět v URL je to 2015 Tomáš Herout 9

11 <input> bezpečnější. Nevýhodou je nemožnost odkazování pomocí URL a problémy s vracením se o stránku zpět. Používá se pro přenos rozsáhlejších dat a hesel. Asi nejčastěji používaná značka ve formulářích, protože toho umí opravdu hodně. Znamená vstupní pole a má více typů. Tyto atributy jsou povinné: name a type. name="text" zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. type="hodnota" určuje, o jaký druh vstupního pole se jedná. Níže naleznete soupis typů: o "text" obyčejné textové pole. o "password" textové pole, které vložená písmena zobrazuje jako tečky z důvodu bezpečnosti. o "checkbox" zobrazí zaškrtávací pole, ve kterých můžete zaškrtnout neomezené množství polí. o "radio" také zaškrtávací pole, ale můžete zvolit jen jednu z možností. o "file" tlačítko otevírající dialogové okno určené pro výběr souboru určeného k odeslání. o "hidden" skryté pole se používá pro přenesení informace, kterou uživatel nezadává. o "submit" slouží jako tlačítko pro odeslání formuláře. o "reset" slouží jako tlačítko pro smazání obsahu formuláře. o "image" používá se také jako tlačítko pro odesílání formuláře, rozdíl je v tom, že sleduje souřadnice místa, kam uživatel klikl. Je to tedy obdoba obrázkové mapy. o "button" opět tlačítko, ale neodešle formulář automaticky, nýbrž může být spojeno se skriptem, který formulář zkontroluje a pak teprve odešle. o " " totéž, co text, ale pokud mu přidáte atribut required, pak prohlížeč sám ještě před odesláním provede ověření, že vložený obsah má tvar u. Platí jen pro HTML5. o "date" prohlížeč umožní návštěvníkovi zobrazit kalendář pro vložení data. Platí jen pro HTML5. size="číslice" udává velikost zobrazeného pole. maxlength="číslice" povoluje maximální počet znaků zapsaných do pole. value="text" umožní vložit předefinovanou hodnotu. Hodí se např. u jazykových mutací. accept="type" používá se jen v případě type="file" a určuje povolené přípony souborů. Jednotlivé přípony se oddělují čárkou. accesskey="znak" přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC). <select> </select> Pole formuláře, které umožní návštěvníkovi vybrat z předdefinovaných možností. Používané atributy: name="text" zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. size="číslice" udává velikost pole. Pokud je hodnota 1, tak se zobrazí jeden řádek s roletkou, ve které budou nabízené možnosti k výběru. V případě vyšší hodnoty než 1, zobrazí se větší pole s postníkem. multiple umožní návštěvníkovi vybrat více, jak jednu možnost z výběru, a to za pomoci tlačítka Ctrl Tomáš Herout 10

12 <textarea> </textarea> Používá se jako velké vstupní textové pole s více řádky. Jeho atributy: name="text" zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. rows="číslovka" určuje výšku vstupního pole. Číslovka určuje počet zobrazených řádků. Pokud obsah překročí daný počet řádků, tak se vpravo objeví posuvník. cols="číslovka" určuje šířku vstupního pole. Číslovka určuje počet viditelných znaků na řádku. Nemá vliv na odesílaná data. accesskey="znak" přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC) <button> </ button> Tlačítko používané pro spouštění skriptů. name="text" zde uvedené klíčové slovo bude připojeno k odeslaným datům, aby jej bylo možné identifikovat na straně příjemce formuláře. value="text" Text, který se vypíše na tlačítku accesskey="znak" přiřadí vstupnímu poli klávesovou zkratku, kterou lze použít s kl. Alt (CMD u MAC). <fieldset> </ fieldset> Jedná se o alternativní značku, kterou můžete ohraničit formulářové prvky, které spolu souvisí. Nemusíte ji však použít vůbec. <legend> </legend> Pokud použijete <fieldset>, tak pomocí této značky můžete vložit nějaký nadpis. Značky pro ohraničování <div> </div> Značka, která nemá konkrétní význam a používá se jen pro ohraničení bloků HTML kódu. Přirozeně se jí přiřazují id="" a class="", aby se s ní dalo pracovat v CSS a JavaScriptu. <span> </span> Také nemá konkrétní význam a slouží k ohraničení liniových prvků, jako je část textu. Ukázka: <p>obsah odstavce <span>označený text</span>... </p> <hr> Značka, která od sebe odděluje různá témata obsahu. Pokud není nijak vystylována, tak ji prohlížeče vykreslují jako vodorovnou šedivou čáru Tomáš Herout 11

13 <iframe> </iframe> Vytváří blok o definovaných rozměrech, ve kterém je možné zobrazit libovolný kus dokumentu z jiné stránky. Pozor! Pro vyhledávače je to jakoby prázdné místo. src="url" odkaz na dokument, který má být zobrazen. width="číslice" udává šířku prostoru. height="číslice" udává výšku prostoru. <object> </object> Značka slouží pro vložení různých objektů, jako např. flash. Může být doplněna o značky param, které poslouží k doplňujícím informacím daného objektu. Mezi značky by měl být umístěn alternativní obsah (např. obrázek), který se zobrazí v případě nezobrazení obsahu objektu. data="url" odkaz na soubor, který má být zobrazen. codetype="specifikace" informuje prohlížeč o druhu objektu. width="číslice" udává šířku objektu. height="číslice" udává výšku objektu. name="text" identifikuje objekt pro odkazy a skripty. Značky do <head> <title> </title> Titulek je takový hlavní nadpis celé stránky, který se zobrazí v záhlaví prohlížeče, je použit jako návrh na název záložky a hlavně z něj čerpají klíčová slova vyhledávače, jako jsou Google a Seznam. Neměl by být příliš dlouhý a obsahovat nic neříkající slova. Délka cca od 15 do 60 znaků. <link> Odkazuje na externí soubory v drtivé většině na externí CSS. href="url" odkaz na externí soubor. rel="vztah" definuje vztah mezi HTML dokumentem a externím souborem. V případě CSS se používá "stylesheet" type="specifikace" informuje o obsahovém typu. Např.: "text/css" <meta> name="specifikace" určení o jaký druh metaznačky se jedná. o "description" popis stánky, který doplňuje titulek. Nezobrazuje se sice nikde na stránce, ale slouží vyhledávačům pro zobrazení ve výsledcích vyhledávání. Měl by obsahovat cca od 100 do 155 znaků. o "keywords" určen pro definování klíčových slov stránky. Google a Seznam je však ignorují vzhledem k častému zneužívání. Na stránce se nikde nezobrazuje. o "robots" informuje roboty vyhledávačů (Seznam, Google ) zda mohou indexovat a následovat odkazy (content="index, follow"), či nikoli (content="noindex, nofollow") o " author" můžete určit autora obsahu http-equiv="specifikace" používá se na místo name o "content-type" užívá se převážně pro znakovou sadu stránky, např.: <meta http-equiv="content-type" content="text/html; charset=utf-8"> 2015 Tomáš Herout 12

14 o "Refresh " zařídí přesměrování stránky na jinou URL <meta http-equiv="refresh" content="2; URL= content="text" obsah meteznačky v závislosti na použití name nebo http-equiv. <base> Značka určující základní URL adresu dokumentu, vůči které jsou ve stránce uvedeny relativní URL. <base href=" <script> </script> Slouží pro ohraničení skriptovacího kódu, převážně JavaScriptu. Nemusí být nutně v záhlaví dokumentu, ale i <body>. Může také obsahovat jen odkaz na externí soubor. type="specifikace" identifikuje typ použitého jazyka (např.:"text/javascript"). src="url" odkaz na externí soubor skriptu Tomáš Herout 13

15 Co je to CSS CSS CSS je jazyk určený k ovlivňování zobrazení HTML dokumentu. Každý prohlížeč má uvnitř sebe nastaveno, jak má reagovat na HTML značky, a jak zobrazit obsah umístěný mezi nimi. Webdesigneři pochopitelně nechtějí, aby se všechny stránky zobrazovaly stejně, a právě k tomu jim slouží CSS, aby návštěvníkovi mohli přinést poutavý design. CSS je možné psát přímo do HTML dokumentu, ale není to správné řešení, protože tím zaprvé narůstá velikost HTML kódu a zadruhé následná údržba takového webu by se stala noční můrou. Špatně to také hodnotí vyhledávače, tudíž to neprospívá SEO. Ukázka stylu vloženého do HTML tkz. in-line styl: <p style="color:red">červené písmo... </p> Správným řešením je CSS psát odděleně do HTML. Nezvětšuje se tím velikost HTML kódu, zrychluje se načítání jednotlivých stránek webu a údržba se stává snadnější. Ukázka HTML kódu: <body> <p class="cervena">... </p> </body> Ukázka CSS kódu:.cervena { color:red;... } Jak se nazývají části kódu CSS 2015 Tomáš Herout 14

16 Druhy selektorů Univerzální selektor hvězdička * Obecné selektory se zapisují značkou html elementu např.: a, p, h1, ul, li, table, tr, th, td, div, span... Identifikátory se zapisují tak, že se před ně napíše mřížka # např.: #nazev-identifikatoru Třídy se zapisují tak, že se před ně napíše tečka. např.:.nazev-tridy Pseudotřídy mají své zvláštní postavení a píší se tak, že se před ně dává dvojtečka např.: a:hover Pro určitou skupinu deklarací vlastností můžete použít více selektorů, které od sebe oddělíte čárkou a mezerou. Výjimkou jsou pseudotřídy. např.: #nazev-identifikatoru,.nazev-tridy, a:hover, p Pseudotřídy nejpoužívanější z nich :hover Dynamická pseudotřída, která ovlivňuje elementy, na nichž je zrovna kurzor myši. :nth-child() Pseudotřída, která ovlivňuje určitý dceřiný prvek podle pořadí uvedeném v závorce. Např. pokud napíšete (odd), tak ovlivníte liché prvky, pomocí (even) zase sudé, zápisem (3n+1)každý třetí :nth-of-type() Pseudotřída, která ovlivňuje určitý sourozenecký prvek podle pořadí uvedeném v závorce. Např. pokud napíšete (odd), tak ovlivníte liché prvky, pomocí (even) zase sudé, zápisem (3n+1)každý třetí Dědičnost, kaskádovost a specifičnost Již jsme se dozvěděli, že HTML se do sebe vnořuje a vytváří vztahy předků a potomků. CSS jazyk s tím počítá a některá pravidla se dědí z předků na potomky. Např. definujete-li použití určitého fontu písma pro nadřazený prvek, tak se font zdědí i do jeho potomků. Tuto dědičnost lze změnit konkrétním značkám, rodinám značek, třídám a identifikátorům. Ne každé pravidlo se dědí. Při vytváření selektorů můžete využít kaskády jazyka CSS, respektive HTML. Příklad využití kaskády bez sledování hloubky vztahu: p.cervena a { color:red;... } Vysvětlení přikladu: deklarace vlastnosti color:red (barva písma červená) se bude aplikovat jen na značky <a> (odkazy), ale pouze v tom případě, že se budou nacházet ve značce <p> (odstavci), který má současně atribut class="cervena". V tomto případě není sledována hloubka vnoření. Takový selektor tedy popisuje, jak má vypadat kaskáda HTML, aby se deklarace vlastností na ně aplikovala. Aplikuje se vždy jen na poslední prvek v kaskádě Tomáš Herout 15

17 Příklad selektoru přímého potomka: li > a {... } Vysvětlení přikladu: vztahuje se pouze na případ, kdy <a> je přímím potomkem <li>. Pokud by <a> bylo vnořeno hlouběji, (např. ještě v <p>)tak se tato pravidla již nevztahují. Příklad selektoru sousedícího sourozence: h1 + p {... } Vysvětlení přikladu: vztahuje se pouze na <p>, které přímo sousedí s <h1>. Na všechny ostatní <p> v dokumentu se nevztahuje. Příklad selektoru obecného sourozence: h2 ~ p {... } Vysvětlení přikladu: vztahuje se na všechna <p>, která mají sourozenecký vztah s <h2>, ale nemusejí být hned po něm. Příklad selektoru vybraného podle parametrů: a[title="text"] {... } Vysvětlení přikladu: vztahuje se na <a>, která mají v titulku daný text. Specifičnost slouží k rozhodnutí, která pravidla stylů budou prohlížečem aplikována v případech, kdy se na jednu značku bude vztahovat více CSS pravidel. Ukázka, jak se počítá specifičnost: Selektor Hodnota specifičnosti <img style=""...> 1,0,0,0 (1000) #rodic-id #potomek-id{} 0,2,0,0 (200) #rodic-id.potomek-trida{} 0,1,1,0 (110) #id img{} 0,1,0,1 (101) #id{} 0,1,0,0 (100).trida{} 0,0,1,0 (10) img{} 0,0,0,1 (1) 2015 Tomáš Herout 16

18 Hodnoty používané v CSS Značka px pc pt mm cm in em ex Popis Pixel jeden obrazový bod Pica 1pc = 12px Typografický bod 1pt = 0,376 mm Milimetr Centimetr Palec 1in = 2,54 cm Šířka velkého M Šířka malého x % Procenta proporcionální hodnota relativní vůči jiné hodnotě. Např. body{font-size:12pt;} h2{font-size:150%;} # Hexadecimální zápis barvy, který má mřížku a 6 znaků od 0 do FF Např. *{color:#ff0000;} rgb() rgba() s ms Zápis barvy r = červená, g = zelená, b = modrá. Hodnoty se od sebe oddělují čárkou. Možné zapisovat čísli od 0 do 255, nebo procenty Např. *{color:rgb(100%, 0, 0);} Zápis barvy obdobný jako výše. Rozdíl je v poslední číslovce, která určuje průhlednost. Např. *{color:rgba(255, 0, 0, 0.5);} Sekunda Milisekunda Krom značek se někdy mohou používat také reálná čísla, např. line-height: 1.5 znamená, výška řádku jeden a půl Tomáš Herout 17

19 Stylování písma font-family Typ písma, které má být použito pro zobrazení. Problém s fonty je ten, že prohlížeče používají fonty z operačního systému, takže pokud byste použili font, který v OS není, tak se font nezobrazí. Nemusí být použito jen jedno písmo, ale třeba celá rodina. V případě víceslovných názvů fontů je nutné obalit tyto názvy do uvozovek. Ukázka: font-family: Arial, Verdana, sans-serif; Ukázka víceslovného jména fontu: font-family: "Times New Roman", serif; Druhy fontů se dají do počítače návštěvníka nahrát. Jednou z metod je import z Google url(cesta) Další možností je nahrání { } font-family: jmenofontu; src: url("souborfontu.ttf"); font-size Velikost písma. Určuje se buď jednotkami délky, procentuálně k rodičovské hodnotě, nebo vyhrazenými slovy: large = písmo o jeden stupeň větší; smaller = písmo o jeden stupeň menší; small = cca 9px medium = cca 16px; large = cca 18px; inherit = zdědí se od předka. font-style Styl použitého písma, určuje se vyhrazenými slovy: normal = normální písmo; italic = kurzíva; oblique = skloněné; inherit = zdědí se. font-variant Varianta použitého písma vyhrazenými slovy: normal = normální písmo; small-caps = kapitálky; inherit = zdědí se Tomáš Herout 18

20 font-weight Síla (tučnost) písma, určuje se číselnou hodnotou od 100 do 900, přičemž 400 odpovídá normální hodnotě nebo vyhrazenými slovy: normal = normální písmo; bold = tučné; bolder = tučnější; lighter = zeslabené; inherit = zdědí se. font Souhrnný zápis hodnot: family size style variant weight Ukázka: font: Arial 12px italic small-caps bold; Verze CSS = 1 a vyšší, dědičnost: ano color Barva textu a efektů jako je podtržení apod. Určuje se hexadecimálně, pomocí rgb(),rgba()nebo vyhrazenými názvy barev. line-height Výška řádku určená typem písma. Určuje se reálným číslem, kdy 1 je normál, či procenty vůči rodiči nebo jednotkami délky. letter-spacing Velikost mezer mezi písmeny. Určuje se jednotkami délky, nebo normal = velikost se nemění. word-spacing Velikost mezer mezi slovy. Určuje se jednotkami délky. text-align Horizontální zarovnání textu. Určuje se vyhrazenými slovy: left = vlevo; right = vpravo; center = na střed; justify = do bloku. text-decoration Dekorace textu, určuje se vyhrazenými slovy: none = bez dekorace; underline = podtržení; overline = nadtržení; line-through = přeškrtnutí; blink = blikání; inherit = zdědí se od nadřazeného elementu Tomáš Herout 19

21 text-overflow Chování textu přesahujícího okraj svého elementu. Určuje se vyhrazenými slovy: clip = bez označení na konci; ellipsis = s označením na konci pomocí výpustky. Verze CSS 3, dědičnost: ano vertical-align Vertikální zarovnání textu. Určuje se jednotkami délky, procenty a vyhrazenými slovy: baseline = text leží na řádku; sub = dolní index; super = horní index; top = nahoře; middle = střed; bottom = dole. Stylování seznamů a odkazů list-style-type Typ označení položky seznamu. Určuje se vyhrazenými slovy: disc = plné kolečko; circle = prázdné kolečko; square = čtvereček; decimal = celé číslo; decimal-leading-zero = celé číslo začínající nulou; lower-roman = malé římské číslo; upper-roman = veklé římské číslo; lower-alpha = malé písmeno; upper-alpha = velké písmeno; lower-latin = malé písmeno; upper-latin = velké písmeno; georgian = hebrejské číslo; armenian = arménské číslo; none = žádné zobrazení. Tato deklarace se používá u značky <ul>. list-style-position Umístění označení položky. Určuje se vyhrazenými slovy: outside = umístí vně položky seznamu, zalomený text bude pokračovat vedle označení; inside = umístí uvnitř položky seznamu, zalomený text bude pokračovat pod označením. list-style-image Obrázek na místo předdefinovaných typů. Hodnota: url()= cesta k danému obrázku list-style Souhrnný zápis hodnot: type position image Ukázka: list-style: circle outside; 2015 Tomáš Herout 20

22 cursor Vzhled kurzoru myši nad daným elementem. Určuje se vyhrazenými slovy a vlastní pomocí URL url()= cesta k danému obrázku Verze CSS 2 a vyšší, dědičnost: ano Vzhled pozadí background-color Barva pozadí. Určuje se hodnotou psanou v hexadecimálních číslech, RGB, RGBA, názvem barvy, nebo vyhrazeným slovem transparent = průhledné pozadí. background-image Obrázek zobrazovaný na pozadí. Určuje se pomocí URL: url()= cesta k danému obrázku background-position Pozice obrázku na pozadí. Určuje se jednotkami délky, procenty nebo vyhrazenými slovy: top = zarovná se k hornímu okraji; center = zarovná se na střed; bottom = zarovná se k dolnímu okraji; left = zarovná se k levému okraji; right = zarovná se k pravému okraji; inherit = zdědí se od nadřazeného elementu. Syntax zápisu: background-position: hodnota hodnota pro osu x a y Ukázka: background-position: top left; background-repeat Způsob opakování obrázku. Určuje se vyhrazenými slovy: repeat = opakuje se do vyplnění celé oblasti po ose x i y; repeat-x = opakuje se po ose x; repeat-y = opakuje se po ose y; no-repeat = neopakuje se; inherit = zdědí se od nadřazeného elementu. background-attachement Posouvání obrázku na pozadí. Určuje se vyhrazenými slovy: scroll = pozadí se posouvá se stránkou; fixed = pozadí zůstává na místě a nepohybuje se; inherit = zdědí se od nadřazeného elementu Tomáš Herout 21

23 background Souhrnný zápis hodnot: color image position repeat attachement Ukázka: list-style: circle outside; opacity Průhlednost. Určuje se číslem v rozmezí 1.0 (neprůhledné) až 0.0 (zcela průhledné). Verze CSS 3, dědičnost: ne width Stylování boxů Přesná šířka elementu. Určuje se jednotkami délky, procenty nebo vyhrazeným slovem: auto = šířka se přizpůsobí obsahu. min-width Minimální šířka elementu. Určuje se jednotkami délky, nebo procenty. max-width Maximální šířka elementu. Určuje se jednotkami délky, nebo procenty. height Přesná výška elementu. Určuje se jednotkami délky, procenty nebo vyhrazeným slovem: auto = šířka se přizpůsobí obsahu. min-height Minimální výška elementu. Určuje se jednotkami délky, nebo procenty. max-height Maximální výška elementu. Určuje se jednotkami délky, nebo procenty Tomáš Herout 22

24 margin Šířka vnějšího okraje. Tedy oblasti, ve které nebude background. Určuje se jednotkami délky, procenty, nebo vyhrazeným slovem auto = okraj se přizpůsobí obsahu tak, že se dopočítá k nejbližšímu nadřazenému elementu. Syntax zápisu: margin: nahoře vpravo dole vlevo margin: nahoře vpravoavlevo dole margin: nahořeadole vpravoavlevo margin: všechnystrany Lze také zapisovat jako margin-left: padding Vnitřní odsazení od okraje elementu. V této oblasti se bude zobrazovat background. Určuje se jednotkami délky, nebo procenty. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako paddig-left: vnější okraj okolo elementu margin rámeček okolo elementu border vnitřní odsazení od okraje elementu padding obsah elementu width a height border-width Šířka rámečku okolo elementu. Nefunguje bez border-style. Určuje se jednotkami délky, nebo vyhrazenými slovy: medium = střední rámeček; thin = slabý rámeček; thick = silný rámeček; inherit = zdědí se od nadřazeného elementu. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako border-top-width: border-style Styl rámečku okolo elementu. Určuje se vyhrazenými slovy: solid = spojitý; double = dvojitý; groove = zařízlý; ridge = vyvýšený; inset = vmáčknutý dovnitř; outset = vystouplý ven; dotted = tečkovaný; dashed = čárkovaný; none = žádný; inherit = zdědí se od nadřazeného elementu. Syntax zápisu je stejná jako u margin. Lze také zapisovat jako border-top-style: 2015 Tomáš Herout 23

25 border-color Barva rámečku. Určuje se hodnotou psanou v hexadecimálních číslech, RGB, RGBA, názvem barvy, nebo vyhrazeným slovem transparent = průhledné pozadí. border Souhrnný zápis hodnot: width style color Ukázka: border: 1px solid #FF0000; border-radius Zakulacení (rádius) rohů. Určuje se jednotkami délky. Syntax zápisu: border-radius: horizontální vertikální border-radius: horizontálníavertikální Lze také zapisovat jako border-top-right-radius: Verze CSS 3, dědičnost: ne overflow Zacházení s obsahem, který se nevejde do elementu. Určuje se vyhrazenými slovy: virble = přetékající obsah se zobrazí i mimo element; hidden = přetékající obsah se nezobrazí vůbec; scroll = zobrazí se posuvné lišty vždy, i kdyby obsah nepřetekl; auto = pokud obsah přeteče, tak se zobrazí posuvná lišta a obsahem bude možné rolovat; inherit = zdědí se od nadřazeného elementu. Lze také zapisovat jako overflow-x a overflow-y. Verze CSS 2 a vyšší, dědičnost: ne display Způsob zobrazení elementu. Určuje se vyhrazenými slovy: inline = řádkový; block = blokový; list-item = položka seznamu; none = nezobrazí se, ani nebude zabírat žádné místo; list-item = chování seznamu; table-cell = chování jako buňka tabulky; atd Každý element má své přirozené display. Např. odstavec <p> má display: block, text uvnitř odstavce má display: inline. visibility Viditelnost elementu. Určuje se vyhrazenými slovy: visible = zobrazený; hidden = skrytý, ale stále zabírá svou pozici v HTML toku; inherit = zdědí se od nadřazeného elementu. Verze CSS 2 a vyšší, dědičnost: ano 2015 Tomáš Herout 24

26 Vzhled tabulek border-spacing Velikost mezer mezi buňkami, v případě viditelných rámečků mezery mezi rámečky buněk mezi sebou a případně rámečku celé tabulky. Určuje se jednotkami délky. Syntax zápisu: border-spacing: horizontální vertikální border-spacing: horizontálníavertikální Verze CSS 2 a vyšší, dědičnost: ano empty-cells Definice, zda se rámeček zobrazí i kolem buněk bez obsahu. Určuje se vyhrazenými slovy: show = rámeček se zobrazí i v prázdných buňkách; hide = rámeček se nezobrazí v prázdných buňkách; inherit = zdědí se od nadřazeného elementu. Verze CSS 2 a vyšší, dědičnost: ano table-layout Způsob výpočty šířky tabulky. Určuje se vyhrazenými slovy: auto = přizpůsobí se obsahu; fixed = pevně uzamknutá šířka. caption-side Umístění titulku tabulky. Určuje se vyhrazenými slovy: top = nad tabulkou; bottom = pod tabulkou; left = zleva vedle tabulky; right = zprava vedle tabulky; inherit = zdědí se od nadřazeného elementu. float Pozicování layout Pozice elementu v rámci obtékání. Obtékání prakticky způsobí vynětí kódu z přirozeného toku dokumentu. Určuje se vyhrazenými slovy: left= umístí element při levém okraji nadřazeného elementu; right = umístí element při pravém okraji nadřazeného elementu; none = běžný tok dokumentu; inherit = zdědí se od nadřazeného elementu. Nadřazený element např. <div> width:800px; padding: 30px 10px float: left; width: 45%; float: right; width: 45%; 2015 Tomáš Herout 25

27 clear Ukončí obtékání float. Obtékaní sice není dědičné, ale prakticky vyjme takto označené elementy z přirozeného toku dokumentu. Clear zruší toto vyjmutí. Určuje se vyhrazenými slovy: left = ukončí obtékání z levé strany; right = ukončí obtékání z pravé strany; both = ukončí obtékání z obou stran; inherit = zdědí se od nadřazeného elementu. position Pozice elementu v toku dokumentu. Určuje se vyhrazenými slovy: static = zobrazení v rámci běžného toku; relative = posunutí vzhledem k původnímu umístění, výchozí bod pro posunutí je tedy ten, kde by se element nacházel normálně, původní místo elementu zůstane jako by obsazené, nové místo posunutého elementu nijak neovlivní ostatní elementy, mohou se tedy překrývat; absolute = absolutní vyjmutí z toku dokumentu, nové umístění se bude počítat k nejbližšímu elementu v toku dokumentu, který je označen jako relative, nebo není-li žádný takto označen, tak k dokumentu HTML. Původní místo absolutně vyjmutého elementu bude obsazeno částmi dokumentu v toku pod ním. Ovlivní tedy ostatní elementy. Nové umístění může překrývat jiné elementy; fixed = pevně umístěn na určenou pozici okna prohlížeče, je zcela vyjmut z toku dokumentu, stejně jako absolute, jen s tím rozdílem, že se nepohybuje společně se stránkou, protože se drží okna a nikoli dokumentu. Verze CSS 2 a vyšší, dědičnost: ne z-index Pořadí zobrazení vrstev elementů, které se určuje v případě, že se elementy překrývají při pozicování. Určuje se číslem. Vyšší číslo znamená menší pravděpodobnost překrytí jiným elementem. Čísla nemusejí tít popořadě a mohou být i mínusová. Verze CSS 2 a vyšší, dědičnost: ne 2015 Tomáš Herout 26

Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)

Skripta ke školení. Autor: Tomáš Herout   Telefon: (+420) Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah HTML... 3 Struktura dokumentu webové stránky... 3 Co je to HTML... 3 Jak se nazývají části kódu

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

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

Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)

Skripta ke školení. Autor: Tomáš Herout   Telefon: (+420) Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

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

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

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

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

(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

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

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

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

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

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

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

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

Ú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

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

<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

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

Inovace a zkvalitnění výuky prostřednictvím ICT Design a vzhledové vlastnosti webových stránek Vlastnosti CSS pro pozicování Ing.

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

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

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

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

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

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

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML Čtvrtek 11. dubna Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje

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

tvoříme web HTML/CSS

tvoříme web HTML/CSS tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce

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

TNPW1 Cvičení

TNPW1 Cvičení 13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS

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

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

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

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

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie

Škola. Téma hodiny 08.08 HTML - Základní návrh stránky Informační a komunikační technologie Škola Střední odborná škola a Střední odborné učiliště, Hustopeče, Masarykovo nám. 1 Autor Ing. Jiří Tinka Číslo projektu CZ.1.07/1.5.00/34.0394 Číslo DUM VY_32_INOVACE_18_ICT_08.08a Název Tvorba webu

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

KASKÁDOVÉ STYLY - PÍSMO

KASKÁDOVÉ STYLY - PÍSMO KASKÁDOVÉ STYLY - PÍSMO Název školy Obchodní akademie, Vyšší odborná škola a Jazyková škola s právem státní jazykové zkoušky Uherské Hradiště Název DUMu Kaskádové styly písmo Autor Zdeněk Hrdina Datum

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

Ú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

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

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu

INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní

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

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot> Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky

Více

Tvorba fotogalerie v HTML str.1

Tvorba fotogalerie v HTML str.1 Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné

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

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

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

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

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů

Více

CSS kaskádové styly a jejich využití při tvorbě internetových stránek

CSS kaskádové styly a jejich využití při tvorbě internetových stránek Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí

Více

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26

CSS Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument... 26 1.2 Vytvoření stylopisu... 26 CSS 5 Obsah Úvod... 15 1. Základy CSS... 25 1.1 Základem je dobrý dokument...26 1.2 Vytvoření stylopisu...26 Základní syntaxe... 26 Komentáře... 27 1.3 Připojení stylopisu k dokumentu XHTML...27 Zápis

Více

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz

TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz 6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj

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

INTERSTENO 2015 Budapest World championship professional Word Processing

INTERSTENO 2015 Budapest World championship professional Word Processing OPERAČNÍ SYSTÉM WORD PROCESSING SOFTWARE (TEXTOVÝ PROCESOR) ID SOUTĚŽÍCÍHO Úloha A-1 Instrukce pro účastníky Otevřete dokument YEAROFLIGHT, ihned ho uložte/převeďte do YEAROFLIGHTXXX.DOC NEBO DOCX, kde

Více

XHTML 1. Formuláře. Element form. <form>... </form>

XHTML 1. Formuláře. Element form. <form>... </form> XHTML 1 Formuláře Činnost: - zadávání informací do elektronického obchodu; - odesílání jména a dalších informací pro on-line službu; - nákup letenek a cestovních služeb; - nákup dalšího zboží a služeb,

Více

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce

Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),

Více

CSS Cascading style sheet přehled vlastností selektory

CSS Cascading style sheet přehled vlastností selektory CSS Cascading style sheet přehled vlastností selektory Praha a EU Investujeme do vaší budoucnosti Obsah 1 Přehled některých vlastností a hodnot... 2 1.1 Formátování textu... 2 1.2 Barvy a pozadí v dokumentu...

Více

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako

CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako absolutně pozicované bloky)

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

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

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

Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy,

Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy, Mgr. Vlastislav Kučera Nadpisy, odstavce, odkazy, Nadpisy Odstavce, zalamování řádku Zvýraznění textu Obrázky Odkazy Bloky, označené části řádku Komentáře Vlastnosti textu color, font-family, font-size,

Více

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako.

Ovládání Open Office.org Calc Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Ukládání dokumentu : Levým tlačítkem myši kliknete v menu na Soubor a pak na Uložit jako. Otevře se tabulka, v které si najdete místo adresář, pomocí malé šedočerné šipky (jako na obrázku), do kterého

Více

Manuál. pro tvorbu webu. HTML CSS JavaScript

Manuál. pro tvorbu webu. HTML CSS JavaScript Manuál pro tvorbu webu HTML CSS JavaScript Obsah HTML... 3 Struktura stránky... 3 Práce s textem... 3 Obrázky a barvy... 4 Odkazy... 4 Seznamy... 5 Tabulky... 5 Formuláře... 6 CSS... 7 Selektory... 7 Písmo

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

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní

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

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

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

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

K 2 - Základy zpracování textu

K 2 - Základy zpracování textu Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY

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