Arquivos da categoria: Sem categoria

Introdução ao HTML

A base para a montagem de sites é o domínio do HTML. O HTML (Hypertext Markup Language) é uma linguagem de marcação que se baseia em etiquetas (tags) que definem o comportamento dos elementos do documento. Para começar um documento HTML é importante definir alguns pontos importantes do documento. Um deles é a declaração sobre o tipo de documento. Isso é feito a partir do  !DOCTYPE:

<!DOCTYPE html>

Com isso informamos o navegador que estamos trabalhando no padrão HTML5. A principal tag para definir um documento HTML é a própria tag html. Assim como a maioria das tags, deve ser aberta e depois fechada. Como é a tag principal, deve ficar no início e no final do documento.

<!DOCTYPE html>
<html>
</html>

Todo documento HTML possui duas partes que o estruturam: HEAD e BODY.

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
   </body>
</html>

Em HEAD, se concentram as informações sobre o documento, como título, meta-dados e links para outros documentos necessários para o funcionamento da página.

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
   </head>
   <body>
   </body>
</html>

O uso do title não fica visível no corpo da mágina, mas na barra do navegador. Vemos abaixo o resultado no Safari em um MacOS. Title

 

No exemplo há um problema com a codificação dos caracteres, pois esta não foi avisada sobre qual padrão adotar. Para resolvê-lo, basta declarar a meta tag “charset”.

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
      <meta charset="utf-8">
   </head>
   <body>
   </body>
</html>

E o resultado será ajustado para a codificação para o padrão UTF-8, que admite acentos.

Title2

Em BODY fica o conteúdo do documento, propriamente dito. Aí entram títulos, parágrafos, tabelas, imagens etc.

Abaixo adicionamos um título (h1), um parágrafo (p) uma lista não ordeanda (ul) e três tópicos (li).

<!DOCTYPE html>
<html>
   <head>
      <title> Esse é o título da página </title>
      <meta charset="utf-8">
   </head>
   <body>
       <h1> Esse é um título (h1) </h1>
       <p> Esse é um parágrafo (p) </p> 
       <ul>
          <li> Esse é um tópico (li) dentro de uma lista (ul) </li>
          <li> Esse é outro tópico (li) dentro de uma lista (ul) </li>
          <li> Esse é mais um tópico (li) dentro de uma lista (ul) </li>
       </ul>
   </body>
</html>

E o resultado que vemos na página do site é o seguinte:

Body

Para fazer o download do arquivo mostrado aqui, basta acessar esse link.