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: leandro@advancedesigner.com.br 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 comando Recebe o comando Encerra 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

HTML – Hyper Text Markup Language
Notação &gt; &lt; &amp; &quot; &reg; &copy Descrição “Maior que” “Menor que” E comercial aspas duplas marca registrada Copyrights Aparência > < & “

2

® ©

Caractere Acento agudo Acento grave Acento circunflexo Letra com til Letra com trema Letras unidas Letra com argola Cedilha N com til O cortado THORN maiúsculo thorn minúsculo eth minúsculo eth maiúsculo Caractere alemão

Notação &xacute; onde x é uma letra qualquer, maiúscula ou minúscula &xgrave; onde x é uma letra qualquer, maiúscula ou minúscula &xcirc; onde x é uma letra qualquer, maiúscula ou minúscula &xtilde; onde x é uma letra qualquer, maiúscula ou minúscula &xuml; onde x é uma letra qualquer, maiúscula ou minúscula &Aelig; = Æ e &aelig; = æ &Aring; = Å e &aring = å &Ccedil; = Ç e &ccedil= ç &Ntilde; = Ñ e &ntilde; = ñ &Oslash; = Ø e &oslash; = ø &THORN = Þ(Icelandic) &thorn= þ (Icelandic) &eth ð (Icelandic) &ETH;= Ð (Icelandic) &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 Servidor Diretório Arquivo

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language 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

3

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> <H2> <H3> <H4> <H5> <H6> Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho Cabeçalho 1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6>

</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.

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language
Exemplo 03:
<HTML> <HEAD><TITLE>Introdução ao JAVA</TITLE> </HEAD> <BODY>

4

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

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language
Exemplo 04:
<HTML> <HEAD><TITLE>Introdução ao JAVA</TITLE> </HEAD> <BODY>

5

<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, sansserif” 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
Tags para formatação do texto Função Coloca o texto em negrito Coloca o texto em itálico Colocar o texto maior que o circunvizinho Colocar o texto menor que o circunvizinho Coloca o texto subscrito ao seu circunvizinho Coloca o texto sobrescrito ao seu circunvizinho Aplica sublinhado ao texto Aplica o taxado ao texto Fonte monoespaçada Fazer o texto piscar (não funciona no Internet Explorer

Na tabela abaixo estão listados alguns tags utilizados para formação do texto. Tag <B></B> <I></I> <BIG></BIG> <SMALL</SMALL> <SUB></SUB> <SUP></SUP> <U></U> <STRIKE></STRIKE> <CODE></CODE> <BLINK></BLINK>

12.3.

COMENTÁRIOS

Para comentar o texto devemos acrescentar “<!--“ para iniciar o comentário e “-->” para encerrá-lo.

Exemplo 05:
<HTML> <HEAD><TITLE>Introdução ao JAVA</TITLE> </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><!-- <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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

6

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> Atributos:
Src Alt Width Height URL de onde está à imagem texto alternativo largura da imagem (em pixels ou %) 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 Hspace Border espaço vertical espaço horizontal 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 tornouse 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

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

7

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 TAG BODY

14.1.

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.

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 Leftmargin Topmargin Marginwidth Marginheight Text Link Vlink Alink insere uma imagem no fundo da página determina a margem esquerda da página determina a margem superior da página determina a largura da margem (usado em frames) determina a altura da margem (usado em frames)

determinar uma cor padrão para o texto da página determinar a cor do link determinar a cor do link visitado determinar a cor do link selecionado

Exemplo 07:
<HTML> <HEAD><TITLE>Introdução ao JAVA</TITLE> </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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

8

<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 tornouse 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.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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language 14.3. QUEBRAS DE LINHA

9

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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

10

+============================================+ | <B>TABELA DE PREÇOS</B> +============================================+ | <B>Produto</B> | <B>Unidade</B> | +--------------------------------------------+ |Arroz | kg | R$ 7,00 | |Feijão | kg | R$ 7,00 | |Óleo | und | R$ 7,00 | +--------------------------------------------+ </PRE></BODY></HTML>

| <B>Preço</B> |

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> Atributos:
Href Name URL da página destino 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;&nbsp<A href="#dabber">Dabber</A>&nbsp;&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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

11

<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 tornouse 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><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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

12

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> 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> 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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

13

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 Atributos:
Border especifica a largura da borda da tabela determina o espaçamento entre as células da tabela determina o espaço entre o texto e as bordas da célula Cellspacing Cellpading Width Height Bgcolor Align Valign Rowspan Colspan

especifica a largura da tabela (em pixels ou %) especifica a altura da tabela (em pixels ou %) determina a cor de fundo da tabela determina a cor das bordas da tabela posição horizontal da tabela e dos valores das células (left, center, right) posição vertical dos valores das células (top, bottom, middle) mescla linhas mescla colunas

Bordercolor

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 New, Courier, mono">Texto</FONT></TD> </TR> <TR align="center" valign="middle"> <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, Courier, mono">Texto</FONT></TD> <TD width="33%" height="33%" align="right" valign="middle"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> </TR> <TR align="center" valign="middle"> <TD width="33%" height="33%" align="left" valign="bottom"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> <TD width="33%" height="33%" valign="bottom"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> <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:

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

14

<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%" rowspan="2" align="left" bgcolor="#FF0000"><FONT size="2" face="Courier New, Courier, mono">C&eacute;lula mesclada </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 New, Courier, mono">Texto</FONT></TD> </TR> <TR align="center" valign="middle"> <TD width="33%" height="33%" bgcolor="#00FF00"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> <TD width="33%" height="33%" align="right" valign="middle"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> </TR> <TR align="center" valign="middle"> <TD width="33%" height="33%" align="left" valign="bottom"><FONT size="2" face="Courier New, Courier, mono">Texto</FONT></TD> <TD height="33%" colspan="2" valign="bottom"><FONT size="2" face="Courier New, Courier, mono">C&eacute;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> Atributos:
Rows Cols Border divide a página em quadros horizontais divide a página em quadros verticais define a cor das bordas dos quadros elimina as bordas dos frames [yes(1) ou no(0)] determina o espaço entre os frames determina a largura da borda dos quadros

Bordercolor Frameborder Framespacing

Tag <FRAME> Atributos:
Name Src Scrolling Noresize nome do quadro É o endereço do arquivo que deve aparecer no quadro define se o frame irá ter barras de rolagem ou não (yes ou no) 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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

15

<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> <TITLE>QUADRO 2</TITLE> </HEAD> <BODY bgcolor="#999999"> <TABLE width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <TR> <TD align="center" valign="middle">Meio</TD> </TR> </TABLE> </BODY> </HTML>

Frame19_base.htm:
<HTML> <HEAD> <TITLE>QUADRO 3</TITLE> </HEAD> <BODY bgcolor="#FF9900"> <TABLE width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <TR> <TD align="center" valign="middle">Base</TD> </TR> </TABLE> </BODY> </HTML>

Exemplo 20:
<HTML> <HEAD> <TITLE>Trabalhando com frames</TITLE> </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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language
Exemplo 21:
<HTML> <HEAD> <TITLE>Trabalhando com frames</TITLE> </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>

16

Frametopo.htm:
<HTML> <HEAD> <TITLE>QUADRO 1</TITLE> </HEAD> <BODY bgcolor="#3399CC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <TABLE width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <TR> <TD align="center" valign="middle"><IMG src="img/pepsi.gif"></TD> </TR> </TABLE> </BODY> </HTML>

Menu.htm:
<HTML> <HEAD> <TITLE>QUADRO 4</TITLE> </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> <TD align="center" valign="middle"><A href="exemplo02.htm" target="base">Exemplo 2</A></TD> </TR> <TR> <TD align="center" valign="middle"><A href="exemplo03.htm" target="base">Exemplo 3</A></TD> </TR> <TR> <TD align="center" valign="middle"><A href="exemplo04.htm" target="base">Exemplo 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 email, 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.

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language 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

17

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 Name URL para onde irão às informações digitadas no formulário. 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.

Atributos:
Type eles: Tipo Text Password Hidden Checkbox Radio File Submit Reset Image Definição Campo tipo texto de uma linha Campo tipo senha Campo oculto Caixa de seleção Botão radio Campo para envio de arquivos Botão para enviar as informações do formulário Botão para limpar o formulário Botão para enviar as informações do formulário utilizando uma imagem Id 1 2 3 4 5 6 7 8 9 define o tipo de campo que será usado para o envio das informações. Na tabela abaixo estão

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 Size Name Checked determina um valor padrão para o campo (1,2,3,4,5,6,7,8,9) define a largura do campo (12,6) determina o número máximo de caracteres que podem ser digitados (12,6) mantém um botão selecionado (4,5) define o nome do campo (1,2,3,4,5,6,7,8,9)

Maxlength

Tag <TEXTAREA> Atributos:
Rows Cols Name determina o número de linhas que terá a caixa de texto determina o número de linhas que terá a caixa de texto 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.

Atributos:
Name Size Value nome do menu determina a altura da lista define o valor da opção. Este atributo deve ser usado no tag <OPTION>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language
Multiple Selected indica que poderá ser selecionada mais de uma opção do menu aponta para o valor padrão da lista

18

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&atilde;o" size="40" maxlength="30"> </FONT></TD> </TR> <TR> <TD height="20"><FONT size="2" face="Courier New, Courier, mono">Password</FONT></TD> <TD><FONT size="2" face="Courier New, Courier, mono"> <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&nbsp;</FONT></TD> <TD><FONT size="2" face="Courier New, Courier, mono">&nbsp; <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> <TD><FONT size="2" face="Courier New, Courier, mono">&nbsp; <INPUT name="opcao" type="radio" value="1" checked> sim <INPUT type="radio" name="opcao" value="0"> n&atilde;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>

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

19

<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> <OPTION value="3">Valor 3</OPTION> <OPTION value="4">Valor 4</OPTION> <OPTION value="5">Valor 5</OPTION> </SELECT></TD> </TR> <TR> <TD>Select (lista/m&uacute;ltipla)</TD> <TD><SELECT name="listamultipla" size="5" multiple> <OPTION value="1">Valor 1</OPTION> <OPTION value="2">Valor 2</OPTION> <OPTION value="3">Valor 3</OPTION> <OPTION value="4">Valor 4</OPTION> <OPTION value="5">Valor 5</OPTION> </SELECT></TD> </TR> <TR> <TD>Select (lista/simples)</TD> <TD><SELECT name="listasimples" size="3"> <OPTION value="1" selected>Valor 1</OPTION> <OPTION value="2">Valor 2</OPTION> <OPTION value="3">Valor 3</OPTION> <OPTION value="4">Valor 4</OPTION> <OPTION value="5">Valor 5</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> <TD colspan="3"><FONT size="2" face="Courier New, Courier, mono"> <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> <TD colspan="3"><FONT size="2" face="Courier New, Courier, mono"> <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> <TD colspan="3"><FONT size="2" face="Courier New, Courier, mono"> <INPUT name="confsenha" type="password" size="10" maxlength="10">

Professor: Leandro Guimarães Fernandes

HTML – Hyper Text Markup Language

20

</FONT></TD> </TR> <TR> <TD><FONT size="2" face="Courier New, Courier, mono">Endere&ccedil;o:</FONT></TD> <TD colspan="3"><FONT size="2" face="Courier New, Courier, mono"> <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&aacute;</OPTION> <OPTION value="AM">Amazonas</OPTION> <OPTION value="BA">Bahia</OPTION> <OPTION value="CE">Cear&aacute;</OPTION> <OPTION value="DF">Distrito Federal</OPTION> <OPTION value="ES">Esp&iacute;rito Santo</OPTION> <OPTION value="GO">Goi&aacute;s</OPTION> <OPTION value="MA">Maranh&atilde;o</OPTION> <OPTION value="MT">Mato Grosso</OPTION> <OPTION value="MG">Minas Gerais</OPTION> <OPTION value="PA">Par&aacute;</OPTION> <OPTION value="PB">Para&iacute;ba</OPTION> <OPTION value="PR">Paran&aacute;</OPTION> <OPTION value="PE">Pernambuco</OPTION> <OPTION value="PI">Piau&iacute;</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&ocirc;nia</OPTION> <OPTION value="RR">Ror&acirc;ima</OPTION> <OPTION value="SC">Santa Catarina</OPTION> <OPTION value="SP">S&atilde;o Paulo</OPTION> <OPTION value="SE">Sergipe</OPTION> <OPTION value="TO">Tocantins</OPTION> </select> </FONT></TD> </TR> <TR> <TD>&nbsp;</TD> <TD colspan="3"><INPUT name="enviar" type="submit" value="Enviar"> <INPUT name="limpar" type="reset" value="Limpar"></TD> </TR> </TABLE> </FORM> </BODY> </HTML>

Professor: Leandro Guimarães Fernandes