Em primeiro você deve ter um editor serve o NOTEPAD, depois de escrever é só salvar com nome do arquivo.HTML.
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......
<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="black" link="blue"
vlink="red"></body>
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 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
Se você quiser adicionar uma barra a
sua página, use o comando: <hr size=#> (Onde
# é a largura)
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
MAGNUM HOME PAGE adicione: <a
href="http://geocities.datacellar.net/SiliconValley/Horizon/2190/index.htm">MAGNUM
HOME PAGE</a>
Que ficaria como: MAGNUM HOME PAGE (Não clique)
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>
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)
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>
Se você quiser fazer uma lista
numerada, simplesmente substitua os comandos <ul>
e </ul> por <ol> e
</ol> seguidamente da lista não numerada
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:
As entradas com etiquetas <DT>
and <DD> podem conter:
* multiplos paragrafos (separados por etiquetas de paragrafo),
* listas, ou
*outra informacao da descricao.
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! Agora você já sabe o básico sobre html, já pode ate criar uma primeira página.
Aqui você irá encontrar várias coisas para incrementar sua página, entre elas: Frames, Java, Musica de Fundo e Etc
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
Seu browser não suporta brames <noframes>
</FRAMESET>
<HTML>
|
<frameset cols=30%,20%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> |
|
<frameset rows=25%,25%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> |
|
<frameset cols=20%,*>
<frame src="A.html">
<frameset rows=40%,*>
<frame src="B.html">
<frame src="C.html">
</frameset>
</frameset>
|
|
<frameset cols=50%,50%> <frame src="A.html"> <frame src="B.html" name="HELLO"> </frameset> |
|
<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>
|
||||
|
<frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
|
||||
|
<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
<frame src="Bcol.html">
<frame src="Ccol.html">
</frameset>
</frameset>
|
||||
|
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
|
|
<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> |
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">
Numa página não se pode faltar imagens, por esse motivo eu criei uma coletania de imagens para vocêPEGARe colocar na sua Home Page.
Agora dicas de como publicar sua página de graça e tambem de como conseguir contadores de páginas
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!
Clique aqui para saber detalhadamente como colocar sua página na Geocities.
Se a página for no Geocities -
você tem que acessar
http://geocities.datacellar.net/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 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.