HTMLIntrodução
Introdução ao HTML   HTML (Hyper Text Markup Language)   É a “linguagem” com que se escrevem as    páginas web;   É uma...
Introdução ao HTML   Um documento hipertexto não se compõe apenas    de texto,   Pode conter imagens, som, vídeos, etc.,...
Introdução ao HTML   Os documentos HTML devem ter a extensão html ou    htm, para que possam ser visualizados nos browser...
Introdução ao HTML   Os browsers encarregam-se de interpretar o código    HTML    dos    documentos,    e   de     mostra...
EVOLUÇÃO DO HTML Versão       Ano         DescriçãoHTML 2.0 Novembro, 1995        --HTML 3.0                        --HTML...
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...
Cabeçalho da página<head>   O cabeçalho da página utiliza-se para agrupar informação sobre ela.   É formado pelas etique...
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ági...
Corpo do documento    <body>   O corpo do documento contém a informação própia do documento, isto é       o texto da pág...
HTMLFormulários
Formulários (Forms)   São ecrãs pré-formatados.   Servem para a interatividade com o utilizador, com    o fim de recolhe...
Formulários (Forms)   A criação de um formulário envolve duas etapas     Etapa   1       Programação     dentro do arqu...
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    ...
TEXT AREA   Tag <textarea> …..</textarea>   Exemplo:    <textarea name=“txta1” rows=“5” cols=“40”>      Esta é uma área ...
SELECT   Tag <select> …..</select>   Exemplo    <select name=“sel_1”>      <option selected value=“item1”>Sexo</option> ...
INPUT   Tag <input> …..</input>   Exemplo    <input type=“text” name=“cp1” size=“20”      maxlength=“30”/>    ….    size...
INPUT type: Este atributo define o tipo de elemento de INPUT.    Pode assumir os valores:        text        password  ...
Resumo…
INPUT   type=“checkbox”       Transforma o elemento input numa caixa de selecção, que       pode ser, ou não, selecciona...
INPUT   type=“radio”       Dogrupo de botões radio que estiver definido, só um deles       pode estar seleccionado a cad...
INPUT   type=“reset”     Defineum botão que coloca todo o formulário nos seus     valores originais   Exemplo      <inp...
INPUT   type=“submit”     Este é o botão que envia os dados do formulário para      o servidor, para processamento.   E...
Fieldset   Tag <fieldset>…</fieldset>     Exemplo:      <fieldset>      <legend>Sexo:</legend>      Masculino: <input ty...
Resumo…
INPUT – HTML 5.0
Formulários   Para definir o que fazer com os dados que vão ser    enviados pelo formulário é necessário utilizar um    d...
METHOD   Este modo implica que a informação recolhida no    ecrã pré-formatado irá ser enviada para um    programa CGI (s...
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 ...
GET   Suporta somente 128 caracteres e os dados fazem    parte da URL associado à consulta enviada para o    servidor.  ...
   De uma forma geral, aconselha-se a que os    formulários sejam desenhados recorrendo ao modo    “Method” e dentro dest...
Upcoming SlideShare
Loading in …5
×

RCOM 11º Ano - HTML

675 views

Published on

Última atualização: 15/04/2012

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
675
On SlideShare
0
From Embeds
0
Number of Embeds
255
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

RCOM 11º Ano - HTML

  1. 1. HTMLIntrodução
  2. 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. 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. 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. 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. 6. EVOLUÇÃO DO HTML Versão Ano DescriçãoHTML 2.0 Novembro, 1995 --HTML 3.0 --HTML 3.2 1997 -- •Frames; • Folhas deHTML 4.0 1997 estilo (css); • Scripts;HTML 4.01 2001 --HTML 5.0 2011 --
  7. 7. Estrutura Básica de uma página <html> <head> ....... </head> <body> ....... </body> </html>
  8. 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. 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. 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. 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. 12. HTMLFormulários
  13. 13. Formulários (Forms) São ecrãs pré-formatados. Servem para a interatividade com o utilizador, com o fim de recolher dados.
  14. 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. 15. Formulários Para iniciar qualquer formulário a tag html é <form> … </form>
  16. 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. 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. 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. 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. 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. 21. Resumo…
  22. 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. 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. 24. INPUT type=“reset”  Defineum botão que coloca todo o formulário nos seus valores originais Exemplo <input type=“reset” value=“LIMPAR”/>
  25. 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. 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. 27. Resumo…
  28. 28. INPUT – HTML 5.0
  29. 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. 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. 31. ACTION Este modo implica que os dados serão enviados para um determinado URL, que os receberá e fará algo com eles.
  32. 32. POST Ideal para transferir grandes quantidades de dados. Esses dados fazem parte do corpo da mensagem enviada ao servidor.
  33. 33. GET Suporta somente 128 caracteres e os dados fazem parte da URL associado à consulta enviada para o servidor. (É pouco seguro!)
  34. 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”>

×