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)

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.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-
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
avatar
wesley
Admin
Admin

Mensagens : 24
Pontos : 88
Data de inscrição : 05/06/2009
Idade : 24
Localização : Home

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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