HTML5 Básico: Multimídia 1 (aula 3)
1 gostou1,758 visualizações
O documento aborda atributos e usos de iframes e imagens no HTML5, discutindo aspectos como formatação, propriedades e novas tags. Além disso, detalha a criação de mapas de imagens com definições e exemplos de formas como retângulos, círculos e polígonos. Também inclui informações sobre revisão ortográfica utilizando a propriedade spellcheck.
HTML5 Básico: Multimídia 1 (aula 3)
- 1. Aula 3:
- 2. prof. Gustavo Zimmermann | contato@swag.ag iframes
- 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. 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. prof. Gustavo Zimmermann | contato@swag.ag Imagens
- 6. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web JPG, GIF ou PNG?
- 7. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens JPG:
- 8. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens GIF:
- 9. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens PNG:
- 10. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Imagens Formatos para Web PhotoShop:
- 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. prof. Gustavo Zimmermann | contato@swag.ag alt HTML5 – Multimídia 1 Imagens Atributos <img />
- 13. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> title HTML5 – Multimídia 1 Imagens
- 14. prof. Gustavo Zimmermann | contato@swag.ag Atributos <img /> width e height HTML5 – Multimídia 1 Imagens
- 15. prof. Gustavo Zimmermann | contato@swag.ag width e height HTML5 – Multimídia 1 Imagens Atributos <img />
- 16. prof. Gustavo Zimmermann | contato@swag.ag width e height » HTML4 vs. HTML5 HTML5 – Multimídia 1 Imagens Atributos <img />
- 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. prof. Gustavo Zimmermann | contato@swag.ag longdesc=“texto.txt” <figure><figcaption><img /></figcaption></figure> HTML5 – Multimídia 1 Imagens figure Atributos <img />
- 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. prof. Gustavo Zimmermann | contato@swag.ag Mapa de Imagens
- 21. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map>
- 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. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens Definições <map></map> <area /> <area /> shape • rect • circle • poly
- 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. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (25,2) (52,150)
- 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. 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. 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. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Mapas de Imagens (206,250) 105
- 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. 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. prof. Gustavo Zimmermann | contato@swag.ag Revisão Ortográfica e Gramatical
- 33. prof. Gustavo Zimmermann | contato@swag.ag HTML5 – Multimídia 1 Revisão Ortográfica e Gramatical spellcheck spellcheck spellcheck="true" spellcheck="false"
- 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. prof. Gustavo Zimmermann | contato@swag.ag <fim />