Crie páginas para site saiba como fazer em HTML

Tempo de leitura: 19 minutos

TUDO SOBRE HTML

INTRODUÇÃO AO HTML – COMO FAZER UM SITE

Como fazer um site. Todos os códigos html: Como incluir flash, vídeos, imagens, músicas, inserir links, download, e-mail, Meta Tags, link para download, Tabela de cores, Atributos, etc. Faça seu site grátis com os códigos.
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.

Crie páginas para site saiba como fazer em HTML 1

Texto; Imagens; Links; etc

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.

Crie páginas para site saiba como fazer em HTML 2

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

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:

Crie páginas para site saiba como fazer em HTML 4

Pode-se alinhar os cabeçalhos

Texto centralizado

Texto alinhado à direita

Texto alinhado à esquerda

TAMANHO E CORES DAS LETRAS :

Você também pode usar a tag para definir o tamanho, bem como sua cor e tipo da fonte.

Crie páginas para site saiba como fazer em HTML 5

COMO FORMATAR OS TEXTOS :

Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:

Crie páginas para site saiba como fazer em HTML 6

COMO FAZER PARÁGRAFOS E LINHAS :

Crie páginas para site saiba como fazer em HTML 7

ALINHAMENTO COM A TAG :

Crie páginas para site saiba como fazer em HTML 8

COMO INCLUIR IMAGENS NO SITE :

A TAG utilizada é: Crie páginas para site saiba como fazer em HTML 9
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:

Crie páginas para site saiba como fazer em HTML 10


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:

Crie páginas para site saiba como fazer em HTML 11
Crie páginas para site saiba como fazer em HTML 12
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
Crie páginas para site saiba como fazer em HTML 13 

Crie páginas para site saiba como fazer em HTML 14

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 é:

Crie páginas para site saiba como fazer em HTML 15
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 aquiClic 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:
Crie páginas para site saiba como fazer em HTML 16 “Crie páginas para site saiba como fazer em HTML 16” 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.
Exemplo 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:
· <.a href=”arquivo.rar”>  Clic aqui para baixar
·  <.a href=”pasta_tal/arquivo.zip”>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.

L 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
Crie páginas para site saiba como fazer em HTML 18

COMO INSERIR IMAGEM DE FUNDO NO SEU SITE:

Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG <.BODY>, assim: , 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.
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.

COMO FAZER LETREIROS E LINHAS :

Para colocar um letreiro na página é utilizado a TAG

Crie páginas para site saiba como fazer em HTML 19

Resultado
TEXTO
Onde: DIRECTION= indica a direção “LEFT” ou “RIGHT”.
BGCOLOR= indica a cor de fundo do letreiro.
WIDTH= indica a porcentagem que o letreiro ocupará sua página.

Dica: Se você quiser que o texto pare no final, ao invés de SCROLL escreva SLIDE.

Crie páginas para site saiba como fazer em HTML 20

 

COMO FAZER TABELAS :

As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc. A tabela é representada pelas Tags
e

e possue os seguintes atributos:
border=”valor” -Onde o “valor” define a largura da borda (contorno).
cellspacing=”valor” -Onde o “valor” define o espaço horizontal entre as células.
cellpadding=”valor” -Onde o “valor” define o espaço vertical entre as células.
width=”valor” -Onde o “valor” define a largura da tabela em pixels ou em porcentagem.
height=”valor” -Onde o “valor” define a altura da tabela em pixels ou em porcentagem.
bgcolor=”#cor” -Define a cor de fundo da tabela.
bordercolor=”#cor” -Define a cor da borda.
background=”imagem.jpg” -Define uma imagem de fundo.
A tabela possui alguns comandos que são:
<.TR> e

-Define uma linha da tabela.
<.TH> e -Define um cabeçalho da tabela.
<.TD> e -Define a coluna de informações.
<.CAPTION> e -Define o título da tabela.

Crie páginas para site saiba como fazer em HTML 21
1a.coluna2a.coluna3a.coluna

Você pode colocar o código acima em apenas uma linhaResultado:

1a.coluna2a.coluna3a.coluna
1a.linha1a.linha1a.linha

Para que a tabela fique centralizada, como acima, use a tag <.CENTER> antes do código e

depois do código.

antes do código e
depois do código.
Também pode-se alinhar o texto dentro das células, utilizando os seguintes atributos:
Align=”left” -Alinha o texto à esquerda.
Align=”right” -Alinha o texto à direita.
Align=”center” -Alinha o texto no centro.
Valign=”top” -Alinha o texto no topo da célula.
Valign=”middle” -Alinha o texto no meio da célula.
Valign=”bottom” -Alinha o texto na parte inferior da célula.
ADICIONANDO UMA LISTA DENTRO DA CÉLULA:
<.TABLE BORDER=”1″ <.TD>lista dentro da célula<.UL> <.LI>1 item

  • 2 item
  • 3 item<./UL> <./TD>


Resultado:

lista dentro da célula

  • 1 item
  • 2 item
  • 3 item

SITE COM FRAMES :

Resume-se em mais de uma página em uma só tela. É necessário criar três páginas para criar uma página com dois frames, ou seja, uma página principal onde terá as tags referente ao frame que deverá ser salva como: index.html e as outras duas serão abertas dentro desta página principal.
Exemplo:

Crie páginas para site saiba como fazer em HTML 22

Os códigos acima só serão colocados na página principal que será salva como “index.html”.
Normalmente nesse tipo de frame a página1.html é usada para os menus e a página2.html para conteúdo geral do site.
Neste caso <.FRAMESET COLS=”20%, 80%”> o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página. o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página.
Sempre da esquerda para direita. Então a página1.html ocupará 20% do espaço e a página2.html ocupará 80% (espaço vertical).
Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
As tags e é usado somente para avisar usuário que utiliza browser muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer).
Exemplo 2:

Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
Exemplo 3:

Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
Sempre da esquerda para direita. Então a página1.html ocupará 20% do espaço e a página2.html ocupará 80% (espaço vertical).

Copie o código no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
As tags e é usado somente para avisar usuário que utiliza browser muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer).

COMO INSERIR MÚSICA NO SITE:

Para inserir uma música em sua página, antes de fechar a tag <.HEAD.> coloque a tag: <.BGSOUND SRC=”musica.mid”.>.A Extensão do arquivo pode ser .mid ou .wav.
Para que a música toque novamente, sempre, acrescente: loop=”-1″ Assim:
<.BGSOUND SRC=”musica.mid” loop=”-1.”>
No exemplo acima a música tocará sem que apareça o “display” na tela. O internauta não terá como parar, pausar ou iniciar.
Para que apareça o display na tela, como você vê abaixo, coloque está tag:
<.EMBED SRC=”musica.mid.” AUTOSTART=”.FALSE” LOOP=”TRUE”.>
* Note que você terá que acionar PLAY para iniciar a música.
* Para que abra a página já tocando a música, coloque este código:
<.EMBED SRC=”musica.mid” AUTOSTART= LOOP=”TRUE”.>
* Você ainda pode definir o tamanho do display, assim:
<.EMBED SRC=”musica.mid” AUTOSTART= LOOP=”TRUE” WIDTH=145 HEIGHT=25.>

COMO INSERIR FLASH NO SITE:

Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código depois da tag :
<.OBJECT CLASSID=”FLASH” CODEBASE=”http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0 “.> <.EMBED SRC=”arquivo.swf” WIDTH=”200″ HEIGHT=”200″ TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer” <./OBJECT.>
Note no código acima que você pode especificar o tamanho da imagem. Se você não colocar os atributos “WIDTH e HEIGHT” a imagem ficará no tamanho original (tamanho que foi criada).

COMO INSERIR VÍDEO NO SITE:

Para inserir um vídeo (arquivo com extensão .avi), como abaixo, coloque este código depois da tag <.BODY>:
<.EMBED SRC=”arquivo.avi”
·  Note que está no tamanho reduzido, pois foi utilizado “WIDTH e HEIGHT”, mas não é preciso, pois o tamanho é padrão, a menos que lhe seja útil.

META TAGS :

COMO FAZER UM LINK PARA ENVIAR E-MAIL :

Código:<.a href=”mailto:[email protected]”.>Clic Aqui<./a>
Note que ao ser clicado no link (Clic Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo:
Meu e-mail é: [email protected] se preferir, Clic Aqui

COMO FAZER UMA CAIXA DE TEXTO :

Código:<.textarea rows=”5″ cols=”50″ style=”background-color: #ffffff”.>ESCREVA AQUI O SEU TEXTO<./textarea.>
Código: Fica assim:

COMO FAZER UMA ÂNCORA :

Repare que ao clicar ir para âncora você foi redirecionado à outro ponto desta página. Isto é chamado “ÂNCORA”.
Você pode redirecionar o usuário para qualquer ponto de sua página ou para outro ponto de outra página.
O código de destino, isto é, o ponto de chegada ao ser clicado é:
Código:
E o código do comando “ir para” é:
Código:ir para ancora
Você pode criar vários pontos, como:
e ir para ancora2
Para fazer o usuário “Ir para o topo” não é necessário uma âncora como acima, tem um código especial para isto:
Código: <.a href=”#top”.>Ir para o topo<./a>
Para ir à outra página:
Código: .<.a href=”nomedapagina.html#ancora”.>ir para ancora<./a>
Utilizando uma imagem como âncora:
Código: <.a href=”#ancora”.><.img src=”imagem.jpg”.><./a>

Ir para o topo


OUTRAS DICAS:

Após fazer seu site, veja Como colocar o site na Internet
Você também pode ganhar dinheiro com seu site em programas de Afiliados.
Como?: Quantidade é a alma do negócio.   Consulte   Beruby O portal de economia e ganhos na internet
Para ganhar conectado a internet:   Funciona Mesmo   Gomez Peer Zone e depois os cursos para vender Cursos 24 Horas 
O mais legal, é o preço mais justo que já ví: Adsense em seu Tumblr
O gerenciador de Twitter: Manage Flitter
Conheça nosso blog, Facebook, Twitter minhas redes sociais: Sobre mim

Só indico estes, porque garanto que funcionam, não conheço outros melhores. São muito bons.

Faça turismo em Extrema MG – Confira Hotéis em Extrema – Imobiliárias em Extrema – Restaurantes em Extrema

Se você tiver alguma dúvida, vá no INDEX (menu acima) e entre em contato, teremos prazer em ajudar.

Agora que já dei essas dicas, entre nesse projeto que poderá mudar sua vida, assim como mudou a minha, visite: Projeto do Bem

Facebook Comments
Facebook Comments