20. HTML ulkoasu

HTML ulkoasu

Nettisivut usein näyttävät sisällön useissa palstoissa (kuten uutislehdissä).

Kaupunki Galleria

Lontoo
Pariisi
Tokio

Lontoo

Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.

© konnevesi.fi

HTML ulkoasun käyttö <div> Elementissä

Note <div> elementti on usein käytetty ulkoasu työkaluna, koska se on helppo yhdistää CSS koodin kanssa.

Tämä esimerkki käyttää <div> elementtejä tehdäkseen moni osaisen lehtipalstan.

Esimerkki

<body>

<div id="header">
<h1>Kaupunki galleria</h1>
</div>

<div id="nav">
Lontoo<br>
Pariisi<br>
Tokio
</div>

<div id="section">
<h1>Lontoo/h1>
<p>Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.</p>
</div>

<div id="footer">
© konnevesi.fi
</div>

</body>

CSS koodi:

<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>

Nettisivu ulkoasu HTML5 kielessä

HTML5 tarjoaa semanttisen elementin joka määrittää eri osat nettisivulla:

HTML5 Semantic Elements
  • <header> - Määrittää otsikon dokumentille tai osalle
  • <nav> - Määrittää sisällön navigointi linkkeihin
  • <section> - Määrittää osan dokumentissa
  • <article> - Määrittää an itsenäisen artikkelin
  • <aside> - Määrittää sisällön sivupalkkiin
  • <footer> - Määrittää alaviitteen dokumenttiin tai osaan
  • <details> - Määrittää ylimääräistä tietoa tekstiin
  • <summary> - Määrittää nimikkeen <details> elementtiin

Tämä esimerkki käyttää <header>, <nav>, <section>, ja <footer> joilla tulee moniosainen ulkoasu nettisivulle:

Esimerkki

<body>

<header>
<h1>Kaupunki galleria</h1>
</header>

<nav>
Lontoo<br>
Pariisi<br>
Tokio
</nav>

<section>
<h1>Lontoo</h1>
<p>Lontoo on Englannin pääkaupunki. Sen metropoli alueella asuu yli 13 miljoonaa asukasta.</p>
</section>

<footer>
© konnevesi.fi
</footer>

</body>

CSS koodi:

<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>

HTML ulkoasu taulukoissa

Note <table>The purpose of the <table> element is to display tabular data.

Ulkoasu voidaan saavuttaa <table> elementillä, taulukko elementit voidaan tyylitellä CSS: koodilla.

Esimerkki

<body>

<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
Taulukko elementti testi
</td>
</tr>
</table>

</body>

CSS koodi:

<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>