aula: introdução a htmldocente.ifrn.edu.br/albalopes/disciplinas/autoria... · alba lopes, profa....
TRANSCRIPT
![Page 1: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/1.jpg)
http://docentes.ifrn.edu.br/albalopes
Alba Lopes, Profa.
AULA:
Introdução a HTML Tags básicas
Autoria Web
![Page 2: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/2.jpg)
Alba Lopes, Profa.
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 4: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/4.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/5.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/6.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/7.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/8.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/9.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/10.jpg)
Alba Lopes, Profa.
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 12: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/12.jpg)
Alba Lopes, Profa.
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 14: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/14.jpg)
Alba Lopes, Profa.
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á.”
001010100
011011100
001010100
011011111
011011111
“Preciso do arquivo index.html”
![Page 15: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/15.jpg)
Alba Lopes, Profa.
Browser Web
Requisita recursos ao servidor web
Recebe os recursos enviados pelo servidor web e exibe-os ao usuário
001010100
011011100
001010100
011011111
011011111
![Page 16: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/16.jpg)
Alba Lopes, Profa.
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 18: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/18.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/19.jpg)
Alba Lopes, Profa.
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 22: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/22.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/23.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/24.jpg)
Alba Lopes, Profa.
Exemplo de Tag
<html>
<head>
<title>Seja bem-vindo ao IFRN </title></head>
<body>
...</body>
</html>
![Page 25: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/25.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/26.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/27.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/28.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/29.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/30.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/31.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/32.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/33.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/34.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/35.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/36.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/37.jpg)
Alba Lopes, Profa.
Criando um novo arquivo para a aula de hoje
exemplos_aula_02
musica.html
![Page 38: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/38.jpg)
Alba Lopes, Profa.
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 40: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/40.jpg)
Alba Lopes, Profa.
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 42: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/42.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/43.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/44.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/45.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/46.jpg)
Alba Lopes, Profa.
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 48: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/48.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/49.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/50.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/51.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/52.jpg)
Alba Lopes, Profa.
Criando um novo arquivo para a aula de hoje
exemplos_aula_02musica.html
sol.jpg
![Page 54: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/54.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/55.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/56.jpg)
Alba Lopes, Profa.
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 58: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/58.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/59.jpg)
Alba Lopes, Profa.
Como saber a resolução de uma Imagem?
No navegador:
Clicar em cima da imagem Propriedades da Imagem
![Page 60: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/60.jpg)
Alba Lopes, Profa.
Como saber a resolução de uma Imagem?
No Windows Explorer:
Clicar em cima da imagem
Propriedades
Detalhes
![Page 61: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/61.jpg)
Alba Lopes, Profa.
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 63: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/63.jpg)
Alba Lopes, Profa.
Organizando seus arquivos
Mas então veja só o que aconteceu com a página web!
![Page 64: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/64.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/65.jpg)
Alba Lopes, Profa.
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 67: AULA: Introdução a HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/67.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/68.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/69.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/70.jpg)
Alba Lopes, Profa.
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 HTMLdocente.ifrn.edu.br/albalopes/disciplinas/autoria... · Alba Lopes, Profa. alba.lopes.@ifrn.edu.br Versões do HTML HTML Criada por Berners-Lee para que pudesse](https://reader030.vdocuments.mx/reader030/viewer/2022040610/5ed1ac6f0d921f232269fb1c/html5/thumbnails/71.jpg)
Alba Lopes, Profa.
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.