HTML, o esqueleto da Internet

Essas quatro letrinhas são as abreviações de HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. A versão mais atual é o HTML 5, e é exatamente essa que vamos usar como referência no post.

O primeiro princípio do HTML é que todas as marcações começam entre <> e terminam com </>. Isso é o que chamamos de tags ou elementos. Dentro dos elementos podemos ter também os atributos, que são definições adicionais que dão mais informação ao elemento a que se referem.

O HTML possui duas tags, etiquetas principais, que definem as macro partes do site: o <head> e o <body>.

O <head> é a área onde ficam as meta-informações sobre a página. E o que são meta-informações? O nome “meta” indica justamente isso: são informações sobre as informações que vão estar na página.

Muito subjetivo? A gente explica melhor: é no <head> que ficam as informações que não são diretamente direcionadas para os usuários da página, e sim para o navegador. O <head> agrupa as descrições, palavras-chave, autoria do projeto, entre outros itens essenciais para identificar o site da melhor forma possível através do seu conteúdo.

O <head> também concentra uma informação muito importante: a codificação de caracteres. A UTF-8 é uma das mais utilizadas, por ser um sistema de codificação universal que abrange acentos e caracteres especiais, como os chineses. Para isso temos que incluir a tag abaixo:

<meta charset="UTF-8">

Se vocês já viram algum site dar esse defeito abaixo, é resultado de um erro nesta parte da programação.

Atenção
Erro de Codificação

O <body> é onde a estrutura do site em si é definida, com todos os elementos que serão inseridos dentro dele, como parágrafos, itens, títulos e subtítulos, etc.

Então, vamos dar uma olhada em como HTML se inicia:

<html>

    <head>
          Todas as meta-informações do documento HTML
    </head>
    <body>
          Site em si
    </body>
</html>

Dentro do <body> podemos inserir uma série de tags para falar para o computador o que queremos. Por exemplo, quando inserimos <p>, dizemos “aqui começa um parágrafo de texto” e, quando colocamos </p>, indicamos que o parágrafo terminou. Vamos ver um pedaço do HTML do site da Programaria para entender melhor como tudo funciona (observações em cinza):

<html>
    <head>
          cabeçalho do site
        <meta charset="UTF-8">
        <title>site do curso eu progr{amo}</title>
                    indiquei o nome do site que vai aparecer na aba do navegador
        <link rel="stylesheet" type="text/css" href="style.css">
                    coloquei onde estão as referências do CSS que ele tem que ler (vamos aprender nos próximos textos)
    </head>
          fechei o head
    <body>
          abri o corpo do site
        <header>
                    dentro do corpo do site coloquei um cabeçalho na página (não confunda com o cabeçalho do projeto, o head que está ali em cima)
            <img id="logo-img" src="http://www.programaria.org/cursos/euprogramo/resources/img/logo-programaria-salmao.svg" alt="Logotipo da Programaria">
                               dentro do cabeçalho, inseri uma imagem com alguns atributos. Src é o local onde a imagem está e alt é um atributo que explica a imagem. Isso é muito importante, principalmente para pessoas com deficiência visual, pois o atributo alt contém a descrição da imagem. Através dessa descrição, os softwares de acessibilidade conseguem interpretar o conteúdo para quem não consegue enxergar.
            <nav>
                             coloquei menu de navegação. Aqui coloco botões que levam às diferentes seções do site
                <a href="#apresentacao">(esse é o nome da seção) apresentação (esse é o nome do botão)</a>
                <a href="#missao">missão</a>
                <a href="#html">html</a>
                <a href="#css">css</a>
                <a href="#materiais">materiais</a>
            </nav>
                             fechei o navegador
        </header>
                   fechei o cabeçalho
        <section id="apresentacao" class="largura-total">
                    Criei uma seção que tem como id “apresentação” e, além disso, possui uma class ‘largura-total’. Assim, minha seção deixa de ser uma seção genérica e passa a ser uma seção com identificação única e pertencente a uma classe com características comuns.
            <h1> curso eu progr{amo} </h1> Inseri um título principal
            <h2> Explore este universo </h2> Inseri um título secundário
            <img src="img/astronauta-olhando.svg" alt="ilustração de uma astronauta olhando para o céu"
id="astronauta-olhando" /> Coloquei outra imagem
       </section>
                 fechei a seção
       <div id="ilustracao-foguete">
                 abri uma nova divisão… Divisão? Mas qual a diferença entre divisão e seção? Em termos práticos, nenhuma. A gente só incluiu aqui para mostrar que as duas tags podem ser usadas para agrupar elementos, mas a tag section tem um valor semântico que indica que todos os elementos dentro dela tem uma relação entre si, enquanto que a div é um agrupamento genérico de elementos. Desde o HTML 5 é preferível usar <section> para envolver elementos que tenham relação semântica entre si, do que <div>. Mas na prática funcionam da mesma forma.
             <img src="img/foguete.svg" alt="ilustração de um foguete" id="foguete"/>
             <img src="img/rastro-foguete.svg" alt="ilustração do rastro de um foguete" id="rastro-foguete"/>
        </div>
    </body>
</html>

Você percebeu que usamos várias tags diferentes no exemplo acima, né? Não é preciso saber todos os códigos do HTML de cabeça (ninguém sabe!). Por isso, colocamos como referência alguns sites no final do post, em que é possível consultar tudo o que você precisa para montar sua primeira página!

Outro ponto importante: o código acima está indentado (com margens diferentes para cada elemento). As programadoras fazem assim para tornar mais visual a hierarquia das informações. Isso porque o HTML têm uma ordem que determina o comportamento dos elementos: se for parceiro, o elemento se comporta de um jeito; se for subordinado, de outro.

Difícil de entender? A gente simplifica. A indentação funciona como uma estrutura de caixinhas em que uma fica dentro da outra ou ao lado, dependendo do caso.

hmtl

 

Por último, não podemos nos esquecer de salvar o arquivo do código, que terá a extensão .html. E, dica parceira: se o arquivo for a página principal do site, o chamamos de index.html. Uma boa-prática para se evitar erros de leitura dos diferentes navegadores é sempre nomear os arquivos com letra minúscula, não colocar acentos e caracteres especiais e, além disso, não utilizar espaços (utilize sempre ‘meu-codigo.html’ em vez de ‘Meu código.html’, por exemplo).

Se quiser continuar aprendendo e montando o seu projeto, navegue pelos links abaixo e aguarde os próximos textos em que explicaremos o CSS, a linguagem que define a aparência do site!

https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
http://www.w3schools.com/

 


Vivian Peres é jornalista formada pela Unesp com MBA em marketing pela ESPM. Trabalha com comunicação corporativa há mais de dez anos. Mas seu maior sucesso aconteceu em setembro de 2015: a chegada do seu filho Francisco.


Textos do Curso Eu Programo

Este conteúdo foi escrito com base na Aula 02 do Curso Eu Programo, de introdução à programação e desenvolvimento web. Veja outros textos baseados no material do Curso Eu Programo, clicando aqui

Comentários

Leave a Reply

Your email address will not be published. Required fields are marked *