Passo 1 de 5
Começar pela declaração doctype
Reconheça o doctype, coloque-o no início do documento e entenda sua função no navegador.
Trilha de aprendizado · Nível 1 · Tutorial 4
Montar a estrutura-base de um documento com doctype, html, head e body, separando informações sobre a página do conteúdo que será exibido.
Começar pela declaração doctype
Reconheça o doctype, coloque-o no início do documento e entenda sua função no navegador. 1 min
Usar html como elemento raiz
Delimite o elemento raiz com as tags de html, mantendo o doctype antes da abertura. 2 min
Separar head e body
Organize head e body dentro de html, separando informações sobre o documento do conteúdo da página. 2 min
Exibir um texto de teste
Insira uma frase no body e confira o que aparece na página ao abrir o arquivo no navegador. 2 min
Montar e conferir a estrutura completa do exercício
Monte a estrutura-base sem copiar um modelo, confira o resultado no navegador e revise a função de cada parte. 3 min
Passo 1 de 5
Reconheça o doctype, coloque-o no início do documento e entenda sua função no navegador.
Comece o documento com esta linha, antes do elemento html:
<!doctype html>Apesar da aparência, <!doctype html> é uma declaração, não uma tag de elemento. Ela não tem tag de fechamento e também não é um elemento vazio.
Qual orientação está correta para começar o documento?
A declaração <!doctype html> ativa o modo de padrões do navegador.
Nesse modo, o navegador interpreta a página seguindo os padrões da web, em vez de recorrer a comportamentos de compatibilidade com páginas antigas.
Para ativar o modo de padrões, comece o arquivo com a declaração: __
Passo 2 de 5
Delimite o elemento raiz com as tags de html, mantendo o doctype antes da abertura.
O elemento html é a raiz do documento: todos os demais elementos ficam dentro dele.
Na estrutura que vamos montar, escreva a tag de abertura <html> e a tag de fechamento </html>, como neste trecho:
<!doctype html>
<html>
</html>Dica
O doctype permanece antes de <html>, fora do elemento raiz. O espaço entre <html> e </html> será preenchido nos próximos passos: este trecho ainda não é uma página completa.
<!doctype html>
<html>
____Qual tag completa a última linha, fechando o elemento raiz? Digite a tag inteira.
<html>
<!doctype html>
</html>Um colega colocou o doctype dentro de html. Qual ajuste deixa a declaração na posição correta em relação à raiz?
Passo 3 de 5
Organize head e body dentro de html, separando informações sobre o documento do conteúdo da página.
Dentro de html, usamos dois elementos irmãos: head e body. Um não fica dentro do outro.
head reúne informações e configurações sobre o documento.body é a região destinada ao conteúdo da página.Dica
Apesar do nome, head não é o cabeçalho que aparece no alto da página. O conteúdo exibido na área da página pertence ao body.
Associe cada entrada à descrição correta.
Toque em um item e depois no par correspondente.
Escreva head antes de body. Feche head antes de abrir body e feche body antes de fechar html.
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Dica
Neste exercício, head fica temporariamente vazio. Ele será preenchido no próximo tutorial. Esta é uma estrutura-base de estudo, ainda não um documento completo para publicação.
O arquivo já começa com <!doctype html> e <html>. Ordene as tags que vêm a seguir, deixando head e body vazios.
Passo 4 de 5
Insira uma frase no body e confira o que aparece na página ao abrir o arquivo no navegador.
Na estrutura que você montou, escreva Meu primeiro teste entre <body> e </body>, sem acrescentar novas tags. Usaremos uma frase sem acentos nem caracteres especiais para manter o foco na estrutura.
<!doctype html>
<html>
<head>
</head>
<body>
Meu primeiro teste
</body>
</html>Na área da página, o navegador exibirá a frase. O doctype e as tags estruturais não aparecem como texto: eles orientam a interpretação do documento.
Dica
O head continua vazio neste exercício. Ele será completado no próximo tutorial; esta ainda não é uma página pronta para publicação.
Faça o teste no seu arquivo local:
.html.<body> e </body>.Qual texto apareceu no navegador? Entre quais tags ele está no arquivo? Se o resultado foi diferente do esperado, descreva o que você viu.
Escreva pelo menos 5 caracteres (0/5).
Passo 5 de 5
Monte a estrutura-base sem copiar um modelo, confira o resultado no navegador e revise a função de cada parte.
Em um arquivo HTML em branco, monte de memória a estrutura estudada, usando a declaração doctype e os elementos html, head e body.
Deixe head vazio por enquanto e coloque o texto Meu primeiro teste no local destinado ao conteúdo da página. Escreva explicitamente as tags de abertura e fechamento dos elementos.
Cole seu código abaixo antes de consultar o exemplo.
Meu primeiro teste, sem exibir o doctype nem as tags estruturais.Dica
Ver o texto na página não basta para confirmar a estrutura. Confira também, no arquivo, a posição do doctype, o aninhamento e os fechamentos.
Depois do teste, responda brevemente:
Se o resultado foi diferente do esperado, registre o que aconteceu.
Resumo
Parabéns! Você concluiu: Montar a estrutura básica do documento HTML
Guarde seu arquivo para continuar. O head ficou vazio apenas neste exercício: a estrutura-base ainda não é um documento completo para publicação. No próximo tutorial, você acrescentará as configurações iniciais.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
