Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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.

Podobné prezentace


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

1 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

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

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

4 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'

5 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

6 Elementy vyznačující strukturu dokumentu  HTMLvymezení dokumentu  HEADhlavička dokumentu  TITLEtitulek dokumentu  BODYtělo dokumentu Úvodní stránka Úvodní stránka Úvodní stránka Úvodní stránka

7 Prostý text Mezery a konce řádků se interpretují jako jediná mezera Speciální znaky – symboly: číselná entitaznaková entitaznakpopis <<větší než pevná mezera &&&ersand ""“uvozovky °°°stupeň Je-li a < b potom b = Je-li a < b, potom b =

8 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

9 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

10 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

11 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

12 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

13 Příklady Začátek básně od Jana Vodňanského Vzorec kyseliny sírové: H 2 SO 4 Nadpis 5. úrovně

14 Vybrané vlastnosti základních elementů BODY background=“URL” bgColor=“barva” text=“barva” Brno Brno


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.



15 Vybrané vlastnosti základních elementů Brno Brno


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.



16 Vybrané vlastnosti základních elementů FONTsize=“velikost” color=“barva” Hnalign Brno Brno


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.



17 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

18 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://www.brno.cz/hlavni/Cv2.htm obrazky/atlas.gif nyní jsme - /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  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

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) — element LI  Seznamy lze do sebe vnořovat Parní Parní U U U U Motorové Motorové TU ks TU ks JHMD - tratě: JHMD - tratě:

    Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice

22 Čí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 Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice

23 Čí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 Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice

    Jindřichův Hradec - Obrataň Jindřichův Hradec - Obrataň Jindřichův Hradec - Nová Bystřice Jindřichův Hradec - Nová Bystřice


Stáhnout ppt "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."

Podobné prezentace


Reklamy Google