aula 2 ads

Prévia do material em texto

Tecnologia em Análise e 
Desenvolvimento de Sistemas
Introdução a Desenvolvimento de 
Sistemas Web
Aula 2 - Link
Profª.Ma.Merris Mozer
• Competência da Unidade: Criar link.
• Resumo: Neste aula aprenderemos como trabalhar com 
link, ou seja, como abrir outros websites a partir do 
documento web que estiver.
• Palavras-chave: Link, âncora, navegação.
• Título da Teleaula: Link
• Teleaula nº: 2
O QUE SÃO LINK?
Contextualizando
Soft&CIA, empresa de análise e desenv. de 
sistemas, convidou José para uma entrevista de 
emprego . No momento da 2ª entrevista, os 
questionamentos continuaram, e você poderá 
continuar ajudando.
CONCEITO
Para a surpresa de José e sua felicidade, ele terá 
que explicar o que significam os termos “a” e 
“href” utilizados para inserir um link no 
documento web e, ainda o que significa “link”. 
CONCEITO
A internet é totalmente linkada, ou seja, quando o 
usuário clicar em um determinado texto deverá 
redirecionar para uma página.
Para isto é necessário criar uma âncora utilizando o 
TAG <a>...</a>, como o atributo href.
Resolvendo SP1
<a href="www.google.com.br">...</a>
a = anchor = âncora
Hypertext refernce
IMAGEM 
MAPEADA -
RETANGULAR
Contextualizando
O trabalho se complica a cada passo. José incluirá 
uma imagem e somente em algumas partes 
retangulares desta imagem é que será possível 
efetuar um click e chamar o site 
http://www.google.com.br.
Como ele fará tudo isso? Você aprenderá e o 
ajudará.
Área retangular
Fonte: https://commons.wikimedia.org/wiki/File:Buslinie_1_am_Omnibusbahnhof_in_T%C3%BCbingen_bei_Nacht.jpg
CONCEITO
Será utilizado imagens mapeadas;
Para o mapeamento é necessário criar um mapa e 
definir a área sensível da imagem;
Criando o Mapa:
<map name="img_google“></map>
Em seguida criar a área sensível
Resolvendo SP2
Demonstrar no computador
Interação
Após ter estudar os conceitos necessários e visto 
as demonstrações da professora acesse junto com 
José o site www.google.com.br , busque imagens 
licenciadas Commons que possua uma imagem 
retanguar e insira esta imagem no documento 
web. Em seguida abra-a no paint e selecione um 
quadrado e anote as coordenadas para crie uma 
área sensível que chamará o seguinte site 
https://g1.globo.com/
IMAGEM 
MAPEADA -
CIRCULAR
Contextualizando
Agora José incluirá uma imagem e somente em 
algumas partes circulares desta imagem é que será 
possível efetuar um click e chamar o site 
http://www.google.com.br.
Vamos aproveitar o que já aprendemos !
Área circular
Será mapeado a imagem mudando os parâmetros 
de:
Shape = circle
Coords
Exemplo:
<area shape="circle" target="_blank" 
coords="350,170,79" 
href="https://g1.globo.com/"> 
Resolvendo SP3
Demonstrar no computador
IMAGEM 
MAPEADA -
IRREGULAR
Contextualizando
Agora José incluirá uma imagem e somente em 
algumas partes irregulares desta imagem é que será 
possível efetuar um click e chamar o site 
http://www.google.com.br.
E, para finalizar a primeira etapa de contratação, José 
deverá inserir um vídeo qualquer no documento 
web. Porém, para demonstrar conhecimento deverá 
inserir um documento salvo no seu computador e um 
outro vídeo do youtube. Vamos aproveitar o que já 
aprendemos !
Área irregular
Será mapeado a imagem mudando os parâmetros de: 
Shape = poly
Coords
Fonte: https://commons.wikimedia.org/wiki/File:Vaudringhem_sur_le_GR_121B_(2).JPG
Resolvendo SP4
Demonstrar no computador
Incluindo vídeos
Pasta
<EMBED SRC="videos\video.wmv">
Youtube
<p align="center">
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/PzVke
tUPVVU" frameborder="0" allow="autoplay; 
encrypted-media" allowfullscreen></iframe>
</p>
Interação
A partir da imagem mostrada 
abaixo, crie uma área mapeada 
circular da Super Lua-Azul e abra o 
site https://g1.globo.com/
Depois acesse um vídeo qualquer do youtube e crie 
adicione-o neste documento web.
Fonte: https://commons.wikimedia.org/wiki/File:Rare_Blue_Super_Moon_2.jpg