Layout HTML
- Página Anterior Cabeçalho do HTML
- Próxima Página Design Responsivo do HTML
Os sites geralmente exibem conteúdo em colunas múltiplas (como revistas e jornais).
Layout em HTML usando <div> Elemento
Nota:<div> Element é frequentemente usado como ferramenta de layout, pois pode ser facilmente posicionado usando CSS.
Este exemplo usa quatro elementos <div> para criar uma layout de colunas múltiplas:
Exemplo
<body> <div id="header"> <h1>Galeria da Cidade</h1> </div> <div id="nav"> Londres<br> Paris<br> Tóquio<br> </div> <div id="section"> <h1>Londres</h1> <p> Londres é a capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes. </p> <p> Localizada no Rio Tâmisa, Londres tem sido um grande assentamento por dois milênios, A sua história remonta à fundação pelos romanos, que a chamaram Londinium. </p> </div> <div id="footer"> Copyright codew3c.com </div> </body>
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>
Layout de site usando HTML5
Os novos elementos semânticos do HTML5 definem diferentes partes da página da web:
Elementos Semânticos HTML5
header | Define o cabeçalho de um documento ou seção |
nav | Define um contêiner para links de navegação |
section | Define uma seção dentro de um documento |
article | Define um artigo autônomo e contido |
aside | Define conteúdo adicional fora do conteúdo principal (por exemplo, barra lateral) |
footer | Define o rodapé de um documento ou seção |
details | Define detalhes adicionais |
summary | Define o título do elemento details |
Este exemplo usa <header>, <nav>, <section> e <footer> para criar uma layout de colunas múltiplas:
Exemplo
<body> <header> <h1>Galeria da Cidade</h1> </header> <nav> Londres<br> Paris<br> Tóquio<br> </nav> <section> <h1>Londres</h1> <p> Londres é a capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes. </p> <p> Localizada no Rio Tâmisa, Londres tem sido um grande assentamento por dois milênios, A sua história remonta à fundação pelos romanos, que a chamaram Londinium. </p> </section> <footer> Copyright codew3c.com </footer> </body>
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; }
Layout de HTML usando tabela
Nota:O elemento <table> não foi projetado para ser uma ferramenta de layout.
O elemento <table> é usado para exibir dados tabulares.
O elemento <table> pode ser usado para obter efeitos de layout, pois é possível configurar o estilo do elemento de tabela usando CSS:
Exemplo
<body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Nota" style="height:32px;width:32px"> </th> <td> O elemento de tabela não foi projetado para ser uma ferramenta de layout. </td> </tr> </table> </body>
CSS
<style> table.lamp { width:100%; border:1px solid #d4d4d4; } table.lamp th, td { padding:10px; } table.lamp td { width:40px; } </style>
- Página Anterior Cabeçalho do HTML
- Próxima Página Design Responsivo do HTML