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çalho H1
Cabeçalho H2
Cabeçalho H3
Cabeçalho H4
Cabeçalho H5
Cabeçalho H6
<i> . . . </i>
Bold (Exemplo de texto em bold):
<b> . . . </b>
Code (Exemplo de texto em "code"
):
<code> . . . </code>
Blink (Letras piscando):
<blink> . . . </blink>
É possível combinar listas "ol" e "ul" e também criar listas dentro de listas como no caso:
Termina uma linha de texto (pula para próxima linha):
Termina um parágrafo (pula duas linhas):
<br>
<p>
Colocando um texto pré-formatado:
<pre> coloque o texto aqui </pre>
"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>
<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:
<!-- . . . -->
Exemplo:
<!-- este texto não aprecerá na página -->
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"
align="left"
align="top"
Texto aqui
Comando utilizado:
<IMG WIDTH=100 HEIGHT=85 SRC="spiral.gif" align="top">Texto aqui
align="middle"
Texto aqui
Comando utilizado:
<img src="spiral.gif" align="middle">Texto aqui
align="bottom"
Texto aqui
Comando utilizado:
<img src="spiral.gif" align="bottom">Texto aqui
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).
O comando que estabelece esta ligação é:
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".