HTML

Home
Aulas e Dicas
Empregos
Classificados
SuperLinks
Busca
Comentários


Criada por:
Cláudia Lobo

[ Barra de Tarefas do Windows ] [ Economize com a sua impressora ] [ Mala Direta no Word ] [ HTML ] [ Gráfico no Excel ] [ Tutorial do ICQ ] [ Contatos-ICQ ] [ O que é CHAT ] [ VisualBasic ] [ Digitação ]

HTML 

Criando páginas Web  
Primeiro Momento c/ HTML  
Tabela de Cores (HTML)  
Melhorando a Aparência de sua web 
Form Comentários para Web

Criando Páginas Web

Entendendo um pouco sobre as páginas Web: Páginas da Web são originárias de um servidor da Web.

Se você quer que o navegador ative uma página Web, ele acessa o servidor, no qual se encontra a página desejada, ou seja, um computador contendo páginas Web e um programa, que gerencia o acesso a essas páginas

O navegador solicita ao servidor a página desejada. Se ela estiver ali, ela será transferida para o navegador pelo servidor. Portanto, o navegador faz o download da página Web, a qual vai surgindo gradativamente na tela com seus diversos componentes.

Quando a página aparecer por completo, a conexão com o navegador é interrompida. Se o usuário desejar mais tarde ver outra página do mesmo servidor, a conexão é restabelecida. E a mesma página Web pode ser requisitada ao mesmo tempo e sem problemas por vários usuários.

Toda página Web tem seu próprio endereço. Se você quer que a Web funcione, é preciso requisitar, entre milhões de páginas Web espalhadas por toda a Internet, aquela que você deseja ver. Para fazer isto, você recorre ao localizador chamado Uniform Resource Locator, resumidamente denominado URL.

http:// - significa o protocolo, de acordo com o qual se dá a transferência. Uma norma para a comunicação entre computadores. As páginas WEB comuns são transferidas pelo protocolo http( hyper text transport protocol) que informa o endereço de um servidor da Web. Todos os computadores da Internet e os servidores, possuem esse tipo de endereço composto por várias palavras separadas por ponto.

/gb/ - indica a localização da estrutura da página no servidor. Os diretórios são separados por barras(/).

login.html - É nome de um arquivo de página WEB.

(html) ou (htm) - Que significa Hyper Texto Markup Language, que é o nome da linguagem de computador em que são criadas as páginas Web.

WWW - WORLD WIDE WEB

O último campo do endereço indica o código do país :

br :Brasil, Se :Suécia, dk: Dinamarca, fr: França, ca: Canadá, jp: Japão

Voltar ao início

 

Primeiro Momento com HTML

Uma página Web simples

Apesar dessa aparente sofisticação, as páginas Web não passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferença é que as páginas Web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas também para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas Web, HTML.

O mínimo que você precisa saber sobre HTML

O primeiro conceito que deve-se ter em mente ao projetar páginas Web é que HTML não foi criada para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página. Como dissemos há pouco, os tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser.

Primeiro Exemplo

A melhor maneira de aprender a escrever páginas de Web é fazendo. Vamos ao primeiro exemplo:

<HTML>
<HEAD>
<TITLE>Primeiro exemplo</TITLE>
</HEAD>

<BODY>
<H1>Título principal</H1>

Este é o texto do primeiro exemplo.
Para dividir os parágrafos, usa-se o tag &lt;P&gt;.<P>

Este é o segundo parágrafo. Para colocar um novo título depois
de um parágrafo não é necessário colocar o tag &lt;P&gt;.

<H2>Título secundário</H2>

Para abrir uma linha, usa-se o tag &lt;br&gt;,<br>

certo?

<H3>Uma lista</H3>

<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
</BODY>
</HTML>

Observação: a representação dos tags <P> e <BR> foi escrita na forma de código (&lt;P&gt; e &lt;BR&gt;, respectivamente). Do contrário, essa representação não seria mostrada na página, mas interpretada com os efeitos reais de cada um dos tags.

Visualizando o exemplo no navegador

Assim que o exemplo for salvo no editor de texto com a extensão .htm ou .html, pode-se visualizá-lo em um navegador (Internet Explorer ou Netscap...). Para abrir o arquivo, deve-se escolher Open (Abrir) , Open File ou Open Local File no menu File do navegador. Alguns navegadores tem um botão Open na barra de botões.

Voltar ao início

Tabela de cores

A tabela abaixo apresenta os códigos de cores que podem ser utilizados em documentos HTML. Somente os nomes de cores acompanhados de asterisco podem ser utilizados no lugar dos códigos. Olive, fuchsia, purple e teal não têm correspondentes em código.

Colorindo o fundo da página.

Utilize dentro da tag body: 
Ex.:

<BODY BGCOLOR=#00FF00>

Nome da cor

Código da cor

Aparência

*White

#FFFFFF

 

*Red

#FF0000

 

*Green

#00FF00

 

*Blue

#0000FF

 

Magenta

#FF00FF

 

Cyan

#00FFFF

 

*Yellow

#FFFF00

 

*Black

#000000

 

*Aqua

#70DB93

 

Baker's Chocolate

#5C3317

 

Blue Violet

#9F5F9F

 

Brass

#B5A642

 

Bright Gold

#D9D919

 

Brown

#A62A2A

 

Bronze

#8C7853

 

Bronze II

#A67D3D

 

Cadet Blue

#5F9F9F

 

Cool Copper

#D98719

 

Copper

#B87333

 

Coral

#FF7F00

 

Corn Flower Blue

#42426F

 

Dark Brown

#5C4033

 

Dark Green

#2F4F2F

 

Dark Green Copper

#4A766E

 

Dark Olive Green

#4F4F2F

 

Dark Orchid

#9932CD

 

Dark Purple

#871F78

 

Dark Slate Blue

#6B238E

 

Dark Slate Grey

#2F4F4F

 

Dark Tan

#97694F

 

Dark Turquoise

#7093DB

 

Dark Wood

#855E42

 

Dim Grey

#545454

 

Dusty Rose

#856363

 

Feldspar

#D19275

 

Firebrick

#8E2323

 

Forest Green

#238E23

 

*Fuchsia

 

 

Gold

#CD7F32

 

Goldenrod

#DBDB70

 

*Gray

#C0C0C0

 

Green Copper

#527F76

 

Green Yellow

#93DB70

 

Hunter Green

#215E21

 

Indian Red

#4E2F2F

 

Khaki

#9F9F5F

 

Light Blue

#C0D9D9

 

Light Grey

#A8A8A8

 

Light Steel Blue

#8F8FBD

 

Light Wood

#E9C2A6

 

*Lime

#32CD32

 

Mandarian Orange

#E47833

 

*Maroon

#8E236B

 

Medium Aquamarine

#32CD99

 

Medium Blue

#3232CD

 

Medium Forest Green

#6B8E23

 

Medium Goldenrod

#EAEAAE

 

Medium Orchid

#9370DB

 

Medium Sea Green

#426F42

 

Medium Slate Blue

#7F00FF

 

Medium Spring Green

#7FFF00

 

Medium Turquoise

#70DBDB

 

Medium Violet Red

#DB7093

 

Medium Wood

#A68064

 

Midnight Blue

#2F2F4F

 

*Navy

#23238E

 

Neon Blue

#4D4DFF

 

Neon Pink

#FF6EC7

 

New Midnight Blue

#00009C

 

New Tan

#EBC79E

 

Old Gold

#CFB53B

 

*Olive

 

 

Orange

#FF7F00

 

Orange Red

#FF2400

 

Orchid

#DB70DB

 

Pale Green

#8FBC8F

 

Pink

#BC8F8F

 

Plum

#EAADEA

 

*Purple

 

 

Quartz

#D9D9F3

 

Rich Blue

#5959AB

 

Salmon

#6F4242

 

Scarlet

#8C1717

 

Sea Green

#238E68

 

Semi-Sweet Chocolate

#6B4226

 

Sienna

#8E6B23

 

*Silver

#E6E8FA

 

Sky Blue

#3299CC

 

Slate Blue

#007FFF

 

Spicy Pink

#FF1CAE

 

Spring Green

#00FF7F

 

Steel Blue

#236B8E

 

Summer Sky

#38B0DE

 

Tan

#DB9370

 

*Teal

 

 

Thistle

#D8BFD8

 

Turquoise

#ADEAEA

 

Very Dark Brown

#5C4033

 

Very Light Grey

#CDCDCD

 

Violet

#4F2F4F

 

Violet Red

#CC3299

 

Wheat

#D8D8BF

 

Yellow Green

#99CC32

 

Voltar ao início

 

Melhorando a Aparência de sua Web

Com os tags básicos do primeiro exemplo já é possível criar páginas Web para colocar à disposição dos usuários.  Porém, o primeiro exemplo deixa muito a desejar em apelo visual. Vamos melhorar a aparência deste documento.

Alinhamento

A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (com o qual vêm configurados os navegadores) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo ALIGN dentro dos tags que marcam os títulos e os parágrafos.  

<H1 ALIGN=CENTER>Título</H1>

<P ALIGN=CENTER>Este é um parágrafo centralizado.</P>


Exemplo 2: alinhamento centralizado

Desta vez, o tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar um tag de fechamento (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente.

Margem

Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>


Exemplo 3: colocando margem adicional

Texto pré-formatado

Existe ainda uma terceira forma de modificar o alinhamento. É a utilização do par de tags <PRE> e </PRE>. Usando esses tags, todos os espaços e entradas de parágrafo (o resultado da tecla enter) são respeitados. Em um texto normal, qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente qualquer lugar da página.

Apesar da vantagem dessa forma de alinhamento arbitrário, o tag <PRE> muda o tipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o “i” ocupa menos espaço do que o “a”, por exemplo.

<PRE>

Este texto está pré-formatado. A fonte é
monoespaçada e as entradas de parágrafo,

assim como os espaços adicionais, são
respeitadas.

Neste caso, a margem esquerda
foi aumentada em cinco caracteres.</PRE>

O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no meio do texto. Entradas de parágrafo adicionais também são ignoradas.


Exemplo 4: controle do alinhamento com pré-formatação

No Netscape, é possível colocar tags de título dentro do par <PRE> e </PRE>, permitindo a manutenção da fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porém, os tags de título são ignorados e se sobrepõem aos tags de pré-formatação, eliminando o seu efeito.

Mudando os caracteres

Estilos de caracteres

Para dar ênfase em determinados trechos de texto, pode-se usar negrito, itálico ou mesmo a fonte monoespaçada citada há pouco.

<B>Texto em negrito</B><P>

<I>Texto em itálico</I><P>

<TT>Texto monoespaçado</TT><P>


Exemplo 5: modificando os estilos de texto

  Ao contrário de <PRE>, o tag <TT> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, o tag <TT> funciona exatamente como texto normal.

Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos.

<B><I>Texto em negrito e itálico</I></B><P>

<B><TT>Texto monoespaçado em negrito</TT></B><P>

<I><TT>Texto monoespaçado em itálico</TT></I><P>

<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>


Exemplo 6: os estilos podem ser combinados

Tamanhos de caracteres

Alguns navegadores aceitam a modificação do tamanho do texto através do atributo SIZE do tag <FONT>.

<FONT SIZE=7>Texto</FONT>

O tag <FONT> pode ser atribuído a qualquer parte do texto, com exceção dos títulos (<H1>, <H2> etc.). Os valores do atributo SIZE variam de 1 a 7, O tamanho normal do texto nos navegadores é equivalente a SIZE=3. Não existe nenhuma relação entre os valores no atributo SIZE e o número de pontos (a unidade utilizada para medir os caracteres). Portanto o melhor é experimentar todos os tamanhos e avaliar o resultado.

<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P>

<FONT SIZE=6>Texto com FONT SIZE=6</FONT><P>

<FONT SIZE=5>Texto com FONT SIZE=5</FONT><P>

<FONT SIZE=4>Texto com FONT SIZE=4</FONT><P>

<FONT SIZE=3>Texto com FONT SIZE=3</FONT><P>

<FONT SIZE=2>Texto com FONT SIZE=2</FONT><P>

<FONT SIZE=1>Texto com FONT SIZE=1</FONT>


Exemplo 7: mudando o tamanho dos caracteres  

O tag <FONT> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.

<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>

Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag <BASEFONT> no topo do texto.

<BASEFONT SIZE=5>

Cores diferentes

Alguns navegadores também aceitam modificar a cor padrão do texto e do fundo da janela do documento. Essa definição é feita em atributos do tag <BODY>. Os atributos são BGCOLOR e TEXT.

<BODY BGCOLOR=FFFFFF TEXT=000000>

ou

<BODY BGCOLOR=WHITE TEXT=BLACK>

O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são definidos em uma tabela de cores no padrão RGB ou pelo nome da cor.

Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag <FONT>.

<FONT COLOR=FFFFFF>Texto na cor branca</FONT>

ou

<FONT COLOR=WHITE>Texto na cor branca</FONT>

Dessa forma, é possível ter texto de várias cores na mesma página.

<FONT COLOR=WHITE>Texto em branco</FONT>, <FONT COLOR=BLUE>azul</FONT>, <FONT COLOR=GREEN>verde</FONT> e <FONT COLOR=RED>vermelho</FONT>

Mudando o tipo de caractere

O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto. O autor de uma página Web pode definir qual será o tipo de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows.

<FONT FACE=ARIAL><H1>Título principal</H1>

Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag &lt;P&gt;.<P>

Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário (tampouco funciona) colocar o tag &lt;P&gt;.<p>

<H2>Título secundário</H2>

Para abrir uma linha, usa-se o tag &lt;br&gt;,<br>

certo?</FONT>

<H3>Uma lista</H3>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>


Exemplo 8: mudando o tipo do caractere para Arial

 

Voltar ao início