section DOCTYPE html h 1rove 1h 1 html
- Slides: 13
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> VY_32_INOVACE_160314_POZADI_DUM 4. . ledna 2013 Pozadí Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1. 5 – EU peníze středním školám, registrační číslo CZ. 1. 07/1. 5. 00/34. 0809. 1
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Vlastnosti pozadí <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Nastavení vlastnosti background umožní definování vlastností pozadí elementu. Tento parametr je možné použít na nastavení pozadí textu, odstavce, celé stránky, … Parametry: • background-color, • background-image, • background-position, • background-repeat, • background-origin, • background-attachment. 2
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-color <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Vlastnost určuje barvu pozadí. Hodnoty: barva, transparent, inherit. Příklad: body { background-color: black } 3
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-image <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Parametr určuje obrázek umístěný na pozadí. Hodnoty: • url, • none, • inherit. Příklad: body {backgroundimage: url(obr/podklad. jpg} 4
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-position <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Určuje polohu obrázku definovaného na pozadí. Hodnoty: • %, • jednotky délky, • top, • center, • bottom, • left, • right, • inherit. 5
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-position <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Výchozí hodnota je 0% 0% = top left. Obecná syntaxe: background-position: hodnota Příklad: body { background-image: url(obr/podklad. jpg no-repeat; background-position: right top } 6
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-repeat Určuje chování obrázku na pozadí. Hodnoty: • repeat, • repeat-x, • repeat-y, • no-repeat, • inherit. Příklad: body { background-image: url(obr/podklad. jpg; background-repeat: repeat-x } <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 7
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> background-origin <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Vlastnost určuje výchozí bod, od něhož se začíná obrázek na pozadí elementu vykreslovat. Hodnoty: • border, • padding, • content. Příklad: div {border: 15 px solid grey; padding: url(podklad. gif) norepeat; background-origin: content } 8
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> background-attachment Určuje způsob posouvání obrázku na pozadí. Hodnoty: • scroll, • fixed, • inherit. Příklad: body { background-image: url(obr/podklad. gif) background-attachment: fixed } 9
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Zadání vlastností v jednom zápisu div { background: #CC url(picture/p 1. jpg) top right repeat-x } 10
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • Své znalosti si zopakujte v zde. • Kvíz 11
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Zdroje: <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • JIŘÍ KROUŽEK, Martin Domes. CSS: Kapesní přehled. Vyd. 1. Brno: Computer Press, 2006. ISBN 80 -251 -0773 -6. • STANÍČEK, Petr. Kompletní průvodce CSS: kaskádové styly. Vyd. 1. Brno: Computer Press, 2003, 178 s. ISBN 80 -7226872 -4. • GOLDSTEIN, Alexis, Louis LAZARIS a Estelle WEYL. HTML 5 a CSS 3 pro webové designéry. Vyd. 1. Brno: Zoner Press, 2011, 286 s. Encyklopedie webdesignera. ISBN 978 -80 -7413 -166 -0. • W 3 C. Kaskádové styly: domovská stránka [online]. 2012 -0506, 06: 20: 10 [cit. 2013 -01 -04]. Dostupné z: http: //www. w 3. org/Style/CSS/Overview. cs. html 12
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Zdroje – cvičný příklad • Extensible Markup Language. Http: //cs. wikipedia. org [online]. 2012 [cit. 2013 -01 -04]. Dostupné z: http: //cs. wikipedia. org/wiki/Extensible_Markup_Language • Obrázky – xml 2. gif http: //zametkinapolyah. ru/wpcontent/uploads/2012/04/XML 2. gif – xml 1. png http: //t 0. gstatic. com/images? q=tbn: ANd 9 Gc. SQEE 605 n. Qy zqg 6 Da. DFQ 3 JMCDRFW-a. Hw 0 IKw. GAY 2 GU 5 R 9 VSp. ONNLw 13
