Como fazer sua Home Page

Image of 190.gif

                                                    Textos que "Rolam"

                     Você alguam vez já pensou como é interessante aqueles textos que aparecem nas Home Pages caminhando da Direita para a Esquerda? Parece que é complicado aquilo.....mas é um dos artifícios mais fáceis de se fazer.
                    Para isso usa-se o comando chamado <marquee>!

Ex: <marquee>GeNiU'S Home Page. #Natal/Brasnet!</marquee> ficaria:

GeNiU'S Home Page. #Natal/Brasnet!

                    Interessante, né? Pois esse comando pode ser utilizado tanto em textos como em imagens!!!


Image of 190.gif

                                                    Colocando Barras

Para colocar uma barra em sua Home Page, você utilizrá o comando <hr>.

Para especificar os atributos da barra, você poderá adicionar os atributos como largura(size),
tamanho(width) e cor(color).
Ex: <hr color="blue" size="4" width="450"> faria a seguinte barra abaixo:


Ex2: <hr size="4"> faria esta:


Image of 190.gif

                                  Adicionando Links

                     Um link é uma conexão com outro endereço ou arquivo que seja automaticamente aberto(ou pedido, no caso de arquivos para download) ao receber o click do mouse.
                     O comando para fazer um link é o seguinte:

<a href="arquivo.extensão">Frase, nome, ou texto qualquer</a>

Ex: <a href="http://www.cade.com.br">Cadê</a>!!!
Isso ficaria como:
Cadê

Caso você queira direcionar o link a uma página ou arquivo que esteja DENTRO DO DIRETÓRIO DA SUA CONTA HOST, não é necessário digitar o caminho completo, basta digitar o nome do arquivo. Como eu tenho uma página com arquivos mid em um mesmo diretório na Geocities, eu posso usar o seguinte comando para direcionar o link abaixo para a minha Página de Mid's:

Ex: GeNiU'S Midis Page

Isso resultaria:
GeNiU'S Midis Page

O mesmo pode ser feito a um arquivo que você queira deixar a disposição para Download:
<a href="titanic.mid">Clique aqui para pegar uma Mid</a>

Isso resultaria:
Clique aqui para pegar uma Mid


Image of 190.gif

                                                                Linkando um E-mail

Para linkar um E-mail, você usará a seguinte síntese:

<a href="mailto:endereço@etc.com.br">Nome, texto ou frase</a>

Ex: <a href="mailto: o_geniu@hotmail.com">Clique aki para me mandar um E-mail</a>
Isto ficaria como:
Clique aki para me mandar um E-mail

Obs: Para fazer de uma imagem um link, no lugar da frase, insira o comando de adicionar imagens:
<a href="mailto:flavio@nat.sol.com.br"><img src="imagem.extensão" border="#"
align="posição">


Image of 190.gif

                                                                    Inserindo Âncoras

               Âncora é uma espécie de link que direciona a um determinado LOCAL da página. Fazer uma âncora é facílimo, esta página está cheia delas!
               Para fazer uma âncora, a sintese é a seguinte:
               Ao construir o link que possua a âncora, digite:
<a href="página.html#nome_da_âncora">Nome, texto ou frase</a>

Obs: Verifique se a página é .html ou .htm!!!! Se você errar a extensão não irá funcionar!

               No local da página a ser direcionado, use o comando:
<a name="nome_da_âncora">Nome, texto ou frase</a>

               Então, ao clicar no Link, você será direcionado ao local da página desejado! Não tem segredo, é muito fácil!
               Digamos que eu queira colocar uma âncora que direcione a seção anterior, denominada "Linkanda um E-mail".
Ex: <a href="hp.html#email">Clique aki para voltar</a>


Isto ficaria:
Clique aki para voltar

Obs: Caso você queira ver o código que está no local direcionado da página, clique em Exibir/Código Fonte, e procure por toda a página até achar o local (isto será um ótimo aprendizado!).
Obs2: O "nome_da_âncora" é você quem inventa na hora que estiver criando o LINK, daí é só
repetir quando for editar o local.
Obs3: Caso você não esteja conseguindo entender o código fonte para observar o código do
local, lá deverá ter algo como:
<a name="email"><font size="8"><font color="green">Linkando um E-mail</font></font></a>
Esses códigos são perfeitamente entendíveis, já que foram todos estudados anteriormente!!

Image of 190.gif

                              Adicionado Imagens

                   Praticamente não existe nenhuma Home Page que não tenha sequer uma imagen inserida. Isso é essencial na hora de tornar uma hp bonita! Primeiramente você terá que ter uma imagem já editada, toda bonitinha, em seu computador. Para isso use qualquer Editor de imagens, como o Adobe Photoshop, o Corew Draw, etc...contanto que suporte imagens do tipo jpeg( ou jpg), ou gif, que são imagens compactadas, de tamanho reduzido. Não existe na internet, adicionadas a Home Pages, imagens do tipo bmp,pcx,cpt, ou qualquer uma outra de tamanho proporcionais a estas, pois isso tornaria a abertura da página MUITĺSSIMO lenta!  Então,depois de editar sua imagem, escolha salvar como.. e abaixo do nome da imagem selecione jpeg ou gif! Pronto, editada e salva a imagem, vamos ao que interessa, pois falar besteira me dá coceira!!!
                   O comando pra inserir uma imagem é simples, basta inserir o comando:
Obs: Para isso você terá que ter a imagem no mesmo diretório que está a página em seu host. Se ela estiver em outro diretório, você terá que digitar o caminho completo!
                   Para inserir uma imagem e fazer com que ela seja um link, use a síntese:
<a href="página.html"><img src="imagem.extensão">

Obs: Ao fazer desta imagem um link, caso você não queira que ela tenha borda, use: <img
src="imagem.extensão" border="0">



Para selecionar a posição da imagem, use a síntese:
<img src="imagem.extensão" align="posição">
As "posições" podem ser:
center, left, right, etc...., sempre em imglês!


Image of 190.gif

                                                Inserindo Tabelas

Para inserir uma tabela, a síntese é:
<table border="largura_da_borda">

Agora, iremos inserir linhas e colunas à tabela:
A linha é iniciada com o comando tr.
A coluna é iniciada com o comando td.
Ex:
<table border="3">
<tr><td>Mês</td><td>Dia</td></tr>
<tr><td>Junho</td><td>17</td></tr>
<tr><td>Agosto</td><td>20</td></tr>
<tr><td>Novembro</td><td>9</td></tr>
</table>
   Obs: Para colocar uma textura na tabela, selecione uma imagem e inicie a tabela com o comando:
&table border="#" background="imagem.extensão">
Obs: Ao inserir o texto, selecione uma cor de font que seja oposta à cor do fundo, como foi feita
no exemplo acima.
Obs2: Os comandos <font color> e </font> têm que ser feitos antes e depois de "cada" nome,
senão não haverá mudança na
cor dos caracteres!!!


Image of 190.gif

                                                   Inserindo Listas Organizadas

          Lembra-se do ĺndice do início desta página?
          Aquelas bolinhas antes de cada item?
          Pois é, talvez você não tenha notado, mas todas elas foram criadas a partir de comandos Html ( ou você acha que existe uma tecla correspondente no meu KeyBoard?) A síntese para criar uma lista é muito parecida com a de criar tabelas, mas ela é mais cheia de detalhes.
          Bem, o básico é esse:
<ul> = inicia uma lista
<li>Item = adiciona um item à lista
Ex:
<ul>
<li>Página1
<li>Página2
<li>Página3
<li>Página4
<li>Página5
<li>Página6
<li>Página7
</ul>
Ficaria:

   Página1
    Página2
    Página3
    Página4
    Página5
    Página6
    Página7


Obs: Se você usar o <ul> no início de cada ítem, você criará, consequentemente, sub-itens!
Ex:
<ul>
<li>Página1
<ul>
<li>Página2
<ul>
<li>Página3
<li>Página4
<li>Página5
<li>Página6
<li>Página7
</ul>
Ficaria:

    Página1
             Página2
                       Página3
                       Página4
                       Página5
                       Página6
                       Página7


Para criar listas "NUMERADAS", ao invés de usar o comando <ul>, você usará o comando <ol>
e prosseguir normalmente!
Ex:
<ol>
<li>Página1
<li>Página2
<li>Página3
<li>Página4
</ol>
Ficaria:

  1.Página1
  2.Página2
  3.Página3
  4.Página4

Para criar "LISTAS DESCRITIVAS", usamos os comandos <dt> (para descrever o título), e o
comando <dd> (para iniciar
a descrição), isso tudo entre <dl> e </dl>.


Obs: Para a quebra de linha, adicione <br> como no exemplo acima.


Image of 190.gif

                                                                             Frames

  Para inserir frames, o comando é o seguinte:
<FRAMESET BORDER=0 COLS="#%,#%">
<FRAME SCROLLING="NO" SRC="Página1.html" NAME="Nome1" NORESIZE>
<FRAME SCROLLING="AUTO" SRC="Página2.html" NAME="Nome2" NORESIZE>
</FRAMESET>
  Onde:

    Border = Define borda entre páginas
    Cols = Define a quantidade de páginas presentes em forma percentual.
    Ex1: 12%,88%
    Ex2: 10%,90%
    Obs: Note que a soma sempre deverá dar igual a 100%
    Scrolling="no" = Não permite o rolamento de tela
    Scrolling="auto" = Permite rolameto de tela
    Scr = Inserção do nome da página a ser mostrada
    Name = Título da página referente


Obs: Parece complicado, mas ao testar realmente em seu computador, se tornará bem simples!



                                    
   


                                                      Inserindo Musicas de Fundo

          Inserir uma música de fundo é muito simples, mas é preciso dar algumas informaçõ quanto ao tipo de música utilizada:
          Ao inserir uma música, você deverá levar em consideração o tamanho da música Kbites, pois uma música muito grande tornará a sua leitura muito demorada, sacou?
          Use sempre arquivos mid's.
          Por último, escolha bem a sua música, hehe, gosto é gosto! Mas influencia muito, okz?                  Bem, agora chega de conversa mole que o que interessa está por vir.
          Para inserir uma música existem dois comandos:

  1.<bgsound src="arquivo.mid" loop="número_de_vezes_a_ser_tocado">

    O outro comando é:

  2.<embed src="arquivo.mid" width="0" height="0" loop="número_de_vezes_a_ser_tocado" autostart="true">

Obs: É altamente recomendável, usar o comando 2. para inserir música na sua home page. Isso se deve à frágil compatibilidade entre Netscrape Walligator e o Internerd Exploder! Ao usar o primeiro comando, somente portadores de Netscrape irão ouvir a MID. Usando o segundo comando, todos os mortais ouvirão! Bem.... aqui.... você decide! Como eu uso sempre o segundo comando, darei mais importância a ele devido a sua maior complexidade. Caso você não queira iniciar uma MID assim que entrarem em sua Home Page, deverá fazer algumas mudanças em relação aos comandos nos items "width", "height" e "autostart".
Width = Largura da janela
Height = Altura da janela
Autostart = Essa função pede para confirmar o modo de quando a música será iniciada
          Se a escolha for "true", ela iniciará assim que a janela se abrir; se a opção for "false", ela tocará depois de algum comando que iremos explicar agora.
          Se não quiser que a música toque assim que a página for lida, use a seguinte síntese com base nos dados comentados acima:
<embed src="arquivo.mid" width="#" height="#" loop="número_de_vezes_a_ser_tocado"
autostart="false">
         Note que em "width" e "height" deverá ser acrescido um número que indicará as medidas da janela que será aberta assim que a página for lida. Essa janela aparecerá com um botão "PLAY" e só iniciará a música assim que o mesmo for pressionado, justificando, assim, o motivo de a opção "autostart" seja respondida com "false"!!


                                       Fim

Obs: Agora vc ja pode fazer a sua Home Page

Image of saida.gif

  Clique aqui para voltar

http://www.gosplash.com/