RCOM 11º Ano - HTML

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.


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


 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).


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

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

Estrutura Básica de uma página
<html>

<head>
.......
</head>

<body>
.......
</body>

</html>

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.

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>

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>

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>

Formulários (Forms)

 São ecrãs pré-formatados.

 Servem para a interatividade com o utilizador, com
o fim de recolher dados.

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.

Formulários
 Para iniciar qualquer formulário a tag html é
<form> … </form>

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…

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>

SELECT
 Tag <select> …..</select>
 Exemplo
<select name=“sel_1”>
<option selected value=“item1”>Sexo</option>
<option value=“item2”>Masculino</option>
<option value=“item3”>Feminino</option>
</select>
<select multiple name=“sel_1”>

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.

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

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

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

INPUT
 type=“reset”
 Defineum botão que coloca todo o formulário nos seus
valores originais
 Exemplo
<input type=“reset” value=“LIMPAR”/>

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

Fieldset

 Tag <fieldset>…</fieldset>
 Exemplo:
<fieldset>
<legend>Sexo:</legend>
Masculino: <input type="radio" name="rd" value="M">
Feminino: <input type="radio" name="rd" value="F">
</fieldset>

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>

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

ACTION

 Este modo implica que os dados serão enviados
para um determinado URL, que os receberá e fará
algo com eles.

POST

 Ideal para transferir grandes quantidades de
dados. Esses dados fazem parte do corpo da
mensagem enviada ao servidor.

GET

 Suporta somente 128 caracteres e os dados fazem
parte da URL associado à consulta enviada para o
servidor.

 (É pouco seguro!)

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

RCOM 11º Ano - HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à RCOM 11º Ano - HTML

Similaire à RCOM 11º Ano - HTML (20)

Dernier

Dernier (20)

RCOM 11º Ano - HTML