HTML Faça já sua home page!!!

HTML Básico

     Para você que está iniciando a programar em HTML desejo boa sorte, e vai uma sugestão, se não entender alguma tag (comando), não desista esperimente-á em algum documento HTML e talvez vendo como ela funciona ira entende-lá mais facilmente. É recomendado que principiantes usem o bloco de notas do Windows 95 para elaborarem suas primeiras páginas (depois de uma olhada no editor HTML para iniciantes que se encontra na seção Faça sua HP), deve-se salvar esses arquivos com extensão .htm ou .html (escolha um padrão, prefiro html) e depois você pode visualizar suas páginas usando seu broswer, sendo ele o Netscape ou o Internet Explorer.

     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>
Conteúdo da página......
</HTML>

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>WildWeb</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="#707070" 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

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) Ex.: <hr size=2>
     Que ficaria assim:


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 a InterWeb adicione: < a href="http://www.interweb.com.br">InterWeb</a>

     Que ficaria como: InterWeb (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.


|Voltar ao menu|

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

Frame Basic <frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
Seu browser não suporta brames <noframes>

<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME SRC="url">
<NOFRAMES> ... </NOFRAMES>

</FRAMESET>
<HTML>

Frame Size

<frameset cols=#>

A B C
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>

<frameset rows=#>

A
B
C
<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>

COLS & ROWS

A B
C
<frameset cols=20%,*>
<frame src="A.html">
 <frameset rows=40%,*>
 <frame src="B.html">
 <frame src="C.html">
 </frameset>
</frameset>

Frame Option

Frame Name
<frame name=#>
<a href=url target=#>

A B
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="B.html" name="HELLO">
</frameset>

Special Target


<a href=url target=_blank>
<a href=url target=_self>
<a href=url target=_parent>
<a href=url target=_top> Frame Appearance

Frame Border <frame frameborder=#> #=yes, no

A
B C
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=no>
<frameset cols=30%,*>
  <frame src="Bcol.html" frameborder=no>
  <frame src="Ccol.html" frameborder=no>
</frameset>
</frameset>

Frame Spacing <frameset framespacing=#> #=Space Size

A
B C
<frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
  <frame src="Bcol.html">
  <frame src="Ccol.html">
</frameset>
</frameset>

Border Color <frameset bordercolor=#>

#=rrggbb Hex Number, or Name:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, Green, Purple, Silver, Yellow, Aqua
A
B C
<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
  <frame src="Bcol.html">
  <frame src="Ccol.html">
</frameset>
</frameset>

Margin <frame marginwidth=# marginheight=#>

AAAA AA
AA
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
  marginwidth=50
  marginheight=50>
</frameset>


Scrollbar <frame scrolling=#> #=yes, no, auto

Display A.html


Load A
Load B
Load C

<center>
<iframe src="A.html" name="window">
  Here is a Floating Frame
</iframe>
<br><br>
<a href="A.html"
  target="window">Load A</A><BR>
<a href="B.html"
  target="window">Load B</A><BR>
<a href="Ccol.html"
  target="window">Load C</A><BR>
</center>


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 Animados

     Numa página não se pode faltar imagens, por esse motivo criamos uma coletania de imagens para você no formato .ZIP clique aqui para pegá-las.


|Voltar ao menu|

Mostrando a page pro mundo!!!

     Agora dicas de como publicar sua página de graça e tambem de como conseguir contadores de páginas

Publicando sua página

      A Geocities é o mais famoso site que hospeda Home Pages gratuitamente.
Clique aqui para saber detalhadamente como colocar sua página na Geocities, ou então visite no seção chamada Grátis e saiba de mais lugares para hospedar seu site de graça.

Como conseguir contador?

      Se a página for no Geocities - você tem que acessar
http://www.geocities.com/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.

     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.interweb.com.br). No Dragonfire's você pode obter informações adicionais.


Todos os Direitos Reservados à InterWeb