inovace bakalářského studijního oboru aplikovaná...
TRANSCRIPT
![Page 1: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/1.jpg)
Inovace bakalářského studijního oboru Aplikovaná chemie
http://aplchem.upol.cz
CZ.1.07/2.2.00/15.0247
Tento projekt je spolufinancovánEvropským sociálním fondem a státním
rozpočtem České republiky.
![Page 2: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/2.jpg)
Tvorba WWW stránek(Tvorba statických WWW stránek)
Inovace bakalářského studijního oboru Aplikovaná chemie
![Page 3: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/3.jpg)
Formátovací tagy v HTML
![Page 4: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/4.jpg)
Formátovací tagy v HTML
![Page 5: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/5.jpg)
Formátovací tagy v HTML
![Page 6: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/6.jpg)
Práce s obrázky v HTML
• Nepárový tag <img>
• Možnosti vložení obrázku do HTML dokumentu
– <img src="obr1.gif"> → obrázek umístěný přímo v adresáři (relativní cesta)
– <img src="../gifs/obr2.gif"> → obrázek umístěný v adresáři gifs včetně celé
adresářové cesty
– <img src="http://www.neco.cz/gifs/obr3.gif"> → obrázek je zadán s
celou URL i adresářovou adresou (absolutní cesta)
<img src="html.png" align="right" alt="obrázek" width="130px" height="70px">
![Page 7: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/7.jpg)
Práce s tabulkami v HTML
• Párový tag <table> → uzavírá celé prostředí tabulky
![Page 8: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/8.jpg)
Práce s tabulkami v HTML – ukázky
1. ukázka
2. ukázka
![Page 9: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/9.jpg)
• Párový tag <a> → anchor (kotva)
– Vše, co je mezi značkami <a>...</a> bude sloužit jako odkaz (tzn. dá se na to kliknout myší).
– Př.: <a href="http://www.seznam.cz">Seznam, najdu tam co neznám</a>
• Příklady použití:
Hypertextové odkazy v HTML dokumentu
![Page 10: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/10.jpg)
Nepárový tag <frame>; párový tag <frameset>
• <frameset> → Skupina rámů. Rozděluje stránku do dvou
nebo více oblastí. <frameset> se vyskytuje za hlavičkou místo
tagu <body>.
Rámy v HTML dokumentu
Příklad dvou rámů vedle sebe → levý je pevně široký (150px), zbytek (*) doplní druhý rám:<frameset cols="150, *">
<frame name="sloupek" src="menu.html">
<frame name="obsah" src="uvod.html">
</frameset>
• <frame> → Vymezuje prostor pro načtení jiné stránky.
Každý <frame> je vložen v elementu <frameset>, jenž
mu udává rozměry pro zobrazení.
Formátování WWW stránek pomocí rámu se dnes už nevyužívá
![Page 11: Inovace bakalářského studijního oboru Aplikovaná chemieaplchem.upol.cz/predmety/TWS/prezentace/new/4-Tvorba...Inovace bakalářského studijního oboru Aplikovaná chemie CZ.1.07/2.2.00/15.0247](https://reader034.vdocuments.site/reader034/viewer/2022052015/602cb1eacec1f26b8807903b/html5/thumbnails/11.jpg)
Procvičování