Este documento fornece uma introdução aos principais conceitos de HTML, incluindo: (1) HTML é a linguagem usada para escrever páginas da web, permitindo estruturar texto com etiquetas; (2) Páginas da web podem conter não só texto, mas também imagens, vídeos e outros conteúdos multimídia; (3) Formulários HTML permitem coletar dados do usuário através de campos de texto, caixas de seleção e botões.
2. Introdução ao HTML
HTML (Hyper Text Markup Language)
É a “linguagem” com que se escrevem as
páginas web;
É uma “linguagem” de hipertexto;
Permite escrever texto de forma estruturada, que
está composto por etiquetas, que marcam o
início e o fim de cada elemento do documento.
3. Introdução ao HTML
Um documento hipertexto não se compõe apenas
de texto,
Pode conter imagens, som, vídeos, etc.,
Pode considerar-se como um documento multimedia.
4. Introdução ao HTML
Os documentos HTML devem ter a extensão html ou
htm, para que possam ser visualizados nos browsers
(programas que permitem visualizar as páginas
web).
5. Introdução ao HTML
Os browsers encarregam-se de interpretar o código
HTML dos documentos, e de mostrar aos
utilizadores as páginas web resultantes da
interpretação desse código.
6. EVOLUÇÃO DO HTML
Versão Ano Descrição
HTML 2.0 Novembro, 1995 --
HTML 3.0 --
HTML 3.2 1997 --
•Frames;
• Folhas de
HTML 4.0 1997
estilo (css);
• Scripts;
HTML 4.01 2001 --
HTML 5.0 2011 --
7. Estrutura Básica de uma página
<html>
<head>
.......
</head>
<body>
.......
</body>
</html>
8. Identificador do tipo de documento
<html>
Todas as páginas web escritas em HTML têm que ter
a extensão html o htm.
Ao mesmo tempo, têm que ter as etiquetas <html> e
</html>.
Entre as etiquetas <html> e </html> está
compreendido o resto do código HTML da página.
9. Cabeçalho da página
<head>
O cabeçalho da página utiliza-se para agrupar informação sobre ela.
É formado pelas etiquetas <head> e </head>.
A etiqueta <head> coloca-se mesmo debaixo da etiqueta <html>.
Por exemplo:
<html>
<head>
..............
</head>
..............
</html>
Entre as etiquetas <head> e </head>, as etiquetas que podemos encontrar e as que mais se
utilizam, são:
<link> , <style> , <script>
<meta> e <title>
10. Título da Página
<title>
O título da página é o que aparece na parte superior da janela do browser,
quando a página é carregada.
Para colocar um título numa página é necessário escrever o texto desejado
entre as etiquetas <title> e </title>.
Estas etiquetas devem de estar dentro do cabeçalho, isto é entre as etiquetas
<head> e </head>.
Por exemplo:
<html>
<head>
<title>Módulo 4 - HTML</title>
</head>
...
</html>
11. Corpo do documento
<body>
O corpo do documento contém a informação própia do documento, isto é
o texto da página,
as imagens,
os formulários, etc.
Todos estes elementos têm que se encontrar entre as etiquetas <body> e
</body
Por exemplo:
<html>
<head>
<title> Módulo 4 – HTML</title>
</head>
<body>
.......
</body>
</html>
13. Formulários (Forms)
São ecrãs pré-formatados.
Servem para a interatividade com o utilizador, com
o fim de recolher dados.
14. Formulários (Forms)
A criação de um formulário envolve duas etapas
Etapa 1
Programação dentro do arquivo html.
Etapa 2
Criação de um script para processar os dados introduzidos
no formulário.
15. Formulários
Para iniciar qualquer formulário a tag html é
<form> … </form>
16. Elementos de um formulário
Campo de Texto – Text Area;
Campo onde o utilizador pode colocar múltiplas linhas
de texto.
Caixa de Selecção – Select;
Campo onde o utilizador pode selecionar um conjunto
de escolhas constituintes de uma lista.
Entrada de Dados – Input;
Campo on de o utilizdor pode escrever um única linha
de texto…
17. TEXT AREA
Tag <textarea> …..</textarea>
Exemplo:
<textarea name=“txta1” rows=“5” cols=“40”>
Esta é uma área de texto com um tamanho
correspondente a 5 linhas e 40 colunas….
</textarea>
19. INPUT
Tag <input> …..</input>
Exemplo
<input type=“text” name=“cp1” size=“20”
maxlength=“30”/>
….
size: tamanho vísivel do campo.
maxlength: número máximo de caracteres admissível no campo.
20. INPUT
type: Este atributo define o tipo de elemento de INPUT.
Pode assumir os valores:
text
password
É uma variante do caso anterior. A única diferença é que as
letras aparecem no campo de texto como asteriscos (*).
checkbox
radio
reset
submit
22. INPUT
type=“checkbox”
Transforma o elemento input numa caixa de selecção, que
pode ser, ou não, seleccionada pelo utilizador. Pode ser
escolhida mais do que uma alternativa.
Exemplo
CARRO
<input checked type=“checkbox” name=“veiculo” value=“car”/>
AUTOCARRO
<input type=“checkbox” name=“veiculo” value=“bus”/>
BARCO
<input type=“checkbox” name=“veiculo” value=“boat”/>
23. INPUT
type=“radio”
Dogrupo de botões radio que estiver definido, só um deles
pode estar seleccionado a cada momento.
Exemplo
SIM
<input type=“radio” name=“opção” value=“s”/>
NÃO
<input checked type=“radio” name=“opção” value=“n”/>
24. INPUT
type=“reset”
Defineum botão que coloca todo o formulário nos seus
valores originais
Exemplo
<input type=“reset” value=“LIMPAR”/>
25. INPUT
type=“submit”
Este é o botão que envia os dados do formulário para
o servidor, para processamento.
Exemplo
<input type=“submit” value=“ENVIAR”/>
29. Formulários
Para definir o que fazer com os dados que vão ser
enviados pelo formulário é necessário utilizar um
dos seguintes modos:
Method
Action
Por exemplo:
<form method=“post” action=mailto:g.m@gmail.com>
30. METHOD
Este modo implica que a informação recolhida no
ecrã pré-formatado irá ser enviada para um
programa CGI (script) que vai ser executado no
servidor.
É possível escolher dois métodos distintos associados
a este modo:
POST
GET
31. ACTION
Este modo implica que os dados serão enviados
para um determinado URL, que os receberá e fará
algo com eles.
32. POST
Ideal para transferir grandes quantidades de
dados. Esses dados fazem parte do corpo da
mensagem enviada ao servidor.
33. GET
Suporta somente 128 caracteres e os dados fazem
parte da URL associado à consulta enviada para o
servidor.
(É pouco seguro!)
34. De uma forma geral, aconselha-se a que os
formulários sejam desenhados recorrendo ao modo
“Method” e dentro deste ao método “post”.
<form name=“formulário1” method=“post”>