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)

Prezentace na téma: "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)"— Transkript prezentace:

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

2 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ů.

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

4 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

5 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

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

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

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

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

10 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

11 Parametry tagu BODY Příklad:

12 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

13 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 2002. 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 ).

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

15 1.2.1. 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.

16 1.2.1. 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ů)

17 1.2.2. Nadpisy - ukázka

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

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

20 1.2.2.2. 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

21 1.2.2.3. 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

22 1.2.3. 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

23 1.2.3. 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

24 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

25 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

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

27 1.3.1. 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

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

29 1.3.2. 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

30 1.3.3. 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

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

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

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

34 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í.

35 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

36 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="http://www.mujweb.cz/www/pozadi.gif".

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

38 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

39 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

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

41 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í.

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

43 1.6.1. 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.

44 1.6.1. 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

45 1.6.2. 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="http://www.seznam.cz">Toto je link, který Vás zavede na portál Seznam

46 1.6.2. 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ě)

47 1.6.2. 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"

48 1.6.3. 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="http://www.seznam.cz">

49 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

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

51 Tabulka příklad TABLE>  1.1 1.2  2.1 2.2 1.1 1.2 1.3 1.4

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

53 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

54 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

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

56 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

57 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

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

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

60 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ů.

61 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

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

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

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

65 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