Introdução ao HTML5 - Tudo sobre tags e estrutura básica de código HTML

15/09/2022
QUAL A
PRIMEIRA
COISA QUE
VEM À SUA
MENTE?

POR QUE DEVEMOS
APRENDER HTML?
HTML5

15/09/2022
AS TAGS
Elas são quem define onde certa
parte termina e outra começa.
Pense no seu celular, por exemplo
Cada parte do seu celular foi
pensado para ser eficiente em
várias funções e ser o mais leve
possível. Com o site é a mesma
coisa: cada parte do código deve
ser pensada para ficar fácil de
entender e de modificar depois.

COMO AS TAGS SÃO ESCRITAS?
<NOME DA TAG>
</NOME DA TAG>
menor maior
menor maior
barra

TAGS PRINCIPAIS
◦ <!DOCTYPE html> e <html lang="pt-br">:
aqui colocamos que o arquivo que iremos trabalhar é um site e seu idioma
◦ <meta>:
são dados que descrevem o site de alguma forma
◦ <title>:
o texto que vai entrar na aba do navegador
◦ <body>:
é onde vai conter todo o seu site, a sua base
◦ <head>:
pense como se fosse o título de uma redação
◦ <main>:
é o texto principal
◦ <h(numero)>:
o tamanho da fonte (de 1 a 5, onde 1 é grande e 5 é o menor)

USANDO AS
TAGS, O
RESULTADO
PODE SER
ESSE

EXISTE UMA ORDEM
PARA AS TAGS?

ORDEM RECOMENDADA DAS TAGS
<!DOCTYPE html>
<html lang="pt-br“>
<meta charset="utf-8"/>
<title> Aba do navegador </title>
<body>
</body>
15/09/2022
Lembrando que sempre temos que escrever a
tag duas vezes: uma para abrir e outra, com
o traço, para fechar.
Aqui dentro, você vai apertar a tecla ENTER uma vez e inserir tudo o que o site
terá (imagens, links, textos, etc.)

...
<body>
<head>
<h1>Título do site</h1>
</head>
</body>
15/09/2022
Logo abaixo da tag de fechamento do <head>, vamos inserir mais uma, a
<main>. Ela só pode ser usada uma vez.
Perceba que as tags <head> e
</head> estão mais para frente em
relação ao <body>. Isso não é
necessário para o funcionamento,
mas ajuda na manutenção e no
desenvolvimento do site.

...
<body>
<head>
<h1>Título do site</h1>
</head>
<main>
</main>
</body>
15/09/2022
Aperte a tecla Enter entre <main> e </main>
Recapitulando, o <main> vai servir para
reter o nosso texto maior, nossa
“redação”.

...
<main>
<h2>Esse é o texto de teste. Eu poderia escrever latim, mas estou aprendendo
ainda, então</h2>
<h2>considere esse texto por enquanto para mensurar como é diferente escrever
aqui</h2>
<h3>P.S.: O Word é melhor para isso (não para sites no caso) 😁 </h3>
<br>
<br>
<h3>Como eu escrevi esse emoji? Use o botao Windows + Ponto (.)</h3>
</main>
...
Aqui usamos a <br> para passar o texto para a próxima linha e as tags <h2> para texto
maior e <h3> para um texto ligeiramente menor.

SEMPRE SALVE
SEU PROJETO
COMO
INDEX.HTML

15/09/2022
O QUE
APRENDEMOS
HOJE?
• O que é HTML?
• Para que serve e por que
devemos aprender?
• Como escrever um
código simples usando as
tags
• Como editar um código

Introdução ao HTML5 - Tudo sobre tags e estrutura básica de código HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introdução ao HTML5 - Tudo sobre tags e estrutura básica de código HTML

Semelhante a Introdução ao HTML5 - Tudo sobre tags e estrutura básica de código HTML (20)

Introdução ao HTML5 - Tudo sobre tags e estrutura básica de código HTML