Curso de HTML5 e CSS3 – 1a. Aula

Os elementos básicos de uma pagina em HTML5

Assim como nas versões anteriores, uma página escrita utilizando o HTML5 também possui um conjunto básico de elementos. Segundo o W3C, a maior parte deles não é obrigatória, mas são fundamentais, pois nos auxiliam na delimitação  das áreas do documento. 

O primeiro elemento que devemos adicionar, à um arquivo HTML. é aquele de define o tipo de documento que está sendo construído, a este elemento damos o nome de Doctype. Dependendo da versão do HTML, ou, ainda, se for um documento um XHTML, a sintaxe deste objeto pode ser bem diferente. No caso do HTML5, o Doctype foi simplificado para: 

<!DOCTYPE HTML>

O segundo elemento que adicionados à pagina é aquele que  marca o inicio e o final do documento, bem como o idioma/linguagem no qual a página foi construída. A informação sobre o idioma é muito útil para os sites que realizam a tradução de páginas; com a informação sobre o idioma o tradutor não precisa tentar “adivinhar” o dialeto no qual a página foi escrita. O elemento html é formando por duas tags, uma de abertura e outra de fechamento, como podemos ver no exemplo abaixo:

<html lang="pt-br">

</html>

Seu atributo “lang” determina o idioma da página e aceita todos os valores indicados no documento  HTML Language Code Reference do W3C Schools e disponível no endereço https://www.w3schools.com/tags/ref_language_codes.asp

OBS: A grande maioria dos elementos do HTML são formados por um par de tags, uma de abertura e outra de encerramento, assim como, podem possuir  vários atributos, os quais são declarados na tag de abertura. No exemplo anterior, a tag de abertura do elemento httml possui o atributo lang, cujo valor é pr-br, informando que o texto do documento foi rescrito utilizando o dialeto  da Língua “Portuguesa” falado no “Brasil”.

Cabeçalho e Corpo

Todo documento HTML é dividido em duas grandes áreas: (i) o cabeçalho, que é definido pelo elemento head e o (ii) corpo do documento, definido pelo elemento body. No head inserimos, as informações que não serão renderizadas pelo agente do usuário (browser), como por exemplo o título do documento,  as meta tags, o CCS e os scripts utilizados na página. Já no elemento body incluímos todas as informações que serão renderizadas pelo navegador, todos os objetos que compões a DOM do documento fazem parte do corpo da página e estão contidas neste elemento.

Adicionando estes elementos, o código da nossa página fica igual à:

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
    <!-- Cabeçalho do Documento -->
</head>

<body>
    <!-- Corpo do Documento -->
</body>
</html>

Dentre os elementos que podem ser utilizados no head de um documento, temos aquele que define a codificação da página; alguns idiomas como o Português possuem caracteres que não fazem parte da tabela ASCII, estes caracteres são denominados de caracteres estendidos que são registrados de forma distinta dependendo a codificação utilizada. Atualmente a codificação mais utilizada nas páginas WEB é a UTF8.

<meta charset="UTF-8">

Outro elemento que podemos utilizar, dentro do head,  é o title; que define o título do documento e cujo conteúdo é apresentado na barra de título do navegador ou nas abas.

<title>HTML 5 - Modelo de Pagina</title>

Ainda podemos adicionar nesta área do documento uma ou várias tags com a localização do(s) arquivo(s) com as regras CSS que serão utilizadas na página.

<link rel="stylesheet" type="text/css" href="estilo.css">

Assim como, podemos ter o elemento script, o qual permite importar arquivos contendo os javascript, que poderão ser invocados no corpo do documento.

<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>

Nosso modelo de página

Combinando todos estes elementos temos o conteúdo de uma página básica, ou de um documento básico, cujo corpo esta vazio e ao ser interpretado pelo navegador apresentará uma página totalmente em branco.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="estilo.css">

    <script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>

    <title>HTML 5 - Modelo de Pagina</title>
</head>
<body>
    <!-- Corpo do Documento --> 

</body>
</html>

Este modelo  será utilizado no decorrer do curso como sendo o modelo de página em branco, e que será a base para todas as demais páginas. Mas uma página em branco não é um exemplo muito bom, então vamos incluir algum conteúdo no corpo da nossa página de exemplo.

<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
    <meta charset=”UTF-8”>

    <link rel="stylesheet" type="text/css" href="estilo.css">

    <script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>

    <title>HTML 5 - Olá Mundo</title>
</head>
<body>
    <!-- Corpo do Documento -->
    <h1>HTML 5: <small>Introdução</small></h1>
    <p> Olá mundo<p>
</body>
</html>

O código HTML5 anterior, quando carregado no Chrome produz a seguinte tela: