Aula 3:

prof. Gustavo Zimmermann | contato@swag.ag

iframes

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

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

prof. Gustavo Zimmermann | contato@swag.ag

Imagens

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Imagens

Formatos para Web

JPG, GIF ou PNG?

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Imagens

JPG:

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Imagens

GIF:

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Imagens

PNG:

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Imagens

Formatos para Web

PhotoShop:

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

prof. Gustavo Zimmermann | contato@swag.ag

alt

HTML5 – Multimídia 1

Imagens

Atributos <img />

prof. Gustavo Zimmermann | contato@swag.ag

Atributos <img />

title

HTML5 – Multimídia 1

Imagens

prof. Gustavo Zimmermann | contato@swag.ag

Atributos <img />

width e height

HTML5 – Multimídia 1

Imagens

prof. Gustavo Zimmermann | contato@swag.ag

width e height

HTML5 – Multimídia 1

Imagens

Atributos <img />

prof. Gustavo Zimmermann | contato@swag.ag

width e height » HTML4 vs. HTML5

HTML5 – Multimídia 1

Imagens

Atributos <img />

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

prof. Gustavo Zimmermann | contato@swag.ag

longdesc=“texto.txt”

<figure><figcaption><img /></figcaption></figure>

HTML5 – Multimídia 1

Imagens

figure

Atributos <img />

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

prof. Gustavo Zimmermann | contato@swag.ag

Mapa de Imagens

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Mapas de Imagens

Definições <map></map>

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>

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Mapas de Imagens

Definições <map></map>

<area /><area /> shape

• rect

• circle

• poly

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

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Mapas de Imagens

(25,2)

(52,150)

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

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>

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)

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Mapas de Imagens

(206,250)

105

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)

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)

prof. Gustavo Zimmermann | contato@swag.ag

Revisão Ortográfica e Gramatical

prof. Gustavo Zimmermann | contato@swag.ag

HTML5 – Multimídia 1

Revisão Ortográfica e Gramatical

spellcheck

spellcheck spellcheck="true"

spellcheck="false"

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>

prof. Gustavo Zimmermann | contato@swag.ag

<fim />