HTML JAZYK Výuka HTML jazyka pro střední školy

1. Jazyk HTML Standardní značkovací jazyk používaný pro dokumenty na webu. Jazyk HTML pomocí tágů (značek) určuje, jak by se měly v prohlížečích zobrazit různé prvky stránek, např. text a grafika, jak bude stránka upravena a jaká by měla být odezva na akce uživatelů.

HTML: hypertextový jazyk pro zobrazování informací v podobě textů, který byl dodatečně rozšířen o prvky grafické a multimediální. V současné době základem pro tvorbu WWW stránek. Na tento jazyk navazují následné technologie, které nesou prvky objektového programování zaměřeného na potřeby a funkce Internetu.

Navazující technologie: CCS - Cascading Style Sheets DHTML - dynamické rozšíření normy jazyka HTML reagující na události vyvolané uživatelem Skripty - funkční celky umožňující nejrůznější funkce (grafické efekty, identifikaci, napojení na databázové zdroje) - zahrnuje JAVAScripty, VBScripty, jazyky PHP apod. XML Programovaní pomocí jazyku JAVA - vkládaní apletu

Složky jazyka HTML Složky jazyka HTML můžeme rozdělit na dvě základní skupiny: Formátovací značky - tagy Prezentované informace - texty, obrázky, zvuky, obsahy databází, videoklipy

Tagy Formátovací značky - tagy zajišťující správnou interpretaci informace dělíme je na: párové nepárové

Popis základních tagů: HTML dokument je vymezen párovým tagem stránka. Vše co je napsáno mezi těmito tagy je interpretováno jako hypertext. Dokument je dále rozdělen na hlavičku a tělo. Hlavička slouží pro řízení vyhledávání a práci serverů, v těle jsou umístěny vlastní informace, které zobrazuje prohlížeč.

1.1. Základní struktura HTML dokumentu: Název dokumentu

1.1. Cvičení Základní šablona HTML dokumentu: Pozdrav Ahooooj

Parametry tagu BODY BACKGROUND - obrázek na pozadí (jedná se o obrázky ve formátech *.gif nebo *.jpg) BGCOLOR - barva vyplňující pozadí TEXT - základní barva textu LINK - barva nenavštíveného odkazu VLINK - barva již navštíveného odkazu ALINK - barva aktuálního odkazu Barvu je možno zadávat jejím anglickým názvem "black", nebo hexadecimálně s použitím znaku # na začátku "#000000". LEFTMARGIN - kolik pixelu od levého okraje má začínat zobrazení stránky TOPMARGIN - kolik pixelů od horního okraje má začínat zobrazení stránky

Parametry tagu BODY Příklad:

Barvy a jejich hexadecimální kód #FFFFOOžlutáYellow #FFFFFFbíláWhite #FFOOOOčervenáRed #8OOO8Otmavě fialováPurpe #8O8OOOtmavě žlutáOlive #OOOO8Otmavě modráNavy #8OOOOOtmavě červenáMaroon #OOFFOOzelenáLime #OO8OOOOtmavě zelenáGreen #8O8O8OšedáGray #0FF00FFfialováFuschia #0000FFmodráBlue #OOOOOOčernáBlack #OOFFFtyrkysováAqua

1.21. Cvičení Parametry tagu body: MacroHard s.r.o. Vítejte na domovské stránce firmy MacroHard s.r.o. Tím, že právě čtete tuto stránku máte jedinečnou šanci měnit vaši budoucnost. Naše firma totiž vyvinula nový operační systém Doors Je založen na převratné myšlence, která je běžně známá lupičům, že dveřmi (angl. doors ) se dostanete do místnosti mnohem lépe, než oknem (angl. windows ).

1.2. Tagy formátující text Nadpisy Formátovaní textu Formátování odstavce

Nadpisy Pro ohraničení nadpisu v textu se rozlišuje 6 úrovní nadpisů označovanými párovými tagy Nadpis, kde x je číslo od 1- 6 udávající velikost nadpisu (největší) až (nejmenší). Nadpis Nadpis Parametrem, který může být obsažen v tímto tagu je ALIGN, který udává zarovnání nadpisu.

Nadpisy Tento parametr ALIGN nabývá těchto hodnot: ALIGN=LEFT - nadpis je zarovnán doleva ALIGN=RIGHT - nadpis je zarovnán doprava ALIGN=CENTER - nadpis je vystředěn ALIGN=JUSTIFY - nadpis je zarovnán do bloku ( dle obou okrajů)

Nadpisy - ukázka

Formátování znaků písma - tučný text - kurzíva - podtržené písmo - přeškrtnuté písmo

1.21. Cvičení Základní šablona HTML dokumentu: Pozdrav Ahooooj

Formátování znaků písma - písmo o 1 bod menší, než okolní - písmo o 1 bod větší než okolní - dolní index - horní index

Formátování znaků písma - nastavení fontu písma (PC musí tento font mít nainstalován) Parametry:SIZE - velikost (SIZE=12; SIZE=+2, SIZE=-2) FACE - druh písma - řez (FACE="Verdana, Bodoni ") COLOR= barva písma Příklad: Toto je formatovaný text

Formátování odstavce (nepárový tag) - zalomení konce řádku (skok na nový řádek) (nepárová znak) - vytvoření nového odstavce citace - přesná citace i dle stylu

Formátování odstavce - pojmenování části textu, popřípadě nastavení některých vlastností (zarovnání pomocí parametru ALIGN. - vložení již předformátovaného textu, např. z MS WORD (možno použit parametr WIDTH=nnn, kde nnn udává šířku stránky ve znacích) -vycentrování textů, nebo objektu

1.3.Tvorba číslovaných a nečíslovaných seznamů -Jablka -Hrušky -Švestky -Banány - Jablka - Hrušky - Švestky - Banány Číslovaný seznamNečíslovaný seznam

1.3.Tvorba číslovaných a nečíslovaných seznamů Jablka Hrušky Švestky Banány Jablka Hrušky Švestky Banány Číslovaný seznamNečíslovaný seznam

Běžný nečíslovaný seznam - vytyčuje začátek seznamu - položka seznamu - ukončení seznamu

Běžný nečíslovaný seznam Do úvodního tagu je možné vložit parametr TYPE, který rozhodne o tvaru odrážky nečíslovaného seznamu: TYPE=SQUARE - čtverec TYPE=DISC - prázdné kolečko TYPE=CIRCLE - plné kolečko Příklad: položka seznamu

Běžný číslovaný seznam - vytyčuje začátek seznamu - položka seznamu - ukončení seznamu

Běžný číslovaný seznam Do úvodního tagu je možné vložit parametr TYPE, který rozhodne o způsobu číslování: TYPE=A - velká písmena abecedy TYPE=a - malá písmena abecedy TYPE=I - velké římské číslice TYPE=i - malé římské číslice TYPE=1 - číslovaní pomocí latinských cifer Příklad: položka seznamu

Vnořené seznamy V případě vnořených seznamů postupujeme stejně jako by jsme vytvářeli normální seznam a je zcela jedno, jedná li se o číslovaný, nebo nečíslovaný seznam. Seznamy můžeme libovolně kombinovat

Vnořené seznamy- Příklady - vytyčuje začátek seznamu - položka seznamu vytyčení začátku vnořeného seznamu - položka vnořeného seznamu vytyčení konce vnořeného seznamu - položka seznamu - ukončení seznamu

Vnořené seznamy- Příklady Evropa  Německo  Francie  Velká Británie  Česká republika Asie  Japonsko  Korea  Indie

Vnořené seznamy- Příklady UL> Evropa Německo Francie Velká Británie Česká republika Asie Korea Japonsko Indie

1.4. Obrázky Zobrazení obrázku se děje nepárovým tagem s následujícími parametry SRC - specifikuje jméno obrázku a jeho umístění.

1.4. Obrázky - otevření obrázku foto.jpg, který je umístěn ve stejném adresáři jako dokument s odkazem. - otevření obrázku foto.jpg, který je umístěn v podadresáři PIC vzhledem k adresáři v němž se nachází dokument s odkazem. - plná cesta ve tvaru URL adresy k obrázku

1.4. Obrázky Cesta k obrázku může být relativní nebo absolutní. relativní určení cesty – je vhodnější způsob, protože pokud se přemístí stránky na jiný server, nebudou se muset přepisovat cesty v každém dokumentu. Máte-li například obrázek pozadi.jpg v podadresáři IMAGES, určíte cestu src ="IMAGES/pozadi.jpg". Je-li obrázek umístěn ve stejném adresáři jako stránka stačí uvést pouze jeho jméno (src="pozadi.jpg"). absolutní určení cesty – pro určení obrázku umístěného na jiném serveru. V tomto případě nesmíte zapomenout na určení protokolu http. src="

ALIGN - zarovnání obrázku Hodnoty: left right top texttop middle absmiddlr baseline

Obrázek další parametry WIDTH - šířka obrázku v pixelech HEIGHT - výška obrázku v pixelech ALT - alternativní text zobrazující se během načítaní BORDER - rámeček kolem obrázku

1.5. Ostatní grafické prvky - nepárový tag sloužící pro vložení vodorovné čáry - linky Parametry: SIZE=nn - tloušťka čáry v pixelech WIDTH=nnn šířka linky v pixelech, nebo v % šířky okna

1.5. Ostatní grafické prvky ALIGN - zarovnání linky na stránce NOSHADE - vypnutí stínu linky, který je implicitně vypnut COLOR - barva linky

1.6. Odkazy Odkaz (link) – zvýrazněná část textu, která odkazuje na další stránku Odkazy dovoluji připojit k stávajícímu souboru soubory navazující svou tématiku. Tyto soubory mohou být ve formátu HTML, ale také v jiných formátech včetně spustitelných souborů. Chovaní prohlížeče k jiným, než HTML souborům je v zásadě dvojí.

1.6. Odkazy Je - li implemtován plug-in pro příslušný datový typ dojde k otevření souboru. V opačném případě je nám nabídnutu stažení souboru (to jest zkopírovaní na náš PC), které je obdobné jako u služby FTP.

Odkazy v rámci jednoho dokumentu - interní odkazy K užití této služby slouží tehdy, jestliže je dokument značně rozsáhlý a chceme aby pomocí odkazů docházelo k přepnutím na požadovanou část (např. interaktivní obsah na začátku dokumentu). vytvoření kotvy - záložky se provede umístěním následujícího tagu na patřičnou pozici.

Odkazy v rámci jednoho dokumentu - interní odkazy Na toto místo se budeme přepínat kliknutím na text, který je zapsán v následujícím tagu Text linku

Odkazy na jiné dokumenty - externí dotazy Tyto odkazy používají adresy URL a to buď absolutní (tedy celé), nebo relativní, která je vztažena k root adresáři na WWW serveru. HREF=" je link, který Vás zavede na portál Seznam

Odkazy na jiné dokumenty - externí dotazy Parametry tagu: TITLE - po najetí na ten odkaz - link se objeví v bublince vepsaný titulek TITLE="Můj nejoblíbenější server" TARGET - jak se otevře nový dokument (myšleno v kterém rámu, nebo okně)

Odkazy na jiné dokumenty - externí dotazy Hodnoty:_parent - otevření dokumentu v rodičovském okně _blank - otevření dokumentu v novém okně jméno_okna - otevření dokumentu v pojmenovaném okně top - otevření dokumentu v rámci s nejvyšší prioritou -self - otevření dokumentu v aktivním rámci TARGET="_blank"

Odkazy na jiné dokumenty pomocí obrázku Je to kombinace tagu pro vložení linku s tagem pro vložení obrázku. Místo textu se bude objevovat obrázek, po klepnutí na obrázek se přepne na stránku, kterou definuje odkaz: HREF="

1.7. Tvorba tabulky Tabulku vytváříme tak, že definujeme začátek a konec tabulky pomocí párových značek Mezi těmito tagy dochází k definici jednotlivých řádků tabulky tagem a jednotlivých datových buněk. vymezuje 1 buňku tabulky

Tabulka příklad Takováto tabulka má tedy takovou to definici:

Tabulka příklad TABLE>  

Tabulka příklad 2 den hodiny pondělí 15 úterý 20 středa 10 10středa 20úterý 15pondělí hodinyden

Parametry tagu TABLE: ALIGN - zarovnání vzhledem k šířce stránky BACKGROUND - obrázek na pozadí tabulky BGCOLOR - barva pozadí tabulky BORDER - tloušťka rámečku tabulky BORDERCOLOR - barva rámečku tabulky

Parametry tagu TABLE: BORDERCOLORDARK - barva tmavší části rámečku tabulky CELLPADDING - vzdálenost mezi okrajem tabulky a jejím obsahem v pixelech CELLSPACING- vzdálenost mezi buňkami v pixelech {COLS - určuje počet sloupců tabulky} - nepovinné VALIGN - zarovnání textu v tabulce WIDTH - šířka tabulky v pixelech, nebo %šířky stránky

Parametry tagu TR: BGCOLOR - barva pozadí řádku BORDERCOLOR - barva rámečku řádku NOWRAP - zakazuje zalomení textu v tabulkovém řádku

Parametry tagu TD: BACKGROUND COLSPAN - spojení buněk v jednom řádku zadává se počet sloučených řádků ROWSPAN - spojení buněk ve více řádcích zadává se počet sloučených sloupců NOWRAP WIDTH - šířka buňky v pixelech, nebo v % z šířky řádku HEIGHT - výška v pixelech či v % výšky řádku

Shrnutí o tabulce Parametr WIDTH="HODNOTA" HEIGHT="HODNOTA" BORDER="HODNOTA" ALIGN="LEFT/RIGHT" VALIGN="TOP/BOTTOM" CELLSPACING="HODNOTA" CELLPADDING="HODNOTA" BGCOLOR="#RRGGBB" Význam Šířka tabulky v pixelech, platí i pro buňky tabulky Výška tabulky v pixelech, platí i pro buňky Šířka rámečku tabulky v pixelech Zarovnání v tabulce VLEVO/VPRAVO, platí i pro buňky Zarovnání v tabulce NAHORU/DOLU, platí i pro buňky Velikost mezer mezi sloupci buňěk v pixelech Velikost mezer mezi řádky buněk v pixelech Barva pozadí v tabulce, platí i pro buňky

Příklady použití tabulky V této buňce je odstavec textu Odkaz jinam valign="bottom"> 1.položka 2.položka

Příklady použití tabulky obsah buňky1 obsah buňky2 obsah buňky3 obsah buňky4 obsah buňky5 obsah buňky6

1.8. Práce s rámy (frameset) Základním úkolem rámu je umožnit v jednom okně prohlížeče zobrazit více HTML dokumentu, což rozšiřuje možnosti tvorby a distribuce informací. Důležité je aby technologii rámu podporovaly prohlížeče, tato skutečnost je však problémem dnes jen v minimu případů.

Vytvoření rámu v dokumentu: Parametry: ROWS - rozdělení okna na rámy vodorovné Přiklad.: ROWS="50%,*" nebo místo relativní rozměrů použijeme rozměr v pixelech COLS - rozdělení okna na rámy svisle

Pojmenování rámu Každý vytvořený rám je pojmenován, aby bylo možno na něj odkazovat a je mu přiřazen inicializační HTML soubor, aby po otevření stránky nebyl prázdný. Pojmenovaní a přiřazení se provede následujícím nepárovým tagem.

Ukázka kódu stránky, která je rozdělena na 2 vodorovné framy. Dva rámy

Parametry tagu FRAMESET: FRAMEBORDER - určuje zda bude mít rám ohraničení či nikoliv ( nabývá hodnot 0 a 1) BORDERCOLOR - barva ohraničení rámu FRAMESPACING - zadání rozměru v pixelech, který zůstane mezi rámy prázdný

1.9.1 Hlavička dokumentu podruhé Tagy: - v návaznosti na CGI (nebo jiný) skript je možné vyhledávat slova v tomto dokumentu - určuje základní URL adresu pro server, nebo virtuální server - různé funkce - obálka pro psaní skriptu - obálka pro definici stylu