HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

Tamanho: px

Começar a partir da página:

Download "HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;"

João Vítor de Figueiredo Ferretti
8 Há anos
Visualizações:

1 HTML Introdução

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, HTML HTML HTML Frames; Folhas de estilo (css); Scripts; HTML HTML

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>

12 HTML Formulários

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>

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

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

21 Resumo

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

24 INPUT type= reset Define um 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 />

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

27 Resumo

28 INPUT HTML 5.0

29 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 ou Mais Sexo: Dois botões de opção (radio), tendo um botão o valor Masculino e outro o valor Feminino. Texto - o utilizador pode digitar no máximo 80 caracteres. Observações: TextArea com sete linhas e 40 colunas.

30 EXERCICIO 2 (exercicio2_form.html) Reproduza o formulário indicado ao lado:

Documentos relacionados

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores