Hyper Text Markup Language é o que significa a sigla HTML. Em português podemos falar Linguagem de Marcação de Hipertexto. É a linguagem fundamental para a construção de páginas da internet. É ela que fornece a estrutura e o conteúdo para tudo o que você vê online.
É conhecida como a porta de entrada para o desenvolvimento web. Com ela você pode construir websites incríveis. Entenda mais sobre essa linguagem com a leitura completa deste artigo.
O que é HTML e sua história
O HTML não é considerado uma linguagem de programação por não criar funcionalidades dinâmicas, mas ainda assim é muito importante quando falamos de desenvolvimento web e criação de páginas ou sites para a internet.
A Linguagem de Marcação de Hipertexto compõe a maioria das páginas da internet ou das aplicações online. Ela está presente diariamente nas nossas vidas, quando abrimos qualquer página da internet, inclusive esse blog que está lendo agora mesmo 😊 .
O HTML é a linguagem que mostra ao navegador da internet como um conteúdo deve ser apresentado e a sua estrutura básica. Sem ele, a web seria apenas um texto corrido, sem imagens, links, títulos, tabelas e tudo o mais que deixa a formatação de um site mais amigável.
São as regras escritas em HTML que vai organizar o conteúdo daquilo que você deseja mostrar em uma página. Essas regras são chamadas de Tags, que vamos explicar mais a frente. Ao digitar a URL (ou endereço da página que quer acessar), o navegador vai ler ou interpretar as tags e então apresentar a informação como definido pelo desenvolvedor do conteúdo.
Veja como criar e estilizar um formulário HTML e CSS.
A primeira versão do HTML foi publicada em 1991 pelo físico suíço Tim Berners-Lee. Essa primeira versão possuía 18 tags. Hoje, já temos mais de 140 tags e o HTML é considerado o padrão oficial da web. Uma grande evolução não é mesmo? Mas ainda assim, a linguagem é simples se comparada a outras linguagens de programação.
Mas o que é que realmente faz o HTML?
- Define a estrutura da página: organiza os elementos como títulos, parágrafos, listas, imagens e vídeos. Cada um desses elementos é representado por uma tag específica.
- Cria hiperlinks: conecta diferentes páginas da web permitindo a ligação com outros conteúdos.
- Incorpora mídias: vídeos, sons, imagens e muito mais.
- Formata o texto: itálico, negrito ou
riscado. Defina a fonte e o estilo dos seus parágrafos. Centralize, alinhe a esquerda ou a direita.
O HTML certamente manteve-se importante por estar sempre em evolução. Sua aplicabilidade é infinita, principalmente quando é combinada com outras linguagens de programação, como CSS, JavaScript e PHP.
Com o domínio do HTML você pode dar vida às suas ideias em uma página da web. Seja em um blog pessoal ou um site profissional. Diversos recursos online estão disponíveis para te ajudar a conhecer mais sobre html e todas as suas funcionalidades.
Estrutura básica de um documento HTML
A estrutura básica de um documento em HTML é composta pela estrutura principal, o cabeçalho e o corpo que são representadas pelas tags <!DOCTIPE html>, <head> e <body>1. Claro que, para uma página apresentar um conteúdo mais bonito, vamos usar muitas outras tags, mas essa é a estrutura principal.
Para ser um documento válido, obrigatoriamente a estrutura tem que conter essas tags.
Sempre deve existir o código <!DOCTYPE html>, ele é obrigatório e deve ser a primeira linha do seu documento. Esse código é a instrução para seu navegador ler o site da melhor maneira.
Os elementos básicos de um documento em HTML são:
ELEMENTOS
TAGS
ATRIBUTOS
Os ELEMENTOS, representam as partes estruturais de conteúdo de uma página, como os parágrafos, os títulos, as listas e as imagens. É composto por uma ou mais tags.
As TAGS são as unidades básicas de construção do HTML e que definem os diferentes elementos da página. Cada tag possui um nome de abertura <nome da tag> e um outro de fechamento </nome da tag>.
Já os ATRIBUTOS fornecem informações adicionais sobre as tags, como tamanho da fonte, endereço de uma imagem, cor do texto. São escritos dentro da tag de abertura e possuem um nome e um valor, separados por um sinal de igual (=).
Por fim, além de definir a estrutura do seu site2, o HTML também conta com elementos a nível de blocos, que são usados principalmente para definir as áreas do site.
Tags e atributos essenciais
Como vimos, as tags são as unidades básicas de um documento HTML e são elas que vão instruir ao seu navegador como apresentar uma página da web. É possível usar quantas tags quiser dentro do universo de 142 tags existentes no HTML 5, mas já vimos que algumas são essenciais e obrigatórias para que a sua página não apresente um erro.
Há dois tipos de tags HTML, as que não precisam de fechamento e as que precisam de fechamento:
Tag sem fechamento
<tag/>
Tag com fechamento
<tag> </tag>
Se de um lado as tags indicam a maneira de exibição de um elemento, por outro lado, os atributos vão descrever as características dos elementos. Descrevendo em pormenor, os atributos são usados para personalizar as tags, modificando a sua funcionalidade ou a sua estrutura.
Conheça as tags essenciais de um arquivo HTML:
<!DOCTYPE html>
Informa a versão do HTML que está sendo usada ao navegador. Como já alertamos, essa é uma tag obrigatória para que o seu documento seja válido. Mas há outras tags que devem ser usadas obrigatoriamente para que a estrutura do documento seja construída.
<html></html>
Outro elemento básico de um documento estruturado em HTML. Todos os documentos devem iniciar e finalizar com essa tag.
<head></head>
Contém informações interessantes para o navegador fazer a leitura do documento, não para as pessoas que estão a acessar o site. o HTML obriga a tag de conteúdo <title></title> dentro da tag head, que permite definir o título do documento, que será visto na aba da janela do navegador
<body></body>
Essa tag contém o corpo de um documento HTML, que é todo o conteúdo visível do site. Aqui é obrigatório que existam uma ou mais tags dentro dele, como as tags de títulos (que vão do H1 ao H6) e a tag de parágrafo.
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao HTML</title>
</head>
<body>
<h1>HTML: o básico para iniciantes</h1>
<p>texto de introdução</p>
<h2>O que é HTML e sua história</h2>
<p>texto descritivo do H2</p>
<h2>Estrutura básica de um documeneto HTML</h2>
<p>texto descritivo do H2</p>
<h2>Tags e atributos essenciais</h2>
<p>texto descritivo do H2</p>
<h3><!DOCTYPE html></h3>
<p>texto descritivo do H3</p>
<h3><html></html></h3>
<p>texto descritivo do H3</p>
<h3><head></head></h3>
<p>texto descritivo do H3</p>
<h3><body></body></h3>
<p>texto descritivo do H3</p>
<h2>Como criar um arquivo HTML simples</h2>
<p>texto descritivo do H2</p>
<h2>Referências</h2>
</body>
</html>
Além dessas tags mais estruturais, temos outras tags muito utilizadas:
- <p></p> - Parágrafo
- <h1></h1> - Título 1 ou título com maior valor hierárquico
- <h2></h2> - Sub-título
- <h3></h3> Sub-subtítulo e assim sucessivamente até o h6 é o título de menor valos hierárquico.
- <a></a> - Âncora para um link
- <q></q> - Citação
- <img></img> - Imagem
- <li></li> - Lista
- <video>
- <audio>
Veja ainda as novas funcionalidades do HTML 5.
Como criar um arquivo HTML simples
Um arquivo HTML é como o conteúdo de uma página web será exibido, por isso, o primeiro passo para se criar um arquivo html é planejar o conteúdo e como você deseja que ele seja exibido. Pode fazer esse desenho em uma folha de papel ou em um Power Point, por exemplo. Pode ainda usar um site para design como o Canva.
Em seguida, é importante escolher um editor de código HTML. Esse software será usado para escrever o seu site. Você pode fazer isso em um editor de texto padrão, mas um software vai ter ferramentas para facilitar o processo como o auto-completar, a integração, a detecção de erro e o destaque de sintaxe. Um dos editores de código HTML mais usados é o Notepad++, já que é leve e gratuito.
Uma vez que você já planejou a estrutura e já tem o software, é hora de começar a escrever o código do seu site. Agora que você já sabe a estrutura básica, isso pode se tornar mais fácil. Comece sempre digitando essa estrutura e posteriormente insira o conteúdo e as outras tags que deseja:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Após inserir essa estrutura básica, é hora de incluir outras tags, elementos e seções dentro da tag body. Você pode inserir imagens, mas lembre-se de selecionar imagens de acesso livre para compor a parte visual do seu site. Não viole os direitos autorais, é importante buscar imagens de um banco de dados de acesso livre ou ainda tirar as suas próprias fotos.
É importante que o conteúdo também seja original e único. Sempre que usar outros sites como referência, dê os devidos créditos. Espero que essas dicas tenham sido úteis e você consiga começar a tirar do papel as suas ideias. Se ainda tem dúvidas sobre HTML, que tal agendar uma aula particular com um dos nossos Superprof para tirar todas as suas dúvidas?
Referências
- 2024, GETTING STARTED - Um guia para iniciantes na área de web - Estrutura básica - Iniciando o código básico de HTML
- 2023, MDN contributors - Estrutura de documentos e sites
Gostou desse artigo? Deixe uma nota!
Loading...
