1 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 p...
Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Mohou být použité i jiné programovací jazyky jako XML, XHTML apod. Jednotlivým příkazům jazyka HTML se říká tagy (elementy) a vytvářený soubor může mít podobu dokumentu bez formátovacích značek. Podle tagů prohlížeč zobrazuje příslušné části dokumentu. Tag může být buď párový – stejná značka je na začátku i na konci (koncová je doplněna o symbol / - ukončení) nebo nepárový – má pouze jednu značku. Některé typy prohlížečů si poradí s chybějícím ukončení tagů, jiné mají potíže při jejich zobrazení. Snažte se, aby vaše internetové stránky byly bezchybné tzn. validní. Pro ověření bezchybnosti vašeho napsaného kódu lze použít tzv. validátory. Nejznámější je validátor z konsorcia W3C – http://validator.w3c.org. Výhodou je, že vám validítor zobrazí, na kterém programovém řádku máte chybu. V další části se budeme zabývat značkovacím jazykem XHTML.
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 špatněsprávně
Všechny značky musí být ukončené koncovou značkou
špatně
správně
U značek, u kterých není uzavírací značka, musíme danou značku uzavřít nejlépe způsobem např.: <area />
<meta /> <param />
Všechny značka musíme psát malými písmeny špatněsprávně
Hodnoty atributů musí být v uvozovkách
špatně
správně
Používat externí skripty a šablony stylů <script language="Javascript" src="pokus.js" type="text/javascript">
1
Počítačové sítě - Internet Přísně oddělujte obsah stránek od formátování.
1.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. Striktní definice se deklaruje takto: 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: 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:
2
Počítačové sítě - Internet
1.1.1 Seznam značek definovaných v jednotlivých DTD pro XHTML 1.0. (sloupec DTD strict – s, transitional – t, frameset – f) Značka <base /> <meta /> <link /> <style> <script> <noscript> <frameset> <frame /> <iframe> <noframes> <body> <div> <p> <h1> <h2> <h3> <h4> <h5> <h6> <ul> <ol> <menu> <dir> <li> <dl> <dt> <dd> <address rel="nofollow"> <hr /> <pre> <blockquote> <center> <ins> <del> <a> <span> <bdo> <br /> <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> <abbr rel="nofollow"> <acronym rel="nofollow"> <q> <sub> <sup><br />
<br />
Funkce vymezuje dokument definuje záhlaví dokumentu definuje titulek dokumentu určuje základní adresu pro relativní odkazy definuje doplňující informace o dokumentu připojí jiný dokument definuje styl formátující dokument definuje v dokumentu skript text uvnitř se zobrazí, když není podpora skriptů definuje skupinu rámců definuje rámec vloží do dokumentu rámec text uvnitř se zobrazí, když není podpora rámců definuje tělo dokumentu vytvoří nový oddíl dokumentu vymezuje odstavec text uvnitř značky je nadpis úrovně 1 text uvnitř značky je nadpis úrovně 2 text uvnitř značky je nadpis úrovně 3 text uvnitř značky je nadpis úrovně 4 text uvnitř značky je nadpis úrovně 5 text uvnitř značky je nadpis úrovně 6 definuje seznam s odrážkami definuje číslovaný seznam definuje seznam nabídek definuje seznam souborů či adresářů vytvoří položku seznamu definuje seznam definicí uzavírá definici v seznamu definic uzavírá popis definice v seznamu definic říká že text uvnitř je adresa vloží do dokumentu vodorovný oddělovač zobrazí text přesně tak, jak je zapsán uvnitř označuje citaci bloku textu zarovná text uvnitř značky na střed označí text uvnitř značky jako vložený text označuje odstraněnou část textu definuje propojení k jinému dokumentu slouží pro určení stylu textu uvnitř značky mění směr zobrazení textu ve značce zalomí řádek - odřádkuje zvýrazní text uvnitř značky vypíše text uvnitř značky tučně označuje první výskyt pojmu v dokumentu text uvnitř značky je programový kód označuje ukázku nebo příklad označuje text zapsaný 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 zobrazí text uvnitř značky jako dolní index zobrazí text uvnitř značky jako horní index<br />
<br />
Kategorie struktura dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu záhlaví dokumentu rámce rámce rámce rámce tělo dokumentu tělo dokumentu odstavce nadpisy nadpisy nadpisy nadpisy nadpisy nadpisy seznamy seznamy seznamy seznamy seznamy seznamy seznamy seznamy adresy vodorovný oddělovač předformátované texty bloky citace zarovnání textu vložené/smazané texty vložené/smazané texty kotvy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy<br />
<br />
DTD stf stf stf stf stf stf stf stf stf f f tf tf stf stf stf stf stf stf stf stf stf stf stf tf tf stf stf stf stf stf stf stf stf tf stf stf stf stf stf stf stf stf stf stf stf stf stf stf stf stf stf stf stf<br />
<br />
3<br />
<br />
Počítačové sítě - Internet Značka <tt> <i> <b> <big> <small> <u> <s> <strike> <basefont /> <font> <object> <param /> <applet rel="nofollow"> <img /> <map> <area /> <form> <label> <input /> <select> <optgroup> <option> <textarea> <fieldset> <legend> <button> <isindex /> <table> <caption> <thead> <tfoot> <tbody> <colgroup> <col /> <tr> <th> <td><br />
<br />
Funkce<br />
<br />
Kategorie<br />
<br />
zobrazí text neproporcionálním písmem text uvnitř značky zobrazí kurzívou zobrazí text uvnitř značky tučně zvětší velikost písma o jednu úroveň zmenší velikost písma o jednu úroveň zobrazí text uvnitř značky podtržený vypíše text uvnitř přeškrtnutý čárou vypíše text uvnitř přeškrtnutý čárou určuje základní font dokumentu nastaví vzhled písma vloží do dokumentu objekt definuje parametr značky slouží ke stažení a spuštění appletu vloží do dokumentu obrázek definuje obrázkovou mapu definuje oblast v obrázkové mapě vymezuje v dokumentu formulář definuje popisek ovládacího prvku formuláře vytvoří prvek formuláře vytvoří ve formuláři nabídku vymezuje skupinu voleb nabídky definuje položku nabídky vytvoří textové pole ve formuláři vytvoří skupinu prvků ve formuláři definuje legendu ovládacích prvků formuláře zobrazí tlačítko formuláře zobrazí pole pro vyhledávání vymezuje v dokumentu tabulku definuje titulek tabulky vymezuje záhlaví tabulky vymezuje zápatí tabulky definuje skupiny řádků tabulky definuje skupinu sloupců definuje sloupec ve skupině sloupců definuje řádek buněk v tabulce vytváří buňku v záhlaví tabulky vytváří buňku tabulky<br />
<br />
přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy přímo vložené elementy objekty objekty java applet obrázky obrázkové mapy obrázkové mapy formuláře formuláře formuláře formuláře formuláře formuláře formuláře formuláře formuláře formuláře formuláře tabulky tabulky tabulky tabulky tabulky tabulky tabulky tabulky tabulky tabulky<br />
<br />
DTD stf stf stf stf stf tf tf tf tf tf stf stf tf stf stf stf stf stf stf stf stf stf stf stf stf stf tf stf stf stf stf stf stf stf stf stf stf<br />
<br />
Vybrané atributy značek Atribut style="" class=""<br />
<br />
id="" lang="" dir="" title=""<br />
<br />
4<br />
<br />
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<br />
<br />
Počítačové sítě - Internet<br />
<br />
1.1.2 Základní struktura XHTML dokumentu Základní strukturu XHTML dokumentu můžeme rozdělit na hlavičku, kde najdete údaje o pozadí stránky, autorovi, obsažených slovech, použitých barvách a jiné. Druhou částí je tělo dokumentu – to obsahuje texty, obrázky, odkazy, tabulky a další zobrazované části dokumentu. Pro oživení se ještě používají například skripty – jakési jednoduché programy. Při zápisu tagů musíte používat malá písmena. Aby vytvořená stránka byla přístupná na internetu, musíte hotovou stránku nahrát na internetový server. Pokud nemáte vlastní internetový server, můžete využít nabízené servery, které dávají prostor pro placené i neplacené služby, včetně domény, pod kterou bude vaše stránka přístupná. Placené služby většinou nabízí vyšší spolehlivost funkčnosti serveru, větší diskový prostor pro uložení vašich internetových stránek, dokumentů a fotografií, pokročilé techniky – PHP, MySQL, ASP a další. Ve freewarové verzi většinou máte k dispozici 10 MB diskového prostoru, omezenou správu a bez možnosti používat databáze nebo skriptovací jazyky. Pro tvorbu internetových stránek je ideální používat například program PSPad. Drobnou nevýhodou pro méně zkušené uživatele je, že se musíte umět orientovat v kódu XHTML. Velkou výhodou je, že programový kód máte pod svou kontrolou. Další možností je použít program typu Wysiwyg – například Microsoft Front Page (placený program), Microsoft Expression Web (placený program), KompoZer (neplacený program). S těmito porgramy se pracuje podobně jako textovém editoru. Programový kód vygenerují za vás. Bohužel ne vždy je programový kód bezchybný (validní) a optimalizovaný. Optimální zápis základní struktury XHTML dokumentu<br />
<br />
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="... obsah dokumentu.." /> <meta name="Author" content="vaše jméno" /> <title>Základní struktura
Popis (verze XHTML) ( DTD) 5
Počítačové sítě - Internet (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) Základní struktura (titulek v prohlížeči) (odkaz na externí stylopis) (konec záhlaví) (začátek těla schránky)
(konec těla schránky) (konec HTML dokumentu)
Vytvořená www stránka by měla být bez chyb tzn. validní a dle příslušných norem. Dále musíte každou stránku optimalizovat pro nejpoužívanější internetové prohlížeče. Bohužel ne vždy se bezchybně napsaná stránka zobrazí korektně v různých prohlížečích. Důvodem je nedodržování standardů výrobci internetový prohlížečů. Validaci (bezchybnost) svých stránek si nejlépe ověříte pomocí validátoru, např. na stránkách http://validator.w3.org/. Na těchto stránkách zadáte adresu vaší www stránky nebo na druhé záložce cestu k vašemu www souboru. Po stisknutí tlačítka Check dojde ke kontrole souboru. Pokud nejsou v souboru nalezeny žádné chyby, zobrazí se hlášení o bezchybnosti. V tomto případě máte právo na svých stránkách použít ikony validátoru, které značí, že stránky neobsahují chyby.
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.
6
Počítačové sítě - Internet
1.1.3 Metainformace XHTML dokumentu Metainformace podávají dplňující informace o dokumentu. Je to velmi významný element, který by v žádném dokumentu neměl chybět. Základní meta informace Informace o typu dokumentu a použité znakové sadě <meta http-equiv=“content-type“ content=“text/html; charset=“windows-1250“ /> (Pro správné zobrazení českých znaků se doporučuje používat znakovou sadu utf-8 nebo windows-1250) Anotace dokumentu <meta name=“description“ content=“... obsah dokumentu..“ /> 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=http://www.sosvaz.cz“ /> Zaindexování dokumentu vyhledávacím robotem <meta name=“robots“ content=“index“ />
1.1.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í. Značka DIV 7
Počítačové sítě - Internet
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
Vlastní www stránka <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" /> Layout stránky
Počítačové sítě - Internet 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 { 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. Příklad:
13
Počítačové sítě - Internet Normální text a najednou <span title="text bubliny">text, který má bublinu.
Kaskádové styly - CSS
1.2
Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují prohlížeče od verze IE 4.0. CSS vzniklo někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek. Výhodou je, že lze oddělit formátování stránky do samostatného souboru. Nástin možností CSS
Nastavení libovolné a přesné velikost písma, prokládání, kapitálek; Odsazení prvního řádku odstavce, zvětšení řádkování; Zrušení nebo zvětšení prázdného prostoru po odstavci; Automatické formátování nadpisů; Zvýrazňování odkazů po přejetí myší; Automaticky grafické odrážky; Zneviditelnění, zprůhlednění nebo nezobrazení určité části textu; Předefinování grafického významu běžných tagů; Nastavení pozadí čehokoliv; Umístění libovolného objektu kamkoliv do stránky; Přidání rolovacích lišt; Orámování a nastavení okrajů; Dynamické prvky na stránce.
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í.
Tento odstavec bude červený.
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; } 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. 14
Počítačové sítě - Internet
Soubor styl.css p { color: red; } h1 { font-size: 20pt; color: blue; } WWW stránka musí obsahovat link na jméno souboru stylopisu: Pro větší přehlednost stylopisu je vhodné používat komentáře. Tyto komentáře jsou zapsány mezi oddělovače /* komentář */. Parametry a hodnoty jsou psány písmeny malými. Pokud potřebujeme nastavit společnou vlastnost pro více značek (selektrorů) najednou, musí se značky od sebe oddělovat čárkou. h1, h2, h3, h4 { color: red; } Je nutné všimnout si, kde se používají uvozovky, dvojtečky, složené závorky, středníky a čárky. Pokud si některé znaménko popleteme, nebude to pravděpodobně fungovat. Příklad správného zápisu: h2 {color: green; font-style: italic; }
h2 je selektor = jméno tagu, jehož formátování se mění {} složené závorky vymezují deklaraci formátu onoho selektoru 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.
1.2.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.
Kromě regulárních tříd lze také definovat třídy generické, které lze použít u libovolné značky. .cervena { color: red; } 15
Počítačové sítě - Internet Tuto generickou třídu používáme stejným způsobem jako třídu regulární.
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 p:first-letter
- 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 - pro zvýraznění prvního znaku odstavce
Příklad externího stylopisu: 1. soubor styl.css body { background-color: yellow; }
/*stylopis, barva textu červená, zarovnávání na střed*/ /*velikost písma*/ /*kurzíva*/
2. soubor – vlastní WWW stránka <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" /> Layout stránky
Obor: Mechanizace a služby
Zaměření: Zemědělská mechanizace a služby
Obor: Veterinářství
Obor: Zahradnictví
16
Počítačové sítě - Internet
Délkové jednotky používané v CSS stylech: Absolutní jednotky px in pt pc cm mm
Popis 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 šířka velkého písmene M výška malého písmene x
em ex
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 ( a pod.) a také volbou uživatele. 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íme před číslo vložit znak #. Zápis #rrggbb #rgb rgb(r, g, b) rgb(r%, g%, b%)
Popis pro každou barvu číslo 1-16 hexadecimálně pro každou barvu číslo 1-16 hexadecimálně r, g, b jsou od 0 do 255 r, g, b jsou od 0 do 100 17
Počítačové sítě - Internet
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é. Příklady barev základních 16 odstínů (VGA): jasná bílá jasná žlutá jasná fialová jasná červená jasná tyrkysová jasná zelená jasná modrá šedá stříbrná olivová purpurová základní červená základní tyrkysová základní zelená námořnická modř černá
white yellow fuschia red aqua lime blue gray silver olive purple maroon teal green navy black
1.2.2 Nejpoužívanější atributy CSS stylů Vlastnosti písma Popis Rodina písma Styl písma
Atribut font-family: font-style:
Varianta písma
font-variant:
Tučnost písma
font-weight:
Velikost písma
font-size:
18
Možné hodnoty seznam dostupných písem normal italic oblique normal small-caps normal bold bolder lighter xx-small x-small small medium large x-large xx-large
Počítačové sítě - Internet larger smaller „délka“ „%“ Vlastnosti pro nastavení barev Popis Barva popředí Barva pozadí
Atribut color: background-color:
Obrázek na pozadí
background-image:
Směr opakování obrázku na pozadí
background-repeat:
Pohyb obrázku (se stránkou, nebo fixovaný) Poloha obrázku na pozadí
background-attachment: background-position:
Možné hodnoty „barva“ „barva“ transparent „URL“ none repeat repeat-x repeat-y no-repeat scroll fixed „%“ „délka“ top center bottom left right
Vlastnosti textu Popis Velikost mezer mezi slovy
Atribut word-spacing:
Velikost mezer mezi písmeny
letter-spacing:
Čáry a blikání
text-decoration:
Vertikální zarovnávání
vertical-align:
Kapitálky, malá a velká
text-transform:
Možné hodnoty normal „délka“ normal „délka“ none underline overline line-trough blink baseline sub super top text-top middle bottom text-bottom „%“ capitalize 19
Počítačové sítě - Internet písmena Zarovnání textu
text-align:
Odsazení první řádky odstavce
text-indent:
Výška řádky
line-height:
uppercase lowercase none left right center justify „délka“ „%“ normal „délka“ „%“
Vlastnosti boxů Popis Velikost horního okraje
Atribut margin-top:
Velikost pravého okraje
margin-right:
Velikost spodního okraje
margin-bottom:
Velikost levého okraje
margin-left:
Velikost vnitřního horního okraje Velikost vnitřního pravého okraje Velikost vnitřního spodního okraje Velikost vnitřního levého okraje Šířka horní části rámečku
Možné hodnoty „délka“ „%“ auto „délka“ „%“ auto „délka“ „%“ auto „délka“ „%“ auto „délka“ „%“ „délka“ „%“ „délka“ „%“ „délka“ „%“ thin medium thick „délka“ thin medium thick „délka“ thin medium thick „délka“ thin medium
Počítačové sítě - Internet
Barva rámečku Nastavení tvaru rámečku
border-color: border-style:
Nastavenívlastností horní části rámečku
border-top:
Nastavenívlastností pravé části rámečku
border-right:
Nastavenívlastností spodní části rámečku
border-bottom:
Nastavenívlastností levé části rámečku
border-left:
Šířka
width:
Výška
height:
Plovoucí objekt
float:
Skončení plovoucího objektu
clear:
thick „délka“ „barva“ none dotted dashed solid double groove ridge inset, outset border-top-width border-style „barva“ border-top-width border-style „barva“ border-top-width border-style „barva“ border-top-width border-style „barva“ „délka“ „%“ auto „délka“ auto left right none none left right both
Blokový model v CSS:
Klasifikační
vlastnosti
Popis Druh elementu
odrážky
Atribut display:
Možné hodnoty block inline list-item none 21
Počítačové sítě - Internet Práce s mezerami
white-space:
Druh odrážek v seznamech
list-style-type:
Obrázek jako odrážka v seznamu umístění odrážky
list-style-image: list-style-position:
normal pre nowrap disc circle square decimal lower-roman upper-roman lower-alpha; upper-alpha; none „URL“ none inside outside
Řízení pozice Popis Způsob pozicování elementu
position:
Posunutí elementu vpravo
left:
Posunutí elementu dolů
top:
Šířka elementu
width:
Výška elementu
height:
Definice obdelníkové části, která bude viditelná Způsob zobrazení elementu
clip:
Pozice elementu na pseudoose Z Viditelnost elementu
z-index:
22
Atribut
overflow:
visibility:
Možné hodnoty absolute relative static „délka“ „%“ auto „délka“ „%“ auto „délka“ „%“ auto „délka“ „%“ auto auto rect none clip scroll auto „číslo“ inherit visible hidden
Počítačové sítě - Internet
1.2.3 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).
- 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 - hlavička – nadpis (číslo může být od 1 do 6 – např.
Nadpis
) - 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 - velikost písma (číslo může být od 1 do 7) - 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 - 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
Ahoj
Ahoj
Doporučovaný zápis pomocí stylopisu (ještě lepší možnost je pomocí externího stylopisu)
Ahoj
23
Počítačové sítě - Internet
1.2.4 Seznamy
položky seznamu
položky seznamu <menu>
- neuspořádaný seznam - položka seznamu - záhlaví seznamu - uspořádaný seznam - definuje seznam nabídek
Seznam definic
položky seznamu
- 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 <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" /> Seznamy
Počítačové sítě - Internet 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.
<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" /> Menu
Externí stylopis menu.css li { float: left; display: inline; } a { display: block; padding: 0 0 0 15px; background: #dcdcdc; } a:hover { background: #bcbcbc; }
26
Počítačové sítě - Internet 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.
<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" /> Menu
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; }
27
Počítačové sítě - Internet
1.2.5 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)
- odkaz na url - odkaz na url, který je tvořen obrázkem - odkaz do nového okna - odkaz do toho samého okna - odkaz do nejbližšího rámu - odkaz do celého okna – zruší rámy
Odkaz na část dokumentu
- označí část dokumentu - odkaz v tomtéž dokumentu - odkaz z jiného dokumentu - odkaz do nového okna - odkaz do toho samého okna - odkaz do nejbližšího rámu - odkaz do celého okna – zruší rámy
Odkaz na e-mail - odkaz na e-mail [email protected] - odkaz na e-mail s vyplněným subjektem (předmětem) - odkaz na e-mail s vyplněným tělem e-mailu - odkaz na e-mail s vyplněným subjektem (předmětem) a tělem dopisu Příklad:
28
Počítačové sítě - Internet <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" /> Odkazy
1.2.6 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)
- 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
29
Počítačové sítě - Internet <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" /> Obrázky
Externí stylopis table {border-style: double; background-color: yellow} th {border-style: solid} .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.
1.2.9 Zvuk a video Pro validní stránky v XHTML formátu se doporučuje používat formát Flash.
- odkaz na zvukový soubor
- odkaz na videosoubor
1.2.10 Rámy Pro rozdělení stránky na více částí se již nepoužívají. Je lépe se použití rámů vyhnout. U DTD-s a DTD-t nebudou stránky validní. S výhodou se v dnešní době používá pouze tzv. vnořený rám – iframe. Pomocí něho lze vytvořit například statické menu a dynamickou změnu stránky v oblasti iframu. <iframe>
- 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ý).
32
Počítačové sítě - Internet 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. <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" /> Iframe
- formulář - definice e-mailové adresy - způsob zakódování dat
Formuláře uzavíráme do elemntů . Element form má několik atributů, z nichž nejdůležitější jsou dva: - action - method 33
Počítačové sítě - Internet 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 - input type="" name="" value="" size="" maxlength="" (aktivní prvek) - type="text" - textové pole - type="password" - heslo - type="checkbox" - zaškrtávací políčko - type="radio" - přepínač - type="hidden" - skryté pole - type="submit" - odesílání - type="reset" - výmaz zadaných hodnot - type="image" - obrázek jako tlačítko - type="file" - přenos souborů - u form je třeba zadat enctype="multipart/form-data" - type="button" - obecné tlačítko - select name="" size="" multiple(vícenásobný výběr) (výběr) - option value="" - option value="" - textarea cols="" rows="" name="" (textové pole) Příklad: Vytvořte formulář podle předlohy.
