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:
- HTML
- CSS
- JavaScript
- 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!
Leia também:
- HTTPS: o que é, como funciona e por que é importante
- Por que aprender programação? Conheça 5 motivos
- Lógica de programação: o que é e por que é importante?
Deixe uma resposta