Your SlideShare is downloading. ×
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
RCOM 11º Ano - HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

RCOM 11º Ano - HTML

418

Published on

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

Ú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
418
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTMLIntroduçã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çã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. 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. HTMLFormulá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”  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”/>
  • 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. 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”>

×