Aprenda Html

�NDICE
Introdu��o
Formata��o
Cabe�alhos
Textos
Par�grafos e quebra linhas
Imagens
Listas
Links
Tabelas
Indica��o de E-mail



1 - INTRODU��O

Esse tutorial foi feito para ajuda-lo com a linguagem HTML na cria��o de Home Pages. Tentamos colocar da forma mais simples poss�vel. Se voc� tiver alguma d�vida mande-nos E-Mail

A Internet vem crescendo a cada dia e se tornando um dos meios de comunica��o mais importantes do mundo. Atrav�s dessa rede voc� tem tudo o que precisa. Ela serve como uma enciclop�dia, como um jornal, sendo que voc� pode colocar noticias, ou televis�o, r�dio. Voc� acesa tudo atrav�s da Internet. Ela serve at� como propaganda de empresas. Por isso, e muito mais a internet est� se tornando um grande meio de comunica��o.

Por isso � indispens�vel que voc� tenha sua Home Page, sendo uma p�gina pessoal ou comercial.

Como toda linguagem de programa��o o HTML tem seus pr�prios comandos. Aqui inclu�mos os principais para a confec��o de uma Home Page.


2 - FORMATA��O:

Uma p�gina HTML � composta por 3 partes principais:

T�tulo (title) Corpo (body) Rodap� (Footer) Para que todos os browsers possam reconhecer uma p�gina HTML s�o necess�rios instru��es para isso.

Estrutura b�sica:

<html> In�cio do documento HTML

<head> In�cio do cabe�alho

<title> Nesta linha coloque o nome da p�gina </title>
(Ser� mostrado na janela do browser)

</head> Fim do cabe�alho

<body> In�cio do corpo da p�gina

Aqui s�o colocados os comandos que aparecer�o no fundo da p�gina

</body> Fim do fundo (corpo) da p�gina

</html> Fim do documento HTML



•   Atributos de BODY:

BACKGROUND Imagem para o fundo da p�gina.
Ex: <body background="fundo.gif">

BGCOLOR Cor de fundo da p�gina em RGB (hexadecimal)
Ex: <body bgcolor=#000000>
(Para saber mais sobre as cores voc� deve ir ver a tabelas de cores.)

TEXT Cor dos textos da p�gina (em RGB)
Ex: <body text=#000000>
(Para saber mais sobre as cores voc� deve ir ver a tabelas de cores.)

LINK Especifica a cor dos links n�o visitados.
Ex: <body link=#FFFF00>
(Para saber mais sobre as cores voc� deve ir ver a tabelas de cores.)

VLINK Especifica a cor dos links visitados.
Ex: <body vlink="#FF0000">
(Para saber mais sobre as cores voc� deve ir ver a tabelas de cores.)

ALINK Especifica a cor do link acionado no momento.
Ex: <body alink="#FF0000">
(Para saber mais sobre as cores voc� deve ir ver a tabelas de cores.)

Obs: Sempre fa�a a combina��o de todos esses atributos num mesmo comando.
Ex: <body bgcolor=#000000 text=#FFFF00 link=#FF0000 alink="#FFFFFF" vlink="#FF0000">



3 - 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> Tamanho1</h1>
     �

Tamanho 1


<h2> Tamanho2</h2>
     �

Tamanho 2


<h3> Tamanho3</h3>
     �

Tamanho 3


<h4> Tamanho4</h4>
     �

Tamanho 4


<h5> Tamanho5</h5>
     �

Tamanho 5


<h6> Tamanho6</h6>
     �

Tamanho 6



4 - 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>--->Subescrito
<blink> texto</blink>-->Texto piscante


Comando FONT:

� utilizado para alterar o tamanho, cor ou tipo do texto.

<font size=".."> -----> Especifica um tamanho
<font color=".."> ----> Especifica uma cor
<font face=".."> ----->Especifica um tipo de fonte
</font>------------------> Finaliza o comando FONT e retorna ao texto padr�o.

Ex: <font size="3" color="Blue" face="Verdana"> DarkMasters </font>
Que resultar� algo assim: DarkMasters



Comando PRE:

Permite que um texto seja inserido exatamente como foi digitado, com este comando o browser vai ler at� os espa�os. Sem este comando o broswer ignora mais de um espa�o.

<PRE>
Texto
Texto
Texto
</PRE>

5 - PAR�GRAFOS E QUEBRA DE LINHAS
<P> Avan�a para a pr�xima linha inserindo uma linha em branco, pulando uma linha.

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


6 - IMAGENS


A imagem a ser colocada em uma Home Page n�o deve ser muito grande, pois imagens grandes demoram muito para serem carregadas, fazendo com que o visitante se irrite.

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="banner.gif">


Atributos do comando IMG:

ALGN -----> Posiciona a imagem em rela��o ao texto (TOP, BOTTOM, MIDDLE).
Ex: <img align="MIDDLE" src="imagem.jpg">

BORDER-----> Coloca/retira borda quando a imagem � usada como �ncora (link).
Ex: <img border=0 src="imagem.gif">

WIDTH-----> Largura da imagem
Ex: <img width=300 src="imagem.gif">

HEIGHT------> Altura da imagem
Ex: <img height=250 src="imagem.gif">

VSPACE Determina o espa�o vertical ao redor da imagem

HSPACE Determina o espa�o horizontal ao redor da imagem


7 - LISTAS

Lista n�o ordenada


Comandos:

<UL> Inicia a lista
<LI> item1
<LI> item2
</UL> Finaliza a lista

Ex:

  • DarkMasters

  • Site

  • Seu SITE de entretenimento na NET


Listas ordenadas


Comandos:

<OL TYPE="1"> Inicia a lista
<LI> item1
<LI> item2
</OL> Finaliza a lista

Ex:

  1. DM

  2. Home

  3. Page


Obs(1):Os TYPES pode ser:
1----->1, 2, 3...
A----->A, B, C...
a----->a, b, c...
I------>I, II, III...
i------>i, ii, iii...


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


8 - LINKS (�NCORAS)


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

Nos links internos temos a movimenta��o dentro da pr�pria p�gina.

Nos links externos temos a movimenta��o para outras Home Pages.
Atrav�s de um simples clique do mouse podemos viajar para outra 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: 8 - LINKS


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

Ex: <a href="#LINKS"> texto que direciona a �ncora </a>


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

Ex: <a href="http://www.fortunecity.com/marina/thames/160/"> </a>

DarkMasters

�Colocando uma imagem como Link

Para colocar uma imagem como link � bem simples: Voc� coloca o link normalmente e entre o comando <a> e </a> voc� coloca a imagem!

Ex: <a href="http://www.nono.com.br/uaheuia/"> <IMG SRC="logo1.gif"> </a>


9 - 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 borda.

<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, BUTTOM.

<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.


10 - 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 para fazer contato com o autor da p�gina. Veja como fazer:

<a href="mailto:endere�[email protected]"> texto ou imagem</a>

Ex: <a href="mailto:[email protected]"> E-Mail</a>
Que ficar� assim: E-Mail
D a r k M a s t e r s: Principal Autor Agradecimentos Forum Guestbook Patroc�nio Parceiros DM Design
M � s i c a: Mp3 Midis Bandas Skins Downloads Antchrist Superstar Letras Cifras&Tablaturas Walpapers Decoders F� clubes
W e b m a s t e r s: Javas Guia do Html Aprenda HTML Boa home page!? GDW Crie sua HP aki Editores Banner Wizard
J o g o s: Emuladores Jogos Completos Jogos Variados ROMS Macetes Quake DeathMatch
H u m o r: Piadas Como manter um idiota ocupado? Frases E-mail!!!?? Textos Emoticons Voc� � pobre? Dia de Merda
H a c k e r: )SD( Spirit Demoniacs X-Filez Textos Java Bomb Telnet
O u t r o s: Seriais Novidades Banners NickNamer Cracks Icq Downloads Skins para Icq
A j u d a: Faq Notificar erro E-mail
Uin 34291623
V i s i t a s  d e s d e 21/01/99, � L u c a s  E d u a r d o - 99/00 DarkCounter