Você está na página 1de 18

Separando conteúdo e

informação
Aula 11
Pensamento
Computacional

Série: 1ª EM

Separando conteúdo e informação

Aula 11

2
O que vamos aprender?

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.

Acompanhe o vídeo da aula.

3
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>

4
Estrutura básica de uma página na web
● 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> versão html 4.0

<!DOCTYPE html5.0> versão html 5.0

<!DOCTYPE html> 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.

5
Estrutura básica de uma página na web
O código da página da Barbearia Alura deve ficar agora com a seguinte estrutura:

6
Estrutura básica de uma página na web
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.

7
Estrutura básica de uma página na web
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 abrindo o conteúdo

8
tag html fechando o conteúdo
Estrutura básica de uma página na web
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:

9
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.
10
Informando dados ao navegador
O código com a nova tag meta deve ficar com a seguinte estrutura (repare que essa tag não precisa de fechamento):

11
Informando dados ao navegador
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”>

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.

12
Informando dados ao navegador
O código com a nova tag lang deve ficar com a seguinte estrutura:

13
Informando dados ao navegador
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>

14
Informando dados ao navegador
Sem e com a tag title, respectivamente, a página aparecerá das seguintes formas:

Sem a tag title: Com a tag title:

15
Separando conteúdo e informação
O HTML é dividido em duas partes estruturais:
1ª 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.

<head>
</head>

2ª 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.

<body>
</body>

16
Separando conteúdo e informação
Para melhorar a visualização da estrutura do código, distinguindo o head do body, é importante aplicar a indentação.

tag head

tag body

17
Desafio
Agora é a sua vez de colocar em prática o que foi aprendido.
1. Defina a estrutura básica do HTML index.html e o idioma da página.
2. Passe as informações de renderização da página para o navegador e defina
o seu título.
3. Por fim, separe as informações e o conteúdo da página.

18

Você também pode gostar