HTML HyperText Markup Language 1. a 2. část Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky 2
Elementy a jejich vlastnosti Elementy - části dokumentu vyznačené značkami (tagy). Lze je chápat jako objekty, obsahující řadu vlastností (atributů). Definují podobu a obsah informace zobrazené prohlížečem. WWW-stránka je složena z elementů. Zápis značky: Název značky ohraničen znaky Nezáleží na velikosti písmen Většina značek tvoří pár (kontejner): Značky lze vnořovat Značka má atributy (vlastnosti) a události
WWW stránka WWW stránka – obsahuje objeky – elementy Element (prvek): OBSAH Objekt Vlastnosti (atributy): specifikují způsob formátování obsahu elementu Události: jevy, se kterými může být objekt provázán Př: Text odstavce implicitní nastavení Text odstavce použití vlastnosti Text odstavce reakce na událost - kliknutí
Elementy a jejich vlastnosti Inline elementy — jsou součástí textu na stránce, nemají okolo sebe zalomení (STRONG, SPAN, B) Blokové elementy — před i za nimi je zalomená řádka (např. H1, P, DIV ) Nahrazované elementy — jsou nahrazené nějakým obsahem, pro jejich zařazení do stránky jsou důležité jejich rozměry (např. IMG) Odkazy — (A) – aktivní element, reagující automaticky na událost kliknutí myší –požadavek na zobrazení jiné stránky Vlastnosti (atributy) - určují chování (vzhled) jednotlivých elementů. zápis: atribut = "hodnota" nebo atribut =' hodnota'
Elementy vyznačující strukturu dokumentu HTMLvymezení dokumentu HEADhlavička dokumentu TITLEtitulek dokumentu BODYtělo dokumentu Komentáře (poznámky) se zapisují ve tvaru. Komentáře se používají k zajištění snadné orientace ve zdrojovém textu, příp. k zamezení interpretace části zdrojového textu stránky
Elementy vyznačující strukturu dokumentu HTMLvymezení dokumentu HEADhlavička dokumentu TITLEtitulek dokumentu BODYtělo dokumentu <HTML><HEAD> Úvodní stránka Úvodní stránka </HEAD> </BODY></HTML><HTML><HEAD> Úvodní stránka Úvodní stránka </HEAD> </BODY></HTML>
Prostý text Mezery a konce řádků se interpretují jako jediná mezera Speciální znaky – symboly: číselná entitaznaková entitaznakpopis <<<menší než >>>větší než pevná mezera &&&ersand ""“uvozovky °°°stupeň Je-li a < b potom b = Je-li a < b, potom b =
H1, …, H6 nadpis - text uvnitř značek je zalomen a zvýrazněn (6 úrovní) align způsob zarovnání ( left, center, right) BR zalomení řádku clear např.- vynechání místa až skončí obrázky ( left, right, all, none) P odstavec - text uvnitř značek je zalomen a je před i za odstavec vložena mezera výšky řádku align způsob zarovnání ( left, center, right) Značky pro formátování textu a jejich atributy Párové značky Nepárové značky
Značky pro formátování textu a jejich atributy Nadpis 1. úrovně Nadpis 2. úrovně Nadpis 3. úrovně Nadpis 4. úrovně Nadpis 5. úrovně Nadpis 6. úrovně HR vodorovná čára - zalomí text a vloží vodorovnou čáru align způsob zarovnání ( left, center, right) size tloušťka čáry v pixelech width šířka v pixelech nebo v procentech color barva čáry
PRE předformátovaný text DIV logický blok textu - pro vyznačení související části textu se společným formátováním- nemá vlastní zobrazení SPANfragment textu - vymezuje části textu se společnými vlastnostmi, lze použít uvnitř odstavců a nadpisů - nemá vlastní zobrazení Predformátovaný texttexttext Předformátovaný texttexttext
Začátek básně od Jana Vodňanského Jak mi dupou králíci Ptáš se, jak mi dupou králíci Skvěle - pojď si poslechnout Sevřeně v trojstupu Obcházejí chalupu Smělý úsměv na líci Tak mi dupou králíci Začátek básně od Jana Vodňanského Jak mi dupou králíci Ptáš se, jak mi dupou králíci Skvěle - pojď si poslechnout Sevřeně v trojstupu Obcházejí chalupu Smělý úsměv na líci Tak mi dupou králíci
Písmo Logické styly písma: určuje význam textu, prostředky ke zvýraznění volí prohlížeč: EMzákladní zvýraznění (obvykle kurzívou) STRONGsilné zvýraznění (obvykle tučně) BIGvelké písmo SMALLmalé písmo Fyzické styly písma: určuje vzhled textu, prostředky ke zvýraznění volí autor: Btučné Ikurzíva Upodtržené TTs pevnou šířkou znaku SUBdolní index SUPhorní index FONTdefinice velikosti, barvy a fontu písma sizevelikost 1 až 7 colorbarva facetyp písma
Příklady Začátek básně od Jana Vodňanského Vzorec kyseliny sírové: H 2 SO 4 Nadpis 5. úrovně
Vybrané vlastnosti základních elementů BODY background=“URL” bgColor=“barva” text=“barva” Brno Brno <HR> Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P><HR>
Vybrané vlastnosti základních elementů Brno Brno <HR> Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P><HR>
Vybrané vlastnosti základních elementů FONTsize=“velikost” color=“barva” Hnalign Brno Brno <HR> Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a Svitavy. Vynikalo postupným vývojem od malé trhové osady v prostoru dnešního Starého Brna až po královské město v dnešní lokaci. Městu dominuje hrad Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P><HR>
Odkazy (hyperlinky) — element A Příklad: Odkaz na FAST Zobrazení v prohlížeči: Příklady: FAST Do kapitoly2 Zde začíná 2.kapitola Vlastnosti: href=“URL” name=“návěští” Odkaz je zvýrazněná část stránky, která odkazuje na jiný dokument na jiné místo v tomtéž dokumentu V prohlížeči je odkaz obvykle podtržen a zobrazen jinou barvou. Při vytváření odkazu je třeba určit: URL zdroje, na který bude odkaz ukazovat. text, který bude odkaz označovat ve stránce. text odkazu
URL - Uniform Resource Locator Absolutní URL – úplná jednoznačná specifikace dokumentu Relativní URL – částečné určení, zbytek se doplní z kontextu Příklad: nyní jsme - relativní URL doplněno na absolutní Cv2.htmhttp:// obrazky/atlas.gif nyní jsme - /default.htm
Příklad Stromová struktura složek a souborů: Hlavni Cv1.htm Cv2.htm Obrazky Atlas.gif Obr2.gif Obr1.jpg
Odkazy s kotvou Pokud URL obsahuje fragment (část) musí být v příslušném dokumentu umístěno návěstí (kotva). Fragmenty lze používat i k odkazům v rámci jednoho dokumentu. Úvodní stránka ÚVOD Odkaz na FAST Odkaz na stránku dalsi.htm Kapitola1 Kapitola2 Kapitola1 Zde by následoval text kapitoly 1 Kapitola2 Zde by následoval text kapitoly 2
Seznamy Vymezení seznamu s odrážkami: UL atribut type určuje vzhled odrážky »disc »square »circle číslovaný: OL Umístění odrážky (čísla) — element LI Seznamy lze do sebe vnořovat Parní Parní U U U U Motorové Motorové TU ks TU ks JHMD - tratě: JHMD - tratě: <OL> Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL>
Číslovaný seznam OL Vlastnosti: type určuje vzhled číslování 1 arabské číslice (implicitní hodnota) amalá písmena A velká písmena i malé římské číslice Ivelké římské číslice start hodnota prvního čísla v seznamu (pro OL) value změna číslování uvnitř seznamu (pro LI) Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL> Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL> Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL>
Číslovaný seznam OL Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL> Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice </OL><OL> Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice</LI></OL>