Anatomia Documento
Estaremos vendo nesta aula sobre a Anatomia do documento HTML e como ver o nosso HTML, além do preview.
Se abrirmos o documento .html pelo navegador estaremos vendo a nossa página e se clicarmos em ver o código fonte dela, estaremos vendo o HTML que escrevemos no VSCode.
Agora na parte de anatomia de um documento HTML, temos este exemplo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Anatomia do Documento</title> </head> <body> <h1>Título</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis saepe similique perferendis mollitia a assumenda doloribus omnis, quidem tempore accusamus repudiandae. Accusamus, rem dolorum ad repellendus distinctio blanditiis praesentium nulla? </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis saepe similique perferendis mollitia a assumenda doloribus omnis, quidem tempore accusamus repudiandae. Accusamus, rem dolorum ad repellendus distinctio blanditiis praesentium nulla? </p> </body> </html>
O padrão seria esta forma.
<!DOCTYPE html> — diz ao navegador que estamos a trabalhar com HTML 5. <html></html> — o próprio HTML, elemento raiz, o inicio da cadeia. <head></head> — contém configurações importantes para página, mas não ainda o que o usuário vai ver.<meta> — onde vai representar vários tipos de metadados da página.
<title></title> — título da página. <body></body> — onde haverá conteúdo visual da página.Se quiser facilitar tudo digitando ! o emmet irá completar automaticamente.
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.