HTML

O que é HTML, qual sua função e como aprender HTML?


A internet com a qual interagimos hoje foi construída através de um longo caminho.

Há alguns anos, a world wide web era constituída apenas de sites estáticos, com poucos recursos possíveis, quase totalmente isentos de interação com o usuário.

Com a criação de algumas ferramentas voltadas ao aprimoramento de páginas web, muita coisa mudou em pouco tempo.

Uma destas ferramentas foi o HTML, a linguagem de marcação mais utilizada do mercado.

No artigo de hoje, explicarei o que é HTML, para que ele serve, quais as suas aplicações reais e onde aprender a manuseá-lo.

Vamos lá?

O que é HTML?

HTML é a sigla de Hypertext Markup Language, ou, em português, linguagem de marcação para hipertexto.

Hipertexto, em tecnologia, é o nome que damos aos blocos de conteúdo que completam a estrutura. Estes blocos recebem conteúdo do tipo textos, imagens, vídeos, áudios .

Em suma, HTML é a linguagem de marcação base da internet como conhecemos hoje. 

Quando acessamos qualquer página na web, estamos vendo a interpretação que o seu navegador está fazendo de um arquivo HTML.

Qual é a função do HTML?

A função do HTML é permitir que um navegador leia e traduza marcações de textos e outras mídias para uma página na web, permitindo que o usuário possa visualizar e interagir com esta página.

O HTML foi criado em 1991 pelo físico britânico Tim Berners-Lee com o intuito de facilitar a comunicação e a transmissão de informações entre universidades do país.

Para isso, ele criou uma nova sintaxe baseada na SGML, linguagem de marcação pioneira na web. O HTML, no entanto, é relativamente mais simples que o SGML.

O que são tags de HTML?

As tags são um recurso amplamente utilizado pelo HTML.

Elas funcionam, literalmente, como etiquetas, delimitando o início e o final de um bloco de instruções.

O objetivo das tags é organizar um arquivo de código e são utilizadas não apenas em linguagens de marcação, mas em linguagens de programação de um modo geral.

Tags podem ser mães, filhas, ancestrais e constituírem uma espécie de árvore genealógica dentro do código, hierarquizando as instruções por importância.

São identificadas pelo uso dos sinais de menor e maior (< e >) para abri-las e fechá-las onde seria o nome da tag.

Quais são as tags do HTML?

Da primeira versão do HTML até a versão atual, o HTML 5, muitas tags foram desenvolvidas, com funções cada vez mais sofisticadas. Ainda assim, as tags originais e básicas continuam sendo primordiais.

Detalharei abaixo cada uma das mais importantes tags HTML.

Cabeçalho

O cabeçalho, ou <head>, é a segunda tag de qualquer arquivo HTML.

É a segunda porque a primeira é a própria tag <html>, que informa o navegador que aquele é um arquivo HTML.

A tag <head> é importante porque é nela que são especificadas determinadas ordens que serão seguidas por todo o restante do arquivo.

Marcações de dados, iframes de ferramentas externas, entre outros, são alguns exemplos de tags que devem ser incluídas no cabeçalho de um arquivo para funcionarem em toda a página.

Parágrafo

Na hora de hierarquizar um texto simples, algumas tags são básicas, mas muito importantes.

A tag parágrafo, ou <p>, é uma delas. É ela que é utilizada toda vez que um parágrafo é iniciado, separando, assim, este bloco de texto dos outros blocos de textos que compõem o conteúdo completo.

Se a ideia for incluir algum item que só estará presente em um parágrafo específico, por exemplo, a tag deste item deve ser incluída dentro da tag <p>.

Imagem

Incluir imagens em um arquivo HTML é muito simples: basta utilizar a tag <img>.

A imagem é incluída através de um link, como no exemplo abaixo:

<img src=”imagemexemplo.jpg” alt=”texto alternativo”>

Na linha de código acima, vemos a abertura da tag img seguido do link onde a imagem está hospedada, indicado pelo atributo src, ou source (origem, em português).

Após a imagem, temos o atributo alt, ou texto alternativo: espaço reservado para a descrição textual daquela palavra. Este atributo é muito importante para que os mecanismos de busca, como o Google, possam compreender do que uma imagem se trata, já que eles não são capazes de enxergá-la imageticamente.

Outra importante função do alt text é contribuir com a acessibilidade: os computadores adaptados a usuários cegos, por exemplo, utilizam o texto alternativo para dizer ao visitante do que se trata a imagem que ele está acessando.

Para incluir uma imagem em um arquivo HTML, porém, ela precisa necessariamente estar hospedada em algum domínio e possuir um link de acesso.

Âncora

A âncora é a responsável pelos links de um texto poderem ser incluídos em uma palavra. 

Em outras palavras, é graças a ela que podemos inserir hiperlinks em nossos textos.

Ela não é necessariamente uma tag, mas está inserida na tag de linkagem, chamada a.

Veja o exemplo abaixo: nele, o texto âncora do link do blog da Kenzie é JavaScript

<a href=”https://blog.kenzie.com.br/javascript/”>JavaScript</a>

Para inseri-lo em uma tag de link, basta fechar o link com o sinal de > e escrever a âncora antes de fechar a tag com </a>.

Lista ordenada

Para que um navegador possa interpretar uma sequência de palavras como uma lista, também é necessário taggear-lá.

Em HTML, podemos trabalhar com listas ordenadas e não-ordenadas, sendo estas primeiras listas numeradas e, as segundas, listas com marcadores simples (bullet points, traços, etc).

Para fazer uma lista ordenada, ou seja, com cada um dos itens correspondendo a um número, são usadas as tags <ol> e <li>. Veja o exemplo abaixo:

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>React</li>

</ol>

A primeira tag abre a lista, enquanto a segunda a ordena.

Para o usuário, este trecho de código aparecerá assim:

  1. HTML
  2. CSS
  3. JavaScript
  4. React


Lista não ordenada

As listas não ordenadas seguem a mesma lógica de construção das listas ordenadas, com a única diferença que a tag que as abre é outra.

Para abrir as listas não-ordenadas, utilizamos a tag <ul>.

Vejam um exemplo de lista de marcação simples:

<ul>

<li>PHP</li>

<li>Java</li>

<li>Python</li>

<li>Ruby</li>

</ul>

No navegador, a lista acima aparecerá da seguinte maneira:

  • PHP
  • Java
  • Python
  • Ruby

Tabela

Para inserir uma tabela em um arquivo HTML, utilizamos a tag <table>

As tabelas, por sua vez, são divididas em linhas, indicadas com a tag <tr>, enquanto essas linhas dividem-se em células, indicadas pela tag <td>.

Vejam abaixo o exemplo de uma tabela simples com duas linhas, duas colunas e quatro células:

<table border=”1″>

<tr>

<td>linha 1, célula 1</td>

<td>linha 1, célula 2</td>

</tr>

<tr>

<td>linha 2, célula 1</td>

<td>linha 2, célula 2</td>

</tr>

</table>

Em seu navegador, os códigos acima seriam visualizados da seguinte maneira:

Comentário

Os comentários são muito utilizados para facilitar a comunicação entre os desenvolvedores, principalmente quando um projeto é dividido por muitas equipes.

Quando um código é construído por um programador, mas possui alguma peculiaridade, este programador pode inserir um comentário dentro deste arquivo, em meio as linhas de código, sem que ele atrapalhe o funcionamento ou a leitura deste arquivo.

Este comentário só será acessível por outros desenvolvedores que tiverem acesso à edição deste código.

Veja abaixo como podemos inserir um comentário dentro de um arquivo HTML. 

<html>

<head>

   <title>TÍTULO DA PÁGINA</title>

</head>

<body>

<p>Primeiro parágrafo</p>

<p>Segundo parágrafo</p>

<!– Aqui está o comentário –>

<p>Terceiro parágrafo</p>

</body>

</html>

Formulários

Para inserir um formulário simples em uma página, utilizamos a tag <form>.

Há diversos tipos de formulários, que podem coletar desde uma a diversas informações do usuário. Quanto maior o formulário, mais recursos HTML serão utilizados para completá-lo.

Vamos a um exemplo com um formulário bastante simples, que coleta somente o nome de quem o preenche:

<form name=”input” action=”html_form_action.asp”

method=”get”>

Nome do Usuário: 

<input type=”text” name=”user”>

<input type=”submit” value=”Enviar”>

</form>

No seu navegador, esse código será visualizado da seguinte maneira:

Formatação de texto

Embora textos simples não precisem de nenhuma tag para serem traduzidos pelo navegador,se o seu desejo for formatá-los, algumas marcações serão necessárias.

Entre as mais básicas estão:

  • <b>, para negrito;
  • <i>, para itálico;
  • <u>, para sublinhado;
  • <big>, para texto grande;
  • <small>, para texto pequeno;
  • <strong>, para texto forte;
  • Etc.

Áudio

A mais atual versão do HTML, o HTML 5, trouxe uma série de novos recursos para a linguagem, entre eles a possibilidade de incluir áudio e vídeo nestes documentos.

Para incluir um player em uma página, basta utilizar a tag <audio> e, semelhante à inserção de imagens, basta indicar qual o áudio a ser reproduzido dentro do atributo src.

Abaixo, um exemplo de um player simples:

<audio autoplay=”autoplay” controls=”controls”>

<source src=”arquivo_de_som.mp3” type=”audio/mp3″ />

</audio>

Em seu navegador, este trecho de código aparecerá da seguinte forma:

Vídeo

Incluir um player de vídeo em um arquivo HTML funciona da mesma maneira: com a tag <video>, indicamos a mídia a ser reproduzida no atributo src e voilà!

Veja o exemplo abaixo, de um player de vídeo bastante simples:

<video width=”320″ height=”240″ controls=”controls”>

    <source src=”filme.mp4″ type=”video/mp4″>

    <source src=”filme.ogg” type=”video/ogg”>

</video>

Em seu navegador, ele será transposto da seguinte forma:

Os formatos de vídeo aceitos pelo HTML 5, hoje, são:

  • mp4
  • WebM
  • Ogg

Div

As tags <div> são elementos semânticos cuja função é dividir um arquivo HTML.

É através destas marcações que podemos dividir um código em blocos ou seções, trabalhando cada uma delas de maneira individual.

Outras funções da tag <div> são facilitar a inserção de scripts de JavaScript em uma página e estilizar determinados blocos de hipertexto. 

Para que esta tag possa adicionar cores a um bloco, por exemplo, ela deve sempre estar acompanhada de um arquivo .css, afinal, é o CSS que dará a este bloco de conteúdo uma personalização de estilo.

Span

A tag <span> é utilizada para agrupar mais de um elemento em uma única linha de código, diminuindo o tamanho do arquivo.

Esta etiqueta pode ser confundida com a <div>, mas a diferença entre eles é que, enquanto a <div> funciona a nível de blocos, o <span> é um elemento de linhas.

Estrutura básica em HTML

Antes de todas as tags descritas acima, no entanto, o HTML funciona fundamentalmente através de uma estrutura básica com dois elementos: a head e o body

Ou: o cabeçalho e o corpo.

Cabeçalho

O cabeçalho de um arquivo HTML, ou head, é literalmente a cabeça de uma página.

É nela que estarão contidas as informações e instruções que serão aplicadas à toda a página, como metadados, por exemplo.

Também ficam no cabeçalho o título da página, links para scripts, arquivos .css (ou folhas de estilo), favicons e etc.

Corpo

O corpo, ou body, é o restante da página, ou as informações específicas de cada bloco de html.

É nesta segunda parte do arquivo HTML que são utilizadas todas as tags descritas acima. De fato, as marcações dos hipertextos.

Qual a diferença entre HTML e HTML5?

A grosso modo, HTML e HTML 5 são a mesma coisa, partindo do princípio que ambas são a mesma linguagem de marcação.

A diferença entre eles é que o HTML 5, quinta e atual versão do HTML genuíno, nos traz muito mais possibilidades para a construção de páginas dinâmicas e a inclusão de novos formatos de mídia, como áudio, vídeo e gráficos vetoriais.

Outra grande vantagem do HTML 5 é que este possui uma sintaxe mais simples e intuitiva, além de ter uma gama maior de navegadores que o suportam.

Qual a relação entre HTML, CSS e JavaScript?

A tríade HTML, CSS e JavaScript é composta pelas três mais importantes linguagens front-end do mercado de tecnologia.

As marcações do HTML e do CSS unidos à versatilidade do JavaScript são capazes de construir sites dinâmicos e extremamente eficientes.

Se você quer saber mais sobre JavaScript, falamos sobre ele aqui.

Onde aprender HTML?

O HTML é uma linguagem bastante básica no ensino de programação, portanto se você deseja iniciar seus estudos nesta área e tornar-se um desenvolvedor, com certeza aprenderá HTML em qualquer instituição de ensino.

No curso de programação full stack da Kenzie Academy Brasil você aprenderá, além de HTML, as mais importantes linguagens e tecnologias de programação, tanto para para front quanto para back-end.

O currículo do curso também inclui conteúdos voltados às habilidades necessárias para iniciar a sua carreira da melhor forma possível, como soft skills, gestão de tempo e produtividade, construção de marca pessoal, treinamento técnico para entrevistas e como desenvolver uma carta de apresentação eficaz.

Conclusão

O caminho para a capacitação de um profissional completo pode ser trabalhoso, mas é também extremamente recompensador.

Com o mercado de programação aquecido, acumular a maior quantidade possível de conhecimentos sobre os fundamentos da internet pode ser um diferencial muito proveitoso.

Não perca tempo e comece agora a sua jornada em busca do sucesso!

Se você gostou desse conteúdo e gostaria de entrar na área de programação, eu recomendo você conhecer mais sobre a Kenzie Academy Brasil.

Leia também:

+1

Escreva o primeiro comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *