Aula3_DW - Blog do Prof. PC

Aula 3
Html - 2
Prof. Paulo Cesar F. De Oliveira,
BSc, PhD
05/08/16
© P C F de Oliveira 2015
1
Lembrete
Elemento =
Tag Abertura
+ Conteúdo +
Tag Fechamento
05/08/16
© P C F de Oliveira 2015
2
Exemplo
<p> Um parágrafo </p>
05/08/16
© P C F de Oliveira 2015
3
URL
(Uniform Resource Locator)
Tag
Tag
Atributo
05/08/16
© P C F de Oliveira 2015
4
Relativa:
subdiretório
Âncora
Absoluta:
Página
Remota (URL)
05/08/16
Relativa:
diretório corrente
© P C F de Oliveira 2015
5
href="http://www.an.com.br"
URL
Absoluta
URL
Relativa
Atributo
href
URL
Relativa
href=”recipes/salmon.html"
href=”index.html"
05/08/16
© P C F de Oliveira 2015
6
05/08/16
© P C F de Oliveira 2015
7
① 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 para
www.allrecipes.com
05/08/16
© P C F de Oliveira 2015
8
① 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 receita
Linguine</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
9
URL
Texto
Alternativo
Tag
Tag
<img src=“logo.jpg” alt=“logo do IFC” />
Atributo
Atributo
05/08/16
© P C F de Oliveira 2015
10
<img src=“logo.jpg” alt=“” />
Imagem
Simples
ImageMap
Link
05/08/16
Inserindo
imagens
© P C F de Oliveira 2015
11
1
2
3
jpg
png
gif
(Joint
Photographic
Experts Group)
05/08/16
(Portable
Network
Graphics)
© P C F de Oliveira 2015
(Graphics
Interchange
Format)
12
Fotografias
<=16 milhões cores
Perda de informação
jpg
1
Transparência (não)
Arquivos pequenos
Animação (não)
05/08/16
© P C F de Oliveira 2015
13
Logos
Milhões cores (8, 24, 32)
Sem perda informação
png
2
Transparência (sim)
Arquivos maiores
Animação (não)
05/08/16
© P C F de Oliveira 2015
14
Logos
<= 256 cores
Sem perda informação
gif
3
Transparência (sim)
Arquivos > jpg
Animação (sim)
05/08/16
© P C F de Oliveira 2015
15
05/08/16
© P C F de Oliveira 2015
16