Animal home page - Html

Aqui você aprende a fazer sua HP!

O que é HTML?
HTML é uma linguagem essencial na criação de sites. Existem linguagens mais modernas como o Java e o HTML Dinâmico, mas são muito complicadas e é preciso muito mais tempo para fazê-las manualmente. O HTML é um arquivo de texto. Para fazer um, basta você pegar um programa de edição de Homepages ou abrir um bloco de notas no seu Windows. É necessário que você salve o texto com o final (.htm) em uma Pasta (ou diretório) criada para salvar sua homepage (Ex.: c:\homepage) . Abra um bloco de notas, e se orientando à partir desse texto, vá criando aos poucos sua homepage.

Em primeiro você deve pegar um editor html, mas se você quiser pode usar até o bloco de notas ou Wordpad.
Uma página html básica tem a fórmula 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>Luck Homepage</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 a DFELIX HP adicione: <a href="http://www.dfelixhp.cjn.net">Luck Homepage: A Homepage mais completa!</a>
Que ficaria como: DFELIX HP: A Homepage mais completa! (Não clique)
Âncoras
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

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>

Música 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
Escreva o comando: <img src="nome_da_figura.gif">

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: