Embed Size (px)
DESCRIPTION
Curso de Extensão em Desenvolvimento Web - Módulo I: HTML5. Curso de Sistemas de Informação da ULBRA Cachoeira do Sul
Citation preview
Aula 3:
prof. Gustavo Zimmermann | [email protected]
Atributos <iframe> </iframe>
align=“center”
frameborder=“3”
longdesc=“texto.txt”
marginheight=“0”
marginwidth=“0”
scrolling=“no”
HTML5 – Multimídia 1
iframes
CSS
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
iframes
Atributos <iframe> </iframe>
name + target
Propriedades iframe: http://www.w3schools.com/tags/tag_iframe.asp
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Imagens
Formatos para Web
JPG, GIF ou PNG?
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Imagens
Formatos para Web
PhotoShop:
prof. Gustavo Zimmermann | [email protected]
tooltips: alt e title
<img src=“imagem.jpg” alt=“Texto
Alternativo” title=“Texto de Título” />
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | [email protected]
Atributos <img />
width e height
HTML5 – Multimídia 1
Imagens
prof. Gustavo Zimmermann | [email protected]
width e height
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | [email protected]
width e height » HTML4 vs. HTML5
HTML5 – Multimídia 1
Imagens
Atributos <img />
prof. Gustavo Zimmermann | [email protected]
hspace=“20”
vspace=“5”
align=“”
longdesc=“texto.txt”
name=“pinguim”
border=“0”
HTML5 – Multimídia 1
Imagens
Atributos <img />
CSS
prof. Gustavo Zimmermann | [email protected]
longdesc=“texto.txt”
<figure><figcaption><img /></figcaption></figure>
HTML5 – Multimídia 1
Imagens
figure
Atributos <img />
prof. Gustavo Zimmermann | [email protected]
<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 />
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<img src=“imagem.jpg” usemap=“#meumapa” />
<map name=“meumapa”></map>
<map></map>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area /><area /> shape
• rect
• circle
• poly
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area shape=“rect” coords=“x1,y1,x2,y2”/>
(x1,y1)
(x2,y2)
rect
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area href=“#” /><area shape=“rect” coords=“25,2,52,150”
href=“teclado.html”/>
prof. Gustavo Zimmermann | [email protected]
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>
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Mapas de Imagens
Definições <map></map>
<area shape=“circle” coords=“x,y,r”/>
circlePonto Central (x,y)
Raio (r)
prof. Gustavo Zimmermann | [email protected]
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)
prof. Gustavo Zimmermann | [email protected]
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)
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Revisão Ortográfica e Gramatical
spellcheck
spellcheck spellcheck="true"
spellcheck="false"
prof. Gustavo Zimmermann | [email protected]
HTML5 – Multimídia 1
Revisão Ortográfica e Gramatical
•
• <textarea>
• contenteditable="true
spellcheck
<p contenteditable="true" spellcheck="true">
Este é um parágrafo!
</p>
