1 / 23

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. HTML HyperText Markup Language 1. a 2. část. Elementy a jejich vlastnosti. WWW-stránka je složena z elementů.

karik
Download Presentation

HTML HyperText Markup Language 1. a 2. část

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky 2 HTML HyperText Markup Language 1. a 2. část

  2. Elementy a jejich vlastnosti WWW-stránka je složena z elementů. • 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. • 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čka></značka> • Značky lze vnořovat • Značka má atributy (vlastnosti) a události

  3. WWW stránka WWW stránka – obsahuje objeky – elementy Element (prvek):<ZNAČKA>OBSAH</ZNAČKA> 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ř: <P> Text odstavce </P>implicitní nastavení <P align=“center”>Text odstavce</P>použití vlastnosti <P align=“center” onClick=“novy()” >Text odstavce</P> reakce na událost - kliknutí

  4. Vlastnosti (atributy) • - určují chování (vzhled) jednotlivých elementů. • zápis: atribut = "hodnota" nebo atribut =' hodnota' 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

  5. HTML vymezení dokumentu HEAD hlavička dokumentu TITLE titulek dokumentu BODY tělo dokumentu Elementy vyznačující strukturu dokumentu Komentáře (poznámky) se zapisují ve tvaru <!-- nějaký komentář -->. 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

  6. HTML vymezení dokumentu HEAD hlavička dokumentu TITLE titulek dokumentu BODY tělo dokumentu Elementy vyznačující strukturu dokumentu <HTML> <HEAD> <TITLE> Úvodní stránka </TITLE> </HEAD> <BODY bgColor=“lightblue”> </BODY> </HTML>

  7. Prostý text Mezery a konce řádků se interpretují jako jediná mezera Speciální znaky – symboly: číselná entita znaková entita znak popis &#60; &lt; < menší než &#62; &gt; > větší než &nbsp; pevná mezera &#38; &amp; & ampersand &#34; &quot; “ uvozovky &#176; &deg; ° stupeň <P align="center">Je-li <B><I>a &lt; b </i></B> <BR> potom <B><I>b = 1&nbsp;000&nbsp;000 </I></B>. </P> Je-li a < b ,potom b = 1 000 000 .

  8. Značky pro formátování textu a jejich atributy Párové značky Nepárové značky P odstavec - text uvnitř značek je zalomen a je před i za odstavec vložena mezera výšky řádku alignzpůsob zarovnání (left, center, right) H1, …, H6 nadpis - text uvnitř značek je zalomen a zvýrazněn (6 úrovní) alignzpůsob zarovnání (left, center, right) BR zalomení řádku clear např.- vynechání místa až skončí obrázky (left, right, all, none)

  9. Značky pro formátování textu a jejich atributy <H1>Nadpis 1. úrovně</H1> <H2>Nadpis 2. úrovně</H2> <H3>Nadpis 3. úrovně</H3> <H4>Nadpis 4. úrovně</H4> <H5>Nadpis 5. úrovně</H5> <H6>Nadpis 6. úrovně</H6> <HR size= "4" width="50%" color = "red" > HR vodorovná čára - zalomí text a vloží vodorovnou čáru alignzpůsob zarovnání (left, center, right) size tloušťka čáry v pixelech width šířka v pixelech nebo v procentech color barva čáry

  10. PREpř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í <PRE> Predformátovaný text text text </PRE> Předformátovaný text text text

  11. <DIV align="center"> <P>Začátek básně od Jana Vodňanského</P> <H2>Jak mi dupou králíci</H2> <P>Ptáš se, jak mi dupou králíci<BR> Skvěle - pojď si poslechnout<BR> Sevřeně<BR> v trojstupu<BR> Obcházejí chalupu<BR> Smělý úsměv na líci <BR> Tak mi dupou králíci </P> </DIV> Začátek básně od Jana Vodňanského Jak mi dupou králíci Ptáš se, jak mi dupou králíciSkvěle - pojď si poslechnoutSevřeněv trojstupuObcházejí chalupuSmělý úsměv na líciTak mi dupou králíci

  12. Písmo Logické styly písma: určuje význam textu, prostředky ke zvýraznění volí prohlížeč: EM základní zvýraznění (obvykle kurzívou) STRONG silné zvýraznění (obvykle tučně) BIG velké písmo SMALL malé písmo Fyzické styly písma: určuje vzhled textu, prostředky ke zvýraznění volí autor: B tučné Ikurzíva U podtržené TT s pevnou šířkou znaku SUB dolní index SUP horní index FONT definice velikosti, barvy a fontu písma size velikost 1 až7 color barva face typ písma

  13. Příklady <P>Začátek básně od <B><I>Jana Vodňanského</I></B></P> Začátek básně od Jana Vodňanského <P> Vzorec kyseliny sírové: H<SUB>2</SUB>SO<SUB>4</SUB></P> Vzorec kyseliny sírové: H2SO4 <FONT size=7><H5>Nadpis 5. úrovně</H5></FONT> <H5><FONT size=7>Nadpis 5. úrovně</FONT></H5>

  14. Vybrané vlastnosti základních elementů BODYbackground=“URL” bgColor=“barva” text=“barva” <BODY bgcolor=“khaki“> <H1> Brno </H1> <HR> <P> 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í. <BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. </P> <HR>

  15. Vybrané vlastnosti základních elementů <BODY bgcolor=“#A7B700”text=“red” > <H1> Brno </H1> <HR> <P>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í. <BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. </P> <HR>

  16. Vybrané vlastnosti základních elementů FONTsize=“velikost” color=“barva” Hnalign <BODY background=“bgb.jpg” text=“red”> <H1align=“center”><FONT color=“darkblue”> Brno</FONT></H1> <HR> <P align=“center”>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í. <BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy. </P> <HR>

  17. Vlastnosti: href=“URL” name=“návěští” Odkazy (hyperlinky) — element A 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. <Ahref = “URL”> text odkazu </A> Příklady: <A href=“http://www.fce.vutbr.cz”>FAST</A> <A href=“#Kapitola2”>Do kapitoly2</A> <A name=“Kapitola2”>Zde začíná 2.kapitola</A> Příklad: <A href="http://www.fce.vutbr.cz/">Odkaz na FAST</A> Zobrazení v prohlížeči:

  18. URL - Uniform Resource Locator http://server:port/cesta/dokument?dotaz#kotva • Absolutní URL – úplná jednoznačná specifikace dokumentu • Relativní URL – částečné určení, zbytek se doplní z kontextu Příklad: nyní jsme - http://www.brno.cz/hlavni relativní URL doplněno na absolutní Cv2.htm http://www.brno.cz/hlavni/Cv2.htm obrazky/atlas.gif http://www.brno.cz/hlavni/obrazky/atlas.gif nyní jsme - http://www.brno.cz/hlavni/obrazky .. /default.htmhttp://www.brno.cz/hlavni/default.htm

  19. Příklad Stromová struktura složek a souborů: Hlavni Cv1.htm Cv2.htm Obrazky Atlas.gif Obr2.gif Obr1.jpg

  20. Odkazy s kotvou <HTML> <HEAD><TITLE>Úvodní stránka</TITLE> </HEAD> <BODY bgcolor="lightblue"> <H2> ÚVOD </H2> <HR> <A href="http://www.fce.vutbr.cz/">Odkaz na FAST</A><BR> <A href="dalsi.htm">Odkaz na stránku dalsi.htm</A><BR> <A href="#kap1">Kapitola1</A><BR> <A href="#kap2">Kapitola2</A> <HR> <A name="kap1">Kapitola1</A> <P> Zde by následoval text kapitoly 1 </P> <HR> <A name="kap2">Kapitola2</A> <P> Zde by následoval text kapitoly 2 </P> </BODY> </HTML> • 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.

  21. 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) — elementLI • Seznamy lze do sebe vnořovat <UL type="disc"> <LI> Parní </LI> <UL type="square"> <LI> U47.001</LI> <LI> U37.901</LI> </UL> <LI> Motorové</LI> <UL type="circle"> <LI> TU47 - 9 ks</LI> </UL> </UL> <HR> <P><B>JHMD - tratě:</B></P> <OL> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL>

  22. Vlastnosti: • type určuje vzhled číslování • 1 arabské číslice (implicitní hodnota) • a malá písmena • A velká písmena • i malé římské číslice • I velké římské číslice • start hodnota prvního čísla v seznamu (pro OL) • valuezměna číslování uvnitř seznamu (pro LI) Číslovaný seznam OL <OL type="1"> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL> <OL type="A"> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL> <OL type="I"> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL>

  23. Číslovaný seznam OL <OL type="a"> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL> <OL start="3"> <LI>Jindřichův Hradec - Obrataň</LI> <LI>Jindřichův Hradec - Nová Bystřice</LI> </OL> <OL> <LI>Jindřichův Hradec - Obrataň</LI> <LIvalue="3">Jindřichův Hradec - Nová Bystřice </LI> </OL>

More Related