Error found while checking this document as HTML 4.01 Transitional!

Result: 1 Error, 2 warning(s)
:
: utf-8
: HTML 4.01 Transitional
Root Element: HTML
Options

Help on the options is available.

↑ Top

Validation Output: 1 Error

  1. Warning Line 86, Column 5: NET-enabling start-tag requires SHORTTAG YES
    <br />

    For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

    This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.

  2. Warning Line 1529, Column 12: NET-enabling start-tag requires SHORTTAG YES
    </div> <br />

    For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.

    This warning and related errors may also be caused by an unquoted attribute value containing one or more "/". Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.

  3. Error Line 1626, Column 26: document type does not allow element "DIV" here
    <div class="optimalizace">

    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

↑ Top

Source Listing

Below is the source input I used for this validation:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <link rel="stylesheet" type="text/css" href="./css/default.css">
  6. <link rel="stylesheet" type="text/css" href="./css/obsah.css">
  7. <meta name="generator" content="PSPad editor, www.pspad.com">
  8. <meta name="google-site-verification" content="GS46d6O1Rh8am1-EioxDq0ONyOCBKYO8v3wkSkoU7l0">
  9. <meta name="googlebot" content="all">
  10. <title>Tutoriály od Wikmana</title>
  11. <meta name="description" content="Kolekce tutoriálů,tvorba lehkých www,php, html, css, css3, js, jquery,java a podobné srandy co jsem na netu vyhledal.Dále na programy, návody, tipy, triky. Také je zde sekce pro kutily, tipy a návody pro DIY">
  12. <script type="text/javascript" src="modernizer.js"></script>
  13. <style type="text/css" >
  14. .tester1{height:100px;width:100px;background:#FFCC00;}
  15. .tester2{height:100px;width:100px;background:#FFCC00;transition:2000ms;}
  16. .tester3{height:100px;width:100px;background:#FFCC00;transition:2000ms 2000ms;}
  17. .tester4{height:100px;width:100px;background:#FFCC00;transition:2000ms 2000ms;}
  18. .text{text-align:center;font-size:23px;opacity:1;transition:2000ms;}
  19. .text:hover{opacity:0;}
  20. .tester1:hover{background:#303030;}
  21. .tester2:hover{background:#303030;}
  22. .tester3:hover{background:#303030;}
  23. .tester4:hover{background:#303030;}
  24. .tester5:hover{background:#303030;}
  25. div p form placeholder {visibility: visible;font-size: large;}
  26. </style>
  27. </head>
  28. <body>
  29. <div class="obal">
  30. <!-- hlavicka -->
  31. <div class="head1">
  32. <div class="head2">
  33. <div class="head">
  34. <a href="?page=uvod">
  35. <img id="bottom" src="img/web/HEAD4.gif" title="wikmanovy tutoriály" alt="Obrázek hlavičky">
  36. <img id="top" src="img/web/HEAD5.gif" title="wikmanovy tutoriály" alt="Obrázek hlavičky">
  37. </a>
  38. <h1 class="nadpis">WIKMAN TUTORIÁLY</h1>
  39. </div>
  40. </div>
  41. </div>
  42. <!-- hlavicka konec-->
  43. <!-- navigace -->
  44. <table class='navbar'><tr><td class='aktivni'>
  45. <a href='?page=html' class='href'>HTML&nbsp;/&nbsp;CSS</a></td><td>
  46. <a href='?page=pc_hw_sw' class='href'>PC&nbsp;/&nbsp;HW&nbsp;/&nbsp;SW</a></td><td>
  47. <a href='?page=tipy_a_rady' class='href'>TIPY&nbsp;/&nbsp;RADY&nbsp;/&nbsp;NÁVODY</a></td><td>
  48. <a href='?page=uploads' class='href' target='_self'>UPLOAD</a></td><td>
  49. <a href='?page=kniha' class='href' target='_self'>GUESTBOOK</a></td><td>
  50. <a href='?page=kontakt' class='href'>KONTAKT</a></td></tr></table>
  51. <!-- navigace konec-->
  52. <!-- obal obsahu -->
  53. <div class="obal_1">
  54. <div class="obal_2">
  55. <div class="obal_obsahu">
  56. <!-- obsah -->
  57. <div class="obsah">
  58. <br><br>
  59. <div class="obs_blok">
  60. <h1><b>HTML&nbsp;/&nbsp;CSS&nbsp;-&nbsp;tutoriály</b></h1>
  61. <hr class="top"><p>
  62. Zde se budu oběvovat různé ukázky, návody a tipy pro tvorbu WWW stránek ve starších verzích jazyka HTML. Časem se zde objeví i nějaké návody z oblasti HTML5, JS, jQuery atd., ale to opravdu až později. Čekal bych i nějaké Vaše tipy nebo rady, pokud tedy chcete přispívat i Vy/ty, klidně mi napište do kontaktů v návštěvní knize.
  63. <br>
  64. Zatím si však můžete zkusit těch pár návodů, které jsou momentálně k dispozici v tomto seznamu:</p>
  65. <br />
  66. </div>
  67. <br>
  68. <hr class="topblok_seznam">
  69. <ol>
  70. <li>
  71. <a href="#jednoducha_www">
  72. Návod na tvorbu jednoduché stránky (<b>HTML</b> & <b>CSS</b>)
  73. </a>
  74. </li>
  75. </ol>
  76. <hr class="bottomblok_seznam"><br>
  77. <div class="obs_blok">
  78. <H2 id="jednoducha_www">1.ČÁST</H2>
  79. <hr class="top">
  80. <ul style="padding: 10px 10px 15px 10px;width:95%;" class="rejstrik">
  81. <li><a href="#s1.1">1.1 - Server a editor</a></li>
  82. <li><a href="#s1.2">1.2 - Index.html</a></li>
  83. </ul>
  84. </div>
  85. <br>
  86. <div class="obs_blok">
  87. <H2>2.ČÁST</H2>
  88. <hr class="top">
  89. <ul style="padding: 10px 10px 15px 10px;width:95%;" class="rejstrik">
  90. <li><a href="#s2.0">2.0 - Index - Tvorba prvků stránky</a></li>
  91. <li><a href="#s2.1">2.1 - Obalový Div - wrapper</a></li>
  92. <li><a href="#s2.2">2.2 - Hlavičkový Div - Header</a></li>
  93. <li><a href="#s2.3">2.3 - Navigační Div - Menu</a></li>
  94. <li><a href="#s2.4">2.4 - Obsahový Div - Content</a></li>
  95. <li><a href="#s2.5">2.5 - Patička Stránky - Footer</a></li>
  96. <li><a href="#s2.6">2.6 - Shrnutí a zakončení</a></li>
  97. </ul>
  98. </div>
  99. <br>
  100. <div class="obs_blok">
  101. <H2>3.ČÁST</H2>
  102. <hr class="top">
  103. <ul style="padding: 10px 10px 15px 10px;width:95%;" class="rejstrik">
  104. <li><a href="#s3.0">3.0 - Stylování a pozicování pomocí CSS</a></li>
  105. <li><a href="#s3.1">3.1 - Pozice v prohlížeči</a></li>
  106. <li><a href="#s3.2">3.2 - Začínáme stylovat - ŠÍŘKA/WIDTH</a></li>
  107. <li><a href="#s3.3">3.3 - Začínáme stylovat - VÝŠKA/HEIGHT</a></li>
  108. <li><a href="#s3.4">3.4 - Začínáme stylovat - OKRAJ/BORDER</a></li>
  109. <li><a href="#s3.5">3.5 - Stylování a pozicování pomocí CSS - Druhá část</a></li>
  110. <li><a href="#s3.6">3.6 - CSS STYL - Div Head</a></li>
  111. <li><a href="#s3.7">3.7 - CSS STYL - Div Obsah</a></li>
  112. <li><a href="#s3.8">3.8 - CSS STYL - Div Foot</a></li>
  113. <li><a href="#s3.9">3.9 - CSS STYL - Dvě možnosti zápisu</a></li>
  114. <li><a href="#s3.10">3.10 - CSS STYL - Finální podoba v souboru "style.css"</a></li>
  115. </ul>
  116. </div>
  117. <br>
  118. <div class="obs_blok">
  119. <H2>4.ČÁST</H2>
  120. <hr class="top">
  121. <ul style="padding: 10px 10px 15px 10px;width:95%;" class="rejstrik">
  122. <li><a href="#s4.0">4.0 - CSS STYL - Menu - úprava html kódu</a></li>
  123. <li><a href="#s4.1">4.1 - CSS STYL - Menu - &lt;table&gt;</a></li>
  124. <li><a href="#s4.2">4.2 - CSS STYL - Menu - &lt;tr&gt;</a></li>
  125. <li><a href="#s4.3">4.3 - CSS STYL - Menu - &lt;td&gt;</a></li>
  126. <li><a href="#s4.4">4.4 - CSS STYL - Pseudotřída - :hover</a></li>
  127. <li><a href="#s4.5">4.5 - CSS STYL - Menu - odkazy</a></li>
  128. <li><a href="#s4.6">4.6 - CSS STYL - Finální zápis</a></li>
  129. <li><a href="#s4.7">4.7 - CSS STYL - Konec</a></li>
  130. </ul>
  131. </div>
  132. <br><br><div class="obs_blok">
  133. <h1 id="s1.1"><b>HOSTING, SERVER A EDITOR</b>
  134. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18" title="tutorial wikman"></a></span></h1>
  135. <hr class="top">
  136. <p>
  137. Kritéria pro výběr hostingu by si měl každý určit sám podle vlastních potřeb. Na webu je spousta hostingů, které se liší v nabízených službách. Je na vás, zdali budete používat databáze, php nebo chcete jen prezentovat svou statickou webovou vizitku. Pokud použijete Google k vyhledání slova "<b>HOSTING</b>", jistě si z vybraných výsledků vyberete.
  138. </p>
  139. <p>
  140. Pro náš případ však bude bohatě stačit free hosting
  141. <a href="http://webzdarma.cz" target="blank" title="odkaz na webzdarma"><b>WEBZDARMA.CZ</b></a>. Dostupnost serveru, ftp klient, dostatečný úložný prostor a podpora php5 je přesně to, co budeme v následujících krocích potřebovat. Na adrese
  142. <a href="http://webzdarma.cz" target="blank" title="odkaz na webzdarma" >webzdarma.wz.cz</a> se pomocí několika kliknutí zaregistrujete a vyberete si název domény a subdomény. Výběr názvu vaší stránky by měl být originální a nesmí být již obsazen (použit), tuto skutečnost však lehce zjistíte - zkrátka to nepůjde. Jakmile bude vše připraveno, zadáno a odesláno, budete informováni o příchozím E-mailu, který je nutné potvrdit. V mailu vám budou rovněž zaslány informace o heslech které jste si zadali při registraci, adresu vaší budoucí www stránky a konečně <b>FTP přístup</b>. Ten budeme používat pro přesun našich html souborů.
  143. </p>
  144. <p>
  145. Pokud jste při registraci pustupovali úspěšně, byl vám zaslán mail, o zřízení a plné funkčnosti vaší adresy. Ta však nefunguje, protože postrádá nejnutnější soubor, tedy <b>index.html</b>(nebo index.htm popřípadě index.php). Soubor INDEX.HTML si vytvoříme pomocí celosvětově známého id tag
  146. <span id="editor">editoru
  147. </span>
  148. <a href="http://www.pspad.com/cz/" target="blank" title="odkaz na PSPAD" ><b>PSPAD</b></a>. K samostatné tvorbě indexu se vrátíme později a pak jej na server nahrajeme pomocí zmiňovaného ftp klienta. Webzdarma nabízí vlastní ftp webové rozhraní pro přenos souborů (osobně bych ale hledal jinou variantu), stejně tak je ftp klient i součástí pspad editoru (ten budeme v našem případě používat). Doporučuji také použít
  149. <a href="http://www.total-commander.cz/" target="blank" title="odkaz na TotalComander" ><b>TotalCommander</b></a>. Je ideální pro přenos obrázků a na manipulaci s adresáři na serveru.
  150. </p><br>
  151. </div>
  152. <br>
  153. <div class="obs_blok">
  154. <h3 id="s1.2"><b>Index.html</b>
  155. <span class="domu"><a href="#jednoducha_www">
  156. <img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18">
  157. </a></span></h3>
  158. <hr class="top">
  159. <p>
  160. Server jsme zprovoznili, ale adresa nám ještě zcela nefunguje, server totiž postrádá soubor <b>"index.html"</b> . Budeme jej proto muset vytvořit a nahrát na server. K tomuto ůčelu nám poslouží <b>PSPAD</b>. Jeho instalace je jednoduchá a neměli byste s ní mít potíže. Můžete samozřejmě použít i jiný editor, ale jelikož budu v PSPadu dělat tento návod, bude pro vás lepší si jej nainstalovat.
  161. <br>
  162. <br>V PSPadu se po levé straně nachází panel (okno chcete-li), v jeho záložkách najdeme ikonu složky, na které je napsáno <b>"FTP"</b>, rozklikněte ji. Ikony, které se nám nyní zobrazily zastupují funkce, které můžeme využívat pro správu našich souborů na serveru. Nás však zajímá pouze první (taková ta "zástrčka"). Klikneme na ní a rozbalíme si nabídku FTP připojení.
  163. <br>
  164. <br>Zaklikneme si <b>"Nové připojení"</b> a poté vyplníme podle parametrů, které máme v E-mailu od zprostředkovatele hostingu. Vše uložíme a připojíme se k serveru. Pokud je vše v pořádku, rozsvítí se v bočním panelu zelená kostička a <b>"FTP: adresa vašeho serveru"</b> to znamená, že jsme připojeni a můžeme odesílat data.
  165. <br>
  166. <br>Tak tedy k věci, v editoru si spusťte nový soubor, zobrazí se okno s různými typy souborů, my si vybereme <b>"HTML multihighlighter"</b>. Objeví se nový soubor <b>"Nový1.html"</b> s hlavičkou dokumentu.
  167. </p><br>
  168. </div>
  169. <br>
  170. <p class="popis">Měl by vypadat takto.</p>
  171. <br>
  172. <hr class="topblok">
  173. <code class="code1"> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  174. </code>
  175. <br>
  176. <code class="code1">&lt;html&gt;
  177. </code>
  178. <br>
  179. <code class="code1">&lt;head&gt;
  180. </code>
  181. <br>
  182. <code class="code1">&lt;meta http-equiv="content-type"&nbsp;content="text/html; charset=windows-1250"&gt;
  183. </code>
  184. <br>
  185. <code class="code1">&lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt;
  186. </code>
  187. <br>
  188. <code class="code1">&lt;title&gt;&lt;/title&gt;
  189. </code>
  190. <br>
  191. <code class="code1">&lt;/head&gt;
  192. </code>
  193. <br>
  194. <code class="code1">&lt;body&gt;
  195. </code>
  196. <br>
  197. <code class="code1">&lt;/body&gt;
  198. </code>
  199. <br>
  200. <code class="code1">&lt;/html&gt;
  201. </code>
  202. <hr class="bottomblok">
  203. <br>
  204. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  205. <br><br>V ukázce není vidět reklamní proužek u topu stránky (ve Vašem případě však ano), ktrerý je takovou malou pozorností od zprostředkovatele webového prostoru, když si opět prohlédnete <b>index.html</b>, zjistíte, že se do kódu přidala nová část. Jedná se právě o tuto reklamu, doporučuji celý její kód označit, vyjmout a vložit za tag <b>&lt;/html&gt;</b> na konci kódu. Není nutné, aby se vám pletl do stránky, když s ní budete pracovat.
  206. <br>
  207. <br>Mezi tag<code class="code2"><b>&lt;title&gt;</b></code>
  208. &nbsp;a&nbsp;
  209. <code class="code2"><b>&lt;/title&gt;</b>
  210. </code> doporučuji napsat název vaší stránky ( já použiji tento:<b>"Zde bude název vaší stránky"</b>) a mezi tag
  211. <code class="code2"><b>&lt;body&gt;</b>
  212. </code>&nbsp;a&nbsp;
  213. <code class="code2"><b>&lt;/body&gt;</b>
  214. </code> bysme mohli napsat něco ve stylu :<b>" Stránky jsou ve výstavbě"</b>. Tím bysme mohli tuto část ukončit a soubor uložit na server jako <b>index.html</b>. To porovedeme jednoduše, v programové nabídce <b>PSPADU</b> klikneme na <b>Soubor</b> a pak na <b>Uložit na FTP</b>, poté budete vyzváni k uložení souboru na váš disk. Vytvořte novou složku, kam budete postupně přidávat soubory. Tam soubor uložte pod novým názvem <b>"index.html"</b> a můžete si také všimnout, že se zapsal i v panelu s FTP adresářem. Nyní je vše připraveno a my můžeme nakouknout do prohlížeče (já budu používat Firefox). Pokud jste tedy použili výše uvedené příklady textů, následující stránka by měla vypadat stejně jako v této <a href="php/html_css/jednoducha_www/examples/html/ex1-index.html" target="blank" title="Odkaz na ukázku číslo 1" ><b>ukázce&nbsp;</b></a>.</i><br><br>
  215. </p>
  216. <br>
  217. <p class="popis"><i>Tohle by do začátku mělo stačit. Jak přidat hlavičku, obsahovou část a patičku si ukážeme v dalším <a href="#s2.0"><b>&nbsp;článku.</b></a></i>
  218. </p>
  219. <br><br>
  220. <div class="obs_blok">
  221. <h1 id="s2.0"><b>INDEX.HTML - Tvorba prvků stránky</b>
  222. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h1>
  223. <hr class="top">
  224. <p>
  225. Minule jsme si připravili projekt a na serveru zprovoznili <b>index.html</b>. Do indexu jsme úspěšně přidali název stránky a nyní se budeme indexu věnovat trochu podrobněji. Začneme s elementy, které se budou nacházet mezi tagy <code id="code2"><b>&lt;body&gt;</b></code>&nbsp;a&nbsp;<code class="code2"><b>&lt;/body&gt;</b></code>. Tento článek bude pojednávat o tvorbě jednosloupcového layoutu pomocí <b>divů</b>. Stručne si vysvětlíme a vypíšeme jednotlivé části zdrojového kódu.<br>
  226. </p>
  227. </div>
  228. <br>
  229. <div class="obs_blok">
  230. <h3 id="s2.1"><b>Obalový Div - wrapper</b>
  231. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  232. <hr class="top">
  233. <p>
  234. Takže začneme u prvního prvku - tedy u tzv. <b>"Obalovače"</b>. Ten v sobě bude obsahovat ostatní prvky/elementy, které nám budou tvořit stránku. V druhé části článku umístíme obalovací div do středu stránky a určíme mu další vlastnosti pomocí stylů.
  235. </p>
  236. <p>
  237. Nyní si však obalovací div zapíšeme do kódu. To uděláme tak, že mezi tagy <b><code class="code2">&lt;body&gt;</code>&nbsp;</b>a<b>&nbsp;<code class="code2">&lt;/body&gt;</code></b> umístíme element <b>"div"</b> s třídou <b>"obal"</b>. Pro přehlednost nebudu vypisovat celý kód i s hlavičkou dokumentu, ale jen tu část mezi tagy <b><code>&lt;body&gt;</code></b>.<br>
  238. </p>
  239. </div>
  240. <br>
  241. <p class="popis">Zápis bude vypadat takto&nbsp;:</p>
  242. <br>
  243. <hr class="topblok">
  244. <code class="code1">&lt;body&gt;</code><br>
  245. <code class="code1" style="color:yellow;font-weight:bold;">&lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;&lt;/div&gt;</code><br>
  246. <code class="code1">&lt;/body&gt;</code>
  247. <br>
  248. <hr class="bottomblok">
  249. <br>
  250. <br>
  251. <div class="obs_blok">
  252. <h3 id="s2.2"><b>Div head - Hlavičkový Div - Header</b>
  253. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  254. <hr class="top">
  255. <p>
  256. Další částí naší stránky bude <b>"head"</b>, česky tedy hlavička. Funkce hlavičky je prostá, obvykle je v ní obrázek, který nějak souvisí s tématem stránky. O názvu stránky informuje hlavním nadpisem a v některých případech v ní bývá pohyblivá fotogalerie s ukázkou sortimentu. Jak už název napovídá, hlavička bude umístěna na začátku dokumentu, ale jelikož jsme si v minulém odstavci vytvořili <b>"obalovací div"</b>, budeme muset hlavičku umístit do něj.</p><br>
  257. </div>
  258. <br>
  259. <p class="popis">Zápis bude vypadat takto&nbsp;:</p>
  260. <br>
  261. <hr class="topblok">
  262. <!-- body tag-->
  263. <code class="code1">&lt;body&gt;</code><br>
  264. <code class="code1">&lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;</code><br>
  265. <code class="code1" style="color:yellow;font-weight:bold;">
  266. &lt;div&nbsp;class=&rdquo;head&rdquo;&gt;&lt;/div&gt;</code><br>
  267. <code class="code1">&lt;/div&gt;</code><br>
  268. <code class="code1">&lt;/body&gt;</code>
  269. <br>
  270. <hr class="bottomblok">
  271. <br>
  272. <br>
  273. <div class="obs_blok">
  274. <h3 id="s2.3"><b>Navigační Div - Menu</b>
  275. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  276. <hr class="top">
  277. <p>
  278. Pro tvorbu navigace, která bude obsahovat nejdůležitější odkazy pro orientaci na naší stránce, použijeme namísto <b>divu</b> jednoduchou tabulku. Tabulka má totiž možnost vytvářet stejně veliké buňky a to je pro tvorbu menu ideální. Mohli bychom sice použít div, aby nám tabulku obalil, ale je to vcelku zbytečné, proto div vynecháme. Nejdříve vložíme do tabulky somostatné buňky a těm pak přidáme odkazy. Buňek můžete mít kolik chcete, ale doporučuji myslet na délku slov, které v nich budou umístěny jako odkazy. Nejvíc bych doporučil maximálně pět buněk v menu. Při větším počtu, nebo dlouhých odkazech, se vám buňky začnou skládat pod sebe, což asi nikdo nechce.</p><br>
  279. </div><br>
  280. <p class="popis">K samotnému kódu tabulky jen ve zkratce&nbsp;:</p>
  281. <br>
  282. <hr class="topblok">
  283. <code class="code1"><span style="color:#000;">&lt;table&gt;</span>
  284. <span style="color:#fff"> - tag začátku tabulky</span></code><br>
  285. <code class="code1"><span style="color:#000;">&lt;/table&gt;</span>
  286. <span style="color:#fff"> - tag konce tabulky</span></code><br>
  287. <code class="code1"><span style="color:#000;">&lt;tr&gt;</span>
  288. <span style="color:#fff"> - tag začátku řádku</span></code><br>
  289. <code class="code1"><span style="color:#000;">&lt;/tr&gt;</span>
  290. <span style="color:#fff"> - tag konce řádku</span></code><br>
  291. <code class="code1"><span style="color:#000;">&lt;td&gt;</span>
  292. <span style="color:#fff"> - tag začátku buňky</span></code><br>
  293. <code class="code1"><span style="color:#000;">&lt;/td&gt;</span>
  294. <span style="color:#fff"> - tag konce buňky</span></code><br>
  295. <hr class="bottomblok">
  296. <br>
  297. <p class="popis">Struktura tabulky pro menu o pěti odkazech&nbsp;:</p>
  298. <br>
  299. <hr class="topblok">
  300. <code class="code1">&lt;table&nbsp;class="menu"&gt;</code><br>
  301. <code class="code1">&lt;tr&gt;</code><br>
  302. <code class="code1">&lt;td&gt;odkaz1&lt;/td&gt;</code><br>
  303. <code class="code1">&lt;td&gt;odkaz2&lt;/td&gt;</code><br>
  304. <code class="code1">&lt;td&gt;odkaz3&lt;/td&gt;</code><br>
  305. <code class="code1">&lt;td&gt;odkaz4&lt;/td&gt;</code><br>
  306. <code class="code1">&lt;td&gt;odkaz5&lt;/td&gt;</code><br>
  307. <code class="code1">&lt;/tr&gt;</code><br>
  308. <code class="code1">&lt;/table&gt;</code><br>
  309. <hr class="bottomblok">
  310. <br>
  311. <p class="popis"><b>Index.html</b> bude vypadat takto &nbsp;:</p>
  312. <br>
  313. <hr class="topblok">
  314. <code class="code1">&lt;body&gt;</code><br>
  315. <code class="code1">&lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;</code><br>
  316. <code class="code1">&lt;div&nbsp;class=&rdquo;head&rdquo;&gt;&lt;/div&gt;</code><br><!-- head tag-->
  317. <code class="code1" style="color:yellow;font-weight:bold;">&lt;table&nbsp;class=&rdquo;menu&rdquo;&gt;</code><br>
  318. <code class="code1" style="color:yellow;font-weight:bold;">&lt;tr&gt;</code><br>
  319. <code class="code1" style="color:yellow;font-weight:bold;">&lt;td&gt;odkaz1&lt;/td&gt;</code><br>
  320. <code class="code1" style="color:yellow;font-weight:bold;">&lt;td&gt;odkaz2&lt;/td&gt;</code><br>
  321. <code class="code1" style="color:yellow;font-weight:bold;">&lt;td&gt;odkaz3&lt;/td&gt;</code><br>
  322. <code class="code1" style="color:yellow;font-weight:bold;">&lt;td&gt;odkaz4&lt;/td&gt;</code><br>
  323. <code class="code1" style="color:yellow;font-weight:bold;">&lt;td&gt;odkaz5&lt;/td&gt;</code><br>
  324. <code class="code1" style="color:yellow;font-weight:bold;">&lt;/tr&gt;</code><br>
  325. <code class="code1" style="color:yellow;font-weight:bold;">&lt;/table&gt;</code><br>
  326. <code class="code1">&lt;/div&gt;</code><br><!-- konec obalovacího divu -->
  327. <code class="code1">&lt;/body&gt;</code><br>
  328. <hr class="bottomblok">
  329. <br>
  330. <p class="poznamka">
  331. <i><b><u>POZNÁMKA:</u></b><br><br>
  332. Tabulku (menu) jsme neobalili divem, protože to není nutné. Menu se zobrazí u vrcholu stránky, je to zapríčiněno tím, že "head" (nadřazený prvek stránky), nic neobsahuje a nemá definovanou výšku. Pokud jste postupovali správně, výsledek by měl vypadat <a href="php/html_css/jednoducha_www/examples/html/ex2-index.html" target="_blank" title="odkaz na ukázku číslo 2" ><b>takto</b></a>.</i><br><br></p>
  333. <br>
  334. <br>
  335. <div class="obs_blok">
  336. <h3 id="s2.4"><b>Obsahový Div - Content</b>
  337. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  338. <hr class="top">
  339. <p>
  340. Další částí naší stránky bude "obsah". O funkci obsahu snad není ani třeba mluvit, ve zkratce jen, obrázky, texty, tabulky, fotogalerie a videa. Co v oblasti obsahu chcete mít, je jen na vás. Div "Obsah" bude umístěn za tabulkou navigace dokumentu, ale budeme jej muset také vložit do obalovače.</p>
  341. </div>
  342. <br>
  343. <p class="popis">Zápis tedy bude vypadat takto &nbsp;:</p><br>
  344. <hr class="topblok">
  345. <code class="code1" style="color:yellow;">&lt;div&nbsp;class=&rdquo;obsah&rdquo;&gt;&lt;/div&gt;</code><br>
  346. <hr class="bottomblok">
  347. <br>
  348. <p class="popis">A v samotném kódu pak takto&nbsp;:</p><br>
  349. <hr class="topblok">
  350. <code class="code1">&lt;body&gt;</code><br>
  351. <code class="code1">&lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;</code><br>
  352. <code class="code1">&lt;div&nbsp;class=&rdquo;head&rdquo;&gt;&lt;/div&gt;</code><br><!-- head tag-->
  353. <code class="code1">&lt;table&nbsp;class=&rdquo;menu&rdquo;&gt;</code><br>
  354. <code class="code1">&lt;tr&gt;</code><br>
  355. <code class="code1">&lt;td&gt;odkaz1&lt;/td&gt;</code><br>
  356. <code class="code1">&lt;td&gt;odkaz2&lt;/td&gt;</code><br>
  357. <code class="code1">&lt;td&gt;odkaz3&lt;/td&gt;</code><br>
  358. <code class="code1">&lt;td&gt;odkaz4&lt;/td&gt;</code><br>
  359. <code class="code1">&lt;td&gt;odkaz5&lt;/td&gt;</code><br>
  360. <code class="code1">&lt;/tr&gt;</code><br>
  361. <code class="code1">&lt;/table&gt;</code><br>
  362. <b><code class="code1" style="color:yellow;">
  363. &lt;div&nbsp;class=&rdquo;obsah&rdquo;&gt;&lt;/div&gt;
  364. </code></b><br><!-- obsah tag-->
  365. <code class="code1">&lt;/div&gt;</code><br><!-- konec obalovacího divu -->
  366. <code class="code1">&lt;/body&gt;</code><br>
  367. <hr class="bottomblok">
  368. <br>
  369. <p class="poznamka">
  370. <i><b><u>POZNÁMKA:</u></b><br><br>V některých případech je dobré obalit si obsahový div, vnořením do dalšího (<code class="code2">&lt;div class="obalobsahu"&gt;&lt;div class="obsah"&gt;&lt;/div&gt;&lt;/div&gt;</code>). Nutné to však není, ale časem, když budete s divy pracovat, zjistíte, že tento způsob nabízí spoustu jiných možností, jak nakládat s obsahovým divem. Na této stránce je použitý obsahový div, který jsem vnořil do dalších dvou, kterým jsem nastavil různou barvu okrajů. Výsledek je patrný na okrajích stránky v podobě barevně stupňovaného okraje.</i><br><br></p>
  371. <br><br>
  372. <div class="obs_blok">
  373. <h3 id="s2.5"><b>Patička Stránky - Footer</b>
  374. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  375. <hr class="top">
  376. <p>
  377. Další a poslední částí naší stránky bude <b>"patička/footer"</b>. Patička html stránky mívá nejčastěji informativní charakter. Obvykle v ní najdete odkazy na <b>RSS</b> zprávy, datum zprovoznění stránky/webu, autora kódu, E-mail na kontaktní osobu/webdesignera, značky o validitě CSS a HTML, různé pageranky a počítadla návštěv a podobně. My se tímto nebudeme nějak zvlášť zabývat, bude jen na vás, čím patičku dokumentu obohatíte. Patička/footer bude umístěna na konci dokumentu, ale stále se bude nacházet v obalovacím divu.</p><br>
  378. </div>
  379. <br>
  380. <p class="popis">Zápis tedy bude vypadat takto&nbsp;:</p>
  381. <br>
  382. <hr class="topblok">
  383. <code class="code1" style="color:yellow;">
  384. &lt;div&nbsp;class=&rdquo;foot&rdquo;&gt;&lt;/div&gt;</code><br>
  385. <hr class="bottomblok">
  386. <br>
  387. <p class="popis">A v samotném kódu pak takto&nbsp;:</p>
  388. <br>
  389. <hr class="topblok">
  390. <code class="code1">&lt;body&gt;</code><br>
  391. <code class="code1">&lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;</code><br>
  392. <code class="code1">&lt;div&nbsp;class=&rdquo;head&rdquo;&gt;&lt;/div&gt;</code>
  393. <br><!-- head tag-->
  394. <b><code class="code1">&lt;table&nbsp;class=&rdquo;menu&rdquo;&gt;</code><br>
  395. <code class="code1">&lt;tr&gt;</code><br>
  396. <code class="code1">&lt;td&gt;odkaz1&lt;/td&gt;</code><br>
  397. <code class="code1">&lt;td&gt;odkaz2&lt;/td&gt;</code><br>
  398. <code class="code1">&lt;td&gt;odkaz3&lt;/td&gt;</code><br>
  399. <code class="code1">&lt;td&gt;odkaz4&lt;/td&gt;</code><br>
  400. <code class="code1">&lt;td&gt;odkaz5&lt;/td&gt;</code><br>
  401. <code class="code1">&lt;/tr&gt;</code><br>
  402. <code class="code1">&lt;/table&gt;</code></b><br>
  403. <code class="code1">&lt;div&nbsp;class=&rdquo;obsah&rdquo;&gt;&lt;/div&gt;</code><br><!-- obsah tag-->
  404. <code class="code1" style="color:yellow;">
  405. <b>&lt;div&nbsp;class=&rdquo;foot&rdquo;&gt;&lt;/div&gt;</b></code><br><!-- patka tag-->
  406. <code class="code1">&lt;/div&gt;</code><br>
  407. <!-- konec obalovacího divu -->
  408. <code class="code1">&lt;/body&gt;</code><br>
  409. <hr class="bottomblok">
  410. <br><br>
  411. <div class="obs_blok">
  412. <h3>Shrnutí</h3>
  413. <hr class="top"><p>
  414. Pro pořádek vypíši kód tak aby barevně vyjádřil všechny prvky použité v <b>HTML</b> zápisu v dokumentu <b>index.html</b>.</p>
  415. </div>
  416. <br>
  417. <hr class="topblok">
  418. <b>
  419. <code class="code1" style="color:#fff;">
  420. &lt;body&gt;
  421. </code>
  422. </b>
  423. <br>
  424. <b>
  425. <code class="code1" style="color:yellow;">
  426. &lt;div&nbsp;class=&rdquo;obal&rdquo;&gt;
  427. </code>&nbsp;
  428. </b>
  429. <code class="code2">
  430. .........................................................&nbsp;Toto je začátek "obalovacího" divu.
  431. </code><!-- obal tag-->
  432. <br>
  433. <b>
  434. <code class="code1" style="color:red;">
  435. &lt;div&nbsp;class=&rdquo;head&rdquo;&gt;&lt;/div&gt;
  436. </code>&nbsp;
  437. </b>
  438. <code class="code2">
  439. ...................................................&nbsp;Toto je div "head".</code> <!-- head tag-->
  440. <br>
  441. <b>
  442. <code class="code1" style="color:azure;">
  443. &lt;table&nbsp;class=&rdquo;menu&rdquo;&gt;&lt;/table&gt;
  444. </code>&nbsp;
  445. </b>
  446. <code class="code2">
  447. ...............................................&nbsp;Toto je tabulka s navigací "menu".</code> <!-- head tag-->
  448. <br>
  449. <b>
  450. <code class="code1" style="color:blue;">
  451. &lt;div&nbsp;class=&rdquo;obsah&rdquo;&gt;&lt;/div&gt;
  452. </code>&nbsp;
  453. </b>
  454. <code class="code2">
  455. ..................................................&nbsp;Toto je "obsahový" div.</code><!-- obsah tag-->
  456. <br>
  457. <b>
  458. <code class="code1" style="color:green;">
  459. &lt;div&nbsp;class=&rdquo;foot&rdquo;&gt;&lt;/div&gt;
  460. </code>&nbsp;
  461. </b>
  462. <code class="code2">
  463. ...................................................&nbsp;Toto je poslední div "foot/patka".</code><!-- patka tag-->
  464. <br>
  465. <b>
  466. <code class="code1" style="color:yellow;">
  467. &lt;/div&gt;
  468. </code>&nbsp;
  469. </b>
  470. <code class="code2">
  471. .....................................................................&nbsp;Toto je konec "obalovacího" divu.</code><!-- konec obalovacího divu -->
  472. <br>
  473. <b>
  474. <code class="code1" style="color:#fff;">
  475. &lt;/body&gt;
  476. </code>
  477. </b>
  478. <br>
  479. <hr class="bottomblok">
  480. <br><br>
  481. <div class="obs_blok">
  482. <h3 id="s2.6"><b>Zakončení</b>
  483. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  484. <hr class="top"><p>
  485. Toto je základní schéma <a href="/php/html_css/jednoducha_www/examples/html/ex3-index.html" target="_blank" title="odkaz na ukázku číslo 3" ><b>stránky</b></a>. Na stránce zatím není nic vidět, kromě textu v menu, to je totiž jediný čitelný obsah. Až prvkům dodáme jednotlivý obsah (text, obrázky), situace se změní. Pokud však chcete, můžete si text doplňovat během tvoření.</p>
  486. </div>
  487. <br>
  488. <p class="popis"><i>V dalších částech tohoto návodu se budeme věnovat každému prvku kódu zvlášť. Budeme <a href="#s3.0"><b>stylovat</b></a> pomocí <b>CSS</b>.</i></p><br><br><div class="obs_blok">
  489. <h1 id="s3.0">Stylování a pozicování pomocí CSS
  490. <span class="domu"><a href="#jednoducha_www">
  491. <img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a>
  492. </span>
  493. </h1>
  494. <hr class="top"><p>
  495. V této části si jednotlivé elementy nastylujeme pomocí <b>CSS</b> (
  496. <span style="color:white;">C</span>ascadig&nbsp;<span style="color:white;">S</span>tyle&nbsp;<span style="color:white;">S</span>heet). Pro možnost stylování bude nutné v <b>PSPAD</b>u spustit nový soubor typu <b>"Cascading Style Sheet"</b> a uložit ho na server jako <b>"style.css"</b>. Poté je třeba do hlavičky našeho <b>indexu</b> vepsat <b>"metatag"</b>, který zajistí, že se server na náš <b>css</b> soubor připojí a úspěšně jej aplikuje.
  497. </p>
  498. </div>
  499. <br>
  500. <p class="popis">Otevřeme si <b>index.html</b> a kamkoliv mezi tagy <b>&lt;head&gt;</b> a <b>&lt;/head&gt;</b> nacházejícími se v hlavičce napíšeme následující tag&nbsp;:
  501. </p>
  502. <br>
  503. <hr class="topblok">
  504. <code class="code1">&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  505. </code>
  506. <br>
  507. <hr class="bottomblok">
  508. <br>
  509. <p class="popis">Hlavička indexu bude vypadat následovně&nbsp;:
  510. </p>
  511. <br>
  512. <hr class="topblok">
  513. <code class="code1">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  514. </code>
  515. <br>
  516. <code class="code1">&lt;html&gt;
  517. </code>
  518. <br>
  519. <code class="code1">&lt;head&gt;
  520. </code>
  521. <br>
  522. <code class="code1">&lt;meta http-equiv="content-type" content="text/html; charset=windows-1250"&gt;
  523. </code>
  524. <br>
  525. <code class="code1">&lt;meta name="generator" content="PSPad editor, www.pspad.com"&gt;
  526. </code>
  527. <br>
  528. <code class="code1">&lt;title&gt;Zde bude název vaší stránky&lt;/title&gt;
  529. </code>
  530. <br>
  531. <code class="code1">
  532. <span style="color:yellow;">&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  533. </span>
  534. </code>
  535. <br>
  536. <code class="code1">&lt;/head&gt;
  537. </code>
  538. <br>
  539. <code class="code1">&lt;body&gt;
  540. </code>
  541. <br>
  542. <code class="code1">&lt;/body&gt;
  543. </code>
  544. <br>
  545. <code class="code1">&lt;/html&gt;
  546. </code>
  547. <br>
  548. <hr class="bottomblok">
  549. <br>
  550. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  551. <br>Tímto jsme serveru napověděli, co a kde má hledat, aby byli naše prvky ve stránce vykresleny pomocí <b>CSS</b>. Je nutné, aby soubor css nebyl umístěn uvnitř nějaké složky, server by ho nenašel. Pokud trváte na "schování" css souboru do nějaké složky, např. "Styly", je nutné změnit i cestu k souboru v metatagu. Nahrazením odkazové cesty
  552. <code class="code2">href="style.css"
  553. </code> za
  554. <code class="code2">href="Styly/style.css"
  555. </code> tuto cestu zpřístupníte.</i>
  556. </p>
  557. <br>
  558. <p class="popis">Prozatím si pro pořádek uděláme malou osnovu, která bude určovat, jaké vlastnosti a v jakém pořadí budeme aplikovat na dané prvky, v tomto případě pro
  559. <code class="code2">&lt;html&gt;
  560. </code>.
  561. </p>
  562. <br>
  563. <hr class="topblok">
  564. <code class="code1">
  565. <span style="color:#fff"><b>width</b>
  566. </span>
  567. <span style="color:#000;"> - šířka
  568. </span>
  569. </code>
  570. <br>
  571. <code class="code1">
  572. <span style="color:#fff"><b>height</b>
  573. </span>
  574. <span style="color:#000;"> - výška
  575. </span>
  576. </code>
  577. <br>
  578. <code class="code1">
  579. <span style="color:#fff"><b>border</b>
  580. </span>
  581. <span style="color:#000;"> - okraj
  582. </span>
  583. </code>
  584. <br>
  585. <code class="code1">
  586. <span style="color:#fff"><b>margin</b>
  587. </span>
  588. <span style="color:#000;"> - vnější okraj
  589. </span>
  590. </code>
  591. <br>
  592. <code class="code1">
  593. <span style="color:#fff"><b>padding</b>
  594. </span>
  595. <span style="color:#000;"> - vnitřní okraj
  596. </span>
  597. </code>
  598. <br>
  599. <code class="code1">
  600. <span style="color:#fff"><b>background</b>
  601. </span>
  602. <span style="color:#000;"> - barva pozadí
  603. </span>
  604. </code>
  605. <br>
  606. <code class="code1">
  607. <span style="color:#fff"><b>color</b>
  608. </span>
  609. <span style="color:#000;"> - barva textu
  610. </span>
  611. </code>
  612. <br>
  613. <hr class="bottomblok">
  614. <br>
  615. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  616. <br>Je možné, že některé vlastnosti nebudeme muset vůbec použít, ale raději je tady vypíši. <b>Height</b> a <b>width</b> budou nespíše ty nejčastěji používané, jak v tomto návodu, tak ve vašem příštím zkoušení.</i>
  617. </p>
  618. <br>
  619. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  620. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  621. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  622. <br>
  623. <div class="obs_blok">
  624. <h3 id="s3.1">Pozice v prohlížeči
  625. <span class="domu">
  626. <a href="#jednoducha_www">
  627. <img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a>
  628. </span></h3>
  629. <hr class="top"><p>
  630. Jako první je potřeba si určit, kde na obrazovce monitoru se má obsah naší stránky vykreslovat. Existuje spousta variant. Já budu pro tento případ používat centrování na střed. Pak obalovacímu divu určíme velikost a přidáme mu okraj o velikosti jednoho pixelu (to kvůli lepší orientaci na stránce).
  631. </p><p>Jako první tedy zarovnáme stránku, pomocí selektoru "<code class="code2">*</code>". Zde bych jen podotkl, že pomocí tohoto selektoru nastavíte vlastnosti naprosto všem elementům na stránce, proto je lepší to v tomto případě s vlastnostmi moc nepřehánět.
  632. </p></div>
  633. <br>
  634. <p class="popis">Do <b>style.css</b> si napíšeme tento první styl&nbsp;:
  635. </p>
  636. <br>
  637. <hr class="topblok">
  638. <code class="code1">*{
  639. </code>
  640. <br>
  641. <code class="code1">margin:0px auto;
  642. </code>
  643. <br>
  644. <code class="code1">padding:0px auto;
  645. </code>
  646. <br>
  647. <code class="code1">border:0px;
  648. </code>
  649. <br>
  650. <code class="code1">}
  651. </code>
  652. <br>
  653. <hr class="bottomblok">
  654. <br>
  655. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  656. <br>V zápisu je použito <b>"auto"</b>, jedná se o relativní určení - automaticky dopočítá okraj. Pokud je definováno <b>"0px"</b> okraj se dopočítá rovnoměrně vůči
  657. <code class="code2">&lt;body&gt;
  658. </code> resp. obalovacímu divu, který bude mít pevně danou šířku. Zápis v souboru <b>"style.css"</b> uložte na server. Soubor nechte v PSPADu ještě otevřený pro další práci.</i>
  659. </p>
  660. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  661. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  662. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  663. <br>
  664. <div class="obs_blok">
  665. <h3 id="s3.2">Začínáme stylovat - ŠÍŘKA/WIDTH
  666. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  667. <hr class="top"><p>
  668. Jako první jsme si určili šířku. Tu můžeme definovat buď v konkrétních valutách (obvykle jsou to pixely - <strong>"px"</strong>), nebo relativně (jedná se o procenta<strong> "%"</strong>). V případě stylování šířky
  669. <code class="code2">&lt;html&gt;</code> však použijeme procenta. Je to z toho důvodu, že nikdo nemá stejný monitor, proto využijeme možnosti zadat relativní velikost.
  670. </p>
  671. </div>
  672. <br>
  673. <p class="popis">Náš první zápis pro
  674. <code class="code2">&lt;html&gt;
  675. </code> v souboru stylu (<b>style.css</b>) bude tento&nbsp;:
  676. </p>
  677. <br>
  678. <hr class="topblok">
  679. <code class="code1"><b>html</b>{
  680. </code>
  681. <br>
  682. <code class="code1" style="color:yellow;">width:100%;
  683. </code>
  684. <br>
  685. <code class="code1">}
  686. </code>
  687. <br>
  688. <hr class="bottomblok">
  689. <br>
  690. <p class="popis">- tímto jsme určili, že náš "html prostor" bude stoprocentně rozšířen.
  691. </p>
  692. <br>
  693. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  694. <br>Vřele doporučuji, používat řádkové poznámky pro lepší orientaci ve stylopisu. Ponámku uděláte jednoduše, je uzavřena mezi znaky "<b>/*</b>" a "<b>*/</b>", doporučuji vám označovat si takto každý element ve styloppisu, např takto: " <b>/* toto bude poznámka pro obsahový div */ </b>" . Počet poznámek není nijak omezen. </i>
  695. </p>
  696. <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
  697. <br>
  698. <div class="obs_blok">
  699. <h3 id="s3.3"><b>Začínáme stylovat - VÝŠKA/HEIGHT</b>
  700. <span class="domu">
  701. <a href="#jednoducha_www">
  702. <img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a>
  703. </span></h3>
  704. <hr class="top"><p>Jako druhou vlastnost jsme si určili výšku. Tu můžeme také definovat buď v konkrétních nebo relativních hodnotách. V případě stylování výšky
  705. <code class="code2">&lt;html&gt;
  706. </code> však opět použijeme procenta.
  707. </p>
  708. </div>
  709. <br>
  710. <p class="popis">Dalším zápisem určíme stoprocentní výšku&nbsp;:
  711. </p>
  712. <br>
  713. <hr class="topblok">
  714. <code class="code1"><b>html</b>{
  715. </code>
  716. <br>
  717. <code class="code1">width:100%;
  718. </code>
  719. <br>
  720. <code class="code1" style="color:yellow;">height:100%;
  721. </code>
  722. <br>
  723. <code class="code1">}
  724. </code>
  725. <br>
  726. <hr class="bottomblok">
  727. <br>
  728. <p class="popis">- tímto jsme určili, že náš "html prostor" bude stoprocentně vysoký.
  729. </p>
  730. <br>
  731. <div class="obs_blok">
  732. <h3 id="s3.4"><b>Začínáme stylovat - OKRAJ/BORDER</b>
  733. <span class="domu">
  734. <a href="#jednoducha_www">
  735. <img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a>
  736. </span></h3>
  737. <hr class="top"><p>Jelikož je potřeba si kvůli orientaci stránku opticky rozlišit, uděláme následující krok. Obalovacímu divu nastavíme šířku 800px (pixelů), výšku 500px a červený okraj o velikosti 1px. Tím se nám na čistě bílé stránce zobrazí červeně lemovaný obdélník, který bude definovat oblast Obalovacího divu a tedy prostor, ve kterém se nachází všechny ostatní prvky (head,menu,obsah a patka).
  738. </p></div>
  739. <br>
  740. <p class="popis">Tento zápis zvýrazní oblast Obalovacího divu&nbsp;:
  741. </p>
  742. <br>
  743. <hr class="topblok">
  744. <code class="code1"><b>.obal</b>{
  745. </code>
  746. <br>
  747. <code class="code1">width: 800px;
  748. </code>
  749. <br>
  750. <code class="code1">height: 500px;
  751. </code>
  752. <br>
  753. <code class="code1">border: 1px red;
  754. </code>
  755. <br>
  756. <code class="code1">}
  757. </code>
  758. <br>
  759. <hr class="bottomblok">
  760. <br>
  761. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  762. <br>V zápisu je použita tečka před <b>"obal"</b>, je to proto, že "
  763. <code class="code2">.
  764. </code>" je symbol, který v kaskádových stylech definuje třídu (class), kdyby jsme symbol nenapsali, vlastnost by se neaplikovala. Tento symbol budem v css psát před všechny třídy naší stránky, tedy i před <b>"head, obsah i foot"</b>.</i>
  765. </p>
  766. <br>
  767. <p class="popis">Soubor style.css by měl nyní vypadat takto&nbsp;:
  768. </p>
  769. <br>
  770. <hr class="topblok">
  771. <code class="code1">*{
  772. </code>
  773. <br>
  774. <code class="code1">margin:0px auto;
  775. </code>
  776. <br>
  777. <code class="code1">padding:0px auto;
  778. </code>
  779. <br>
  780. <code class="code1">border:0px;
  781. </code>
  782. <br>
  783. <code class="code1">}
  784. </code>
  785. <br>
  786. <code class="code1">/* CSS styl pro HTML */
  787. </code>
  788. <br>
  789. <code class="code1">html{
  790. </code>
  791. <br>
  792. <code class="code1">width:100%;
  793. </code>
  794. <br>
  795. <code class="code1">height:100%;
  796. </code>
  797. <br>
  798. <code class="code1">}
  799. </code>
  800. <br>
  801. <code class="code1">/* CSS styl pro OBAL */
  802. </code>
  803. <br>
  804. <code class="code1">.obal{
  805. </code>
  806. <br>
  807. <code class="code1">width:800px;
  808. </code>
  809. <br>
  810. <code class="code1">height:500px;
  811. </code>
  812. <br>
  813. <code class="code1">border:1px solid red;
  814. </code>
  815. <br>
  816. <code class="code1">}
  817. </code>
  818. <br>
  819. <hr class="bottomblok">
  820. <br>
  821. <p class="poznamka"><i><b><u>POZNÁMKA:</u></b>
  822. <br>Soubor uložte na server a v prohlížeči si zadejte adresu vaší stránky. Měli byste vidět, že uprostřed monitoru se vykresluje červený obdélník, který demonstruje okraj obalového divu o šířce 800px.
  823. <a href="php/htmlacss/examples/html/ex4-css1.html" target="new" title="odkaz na ukázku číslo 4"><b>Zobrazit ukázku</b></a>. V ukázce jste viděli obdélník, který definuje pevnou velikost obalovacího divu a zároveň jste si mohli všimnout, že se na střed zarovnal i obsah menu. To zajistil "hvězdičkový" selektor. Takto se nyní budou chovat všechny prvky stránky, dokud jim neurčíme jinak.</i>
  824. </p>
  825. <br>
  826. <p class="popis"><i>V další části článku nastavíme vlastnost <b>width</b> a <b>height</b> zbývajícím částem naší stránky a jednoduchou nabídku vytvořenou pomocí tabulky nastylujeme do finální podoby.
  827. <a href="#3.5">Pokračovat</a></i></p><br><br>
  828. <div class="obs_blok">
  829. <h1 id="s3.5"><b>Stylování a pozicování pomocí CSS</b> - Druhá část
  830. <span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h1>
  831. <hr class="top"><p>
  832. Minule jsme si nastavili <strong>CSS styly</strong> pro <b>html</b> a <b>obalovací div</b>. V této části se budeme věnovat zbylým částem stránky. Pro pořádek se budeme držet posloupnosti zadané ve struktuře kódu stránky. Začneme divem head a budeme pokračovat až k patičce. V následujících částech se nebudu pozastavovat u jednotlivých částech css stylů, ale ke každému divu vypíšu jeho konkrétní vlastnosti i s jejich hodnoty, případné nesrovnalosti se pokusím objasnit v poznámkách.</p>
  833. </div>
  834. <br>
  835. <div class="obs_blok">
  836. <h3 id="s3.6"><b>CSS STYL - Div Head</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  837. <hr class="top"><p>
  838. Popravdě, nejsem si jist, zda existuje nějaká standardní velikost pro hlavičku. Mě osobně dimenzování hlavičky moc netrápí. Obvykle nastavím výšku v průměru 150-250px / automatickou velikost pro šířku. Zkrátka, měl by to být příjemně působící obdélník. To k výšce a šířce.
  839. </p><p><code class="code2">width:auto;height:150px;</code></p>
  840. <p>
  841. Jako další bychom si mohli určit okraj. Zapíšeme mu tyto hodnoty, "velikost-typ-barvu", ale velikost bude nulová. Další <b>"okraje"</b> budou vnější a vnitřní prostor okolo divu. Ty budou mít také nulovou hodnotu (nejsou v tomto příkladu nutné).
  842. </p><p><code class="code2">margin:0px;padding:0px;border:0px solid (souvislá linka) red;</code></p>
  843. <p>
  844. Následně si hlavičku obarvíme, a tím jí i zvýrazníme na samotné stránce. V <b>PSPadu</b> si v horních ikonách (hned pod souborovou nabídkou), najděte ikonku s barevnými kostičkami (vyvoláte stiskem <b>"ALT+C"</b>). Kliknětě na vámi vybranou barvu a přepište si vedle vygenerovaný hexakód. Jako pozadí bysme mohli použít i obrázek, ale ten také není nutný.
  845. </p><p><code class="code2">background:#ffcc00;</code></p>
  846. <p>
  847. Barvu textu nastavovat nebudeme.
  848. </p>
  849. </div>
  850. <br>
  851. <p class="popis">Konečný styl pro div head :</p><br>
  852. <hr class="topblok">
  853. <code class="code1">.head{ </code><br>
  854. <code class="code1">width:auto;</code><br>
  855. <code class="code1">height:150px;</code><br>
  856. <code class="code1">margin:0px;</code><br>
  857. <code class="code1">padding:0px;</code><br>
  858. <code class="code1">border:0px solid red;</code><br>
  859. <code class="code1">background:#ffcc00;</code><br>
  860. <code class="code1">}</code><br>
  861. <hr class="bottomblok"><br>
  862. <p class="poznamka">
  863. <i><b><u>POZNÁMKA:</u></b><br>
  864. U vlastností <b>width</b> jsme použili hodnotu <b>"auto"</b>která zajistí správné vyplnění hlavičky na šířku. U vlastností <b>margin</b>, <b>padding</b>, <b>border</b> jsme použili nulové hodnoty, protože nepotřebujeme složitě definovat prostor, ten bude dostatečně vykreslen zabarvením pozadí. Hodnotu <b>"auto"</b> jsem zvolil proto, že může nastat případ, kdy budete chtít dodat padding kvůli odsazení a tato hodnota se přizpůsobí.
  865. </i>
  866. </p>
  867. <br>
  868. <br>
  869. <div class="obs_blok">
  870. <h3 id="s3.7"><b>CSS STYL - Div Obsah</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  871. <hr class="top"><p>
  872. Nskýtá se více možností, jak můžete pracovat s obsahem vaší stránky. Záleží, jestli budete chtít mít stránku fixní, s pevnými rozměry a s obsahem tzv. rolovat, nebo budete-li mít nastavenou <b>auto</b>matickou hodnotu výšku a obsahový div se bude přizpůsobovat samotnému obsahu. Osobně preferuji druhou variantu. Obvykle nastavím výšku na <b>"auto"</b> a šířku (tak jako u hlavičky) na hodnotu <b>"auto"</b>. Pokud však víte, že stránka bude mít minimální obsah, můžete s klidem použít variantu s pevně danou velikostí.
  873. </p>
  874. <p> <code class="code2">width:auto;height:auto;</code></p>
  875. <p>
  876. Zde si vlastnoti okrajů buď zkopírujeme od <b>"head"</b>, nebo je nevyužijeme vůbec. Nulový okraj, není vlastně žádný, proto je zbytečné psát ho i v tomto případě. Já je však zkopíruji, je lepší, když jsou po ruce. Jediným okrajem, kterému určíme hodnotu je <b>"padding"</b>, hodnotu nastavíme na <b>"10px"</b>. Způsobí to odražení textů od okrajů obsahového bloku.</p>
  877. <p><code class="code2">margin:0px;padding:10px;border:0px solid (souvislá linka) red;</code></p>
  878. <p>
  879. Následně si obarvíme <b>"obsahovou"</b> část tak, abychom ji mohli odlišit od zvýrazněné hlavičky. <b>"ALT+C"</b>, klikneme na barvu a přepíšme si hexakód. Jako pozadí bysme mohli použít i obrázek, ale ten do obsahové části nedoporučuji, většinou spíš dělají zle a zhoršují čitelnost textu.
  880. </p>
  881. <p><code class="code2">background:#66cc00;</code></p>
  882. <p>
  883. Barvu textu nastavovat nebudeme.</p><p>
  884. <i>- Asi vás teď napadá, proč jsem vynechal styl pro <b>navigaci</b>. Je to proto, že styl pro navigaci bude trošku obsáhlejší a chci se mu věnovat v příští kapitole věnované speciálně menu.</i>
  885. </p></div>
  886. <br>
  887. <p class="popis">Konečný styl pro div obsah :</p><br>
  888. <hr class="topblok">
  889. <code class="code1">.obsah{ </code><br>
  890. <code class="code1">width:auto;</code><br>
  891. <code class="code1">height:auto;</code><br>
  892. <code class="code1">margin:0px;</code><br>
  893. <code class="code1">padding:10px;</code><br>
  894. <code class="code1">border:0px solid red;</code><br>
  895. <code class="code1">background:#66cc00;</code><br>
  896. <code class="code1">}</code><br>
  897. <hr class="bottomblok"><br>
  898. <br>
  899. <div class="obs_blok">
  900. <h3 id="s3.8"><b>CSS STYL - Div Foot</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  901. <hr class="top"><p>
  902. Patička stránky může mít různou velikost. Záleží na webu, na kterém se nacházía jak je na webu zaplněna/využita. Výšku nastavuji na <b>"auto"</b>, nemám do ní co dávat, a pokud do ní něco dávám, tak obvykle jednoduchý text, který je zároveň odkazem na můj osobní web. Šířku nastavíme taktéž na <b>"auto"</b>.
  903. </p>
  904. <p><code class="code2">width:auto;height:auto;</code></p>
  905. <p>
  906. Jelikož hodnota vlastnosti <b>"height"</b> je nastavena na <b>"auto"</b>, patička by se kolem textu obalila, proto je nutné, stejně jako u <b>"obsahu"</b>, nastavit vnitřní okraj na hodnotu <b>"10px"</b>, ostatní vlastnosti opět na nule.</p>
  907. <p><code class="code2">margin:0px;padding:10px;border:0px solid (souvislá linka) red;</code></p>
  908. <p>
  909. Zbývá si obarvit <b>"obsahovou"</b> část. </p>
  910. <p><code class="code2">background:#66cc00;</code></p>
  911. <p>
  912. Barvu textu nastavovat nebudeme.
  913. </p></div>
  914. <br>
  915. <p class="popis">Konečný styl pro div foot :</p><br>
  916. <hr class="topblok">
  917. <code class="code1">.foot{ </code><br>
  918. <code class="code1">width:auto;</code><br>
  919. <code class="code1">height:auto;</code><br>
  920. <code class="code1">margin:0px;</code><br>
  921. <code class="code1">padding:10px;</code><br>
  922. <code class="code1">border:0px solid red;</code><br>
  923. <code class="code1">background:#66cc00;</code><br>
  924. <code class="code1">}</code><br>
  925. <hr class="bottomblok"><br>
  926. <br>
  927. <div class="obs_blok">
  928. <h3 id="s3.9"><b>CSS STYL - Dvě možnosti zápisu</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  929. <hr class="top"><p>Pro použití na stránce jsou vhodné oba zápisy, je jen na vás, který způsob použijete, oba jsou vpodstatě stejné. Jen v kratší verzi jsou vynechány vlastnosti s nulovou hodnotou.</p></div>
  930. <br>
  931. <hr class="topblok">
  932. <table class="css">
  933. <tr>
  934. <td>Varianta dlouhého zápisu</td>
  935. <td>Varianta krátkého zápisu</td></tr>
  936. <tr><td><code class="code2">.head{ </code></td>
  937. <td><code class="code2">.head{ </code></td></tr>
  938. <tr><td><code class="code2">width:auto;</code></td>
  939. <td><code class="code2">width:auto;</code></td></tr>
  940. <tr><td><code class="code2">height:150px;</code></td>
  941. <td><code class="code2">height:150px;</code></td></tr>
  942. <tr><td><code class="code2">margin:0px;</code></td>
  943. <td><code class="code2">background:#66cc00;</code></td></tr>
  944. <tr><td><code class="code2">padding:0px;</code></td>
  945. <td><code class="code2">}</code></td></tr>
  946. <tr><td><code class="code2">border:0px solid red;</code></td>
  947. <td><code class="code2">.obsah{ </code></td></tr>
  948. <tr><td><code class="code2">background:#66cc00;</code></td>
  949. <td><code class="code2">width:auto;</code></td></tr>
  950. <tr><td><code class="code2">}</code></td>
  951. <td><code class="code2">height:auto;</code></td></tr>
  952. <tr><td><code class="code2">.obsah{ </code></td>
  953. <td><code class="code2">padding:10px;</code></td></tr>
  954. <tr><td><code class="code2">width:auto;</code></td>
  955. <td><code class="code2">background:#66cc00;</code></td></tr>
  956. <tr><td><code class="code2">height:auto;</code></td>
  957. <td><code class="code2">}</code></td></tr>
  958. <tr><td><code class="code2">margin:0px;</code></td>
  959. <td><code class="code2">.foot{ </code></td></tr>
  960. <tr><td><code class="code2">padding:10px;</code></td>
  961. <td><code class="code2">width:auto;</code></td></tr>
  962. <tr><td><code class="code2">border:0px solid red;</code></td>
  963. <td><code class="code2">height:auto;</code></td></tr>
  964. <tr><td><code class="code2">background:#66cc00;</code></td>
  965. <td><code class="code2">padding:10px;</code></td></tr>
  966. <tr><td><code class="code2">}</code></td>
  967. <td><code class="code2">background:#66cc00;</code></td></tr>
  968. <tr><td><code class="code2">.foot{ </code></td>
  969. <td><code class="code2">}</code></td></tr>
  970. <tr><td><code class="code2">width:auto;</code></td>
  971. <td></td></tr>
  972. <tr><td><code class="code2">height:auto;</code></td>
  973. <td></td></tr>
  974. <tr><td><code class="code2">margin:0px;</code></td>
  975. <td></td></tr>
  976. <tr><td><code class="code2">padding:10px;</code></td>
  977. <td></td></tr>
  978. <tr><td><code class="code2">border:0px solid red;</code></td>
  979. <td></td></tr>
  980. <tr><td><code class="code2">background:#66cc00;</code></td><td></td></tr>
  981. <tr><td><code class="code2">}</code></td><td></td></tr>
  982. </table>
  983. <hr class="bottomblok"><br>
  984. <br>
  985. <p class="poznamka">
  986. <i><b><u>POZNÁMKA:</u></b><br>
  987. Pro náš příklad doporučuji použít kratší variantu, a to hned ze dvou důvodů. Za prvé, pokud jste začátečníci, bude pro vás mnohem jednodužší a pohodlnější orientovat se v menším množství kódu, a zadruhé vlastnosti s nulovou hodnotou, které jsme v zápisu vynechali si můžeme kdykoliv dopnit. Zároveň doporočuji ze zápisu smazat i ostatní nulové vlastnosti z předešlého článku.
  988. </i>
  989. </p>
  990. <br>
  991. <br>
  992. <div class="obs_blok">
  993. <h3 id="s3.10"><b>CSS STYL</b> - Finální podoba v souboru <b>"style.css"</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  994. <hr class="top">
  995. <p>Nyní si zobrazíme finální podobu našeho stylesheetu. Vlastnosti s nulovou hodnotou jsem z ukázky odebral </p></div>
  996. <br>
  997. <p class="popis">Finální podoba v souboru <b>"style.css"</b>&nbsp;:</p><br>
  998. <hr class="topblok">
  999. <code class="code1">*{ </code><br>
  1000. <code class="code1">margin:0px auto;</code><br>
  1001. <code class="code1">padding:0px auto;</code><br>
  1002. <code class="code1">}</code><br>
  1003. <code class="code1">/* CSS styl pro HTML */</code><br>
  1004. <code class="code1">html{</code><br>
  1005. <code class="code1">width:100%;</code><br>
  1006. <code class="code1">height:100%;</code><br>
  1007. <code class="code1">}</code><br>
  1008. <code class="code1">/* CSS styl pro OBAL */</code><br>
  1009. <code class="code1">.obal{</code><br>
  1010. <code class="code1">width:800px;</code><br>
  1011. <code class="code1">height:500px;</code><br>
  1012. <code class="code1">border:1px solid red;</code><br>
  1013. <code class="code1">}</code><br>
  1014. <code class="code1">/* CSS styl pro HEAD */</code><br>
  1015. <code class="code1">.head{ </code><br>
  1016. <code class="code1">width:auto;</code><br>
  1017. <code class="code1">height:150px;</code><br>
  1018. <code class="code1">background:#ffcc00;</code><br>
  1019. <code class="code1">}</code><br>
  1020. <code class="code1">/* CSS styl pro OBSAH */</code><br>
  1021. <code class="code1">.obsah{ </code><br>
  1022. <code class="code1">width:auto;</code><br>
  1023. <code class="code1">height:auto;</code><br>
  1024. <code class="code1">padding:10px;</code><br>
  1025. <code class="code1">background:#66cc00;</code><br>
  1026. <code class="code1">}</code><br>
  1027. <code class="code1">/* CSS styl pro FOOT */</code><br>
  1028. <code class="code1">.foot{ </code><br>
  1029. <code class="code1">width:auto;</code><br>
  1030. <code class="code1">height:auto;</code><br>
  1031. <code class="code1">padding:10px;</code><br>
  1032. <code class="code1">background:#66cc00;</code><br>
  1033. <code class="code1">}</code><br>
  1034. <hr class="bottomblok"><br>
  1035. <p class="popis"><a href="http://wikman2.wz.cz/php/htmlacss/examples/html/ex5-css2.html" target="_blank" title="odkaz na ukázku číslo 5"><b>Zobrazit ukázku</b></a></p>
  1036. <br>
  1037. <p class="poznamka">
  1038. <i><b><u>POZNÁMKA:</u></b><br>
  1039. V ukázce je vidět žlutý obdélník v horní části stránky, ten reprezentuje hlavičku. Pod ní se nachází zatím nenastylované menu a pod ním jsou dva pruhy. Zelený pruh představuje obsahový div a žlutý patičku. jejich výška je 20px (padding:10px). Výšku 20ti pixelů mají proto, protože padding se aplikoval na všechny strany (levou, pravou, horní i dolní), tím pádem se nám horní okraj sečetl s dolním a vytvořil výšku 20px.</i></p>
  1040. <br>
  1041. <p class="popis"><i>Jak už jsem se zmínil výše, v příští části článku se budeme soustředit jen na stylování menu. Styly přiřadíme většině prvkům, které budou v tabulce obsaženy a texty "odkaz1" apod., změníme na funkční odkazy. To vše a další se naučíme v následujícím <a href="#4.0">pokračování</a></i></p><br><br><div class="obs_blok">
  1042. <h1 id="s4.0"><b>CSS STYL - Menu</b> - úprava html kódu<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h1>
  1043. <hr class="top"><p>
  1044. Nyní se budeme věnovat samotnému menu. Než však začneme se stylováním, bude třeba v tabulce vytvořit funkční odkazy. Já v našem příkladu nebudu používat odkazy na konkrétní cíle, jako je například tento <code class="code2">&lt;a href="http://nějaká stránka.cz"&gt;odkaz1&lt;/a&gt;</code>, ale místo adresy odkazu zadám pouze znak "#". Takže mnou vytvořený odkaz bude sice funkční, ale nebude nikam odkazovat/směřovat. Vy si pak můžete tento znak nahradit adresou, kterou byste v odkazu chtěli mít.<br>
  1045. </p>
  1046. </div>
  1047. <br>
  1048. <p class="popis">
  1049. Náš html kód, který máme v souboru <b>"index.html"</b> bude po správném upravení vypadat takto &nbsp;:
  1050. </p>
  1051. <br>
  1052. <hr class="topblok">
  1053. <code class="code1">&lt;table&nbsp;class="menu"&gt;</code><br>
  1054. <code class="code1">&lt;tr&gt;</code><br>
  1055. <code class="code1">&lt;td&gt;&lt;a href="#"&gt;odkaz1&lt;/a&gt;&lt;/td&gt;</code><br>
  1056. <code class="code1">&lt;td&gt;&lt;a href="#"&gt;odkaz2&lt;/a&gt;&lt;/td&gt;</code><br>
  1057. <code class="code1">&lt;td&gt;&lt;a href="#"&gt;odkaz3&lt;/a&gt;&lt;/td&gt;</code><br>
  1058. <code class="code1">&lt;td&gt;&lt;a href="#"&gt;odkaz4&lt;/a&gt;&lt;/td&gt;</code><br>
  1059. <code class="code1">&lt;td&gt;&lt;a href="#"&gt;odkaz5&lt;/a&gt;&lt;/td&gt;</code><br>
  1060. <code class="code1">&lt;/tr&gt;</code><br>
  1061. <code class="code1">&lt;/table&gt;</code><br>
  1062. <hr class="bottomblok">
  1063. <br>
  1064. <p class="popis">
  1065. Tímto jsme si vytvořili odkazy, které sice nikam neodkazují, ale pro naší práci je tento způsob zápisu postačující. Později budeme odkazy stylovat - konkrétně pomocí selectoru
  1066. <code class="code2">&lt;a&gt;</code>.
  1067. </p>
  1068. <br>
  1069. <br>
  1070. <div class="obs_blok">
  1071. <h3 id="s4.1"><b>CSS STYL - Menu</b> - &lt;table&gt;<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1072. <hr class="top"><p>
  1073. Nnejdří si nastylujeme samotnou tabulku a vlastnostem nastavíme následující hodnoty&nbsp;:<br><br>
  1074. <code class="code2">width:100%;</code><br>
  1075. - tabulka se roztáhne na celou šířku obalovacího divu<br>
  1076. <br>
  1077. <code class="code2">height:auto;</code><br>
  1078. - výška tabulky se zhora a zespod obalí kolem obsau její buňky, v našem případě okolo textu "ODKAZ"<br>
  1079. <br>
  1080. <code class="code2">text-align:center;</code><br>
  1081. - nová vlastnost <b>"text-align"</b> a její hodnota <b>"center"</b> nám zajistí, že vše co se v tabulce bude nacházet, se zarovná na střed.<br>
  1082. <br>
  1083. <code class="code2">border-collapse: collapse;</code><br>
  1084. - nová vlastnost <b>"border-collapse"</b> a její hodnota <b>"collapse"</b> nám zajistí, že všechen volný prostor v tabulce se odstraní.<br>
  1085. <br>
  1086. <code class="code2">background:#99ccff;</code><br>
  1087. - pro vizuální odlišení nastavíme barvu pozadí<br><br></p>
  1088. </div>
  1089. <br>
  1090. <p class="popis">
  1091. Kód pro Tabulku bude vypadat takto &nbsp;:</p>
  1092. <br>
  1093. <hr class="topblok">
  1094. <code class="code1">.menu {</code><br>
  1095. <code class="code1">width:100%;</code><br>
  1096. <code class="code1">height:auto;</code><br>
  1097. <code class="code1">border:1px solid black;</code><br>
  1098. <code class="code1">background:#99ccff;</code><br>
  1099. <code class="code1">text-align:center;</code><br>
  1100. <code class="code1">border-collapse: collapse;</code><br>
  1101. <code class="code1">}</code><br>
  1102. <hr class="bottomblok">
  1103. <br>
  1104. <br>
  1105. <br>
  1106. <div class="obs_blok">
  1107. <h3 id="s4.2"><b>CSS STYL - Menu</b> - &lt;tr&gt;<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1108. <hr class="top"><p>
  1109. Styl pro řádek tabulky, vlastnostem nastavíme následující hodnoty&nbsp;:
  1110. <br>
  1111. <br>
  1112. <code class="code2">width:100%;</code><br>
  1113. - řádek se roztáhne na celou šířku tabulky<br>
  1114. <br>
  1115. <code class="code2">height:100%;</code><br>
  1116. - výška řádku vyplní výšku tabulky<br>
  1117. <br>
  1118. <code class="code2">border:1px solid black;</code><br>
  1119. - pro vizuální odlišení nastavíme barvu okraje<br>
  1120. <br>
  1121. <code class="code2">background:#44ccff;</code><br>
  1122. - pro vizuální odlišení nastavíme barvu pozadí<br>
  1123. <br></p>
  1124. </div>
  1125. <br>
  1126. <p class="popis">
  1127. Kód pro řádek bude vypadat takto &nbsp;:</p>
  1128. <br>
  1129. <hr class="topblok">
  1130. <code class="code1">.menu tr{</code><br>
  1131. <code class="code1">width:100%;</code><br>
  1132. <code class="code1">height:auto;</code><br>
  1133. <code class="code1">border:1px solid black;</code><br>
  1134. <code class="code1">background:#44ccff;</code><br>
  1135. <code class="code1">}</code><br>
  1136. <hr class="bottomblok"><br>
  1137. <br>
  1138. <div class="obs_blok">
  1139. <h3 id="s4.3"><b>CSS STYL - Menu</b> - &lt;td&gt;<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1140. <hr class="top"><p>
  1141. Styl pro buňku tabulky, vlastnostem nastavíme následující hodnoty&nbsp;:
  1142. <br>
  1143. <br>
  1144. <code class="code2">width:auto;</code><br>
  1145. - buňka se roztáhne na celou svou šířku<br>
  1146. <br>
  1147. <code class="code2">height:auto;</code><br>
  1148. - buňka vyplní celou svou výšku <br>
  1149. <br>
  1150. <code class="code2">border:1px solid black;</code><br>
  1151. - pro vizuální odlišení nastavíme barvu okraje<br>
  1152. <br>
  1153. <code class="code2">background:#44ccff;</code><br>
  1154. - pro vizuální odlišení nastavíme barvu pozadí<br>
  1155. <br></p>
  1156. </div>
  1157. <br>
  1158. <p class="popis">
  1159. Kód pro buňku bude vypadat takto &nbsp;:</p>
  1160. <br>
  1161. <hr class="topblok">
  1162. <code class="code1">.menu td{</code><br>
  1163. <code class="code1">width:auto;</code><br>
  1164. <code class="code1">height:auto;</code><br>
  1165. <code class="code1">border:1px solid black;</code><br>
  1166. <code class="code1">background:#44ccff;</code><br>
  1167. <code class="code1">}</code><br>
  1168. <hr class="bottomblok"><br>
  1169. <br>
  1170. <div class="obs_blok">
  1171. <h3 id="s4.4"><b>CSS STYL - Pseudotřída</b> - :hover<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1172. <hr class="top"><p>Pseudo třída a ":hover" slouží k vyvolání akce po najetí myši nad element. Zadáním vlasností do pseudotřídy ":hover" mužeme hodnoty těchto vlastností libovolně měnit. Elementu přidáme pseudotřídu tak, že ji zařadíme hned za název elementu v CSS souboru.<br>
  1173. <br>Například takto - <code class="code2">".menu td:hover{}"</code>.
  1174. <br>
  1175. <br>
  1176. <code class="code2">background:#44ccff;</code><br>
  1177. - nastavíme změnu barvy pozadí. Vložením této vlastnosti do pseudotřídy jsme zapříčinili změnu její hodnoty, kterou jsme zadali výše buňce tabulky<br>
  1178. <br></p>
  1179. </div>
  1180. <br>
  1181. <p class="popis">
  1182. Kód pro :hover bude vypadat takto &nbsp;:</p>
  1183. <br>
  1184. <hr class="topblok">
  1185. <code class="code1">.menu td:hover{</code><br>
  1186. <code class="code1">background:#ff0033;</code><br>
  1187. <code class="code1">}</code><br>
  1188. <hr class="bottomblok"><br>
  1189. <br>
  1190. <div class="obs_blok">
  1191. <h3 id="s4.5"><b>CSS STYL - Menu</b> - odkazy<span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1192. <hr class="top"><p>
  1193. Pro odkazy nastavíme dvě nové vlastnosti a to <b>text-decoration</b> a <b>display</b>. Vlastnost "text-decoration" s hodnotou "none" zapříčiní, že podtržení odkazů zmizí. Vlastností "display" s hodnotou "block" vytvoříme blokový element, který zajistí správnou funkci odkazů v menu.</p>
  1194. </div><br>
  1195. <p class="popis">
  1196. Kód pro odkazy bude vypadat takto &nbsp;:</p>
  1197. <br>
  1198. <hr class="topblok">
  1199. <code class="code1">.menu a{</code><br>
  1200. <code class="code1">text-decoration:none;</code><br>
  1201. <code class="code1">display:block;</code><br>
  1202. <code class="code1">background:#ffcc00;</code><br>
  1203. <code class="code1">}</code>
  1204. <hr class="bottomblok"><br>
  1205. <br>
  1206. <div class="obs_blok">
  1207. <h2 id="s4.6"><b>CSS STYL - finální zápis</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h2>
  1208. <hr class="top"><p>Po přidání všech těchto výše popsaných stylů do našeho souboru <b>"style.css", bude jeho obsah vypadat takto &nbsp;:</b></p>
  1209. </div><br>
  1210. <hr class="topblok">
  1211. <code class="code1">*{ </code><br>
  1212. <code class="code1">margin:0px auto;</code><br>
  1213. <code class="code1">padding:0px auto;</code><br>
  1214. <code class="code1">}</code><br>
  1215. <code class="code1">/* CSS styl pro HTML */</code><br>
  1216. <code class="code1">html{</code><br>
  1217. <code class="code1">width:100%;</code><br>
  1218. <code class="code1">height:100%;</code><br>
  1219. <code class="code1">}</code><br>
  1220. <code class="code1">/* CSS styl pro OBAL */</code><br>
  1221. <code class="code1">.obal{</code><br>
  1222. <code class="code1">width:800px;</code><br>
  1223. <code class="code1">height:500px;</code><br>
  1224. <code class="code1">border:1px solid red;</code><br>
  1225. <code class="code1">}</code><br>
  1226. <code class="code1">/* CSS styl pro HEAD */</code><br>
  1227. <code class="code1">.head{ </code><br>
  1228. <code class="code1">width:auto;</code><br>
  1229. <code class="code1">height:150px;</code><br>
  1230. <code class="code1">background:#ffcc00;</code><br>
  1231. <code class="code1">}</code><br>
  1232. <code class="code1">/* CSS styl pro MENU */</code><br>
  1233. <code class="code1">.menu {</code><br>
  1234. <code class="code1">width:100%;</code><br>
  1235. <code class="code1">height:auto;</code><br>
  1236. <code class="code1">border:1px solid black;</code><br>
  1237. <code class="code1">background:#99ccff;</code><br>
  1238. <code class="code1">text-align:center;</code><br>
  1239. <code class="code1">border-collapse: collapse;</code><br>
  1240. <code class="code1">}</code><br>
  1241. <code class="code1">/* CSS styl pro MENU-TR */</code><br>
  1242. <code class="code1">.menu tr{</code><br>
  1243. <code class="code1">width:100%;</code><br>
  1244. <code class="code1">height:auto;</code><br>
  1245. <code class="code1">border:1px solid black;</code><br>
  1246. <code class="code1">background:#44ccff;</code><br>
  1247. <code class="code1">}</code><br>
  1248. <code class="code1">/* CSS styl pro MENU-TD */</code><br>
  1249. <code class="code1">.menu td{</code><br>
  1250. <code class="code1">width:auto;</code><br>
  1251. <code class="code1">height:auto;</code><br>
  1252. <code class="code1">border:1px solid black;</code><br>
  1253. <code class="code1">background:#44ccff;</code><br>
  1254. <code class="code1">}</code><br>
  1255. <code class="code1">/* CSS styl pro TD HOVER */</code><br>
  1256. <code class="code1">.menu td:hover{</code><br>
  1257. <code class="code1">background:#ff0033;</code><br>
  1258. <code class="code1">}</code><br>
  1259. <code class="code1">/* CSS styl pro ODKAZY V MENU */</code><br>
  1260. <code class="code1">.menu a{</code><br>
  1261. <code class="code1">text-decoration:none;</code><br>
  1262. <code class="code1">display:block;</code><br>
  1263. <code class="code1">background:#ffcc00;</code><br>
  1264. <code class="code1">}</code><br>
  1265. <code class="code1">/* CSS styl pro OBSAH */</code><br>
  1266. <code class="code1">.obsah{ </code><br>
  1267. <code class="code1">width:auto;</code><br>
  1268. <code class="code1">height:auto;</code><br>
  1269. <code class="code1">padding:10px;</code><br>
  1270. <code class="code1">background:#66cc00;</code><br>
  1271. <code class="code1">}</code><br>
  1272. <code class="code1">/* CSS styl pro FOOT */</code><br>
  1273. <code class="code1">.foot{ </code><br>
  1274. <code class="code1">width:auto;</code><br>
  1275. <code class="code1">height:auto;</code><br>
  1276. <code class="code1">padding:10px;</code><br>
  1277. <code class="code1">background:#66cc00;</code><br>
  1278. <code class="code1">}</code><br>
  1279. <hr class="bottomblok"><br>
  1280. <br>
  1281. <div class="obs_blok">
  1282. <h3 id="s4.7"><b>Konec</b><span class="domu"><a href="#jednoducha_www"><img src="http://canyoncollective.com/images/back-to-top.png" alt="nahoru" height="18" width="18"></a></span></h3>
  1283. <hr class="top"><p>
  1284. Tímto konečným zápisem stylu pro vaší stránku jste (snad) úspěšně absolvovali tento návod. Gratuluji.
  1285. <a href="http://wikman2.wz.cz/php/htmlacss/examples/html/ex6-css3.html" target="_blank" title="odkaz na ukázku číslo 6">Zde</a> si můžete prohlédnout konečný výsledek. Rád bych upozornil, že dokud na stránku nedodáte obsahovou část ( text, obrázky ), a to i do patičky, nemusí se stránka zobrazovat korektně.<br>
  1286. Existuje mnoho způsobů, jak si vylepšit vizuální podobu stránky pomocí kaskádových stylů záleží jen na vaší fantaziji. Je sice pravdou, že ne všechny internetové prohlížeče, dokáží v dnešní době zobrazit všechny vlastnosti zcela identicky, ale je ve všeobecném pvědomí, že se na tom úspěšně pracuje. Je jen otázkou času, kdy se tak stane a nám se tak do rukou dostane "nebezpečný nástroj" pro tvorbu internetových prezentací. Do této chvíle však budeme stále nuceni používat hacky, nebo tvořit webovky pouze pro dané prohlížeče. Nashledanou u příštího tutoriálu.</p>
  1287. </div> <br />
  1288. <p style="text-align:center;">
  1289. <a href="http://validator.w3.org/check?uri=referer">
  1290. <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
  1291. &nbsp;
  1292. <a href="http://jigsaw.w3.org/css-validator/check/referer">
  1293. <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Ověřit CSS!">
  1294. </a>
  1295. </p><br>
  1296. </div>
  1297. <!-- konec obsahu -->
  1298. </div>
  1299. </div>
  1300. </div>
  1301. <!-- konec obalu obsahu -->
  1302. <!-- odkazy <div> -->
  1303. <div class="obal_linky">
  1304. <!-- prvni odkaz -->
  1305. <div class="baner">
  1306. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1307. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>CYBERWASTE</a>
  1308. </div>
  1309. <!-- druhy odkaz -->
  1310. <div class="baner">
  1311. <a href="http://nestastnikblog.sweb.cz/" target="_blank">
  1312. <img class="obr" src="img/barbie.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1313. NEŠŤASTNÍK</a>
  1314. </div>
  1315. <!-- druhy odkaz -->
  1316. <div class="baner">
  1317. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1318. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1319. ODKAZ
  1320. </a>
  1321. </div>
  1322. <!-- druhy odkaz -->
  1323. <div class="baner">
  1324. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1325. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1326. ODKAZ
  1327. </a>
  1328. </div>
  1329. <!-- druhy odkaz -->
  1330. <div class="baner">
  1331. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1332. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1333. ODKAZ
  1334. </a>
  1335. </div>
  1336. <!-- druhy odkaz -->
  1337. <div class="baner">
  1338. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1339. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1340. ODKAZ
  1341. </a>
  1342. </div>
  1343. <!-- druhy odkaz -->
  1344. <div class="baner">
  1345. <a href="http://cybernetixwasteland.wz.cz/" target="_blank">
  1346. <img class="obr" src="img/baner.gif" title="Cybernetix Wasteland" alt="Cybernetix Wasteland"><br>
  1347. ODKAZ
  1348. </a>
  1349. </div>
  1350. </div>
  1351. <div class="foot">
  1352. <p id="patka">
  1353. <!-- BlueBoard.cz Pocitadlo -->
  1354. <span id="bbpocitadlo-span-opsutv4kjjpsn18p4un54icsx0cjnm">
  1355. <a id="bbpocitadlo-opsutv4kjjpsn18p4un54icsx0cjnm" href="http://miniaplikace.blueboard.cz"></a></span>
  1356. <script type="text/javascript" src="http://miniaplikace.blueboard.cz/counter_1.php?jid=opsutv4kjjpsn18p4un54icsx0cjnm"></script>
  1357. <!-- BlueBoard.cz Pocitadlo KONEC -->
  1358. <br>
  1359. <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwikman2.wz.cz%2F%3Fpage%3Dhtml;ss=1;No200=1" target="new" style="color:#303030;" >|&nbsp;&nbsp;Valid HTML</a>&nbsp;&nbsp;
  1360. <a href="./JHkniha/admin.php" target="new" style="color:#303030;" >|&nbsp;&nbsp;Administrace</a>&nbsp;&nbsp;|
  1361. <a href="http://tvorimeweb.wz.cz" target="new" style="color:#303030;" >&nbsp;&nbsp;Wikman&copy;2014 - 2021</a>&nbsp;&nbsp;|
  1362. </p>
  1363. </div>
  1364. <!-- How i can get back my files uploaded to my site on wix? -->
  1365. </div>
  1366. </body>
  1367. <div class="optimalizace">
  1368. <p style="color:rgba(255,204,0.5);" >
  1369. <sub>Stránky jsou optimalizované pro Mozillu Firefox, Google Chrom a Operu !<br>Mají šířku 1000px.Doporučuji HD rozlišení 1920 x 1080<br> Internet Explorer, v jakékoli verzi neuznávám, takže jsem se ****** i na optimalizaci.<br>Děkuji za pochopení a přeji Vám zde příjemně strávené chvíle.<br><a href="http://tvorimeweb.wz.cz" target="blank" style="color: rgba(255,204,0,0.3);text-decoration:pulse;"><strong>Admin</strong>.</a></sub></p>
  1370. </div>
  1371. </html>

↑ Top