Artigos HTML Tutoriais

O que é HTML? Guia Completo com Lista de Comandos Básicos HTML

O que é HTML? Aprenda o que é HTML com este Guia Básico

Introdução

Se você chegou até aqui se perguntando o que é HTML, certamente está construindo o seu próprio site, loja virtual ou seu blog. É natural, uma hora ou outra você vai se deparar com o código, já que HTML é uma linguagem utilizada para construção de websites.

Mas já adiantamos um erro comum. HTML não é uma linguagem de programação e sim de marcação, embora muitas pessoas buscam como programar em HTML. Vamos falar mais sobre isso no decorrer do artigo.

Então este tutorial é para você que não sabe nada sobre HTML e quer dar os seus primeiros passos no assunto. É um tutorial para iniciantes, combinado? Pode parecer assustador no início mas HTML não é complexo.

Então prepare-se para entender mais sobre o que é HTML, aprender o básico e aplicar os seus conhecimentos no seu projeto online.

O que é HTML?

HTML vem do termo em inglês HyperText Markup Language e em português significa Linguagem de Marcação de Hipertexto.

Em outras palavras, HTML é uma linguagem da web que utiliza de marcação para dar significados e assim organizar as informações de um site.

Para entender o que é HTML, o termo em si, precisamos mergulhar um pouco na semântica, e estudar o significado de cada palavra e também o seu sentido denotativo.

Linguagem

Linguagem porque serve para comunicar uma mensagem ao computador. É uma das linguagens mais usadas na hora de construir um site mesmo tratando-se de linguagem de marcação. O HTML sozinho faz um site. Mas será um site pobre, visualmente falando.

Marcação

A palavra marcação refere-se ao método que o HTML utiliza para dar o significado ao computador que no caso são as tags.

Para informar um computador que determinada palavra deve ser um título, por exemplo, é preciso utilizar uma tag, que significa etiqueta. Veja os exemplos.

Ao realizar a marcação dos textos com as tags (etiquetas) <h1> e </h1>, o computador entende o significado deste código como título de texto. E ao interpretar, temos este resultado na visualização do texto.

título em html

Viu só? As marcações utilizam tags para indicar como aquele texto deve ser interpretado. Mas observe agora como vamos alterar somente a palavra “título” para que fique em itálico.

Note que inserimos uma nova tag. Para o computador, a tag <i> e </i> significa itálico e por isso foi interpretado que o texto marcado por esta tag deveria ser transformado em itálico. Veja a nova leitura.

exemplo de título em html

Note que apenas a palavra título aparece em itálico, porque foi a única palavra marcada com esta tag. Mas vamos aprofundar nesta estrutura em alguns tópicos mais abaixo, quando falaremos de tags, elementos e atributos.

Hipertexto

Por hipertexto, entende-se o método do qual você transita pela web. No HTML isso acontece através de um texto de ligação (os famosos links), que é um texto personalizado com a tag <a>.

Veja como fica a linguagem HTML utilizando o hipertexto. Primeiro na versão original, em HTML.

inserir link em html

Agora veja como o computador vai reconhecer este código para o leitor.

A palavra Hostinger está com o hyperlink conforme configuramos com a tag <a>.

o que é html - história

História

E quando pensamos sobre o que é HTML, já parou para pensar como surgiu isso tudo? Códigos com significados para computadores… de onde veio?

Os “códigos escondidos” foram inventados pelo cientista da computação Tim Berners-Lee, em 1990, com o objetivo de ajudar a comunicação entre ele e um grupo de colegas.

A primeira versão foi baseada no SGML, uma linguagem que também utiliza tags para comunicação com os computadores, mas o diferencial do HTML foi a inclusão da tag <a> como vimos anteriormente.

códigos escondidos em html

HTML é uma linguagem de programação?

Não. No entanto, é bem comum cometer esse erro até saber exatamente o que é HTML.

Como já adiantamos, HTML é uma linguagem não é uma linguagem de programação e sim linguagem de marcação. Linguagem de programação é um método padrão para passar uma informação e instrução ao computador, é uma forma de comunicação.

Para compreender melhor, existem linguagens de marcação (HTML, XML, XHTML), linguagens de folha de estilos (CSS) e linguagens de programação (JavaScript, Json, Ruby on Rails).

Falando em Programação

A programação é um processo de escrita, comandos e instruções, através de algoritmos, para que haja comunicação com os computadores. Os algoritmos funcionam com um passo a passo para que a máquina saiba qual ação executar.

Para que a programação aconteça e a ação seja executada, existem as linguagens de programação. Como vimos acima, linguagem de programação é o método utilizado para que o computador entenda os algoritmos.

Os exemplos mais comuns de linguagem de programação usadas pelos programadores são:

Front End: Javascript, Json (frameworks: angularJS, NodeJS, ReactJS, VueJS(para desenvolvimento de sites mobile-first), EmberJS e MeteorJS)

Back End: Java, PHP, .NET, Phyton, Ruby on Rails.

Estes são só alguns exemplos. Confira este artigo completo sobre o que é programação e como aprender a programar de graça na internet.

Por que é importante aprender HTML

O HTML não é um assunto só para desenvolvedores e cientistas da computação. É uma linguagem muito usada no desenvolvimento de páginas de um site e tem uma dinâmica simples na construção de textos e codificação.

Portanto, todos que trabalham diretamente ou indiretamente na construção de páginas vão se deparar com o HTML em um momento ou outro. Isso vale para marketing, jornalistas e designers, por exemplo.

Sites e blogs construídos no WordPress utilizam o HTML como linguagem de marcação para designar o layout de um texto. O mesmo pode acontecer em plataformas de disparo de email marketing.

Além de saber o que é HTML, aprender HTML é essencial para que você crie e desenvolva páginas para o seu site ou seu blog sem precisar da ajuda de mais ninguém. Mas não se preocupe. Até o final deste conteúdo você será capaz de produzir um texto em HTML.

O que é HTML 5

Precisamos falar um pouco sobre o que é HTML 5. HTML é a linguagem de marcação mais usada na criação de páginas, mas assim como tudo que envolve tecnologia, passou por atualizações. O HTML5 nada mais é que a quinta versão do HTML, portanto, uma linguagem de marcação melhorada.

A principal diferença é que ele tem suporte de áudio e vídeo de alto nível que não fazia parte das especificações de versão em HTMLs anteriores. Com o HTML5, os desenvolvedores têm mais flexibilidade na criação de projetos e os usuários não precisarão baixar plugins adicionais para exibir multimídia em seu website.

Para saber mais sobre a diferença entre HTML e HTLM5, confira este artigo completo, que aborda também quais as vantagens do HTML5 para desenvolvedores e usuários.

como funciona o html

Como funciona o HTML

O HTML é um série de códigos escondidos utilizados para comunicação entre o autor do texto e o computador. Isso é feito através de tags. O texto deve ser salvo como um Arquivo HTML e poderá ser visualizado no navegador do usuário.

O navegador realiza sua função de ler o arquivo de texto e traduzir todas as tags e seus respectivos significados para a formatação que o autor configurou.

Estrutura básica de um HTML

Para isso, vamos analisar a estrutura básica de um HTML. O código que ficará escondido, na verdade não tem nada de segredo, viu?

Primeiro vamos te mostrar a estrutura e depois você vai poder baixar um arquivo com todos os comando essenciais para desenvolver sua página em HTML. Então não se preocupe com isso neste momento.

Veja como se compõe o HTML:

Observe que, nesta estrutura, todas as tags abertas são obrigatoriamente fechadas, como por exemplo <title> para abrir e </title> para fechar. O HTML é composto de tags, elementos e atributos.

E é aí onde entra a semântica do HTML. Tudo na linguagem de marcação tem um significado. Os símbolos ou os códigos representam algo, tem sua denotação embutida em cada um deles.

Tags

Tag é o sinal gráfico usado para simbolizar a presença de um elemento. As tags iniciam com o sinal de maior, <, e encerram com o sinal de menor, >, que servem justamente para informar ao navegador em qual trecho aplicar determinado elemento.

No exemplo abaixo, note que usamos tags para especificar dois elementos no HTML.

Ao ser renderizado pelo navegador, veja como fica:

colocar texto em negrito html

As tags determinaram que tratava-se de um parágrafo e também que somente as palavras “texto em negrito” deveria ser em bold, o popular negrito.

Veja outros exemplos:

  • Itálico

  • Mark
como destacar texto em html

No final deste artigo você receberá uma Lista Completa com Códigos HTML para criar sua página na web.

Elementos

Você já entendeu que os elementos estão inseridos dentro das tags, certo? Os elementos são os códigos utilizados para enviar uma ordem ao navegador referente aquele conteúdo demarcado.

Como você viu no exemplo acima, os elementos comunicaram ao navegador que somente a palavra “informação” deveria ser destacada em negrito.

Ou seja, as tags servem para marcar onde começam e terminam os elementos, e os elementos servem para informar qual a regra se aplica ao texto. Um elemento pode dizer se aquele trecho marcado por tags deve ser em itálico, lista ordenada, título, parágrafo e muitos outros.

Atributos

Atributos são os comandos que podem ser adicionados dentro do elemento e de suas respectivas tags. Veja abaixo que o style é o atributo dentro do elemento span.

como criar atributos em html

Criar um arquivo em HTML

Vamos mostrar como criar um arquivo HTML usando o Notepad++, que é uma ferramenta mais leve e vai te forçar a utilizar os comandos básicos.

Outras ferramentas mais robustas como o Sublime 3, Atom e PHPstorm têm o recurso auto complete, ou seja, quando você cria um documento e salva como .html, ao digitar “<ht”, o esqueleto já se completa automaticamente.

Mas vamos considerar que você não sabe dessa super dica e precisa criar um arquivo do zero, ok?

Os comandos apresentados aqui são os comandos para montar a estrutura básica do HTML. No próximo tópico você terá um arquivo com todos os elementos e atributos do HTML, incluindo uma versão atualizada para HTML5.

  1. Abra um arquivo no Notepad++
  2. Copie e cole os comandos abaixo.
  3. Clique em “Salvar como” e escolha a opção “HTML”.
Viu como é simples? A estrutura do HTML é a definição do documento (HTML, na linha 1), o cabeçalho (na linha 2), o corpo (linha 3) e o fechamento do documento (linha 4).

Para dar continuidade, você pode inserir títulos, <title>, e parágrafos, <p>, para construir sua página na web.

Agora veja o resultado após ser processado pelo navegador.

como criar comandos básicos em html

Pronto. Agora você tem os comandos básicos para criar uma página em HTML. Para acessar esta página pelo navegador, não esqueça de salvar o arquivo no formato HTML.

Lista de Comandos Básicos HTML

Se o Google ganhasse em dinheiro por cada vez que alguém pesquisa como usar HTML, eles estariam milionários! Isso não quer dizer que o HTML é difícil. Mas ter todas as tags reunidas em um só documento pode ganhar muito mais tempo na hora do trabalho.

Ter o documento certo com todos os importantes atributos do HTML, para listas, formulários, formatação de texto e estrutura de documentos pode até salvar vidas. Parece exagero mas é verdade.

Este documento vai ser muito útil para qualquer pessoa que desenvolve páginas na web e ainda não tem familiaridade com HTML. E até mesmo para quem já é expert no assunto mas entre uma tag e outra, esquece qual comando deveria usar.

Considere então que este é o seu guia para criar sua página em HTML do jeito que você quer e mantenha sempre por perto.

Acessar Lista de comandos básicos HTML

Lista de comandos básicos html

Conclusão

O HTML serve para estruturar o conteúdo das páginas de um site, utilizando de tags, elementos e atributos semanticamente definidos.

Após a estrutura do seu texto com essa linguagem de marcação, a parte visual do seu site deve ser feita via CSS e Javascript.

E a dica é para que todos que estão envolvidos com alguma parte do processo de criação e desenvolvimento de um site, se dediquem para aprender o HTML básico e ter as noções necessárias para lançar um projeto. Então agora que você já sabe o que é HTML, mãos à obra!

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
39
/mês*

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!