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 - ...
Popis HTML ..............................................................................................................................................1 Základní popis jazyka ................................................................................................................................1 2.1) Struktura .html souboru .....................................................................................................................1 3) Hlavička dokumentu - Head ......................................................................................................................2 4) Tělo dokumentu - Body.............................................................................................................................3 5) Text a jeho formátování.............................................................................................................................5 5.1) Další tágy DIV a SPAN.....................................................................................................................7 5.2) Formátování textu..............................................................................................................................8 5.3) Zobrazování speciálních znaků .......................................................................................................11 5.4) Poznámka.........................................................................................................................................11 6) Seznamy a výčty......................................................................................................................................12 7) Vodorovné linky, sloupce a mezery ........................................................................................................16 8) Hypertextové odkazy...............................................................................................................................16 9) Obrázky ...................................................................................................................................................19 10) Tabulky................................................................................................................................................21 11) Kaskádové styly...................................................................................................................................30 11.1) Formátování HTML ....................................................................................................................30 11.2) Možnosti definice stylů: ..............................................................................................................30 11.3) Hromadná deklarace ....................................................................................................................32 11.4) Možnosti stylů .............................................................................................................................33 12) 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
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 . 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, ....
2.1) 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. ... hlava dokumentu ... ... tělo dokumentu ...
-
Ú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) 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:
Konec:
Parametry: Bez parametrů.
Příkaz:
TITLE Popis: Príkazem se definuje titulek dokumentu, umísťuje se do záhlaví dokumentu (BODY) <TITLE>Titulek . Začátek:
<TITLE> Konec:
(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 . Příklad (nastavení kódování češtiny): <META HTTP-EQUIV="Content-type" CONTENT="text/html; Charset=Windows-1250">
2
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:
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:
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
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 <TITLE> HTML stránka <TITLE> Toto je moje první html stránka.
4
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:
Konec:
(nepovinný)
Parametry: Parametr Význam ALIGN="left/center/right/justify" Zarovnání textu vlevo/na střed/vpravo/do bloku Příklad:
Ukázka z knihy Besídka bývalých žáků zvláštní školy: Ukázka z knihy Besídka bývalých žáků zvláštní školy:
Od té doby, co jsem byl přímím Od té doby, co jsem byl přímím svědkem toho, jak řidič svědkem toho, jak řidič elektrické soupravy číslo patnáct elektrické soupravy číslo patnáct při jízdě z kopce zjistil, že při jízdě z kopce zjistil, že brzdy nepracují, ani když jim brzdy nepracují, ani když jim domlouvá, a odběhl do domlouvá, a odběhl do vlečňáku poradit se s kolegou, co vlečňáku poradit se s kolegou, co teď, aby nás pak přišel teď, aby nás pak přišel informovat do mezzaninu informovat do mezzaninu činžovního domu, kde jsme činžovního domu, kde jsme přistáli, že už dál nejede, přistáli, že už dál nejede, abychom si vystoupili a nezdržovali abychom si vystoupili a nezdržovali dopravu, neboť obrací, dopravu, neboť obrací, jezdím elektrikou co možná nejméně. jezdím elektrikou co možná nejméně.
Doufám že se Vám ukázka Doufám že se Vám ukázka líbila. líbila.
Příkaz:
BR Popis: BR slouží k zalomení řádku. Začátek:
5
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, 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í Cvičení druhé
jedna, dvě, tři, čtyři, pět, šest
pondělí, úterý, středa...
Druhé možné řešení: Cvičení druhé
jedna, dvě, tři, čtyři, pět, šest
6
pondělí, úterý, středa...
5.1) Další tágy DIV a SPAN Tagy nenesou význam, jsou to neutrální tágy Rozdíl mezi
a <span>
Div je element blokový Span je element řádkový. Jinak řečeno tag
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:
Konec:
(povinný)
Parametry: Parametr
Význam
ALIGN="left/center/right/justify"
Zarovnání vlevo / na střed / vpravo / do bloku
Příklad:
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.
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
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
s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku. Začátek: <SPAN>
Konec:
Příklad:
<SPAN> Toto je text.
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é:
tučný text text kurzívou podtržené písmo <STRIKE>přeškrtnuté <SMALL>malé písmo velké písmo <SUB>dolní index <SUP>horní index neproporcionální písmo 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
Příklad:
Zde je znění nadpisu
Parametry Zarovnání: ALIGN=LEFT, RIGHT, CENTER, JUSTIFY
Hlavní nadpis je vystředěn
Výchozí formátování nadpisů Tag
Stupeň písma
Výchozí velikost
h1
6
24px
Hlavní nadpis stránky
h2
5
18 -19px
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
Využití
Příkaz:
FONT Popis: Tento příkaz změní velikost, barvu a vzhled fontu. Začátek:
Velikost fontu absolutně / relativně Barva fontu hexadecimálně (RR=červená, GG=zelená, BB=modrá) Jméno fontu (např. Arial) 9
Příklad: Text bude větší než normální Text bude červený červené písmo Text bude fontem Courier
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í:
písmo zvětšené o jednu úroveň písmo zmenšené o dvě úrovně Možné je ovšem i zadávání v absolutních číslech, jeho vykreslení také závisí na nastavení prohlížeče.
písmo velikosti č. 2 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
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:
kde a je velikost písma v sedmi úrovních, od 1 do 7. 10
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
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
Řešení: Cvičení třetí
Nadpis první úrovně
Tlustý Kursiva Tlustá kursiva Styl Arial Black, velikost 5, barva zelená
Zarovnané doprava
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 Pozor : Druhá část tágu tj. není povinná Začátek:
Konec:
(povinný)
Parametry: Parametr
Význam
TYPE="circle/disc/square"
Tvar odrážky (standardně disc)
12
Příklady:
První položka výčtu
Druhá položka výčtu
Třetí položka výčtu
Jedna
Dvě
Tři
První
Druhá
Třetí
• • •
První položka výčtu Druhá položka výčtu Třetí položka výčtu
o o o
Jedna Dvě Tři
o
První Druhá Třetí
•
jedna
Příklad na vnořený seznam:
jedna
pondělí
úterý
Leden
Únor
středa
dvě
o o
pondělí úterý
o •
Leden Únor
středa
dvě
Příkaz:
OL Popis: OL slouží k vytváření číslovaných seznamů (nečíslované UL). Položky do seznamu se přidávají pomocí
Začátek:
Konec: (povinný)
13
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:
pvní
druhá
třetí
1. pvní 2. druhá 3. třetí
pvní
druhá
třetí
pvní
druhá
třetí
A. pvní B. druhá C. třetí
III. pvní IV. druhá V. třetí
Příklad na vnořený seznam:
jedna
pondělí
úterý
Leden
Únor
středa
dvě
1. jedna a. pondělí b. úterý III. Leden IV. Únor c. středa 2. dvě
14
Cvičení (4): Udělej HTML stránku tak, aby byla následují stránce co nejvíce podobná:
Řešení: Cvičení čtvrté
Pondělí
matika
čestina
Úterý
němčina
angličtina
Středa
tělocvik
15
7) Vodorovné linky, sloupce a mezery Příkaz:
Popis: HR slouží k zobrazení horizontálního (vodorovného) pruhu. Začátek:
Konec: (nepovinný)
Parametry: Parametr
Význam
SIZE="celé kladné číslo" WIDTH="celé kladné číslo/proceta" ALIGN="left/center/right" NOSHADE COLOR=jméno či hex. číslo
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:
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 Email. 16
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
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 . 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=
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:
Základní syntaxe tagu:
Příklady:
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
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
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="absbottom"
Zarovná spodní okraj obrázku s nejspodnější linkou textu (tj. se spodním okrajem písmen zasahujících pod základnu)
Zarovná prostředek daného řádku textu s prostředkem obrázku Zarovná spodní okraj obrázku se základnou daného textového řádku Stejné jako "baseline"
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:
20
Parametr ALT definuje alternativní text Syntaxe:
ALT="alternativní text" Příklad:
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:
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í:
- tímto se definuje rozsah jedné tabulky TH definuje hlavičku tabulky (není povinná); TR definuje vlastnosti jednoho řádku tabulky;
Šíř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:
buňka na řádku
buňka na řádku
buňka na řádku
buňka na řádku
buňka na řádku
buňka na řádku
1 a ve slopuci 1 1 a ve slopuci 2 1 a ve slopuci 3
2 a ve slopuci 1 2 a ve slopuci 2 2 a ve slopuci 3
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
Příklad 2: Změněná šířky, výšky a barvy tabulky
1.1
1.2
1.1 1.2
2.1
2.2
2.1 2.2
Příklad 3: Užití parametrů CELLPADDING a CELLSPACING
já
ty
já
on, ona, ono
my
my
vy
oni, ony, ona
já
ty
on, ona, ono
já ty
my
my vy
vy
oni, ony, ona
ty on, ona, ono vy oni, ony, ona
on, ona, ono 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:
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:
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
Příklad 3: Použití barev (bgcolor) v řádku a v buňce
Leden
Únor
Březen
Duben
Terénní práce
Hrubá stavba
Vnitřní práce
Úklid
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
Leden
Únor
Březen
Duben
Květen
Příprava
Realizace
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
Leden
Únor
Projekce
Vnější práce
Vnitřní práce
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
Cvičení (5): Udělej HTML stránku tak, aby byla následují tabulce co nejvíce podobná: Realizace Celkem
Leden Únor 25
14 26
Řešení: Cvičení 5
Realizace
Celkem
Leden
Únor
25
14
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)
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ů. 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. 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, ....
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
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ů a : kurzíva). 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.
Text ovlivněný stylem definovaným přímo v těle dokumentu HTML - pomocí tagu 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ě.
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 ;
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
Typová syntaxe při definici styl (třídy) je:
<STYLE TYPE="text/css">
11.2.3)
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 . Tág musí být umístěn v sekci tj. v hlavičce. Příklad:
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
11.4)
Možnosti stylů
11.4.1)
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} a:link {color: blue;} a:visited {color: navy;} a:hover {color: red} a:active {color: black}
11.4.2)
/* /* /* /* /*
znamená, že odkazy nebudou podtrhávané */ nenavštívený odkaz */ navštívený odkaz */ odkaz, přes který se jede myší*/ odkaz, na který se zrovna klikne */
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 Normální text, <span style="position: relative; top: 20px"> relativně umístěný text a <span style="position: absolute; top: 100px; left: 150px">absolutně umístěný text.
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
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.
Toto je pomocný nadpis
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.
Toto je pomocný nadpis
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
Cvičení (9-3):
Výpis souboru mujstyl.css body { color: #585858; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } .obsah { position: absolute; top: 30px; left: 30px; width: 65%; } .menu { position : absolute; top : 30px; left : 70%; width : 25%; font-size : 80%; border-left : 1px solid #c8d1d9; } 38
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
Výpis souboru index.htm Titulek WWW stránky
Nadpis první úrovně
Chcete mít vlastní web snadno a rychle? 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.
Nadpis druhé úrovně
Budu rád když v patičce necháte odkaz na moji stránku není to ale podmínkou.
Pokud se vám tato šablonky nelíbí nevadí zkuste jinou na výběr jich je tu dost.
Chcete mít vlastní web snadno a rychle? 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.
Pseudotřídy a:link, a:visited, a:active, jsou pouze u odkazů. :hover funguje v Exploreru pouze jako a:hover.
p:first-line {color: red}
První řádka odstavce bude červená
Funguje pouze v Mozille a v IE 5.5 Existuje i :first-letter (první písmeno)
třída
hromadná deklarace
pseudotřída
tag:pseudotřída
přímá deklarace v HTML
Červený odstavec
A
Vztahuje se na každý tag, který má uvedeno správné class
Nezapisuje se do stylopisu
12.2)
Vlastnost
Font (písmo)
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.
fontfamily
seznam písem
Druh písma, font
font-family: Arial CE, sans-serif
font-style
normal italic oblique
normální kurzíva skloněné
font-style: normal font-style: italic font-style: oblique
fontvariant
normal small-caps
normální kapitálky
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.
FONT-VARIANT: SMALL-CAPS
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.
font-size: xx-small
font-size
xx-small x-small small medium large x-large xx-large výška procento
mrňavé maličké malé střední velké obří maxipsí výška zvětšení
font-size: x-small
font-size: small
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
U většiny fontů mají smysl jenom základní tloušťky: záleží to na výrobci fontu.
Teoreticky se dá zadávat více vlastností najednou. MS IE neumí blinkat.
Prohlížeče podporují od šestých verzí.
C
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
zarovnání vlevo vpravo na střed do bloku
text-align: left
text-align
left right center justify
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
verticalalign
baseline sub super top text-top middle bottom text-bottom procento
display
block inline list-item none
blokový element řádkový element seznam nezobrazí se
display: block display: inline display: list-item
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.
Popis použití u českých odstavců
text-align: right Dá se použít jen u blokových elementů, tj. u věcí, které má smysl zarovnávat, například u odstavců. text-align: center text-align: justify blabla blab lab řádek
řádek řádek top řádek sub super
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.
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ů.
Podle mých zkušeností funguje pouze v Mozille a v IE 5.5 Závisí na nebo vyšším.
D
12.4) Vlastnost
Barvy a pozadí Hodnoty
Význam
Příklady
Poznámky
color
barva
barva písma
color:blue
Barva písma a základních rámečků nebo barva toho, k čemu se to vztahuje
příklad má smysl pouze u pozadí stránky; fixed se používá zejména v souvislosti s rámy
Poloha obrázku na pozadí (nejčastěji pokud se neopakuje)
background-image: url('pozadi5.gif'); backgroundrepeat: no-repeat; background-position: right 50%
top, center, bottom backgroundposition
left, center, right,
2 hodnoty se oddělují mezerou. První patří k horizontální, druhá hodnota k vertikální poloze.
délka, procento background
všechny výše uvedé background: url('pozadi5.gif') no-repeat scroll silver Vizte Vše o pozadí hodnoty center bottom
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. E
12.5) •
Velikost a obtékání
Procenta v této tabulce se vztahují k šířce (výšce) rodičovského elementu. Šířka rodiče je nejčastěji šířka dokumentu (nezávislá na okně), kdežto procentuální výška nevnořených elementů se počítá z výšky okna!
Vlastnost Hodnoty
Význam
Příklady
Poznámky V IE nelze nastavit width pro body.
width
automatická šířka auto šířka nastavená šířka procento procento *
Vizte popis délkových jednotek
Prohlížeče se velmi liší v tom, u kterých objektů jsou ochotny šířku akceptovat. Myslím, že to má souvislost s blokovými a řádkovými elementy. V Internet Exploreru 4 a vyšších je do šířky nesprávně započítávána šířka paddingu a borderu (to je quirk mode). Opera, Mozilla (a IE6 ve standardním režimu) počítají správně.
height
float
clear
automatická výška auto nastavená výška výška procento procento * left right none left right both none
umístění plovoucího (obtékaného) objektu či zda je neplavec čekání na skončení plovoucích objektů zleva, zprava, obou, nebo žádných
Dá se nastavit jenom blokovým tagům. Nejlépe funguje u
.
float: left normální odstavec float: right Používá se namísto atributu "clear" u tagu BR. Většinou u nadpisů pod obrázky.
F
12.6)
Okraje Blokový model v CSS:
Vlastnosti uvedené v této tabulce lze spolehlivě aplikovat pouze na tzv. blokové elementy, což jsou většinou buňky tabulky nebo odstavce. Obrázek ilustruje významy vlastností. Příklady se v tabulce nedají dost dobře udělat. ** Při zadávání čtyř hodnot najednou se vztahují ke stranám elementu v pořadí: horní, pravá, dolní, levá. Např.: padding: 12px 3px 6px 9px Vlastnost
IE 4 a 5 zobrazuje doted a dashed jako solid a stínuje vše černou barvou (proto je příklad v zelené, aby bylo alespoň něco vidět). Ostatní prohlížeče včetně IE 5.5 zobrazují správně a stínují šedou. IE 6 zobrazuje úzkou dotted jako dashed Netscape styl rámečku podporuje pouze v zápisu border:
border-style: inset border-style: outset
border-top border-left border-bottom border-right
barva, tloušťka a styl
celkové vlastnosti strany rámečku
border
barva, tloušťka a styl
všechny vlastnosti rámečku
12.8)
Příklady v příloze
border: solid blue 2px
Pozicování
Následující vlastnosti se někdy shrnují pod pojem CSS-P. Nefungují v IE 3, NN 3 a v Opeře 3. Příklady se v tabulce nedají udělat plně funkční. Vizte popis
Vlastnost
Hodnoty
Význam
pozicování.
Poznámky
position
absolute relative static
absolutní umístění relativní umístění normální umístění
Vizte popis pozicování. Mozilla navíc podporuje hodnotu fixed.
left
auto délka procento
bez posunutí posunutí vpravo o délku nebo o procento
Pro prvky s position: absolute nebo position: relative. Vlevo se posouvá zápornou hodnotou.
top
auto délka procento
bez posunutí posunutí dolů o délku nebo o procento
Pro prvky s position: absolute nebo position: relative. Nahoru se posouvá zápornou hodnotou.
right
auto délka procento
bottom
auto
pozicování od pravého okraje variace na vlastnosti left a top (top a left ale vždy vyhrají). Pouze pro objekty s okna nebo elementu position: absolute. Podpora od IE 5, v Opeře a v Mozille, ve starších prohlížečích je to katastrofa. pozicování od spodního I
délka procento
okraje okna nebo elementu Pouze pro elementy s position: absolute. Hodnoty v závorce udávají viditelný obdélník. Shora a zleva jsou souřadnice levého horního rohu vzhledem k elementu. Zprava a zdola jsou souřadnice pravého dolního rohu. Místo hodnoty se může zadat "auto"; v tom směru se to nebude ořezávat. Vizte příklad a popis.
clip
auto rect(shora zprava zdola zleva)
normální zobrazení zadání obdélníku pro oříznutí elementu
overflow
visible hidden scroll auto
nechat přetékat oříznout vždy rolovat rolování, je-li třeba
z-index
auto číslo
definice překrývání elementů jakoby v ose z
Nefunguje pro tagy iframe, select (v IE) pro a flashové animace
visibility
visible hidden
viditelný element skrytý (neviditelný)
u skrytých objektů se vyhradí místo, jako by tam byly (narozdíl od display: none).
pro elementy, které mají nastavené rozměry a nevejdou se do nich. Vizte popis overflow příklad na overflow. V IE fungují i overflow-x a overflow-y
Použité zdroje: www.zive.cz www.jakpsatweb.cz www.klepal.cz/html Vypracoval: Dušan Kafka
Parametr BORDER pak řídí rámeček okolo obrázku. Syntaxe:
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.