O HyperText Markup Language – HTML é uma linguagem de marcação de texto criada por Tim Berners-Lee e amplamente utilizada para definir o conteúdo de uma página web.
Contrariamente do que se lê atualmente, o HTML não é uma linguagem de programação, mas sim uma linguagem de marcação.
A marcação (markup) é usada para anotar textos, imagens e outros tipos de conteúdos para posterior exibição num navegador web.
A marcação HTML possui “elementos” especiais, entre os quais são: <html>, <head>, <title>, <body>, <header>, <articles>, <section>, <footer>, <div>, <img>, entre tantos outros.
Outro conceito interessante é o de hipertexto ou hiperligações, já que estes permitem ligar entre si várias páginas dentro de um ou vários sites.
Criação de um documento HTML
Para um navegador ler um documento HTML é preciso antes de tudo, criá-lo, e aí sim, sair codando o que precisar.
Portanto abra o editor de código fonte de sua preferência. Aqui na Dassweb é comum utilizarmos o Visual Studio Code, na sequência clique em “Arquivo” >> ”Novo Arquivo”. Agora basta colocar o nome que deseja dar ao arquivo seguido da extensão .html e selecionar o diretório onde desejará salvá-lo.
É muito comum utilizar a nomenclatura “index.html” para a página principal de seu sistema web ou website. Digamos que será ali que o seu sistema iniciará a leitura dos fontes e ditará a sequência dos conteúdos e/ou arquivos a serem anexados.
Vale ressaltar que após criação do index.html você poderá ter outros documentos HTML dentro desse mesmo diretório. Não há problema algum nisso, inclusive veremos em estudos mais adiante que eles se conectam e complementam.
Elementos HTML
Um documento HTML é composto por um conjunto de elementos agregados de forma hierárquica e um elemento é um texto anotado por uma tag de abertura e fechamento.
Ou seja, uma tag é constituída pelo nome do elemento, em minúsculas e rodeado de parêntesis angulares (chevrons), conforme exemplos abaixo:
- <body> </body>;
- <head> </head>;
- <div> </div>;
- <p> </p>.
Para exemplificar melhor vamos expor abaixo uma sintaxe bastante utilizada:
Observe que na imagem acima em destaque, inicia-se uma tag de abertura de um elemento p (parágrafo em HTML); em seguida, surge o conteúdo e, por fim, a tag de fechamento.
O que difere a tag de abertura para a de fechamento é o “/”. Ou seja, para abertura de um parágrafo, usa-se o <p>, e para o seu devido fechamento, usa-se o </p>.
Vale destacar que um elemento pode ser colocado dentro de outro elemento. Mas não se esqueça, se abrir o elemento A primeiro e depois o B, tem de fechar primeiro o B e depois o A.
Veja que ainda no exemplo da imagem acima temos o elemento <p> dentro do elemento <body>. Isso ilustra bem como o documento HTML trabalha em sua essência e hierarquia.
Atributos HTML
Os elementos podem também ter zero ou mais atributos, sendo a ordem dos mesmos irrelevante.
Esses atributos devem ser inseridos na tag de abertura do elemento e composto por um nome e um valor separados pelo símbolo = (igual). O valor deverá estar entre “” (aspas). Veja o exemplo:
Na figura acima temos o elemento <img> (imagem em HTML) e dentro dele o atributo src (source) que tem como objetivo informar onde está o arquivo de imagem que o documento HTML deverá imprimir no navegador web quando o documento for acessado.
O resultado do código HTML aqui apresentado será esse abaixo:
Notem que primeiro o parágrafo foi impresso e logo depois a imagem, justamente como ordenado no código. Portanto lembre-se, o HTML respeitará sempre a ordem e marcação de seus elementos.
O que é possível fazer com o HTML?
O HTML é uma linguagem versátil. Com ela dá para criar uma variedade de elementos e estruturas em páginas web.
Confira alguns exemplos simples do que é possível fazer com essa linguagem e como utilizá-la no seu cotidiano.
Formatar textos
Além de simplesmente exibir texto, o HTML permite formatá-lo de várias maneiras. Por exemplo, você pode criar títulos e parágrafos usando as tags <h1> a <h6> e <p>:
Inserir imagens
Uma das características mais visíveis das páginas web são as imagens. Com HTML, é fácil adicionar imagens à sua página usando a tag <img>. Basta especificar o caminho da imagem no atributo src.
Criar links
O HTML também permite criar links para outras páginas web ou recursos. Basta usar a tag <a> e o atributo href para definir o destino do link:
Construir listas
Listas são uma maneira eficaz de organizar informações em uma página. O HTML oferece duas principais opções: listas ordenadas e não ordenadas. Use as tags <ol> e <ul> para definir o tipo de lista e <li> para cada item:
Formulário interativo
HTML também permite criar formulários para coletar informações dos usuários. Você pode usar as tags <form>, <input>, <textarea>, e <button> para criar elementos de formulário. Dentre eles, podemos citar caixas de texto, botões de opção, caixas de seleção e botões de envio:
Note que nos elementos “input” utilizamos dois atributos ao mesmo tempo, sendo eles: type e placeholder. Mas fique tranquilo que em estudos futuros abordaremos o que cada um desses atributos fazem, no momento o exemplo serviu para ilustrar que é possível usarmos dois atributos ou mais de um elemento HTML.
Histórico de versões HTML
Desde sua primeira versão em 1993 até a versão atual, HTML5, houve uma evolução significativa nessa linguagem de marcação.
A primeira versão do HTML foi estabelecida em 1993, seguida pelo HTML 2.0 em 1995. Depois, veio o HTML 3.0 em 1997. Porém, ele logo foi substituído pelo HTML4, que foi a base da internet por mais de 17 anos.
Em 2014, o HTML5 foi lançado e se tornou a versão mais recente e avançada até o momento.
A principal diferença entre o primeiro e o atual está na evolução das capacidades da web e das demandas dos desenvolvedores.
O HTML5 oferece melhor suporte para recursos multimídia, semântica aprimorada, tratamento de erros mais eficiente e suporte a aplicativos web modernos.
Por isso, ele é essencial para o desenvolvimento web atual.
Introdução ao HTML – Conclusão
Seja você um aspirante a desenvolvedor web ou empreendedor digital, o conhecimento em HTML será um diferencial importante em sua jornada profissional. Então não deixe de investir tempo e esforço em aprender essa linguagem tão poderosa.
Nesse estudo você foi introduzido ao HTML e algumas de suas capacidades. Agora que você já sabe como ele funciona e se organiza, aprofundaremos nas próximas publicações as sintaxes de seus principais elementos e atributos.
Fique Ligado!!! Pois você está convidado a pensar com a gente.
Nos vemos no próximo estudo!!!
