bg cover

Introdução ao HTML

Prof. Me. Danilo Bueno

HTML

HyperText Markup Language
A linguagem de marcação padrão para descrever a estrutura dos documentos exibidos na web.
Consiste em uma série de elementos e atributos que são usados para criar um documento e estruturá-lo de maneira significativa.

Anatomia de um elemento

São delimitados por tags
Escritas usando parenteses angulares (< e >).

HTML não é case-sensitive. No entanto, é uma prática recomendada escrever todas as tags em letras minúsculas para maior consistência e legibilidade.

bg contain

Aninhamento (nesting)

Existe uma maneira certa e uma errada de fazer.
Devem ser fechadas na ordem inversa em que foram abertas.

Exemplo correto:

<p>Meu cachorro é <strong>muito</strong> preguiçoso.</p>

Exemplo errado:

<p>Meu cachorro é <strong>muito</p> preguiçoso.</strong>

Elementos vazios (void)

Nem todos os elementos seguem o padrão de abertura e fechamento

Elementos vazios são elementos de fechamento automático e representados apenas por uma tag.
Não existe uma tag de fechamento para um elemento vazio.

<p>Meu cachorro é <br> muito preguiçoso.</p>

Atributos

contem informações extras sobre o elemento
são formados pelo conjunto chave-valor

w:1100

o nome do atributo, seguido pelo sinal de igual
o valor do atributo, envolvido em aspas duplas

Atributos Boleanos

é um atributo que representa valores true ou false.
São os atributos escritos sem valores

<!--Atributo Booleano-->
<input type="checkbox" checked>

<!--Mas podem ser escritos com valores-->
<input type="checkbox" checked="checked">

bg cover

Títulos e parágrafos

A maioria dos textos estruturados consiste em títulos e parágrafos, se você está lendo uma história, um jornal, um livro, uma revista, etc.

Parágrafos

Parágrafos são representados pela tag <p>

<p>Eu sou um parágrafo</p>
<p>Eu sou um novo parágrafo</p>

Espaço em branco

As tags vazias <br>, <hr> e <wbr> podem ser usadas para quebrar linha, gerar uma linha horizontal e sugerir quebra de palavras

<p>Eu sou um parágrafo com <br>quebra de linha</p>
<hr> <!--a linha funciona como um separador-->
<p>Eu sou um parágrafo com uma <br>quebra de linha</p>
<p>Pneumoultra<wbr>microscopicossilico<wbr>vulcanoconiótico</p>

Títulos (Headings)

Títulos são representados pelas tags <h1> até <h6>

<h1>Eu sou um título de nível 1</h1>
<h2>Eu sou um título de nível 2</h2>
<!-- continua até o heading 6 -->
<h6>Eu sou um título de nível 6</h6>

Boas práticas (headings)

De preferência, você deve usar um único <h1> por página;
Certifique-se de usar os títulos na ordem correta na hierarquia.
Tente usar no máximo três níveis por página, a menos que considere necessário.

Enfatizando o texto

<em> (ênfase): para enfatizar ou estressar um pedaço de conteúdo.
<mark> (destaque): para identificar ou destacar texto que seja de alguma forma relevante (highlight)
<strong> (importância): identifica o texto como tendo forte importância.

<p>Aviso: É <strong> proibido</strong> culpar o GPS.</p>
<p>Você chegou ao seu destino. <em>Finalmente</em>.</p>
<p>Atenção ao buraco na <mark>Rua do Pneu Furado</mark>.</p>

Itálico, Negrito e Sublinhado

Os elementos de ênfase anteriores têm semântica clara.
As tags <i>, <b> e <u> surgiram para escrever negrito, itálico ou sublinhado em uma época em que o CSS ainda era mal suportado.
Elementos como este são conhecidos como elementos de apresentação e não devem mais ser usados porque a semântica é importante para a acessibilidade, SEO, etc.

Foram temporariamente depreciados do HTML

Ferramentas Essenciais

💻 Editor de Código: organizar e colorir o texto para facilitar a leitura. Exemplos: VS Code, Sublime Text, Atom.
🌐 Navegador (Browser): você cria no editor e visualiza o resultado no navegador. Exemplos: Google Chrome, Mozilla Firefox, Microsoft Edge.
🛠️ Ferramentas de Desenvolvedor (DevTools): pressione a tecla F12 para abrir. Serve para inspecionar seu código, achar erros e testar mudanças ao vivo.

Como organizar os arquivos

📁 meu-projeto/
├── 📄 index.html       # <-- Página principal   
├── 📄 sobre-nos.html   # <-- Página secundária
├── 📁 imagens/
└── 📂 produtos/
    ├── 📄 index.html  # <-- Página inicial da seção "produtos"
    └── 📄 mouse-gamer.html

O servidor web sempre procura por um arquivo padrão para exibir quando alguém acessa uma pasta do seu site.

Por convenção, este arquivo se chama index.html ‼️

Como nomear seus arquivos

✅ Use apenas letras minúsculas: evita problemas em servidores que diferenciam Arquivo.html de arquivo.html.
✅ NUNCA use espaços: espaços viram %20 na URL, o que é feio e pode quebrar links.

Como nomear seus arquivos

✅ Use hífens (-) para separar palavras: politica-de-privacidade.html: o Google entende hífens como separadores de palavras, o que ajuda no SEO.
✅ NÃO use acentos ou caracteres especiais: garante compatibilidade máxima com todos os servidores e sistemas. Exemplos: ç, !, ?, á

Obrigado!

[email protected] · website/docs · github