Professional Documents
Culture Documents
<HTML>
Jezmael Basilio
1
Sumário
1. A linguagem HTM.
1.1. O que é HTML?
1.2. Por que aprender HTML é importante?
1.3. Fundamentos da linguagem HTML.
2. As tags essenciais.
2.1. Estrutura básica.
2.2. Títulos
2.2.1. Título do documento.
2.2.2. Título de seção.
3. Formatando o texto.
3.1. Parágrafos e quebra de linha.
3.2. Linhas Horizontais.
4. Personalizando a página.
4.1. Alterando a fonte.
4.2. Aplicando cor de fundo.
4.3. Aplicando estilos de texto.
4.4. Aplicando efeito no texto.
5. Listas
5.1. Listas não-ordenadas.
5.2. Listas ordenadas.
5.3. Listas de definições.
6. Links
6.1. Links relativos.
6.2. Links absolutos.
6.3. Links na mesma página.
7. Imagens
7.1. Formatos
7.2. Parâmetros da tag <img>.
7.2.1. Imagem como fundo da página.
7.2.2. Imagem como link.
8. Tabelas
8.1. As tags essenciais de uma tabela.
8.2. Os parâmetros assessórios de uma tabela.
8.3. A importância da tabela em uma página.
9. Frames
9.1. O que são frames.
9.2. As tag's <frameset></frameset> e <frame>.
9.3. O comando target.
9.4. Iframes.
10. Formulários
10.1 Atributos de <FORM>
2
<HTML>
1. A linguagem HTM.
1.1. O que é HTML?
Exemplos:
<BODY></BODY> //corpo da página
<CENTER></CENTER> //mantém o corpo da página ao centro
<HTML></HTML> //marca do início do documento HTML
<P></P> //parágrafo
<DIV></DIV> //divisão
<TABLE></TABLE> //tabela
<FORM></FORM> //formulário
<FONT></FONT> //estilo de fonte
2. As tags essenciais
2.1. Estrutura básica
Para entendermos a estrutura básica de uma página em HTML vamos montar nossa
primeira página.
<html>
<head>
<title>Minha Primeira Página em HTML!</title>
</head>
<body>
<!-- Meu primeiro comentário -->
<p align="center">Essa é a minha primeira página em HTML!</p>
</body>
</html>
BOAS DICAS:
Sempre feche uma tag que você começou a usar.
4
Mantenha suas tags sempre aninhadas (usando o tabulador), assim você melhora a
compreensão quando for ler o código de suas páginas.
• Agora visualize sua primeira página, abrindo o arquivo que você salvou com o
Mozilla Firefox, será ele o nosso navegador padrão.
Curiosidade!
Talvez você já tenha visto páginas da internet com as extensões .html e .htm mas muitos
se perguntam qual a diferença entre elas. Ela está no fato de que alguns servidores
ignorar a letra “l”. Se você enviar um arquivo para um servidor e quando for visualizá-lo
e ele aparecer sem a letra possivelmente esse servidor seja em DOS.
2.2. Títulos
2.2.1. Título do documento.
Cada documento tem um título que é exibido na barra de título do navegador. Esse
título deve ser escrito somente entre as tags <TITLE>...</TITLE>. Quando o usuário utiliza
uma ferramenta de busca como Google, Yahoo, Cadê, etc. procurando por um assunto
específico, o conteúdo do marcador <TITLE> de uma página é a primeira coisa a ser
vasculhada pelo navegador. Daí a grande importância em escolher títulos coesos para as
páginas e que consigam traduzir o conteúdo da página em poucas palavras.
5
Além disso, quando o usuário escolhe uma página para colocar em sua lista de
Favoritos do browser, é o título da página que aparecerá na lista. Caso a página não tenha o
marcador <TITLE> ou ele não conter nada, o browser assumirá o nome do arquivo.
Boa Dica:
Colocar títulos com ponto na frente do nome é uma estratégia para que sua página
sempre esteja no topo dos favoritos, caso ele s estejam em ordem alfabética.
Exemplo:
..:: Titulo da Página ::.. ou ::.. Titulo da Página ..::
6
Note que colocamos uma cor de fundo na página, essa característica é dada pelo
atributo bgcolor e seu valor "#a98151" que indica as cores RGB (Red, Green e Blue) em
hexadecimal.
Outra característica da nossa página é que o alinhamento de todos os cabeçalhos está
sendo feito pela tag <center>, se tirarmos ele todo o texto ficará alinhado no modo padrão,
a esquerda da página. Outra maneira de fazer alinhamento no cabeçalho é utilizando o
atributo aling dentro da tag <Hn>.
• Apague a tag <center> e acrescente o atributo aling mais um dos valores que ele
suporta, “right”, “left”, “center” ou “justify” .
Exemplo: <h1 aling=”center”>CABEÇALHO DE TAMANHO 1</h1>
• Salve o arquivo e verifique a mudança atualizando a página (Tecla F5).
7
3. Formatando o texto
3.1. Parágrafos e quebra de linha.
Não podemos fazer parágrafos simplesmente dando uma ENTER ou ESPACE, em HTML
existem tags próprias para indicar ao navegador isso, são elas:
<P>...<P> Indica um novo parágrafo, o comando de fechamento da tag pode ser omitido
quando não houver mais nenhum parágrafo seguinte, caso contrário o navegador interpreta
como sendo ainda do mesmo parágrafo. Também suporta o atributo de alinhamento align e
title (que indica um título ao parágrafo).
<BR/> Tag para quebra de linha. Não utiliza fechamento.
<html>
<head>
<title>Parágrafo</title>
</head>
<body>
Esse é o meu primeiro parágrafo de teste.
Esse já é o meu segundo parágrafo de teste.
<p> Agora com o marcador de parágrafo.</p>
E sua linha seguinte.
</body>
</html>
Note nos dois primeiros parágrafos que digitamos não houve quebra, apenas quando
inserimos a tag <p> o navegador conseguiu interpretá-lo como sendo um novo parágrafo.
Agora vamos utilizar a tag <BR/>.
8
• Insira a tag <BR/> depois do primeiro parágrafo que digitamos.
• Insira também a mesma tag antes da palavra “marcador” que se encontra no nosso
terceiro parágrafo digitado.
• Salve e verifique a diferença.
Agora insira atributos dentro da tag <p> para ver como ela reage, salve e visualize.
Exemplo: <p aling=”center” title=”qualquer coisa”>Algum texto aqui</p>
Boa dica:
Para uma melhor organização de um conjunto de parágrafos podemos utilizar a tag
<div>. Ela junto com o atributo align evita que alinhemos todos os parágrafos que
digitamos.
Exemplo:
<div align=”right” title=”título1”>
<p>Primeiro parágrafo...</p>
...
<p>Último parágrafo</p>
</div>
<Hr> Tag de barra horizontal. Não é necessário ser fechado. Suporta quatro atributos:
width -> indica o tamanho horizontal da barra, podendo ser em % ou em pixels.
size -> indica o tamanho vertical (altura), escala em pixels.
align -> indica o alinhamento da barra, center, right, left ou justify.
color -> indica a cor da barra, escala em RGB hexadecimal #RRGGBB (exemplo #fca636).
noshade ->indica se a barra não apresentará efeito 3D, o valor “noshade” anula o efeito 3D.
9
• Crie um novo documento e insira o código:
<html>
<head>
<title> Barra Horizontal </title>
</head>
<body bgcolor="#d1a96a">
<h1 align="center">Amor pra recomeçar - Frejat</h1>
<HR size="8" color="#b78e58" align="right" noshade="noshade"/>
<p align="center">
Eu te desejo não parar tão cedo<br/>
Pois toda idade tem prazer e medo<br/>
E com os que erram feio e bastante<br/>
Que você consiga ser tolerante<br/>
Quando você ficar triste<br/>
Que seja por um dia, e não o ano inteiro (...)
</p>
</body>
</html>
Já que estamos nos baseando no padrão W3C, o atributo color deve ser inserido
dentro de outro atributo, o style. O style fornece um meio de incluir informações de
formatação e estilos de folha. O padrão do style é o CSS (Cascading Style Sheets).
• Troque então a linha da barra horizontal por esta abaixo, salve e visualize o
resultado:
<HR size="8" style="color: #b78e58;" align="right" noshade="noshade"/>
O resultado é o mesmo, mas lembre-se que estamos nos baseando no padrão W3C.
10
• Insira o atributo width e algum valor para teste, pode ser em % ou em pixels, salve
e visualize a página.
4. Personalizando a página
4.1. Alterando a fonte.
Para alteração de fonte, cor e tamanho, utilizamos a tag <font> e seus atributos color
(cor da fonte, em #RRGGBB) size (escala de -2 a 7) e face (tipos de fonte, Arial, Trebuchet
MS, Verdana...).
Vamos agora fazer nossa formatação de texto, crie um novo arquivo chamado
“fonte.html” e insira o código:
<html>
<head>
<title> Mudando a propriedade da Fonte </title>
</head>
<body>
<h1 align="center"><font face="Courier New"> Garotos - Leoni </font></h1>
<hr width=”80%” align="center" size="8" color="gray"></hr>
<p align="center">
<font size="2" color="gray" face="Arial">Seus olhos e seus olhares<br/>
Milhares de tenta&ccetil;ões <br/>
Meninas são tão <strong>mulheres</strong><br/>
Seus truques e confusões <br/>
Se espalham pelos pêlos <br/>
Boca e cabelo <br/>
Peitos e poses e apelos <br/>
Me arragam pelas pernas <br/>
Certas mulheres como você <br/>
Me levam sempre onde querem <br/>
Garotos não resistem (...)<br/>
</font>
</p>
</body>
</html>
11
Note que a fonte cinza está em todo o texto, devido a segunda tag <font> está
somente sendo fechada no final do corpo do texto, mas poderia ser fechada onde desejar.
Aproveite para brincar um pouco com os atributos e seus valores.
Outra maneira de modificar a fonte é utilizando o atributo style dentro da tag <font>.
Exemplo:
<font style="font-family:Arial; font-size:16px; color:#006699; background-color:#000000;"
size="2" color="gray" face="Arial">Fonte azul com fundo preto<br/>
Agora vamos criar um exemplo simples para demonstrar esses atributos. Crie um
novo arquivo chamado “pagina_pessoal.html” e crie uma página do seu estilo, com cores
de fontes, cores de fundo ou imagem de fundo. Mais adiante explicarei como aplicar links
em texto ou imagens, mas deixarei um exemplo simples para que possa testa as cores.
Exemplo:
12
<a href=”www.google.com.br”>Clique aqui para ir para o Google</a>
Essas tags de formatação são o que chamamos de tags de formatação física, pode ser
utilizada uma dentro da outra por exemplo. Essa formatação permite que em um mesmo
trecho de texto possa ser aplicados em mais de um formato, esse apenas sugerem um tipo
de ênfase a ser dada no texto. Podendo também utilizar várias outras atribuições com o
atributo style dentro deles (exceto Strike e U). Agora vamos utilizar as tags de formatação.
13
<SMALL>TEXTO EM FONTE MENOR</SMALL><BR/>
<STRIKE>TEXTO RISCADO</STRIKE><BR/>
<TT>EXIBE O TEXTO USANDO UMA FONTE EM TAMANHO FIXO</TT>
</body>
</html>
Essas tag são o que chamamos de tags de Formatação lógica, elas ajuda na
formatação de textos dando uma melhor compreensão do que está sendo lido.
5. Listas
A linguagem HTML contém elementos que permitem criar listas de definições, listas
ordenadas e listas não ordenadas como os que são utilizados nos aplicativos de edição de
textos (ex.: OpenOffice Write).
• Primeiro item
• Segundo item
14
• Terceiro item
Agora vamos criar uma lista em HTML. Abra um novo arquivo e insira o código.
<html>
<head>
<title>Lista não ordenada</title>
</head>
<body >
<h4> Minha lista de estados e cidades</h4>
<ul>
<li>Rio Grande do Norte</li>
<li>Mossoró</li>
<li>São Paulo</li>
<li>Santos</li>
<li>Rio de Janeiro</li>
<li>Rio de Janeiro</li>
<li>Ceará</li>
<li>Fortaleza</li>
<li>Bahia</li>
<li>Salvador</li>
</ul>
</body>
</html>
Note que as cidades deveriam ser uma sub-lista dos estados, para isso fazemos uma lista
dentro de outra lista.
Teste agora utilizando uma lista dentro de outra e com os atributos suportados, como o
exemplo:
15
5.1.2. Listas Ordenadas
Uma lista ordenada contém vários itens marcados em ordem crescente. Para criar uma lista
ordenada usam-se os comandos <ol>...</ol> ("ordered list") Dentro desses comandos os
itens em ordem crescente são criados com o comando <li> ("list item"). Os atributos que a
tag suporta são type (tipo de caractere que fará a marcação [i|I|a|A|1]), compact (reduz os
espaços na frente da linha e espaçamentos [compact]) e start (indica onde deve começar a
numeração ou as letras da lista [valor]).
1. Primeiro item
h. Sub-item
2. Segundo item
3. Terceiro item
Palavra:
Essa é a definição da minha palavra.
Essa é a segunda definição da minha palavra
Palavra2:
Essa é a única definição dessa palavra
16
6. Links
O link é o recurso mais poderoso da linguagem HTML. Conhecido como hiperlink ou
hipertexto o link é a ligação de uma página a outra dentro ou fora do site. Os links podem
ser vinculados com textos, sons, imagens, vídeos, etc. A criação de um link é simples,
utiliza-se apenas uma tag chamada âncora <A></A>.
Os lados de uma ligação de hipertexto são definidos da seguinte maneira: o lado onde
ela parte é chamado de link e o lado de chegada chama-se âncora. Seus parâmetros são
HREF (Hipertest Reference) e NAME.
<A HREF=”URL”> PÁGINA </A> âncora de partida, que se refere ao hipertexto a ser
localizado por meio do endereço fornecido pela URL. PÁGINA aparecerá na Home Page em
destaque indicando que é um link. Quando o usuário rolar o mouse em cima da palavra
PÁGINA e der um clique, imediatamente o link o levará para a página de destino.
Âncora de Saída
<a href= “#Referência” >Ir para baixo</a>
Âncora de chegada (trecho)
<a name= “Referência” >TRECHO</a>
17
NAME – quando a âncora vier acompanhada deste parâmetro, na verdade ela esta indicando
o ponto de chegada (URL que foi referenciada no link), que é o endereço de um trecho
(tópico) de um documento.
Colocada em lugar estratégico no texto, para indicar onde o assunto se inicia. Deve ter a
mesma URL do link de referência para ele (o link de referência) possa encontrar o trecho
referenciado.
Você pode personalizar as cores que ficarão seus links de acordo com a sua característica
(já visitado, não visitado e normal). É somente utilizar os atributos alink, vlink e link dentro
da tag <body>.
7. Imagens
Uma página fica bem mais atraente quando existem imagens para ilustrar seu
conteúdo. No entanto, é preciso ter cuidado com a quantidade de imagens, pois elas
influenciam e muito o carregamento da página. É muito simples inserir uma imagem. Só é
preciso saber que os formatos aceitos são GIF, JPG, JPEG, PNG ou SVG e as seguintes
tags:
<img src=”nomedaimagem.extensão” width=”largura” height=”altura”>
<html>
<head>
<title>Inserindo uma imagem</title>
</head>
<body>
Testando o texto junto a imagem <img src="ubuntu.png" width="269" height="70"
alt="Site Ubuntu.gov" align="middle"/>continuando o texto
</body>
</html>
18
• Verifique se a imagem está no mesmo diretório do arquivo em HTML, salve e visualize
no navegador.
• Utilize os outros atributos, salve e verifique as modificações.
8. Tabelas
Tabelas correspondem a uma ótima organização de informações, desse modo foi
incorporado à linguagem HTML. Atualmente vários sites utilizam esse recurso
essencialmente para layout da página através do posicionamento das imagens e texto. As
tabelas são simplesmente linhas separadas por colunas de conteúdo. Esse conteúdos podem
ser qualquer tipo de mídia suportada pelo navegador ou até mesmo outra tabela.
Nesse capítulo vamos tentar dominar a utilização da tabela, alinhamento, formatação,
mesclagem.
<html>
<head>
<title> Criando minha primeira tabela </title>
19
</head>
<body>
<table>
<caption>Esse é o título da minha tabela</caption>
<tr>
<th> Cabeçalho: linha1 e coluna1 </th>
<th> Cabeçalho: linha1 e coluna2 </th>
</tr>
<tr>
<td> Coluna: linha2 e coluna1 </td>
<td> Coluna: linha2 e coluna2 </td>
</tr>
<tr>
<td> Coluna: linha3 e coluna1 </td>
<td> Coluna: linha3 e coluna2 </td>
</tr>
</table>
</body>
</html>
Uma boa característica das tabelas é a formatação dos texto inseridos nela. Teste os
atributos aling e valing (alinhamento vertical) dentro das tags <td></td>, <td></td> e
<th></th>.
20
cellpadding Espaço entre a borda Em pixels <table
e o conteúdo cellpadding=”2”>
border rule Permite esconder none, rows, cols, all <table border
quais células deve ser rule=”cols”>
mostrado
Além desses atributos as tabelas também aceitam atributos de páginas como background e
bgcolor, title, style.
21
9. Frames
Exemplo:
<FRAMESET ROWS="30%,40%,30%"> <!-- frame com duas linhas -->
<FRAME SRC="pagina1.html">
<FRAME SRC="pagina2.html">
<FRAME SRC="pagina3.html">
</FRAMESET>
Exemplo2:
<FRAMESET COLS="20%, 80%"> <!-- frame com duas colunas -->
<FRAME SRC="col1.html">
<FRAME SRC="col2.html">
</FRAMESET>
22
Exemplo3:
<FRAMESET COLS= “20%, 80%” >
<FRAME SRC= “col1.html” >
<FRAMESET ROWS= “20%, 80%” > <!-- dois frames em coluna e -->
<FRAME SRC= “lin1.html” > <!-- uma coluna com dois frames em linha -->
<FRAME SRC= “lin2.html” >
</FRAMESET>
</FRAMESET>
Exemplo4:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html"> <!-- dois frames em linha e -->
<FRAMESET COLS="x, y"> <!-- uma linha com dois frames em coluna -->
<FRAME SRC="col1.html">
<FRAME SRC="col2.html">
</FRAMESET>
</FRAMESET>
<html>
<head>
<title> Testando os Frames </title>
</head>
<frameset cols="40%, *" >
<frame src="fonte.html">
<frame src="lista.html">
</frameset>
</html>
23
Façamos o teste para melhor explicação, acrescente no arquivo que acabamos de criar nas
duas tags de frame os seus nomes com a tag name.
Agora abra o arquivo “fonte.html” e na linha que insere um link, acrescente o atributo
target e seu valor com o nome “lista”.
24
9.4. Iframes.
A Inline Frame, ou "iFrame", é uma tag que cria um frame dentro da página HTML, em vez
de "dividir" a página em duas ou mais partes. É muito utilizado para exibir um conteúdo
específico dentro de uma página como um texto ou arquivo multimídia.
Exemplo:
<IFRAME align="center" frame name="nome" src="endereco.html" width="(largura do
quadro)" height="(altura do quadro)" scrolling="(presença ou não de barra de rolamento no
quadro)" frameborder="(presença ou não de borda no quadro)"></IFRAME>
Crie uma nova página chamada “iframe.html” e teste um iframe dentro dele com
outra página que você já criou.
10. Formulários
Formulários são de grande utilidade para a Web, pois permitem a interatividade entre
o usuário possibilitando cadastros, pesquisas, envio de comentários, etc. Um formulário
HTML é simplesmente uma página Web que contém, além de texto, elementos especiais
chamados controles, representados por caixas de checagem, botões, caixas de seleção,
campos de textos e outros marcadores. Então um formulário funciona da seguinte maneira:
os usuários preenchem os campos do formulário, envia-os, em seguida, é processado para
um banco de dados que armazena as informações. Essas informações por sua vez têm uma
função específica do site, como por exemplo, servir para vendas na internet. Formulários
também podem ser gerados para a navegação entre páginas e Sites na Web. O marcador
usado é o <FORM></FORM>.
Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de Formulário</TITLE>
</HEAD>
<BODY>
<FORM> Aqui irão entrar os campos de formulário </FORM>
</BODY>
</HTML>
name: Especifica o nome do formulário. Útil em casos de validação dos campos, por
exemplo, quando se utiliza uma linguagem de scripts como JavaScript.
method: Método que define como os dados serão transmitidos para o programa que irá
processá-los. Devem ter valores GET ou POST, sendo que a diferença entre estes dois
valores está no modo como os dados são empacotados. Normalmente o programa que será
utilizado para processar o formulário já especifica o valor para o atributo method.
action: Indica o endereço do programa que receberá os dados do formulário (tratador do
formulário).
25
Exemplo:
<form name= “maladireta” method=”post” action=”maladireta.php”></form>
Para que você possa indicar qual objeto será mostrado no seu formulário (campo
texto, checkbox, etc) deve-se utilizar a tag <input/> que não é necessário ser fechada.
Exemplo:
<form method="POST" action="http://www.xyz.com.br/cgi-bin/script">
<p>
<input type="text" name="T1" size="20"/> <!-- caixa de texto -->
<input type="submit" value="Submit" name="B1"/> <!-- botao de envio -->
<input type="reset" value="Reset" name="B2"/> <!-- botao de reset -->
</p>
</form>
Para que possamos entender um pouco mais sobre a utilização de cada tipo objeto
que será utilizado, vou explicar alguns deles.
:: Caixa de texto ::
O valor text no atributo type de um <input/> indica que o campo será de texto, ou
seja, um campo onde o usuário poderá entrar com dados.
Exemplo:
<form action="teste.php">
<p>Entre com seu nome:<input type="text" name="nome"/></p>
</form>
O atributo value, neste caso, pode ser usado para determinar um valor prévio para o
campo, que será exibido quando a página for carregada.
Exemplo:
<form action="teste.php">
<p>Entre com seu nome:<input type="text" name="nome" value="Jezmael"/></p>
</form>
:: Caixa de Checagem ::
O valor "checkbox" no atributo TYPE define uma caixa de checagem. Na prática, as
caixas de checagem aparecem em grupos e os usuários podem escolher uma ou mais
opções.
name: define o nome da caixa de checagem. No caso de várias caixas, cada uma deve
ter um nome diferenciado.
value: contém o valor do campo, que será passado ao programa interpretador do
formulário.
27
checked: atributo opcional que pode ser utilizado quando se deseja que a opção já
apareça selecionada na página.
Exemplo:
<form action="teste.php">
<p>Escolha a área de interesse</p>
<input type="checkbox" name="caixa1" value="linux"/> cursos de linux<br/>
<input type="checkbox" name="caixa2" value="html"/> cursos de html<br/>
<input type="checkbox" name="caixa3" value="programming"> cursos de
programaç&aatilde;o
</form>
:: Botão de Opção ::
O valor “radio” no atributo TYPE define um botão de escolha. Na prática os botões de
escolha aparecem em grupos e podem permitir que apenas uma opção seja escolhida
dentre as existentes (exclusão mútua).
name: define o nome do botão de opção. No caso de botões de opção com exclusão
mútua, cada botão do grupo deverá utilizar o mesmo nome.
value: contém o valor do campo, que será passado ao programa interpretador do
formulário.
checked: atributo opcional que pode ser usado quando se deseja que a opção já
apareça selecionada na página.
:: Botão LIMPA/CANCELA ::
O valor "reset" no atributo TYPE define um botão que limpa todos os campos,
devolvendo os mesmos valores de quando a página foi carregada. No atributo VALUE, pode-
se definir o que será escrito no botão. Caso nenhum valor seja definido, aparecerá somente
RESET.
Exemplo:
<form action="teste.php">
<p>entre com seu nome: <input type="text"/></p>
<input type="reset" value="apagar"/>
</form>
28
:: Botão SUBMIT ::
O valor "submit" no atributo TYPE define um botão que aciona o envio das informações
preenchidas no formulário ao programa interpretador. O atributo VALUE define o que será
escrito no botão. Caso nenhum valor seja definido, aparecerá somente SUBMIT.
Exemplo:
<form action="teste.php">
<p>entre com seu nome: <input type="text"/></p>
<input type="submit" value="Enviar"/>
</form>
Exemplo:
<form action="teste.php">
<p>entre com seu nome: <input type="text"/></p>
<input type="image" src="botaoenvia.gif" alt="Clique para enviar o Formulário"/>
</form>
:: Caixa de Seleção::
O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo
usuário. As opções são criadas através do TAG <option></option> que deve estar dentro
da tag <select></select>. Os atributos que o <select> utiliza são:
Name; indica o nome.
Size; o número de opção que serão exibidos.
Multiple; define que o usuário pode fazer múltiplas escolhas.
Exemplo:
<select name="nome" size="2">
<option value="valor" selected="selected">texto a aparecer</option>
29
<option value="valor2">texto a aparecer2</option>
</select>
Já dentro da tag <option> você pode utilizar o atributo select="select" que indica qual
deve inicialmente aparecer selecionado.
Nota: Não iremos nos aprofundar como validar os formulários nessa apostila. Espero
que isso aconteça em outro curso que desejamos ensinar, Programação em PHP. Quem
sabe voltaremos com o estudo de CSS.
Dicas: Espero que tenham gostado do conteúdo e que busquem ainda mais se
informar sobre novas ferramentas mais avançadas. Busquem descobrir sobre a web 2.0,
leiam bastantes tutoriais na internet sobre HTML e sobre como melhorar sua página. Até a
próxima!
REFERÊNCIAS
Linguagem de Programação HTML, Fernanda Sampaio Cavalcante.
HTML, Marcos Rogério Fernandes. 2008
HTML e introdução ao PHP, João Paulo de Oliveira. 2005
HTML - Curso Completo, Efeitos Visuais. Página: http://www.efeitosvisuais.com/ acesso
em 2008
HTML 4 for Dummies. Ed. Tittel, Stephen Nelson James. Rio de Janeiro: Campus. 1998
30
Lista de Caracteres especiais – ISO-Latin-1
31
32
33
34
35
Exemplo de Lista de Cores em RBG
36