HTML2

Precisa de Ajuda em HTML? Você veio ao lugar certo.

Copiar / Colar códigos HTML

Abaixo você encontrará os códigos HTML que você pode copiar e colar direto em seu website ou página do MySpace, etc

Descrição	Codigo	Resultado
Texto
Titulos	<h1>Título 1</h1> <h2>Titulo 2</h2> <h3>Categoria 3</h3> <h4>Rubrica 4</h4> <h5>Rubrica 5</h5> <h6>Rubrica 6</h6>	Título 1 Titulo 2 Categoria 3 Rubrica 4 Rubrica 5 Rubrica 6
Paragrafo	<p>Texto de parágrafo Normal.</p>	Texto de parágrafo Normal.
Quebra de Linha	quebra de linha que vem ... ... para cima. <br /> ...up.	quebra de linha que vem ... ... para cima. ...up.
Negrito	<b>Negrito.</b>	Negrito.
Italico Texto	<i>Italico texto.</i>	Italico texto.
Cor Texto	<p style="color:#cc9900">Cor texto.</p>	Cor texto.
Tamanho do texto	<p style="font-size:18pt">Tamanho do texto usando pontos.</p> <p style="font-size:18px">Tamanho do texto usando pixels.</p> <p style="font-size:larger">Tamanho do texto usando tamanhos relativos.</p>	Tamanho do texto usando pontos . Tamanho do texto usando pixels. Tamanho do texto usando tamanhos relativos .
Família de fontes	<p style="font-family:Georgia, Garamond, Serif;">Fonte Preferida.</p>	Fonte preferida.
Texto Pré-Formatado	<pre>Texto pré-formatado exibe exatamente como você digitá-lo ... ... quebras de linha, espaços e tudo</pre>	Texto pré-formatado exibe exatamente como você digitá-lo ... ... quebras de linha, espaços e tudo! !
Texto Teletipo	<tt>Teletype texto - por vezes referido como texto máquina de escrever.</tt>	Teletype texto - por vezes referido como texto máquina de escrever
Texto de citação.	<cite>Texto de citação.</cite>	Texto de citação..
Texto enfatizado	<em>Texto enfatizado.</em>	Texto enfatizado.
Texto Código	<code>Texto do código.</code>	Texto do código .
Texto Big	<big>Big texto.</big>	Big texto.
Texto Pequeno	<small>Texto pequeno.</small>	Texto pequeno.
Blockquote	O rótulo diz:<blockquote>Conteúdo não deve ser engolido. Isto é devido à grande quantidade de produtos químicos nocivos que tenha passado para essa bifana..</blockquote>	O rótulo diz: Conteúdo não deve ser engolido. Isto é devido à grande quantidade de produtos químicos nocivos que tenha passado para essa bifana..
Texto Excluido	<del>Excluir este texto.</del>	Excluir este texto.
Texto Inserido	<ins>Insira este texto.</ins>	Insira este texto.
Keyboard Texto	<kbd>Teclado texto - texto a ser digitado pelo usuário.</kbd>	Teclado texto - texto a ser digitado pelo usuário .
Cotação texto.	<q>Cotação texto..</q>	Cotação texto. .
Texto Amostra	<samp>Texto da amostra (saída de um programa de computador).</samp>	Texto da amostra (saída de um programa de computador) .
Texto Variável	<var>Texto variavel.</var>	texto variavel.
Definição	<dfn>Definiçao.</dfn>: Para definir o significado de uma palavra, frase ou termo..	Definição. : Para definir o significado de uma palavra, frase ou termo.
Imagens
Imagem	<img src="http://i.imgur.com/51RZO.jpg" width="225" height="151" alt="Alberto test" />
Imagem com borda	<img src="http://i.imgur.com/51RZO.jpg" width="225" height="151" alt="Alberto test" border="5" />
Imagem vinculada	<a href="http://xat.com/ajudapt_br"><img src="http://i.imgur.com/51RZO.jpg" width="225" height="151" alt="Alberto test" /></a>
Imagem com borda	<a href="http://xat.com/ajudapt_br"><img src="http://i.imgur.com/51RZO.jpg" width="225" height="151" alt="Alberto test" border="0" /></a>
Tabelas
Tabela básica	<table border="1"> <tr> <td>Célula da tabela 1</td><td>Célula da tabela 2</td> </tr> </table>	Célula da tabela 1 Célula da tabela 2
Tabela com os atributos cellpadding, cellspacing e largura	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <td width="20%">Célula da tabela 1</td><td>Célula da tabela 2</td> </tr> </table>	Célula da tabela 1 Célula da tabela 2
Tabela com uma linha de cabeçalho	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th>Cabeçalho da tabela</th> <th>Cabeçalho da tabela</th> </tr> <tr> <td width="20%">Célula da tabela 1</td><td>Célula da tabela 2</td> </tr> </table>	Cabeçalho da tabela Cabeçalho da tabela Célula da tabela 1 Célula da tabela 2
Tabelacom colspan Aplicada	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th colspan="2">Cabeçalho da tabela</th> </tr> <tr> <td width="20%">Célula da tabela 1</td><td>Célula da tabela 2</td> </tr> </table>	Cabeçalho da tabela Célula da tabela 1 Célula da tabela 2
Tabela com rowspan Aplicada	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th rowspan="2">Cabeçalho da tabela</th><td>Célula da tabela 1 </tr> <tr> <td>Célula da tabela 2</td> </tr> </table>	Cabeçalho da tabela Célula da tabela 1 Célula da tabela 2
Tabela com css Aplicada	<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:yellow;border:3px dashed black;"> <tr> <th style="text-align:left">Cabeçalho da tabela</th> <th style="text-align:left">Cabeçalho da tabela</th> </tr> <tr> <td width="20%">Célula da tabela 1</td><td>Célula da tabela 2</td> </tr> </table>	Cabeçalho da tabela Cabeçalho da tabela Célula da tabela 1 Célula da tabela 2
Formas
Básicas marcas de formulário (inserir todos os elementos do formulário entre essas tags)	<form> (Inserir elementos de formularioa aqui) </form>	(inserir aqui)
Entrada de texto	<input type="text" size="30" value="Aqui o texto" />
Area de texto	<textarea cols="10" rows="5">Seu comentario texto</textarea>	seu comentario texto
Botões de Rádio	<input type="radio" name="exemplo" value="Option1" /> Opção 1 <input type="radio" name="exemplo" value="Option2" /> Opção 2	Opção 1 Opção 2
Checkboxes	<input type="checkbox" name="exemplo" value="Option1" /> Opção 1 <input type="checkbox" name="exemplo" value="Option2" /> Opção 2	Opção 1 Opção 2
Selecione Lista	<select name="exemplo"><option value="Option1">Opção 1<option value="Option2">Opção 2<option value="Option3">Opção 3</select>	Opção 1 Opção 2 Option 3
Botão Submit	<input type="submit" value="enviar!" />
Botão de Imagem	<input type="image" src="http://i.imgur.com/Ncs4O.png" />
Listas
Lista ordenada (lista numerada)	<ol> <li>Lista item 1</li> <li>Lista item 2</li> <li>Lista item 3</li> </ol>	Lista item 1 Lista item 2 Lista item 3
Lista não ordenada (lista não numerada)	<ul> <li>Lista item 1</li> <li>Lista item 2</li> <li>Lista item 3</li> </ul>	Lista item 1 Lista item 2 Lista item 3
Lista de definição	<dl> <dt> Período 1</dt> <dd>Definição do termo Período 1</dd> <dt> Período 2</dt> <dd>Definição do termo Período 2</dd> </dl>	Período 1 Definição do termo Período 1 Período 2 Definição do termo Período 2
Frames
Online Frame	<iframe src="http://sdrimbcn.wordpress.com/" width="200" height="150" scrolling="auto" frameborder="1"> <!--This bit is only viewed by browsers that don't support inline frames --> Your browser doesn't support inline frames. </iframe>
Frames	The frameset (frame_example_frameset_1.html): <html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <noframes> <body>Your browser doesn't support frames. Therefore, this is the noframe version of the site.</body> </noframes> <frame src ="/html/tags/frame_example_left.html" /> <frame src ="/html/tags/frame_example_right.html" /> </frameset> </html> The left frame (frame_example_left.html): <html> <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame (frame_example_right.html): <html> <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html>	Ver resultado