HTML
Tudo que você precisa saber pra começar a estudar HTML
HTML
Kai Pimenta
Designer de formação e atualmente front end,
participei do XP 34 como hacker.
Trabalho com ecommerce, VTEX IO e React. :)
linkedin.com/kai-pimenta
github.com/kpmnta
#PraCegoVer: Fotografia da autore Kai
Pimenta.
O que vc vai ver
nesse material
1. O que é HTML
2. Anatomia de um elemento HTML
3. Estrutura base
4. Principais tags
5. Semântica
6. SEO
7. Acessibilidade
8. Validator W3C
#PraCegoVer: Ilustração de um
homem na frente do computador
digitando códigos.
HTML
O que é HTML
HTML é uma sigla que em inglês e significa
HyperText Markup Language, traduzindo fica mais ou
menos Linguagem de Marcação de Hipertexto. Ou seja,
o HTML não é uma linguagem de programação, mas
sim uma linguagem de marcação! Para ser uma
linguagem de programação é necessário poder aplicar
uma lógica e ter a habilidade de gerar dados.
Para ser uma linguagem de programação é necessário
poder aplicar uma lógica e ter a habilidade de gerar
#PraCegoVer: Imagem escrito dados
HTML 5 representando o logo
da linguagem.
HTML
O que é página
Web?
Uma página Web é um documento publicado na
Rede Mundial de Computadores (WWW), que pode ser
aberto usando um navegador. Essas páginas estão escritas
em HTML com adições de outras linguagens como CSS e
JavaScript, no entanto, vamos concentrar nossa atenção em
apenas uma delas: HTML.
#PraCegoVer: Imagem
representando várias páginas
web, um em um monitor, outra
um tablet e outra no celular.
HTML
O que é uma Tag?
Era uma vez uma princesa, muito bela
Tags são ordens inseridas dentro do texto que desejamos inserir.
e de pele branquinha, chamada
Branca de Neve. A mãe de Branca de Ou seja, uma tag é uma ordem ou um comando para uma função
Neve , uma bondosa rainha, havia
dentro do conteúdo que se deseja mostrar. Exemplo:
morrido quando ela era ainda um
bebê.
Alguns anos depois, o pai de Branca <center> Era uma vez uma princesa, muito bela e de pele
de Neve casou-se com uma mulher
branquinha, chamada Branca de Neve. A mãe de <strong>
muito bonita, mas também malvada
e cruel Branca de Neve </strong>, uma bondosa rainha, havia morrido
quando ela era ainda um bebê </center>
A madrasta da princesa era muito
vaidosa. Todos os dias ficava diante de <p> Alguns anos depois, o pai de Branca de Neve casou-se com
um espelho encantado e, para se uma mulher muito bonita, mas também <u>malvada e cruel</u>
encher de orgulho, perguntava:
</p> A madrasta da princesa era muito vaidosa. Todos os dias
Espelho, espelho meu, ficava diante de um espelho encantado e, para se encher de
existe no mundo alguém orgulho, perguntava: <h2> - Espelho, espelho meu, existe no
mais bela do que eu? mundo alguém mais bela do que eu?</h2>
HTML
Tags HTML
Você conseguiu perceber no exemplo anterior que as tags colocadas entre símbolos “<>”
exerceram um comando de formatação no texto?
● <center>: Deixou o texto centralizado.
● <strong> : Deixou a frase em negrito.
● <p> : pulou uma linha.
● <u>: deixou sublinhado.
● <h2>: deixou o texto em formato de título.
HTML
Anatomia de
um Elemento
HTML
Para trabalhar com HTML devemos sempre usar as tags de
marcação, abrindo e fechando a tag conforme necessário.
Existem algumas tags que não precisam ser fechadas,
tag de abertura abrem e fecham ao mesmo tempo, como por exemplo a tag
<img />.
<p> Olá, Mundo! </p>
tag de fechamento
HTML
Estrutura base
do HTML
Todas as páginas HTML precisam ter as seguintes tags
● <html></html> - essa tag serve para delimitar o código que
será usado. Todo o restante da página deve ficar dentro da
tag html.
● <head></head> - é onde colocamos as meta tags e outras
informações que não serão renderizadas para o usuário,
mas que auxiliam no SEO e rankeamento do site.
● <body></body> - Todo código que deve ser renderizado em
tela fica dentro da tag body.
HTML
Tags Básicas
Vamos aprofundar nosso estudo pelo mundo do HTML revisando algumas das tags mais simples:
1. Título de uma página;
2. Parágrafos;
3. Títulos e subtítulos;
4. Listas;
5. Tags com atributos:
a. Imagens;
b. Links;
c. Formatação de textos;
6. Tabelas;
7. Tag <div> , Tag <span>, Id e Class.
HTML
E dentro do <head> o que eu coloco?
No cabeçalho você deve ter o título do seu site!
01.
Título de uma página
O elemento <title> é sempre
usado dentro da <head> da página.
O título da sua página não aparece
no corpo do navegador, mas sim
na borda da sua janela. Exemplo:
<html>
<head>
<title>
Título de uma pagina #PraCegoVer: Imagem do navegador mostrando o titulo na aba.
</title>
</head>
<body>
Apostila Gama Academy - HTML
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
02.
Parágrafos
O elemento HTML <p> representa um parágrafo.
Em mídias visuais, parágrafos são representados
como blocos indentados de texto com a primeira letra
avançada e separados por linhas em branco.
<html>
<head>
<title>
Título de uma pagina
</title>
</head>
#PraCegoVer: Imagem do
<body>
navegador mostrando três
<p> Texto do primeiro parágrafo. </p> linhas de texto, sendo que
<p> Texto do segundo parágrafo </p> entre cada uma delas
existe um espaço em
sem a tag não pula linha!
branco que foi gerado pela
veja esse texto aparecer do lado. tag <p>
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
03.
Títulos e subtítulos
Títulos e subtítulos são implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor
importância. Um elemento de título descreve brevemente o tópico da seção em que ele está. Exemplo:
<html>
<head>
<title>
Título de uma pagina
</title>
</head>
<body>
#PraCegoVer: Imagem do
<h1>Cabeçalho nível 1</h1> navegador mostrando os
<h2>Cabeçalho nível 2</h2> tipos de titulo em formato
<h3>Cabeçalho nível 3</h3> de lista sendo a primeira
linha com letras grandes
<h4>Cabeçalho nível 4</h4> representando <h1> e a
<h5>Cabeçalho nível 5</h5> última pequena
<h6>Cabeçalho nível 6</h6> representando <h6>
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Listas
Os tipos mais comuns de lista são ordenadas <ol> e não ordenadas <ul>:
Listas Ordenadas são para listas onde a ordem dos itens importa, como uma receita. Essas são
envolvidas em um elemento <ol>.
Listas não ordenadas são para listas onde a ordem dos itens não importa, como uma lista de
compras, por exemplo. Essas são envolvidas em um elemento <ul>.
Cada item dentro das listas é posto dentro de um elemento <li> (item de lista).
Na próxima página você pode conferir um exemplo de cada lista!
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Lista ordenada <ol>
Exemplo:
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head>
<body>
<ol>
<li> Quebre o ovo</li>
<li>Leve uma frigideira antiaderente</li> #PraCegoVer: Imagem do navegador mostrando
exemplo de lista ordenada com receita para fritar
<li>Tempere com sal</li> ovo conforme código do exemplo.
<li>Sirva a seguir</li>
</ol>
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Lista não ordenada <ul>
Exemplo:
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head>
<body>
<ul>
<li>Comprar arroz </li>
<li>Comprar feijão</li>
<li>Comprar carne</li> #PraCegoVer: Imagem do navegador mostrando
<li>Compra suco</li> exemplo de lista não ordenada com lista de
</ul> compras conforme código de exemplo.
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
05.
Tags com atributos - Imagem
As tags podem ser capazes de indicar o que fazer e como fazer. Para conseguir isso, utilizamos atributos dentro
das tags. Exemplo a tag para exibir uma imagem <img />, sozinha não tem nenhuma utilidade, pois precisamos
dizer qual é a imagem que desejamos mostrar, por isso incluímos o atributo chamado src.
Sempre que necessitarmos indicar um valor a um atributo em uma tag, é necessário colocarmos o nome do
atributo, seguido do símbolo de igualdade e em seguida o valor que desejamos colocar entre aspas.
<img src= ‘pizza.jpg’/>
src: É utilizado para indicar o nome da
imagem (precisa indicar o diretório).
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Tags com atributos -
Imagem
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head>
<body>
<img src='pizza.jpg'/>
</body>
</html>
#PraCegoVer: Imagem do navegador mostrando uma
ilustração de pizza com queijo escorrendo e tomates
em cima.
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
05.
Tags com atributos - Links
O elemento <a> em HTML (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web,
arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a>
precisará indicar o destino do link.
href: Indica a página ou seção que o
navegador deve acessar se o usuário
clicar no link.
<a href= ‘endereço da página’>
Texto que queremos mostrar </a>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Tags com atributos - Links
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head> #PraCegoVer: Imagem do navegador mostrando
a frase “Você deve clicar no link para saber mais
<body> sobre o desmatamento na Amazônia.”
Você deve clicar no link para saber mais sobre <a
href=’https://brasilescola.uol.com.br/brasil/desmata
mento-da-amazonia.htm’> o desmatamento na
Amazônia>
</a>
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
05.
Tags com atributos - Formatação de textos
A tag <font> serve para alterar a cor, o tamanho e tipo da fonte utilizado em seu texto. Os atributos que utilizamos
com essa tag são <color> que se refere a cor do texto, <face> que corresponde a fonte e <size> que está
relacionado ao tamanho. Utilizar várias vezes o comando <font> não é recomendado, pois existe uma forma
melhor de controlar os tipos de letras, usando CSS, que você irá aprender em breve.
<font face=‘Arial’size=‘12’color =‘red’/>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
04.
Tags com atributos -
Formatação de textos
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head> #PraCegoVer: Imagem do navegador mostrando
a frase “Estou testando a formatação de textos
<body> HTML”, sendo que a frase está com fonte Arial
<font face="Arial" size="12" color="red"> tamanho 12 e cor vermelha conforme o código
Estou testando a formatação de textos em HTML de exemplo.
</font>
</body>
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
06.
Tabelas
As tabelas em HTML são muito semelhantes ao estilo das planilhas de cálculo, pois as informações são
organizadas em linhas e colunas. A tag <table> indica onde começa e termina sua tabela, <tr> indica as linhas e
<td> indica as colunas.
<table>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<table>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
06.
Tabelas
<html>
<head>
<title>
Titulo de uma pagina
</title>
</head>
<body>
<table>
<tr> #PraCegoVer: Imagem do navegador mostrando
<td>A1</td> mostrando uma tabela com três colunas e duas
<td>A2</td> linhas conforme código do exemplo.
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td> Você pode utilizar atributos na tag
<td>B3 </td> <table>:
</tr>
bgcolor = colocar cor de fundo na tabela
<table>
</body>
border = indica se a borda deve ser visível
</html>
HTML
E dentro do <body> o que eu coloco?
Existem várias tags específicas, vamos citar algumas:
07.
Tag <div> , Tag <span>, Id e Class
A tag <div> é igual a tag <span>, ambas servem para delimitar e agrupar outros elementos em HTML.
O que as diferencia é que a tag <div> faz o agrupamento de elementos a nível de bloco e a tag <span> é a nível
de linha, mas ambas utilizam atributos do CSS (que você irá aprender mais pra frente),
A tag <div> e <span> devem ser estilizadas por um arquivo .css, mas para isso é preciso definirmos um <id> ou
<class> para ele.
As ids <id> são uma forma de identificar um elemento, e devem ser ÚNICAS para cada elemento. É como se
fossem impressões digitais de nossos dedos ou RGs. Através delas, pode-se atribuir formatação a um elemento
em especial.
As classes <class> são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir
formatação a VÁRIOS elementos de uma vez.
<div class="classe1">Div1</div> <span class="receitas">receita de bolo </span>
<div id="idUm">Div1</div> <span id="xícara">xícara de leite</div>
HTML
Semântica
O HTML surgiu em 1999 e o HTML5 é a versão mais recente dele, lançada em 2014. Suas principais inovações
são o fato de que só a partir do HTML5 foi possível rodar Javascript em sites, também foi criada as tags de
<audio> e <video> para substituir o uso do Flash.
Outra principal mudança foi a implementação das tags semânticas como <header>, <footer>, <nav>,
<section>... essas tags reforçam o significado do conteúdo, em vez de apenas definir sua aparência, ajudando
tanto os mecanismos de pesquisa, quanto leitores de tela a determinar o significado e o contexto do
conteúdo da web, melhorando tanto a usabilidade do usuário quanto o SEO da sua página.
HTML
Diferenças entre um HTML sem semântica e um que usa tags semânticas
HTML
SEO, o que é?
SEO é um termo muito usado em desenvolvimento web e ele vem do inglês: Search Engine
Optimization, pode ser traduzido para Otimização para Mecanismos de Busca e é um conjunto de
técnicas para otimizar o resultado do seu site em buscadores. Isso acontece através de um mapeamento
das informações coletadas, analisadas e colocadas em uma lista e de acordo com o quão relevante esse
site é para a busca do usuário.
No front end, juntamente com o uso de tags semânticas, as Meta Tags são as principais formas de
colocar essas técnicas em prática.
Quer saber mais sobre SEO? Nesse link o Neil Patel fala sobre 13 ferramentas de busca para usar em um
website.
HTML
Como otimizar o SEO do seu site
Use Meta Tags, elas são tags do HTML A descrição que você usa nas suas meta
que são usadas no head para descrever o tags aparecem no resultado de busca e deve
conteúdo, descrição e outras informações ter cerca de 160 caracteres: Ou seja, é
relevantes, otimizando o rankeamento nas necessário usar uma descrição que seja capaz
ferramentas de pesquisa do Google. de captar um usuário.
Para se aprofundar ainda mais sobre como as Meta Tags funcionam, clique aqui.
HTML
Outra vantagem de usar um HTML semântico é que torna seu código mais acessível, ou seja, dá mais
autonomia para que pessoas com deficiência possam navegar pelo seu site usando tecnologias como
leitores de tela.
Isso faz com que seu site fique mais fácil de ser compreendido e lido por leitores de tela porque o
leitor de tela lê cada elemento conforme progride pelo conteúdo, notificando ao usuário o que é um
parágrafo ou botão, etc.
O site do Mozilla tem um manual super completo de boas práticas em acessibilidade, incluindo quais
atributos, texto alternativo, mensagens e tags mais apropriadas pra você tirar de jeito essa questão.
HTML
Terminei meu
site, e agora?
Seu HTML tá pronto, seu site tá no ar e agora como
podemos saber se ele está rankeando bem?
Existe uma ferramenta chamada W3C Validation que faz
uma análise do seu código HTML e te dá algumas
informações e formas de melhorar ele.
Clique aqui para fazer um teste
Obrigade
