HTML Introdução
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.
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.
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).
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.
EVOLUÇÃO DO HTML Versão Ano Descrição HTML 2.0 Novembro, 1995 -- HTML 3.0 -- HTML 3.2 1997 -- HTML 4.0 1997 Frames; Folhas de 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>
HTML Formulários
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
Resumo
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 Do grupo 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 Define um 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>
Resumo
INPUT HTML 5.0
EXERCICIO 1 (exercicio1_form.html) Construa um formulário HTML com os seguintes campos: Nome: Texto o utilizador pode digitar no máximo 30 caracteres. Idade: Caixa de seleção com os itens: Entre 0 e 18 Entre 19 e 25 Entre 26 e 35 36 ou Mais Sexo: Dois botões de opção (radio), tendo um botão o valor Masculino e outro o valor Feminino. E-Mail: Texto - o utilizador pode digitar no máximo 80 caracteres. Observações: TextArea com sete linhas e 40 colunas.
EXERCICIO 2 (exercicio2_form.html) Reproduza o formulário indicado ao lado: