HTML (AULA 01)

HTML
Prof. Matheus Garrido

O que vamos ver hoje?
• Linguagens de Marcação
• Tags:
• Cabeçalho
• Elementos de Texto
• Elementos de Lista
• Elementos de Tabelas
• Elementos Especiais
• Formulários
Linguagens de
Marcação
O que são?
Linguagens de Marcação 👣
• Linguagens de marcação servem para marcar o texto ou
documento para que o computador possa interpretá-lo.
• São linguagens descritivas, não de programação.
• Descrevem a formatação do texto e outras coisas.
• Exemplos: HTML, XML, XHTML, Markdown, etc.

• A marcação é feita através de tags:
Tag de aberturta Tag de fechamento
<tag>Conteúdo</tag>
Elemento
• Tags podem ser aninhadas (nested):
<tag-pai>
<tag-filha>
Conteúdo
</tag-filha>
</tag-pai>
• Tags podem ter atributos:
<tag-pai atributo="valor">
<tag-filha outro-atributo="valor2">
Conteúdo
</tag-filha>
</tag-pai>
HTML
Nosso foco aqui.
HTML 🖇️
• Hyper Text Markup Language (Linguagem de
Marcação de Hipertexto).
• Linguagem específica para sites.
• Define a estrutura da página: os elementos que vão

estar no site.
HTML 🖇️
Página Web
head boddy
HTML 🖇️
• Dica: Para criar uma estrutura padrão HTML no vscode:
• Digite “!” e aperte a tecla tab
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<p>Meu conteúdo</p>
</body>
</html>
Head
Cabeçalho da página.
Head 🙆‍♀️
• Contém informações de configuração do site.
• Título da página Realizar o link com arquivos externos.
• Definição de Metadados.
• E outros...
Head 🙆‍♀️
• Definindo o título da página:
<head>
<title>Minha Página</title>
</head>
Head 🙆‍♀️
• A tag link permite relacionar (linkar) o documento
HTML com outro documento externo.
• Normalmente usado para fazer um link com um arquivo

de estilização externo (.css).
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Head 🙆‍♀️
• A tag meta permite definir metadados da página.
• São dados que não são visíveis ao usuário, mas que são
utilizados para se indexar as páginas, facilitando o
trabalho de buscadores.
Head 🙆‍♀️
• A tag meta permite definir metadados da página.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Aula HTML">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Web Coding">
<meta name='robot' content="NOINDEX, NOFOLLOW">
</head>
Body
O corpo da nossa página.
Body 🧍
• É a parte que contém o corpo do site, a estrutura que o
usuário vai efetivamente ver.
Body 🧍
• Exemplos de estruturas:
• Textos formatados
• Lista de elementos
• Imagens
• Tabelas
• Formulários
• Botões
• Inputs
• Dropdown
• E outros...
Block-Level x
Inline
Como se comportam os elementos.
Block-Level x Inline 🍱
• Os elementos do HTML podem ser divididos em Block-
Level ou Inline.
• Um elemento block:
• Sempre começa numa nova linha;
• Ocupa toda a width (largura) disponível;
• Elemento padrão que define uma seção block.
<div> </div>
Block level
Block-Level x Inline 🍱
• Um elemento inline:
• Não começa numa nova linha
• Ocupa toda a width (largura) necessária
• Elemento padrão que define uma seção inline
<span> </span>
Inline
Vamos praticar! ✍️
Elementos de
Texto
Escrevendo textos na aplicação.
Elementos de Texto 📝
• Para colocar títulos utilizamos as tags de heading:
<h1>Título h1</h1>
<h2>Título h2</h2>
<h3>Título h3</h3>
Block Level
<h4>Título h4</h4>
<h5>Título h5</h5>
<h6>Título h6</h6>
• Para colocar parágrafos (ou seja, textos que não são
títulos) utilizamos a tag p:
<p>Sou um parágrafo</p>
Block Level:
<h2>Sou um título h2</h2>
<p>Já eu, sou um parágrafo</p>
• Para quebrar linha, usamos a tag break line:
<br>
Inline:
<p>Abaixo de mim tem um br</p>
<br>
<p>Acima de mim tem um br</p>
• Conseguimos formatar o estilo do texto também:
• Para deixar em negrito, usamos bold/strong:
<strong></strong>
<b></b>
Inline:
<p>Sou um parágrafo normal</p>
<p><strong>Sou um parágrafo com a tag strong</strong></p>
<p><b>Sou um parágrafo com a tag b</b></p>
• Para deixar com ênfase (famoso itálico), usamos i/em:
<i></i>
<em></em>
Inline:
<p><i>Sou um parágrafo com a tag i</i></p>
<p><em>Sou um parágrafo com a tag em</em></p>
• Para deixar com sublinhado (underlined), usamos u:
<u></u>
Inline:
<p><u>Sou um parágrafo com a tag u</u></p>
Vamos praticar
Escreva o arquivo HTML
necessário para renderizar
a página ao lado:
Elementos de
Lista
Escrevendo listas na aplicação.
Elementos de Lista 🗒️
• As listas HTML são feitas utilizando três tags:
• ol, ul, li.
<ol> <ul>
<li></li> <li></li>
Block Level
<li></li> <li></li>
</ol> </ul>
• ol representa uma lista ordenada (ordered list):
• Com ele, os elementos da lista (li - list item) serão
apresentados com números representando a ordem
<ol>
<li>Primeiro Item</li>
<li>Segundo Item</li>
<li>Terceiro Item</li>
</ol>
• ul representa uma lista ordenada (unordered list)
• Com ele, os elementos da lista (li - list item) serão
apresentados com bullets ("bolinhas")
<ul>
<li>Primeiro Item</li>
<li>Segundo Item</li>
<li>Terceiro Item</li>
</ul>
Vamos praticar
necessário para renderizar a
página ao lado:
Elementos de
Tabelas
Escrevendo tabelas na aplicação.
Elementos de Tabelas 📅
• A tag que define uma tabela HTML é:
<table></table>
• Para criar uma linha usamos a tag table row:
<tr></tr>
Block Level
• Informações de cada linha são colocadas na tag table
data: :
<td></td>
• A tag table header, permite definir títulos para as

colunas da nossa tabela:
<th></th>
Inline
• Exemplo de tabela:
<table>
<tr>
<td> Maça </td>
<td> R$2,00 </td>
</tr>
<tr>
<td> Banana </td>
<td> R$1,00 </td>
</tr>
</table>
• Exemplo de tabela:
<table>
<tr>
<th> Fruta </th>
<th> Valor </th>
</tr>
<tr>
<td> Maça </td>
<td> R$2,00 </td>
</tr>
<tr>
<td> Banana </td>
<td> R$1,00 </td>
</tr>
</table>
Vamos praticar
necessário para renderizar a
página abaixo:
Pausa para relaxar 😴 – 10 min
• Elementos de Texto
• h1-6, p, strong/b, em/i, u
• Elementos de Lista
• ol, ul, li
• Elementos de Tabela
• table, tr, th, td
Elementos
Especiais
Imagens e ancoragens de links.
Elementos Especiais ➕
• Conseguimos fazer um link para outros sites utilizando
a tag anchor:
<a href="https://www.uninassau.edu.br/">Site Uninassau</a>
Tag de links Atributo href Conteúdo

Vem de anchor Define para onde o link leva O que será mostrado ao usuário
Inline
• Conseguimos, também, fazer um link para outras
páginas no nosso próprio site:
<a href="home.html">Voltar para home</a>

Tag de links Atributo href Conteúdo
Vem de anchor Arquivo HTML da página O que será mostrado ao usuário
Inline
• A tag image permite colocar imagens:
A tag img não possui
fechamento
<img src="imagem.jpg" alt="Imagem">

Tag de imagens Define a fonte da imagem Define um texto alternativo
Pode ser absoluto ou relativo para ser exibido caso a imagem
não carregue
<img src="link-para-imagem" alt="Imagem">
Inline
Vamos praticar
• Faça as duas páginas
mostradas nas imagens ao
lado;
• O texto "Pokedex" deve

levar para a página da
Pokedex;
• O texto "Voltar" deve

voltar para a Home;
Elementos de
Formulário
Escrevendo formulário na página.
Elementos de Formulário 🧐
• Temos que começar nosso formulário utilizando a tag
form:
<form action="#"></form>
Define para onde serão enviadas as
informações do formulário.
No caso do "#", volta para a mesma
página.
Block Level
• O campo para o usuário inserir as suas informações é
representado dela tag input.
• Ele pode vir junto com uma outra tag: label. Ela é usada
para indicar o que o usuário deve escrever no input em
questão.
Inline
• O campo para o usuário inserir as suas informações é
representado dela tag input.
• Ele pode vir junto com uma outra tag: label. Ela é usada
para indicar o que o usuário deve escrever no input em
questão.
Inline
<label for="nome"> Nome: </label>
Define para qual Informação mostrada
Input é essa label na página
Id do campo, para ser identificado pelo for do label
<input type="text" name="nome" id="nome">

Define o tipo do Define o nome do Id do campo para
campo campo ao enviar o ser identificado
form pelo for do label
Inline
• Botões são representados pela tag button:
<button type="submit" > Enviar </button>

Define o tipo do botão. Informação
Nesse caso, mostrada na
submit envia o form página
Inline
• Exemplo de formulário:
<form action="#">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
<button type="submit">Enviar</button>
</form>
Vamos praticar
• Escreva o arquivo HTML necessário para renderizar
o formulário abaixo:
Resumo 🎯
• HTML é uma linguagem de marcação.
• Ela possui um cabeçalho (head) e um corpo (body).
• Os elementos Block criam uma nova linha e ocupam toda a width

disponível.
• Os elementos Inline não criam uma nova linha e só ocupam a

width necessária.
Resumo 🎯
• head:
• Title;
• Link;
• Meta.
Resumo 🎯
• body:
• elementos de texto:
• heading: h1 - h6 ⇒ Block;
• p ⇒ Block;
• strong / b ⇒ Inline;
• em / i ⇒ Inline;
• u ⇒ Inline.
Resumo 🎯
•body:
•elementos de lista:
• ol ⇒ Block;
• ul ⇒ Block;
• li ⇒ Block.
Resumo 🎯
•body:
• elementos de tabela:
• table ⇒ Inline;
• tr ⇒ Inline;
• th ⇒ Inline;
• td ⇒ Inline.
Resumo 🎯
•Outros:
•elementos especiais:
• a ⇒ Inline;
• img ⇒ Inline.
Resumo 🎯
•Outros:
• Elementos formulários:
• form ⇒ Block;
• label ⇒ Inline;
• input ⇒ Inline;
• button ⇒ Inline.
Dicas
• Para fins de estudos, os seguintes sites ajudam para
que não precisemos pensar em textos, dados ou
imagens de referência. São eles:
• Gerador de texto Lorem Ipsum (https://br.lipsum.com/) –
gera textos aleatórios que podem ser usados em títulos e
parágrafos.
• Gerador de Lorem Picsum (https://picsum.photos/) –
disponibiliza links de geração de imagens aleatórias que
podem ser utilizadas no href da tag img.
• Gerador de dados aleatórios (https://www.4devs.com.br/)
– site disponibiliza a geração de vários tipos de dados
(cpf, cep, e-mail, cnh, rg) aleatórios para serem usados
em formulários.
Dúvidas?
Obrigado!
Prof. Matheus Garrido

HTML (AULA 01)

Enviado por

Dados do documento

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

HTML (AULA 01)

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

Prof. Matheus Garrido

• São linguagens descritivas, não de programação.

• Descrevem a formatação do texto e outras coisas.

• Exemplos: HTML, XML, XHTML, Markdown, etc.

Tag de aberturta Tag de fechamento

• Linguagem específica para sites.

• Define a estrutura da página: os elementos que vão

• Título da página Realizar o link com arquivos externos.

• Normalmente usado para fazer um link com um arquivo

• Para criar uma linha usamos a tag table row:

• A tag table header, permite definir títulos para as

<a href="https://www.uninassau.edu.br/">Site Uninassau</a>

Tag de links Atributo href Conteúdo

<a href="home.html">Voltar para home</a>

<img src="imagem.jpg" alt="Imagem">

<img src="link-para-imagem" alt="Imagem">

• O texto "Pokedex" deve

• O texto "Voltar" deve

Id do campo, para ser identificado pelo for do label

<input type="text" name="nome" id="nome">

<button type="submit" > Enviar </button>

• Ela possui um cabeçalho (head) e um corpo (body).

• Os elementos Block criam uma nova linha e ocupam toda a width

• Os elementos Inline não criam uma nova linha e só ocupam a

Você também pode gostar