Aplicações para Internet

Professores:
Alcides Teixeira
Ana Paula
Cristiane Camilo
Manuel Ledón
Ricardo Kanazawa
 Tag para Links
• Utilizado para ligação das páginas.
Exemplos:
- para acessar um arquivo que está dentro de uma pasta filha paginas, a
partir do diretório principal do projeto
<a href="paginas/gato.html">Texto ou conteúdo do enlace</a>
- para acessar um arquivo que se encontra em um nível superior, a partir
da pasta do arquivo atual
<a href="../cavalo.html"> Texto ou conteúdo do enlace</a>
- para acessar outros arquivos na web
<a href=" http://www.microsoft.com.br/index.html">Site da Microsoft Brasil</a>

• Nunca crie seus links com o caminho físico do arquivo, ou seja, sua
localização real na máquina, como C:\site\index.html, pois caso você
disponibilize esse arquivo na Web e em outros sistemas como Linux, irá
resultar em Página não encontrada.
 Tag para Links

<a href="arquivo.html"
Arquivo que será aberto

target="_blank"> _blank especifica que será

aberto em uma nova aba do
navegador, se não for
especificado, será aberto na
Texto do link mesma aba.
</a>
 Imagens
• O marcador <img /> define uma região da página
que contém uma imagem
• Este marcador deve conter o atributo src, que
indica a origem da imagem
• <img /> não tem marcador de fechamento
• A imagem pode estar armazenada no próprio site
ou fazer referência a uma imagem da web
<img src='local_da_imagem.jpg' />
 Tag para Imagens

• Arquivos mais utilizados

– JPG, GIF e PNG
• Outros atributos importantes:
– alt: texto alternativo, caso a imagem não seja
encontrada
– width: largura da imagem
– height: altura da imagem
• Para não perder a escala da imagem, pode-se definir
apenas a largura ou a altura, e o navegador se encarrega de
acertar o outro atributo automaticamente
 Tag para Imagens
Nome do arquivo

<img src="imagem1.png"
Info. para leitores de tela ou
link quebrado da imagem
alt="Imagem 1"

title="Minha IMG">

Texto exibido ao passar o mouse sobre a imagem

Tag para imagem
 Referências Absolutas

Uma referência absoluta é aquela que inclui todo o caminho de

um arquivo, incluindo o protocolo de comunicação (HTTP, por
exemplo). Essa referência é válida sempre que o arquivo
permaneça em um mesmo diretório.

Utilizam-se referências absolutas sempre que desejar

referenciar um arquivo que não faz parte da página construída.

<img src="http://meusite.com/img/selfie.png">
 Referências Relativas

Uma referência relativa é aquela que se expressa a partir de

um diretório conhecido, dentro da mesma página.

no mesmo diretório:
<img src="imagem1.png" >

ou na pasta filha img:

<img src="img/imagem1.png">

Caso a pasta "img" esteja um nível acima da pasta atual, utiliza-se algo
como:

<img src="../img/imagem1.png"/>
 Áudio
• Antes do surgimento do HTML5, não existia um padrão para
reproduzir som no navegador, o que era possível somente
através de plug-ins.

• Na especificação HTML5 existe uma tag que se destina a

incorporar um som ou stream (fluxo) de áudio na página
sem a necessidade de plug-ins. Essa tag seria
<audio>...</audio>

• Como ainda não fecharam o codec que será utilizado,

devemos implementar o código para todos os formatos
suportados de áudio. O comando ou tag para essa tarefa
seria: <source>...</source> utilizado junto com a tag de
áudio.
 Áudio
• Tabela de compatibilidade entre os formatos e os
navegadores.
Open
source e
Navegador MP3 WAV OGG sem
patente
Internet Explorer SIM NÃO NÃO
Firefox SIM SIM SIM
Google Chrome SIM SIM SIM
Apple Safari SIM SIM NÃO

• É possível criar os controles com tags HTML e

posteriormente programação em JavaScript.
 Áudio
➢ Para inserir um arquivo de audio no HTML5 basta utilizar a
tag <audio>

➢ Veja que dentro da tag audio existem as tags “source”, que

definem a localização dos arquivos e seus tipos.
➢ O atributo “controls” é opcional e serve para exibir os
controles do player.
 Vídeo

• Antes do surgimento do HTML5, também não existia um padrão para

reproduzir vídeo no navegador, o que era possível somente através de
plug-ins.

• Na especificação HTML5 existe uma tag que se destina a incorporar um

vídeo ou stream (fluxo) de vídeo na página, sem a necessidade de plug-
ins. Essa tag seria <video>...</video>

• Como também não houve um consenso sobre o formato de vídeo a ser

adotado no HTML5, devemos implementar o código para todos os
formatos suportados de vídeo. O comando ou tag para essa tarefa seria:
<source>...</source> utilizado junto com a tag de vídeo.
 Vídeo
• Atualmente é permitido a exibição de vídeos em 3
formatos
 Vídeo
• Para inserir um arquivo de vídeo no HTML5 basta utilizar a
tag <video>

• Veja que dentro da tag video existem as tags “source”, que

definem a localização dos arquivos e seus tipos.
• O atributo “controls” é opcional e serve para exibir os
controles do player.
• Um atributo muito usado também é o “poster”. Passamos o endereço de uma imagem que
será exibida enquanto o vídeo carrega, ou enquanto o usuário não der Play. Autoplay
 Incorporando janelas
• Podemos incorporar janelas a nossa página para, por exemplo, abrir
conteúdos externos. Isso pode ser feito com a tag iframe.
• No atributo src podemos especificar arquivos html, por exemplo, ou
algum URL.

...
Nosso conteúdo <br/><br/>

<iframe src="http://www.w3schools.com" width="500px">

<p>Seu navegador não suporta iframes.</p>
</iframe><br/><br/>

Mais conteúdo<br/><br/>

<iframe src="https://bb.cruzeirodosulvirtual.com.br">
<p>Seu navegador não suporta iframes.</p>
</iframe>
...

http://www.w3schools.com/tags/tag_iframe.asp
 Incorporando vídeo externo
• Utilizando a tag iframe, podemos incorporar vídeos externos ao nosso
site, como por exemplo do YouTube.
• Obs: alguns vídeos possuem direitos autorais. Também conseguimos
fazer esse processo com as tags embed e object, porém o comum seria
com iframe.

<iframe width="854" height="510"

src="https://www.youtube.com/embed/66f2yP7ehDs"
frameborder="0" allowfullscreen></iframe>
 Atributos
• Nos slides anteriores, foram vistas algumas tags com
atributos. Alguns atributos são específicos de cada tag,
porém existem atributos que podem ser aplicados a
qualquer tag. Exemplos de atributos:

– class: utilizado para aplicar estilos CSS

– id: identificador de um elemento

 Imagens como links
Exemplo:

<a href="https://www.cruzeirodosul.edu.br/">
<img src="megaphone.png" width="50"
height="50"> </a>
Exercício 1 – Entregar pelo BLACKBOARD
Crie um arquivo HTML5 com o nome index.html

A. Escolha uma especialidade médica e utilizando tags semânticas desenvolva,

na página index.html, um conteúdo sobre esta especialidade.
https://pt.wikipedia.org/wiki/Lista_de_especialidades_m%C3%A9dicas

B. Crie uma seção no lugar que considerar melhor e acrescente a ela uma
imagem que represente a especialidade escolhida, não esqueça da legenda.

C. Adicione dois hyperlinks, ambos devem direcionar para uma página na

internet que contenha mais detalhes sobre a especialidade médica: o primeiro
no texto: "Saiba mais" que deve ser acrescentado no final da página index.html
e outro na imagem presente na página.

D. Acrescente a data que você fez o exercício, o seu nome, RGM e curso no
rodapé.