Criando Sua Primeira Página HTML

Criando sua primeira pgina Html
1 Abra o SUBLIME TEXT
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>
<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>
<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>
< a href="www.microsoft.com">Microsoft
<a>
</code>
Isso que dizer ao invs de colocar "<" voc coloca "<" 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>
<frameset rows="50%,50%">
<frame src="tabela.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>
<frameset rows="50%,25%,25%">
<frame src="teste.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

Criando Sua Primeira Página HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Criando Sua Primeira Página HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Criando sua primeira pgina Html

1 Abra o SUBLIME TEXT

2 Digite o seguinte texto:

Toda pgina Html deve iniciar com essa tag.

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

Onde deve ficar o ttulo da pgina.

Feche com </title>.

</head> para fechar o cabealho da pgina

Onde deve ficar o corpo da sua pgina.

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

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

7 Para colocar um texto digite :

8 Colocando uma imagem :

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

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

10 Salve com extenso .html ou .htm .

<h1>Minha primeira Home Page</h1>

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

Veja o resultado na pasta exemplos

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

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

Para Internet Explorer

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

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

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

Exemplo<body bgcolor="teal"> para ou

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

<a href="http://www.infoexame.com.br">Infoexame</a>. Este exemplo abre a pgina da Revista

<center> caso queira alinha no centro

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

Texto dentro de uma caixa

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

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

<input type=submit value="Microsoft">

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>

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

Vamos ver agora alguns complementos que funcionem em ambos browser.

Sublinhar texto digite

Pular uma linha

O resultado vai ser este

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

Por exemplo para explicar sobre Html

Tag para Netscape:

Um testo que pisca .

<blink> texto aqui</blink>

< multicol cols=2>

Tag para cores

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

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

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

Como criar uma tabela com a linguagem Html.

<center>Compre uma apostila</center>

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

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

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

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

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

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

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

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