como editar html
Autor: Danilolmx | Publicado: 2011-11-09T07:33:00-08:00

como editar html






 


  
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&nbsp;salvar
  como .html.
      
  Toda página é composta por Tags, que são os comandos html. Toda página deve
  comerçar com a tag &lt;HTML&gt; e terminar com &lt;/HTML&gt;. 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:



·&nbsp;
  &lt;HTML&gt;



·&nbsp;
  &lt;HEAD&gt;



·&nbsp;
  &lt;TITLE&gt; Título da página &lt;/TITLE&gt;



·&nbsp; &lt;/HEAD&gt;



·&nbsp; &lt;BODY&gt; Texto; Imagens; Links; etc
  &lt;/BODY&gt;



·&nbsp;
  &lt;/HTML&gt;

  As tags podem ser escritas em Maiúscula ou Minúscula Ex.: &lt;html&gt; ou
  &lt;HTML&gt;.

  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
  &lt;BODY&gt; :

Através
  de &lt;BODY&gt;, podemos definir cores dos textos, links e fundo das páginas,
  ou uma imagem de fundo. Temos então:

·&nbsp; BGCOLOR -
  Cor de fundo

·&nbsp; TEXT -
  Cor da fonte dos textos

·&nbsp; LINK -
  Cor dos links (padrão: azul)

·&nbsp; ALINK -
  Cor dos links, quando clicados (padrão: vermelho)

·&nbsp; VLINK -
  Cor dos Links, depois de visitados (padrão: roxo)

·&nbsp;
  BACKGROUND - Imagem de fundo: Indica o URL da imagem.
      
  Podemos definir tudo de uma só vez, colocando o seguinte código:
      
  &lt;BODY BGCOLOR="YELLOW" TEXT="BLACK"
  LINK="BLUE" ALINK="RED" VLINK="PURPLE"&gt;
      
  Não está no código acima o atributo BACKGROUND pois não é padrão.

C O R E S&nbsp;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:

·&nbsp; Preto =
  black - código = #000000

·&nbsp; Branco =
  white - código = #FFFFFF

·&nbsp; Azul =
  blue - código = #0000FF

·&nbsp; Amarelo =
  yellow - código = #FFFF00

·&nbsp; Verde =
  green - código = #008000

·&nbsp; Lima =
  lime - código = #00ff00

·&nbsp; Marron =
  maroon - código = #800000

·&nbsp; Oliva =
  olive - código = #808000

·&nbsp; Azul
  Celeste = aqua - código = #00ffff

·&nbsp; Lilás =
  fuchsia - código = #ff00ff

·&nbsp; Cinza =
  gray - código = #808080

·&nbsp; Azul
  escuro = navy - código = #000080

·&nbsp; Roxo =
  purple - código = #800080

·&nbsp; Verde
  escuro = teal - código = #008080

·&nbsp; Cinza
  claro = silver - código = #c0c0c0

·&nbsp; 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 &lt;H&gt; -
  "Headings".

  A tag &lt;H&gt; 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:&lt;H1&gt;



Este é o tamanho:&lt;H2&gt;



Este é o tamanho:&lt;H3&gt;



Este é o tamanho:&lt;H4&gt;



Este é o tamanho:&lt;H5&gt;



Este é o tamanho:&lt;H6&gt;



Pode-se
  alinhar os cabeçalhos
      
  &lt;H2 ALIGN=CENTER&gt;Texto centralizado&lt;/H2&gt;
      
  &lt;H2 ALIGN=RIGHT&gt;Texto alinhado à direita&lt;/H2&gt;
      
  &lt;H2 ALIGN=LEFT&gt;Texto alinhado à esquerda&lt;/H2&gt;

TAMANHO E CORES
  DAS LETRAS :

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



·&nbsp; &lt;FONT
  FACE&gt; - Define o tipo de letra



·&nbsp; &lt;FONT
  COLOR&gt; - Define a cor da letra



·&nbsp; &lt;FONT
  SIZE&gt; - Define o tamanho da letra

  Veja abaixo alguns exemplos:



·&nbsp; &lt;FONT
  FACE="ARIAL" SIZE="1" COLOR="RED"&gt;Fica assim&lt;/FONT&gt;



·&nbsp; &lt;FONT
  FACE="ARIAL" SIZE="2" COLOR="BLUE"&gt;Fica assim&lt;/FONT&gt;



·&nbsp; &lt;FONT
  FACE="ARIAL" SIZE="3" COLOR="BLACK"&gt;Fica assim&lt;/FONT&gt;



·&nbsp; &lt;FONT
  FACE="TIMES" SIZE="5" COLOR="BLUE"&gt;Fica assim&lt;/FONT&gt;
      
  * Note que você define com mais precisão o tamanho das letras do que a tag
  &lt;H&gt;.

COMO FORMATAR OS
  TEXTOS :



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

  &lt;B&gt; - Negrito, &lt;U&gt; - Sublinhado, &lt;I&gt; - Itálico e
  &lt;CENTER&gt; - Centralizado



·&nbsp; &lt;B&gt;Texto
  em Negrito&lt;/B&gt;



·&nbsp; &lt;U&gt;Texto
  Sublinhado&lt;/U&gt;



·&nbsp; &lt;I&gt;Texto
  em Itálico&lt;/I&gt;



·&nbsp;
  &lt;STRIKE&gt; ou &lt;S&gt; Texto Riscado&nbsp;assim



·&nbsp;
  &lt;SUB&gt; Como em H2O - O número 2 ficou em baixo.



·&nbsp;
  &lt;SUP&gt; Como em Km2&nbsp;- O número 2 ficou em cima.



·&nbsp; &lt;CENTER&gt;Texto
  Centralizado&lt;/CENTER&gt;





  Você também pode acumular os efeitos, agrupando os códigos Ex.:



&lt;CENTER&gt;&lt;B&gt;&lt;U&gt;&lt;I&gt;O
  texto fica assim&lt;/B&gt;&lt;/U&gt;&lt;/I&gt;&lt;/CENTER&gt;



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 &lt;P&gt; e para linha usar &lt;BR&gt; Exemplo:

  &lt;P&gt;

  Primeiro Parágrafo

  &lt;BR&gt;

  Primeira Linha



&lt;P&gt;
      
  Segundo Parágrafo
      
  &lt;BR&gt;
      
  Segunda Linha
      
  Note que cada vez que você coloca a TAG &lt;BR&gt; estará fazendo uma nova
  linha, que também não deixa de ser um parágrafo.
      
  Se você escrever sem usar as tags &lt;BR&gt; ou &lt;P&gt; o próprio browser
  quebra as linhas automaticamente.



ALINHAMENTO COM A
  TAG &lt;P&gt; :

Para
  alinhar os parágrafos basta incluir depois do "P" o parâmetro
  "align + tipo de alinhamento", conforme abaixo:



·&nbsp; &lt;P
  ALIGN="LEFT"&gt; Texto alinhado à esquerda.



·&nbsp; &lt;P
  ALIGN="RIGHT"&gt; Texto alinhado à direita.



·&nbsp; &lt;P
  ALIGN="CENTER"&gt; Texto centralizado.



·&nbsp; &lt;P
  ALIGN="JUSTIFY"&gt; Texto justificado.

COMO INCLUIR
  IMAGENS NO SITE :

A TAG
  utilizada é: &lt;img src="nome da
  imagem+extensão"(gif,jpg,bmp,etc)&gt;

  Atributos da Imagem:

·&nbsp; WIDTH -
  Define a largura da imagem.

·&nbsp; HEIGHT -
  Define a altura da imagem.

·&nbsp; ALT -
  Texto que aparece quando é passado o mouse sobre a imagem

·&nbsp; BORDER -
  É um valor atribuido à largura da borda da imagem (Contorno).

  Veja alguns exemplos:

  &lt;img src="zero.gif" alt="Seu texto" border="0"&gt;

  &lt;img src="zero.gif" alt="Seu texto"
  border="1"&gt;

  &lt;img src="zero.gif" alt="Seu texto"
  border="2" width="20" height="20"&gt;

  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:

·&nbsp; &lt;img
  src="zero.gif" align="top"&gt;

·&nbsp; &lt;img src="zero.gif"
  align="middle"&gt;

·&nbsp; &lt;img src="zero.gif"
  align="left"&gt;

·&nbsp; &lt;img
  src="zero.gif" align="right"&gt;

  Há também os atributos de moldura, que definem o espaço vertical e horizontal
  entre as imagens e os textos circundantes, onde:

  &lt;IMG SRC="imagem.gif"&nbsp;VSPACE=espaço vertical&gt;

  &lt;IMG SRC="imagem.gif"&nbsp;HSPACE=espaço horizontal&gt;

  Ex.:&nbsp;&lt;IMG
  SRC="imagem.gif" ALIGN="LEFT" WIDTH="10"
  HEIGHT="10" VSPACE="50"&gt;

  &lt;IMG
  SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10"
  HEIGHT="10" HSPACE="30"&gt;

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

  &lt;a href="nome do lugar à ser levado"&gt;descrição do
  lugar&lt;/a&gt; 

  Exemplos

  &lt;a href="http://www.extremaonline.com"&gt;Conheça
  Extrema-MG&lt;/a&gt;&nbsp;Resultado:

  




      
  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:
      
  &lt;a href="http://www.extremaonline.com"
  target="_blank"&gt;Conheça Extrema-MG&lt;/a&gt;Para fazer um
  link para uma outra página do seu site use:
      
  &lt;a href="pagina_tal.html"&gt;Clic aqui&lt;/a&gt; - 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:

  &lt;a href="http://www.extremaonline.com"&gt;&lt;IMG
  SRC="local, nome da imagem + extensão"&gt;&lt;/a&gt;&nbsp;Sendo
  que:



·&nbsp;
  http://www.extremaonline.com é o URL (endereço) do site.



·&nbsp; local é
  caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta
  "Imagens".



·&nbsp; 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.

  &nbsp;Lembre-se: foi usado
  a&nbsp;target"_blank"&nbsp;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:

·&nbsp; &lt;a
  href="arquivo.rar"&gt;Clic aqui para baixar&lt;/a&gt;

·&nbsp; &lt;a
  href="pasta_tal/arquivo.zip"&gt;Clic aqui para baixar&lt;/a&gt;

  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:

Listas
       Ordenadas
Listas
       sem ordenação
Listas
       Encadeadas


Exemplos:&nbsp;A lista acima&nbsp;(Ordenada)&nbsp;foi
  feita com os seguintes códigos:

  &lt;OL&gt; &lt;LI&gt; &lt;LI&gt; &lt;LI&gt; &lt;/OL&gt; 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ó &lt;OL&gt;

  use &lt;OL START=1 TYPE=A&gt; - Onde "1" indica para começar pela
  primeira letra do alfabeto.

  Lista Sem Ordenação:

  &lt;UL&gt; &lt;LI&gt; &lt;LI&gt; &lt;LI&gt; &lt;/UL&gt;

  Resultado:

Primeiro
       item.
Segundo
       item.
Terceiro
       item. As "bolinhas" são inseridas automaticamente.


Listas
  Encadeadas:
      
  &lt;OL&gt; &lt;LI&gt; &lt;UL&gt; &lt;LI&gt; &lt;LI&gt; &lt;/UL&gt; &lt;LI&gt;
  &lt;/OL&gt; Produz resultado misto.

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 &lt;BODY&gt;, assim: &lt;BODY BACKGROUND="nome da
  imagem+extensão"&gt;.
      
  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 &lt;MARQUEE&gt;Veja o código:
      
  &lt;MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT"
  BGCOLOR="YELLOW"WIDTH=50%&gt;TEXTO&lt;/MARQUEE&gt;

  Resultado

  

  Onde:&nbsp;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.

  Outro exemplo:&nbsp;&lt;MARQUEE DIRECTION="RIGHT"&gt;
  &lt;FONT SIZE="3" COLOR="RED" FACE="COMIC SANS
  MS"&gt;texto&lt;/FONT&gt;&lt;/MARQUEE&gt;

  LINHAS&nbsp;Para inserir uma linha basta colocar a TAG &lt;HR&gt;.

  Não&nbsp;é preciso fechar "&lt;/HR&gt;".

  Atributos da Linha&nbsp;Você pode definir a largura, cor e
  alinhamento.
      
  &lt;HR SIZE=10&gt; - Insere uma linha de largura 10 pixels.
      
  &lt;HR WIDTH=50%&gt; - Insere uma linha que ocupa 50% do espaço em tela.
      
  &lt;HR WIDTH=50% ALIGN=RIGHT&gt; - Insere uma linha que ocupa 50% do espaço
  em tela alinhada à Direita. Ou LEFT à esquerda.

  Cor da Linha
      
  &lt;HR SIZE=1 WIDTH=100% COLOR="RED"&gt;&nbsp;Veja o resultado:


  
      

  



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
  &lt;TABLE&gt; e &lt;/TABLE&gt; e possue os seguintes atributos:

  border="valor"&nbsp;-Onde o "valor" define a
  largura da borda (contorno).

  cellspacing="valor"&nbsp;-Onde o "valor" define o
  espaço horizontal entre as células.

  cellpadding="valor"&nbsp;-Onde o "valor" define o
  espaço vertical entre as células.

  width="valor"&nbsp;-Onde o "valor" define a
  largura da tabela em pixels ou em porcentagem.

  height="valor"&nbsp;-Onde o "valor" define a
  altura da tabela em pixels ou em porcentagem.

  bgcolor="#cor"&nbsp;-Define a cor de fundo da tabela.

  bordercolor="#cor"&nbsp;-Define a cor da borda.

  background="imagem.jpg"&nbsp;-Define uma imagem de fundo.
      
  A tabela possui alguns comandos que são:
      
  &lt;TR&gt; e &lt;/TR&gt; -Define uma linha da tabela.
      
  &lt;TH&gt; e &lt;/TH&gt; -Define um cabeçalho da tabela.
      
  &lt;TD&gt; e &lt;/TD&gt; -Define a coluna de informações.
      
  &lt;CAPTION&gt; e &lt;/CAPTION&gt; -Define o título da tabela.

  Veja um exemplo:&nbsp;&lt;TABLE BORDER="2"
  BORDERCOLOR="RED" CELLSPACING="10"
  CELLPADDING="6" WIDTH="50" HEIGHT="20"
  BGCOLOR="YELLOW" &lt;TR&gt; &lt;TD&gt; 1a.coluna &lt;/TD&gt;
  &lt;TD&gt;2a.coluna &lt;/TD&gt; &lt;TD&gt; 3a.coluna &lt;/TD&gt; &lt;/TR&gt;
  &lt;TR&gt; &lt;TD&gt; 1a.linha &lt;/TD&gt; &lt;TD&gt; 1a.linha
  &lt;/TD&gt;&lt;TD&gt; 1a.linha &lt;/TD&gt; &lt;/TABLE&gt; &lt;/BR&gt;

  Você pode colocar o código acima em apenas uma linha.&nbsp;Resultado:



   


    

   


    
1a.coluna


    
2a.coluna


    
3a.coluna


   


    
1a.linha


    
1a.linha


    
1a.linha


   

      




Para
  que a tabela fique centralizada, como acima, use a tag &lt;CENTER&gt; antes
  do código e

  &lt;/CENTER&gt; depois do código.

  Também pode-se alinhar o texto dentro das células, utilizando os seguintes
  atributos:

  Align="left"&nbsp;-Alinha o texto à esquerda.

  Align="right"&nbsp;-Alinha o texto à direita.

  Align="center"&nbsp;-Alinha o texto no centro.

  Valign="top"&nbsp;-Alinha o texto no topo da célula.

  Valign="middle"&nbsp;-Alinha o texto no meio da célula.

  Valign="bottom"&nbsp;-Alinha o texto na parte inferior da
  célula.

  ADICIONANDO UMA LISTA DENTRO DA CÉLULA:

  &lt;TABLE
  BORDER="1" &lt;TR&gt; &lt;TD&gt;lista dentro da célula&lt;UL&gt;
  &lt;LI&gt;1 item&lt;LI&gt;2 item&lt;LI&gt;3 item&lt;/UL&gt; &lt;/TD&gt;
  &lt;/TABLE&gt;Resultado:

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:&nbsp;index.html&nbsp;e
  as outras duas serão abertas dentro desta página principal.

  Exemplo:
      
  &lt;HTML&gt;
      
  &lt;HEAD&gt;
      
  &lt;TITLE&gt; Título da página &lt;/TITLE&gt;
      
  &lt;/HEAD&gt;
      
  &lt;FRAMESET COLS="20%, 80%"&gt;
      
  &lt;FRAME SRC="pagina1.html"&gt;
      
  &lt;FRAME SRC="pagina2.html"&gt;
      
  &lt;NOFRAME&gt;
      
  &lt;/NOFRAME&gt;
      
  &lt;/FRAMESET&gt;
      
  &lt;BODY&gt;
      
  &lt;/BODY&gt;
      
  &lt;/HTML&gt;
      
  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 &lt;FRAMESET COLS="20%, 80%"&gt; 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 &lt;NOFRAME&gt; e &lt;/NOFRAME&gt; é 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:
      
  &lt;HTML&gt;
      
  &lt;HEAD&gt;
      
  &lt;TITLE&gt; Título da página &lt;/TITLE&gt;
      
  &lt;/HEAD&gt;
      
  &lt;FRAMESET COLS="20%, 80%"&gt;
      
  &lt;FRAME SRC="pagina1.html"&gt;
      
  &lt;FRAMESET ROWS="20%, 80%"&gt;
      
  &lt;FRAME SRC="pagina3.html"&gt;
      
  &lt;FRAME SRC="pagina2.html"&gt;
      
  &lt;NOFRAME&gt;
      
  &lt;/NOFRAME&gt;
      
  &lt;/FRAMESET&gt;
      
  &lt;BODY&gt;
      
  &lt;/BODY&gt;
      
  &lt;/HTML&gt;

  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:
      
  &lt;HTML&gt;
      
  &lt;HEAD&gt;
      
  &lt;TITLE&gt; Título da página &lt;/TITLE&gt;
      
  &lt;/HEAD&gt;
      
  &lt;FRAMESET ROWS="20%, 80%"&gt;
      
  &lt;FRAME SRC="pagina1.html"&gt;
      
  &lt;FRAME SRC="pagina2.html"&gt;
      
  &lt;NOFRAME&gt;
      
  &lt;/NOFRAME&gt;
      
  &lt;/FRAMESET&gt;
      
  &lt;BODY&gt;
      
  &lt;/BODY&gt;
      
  &lt;/HTML&gt;

  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.

COMO INSERIR
  MÚSICA NO SITE:

Para
  inserir uma música em sua página, antes de fechar a tag &lt;HEAD&gt; coloque
  a tag: &lt;BGSOUND SRC="musica.mid"&gt;.A Extensão do arquivo pode
  ser .mid ou .wav.

  Para que a música toque novamente, sempre, acrescente:&nbsp;loop="-1"&nbsp;Assim:

  &lt;BGSOUND SRC="musica.mid" loop="-1"&gt;

  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:

  &lt;EMBED SRC="musica.mid" AUTOSTART="FALSE"
  LOOP="TRUE"&gt;

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

  &lt;EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE"&gt;

  * Você ainda pode definir o tamanho do display, assim:

  &lt;EMBED
  SRC="musica.mid" AUTOSTART= LOOP="TRUE" WIDTH=145
  HEIGHT=25&gt;

COMO INSERIR
  FLASH NO SITE:

Para
  inserir um flash (arquivo com extensão .swf), como abaixo, coloque este
  código depois da tag &lt;BODY&gt;:

  &lt;OBJECT CLASSID="FLASH" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/

  flash/swflash.cab#version=6,0,0,0 "&gt; &lt;EMBED
  SRC="arquivo.swf" WIDTH="200" HEIGHT="200"
  TYPE="application/x-shockwave-flash"
  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"&lt;/EMBED&gt;
  &lt;/OBJECT&gt;


      
  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
  &lt;BODY&gt;:

  &lt;EMBED SRC="arquivo.avi" &lt;/EMBED&gt;

&lt;="" embed=""&gt;



·&nbsp; 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 :

Após
  feito seu site, não basta apenas coloca-lo na internet somente com a tag
  título,

  &lt;TITLE&gt; Título da página&lt;/TITLE&gt;, é preciso que os buscadores,
  como o Google, Yahoo, etc "achem" o seu site, e outras informações,
  por isso, você deve inserir as METAS TAGS necessárias, entre &lt;HEAD&gt; e
  &lt;/HEAD&gt; conforme abaixo:

·&nbsp; &lt;META
  NAME="keywords" CONTENT="palavras chaves"&gt;

  Note que onde está escrito "palavras chaves" você deve colocar as
  palavras pelo qual os buscadores encontrarão seu site quando procurado na
  pesquisa pelo Google, Yahoo, por exemplo. As palavras deverão ser escritas em
  minúsculas e separadas por uma vírgula e logo após um espaço. Ex.:
  "bonito, fotos, casamento, dicas, downloads, etc".

·&nbsp; &lt;META
  NAME="Description" CONTENT="descrição do seu site"&gt;

  Informe do que se trata seu site, coerente com o título e as palavras chaves.

  Ex.: "Site bonito, com fotos de casamento, downloads e dicas".

·&nbsp; &lt;META
  NAME="AUTHOR" CONTENT="seu nome"&gt;

  Coloque seu nome, pois é ético e fornece confiança ao site.

·&nbsp; &lt;META
  NAME="ROBOTS" CONTENT="INDEX, FOLLOW"&gt;Sendo:

  "index,follow"&nbsp;- Indexa a página inicial e todas as
  páginas nela indicadas.

  "noindex,follow"&nbsp;- Não indexa a página inicial, mas
  indexa as páginas nela indicada.

  "index,nofollow"&nbsp;- Indexa a página inicial, mas não os
  links que ela indique.

  "noindex,nofollow"&nbsp;- Não indexa nem a página inicial e
  nem os links.

  Se é seu primeiro site, está aprendendo, use o primeiro exemplo
  "index,follow".

  Aconselho você que fez um site com FRAMES usar "index,follow"
  somente na página que você salvou como index.html,&nbsp;e nas
  outra páginas "noindex,nofollow" ou simplesmente não use essa tag
  nessas páginas.

·&nbsp; &lt;META
  HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="pt"&gt;

  Coloque em todas as páginas do site, instruindo os navegadores que seu site é
  feito em lingua portuguêsa.

·&nbsp; &lt;META NAME="GENERATOR"
  CONTENT="Microsoft FrontPage 5.0"&gt;

  Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc.

·&nbsp; &lt;META
  HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;
  charset=iso-8859-1"&gt;

  Indica que você escreveu normalmente seus textos nas páginas html (com
  acentuação, etc) sem usar caracteres especiais (ASCII), e a META TAG acima
  indica isto (palavras originarias do Latim).

  Existem outras Meta Tags&nbsp;que você deve verificar:

COMO FAZER UM
  LINK PARA ENVIAR E-MAIL :

Código:&lt;a
  href="mailto:seuemail@provedor.com.br"&gt;Clic Aqui&lt;/a&gt;
      
  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 é: fulano@provedor.com.br se preferir,&nbsp; 

COMO FAZER UMA
  CAIXA DE TEXTO :

Código:&lt;textarea rows="5"
  cols="50" style="background-color: #ffffff"&gt;ESCREVA
  AQUI O SEU TEXTO&lt;/textarea&gt;

  Fica assim:





COMO FAZER UMA
  ÂNCORA :

Repare
  que ao clicar&nbsp;ir para âncora&nbsp;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:&lt;a name="ancora"&gt;
      
  E o código do comando "ir para" é:

  Código:&lt;a href="#ancora"&gt;ir para ancora&lt;/a&gt;
      
  Você pode criar vários pontos, como:
      
  &lt;a name="ancora2"&gt; e &lt;a href="#ancora2"&gt;ir
  para ancora2&lt;/a&gt;
      
  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:&nbsp;&lt;a href="#top"&gt;Ir para o topo&lt;/a&gt;

  Para ir à outra página:

  Código:&nbsp;&lt;a href="nomedapagina.html#ancora"&gt;ir
  para ancora&lt;/a&gt;

  Utilizando uma imagem como âncora:

  Código:&nbsp;&lt;a href="#ancora"&gt;&lt;img
  src="imagem.jpg"&gt;&lt;/a&gt;