HTML - Listagem de comandos

Título do documento:

<title> escreva aqui o titulo da pagina </title>

Ou seja, escreva <title> no início do título e </title> para avisar que já terminou o título.

Evite usar acentuação dentro do title pois é o gerenciador de janelas (window manager) quem interpreta o title e não o software de navegação e muitas vezes o gerenciador de janelas não suporta caracteres acentuados.

O título deve ser o mais explicativo possível porem, compacto (no máximo uma linha).

Cabeçalhos (Headers):

Cabeçalhos podem ser usados em qualquer parte da página em HTML para dar destaque maior ou menor a algum termo do texto. Existem 6 tamanhos de cabeçalhos e eles são usados da seguinte forma:

<h1> . . . </h1> Cabeçalho H1

<h2> . . . </h2> Cabeçalho H2

<h3> . . . </h3> Cabeçalho H3

<h4> . . . </h4> Cabeçalho H4

<h5> . . . </h5> Cabeçalho H5

<h6> . . . </h6> Cabeçalho H6

Tipos de letra:

Itálico (Exemplo de texto em itálico):

<i> . . . </i>

Bold (Exemplo de texto em bold):

<b> . . . </b>

Code (Exemplo de texto em "code"):

<code> . . . </code>

Blink (Letras piscando):

<blink> . . . </blink>

Listas:

Criando uma lista de elementos tipo "ul" (Unordered List):

O exemplo:

Exemplo
de lista
não ordenada

Foi criada com o comando <ul> . . . </ul> (que afasta todo o conteúdo para a direita) combinado com o comando <li> (cria uma marca na frente de cada item), escrito da seguinte forma:

<ul>

<li> Aqui vai um item da lista

<li> Aqui vai o proximo item.

<li> E pronto.

</ul>

Criando uma lista de elementos tipo "ol" (Ordered List):

Exemplo
de lista
ordenada.

A diferença da lista tipo "ul" é que neste caso cada item possui um número na sua frente, colocado automaticamente por cada <li> encontrado.

<ol>

<li> Aqui vai um item da lista

<li> Aqui vai o proximo item.

<ol>

É possível combinar listas "ol" e "ul" e também criar listas dentro de listas como no caso:


 Item A
 
  Um sub-item do A
  
Outro sub-item do A
 
 
Item B
 
Item C

Formatando o texto na página:

Ao escrever um texto em HTML, a formatação (espaços entre uma palavra e outra e distância entre uma linha e outra) não é interpretada, ou seja, é preciso incluir comandos de quebra de linha, parágrafo e de texto pré-formatado como os que seguem:

Termina uma linha de texto (pula para próxima linha):

<br>
Termina um parágrafo (pula duas linhas):

<p>

Para pular várias linhas, não adianta usar diversos <p> seguidos. O que pode ser feito para pular diversas linhas é usar o comando <pre>, seguido de alguns "Enter" e depois o comando </pre> para terminar.

Colocando um texto pré-formatado:

<pre> coloque o texto aqui </pre>

Exemplo de texto pré-formatado:

              "Este   é   um texto
                           pre-formatado."

Normalmente a apresentação de um texto formatado pelo comando pre é pior do que a de um texto formatado pelos comandos de formatação do HTML.

Iniciando um parágrafo de texto:

<dd>

Este comando <dd> afasta a primeira linha do texto que vem a seguir dele um pouco para a direita.

Interpretando o HTML como se fosse texto puro (.txt):

<plaintext>

Deste comando para frente tudo é interpretado como texto puro, ignorando os comandos do HTML, mostrando os comandos junto com o texto.

Centralizando textos e imagens:

<center> . . . </center>

Criando linhas de separação:

O comando <hr> cria uma linha horizontal em uma página e pode ser utilizado com alguns atributos:

<hr size=altura_da_linha width=largura align=alinhamento>

Onde a largura pode ser definida em pixels (width=100 por exemplo) ou em porcentagem do tamanho horizontal da tela (width=30% por exemplo).

Exemplo:
<hr size=8 width=50% align=right>
cria uma linha com 8 pixels de altura, com largura igual a 50% do tamanho da tela, alinhada à direita, como a seguinte:

Uma linha mais sólida pode ser criada usando o atributo noshade junto com o hr, como no exemplo:
<hr width=30% noshade>
Gera a linha:

Diversos:

Colocando comentários no HTML:

Exemplo:

Colocando imagens dentro da tela:

As imagens que aparecem nas páginas da WWW podem estar no formato GIF ou JPEG. O formato JPEG não é compatível com todos os programas de acesso e pode resultar em perda de qualidade na imagem, porém, costuma ser de menor tamanho (em kbytes) do que o formato GIF.

O comando para colocar uma imagem é:

<img src="imagem">

Sendo "imagem" o nome da imagem ou o endereço onde ela se encontra.

Exemplos:

<img src="tela.gif">
Inclui uma imagem chamada "tela.gif"

<img src="images/tela.gif">
Busca a imagem "tela.gif" dentro do diretorio "images"

<IMG WIDTH=87 HEIGHT=60 SRC="http://www.lsi.usp.br/icones/lsi2.gif">
Busca a imagem "lsi2.gif" no endereço "www.lsi.usp.br", dentro do diretório "icones"

Alguns parâmetros podem ser utilizados com o img src:

Alinhamento:
<img src="imagem" align="alinhamento">

Os tipos possíveis para "alinhamento" são:

align="right"
Posiciona a imagem à direita da tela.

align="left"
Posiciona a imagem à esquerda da tela.

align="top"
Faz o texto que vem em seguida da imagem apareça na frente da parte superior da imagem da seguinte forma:

Texto aqui

Comando utilizado:
<IMG WIDTH=100 HEIGHT=85 SRC="spiral.gif" align="top">Texto aqui

align="middle"
Faz o texto aparecer no meio da imagem:

Texto aqui

Comando utilizado:
<img src="spiral.gif" align="middle">Texto aqui

align="bottom"
Faz o texto aparecer na parte inferior da imagem:

Texto aqui

Comando utilizado:
<img src="spiral.gif" align="bottom">Texto aqui

Outros parâmetros para imagem são:

Espessura da borda de uma imagem-link:

<img src="imagem" border=n>

Sendo "n" um número equivalente à espessura em número de pixels da borda da imagem. Este parâmetro é usado quando a imagem é um link para outro documento, pois imagens que são links ganham automaticamente uma borda azul fina (assim como textos que são links ficam sublinhados em azul).

Imagem Mapeada:

<img src="imagem" ismap>

Este parâmetro é usado para imagens que são links mapeados, ou seja, clicando em diferentes partes de uma imagem, diferentes localidades ou arquivos podem ser acessados.

Informações sobre mapeamento de imagens podem ser encontradas no endereço:
http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

Imagem como padrão de fundo: Para se colocar imagens ou mudar as cores do fundo da tela, o comando usado é:

<body background="imagem"> . . . </body>

Este comando deve ser usado logo após o comando title. O comando </body> (finaliza o conteúdo de uma página) deve ficar na última linha da página. A "imagem" especificada no comando de "background" será usada como um padrão repetido como fundo da tela. Deve-se tomar cuidado para que a cor das letras e dos links sejam bem escolhidas para facilitar a leitura em fundos de cor escura.

Se for desejado criar uma cor de fundo para a página, pode ser usado o comando:

Onde rr (red), gg (green) e bb (blue) são valores em hexadecimal (de 00 até FF) que definem uma cor. Exemplos: #0000ff é a cor azul pura. #7f7f7f é uma tonalidade de cinza. #ffff00 é amarelo.

As cores do texto de uma página podem ser mudadas com os seguintes comandos:

<BODY text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"> . . . </body>

Sendo que text define a cor do texto (normalmente prta), link define a cor de um link de hipertexto (normalmente azul), vlink a cor de links que já foram visitados (normalmente violeta) e alink (Active Link) a cor dos links enquanto eles estão pressionados (normalmente vermelha).

Hipertexto: Hyperlinks ou Âncoras

Uma palavra ou imagem dentro de uma página pode ser um link (também chamado de âncora) para outro documento. Ou seja, uma ligação entre algum elemento da página e um outro arquivo.

O comando que estabelece esta ligação é:

<a href="URL"> . . . </a>

Sendo o URL (Universal Resource Locator) o nome ou endereço do arquivo a ser chamado.

Exemplos:

<a href="spiral.gif">Veja esta espiral</a>

Faz com que a imagem "spiral.gif" apareça na tela quando a expressão "Veja esta espiral" é selecionada.

<a href="http://www.usp.br/">Universidade de São Paulo</a>

Faz com que, ao selecionar "Universidade de São Paulo", apareca a tela que existe no endereço "http://www.usp.br/".

Um link pode ser feito não só para outros arquivos (exemplos acima) como também para diferentes lugares dentro de um mesmo documento. Para isso, é preciso dar nomes para as partes de interesse de um determinado documento, da seguinte forma:

<a name="nomequalquer> . . . </a>

Este comando define um nome para um texto dentro do documento.

Para estabelecer uma ligação entre uma expressão do documento e a parte do documento chamada "nomequalquer", usa-se:

<a href="#nomequalquer"> . . . </a>

Caso a ligação seja para outro documento, o comando é semelhante:

<a href="URL#nomequalquer"> . . . </a>

Sendo URL o endereço do documento que possui uma região chamada "nomequalquer".