HTML

Aqui, uma apostila de HTML para aprender a fazer páginas da Web:

 

Tabela de Cores

TEXT ð Cor dos textos da página (em RGB)

Ex..: <body text=#000000> Os textos serão exibidos em cor preta.

LINK ð Especifica a cor dos links não visitados.

Ex..: <body link=#FFFF00>

VLINKð Especifica a cor dos links visitados.

ALINKð Especifica a cor do link acionado no momento.

Obs.: É possível a combinação de vários atributos.

Ex..: <body bgcolor=#000000 text=#FFFF00 link=#FF0000>

I - Começando sua Home Page

Todo documento deve ser identificado como HTML (<html> </html>), ter uma área de cabeçalho (<head>< /head>)com o nome para o documento (<title> </title>), um título principal e uma área definida como corpo(<body></body>) do conteúdo do documento. Como o exemplo a seguir:

<HTML>

<HEAD>

<TITLE>Ex.emplo de HTML mínimo</TITLE>

</HEAD>

<BODY>

<H1>Este é o primeiro nível de cabeçalho</H1>

Bem-vindo ao mundo do HTML.

Este é o primeiro parágrafo.<P>

E este é o segundo.<P>

</BODY>

</HTML>

Esta Página aparecera assim:

Este é o primeiro nível de cabeçalho

Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.

E este é o segundo.

II - Títulos

Todo documento em HTML deve possuir um título. De um modo geral o título aparece em lugar separado da página (por exemplo, alto da tela no Netscape), e é utilizado para identificar o documento em outros contextos ( por exemplo, buscas Wais). É interessante que o título possa sugerir claramente o conteúdo do documento.

Atenção porque o conceito de título é diferente de cabeçalho. O título está mais para o nome do arquivo. Não é um elemento relevante na visualização do documento como acontece com o cabeçalho.

A marcação utilizada para títulos é <title> e seu par </title>.

Note a diferença da visualização do campo título e cabeçalho, no exemplo abaixo:

Escrito desta forma:

<html>

<title> Este é o título</title>

<body>

<h2>E este o cabeçalho de nível 2</h2>

Aqui entra o texto do documento ...

</body>

</html>

 

III - CABEÇALHOS (HEADINGS)

São títulos que podemos incluir na página. São colocados em tamanho diferenciado do restante do texto. Serão exibidos conforme o tamanho especificado dentro do comando <h>.

<h1> Tamanho 1 </h1>

<h2> Tamanho 2 </h2>

<h3> Tamanho 3 </h3>

<h4> Tamanho 4 </h4>

<h5> Tamanho 5 </h5>

<h6> Tamanho 6 </h6>

Ex..: <h5>Produtos Eletrônicos </h5>

 

IV - Textos

Podem ser criados uma variedade de estilos de textos usando para isso os comandos abaixo.

<b>texto</b> ð Exibe o texto em negrito.

<i>texto</i> ð Exibe o texto em itálico.

<u>texto</u> ð Texto sublinhado.

<tt>texto</tt> ð Aplica espaçamento regular no texto.

<sup>texto</sup> ð Sobrescrito

<sub>texto</sub> ð Subscrito

<blink>texto</blink>ð Texto piscante

1 - Comando FONT:

É utilizado para alterar o tamanho e/ou cor do texto.

<font size=...> Especifica um tamanho

<font color=...> Especifica uma cor

</font> Finaliza o comando FONT e retorna ao texto padrão.

Ex..: <font size=3 color=#FF0000>texto</font>

2 - Comando PRE:

Permite que um texto seja inserido exatamente como foi digitado em algum processador de texto.

<PRE>

Texto

Texto

Texto..

</PRE>

V - Parágrafos e Quebra de Linhas

Os comandos <p> e <br> servem, respectivamente, para inserir novo parágrafo e quebra de linha.

<P> ð Alcança para a próxima linha inserindo uma linha em branco.

  • Ex.: Texto1<p>Texto2
    •

    • <br> ð Avança o texto para a próxima linha, sem inserir linha em branco entre eles.

  • Ex.: Texto1<br>Texto2
    •

    • VI - Imagens

    A imagem a ser colocada em uma Home Page não deve ser muito grande, pois acarretará demora no carregamento via telefone.

    Os formatos mais usados são ".gif" e ".jpg".

    <img src="imagem"> ð Insere uma imagem na posição em que se encontra o comando.

    Ex..: <img src="foto.jpg">

    1 - Atributos do comando IMG:

    ALGN ð Posiciona a imagem em relação ao texto (TOP, BOTTOM, MIDDLE).

  • Ex..: <img align="MIDDLE" src="foto.jpg">
    •

    • BORDER ð Coloca/retira borda quando a imagem é usada como âncora (link).

  • Ex..: <img border=0 src="foto.gif">
    •

    • WIDTH ð Largura da imagem

  • Ex..: <img width=300 src="foto.gif">
    •

    • HEIGHT ð Altura da imagem

    VSPACE ð Determina o espaço vertical ao redor da imagem

    HSPACE ð Determina o espaço horizontal ao redor da imagem

     

    VII - LISTAS

    1 - Lista não ordenada

    Série de ítens sem numeração.

    Ex..: . Vendas

    . Compras

    . Serviços

    Comandos:

    <UL> ð Inicia a lista

    <LI> ð Texto do ítem

    </UL> ð Finaliza a lista

    Ex..: <ul>

    <li> Ítem

    <li> Ítem

    <li> Ítem

    </ul>

    2- Listas ordenadas

    Atribui numeração para cada ítem.

    Ex..: 1. Relatórios

    2. Compras

    3. Vendas

    Comandos:

  • <OL> Inicia a lista
    •

    • <LI> Ítem da lista

    </OL> Finaliza a lista

    Ex..: <ol>

    <li> ítem número 1

    <li> ítem número 2

    <li> ítem número 3

    </ol>

    Obs.: Pode-se combinar os dois tipos de listas.

     

    VIII - LINKS (ÂNCORAS)

    Um dos recursos maravilhosos de uma Home Page são os links internos e externos.

    Nos links externos temos a movimentação para outras Home Pages.

    Através de um simples clique do mouse podemos viajar para outro endereço (URL).

    Comandos:

    <a name="#nome da âncora">Texto</a> ð Cria uma âncora interna que será acessada por um link. Uma âncora é usada para marcar o local para onde se irá quando acionar o link.

    Ex..: <a name="#LINKS">VIII - LINKS</a>

    <a href="#nome da âncora">texto</a> ð Cria um link para acessar uma determinada âncora.

    Ex.: <a href="#LINKS">Ir para seção de links</a>

     

    <a href="endereço URL">texto</a> ð Cria um link para acessar uma outra página.

    Ex.: <a href="http://antares.com.br/~mcosta">Home Page</a>

    IX - TABELAS

    Comandos:

    <TABLE> ð Inicia uma Tabela

    </TABLE> ð Finaliza uma tabela

    Atributos de TABLE:

    <BORDER> ð Desenha(ou não <border=0>) bordas ao redor da tabela. Quanto maior o valor, mais grossa será a linha.

    Ex.: <TABLE BORDER=2>

    <CELLSPACING> ð Espaçamento entre as células da tabela.

    <CELLPADDING> ð Espaçamento entre as colunas e linhas da tabela.

    <WIDTH> ð Largura da tabela.

    Comandos dentro de TABLE:

    <CAPTION>legenda</CAPTION> ð Cria uma legenda na tabela. A legenda é sempre centralizada. Opções: TOP, BOTTOM.

    <TR></TR> ð Cria uma linha na tabela.

    <TD>conteúdo</TD> ð Especifica o conteúdo de uma célula.

  • Atributos: ALIGN (Alinhamento) ð (left, center, right)

    Ex.: <TD algn=center>

    •

    • <TH>texto</TH> ð Especifica o conteúdo de uma célula, mas em destaque negrito.

    <ROWSPAN> ð Atributo para <TD> e <TH> Utilizado para especificar o número de linhas ocupadas pela célula.

    <COLSPAN> ð Atributo para <TD> e <TH> Utilizado para especificar o número de colunas ocupadas pela célula.

    <WIDTH> ð Atributo de <TD> e <TH> Largura da célula.

    X - INDICAÇÃO DE E-MAIL

    Ao final da página é interessante colocar uma indicação de E-Mail para que o visitante possa utiliza-la fazendo contato com o proprietário da página. Veja como fazer:

    <a href="mailto:endereço@servidor>texto</a>

    Ex.: <a href="mailto:mcosta@antares">Meu E-Mail</a>

     

    APÊNDICE A

    Tabela de Cores (RGB)

    Branco

    #FFFFFF

    Preto

    #000000

    Vermelho

    #FF0000

    Verde

    #00FF00

    Azul

    #0000FF

    Amarelo

    #FFFF00

    Cinza

    #C0C0C0

    Marrom

    #A62A2A

    Laranja

    #FF7F00

    Neon Pink

    #FF6EC7

    Ouro

    #CD7F32

    Coral

    #FF7F00

    Cobre

    #B87333

    Bronze

    #8C7853

    Violeta

    #4F2F4F

    Prata

    #E6E8FA

    Aquamarine

    #32CD99

    Magenta

    #FF00FF

     

    Se você quiser copiar, use o esqueminha "ctrl c" e "ctrl v"...

     

    VOLTAR