Tutoriais Básicos de HTML

Mídia HTML

Manual de referência HTML

HTML5 Tutoriais Básicos

HTML5 API

HTML5 Mídia

Reprodução de Vídeo (Video) HTML Blocos HTML

Layout HTML

A disposição razoável da página é muito importante, não apenas determina a beleza da página, mas também afeta a experiência do usuário; uma má disposição da página, a experiência do usuário será muito ruim e será difícil reter os usuários.

Modos de implementação de layout HTML

1、Pode usar o modo de tabela Html table para construir o layout da página, e então preencher o conteúdo.
2、Usar div, combinado com float ou flex para layout da página.

Exemplo simples de layout com tabela

Exemplo

<!DOCTYPE html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>Tabela</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td colspan="2"　align="center"　style="background:　#0395e1">Navegação superior</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　Conteúdo<br>Internacional<br> <br>Lateral
　　　　　　　　　　</td>
　　　　　　　　　　<td　style="background:　red"　align="center"　width="400px">
　　　　　　　　　　　　　　Conteúdo principal
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td colspan="2"　style="background:　darkorchid"　align="center">Base</td>
　　　　　　</tr>
　　</table>
</body>
</html>

Teste e veja ‹/›

Mais exemplos online

Layout de página usando o elemento <div>
Como usar o elemento <div> para adicionar layout.

Layout de página usando a etiqueta <table>
Como usar a etiqueta <table> para adicionar layout.

Layout do site

A maioria dos sites organiza o conteúdo em várias colunas (como revistas ou jornais).

A maioria dos sites pode usar elementos <div> ou <table> para criar colunas múltiplas. CSS é usado para posicionar elementos ou criar uma aparência de página rica em cores e fundos.

Embora possamos usar a etiqueta HTML table para projetar um layout bonito, a etiqueta table não é recomendada como ferramenta de layout - A tabela não é uma ferramenta de layout.

Layout HTML - Usando o elemento <div>

O elemento div é um elemento de bloco usado para agrupar elementos HTML.

Abaixo está um exemplo usando cinco elementos div para criar um layout de colunas múltiplas:

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Tutorial Básico (oldtoolbag.com)</title>　
</head>
<body>
　
<div　id="container"　style="width:520px">
　
<div　id="header"　style="background-color:#FFA300;">
<h1　style="margin-bottom:0;">Principais páginas da webH1Título</h1></div>
　
<div　id="menu"　style="background-color:#FF9a00;height:200px;width:120px;flot:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
　
<div id="content" style="background-color:#dddddd;height:200px;width:400px;float:left;">
O conteúdo está aqui</div>
　
<div id="footer" style="background-color:#FFA300;clear:both;text-align:center;">
Direitos autorais © Tutorial Básico (oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

Teste e veja ‹/›

O código HTML acima resultará em:

Layout HTML - Usar a tabela

Usar a etiqueta HTML <table> é uma maneira simples de criar um layout.

A maioria dos sites pode usar os elementos <div> ou <table> para criar colunas múltiplas. O CSS é usado para posicionar elementos ou criar uma aparência rica em cores para a página.

Embora você possa usar a tabela HTML para criar layouts bonitos, o objetivo do design da tabela é apresentar dados tabulares - A tabela não é uma ferramenta de layout!

O exemplo a seguir usa uma tabela de três linhas e duas colunas - A primeira e a última linha usam a propriedade colspan para ocupar duas colunas:

Exemplo

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Tutorial Básico (oldtoolbag.com)</title>　
</head>
<body>
　
<table width="520" border="0">
<tr>
<td colspan="2" style="background-color:#FFB500;">
<h1>Principais títulos de página H1Título</h1>
</td>
</tr>
　
<tr>
<td style="background-color:#FFB700;width:120px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#DDDDDD;height:200px;width:400px;">
O conteúdo está aqui</td>
</tr>
　
<tr>
<td colspan="2" style="background-color:#FFB500;text-align:center;">
Direitos autorais © Tutorial Básico (oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

Teste e veja ‹/›

Layout HTML - CSS Essencial

A maior vantagem do CSS é que, se o código CSS for armazenado em uma tabela de estilo externa, o site será mais fácil de manter e terá mais flexibilidade na definição de estilos. Modificando o arquivo da tabela de estilos CSS, você pode alterar a disposição de todas as páginas. Para aprender mais sobre CSS, acesse nossoTutorial de CSS。

Etiquetas de Layout do HTML

Etiqueta	Descrição
<div>	Define um bloco de documento, bloco (block-level)
<span>	Define span, usado para combinar elementos inline no documento.

Reprodução de Vídeo (Video) HTML Blocos HTML