Guia da linguagem HTML

Todos nós já nos perguntamos como os sites são criados? Neste guia, vamos abordar os principais temas da linguagem HTML. Certamente, ao final, teremos um entendimento solido dessa linguagem, e seremos capazes de responder a nossa pergunta, e, até mesmo de criar nossos próprios sites.

Formação Desenvolvedor Especialista Front-end

Conhecer a formação

O que é o HTML?

Primeiramente devemos entender o que é, e como ele surgiu. HTML, ou HyperText Markup Language, a tradução literal é: Linguagem de Marcação de Hipertexto. É uma linguagem utilizada para criar a estrutura e o conteúdo das páginas da web. Ele utiliza tags para marcar os diferentes elementos de uma página, como, por exemplo: cabeçalhos, parágrafos, imagens e links. Essas tags fornecem instruções aos navegadores sobre como exibir e organizar o conteúdo.

Essa linguagem foi desenvolvida por Tim Berners-Lee, no início dos anos 90 como parte do projeto World Wide Web (WWW). A fim de permitir que pesquisadores compartilhassem documentos de forma fácil entre computadores. Desde então, o HTML passou por várias atualizações para se tornar a linguagem que é hoje.

Mas, se quiser saber mais sobre a história do HTML, confira no artigo O que é o HTML?

Editores de código para desenvolver em HTML

Editores de código desempenham um papel essencial na criação de código HTML. Eles são ferramentas que permitem escrever e editar o código HTML de forma mais eficiente. Com recursos como realce de sintaxe, sugestões automáticas e verificação de erros. Editores de código tornam o processo de escrever código HTML mais fácil, mesmo que você seja um iniciante.

Existem vários editores de código populares amplamente utilizados para escrever HTML, alguns exemplos são, o Sublime Text, o Visual Studio Code, o Atom, o Notepad++ e o Brackets são alguns exemplos. A escolha do editor de código depende das preferências pessoais de cada desenvolvedor.

Você consegue saber sobre os editores de código de uma forma mais aprofundada no artigo Principais editores de código para desenvolvimento. Além disso, ele explica como funciona os principais editores de código, compatibilidade e pontos positivos de cada um.

Curso HTML5 + CSS3 - Primeiros passos

Conhecer o curso

Criando um documento HTML

Agora que sabemos o que é HTML, e onde começar a escrever. Vamos ver sobre as tags e como podemos estruturar o HTML e adicionar conteúdo na página.

Como as tag funcionam?

As tags são elementos fundamentais na linguagem HTML, elas são escritas entre os símbolos <, como, por exemplo, >. Essas tags são usadas para marcar e identificar diferentes elementos em um documento HTML. Como, por exemplo, títulos, parágrafos, imagens e links. Todo elemento escrito no HTML precisa estar dentro de uma tag. Aqui estão alguns exemplos:

<h1>
	Isso é uma tag de títutlo nível 1
</h1>
<p>
	Isso é uma tag de parágrafo
</p>
<a>
	Isso é uma tag de âncora
</a>

Estrutura HTML

Para entender melhor o HTML, vamos criar um exemplo de estrutura básica de um documento HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Este código representa a estrutura básica de um documento HTML. Começamos com a declaração DOCTYPE. Ela informa ao navegador que estamos usando a versão mais recente do HTML, chamada HTML5.

Dentro da tag html, temos duas seções principais: head e body. A seção head é usada para fornecer informações de configuração do documento. Como, por exemplo, o título da página, a codificação de caracteres, e outras configurações.

Em seguida, temos a seção body. Nela, adicionamos todo o conteúdo visível da página. É dentro dessa seção que você adiciona elementos como textos, imagens, links e outros.

Essa estrutura básica é o ponto de partida para criar uma página HTML. Contudo, à medida que você aprende mais sobre HTML, poderá adicionar mais elementos e atributos para personalizar sua página e criar interações mais avançadas.

No nosso canal do YouTube, temos um vídeo explicando com exemplo prático essa estrutura.

Tag de âncora

A tag de âncora, representada por a, desempenha um papel crucial no HTML. Ela permite a criação de links e a navegação entre páginas da web. Essa tag é essencial para estabelecer a conectividade e a interação entre diferentes partes de um site.

Ao usar a tag de âncora, podemos definir um destino para onde o link deve direcionar o usuário quando clicado. Isso pode ser outra página da web ou, até mesmo, uma seção específica dentro da mesma página. Além disso, ela pode ser usada para abrir um link em uma nova janela ou guia, facilitando a navegação sem interromper a experiência atual. Por exemplo, se você quiser adicionar no seu site um link para o site do para o YouTube, basta fazer dessa forma:

<a href="www.youtube.com">YouTube</a>

Como podemos ver no exemplo, a palavra dentro da tag é a palavra que ficará visível para o usuário. Para escolhermos onde queremos direcionar o usuário, neese caso, o site do YouTube, usamos o atributo href e, dentro das aspas passamos a URL que queremos.

Mas, caso querira saber mais sobre a tag de âncora recomendo a leitura do artigo Trabalhando com a tag âncora no HTML.

Curso HTML5 + CSS3 - Formulários

Conhecer o curso

Formulários HTML

Os formulários desempenham um papel essencial na interação entre os usuários e os sites. Permitindo a entrada e o envio de informações. Com a utilização de elementos como form, input, textarea e button, é possível criar uma variedade de campos para receber dados, como por exemplo, nome, e-mail e mensagens. Para alterar o tipo de dado que esperamos receber usamos o atributo type. Podemos muda-lo conforme nossa necessidade. Por exemplo, se quiser adicionar um campo para receber um número de telefone, usa-se no tel. Já para receber um campo de texto como o nome do usuário é o text.

O envio desses dados de um formulário é realizada através de um botão de submissão.

<button type="submit">Enviar</button>

Quando clicado, o botão acionará uma ação definida no servidor para processar as informações fornecidas. O formulário é uma ferramenta valiosa na obtenção de dados dos usuários de maneira eficiente. Aqui está um exemplo de um formulário HTML:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome">

  <label for="email">E-mail:</label>
  <input type="email" id="email">

  <label for="idade">Idade:</label>
  <input type="number" id="idade">

  <button type="submit">Enviar</button>
</form>

Nesse exmplo, é usado a tag label. Essa tag serve para rotularmos o input. A conexão entre o input e o label é feita através do atributo for no label, e usamos o atributo id no input.

Aqui na TreinaWeb, temos um artigo dedicado a esse assunto tão importante no front-end, o Trabalhando com formulários no HTML.

No entanto, se preferir, no nosso canal do Youtube, também temos um vídeo explicando como essa tag funciona.

O que é Semântica HTML?

Semântica HTML refere-se ao uso apropriado das tags HTML para atribuir significado e estrutura ao conteúdo de uma página. Uma vez que ao utilizar os elementos corretos de forma semântica, é possível fornecer informações claras sobre a função e o propósito de cada tag. Tornando assim, mais compreensível para os usuários e mecanismos de busca, como o Google.

Exemplos de tags semânticas:

header: usada para definir o cabeçalho da página ou de uma seção;
nav: usada para representar uma área de navegação;
article: essa tag serve para encapsular um conteúdo independente e autossuficiente;
section: usada para agrupar conteúdo relacionado dentro de uma página;
footer: utilizada para definir o rodapé da página ou de uma seção.

Alguns exemplos de tags não semânticas são:

div: geralmente usado para criar divisões genéricas ou agrupar elementos sem significado específico;
span: usado para estilizar ou manipular partes de texto em um contexto específico, sem atribuir significado semântico;
b: usamos para destacar texto em negrito, mas sem fornecer informações semânticas adicionais;
i: usado para deixar o texto itálico, mas sem acrescentar significado semântico.

No artigo, Semântica HTML: O que é e por que é importante, esse tema é abordado de forma completa.

Acessibilidade no HTML

A acessibilidade é à prática de tornar os conteúdos da web acessíveis a todas as pessoas. Independentemente das ferramentas das que estão sendo utilizadas para navegar pela web. É fundamental garantir que os sites sejam desenvolvidos levando em consideração padrões de acessibilidade. E decerto, precisamos pensar em práticas que facilite esse processo, como por exemplo, o uso adequado de estruturas semânticas, o fornecimento de alternativas textuais para conteúdos visuais, a utilização de cores com contraste e a garantia de que o site seja compatível com tecnologias assistivas, como leitores de tela.

Assim, ao adotar boas práticas de acessibilidade no HTML, os desenvolvedores podem garantir que as informações apresentadas em seus sites sejam compreensíveis por todos. Isso inclui a utilização correta de tags semânticas, como por exemplo, cabeçalho, parágrafos, listas e links, fornecendo uma estrutura clara para o conteúdo. Temos um artigo dedicado a esse tema fundamental para nós, desenvolvedores, o Acessibilidade no HTML.

Curso HTML5 + CSS3 - Apresentação de Dados

Conhecer o curso

Conclusão

Em resumo, podemos concluir, que não são apenas tags que precisamos entender para escrever um bom site. Precisamos, entender também, sobre semântica, acessibilidade, conhecer os atributos que podemos usar em cada tag, entre outros pontos. Mas, tenho uma notícia muito boa a todos! A TreinaWeb, possui a formação completa de front-end, onde você consegue saber tudo que precisa sobre o HTML e CSS. Dentro da nossa formação abordamos temas essenciais para tornar você um desenvolvedor completo.

Esses são alguns dos cursos que fazem parte da nossa formação: