Aprenda criar site no bloco de notas(Todos Os Códigos HTML)

por **wesley** Sex Jun 26, 2009 3:14 pm

Para Facilitar para vc nos estamos Disponibilizando Um link para download que é esse: http://testinhaloko.forums-free.com/download/file.php?mode=view&id=1
Mas se vc quiser ver online mesmo:
Tabela De Cores: http://www.extremaonline.com/tabela_cores.html
Não é possivel ver o resultado.
CÓDIGOS HTML PARA FAZER UM SITE
Power by Testinha Loko
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 e terminar com . 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:

Código:: • <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.: ou .
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 :
Através de , 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:

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 :
Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16 cores, que são:

Código:: • 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 Acesse: http://www.extremaonline.com/tabela_cores.html

CABEÇALHOS :
O tamanho das letras ou fontes é definido pela tag - "Headings".
A tag 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(não é possivel prver o tamanho baixe o tutoo para ficar mais facil:
Este é o tamanho:

Este é o tamanho:

Pode-se alinhar os cabeçalhos
Código:
`<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 para definir o tamanho, bem como sua cor e
tipo da fonte.
• - Define o tipo de letra
• - Define a cor da letra
• - Define o tamanho da letra
Veja abaixo alguns exemplos:
Código:
`• <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:
- Negrito, - Sublinhado, - Itálico e - Centralizado
• Texto em Negrito
• Texto Sublinhado
• Texto em Itálico
• ou Texto Riscado assim
• _{Como em H2O - O número 2 ficou em baixo.
• ^{Como em Km2 - O número 2 ficou em cima.
Código:
• <CENTER>Texto Centralizado</CENTER>
Você também pode acumular os efeitos, agrupando os códigos Ex.:
Código:
<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 e para linha usar
Exemplo:

Primeiro Parágrafo

Primeira Linha

Segundo Parágrafo

Segunda Linha
Note que cada vez que você coloca a TAG
estará fazendo uma nova linha, que
também não deixa de ser um parágrafo.
Se você escrever sem usar as tags
ou
o próprio browser quebra as linhas
automaticamente.
ALINHAMENTO COM A TAG
:
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de
alinhamento", conforme abaixo:
Código:
• <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 :
A TAG utilizada é:
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:
Código:
<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:Código:
• <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:Código:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
(O trem que da trabalho)
Código:
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 é:
Código:
<a href="nome do lugar à ser levado">descrição do lugar</a>
ExemplosCódigo:
<a href="http://pequenoaprendiz.directorioforuns.com">Conheça Nosso Fórum</a>
Resultado: Conheça Nosso Fórum
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:
Conheça Extrema-
MGPara fazer um link para uma outra página do seu site use:
Clic aqui - Note que após o nome da página é colocado
a extensão .html
COMO FAZER IMAGEM COM LINK :
É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição
do lugar, coloque a TAG de imagem. Veja o exemplo:
Sendo que:
• http://www.extremaonline.com é o URL (endereço) do site.
• local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta
"Imagens".
• nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif
Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site
acima.
Lembre-se: foi usado a target"_blank" para abrir em uma nova janela.
COMO FAZER LINKS PARA DOWNLOAD :
Na verdade não existe o comando específico. O que acontece é que quando criamos um
link para um arquivo que o navegador não reconhece, ele automaticamente inicia o
download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP,
EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:
• Clic aqui para baixar
• Clic aqui para baixar
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o
download, abrem com programas instalados no computador.
Se você fazer um link para um arquivo de vídeo ".avi" o navegador abrirá o programa
para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para
download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e
download será mais rápido.
I S T A S :
Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:
1. Listas Ordenadas
2. Listas sem ordenação
3. Listas Encadeadas
Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:

Os números são inseridos automaticamente.
Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só
use - Onde "1" indica para começar pela primeira letra do
alfabeto.
Lista Sem Ordenação:

Resultado:
• Primeiro item.
• Segundo item.
• Terceiro item. As "bolinhas" são inseridas automaticamente.
Listas Encadeadas:

Produz resultado misto.
COMO INSERIR IMAGEM DE FUNDO :
Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da
TAG , assim: .
Quando a imagem é menor que o tamanho da tela, o navegador duplica essa imagem
tantas vezes forem necessárias para cobrir todo o espaço da tela.
Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar.
Testinha escreveu:Continua-se}}