Curso de Extensão em Desenvolvimento Web - Módulo I: HTML5. Curso de Sistemas de Informação da ULBRA Cachoeira do Sul

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 />