HTML. Verze Obsah:

Transkript

1 HTML Verze 2009 Obsah: 1) Popis HTML...1 2) Základní popis jazyka ) Struktura.html souboru...1 3) Hlavička dokumentu - Head...2 4) Tělo dokumentu - Body...3 5) Text a jeho formátování ) Další tágy DIV a SPAN ) Formátování textu ) Zobrazování speciálních znaků ) Poznámka ) Seznamy a výčty ) Vodorovné linky, sloupce a mezery ) Hypertextové odkazy ) Obrázky ) Tabulky ) Kaskádové styly ) Formátování HTML ) Možnosti definice stylů: ) Hromadná deklarace ) Možnosti stylů ) Přehled vlastností CSS...A 12.1) Příklady zápisu (selektory)...a 12.2) Font (písmo)...b 12.3) Text / odstavec...c 12.4) Barvy a pozadí... E 12.5) Velikost a obtékání... F 12.6) Okraje...G 12.7) Rámečky...H 12.8) Pozicování... I

2 1) Popis HTML HTML (HyperText Markup Language) je programovací jazyk. Slouží k prezentaci dat nezávisle na platformě a je tedy přenositelný mezi jednotlivými operačními systémy jako Microsoft Windows, Unix, Linux, Apple Mac OS a Mac OS X, BeOS, Solaris... Rozšířil se zejména díky Internetu, kde se stal páteří všech dokumentů. 2) Základní popis jazyka HTML je jazyk značkovací. To znamená, že jeho struktura je dána pevně stanovenými značkami, jež se nemění. Značky, v HTML zvané tagy, mohou být párové či nepárové. Nepárové: například <IMG>. Jde o značku, jež sama vkládá nějaký prvek nebo definuje. Nemá žádné ukončení. Obvykle zastupuje obrázek, vodorovnou čáru, konec řádku... Párové: například <P></P>. Tento typ tagu nic nevkládá, nýbrž definuje vlastnosti objektu, jež sám uzavírá jako text, obrázek, buňka tabulky, celý dokument, ) Struktura.html souboru Struktura stránky je vždy uložena v souboru s příponou.html nebo.htm. Tento soubor obsahuje takzvaný zdrojový kód. Prohlížeč (aplikace zobrazující Internetové stránky) načte takový soubor a podle zdrojového kódu sestaví stránku. V takovém kódu se nenachází pouze texty, ale i adresy vkládaných obrázků, zvuků a další doplňků. Vše dohromady pak tvoří celou WWW stránku Základní syntaxi souboru. <HTML> <HEAD>... hlava dokumentu... </HEAD> <BODY>... tělo dokumentu... </BODY> </HTML> - Údaje v hlavičce (HEAD) stále nejsou na stránce zobrazeny, ale obsahují důležité údaje týkající se obsahu stránky. Jedinou výjimkou je zobrazení jména stránky (tag TITLE, viz dále) v hlavní liště okna prohlížeče. Sekce HEAD může obsahovat jeden až sedm různých tagů; většina z nich se používá jen v hlavičce. - v části BODY je pak vše, co se objeví uvnitř okna prohlížeče; část BODY je tedy podstatná pro stránku, část HEAD je spíše pomocná. Zatímco tag HEAD nemá žádné parametry, má jich tag BODY celou řádku. 1

3 3) Hlavička dokumentu - Head Příkaz: Head Popis: Příkaz HEAD určuje záhlaví dokumentu, kde se uvádí titulek (TITLE) dokumentu a META tagy. Tento příkaz se uvádí před příkazem BODY. Začátek: <HEAD> Konec: </HEAD> Parametry: Bez parametrů. Příkaz: TITLE Popis: Príkazem se definuje titulek dokumentu, umísťuje se do záhlaví dokumentu (BODY) <HEAD> <TITLE>Titulek</TITLE> </HEAD>. Začátek: <TITLE> Konec: </TITLE> (povinný) Příklad: <TITLE>Jak na html - <TITLE> Nyní vidíte na liště prohlížeče text Jak na html - TITLE Příkaz: META Popis: META slouží k definování informací pro prohlížeče, servery a jiné aplikace. Příkaz se umísťuje do záhlaví dokumentu <HEAD></HEAD>. Příklad (nastavení kódování češtiny): <META HTTP-EQUIV="Content-type" CONTENT="text/html; Charset=Windows-1250"> 2

4 Platí obecně, že veškeré hodnoty tagu META a jeho parametrů jsou specifické; to znamená, že jsou vytvořeny pouze pro konkrétní prohlížeč či serverový program - pokud jsou čteny jinými programy, než pro které jsou určeny, jsou tagy META ignorovány. 4) Tělo dokumentu - Body Příkaz: BODY Popis: Tento příkaz slouží k specifikaci těla html dokumentu. Začátek: <BODY [BACKGROUND="URL/soubor"] [BGCOLOR="#RRGGBB"] [TEXT="#RRGGBB"] [LINK="#RRGGBB"] [VLINK="#RRGGBB"] [ALINK="#RRGGBB"]> Konec: </BODY> Parametry: Parametr BACKGROUND="URL/soubor" BGCOLOR="#RRGGBB" TEXT="#RRGGBB" LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB" Význam Obrázek, který bude zobrazen pod dokumentem Barva pozadí Barva textu Barva hypertextového odkazu Barva už navštíveného odkazu Barva právě vybraného odkazu Příklad: <BODY BGCOLOR="#DDCCDD" TEXT="#FFDCDD" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000"> Výsledek: Text, link, už navštívený link, aktivní link Fixování obrázku na pozadí Implicitně se obrázek na pozadí roluje souběžně se stránkou. Je však možné obrázek pevně ukotvit na pozadí, takže se při rolování nehýbe; toho se docílí parametrem BGPROPERTIES="FIXED" uvnitř tagu BODY Barva pozadí a textu V případě, že nepoužijete obrázek na pozadí, můžete jej vybarvit spojitou barvou. Neexistují žádné jiné volby než spojitá výplň jedinou barvou. Dále jsou pak možnosti vybarvit základní druhy textů různými baravami. 3

5 Jak se zadávají barvy? BGCOLOR="White" BGCOLOR="#024AC9" Znamená, že text stránky má hodnotu barvy namíchané z 02 hex. v červené, 4A hex. v zelené a C9 hex. v modré Black Aqua Blue Fuchsia Gray Lime Navy Olive Purple Maroon Red Silver Teal White Yellow černá světle modrá základní modrá purpurová (magenta) šedá spíše tmavší šedá světlá, neónová zelená tmavá, námořnická modř olivová, špinavě zelenožlutá fialová tmavě červená základní červená stříbrná, spíše světle šedá modrozelená bílá základní žlutá Další parametry: LEFTMARGIN - udává, kolik pixelů od levého okraje začíná zobrazení stránky (prázdný prostor je vyplněn barvou pozadí či obrázkem na pozadí) TOPMARGIN - udává, kolik pixelů od horního okraje okna začíná zobrazení stránky (prázdný prostor je vyplněn barvou pozadí či obrázkem na pozadí). Cvičení (1): udělejte následující HTML stránku <HTML> <HEAD> <TITLE> HTML stránka <TITLE> </HEAD> <BODY> Toto je moje první html stránka. </BODY> </HTML> 4

6 5) Text a jeho formátování Příkaz: P Popis: Pomocí P se vytvářejí odstavce. Je to párový tag, který způsobí vytvoření odstavce, tj. provede odskok na nový řádek a navíc mírné vertikální odsazení před i za odstavcem. Začátek: <P [ALIGN="left/center/right/justify"]> Konec: </P> (nepovinný) Parametry: Parametr Význam ALIGN="left/center/right/justify" Zarovnání textu vlevo/na střed/vpravo/do bloku Příklad: <P>Ukázka z knihy Besídka bývalých žáků zvláštní školy: </P> <P ALIGN="RIGHT">Od té doby, co jsem byl přímím svědkem toho, jak řidič elektrické soupravy číslo patnáct při jízdě z kopce zjistil, že brzdy nepracují, ani když jim domlouvá, a odběhl do vlečňáku poradit se s kolegou, co teď, aby nás pak přišel informovat do mezzaninu činžovního domu, kde jsme přistáli, že už dál nejede, abychom si vystoupili a nezdržovali dopravu, neboť obrací, jezdím elektrikou co možná nejméně.</p> <P ALIGN="CENTER">Doufám že se Vám ukázka líbila.</p> Ukázka z knihy Besídka bývalých žáků zvláštní školy: Od té doby, co jsem byl přímím svědkem toho, jak řidič elektrické soupravy číslo patnáct při jízdě z kopce zjistil, že brzdy nepracují, ani když jim domlouvá, a odběhl do vlečňáku poradit se s kolegou, co teď, aby nás pak přišel informovat do mezzaninu činžovního domu, kde jsme přistáli, že už dál nejede, abychom si vystoupili a nezdržovali dopravu, neboť obrací, jezdím elektrikou co možná nejméně. Doufám že se Vám ukázka líbila. Příkaz: BR Popis: BR slouží k zalomení řádku. Začátek: <BR [CLEAR="left/all/right/none"]> 5

7 Parametry: Parametr Význam CLEAR="left/all/right/none" Určuje odkud bude pokračovat text přerušený obrázkem Příklad: První věta, druhá věta,<br> třetí věta a čtvrtá věta. První věta, druhá věta, třetí věta a čtvrtá věta. Cvičení (2): Udělej HTML stránku tak, aby byla následují stránce co nejvíce podobná: První možné řešení <html> <head> <title>cvičení druhé</title> </head> <body> jedna, dvě, tři, <BR> čtyři, pět, šest<br><br> pondělí, úterý, středa...<br> </body> </html> Druhé možné řešení: <html> <head> <title>cvičení druhé</title> </head> <body> <P> jedna, dvě, tři, <BR> čtyři, pět, šest</p> 6

8 <P> pondělí, úterý, středa... </P> </body> </html> 5.1) Další tágy DIV a SPAN Tagy nenesou význam, jsou to neutrální tágy Rozdíl mezi <div> a <span> Div je element blokový Span je element řádkový. Jinak řečeno tag <div> před sebou a za sebou udělá konec řádku. Span se bez problému může vyskytovat v jednom řádku. Příkaz: DIV Popis: DIV slouží k nastavení zarovnávání textu. Začátek: <DIV [ALIGN="left/center/right/justify"]> Konec: </DIV> (povinný) Parametry: Parametr ALIGN="left/center/right/justify" Význam Zarovnání vlevo / na střed / vpravo / do bloku Příklad: <DIV ALIGN="RIGHT">Zaronání do prava.</div> <DIV ALIGN="CENTER">Zaronání na střed.</div> <DIV ALIGN="LEFT">Zaronání do leva.</div> <DIV ALIGN="justify">Zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku.</div> Zaronání do prava. Zaronání na střed. Zaronání do leva. Zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku, zarovnání do bloku. 7

9 Příkaz: SPAN Popis: Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku. Začátek: <SPAN> Konec: </SPAN> Příklad: <SPAN> Toto je text. </SPAN> 5.2) Formátování textu Nejčastějšími atributy písma jsou dva jeho řezy: tučné písmo a písmo šikmé, kurzíva. K formátování se používají dva tagy, které jsou samozřejmě párové: <B> tučný text </B> <I> text kurzívou </I> <U>podtržené písmo</u> <STRIKE>přeškrtnuté</STRIKE> <SMALL>malé písmo</small> <BIG>velké písmo</big> <SUB>dolní index</sub> <SUP>horní index</sup> <CODE>neproporcionální písmo</code> Tyto tagy se mohou vnořovat a překrývat s dalšími, např. odstavcovými tagy. Poznámky: Pokud možno vůbec nepoužívejte podtržené písmo, tedy tag U. Podtržení je vyhrazeno pro odkazy (hyperlinky), a pokud podtrhnete normální text, budou jej jeho čtenáři považovat za odkaz Tag BIG má stejný účinek jako zvětšení písma o jeden bod (FONT SIZE="+1") Tag SMALL má stejný účinek jako zmenšení písma o jeden bod (FONT SIZE="-1") Příkaz: H1 až H6 Popis: HTML definuje šest úrovní předdefinovaných nadpisů, označených jako H1 až H6. Základní syntaxe všech tagů pro nadpisy je stejná, na příkladu H1 si ji ukážeme: 8

10 Příklad: <H1>Zde je znění nadpisu</h1> Parametry Zarovnání: ALIGN=LEFT, RIGHT, CENTER, JUSTIFY <H1 ALIGN=CENTER>Hlavní nadpis je vystředěn</h1> Tag Stupeň písma Výchozí formátování nadpisů Výchozí velikost Využití h1 6 24px Hlavní nadpis stránky h px Podnadpisy, názvy kapitol h3 4 16px Mezinadpisy h4 3 13px Důležitější odstavce h5 2 10px Žádné rozumné použití h6 1 9px Nejde ani pořádně přečíst Příkaz: FONT Popis: Tento příkaz změní velikost, barvu a vzhled fontu. Začátek: <FONT [SIZE="x"] [COLOR="#RRGGBB"] [FACE="font"]> Konec: </FONT> (povinný) Syntaxe je následující: <FONT SIZE="velikost" FACE="druh písma" COLOR="barva">Zpracovaný text</font> Parametry: Parametr SIZE="0..7 / " COLOR="#RRGGBB" FACE="název fontu" Význam Velikost fontu absolutně / relativně Barva fontu hexadecimálně (RR=červená, GG=zelená, BB=modrá) Jméno fontu (např. Arial) 9

11 Příklad: Text bude <FONT SIZE="5">větší</FONT> než normální Text bude <FONT COLOR="#FF0000">červený</FONT> <FONT COLOR="red">červené písmo</font> Text bude <FONT FACE="Courier">fontem Courier</FONT> Text bude větší než normální Text bude červený červené písmo Text bude fontem Courier Příklady na použití SIZE: Parametr SIZE určuje velikost písma. Protože však nelze zadat skoro nikdy přesně velikost v jakýchkoli absolutních délkových jednotkách (palce, body, milimetry - každý si může zapnout jiné relativní zobrazení velikosti), umožňuje parametr SIZE relativní zmenšení či zvětšení písma oproti základní velikosti (BASEFONT). Příklad použití: <FONT SIZE=+1>písmo zvětšené o jednu úroveň</font> <FONT SIZE=-2>písmo zmenšené o dvě úrovně</font> Možné je ovšem i zadávání v absolutních číslech, jeho vykreslení také závisí na nastavení prohlížeče. <FONT SIZE=2> písmo velikosti č. 2 </FONT> Jak zvětšení, tak zmenšení je možné v sedmibodové stupnici, tj. od mínus sedmi do plus sedmi. Parametr FACE uvádí písmo, kterým bude text znázorněn. Používá se standardní název písma bez řezu, ovšem s variantou (např. "Arial CE"); musí se uvést naprosto stejně a přesně, jak jej používá systém. Problém: pokud čtenář "na druhém konci světa" nemá nainstalované písmo, jehož název zadáte, zobrazí se mu místo toho v písmu základním Možné řešení je uvést více druhu písem <FONT FACE="Verdana, Bodoni, Helvetica"> znamená, že prohlížeč nejdříve hledá písmo Verdana, pokud je nenalezne, hledá Bodoni, pak Helvetica a pokud nenalezne ani toto písmo, použije standardní písmo. Příkaz BASEFONT Výše popsaný tag FONT umí zadávat velikosti relativně, tj. jako "+1" či "-5". Co je však velikost "nula"? Může být v každém prohlížeči nastavena jinak, takže se relativní nastavení mohou míjet účinkem. Tag BASEFONT definuje velikost základního písma na stránce, tj. toho písma, které není formátováno jinak. Příklad: <BASEFONT SIZE=a> kde a je velikost písma v sedmi úrovních, od 1 do 7. 10

12 5.3) Zobrazování speciálních znaků Znaková sada obsahuje kromě standardních znaků ASCII také mnoho znaků, které označujeme jako speciální. Ty se zadávají v HTML pomocí zvláštních kódů, opisů složených z několika znaků. Stejně tak se zadávají i znaky, které sice patří do standardní sady ASCII, ale které už má formát HTML vyhrazeny. - příkladem jsou špičaté závorky <>, do kterých se uzavírají tagy. Vybrané tágy: & Copyright Nedělitelná mezera & &copy &nbsp 5.4) Poznámka Příkaz  Všechno, co je v HTML souboru obaleno značkami , je považováno za poznámku a v těle. (tj. v BODY) Nezobrazuje se!!! Začátek:  Cvičení (3): Udělej HTML stránku tak, aby byla následují stránce co nejvíce podobná: 11

13 Řešení: <html> <head> <title>cvičení třetí</title> </head> <body> <div align="center"><h1>nadpis první úrovně</h1></div> <b>tlustý</b> <br> <i>kursiva</i> <br> <b><i>tlustá kursiva</i></b> <br> <font face="arial Black" size="5" color="green">styl Arial Black, velikost 5, barva zelená</font> <br> <div align="right">zarovnané doprava</div> </body> </html> 6) Seznamy a výčty Příkaz: UL Popis: Pomocí příkazu UL se vytvářejí odrážkovaný nečíslované seznamy. Seznam může být i číslovaný (OL). Položky se přidávají příkazem <li></li> Pozor : Druhá část tágu tj. </li> není povinná Začátek: <UL [TYPE="circle/disc/square"] [COMPACT]> Konec: </UL> (povinný) Parametry: Parametr Význam TYPE="circle/disc/square" Tvar odrážky (standardně disc) 12

14 Příklady: <UL> <LI>První položka výčtu </LI> <LI>Druhá položka výčtu </LI> <LI>Třetí položka výčtu </LI> </UL> První položka výčtu Druhá položka výčtu Třetí položka výčtu <UL TYPE="circle"> <LI>Jedna </LI> <LI>Dvě </LI> <LI>Tři </LI> </UL> <UL TYPE="square"> <LI> První </LI> <LI> Druhá </LI> <LI type="circle">třetí</li> </UL> o o o o Jedna Dvě Tři První Druhá Třetí Příklad na vnořený seznam: <UL> <LI>jedna </LI> <UL> <LI>pondělí </LI> <LI>úterý </LI> <UL> <LI>Leden </LI> <LI>Únor </LI> </UL> <LI>středa </LI> </UL> <LI>dvě </LI> </UL> Příkaz: OL Popis: jedna dvě o o o pondělí úterý Leden Únor středa OL slouží k vytváření číslovaných seznamů (nečíslované UL). Položky do seznamu se přidávají pomocí <li></li> Začátek: <OL [TYPE="I/i/A/a/1"] [START="Celé číslo"] [COMPACT]> Konec: </OL> (povinný) 13

15 Parametry: TYPE=A bude číslovat výčet pomocí velkých písmen, tj. A., B., C. atd. TYPE=a bude číslovat výčet pomocí malých písmen, tj. a., b., c. atd TYPE=I bude číslovat výčet pomocí velkých řeckých číslic, tj. I., II., III. atd TYPE=i bude číslovat výčet pomocí malých řeckých číslic, tj. i., ii., iii. atd. TYPE=1 bude číslovat výčet pomocí latinských cifer, tj. 1., 2., 3. atd. START = hodnota: počáteční hodnota, od které se bude číslování provádět Příklad: <OL> <LI>pvní</LI> <LI>druhá</LI> <LI>třetí</LI> </OL> <OL type=a> <LI>pvní</LI> <LI>druhá</LI> <LI>třetí</LI> </OL> <OL type=i start=3> <LI>pvní</LI> <LI>druhá</LI> <LI>třetí</LI> </OL> 1. pvní 2. druhá 3. třetí A. pvní B. druhá C. třetí III. pvní IV. druhá V. třetí Příklad na vnořený seznam: <OL> <LI>jedna</LI> <OL type=a> <LI>pondělí</LI> <LI>úterý</LI> </OL> <LI>dvě</LI> </OL> <OL type=i START=3> <LI>Leden</LI> <LI>Únor</LI> </OL> <LI>středa</LI> 1. jedna a. pondělí b. úterý III. Leden IV. Únor c. středa 2. dvě 14

16 Cvičení (4): Udělej HTML stránku tak, aby byla následují stránce co nejvíce podobná: Řešení: <html> <head> <title>cvičení čtvrté</title> </head> <body> <ol type="a"> <li>pondělí</li> <ul type="square"> <li>matika</li> <li>čestina</li> </ul> <li>úterý</li> <ul type="circle"> <li>němčina</li> <li>angličtina</li> </ul> <li>středa</li> <ul type="disc"> <li>tělocvik</li> </ul> </ol> </body> </html> 15

17 7) Vodorovné linky, sloupce a mezery Příkaz: <HR> Popis: HR slouží k zobrazení horizontálního (vodorovného) pruhu. Začátek: <HR [SIZE="celé kladné číslo"] [WIDTH="celé kladné číslo/proceta"] [ALIGN="left/center/right"] [NOSHADE] [color= ]> Konec: </HR> (nepovinný) Parametry: Parametr SIZE="celé kladné číslo" WIDTH="celé kladné číslo/proceta" ALIGN="left/center/right" NOSHADE COLOR=jméno či hex. číslo Význam Výška v pixelech. Šířka v pixelech nebo v procentech šířky plochy prohlížeče Zarovnání vlevo/ na střed/vpravo Nestínovaná Barva (pozor, funguje pouze v Internet Exploreru) Příklad: <HR> <HR ALIGN="CENTER" SIZE="3" WIDTH="150"> <HR ALIGN="LEFT" SIZE="3" WIDTH="20%"> <HR ALIGN="RIGHT" SIZE="9" WIDTH="150" NOSHADE> 8) Hypertextové odkazy Příkaz: A Popis: A je příkaz pro vytváření hypertextových odkazů. Je to jeden z nejpoužívanějších příkazů. Slouží k odkazům na jiný dokument, obrázek, na jiné místo v témž nebo jiném dokumentu a také k odkazu na E- mail. 16

18 Začátek: <A HREF="URL/adresář/soubor" / NAME="text" [NAME="název"] [TERGET="jméno okna"]> Konec: </A> (povinný) Parametry: Parametr name="#jméno" href="url/adresář/soubor" title="text" name="jméno" Target= Význam Místo doskoku odkazu href="#..." Odkaz na jinou URL Neodkazuje se, má jen informační charakter. Přiřadí linku název (například pro java script) Cílový rám Příklad: <A HREF=" <A HREF="dokument.html">odkaz</A> odkaz na dokument <A HREF="#Nahoru">Skok nahoru</a> Centrum - tento link se odkazuje na stránku Skočí na místo, kde bude umístěn tág: <A NAME="Nahoru"> <A NAME="Nahoru"> Umístit na místo doskoku <A HREF="mailto:nejaky@ .cz">Nejaka Osoba</A> Nejaka Osoba - tento link otevře klienta a zadá do adresy nejaky@ .cz Parametry (bližší vysvětlení): Atribut TITLE uvádí alternativní název odkazu. Příklad: Navštivte také náš web <A HREF= " TITLE="Denní zpravodajství z výpočetní techniky!">živě</a> 17

19 Atribut TARGET Cílový rám, ve kterém se obsah zobrazí. Pokud se ve stránkách používají rámy, má každý z nich jméno. Jméno rámu je obsaženo v atributu name v tagu <frame>. Kromě jmen existujících rámů se jako hodnota atributu target mohou použít speciální jména virtuálních rámů. Jména virtuálních rámů target= _blank _top nové okno Kde se to otevře nejvyšší okno hierarchie rámů _parent nadřazený rám _self tentýž rám Atribut NAME Jméno záložky. Tag <a> může sloužit kromě odkazu i jako záložka. Záložka je dobrá k tomu, že definuje místo v dokumentu, na které může mířit odkaz (jiný tag a s href="#jmenozalozky"). Po kliknutí na takový odkaz se stránka odroluje na pozici záložky. Tag <a> definující záložku neobsahuje atribut href, ale name. Obsah tagu <a name=něco> může být prázdný. Příklad: <a href="#priklad">po kliknutí na tento odkaz odroluje stránka na záložku příkladu.</a>... <a name=priklad> Text příkladu Odkaz na jinou stránku a místo v ní Podrobnější informace jsou v <A HREF=" index.html#english">anglické sekci</a> centrálního indexu. Soubor index.html má pak někde ve svém těle definováno jméno: <A NAME="english"></A> 18

20 9) Obrázky Příkaz: IMG Popis: Tento příkaz slouží k vkládání obrázků do html dokumentu. Přípustné formáty obrázků jsou Compuserve GIF (.GIF) nebo JPEG (.JPG). Doporučuji používat parametr ALT="", který zobrazí text ještě před tím, než je obrázek natažen. Začátek: <IMG SRC="URL/soubor" [ALT="text"] [ALIGN="top/bottom/left/center/right"] [HEIGHT="celé kladné číslo"] [WIDTH="celé kladné číslo"] [BORDER="celé kladné číslo"] [HSPACE="celé kladné číslo"] [VSPACE="celé kladné číslo"] [USEMAP="#jméno mapy"] [ISMAP]"> Základní syntaxe tagu: <IMG SRC="jméno souboru"> Příklady: <IMG SRC="obr1.gif"> <IMG SRC="../gifs/obr2.gif"> <IMG SRC= obr3.gif"> obrázek umístěný přímo v adresáři, ve kterém je i aktuální dokument obrázek umístěný v adresáři gifs včetně celé adresářové cesty obrázek je zadán s celou URL i adresářovou adresou Parametry: Parametr SRC="URL/soubor" ALT="text" ALIGN="top/middle/bottom/left/right" HEIGHT="celé kladné číslo" WIDTH="celé kladné číslo" BORDER="celé kladné číslo" HSPACE="celé kladné číslo" VSPACE="celé kladné číslo" USEMAP="#jméno mapy" ISMAP Význam Soubor s obrázkem (.GIF/.JPG) Text, který bude zobrazen před natažením obrázku Zarovnání obrázku nahoru/na střed/dolu/vleva/vpravo Výška obrázku v pixelech Šířka obrázku v pixelech Šířka rámečku kolem obrázku v pixelech (0=bez rámečku) Odsazení od levého okraje v pixelech Odsazení od horního okraje v pixelech Jméno klikací mapy obrázku viz. MAP Určuje že jde o mapu umístěnou na serveru 19

21 Atribut Align: ALIGN="left" ALIGN="right" ALIGN="top" ALIGN="texttop" ALIGN="middle" Obrázek je umístěn na levý okraj okna či rámce a text jej obtéká bezprostředně zprava Obrázek je umístěn na pravý okraj okna či rámce a text jej obtéká bezprostředně zleva Zarovná horní okraj obrázku s nejvyšším elementem v daném řádku Zarovná horní okraj obrázku s nejvyšším písmenem v daném řádku (obvykle se rovná parametru "top") Zarovná základnu daného řádku textu s prostředkem obrázku ALIGN="absmiddle" Zarovná prostředek daného řádku textu s prostředkem obrázku ALIGN="baseline" Zarovná spodní okraj obrázku se základnou daného textového řádku ALIGN="bottom" Stejné jako "baseline" ALIGN="absbottom" Zarovná spodní okraj obrázku s nejspodnější linkou textu (tj. se spodním okrajem písmen zasahujících pod základnu) Parametry pro zadávání šířky a výšky obrázku u tagu IMG jsou: WIDTH=nnn - Šířka obrázku v pixelech HEIGHT=nnn - Výška obrázku v pixelech Příklad: <IMG SRC="obr1.gif" WIDTH=40 HEIGHT=60> 20

22 Parametr ALT definuje alternativní text Syntaxe: ALT="alternativní text" Příklad: <IMG SRC="kmost.gif" alt="karlův most"> Parametr BORDER pak řídí rámeček okolo obrázku. Syntaxe: BORDER=nnn kde nnn je číslo udávající tloušťku rámečku v pixelech. Příklad: <IMG SRC="obr4.gif" border=6> Parametry HSPACE a VSPACE určují volný prostor okolo obrázků a jsou pro estetickou tvorbu stránky velmi důležité. Nejsou-li totiž uvedeny, je okolní text přilepený těsně k obrázku a to působí velmi nehezky. HSPACE=nnn - Velikost volného prostoru v pixelech po levé a pravé straně obrázku VSPACE=nnn - Velikost volného prostoru v pixelech po horní a dolní straně obrázku 10) Tabulky Příkaz: TABLE Popis: Příkaz slouží k vytváření tabulek. Jde o jeden z nejpoužívanějších příkazů v HTML, ač se může některá stránka jevit jako bez tabulek, je většinou skutečnost že se na stránce nachází hned několik tabulek. Tabulka se skládá v zásadě ze tří částí: <TABLE></TABLE> - tímto se definuje rozsah jedné tabulky TH definuje hlavičku tabulky (není povinná); TR definuje vlastnosti jednoho řádku tabulky; Začátek: <TABLE [BORDER="celé kladné číslo"] [CELLSPACING="celé kladné číslo"] [CELLPADDING="celé kladné číslo"] [WIDTH="celé kladné číslo"] [HEIGHT="celé kladné číslo"] [ALIGN"left/center/right"] [VALIGN="top/middle/bottom"] [BGCOLOR="#RRGGBB"]> 21

23 Konec: </TABLE> (povinný) Parametry: Parametr BORDER="celé kladné číslo" CELLSPACING="celé kladné číslo" CELLPADDING="celé kladné číslo" WIDTH="celé kladné číslo" HEIGHT="celé kladné číslo" ALIGN="left/center/right" VALIGN="top/middle/bottom" BGCOLOR="#RRGGBB" Význam Šířka rámečku tabulky v pixelech Šířka rozteče rámečku v pixelech Šířka okraje buňky v pixelech Šířka tabulky v pixelech Výška tabulky v pixelech Zarovnání tabuky vůči okolí vlevo/na střed/vpravo Zarovnání tabuky vůči okolí nahoru/na střed/dolů Určuje barvu pozadí Příklad 1: <TABLE BORDER=1> <TR> <TD>buňka na řádku 1 a ve slopuci 1</TD> <TD>buňka na řádku 1 a ve slopuci 2</TD> <TD>buňka na řádku 1 a ve slopuci 3</TD> </TR> <TR> <TD>buňka na řádku 2 a ve slopuci 1</TD> <TD>buňka na řádku 2 a ve slopuci 2</TD> <TD>buňka na řádku 2 a ve slopuci 3</TD> </TR> </TABLE> Výsledek: buňka na řádku 1 a ve slopuci 1 buňka na řádku 1 a ve slopuci 2 buňka na řádku 1 a ve slopuci 3 buňka na řádku 2 a ve slopuci 1 buňka na řádku 2 a ve slopuci 2 buňka na řádku 2 a ve slopuci 3 22

24 Příklad 2: Změněná šířky, výšky a barvy tabulky <TABLE BORDER=1 WIDTH=200 HEIGHT=200 bgcolor="aqua"> <TR> <TD>1.1</TD> <TD>1.2</TD> </TR> <TR> <TD>2.1</TD> <TD>2.2</TD> </TR> </TABLE> Příklad 3: Užití parametrů CELLPADDING a CELLSPACING <TABLE CELLPADDING=0 CELLSPACING=10 BORDER=1> <TR> <TD>já</TD> <TD>ty</TD> <TD>on, ona, ono</td> </TR> <TR> <TD>my</TD> <TD>vy</TD> <TD>oni, ony, ona</td> </TR> </TABLE> já ty on, ona, ono my vy oni, ony, ona <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=1> <TR> <TD>já</TD> <TD>ty</TD> <TD>on, ona, ono</td> </TR> <TR> <TD>my</TD> <TD>vy</TD> <TD>oni, ony, ona</td> </TR> </TABLE> já ty on, ona, ono my vy oni, ony, ona Příkaz: TR Popis: TR slouží k definování řádků v tabulce TABLE. Do těchto řádků se vkládají buňky TD. Začátek: <TR [ALIGN"left/center/right"] [VALIGN="top/middle/bottom"] [BGCOLOR="#RRGGBB"]> 23

25 Konec: </TR> (povinný) Parametry: Parametr ALIGN"left/center/right" VALIGN="top/middle/bottom" BGCOLOR="#RRGGBB" Význam Zarovnání hodnot v daném řádku vlevo/na střed/vpravo Zarovnání hodnot v daném řádku nahoru/na střed/dolů Určuje barvu pozadí tohoto řádku. Příkaz: TD Popis: TD definuje buňku v tabulce TABLE. V každém řádku je implicitně stejný počet buňěk, když je potřeba aby byla buňka přes více řádků nebo sloupců, používá se parametr ROWSPAN nebo CELSPAN. Začátek: <TD [ALIGN="left/center/right"] [VALIGN="top/middle/bottom"] [WIDTH="celé kladné číslo"] [HEIGHT="celé kladné číslo"] [COLSPAN="celé kladné číslo"] [ROWSPAN="celé kladné číslo"] [BGCOLOR="#RRGGBB"]> Konec: </TD> (nepovinný) Parametry: Parametr ALIGN="left/center/right" VALIGN="top/middle/bottom" WIDTH="celé kladné číslo" HEIGHT="celé kladné číslo" COLSPAN="celé kladné číslo" ROWSPAN="celé kladné číslo" BGCOLOR="#RRGGBB" Význam Zarovnání textu v buňce vlevo/na střed/vpravo Zarovnání textu v buňce nahoru/na střed/dolů Šířka buňky v pixelech Výška buňky v pixelech Spojí s aktuální buňkou x buněk vlevo Spojí s aktualní buňkou y buňěk dolů Barva pozadí 24

26 Příklad 3: Použití barev (bgcolor) v řádku a v buňce <TABLE BORDER=1> <TR bgcolor="green"> <TD>Leden</TD> <TD bgcolor="aqua">únor</td> <TD>Březen</TD> <TD>Duben</TD> </TR> <TR> <TD>Terénní práce</td> <TD>Hrubá stavba</td> <TD>Vnitřní práce</td> <TD bgcolor="aqua">úklid</td> </TR> </TABLE> Leden Únor Březen Duben Terénní práce Hrubá stavba Vnitřní práce Úklid Příklad 4: Použití parametru COLSPAN pro spojování buněk ležících vedle sebe v jednom řádku <TABLE BORDER=1> <TR> <TD>Leden</TD> <TD>Únor</TD> <TD>Březen</TD> <TD>Duben</TD> <TD>Květen</TD> </TR> <TR> <TD COLSPAN=2>Příprava</TD> <TD COLSPAN=3>Realizace</TD> </TR> </TABLE> Leden Únor Březen Duben Květen Příprava Realizace Příklad 5: Použití parametru ROWSPAN pro spojování buněk ležících nad sebou v jednom sloupci <TABLE BORDER=1> <TR> <TD>Leden</TD> <TD>Únor</TD> </TR> <TR> <TD ROWSPAN=2>Projekce</TD> <TD>Vnější práce</td> </TR> <TR> <TD>Vnitřní práce</td> </TR> </TABLE> Leden Projekce Únor Vnější práce Vnitřní práce Vnořování tabulek Pokud chcete vytvářet složitější stránky, bude se Vám jistě hodit vnořování tabulek do sebe navzájem. Toto je velmi jednoduché. Do buněk prostě vkládáme další tabulky: 25

27 Tabulka se dvěmi vnořenými tabulkami: <TABLE border="1"> <TR> </TR> <TR> </TR> </TABLE> <TD> <TABLE border="1"> <TR> <TD>1. buňka, 1. řádek 1. vnořené tabulky</td> </TR> <TR> <TD>1. buňka, 2. řádek 1. vnořené tabulky</td> </TR> </TABLE> </TD> <TD>1.řádek, 2.buňka</TD> <TD>2.řádek, 1.buňka</TD> <TD> <TABLE border="1"> <TR> <TD>1. buňka, 1. řádek 2. vnořené tabulky</td> </TR> <TR> <TD>1. buňka, 2. řádek 2. vnořené tabulky</td> </TR> </TABLE> </TD> Výsledek zdrojového kódu: 1. buňka, 1. řádek 1. vnořené tabulky 1. buňka, 2. řádek 1. vnořené tabulky 2.řádek, 1.buňka 1.řádek, 2.buňka 1. buňka, 1. řádek 2. vnořené tabulky 1. buňka, 2. řádek 2. vnořené tabulky Cvičení (5): Udělej HTML stránku tak, aby byla následují tabulce co nejvíce podobná: Realizace Celkem Leden Únor

28 Řešení: <html> <head> <title>cvičení 5</title> </head> <body> <TABLE BORDER=1> <TR align="center" bgcolor="aqua"> <TD COLSPAN=3>Realizace</TD> </TR> <TR> <TD ROWSPAN=2>Celkem</TD> <TD>Leden</TD> <TD>Únor</TD> </TR> <TR> <TD>25</TD> <TD>14</TD> </TR> </TABLE> </body> </html> Pomocí tabulek lze udělat rozdělení jednotlivých stránek Následující příklad se skládá ze dvou HTML souborů (celý příklad je v adresáři Tabulky-cviceni 6) První soubor se jmenuje skola1.htm: Výsledek bude vypadat následovně: (Soubor skola1.htm) 27

29 <html> <head> <title>strana 1 (škola 1)</title> </head> <body> <table align="center" cellpadding="20" width="800" border="0"> <tr bgcolor="#cccc00" > </tr> <td COLSPAN=2> <div align="center"><h1><font color="#0000ff">manažerská Akademie</font></h1></div> </td> <tr> <td width="20%" valign="top" bgcolor="#ffffcc" > <a href="skola1.htm">strana 1</a><br> <a href="skola2.htm">strana 2</a> </td> <td bgcolor=#ffff66 >Tady je naše škola <br> <img src="skola-tabulky.jpg" width="600" height="448"> </td> </tr> </table> </body> </html> Druhý soubor se jmenuje skola2.htm: Výsledek bude vypadat následovně: (Soubor skola2.htm) 28

30 <html> <head> <title>strana 2 (škola 2)</title> </head> <body> <table align="center" cellpadding="20" width="800" border="0"> <tr bgcolor="#cccc00" > </tr> <td COLSPAN=2> <div align="center"><h1><font color="#0000ff">manažerská Akademie</font></h1></div> </td> <tr> <td width="20%" valign="top" bgcolor="#ffffcc" > <a href="skola1.htm">strana 1</a><br> <a href="skola2.htm">strana 2</a> </td> </td> </tr> </table> <td bgcolor=#ffff66 >Toto je druhá strana<br> <p>html (HyperText Markup Language) je programovací jazyk. Slouží k prezentaci dat nezávisle na platformě a je tedy přenositelný mezi jednotlivými operačními systémy jako Microsoft Windows, Unix, Linux, Apple Mac OS a Mac OS X, BeOS, Solaris... Rozšířil se zejména díky Internetu, kde se stal páteří všech dokumentů. <br> <b>základní popis jazyka</b> HTML je jazyk značkovací. To znamená, že jeho struktura je dána pevně stanovenými značkami, jež se nemění. Značky, v HTML zvané tagy, mohou být párové či nepárové. Nepárové: například. Jde o značku, jež sama vkládá nějaký prvek nebo definuje. Nemá žádné ukončení. Obvykle zastupuje obrázek, vodorovnou čáru, konec řádku... Párové: například. Tento typ tagu nic nevkládá, nýbrž definuje vlastnosti objektu, jež sám uzavírá jako text, obrázek, buňka tabulky, celý dokument,... </p> </body> </html> Další ukázku použití tabulky pro návrh stránky najdete v adresáři -Tabulky-cviceni 7 Jed důležité, aby úvodní HTML stránka se jmenovala index.html nebo index.htm!!! (jinak se stránky na serveru samy nespustí) 29

31 11) Kaskádové styly Kaskádové styly něco podobného jako styly ve Wordu, ale mnohem mocnější. Je velmi jednoduchý: lze modifikovat výchozí vlastnosti stylů, které v HTML již existují (jako třeba H1, P atd.) a lze vytvářet nové styly a přiřazovat jim vlastnosti. Formátovací možnosti jsou velice široké a svou komplexností mají strukturu programovacího jazyka. Definovat styly se dají nejen pro text, ale i pro tabulky, pozadí atd. atd. 11.1) Formátování HTML Každý text má obsah a formu. Když mluvím o formátu (formě) webových stránek, myslím tím třeba barvu a velikost písma, pozadí, zarovnání atd., prostě všechno, co nepatří do obsahu. To je formátování. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text. 1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů <i> a </i>: <i>kurzíva</i>). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob -- CSS styly -- používá tag <style> a obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné. Dají se s tím dělat různé fígle, které budu popisovat níže. 11.2) Možnosti definice stylů: ) Definice stylu v těle dokumentu HTML (nepoužívat) <SPAN STYLE="font-size: 14pt; font-family: BankGothic Lt BT; font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; color: Orange; background: Black"> Text ovlivněný stylem definovaným přímo v těle dokumentu HTML - pomocí tagu SPAN. </SPAN> Výsledek: Text ovlivněný stylem definovaným přímo v těle dokumentu HTML - pomocí tagu SPAN. Příklad ukazuje, jak mohou být styly definovány přímo v textu, tj. přímo v sekci BODY bez jakékoli definice v sekci HEAD. Je použit tag SPAN (který sám o sobě nic nedělá), ovšem definice je uvedena na místě. Toto použití již nemá mnoho společného s předdefinováním stylu, nicméně je logické - s využitím běžných tagů HTML by se podobného účinku dosahovalo velice pracně a neobratně ) Definice stylu v hlavičce dokumentu HTML 30

32 ) Změna stávajícího stylu <HTML> <HEAD> <TITLE>Dokument se styly</title> <STYLE TYPE="text/css"> H2 { font-family: BankGothic Lt BT; font-weight: bold; color: Green; background: Aqua } </STYLE> </HEAD> <BODY> <H2>Nadpis s redefinovaným stylem</h2> Základní text, který styly není ovlivněn. </BODY> </HTML> V sekci HEAD jsme předefinovali vzhled tagu H2, tedy nadpisu druhé úrovně. Je vidět, že se mění písmo (font), jeho barva (color), a že se zadává barva pozadí. Výsledek: Nadpis s redefinovaným stylem Popis: - definice stylů jsou v hlavičce dokumentu, tj. v sekci HEAD; - jsou zabaleny v párovém tagu STYLE, tj. mezi <STYLE> a </STYLE>; ) Vytvoření nové třídy (stylu) <HTML> <HEAD> <TITLE>Dokument se styly</title> <STYLE TYPE="text/css">.novystyl { font-family: Verdana; font-size: 18pt; } </STYLE> </HEAD> <BODY> <span class=novystyl>text ovlivněný stylem pojmenovaným "novystyl".</span> </BODY> </HTML> Výsledek: Text ovlivněný stylem pojmenovaným "novystyl". Vidíme zde tedy definici nového stylu (takového, který standard HTML nezná - s názvem "novystyl") a jeho aplikování na vybraný text s použitím tagu SPAN, který sám o sobě nic nedělá. Všimněte si, že styl je v definici označen tečkou na začátku (ta odlišuje definice nových stylů od redefinice existujících), a že je pak v textu již odkazován bez tečky. 31

33 Typová syntaxe při definici styl (třídy) je: <STYLE TYPE="text/css">  </STYLE> ) Definice stylu v externím souboru Styly si můžeme nadefinovat v externím souboru, který pojmenujeme XXXX.CSS (např. mujstyl.css) V HTML slouží k připojování jiných dokumentů tág <link>. Tág <link> musí být umístěn v sekci <head> tj. v hlavičce. Příklad: <link rel= stylesheet type= text/css href= mujstyl.css > V externím soboru se definují styly stejně, jako v hlavičce dokumentu. a) Změna stávajícího stylu b) Vytvoření nové třídy (stylu) 11.3) Hromadná deklarace Stylopisy umožňují nadeklarovat vlastnosti pro více elementů najednou. Například deklarace H1, H2, H3 {color: green} obarví všechny nadpisy první, druhé i třetí úrovně na zeleno. Hromadnou deklaraci používám, pokud zadávám mnoho stejných vlastností pro mnoho elementů. Důležitá je čárka mezi selektory. 32

34 11.4) Možnosti stylů ) Příklad s odkazy :pseudotřídy Pomocí stylopisů se dají formátovat libovolné HTML tagy, ne pouze nadpisy. Obzvlášť efektní je to u odkazů. <style type="text/css"> a {text-decoration: none} /* znamená, že odkazy nebudou podtrhávané */ a:link {color: blue;} /* nenavštívený odkaz */ a:visited {color: navy;} /* navštívený odkaz */ a:hover {color: red} /* odkaz, přes který se jede myší*/ a:active {color: black} /* odkaz, na který se zrovna klikne */ </style> ) Absolutní a relativní pozice Existují dva naprosto odlišné druhy pozicování. Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze. Příklad <body> Normální text, <span style="position: relative; top: 20px"> relativně umístěný text</span> a <span style="position: absolute; top: 100px; left: 150px">absolutně umístěný text</span>. </body> Příklad si můžete zobrazit v prohlížeči. (Mělo by to vypadat tak jako na obrázku.) Co znamenají jednotlivé zápisy: <span style="..."> span je značka, která nenese žádný vlastní význam, pouze vymezuje text, který se liší stylem. position: relative relativní poloha je vlastně posunutím objektu. Posouvá se dolů o dvacet pixelů vlastností "top: 20px". position: absolute absolutní poloha umisťuje levý horní roh objektu (span) na souřadnice 150, 100. Vlastnost left: 150px zde v tuto chvíli posouvá po ose x o 150 pixelů. 33

35 Cvičení (9-1): <html> <head> <title>stylování nadpisů</title> <style TYPE="text/css"> h2 {color: blue; font-style: italic} </style> </head> <body> <h1>hlavní nadpis</h1> <h2>nadpis druhé úrovně</h2> <p>odstavec s normálním textem</p> <h2>další nadpis druhé úrovně</h2> <p>odstavec s dalším textem, který by se měl formátovat normálně. </p> </body> </html> 34

36 Cvičení (9-2): Udělej následující HTML stránky: 35

37 Výpis souboru styl.css body{ } background-color: #FFEFD5;.horni{ background-color: Olive; color: White; text-align: center; width: 100%; height: 80px; top: 0px; left: 0px; position: absolute; }.levy{ } background-color: #F4DAA9; width: 10%; height: 200px; top: 80px; left: 0px; position: absolute; padding: 5px;.stred{ } left: 12%; top: 90px; width: 86%; position: absolute; h2{ }.text{ } color: Olive; text-align: center; text-align: justify; text-indent: 30px; a { color: #D07300; text-decoration: none; } a:hover { color: Black; text-decoration: underline; font-weight: bold; } 36

38 Výpis souboru index.htm (neboli strany 1) <html> <head> <title>nová stránka</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" type="text/css" href="styl.css"> </head> <body> <div class=horni> <h1>manažerská akademie</h1> </div> <div class=levy> <a href="index.htm">strana 1</a><br> <a href="str2.htm">strana 2</a> </div> </div> </body> </html> <div class=stred> <h2>toto je pomocný nadpis</h2> <p class=text> Před své volitele jste v pátek předstoupil s poměrně konzervativním projevem. Podpora rodiny, odmítnutí eutanazie. Hodláte v tomto směru podniknout i nějaké konkrétní kroky? Nevím, zda byl přesně konzervativní v tom starobylém slova smyslu. Byl jasným vyslovením názorů, které považuji za jasné a nosné, na kterých stavím celou svou politickou kariéru. Je to jistá kombinace liberálního a konzervativního, která se nedá snadno postihnout jedním slovem. Kdybych ho znal, tak bych ho rád používal. </p> <h2>toto je pomocný nadpis</h2> <p class=text> Před své volitele jste v pátek předstoupil s poměrně konzervativním projevem. Podpora rodiny, odmítnutí eutanazie. Hodláte v tomto směru podniknout i nějaké konkrétní kroky? Nevím, zda byl přesně konzervativní v tom starobylém slova smyslu. Byl jasným vyslovením názorů, které považuji za jasné a nosné, na kterých stavím celou svou politickou kariéru. Je to jistá kombinace liberálního a konzervativního, která se nedá snadno postihnout jedním slovem. Kdybych ho znal, tak bych ho rád používal. </p> <h2>toto je pomocný nadpis</h2> Jed důležité, aby úvodní HTML stránka se jmenovala index.html nebo index.htm!!! (jinak se stránky na serveru samy nespustí) 37

39 Cvičení (9-3): Výpis souboru mujstyl.css body { } color: #585858; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;.obsah { }.menu { } position: absolute; top: 30px; left: 30px; width: 65%; position : absolute; top : 30px; left : 70%; width : 25%; font-size : 80%; border-left : 1px solid #c8d1d9; 38

40 .patka { } p { } h1 { } h2 { } h3 { } b, i { } a { } a:hover { } font-size : 80%; text-align : center; color : #7e7e7e; border-top : 1px dashed #c8d1d9; line-height: 130%; margin-left: 15px; font-size: 150%; font-weight: normal; color: #6f90ba; margin-left: 15px; border-bottom: 1px solid #c8d1d9; padding: 0 0 5px; font-size: 130%; font-weight: normal; color: #6f90ba; margin-left: 15px; border-bottom : 1px solid #c8d1d9; margin : 15px; padding : 0 0 3px 5px; font-size : 130%; font-weight : normal; color : #6f90ba; color : #6f90ba; color : #6f90ba; color : red; Jed důležité, aby úvodní HTML stránka se jmenovala index.html nebo index.htm!!! (jinak se stránky na serveru samy nespustí) 39

41 Výpis souboru index.htm <html> <head> <link rel="stylesheet" type="text/css" href="mujstyl.css"> <title>titulek WWW stránky</title> </head> <body> <div class="obsah"> <h1>nadpis první úrovně</h1> <p><b>chcete mít vlastní web snadno a rychle?</b> Stáhněte si tuto šablonku pozícování v CSS přepište texty a máte vlastní web hotový je to tak snadné stačí jen základy html.</p> <h2>nadpis druhé úrovně</h2> <ul> <li>budu rád když v patičce necháte odkaz na moji stránku není to ale podmínkou.</li> <li>pokud se vám tato šablonky nelíbí nevadí zkuste jinou na výběr jich je tu dost.</li> </ul> <p><i>chcete mít vlastní web snadno a rychle?</i> Stáhněte si tuto šablonku pozícování v CSS přepište texty a máte vlastní web hotový je to tak snadné stačí jen základy html.</p> <p class="patka">copyright (c) 2007 Vaše jméno - Design & kód: </p> </div>  <div class="menu"> <h3>obsah webu</h3> <ul> <li><a href="#">úvodní stránka</a></li> <li><a href="#">ceník služeb</a></li> <li><a href="#">naše reference</a></li> <li><a href="#">odkazy na weby</a></li> <li><a href="#">novinky na webu</a></li> <li><a href=" <li><a href=" <li><a href="#">ostatní zajímavosti</a></li> </ul> <h3>novinky</h3> <p><b>7. dubna 2007</b> - Konečně jsem se k tomu dostal a upravuju kód (html, css) této šablonky změna se projevila i na vzhledu.</p> <p><b>odkazy:</b><br> <a href=" Žďárek</a><br> <a href=" Software</a><br> <a href=" <a href=" www stránek</a><br> <a href=" www stránek</a>. </p> </div>  </body> </html> 40

42 12) Přehled vlastností CSS 12.1) Příklady zápisu (selektory) druh selektoru zápis příklady význam příkladu poznámky tag jméno tagu p {color: red} identifikátor #identifikátor #cervene {color: red} Normální text <p>červený text</p> Normální text <span id="cervene"> ovlivněný text</p> třída hromadná deklarace pseudotřída přímá deklarace v HTML (to není selektor).třída tag.třída selektor, selektor tag:pseudotřída <tag style="zápis stylu">.cervena {color: red} i.cerverna {color: red} H1, H2, H3 {color: red} a:hover {color: red} p:first-line {color: red} Normální text <span class="cervena"> červený text</span> <i>jenom kurzíva</i> <i class="cervena"> červená kurzíva</i> <h1>červený nadpis</h1> <h3>také červený </h3> <a href="...">zčervená při přejetí myší</a> <p>první řádka odstavce bude červená</p> Vztahuje se na každý tag, který má uvedeno správné class Vztahuje se jen na konkrétní tag, který má uvedeno správné class Seznam libovolných platných selektorů (tagů, tříd apod.) oddělený čárkou Pseudotřídy a:link, a:visited, a:active, jsou pouze u odkazů. :hover funguje v Exploreru pouze jako a:hover. Funguje pouze v Mozille a v IE 5.5 Existuje i :first-letter (první písmeno) <p style="color: red">červený odstavec</p> Nezapisuje se do stylopisu A

43 12.2) Font (písmo) Vlastnost Hodnoty Význam Příklady Poznámky Může se zadávat více písem za sebou, odděluje se čárkami. Pokud klient nemá v systému první font, bere další atd. font-style fontfamily fontvariant font-size seznam písem Druh písma, font font-family: Arial CE, sans-serif normal italic oblique normal small-caps xx-small x-small small medium large x-large xx-large výška procento normální kurzíva skloněné normální kapitálky mrňavé maličké malé střední velké obří maxipsí výška zvětšení font-style: normal font-style: italic font-style: oblique FONT-VARIANT: SMALL-CAPS font-size: xx-small font-size: x-small font-size: small font-size: medium font-size: large font-size: x-large font-size: 14pt font-size: 16px font-size: 125% serif - standardní patkové písmo, nejčastěji Times; sans-serif - standardní bezpatkové písmo, grotesk, nejčastěji Helvetica (Arial); cursive - zdobné písmo v kurzívním řezu, typicky Zapf-Chanery; fantasy - celkem libovolné ornamentální písmo, uvádí se Western; monospace - neproporcionální písmo, nejčastěji se používá Courier. Skloněné písmo (oblique) má být prostá geometrická transformace, kurzíva je jiný řez. Prohlížeče většinou užívají kurzívu i při oblique. Kapitálky jsou velká písmena velikosti malých. Velká písmena by měla být trochu větší. IE 5 udělá sice kapitálky, ale zmenší i velká písmena, což by neměl. Netscape se na procenta tváří divně. MS IE 3.x zase neumí správně zobrazovat jednotky em a ex. V IE 6 je vykreslovaná velikost závislá na!doctype. Vizte použitelná písma v různých velikostech. Vizte délkové jednotky v CSS. Vizte velikosti písma podle prohlížečů B

44 fontweight normal bold bolder lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 normální tučné trochu tučnější trochu světlejší duktus vyjádřený číslem font-weight: normal font-weight: bold font-weight: bolder font-weight: lighter font-weight: 100 font-weight: 300, font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 800 font-weight: 900 U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu. Bolder a lighter se doporučuje nepoužívat. font všechny možné předchozí hodnoty nebo systémové písmo font: bold italic 20px Arial Tato deklarace je citlivá na pořadí jednotlivých údajů. Musí se použít v pořadí: tučnost kurzíva velikost jméno. Použije-li se v deklaraci např. font: 12pt/14pt, údaj za lomítkem se vztahuje k vlastnosti line-height. 12.3) Text / odstavec Vlastnost Hodnoty Význam Příklady Poznámky textdecoration texttransform wordspacing none underline overline line-through blink none capitalize uppercase lowercase normal délka bez dekorace podtržení "nadtržení" přeškrtnutí blikání nechat jak to je Začátky Slov Velké VELKÁ PÍSMENA malá písmena mezislovní mezera zvětšená o délku text-decoration: none text-decoration: underline text-decoration: overline text-decoration: line-through text-decoration: blink Text-Transform: none Text-Transform: capitalize TEXT-TRANSFORM: UPPERCASE Text-Transform: lowercase word-spacing: normal word-spacing: 100px C Teoreticky se dá zadávat více vlastností najednou. MS IE neumí blinkat. Prohlížeče podporují od šestých verzí.

45 letterspacing normal délka prostrkání znaků zvětšené o délku letter-spacing: normal l e t t e r - s p a c i n g : 5 p t lineheight normal výška násobek procento výška řádku absolutní výška násobek zvětšení line-height: 3 line-height: 8px line-height: 80% textindent délka procento odsazení prvního řádku text-indent: 50px; druhý řádek odstavce Popis použití u českých odstavců text-align left right center justify zarovnání vlevo vpravo na střed do bloku text-align: left text-align: right text-align: center text-align: justify blabla blab lab Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u odstavců. verticalalign baseline sub super top text-top middle bottom text-bottom procento na řádek dolní index horní index co nejvýše vršek k vršku střed na střed co nejníže spodek ke spodku procento výšky baseline řádek sub řádek super řádek top řádek text-top řádek middle řádek bottom řádek text-bottom řádek 30% řádek Vertikální zarovnání nízkého prvku na vyšším řádku Vlastnosti top, middle a bottom se dají použít u buněk tabulky a u obrázků na řádku. display block inline list-item none blokový element řádkový element seznam nezobrazí se display: block <br> display: inline <br> display: list-item <br> Jde o to říct prohlížeči, že některý element je druhu odstavec (blok), nebo že má být zarovnán do řádku, nebo že je to seznam. Nejzajímavější je možnost nezobrazení. Ostatní hodnoty mají význam pouze při formátování XML dokumentů. whitespace normal pre nowrap normální text předformátovaný nezalamovat Předformátovaný text zachovává mezery a konce řádků jako ve zdroji. Obdoba tagu <pre>. Nezalamovaný neudělá automatický konec řádky. Podle mých zkušeností funguje pouze v Mozille a v IE 5.5 Závisí na <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> nebo vyšším. D

46 12.4) Barvy a pozadí Vlastnost Hodnoty Význam Příklady Poznámky color barva barva písma color:blue backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition background barva transparent none url(cesta) repeat no-repeat repeat-x repeat-y scroll fixed top, center, bottom left, center, right, délka, procento barva pozadí průhledné pozadí obrázek na pozadí pozadí se opakuje neopakuje opakuje v ose X nebo v ose Y pozadí se posouvá pozadí je jako přibité Poloha obrázku na pozadí (nejčastěji pokud se neopakuje) všechny výše uvedé hodnoty background-color: yellow background-color: transparent background-image: url('pozadi5.gif') background-image: url('pozadi5.gif'); backgroundrepeat: repeat background-repeat: no-repeat background-repeat: repeat-x background-repeat: repeat-y příklad má smysl pouze u pozadí stránky; fixed se používá zejména v souvislosti s rámy background-image: url('pozadi5.gif'); backgroundrepeat: no-repeat; background-position: right 50% background: url('pozadi5.gif') no-repeat scroll silver center bottom E Barva písma a základních rámečků nebo barva toho, k čemu se to vztahuje Barva pozadí. Dá se zadávat libovolná barva (zápis barev). 2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze. Vizte Vše o pozadí URL se zadává do závorek a apostrofů, např.: background-image: url('pozadi.gif'). Jsou ale možné i uvozovky nebo jenom závorky. URL může být absolutní i relativní, je však citlivé na velikost písmen.

Zobrazit více