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

O código HTML é uma linguagem de marcação de texto que utiliza de tags para informar o que deve ser apresentado na internet, por exemplo, tags de links, de imagens e de textos (incluindo a formatação).

A maioria dos sites são criados em HTML, mas diferente do que muita gente confunde por aí, HTML não é uma linguagem de programação. Criar um site em HTML é muito simples e não requer nenhum conhecimento avançado ou programa específico para isso. 

O que você vai precisar

Para acompahar este artigo você vai precisar de:

  • Um bloco de notas.

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, como links, imagens e texto.

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>, que permite o hipertexto.

códigos escondidos em html

Para entender o que é HTML, 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 e informam a função de cada texto: cabeçalho, rodapé e corpo. 

Sintaxe do HTML

Tags

As tags são marcações que servem para comunicar o navegador como ele deve ler aquele arquivo, e as tags vêm dentro dos sinais que conhecemos como maior “<” para abrir, e menor “>” para fechar, exemplo: <p>.

Existem diversas tags e você não precisa se preocupar em memorizar todas elas. As tags básicas para contruir um site em HTML você vai guardar na memória com certeza.

Outro detalhe importante em relação as tags é a de que todas as tags que você abrir, devem ser fechadas, veja abaixo que a tag será fechada com um </i> no final da frase:

<i>Esta tag indica que este texto será em itálico</i>

No final deste artigo preparamos um PDF com os principais códigos HTML para você ter salvo no seu navegador e utilizar sempre que for criar seu site.

Elementos

O nome da informação que inserimos dentro das tags (< >) são chamados de elementos. Portanto, no tópico anterior você entendeu o que é uma tag e utilizamos o elemento itálico para exemplificar, portanto abaixo temos uma tag com elemento i.

<i></i>

Atributos

É possível acrescentar informações de comando dentro de algumas tags e assim personalizá-las, isso deve ser feito com o sinal de igual (=) e a informação deve ser inserida entre aspas. Veja abaixo que o style é o atributo dentro do elemento span.

como criar atributos em html

Ao explorar os atributos você consegue alterar o layout da página, adicionar cor, fonte, tamanho do texto, ou seja, personalizar a aparência.

Como Criar um documento HTML

Para criar um documento html do zero e que seja reconhecido pelo navegador, siga os passos abaixo:

1. Crie um documento no bloco de notas (recomendamos o editor Sublime, pois identifica um arquivo html e destaca as tags por cor) e salve, ainda que vazio, com o nome do seu arquivo. Exemplo: nome_do_arquivo.html

O .html é a extensão do arquivo, é assim que o seu editor de texto e o navegador sabem que esse arquivo é uma página de seu site.

2.Digite o esqueleto do html, conforme abaixo:

<html>
<head>
</head>
<body>
</body>
</html>

Pronto! Você tem o esqueleto, que são as tags de head (cabeça) e body (corpo), e agora pode começar a criar conteúdo em sua página. 

Criar ícone e título em HTML

Agora vamos inserir o ícone e o título da sua página na aba do navegador, como mostra a imagem abaixo:

Exemplo do head no html

  1. Insira o mesmo padrão de tags que vimos anteriormente porém dessa vez com as tags head, portanto copie e cole s tags abaixo:
<html>
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>Título do meu site</title>
</head>
<body>
</body>
</html>

Na tag <link> estará o seu link, onde adicionamos outros parâmetros para construir o ícone. E na tag <title> basta escrever o título do seu ícone.

2. Abra o seu documento e verá este resultado:

inserir ícone no site

Pronto, você já saber fazer o ícone do site e o título, mas e o resto? Como criar os menus e personalizar o seu site como vê nos sites por aí? Calma que agora é que vem a parte legal, lembra que o html é dividido em 2 partes? Cabeça <head> e Corpo <body>?

Agora você pode se aventurar no corpo do html, pois tudo que você vê em um site na internet fica dentro da tag body.

exemplo de estrutura de página em html

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

Criar conteúdo no corpo html

Título

<h1>Oi, sou um título em HTML</h1>

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.

<h1>Oi, sou um <i>título</i> em HTML</h1>

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

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).

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

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!

Kleverton K.

Desenvolvedor front-end, entusiasta de novas tecnologias voltadas para a parte de hospedagem de sites e criação de websites em WordPress, mais de 4 anos de experiência com a plataforma e muito foco em aprender mais sobre o mundo digital.

Deixe um Comentário

Deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comece a Economizar Agora!

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

Cadastre-se

Receba nossos conteúdos e novidades direto no seu e-mail!

 

Estamos cadastrando...

Pronto! Obrigado por se inscrever!

[href]
[href]