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

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ů.WWW-stránka je složena z elementů.

• Zápis značky:Název značky ohraničen znaky < >Nezáleží na velikosti písmenVětšina značek tvoří pár (kontejner): <značka> </značka> Značky lze vnořovatZnačka má atributy (vlastnosti) a události

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í

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

HTML vymezení dokumentu HEAD hlavička dokumentu TITLE titulek dokumentu BODYtělo dokumentu

Komentáře (poznámky) se zapisují ve tvaru . Komentáře se používají k zajištění snadné orientaceve zdrojovém textu, příp. k zamezení interpretace části zdrojového textu stránky

Elementy vyznačující strukturu dokumentu

HTML vymezení dokumentu HEAD hlavička dokumentu TITLE titulek dokumentu BODYtělo dokumentu

<HTML><HTML>

<HEAD><HEAD>

<TITLE> <TITLE> Úvodní stránkaÚvodní stránka </TITLE></TITLE>

</HEAD></HEAD>

<BODY <BODY bgColor=“lightblue”>bgColor=“lightblue”>

</BODY></BODY>

</HTML></HTML>

<HTML><HTML>

<HEAD><HEAD>

<TITLE> <TITLE> Úvodní stránkaÚvodní stránka </TITLE></TITLE>

</HEAD></HEAD>

<BODY <BODY bgColor=“lightblue”>bgColor=“lightblue”>

</BODY></BODY>

</HTML></HTML>

Prostý textMezery a konce řádků se interpretují jako jediná

mezera

Speciální znaky – symboly:

číselná entita znaková entita znak popis< < < menší než> > > větší než

pevná mezera& & & ampersand" " “ uvozovky° ° ° stupeň

<P align="center">Je-li <B><I>a < b </i></B><BR> potom <B><I>b = 1 000 000 </I></B>.</P>

Je-li a < b ,potom b = 1 000 000 .

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čkyPárové značky

Nepárové Nepárové značkyznačky

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 vodorovná čára - zalomí text a vloží vodorovnou čáru

align způsob zarovnání (left, center, right)size tloušťka čáry v pixelechwidth šířka v pixelech nebo v procentechcolor barva čáry

<HR size= "4" width="50%" color = "red" >

PRE předformátovaný textDIV logický blok textu - pro vyznačení související části textu

se společným formátováním- nemá vlastní zobrazeníSPAN fragment 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

<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 poslechnout

Sevřeněv trojstupu

Obcházejí chalupuSmělý úsměv na líci

Tak mi dupou králíci

PísmoLogické 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ísmoSMALL malé písmo

Fyzické styly písma: určuje vzhled textu, prostředky ke zvýraznění volí autor: B tučné I kurzí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

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>

Vybrané vlastnosti základních elementů

BODY background=“URL”

bgColor=“barva”

text=“barva”

<BODY <BODY bgcolor=“bgcolor=“khakikhaki““>><H1><H1> Brno Brno </H1></H1><HR><HR>

<P><P> Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a 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 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á 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í. katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. <BR><BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P></P><HR><HR>


<BODY <BODY bgcolor=“bgcolor=“#A7B700”#A7B700” text=“red”text=“red” > > <H1><H1> Brno Brno </H1></H1><HR><HR>

<P><P> Brno je největším moravským městem. Nachází se nedaleko soutoky řeky Svratky a 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 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á 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í. katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. <BR><BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P></P><HR><HR>


FONTsize=“velikost”

color=“barva”

Hn align

<BODY b<BODY backgroundackground=“=“bgb.jpg” bgb.jpg” text=“red”text=“red”>> <H1<H1 align=“center”align=“center”>><<FONT color=“FONT color=“ddarkblue”>arkblue”> Brno Brno</FONT></FONT></H1></H1><HR><HR>

<<PP align=“center”> align=“center”> Brno je největším moravským městem. Nachází se nedaleko soutoky 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 ř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 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 Špilberk a biskupská katedrála na Petrově. Od 19. století je Brno přední průmyslovou aglomerací. aglomerací. <BR><BR>Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.Železniční tratě město spojují s Prahou, Olomoucí, Vídní a dalšími městy.</P></P><HR><HR>

Odkazy (hyperlinky) — element A

Příklad:<A href="http://www.fce.vutbr.cz/">Odkaz na FAST</A>

Zobrazení v prohlížeči:

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>

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.

<A href = “URL”> text odkazu </A>

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 - http://www.brno.cz/hlavnirelativní URL doplněno na absolutní

Cv2.htm http://www.brno.cz/hlavni/Cv2.htmobrazky/atlas.gif http://www.brno.cz/hlavni/obrazky/atlas.gif

nyní jsme - http://www.brno.cz/hlavni/obrazky

.. /default.htm http://www.brno.cz/hlavni/default.htm

http://server:port/cesta/dokument?dotaz#kotva

Příklad

Stromová struktura složek a souborů:

HlavniCv1.htmCv2.htmObrazky

Atlas.gifObr2.gifObr1.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.

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

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<UL type=<UL type="discdisc">><LI> Parní <LI> Parní </LI></LI> <UL type=<UL type="squaresquare">> <LI> U47.001</LI><LI> U47.001</LI> <LI> U37.901</LI><LI> U37.901</LI> </UL></UL><LI> Motorové</LI><LI> Motorové</LI> <UL type=<UL type="circlecircle">> <LI> TU47 - 9 ks</LI><LI> TU47 - 9 ks</LI> </UL></UL></UL></UL> <HR> <HR><P><B>JHMD - tratě:</B></P><P><B>JHMD - tratě:</B></P><OL><OL><LI>Jindřichův Hradec - Obrataň</LI><LI>Jindřichův Hradec - Obrataň</LI><LI>Jindřichův Hradec - Nová <LI>Jindřichův Hradec - Nová Bystřice</LI>Bystřice</LI></OL> </OL>

Číslovaný seznam OLVlastnosti:• 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)• value změna číslování uvnitř seznamu (pro LI)

<OL <OL type=type="11">>

<LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI><LI><LI>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL>

<OL <OL type=type="AA">><LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI><LI><LI>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL>

<OL <OL type=type="II">><LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI><LI><LI>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL>

Číslovaný seznam OL

<OL <OL type=type="aa">>

<LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI><LI><LI>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL>

<OL <OL startstart=="33">><LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI><LI><LI>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL><OL><OL><LI><LI>Jindřichův Hradec - ObrataňJindřichův Hradec - Obrataň</LI></LI>

<LI<LI value=value="33">>Jindřichův Hradec - Nová BystřiceJindřichův Hradec - Nová Bystřice</LI></LI></OL></OL>

Documents

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