View
3
Download
0
Category
Preview:
Citation preview
http://docentes.ifrn.edu.br/albalopes
alba.lopes@ifrn.edu.br
Alba Lopes, Profa.
AULA:
Introdução a HTMLAutoria Web
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Pra que Serve?
Abriu seu próprio negócio?
Quer vender alguma coisa?
Seu vizinho precisa de promover o comércio dele?
Que tal utilizar colocar na INTERNET?!
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Mas Como Criar uma Página de Internet?
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Introdução a HTML
Qual a base das páginas? Como construir?
Já mandaram exibir o “código fonte” de uma página da internet?
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
História
Em 1992, Tim Berners-Lee criou a web
Tim criou o HTML para resolver problema particular: compartilhar os
trabalhos desenvolvidos por ele e por seu grupo de pesquisa
Assim foram criados os conceitos de Web e de Link que hoje conhecemos
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Definições: HTML
Acrônimo de HiperText Markup Language (Linguagem de Marcação de
HiperTexto);
Utilizada para construir páginas web
Os documentos HTML podem ser interpretados por navegadores
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Definições: HTML
Um código HTML pode ser criado e editado por várias ferramentas, desde editores de texto simples a ferramentas sofisticadas;
As marcações são utilizadas para estruturar o texto em
Cabeçalhos
Parágrafos
Ligações de hipertextos,etc.
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Definições
Documento
Arquivo contendo toda a marcação necessária à renderização
Página
Resultado da renderização de um documento.
Renderização
É a transformação de um documento web em uma marcação HTML do documento em algo
capaz de ser lido e entendido pelo usuário
Navegador (ou browser)
É um programa destinado a visualizar documentos desenvolvidos em linguagem de marcação
Usuário
Pessoa ou software capaz de interpretar uma linguagem de marcação.
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Definições
Dispositivo
Software, hardware ou qualquer outra coisa usada por um usuário para ler ou entender um
documento desenvolvido com linguagem de marcação.
Desenvolvedor / autor web
Todo aquele que desenvolve ou cria documentos para web escrevendo marcação ou código
fonte
Editor
Software utilizado pelo desenvolvedor para programar (ou criar marcação) de um documento
web
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Versões do HTML
HTML
Criada por Berners-Lee para que pudesse compartilhar pesquisas com o seu grupo.
HTML 2.0
Atributos para definir tamanhos, tipos e cores de letras, cores de fundo, textura, etc.
HTML 3.0
Atributo class, estilização, tabelas, notas de rodapé e formulários.
HTML 3.2
Incorporou os elementos table e applets.
HTML 4
Endossada pela W3C como uma recomendação oficial.
HTML 4.01
Versão estável mais utilizada até o momento.
HTML 5
Versão atual com diversas inovações. Os sites atuais deverão ser migrados progressivamente para HTML5
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Exemplo HTML
Como se parece um código HTML?
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Exemplo HTML
O que se escreve:
<html><head>
<title>Seja bem-vindo à Pizzaria Lá em Casa</title></head><body>
<h1>Pizzaria Lá em Casa! </h1><br><h1>Temos 4 super sabores pequenos para você. Confira!</h1>
<h2>1. Frango com catupiry – R$ 12,00</h2><p>Molho, mussarela, frango, catupiry, tomate, cebola, azeitona e
orégano</p>
<h2>2. Calabresa – R$ 11,00</h2><p>Molho, mussarela, calabresa, cebola e orégano</p>
<h2>3. Portuguesa – R$ 12,00</h2><p>Molho, mussarela, presunto, calabresa, ovo, cebola, azeitona e
orégano</p>
<h2>4. Brigadeiro – R$ 14,00</h2><p>Mussarela, chocolate e granulado</p>
</body></html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Exemplo HTML
O que o navegador apresenta:
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Servidor Web
Aguardam as requisições enviadas pelos browsers web como por exemplo:
páginas, imagens, vídeos, sons, etc
Ao receber a solicitação, o servidor tenta localizar o recurso e, caso
encontre, envia-o para o browser
Servidor Web
Browser Web“Achei!!! Aqui está.”
001
010
100
011
011
100
001
010
100
011
011
111
011
011
111
“Preciso do arquivo index.html”
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Browser Web
Requisita recursos ao servidor web
Recebe os recursos enviados pelo servidor web e exibe-os ao usuário
001
010
100
011
011
100
001
010
100
011
011
111
011
011
111
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Criando um HTML
Abra o Notepad (Bloco de Notas), escreva o texto abaixo e salve-o como
index.html
Seja bem-vindo ao IFRN
Disciplinas cursadas durante o curso de Informática
AlgoritmosProgramação Orientada a ObjetosBanco de DadosRedes de ComputadoresAutoria Web
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Criando um HTML
Página sem estrutura
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Porque ficou tudo bagunçado?
Apesar de ter a nossa formatação, com tabulação, parágrafos, o navegador
ignora e confia que haverá a marcação HTML!
O HTML permite que qualquer browser em qualquer parte do mundo
recupere uma página web e entenda seu conteúdo.
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Adcionando Estruturas
<html>
<head><title>Seja bem-vindo ao IFRN </title>
</head>
<body><br>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
<p> Algoritmos </p><p>Programação Orientada a Objetos</p><p>Banco de Dados</p><p>Redes de Computadores</p><p>Programação Web</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Página Estruturada
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Parabéns!!!
Você construiu sua primeira página!
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Identificação
Mas então? Qual a função de cada marcação no código anterior?
<html>
<title>
<body>
<h1>
<h2>
<p>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Tags
Tags são rótulos (etiquetas) usadas para informar ao navegador como ele
deve apresentar o website
As tags são identificadas por serem envolvidas pelos sinais <> e </>
O conteúdo genérico de uma tag é <tag> conteúdo </tag>
A barra “/” indica que a tag está finalizando a marcação de um texto
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Exemplo de Tag
<html>
<head>
<title>Seja bem-vindo ao IFRN </title></head>
<body>
...</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
A tag <html> é usada em conjunto com sua tag de fechamento </html> e
será colocada no início e no final do documento
<html>
<head><title>Seja bem-vindo ao IFRN</title>
</head>
<body>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
...</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
A tag <head> tem como tag de fechamento </tag> e será utilizada para
delimitar o cabeçalho
<html>
<head><title>Seja bem-vindo ao IFRN</title>
</head>
<body>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
...</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
A tag <title> e </title> serve para colocar o título que aparecerá na barra
de títulos do navegador
<html>
<head><title>Seja bem-vindo ao IFRN </title>
</head>
<body>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
...</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Dentro de <body> e </body> serão colocados todos os comandos, textos e
imagens de uma páginas
<html>
<head><title>Seja bem-vindo ao IFRN</title>
</head>
<body>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
<p> Algoritmos </p><p>Programação Orientada a Objetos</p>...
</body></html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Tags como <html>, <head>, <body> costumam englobar outros conjuntos de
tags
<html>
<head><title>Seja bem-vindo ao IFRN </title>
</head>
<body><br>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
<p> Algoritmos </p><p>Programação Orientada a Objetos</p><p>Banco de Dados</p><p>Redes de Computadores</p><p>Programação Web</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
As tags <h1>, </h1> , <h2>, </h2> ... até <h6>, </h6> criam uma espécie
de cabeçalho (títulos, subtítulos)
<h1> Cabeçalho Grande </h1>...
<h3> Cabeçalho médio </h3>..<h6> Cabeçalho pequeno </h6>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Exemplo
Página apresentando as 6 estruturas de cabeçalhos.
<html>
<head>
<title> CABEÇALHOS </title>
</head>
<body>
<h1> Cabeçalho de nível 1</h1>
<h2> Cabeçalho de nível 2</h2>
<h3> Cabeçalho de nível 3</h3>
<h4> Cabeçalho de nível 4</h4>
<h5> Cabeçalho de nível 5</h5>
<h6> Cabeçalho de nível 6</h6>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando Seus Arquivos
Para facilitar a construção de suas páginas web, é ideal que tenhamos uma
boa estrutura de diretórios
autoria_web
exemplos_aula_01
exemplos_aula_02
aluno
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando Seus Arquivos
Para facilitar a construção de suas páginas web, é ideal que tenhamos uma
boa estrutura de diretórios
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando Seus Arquivos
Para facilitar a construção de suas páginas web, é ideal que tenhamos uma
boa estrutura de diretórios
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando Seus Arquivos
Para facilitar a construção de suas páginas web, é ideal que tenhamos uma
boa estrutura de diretórios
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Construímos na aula passada o nosso 1º “site”
<html>
<head><title>Seja bem-vindo ao IFRN </title>
</head>
<body><br>
<h2>Disciplinas técnicas cursadas durante o curso de Informática</h2>
<p> Algoritmos </p><p>Programação Orientada a Objetos</p><p>Banco de Dados</p><p>Redes de Computadores</p><p>Programação Web</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Criando um novo arquivo para a aula de hoje
exemplos_aula_02
musica.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Uma página HTML não reconhece o fim de um parágrafo normalmente com
o pressionamento da tecla “Enter”
A tag responsável pela quebra de parágrafos é a <p>
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<p> Quem só de passado insiste em viver </p><p> Com o pé na estrada a retroceder </p><p> Abandona a vitória </p>
<p> Esquece a história que o fez vencedor </p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Para inserir uma nova estrofe
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<p> Quem só de passado insiste em viver </p><p> Com o pé na estrada a retroceder </p><p> Abandona a vitória </p>
<p> Esquece a história que o fez vencedor </p>
<p> Quem não sabe ver o tempo passar</p><p> Prende-se ao que foi e não sabe evitar </p><p> Que águas passadas voltem</p>
<p> Com força contrária o moinho mover </p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Mas ainda não está certo. Há duas estrofes na música. Que devem ser
separadas. Como fazer para ficar assim:
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Mas como estruturar melhor para que não fique tanto espaço entre um
verso e outro?
A tag <br> quebra a linha e faz o texto continuar na linha seguinte. A tag
<br> é uma tag “vazia”. Não precisa de fechamento.
...
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Tag <hr> cria uma linha horizontal que é utilizada para dar sensação de
quebra entre um item de informação e outro.
Também é uma tag “vazia”
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atributos
Alguns elementos possuem atributos
Se houvesse uma tag “carro”, por exemplo, ela teria como atributo
Fabricante
Modelo
Cor
<carro> Meu carro </carro>
<carro fabricante=“Fiat” modelo = “Palio” cor=“prata”> Meu carro
</carro>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atributos
Exemplo de atributo da tag <hr>
Tamanho (size)
Largura (width)
<hr size=“8” width=“80%”>
width: indica que a linha ocupará 80% da largura da janela do navegador
size: indica que será exibida uma linha com 8 pixels de espessura
O valor dos atributos deve aparecer sempre entre aspas
“ ”
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Estrutura Básica
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<hr size=“8” width=“80%”>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
Para inserir imagens em HTML utiliza-se a tag
<img>
Essa tag possui atributos requeridos. Só irá funcionar se contiver o valor do
atributo
src – especifica o nome o caminho onde a imagem se encontra
<img src = “sol.jpg”>
Neste caso, a imagem se encontra na mesma pasta que o arquivo html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Criando um novo arquivo para a aula de hoje
exemplos_aula_02musica.html
sol.jpg
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Criando um novo arquivo para a aula de hoje
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<img src= “sol.jpg”>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
Mas então? A imagem ficou um pouco grande para o texto?
É possível reduzir o tamanho da imagem utilizando outros atributos!
width – especifica a largura da imagem
height– especifica a altura da imagem
<img src = “sol.jpg” width=“60” height =“50”>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<img src= “sol.jpg” width=“60” height=“50”>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
As dimensões das imagens são dadas em pixels !
PIXEL: Abreviação de Picture Element.Menor unidade de uma imagem digital.
Quanto maior for a resolução (quanto mais linhas e colunas de pixels), tanto mais
informação pode ser exibida
6 pixels
5 pixels
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Como saber a resolução de uma Imagem?
No navegador:
Clicar em cima da imagem Propriedades da Imagem
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Como saber a resolução de uma Imagem?
No Windows Explorer:
Clicar em cima da imagem
Propriedades
Detalhes
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando seus Arquivos
Para facilitar a construção de suas páginas web, é ideal que as imagens
tenham uma pasta específica para elas
exemplos_aula_02
imagens
musica.html
sol.jpg
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando seus Arquivos
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando seus arquivos
Mas então veja só o que aconteceu com a página web!
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Organizando seus arquivos
Temos de alterar o código da pagina
Para acessar arquivos que estão em uma pasta acima, deve-se colocar
<img src =“nome_da_pasta/nome_do_aquivo”>
No nosso caso:
<img src =“imagens/sol.jpg”>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<img src= “imagens/sol.jpg” width=“60” height=“50”>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
E a mágica acontece!
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Outra opção de valor para dimensões
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<img src= “imagens/sol.jpg” width=“30%” height=“30%”>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo Imagens
Outro atributo de img
alt – especifica um texto alternativo para a imagem
caso a imagem não apareça ou não possa ser visualizada
Importante para Acessibilidade
Deficientes visuais que usam leitores de tela
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Inserindo imagens
<html>
<head> <title>Trecho de Música</title> </head>
<body>
<h3> Acordar </h3>
<img src= “imagens/sol.jpg” alt=“Sol Amarelo”>
<hr>
<p>
Quem só de passado insiste em viver <br>Com o pé na estrada a retroceder <br>Abandona a vitória <br>
Esquece a história que o fez vencedor
</p>
<p>
Quem não sabe ver o tempo passar<br>Prende-se ao que foi e não sabe evitar <br>Que águas passadas voltem<br>
Com força contrária o moinho mover
</p>
</body>
</html>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atividade
Crie uma página HTML com uma música que você goste. Siga o exemplo
apresentado ao lado.
Insira uma imagem do artista da música.
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Para agregar novos conjuntos de informação ao site como
Textos
Imagens
Sons
Vídeos
através de referências específicas
denominadas hiperlinks (ou links)
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p>Acordar</p><p>Aquarela</p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Como fazer com que a música “Acordar” aponte para o exemplo que
fizemos na aula passada?
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Para criar links, utilizamos o elemento <a>
Este elemento possui um atributo href que especifica o destino do link.
Para criar um link, então, deve-se fazer:
<a href=“destino.html”> Texto </a>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”>Acordar</a></p><p>Aquarela</p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”>Acordar</a></p><p>Aquarela</p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Colocando um link para uma página que já está na web
Utiliza-se a mesma estrutura. No valor do atributo href, coloca-se o
endereço web da página que se deseja
<a href=“http://www.ifrn.edu.br”> Site do IFRN</a>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”>Acordar</a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”>Acordar</a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto em Imagens
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”><img src=“imagens/sol.jpg”></a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto em Imagens
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html”><img src=“imagens/sol.jpg”></a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Como fazer o link abrir em nova janela?
Atributo: “target”
<a href=“acordar.html” target=“_blank”> Acordar</a>
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto em Imagens
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html” target=“_blank”>Acordar</a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto E-mail
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html” target=“_blank”>Acordar</a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p><br><p><a href=“mailto:alba.lopes@ifrn.edu.br”> Fale conosco </a> </p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto E-mail
<html>
<head><title>Músicas Preferidas</title>
</head>
<body>
<h3> Músicas Preferidas </h3>
<p><a href=“acordar.html” target=“_blank”>Acordar</a></p><p><a href=“http://letras.terra.com.br/toquinho/49095/”>Aquarela</a></p><p>Imagine</p><br><p><a href=“mailto:alba.lopes@ifrn.edu.br”> Fale conosco </a> </p>
</body>
</html>
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Hipertexto E-mail
lista_de_musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Caminhos
Uma dos erros freqüentes de pessoas que iniciam a construção de sites é a
definição errada dos caminhos dos arquivos que compõe o site;
Ao inserir um elemento (imagem, som, etc) no site é necessário definir
claramente onde o recurso está para que o browser o encontre;
Assim, existem 2 formas para definir o caminho dos arquivos:
Caminho absoluto
Caminho relativo
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Caminhos
Caminho que o navegador precisa seguir para encontrar o arquivo, definido
desde o início. Por exemplo:
O exemplo indica o caminho absoluto do arquivo musicas.html, localizado
na pasta roberto_carlos, que está na pasta artistas, localizada no domínio
somlivre;
Em geral, os caminhos absolutos são usados para “linkar” arquivos que
estão fora do domínio de nosso site.
Em uma máquina local, o caminho absoluto pode ser, por exemplo:
http://www.somlivre.com/artistas/roberto_carlos/musicas.html
C:/somlivre/artistas/roberto_carlos/musicas.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Caminho Relativo
Baseado na estrutura acima, qual seria o caminho relativo para, a partir da
página emocoes.html, adicionarmos a imagem roberto01.jpg que está na
pasta imagens?
../imagens/roberto01.jpg
http://www.somlivre.com
index.html
produtores
artistas
roberto_carlos
musicas.html
biografia.html
discografia.html
musicas
emocoes.html
detalhes.html
imagens
roberto01.jpg
roberto02.jpg
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Caminho Relativo
Tomam o próprio documento HTML como referência para encontrar outros
elementos, desde a página até o arquivo;
Neste caso, não precisa escrever todo o caminho para chegar até ele
(caminho absoluto), mas sim como chegar até ele;
Imaginemos a seguinte estrutura do site:
somlivre
artistas
roberto_carlos
marisa_monteimagens
produtore
s musicas.html
emocoes.html
detalhes.html
roberto01.jpg
roberto02.jpg
artistas.html
index.html
musicas
biografia.html
discografia.html
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Caminho Relativo
Os pontos e a barra (../) significam subir um nível de pasta, ou seja, ir para
uma pasta imediatamente superior a que se está;
Explicando a construção do caminho relativo:
a. sair da pasta musicas (com ../)
b. entrar na pasta imagens (com imagens)
c. escolher a imagem desejada (roberto01.jpg)
http://www.somlivre.com
index.html
produtores
artistas
roberto_carlos
musicas.html
biografia.html
discografia.html
musicas
emocoes.html
detalhes.html
imagens
roberto01.jpg
roberto02.jpg
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atividade
Criar uma página com a foto do seu artista favorito e uma lista de suas
músicas como mostra o exemplo ao lado
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atividade
Para cada música listada, crie uma página HTML com a letra da música,
como no exemplo ao lado
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atividade
Na página com a lista das músicas, crie um link em cada título de música
apontando para cada página HTML criada contendo a letra da música
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Dever de casa
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Atividade
Em cada página de música, crie um link “Voltar” que aponte para a página
com a lista das músicas
Alba Lopes, Profa.
alba.lopes.@ifrn.edu.br
Referências
[1] FREEMAN, Elisabeth, FREEMAN, Eric. HTML com CSS & XHTML. Ed. 2. Rio
de Janeiro: Altabooks
[2] W3C, XHTML2 Working Group Home Page. Disponível em:
http://www.w3.org/MarkUp/. Acessado em: 22 nov. 2009.
[3] FASTHTML.COM.BR. Acessado em: 27 nov. 2009.
[4] LOCAWEB. Doctype pra que te quero. Disponível em:
http://www.pinceladasdaweb.com.br/blog/2006/05/29/doctype-pra-que-
te-quero/. Acessado em: nov. 2009.
[5] SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade
com HTML e CSS, São Paulo: Novatec, 2008.
Referências
[1] FREEMAN, Elisabeth, FREEMAN, Eric. HTML com CSS &
XHTML. Ed. 2. Rio de Janeiro: Altabooks
[2] W3C, XHTML2 Working Group Home Page. Disponível em:
http://www.w3.org/MarkUp/. Acessado em: 22 nov. 2009.
[3] FASTHTML.COM.BR. Acessado em: 27 nov. 2009.
[4] LOCAWEB. Doctype pra que te quero. Disponível em:
http://www.pinceladasdaweb.com.br/blog/2006/05/29/docty
pe-pra-que-te-quero/. Acessado em: nov. 2009.
[5] SILVA, Maurício Samy. Criando sites com HTML: sites de alta
qualidade com HTML e CSS, São Paulo: Novatec, 2008.
Recommended