Quinta-feira , 29 de Setembro de 2016
Home / Dicas / Código básico de HTML

Código básico de HTML

Etiquetas básicas

<html></html>
Coloque estas etiquetas no ínicio e no fim do seu documento

<head></head>
Estas etiquetas definem o cabeçalho

<body></body>
Estas etiquetas definem o corpo do documento

<title></title>
Lembre-se de que o título aparece na barra de título e não no documento.
Esta etiqueta aparece dentro do elemento HEAD

Atributos do BODY

<body bgcolor=?>
Define a cor do plano de fundo, usando o nome da cor ou o código hex

<body text=?>
Define a cor do texto, usando o nome da cor ou o código hex

<body link=?>
Define a cor do link, usando o nome da cor ou o código hex

<body vlink=?>
Define a cor do link visitado, usando o nome da cor ou o código hex

<body alink=?>
Define a cor do link activo, usando o nome da cor ou o código hex

Etiquetas de Texto

<pre></pre>
Pré-formatação. Esta etiqueta mantém as mudanças de linha e o espaçamento

<h1></h1>
Cria o maior título

<h6></h6>
Cria o menor título

<b></b>
Apresenta o texto em negrito

<i></i>
Apresenta o texto em itálico

<tt></tt>
Máquina de Escrever. Os caracteres são apresentados numa fonte de espaçamento único

<cite></cite>
Citação, os caracteres são normalmente apresentados em itálico

<em></em>
Dá ênfase a uma palavra (os caracteres são normalmente apresentados em itálico)

<strong></strong>
Apresenta o texto carregado

<font size=?></font>
Define o tamanho da fonte (de 1 a 7)

<font color=?></font>
Define a cor da fonte, usando o nome da cor ou o código hex

HYPERLINKS

<a href=”URL”></a>
Cria um hyperlink

<a href=”mailto:EMAIL”></a>
Cria um link de mailto

<a name=”NAME”></a>
Define um nome que sirva de alvo nos hyperlinks internos

<a href=”#NAME”></a>
Faz a ligação a um alvo interno

Formatação

<p></p>
Esta etiqueta produz o mesmo efeito que pressionar a tecla Enter num programa de processamento de texto; será inserida uma linha em branco entre dois parágrafos

<p align=?>
Alinha um parágrafo à esquerda (left), direita (right) ou centro (center)

<br>
Mudança de linha

<blockquote></blockquote>
Citação em bloco. A maioria dos browsers afastam o texto da margem esquerda, colocando-o mais para o interior

<dl></dl>
Lista de definição

<dt>
Termo de definição

<dd>
Texto de definição

<ol></ol>
Lista ordenada

<li></li>
Precede cada item da lista e adiciona um número

<ul></ul>
Lista não ordenada

<div align=?>
Uma etiqueta genérica usada para formatar grandes blocos de HTML

Elementos gráficos

<img src=”name”>
Adiciona uma imagem

<img src=”name” align=?>
Alinha uma imagem: left, right, center; bottom, top, middle

<img src=”name” border=?>
Define o tamanho do rebordo à volta da imagem

<hr>
Insere uma linha horizontal

<hr size=?>
Define o tamanho (height) da linha

<hr width=?>
Define a largura da linha, em percentagem ou valor absoluto

<hr noshade>
Cria uma linha sem sombra

Tabelas

<table></table>
Cria uma tabela

<tr></tr>
Utilize esta etiqueta dentro de etiquetas TABLE para definir as linhas da tabela

<td></td>
Utilize esta etiqueta dentro de etiquetas TR para definir a célula da tabela

<th></th>
Esta etiqueta define o cabeçalho da tabela, aparece a negro e centrada

Atributos das Tabelas

<table border=#>
Rebordo da tabela, em pixels

<table cellspacing=#>
Espaçamento da célula da tabela, em pixels

<table cellpadding=#>
Preenchimento da célula da tabela, em pixels

<table width=# or %>
Indicar um número em pixels ou percentagem de largura do espaço disponível na janela

<tr align=?> or <td align=?>
Define o alinhamento das células (left, center, or right)

<tr valign=?> or <td valign=?>
Define o alinhamento vertical das células (top, middle, or bottom)

<td colspan=#>
Indicar o número de colunas que pretende abranger

<td rowspan=#>
Indicar o número de linhas que pretende abranger (default=1)

<td nowrap>
Com esta etiqueta, não haverá mudanças de linha na célula

FRAMES

<frameset></frameset>
Etiqueta num documento estruturado

<frameset rows=”value,value”>
Define as linhas num frameset, usando pixels ou percentagem para a largura

<frameset cols=”value,value”>
Define as colunas num frameset, usando pixels ou percentagem para a largura

<frame>
Define uma só frame – ou região – numa frameset

<noframes></noframes>
Define o que irá aparecer em browsers que não suportam frames

Atributos de FRAME

<frame src=”URL”>
Especifica qual o documento HTML que deverá aparecer

<frame name=”name”>
Dá o nome à frame, ou região, para que seja localizada por outras frames

<frame marginwidth=#>
Define a margem esquerda e direita da frame; deve ser igual ou maior que 1

<frame marginheight=#>
Define as margens de topo e de fundo da frame; deve ser igual ou maior que 1

<frame noresize>
Previne que o utilizador altere o tamanho da frame

Formulários

<form></form>
Cria todos os formulários

<select multiple name=”NAME” size=?></select>
Cria uma caixa de lista de escolha múltipla. Size define o número de items da lista visíveis antes de começar a procura

<option>
Opção na lista

<select name=”NAME”></select>
Cria uma caixa de lista

<textarea name=”NAME” cols=40 rows=8></textarea>
Cria uma caixa de inserção de texto. Colunas (cols) definem a largura (width); linhas (rows) definem a altura (height)

<input type=”checkbox” name=”NAME”>
Cria uma caixa de verificação

<input type=”radio” name=”NAME” value=”x”>
Cria um botão de rádio

<input type=text name=”foo” size=20>
Cria uma área com uma linha de texto. O comprimento máximo é em caracteres

<input type=”submit” value=”NAME”>
Cria um botão “submit”

<input type=”image” border=0 name=”NAME” src=”name.gif”>
Cria um botão “submit” usando uma imagem

<input type=”reset”>
Cria um botão “reset”

Retirar o sublinhado de um Link

<STYLE type=”text/css”>A:link {color:black;text-decoration:none} A:visited {color:black ; text-decoration:none} A:active {color:black ; text-decoration:none}</STYLE>

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *