Ir para o conteúdo

Referência rápida de HTML

Comentários

<!-- Comentários -->

Tags Básicas

<html></html> <!-- Abrir e fechar HTML -->
<head></head> <!-- Cabeçalho -->
<title></title> <!-- Título -->
<body></body> <!-- Corpo da página -->
<h1></h1> <!-- Heading 1 -->
<h2></h2> <!-- Heading 2 -->
<h3></h3> <!-- Heading 3 -->
<h4></h4> <!-- Heading 4 -->
<h5></h5> <!-- Heading 5 -->
<h6></h6> <!-- Heading 6 -->
<p></p> <!-- Parágrafo -->
<br> <!-- Quebra de linha -->
<hr> <!-- Linha horizontal -->
<table></table> <!-- Tabela -->
<tr></tr> <!-- Linha de uma tabela -->
<td></td> <!-- Coluna de uma tabela -->
<a href="pagina.html" > <!-- Hiperligação -->
<form></form> <!-- Formulário -->
<input> <!-- Input -->
<textarea></textarea> <!-- Área de texto -->
<label></label>  <!-- " Legenda " -->
<fieldset></fieldset> <!-- " Legenda " -->
<legend></legend> <!-- Legenda -->
<select></select> <!-- Conjunto de opções -->
<optgroup></optgroup> <!-- Grupos de opções -->
<option></option> <!-- Opção -->

Atributos

<p align="center"> <!-- Alinhar parágrafo ao centro -->
<p align="justify"> <!-- Alinhar parágrafo justificado -->
<p align="left"> <!-- Alinhar parágrafo à esquerda -->
<p align="right"> <!-- Alinhar parágrafo à direita -->
<table style=""> <!-- Usar para colocar Tag's CSS -->
<table class=""> <!-- Classe de um CSS -->
<table background="url_da_imagem.extensão"> <!-- Definir uma imagem de fundo -->
<table bgcolor=""> <!-- Definir uma cor de fundo -->
<table border=""> <!-- Definir a borda -->
<table bordercolor=""> <!-- Definir a cor da borda -->
<table cellpadding=""> <!-- Definir o espaço entre o texto e as bordas das <td>'s -->
<table cellspacing=""> <!-- Definir o espaçamento entre células -->
<table width=""> <!-- Definir a largura -->
<table height=""> <!-- Definir a altura -->
<td colspan=""> <!-- Unir colunas -->
<td rowspan=""> <!-- Unir linhas -->
<form enctype="application/x-www-form-urlencoded"> <!-- Método padrão -->
<form enctype="multipart/form-data"> <!-- Usado para upload -->
<form enctype="text/plain"> <!--  -->
<form method="get"> <!-- Envia os valores dos inputs pelo url -->
<form method="post"> <!-- Envia os valores ao servidor em um bloco de dados -->
<form name=""> <!-- Nome do formulário -->
<input type="button"> <!-- Botão -->
<input type="checkbox"> <!-- Escolher várias opções -->
<input type="file"> <!-- Procurar um arquivo (usado normalmente para uploads) -->
<input type="hidden"> <!-- Input escondido -->
<input type="password"> <!-- Mostrar símbolos ao escrever, ao invés das letras/números/outros -->
<input type="radio"> <!-- Várias opções das quais só podemos escolher uma -->
<input type="reset"> <!-- Limpar o formulário -->
<input type="submit"> <!-- Enviar o formulário -->
<input type="text"> <!-- Input de texto -->
<label for=""> <!-- " Legenda " para 'nome_do_input' -->
<option value=""> <!-- Valor da opção -->
<img src="http://example.com/img.jpg" alt="descrição alternativa da imagem"> <!-- Imagem -->

Formatação de texto

<b></b> <!-- Negrito -->
<i></i> <!-- Itálico -->
<small></small> <!-- Pequeno -->
<big></big> <!-- Grande -->

Atributos de hiperligações

<!-- Abrir links em... -->
<a href="pagina.html" target="_blank">  <!-- novo separador/janela               -->
<a href="pagina.html" target="_parent"> <!-- frame-mãe                           -->
<a href="pagina.html" target="_self">   <!-- frame onde originou o click         -->
<a href="pagina.html" target="_top">    <!-- frame "de topo" (ou seja, a janela) -->
<a href="pagina.html" target="nome">    <!-- frame de nome "nome"                -->

<a name="nome">  <!-- Nome da âncora (pode ser acedida com um link que aponte para #nome)  -->
<a title="">     <!-- Com o rato em cima da Hiperligação, mostra o que estiver entre aspas -->
<a accesskey=""> <!-- Atalho para a hiperligação -->

<a href="mailto:mail@mail.com?subject=Assunto%20do%20email"> <!-- Abrir Cliente de email com o campo "assunto" preenchido -->

Listas

<ol> <!-- Define uma lista ordenada -->
<ul> <!-- Define uma lista não ordenada -->
<li> <!-- Define um item da lista -->
<dl> <!-- Define uma lista de termos -->
<dt> <!-- Define um termo -->
<dd> <!-- Define uma descrição de um termo -->

Atributos e características de elementos de formulários

<input accesskey="" /> <!-- Atalho para input -->
<input class=""> <!-- Classe de um CSS -->
<input maxlength=""> <!-- Máximo número de caracteres -->
<input height=""> <!-- Altura -->
<input id=""> <!-- Id -->
<input name=""> <!-- Nome -->
<input readonly="readonly"> <!-- Apenas ler, isto é, o utilizador não pode mudar o seu valor -->
<input size=""> <!-- Tamanho -->
<input value=""> <!-- Valor por defeito -->
<input type="text" disabled="disabled"> <!-- Desabilitado. Semelhante ao " readonly ", mas não dá para ler -->
<input type="radio" checked="checked"> <!-- Valor selecionado pro defeito -->
<input type="checkbox" checked="checked"> <!-- Valor selecionado pro defeito -->
<textarea cols=""> <!-- Largura -->
<textarea rows=""> <!-- Altura -->

Atributos de imagens

<img alt=""> <!-- Descrição -->
<img height=""> <!-- Altura -->
<img width=""> <!-- Largura -->
<img title=""> <!-- Título -->

Exemplos

Documento Básico HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Título da página</title>
  </head>
  <body>
    Texto
  </body>
</html>

Documento Básico XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Título da página</title>
   </head>
   <body>
   Texto
   </body>
</html>

Documento Básico XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Título da página</title>
   </head>
   <body>
   Texto
   </body>
</html>

Documento Básico XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Título da página</title>
   </head>
   <body>
   Texto
   </body>
</html>

Documento Básico HTML 5

<!DOCTYPE html> 
<html>
  <head>
    <title>Título da página</title>
  </head>
  <body>
    Texto
  </body>
</html>

Elementos Heading

<h1>A a a - Grande</h1>
<h2>A a a</h2>
<h3>A a a</h3>
<h4>A a a</h4>
<h5>A a a</h5>
<h6>A a a - Pequeno</h6>

Elemento de Texto

<p>Parágrafo</p>
<br>Quebra de linha
<hr>Linha horizontal

Estilos Lógicos

<em>Ênfase</em>
<strong>Ênfase forte</strong>

Ideia: Mais detalhes sobre a diferença entre b, strong, i e em aqui.

Estilos Físicos

<b>Negrito</b>
<i>Itálico</i>

Hiperligações

<a href="http://www.exemplo.com/">Hiperligação</a>
<a href="http://www.exemplo.com/"><img src="URL_DA_IMAGEM" alt="Texto alternativo"></a>
<a href="mailto:mail@mail.com">Enviar e-mail</a>

Hiperligações na mesma página

<a name="nome">Clica</a>
<a href="#nome">Vieste para aqui por teres clicado em "Clica"</a>

Lista Não Ordenada

<ul>
<li>Uma coisa</li>
<li>Outra coisa</li>
</ul>

Lista Ordenada

<ol>
<li>Um</li>
<li>Dois</li>
</ol>

Lista de Definições

<dl>
<dt>Termo um</dt>
<dd>Definição</dd>
<dt>Termo dois</dt>
<dd>Definição</dd>
</dl>

Tabelas

<table border="1">
<tr>
<td colspan="2">Junção de duas colunas</td>
</tr>
<tr>
<td>Coluna um</td>
<td>Coluna dois</td>
</tr>
</table>

Formulários

<form action="pagina.ext" method="post/get">

<input type="text" name="Nome" value="Luis" size="30" maxlength="50">
<input type="password" name="Senha">
<input type="checkbox" checked="checked" name="Checkbox" value="check1">
<input type="checkbox" name="Checkbox" value="check2">
<input type="radio" checked="checked" name="Radio" value="rad1">
<input type="radio" checked="checked" name="Radio" value="rad2">
<select name="Select">
   <optgroup label="Sumos">
      <option>Coca-cola</option>
      <option>Sumol</option>
    </optgroup>
   <optgroup label="Vinhos">
      <option selected>Casal Garcia</option>
      <option>Gazela</option>
    </optgroup>
</select>
<textarea name="Comentario" rows="60" cols="20"></textarea>
<input type="reset">
<input type="submit" name="enviar" value="Enviar formulário">
</form>