Html 7

Apostila H T M L vers. 7
Índice
1) Criador e criação
2) Html
3) Criando sua primeira página html
4) Exemplo completo
5) Passo 2
6) Hyperlinks
7) Texto dentro de uma caixa
8) Formatar o texto
9) Tag visível
10) Tag para Netscape Navigator
11) Tag para cores
12) Tabela
13) Download
14) Frame
15) Javascript
16) Exercício
17) Próximo passo
18) Como enviar suas páginas
19) Tornando sua página conhecida
20) Onde é que estou errando?
21) Motivos para se ter uma Home Page na Internet
Criador e criação
Criei minha primeira página Html por volta de setembro 97. Sabendo que
mudando uma tag ali e outra aqui o resultado seria sempre diferente.
Comecei então a recolher todo e qualquer material sobre Html até receber
um e- mail( de um ex.- bbs) que dizia que eu poderia hospedar com eles 1
Mb de arquivos Html e imagens no formato Gif e Jpg
Sabia que queria ter uma página na Internet, mas não sabia ainda nem
como linkar uma página na outra, qual página eu deveria enviar primeiro
e as imagens o que fazer com elas.
Me informei com o BBs, me falaram sobre o Winzip estava tudo certo
para compactar todos arquivos enviar por attach ter minha Home Page e
poder dizer "Seja bem- vindo a minha Home Page".
A seguir você encontra um material completo para tirar sua dúvidas e
ajuda- lo na criação de sua primeira página Html até uma Home Page
completa. Material esse que não fica só na teoria mas com exemplos e
figuras para ilustrar sua futura Home Page.

Html
A linguagem Html ( Hypertext Markup Language - Linguagem de
Marcação de Hipertexto) é usada para criar as páginas divulgadas na
World Wide Web, o serviço mais popular na Internet. É com ela que são
feitos os hyperlinks que permitem navegar pela Web. Para isso, utiliza
marcações, chamadas tags, no ponto da página em que é feito um
hyperlink com outra página.
Para criar uma página 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 página
tivesse. Você pode criar suas páginas em um disquete fazendo o mesmo
com as figuras.
"Para melhor proveito imprima toda apostila agora"
Atenção: O que pode e não pode ser modificado quando se está criando
uma página html
Texto em vermelho Código Html( não pode ser modificado)
Texto em verde Texto que pode ser modificado a vontade
Texto em violeta Código Html que as vezes pode ser modificado
Criando sua primeira página Html
1º Abra o Bloco de Notas. Clique em Editar e marque o item Mudança
Automática de linha.
2º Digite o seguinte texto:
<html>
Toda página Html deve iniciar com essa tag.
3º Digite :
<head>
O cabeçalho deve ser delimitado pelas tags <head> e </head>
4º Digite:
<title>
Onde deve ficar o título da página.
Feche com </title>.
Exemplo:
<title>teste html</title>

5º Digite:
</head> para fechar o cabeçalho da página
6º Digite:
<body>
Onde deve ficar o corpo da sua página.
Depois deve inserir o título 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>Páginas 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
extensão Gif ou Jpg. Alt é um texto alternativo enquanto a página é
carregada ou quando se passa com o mouse sobre a figura.
Height e Width são as dimensões da figura em pixels, modifique a seu
gosto. Se você não indicar as dimensões 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 extensão .html ou .htm .
Exemplo:
teste.html ou teste.htm
Abrindo e vendo o resultado. Abra seu navegador padrão( Internet
Explorer ou Netscape). Clique em Arquivo /Abrir ou Abrir página/
Procurar . Abra a pasta onde você salvou sua página clique no arquivo
html de sua página e de Ok. Lembrando que para atualizar sua página
basta apenas abri- la no navegador padrão e clicar em Exibir/ Código de

Fonte e fazer as modificações necessárias no código do documento Html
não esquecendo de salva- lo.
Exemplo completo
<html>
<head>
<head>
<body>
<h1>Minha primeira Home Page</h1>
<p>Páginas 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ê não escolha nenhuma dessas duas tags o alinhamento será
automático.
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 título vai ser um letreiro que vai
passar de um lado para outro. Não esqueça 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 também centralizar a imagem. E Salvaremos como
teste2.htm.
Com a tag<center>e fechar com a tag </center>
Exemplo:
<html>
<head>
<head>
<body>

<h1><marquee>Minha primeira Home Page</marquee></h1>
<center><font color="red"> Páginas 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 também 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á necessário colocar o nome da figura e a extensão( gif ou jpg).
Não é aconselhável 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 página da Revista Infoexame. Para inserir um hyperlink que aponte
para sua própria página como exemplo usamos <a
href="tabela.htm">Tabela</a>.
Para inserir uma figura que quando clicada abre uma outra página ou um
link para enviar e- mail .
Digite :
<center> caso queira alinha no centro
<a href="mailto:apostilas@zipmail.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 não um contorno
digitando border="0" para que o Hyperlink não 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
apostilas@zipmail.com.br é um endereço eletrônico. Com este exemplo fica fácil
você criar outros hyperlinks usando outra figuras em suas páginas. Altere
height e width que são 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
informações militares estratégicas em função do perigo de um ataque
nuclear soviético. Surgiu assim a idéia de interconectar os vários centros
de computação de modo que o sistema continuasse funcionando, mesmo
que um desses centros fosse destruído. O Departamento de Defesa, através
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 herança daqueles dias rendeu bastante.
</textarea></center>
Modificando o hyperlink deixando de forma que pareça um botão.
Digite:
<form method=get action="http://www.microsoft.com/brasil">
<input type=submit value="Microsoft">
</form>
É comum usar botões para entrar e sair de uma página. Estes botões nada
mais são que figuras Gif ou Jpg.
Vamos usar um botão para voltar para a primeira página teste.
Digite:<a href=”teste.htm”> Isso aponta para a página teste.
Insira a tag da figura agora, neste caso um botão 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 itálico.
Basta digitar
<p><i>texto aqui</i></p>.
Negrito digite
<p><b>texto aqui</b></p>.
Sublinhar texto digite
<u>texto aqui</u>
Linha divisória:

<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 visíveis
São tag que quando você quer que visitantes olhem em sua página
Por exemplo para explicar sobre Html
Você digita
<code>
< a href="www.microsoft.com">Microsoft
<a>
</code>
Isso que dizer ao invés de colocar "<" você coloca "<" com isso não se
vê imagem e sim a tag, não 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 referência a Font do windows que poderia ser outra arial,
impact, times new roman, etc...
Tabela
Vamos criar uma tabela para apostilas com preços e informações 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 começa com <table> e
termina com a tag de fechamento</table>. Width faz referência a largura.
Border a borda, se você não colocar border sua tabela não vai ter bordas.
TR significa ( Table row), que marca uma linha de tabela. TD( Table
Data) que são as células para os dados. Os valores em %, indica o
tamanho ocupado em cada espaço 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 máquina algum arquivo.
Então para que alguém baixe um arquivo de sua página faça assim.

Digite :
<a href="nome.extensão">Baixar</a>
Nome significa o nome do arquivo e extensão nada mais é do que o
formato do arquivo, geralmente .zip. No seu caso poderia ser
<a href="programa.zip">Baixar</a>.
As extensões mais usadas para download são .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 extensão.
Frame
O frame permite que você veja o índice e o conteúdo em uma única página.
Ou ver duas páginas de uma só vez, bonito e prático.
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 página não esquecendo a
extensão .htm ou .html
Lembre que tabela.htm e teste2.htm são páginas de demonstração. Sua
página de frame ou outra qualquer deverá ter nomes diferentes.

O mesmo exemplo mas com um visual diferente, ao invés do frame ser em
colunas cols vamos deixar com a divisória na horizontal. Modificando o
nome cols por rows.
<html>
<frameset rows="50%,50%">
<frame src="tabela.htm">
</frameset>
</html>
Caso o browser( navegador) do usuário não suportar frame digite:
<noframe>Seu Browser não suporta frame . Clique no botão
voltar</noframe>.
Podemos ter também mais de dois frame( quadros em um página).
Exemplo:
<html>
<frameset rows="50%,25%,25%">
<frame src="teste.htm">
<frame src="java.htm">
</frameset>
</html>
Então 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 após 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 página link.htm precisa ser escrito assim
<a href="download" target="frame2">Download</a> isso indica que a
página Download abre no quadro maior de nome frame2
Javascript

Usando JavaScript: O JavaScript é uma implementação da linguagem
Java, só que interpretada. O programa browser( navegador) lê o código
fonte em JavaScript, interpreta as instruções e as executa.
A linguagem javascript começa com <script> e termina com </script>
O que vamos fazer é ter um botão uma resposta para este botão. Ou seja
quando alguém clicar neste botão será chamado um evento. O evento no
caso é o onCLick. Para que funcione precisamos é claro de uma pergunta
e ter atenção ao script que está na seção <head>, mas é executado na
seção <body>.
Digite:
<html>
<head>
<h3>Qual é o navegador mais usado no Brasil, Internet Explorer ou
Netscape Navegator</h3>
<script>

</script>
</head>
<body>
<form>
<input type="button" value="Resultado" onClick="clicou(this.form)">
<input type="text" name="caixa">
</form>
</body>
</html>
Veja mais sobre Javascript e Vbscript em script 1, script2, script 3 e efeitos
que estão na pasta script.
Exercício
Faça 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 próprio toque a sua página.

Próximo passo
Nada disso adianta muito se você não publicar sua página na internet.
Como fazer isso!? Alguns provedores de acesso Internet, a título de
promoção dão 1Mb de espaço 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 páginas. Não se esqueça de
enviar também as fotos.
Os exemplos de páginas aqui explicados foram testados nas mais novas
versões dos browser Netscape Navigator 4.4 e Internet Explorer 4.1.
Existem algumas diferenças, mas nada que atrapalhe o desenvolvimento de
sua Home Page.
Como fazer uma Home Page visualmente bonita e de rápido
carregamento?
Visitantes acabam desistindo de carregar uma página que está
demorando.
Muitas figuras em uma só página faz com que toda página fique lenta.
Escolha de forma correta seus frames. Frames que fazem voltar para a
página principal acaba resultando em um erro. Você pode fazer duas
versões da mesma página ou um caminho sem frame, ou mesmo uma
versão só com texto sem figuras. Use e abuse de frame, hyperlink, tabela,
cores, javascript, vbscript em sua página. Um ótimo local para hospedar
uma página ou até mesmo 10 MB de arquivos e o Geocities. Então visite o
www.geocities.com e clique em free mail e Home Page. Escolha um local
que não 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 são
www.option-line.com servidor brasileiro/ hospeda até 6 Mb grátis
www.tripod.com servidor internacional
www.xoom.com servidor internacional
www.win.com.br servidor brasileiro / hospeda até 5 Mb grátis
Atenção: Se você enviar material de teor erótico para estes servidores sua
Home Page pode ser tirada do ar sem aviso.
Para páginas 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 espaço reservado para procura em um sistema de
busca.
Como enviar suas páginas

O exemplo mais comum entre os provedores e enviar tudo de uma vez
compactado e por attach. Então coloque suas páginas em uma pasta
coloque também as figuras usadas e compacte essa pasta. Para isso você
pode usar o Winzip que é grátis no endereço http://www.winzip.com/ mas
se está lendo essa apostila você já o tem .
Abra seu Navegador padrão e faça como estivesse enviando um e- mail,
em “Para ou To” coloque o endereço de do servidor ( Provedor) clique
em “Inserir arquivo ou Attach” escolha o arquivo que compactou e Clique
em Send e pronto.
Alguns serviços de hospedagem grátis pedem que você envie suas páginas
no formato .txt para assim poderem modificar incluindo um logotipo e
Hyperlink que leve para o servidor onde as páginas se hospedam.
No Geocities você escolhe os arquivos sem a necessidade de compactar as
páginas e figuras enviando todos os arquivos clicando em Upload e
escolhendo cada um deles o mesmo pode ser feito no endereço
http://www.option-line.com que é um servidor brasileiro.
Tornando sua página conhecida
Para que sua página possa ser visitada por muitas pessoas é necessário
que você faça uma inclusão em alguns sistemas de busca como o Cadê?,
Achei!, Radar Uol, Zeez, Surf, Yahoo, Altavista, Lycos, etc...
Quando estiver incluindo sua página( URL) em algum sistema de busca
evite palavras como a melhor , o site mais completo. Coloque as
descrições verdadeiras e sua página será encontrada por muitos
Internautas.
Se mesmo assim não estiver satisfeito com o número de visitantes de sua
home Page faça parte do clube do Banners que permite que você tenha
uma figura como Hyperlink em uma página de outro membro
Digite clube do banners no local destinado a procura num dos muitos
sistemas de busca .
Se você quiser incluir o banner da apostilaszipmail faça assim
Copie o código e a figura e cole o código em sua página Html
<a href="http://www.option-line.com/members/apostilas/apostilas.htm">
<img src="bannerap.gif" border="0"> </a>
A figura também se encontra na pasta imagens.

Onde é que estou errando?
Texto aqui não significa que você deva digitar estas palavra, mas colocar
um texto neste local.
Se o letreiro não anda, o texto não está dentro de uma caixa, tente usar o
Internet Explorer 4 .
Se o texto não pisca ou não está com duas colunas( igual jornal) é que
você não está usando o Netscape Navigator.
Crie uma pasta com seu nome ou algum nome de sua preferência para
salvar suas páginas . Coloque também nesta pasta todas figuras que foram
usadas. Faça Backup de tudo, um dia pode precisar.
Verifique se as fotos estão na mesma pasta que o arquivo Html.
Quando uma página não abre, pode ser problema com um hyperlink.
Verifique se ao criar o Hyperlink você digitou o nome correto e a extensão.
Fotos não carregam, você não deve ter digitado o caminho correto.
Utilize o Bloco de Notas como seu editor de páginas Html.
Para criar tabelas mais rapidamente utilize o Word e salve como Html.
As páginas não gravam como Html, tente salvar novamente como nome
".htm" .
Nunca deixe uma página na Internet com erros. Como por exemplo um link
errado, uma figura que não carrega ou até mesmo um arquivo zipado
incompleto.
Motivos para se ter uma Home Page na Internet.
Se você aprendeu a criar suas páginas 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 currículo na Internet
4º Vender um programa de sua própria autoria
5º Criar um site de ajuda para iniciantes em determinado tema
6º Fazer amigos e trocar idéias
7º Criar uma página para sua empresa ou onde trabalha
8º Divulgar sua cidade, seu bairro ou local onde visitou
9º Fazer um site de cartões animados
10ºColetar informações de seu interesse

Infelizmente é o fim!
Torne possível a criação de novas apostilas
Faça uma pequena contribuição enviando qualquer valor para
Leonardo R Motta
Rua Caxinava n.º 56
Jardim Umarizal
São Paulo SP
CEP: 05756-280
Informe também quais apostilas gostaria de poder baixar gratuitamente
Desde já muito obrigado, espero que esta apostila seja de grande utilidade.
Leonardo R Motta e- mail :mailto:apostilas@zipmail.com.br
Home Page http://www.option-line.com/members/apostilas/
Revisão Domingo 05 de abril de 1999

Html 7

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Html 7

Similar to Html 7 (20)

More from Fabiano Sales

More from Fabiano Sales (13)

Html 7