Layout HTML

Strony internetowe często prezentują zawartość w kolumnach (podobnie jak czasopisma i gazety).

Użycie elementu <div> w układzie HTML

Komentarz:Element <div> jest często używany jako narzędzie do układu, ponieważ można go łatwo pozycjonować za pomocą CSS.

Ten przykład używa czterech elementów <div> do tworzenia wielokolumnowego układu:

Przykład

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
Londyn jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Wielkiej Brytanii,
z metropolitą liczącą ponad 13 milionów mieszkańców.
</p>
<p>
Stojąc nad rzeką Temzą, Londyn był głównym osiedlem przez dwa tysiąclecia,
Jego historia sięga założenia przez Rzymian, którzy nazwali ją Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Spróbuj sam

CSS:

<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>

Użycie układu strony internetowej HTML5

Nowe semantyczne elementy HTML5 definiują różne części strony internetowej:

Elementy semantyczne HTML5

header Definiowanie nagłówka dokumentu lub sekcji
nav Definiowanie kontenera dla linków nawigacyjnych
section Definiowanie sekcji dokumentu
article Definiowanie niezależnego, samowystarczalnego artykułu
aside Definiowanie treści poza główną
footer Definiowanie noga dokumentu lub sekcji
details Definiowanie dodatkowych szczegółów
summary Definiowanie tytułu elementu details

Ten przykład używa <header>, <nav>, <section> oraz <footer> do tworzenia wielokolumnowego układu:

Przykład

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
Londyn jest stolicą Anglii. Jest najbardziej zaludnionym miastem w Wielkiej Brytanii,
z metropolitą liczącą ponad 13 milionów mieszkańców.
</p>
<p>
Stojąc nad rzeką Temzą, Londyn był głównym osiedlem przez dwa tysiąclecia,
Jego historia sięga założenia przez Rzymian, którzy nazwali ją Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Spróbuj sam

CSS

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; 
}

Układ HTML za pomocą tabeli

Komentarz:Element <table> nie został zaprojektowany jako narzędzie do układu.

Element <table> ma na celu wyświetlanie danych w formie tabeli.

Użycie elementu <table> umożliwia uzyskanie efektu układu, ponieważ można ustawić styl elementu tabeli za pomocą CSS:

Przykład

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Uwaga" style="height:32px;width:32px">
  </th>
  <td>
    Element tabeli nie został zaprojektowany jako narzędzie do układu.
  </td>
</tr>
</table>
</body>

Spróbuj sam

CSS

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