HTML - Referência Rápida - Fornecido por Mep Sites

HTML: Referência Básica e Rápida

Nota Importante: Para utilizar esta referência é necessário já ter os conhecimentos básicos de HTML sobre os temas abordados. Este material serve para consulta rápida e/ou revisão geral de conceitos, não necessariamente para estudo de HTML.

Editando os arquivos HTML no Bloco de Notas

Digite os comandos HTML em maiúsculas ou minúsculas, como preferir. É melhor que se faça em minúsculas.

Dê o nome do arquivo sem espaços, caracteres especiais nem acentos. A extensão deve ser .htm ou .html (escolha a melhor para você e em todas as suas páginas a utilize; não misture num mesmo site páginas com .htm e com .html, pois você pode se confundir depois).

O nome do arquivo da página de abertura do site deve ser index.html, index.htm, default.html ou default.htm, depende do servidor em que o site for ser hospedado. O mais comum é index.html.

Na hora de salvar pela primeira vez, escolha Salvar como, e na caixa 'Salvar como o tipo' escolha a opção 'Todos os arquivos'. É necessário utilizar essa opção para o correto funcionamento, senão o Bloco e Notas daria a extensão e tipo de arquivo de texto. Nas outras vezes que for salvar o mesmo arquivo, apenas clique em Salvar. Para editar uma página que está fechada, nunca use o 'Exibir código fonte'. Abra o Bloco de Notas, clique em Arquivo e escolha Abrir.

No navegador, para visualizar as alterações feitas, utilize o comando Atualizar (Recarregar, Reload). No Internet Explorer, basta pressionar a tecla F5, estando com a página já aberta.

Atributos dos comandos: Se forem palavras, textos ou expressões, sempre utilize aspas. Se forem números, nunca utilize aspas. Se for o código de uma cor, coloque sempre entre aspas e com o símbolo #.

Estrutura geral de toda página:

<html>
<head>
<title>
Seu título aqui
</title>
</head>
<body>

Conteúdo da página aqui

</body>
</html>

Cores gerais da página: altere a tag <body>:

Onde: text determina a cor dos textos; link determina a cor dos links; alink determina a cor dos links enquanto são clicados (links ativos); bgcolor determina a cor de fundo da página. Esses itens são opcionais, não é preciso usar todos.

Imagem de fundo: Coloque background="imagem.gif" dentro da tag <body>. Substitua imagem.gif pelo nome correto da imagem, e ela deve estar na mesma pasta dos arquivos do site. Se for jpg, coloque a extensão jpg. (ou a que for realmente). Exemplo: <body background="fundo002.jpeg">.

Textos e fontes: <font face="NomeDaFonte" size=X color="#cor">Texto aqui</font>

Em face coloque o nome da fonte (ex.: Arial, Verdana, Courier, etc). Em size coloque o tamanho, que vai de 1 (o menor) a 7 (o maior). O padrão é o 3. Em color, coloque o código da cor que o texto deve aparecer. (Há uma tabela de cores no site www.mepsites.cjb.net).

Subtítulos: <hX>Título</hX>, onde X é um número de 1 (o título maior) a 6 (o título menor). Não é recomendável usar esse comando; prefira colocar <font size=...>.

Negrito: <b>texto aqui</b> Exemplo

Itálico: <i>texto aqui</i> Exemplo

Sublinhado: <u>texto aqui</u> Exemplo Dica: nunca use sublinhado, pois o visitante pode pensar que é um link e tentar clicar.

Texto riscado: <s>texto aqui</s> ~~Exemplo~~

Texto sobrescrito: <sup>Texto aqui</sup>. Exemplo: Windows<sup>xp</sup> geraria Windows^xp

Texto subscrito: <sub>Texto aqui</sub>. Exemplo: x<sub>1</sub> geraria x₁

Texto em fonte tipo máquina de escrever: <tt>Texto aqui</tt> Exemplo

Texto tipo código de programação: <code>Texto aqui</code> Exemplo

Lista com marcadores:

Lista numerada:

Parágrafos:

<p align="alinhamento">Texto aqui</p>

Coloque no lugar de alinhamento left (esquerdo), right (direito), center (centralizdo), ou justify (justificado). Obs.: entre um parágrafo e outro, é deixado automaticamente uma linha em branco.
Cuidado: é align, não aling.

Blocos de texto:

<div align="alinhamento">Texto aqui</div>

Coloque em alinhamento left, right, center ou justify (como nos parágrafos). Este comando tem a vantagem de não deixar linhas em branco entre um bloco e outro.

Alinhamento centralizado: <center> Coisas centralizadas </center>

Pode ser usado com textos, imagens, tabelas ou outro item qualquer.

Alinhamento justificado: <blockquote> Texto aqui </blockquote>

Imagem:

Em src determine o nome da imagem (que deve estar na mesma pasta dos arquivos do site) ou o endereço completo (com http://). border determina uma borda, é sempre bom deixar o valor 0 (zero). width e height determinam, respectivamente, a largura e a altura da imagem, caso queira redimensioná-la. Não é necessário usar. Você deve colocar números proporcionais às dimensões reais da imagem, para não deformá-la. As medidas são dadas em pixels. Se não colocar esses atributos, ela aparece no tamanho original. hspace e vspace determinam, respectivamente, uma margem horizontal e vertical para a figura. É um espaçamento como uma margem, 'invisível', para distanciar a imagem do texto ou do que estiver ao seu redor (inclusive outras imagens). No lugar de alinhamento use left (para ela ficar a esquerda do texto que a precede), right (para ficar a direita do texto que a precede), ou center (para ficar centralizada).
Você pode ainda determinar o atributo alt="Texto alternativo aqui", que exibe um texto caso a imagem não seja localizada, ou se o navegador do usuário não interpretar imagens. Hoje em dia é comum aparecer uma mensagem na tela ao deixar o mouse parado sobre a figura por um instante. O texto que aparece é definido com esse atributo.

Links:

<a href="pagina.html">Clique aqui</a> (a página deve estar na mesma pasta dos arquivos do site)

Para e-mail: <a href="mailto:usuario@provedor.com.etc">Deixe sua mensagem</a>
Dica: coloque o próprio endereço entre <a...> e </a>, para aparecer o endereço do e-mail na tela.

Para outro site: <a href="http://www.mepsites.cjb.net">Mep Sites</a>
Para sites, use sempre o http://.
Dica: coloque o próprio endereço entre <a...> e </a>, para aparecer o endereço do site na tela.

Se quiser usar uma imagem como link, use a sintaxe <a href="..."><img src="..." border=0></a>

Âncoras - link na mesma página:

Antes você deve nomear cada local. Para nomear: <a name="Explicacao4">Explicação 4</a>. No lugar que você vai colocar o link, utilize: <a href="#Explicacao4">Veja a explicação 4</a>. Altere os textos de acordo com o que quiser. Não dê nomes aos locais com espaços, caracteres especiais nem acentos.

Comentários dentro do código: 
Serve para você mesmo que prepara a página ou alguém que veja o código dela ler a mensagem, como dicas e explicações. Os comentários não aparecem no navegador, são só para quem abrir os códigos mesmo.

Textos pré formatados: <pre>Texto aqui (pode dar enter e quebras de linhas)</pre>
Neste comando, os espaços que você der no código, e quebras de linha, serão respeitados, não precisando então usar <p> nem <br>. Geralmente os navegadores mostrarão o texto numa fonte monoespaçada, como a Courier, por exemplo.

Tabelas:

Imagine a seguinte estrutura:

<tabela>
<linha1>
<quadro1>Texto aqui</quadro1>
<quadro2>Texto aqui</quadro2>
<quadro3>Texto aqui</quadro3>
</linha1>
<linha2>
<quadro1>Texto aqui</quadro1>
<quadro2>Texto aqui</quadro2>
<quadro3>Texto aqui</quadro3>
</linha2>
<linha3>
<quadro1>Texto aqui</quadro1>
<quadro2>Texto aqui</quadro2>
<quadro3>Texto aqui</quadro3>
</linha3>
</tabela>

Pois bem, basta usar <table> em vez de tabela, <tr> em vez de linha1, linha2, etc e <td> em vez de quadros (células). Ficaria:

<table>
<tr>
<td>Texto aqui</td>
<td>Texto aqui</td>
<td>Texto aqui</td>
</tr>
<tr>
<td>Texto aqui</td>
<td>Texto aqui</td>
<td>Texto aqui</td>
</tr>
<tr>
<td>Texto aqui</td>
<td>Texto aqui</td>
<td>Texto aqui</td>
</tr>
</table>

Colorimos cada linha para você perceber melhor. Este exemplo geraria uma tabela de 3 linhas, com 3 colunas. Pode-se usar os atributos border (espessura da borda), borderColor (cor da borda), bgcolor (cor de fundo), backgound (imagem de fundo), entre outros, na tag <table> (para formatar a tabela inteira), ou então separadamente, em cada linha (na tag <tr>), ou ainda em cada célula da tabela (na tag <td>). Este último é o mais usado.
Nota importante: Se você usar 3 células na primeira linha, com três pares de <td>...</td>, deverá colocar 3 também em todas as linhas, senão poderá deformar toda a tabela.

Na tag <table> ainda podemos ter cellspacing=X (um valor numérico, em pixels) que indica um espaçamento entre cada célula da tabela, e cellpadding=X (também um número), que indica um enchimento em cada célula. É bom usar valores pequenos, como 3 ou 5, por exemplo.

Para mesclar a célula atual com as que vêm a sua direita, utilize colspan=X (coloque no lugar de X o número 2, ou 3, 4, depende do número de células a mesclar). Se forem linhas, utilize rowspan=X (para meaclar X linhas, para baixo da célula atual).

Frames (Quadros):

Na página index:

Este dividirá a tela em duas partes, na vertical (em duas colunas). Se quiser na horizontal, utilize rows em vez de cols. Na primeira ficará a página pagina1.html, e na segunda a página pagina2.html. O item noresize indica que ele não pode ser redimensionado pelo visitante. No lugar de valor1 você coloca, em pixels, a medida da largura do primeiro quadro. O asterisco no segundo, indica que o segundo ocupará o restante da tela.

Nos links você deve colocar <a href="NomeDaPagina.html" target="NomeDoQuadro">Clique aqui</a>.
Em NomeDoQuadro você dá o nome do quadro em que ela deverá ser aberta, corretamente, como você o definiu. No exemplo, seria "direito". Ao clicar no link, se você não colocar o nome do frame em que ele deverá abrir, ele se abrirá então no mesmo quadro em que estiver o link.

Você pode colocar em target (destino) também _blank, para o link se abrir numa nova janela, ou _top, para ele se abrir na mesma tela onde estão os quadros, limpando assim todos os quadros. Um exemplo para abrir o link em nova janela: <a href="pagina.html" target="_blank">Clique aqui</a>

Autor: Marcos Elias - Mep Sites - A web é sua! - http://www.mepsites.cjb.net

Clique aqui para pegar uma versão para impressão no formato PDF (você pode imprimir diretamente em folha tamanho A4, não é necessário reorganizar o texto nem configurar a página novamente). Você pode também clicar com o botão direito e escolher 'Salvar destino como...'.