HTML5: Primeiros Contatos (visão geral)
Transferir como PPTX, PDF•1 gostou•356 visualizações
O documento fornece uma introdução abrangente aos principais elementos e conceitos da linguagem HTML5, incluindo estrutura básica de páginas, formatação de texto, links, imagens, vídeos, formulários e mais. Ele também lista várias ferramentas e referências úteis para aprender HTML5.
HTML5: Primeiros Contatos (visão geral)
- 1. HTML5 Tudo o que precisamos saber Fábio Nogueira de Lucena Instituto de Informática (UFG)
- 4. Qual o browser (navegador) mais usado? Siga o link… https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
- 7. Especificando o character set usado
- 8. Uma página com um link?
- 9. Título (h1)
- 10. Revisão de alguns itens básicos... ● <!DOCTYPE html> Toda página em HTML5 inicia-se com essa linha. ● <html>...</html> Sua página segue marcada pela tag html (início e fim) ● <html><head>...</head><body>...</body></html> As tags head e body representam sua página. ● Juntando tudo... <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>
- 11. Toda página HTML5 possui essa estrutura! <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>
- 12. Página HTML5 (estrutura) <!DOCTYPE html> <html> <head> <meta charset=”UTF-8”> <title>Aqui (aba)</title> </head> <body>O conteúdo vem aqui!</body> </html>
- 13. O que vem a seguir... <body> O que podemos por aqui? </body> Início, abertura Fim, fechamento
- 14. Lista simples (ul ⇒ unordered list)
- 15. Lista numerada (ol ⇒ ordered list)
- 16. Divisão (div ⇒ apenas “divide” ou identifica “parte”)
- 17. Divisão (div ⇒ unicamente identificada) h1 associado a uma classe identificada por principal.
- 18. Parágrafo (p ⇒ fluxo contínuo)
- 19. Parágrafos (p ⇒ separado por espaço em branco) Parágrafo selecionado está “afastado” do anterior e ocupa toda a extensão do browser.
- 20. Quebra de linha (br ⇒ separa linha da seguinte) Observe que o efeito não é “exatamente” aquele provavelmente desejado.
- 21. Pré-formatado (pre ⇒ formate como fornecido)
- 22. Espaço sem quebra de linha ( ) Observe que no segundo parágrafo não tem efeito os vários espaços inseridos (apenas um é considerado)
- 23. 6 níveis de heading em HTML5 (h1, h2, h3, h4, h5 e h6)
- 24. Listas com bullets configurados
- 25. Listas com bullets configurados
- 26. Citação (blockquote e cite)
- 27. Código em html (code)
- 28. Link para outra página (anchor)
- 29. Abrir página em outra aba (target) New (target=”_blank”) ⇒ nova aba é criada para o conteúdo do link. Here (target=”_self”) ⇒ mesma aba é empregada para o conteúdo.
- 30. Links para partes de uma página longa (a) <a name=”chave1”></a> <!-- valor para name deve ser único --> <a href=”#chave1”>Link</a> <!-- Link para posição onde está o name -->
- 31. Inserindo uma imagem (img)
- 32. Link em uma imagem (img)
- 33. Imagem não responsiva (img) Imagem de 9000x7000 pixels Apenas parte é visível (imagem inferior) conforme tamanho da janela
- 34. Notou o title acentuado!? Como corrigir? Indica coding empregado pelo arquivo HTML <meta charset=”UTF-8”>
- 35. Imagem responsiva (img) A imagem deve ocupar toda a largura da tela, e a altura será definida automaticamente, compatível com a largura, conforme ilustrado.
- 36. Imagem menor perde qualidade com aumento (img)
- 37. Tamanho máximo 25% da tela (img)
- 38. Imagem depende da largura (picture) Quando se aumenta/diminui o tamanho da janela, a imagem compatível com a restrição é utilizada
- 39. Áudio (audio)
- 40. Áudio (ofereça alternativa de formato) (audio) Se a primeira fonte (source) não tiver suporte pelo browser, então tente o seguinte. Nesse exemplo, o primeiro é um arquivo mp3, o seguinte um ogg.
- 41. Exibir vídeo com controles (video)
- 42. Exibir vídeo com controles (video)
- 43. Tabela (table)
- 44. Embutir em sua página conteúdo de outra (iframe)
- 45. Embutir uma página em outra (iframe) X-Frame-Options (header) pode bloquear uso de frame, iframe e object.
- 46. Embutir página depende de permissão
- 47. Cores...
- 51. Formulários (form) Entrada de dados vazia (sem elementos). Ação a ser executada quando submetido (action). Método http a ser empregado para submissão (method).
- 52. Entrada de texto (uma linha apenas) (text) Rótulo para campo (label). Ligado ao campo de identificador nome. Campo de texto (type=”text”) Identificação do que será enviado ao servidor (n).
- 53. Entrada de texto (uma linha apenas) (password) Segredo (type=”password”) Caracteres não são exibidos
- 54. Entrada de texto (credencial) Método get não recomendado nesse cenário (bookmark) http://127.0.0.1:62951/forms/f03.html?n=adsfasdf&s=aasdfasdfasdf#
- 55. Limpar campos (reset) Campos do formulário são atualizados com os valores padrão quando se clica no elemento cujo tipo é reset.
- 56. Endereço de email (email) Observe que ao tentar enviar um email inválido, o navegador fornece alguma orientação ao usuário.
- 57. Entrada de texto (mais de uma linha) (textarea) Texto contendo mais de uma linha (textarea)
- 58. Campo obrigatório (required=”required”) Atributo required indica se preenchimento é obrigatório para submissão.
- 59. Opções de preenchimento (datalist) Opções compatíveis com entrada (parcial) são exibidas, conforme ilustrado.
- 60. Marcar opções (checkbox) Observe que ambas as opções podem ser marcadas. Serão enviadas por meio do nome f.
- 61. Uma única opção (radio) Nesse caso, um único valor será enviado por meio do nome p. A saber: o valor 1, 2 ou 3.
- 62. Seleção (select) Uma única opção, nessa configuração, pode ser selecionada. É possível predefinir a quantidade de opções visíveis (size)
- 63. Botões (button) Estilo mais contemporâneo faz uso de button em vez de input para identificar ação.
- 64. Data (date) Observe que será enviada para o servidor a informação (data) fornecida associada ao nome dn.
- 65. Agrupar campos de formulário (fieldset) Campos podem ser agrupados para facilitar a compreensão para o usuário, inclusive a configuração da apresentação.
- 66. Comentários em HTML (<!-- comentário -->) Campos podem ser agrupados para facilitar a compreensão para o usuário, inclusive a configuração da apresentação.
- 67. Informações relevantes (<meta name=”description” ...>) Meta tags (são numerosas). As duas mais importantes: title e description. Busca no Google: de onde vem “Tudo sobre a vida e carreira do craque...”?
- 68. Meta tags O que é relevante? <meta name=”description” content=”Aqui!!! Sim, aqui!” /> https://goo.gl/1bvrW
- 70. Antes de HTML5, div era usado para “tudo”... ● nav ● section ● summary ● mark ● output ● menu ● progress ● article ● aside ● details ● figure ● figcatpion ● header ● footer Um contêiner geral (div). Agora temos um vocabulário mais rico, que permite especificar melhor o tipo de contêiner que se tem interesse. Permite especificar com mais precisão cada tipo de informação que é utilizada.
- 71. Fonte de referência para tags, atributos, ... https://www.w3schools.com/tags/
- 72. A referência mais “sólida”, contudo, é... https://www.w3.org/TR/html51/
- 73. Outros exemplos (verifique seu aprendizado) ● N01 ● N02 ● N03 ● N04 ● N05 ● N06 ● N07 ● N08 ● N13 ● N14 ● N15 ● N16 ● N17 ● N18 ● N19 ● N20