{"id":348,"date":"2023-12-04T07:29:50","date_gmt":"2023-12-04T06:29:50","guid":{"rendered":"https:\/\/gdm.sosthe.sk\/?page_id=348"},"modified":"2023-12-04T09:07:32","modified_gmt":"2023-12-04T08:07:32","slug":"tvorba-layoutu-stranky","status":"publish","type":"page","link":"https:\/\/gdm.sosthe.sk\/?page_id=348","title":{"rendered":"Tvorba layoutu str\u00e1nky"},"content":{"rendered":"<h3>\u010co je layout a pre\u010do pr\u00e1ve pomocou CSS<\/h3>\n<p>Layout je rozlo\u017eenie z\u00e1kladn\u00fdch prvkov str\u00e1nky s\u00a0blokov\u00fdm charakterom. Medzi zlo\u017eky layoutu patria napr\u00edklad\u00a0<strong>hlava<\/strong>,\u00a0<strong>menu<\/strong>\u00a0alebo\u00a0<strong>p\u00e4ta<\/strong>. Pre za\u010diato\u010dn\u00edkov je najlep\u0161\u00edm \u0161tartom\u00a0<strong>jednost\u013apcov\u00fd layout s\u00a0horizont\u00e1lnym menu<\/strong>, t\u00e9ma tejto lekcie.<\/p>\n<p>V\u00fdhody CSS layoutu:<\/p>\n<ul>\n<li>Ide o\u00a0najmodernej\u0161iu technol\u00f3giu, ktor\u00e1 pri spr\u00e1vnom p\u00edsan\u00ed k\u00f3du\u00a0<strong>sp\u013a\u0148a<\/strong>\u00a0v\u0161etky najnov\u0161ie pravidl\u00e1 validity \u010di pr\u00edstupnosti. Navy\u0161e tvorba pomocou CSS je \u010dastokr\u00e1t omnoho jednoduch\u0161ia ako pomocou tabuliek.<\/li>\n<li>U\u017e\u00edvate\u013eom s\u00a0pomal\u00fdm pripojen\u00edm (dnes men\u0161ine) sa str\u00e1nka zobraz\u00ed r\u00fdchlej\u0161ie, preto\u017ee tabu\u013eka sa vykresl\u00ed a\u017e po jej \u00faplnom na\u010d\u00edtan\u00ed, kde\u017eto CSS sa zobrazuje postupne (pod\u013ea miery na\u010d\u00edtania).<\/li>\n<li>R\u00e1my (<em>frames<\/em>) s\u00fa dnes pre\u017eitok. Jednoducho ide o\u00a0<strong>extr\u00e9mne<\/strong>\u00a0zastaral\u00fa technol\u00f3giu, ktor\u00e1 sa u\u017e na modern\u00fdch weboch nepou\u017e\u00edva. Ani pre u\u017e\u00edvate\u013ea nemus\u00ed by\u0165 pr\u00e1ve pr\u00edjemn\u00e9, ke\u010f je port\u00e1l rozk\u00faskovan\u00fd na mno\u017estvo vnoren\u00fdch HTML s\u00faborov.<\/li>\n<\/ul>\n<p>Na druh\u00fa stranu, najm\u00e4 sporu\u00a0<em>CSS vs. tabu\u013eky<\/em>\u00a0sa dnes venuje ve\u013ea pozornosti. Mnoho \u013eud\u00ed zast\u00e1va n\u00e1zor, \u017ee pre ve\u013ek\u00e9 biznisov\u00e9\/port\u00e1lov\u00e9 projekty sa viac hod\u00ed tabu\u013ekov\u00fd layout (vi\u010f napr.\u00a0Vyvojar.cz). Naopak, nov\u00e1 verzia port\u00e1lu\u00a0<strong>Programujte.com<\/strong>\u00a0je vytvoren\u00e1 pomocou CSS layoutu. V\u00ed\u0165az v\u00a0takomto pr\u00edpade nie je \u00faplne jasn\u00fd, no ja sa viac prikl\u00e1\u0148am ku technol\u00f3gii CSS. Obraz si m\u00f4\u017eete vytvori\u0165 sami po dlhodobom pou\u017e\u00edvan\u00ed obidvoch techn\u00edk, nie je v\u0161ak celkom nere\u00e1lne, \u017ee do nieko\u013ek\u00fdch rokov tabu\u013eky \u00faplne \u201ezomr\u00fa\u201c.<\/p>\n<div><\/div>\n<h3>Tvorba layoutu<\/h3>\n<p>N\u00e1\u0161 layout teda bude pozost\u00e1va\u0165 z\u00a0jedn\u00e9ho st\u013apca, bude ma\u0165 horizont\u00e1lne menu a bude zarovnan\u00fd\u00a0<strong>nastred<\/strong>. V\u0161etky tieto prvky v\u0161ak mus\u00ed sp\u00e1ja\u0165 jeden ve\u013ek\u00fd, nevidite\u013en\u00fd blok naz\u00fdvan\u00fd\u00a0<strong>kontajner<\/strong>. Ak chceme cel\u00fa str\u00e1nku vycentrova\u0165, vycentrujeme len kontajner, preto\u017ee v\u0161etky ostatn\u00e9 s\u00fa\u010dasti str\u00e1nky sa nach\u00e1dzaj\u00fa v\u00a0\u0148om (teda sa zarovnaj\u00fa do stredu spolu s\u00a0n\u00edm).<\/p>\n<p>Za\u010d\u00edname s tvorbou. Vytvorte si HTML dokument aj s <code>body<\/code>\u00a0tagmi nazvan\u00fd\u00a0<em>index.html<\/em>\u00a0a s\u00a0odkazom na CSS s\u00fabor\u00a0<em>style.css<\/em>. Namiesto bezduch\u00e9ho kop\u00edrovania viac rozm\u00fd\u0161\u013eajte, pre\u010d\u00edtajte si jeden blok \u010dl\u00e1nku, zamyslite sa nad n\u00edm. Ak us\u00fadite, \u017ee ste pochopili, o\u00a0\u010dom je v\u00a0bloku p\u00edsan\u00e9, prejdite na \u010fal\u0161\u00ed.<\/p>\n<h3>\u00davod<\/h3>\n<p>E\u0161te pred vytvoren\u00edm kontajnera treba definova\u0165 niektor\u00e9 nastavenia str\u00e1nky samotnej. Vlo\u017ete preto do CSS s\u00faboru tento k\u00f3d:<\/p>\n<pre><code class=\"css\">body {\r\n  background-color: #dbe2ee;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  font-size: 16px;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>font-family<\/strong>\u00a0= rodina fontov, ktor\u00e9 maj\u00fa by\u0165 pou\u017eit\u00e9 na str\u00e1nke\u00a0\u2013 naj\u010dastej\u0161ie sa vyberaj\u00fa bezp\u00e4tkov\u00e9, kv\u00f4li lep\u0161ej \u010ditate\u013enosti; v\u00a0tomto pr\u00edpade prehliada\u010d vyh\u013ead\u00e1 na po\u010d\u00edta\u010di font\u00a0<em>Arial<\/em>\u00a0a n\u00e1sledne ho pou\u017eije na vykreslenie str\u00e1nky; ak ho na po\u010d\u00edta\u010di nen\u00e1jde, vyh\u013ead\u00e1\u00a0<em>Helveticu<\/em>\u00a0a ak nen\u00e1jde ani t\u00fa, vyp\u00ed\u0161e text defaultn\u00fdm bezp\u00e4tkov\u00fdm p\u00edsmom (univerz\u00e1lne ozna\u010denie\u00a0<em>sans-serif<\/em>)<\/li>\n<li><strong>font-size<\/strong>\u00a0= ve\u013ekos\u0165 textu na str\u00e1nke, pre lep\u0161iu \u010ditate\u013enos\u0165 vo\u013ete 16px, pre decentnej\u0161ie technick\u00e9 p\u00edsmo napr\u00edklad 12-14px<\/li>\n<\/ul>\n<h3>Kontajner<\/h3>\n<p>Je to nevidite\u013en\u00fd blok, vo vn\u00fatri ktor\u00e9ho sa nach\u00e1dzaj\u00fa ostatn\u00e9 prvky str\u00e1nky. Teda n\u00e1\u0161 web dr\u017e\u00ed pohromade a z\u00e1rove\u0148 mu d\u00e1va niektor\u00e9 z\u00e1kladn\u00e9 vlastnosti. Vytvor\u00edme si\u00a0<code>#kontajner<\/code>\u00a0(<em>ID<\/em>, ke\u010f\u017ee ho pou\u017eijeme len raz) a nastav\u00edme mu \u0161\u00edrku\u00a0+\u00a0zarovnanie:<\/p>\n<pre><code class=\"css\">#kontajner {\r\n  margin: 0 auto;\r\n  width: 1000px;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>margin<\/strong>\u00a0= ud\u00e1va poz\u00edciu od (aj nevidite\u013en\u00e9ho) r\u00e1mu objektu\u00a0<strong>smerom von<\/strong>, teda priestor okolo objektu; z\u00e1pis\u00a0<code>margin:\u00a03px<\/code>\u00a0odsad\u00ed objekt od in\u00e9ho o\u00a03px zo v\u0161etk\u00fdch str\u00e1n, z\u00e1pis\u00a0<code>margin-top:\u00a03px<\/code>\u00a0odsad\u00ed objekt od in\u00e9ho o\u00a03px iba zvrchu; pozn\u00e1me aj\u00a0<code>margin-bottom<\/code>,\u00a0<code>margin-left<\/code>\u00a0a\u00a0<code>margin-right<\/code>; pr\u00edpadne m\u00f4\u017eeme pou\u017ei\u0165 z\u00e1pis\u00a0<code>margin:\u00a0t\u00a0r\u00a0b\u00a0l<\/code><\/li>\n<li><strong>margin:\u00a00\u00a0auto<\/strong>\u00a0= \u0161peci\u00e1lny z\u00e1pis\u00a0<code>margin<\/code>, ktor\u00fd sa pou\u017e\u00edva najm\u00e4 v\u00a0kombin\u00e1cii s\u00a0kontajnerom; zabezpe\u010d\u00ed, \u017ee kontajner bude na str\u00e1nke vycentrovan\u00fd<\/li>\n<li><strong>width<\/strong>\u00a0= ur\u010duje \u0161\u00edrku objektu; v\u00a0tomto pr\u00edpade chceme, aby mal kontajner \u0161\u00edrku 1\u00a0000\u00a0pixelov (normalizujeme str\u00e1nku pre rozl\u00ed\u0161enie 1024\u00d7768)<\/li>\n<\/ul>\n<p>Priamo medzi tagy\u00a0<code>body<\/code>\u00a0pridajte:<\/p>\n<pre><code class=\"html\">&lt;div id=\"kontajner\"&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Hlava<\/h3>\n<p>Po vytvoren\u00ed kontajneru m\u00f4\u017eeme pokra\u010dova\u0165 s\u00a0hlavou. T\u00e1 u\u017e bude ma\u0165 vidite\u013en\u00fd r\u00e1m (<code>border<\/code>) a pevne nastaven\u00fa v\u00fd\u0161ku aj odsadenie:<\/p>\n<pre><code class=\"css\">#hlava {\r\n  border: 1px solid #6f90ba;\r\n  height: 60px;\r\n  margin-top: 20px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>border<\/strong>\u00a0= nastavuje r\u00e1m objektu; zapisuje sa v\u00a0tvare\u00a0<code>border: \u0161\u00edrka \u0161t\u00fdl farba<\/code>, ale takisto m\u00f4\u017eeme jednotliv\u00e9 vlastnosti oddeli\u0165 na\u00a0<code>border-width<\/code>,\u00a0<code>border-style<\/code>\u00a0a\u00a0<code>border-color<\/code>; naj\u010dastej\u0161ie pou\u017e\u00edvan\u00e9 hodnoty pre\u00a0<code>border-style<\/code>\u00a0s\u00fa\u00a0<code>solid<\/code>,\u00a0<code>dotted<\/code>\u00a0a\u00a0<code>dashed<\/code><\/li>\n<li><strong>height<\/strong>\u00a0= nastavuje v\u00fd\u0161ku objektu<\/li>\n<li><strong>margin-top:\u00a020px<\/strong>\u00a0= pomocou tohto z\u00e1pisu dosiahneme, \u017ee hlava bude od vrchn\u00e9ho okraju kontajneru zarovnan\u00e1 o\u00a020\u00a0pixelov ni\u017e\u0161ie; nesk\u00f4r, po dokon\u010den\u00ed layoutu, si sk\u00faste t\u00fato hodnotu nastavi\u0165 na 0px a uvid\u00edte rozdiel<\/li>\n<li><strong>width:\u00a0100%<\/strong>\u00a0= t\u00fdmto z\u00e1pisom sme objektu udali, \u017ee bude ma\u0165 \u0161\u00edrku ve\u013ekosti 100\u00a0% kontajnera, teda prakticky rovnak\u00fa ako kontajner. Hoci by sme mohli hodnotu zada\u0165 pomocou pixelov, vn\u00fatri kontajneru sa pre \u0161\u00edrku doporu\u010duje pou\u017e\u00edva\u0165 percentu\u00e1lny z\u00e1pis\u00a0\u2013 ale to je len na v\u00e1s<\/li>\n<\/ul>\n<p>Nasleduj\u00face s\u00fa\u010dasti k\u00f3du pre HTML dokument vkladajte priamo do <code>div<\/code>u\u00a0<em>kontajner<\/em>:<\/p>\n<pre><code class=\"html\">&lt;div id=\"hlava\"&gt;\r\n  bicie\r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Menu<\/h3>\n<p>Navig\u00e1cia bude vertik\u00e1lna, a s\u00edce pr\u00fa\u017eok s\u00a0rozmermi 800\u00d720\u00a0pixelov:<\/p>\n<pre><code class=\"css\">#menu {\r\n  border: 1px solid #6f90ba;\r\n  height: 20px;\r\n  margin: 10px auto;\r\n  width: 80%;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>margin:\u00a010px auto<\/strong>\u00a0= definovali sme, aby bol menu blok odsaden\u00fd o 10\u00a0pixelov, pritom n\u00e1m v\u0161ak hodnota\u00a0<code>auto<\/code>\u00a0blok centruje<\/li>\n<\/ul>\n<pre><code class=\"html\">&lt;div id=\"menu\"&gt;\r\n  spev\r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Textbox<\/h3>\n<p>Textboxy bud\u00fa na na\u0161ej str\u00e1nke dva a bud\u00fa oddelen\u00e9 pr\u00fa\u017ekom pre reklamu. Tento je prv\u00fd, vrchn\u00fd:<\/p>\n<pre><code class=\"css\">#text {\r\n  border: 1px solid #6f90ba;\r\n  min-height: 200px;\r\n  margin-top: 10px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>min-height:\u00a0200px<\/strong>\u00a0= definovali sme, \u017ee aj ke\u010f sa v\u00a0textboxe bud\u00fa nach\u00e1dza\u0165 dve nerozvit\u00e9 vety (sotva pln\u00fd riadok), v\u017edy bude vysok\u00fd 200\u00a0pixelov a t\u00fato v\u00fd\u0161ku prekro\u010d\u00ed iba k\u00a0v\u00e4\u010d\u0161iemu; chceme predsa, aby mal n\u00e1\u0161 web nejak\u00fa formu<\/li>\n<\/ul>\n<pre><code class=\"html\">&lt;div id=\"text\"&gt;\r\n  gitara\r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Reklama<\/h3>\n<p>Panel pre reklamu, \u010di u\u017e AdSense-like alebo bannerov\u00fa, bude vysok\u00fd 60\u00a0pixelov a\u00a0<strong>nebude<\/strong>\u00a0odsaden\u00fd o\u00a010\u00a0pixelov ako ostatn\u00e9 bloky:<\/p>\n<pre><code class=\"css\">#reklama {\r\n  border: 1px solid #6f90ba;\r\n  border-top: none;\r\n  height: 60px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<ul>\n<li><strong>border-top:\u00a0none<\/strong>\u00a0= ke\u010f\u017ee obidva \u201ezlepen\u00e9\u201c prvky (textbox aj reklama) maj\u00fa pln\u00fd border, na mieste stretu by vznikol v\u00e4\u010d\u0161\u00ed, dvojpixelov\u00fd r\u00e1m; preto nastav\u00edme reklame, aby mala border v\u0161ade, len nie hore<\/li>\n<\/ul>\n<pre><code class=\"html\">&lt;div id=\"reklama\"&gt;\r\n  basa \r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Textbox bez odsadenia<\/h3>\n<p>Pre\u010do bez odsadenia? Lebo aj on bude nalepen\u00fd, podobne ako reklama na textbox. Mysl\u00edm, \u017ee v\u00a0tomto bode va\u0161ich vedomost\u00ed u\u017e nie je viac \u010do vysvet\u013eova\u0165:<\/p>\n<pre><code class=\"css\">#text-bez-odsadenia {\r\n  border: 1px solid #6f90ba;\r\n  border-top: none;\r\n  min-height: 200px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<pre><code class=\"html\">&lt;div id=\"text-bez-odsadenia\"&gt; \r\n  kl\u00e1vesy \r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>P\u00e4ta<\/h3>\n<p>Pre webdizajn\u00e9rov najob\u013e\u00fabenej\u0161ia pas\u00e1\u017e \u201eprogramovania\u201c, ich p\u00e4tn\u00e1s\u0165 min\u00fat sl\u00e1vy\u2026<\/p>\n<pre><code class=\"css\">#pata {\r\n  border: 1px solid #6f90ba;\r\n  height: 20px;\r\n  margin-top: 10px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<pre><code class=\"html\">&lt;div id=\"pata\"&gt; \r\n  tr\u00fabka \r\n&lt;\/div&gt;<\/code><\/pre>\n<h3>Z\u00e1ver<\/h3>\n<p>Dokopy by v\u00e1\u0161 k\u00f3d mal vyzera\u0165 takto:<\/p>\n<pre><code class=\"css\">body {\r\n  background-color: #dbe2ee;\r\n  font-family: Arial, Helvetica, sans-serif;\r\n  font-size: 16px;\r\n}\r\n#kontajner {\r\n  margin: 0 auto;\r\n  width: 1000px;\r\n}\r\n#hlava {\r\n  border: 1px solid #6f90ba;\r\n  height: 60px;\r\n  margin-top: 20px;\r\n  width: 100%;\r\n}\r\n#menu {\r\n  border: 1px solid #6f90ba;\r\n  height: 20px;\r\n  margin: 10px auto;\r\n  width: 80%;\r\n}\r\n#text {\r\n  border: 1px solid #6f90ba;\r\n  min-height: 200px;\r\n  margin-top: 10px;\r\n  width: 100%;\r\n}\r\n#reklama {\r\n  border: 1px solid #6f90ba;\r\n  border-top: none;\r\n  height: 60px;\r\n  width: 100%;\r\n}\r\n#text-bez-odsadenia {\r\n  border: 1px solid #6f90ba;\r\n  border-top: none;\r\n  min-height: 200px;\r\n  width: 100%;\r\n}\r\n#pata {\r\n  border: 1px solid #6f90ba;\r\n  height: 20px;\r\n  margin-top: 10px;\r\n  width: 100%;\r\n}<\/code><\/pre>\n<p>A HTML dokument:<\/p>\n<div id=\"clanek_code_17\" class=\"code_liner\">\n<pre><code class=\"html\">&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n\"http:\/\/www.w3.org\/TR\/2000\/REC-xhtml1-20000126\/DTD\/xhtml1-strict.dtd\"&gt;<\/code> &lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"sk\" lang=\"sk\"&gt; &lt;head&gt; &lt;meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/&gt; &lt;link rel=\"stylesheet\" href=\"style.css\" type=\"text\/css\" \/&gt; &lt;title&gt;N\u00e1zov va\u0161ej str\u00e1nky&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;div id=\"kontajner\"&gt; &lt;div id=\"hlava\"&gt; bicie &lt;\/div&gt; &lt;div id=\"menu\"&gt; spev &lt;\/div&gt; &lt;div id=\"text\"&gt; gitara &lt;\/div&gt; &lt;div id=\"reklama\"&gt; basa &lt;\/div&gt; &lt;div id=\"text-bez-odsadenia\"&gt; kl\u00e1vesy &lt;\/div&gt; &lt;div id=\"pata\"&gt; tr\u00fabka &lt;\/div&gt; &lt;\/div&gt; &lt;\/body&gt; &lt;\/html&gt;<\/pre>\n<\/div>\n<p>A takto vyzer\u00e1 v\u00fdsledok pr\u00edkladu re\u00e1lne:<\/p>\n<p><a href=\"\/zadanie\/index.html\" target=\"_blank\" rel=\"noopener\">Layout<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u010co je layout a pre\u010do pr\u00e1ve pomocou CSS Layout je rozlo\u017eenie z\u00e1kladn\u00fdch prvkov str\u00e1nky s\u00a0blokov\u00fdm charakterom. Medzi zlo\u017eky layoutu patria napr\u00edklad\u00a0hlava,\u00a0menu\u00a0alebo\u00a0p\u00e4ta. Pre za\u010diato\u010dn\u00edkov je najlep\u0161\u00edm \u0161tartom\u00a0jednost\u013apcov\u00fd layout s\u00a0horizont\u00e1lnym menu, t\u00e9ma tejto lekcie. V\u00fdhody CSS layoutu: Ide o\u00a0najmodernej\u0161iu technol\u00f3giu, ktor\u00e1 pri spr\u00e1vnom p\u00edsan\u00ed k\u00f3du\u00a0sp\u013a\u0148a\u00a0v\u0161etky najnov\u0161ie pravidl\u00e1 validity \u010di pr\u00edstupnosti. Navy\u0161e tvorba pomocou CSS je \u010dastokr\u00e1t omnoho [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-348","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348"}],"version-history":[{"count":5,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/348\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=\/wp\/v2\/pages\/348\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/gdm.sosthe.sk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}