![Page 1: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/1.jpg)
Aula 3Html - 2
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
05/08/16 © P C F de Oliveira 2015 1
![Page 2: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/2.jpg)
05/08/16 © P C F de Oliveira 2015 2
Elemento = Tag Abertura + Conteúdo +
Tag Fechamento
Lembrete
![Page 3: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/3.jpg)
05/08/16 © P C F de Oliveira 2015 3
<p> Um parágrafo </p>
Exemplo
![Page 4: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/4.jpg)
05/08/16 © P C F de Oliveira 2015 4
Atributo
Tag Tag
URL (Uniform Resource Locator)
![Page 5: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/5.jpg)
05/08/16 © P C F de Oliveira 2015 5
Absoluta: Página
Remota (URL) Relativa: diretório corrente
Relativa: subdiretório
Âncora
![Page 6: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/6.jpg)
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"
![Page 7: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/7.jpg)
05/08/16 © P C F de Oliveira 2015 7
![Page 8: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/8.jpg)
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
![Page 9: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/9.jpg)
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>
![Page 10: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/10.jpg)
05/08/16 © P C F de Oliveira 2015 10
<img src=“logo.jpg” alt=“logo do IFC” />
Atributo
Tag Tag
Atributo
URLTexto
Alternativo
![Page 11: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/11.jpg)
05/08/16 © P C F de Oliveira 2015 11
Inserindo imagens
Imagem Simples
ImageMap
<img src=“logo.jpg” alt=“” />
Link
![Page 12: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/12.jpg)
05/08/16 © P C F de Oliveira 2015 12
1 2 3jpg(Joint
PhotographicExperts Group)
png(PortableNetwork Graphics)
gif(Graphics
InterchangeFormat)
![Page 13: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/13.jpg)
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
![Page 14: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/14.jpg)
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
![Page 15: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/15.jpg)
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
![Page 16: Aula 3 Html - 2 - WordPress.com · 2016-08-12 · Aula 3 Html - 2 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2015 1](https://reader034.vdocuments.com.br/reader034/viewer/2022043014/5fb1e42977f7cb533d51b01a/html5/thumbnails/16.jpg)
05/08/16 © P C F de Oliveira 2015 16