Aula 3

AULA 3
LINGUAGEM
PROGRAMAÇÃO
WEB BÁSICA I
Documento HTML
Profª Me. Vanessa Rezende
REVISÃO
TRÍADE PÁGINAS WEB
E A AULA DE HOJE?
1. Documento HTML
2. Anatomia de uma página HTML
1. HTML (Hyper Text Markup Language)
2. Tags para Textos
3. Listas & Links
AO FIM DESSA AULA, EU DEVO SER
CAPAZ DE…
● O que é HTML
● Tags HTML
● Prática
BIBLIOGRAFIA BÁSICA
BIBLIOGRAFIA COMPLEMENTAR
01
DOCUMENTO
HTML
“HTML (HyperText Markup Language)
não é uma linguagem
de programação, é uma linguagem
de marcação utilizada
para dizer ao seu navegador como
estruturar a página web
que você visita”
HTML - Hyper Text Markup
Language
● Tag: É o marcador usado para delimitar o início e, onde
for requerido, o fim de um elemento HTML.
● A Tag é identificada por uma palavra ou letra entre os
símbolos “<“ e “>”.
● Elemento html: É uma estrutura semântica, composta de:
tag de abertura, conteúdo e tag de fechamento.
● Atributos: definem propriedades específicas (formatação,
identificação ou ação) para o elemento html.
ELEMENTO HTML
HTML - Hyper Text Markup
Language
Exemplo de elementos HTML:

DOCUMENTO HTML
● Compreende um arquivo texto com extensão .htm

ou .html criado a partir de um processador de
texto qualquer.
DOCUMENTO HTML
<!DOCTYPE HTML>
<html>
<!DOCTYPE … > - A declaração
<head> não é uma tag HTML. É uma
... "informação" para o
</head>
navegador sobre qual tipo de
<body> documento esperar.
...
</body>
</html>
DOCUMENTO HTML
<!DOCTYPE HTML>
<html>
<head>
... <html> - Representa a raiz de
</head> um documento HTML - é o
<body>
contêiner para todos os outros
... elementos HTML (exceto a tag
</body> <!DOCTYPE> )
</html>
DOCUMENTO HTML
HEAD - Informações de
<!DOCTYPE HTML> cabeçalho - não são exibidas
<html> na janela do navegador
<head>
...
</head>
<body>
...
</body>
</html>
DOCUMENTO HTML
<!DOCTYPE HTML>
<html>
BODY - Conteúdo que será
<head>
... exibido na janela do
</head> navegador
<body>
...
</body>
</html>
ANATOMIA DE UMA PÁGINA HTML
02
ESTRUTURA DE TAGS
HTML
TAGS DE TEXTO
● As tags <h1> até a

<h6> são utilizadas
para definir
cabeçalhos HTML.
● <h1>define o título
mais importante.
● <h6>define o título
menos importante.
TAGS DE TEXTO
● As tags <h1> até a <h6> são utilizadas para definir cabeçalhos HTML.
TAGS DE TEXTO
TAGS DE TEXTO
TAGS DE TEXTO
TAGS DE TEXTO - LISTAS
LINKS
● A tag <a> define um hiperlink, que é usado para vincular
uma página a outra.
● O atributo mais importante do elemento <a> é o atributo
href, que indica o destino do link.
● Por padrão, os links aparecem da seguinte forma em todos
os navegadores:
○ Um link não visitado está sublinhado e azul
○ Um link visitado é sublinhado e roxo
○ Um link ativo está sublinhado e vermelho
LINKS
O QUE ACONTECE
SE EU NÃO COLOCAR Se a tag <a> não tiver um
O ATRIBUTO HREF
NA TAG <a>? atributo href, ela será apenas
um espaço reservado para um
hiperlink.
LINKS
LINKS 1
Utilizando um link para abrir uma nova

janela no navegador
2
LINKS
1
Vinculando um código javascript a um link
2
Estrutura Básica de uma
Página
Head
Metadados
Header
HTML5 Cabeçalho da página
Principais tags
Body
Corpo da página
Footer
Rodapé da página
VAMOS EXERCITAR O
CÉREBRO?
EXERCÍCIO 1 - HTML
O HyperText Markup Language (HTML) é usado para estruturar páginas web. A
respeito de
HTML, marque V para as afirmativas verdadeiras e F para as falsas.
( ) É uma linguagem de programação.
( ) Substitui o uso de código JavaScript.
( ) Utiliza tag para delimitar conteúdo.
( ) Possui diferentes níveis de título.
Assinale a sequência correta.
a) V, F, F, F
b) F, V, V, F
c) V, V, F, V
d) F, F, V, V
EXERCÍCIO 1 - HTML
O HyperText Markup Language (HTML) é usado para estruturar páginas web. A
respeito de
HTML, marque V para as afirmativas verdadeiras e F para as falsas.
( ) É uma linguagem de programação.
( ) Substitui o uso de código JavaScript.
( ) Utiliza tag para delimitar conteúdo.
( ) Possui diferentes níveis de título.
Assinale a sequência correta.
a) V, F, F, F
b) F, V, V, F
c) V, V, F, V
d) F, F, V, V
EXERCÍCIO 2 - Criando seu
arquivo HTML principal
As boas práticas na organização de um projeto podem ser consideradas um
dos pilares fundamentais nas etapas iniciais do desenvolvimento. É muito
importante iniciarmos da forma correta. Levando em consideração o que
vimos anteriormente, podemos afirmar que:
a) É uma boa prática usarmos títulos não descritivos nas subpastas para que
possamos englobar o máximo de material possível por pasta de forma
organizada e lógica.
b) É uma boa prática mantermos nossos projetos sempre na área de trabalho,
pois este é o ponto de acesso mais fácil no sistema e de melhor organização.
c) É uma boa prática criarmos pastas e subpastas que explicitem e organizem
os arquivos de código de forma lógica.
As boas práticas na organização de um projeto podem ser consideradas um
dos pilares fundamentais nas etapas iniciais do desenvolvimento. É muito
importante iniciarmos da forma correta. Levando em consideração o que
vimos anteriormente, podemos afirmar que:
a) É uma boa prática usarmos títulos não descritivos nas subpastas para que
possamos englobar o máximo de material possível por pasta de forma
organizada e lógica.
b) É uma boa prática mantermos nossos projetos sempre na área de trabalho,
pois este é o ponto de acesso mais fácil no sistema e de melhor organização.
c) É uma boa prática criarmos pastas e subpastas que explicitem e organizem
os arquivos de código de forma lógica.
No mundo fantasia do Pokémon, treinadores pokémon decidem criar
um site eletrônico, o Pokémart.com: um site de comércio eletrônico
onde os treinadores poderiam comprar e vender itens, como
Pokébolas, Potions e Berries. Para começar, por enquanto, seguindo o
padrão, eles precisam criar um arquivo chamado:
a) google.html
b) index.css
c) index.html
d) google.js
No mundo fantasia do Pokémon, treinadores pokémon decidem criar
um site eletrônico, o Pokémart.com: um site de comércio eletrônico
onde os treinadores poderiam comprar e vender itens, como
Pokébolas, Potions e Berries. Para começar, por enquanto, seguindo o
padrão, eles precisam criar um arquivo chamado:
a) google.html
b) index.css
c) index.html
d) google.js
Ao criar um novo projeto é comum seguirmos um padrão para nomear seu
arquivo principal e para estruturar a hierarquia de arquivos. Das alternativas
abaixo assinale a que apresenta a hierarquia correta de um projeto HTML:
a) Pasta do projeto
● index.html
● arquivos do projeto
b) Arquivos do projeto
● index.html
● pasta do projeto
c) Index.html
Ao criar um novo projeto é comum seguirmos um padrão para nomear seu
arquivo principal e para estruturar a hierarquia de arquivos. Das alternativas
abaixo assinale a que apresenta a hierarquia correta de um projeto HTML:
a) Pasta do projeto
● index.html
b) Arquivos do projeto
● index.html
c) Index.html
EXERCÍCIO 5 - Adicionando
uma imagem
Considere o código a seguir:
Assinale as alternativas corretas a respeito do código
acima:
( ) A imagem só será exibida caso exista um arquivo de
imagem chamado “html.png” salvo dentro da pasta do
projeto.
( ) Apenas o texto alternativo será exibido e a imagem
estará indisponível, porque o atributo src da tag <img> foi
escrito incorretamente.
( ) A imagem não será exibida pois a tag <img> não foi
fechada corretamente com </img>, o que causará um
problema no código.
( ) O uso do atributo alt é uma boa prática, mas não fará
diferença na exibição da página nesse caso específico.
EXERCÍCIO 5 - Adicionando
uma imagem
Considere o código a seguir:
Assinale as alternativas corretas a respeito do código
acima:
(X) A imagem só será exibida caso exista um arquivo de
imagem chamado “html.png” salvo dentro da pasta do
projeto.
(X) Apenas o texto alternativo será exibido e a imagem
estará indisponível, porque o atributo src da tag <img> foi
escrito incorretamente.
( ) A imagem não será exibida pois a tag <img> não foi
fechada corretamente com </img>, o que causará um
problema no código.
( ) O uso do atributo alt é uma boa prática, mas não fará
diferença na exibição da página nesse caso específico.
EXERCÍCIO 6 - Quirks Mode
O uso do <!DOCTYPE html> é muito importante para que o navegador utilize o
modo padrão e não o “Quirks Mode”. Pensando nisso, assinale a alternativa
correta:
a) O <!DOCTYPE html> é responsável por evitar o Quirks Mode pois informa ao
navegador que o arquivo que está sendo exibido é do tipo HTML e não um
arquivo com outra extensão, como por exemplo um arquivo de texto, que seria
TXT.
b) Evitamos o Quirks Mode utilizando o <!DOCTYPE html> para declarar a
versão do HTML, porém essa declaração não funciona se não escrevermos
“DOCTYPE” em maiúsculas e html em minúsculas.
c) O Quirks Mode é o modo em que o navegador adapta páginas web que estão
em versões antigas para que funcionem, o que pode quebrar sua página em
HTML 5. Portanto, esse modo deve ser evitado através do uso do <!DOCTYPE
html>.
EXERCÍCIO 6 - Quirks Mode
O uso do <!DOCTYPE html> é muito importante para que o navegador utilize o
modo padrão e não o “Quirks Mode”. Pensando nisso, assinale a alternativa
correta:
a) O <!DOCTYPE html> é responsável por evitar o Quirks Mode pois informa ao
navegador que o arquivo que está sendo exibido é do tipo HTML e não um
arquivo com outra extensão, como por exemplo um arquivo de texto, que seria
TXT.
b) Evitamos o Quirks Mode utilizando o <!DOCTYPE html> para declarar a
versão do HTML, porém essa declaração não funciona se não escrevermos
“DOCTYPE” em maiúsculas e html em minúsculas.
c) O Quirks Mode é o modo em que o navegador adapta páginas web que estão
em versões antigas para que funcionem, o que pode quebrar sua página em
HTML 5. Portanto, esse modo deve ser evitado através do uso do <!DOCTYPE
html>.
LINKS ÚTEIS
Para testar nossos códigos online:

https://jsfiddle.net/
Para aprender sobre as Tags HTML:
ttps://www.w3schools.com/tags
ATÉ A PRÓXIMA AULA!
Alguma dúvida?
Vocês podem me encontrar em:
vanessarezende2014@gmail.com

Aula 3

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 3

Enviado por

Direitos autorais:

Formatos disponíveis

AULA 3

Exemplo de elementos HTML:

● Compreende um arquivo texto com extensão .htm

● As tags <h1> até a

Utilizando um link para abrir uma nova

Para testar nossos códigos online:

Você também pode gostar