uma foto / Shutterstock.com

Desde o início da internet, o HTML tem sido crucial para fazer a world wide web funcionar e aparecer da maneira que queremos. Vamos dar uma olhada no que é HTML e como ele se transforma nas páginas que você vê todos os dias.

A espinha dorsal da Internet

HTML significa “linguagem de marcação de hipertexto”. É uma linguagem de codificação usada para criar páginas que um navegador da web pode exibir. A maioria das páginas da Web que você encontra na Internet, incluindo aquela em que você está lendo este artigo agora, são armazenadas como um arquivo HTML. Os sites são um monte de páginas HTML relacionadas, armazenadas em um servidor em algum lugar. É por isso que a linguagem é frequentemente chamada de “espinha dorsal da Internet”.

Publicidade

Sempre que você acessa uma página na Internet, está essencialmente solicitando um arquivo HTML armazenado no servidor. Em seguida, o navegador que você está usando, como Chrome ou Firefox, analisará o HTML e o exibirá para você da maneira pretendida.

A universalidade e versatilidade do HTML o tornam a linguagem de marcação mais popular do mundo. A maioria dos desenvolvedores front-end da web começa por aprendendo a codificar em HTML. As ferramentas de arrastar e soltar e os editores WYSIWYG são eventualmente traduzidos em HTML para que os navegadores possam analisá-los.

RELACIONADO: O que é uma linguagem de marcação?

Publicidade

Como funciona o HTML

Uma amostra de código HTML
Andrii Symonenko / Shutterstock.com

Como qualquer linguagem de programação, o HTML parece um monte de comandos e blocos de texto antes de ser transformado no visual frontal. Se você está curioso para ver a aparência do HTML nesta página em particular e está em um desktop ou laptop, tente clicar com o botão direito em qualquer lugar desta página e selecione “Exibir código-fonte da página” (a opção pode variar dependendo do seu navegador ) Deve levá-lo a uma parede gigante de código.

A maior parte do HTML é construída usando “blocos de elemento”, que são fragmentos de código HTML que separam diferentes elementos em uma página. Por exemplo, o corpo deste artigo é um bloco de elementos, assim como o menu, as recomendações abaixo e o rodapé da página. Esses elementos são codificados em sua própria maneira, pois podem se comportar de maneira diferente.

Uma parte crucial da construção de páginas HTML é o uso de Cascading Style Sheets (CSS). São documentos que definem a aparência de determinados elementos de uma página. Por exemplo, o tamanho que as imagens devem ser, quais fontes devem aparecer em uma página e como uma página da web deve responder quando é redimensionado ou esticado. Tudo isso é crucial para a criação de sites atraentes, coesos e estilosos. Se você notou que os sites começaram a ficar melhores na última década, o uso crescente de CSS é o maior motivo. Você pode ler mais sobre CSS aqui.

Uma das melhores coisas sobre HTML é sua capacidade de executar scripts dinâmicos via JavaScript ou JS. Esses scripts podem criar elementos dinâmicos. Por exemplo, em certos sites, passar o mouse sobre uma imagem permitirá que você a amplie. Você pode fazer esse efeito codificando em um elemento JavaScript.

Publicidade

RELACIONADO: Como desativar (e ativar) o JavaScript no Google Chrome

Publicidade

HTML Básico

Embora o HTML seja uma linguagem bastante complexa com toneladas de tags e blocos diferentes, existem alguns códigos HTML que podem ser úteis enquanto você está navegando na web. Aqui estão algumas tags HTML básicas que você pode encontrar.

<a href="https://www.howtogeek.com">How-to Geek</a>

How-To Geek

Você usa o <a> comando para criar um link. O URL é para onde o link irá apontar, e o texto que diz “How-to Geek” é como ele aparecerá para o usuário final.

<b>bold</b> <i>italic</i> <u>underline</u>

negrito itálico sublinhado

Você pode usar o <b>, <i>, e <u> para aplicar as opções de formatação de texto padrão: negrito, itálico e texto sublinhado.

Publicidade
<img src="https://www.howtogeek.com/752587/what-is-html/picture.jpg">

o <img> tag é usada para incorporar uma imagem em uma página. Ele extrairá a imagem do mesmo domínio ou você poderá apontá-la para um domínio externo. Você também pode personalizá-lo com alguns atributos adicionais, como redimensionamento e texto alternativo.

<h1>heading 1</h1> <p>paragraph</p>

Os itens acima são tags de título e de parágrafo. Semelhante ao modo como o Microsoft Word permite que você classifique o texto em cabeçalhos e corpo de texto, o HTML também pode formatar texto com base em opções de parágrafo e cabeçalho padrão. Esses formatos são definidos usando a folha de estilo CSS.

<p style="color:edr;">red paragraph</p>

Você também pode usar o "style" atributo para personalizar o texto com várias configurações de estilo, como cor do texto, cor de fundo e tamanho da fonte.

Se você estiver interessado em aprender mais opções de formatação HTML, verifique o Recursos gratuitos da W3Schools. Você encontrará uma lista completa de tags HTML que você pode usar para começar a construir suas páginas da web.

RELACIONADO: O que é “design responsivo” e como usá-lo?

Publicidade