FORMATANDO UM
DOCUMENTO
HTML, E
TORNANDO A
PÁGINA WEB COM
VISUALIZAÇÃO
AMIGÁVEL
Professora Stephany
Professor Dan Daniel
ATIVIDADE 1 – PROGRAMAÇÃO WEB
OBJETIVOS DA AULA:
• Apresentar o uso de <tags atributos=”valor”>, com o objetivo de
formatação da página web.
• Ao final dos estudos, será realizado uma atividade para aplicar os
conhecimentos adquiridos, criando um documento HTML com as
estruturas <header>, <main> e <footer>, que demonstre a
aplicação das tags e atributos apresentados na aula.
Tags
Tag: Define a estrutura e os tipo de conteúdo em HTML.
Tag Estrutural: Define o conteúdo em seções lógicas e cria o
esqueleto estrutural da página, como <html>, <head>, <body>,
<header>, <main>, e <footer>. Essas tags ajudam a organizar e
estruturar a página.
Tag de Conteúdo: Define e marca o tipo de conteúdo específico,
como <a> para links, <p> para parágrafos, e <img> para imagens.
Essas tags são usadas para exibir o conteúdo visível da página web.
Atributos
Atributo: Modifica uma tag HTML, adicionando informações extras
ou definindo suas propriedades específicas para ajustar o
comportamento e a aparência do conteúdo.
Exemplos incluem o atributo style=, que é usado para aplicar
estilos CSS diretamente a um elemento, permitindo ajustar suas
cores, tamanhos e fontes de maneira personalizada, e src= e alt=,
usados para carregar imagens e dar uma descrição de texto
alternativo. Os atributos permitem personalizar e detalhar como os
elementos HTML funcionarão e serão exibidos.
O que é “elemento HTML”?
Um elemento HTML é composto por uma tag de abertura, atributo,
propriedade, valor, conteúdo e tag de fechamento: Figura abaixo:
Formatando e destacando texto no HTML
Utilizamos a formatação e destaque para especificar uma certa
palavra ou trecho de um texto. Ou seja, que deixe destacado os
trechos mais relevantes, que contenham a ideia principal do que se
deseja frisar.
Eu, Maria Fernanda de Assis, sou Especialista em TI. (negrito)
Eu, Maria Fernanda de Assis, sou Especialista em TI. (itálico)
Eu, Maria Fernanda de Assis, sou Especialista em TI. (sublinhado)
Eu, Maria Fernanda de Assis sou Especialista em TI. (strong)
Diferenças na Marcação do Texto
Bold <b> destaca partes relevantes de um texto
Eu, Maria Fernanda de Assis, sou Especialista em TI. (negrito)
Italic <i> destaca citações literárias de diferentes autores
Eu, Maria Fernanda de Assis. sou Especialista em TI. (itálico)
Underline <u> destaca texto com uma linha baixa, como nos links
[Link] (sublinhado)
<strong> tem o mesmo efeito do <b>, mas será lido pelo navegador com
mais ênfase, ajudando na acessibilidade e na compreensão do conteúdo.
Aplicando as Marcações
Sintaxe: <b> texto </b> Exemplo:
Eu, <b>Maria Fernanda de Assis</b> sou <b>Especialista em TI</b>.
(negrito)
Sintaxe: <i> texto </i> Exemplo:
Eu, <i>Maria Fernanda de Assis</i> sou <i>Especialista em TI</i>. (itálico)
Sintaxe: <u> texto </u> Exemplo:
Acesse o link <u>[Link] (sublinhado)
Sintaxe: <strong> texto </ strong > Exemplo:
Trata-se de um <strong> “Curso Técnico de HTML” </strong> (forte)
Estrutura mínima HTML
Separando os blocos com <hr> e <br>
É possível inserir linhas horizontais (quebra temática) e espaços com as tags
<hr> e <br>. Essas tags ajudam a dividir as informações exibidas em diferentes
elementos e blocos, melhorando a organização e a clareza da página web.
<body>
<hr> <!-- cria uma linha horizontal abaixo da tag <hr> -->
<hr>
<p> texto do parágrafo 1</p>
<hr>
<br> <!-- cria um espaço entre os parágrafos -->
<p> texto do parágrafo 2</p>
<hr>
<hr>
</body>
Comentários no documento HTML
"Os comentários servem para incluir notas, informações e explicações
importantes para o desenvolvedor sobre linhas e blocos do código, mas que o
usuário final não deve ver. Normalmente, são utilizados para documentar o
código web para futuras manutenções."
Sintaxe:
<!-- Comentários do documento, não visível para o usuário -->
Exemplos de uso prático:
<p> Parágrafo </p> <!-- Este é um parágrafo -->
<!--Comente cada bloco-->
<header>
Aplicando estilos no HTML
Style é um atributo global, podendo assumir várias propriedades e valores. Isso
significa que ele pode ser usado com praticamente qualquer elemento HTML
para aplicar estilos CSS.
Sintaxe:
style="color: red; font-size: 18px;
style="background-color: blue; padding: 2px; margin: 10px; color: red;">
style="width: 100px; height: 50px; border: 2px solid black;
style="background-color: lightblue; padding: 20px;
Aplicando estilos no HTML
Uso prático no código
<div style="background-color: lightblue; padding: 10px;">
<h1>Conteúdo do <strong>Cabeçalho</strong> <U><I>H1</I></U> com
borda azul-claro, espaçamento, centralizado</h1>
<p style="text-align: right;"><b><i>Este é um parágrafo alinhado à direita com
bold e itálico</i></b></p>
</div>
<p style="color: red; font-size: 18px;">Texto vermelho tamanho 18px</p>
<p style="text-align: center; color: blue; font-size: 34px;">Este texto está
centralizado, com a cor azul e tamanho 34. </p>
Aplicando estilos no HTML
<div style="background-color: lightblue; padding: 10px; text-align: center;">
<h1>Conteúdo do Cabeçalho h1 com borda azul-claro, espaçamento,
centralizado</h1>
<p>Este é um <b><i>parágrafo formatado com tags locais</i></b></p>
</div>
<img src="[Link]" alt="[Link]" width="100" height="50"
style="display: block; margin-left: auto; margin-right: auto; border: 2px solid
black;">
ATIVIDADE 1
Criar uma estrutura HTML, alterar a lang para pt-BR e lterar o título “Atividade 1”.
Criar as seguintes estruturas:
• Criar uma estrutura <header> com uma <div> com fundo colorido (escolha a
cor) e espaçamento acima e abaixo de 10px. A <div> deverá conter um
cabeçalho com o conteúdo centralizado e um parágrafo alinhado à direita,
com texto em negrito e itálico. Inclua uma linha horizontal acima e abaixo e
comente o bloco.
• Criar uma estrutura <main> com um paragrafo com texto centralizado, cor
azul e tamanho 24 e um parágrafo com um texto simples, que metade dele
seja formatado com enfase e underline. Inclua uma linha horizontal abaixo e
comente o bloco.
ATIVIDADE 1
• Criar uma estrutura <footer> com uma borda de (escolha a espessura e a
cor) e centralizado, com uma divisão com fundo colorido (escolha a cor),
espaçamento acima e abaixo de xxpx, margens laterais de xxpx. Inclua uma
linha horizontal abaixo.
Ainda em <footer>, inclua uma imagem com largura 100 e altura 50 e borda
de (escolha a espessura e a cor).
INDENTAÇÃO
Lembre-se de sempre indentar seu código corretamente, fazendo os recuos de acordo com o conteúdo.
INDENTAÇÃO
Indentação: por que é importante?
A indentação é importante na organização eficiente do código, destacando sua
influência na legibilidade e manutenção. Vamos mergulhar na importância e como
ela pode ser um diferencial no desenvolvimento.
Impacto na Legibilidade e Manutenção
A indentação não interfere no funcionamento do código, mas sua influência na
legibilidade é inegável. Em cenários complexos, um código bem indentado facilita a
compreensão da estrutura, simplificando correções e atualizações. A organização
se torna vital, especialmente em grandes projetos.
A Prática da Indentação em Diferentes Linguagens
Independentemente da linguagem, a indentação é uma prática recomendada. Usar
as boas práticas de programação é obrigatório, e a indentação é um bom exemplo
para tornar o código mais compreensível.
INDENTE O SEU EXERCÍCIO
Adeque seu código, tente manter a indentação de acordo com a estrutura.
Bloco header
INDENTE O SEU EXERCÍCIO
Bloco main
Bloco footer
Quer aprender mais? Acesse o site e veja exemplos das principais tag estruturais e de
conteúdo, utilizadas neste exercício
[Link]
FIM
2026
Professora Stephany / Professor Dan Gussoni