HTML

HTML
Hyper Text Markup

Language
Leandro Guimarães Fernandes
2004
HTML
Hyper Text Markup
Language
Esta apostila tem como objetivo levar conhecimentos sobre a linguagem HTML, usada para criação
de páginas Web.
Sobre o autor:
Leandro Guimarães Fernandes

Rua Benedito Orceno Silva, 7 – Vila Santa Bárbara
Rio Verde – GO – Brasil
CEP: 75.901-970
Fone: (0xx64) 613-0958
e-mail: [email protected]
Website: http://www.advancedesigner.com.br
HTML – Hyper Text Markup Language 1
1. INTRODUÇÃO
O HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto) compõe a estrutura
de uma página Web através de etiquetas (tags) e atributos.
Todas as páginas Web são escritas em HTML. Ele lhe permite formatar o texto, adicionar gráficos,
sons e vídeo, e salvar o arquivo como tipo Somente Texto ou ASCII que qualquer computador consegue ler.
Embora existam muitos programas que criam o HTML, aprendendo a linguagem, você não fica
limitado a recursos de um programa em particular.
1.1. COMO IMPLEMENTAR O HTML

Para criar páginas Web, você necessita de um simples editor de textos, como Bloco de Notas do
Windows, ou também pode utilizar softwares específicos para o trabalho, como Dreamweaver (Macromedia)
ou FrontPage (Microsoft).
2. TAGS
O HTML como o próprio nome já diz é uma linguagem de marcação, ela utiliza etiquetas (tags), que
são comandos escritos entre os sinais menor que (<) e maior que (>).
O texto que fica entre os dois tags de início e término do comando recebe a característica, podendo
ser um comando de tratamento de fonte ou qualquer outro.
O tag quer encerra o comando tem seu nome precedido de barra (/).
<TAG> Texto </TAG>

Inicia o
Encerra o
comando
comando
Recebe o
comando
2.1. ATRIBUTOS
Muitas tags têm atributos especiais que permitem uma variedade de opções para o conteúdo do
texto. O atributo é inserido entre a palavra de comando e o símbolo final de maior que (>). Você pode utilizar
uma série de atributos em um único tag, simplesmente escrevendo-os um após o outro separados por um
espaço, sendo que a ordem não é importante.
<TAG ATRIBUTO1=“” ATRIBUTO2=“”> Texto </TAG>

2.2. TAGS ANINHADOS
Você pode utilizar vários tags pra conseguir o efeito desejado em algum bloco de texto, por exemplo,
se você deseja que o texto fique em negrito e itálico.
3. SÍMBOLOS ESPECIAIS
Alguns grupos de símbolos não podem ser encontrados no padrão ASCII, por isso para inserção dos
mesmos devemos usar comandos especiais, que farão com que esses símbolos apareçam normalmente no
navegador.
Professor: Leandro Guimarães Fernandes

Notação Descrição Aparência

> “Maior que” >
< “Menor que” <
& E comercial &
" aspas duplas “
® marca registrada ®
&copy Copyrights ©
Caractere Notação
Acento agudo &xacute; onde x é uma letra qualquer, maiúscula ou minúscula
Acento grave &xgrave; onde x é uma letra qualquer, maiúscula ou minúscula
Acento circunflexo &xcirc; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com til &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula
Letra com trema &xuml; onde x é uma letra qualquer, maiúscula ou minúscula
Letras unidas &Aelig; = Æ e æ = æ
Letra com argola Å = Å e &aring = å
Cedilha Ç = Ç e &ccedil= ç
N com til Ñ = Ñ e ñ = ñ
O cortado Ø = Ø e ø = ø
THORN maiúsculo &THORN = Þ(Icelandic)
thorn minúsculo &thorn= þ (Icelandic)
eth minúsculo &eth ð (Icelandic)
eth maiúsculo Ð= Ð (Icelandic)
Caractere alemão &szlig = ß
4. NOMES DE ARQUIVOS
A página Web é também um arquivo como outro qualquer que se possa imaginar, tem um nome e
um local onde será armazenado. Recomenda-se nomear estes arquivos somente com letras minúsculas, sem
espaços, acentos ou qualquer caractere especial, pelo fato de que poderão ocorrer erros, como o servidor ter
dificuldades de achar ou não encontrar o arquivo para poder exibi-lo para o internauta.
OBS: as regras valem para figuras ou qualquer arquivo ou pasta que almeja utilizar no site.
Os arquivos sempre deverão ser salvos com extensão “.html” ou “. htm”, para que o navegador possa
identificar o arquivo e interpreta-lo da maneira correta. Mas ao salvar o arquivo de seu site utilize um padrão,
ou “.html” ou “.htm”, para facilitar a ligação entre os arquivos.
5. URL (UNIFORM RESOURSE LOCATOR)

São os endereços de onde estão localizados os arquivos.
Um URL básico contém o nome do esquema (Protocolo), o servidor, o caminho e o nome do arquivo
que está sendo acessado pelo usuário.
http://www.site.com.br/pasta/arquivo.htm
Protocolo Diretório
Servidor Arquivo

5.1. URLS ABSOLUTOS

Nesse tipo de URL é mostrado o caminho completo de onde está o arquivo.
Ex:
www.site.com.br/index.htm
www.site.net/admin/funcionarios.htm
www.site.com.br/info/imagens/img.jpg
5.2. URLS RELATIVOS

O URL relativo indica o arquivo desejado de acordo com o arquivo que contém a URL.
Ex:
imagens/img.jpg
../admin/funcionários.htm
/serviços/sistemas.htm
6. ESTRUTURA BÁSICA
É o primeiro item que se deve digitar, ela identifica o conteúdo do documento
Exemplo 01:
<HTML>
<HEAD><TITLE>Título da página</TITLE>
</HEAD>
<BODY>
Conteúdo da página.
</BODY>
</HTML>
<HTML>: Indica o início do código

<HEAD>: Cabeçalho da página
<TITLE>: Título que aparece na barra de título do navegador
<BODY>: Corpo da página (onde dever ser colocado o conteúdo que aparecerá para o internauta.
7. CABEÇALHOS
São tags que permitem organizar a página em níveis, esses níveis variam de <H1> até <H6>.
Exemplo 02:
<HTML>
<HEAD><TITLE>Cabeçalhos</TITLE>
</HEAD>
<BODY>
<H1> Cabeçalho 1</H1>

</BODY>
</HTML>
8. PARÁGRAFOS
Os parágrafos criados no editor de texto não são reconhecidos pelo navegador. Para criá-los você
deverá utilizar a tag <p>. Para mudar o alinhamento do texto pode-ser utilizar o atributo align.

Exemplo 03:
<HTML>
<HEAD><TITLE>Introdução ao JAVA</TITLE>
</HEAD>
<BODY>
<H1>Introdução ao JAVA</H1>
<P align= “left” >A Programação Orientada a Objetos (POO) pode ser considerada como sendo
uma das principais evoluções ocorreram nas últimas décadas, no que diz respeito ao
desenvolvimento de softwares. As primeiras linguagens orientadas a objetos surgiram no final
da década de 70, proporcionando uma nova metodologia de programação que se diferenciasse de
uma linguagem procedural na forma com que os dados de um programa são armazenados e, mais
importante ainda, na maneira pela qual esses dados são tratados e se relacionam entre
si.</P><P align= “justify” >Apesar da grande potencialidade da POO, sua utilização nem
sempre é feita da forma correta, sobretudo devido à não compreensão de seus principais
conceitos. O principal objetivo deste texto é apresentar esses conceitos, destacando o que
vem a ser classe, objeto e apresentando os três principais paradigmas da POO:
encapsulamento, herança e polimorfismo.
</P>
</BODY>
</HTML>
9. SALVAR ARQUIVOS
Ao salvar os arquivos para torná-los páginas Web devemos acrescentar a extensão “.html” ou “.htm”
logo após o nome do arquivo. Este procedimento é de extrema importância para o funcionamento da página.
Ex:
Index.htm
Contato.html
10. VISUALIZAR ARQUIVOS

Como comentado anteriormente as páginas Web são arquivos comuns que são armazenados no HD.
Para podermos visualizá-los basta digitar a URL correspondente no navegador, seja ele Internet Explore,
Netscape, Mozila, Opera ou qualquer outro, ou ainda abri-lo através do seu gerenciador de arquivos, por
exemplo, o Windows Explorer do Windows.
11. PROJETO DO SITE

1 - Qual o objetivo do seu site?
2 - Qual o público você deseja atingir?
3 - Discuta em grupo sobre o que será colocado no site.
4 - Faça um esboço do site no papel.
5 - Pesquise, pesquise e pesquise!
12. FORMATANDO O TEXTO

Formatar o texto em HTML não é tão simples como em um editor próprio para isso, mas a idéia é a
mesma, você escolhe a fonte, se o texto vai estar em negrito ou qualquer outro efeito que desejar, só que
agora tudo isso é feito utilizando as tags.
12.1. MUDANDO A FONTE

Tag <FONT>
9 Atributos:
Face responsável pela troca da fonte.
Size determina o tamanho da fonte, que varia de 1 a 7
Color determina a cor da fonte, que pode ser colocada em RGB hexadecimal ou com o nome da
cor em inglês.

Exemplo 04:
<HTML>
</HEAD>
<BODY>
<H1>Introdução ao JAVA</H1>
<P align= “justify” ><FONT face= “Tahoma” size=2 color= “red” >A Programação Orientada a
Objetos (POO) pode ser considerada como sendo uma das principais evoluções ocorreram nas
últimas décadas, no que diz respeito ao desenvolvimento de</FONT> softwares. As primeiras
linguagens orientadas a objetos surgiram<FONT face= “Courier New” size=5 color= “#CCCCCC” >
no final da década de 70, proporcionando uma nova metodologia de programação que se
diferenciasse de uma linguagem procedural na forma com que os dados de um programa são
armazenados e, mais importante ainda, na maneira pela qual esses dados são tratados e se
relacionam entre si.</FONT></P><P align=”justify”> <FONT face=”Verdana, Arial, Tahoma, sans-
serif” color=”#BB0000”>Apesar da grande potencialidade da POO, sua utilização nem sempre é
feita da forma correta, sobretudo devido à não compreensão de seus principais conceitos. O
principal objetivo deste texto é apresentar esses conceitos, destacando o que vem a ser
classe, objeto e apresentando os três principais paradigmas da POO: encapsulamento, herança
e polimorfismo.</FONT>
</P>
</BODY>
</HTML>
12.2. OUTROS TAGS DE FORMATAÇÃO

Na tabela abaixo estão listados alguns tags utilizados para formação do texto.
Tags para formatação do texto
Tag Função
<B></B> Coloca o texto em negrito
<I></I> Coloca o texto em itálico
<BIG></BIG> Colocar o texto maior que o circunvizinho
<SMALL</SMALL> Colocar o texto menor que o circunvizinho
<SUB></SUB> Coloca o texto subscrito ao seu circunvizinho
<SUP></SUP> Coloca o texto sobrescrito ao seu circunvizinho
<U></U> Aplica sublinhado ao texto
<STRIKE></STRIKE> Aplica o taxado ao texto
<CODE></CODE> Fonte monoespaçada
<BLINK></BLINK> Fazer o texto piscar (não funciona no Internet Explorer
12.3. COMENTÁRIOS
Para comentar o texto devemos acrescentar “” para encerrá-lo.
Exemplo 05:
<HTML>
</HEAD>
<BODY>
<H1><FONT face=”Arial”>Introdução ao JAVA</FONT></H1>
<P align=”justify”> <FONT face=”Courier New” color=”#00FF00” size=3>A Programação Orientada
a Objetos (POO) pode ser considerada como sendo uma das principais evoluções ocorreram nas
últimas décadas, no que diz respeito ao desenvolvimento de softwares. As primeiras
linguagens orientadas a objetos surgiram no final da década de 70, proporcionando uma nova
metodologia de programação que se diferenciasse de uma linguagem procedural na forma com que
os dados de um programa são armazenados e, mais importante ainda, na maneira pela qual esses
dados são tratados e se relacionam entre si.</P></FONT></P>
</BODY></HTML>

13. IMAGENS
A internet após a criação do www (World Wide Web), se tornou muito mais atrativa, pois ela nos
possibilitou trabalhar com multimídia, ou seja, utilizar imagens, sons, animação nas páginas.
Neste item iremos trabalhar com imagens, que apesar de embelezar os sites podem ser um ponto
negativo para a boa navegabilidade dos mesmos, tornando-os mais pesados para execução no computador do
internauta, principalmente o internauta que utiliza a Internet discada.
Os principais formatos de imagens utilizados na web são o JPG, o GIF e vem ganhando espaço o
PNG. Esses formatos são muito utilizados pelo fato de serem mais compatíveis com a maioria dos navegadores
e sistemas operacionais e também por serem mais compactos.
13.1. USANDO IMAGENS

Tag <IMG>
9 Atributos:
Src URL de onde está à imagem
Alt texto alternativo
Width largura da imagem (em pixels ou %)
Height altura da imagem (em pixels ou %)
Align disposição da imagem de acordo com o texto ao redor. Pode se alinhar à imagem à esquerda
(left) ou à direita (right)
Vspace espaço vertical
Hspace espaço horizontal
Border determinar a borda da figura
Exemplo 06:
<HTML>
<HEAD><TITLE>:::: O LINUX ::::</TITLE>
</HEAD>
<BODY>
<H2><FONT face="Tahoma, Verdana, Arial" color="gray">Uma breve história sobre o
Linux</FONT></H2>
<P align="justify">
<IMG src="img/computador.jpg" align="left" vspace=5 hspace=5 border=1 alt="Rafael, Linuxista
Rocho!"><FONT face="Courier new" size="2" color="black">O UNIX e um dos sistemas
operacionais mais populares do mundo por causa de sua grande base de suporte e distribuição.
Foi originalmente construído como um sistema de multitarefas para microcomputadores e
mainframes (computadores de grande porte) no meio dos anos 70. Cresceu desde então e tornou-
se um dos sistemas operacionais mais usados em qualquer lugar, apesar de sua interface
confusa e de falta de uma padronização central, às vezes.</FONT></P>
<P align="justify"><FONT face="Courier new" size="2" color="black">O LINUX é uma versão
gratuita distribuída do primeiro UNIX desenvolvido por Linus Torvalds na Universidade de
Helsinque na Finlândia. O LINUX foi desenvolvido com a ajuda de muitos programadores UNIX, e
especialistas em Internet, permitindo a qualquer um com bastante experiência e bom senso a
capacidade de desenvolver a alterar o sistema.</FONT></P><P align="justify"><FONT
face="Courier new" size="2" color="black">O LINUX foi originalmente desenvolvido como um
passatempo por Linus. Foi inspirado no Minix, um pequeno sistema UNIX desenvolvido por Andy
Tanenbaum, e as primeiras discussões sobre ele foi no newsgroup Usenet
comp.os.minix.</FONT></P><H2><FONT face="Tahoma, Verdana, Arial" color="gray">Linus escreveu
no comp.os.minix,</FONT></H2><P align="justify"><FONT face="Courier new" size="2"
color="black">Você está ansioso pelos ótimos dias do Minix 1.1, quando os homens eram homens
e escreviam seus próprios drivers do dispositivo? Você está sem um bom projeto e está apenas
ansioso por começar a trabalhar em um OS que posso tentar modificar segundo suas
necessidades? Você fica frustrado quando tudo funciona no Minox? Sem mais noites em claro
para colocar funcionando um programa inteligente? Então esse anúncio pode ser pra
você.</FONT></P><IMG src="pinguim.gif" align="right" vspace=5 hspace=5 border=0 alt="Símbolo
do Linux!">
<P align="justify"><FONT face="Courier new" size="2" color="black">Como mencionei há um mês
atrás estou trabalhando em uma versão gratuita de um Minix para computadores AT 386.
Finalmente chegou ao ponto em que já é útil (embora não possa não depender do que você
deseja) e desejo colocar todas as fontes em uma distribuição maior. É apenas a versão

0.02... mas eu executei com sucesso o bash, gcc, GNU make, GNU sed, compress, etc.
nela.</FONT></P>
<P align="justify"><FONT face="Courier new" size="2" color="black">Depois da versão 0.03,
Linus levou o número da versão até 0.10, quando mais pessoas começaram a trabalhar no
sistema. Após várias revisões, Linus aumentou o número da versão para 0.95 refletindo sua
expectativa de que o sistema estava pronto para uma versão; "oficial" muito em breve.
(Geralmente, o software não é atribuído ao número da versão 1.0 até que esteja teoricamente
completo ou sem erros).</FONT></P><P align="justify"><FONT face="Courier new" size="2"
color="black">Atualmente o LINUX é um clone do UNIX completo, capaz de executar o X Windows
System, o TCP/IP, o Emacs, o UUCP, o software do correio e de informações, o que quizer.
Quase todos os grandes pacotes gratuitos de software foram transportados para o LINUX e o
software comercial está se tornando disponível.</FONT></P>
</BODY>
</HTML>
14. LAYOUT DE PÁGINA
14.1. TAG BODY

Através da tag BODY podemos alterar o layout da nossa página, por exemplo, mudando o fundo da
página acrescentando uma figura ou alguma cor e alterar as margens da página.
9 Atributos:
Bgcolor altera a cor de fundo da página, que pode ser colocada em RGB hexadecimal ou com o
nome da cor em inglês.
Background insere uma imagem no fundo da página
Leftmargin determina a margem esquerda da página
Topmargin determina a margem superior da página
Marginwidth determina a largura da margem (usado em frames)
Marginheight determina a altura da margem (usado em frames)
Text determinar uma cor padrão para o texto da página
Link determinar a cor do link
Vlink determinar a cor do link visitado
Alink determinar a cor do link selecionado
Exemplo 07:
<HTML>
</HEAD>
<BODY bgcolor="#333333" topmargin="0" leftmargin="0" text="#FFFFFF">
<H1><FONT face="Arial">Introdução ao JAVA</FONT></H1>
<P align="justify"> <FONT face="Courier New" size=3>A Programação Orientada a Objetos (POO)
pode ser considerada como sendo uma das principais evoluções ocorreram nas últimas décadas,
no que diz respeito ao desenvolvimento de softwares. As primeiras linguagens orientadas a
objetos surgiram no final da década de 70, proporcionando uma nova metodologia de
programação que se diferenciasse de uma linguagem procedural na forma com que os dados de um
programa são armazenados e, mais importante ainda, na maneira pela qual esses dados são
tratados e se relacionam entre si.</P><P align="justify">Apesar da grande potencialidade da
POO, sua utilização nem sempre é feita da forma correta, sobretudo devido à não compreensão
de seus principais conceitos. O principal objetivo deste texto é apresentar esses conceitos,
destacando o que vem a ser classe, objeto e apresentando os três principais paradigmas da
POO: encapsulamento, herança e polimorfismo.</FONT></P>
</BODY>
</HTML>
Exemplo 08:
<HTML>
<HEAD><TITLE>:::: O LINUX ::::</TITLE>
</HEAD>
<BODY background=”img/fundo1.gif” leftmargin=50 topmargin=20>
<H2><FONT face="Tahoma, Verdana, Arial" color="gray">Uma breve história sobre o
Linux</FONT></H2>

<P align="justify">
confusa e de falta de uma padronização central, às vezes.</FONT></P>
<P align="justify"><FONT face="Courier new" size="2" color="black">O LINUX é uma versão
gratuita distribuída do primeiro UNIX desenvolvido por Linus Torvalds na Universidade de
Helsinque na Finlândia. O LINUX foi desenvolvido com a ajuda de muitos programadores UNIX, e
especialistas em Internet, permitindo a qualquer um com bastante experiência e bom senso a
capacidade de desenvolver a alterar o sistema.</FONT></P><P align="justify"><FONT
face="Courier new" size="2" color="black">O LINUX foi originalmente desenvolvido como um
passatempo por Linus. Foi inspirado no Minix, um pequeno sistema UNIX desenvolvido por Andy
Tanenbaum, e as primeiras discussões sobre ele foi no newsgroup Usenet
e escreviam seus próprios drivers do dispositivo? Você está sem um bom projeto e está apenas
ansioso por começar a trabalhar em um OS que posso tentar modificar segundo suas
necessidades? Você fica frustrado quando tudo funciona no Minox? Sem mais noites em claro
para colocar funcionando um programa inteligente? Então esse anúncio pode ser pra
você.</FONT></P><IMG src="pinguim.gif" align="right" vspace=5 hspace=5 border=0 alt="Símbolo
do Linux!">
<P align="justify"><FONT face="Courier new" size="2" color="black">Como mencionei há um mês
atrás estou trabalhando em uma versão gratuita de um Minix para computadores AT 386.
Finalmente chegou ao ponto em que já é útil (embora não possa não depender do que você
deseja) e desejo colocar todas as fontes em uma distribuição maior. É apenas a versão
0.02... mas eu executei com sucesso o bash, gcc, GNU make, GNU sed, compress, etc.
nela.</FONT></P>
<P align="justify"><FONT face="Courier new" size="2" color="black">Depois da versão 0.03,
Linus levou o número da versão até 0.10, quando mais pessoas começaram a trabalhar no
sistema. Após várias revisões, Linus aumentou o número da versão para 0.95 refletindo sua
expectativa de que o sistema estava pronto para uma versão; "oficial" muito em breve.
(Geralmente, o software não é atribuído ao número da versão 1.0 até que esteja teoricamente
completo ou sem erros).</FONT></P><P align="justify"><FONT face="Courier new" size="2"
color="black">Atualmente o LINUX é um clone do UNIX completo, capaz de executar o X Windows
System, o TCP/IP, o Emacs, o UUCP, o software do correio e de informações, o que quizer.
Quase todos os grandes pacotes gratuitos de software foram transportados para o LINUX e o
software comercial está se tornando disponível.</FONT></P>
</BODY>
</HTML>
14.2. CENTRALIZANDO ELEMENTOS

Tag <CENTER>
Exemplo 09:
<HTML>
<HEAD><TITLE>O Dabber explora o Sasser</TITLE>
</HEAD>
<BODY>
<H3><CENTER>O Dabber explora o Sasser</CENTER></H3>
<CENTER><IMG src="img/v1.gif" align="left" vspace=5 hspace=5 width=50 height=50>Muito
oportunista, o verme Dabber tenta pegar carona na base instalada do Sasser, outro verme que
<IMG src="img/v2.gif" align="right" vspace=5 hspace=5 width=120 height=50>infectou mais de 1
milhão de máquinas pelo mundo no último mês.O Dabber usa uma falha no mecanismo de
transferência de arquivos do Sasser para se instalar, testando as portas TCP de 9899 a 9999
até encontrar uma aberta. Ao entrar na máquina, apaga no registro o rastro de outras pragas,
toma o seu lugar e fica quieto.</CENTER>
</BODY>
</HTML>

14.3. QUEBRAS DE LINHA

Tag <BR>
Exemplo 10:
<HTML>
<HEAD><TITLE>O Dabber explora o Sasser</TITLE>
</HEAD>
<BODY>
<CENTER><FONT face="Verdana" color="red" size=7>O Dabber explora o Sasser</FONT><BR><IMG
src="img/v1.gif" align="left" vspace=5 hspace=5 width=50 height=50>Muito oportunista, o
verme Dabber tenta pegar carona na base instalada do Sasser, outro verme que <IMG
src="img/v2.gif" align="right" vspace=5 hspace=5 width=120 height=50>infectou mais de 1
milhão de máquinas pelo mundo no último mês.<BR>O Dabber usa uma falha no mecanismo de
transferência de arquivos do Sasser para se instalar, testando as portas TCP de 9899 a 9999
até encontrar uma aberta. Ao entrar na máquina, apaga no registro o rastro de outras pragas,
toma o seu lugar e fica quieto.</CENTER>
</BODY>
</HTML>
14.4. BLOCOS DE CITAÇÃO

Tag <BLOCKQUOTE>
Exemplo 11:
<HTML>
<HEAD><TITLE>Sete dicas para acabar com a barriguinha</TITLE>
</HEAD>
<BODY background="img/fundo2.jpg">
<H1><FONT face="Tahoma" color="#CC9900">Sete dicas para acabar com a
barriguinha</FONT></H1><FONT face="Lucida Sans" size=4>Pare de sonhar com aquele abdômen que
aparece no outdoor e vá à luta. Prepare-se para aliar exercícios físicos, alimentação e
novos hábitos. Passo a passo:
<BLOCKQUOTE>1. Capriche na postura. Os problemas posturais e o encurtamento dos músculos das
costas fazem a gordura acumular no abdomem.<P>2. Não use roupas muito apertadas na cintura.
Elas comprimem a circulação, predispondo à maior retenção de toxinas, tensionam os músculos,
que acabam flácidos pela falta de liberdade de ação, e pressionam a pele favorecendo o
aparecimento de estrias.<P>3. Use cremes específicos para aumentar a circulação local,
drenar os líquidos e reduzir a celulite.<P>4. Pratique atividades aeróbicas para queimar
gordura, ginástica localizada no abdomem para definir os músculos e esportes que fortaleçam
os músculos posteriores, como natação, vôlei, vela e golfe.<IMG src="img/barriga.jpg"
border=3 vspace=20 hspace=30 align="right"><P>5. Tire proveito da respiração. Ela pode
funcionar como um exercício. Ao soltar e puxar o ar dos pulmões, você movimenta o diafragma,
solicitando os músculos abdominais.<P>6. Evite o acúmulo de gases, fugindo de alimentos
muito quentes ou frios, leite, couve e repolho. Comer depressa, falar muito rápido, beber
líquidos com gás, mastigar chicletes e fumar também são prejudiciais.<P>7. Facilite o
funcionamento do intestino, beba muita água e coma frutas (como mamão, melancia e melão),
vegetais cozidos (como cenoura, abobrinha e berinjela) e iogurte desnatado.
</BLOCKQUOTE>Atenção:<BR>1. Consulte um médico para verificar a existência de doenças que
aumentam as medidas abdominais, como cistos nos ovários, tumores e problemas no fígado e
baço, 70% dos gases provêm do ar deglutido e apenas 30% da fermentação dos alimentos.</FONT>
</BODY>
</HTML>
14.5. TEXTO PRÉ-FORMATADO

Tag <PRE>
O texto pré-formatado faz com que o navegador mostre o texto de acordo com o que foi digitado no
código.
Exemplo 12:
<HTML>
<HEAD><TITLE>Tabela de preços</TITLE>
</HEAD>
<BODY>
<PRE>

+============================================+
| <B>TABELA DE PREÇOS</B> |
+============================================+
| <B>Produto</B> | <B>Unidade</B> | <B>Preço</B> |
+--------------------------------------------+
|Arroz | kg | R$ 7,00 |
|Feijão | kg | R$ 7,00 |
|Óleo | und | R$ 7,00 |
+--------------------------------------------+
</PRE></BODY></HTML>
15. LINKS
O link é a ligação entre as páginas Web. Através dele podemos ligar além das páginas, outros tipos
de arquivos e outros sites.
No projeto do site você já deve definir os links que ligarão as páginas de seu site e ter muito cuidado
com ligações erradas porque isso poderá acabar com a navegabilidade do site, resultando na diminuição de
visitas ao site.
Tag <A>
9 Atributos:
Href URL da página destino
Name Nome da âncora
Target título da janela que será aberta à página destino, pode-se utilizar alguns padrões já
definidos no HTML como “_blank” que abre o link em uma nova janela.
15.1. LINKS PARA OUTRAS PÁGINAS
Exemplo 13:
<HTML>
<HEAD><TITLE>Links</TITLE>
</HEAD>
<BODY link="#FF7700" alink="#FFCC00" vlink="#000000">
<FONT face="Arial" size=2>
<A href="http://www.ibest.com.br" target="_blank">Ibest</A><BR>
<A href="http://www.epenha.com.br/artigos.php">Eurides Penha</A><BR>
<A href="exemplo01.htm">Exemplo 01 do Curso</A><BR>
<A href="exemplo02.htm">Exemplo 02 do Curso</A><BR>
<A href="img/computador.jpg">Imagem computador</A><BR><BR>
<A href="http://www.pepsi.com.br" target="_blank">
<IMG src="img/pepsi.gif" alt="Site da Pepsi" ></A><BR><BR>
<A href="http://www.hp.com.br">
<IMG src="img/impressora.jpg" alt="Site da HP" border=0></A>
</FONT>
</BODY>
</HTML>
15.2. LINKS PARA ÂNCORAS

Âncora é uma sessão da página que é determinada pelo atributo “name” da tag <A>, ela pode ser
apontada de qualquer ponto da página e é muito útil para páginas muito extensas.
Depois de estabelecida a âncora podemos criar um link para a mesma colocando como valor no
atributo “src” o nome da âncora precedido de “#”.
Exemplo 14:
<HTML>
<HEAD><TITLE>Âncoras</TITLE>
</HEAD>
<BODY background=”img/fundo1.gif” leftmargin=50 topmargin=20>
<A name="topo"><A href="#linux">LINUX</A> &nbsp<A
href="#dabber">Dabber</A> &nbsp<A href="#java">JAVA</A></A>
<A name="linux"><H2><FONT face="Tahoma, Verdana, Arial" color="gray">Uma breve história
sobre o Linux</FONT></H2></a>

<P align="justify">
confusa e de falta de uma padronização central, às vezes.</FONT></P><P align="justify"><FONT
face="Courier new" size="2" color="black">O LINUX é uma versão gratuita distribuída do
primeiro UNIX desenvolvido por Linus Torvalds na Universidade de Helsinque na Finlândia. O
LINUX foi desenvolvido com a ajuda de muitos programadores UNIX, e especialistas em
Internet, permitindo a qualquer um com bastante experiência e bom senso a capacidade de
desenvolver a alterar o sistema.</FONT></P><P align="justify"><FONT face="Courier new"
size="2" color="black">O LINUX foi originalmente desenvolvido como um passatempo por Linus.
Foi inspirado no Minix, um pequeno sistema UNIX desenvolvido por
Andy Tanenbaum, e as primeiras discussões sobre ele foi no newsgroup Usenet
e escreviam seus próprios
drivers do dispositivo? Você está sem um bom projeto e está apenas ansioso por começar a
trabalhar em um OS que posso tentar modificar segundo suas necessidades? Você fica frustrado
quando tudo funciona no Minox? Sem mais noites em claro para colocar funcionando um programa
inteligente? Então esse anúncio pode ser pra você.</FONT></P><IMG src="pinguim.gif"
align="right" vspace=5 hspace=5 border=0 alt="Símbolo do Linux!"><P align="justify"><FONT
face="Courier new" size="2" color="black">Como mencionei há um mês atrás estou trabalhando
em uma
versão gratuita de um Minix para computadores AT 386. Finalmente chegou ao ponto em que já é
útil (embora não possa não depender do que você deseja) e desejo colocar todas as fontes em
uma distribuição maior. É apenas a versão 0.02... mas eu
executei com sucesso o bash, gcc, GNU make, GNU sed, compress, etc. nela.</FONT></P><P
align="justify"><FONT face="Courier new" size="2" color="black">Depois da versão 0.03, Linus
levou o número da versão até 0.10, quando mais pessoas começaram a trabalhar no sistema.
Após várias revisões, Linus aumentou o número da versão para 0.95 refletindo sua expectativa
de que o sistema estava pronto para uma versão; "oficial" muito em breve. (Geralmente, o
software não é atribuído ao número da versão 1.0 até que esteja teoricamente completo ou sem
erros).</FONT></P><P
align="justify"><FONT face="Courier new" size="2" color="black">Atualmente o LINUX é um
clone do UNIX completo, capaz de executar o X Windows System, o TCP/IP, o Emacs, o UUCP, o
software do correio e de informações, o que quizer. Quase todos os grandes pacotes gratuitos
de software foram transportados para o LINUX e o software comercial está se tornando
disponível.</FONT></P><P align="right"><A href="#topo">Topo</A></p><A
name="dabber"><H3><CENTER>O Dabber explora o Sasser</CENTER></H3><A><CENTER><IMG
src="img/v1.gif" align="left" vspace=5 hspace=5 width=50 height=50>Muito oportunista, o
verme Dabber tenta pegar carona na base instalada do Sasser, outro verme que <IMG
src="img/v2.gif" align="right" vspace=5 hspace=5 width=120
height=50>infectou mais de 1 milhão de máquinas pelo mundo no último mês.O Dabber usa uma
falha no mecanismo de transferência de arquivos do Sasser para se instalar, testando as
portas TCP de 9899 a 9999 até encontrar uma aberta. Ao entrar na máquina, apaga no registro
o rastro de outras pragas, toma o seu lugar e fica quieto.</CENTER>
<P align="right"><A href="#topo">Topo</A></p><A name="java"><H1><FONT
face="Arial">Introdução ao JAVA</FONT></H1></A><P align="justify"> <FONT face="Courier New"
color="#00FF00" size=3>A Programação Orientada a Objetos (POO) pode ser considerada como
sendo uma das principais evoluções ocorreram nas últimas décadas, no que diz respeito ao
desenvolvimento de softwares. As primeiras linguagens orientadas a objetos surgiram no final
da década de 70, proporcionando uma nova metodologia de programação que se diferenciasse de
uma linguagem procedural na forma com que os dados de um programa são armazenados e, mais
importante ainda, na maneira pela qual esses dados são tratados e se relacionam entre
si.</P><P align="justify">Apesar da grande potencialidade da POO, sua utilização nem sempre
é feita da forma correta, sobretudo devido à não compreensão de seus principais conceitos. O
principal objetivo deste texto é apresentar esses conceitos, destacando o que vem a ser
classe, objeto e apresentando os três principais paradigmas da POO: encapsulamento, herança
e
polimorfismo.</FONT></P><P align="right"><A href="#topo">Topo</A></p>
</BODY>
</HTML>

16. LISTAS
Para determinar que uma lista irá ser ordenada devemos utilizar o tag <OL> e para listas não
ordenadas devemos utilizar o tag <UL>.
Para marcar os itens devemos utilizar a tag <LI>.
16.1. LISTAS ORDENADAS

Tag <OL>
9 Atributos:
Type Tipo de ordenação. Para escolher o tipo de ordenação utilize um dos itens abaixo:
A: para letras maiúsculas
a: para letras minúsculas
1: para números (padrão)
I: para algarismos romanos em maiúsculo
i: para algarismos romanos em minúsculo
Exemplo 15:
<HTML>
<HEAD><TITLE>Listas Ordenadas</TITLE>
</HEAD>
<BODY>
<H3><FONT face="Tahoma" color="tomato">Listas Ordenadas</FONT></H3>
<FONT face="Tahoma" size=2 color="gray">
<OL type=”1”>
<LI>Introdução</LI>
<LI>Histórico</LI>
<LI>Instalação</LI>
<LI>Configuração</LI>
</OL>
</FONT>
</BODY>
</HTML>
16.2. LISTAS NÃO ORDENADAS

Tag <UL>
9 Atributos:
A tag <UL> não tem atributos, para mudar o tipo de marcador nas listas não ordenadas
acrescentamos o atributo “type” a tag <LI>, onde podemos escolher os seguintes marcadores:
Square: quadrado
Circle: circulo
Disc: disco
Exemplo 16:
<HTML>
<HEAD><TITLE>Listas não Ordenadas</TITLE>
</HEAD>
<BODY>
<H3><FONT face="Tahoma" color="tomato">Listas Ordenadas</FONT></H3>
<FONT face="Tahoma" size=2 color="gray">
<UL>
<LI type="square">Introdução</LI>
<LI type="disco">Histórico</LI>
<LI type="circle">Instalação</LI>
<LI>Configuração</LI>
</UL>
</FONT>
</BODY>
</HTML>

17. TABELAS
Usar tabelas é o melhor meio para organizar as informações da página, elas são ótimas para o
controle de vários aspectos de formatação da página.
A tabela é composta por diversos tags e atributos, que poderão ser implementados de diversas
formas. Abaixo estão descritas os tags e os atributos que a compõe:
Tag <TABLE>: inicia a tabela
Tag <TR>: linhas da tabela
Tag <TD>: colunas da tabela
Tag <TH>: cabeçalho da tabela
9 Atributos:
Border especifica a largura da borda da tabela
Cellspacing determina o espaçamento entre as células da tabela
Cellpading determina o espaço entre o texto e as bordas da célula
Width especifica a largura da tabela (em pixels ou %)
Height especifica a altura da tabela (em pixels ou %)
Bgcolor determina a cor de fundo da tabela
Bordercolor determina a cor das bordas da tabela
Align posição horizontal da tabela e dos valores das células (left, center, right)
Valign posição vertical dos valores das células (top, bottom, middle)
Rowspan mescla linhas
Colspan mescla colunas
Exemplo 17:
<HTML>
<HEAD>
<TITLE>Tabelas</TITLE>
</HEAD>
<BODY>
<TABLE width="600" height="300" border="1" align="center" cellpadding="5" cellspacing="2"
bordercolor="#999999" bgcolor="#FFFFFF">
<TR align="center" valign="middle">
<TD width="33%" height="33%" align="left" bgcolor="#FF0000"><FONT size="2" face="Courier
New, Courier, mono">Texto</FONT></TD>
<TD width="33%" height="33%" valign="top"><FONT size="2" face="Courier New, Courier,
mono">Texto</FONT></TD>
<TD width="33%" height="33%" align="right" valign="bottom"><FONT size="2" face="Courier
</TR>
<TD width="33%" height="33%" align="left" valign="top"><FONT size="2" face="Courier New,
Courier, mono">Texto</FONT></TD>
<TD width="33%" height="33%" bgcolor="#00FF00"><FONT size="2" face="Courier New,
<TD width="33%" height="33%" align="right" valign="middle"><FONT size="2" face="Courier
</TR>
<TD width="33%" height="33%" align="left" valign="bottom"><FONT size="2" face="Courier
<TD width="33%" height="33%" valign="bottom"><FONT size="2" face="Courier New, Courier,
<TD width="33%" height="33%" align="right" valign="top" bgcolor="#0000FF"><FONT size="2"
face="Courier New, Courier, mono">Texto</FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Exemplo 18:

<HTML>
<HEAD>
<TITLE>Tabelas</TITLE>
</HEAD>
<BODY>
<TABLE width="600" height="300" border="1" align="center" cellpadding="5" cellspacing="2"
bordercolor="#999999" bgcolor="#FFFFFF">
<TD width="33%" rowspan="2" align="left" bgcolor="#FF0000"><FONT size="2" face="Courier
New, Courier, mono">Célula
mesclada </FONT></TD>
<TD width="33%" height="33%" valign="top"><FONT size="2" face="Courier New, Courier,
<TD width="33%" height="33%" align="right" valign="bottom"><FONT size="2" face="Courier
</TR>
<TD width="33%" height="33%" bgcolor="#00FF00"><FONT size="2" face="Courier New,
<TD width="33%" height="33%" align="right" valign="middle"><FONT size="2" face="Courier
</TR>
<TD width="33%" height="33%" align="left" valign="bottom"><FONT size="2" face="Courier
<TD height="33%" colspan="2" valign="bottom"><FONT size="2" face="Courier New, Courier,
mono">Célula
mesclada </FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
18. FRAMES
Frames ou quadros são divisões que podemos criar em uma página Web, onde cada quadro pode
exibir arquivos distintos.
19. CRIANDO UM CONJUNTO DE FRAMES

Tag <FRAMESET>
9 Atributos:
Rows divide a página em quadros horizontais
Cols divide a página em quadros verticais
Bordercolor define a cor das bordas dos quadros
Border determina a largura da borda dos quadros
Frameborder elimina as bordas dos frames [yes(1) ou no(0)]
Framespacing determina o espaço entre os frames
Tag <FRAME>
9 Atributos:
Name nome do quadro
Src É o endereço do arquivo que deve aparecer no quadro
Scrolling define se o frame irá ter barras de rolagem ou não (yes ou no)
Noresize bloquear o redimensionamento dos quadros
Tag <NOFRAME>
Este tag possibilita colocar uma mensagem que só aparece caso o navegador do internauta não
suportar quadros
Exemplo 19:
<HTML>

<HEAD>
<TITLE>Trabalhando com frames</TITLE>
</HEAD>
<FRAMESET rows="100,*,100">
<FRAME src="frame19_top.htm" name="topo" scrolling="NO">
<FRAME src="frame19_meio.htm" name="meio">
<FRAME src="frame19_base.htm" name="base">
</FRAMESET>
<NOFRAMES></NOFRAMES>
</HTML>
Frame19_top.htm:
<HTML>
<HEAD>
<TITLE>QUADRO 1</TITLE>
</HEAD>
<BODY bgcolor="#FF9900">
<TABLE width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD align="center" valign="middle">Topo</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Frame19_meio.htm:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#999999">
<TR>
<TD align="center" valign="middle">Meio</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Frame19_base.htm:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FF9900">
<TR>
<TD align="center" valign="middle">Base</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Exemplo 20:
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="300,200,*" border="0" frameborder="" framespacing="0">
<FRAME src="frame3.htm" name="esquerda" scrolling="NO" noresize>
<FRAME src="frame2.htm" name="meio" scrolling="NO">
<FRAME src="frame1.htm" name="direita" scrolling="NO">
</FRAMESET>
<NOFRAMES>Seu navegador não suporta quadros</NOFRAMES>
</HTML>

Exemplo 21:
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="200,*" frameborder="no" border="0" framespacing="0">
<FRAME name="esquerda" src="menu.htm" scrolling="no" noresize>
<FRAMESET rows="100,*" frameborder="no" border="0" framespacing="0">
<FRAME name="topo" src="frametopo.htm" noresize>
<FRAME name="base" src="about:blank" noresize>
</FRAMESET>
</FRAMESET>
<NOFRAMES>Seu navegador não suporta quadros</NOFRAMES></HTML>
Frametopo.htm:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#3399CC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<TR>
<TD align="center" valign="middle"><IMG src="img/pepsi.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Menu.htm:
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#006699" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD align="center" valign="middle"><A href="exemplo01.htm" target="base">Exemplo
1</A></TD>
</TR>
<TR>
2</A></TD>
</TR>
<TR>
3</A></TD>
</TR>
<TR>
4</A></TD>
</TR>
</TABLE>
</BODY>
</HTML>
20. FORMULÁRIOS
Os formulários possibilitam a comunicação internauta/servidor. Se você tem hábito de utilizar a
Internet você vai perceber que utiliza bastante esse recurso. Um exemplo é quando vai abrir uma conta de e-
mail, cadastrar no newsletter de um site e até quando envia torpedos via Internet.
Tag <FORM>
Este é o tag que inicia e encerra o formulário, através dele definimos o método que as informações
serão enviadas e para onde irão essas informações.

9 Atributos:
Method modo que as informações serão enviadas para o servidor, via método GET ou POST.
O método GET envia as informações junto a URL solicitada
O método POST transmite toda a informação fornecida via formulário, imediatamente após a URL
ativada. Ou seja, quando o servidor recebe uma ativação de um formulário utilizando POST ele sabe
que precisa continuar "ouvindo" para obter a informação. Este é o melhor método.
Action URL para onde irão às informações digitadas no formulário.
Name serve para definir um nome para o formulário.
Tag <INPUT>
O tag input define diversos tipos de formulários, que tipo de informação será enviada e como essa
informação será enviada.
9 Atributos:
Type define o tipo de campo que será usado para o envio das informações. Na tabela abaixo estão
eles:
Tipo Definição Id
Text Campo tipo texto de uma linha 1
Password Campo tipo senha 2
Hidden Campo oculto 3
Checkbox Caixa de seleção 4
Radio Botão radio 5
File Campo para envio de arquivos 6
Submit Botão para enviar as informações do formulário 7
Reset Botão para limpar o formulário 8
Image Botão para enviar as informações do formulário utilizando uma imagem 9
Logo abaixo estão outros atributos e entre parênteses estão os ids dos tipos de formulário da tabela
acima que os utilizam:
Value determina um valor padrão para o campo (1,2,3,4,5,6,7,8,9)
Size define a largura do campo (12,6)
Maxlength determina o número máximo de caracteres que podem ser digitados (12,6)
Name define o nome do campo (1,2,3,4,5,6,7,8,9)
Checked mantém um botão selecionado (4,5)
Tag <TEXTAREA>
9 Atributos:
Rows determina o número de linhas que terá a caixa de texto
Cols determina o número de linhas que terá a caixa de texto
Name nome da área de texto
OBS: para determinar um valor default para a área de texto, digite o texto entre os tags
<TEXTAREA> e </TEXTAREA>.
Tag <SELECT>
O select é utilizado para criar menus suspensos e listas de simples e múltiplas seleções. Este tag deve
ser usado com o tag <OPTION> que é o responsável pelos valores na lista.
9 Atributos:
Name nome do menu
Size determina a altura da lista
Value define o valor da opção. Este atributo deve ser usado no tag <OPTION>

Multiple indica que poderá ser selecionada mais de uma opção do menu
Selected aponta para o valor padrão da lista
OBS: os rótulos são digitados entre os tags <OPTION> e </OPTION>
Exemplo 22:
<HTML>
<HEAD>
<TITLE>Trabalhando com formulários</TITLE>
</HEAD>
<BODY>
<FORM action="exemplo22.htm" method="post" name="Formulario1">
<TABLE width="436" border="0" cellspacing="3" cellpadding="0">
<TR align="center" bgcolor="#CCCCCC">
<TD width="163"><b><FONT size="2" face="Courier New, Courier,
mono">Tipo</FONT></b></TD>
<TD width="264"><b><FONT size="2" face="Courier New, Courier,
mono">Campo</FONT></b></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Text</FONT></TD>
<TD><FONT size="2" face="Courier New, Courier, mono">
<INPUT name="txt" type="text" value="Texto padrão" size="40" maxlength="30">
</FONT></TD>
</TR>
<TR>
<TD height="20"><FONT size="2" face="Courier New, Courier, mono">Password</FONT></TD>
<INPUT name="senha" type="password" value="senha" size="10" maxlength="10">
</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Hidden</FONT></TD>
<TD><INPUT name="Oculto" type="hidden" value="Oculto"></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Checkbox </FONT></TD>
<INPUT name="Item1" type="checkbox" value="1" checked>
Item1
<INPUT name="Item2" type="checkbox" value="2">
ite2</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Radio</FONT></TD>
<INPUT name="opcao" type="radio" value="1" checked>
sim
<INPUT type="radio" name="opcao" value="0">
não </FONT></TD>
</TR>
<TR>
<TD>File</TD>
<TD><INPUT name="Arquivo" type="file" size="30"></TD>
</TR>
<TR>
<TD>Submit</TD>
<TD><INPUT type="submit" name="Submit" value="Enviar"></TD>
</TR>
<TR>
<TD>Reset</TD>
<TD><INPUT type="reset" name="Submit2" value="Redefinir"></TD>
</TR>
<TR>
<TD>Image</TD>
<TD><INPUT name="enviargif" type="image" src="img/enviar.gif" width="18" height="18"
border="0"></TD>
</TR>
<TR>
<TD>Textarea</TD>

<TD><TEXTAREA name="Areadetexto" cols="30" rows="5">Texto padrão</TEXTAREA></TD>

</TR>
<TR>
<TD height="25">Select (menu)</TD>
<TD><SELECT name="menususpenso">
<OPTION value="1" selected>Valor 1</OPTION>
<OPTION value="2">Valor 2</OPTION>
</SELECT></TD>
</TR>
<TR>
<TD>Select (lista/múltipla)</TD>
<TD><SELECT name="listamultipla" size="5" multiple>
</SELECT></TD>
</TR>
<TR>
<TD>Select (lista/simples)</TD>
<TD><SELECT name="listasimples" size="3">
<OPTION value="1" selected>Valor 1</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Exemplo 23:
<HTML>
<HEAD>
<TITLE>CADASTRO DE CLIENTES</TITLE>
</HEAD>
<BODY>
<FORM name="cadastros" method="get" action="">
<TABLE border="0" cellspacing="2" cellpadding="0">
<TR>
<TD colspan="4"><H2 align="center">Cadastro de Clientes</H2></TD>
</TR>
<TR>
<TD width="131"><FONT size="2" face="Courier New, Courier, mono">Nome:</FONT></TD>
<TD colspan="3"><FONT size="2" face="Courier New, Courier, mono">
<INPUT name="nome" type="text" size="50" maxlength="40">
</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">e-mail:</FONT></TD>
<INPUT name="email" type="text" size="40" maxlength="50">
</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Senha:</FONT></TD>
<INPUT name="senha" type="password" size="10" maxlength="10">
</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Confirmar senha:</FONT></TD>
<INPUT name="confsenha" type="password" size="10" maxlength="10">

</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Endereço:</FONT></TD>
<INPUT name="end" type="text" size="60" maxlength="50">
</FONT></TD>
</TR>
<TR>
<TD><FONT size="2" face="Courier New, Courier, mono">Cidade:</FONT></TD>
<TD width="180"><FONT size="2" face="Courier New, Courier, mono">
<INPUT name="cidade" type="text" size="30" maxlength="50">
</FONT></TD>
<TD width="27"><FONT size="2" face="Courier New, Courier, mono">Estado:</FONT></TD>
<TD width="144"><FONT size="2" face="Courier New, Courier, mono">
<select name="UF" class="inputtext02">
<OPTION value="" selected>Estados</OPTION>
<OPTION value="AC">Acre</OPTION>
<OPTION value="AL">Alagoas</OPTION>
<OPTION value="AP">Amapá</OPTION>
<OPTION value="AM">Amazonas</OPTION>
<OPTION value="BA">Bahia</OPTION>
<OPTION value="CE">Ceará</OPTION>
<OPTION value="DF">Distrito Federal</OPTION>
<OPTION value="ES">Espírito Santo</OPTION>
<OPTION value="GO">Goiás</OPTION>
<OPTION value="MA">Maranhão</OPTION>
<OPTION value="MT">Mato Grosso</OPTION>
<OPTION value="MG">Minas Gerais</OPTION>
<OPTION value="PA">Pará</OPTION>
<OPTION value="PB">Paraíba</OPTION>
<OPTION value="PR">Paraná</OPTION>
<OPTION value="PE">Pernambuco</OPTION>
<OPTION value="PI">Piauí</OPTION>
<OPTION value="RJ">Rio de Janeiro</OPTION>
<OPTION value="RN">Rio Grande do Norte</OPTION>
<OPTION value="RS">Rio Grande do Sul</OPTION>
<OPTION value="RO">Rondônia</OPTION>
<OPTION value="RR">Rorâima</OPTION>
<OPTION value="SC">Santa Catarina</OPTION>
<OPTION value="SP">São Paulo</OPTION>
<OPTION value="SE">Sergipe</OPTION>
<OPTION value="TO">Tocantins</OPTION>
</select>
</FONT></TD>
</TR>
<TR>
<TD> </TD>
<TD colspan="3"><INPUT name="enviar" type="submit" value="Enviar">
<INPUT name="limpar" type="reset" value="Limpar"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

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

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

Hyper Text Markup

Leandro Guimarães Fernandes

Leandro Guimarães Fernandes

1.1. COMO IMPLEMENTAR O HTML

<TAG> Texto </TAG>

<TAG ATRIBUTO1=“” ATRIBUTO2=“”> Texto </TAG>

Professor: Leandro Guimarães Fernandes

Notação Descrição Aparência

5. URL (UNIFORM RESOURSE LOCATOR)

Professor: Leandro Guimarães Fernandes

5.1. URLS ABSOLUTOS

5.2. URLS RELATIVOS

<HTML>: Indica o início do código

<H1> Cabeçalho 1</H1>

Professor: Leandro Guimarães Fernandes

10. VISUALIZAR ARQUIVOS

11. PROJETO DO SITE

12. FORMATANDO O TEXTO

12.1. MUDANDO A FONTE

Professor: Leandro Guimarães Fernandes

12.2. OUTROS TAGS DE FORMATAÇÃO

Professor: Leandro Guimarães Fernandes

13.1. USANDO IMAGENS

Professor: Leandro Guimarães Fernandes

14. LAYOUT DE PÁGINA

14.1. TAG BODY

Professor: Leandro Guimarães Fernandes

14.2. CENTRALIZANDO ELEMENTOS

Professor: Leandro Guimarães Fernandes

14.3. QUEBRAS DE LINHA

14.4. BLOCOS DE CITAÇÃO

14.5. TEXTO PRÉ-FORMATADO

Professor: Leandro Guimarães Fernandes

15.1. LINKS PARA OUTRAS PÁGINAS

15.2. LINKS PARA ÂNCORAS

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

16.1. LISTAS ORDENADAS

16.2. LISTAS NÃO ORDENADAS

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

19. CRIANDO UM CONJUNTO DE FRAMES

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

<TD><TEXTAREA name="Areadetexto" cols="30" rows="5">Texto padrão</TEXTAREA></TD>

Professor: Leandro Guimarães Fernandes

Professor: Leandro Guimarães Fernandes

Você também pode gostar