| Faça JÁ sua Home Page |
Abaixo tudo o que você precisa saber sobre
HTML. Agora não há limites para você criar sua própria home
page pessoal ou profissional ou até inovar aquela sua home page
que estava meio caída. Aproveite.
- HTML Básico
Elementos Title e Body
Atributos para Texto
Modificando as Fontes
Adicionando Barras
Inserindo Links
Inserindo Âncoras
Inserindo Imagens
Fazendo Listas
Criando Tabelas
- HTML Avançado
Criando Frames
Musica de Fundo
Pegando Imagens
Java Script
Pronto
Publicando
Contador
Livro de Visitas
ImageMap
| HTML BÁSICO |
Em primeiro você deve pegar um editor html, existe uma lista de editores na parte Download mas se você quiser pode usar até o bloco de notas ou word pad
Uma página html básica tem a formula parecida com a seguinte:
<HTML>
<HEAD>
<TITLE>Título da
página</title>
</HEAD>
<BODY
BGCOLOR="cor_de_fundo" TEXT="cor_dos_textos"
LINK="cor_dos_links"
VLINK="cor_dos_links_já_visitados"
BACKGROUND="arquivo_de_fundo">
</BODY>
</HTML>
Conteúdo da
página......
| ELEMENTOS <title> e <body> |
<title>
Serve para colocar um titulo na página, que irá aparecer na
parte mais acima do navegador. Ao cabar de colocar o título
coloque: </title> Exemplo: <title>Planet
Web 'Entertainment Zone'</title>
<body>
Serve para configurar algumas coisas da página, como cor de
fundo(bgcolor=cor),figura de fundo(background=imagem),cor do
texto(text=cor),cor dos links(link=cor), cor dos links já
vistos(vlink=cor)e cor dos links abertos naquele
momento(alink=cor). Exemplo:
<body
background="back.jpg" bgcolor="white"
text="black" link="blue"
vlink="red"></body>
| ATRIBUTOS PARA TEXTOS |
Em HTML praticamente tudo funciona com comandos, se você quiser fazer um paragrafo ou uma quebra de linha não poderá simplesmente apertar ENTER e escrever na linha abaixo como em editores de texto, terá que usar os comandos de paragrafo e de quebra de linhas que são seguidamentes <p> e <br>
Exemplo de texto com Paragrafos e quebra de linhas: <p>Olá! <br>Oi! <p>Tchau Que ficaria:
Olá!
Oi!
Tchau
Existem outros atributos para textos, conheça alguns deles abaixo:
- <center>Texto</center> - Texto centralizado
- <b>Texto</b> - Texto em Negrito
- <u>Texto</u> - Texto Sublinhado
- <i>Texto</i> - Texto em Italico
- <h#>Texto</h#> - Texto com o nivel #
- <pre>Texto</pre> - Texto preformatado
- <blockquote>Texto</blockquote> - Bloco de notas
- <address>Texto</address> - Endereços
- <code>Texto</code> - Carecteres de tamanhos fixos
| FONTES |
Usando fontes você poderá mudar as cores de um texto, aumentar ou diminuar seu tamanho e mudar o estilo da fonte. O comando é o seguinte:
<Font
color="cor_do_texto">Texto</font> - Mudar a cor de um
texto
<Font
size=#>Texto</font> - Mudar o tamanho para #
<Font
face="estilo">Texto</font> - Mudar o estilo da
fonte
| BARRAS |
Se você quiser adicionar uma barra a sua página, use o comando: <hr size=#> (Onde # é a largura)
| LINKS |
Links são conexões para outros endereços usados geralmente para acessar outras páginas ou pegar algum arquivo
A formula para inserir um link é a seguinte:
<a href="arquivo.extenção">Texto Link</a>
No caso de frames ou se você quiser que o endereço apareça em outra janela você pode selecionar o alvo com o seguinte comando:
<a href="arquivo.extenção" target="alvo">Texto Link</a>
Um exemplo, para criar um link para o Planet Web adicione: <a href="http://www.planetweb.home.ml.org">Planet Web 'The Web Entertainment Zone'</a>
Que ficaria como: Planet Web 'The Web Entertainment Zone' (Não clique)
| ANCÔRAS |
Para criar um link que acesse determinada parte de uma página você deve usar ancôras.
Para criar uma ancôra faça o seguinte:
Na página que terá a ancôra adicione:
<a name=nome_da_ancôra>Parte</a>
E no link use a seguinte formula:
<a href="pagina.ext#nome_da_ancora">Texto Link</a>
| IMAGENS |
Adicionar imagens em uma página é uma coisa que não pode faltar na hora de tornar a página bonita. O comando para adicionar imagens é:
<img src="imagem.ext">
No caso se quiser fazer uma imagem que seja um link, em vez de colocar o texto link adicione o comando citado. Lembre-se de botar após o src="imagem.ext" a linha: border=0 se você não quiser que a imagem tenha borda
Para selecionar o alinhamento de uma imagem use: <img src="imagem.ext" align="alinhamento"> (Lembre-se de colocar os alinhamentos em inglês como: Left, Right etc)
| LISTAS |
Não numeradas
Inicie uma
lista não numerada com a etiqueta: <ul>
Adicione um item a lista com a estiqueta: <li>Item
Repita a etiqueta para adicionar items quantas vezes quiser e
depois finalize a lista com a etiqueta: </ul>
Numeradas
Se você quiser fazer uma lista numerada, simplesmente substitua os comandos <ul> e </ul> por <ol> e </ol> seguidamente da lista não numerada
Descritivas
Uma lista de descricao usualmente consiste em alternar um descricao do titulo (abreviado como dt) e Um descricao descricao (abreviado como dd). A descricao geralmente inicia em uma nova linha, porque o viewer deixa toda linha para o conteudo da descricao do titulo dt
Segue um exemplo de linguagem HTML, de listas descritivas:
<DL> <DT> National Center for Supercomputing Applications <DD> Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e' uma das quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering. </DL> O resultado se parece com:
- National Center for Supercomputing Applications
- Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e' uma das quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering.
- Cornell Theory Center
- O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering.
As entradas com etiquetas <DT> and <DD> podem conter:
* multiplos paragrafos (separados por etiquetas de paragrafo),
* listas, ou
*outra informacao da descricao.
| TABELAS |
Inicie uma tabela com: <table border="largura_da_borda">
Após isso selecione os campos usando: <tr><td>Campo1</td><td>Campo2</td> e assim seguidamente
Quando acabar de selecionar os campos, finalize os campos com: </tr>
Depois é só adicionar os items usando: <tr><td>Item1</td><td>Item2</td></tr> e depois criando uma nova lista de items com: <tr><td>Item1</td><td>Item2</td></tr>
Finalize a tabela com: </table>
Como
exemplo, olhe como ficaria uma tabela parecida com essa citada:
| Campo1 | Campo2 |
| Item1 | Item2 |
| Item1 | Item2 |
| PRONTO |
Pronto! Agora você já sabe o básico sobre html, já pode ate criar uma primeira página.
| HTML AVANÇADO |
Aqui você irá encontrar várias coisas para incrementar sua página, entre elas: Frames, Java, Musica de Fundo e Etc
| FRAMES |
Frames são atributos que se usa muito em páginas html para dividir a página e 2 ou mais telas.
Com os frames, se pode colocar telas dividas, e muitas vezes se usa uma dessas telas para se colocar os links da página, e aquela tela com os links nunca vai mudar. Obs: Alguns navegadores não suportam frames
Podem se fazer frames com divisões horizontais e verticais, veja agora uma página que contem um frame horizontal:
<HTML>
<HEAD>
<TITLE>Título da
página</TITLE>
</HEAD>
<frameset
rows="80%,20%"> (Você pode mudar o 80% e 20% de acordo com o
tamanho)
<noframes>
Seu browser não
suporta frames
</noframes>
<frame
src="cima.htm">
<frame
src="baixo.htm">
</frameset>
E agora a sintaxe de uma página que contem um frame vertical:
<HTML>
<HEAD>
<TITLE>Título da
página</TITLE>
</HEAD>
<frameset
colss="80%,20%"> (Você pode mudar o 80% e 20% de acordo com o
tamanho)
<noframes>
Seu browser não
suporta frames
</noframes>
<frame
src="esquerda.htm">
<frame
src="direita.htm">
</frameset>
| MUSICA DE FUNDO |
Se você quiser que quando uma pessoa entre em sua página ela escute uma musica de fundo, adicione o seguinte comando:
<embed src="arquivo.ext" autostart="true" loop="numero_de_vezes_que_vai_tocar">
| IMAGENS E GIFS ANIMADAS |
Numa página não se pode faltar imagens, sempre procure pela web imagens novas e use bons editor de imagens como o Adobe Photoshop disponível em nossa seção de Download. para você pegar e colocar em sua home-page
| JAVA SCRIPT |
Java Script é uma linguagem de programação que fornece muitos recursos interessantes para home-pages.
A formula para criação de um java script é: <script> Função... </script>
Por exemplo, para criar um java que envie uma mensagem de alerta quando você clicar num botão, use:
<script> function msg() { window.alert("Mensagem") } </script> <form><input type=button value="Clique" onclick="msg();"></form>
Que ficaria como:
Visite também nossa página de exemplos em Java Script e aprenda mais sobre a linguagem olhando exemplos já feitos
| PRONTO |
Agora dicas de como publicar sua página de graça e tambem de como conseguir contadores de páginas
| PUBLICANDO SUA PÁGINA |
* Locadora Virtual
Um dos melhores servidores brasileiros que está publicando home-pages de até 100kb de graça é a Locadora virtual, ela é toda em português e também está fornecendo aluguel de páginas com mais de 200kb, e até aluguel de dominios próprios
A Locadora virtual é toda em português e bem no começo da página já tem um formulário para você preencher e conseguir espaço gratuito, é só preencher o formulário e eles lhe mandaramn um e-mail com uma senha provisória, assim que você preencher o formulário também irá aparecer uma página para colocar sua senha provisória, entao cheque o e-mail, pegue a sua senha e coloque na página, após isso eles darão um login e uma senha, agora fixa, que você irá usar para mandar os seus arquivos. Os arquivos estão sendo mandados por ftp, é só você abrir um programa ftp, conectar a ftp.br2000.com , com seu login e senha, e mandar seus arquivos que eles faram parte da sua home-page!
* Geocities
O Geocities é a página que contem mais membros publicando sua página nela de todo o mundo, ela fornece 2 MB de espaço de graça e tem manutenção por ftp ou pela própria web.
Para publicar sua home-page na geocities entre em: http://www.oocities.org/homestead/homedir.html e escolha o local onde vai se hospedar. Entrando no local, escolha a opção: Join This Neighborhood
Após isso escolha em qual dos sub locais você vai se hospedar, e entre na parte: Find vacancies here. Lá dentro, procure por Choose Address Range e escreva nos dois quadrados a escala para a procura de endereços vagos
Fazendo isso ele lhe dara uma lista de onde tem endereços vagos, escolha um deles. Escolhendo um deles ele mostrará todos os endereços vagos e já pegues da determinada parte que você escolheu. Procure por uma imagem parecida com uma construção, e clique sobre ela para abrir naquele endereço vago
Depois é só completar o formulário com seus dados e enviar que em menos de 2 minutos eles lhe enviaram um e-mail dizendo sua senha (o login será selecionado por você mesmo no formulário)
Pronto, agora existe 2 maneiras de enviar seus arquivos, para mandar por ftp entre com um programa FTP em ftp.geocities.com e envie os arquivos. Se você não tiver um arquivo ftp pegue na página de Download. Ou se quiser mande pela própria web(não aconselho por que as vezes trava) entrando no endereço: http://www.oocities.org/homestead/file_manager.html
* Outros Servidores
O HighWay tecnologias, em português, um
pouco parecido com o Geocities;
A Galeria Silicom é também em
português e oferece 300KB livres;
Home Pages Tecepe oferece uma página
bastante simples em Portugal;
A MarketNet oferece uma página
(pessoal ou comercial) bastante simples, mas de fácil
elaboração;
Pelo Tripod: Tools For
Life,
você tem que se cadastrar e passa a ter acesso a uma serie de
recursos, tais como espaço para home page, gerador de
animação;
A intenção do Earth 2 Cyberspace é criar um planeta
terra virtual, faça uma página relacionada com a sua cidade e
seja um "pioneiro".
Hong Kong Cybercity -- Angelfire -- Webville -- Phoenix Web Hotel -- Sunflower Personal Home Pages -- Vive Web Connections -- Internet Rockhouse -- Nitehawk -- Pwrnet -- Phrantic Project -- Ozimall -- Achievement International -- Home Page do #Brasil -- The City -- Cidade Virtual -- The Sprawl -- MarketNet Free Web Pages -- Alpha Point -- BayScenes Non-Profits Page -- 123 Go Global -- The BBSlist.com -- Allfaiths Press -- GenSource -- Roboweb
| COMO CONSEGUIR UM CONTADOR? |
Se a
página for no Geocities - você tem que acessar
http://www.oocities.org/cgi-bin/counter/member_name.password
O contador será então inicializado/zerado. Depois, é só
colocar na página referência ao contador:
<IMG
SRC="/cgi-bin/counter/member_name">
Obviamente, "member_name" e "password" devem
ser substituidos pelos dados correspondentes.
Utilizando-se
do serviço do Web-Counter - para tal preencha o formulário
na página Creating A
Web-Counter, informando nome para o contador; senha;
número inicial para o contador; e-mail; URL e nome da página.
Na sua página é só incluir a seguinte linha no ponto onde for
para aparecer o contador:
<IMG
SRC="http://counter.digits.com/wc/-d/4/nome">
Onde "nome" é o nome dado ao contador durante o
cadastramento no Web-Counter.
O contador de páginas WWW - a principal vantagem do Contador de páginas WWW é que ele é oferecido pelos nossos patrícios em Portugal e as instruções estão em português.
Utilizando
o Dragonfire's Web Page Counter - basta adionar na página
<IMG
SRC="http://www.dragonfire.net/cgi-bin/counter?sua-URL">
Onde "sua-URL" é é o endereco da página (ex.
http://www.jovem.com/azevedo/index.html). No Dragonfire's você pode obter
informações adicionais.
| LIVRO DE VISITAS |
- Você
pode criar o seu livro de visitantes através do serviço
do The World
Famous Guestbook.
Para ter seu livro basta registrar a sua conta. - Uma solução mais fácil é usando o SPiN Goodies, basta preencher um formulário e veja só o resultado.
- O Guestmate oferece um livro de visitantes com muitos recursos, uma ótima alternativa para quem quiser ter um formulário mais elaborado. O problema é que somente você poderá ter acesso ao que os visitantes escreveram.
- livro de visitantes em Perl - Guestbook Freeware
| IMAGE MAP |
Geração do Mapa da Imagem. Cada imagem possui um mapa que
indica que ação deve ser tomada no caso de um clique (ou seja,
a resposta a "para que outra página eu vou se eu clicar
aqui ?") em cada uma das sessões ativas ("hot
spots" em inglês) da imagem. Também é preciso indicar que
ação vai ser tomada se o clique for fora de uma sessão ativa.
Para gerar as sessões ativas é utilizado um programa que edita
a imagem e gera um mapa das sessões ativas e as URL (Universal
Resource Location) das páginas.
Há vários programas que permitem a edição de mapas. O mais conhecido é o Mapedit com versões para Windows, Sun/Solaris, Linux e DEC. Se você não tiver um programa de edição, aproveite para baixar o Mapedit agora!. A versão windows já está disponível no AlterNex®.
Depois de criado o mapa, insira os seguintes comandos na sua página:
<A
HREF="http://seu.provedor.br/~voce/seumapa.map">
<IMG
SRC="http://seu.provedor.br/~voce/suaimagem.gif" ismap
border=0></A>
Substituindo os campos correspondentes (seu.provedor.br, voce, seumapa.map, suaimagem.gif) pelos nomes que você tem ou criou. As referências ao mapa e a imagem também podem ser relativas (<A HREF="seumapa.map"> e <IMG SRC="suaimagem.gif" ismap border=0>) se o mapa e a imagem estiverem no seu diretório raiz.
O atributo HTML border=0, no comando IMG, inibe a aparição da borda em torno da imagem. Se você quiser que a borda apareça, retire este comando.
- Outras páginas de tutoriais de imagemaps: Graphical Information Map Tutorial, Image Map Tutorial, GHOST Imagemap Tutorial.
