| Início » Tutoriais » Tutorial HTML |
Layout do siteA maioria dos sites têm colocado o seu conteúdo em várias colunas (formatado como uma revista ou jornal). Várias colunas são criadas usando <div> ou elementos <table>. CSS são utilizadas para posicionar elementos, ou para criar fundos ou look colorido para as páginas. <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Título principal da página</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">O conteúdo fica aqui</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © Agente Webmaster</div> </div> </body> </html> O código HTML acima produzirá o seguinte resultado: Título principal da páginaO conteúdo fica aqui
Layouts HTML - Usando TabelasUma maneira simples de criar layouts é usando a tag <table> HTML. Várias colunas são criadas usando <div> ou elementos <table>. CSS são utilizadas para posicionar elementos, ou para criar fundos ou um visual colorido para as páginas. Usando <table> para criar um layout agradável não é o uso correto do elemento. O objetivo do elemento <table> é exibir dados tabulares! O exemplo a seguir usa uma tabela com 3 linhas e 2 colunas - a primeira e última linha se estende por ambas as colunas usando o atributo colspan: <!DOCTYPE html> <html> <body> <table style="width:500px;" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1 style="margin:0;padding:0;">Título principal da página</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;vertical-align:top;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;"> O conteúdo da página aqui</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright © Agente Webmaster</td> </tr> </table> </body> </html> Veja como fica o código acima:
HTML Layout - Dicas úteisDica: A maior vantagem do uso de CSS é que, se você colocar o código CSS em uma folha de estilo externa, seu site se torna muito mais fácil de manter. Você pode alterar o layout de todas as suas páginas, editando um arquivo. Dica: Porque layouts avançados ter tempo para criar, uma opção mais rápida é usar um modelo. Pesquisa do Google para modelos de site gratuito (estes são layouts de sites pré-construídos que você pode usar e personalizar). Tags de layout HTML
Em caso de dúvida, você pode tirar nos comentários. | |||||||||||||
| Visualizações: 2052 | | |||||||||||||
| Total de comentários: 0 | |
