Introdução ao HTML

A teoria

Vamos começar com um pouco de teoria e entender o que é o HTML.

O HTML – HyperText Markup Language (linguagem de marcação de hipertexto), é a linguagem padrão usada para criar e estruturar páginas na web e componentes diversos. Ou seja, com ela podemos:

• Construir estruturas robustas e personalizadas: Possuindo Tags com diversas utilidades para títulos, parágrafos, links, listas, formulários, entre outros; Torna possível a criação de páginas WEB com mais facilidade.
• Utilização de Hipertextos: O HTML possui uma característica bem importante que é a criação de hiperlinks, que permitem a navegação entre páginas dentro de um mesmo projeto e páginas externas, conectando páginas estáticas em qualquer outra página online.
• Compatibilidade com navegadores: Sim, o HTML possui compatibilidade com qualquer navegador existente (Google Chrome, Mozilla Firefox, Microsoft Edge), trazendo toda a estrutura visivelmente agradável ao usuário.
• Integração com estilos e lógicas: Entregando a estrutura da página, o HTML consegue implementar códigos de estilização (CSS), para trabalharmos com o design do layout e criação estética de componentes e códigos lógicos (JS), para trazermos mais interações e dinamicidade para o usuário desses mesmos componentes.

Mesmo assim, não conseguiu compreender a finalidade do HTML e quando devemos usá-lo?

Relaxa, irei resumir o que foi falado até agora. O HTML é uma linguagem de estrutura de páginas onde permite que possamos trabalhar com outras linguagens complementares de estilização e lógica e navegar em outras páginas a partir de links.

Farei uma analogia bastante simples para que compreenda a devida atuação dessa linguagem de marcação na criação de qualquer projeto WEB. Irei citar o CSS e JS em alguns momentos por fazerem parte da tríade do desenvolvimento WEB. Porém, vá guardando esses termos, pois iremos abordá-los mais adiante. Vamos lá! Imagine um corpo humano. Agora, dividindo-o em camadas, temos:

A estrutura óssea, a base que sustenta nosso corpo e protege nossos órgãos.

Trazendo para o mundo WEB, seria equivalente ao nosso HTML, onde temos: a estruturação, componentização e organização de nossos elementos e da própria página.

Nossas características (ênfase em nossa estética), onde são definidas: a tonalidade de nossa pele, cor dos olhos, tamanho, altura, peso, entre outros detalhes.

Novamente, trazendo para o mundo WEB, seria equivalente ao nosso CSS, onde temos: a estilização de nossos componentes e páginas, como: tamanho e cor da fonte e planos de fundo, arredondamento nos campos de texto e outras muitas estilizações que podem ser feitas nessa linguagem de estilização.

E por fim, nossas ações, atos: enxergar, raciocinar, falar, mexer, cheirar, andar, pegar, entre outros comportamentos.

Quando aplicado no mundo WEB, seria equivalente ao nosso JS, onde temos a criação de elementos iterativos: transformação de elementos a partir de ações feitas pelo usuário, validações de formulários, cálculos e entre outras aplicações lógicas.

A formatação

Previamente, precisamos saber que assim como todo arquivo criado em um computador possui um formato de arquivo (normalmente categorizado), os arquivos HTML também possui seu próprio tipo de arquivo. Esse formato de arquivo, geralmente é uma sigla presente após o nome do arquivo, como: “arquivo.txt”. Vejamos a seguir o que são esses formatos e qual seria o dos arquivos HTML.

• Para arquivos de texto: “.txt”.
• Para arquivos executáveis (Windows): “.exe”.
• Para arquivos de estilização: “.css”;
• Para arquivos lógicos (JS): “.js”;
• E para arquivos de marcação: “.html”.

Então, como nossa primeira etapa é a construção do esqueleto de nosso projeto, iremos conhecer as nossas famosas Tags e as principais que compõem a estrutura inicial desse projeto. Falaremos a seguir sobre essas tais “Tags”.

As Tags

O que são essas tão citadas Tags?

As Tags são instruções distintas, fornecidas pela linguagem, que irão nos guiar a construir, da maneira correta não somente nosso projeto pessoal, mas qualquer projeto já existente. Previamente, precisamos saber que existem 2 tipos de Tags:

• As Tags de Abertura e Fechamento: São Tags que, geralmente, precisam de algum conteúdo dentro delas. Normalmente temos:
  • Parágrafo: “<p>Olá, sou um parágrafo!</p>”;
  • Título: “<h2>E eu, um título!</h2>”;
  • Botão: “<button>Já eu, um botão!</button>”
• As Tags Isoladas (ou auto-fechamento): São Tags auto-suficientes, onde as Tags não precisam de conteúdo dentro delas. Então temos:
  • Campos de texto: “<input type=”text”>”;
  • Imagens: “<img src=”diretorio/imagem.png”>”;
  • Meta: “<meta charset=”utf-8″>”;

Caso não tenha compreendido o conceito de Tags, a seguir teremos um exemplo simples e seu respectivo resultado nos navegadores:

<!DOCTYPE html>
<html>
<head>
    <title>My First Project</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>and welcome to my project!</p>
    <a href="https://www.site.com">Visit our website!</a>
</body>
</html>

Calma, eu sei que você viu todas essas novas Tags, mas irei explicar cada uma delas a seguir:

• <!DOCTYPE html>: É uma Tag declaração que serve para informar ao navegador em qual versão do HTML o seu documento está sendo desenvolvido. No caso, nessa formatação, estamos trabalhando com o HTML5.
• <html>: É onde começa o documento HTML. Toda estrutura de “cabeça” e “corpo”, precisam estar dentro dessa Tag.
• <head>: Como citado anteriormente, essa é a “cabeça” do documento HTML. É nela onde colocamos os metadados, estilos, links para importar códigos e recursos externos (CSS, JS e Fontes personalizadas) e o título da página. O conteúdo presente nessa Tag não é visível para o usuário.
• <title>: Exemplo de Tag exclusiva da “cabeça” do site. É nela onde colocamos o título da nossa página. Esse título é o único recurso perceptível ao usuário, mas não por aparecer na estrutura do nosso site, mas sim, por seu conteúdo estar presente na aba do navegador.
• <body>: Aqui é onde a magia acontece. Todos os componentes e estruturas são desenvolvidos dentro dessa Tag. É nela que o usuário irá interagir na sua página, clicando em botões, preenchendo formulários, entre outras ações.

As demais Tags serão abordadas uma por uma a medida que evoluirmos no aprendizado, ok?

As Metatags

E as Metatags?

As Metatags são instruções HTML que, são inseridas na “cabeça” do código e apesar de não serem visíveis ao usuário, servem para fornecer informações que podem ser lidas pelos navegadores, redes sociais, motores de busca, entre outros serviços.

Abaixo, mostrarei algumas Metatags mais utilizadas e como devemos aplicar em nosso código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Olá, sou o Felipe Almeida e sou um profissional de TI que possui uma grande paixão em resolver problemas complexos e criar soluções inovadoras.">
    <meta name="keywords" content="HTML, CSS & JS">
    <meta name="author" content="Felipe Almeida">
    <title>My First Project</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>and welcome to my project!</p>
    <a href="https://www.site.com">Visit our website!</a>
</body>
</html>

• <meta charset=”UTF-8″>: É utilizada para definir a formatação do idioma do site. Sua finalidade consistia em corrigir problemas que caracteres especiais e acentuações (á, ã, é, ç, entre outros) possuíam nos navegadores.
• <meta name=”description” content=”My project page”>: Aqui, definimos a descrição do nosso projeto. Essa descrição é mostrada nos resultados de pesquisa dos navegadores.
• <meta name=”keywords” content=”HTML, CSS & JS”>: Definimos palavras chaves para facilitar para quando as pessoas forem buscar nos navegadores essas mesmas palavras, encontrarem nosso projeto com mais facilidade.
• <meta name=”author” content=”Felipe Almeida”>: Serve para especificar o autor do projeto.

Temos Metatags que são utilizadas para compatibilidade visual em outros dispositivos e integração com redes sociais, também. Ou seja, no geral, as Metatags são utilizadas para otimizar o SEO, facilitando a leitura nos motores de busca dos navegadores.