101
http://docentes.ifrn.edu.br/albalopes [email protected] Alba Lopes, Profa. AULA: Introdução a HTML Autoria Web

AULA: Introdução a 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,

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: AULA: Introdução a 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,

http://docentes.ifrn.edu.br/albalopes

[email protected]

Alba Lopes, Profa.

AULA:

Introdução a HTMLAutoria Web

Page 2: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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?!

Page 3: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Mas Como Criar uma Página de Internet?

Page 4: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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?

Page 5: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 6: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 7: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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.

Page 8: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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.

Page 9: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 10: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 11: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Exemplo HTML

Como se parece um código HTML?

Page 12: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 13: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Exemplo HTML

O que o navegador apresenta:

Page 14: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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”

Page 15: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 16: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 17: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Criando um HTML

Página sem estrutura

Page 18: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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.

Page 19: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 20: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Página Estruturada

Page 21: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Parabéns!!!

Você construiu sua primeira página!

Page 22: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Identificação

Mas então? Qual a função de cada marcação no código anterior?

<html>

<title>

<body>

<h1>

<h2>

<p>

Page 23: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 24: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Exemplo de Tag

<html>

<head>

<title>Seja bem-vindo ao IFRN </title></head>

<body>

...</body>

</html>

Page 25: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 26: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 27: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 28: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 29: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 30: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 31: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 32: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 33: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Organizando Seus Arquivos

Para facilitar a construção de suas páginas web, é ideal que tenhamos uma

boa estrutura de diretórios

Page 34: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Organizando Seus Arquivos

Para facilitar a construção de suas páginas web, é ideal que tenhamos uma

boa estrutura de diretórios

Page 35: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Organizando Seus Arquivos

Para facilitar a construção de suas páginas web, é ideal que tenhamos uma

boa estrutura de diretórios

Page 36: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 37: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Criando um novo arquivo para a aula de hoje

exemplos_aula_02

musica.html

Page 38: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 39: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Estrutura Básica

Page 40: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 41: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Estrutura Básica

Page 42: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Estrutura Básica

Mas ainda não está certo. Há duas estrofes na música. Que devem ser

separadas. Como fazer para ficar assim:

Page 43: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 44: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 45: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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”

Page 46: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 47: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Estrutura Básica

Page 48: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 49: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

“ ”

Page 50: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 51: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 52: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Criando um novo arquivo para a aula de hoje

exemplos_aula_02musica.html

sol.jpg

Page 53: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Criando um novo arquivo para a aula de hoje

Page 54: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 55: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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”>

Page 56: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 57: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Inserindo Imagens

Page 58: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 59: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Como saber a resolução de uma Imagem?

No navegador:

Clicar em cima da imagem Propriedades da Imagem

Page 60: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Como saber a resolução de uma Imagem?

No Windows Explorer:

Clicar em cima da imagem

Propriedades

Detalhes

Page 61: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 62: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Organizando seus Arquivos

Page 63: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Organizando seus arquivos

Mas então veja só o que aconteceu com a página web!

Page 64: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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”>

Page 65: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 66: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Inserindo Imagens

E a mágica acontece!

Page 67: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 68: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 69: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 70: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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.

Page 71: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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)

Page 72: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 73: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto

Como fazer com que a música “Acordar” aponte para o exemplo que

fizemos na aula passada?

Page 74: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto

Page 75: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 76: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 77: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 78: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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>

Page 79: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 80: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 81: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto

Page 82: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 83: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 84: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto

Como fazer o link abrir em nova janela?

Atributo: “target”

<a href=“acordar.html” target=“_blank”> Acordar</a>

Page 85: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 86: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto

Page 87: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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:[email protected]”> Fale conosco </a> </p>

</body>

</html>

lista_de_musicas.html

Page 88: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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:[email protected]”> Fale conosco </a> </p>

</body>

</html>

lista_de_musicas.html

Page 89: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Hipertexto E-mail

lista_de_musicas.html

Page 90: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 91: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 92: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 93: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 94: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 95: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 96: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Atividade

Para cada música listada, crie uma página HTML com a letra da música,

como no exemplo ao lado

Page 97: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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

Page 98: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Dever de casa

Page 99: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

Atividade

Em cada página de música, crie um link “Voltar” que aponte para a página

com a lista das músicas

Page 100: AULA: Introdução a 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,

Alba Lopes, Profa.

[email protected]

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.

Page 101: AULA: Introdução a 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,

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.