Curso de HTML 4.01 e Introdução ao XHTML 1.0
195 pág.

Curso de HTML 4.01 e Introdução ao XHTML 1.0


DisciplinaHtml143 materiais1.079 seguidores
Pré-visualização41 páginas
87 
número ilimitado de caracteres) 
<label> Define um nome para um elemento 
<fieldset> Agrupa elementos num formulário 
<legend> Define uma legenda para um grupo de elementos do formulário 
<select> Define uma lista com várias opções selecionáveis 
<optgroup> Define um grupo de opções 
<option> Insere mais uma opção numa lista com várias opções selecionáveis 
<button> Define um botão que pode ser pressionado 
 
Exemplos de Aplicação 
 
Como criar campos para inserção de texto ou dados 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form action=&quot;processar.php&quot;> 
 Escreva o seu primeiro nome: <input name=&quot;firstname&quot;><br> 
 Escreva o seu último o nome: <input name=&quot;lastname&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
</body> 
</html> 
 
 
 
Campos para senhas (&quot;password&quot;) 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form action=&quot;processar.php&quot;> 
 Escreva o seu nome de usuário: <input name=&quot;user&quot;><br> 
 Escreva a sua senha (segredo): <input type=&quot;password&quot; value=&quot;&quot; 
 name=&quot;password&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 
 <p><b>Nota:</b> Quando se digita uma senha o browser mostra 
 asteriscos ou bolinhas em vez dos caracteres que introduz. Deste 
 modo se alguém estiver espionando por cima do seu ombro enquanto 
 escreve não vai conseguir ler a sua senha.</p> 
</body> 
</html> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 88 
 
 
Caixas de validação (&quot;checkboxes&quot;) 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form action=&quot;processar.php&quot;> 
 Eu tenho uma bicicleta: <input type=&quot;checkbox&quot; value=&quot;ON&quot; 
 name=&quot;bicicleta&quot;><br> 
 Eu tenho patins em linha: <input type=&quot;checkbox&quot; value=&quot;ON&quot; 
name=&quot;patins&quot;> 
 <br> 
 <input type=&quot;submit&quot;> 
 </form> 
</body> 
</html> 
 
 
 
&quot;Radiobuttons&quot; (grupos de botões em que apenas um pode estar ativo) 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form action=&quot;processar.php&quot;> 
 Masculino: <input type=&quot;radio&quot; checked value=&quot;macho&quot; name=&quot;Sexo&quot;><br> 
 Feminino: <input type=&quot;radio&quot; value=&quot;fêmea&quot; name=&quot;Sexo&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 
 <p><b>Nota:</b> Quando o usuário clica sobre um &quot;radiobutton&quot; 
 ele passa a ser a sua escolha (passa ao estado &quot;checked&quot;) e os 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 89 
 restantes &quot;radiobuttons&quot; pertencentes ao mesmo grupo passam ao 
 estado &quot;unchecked&quot;.</p> 
</body> 
</html> 
 
 
 
Lista com vários itens para selecionar 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h3>Times</h3> 
 
 <form action=&quot;processar.php&quot;> 
 <select name=&quot;clubes&quot;> 
 <option value=&quot;Benfica&quot; selected=&quot;selected&quot;>Benfica</option> 
 <option value=&quot;FCP&quot;>F.C.P</option> 
 <option value=&quot;Boavista&quot;>Boavista</option> 
 <option value=&quot;Sporting&quot;>Sporting</option> 
 </select><br> 
 <input type=&quot;submit&quot;> 
 </form> 
</body> 
</html> 
 
 
 
Lista com vários itens selecionáveis, mas com um valor pré-selecionado 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 90 
 <h3>Times</h3> 
 
 <form action=&quot;processar.php&quot;> 
 <select name=&quot;clubes&quot;> 
 <option value=&quot;Benfica&quot; selected=&quot;selected&quot;>Benfica</option> 
 <option value=&quot;FCP&quot;>F.C.P</option> 
 <option value=&quot;Boavista&quot; selected>Boavista</option> 
 <option value=&quot;Sporting&quot;>Sporting</option> 
 </select><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 Repare que aqui temos um item pré-selecionado de forma explícita. 
</body> 
</html> 
 
 
 
 
 
 
Como criar um botão 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form action=&quot;processar.php&quot;> 
 <input type=&quot;button&quot; value=&quot;Carregue Aqui!&quot;> 
 </form> 
</body> 
</html> 
 
 
 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 91 
Formulário com um campo para inserir dados e um botão para submeter 
 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form name=&quot;input&quot; action=&quot;processar.php&quot; method=&quot;get&quot;> 
 Escreva o seu primeiro nome: <input value=&quot;Robin&quot; 
 name=&quot;PrimeiroNome&quot;><br> 
 Escreva o seu último o nome: <input value=&quot;dos Bosques&quot; 
 name=&quot;UltimoNome&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 
 <p>Se clicar sobre o botão &quot;Submeter&quot; os dados do formulário serão enviados 
 para a página &quot;processar.php&quot;.</p> 
</body> 
</html> 
 
 
 
 
 
 
Formulário com caixas de validação e um botão para submeter 
 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form name=&quot;input&quot; action=&quot;processar.php&quot; method=&quot;get&quot;> 
 Eu tenho uma bicicleta: <input type=&quot;checkbox&quot; checked value=&quot;ON&quot; 
 name=&quot;Bike&quot;><br> 
 Eu tenho patins em linha: <input type=&quot;checkbox&quot; value=&quot;ON&quot; 
 name=&quot;Patins&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 
 <p>Se clicar sobre o botão &quot;Submeter&quot; os dados do formulário serão enviados 
 para a página &quot;processar.php&quot;.</p> 
</body> 
</html> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 92 
 
 
Formulário com &quot;radiobuttons&quot; e um botão para submeter 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <form name=&quot;input&quot; action=&quot;processar.php&quot; method=&quot;get&quot;> 
 Masculino: <input type=&quot;radio&quot; checked value=&quot;Masculino&quot; 
name=&quot;Sexo&quot;><br> 
 Feminino: <input type=&quot;radio&quot; value=&quot;Feminino&quot; name=&quot;Sexo&quot;><br> 
 <input type=&quot;submit&quot;> 
 </form> 
 
 <p>Se clicar sobre o botão &quot;Submeter&quot; os dados do formulário serão enviados 
 para a página &quot;processar.php&quot;.</p> 
</body> 
</html> 
 
 
 
14. Porquê usar HTML 4? 
 
14.1 O HTML 3.2 criava muitos problemas! 
 
O criador do HTML, Tim Berners Lee, nunca teve qualquer intenção de criar 
elementos cuja única finalidade era a formatação do texto e das páginas. Os 
elementos que concebeu destinavam-se apenas a apresentar informação e não 
serviam para criar arranjos gráficos complexos. Os elementos criados inicialmente 
serviam apenas para fazer coisas como: 
 
<p>Isto é um parágrafo</p> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 93 
ou 
 
<ul><li>Isto é um item numa lista não ordenada</li></ul>. 
 
Quando foram introduzidos elementos como <font> e atributos de cor na 
especificação do HTML 3.2, começou um pesadelo para os criadores de HTML. Ao 
desenvolverem websites de grandes dimensões, as formatações tinham de ser 
repetidas na totalidade em todos os lugares em que eram necessárias e em todas as 
páginas. O resultado disto foi a complicação desmesurada das tarefas de 
melhoramento e atualização das páginas, que era um verdadeiro pesadelo porque 
gerava muitos erros e dava muito trabalho. 
 
14.2 O que é que o HTML 4 veio resolver? 
 
Com o HTML 4 iniciou-se uma nova era em que a formatação pode ser em 
grande parte separada do conteúdo do documento e guardada em folhas de estilos. 
 
Ao separarmos a formatação da estrutura dos conteúdos conseguimos obter 
um grau de flexibilidade mais