Fórum Pequeno Aprendiz
Bem Vindo(a) Ao Fórum Pequeno Aprendiz!!!
Para Fazer Perguntas Registre-se Grátis Ou Faça Login.

Nosso Fórum é Livre De Regras Mas,Não Aceitamos Insultos Entre Os Usuários.

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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por wesley em 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:


Este é o tamanho:


Este é o tamanho:


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>
Exemplos
Código:
<a href="http://pequenoaprendiz.forumeiros.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-
MG
Para 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

wesley
Admin
Admin

Mensagens: 28
Pontos: 92
Data de inscrição: 05/06/2009
Idade: 20
Localização: Home

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum