20. HTML ulkoasu
https://peda.net/id/991d27ac20a
2016-05-23T08:09:59+03:00
https://peda.net/:static/533/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>
HTML ulkoasu
https://peda.net/id/38adf9de20a
2016-05-23T08:49:51+03:00
<p>Nettisivut usein näyttävät sisällön useissa palstoissa (kuten uutislehdissä).</p>
<div>
<h1>Kaupunki Galleria</h1>
</div>
<div>Lontoo<br/>
Pariisi<br/>
Tokio</div>
<div>
<h1>Lontoo</h1>
<p>Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.</p>
</div>
<div>© konnevesi.fi</div>
<h2>HTML ulkoasun käyttö <div> Elementissä</h2>
<table class="lamp">
<tbody>
<tr><th><img src="http://www.w3schools.com/images/lamp.jpg" alt="Note"/></th>
<td><div> elementti on usein käytetty ulkoasu työkaluna, koska se on helppo yhdistää CSS koodin kanssa.</td>
</tr>
</tbody>
</table>
<p>Tämä esimerkki käyttää <div> elementtejä tehdäkseen moni osaisen lehtipalstan.</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>div<span> id<span>="header"</span></span><span>></span></span><br/>
<span><span><</span>h1<span>>Kaupunki galleria</span></span><span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> id<span>="nav"</span></span><span>></span></span><br/>
Lontoo<span><span><</span>br<span>></span></span><br/>
Pariisi<span><span><</span>br<span>></span></span><br/>
Tokio<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> id<span>="section"</span></span><span>></span></span><br/>
<span><span><</span>h1<span>></span></span>Lontoo<span>/h1<span>></span></span><br/>
<span><span><</span>p<span>>Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.</span></span><span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><</span>div<span> id<span>="footer"</span></span><span>></span></span><br/>
© konnevesi.fi<br/>
<span><span><</span>/div<span>></span></span><br/>
<br/>
<span><span><span><</span>/body<span>><br/>
<br/>
</span></span></span>
<div class="w3-example">
<h3>CSS koodi:</h3>
<div class="w3-code notranslate cssHigh"><span><style><br/>
#header {<br/>
background-color:black;<br/>
color:white;<br/>
text-align:center;<br/>
padding:5px;<br/>
}<br/>
#nav {<br/>
line-height:30px;<br/>
background-color:#eeeeee;<br/>
height:300px;<br/>
width:100px;<br/>
float:left;<br/>
padding:5px; <br/>
}<br/>
#section {<br/>
width:350px;<br/>
float:left;<br/>
padding:10px; <br/>
}<br/>
#footer {<br/>
background-color:black;<br/>
color:white;<br/>
clear:both;<br/>
text-align:center;<br/>
padding:5px; <br/>
}<br/>
</style></span></div>
</div>
<h2>Nettisivu ulkoasu HTML5 kielessä</h2>
<p>HTML5 tarjoaa semanttisen elementin joka määrittää eri osat nettisivulla:</p>
<table>
<tbody>
<tr>
<td><img src="http://www.w3schools.com/html/img_sem_elements.gif" alt="HTML5 Semantic Elements"/></td>
<td>
<ul>
<li><header> - Määrittää otsikon dokumentille tai osalle</li>
<li><nav> - Määrittää sisällön navigointi linkkeihin</li>
<li><section> - <span>Määrittää</span> osan dokumentissa</li>
<li><article> - <span>Määrittää</span> an itsenäisen artikkelin</li>
<li><aside> - <span>Määrittää</span> sisällön sivupalkkiin</li>
<li><footer> - <span>Määrittää</span> alaviitteen dokumenttiin tai osaan</li>
<li><details> - <span>Määrittää</span> ylimääräistä tietoa tekstiin</li>
<li><summary> - <span>Määrittää</span> nimikkeen <details> elementtiin</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p>Tämä esimerkki käyttää <header>, <nav>, <section>, ja <footer> joilla tulee moniosainen ulkoasu nettisivulle:</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>header<span>></span></span><br/>
<span><span><</span>h1<span>>Kaupunki galleria</span></span><span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>/header<span>></span></span><br/>
<br/>
<span><span><</span>nav<span>></span></span><br/>
Lontoo<span><span><</span>br<span>></span></span><br/>
Pariisi<span><span><</span>br<span>></span></span><br/>
Tokio<br/>
<span><span><</span>/nav<span>></span></span><br/>
<br/>
<span><span><</span>section<span>></span></span><br/>
<span><span><</span>h1<span>></span></span>Lontoo<span><span><</span>/h1<span>></span></span><br/>
<span><span><</span>p<span>>Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.</span></span><span><span><</span>/p<span>></span></span><br/>
<span><span><</span>/section<span>></span></span><br/>
<br/>
<span><span><</span>footer<span>></span></span><br/>
© konnevesi.fi<br/>
<span><span><</span>/footer<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span></div>
</div>
<div class="w3-example">
<h3>CSS koodi:</h3>
<div class="w3-code notranslate cssHigh"><span><style><br/>
header <span><span>{</span><br/>
background-color<span><span>:</span>black<span>;</span></span><br/>
color<span><span>:</span>white<span>;</span></span><br/>
text-align<span><span>:</span>center<span>;</span></span><br/>
padding<span><span>:</span>5px<span>;</span></span> <br/>
<span>}</span></span><br/>
nav <span><span>{</span><br/>
line-height<span><span>:</span>30px<span>;</span></span><br/>
background-color<span><span>:</span>#eeeeee<span>;</span></span><br/>
height<span><span>:</span>300px<span>;</span></span><br/>
width<span><span>:</span>100px<span>;</span></span><br/>
float<span><span>:</span>left<span>;</span></span><br/>
padding<span><span>:</span>5px<span>;</span></span> <br/>
<span>}</span></span><br/>
section <span><span>{</span><br/>
width<span><span>:</span>350px<span>;</span></span><br/>
float<span><span>:</span>left<span>;</span></span><br/>
padding<span><span>:</span>10px<span>;</span></span> <br/>
<span>}</span></span><br/>
footer <span><span>{</span><br/>
background-color<span><span>:</span>black<span>;</span></span><br/>
color<span><span>:</span>white<span>;</span></span><br/>
clear<span><span>:</span>both<span>;</span></span><br/>
text-align<span><span>:</span>center<span>;</span></span><br/>
padding<span><span>:</span>5px<span>;</span></span> <br/>
<span>}</span></span><br/>
</style></span> </div>
</div>
</div>
</div>
<div class="w3-example">
<h2>HTML ulkoasu taulukoissa</h2>
<table class="lamp">
<tbody>
<tr><th><img src="http://www.w3schools.com/images/lamp.jpg" alt="Note"/></th>
<td> <table><span>The purpose of the <table> element is to display tabular data.</span></td>
</tr>
</tbody>
</table>
<p>Ulkoasu voidaan saavuttaa <table> elementillä, taulukko elementit voidaan tyylitellä CSS: koodilla.</p>
<div class="w3-example">
<h3>Esimerkki</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>body<span>></span></span><br/>
<br/>
<span><span><</span>table<span> class<span>="lamp"</span></span><span>></span></span><br/>
<span><span><</span>tr<span>></span></span><br/>
<span><span><</span>th<span>></span></span><br/>
<span><span><</span>img<span> src<span>="/images/lamp.jpg"</span> alt<span>="Note"</span> style<span>="height:32px;width:32px"</span></span><span>></span></span><br/>
<span><span><</span>/th<span>></span></span><br/>
<span><span><</span>td<span>></span></span><br/>
Taulukko elementti testi <br/>
<span><span><</span>/td<span>></span></span><br/>
<span><span><</span>/tr<span>></span></span><br/>
<span><span><</span>/table<span>></span></span><br/>
<br/>
<span><span><</span>/body<span>></span></span></div>
</div>
<div class="w3-example">
<h3>CSS koodi:</h3>
<div class="w3-code notranslate cssHigh"><span><style><br/>
table.lamp <span><span>{</span><br/>
width<span><span>:</span>100%<span>;</span></span><br/>
border<span><span>:</span>1px solid #d4d4d4<span>;</span></span><br/>
<span>}</span></span><br/>
table.lamp th, td <span><span>{</span><br/>
padding<span><span>:</span>10px<span>;</span></span><br/>
<span>}</span></span><br/>
table.lamp th <span><span>{</span><br/>
width<span><span>:</span>40px<span>;</span></span><br/>
<span>}</span></span><br/>
</style></span></div>
</div>
<br/>
<br/>
</div>
2016-05-23T08:28:46+03:00