Aprenda  H T M L 

 

 

Html

 

A linguagem Html ( Hypertext Markup Language - Linguagem de Marcao de Hipertexto)  usada para criar as pginas divulgadas na World Wide Web, o servio mais popular na Internet.  com ela que so feitos os hyperlinks que permitem navegar pela Web. Para isso, utiliza marcaes, chamadas tags, no ponto da pgina em que  feito um hyperlink com outra pgina.

Para criar uma pgina Html, usaremos o Bloco de Notas, um editor de texto simples que acompanha o Windows. Isto  tudo que voc precisa.

Antes de tudo voc deve criar uma pasta abrindo o Windows Explorer, clicando em Arquivo/ Novo/ Pasta. D um nome sugestivo a esta pasta e coloque nesta pasta todas as figuras gif e jpg que gostaria que sua pgina tivesse. Voc pode criar suas pginas em um disquete fazendo o mesmo com as figuras.

 

"Para melhor proveito imprima toda apostila agora"

 

Ateno: O que pode e no pode ser modificado quando se est criando uma pgina html

Texto em vermelho
 Cdigo Html( no pode ser modificado)
 
Texto em verde 
 Texto que pode ser modificado a vontade
 
Texto em violeta
 Cdigo Html que as vezes pode ser modificado
 

 

Criando sua primeira  pgina Html

 

1 Abra o Bloco de Notas. Clique em Editar e marque o item Mudana Automtica de linha.

 

2 Digite o seguinte texto:

<html>

Toda  pgina Html deve iniciar com essa tag.

 

3 Digite :

<head>

O cabealho deve ser delimitado pelas tags <head> e </head>

 

4 Digite:

<title>

Onde deve ficar o ttulo da pgina.

Feche com </title>.

Exemplo:

<title>teste html</title>

 

5 Digite:

</head> para fechar o cabealho da pgina

 

6 Digite:

<body>

Onde deve ficar o corpo da sua pgina.

Depois deve inserir o ttulo para o texto. Para isso voc usar as tags <h1> e </h1>

Exemplo<h1>Minha primeira Home Page</h1>

O tamanho vai de <h1> tamanho maior para <h6> tamanho menor.

 

7 Para colocar um texto digite :

<p>Texto aqui

Feche com </p>

Exemplo:

<p>Pginas Html podem ser criadas em qualquer editor ou processador de texto </p>

 

8 Colocando uma imagem :

Exemplo:

<img src="brasil.gif" alt=" imagem do Brasil"  height=270 width=240>

A imagem deve estar na mesma pasta que o arquivo Html. Ou aponte para a pasta certa. Img src  referente a imagem que precisar ser indicado sua extenso Gif ou Jpg. Alt  um texto alternativo enquanto a pgina   carregada ou quando se passa com o mouse sobre a figura.

Height e Width so as dimenses da figura em pixels, modifique a seu gosto. Se voc no indicar as dimenses da figura excluindo height e width sua imagem ter o tamanho original.

 

9 Vamos fechar o corpo do texto e terminar com a tag de fechamento.

Exemplo: 

</body>

</html>

10 Salve com extenso .html ou .htm .

Exemplo:

teste.html ou teste.htm

Abrindo e vendo o resultado. Abra seu navegador padro( Internet Explorer ou Netscape). Clique em Arquivo /Abrir ou Abrir pgina/ Procurar . Abra a pasta onde voc salvou sua pgina clique no arquivo html de sua pgina  e de Ok.  Lembrando que para atualizar sua pgina basta apenas abri- la no navegador padro e clicar em Exibir/ Cdigo de Fonte e fazer as modificaes necessrias no cdigo do documento Html no esquecendo de salva- lo. 

                

           Exemplo completo 

<html>

<head>

<title>teste html</title>

<head>

<body>

<h1>Minha primeira Home Page</h1>

<p>Pginas Html podem ser criadas em qualquer editor ou processador de texto </p>

<img src="brasil.gif" alt="Brasil"  height=150 width=120>

</body>

</html>

 
 

Veja o resultado na pasta exemplos 

  Tanto as figura como o texto ou mesmo os hyperlinks podem ser alinhados no canto esquerdo, direito ou centralizados.

Como fazer.

<p align="center">texto alinhado ao centro</p>

<p align="right">texto alinhado a direita</p>

Caso voc no escolha nenhuma dessas duas tags o alinhamento ser automtico.

                 Passo 2

 

Agora que voc fez sua primeira Home Page vamos  tornar- l mais atraente com as seguintes tags:

                          Para Internet Explorer

<h1> e <marquee>. Dessa forma seu ttulo vai ser um letreiro que vai passar de um lado para outro. No esquea de fechar com a tag </marquee> e </h1>

E <font color="red"> junto a tag </font>. Assim seu texto vai ter a cor vermelha. Vamos tambm centralizar a imagem. E Salvaremos como teste2.htm.

Com a tag<center>e fechar com a tag </center>

Exemplo:

<html>

<head>

<title>teste html</title>

<head>

<body>

<h1><marquee>Minha primeira Home Page</marquee></h1>

<center><font color="red"> Pginas Html podem ser criadas em qualquer editor ou processador de texto </font></center>

<center>

<img src="brasil.gif" alt="Brasil"  height=150 width=120>

</center>

</body>

</html>

Voc pode modificar tambm o fundo, colocando uma imagem ou uma cor.

Exemplo<body bgcolor="teal"> para  ou

<body background="fundo2.gif">para imagem.

A figura " fundo2.gif"  um exemplo enviado junto com a apostila . No seu caso ser necessrio colocar o nome da figura e a extenso( gif ou jpg). No  aconselhvel usar imagens .bmp ( Bitmap ) por ser bem maior( em KB)  que as imagens Gif e Jpg. 

 

  Hyperlinks
 

Para inserir um hyperlink que aponte para uma outra Home Page, digite:

<a href="http://www.infoexame.com.br">Infoexame</a>. Este exemplo abre a pgina da Revista Infoexame. Para inserir um hyperlink que aponte para sua prpria pgina como exemplo usamos <a href="tabela.htm">Tabela</a>. 

Para inserir uma figura que quando clicada abre uma outra pgina ou um link para enviar e- mail .

Digite :

<center> caso queira alinha no centro

<a href="mailto:dmarins@ieg.com.br">

<img src="email.gif" border="0" alt="enviar e- mail" heigth=30 width=30></a></center>

Agora voc precisa mencionar se a figura ter ou no um contorno  digitando border="0" para que o Hyperlink no tenha borda colorida

Lembrando que email.gif  a imagem que foi enviado junto com a apostila. Ela precisa estar na mesma pasta que o arquivo Html. E dmarins@ieg.com.br   um endereo eletrnico. Com este exemplo fica fcil voc criar outros hyperlinks usando outra figuras em suas  pginas. Altere height e width que so largura e altura da figura email.gif.

                            

                          Texto dentro de uma caixa

Digite:

<center><textarea name="S1" rows"5" cols="35">

Muitos querem saber quem  o dono da Internet ou quem administra os milhares de computadores e linhas que a fazem funcionar. Vamos voltar um pouco no tempo. Nos anos 60, quando a Guerra Fria pairava no ar, grandes computadores espalhados pelos Estados Unidos armazenavam

informaes militares estratgicas em funo do perigo de um ataque nuclear sovitico. Surgiu assim a idia de interconectar os vrios centros de computao de modo que o sistema continuasse funcionando, mesmo que um desses centros fosse destrudo. O Departamento de Defesa, atravs da ARPA( Advanced Research Projects Agency), mandou pesquisar qual seria a forma mais segura de interconectar esses computadores. Chegou- se a um esquema chamado chaveamento de pacotes. Com base nisso, em 1970 foi criada a semente do que viria a ser a Internet. A Guerra Fria acabou mas a herana daqueles dias rendeu bastante. </textarea></center>

 

Modificando o hyperlink deixando de forma que parea um boto.

Digite:

<form method=get action="http://www.microsoft.com/brasil">

<input type=submit value="Microsoft">

</form>

       

 

 comum usar botes  para entrar e sair de uma pgina. Estes botes nada mais so que figuras Gif ou Jpg. 

Vamos usar um boto para voltar para a primeira pgina teste.

Digite:<a href=teste.htm> Isso aponta para a pgina teste.

Insira a tag da figura agora, neste caso um boto para voltar.

Digite:<img src=voltar.gif alt=voltar height=30 width=60>

Agora feche o hyperlink com</a>

Exemplo completo:

<a href=teste.htm>

<img src=voltar.gif alt=voltar height=30 width=60>

</a>
 

 
Formatar o texto
 

Vamos ver agora alguns complementos que funcionem em ambos  browser.

Negrito e itlico.

Basta digitar 

<p><i>texto aqui</i></p>. 

Negrito digite 

<p><b>texto aqui</b></p>. 

Sublinhar texto digite

<u>texto aqui</u>

Linha divisria:

<hr>

Pular uma linha

<br>

Marcadores :

<li>texto aqui</li>

Isso faz com que o texto que voc tenha digitado tenha uma pequena bolinha em sua frente.

O resultado vai ser este

        texto aqui.

Teste de tamanhos .

<h1>tamanho maior e <h6> tamanho menor.

<h1>Texto aqui</h1>

<h2>Texto aqui</h2>

<h3>Texto aqui</h3>

<h4>Texto aqui</h4>

<h5>Texto aqui</h5>

<h6>Texto aqui</h6>

 

Tag visveis

 

So tag que quando voc quer que visitantes olhem em sua pgina

Por exemplo para explicar sobre Html

Voc digita

<code>

&lt; a href="www.microsoft.com">Microsoft

&lt;a>

</code>

Isso que dizer ao invs de colocar "<" voc coloca "&lt;" com isso no se v imagem e sim a tag, no se v o hyperlink e sim a tag.

 

Tag para Netscape:

Um testo que pisca .

<blink> texto aqui</blink>

 

Texto em duas colunas:

<multicol >

Exemplo:

< multicol cols=2>

texto aqui

</multicol>

 

 

 

 

Tag para cores
Digite:

<font color="red">Texto aqui</font>

Branco
 White
 
Preto
 Black
 
Azul 
 Blue
 
Amarelo
 Yellow
 
Verde
 Green
 
Laranja
 Orange
 
Vermelho
 Red
 
Rosa
 Pink
 
Cinza
 Gray
 
Ouro
 Gold
 
Verde azulado
 Teal
 
Azul marinho
 Navy
 
Prata
 Silver
 

Um exemplo completo:

<font color=red>texto aqui</font>

 

Para usar a font do windows Courier new com cor azul e tamanho pequeno

Digite:

<font color="blue" size="1" face="courier new">Texto aqui</font>

Face faz referncia a Font do windows que poderia ser outra arial, impact, times new roman, etc...

 

Tabela 
 

Vamos criar uma tabela para apostilas com preos e informaes sobre cada apostila.

Como criar uma tabela com a linguagem Html. 

Digite:

<center>Compre uma apostila</center>

<table border="2" cellpadding="2" cellspacing="1" width="80%">

    <tr>

        <td width="33%">Apostila</td>

        <td width="33%">Atributos</td>

        <td width="33%">Valor em reais</td>

    </tr>

<tr>

        <td width="33%">Delphi 3</td>

        <td width="33%">Aprenda a programar em Delphi</td>

        <td width="33%">R$ 20, 00 </td>

    </tr>

<tr>

        <td width="33%">Visual Basic</td>

        <td width="33%">Aprenda a programar em Visual Basic</td>

        <td width="33%">R$ 40, 00 </td>

    </tr>

 

</table>

Resultado da tabela acima.

Compre uma apostila
Apostila
 Atributos
 Valor em reais
 
Delphi 3
 Aprenda a programar em Delphi
 R$ 20, 00
 
Visual Basic
 Aprenda a programar em Visual Basic
 R$ 40,00
 

 

O que voc precisa saber  que, quanto mais voc inserir <td> entre <tr> e </tr> mais partes sua tabela ter. A Tabela comea com <table> e termina com a tag de fechamento</table>. Width faz referncia a largura. Border a borda, se voc no  colocar border sua tabela no vai ter bordas. TR significa ( Table row), que marca uma linha de tabela. TD( Table Data) que so as clulas para os dados. Os valores em %, indica o tamanho ocupado em cada espao na tabela podendo ser um maior e outro menor. 

Caso queira inserir uma imagem ou uma cor de fundo para tabela basta colocar na linha  <table border="2" cellpadding="2" cellspacing="1" width="80%"> a bgcolor="red"  ou background="imagem.gif"

Exemplo: 

<table bgcolor="red" border="2" cellpadding="2" cellspacing="1" width="80%"> tabela com fundo vermelho

 

 

 

 

 

Download:

 

Como fazer com que o visitante possa baixar um arquivo ou mesmo um programa. 

Download  simplesmente baixar para sua mquina algum arquivo. 

Ento para que algum baixe um arquivo de sua pgina faa assim.

Digite :

<a href="nome.extenso">Baixar</a>

Nome significa o nome do arquivo e extenso nada mais  do que o formato do arquivo, geralmente .zip. No seu caso poderia ser 

<a href="programa.zip">Baixar</a>.

As extenses mais usadas para download so .exe e .zip

Quando voc baixou esta apostila. Estava na verdade clicando em 

<a href="html7.zip">Baixar</a>.

 Como exemplo voc pode abrir o arquivo  "donwload.htm" que se encontra em exemplos  e clicar em baixar, voc vai est baixando ou neste caso transferindo logotipos para alguma pasta:

<html>

<head>

<title>Download</title>

<head>

<body>

<h1>Download</h1>

<h3>Apostila Html</h3>

<a href="down/logo.zip">Baixar</a>

</body>

</html>

Como voc pode observar a tag para fazer download  a mesma que a tag usada para hyperlinks s mudando a extenso.

Veja o resultado na pasta exemplos 

 

 

Frame
 

O frame permite que voc veja o ndice e o contedo em uma nica pgina. Ou ver duas pginas de uma s vez, bonito e prtico.

Digite:

<html>

<title>frame</title>

<frameset cols="50%,50%">

<frame src="tabela.htm ">

<frame src="teste2.htm">

</frameset>

</html>

Salve agora de um nome sugestivo as duas pgina no esquecendo a extenso .htm ou .html 

Lembre que tabela.htm e teste2.htm so pginas de demonstrao. Sua pgina de frame ou outra qualquer dever ter nomes diferentes.

 

O mesmo exemplo mas com um visual diferente, ao invs do frame ser em colunas cols vamos deixar com a divisria na horizontal. Modificando o nome cols por rows.

<html>

<title>frame</title>

<frameset rows="50%,50%">

<frame src="tabela.htm">

<frame src="teste2.htm">

</frameset>

</html>

Caso o browser( navegador) do usurio no suportar frame digite:

<noframe>Seu Browser no suporta frame . Clique no boto voltar</noframe>.

Podemos ter tambm mais de dois frame( quadros em um pgina).

Exemplo:

<html>

<title>frame</title>

<frameset rows="50%,25%,25%">

<frame src="teste.htm">

<frame src="teste2.htm">

<frame src="java.htm">

</frameset>

</html>

Ento fica assim 1 frame< frame src="teste.htm"> o 2 frame< frame src="teste2.htm"> e o 3 frame<frame src="java.htm">.

 

Agora se voc quer que um link de um Frame abra em outro Frame voc precisa indicar os nomes dos quadros colocando aps frame src"arquivo.htm  name="frame1"

Exemplo:

<html>

<title>frame2</title>

<frameset cols="20%,80%">

<frame src="link.htm" name="frame1">

<frame src="teste2.htm" name="frame2">

</frameset>

</html>

O hyperlink da pgina link.htm precisa ser escrito assim 

<a href="download" target="frame2">Download</a> isso indica que a pgina Download abre no quadro maior de nome frame2

 

 
Exerccio
 

Faa agora uma Home Page com frame, tabela, imagens, hyperlinks. Utilize as figuras exemplos, tais como voltar.gif, brasil.gif, fundo2.gif, fag.gif. Caso tenha alguma imagem nos formatos Gif e Jpg  utilize para dar seu prprio toque a sua pgina.

 

 

Prximo passo
 

Nada disso adianta muito se voc no publicar sua pgina na internet. Como fazer isso!? Alguns provedores de acesso Internet, a ttulo de promoo do 1Mb de espao para quem faz uma assinatura. 

Converse com seu provedor de acesso sobre a forma de hospedar sua Home Page, o que  preciso para enviar suas pginas. No se esquea de enviar tambm as fotos.

Os exemplos de pginas aqui explicados foram testados nas mais novas verses dos browser Netscape Navigator 4.4 e Internet Explorer 4.1. Existem algumas diferenas, mas nada que atrapalhe o desenvolvimento de sua Home Page. 

Como fazer uma Home Page visualmente bonita e de rpido carregamento?

Visitantes acabam desistindo de carregar uma pgina que est demorando.

Muitas figuras em uma  s pgina  faz com que toda pgina fique lenta. Escolha de forma correta seus frames. Frames que fazem voltar para a pgina principal acaba resultando em um erro. Voc pode fazer duas verses da mesma pgina ou um caminho sem frame, ou mesmo uma verso s com texto sem figuras. Use e abuse de frame, hyperlink, tabela, cores, javascript, vbscript  em sua pgina. Um timo local para hospedar uma pgina ou at mesmo 10 MB de arquivos e o Geocities. Ento visite o www.geocities.com e clique em free mail e Home Page. Escolha um local que no esteja sendo ocupado. Preencha todos os dados e logo voc estar recebendo um e- mail com senha e local para enviar seus arquivos.

Outros locais para hospedar  sua Home Page gratuitamente so

www.option-line.com servidor brasileiro/ hospeda at 6 Mb grtis

www.tripod.com     servidor internacional

www.xoom.com     servidor  internacional

www.win.com.br    servidor brasileiro / hospeda at 5 Mb grtis 

Ateno: Se voc enviar material de teor ertico para estes servidores sua Home Page pode ser tirada do ar sem aviso.

Para pginas com teor adulto escolha um desses

http://www.adultnation.com     servidor internacional

http://www.sexocaseiro.com.br  servidor brasileiro 

Voc pode procurar por outros locais digitando hospedar gratuitamente ou free home page no espao reservado para procura em um sistema de busca.

 
Como enviar suas pginas
 

O exemplo mais comum entre os provedores e enviar tudo de uma vez compactado e por attach. Ento coloque suas pginas em uma pasta coloque tambm as figuras usadas e compacte essa pasta. Para isso voc pode usar o Winzip que  grtis no endereo http://www.winzip.com/ mas se est lendo essa apostila voc j o tem .

Abra seu Navegador padro e faa como estivesse enviando um e- mail, em Para ou To coloque o endereo de do servidor ( Provedor) clique  em Inserir arquivo ou Attach escolha o arquivo que compactou e Clique em Send e pronto. 

 Alguns servios de hospedagem grtis pedem que voc envie suas pginas no formato .txt para assim poderem modificar incluindo um logotipo e Hyperlink que leve para o servidor onde as pginas se hospedam.

No Geocities voc escolhe os arquivos sem a necessidade de compactar as pginas e figuras enviando todos os arquivos clicando em Upload e escolhendo cada um deles o mesmo pode ser feito no endereo http://www.hpg.com.br que  um servidor brasileiro.

 

Tornando sua pgina conhecida
 

Para que sua pgina possa ser visitada por muitas pessoas  necessrio que voc faa uma incluso em alguns sistemas de busca como o Cad?, Achei!, Radar Uol, Zeez, Surf, Yahoo, Altavista, Lycos, etc...

Quando estiver incluindo sua pgina( URL) em algum sistema de busca evite palavras como a melhor , o site mais completo. Coloque as descries verdadeiras e sua pgina ser encontrada por muitos Internautas. 

Se mesmo assim no estiver satisfeito com o nmero de visitantes de sua home Page faa parte do  clube do Banners que permite que voc tenha uma figura como Hyperlink em uma pgina de outro membro

Digite clube do banners no local destinado a procura num dos muitos  sistemas de busca .

.

 

 

 

 
Onde  que estou errando?
 

Texto aqui no significa que voc deva digitar estas palavra, mas colocar um texto neste local.

Se o letreiro no anda, o texto no est dentro de uma caixa, tente usar o Internet Explorer 4 . 

Se o texto no pisca ou no est com duas colunas( igual jornal)  que voc no est usando o Netscape Navigator.

Crie uma pasta com seu nome ou algum nome de sua preferncia para salvar suas pginas . Coloque tambm nesta pasta todas figuras que foram usadas. Faa Backup de tudo, um dia pode precisar.

Verifique se as fotos esto na mesma pasta que o arquivo Html.

Quando uma pgina no abre, pode ser problema com um hyperlink. Verifique se ao criar o Hyperlink voc digitou o nome correto e a extenso.

Fotos no carregam, voc no deve ter digitado o caminho correto.

Utilize o Bloco de Notas como seu editor de pginas Html.

Para criar tabelas mais rapidamente utilize o Word e salve como Html.

As pginas no gravam como Html, tente salvar novamente como nome ".htm" .

Nunca deixe uma pgina na Internet com erros. Como por exemplo um link errado, uma figura que no carrega ou at mesmo um arquivo zipado incompleto. 

 

 

Motivos para se ter uma Home Page na Internet.

 

Se voc aprendeu a criar suas pginas o que precisa saber agora  para que voc precisa de  uma Home Page na Internet. 

10 Motivos

 1  Divulgar seu f - clube

2   Falar sobre seu time de futebol predileto, ou seu esporte predileto

3   Colocar seu currculo na Internet

4  Vender um programa de sua prpria autoria

5  Criar um site de ajuda para iniciantes em determinado tema

6  Fazer amigos e  trocar idias 

7  Criar uma pgina para sua empresa ou onde trabalha

8  Divulgar sua cidade, seu bairro ou local onde visitou

9  Fazer um site de cartes animados

10Coletar informaes de seu interesse

 

Infelizmente  o fim! 

 


