aula 3 html - 2 - wordpress.com · 2016-08-12 · aula 3 html - 2 prof. paulo cesar f. de oliveira,...

Aula 3Html - 2

Prof. Paulo Cesar F. De Oliveira, BSc, PhD

05/08/16 © P C F de Oliveira 2015 1

05/08/16 © P C F de Oliveira 2015 2

Elemento = Tag Abertura + Conteúdo +

Tag Fechamento

Lembrete

05/08/16 © P C F de Oliveira 2015 3

<p> Um parágrafo </p>

Exemplo

05/08/16 © P C F de Oliveira 2015 4

Atributo

Tag Tag

URL (Uniform Resource Locator)

05/08/16 © P C F de Oliveira 2015 5

Absoluta: Página

Remota (URL) Relativa: diretório corrente

Relativa: subdiretório

Âncora

05/08/16 © P C F de Oliveira 2015 6

Atributo href

URL Absoluta

URL Relativa

href="http://www.an.com.br"

href=”recipes/salmon.html"

URL Relativa

href=”index.html"

05/08/16 © P C F de Oliveira 2015 7

05/08/16 © P C F de Oliveira 2015 8

① Crie um link em salmon.html para tapenade.html

② Crie um link em couscous.html para salmon.html

③ Crie um link em tapenade.html para linguine.html

④ Crie um link em linguine.html para about.html

⑤ Crie um link em tapenade.html parawww.allrecipes.com

05/08/16 © P C F de Oliveira 2015 9

① Crie um link em salmon.html para tapenade.html<a href=“tapenade.html”>Vá para receita Tapenade</a>② Crie um link em couscous.html para salmon.html<a href=“../salmon.html”>Vá para receita Salmon</a>③ Crie um link em tapenade.html para linguine.html<a href=“pasta/linguine.html”>Vá para receitaLinguine</a>④ Crie um link em linguine.html para about.html<a href=“../../about.html”>Vá para pagina About</a>⑤ Crie um link em tapenade.html para

www.allrecipes.com<a href=“http://www.allrecipes.com”>Vá para site All Recipes</a>

05/08/16 © P C F de Oliveira 2015 10

<img src=“logo.jpg” alt=“logo do IFC” />

Atributo

Tag Tag

Atributo

URLTexto

Alternativo

05/08/16 © P C F de Oliveira 2015 11

Inserindo imagens

Imagem Simples

ImageMap

<img src=“logo.jpg” alt=“” />

Link

05/08/16 © P C F de Oliveira 2015 12

1 2 3jpg(Joint

PhotographicExperts Group)

png(PortableNetwork Graphics)

gif(Graphics

InterchangeFormat)

05/08/16 © P C F de Oliveira 2015 13

jpg

<=16 milhões cores

Perda de informação

Transparência (não)

Arquivos pequenos

Fotografias

Animação (não)

1

05/08/16 © P C F de Oliveira 2015 14

png

Milhões cores (8, 24, 32)

Sem perda informação

Transparência (sim)

Arquivos maiores

Logos

Animação (não)

2

05/08/16 © P C F de Oliveira 2015 15

gif

<= 256 cores

Sem perda informação

Transparência (sim)

Arquivos > jpg

Logos

Animação (sim)

3

05/08/16 © P C F de Oliveira 2015 16