https://peda.net/id/65be87f8201 2020-11-06T12:39:50+02:00 https://peda.net/:static/532/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/7174befe259 2020-11-13T13:00:48+02:00 ​<a href="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/asemointi/esimerkki-luonnos/a#top" class="service">asemointiesimerkki.html</a>​<br/> <a href="https://peda.net/iitti/lukio/oppiaineet/tietotekniikka/akjwt/o2wt/asemointi/esimerkki-luonnos/tyylisivu1-css#top" class="service">tyylisivu1.css</a> 2020-11-13T13:00:29+02:00 https://peda.net/id/00d80f42201 2020-11-13T12:21:14+02:00 Suunnittele sivulle sisältöä jossa on otsikko-osio, navigointipalkki, varsinaista pääsisältöä ja alatunniste.<br/> Perehdy sivuun <a href="https://www.w3schools.com/html/html_layout.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/html_layout.asp</a><br/> <br/> Toteuta asemointi eli layout CSS-tyylitiedostolla. 2020-11-06T12:51:20+02:00 https://peda.net/id/a36c666e201 2020-11-06T13:01:09+02:00 <p>Asemoinnilla (layout) tarkoitetaan sitä miten sivn eri osaset sijoitellaan toisiinsa nähden. <br/> <br/> Asemoinnissa ja tyylimäärittelyissä on hyödyllistä määritellä htmlkoodissa sivulle eri osia mm. &lt;div&gt; -elementin ja Id-tunnisteiden avulla. </p> <p>Lue sivu <a href="https://www.w3schools.com/html/html_blocks.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/html_blocks.asp</a><br/> Mieti mitä käsitteet &quot;Block element&quot; ja &quot;Inline element&quot; tarkoittavat. <br/> Miten div ja span elementtejä käytetään:<br/> <a href="https://koppa.jyu.fi/avoimet/hum/tvt/www/css/div-ja-span" rel="nofollow ugc noopener">https://koppa.jyu.fi/avoimet/hum/tvt/www/css/div-ja-span</a><br/> <br/> Miten sivun osiin määritetään luokkia Class ja yksilöllisiä tunnisteita (Id): <br/> <a href="https://www.w3schools.com/html/html_classes.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/html_classes.asp</a><br/> <a href="https://www.w3schools.com/html/html_id.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/html_id.asp</a></p> <hr></hr> <p>Sivun eri osien asemoinnissa voidaan myös käyttää tagejä </p> <ul> <li><code class="w3-codespan">&lt;header&gt;</code><span> </span>- otsikko</li> <li><code class="w3-codespan">&lt;nav&gt;</code><span> </span>- navigointilinkit sivuston sisällä </li> <li><code class="w3-codespan">&lt;section&gt;</code><span> </span>- osio</li> <li><code class="w3-codespan">&lt;article&gt;</code><span> </span>- itsenäinen sisältöosio</li> <li><code class="w3-codespan">&lt;aside&gt;</code><span> </span>- sivupalkki</li> <li><code class="w3-codespan">&lt;footer&gt;</code><span> </span>- alatunniste</li> </ul> Nämä on selitetty <a href="https://www.w3schools.com/html/html_layout.asp" rel="nofollow ugc noopener">https://www.w3schools.com/html/html_layout.asp</a> 2020-11-06T12:48:43+02:00