Guia de Referência HTML e XHTML

Comforme pedido de um dos visitantes deste blog propôs, estou aqui publicando referente aos documentos que possuo um Guia de Referência em HTML, com as principais TAGS e Estruturas básicas, que no dia-a-dia precisamos para editar quaisquer tipo de código, sendo referência em outras linguagens, tais como:

Inicio de Aprendizado no CSS, Javascript, XHTML;
Inicio de tantas outras linguagens de programação para a WEB.

Indice:

Template básico
CSS media
Tipos de META
Listas
Sintaxes
Geral
Links
Estrutura
Frames
HEAD
Tabela: tags
Listagem
FORM - Formulários
Carcteres Especiais mais utiliado
Tabela: Template
Tipos de input

Legendas:
/ = Barra de fechamento de tags
tag = nome da tag
atributo = nome do atributo a ser inserido
? = atributo a ser inserido
* = Em HTML não é necessário fecha-lo
* = Em XHTML pode-se fechar com uma barra dentro da mesma Tag: />

Template: Este é um template básico de construção de qualquer site.

Para o Índice

<html>
<head>
<title></title>
Meta tags...
CSS...
Javascript...
</head>
<body>
Conteúdo da página
</body>
</html>

CSS Media

Para o Índice

all
handheld
print
projection
screen

Tipos de META

Para o Índice

http-equiv
name

Listas

Para o Índice <ol>
<li>
</li>
</ol>
<ul>
<li>
</li>
</ul>

Sintaxes do HTML e XHTML, vale lembrar que o blogger utiliza o padrão XHTML, que fecha obrigatóriamente as Tags

Para o Índice

Básico - Isto é uma demostração de como inserir as tags no seu documento

HTML: <tag></tag>
XHTML: <tag></tag>

Com Atributos:

HTML: <tag atributo="?"> ou <tag atributo="?">conteúdo</tag>
XHTML: <tag atributo="?"/> ** ou <tag atributo="?">conteúdo</tag>, no XHTML este segundo método é usado apenas nas tags que contenham conteúdo.

**Existe uma pequena diferença nos dois observe que no HTML as tags não são obrigatóriamente fechadas como no caso do XHTML que é feito o fechamento das tags, dá mais trabalho, mas compensa, pois os navegadores gastam tempo procurando fechamento de tags.

Geral

Para o Índice <body> Parte visível da página
<head> Parte não visível da página
<html> Cria uma página HTML
<title>Dá título à página

Links

Para o Índice <img src="URL">* Mostra uma imagem
<a href="#?">Link para uma âncora na página
<a href="URL">Link para outra página
<a href="URL#?">Link para uma âncora em outra página
<a href="mailto: EMAIL">Link de email

Estrutura

Para o Índice

<br>* Break Row - Quebra de linha
<code>Listagem de código
<div> Estrutura de formato ou bloco de texto
<hr> Linha horizontal
<p> Parágrafo
<pre> Texto pré-formatado
<span> Formatação in-line
<strong> ou <b> Texto em negrito
<sub> Texto em _Subescrito

<sup> Texto em ^Sobreescrito
<em> Texto em itálico
<h1>..<h6>Cabeçalhos da página de h1 à h6

FRAMES

Para o Índice <frame> Define um Frame simples
<frameset>Documento Frame, documento HTML com alguns frames
<iframe> Frame in-line, pode-se colocar em qualquer local da página

HEAD - Cabeçalho

Para o Índice

Tabela - Tags

Para o Índice <caption> Capitulo da Tabela
<table> Define uma Tabela
<tbody> Corpo do elemento <table>, o mesmo que<body> em <html>
<tfoot> Rodapé da tabela
<thead> Seção de cabeçalho da tabela
<tr> Insere uma linha
<th> Celulas do cabeçalho
<th colspan=”?”> ? = Número de colunas usado pela célula de cabeçalho
<td> Insere uma Célula
<td colspan=”?”> ? = Número de colunas usado pela célula
<td rowspan=”?”> ? = Número de linhas usado pela célula

Listagem

Para o Índice<dd> Definição
<dl> Lista de definição
<dt> Termo de definição
<ol> Lista ordenada
<ul> Lista não-ordenada

<li> Item em uma lista

FORM - Formulários

Para o Índice <form> Define um formulário
<fieldset> Grupo de formulários relativos
<option>Item de menu em uma caixa de seleção
<select> Menu Drop-Down
<textarea>Área de texto, multi linha
<input type="?">* Elemento do formulário

Caracteres especiais mais utilizados

Para o Índice  Spaço em branco, equivale a um "SPACE"
" Aspas "
& "E" comercial &
< Maior >
> Menor <

Tabela - Template

Para o Índice <table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
</table>

Template de tabela com todas as seções incluidas: Cabeçalho <thead>, Corpo <tbody> e Rodapé <tfooter>

Tipos de Input

Para o Índice Estes comando são utilizados em <input type="AQUI">

button
checkbox
file
hidden
image
password
radio
reset
submit
text

Bom Chego ao fim deste guia e agradeço caso encontrem algum erro, mandem um comentário sobre o mesmo.
Logo, Guia de Caracteres especiais...
Aproveitem e assinem o nosso FEED http://feeds.feedburner.com/indiceblogger

Guia de Referência HTML e XHTML