•  
     

Como Cria um site

INTRODUÇÃO AO HTML - COMO FAZER UM SITE
O objetivo desta página é ensinar os princípios básicos para confecção de um site em HTML para
que você possa fazer seu primeiro site.
Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música, como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos de Body, enfim, será sua iniciação para fazer um site em HTML.

Existem editores HTML que oferecem comodidade para confecção das páginas, tais como: FrontPage; Dreamweaver e outros. Mas não será necessário aprendendo os códigos abaixo e você poderá fazer no Word ou Bloco de Notas e salvar como .html.
Toda página é composta por Tags, que são os comandos html. Toda página deve comerçar com a tag <HTML> e terminar com </HTML>. Note que a barra "/" determina o fechamento da tag. Estas são as Tags fundamentais de sua página, isto é, toda página contém estas tags:

# Na medida do possível irei acrescentando mais dicas para você fazer um site bem legal. ITENS BÁSICO EM HTML: <HTML>
# <HEAD>
# <TITLE> Título da página </TITLE>
# </HEAD>
# <BODY> Texto; Imagens; Links; etc </BODY>
# </HTML>
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à "Favoritos" (Bookmarks), o título será o atalho para ela.

ATRIBUTOS DE <BODY> :

Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então:
# BGCOLOR - Cor de fundo
# TEXT - Cor da fonte dos textos
# LINK - Cor dos links (padrão: azul)
# ALINK - Cor dos links, quando clicados (padrão: vermelho)
# VLINK - Cor dos Links, depois de visitados (padrão: roxo)
# BACKGROUND - Imagem de fundo: Indica o URL da imagem.
Podemos definir tudo de uma só vez, colocando o seguinte código:
<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE">
Não está no código acima o atributo BACKGROUND pois não é padrão.

C O R E S NO SEU SITE:

# Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16 cores, que são:
# Preto = black - código = #000000
# Branco = white - código = #FFFFFF
# Azul = blue - código = #0000FF
# Amarelo = yellow - código = #FFFF00
# Verde = green - código = #008000
# Lima = lime - código = #00ff00
# Marron = maroon - código = #800000
# Oliva = olive - código = #808000
# Azul Celeste = aqua - código = #00ffff
# Lilás = fuchsia - código = #ff00ff
# Cinza = gray - código = #808080
# Azul escuro = navy - código = #000080
# Roxo = purple - código = #800080
# Verde escuro = teal - código = #008080
# Cinza claro = silver - código = #c0c0c0
# Vermelho = red - código = #FF0000
Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores, ou
CLICAR AQUI
Ir para o topo
CABEÇALHOS :
O tamanho das letras ou fontes é definido pela tag <H> - "Headings".
A tag <H> normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:
Este é o tamanho:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
Pode-se alinhar os cabeçalhos
<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>

TAMANHO E CORES DAS LETRAS :

# Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte.
# <FONT FACE> - Define o tipo de letra
# <FONT COLOR> - Define a cor da letra
# <FONT SIZE> - Define o tamanho da letra
Veja abaixo alguns exemplos:
# <FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
# <FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Fica assim</FONT>
# <FONT FACE="ARIAL" SIZE="3" COLOR="BLACK">Fica assim</FONT>
# <FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Fica assim</FONT>
* Note que você define com mais precisão o tamanho das letras do que a tag <H>.

COMO FORMATAR OS TEXTOS :

# Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
<B> - Negrito, <U> - Sublinhado, <I> - Itálico e <CENTER> - Centralizado
# <B>Texto em Negrito</B>
# <U>Texto Sublinhado</U>
# <I>Texto em Itálico</I>
# <STRIKE> ou <S> Texto Riscado assim
# <SUB> Como em H2O - O número 2 ficou em baixo.
# <SUP> Como em Km2 - O número 2 ficou em cima.
#
<CENTER>Texto Centralizado</CENTER>

Você também pode acumular os efeitos, agrupando os códigos Ex.:
<CENTER><B><U><I>O texto fica assim</B></U></I></CENTER

COMO FAZER PARÁGRAFOS E LINHAS :

# Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha.
Para parágrafo usar a TAG <P> e para linha usar <BR> Exemplo:
<P>
Primeiro Parágrafo
<BR>
Primeira Linha

<P>
Segundo Parágrafo
<BR>
Segunda Linha
Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.
Ir para o topo
ALINHAMENTO COM A TAG <P> :
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme abaixo:
# <P ALIGN="LEFT"> Texto alinhado à esquerda.
# <P ALIGN="RIGHT"> Texto alinhado à direita.
# <P ALIGN="CENTER"> Texto centralizado.
# <P ALIGN="JUSTIFY"> Texto justificado.

COMO INCLUIR IMAGENS NO SITE :

# A TAG utilizada é: <img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>
Atributos da Imagem:
# WIDTH - Define a largura da imagem.
# HEIGHT - Define a altura da imagem.
# ALT - Texto que aparece quando é passado o mouse sobre a imagem
# BORDER - É um valor atribuido à largura da borda da imagem (Contorno).
Veja alguns exemplos:
<img src="zero.gif" alt="Seu texto" border="0">
<img src="zero.gif" alt="Seu texto" border="1">
<img src="zero.gif" alt="Seu texto" border="2" width="20" height="20">
# Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar.
Alinhamento texto de imagens:
# <img src="zero.gif" align="top">
# <img src="zero.gif" align="middle">
# <img src="zero.gif" align="left">
# <img src="zero.gif" align="right">
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">

COMO FAZER OS LINKS :

Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é:
<a href="nome do lugar à ser levado">descrição do lugar</a>
Exemplos
<a href="http://www.extremaonline.com">Conheça Extrema-MG</a> Resultado:
Conheça Extrema-MG

Note que formou-se um link para um determinado site que foi descrito no código acima.
Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo "TARGET", então na verdade, para você não fechar esta janela, o código inserido aqui foi:
<a href="http://www.extremaonline.com" target="_blank">Conheça Extrema-MG</a> Para fazer um link para uma outra página do seu site use:
<a href="pagina_tal.html">Clic aqui</a> - Note que após o nome da página é colocado a extensão .html

Fonte:www.extremaonline.com/html.html