Scribd
Carregar
59 visualizações22 páginas

Curso HTML

Este documento apresenta um curso de HTML. Ele inclui uma introdução, lista de tópicos a serem cobertos, comissão organizadora e referências básicas. O curso abordará conceitos básicos de HTML, listas, tabelas, formulários, frames, caracteres especiais e ferramentas.

Enviado por

Sildes Lapa Corsini Junior
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
59 visualizações22 páginas

Curso HTML

Este documento apresenta um curso de HTML. Ele inclui uma introdução, lista de tópicos a serem cobertos, comissão organizadora e referências básicas. O curso abordará conceitos básicos de HTML, listas, tabelas, formulários, frames, caracteres especiais e ferramentas.

Enviado por

Sildes Lapa Corsini Junior
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 22

Curso de HTML i

APRESENTAÇÃO

Este curso faz parte da programação da XXIII Semana da Engenharia Mecânica (SENGMEC-
2002) da Faculdade de Engenharia de Ilha Solteira, promovida pelo Grêmio Estudantil do Curso de
Engenharia Mecânica e pelo Departamento de Engenharia Mecânica, com o apoio do Programa de
Pós-Graduação em Engenharia Mecânica, no período de 26 a 31 de agosto de 2002.
O curso é destinado a alunos de graduação, de pós-graduação, de escolas técnicas, ex-
alunos, técnicos e professores.
Todo o material aqui impresso estará também disponível em um CD-ROM que conterá ainda
toda a programação do evento.
Esperamos que este curso possa contribuir para a formação e/ou especialização de todos os
participantes inscritos.
Atenciosamente,

COMISSÃO ORGANIZADORA DA SENGMEC - 2002

Carlos Alexandre Z. Vilchez - Grêmio Estudantil da Engenharia Mecânica (Presidente)


Ricardo Carvalhal - Grêmio Estudantil da Engenharia Mecânica (Vice-Presidente)
Alexandre Camargos Koguchi - Grêmio Estudantil da Engenharia Mecânica (1o Secretário)
Alessandro Tomio Takaki - Grêmio Estudantil da Engenharia Mecânica (2o Secretário)
Geraldo Vidotto Junior - Grêmio Estudantil da Engenharia Mecânica (1o Tesoureiro)
Claudio A. V. Barbosa - Grêmio Estudantil da Engenharia Mecânica (2o Tesoureiro)
Rogério Erbereli - Grêmio Estudantil da Engenharia Mecânica (Suplente)
Ricardo Alan Verdú Ramos - Departamento de Engenharia Mecânica (Chefe)
Vicente Afonso Ventrella - Departamento de Engenharia Mecânica (Vice-Chefe)
João Antonio Pereira - Departamento de Engenharia Mecânica (Coord. PPGEM)
Amarildo Tabone Paschoalini - Departamento de Engenharia Mecânica (Colaborador)
André Luiz Seixlack - Departamento de Engenharia Mecânica (Colaborador)
Aparecido Carlos Gonçalves - Departamento de Engenharia Mecânica (Colaborador)
Cássio Roberto Macedo Maia - Departamento de Engenharia Mecânica (Colaborador)
Hidekasu Matsumoto - Departamento de Engenharia Mecânica (Colaborador)
Ruís Camargo Tokimatsu - Departamento de Engenharia Mecânica (Colaborador)
Elias Amaral dos Santos - Departamento de Engenharia Mecânica (Webmaster)
Érika Renata B. Lomba - Departamento de Engenharia Mecânica (Desenhista)
Sandra L. M. Pereira - Departamento de Engenharia Mecânica (Secretária)
Alex Sander Borges - Departamento de Engenharia Mecânica (Aux. Administrativo)
Gilmar Pereira da Silva - Escola Técnica de Ilha Solteira (Estagiário)

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML ii

ÍNDICE

1. HTML BÁSICO 1
1.1. Iniciando um Documento 1
1.2. Tags Usados no Início do Documento 1
1.3. Títulos e Subtítulos 1
1.4. Formatação de Textos 2
2. HTML BÁSICO II 2
2.1. Imagens 2
2.2. Links 2
3. LISTA 3
3.1. Criando Listas Ordenada 3
3.2. Criando Listas Não Ordenadas 3
3.3. Atributos Adicionais do Elemento Ul 4
4. REFRESH PAGE 4
5. TABELAS 4
5.1. Construindo Tabelas com o Elemento Table 4
5.2. Atributos para a Tabela 5
6. FORMULÁRIOS 7
6.1. Construindo Formulários com o Form 8
6.2. Atributos para Form 8
7. FRAMES 12
7.1. Estrutura 12
7.2. Sintaxe 13
7.3. Frameset 13
7.4. Frame 14
7.5. Border 15
8. MÚSICA 16
9. CARACTERES ESPECIAIS 16
10. IMAGENS CLICÁVEIS 17
10.1. Métodos que tornam sua Imagem Sensível 17
10.2. Sensibilizando as Imagens 17
11. GIFS ANIMADOS 19
12. FERRAMENTAS 19
12.1. Utilitários Gráfico 19
12.2. Editores Html 19
12.3. Flash 19
13. HOSPEDAGEM 20
14.BIBLIOGRAFIA BÁSICA 20

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 1

1. HTML BÁSICO I
HTML significa Hypertext Markup Language e é a linguagem de descrição de
documentos usada na World Wide Web. Ela é orientada por marcadores ou TAGs.
TAGs são os comandos utilizados pela linguagem HTML. Cada TAG informa ao programa
visualizador ou Browser, como ele deverá formatar o texto e deve estar dentro dos sinais de
menor que (<) e maior que (>). Exemplo: <HTML>, <BODY>, etc.
Os TAGs podem ser únicos ou duplos, com início e fim.
Exemplos:

TAG único: <BR> TAG duplo: <P>....</P>

1.1. Iniciando um Documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Temos duas
seções básicas:

HEAD

Contém parâmetros de configuração do documento.

BODY

Contém o documento em si. A estrutura de um documento HTML é:

<HTML><HEAD><TITLE>Título da Home Page</TITLE></HEAD>


<BODY BACKGROUND="imagem">*** Conteúdo da Home Page ***</BODY></HTML>

1.2. Tags Usados no Início do Documento

<HTML>...</HTML>

Envolvem todas as seções de um documento (HEAD e BODY).

<HEAD>...</HEAD>

Envolvem a seção de cabeçalho do documento.

<TITLE>...</TITLE>

Indica o título do documento para o Browser. Geralmente os Browsers apresentam este


título na barra de título da sua Janela no Windows.

<BODY>...</BODY>

Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.
Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção:
BACKGROUND.

1.3. Títulos e Subtítulos

Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com
as opções CENTER ou BLINK.
Veja alguns exemplos:

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 2

Texto inserido entre <H1> e </H1>:

Texto inserido entre <H2> e </H2>:

Texto inserido entre <H3> e </H3>:

Texto inserido entre <H3><CENTER> e </CENTER></H3> :

Observações: As TAGs CENTER e BLINK têm a função de deixar o cabeçalho ou texto


centralizado e pulsante (piscando), respectivamente.

1.4. Formatação De Textos

Além das TAGs <CENTER>...</CENTER> e <BLINK>...</BLINK> existem as seguintes


TAGs que podem ser utilizadas para a formatação de um texto.

<B>...</B> - Aplica o estilo negrito .


<I>...</I> - Aplica o estilo itálico.
<U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP> - Faz com que o texto fique sobrescrito.
<SUB>...</SUB> - Faz com que o texto fique subscrito.
<PRE>...</PRE> - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.

2. HTML BÁSICO II
2.1. Imagens

Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de
cuidado, para não onerar a transmissão para o usuário.
Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.
Para inserir uma imagem, uso o TAG: <IMG>, que é único, não exigindo um TAG
finalizado. Exemplo:

<IMG SRC="figura1.gif">

Os arquivos com as imagens deverão estar armazenados no seu Provedor de Acesso,


juntamente com o documento HTML.

2.2. Links

Os Links servem para criar Palavras Quentes, que permitem a interligação entre
documentos HTML e outros documentos ou até arquivos FTP.
Veja o seguinte exemplo:

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 3

<ul>
<li><a href=#inicio>Para o próprio documento</a></li>
<li><a href="ivl.htm#inicio">Para outro documento</a></li>
<li><a href="http://www.nome_da_página.com.br/">Para minha Home
Page</a></li>
<li><a href="filme1.jpg">Âncora para imagem externa</a></li></ul>

Use: <A HREF=destino>Texto ou imagem</A><A NAME=nome>...</A>

O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando
desviamos para um determinado ponto dentro de um documento, indicamos este nome com um
"#". Por exemplo:

<A NAME="AQUI">Aqui é um ponto para desvios</A>...<A HREF="#AQUI">Desvia


para o ponto "AQUI"</A>

3. LISTAS
3.1. Criando Listas Ordenadas

Listas ordenadas, são também denominadas listas numeradas, pois, quando um


navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item
utilizando números, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas são iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente,
</OL>.
Exemplo:
<OL>

<LI>É fácil fazer uma Home Page


<LI>Tem que ter paciência

<LI>Bons recursos
<LI>E não exagerar em imagens
</OL>
Resultado:
1. É fácil fazer uma Home Page
2. Tem que ter paciência
3. Bons Recursos
4.E não exagerar em imagens.

3.2. Criando Listas não Ordenadas

Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de
elas não definirem explicitamente uma ordem, como é no caso as numeradas. Elas são formadas
por símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG
<UL> e são respectivamente terminadas com </UL>. E seus elementos são como as numeradas
com <LI> Exemplo:
<UL>

<LI>Internet

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 4

<LI>Intranet
<LI>BBS

</UL>

resultado:

• Internet

• Intranet

• BBS

3.3. Atributos Adicionais do Elemento Ul

O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele recebe o tipo do
marcador que será utilizado ao lado dos itens da lista, o qual pode ser CIRCLE, SQUARE ou
DISC.

4. REFRESH PAGE

São páginas normalmente sem links, que chamam outras depois de um determinado tempo
dentro dela, sem nenhuma interferência do internauta.
Para fazer uma página desta basta colocar no documento a seguinte linha de comando:
Ex.:
<HTML>

<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm">

<TITLE> Título </TITLE>


</HEAD>

<BODY>
Corpo do Documento
</BODY>

</HTML>

5. TABELAS

Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão
que elas foram acrescentadas à linguagem HTML.

5.1. Construindo Tabelas com o Elemento Table

A TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura e o


conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>.

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 5

5.1.1. O Título da Tabela (Elemento Caption)

A TAG <CAPTION> especifica o título de uma tabela. Por exemplo:

<CAPTION>Notas da primeira avaliação</CAPTION>

5.1.2 - Table Headings (Elemento TH)

A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas células
são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH
pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas
podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter
nenhum elemento TH, isto é, não conter nenhuma célula em destaque. O TAG dela é:

<TH>texto em destaque</TH>

Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.

5.1.3 - Table Data (Elemento TD)

A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados comuns
(e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum
destaque e alinhamento à esquerda. Assim como o TH, pode-se construir células em branco,
usando o elemento TD, como no exemplo a seguir:

<TD>Células de dados</TD>

Observações: A TAG de terminação, <TD>, também é opcional.

5.1.4 - End of Table Row (Elemento TR)

A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela pode conter várias
células e, portanto, é necessário que se faça uso de uma marcação que indique exatamente o
ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um <TR>, com
exceção da última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim
de tabela </TABLE> torna implícito o fim da linha.

5.2. Atributos para a Tabela

As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de


alguns atributos. Os principais são:

5.2.1. Border

Um atributo opcional para ser usado com TABLE é o atributo BORDER. Se ele estiver
presente, a tabela será formatada com linhas de borda.
Atenção: Todas as explicações acima como as que estão por vir, foram feitas, para que você
possa saber o que significa a TAG em questão.
Exemplo:

<TABLE BORDER>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TD>Notas/Alunos</TD>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 6

<TH>Eduardo</TH>
<TH>Ana Lúcia</TH>
<TH>Andréa</TH>
<TR>
<TH>Notas</TH>
<TD>8,0</TD>
<TD>9.3<TD>
<TD>7.8</TD>
<TR>
<TH>No de Inscrição</TH>
<TD>376234809</TD>
<TD>387349048</TD>
<TD>502350432</TD>
</TABLE>

Veja o resultado:

O atributo BORDER pode também receber um valor que vai estabelecer qual a espessura
(além da existência) da linha de borda da tabela (BORDER="valor"). Se o valor atribuído for 0
(zero), o BORDER funciona exatamente como o caso padrão, sem o BORDER. Dessa maneira, é
possível colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER.

<TABLE BORDER=5>
<TD>TESTE1</TD>
<TD>TESTE2</TD>
<TD>TESTE3</TD>
<TR>
<TD>TESTE4</TD>
<TD>TESTE5</TD>
<TD>TESTE6</TD>
</TABLE>

Veja o resultado:

5.2.2. Align

Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de
uma célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de
toda uma linha da tabela.

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 7

O exemplo abaixo, mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT,
para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.

<TABLE BORDER>
<TD>Primeira célula</TD>
<TD>Segunda célula</TD>
<TD>Terceira célula</TD>
<TR>
<TD ALIGN="CENTER">Centro</TD>
<TD ALIGN="LEFT">Esquerda</TD>
<TD ALIGN="RIGHT">Direita</TD>
<TR>
</TABLE>

Veja o resultado:

5.2.3. Valign

Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas


superior e inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na
parte de baixo, respectivamente.

Veja o exemplo:

<TABLE BORDER>
<TD>Teste de alinhamento</TD>
<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</TABLE>

Veja o resultado:

6. FORMULÁRIOS

A linguagem HTML também permite que o cliente (navegador) interaja com o servidor,
preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um
Guest Book (formulário) em meu site onde eu peço a todos os visitantes que dêem suas opiniões.
Essas informações devem ser tratadas por programas, denominados scripts, que podem

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 8

armazená -las para uma posterior utilização. Os scripts podem ainda retornar um outro documento
HTML, uma URL, ou algum outro tipo de dado para o cliente.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele
provê uma maneira agradável e familiar para coletar dados do usuário através da criação de
formulários com janelas de entrada de textos, botões, etc...
É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts
que entendem os dados, como mencionado. É aí que entra a necessidade da interface CGI. Tal
interface, permite que o servidor se comunique com o script que vai atuar sobre essas
informações, retornando os resultados para o navegador.
A confecção de scripts exige que se aprenda uma linguagem de programação chamada
PERL. Abaixo temos alguns endereços que processará os dados para você, e os retornará via e-
mail. Aqui estão as referências:

• The Perl Language Home Page - http://www.perl.com/perl/


• SCG Software Archive - http://iamwww.unibe.ch:80/~scg/Src/
• Perl reference materials - http://www.geek-girl.com/perl/perl.html
• Server Side Scripts - http://www.cosy.sbg.ac.at/www-doku/tools/bjscripts.html
• Perl FAQ - http://www.cis.ohio-state.edu:80/text/faq/usenet/perl-faq/top.html

6.1. Construindo Formulários com o Form

Para fazer formulário você tem que colocar as TAGs <FORM> </FORM>. Todos os outros
comandos, devem ficar dentro dessas TAGs.

6.2. Atributos para Form

O elemento FORM pode conter dois atributos que determinaram para onde será mandada
a entrada do FORM. Vejam como eles são:

6.2.1. Get

Esse atributo indica totalmente como o dado é passado para o script ou programa definido
no atributo ACTION.

6.2.2. Post

Passa os dados para a entrada padrão dos sistema operacional.


Vale a pena lembrar, que será mostrado um exemplo completo, de como fazer sua página
com formulários. Também será dado um endereço de um servidor que processa os dados e os
retorna via e-mail. Aí poderá ser lido normalmente. Agora será explicado como colocar os
campos de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados com o
seu nome e suas informações.

6.2.3. Input

A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário.


Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas
de texto, etc...), o nome da variável associada com o dado da entrada, o alinhamento e o campo
do valor mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da
entrada do elemento. Por exemplo, quando você for receber os dados já processados, irá vir o
name : =resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo
de entradas de dados. Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 9

Para mudar o tamanho da janela padrão, você tem que colocar o comando SIZE. Por
exemplo:
<INPUT TYPE"TEXT" NAME="nome" SIZE=8>(ou número desejado)

Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à
janela. Por exemplo:
<INPUT TYPE="TEXT" NAME="nome" SIZE=8 VALUE="texto.">

Olhe como ficaria:

TIPOS DE ELEMENTOS TYPE

Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de
senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o
seguinte:
<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>

TYPE="RADIO"

Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto,
utiliza-se o RADIOButtons. Um exe mplo típico do uso de tais botões, é cuja resposta pode ser
SIM ou NÃO. É preciso que todos os rádios buttons de um mesmo grupo, ou seja, referentes a
mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME
e VALUE, são necessários. Veja a seguir:
<INPUT TYPE="RADIO" NAME="você gostou dessa home page?"
VALUE="sim">sim<p>

<INPUT TYPE="RADIO" NAME="você gostou dessa home page?"


VALUE="nao">não<p>

Repare:

TYPE="PASSWORD"

Este comando serve para fazer uma campo de senhas. Quando a pessoa digitar,
aparecerá o sinal de "*"! O comando é:
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 10

TYPE="CHECKBOX"

Esse comando é válido quando apenas uma resposta é esperada. Mas nem sempre esta é
a situação. O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa
pode ser escolhida.
Definição dos checkboxs:
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">Internet Explorer<p>

<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P>


<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P>

Veja o resultado:

TYPE="SUBMIT"

Esse é o botão que submete os dados do formulário quando pressionados, ou seja,


possibilitam o envio dos dados para o script que vai tratá-los. Veja como se adiciona o botão:
<INPUT TYPE="SUBMIT" VALUE="enviar">

Veja como ficará:

TYPE="RESET"
No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos
os campos já preenchidos no formulário, voltando à situação inicial.
<INPUT TYPE="RESET" VALUE="Limpar">

Veja como ficará:

6.2.4. Textarea

Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e
ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar
para o usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 11

associadas à entrada do cliente (navegador). O atributo value não é aceito nesse elemento, mas
você pode colocar já um texto da seguinte maneira. Veja como ele é colocado:
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>

6.2.5 - Select

Embora os usuários não precisem digitar sempre suas respostas, mostrar cada opção
através de botões consegue um bom espaço e facilidade. Veja como ele funciona:
<SELECT>
<OPTION>opção1

</SELECT>

Veja o resultado:

EXEMPLO COMPLETO

Abaixo, temos um exemplo completo de uma página com um formulário.


<form action="http://www.uki.edu/cgi-bin/AnyForm.cgi" method="post">

<input type="Hidden" name="AnyFormModle" value="Mail">


<input type="Hidden" name="AnyFormDisplay"
value="http://www.gun.com.br">

<input type="Hidden" name="AnyFormTo" value="[email protected]">


<input type="Hidden" name="AnyFormSubject" value="Dados do Formulário de
HTML">

Qual o seu nome?<input type="Text" name="Nome" size="40"><br>


Qual o seu E-mail?<input type="Text" name="E-mail" size="40"><p>

Você gostou da minha Home Page?<input type="Radio" name="Gostou"


value="Sim">sim <input type="Radio" name="Gostou" value="Mais ou
Menos"CHECKED>
Mais ou Menos <input type="Radio" name="Gostou" value="Não">Nem um
pouco!<P>

Qual a página que você mais gostou??<select name="Melhor


Página"><option value="Interface">Interface</option>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 12

<option value="Imagens, som, etc.">Imagens, som, cores, comandos


básicos, etc.</option>
<option value="Frames">Frames</option>

<option value="Ferramentas">Ferramentas</option>
<option value="Formulários">Formulários</option>

<option value="CGI">CGI</option>
<option value="JAVA">JAVA</option>

<option value="Java Script">Java Scipr</option>


<option value="VRML">VRML</option>

<option value="CHAT">CHAT</option>
<option value="Onde colocar">Onde colocar</option>

<option value="Onde divulgar">Onde Divulgar</option>


<option value="Bombas em Java Script">Bombas em Java Script</option>
<option value="Contadores de Acesso">Contadores de Acesso</option>

<option value="Organizando às informações">Organizando às


informações</option>
</select><P> Deixe seus comentários sobre a minha Home Page:<textarea
name="Comentários" cols="28" rows="5"></textarea><br>

O que está faltando? <input type="Text" name="O que está


faltando?"Value="o que falta?"><br>

Essa Home Page lhe ajudou?<input type="Radio" name="Ajudou?"


value="sim">Sim <input type="Radio" name="Ajudou?" value="Não!">Não!<p>

<input type="Submit" value="Enviar ">

<input type="Reset" value="Limpar Dados">

7. FRAMES
Os FRAMES são divisões de telas do seu browser que permite a utilização de vários
documentos no formato HTML.
Os FRAMES são visualizados pelo Netscape Navigator e pelo Internet Explorer.

7.1. Estrutura

Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do
corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>.
Exemplo:
<HTML>
<HEAD>

<TITLE> Título do Documento </TITLE>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 13

</HEAD>
<FRAMESET>

Sintaxe dos Frames


</FRAMESET>

</HTML>

7.2. Sintaxe

Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe
de FRAMES, no caso chamado de Frame1.htm.
<HTML>

<HEAD>
<TITLE> Frame 1 </TITLE>

</HEAD>
<BODY>
<FONT SIZE=+1> <B> Frame n1 </B> </FONT>

</BODY>
</HTML>

7.3. Frameset

A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e


COLS.

7.3.1. ROWS

Especifica o número de FRAMES e a altura de cada um.


Exemplo:
<FRAMESET ROWS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME1.HTM">

</FRAMESET>
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da
tela, o 3º com 50% da tela (ambos em altura).

7.3.2. COLS

Especifica o numero de FRAMES e a largura de cada um.

Exemplo:

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 14

<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME1.HTM">

</FRAMESET>
Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da
tela, o 3º com 50% da tela (ambos em largura).

7.4. Frame
A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME,
SCROLLING, NORESIZE, TARGET.

7.4.1. SRC
Especifica o documento de formato HTML chamado para o FRAME.
Indispensável, por que sem ele só o documento aparecerá va zio, só com as divisões.
Exemplo:
<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
</FRAMESET>

7.4.2. Name
Especifica o nome do documento de formato HTML chamado para o FRAME.
É extremamente necessário para o uso do TARGET, que será visto a seguir.
Exemplo:
<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM" NAME="Principal">


<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
</FRAMESET>

7.4.3. Scrolling
Define se o Frame terá barra de rolagem, o default é Auto.
Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho
especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.
Exemplo:

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 15

<FRAMESET COLS="20%,30%,50%"
<FRAME SRC="FRAME1.HTM" SCROLLING="no">

<FRAME SRC="FRAME1.HTM" SCROLLING="yes">


<FRAME SRC="FRAME1.HTM" SCROLLING="auto">

</FRAMESET>

7.4.4. Noresize

Impossibilita o usuário de mudar o tamanho da área especificada do FRAME.


Por default o usuário pode mudar esta área.
Exemplo:
<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM" NORESIZE>


<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
</FRAMESET>

7.4.5. Target

Define qual a área (FRAME) que aparecerá o documento especificado pelo link.
Mais útil na utilização de Menus e índices.
Necessita do NAME.
Exemplo:
<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM" NAME="Principal">


<FRAME SRC="FRAME1.HTM">

<FRAME SRC="FRAME1.HTM">
</FRAMESET>

O Link:
<A HREF="http://www.microsoft.com" TARGET="Principal"> Microsoft </A>
Se você quiser criar um link que chama uma nova tela do browser basta colocar
TARGET="um nome que não existe".

7.5. Border

Define qual a borda que o FRAME terá.


Mais útil na utilização de BACKGROUNDS iguais.
Exemplo:
<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 16

<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>


<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>

</FRAMESET>

8. MÚSICA
Existem 2 maneiras de colocar músicas em sua home page. A primeira é com o TAG
<BGSOUND> que só é reconhecido pelo Internet Explorer. Para utilizar este TAG siga o exemplo:
<BGSOUND SRC="arquivo.mid">
Onde arquivo.mid é o arquivo de música. Caso você queira que a música repita-se,
adicione o atributo loop="infinite".
A segunda maneira é com o TAG <EMBED> que, por ser reconhecido pelo Internet
Explorer e Netscape, é recomendado. Para utilizá -lo, siga o exemplo :
<EMBED SRC="arquivo.mid">
É recomendado usar arquivos midi por serem bem menores que os wavs.

9. CARACTERES ESPECIAIS
Á &Aacute; á &aacute; Â &Acirc
â &acirc; À &Agrave; à &agrave;
Å &Aring; å &aring; Ã &Atilde;
ã &atilde; Ä &Auml; ä &auml;
Æ &AElig; æ &aelig; É &Eacute;
é &eacute Ê &Ecirc; ê &ecirc;
È &Egrave; è &egrave; Ë &Euml;
ë &euml; Ð &ETH; ð &eth;
Í &Iacute; í &iacute Î &Icirc;
î &icirc; Ì &Igrave; ì &igrave;
Ï &Iuml; ï &iuml; Ó &Oacute;
ó &oacute; Ô &Ocirc; ô &ocirc
Ò &Ograve; ò &ograve; Ø &Oslash;
ø &oslash; Õ &Otilde; õ &otilde;
Ö &Ouml; ö &ouml; Ú &Uacute;
ú &uacute; Û &Ucirc; û &ucirc;
Ù &Ugrave; ù &ugrave; Ü &Uuml;
ü &uuml; Ç &Ccedil; ç &ccedil;
Ñ &Ntilde; ñ &ntilde; < &lt;
> &gt; & &amp; " &quot;
® &reg; © &copy; Ý &Yacute;
ý &yacute; Þ &THORN; þ &thorn;
ß &szlig; º &#186; ª &170;
¹ &#185; ² &#178; ³ &#179;
ƒ &#131; † &#134; ‡ &#135;
‰ &#137; ¢ &#162; £ &#163;
« &#171; ± &#177; » &#187;
· &#183; ¼ &#188; ½ &#189;
¾ &#190; ¿ &#191; × &#215;
÷ &#247; ¡ &#161; ¤ &#164;

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 17

10. IMAGENS CLICÁVEIS

Você já deve ter reparado que algumas home pages possuem imagens que não são
simples figuras decorativas, existe um tipo de imagem que é sensível ao clique de mouse e
funciona como uma plataforma de lançamento para diversos links de hipertexto. Uma excelente
utilização para esse tipo de imagem é, por exemplo, na criação de barras de navegação muito
comuns na Web.
Não seria interessante se pudéssemos criar regiões clicáveis independentes, onde cada
uma delas nos levasse a documentos distintos? Mas como será que isso é feito?
Com certeza você deve estar pensando que isso é uma tarefa para experts, mas está
muito enganado! Chegou a hora de adicionar esse recurso à sua home page, mas como não
queremos que você saia por aí sem saber o que está fazendo, que tal primeiro entendermos um
pouco melhor como tudo isso funciona?

10.1. Métodos que Tornam sua Imagem Sensível

Existem dois métodos para tornar uma imagem sensível em determinada região ou, de
outra forma, métodos para a construção de "mapas de imagens" - os Mapas Locais de Imagens
(Client-Side Image Maps) e o Mapa Remoto de Imagens (Server-Side Image Maps). A escolha
entre um ou outro pode ser feita após analisarmos suas características principais.
A diferença básica entre os dois métodos é clara e extremamente importante. O mapa
remoto é uma combinação de CGI (Common Gateway Interface), HTML e um "arquivo de mapa"
que nada mais é do que um arquivo que informa as regiões sensíveis da imagem e que reside no
servidor de Web. Este método funciona da seguinte maneira:
Quando você clica sobre uma região sensível de uma imagem, o browser fornece ao
servidor de Web as coordenadas (x,y) de onde você clicou. O servidor procura no arquivo de
mapa daquela imagem, qual a URL (Uniform Resource Locator) que corresponde a região clicada,
e envia essa URL de volta para o browser, que se encarrega de solicitá-la e mostrá-la em sua
tela.
Por outro lado, quando você utiliza um mapa local de imagem (Client-Side Image Maps),
todas as informações que definem o mapa das regiões sensíveis da imagem estão dentro do
próprio código HTML da página que está sendo mostrada na sua tela, e com isso não há
necessidade de recorrer ao servidor para identificar as coordenadas de um clique. Economizamos
um acesso ao servidor, e isso pode ser interessante.
Então, podemos dizer que o mapa local de imagem produz uma melhor utilização da rede,
gerando um tráfego menor, diminuindo a carga de pedidos para o servidor de Web e aumentando
a performance do browser, já que o tempo de resposta fica reduzido ao pedido da URL. Não é
tudo o que a gente quer? Então, esse será o método escolhido - Mapa Local de Imagem.

10.2. Sensibilizando as Imagens

Essa tarefa será dividida em duas partes, a criação do documento HTML e do mapa de
imagem. Utilizando qualquer editor de sua preferência, adicione a imagem que deseja sensibilizar
ao código HTML de sua página com o TAG <IMG SRC …>.

Exemplo:

<HTML>
<HEAD>
<TITLE> Imagens sensíveis à cliques de mouse </TITLE>
</HEAD>
<BODY>
<H3>Exemplo de imagem sensível ao clique de mouse</H3> <BR>

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 18

<IMG SRC="exemplo.gif" BORDER="0" >


</BODY>
</HTML>

Por enquanto nada de muito novo, não é? Então vamos passar para a parte "mais nobre" -
a construção do mapa de imagens.
Para essa tarefa, você vai precisar de um software especial conhecido como "MAPEDIT",
para definir as regiões sensíveis da imagem.
Abra o MAPEDIT e a primeira tela que surgirá para você será "Open/Create Map". Clique
no botão "Browse…" ao lado de "Map or HTML File", para localizar o arquivo HTML editado
anteriormente - em nosso exemplo exemplo.htm.
Ao selecionar o arquivo, uma nova janela surgirá com a lista de todas as imagens inseridas
no documento HTML - em nosso exemplo só inserimos uma, exemplo.gif. Posicione o cursor
sobre o nome da imagem que deseja sensibilizar e clique "Ok".
Observe que a primeira janela mostrada, está agora preenchida com todas as informações
necessárias. Clique "Ok" e a imagem escolhida será apresentada para você.
Chegamos ao momento mais importante - associar áreas da imagem às URLs.
Você pode optar por várias ferramentas na hora de marcar a região a ser sensibilizada -
retângulos, círculos ou polígonos. O ideal é que escolha a que melhor se adapte ao formato da
área a ser mapeada.
Estando com a ferramenta selecionada, vamos começar a definir as regiões - os quatro
botões da barra de navegação: procura, comentário, correio e internet.br. Marque a área do
primeiro botão mantendo o mouse clicado, solte-o e em seguida dê um clique. Surgirá uma janela
"Object URL".
Em "URL for clicks on this objects", informe a URL associada à esta área. Na verdade, o
que irá acontecer é que quando essa região - que agora funciona como um botão - for clicada, a
página referente a URL fornecida será carregada. Repita a operação para todos os outros botões
que queira associar à URLs.
Pronto, seu mapa está criado! Você pode salvá-lo acessando o menu "File", opção "Save"
e observe que em "Save As format" a opção "Client Side Map (HTML)" deverá estar selecionada.
O MAPEDIT adicionará algumas linhas ao seu código HTML, e a versão final dele deverá ser algo
mais ou menos como o mostrado abaixo.
Arquivo exemplo.htm depois da utilização do MAPEDIT:

<HTML>
<HEAD>
<TITLE> Imagens sensíveis à cliques de mouse </TITLE>
</HEAD>
<BODY>
<H3>Exemplo de imagem sensível ao clique de mouse</H3><BR>
<IMG SRC="navega.gif" BORDER="0" usemap="#navega">
<map name="navega">
<area shape="rect" coords="0,0,158,33" href="procura.htm">
<area shape="rect" coords="161,0,317,32" href="comenta.htm">
<area shape="rect" coords="323,0,479,32" href="correio.htm">
<area shape="rect" coords="483,0,641,32" href="internetbr.htm">
<area shape="rect" href="navega.htm" coords="0,0,640,32">
</map>
</BODY>
</HTML>

Existe um conceito importante que é o de "URL default", que é utilizado para definir a URL
que deve ser carregada sempre que for clicada uma região que não tenha sido definida no mapa.
No menu "File", opção "Edit Default URL ...", você deve informar a URL da própria página

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 19

corrente, em nosso exemplo seria exemplo.htm. Assim, sempre que uma região não definida da
imagem for clicada, nada de diferente irá acontecer.
Duas opções importantes do MAPEDIT que você deve conhecer: o ícone da "seta" na
barra de ferramenta é utilizado para testar o mapa e o ícone ao lado, algo como um círculo com
traços, permite que você altere a área previamente definida do mapa. Muito utilizado nas
correções.

11. GIFs ANIMADOS

O GIF animado nada mais é que uma uma imagem constituída de várias camadas de
figuras que alternam seqüencialmente. Hoje existem vários programas que geram GIFS
animados.
Caso você queira adquirir algumas animações já feitas para serem colocadas em sua
home page, você pode adquiri-las através de algumas páginas que fornecem GIFs. Para obter
estas GIFs é só procura-las através de algum serviço de busca.

12. FERRAMENTAS

Abaixo, temos alguns endereços onde é possível encontrar certas ferramentas para tornar
mais rápido e fácil o uso da linguagem HTML. Não que seja obrigatório o uso destas ferramentas,
mas são muito boas. Você faz tudo com mais facilidade. E, além do mais, você pode adicionar
mais recursos através destas. Veja:

12.1. Utilitários Gráfico

• ACDsee
Descrição: Visualizador de gráficos. Suporta GIF, JPG, TIFF, BMP e outros.

• Acrobat Reader
Descrição: Visualizador de arquivos .PDF

• Microsoft Gif Animator


Descrição: Aplicativo para criar arquivos GIF Animados

12.2. Editores Html

• Microsoft Front Page

• Macromedia Dreamweaver

• Coffee Cup HTML Editor

• Hot Dog Web Editor Professional

12.3. Flash

• Macromedia Flash 5.0

• Coffee Cup Firestarter

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002


Curso de HTML 20

13. HOSPEDAGEM

HPG – www.hpg.com.br

GEOCITIES – www.geocities.com.br

14. BIBLIOGRAFIA BÁSICA

• Html 4 - Serie p/ Dummies - Editora Campus.


• Html 4 Com Xml - Mazzetti; Maria - Makron Books.
• Desenvolvendo Sites Prof.Com Html 4.0 E Css 2 - Carvalho; Alan - Editora Book Express.
• Html 4: Guia de referencia do programador - Mullen; Robert - Editora Ciência Moderna.

XXIII SEMANA DA ENGENHARIA MECÂNICA – unesp – Ilha Solteira – 26 a 31/08/2002

Você também pode gostar