Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Básico: Multimídia 1 (aula 3)

1,314 views

Published on

Curso de Extensão em Desenvolvimento Web - Módulo I: HTML5.

Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

  • Be the first to comment

HTML5 Básico: Multimídia 1 (aula 3)

  1. 1. Aula 3:
  2. 2. prof. Gustavo Zimmermann | contato@swag.ag iframes
  3. 3. prof. Gustavo Zimmermann | contato@swag.ag Atributos <iframe> </iframe> align=“center” frameborder=“3” longdesc=“texto.txt” marginheight=“0” marginwidth=“0” scrolling=“no” HTML5 – Multimídia 1 iframes CSS
  4. 4. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 iframes Atributos <iframe> </iframe> name + target Propriedades iframe: http://www.w3schools.com/tags/tag_iframe.asp
  5. 5. prof. Gustavo Zimmermann | contato@swag.ag Imagens
  6. 6. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web JPG, GIF ou PNG?
  7. 7. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens JPG:
  8. 8. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens GIF:
  9. 9. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens PNG:
  10. 10. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web PhotoShop:
  11. 11. prof. Gustavo Zimmermann | contato@swag.ag tooltips: alt e title <img src=“imagem.jpg” alt=“Texto Alternativo” title=“Texto de Título” /> HTML5 – Multimídia 1 Imagens Atributos <img />
  12. 12. prof. Gustavo Zimmermann | contato@swag.ag alt HTML5 – Multimídia 1 Imagens Atributos <img />
  13. 13. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> title HTML5 – Multimídia 1 Imagens
  14. 14. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> width e height HTML5 – Multimídia 1 Imagens
  15. 15. prof. Gustavo Zimmermann | contato@swag.ag width e height HTML5 – Multimídia 1 Imagens Atributos <img />
  16. 16. prof. Gustavo Zimmermann | contato@swag.ag width e height » HTML4 vs. HTML5 HTML5 – Multimídia 1 Imagens Atributos <img />
  17. 17. prof. Gustavo Zimmermann | contato@swag.ag hspace=“20” vspace=“5” align=“” longdesc=“texto.txt” name=“pinguim” border=“0” HTML5 – Multimídia 1 Imagens Atributos <img /> CSS
  18. 18. prof. Gustavo Zimmermann | contato@swag.ag longdesc=“texto.txt” <figure><figcaption><img /></figcaption></figure> HTML5 – Multimídia 1 Imagens figure Atributos <img />
  19. 19. prof. Gustavo Zimmermann | contato@swag.ag <figure><figcaption><img /></figcaption></figure> HTML5 – Multimídia 1 Imagens <figure> <img src=“imagem.jpg” /> <figcaption> <h1>Novas TAGs para Imagem</h1> <p> O HTML5 trás grandes novidades para a TAG de Execução <b><i>IMG</i></b> </p> </figcaption> </figure> Atributos <img />
  20. 20. prof. Gustavo Zimmermann | contato@swag.ag Mapa de Imagens
  21. 21. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map>
  22. 22. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <img src=“imagem.jpg” usemap=“#meumapa” /> <map name=“meumapa”></map> <map></map>
  23. 23. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area /> <area /> shape • rect • circle • poly
  24. 24. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“rect” coords=“x1,y1,x2,y2”/> (x1,y1) (x2,y2) rect
  25. 25. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (25,2) (52,150)
  26. 26. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area href=“#” /> <area shape=“rect” coords=“25,2,52,150” href=“teclado.html”/>
  27. 27. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area target=“???” /> <img src=“teclado.jpg” usemap=“#meuteclado” /> <map name=“meuteclado ”> <area shape=“rect” coords=“25,2,52,150” href=“teclado.html#tecla_do” target=“janelinha” /> </map> <iframe src=“tecla_do.html” name=“janelinha”></iframe>
  28. 28. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“circle” coords=“x,y,r”/> circlePonto Central (x,y) Raio (r)
  29. 29. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (206,250) 105
  30. 30. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area shape=“poly” coords=“x1,y1,x2,y2,...”/> poly (x1,y1) (x3,y3) (x2,y2)
  31. 31. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (524,111) (840, 180) (1140, 107) (1105, 420) (1340, 655) (955, 695) (760, 970) (634, 655) (296, 577) (595, 405)
  32. 32. prof. Gustavo Zimmermann | contato@swag.ag Revisão Ortográfica e Gramatical
  33. 33. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Revisão Ortográfica e Gramatical spellcheck spellcheck spellcheck="true" spellcheck="false"
  34. 34. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Revisão Ortográfica e Gramatical • • <textarea> • contenteditable="true spellcheck <p contenteditable="true" spellcheck="true"> Este é um parágrafo! </p>
  35. 35. prof. Gustavo Zimmermann | contato@swag.ag <fim />

×