-
Definir algumas estruturas básicas do HTML.
-
Separar conteúdo de informação no código.
-
Utilizar novas tags do HTML.
-
Organizar o código para melhorar a visualização.
Estrutura básica de uma página na web
Estamos criando uma página web da Barbearia Alura em uma versão recente do HTML (versão 5), utilizando o Sublime Text 3. Mas como o navegador reconhece que o arquivo salvo com a extensão .html é uma página da web? Os navegadores recentes, como o Google Chrome, o Firefox e o Microsoft Edge, fazem o reconhecimento de maneira automática. No entanto, outros navegadores ou versões antigas podem não fazer esse isso. Então, no momento de escrever um código em HTML, devemos inserir a tag estrutural DOCTYPE. A tag DOCTYPE tem a função de garantir que o navegador compreenda e transforme corretamente a informação do código na página da web. Por padrão, a tag DOCTYPE tem a seguinte estrutura:
<!DOCTYPE html>● A tag DOCTYPE inicia com o ponto de exclamação “!”. ● Em seguida, escrevemos DOCTYPE com letras maiúsculas. ● Finalizamos informando, em letra minúscula, a versão do HTML que estamos utilizando.
<!DOCTYPE html4>
<!DOCTYPE html5.0>
<!DOCTYPE html>versão html 4.0
versão html 5.0
versão html 5
A tag DOCTYPE não precisa de um fechamento como outras tags, como no caso de <p> e <strong>. A versão mais recente do HTML (versão 5) deve ser escrita apenas como html, não
devemos escrever o número.
O código da página da Barbearia Alura deve ficar agora com a seguinte estrutura:
<!DOCTYPE html>
<html lang="pt-br">
<h1>Sobre a Barbearia Alura</h1>
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba.
Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda.
O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</html>Ao salvarmos o arquivo anterior e abrirmos no navegador (por meio do duplo clique), podemos perceber que nada muda no texto:
A mudança ocorreu na forma como o navegador realiza a leitura da página e transforma as informações.
A próxima tag que utilizaremos é a de conteúdo, representada pela tag html. Sua função é marcar o que está contido na página e que será renderizado no navegador. Ou seja, tudo que será exibido.
<html>
Assim como todas as outras tags de conteúdo, a tag html deve abrir a primeira linha, antes do conteúdo, e fechar a última linha, depois do conteúdo.
tag html fechando o conteúdo tag html abrindo o conteúdo
Para facilitar a leitura do texto, vamos aplicar espaço nos parágrafos utilizando a tecla tab. Essa técnica é chamada de indentação e serve para dar destaque a determinadas estruturas do código. A estrutura final deve ficar da seguinte forma:
Informando dados ao navegador
Como garantir que a página abra corretamente em navegadores que estão em idiomas diferentes do português? Quando o navegador do celular ou do computador está configurado para o idioma inglês, os acentos podem não aparecer corretamente, por exemplo. Para resolver esse problema, vamos utilizar novas tags. A primeira delas é a tag meta, que informa algo ao navegador e é escrita da seguinte forma:
<meta charset=”UTF-8”>
● O código charset= indica uma informação a ser passada para o navegador; charset é uma abreviação da expressão em inglês character set, que significa “conjunto de caracteres" (alfabeto) e é a que vamos utilizar. ● O UTF-8 é um conjunto de caracteres que engloba as linguagens ASCII e Unicode (usadas para representar textos em computadores). Ele contém a maioria das línguas da Europa, da América Central, América do Norte e América do Sul. Assim, resolvemos problemas de acentuação, como ç (cedilha), à (crase), ~ (til), etc.
O código com a nova tag meta deve ficar com a seguinte estrutura (repare que essa tag não precisa de fechamento):
<meta charset=”UTF-8”>
Com isso, o usuário pode optar que o navegador traduza o que está escrito no página da web, caso o navegador não esteja configurado para o idioma português, por exemplo. Além de informarmos o alfabeto, devemos informar o idioma que vamos utilizar na página. Fazemos isso com a tag lang, cuja origem é language (idioma, em inglês), seguida de pt-br, para indicar que o idioma será o português utilizado no Brasil:
<html lang="pt-br">
O código com a nova tag lang deve ficar com a seguinte estrutura:
<html lang="pt-br">
Ao abrirmos a página no navegador, podemos reparar que na aba é exibido o nome index.html. Para mudar a forma como o nome da página aparece, vamos utilizar a tag title (título, em inglês):
<title>Barbearia Alura</title>
Sem e com a tag title, respectivamente, a página aparecerá das seguintes formas: Sem a tag title: Com a tag title:
O HTML é dividido em duas partes estruturais: 1a parte: tag head (cabeça, em inglês) – indica as informações que queremos dar ao navegador. Por exemplo, as tags meta e title são informações a serem dadas para o navegador, por isso elas devem estar dentro da tag head.
2a parte: tag body (corpo, em inglês) – indica as informações que queremos exibir na página. Por exemplo, as tags que indicam parágrafo e itálico.
<head>
</head>
<body>
</body>Para melhorar a visualização da estrutura do código, distinguindo o head do body, é importante aplicar a indentação.
tag head
tag body
Desafio
Agora é a sua vez de colocar em prática o que foi aprendido.
- Defina a estrutura básica do HTML index.html e o idioma da página.
- Passe as informações de renderização da página para o navegador e defina o seu título.
- Por fim, separe as informações e o conteúdo da página.