O código HTML

HTML é uma abreviação para linguagem de marcação hipertextual (HyperText Markup Language), uma especificação sintática para códigos computacionais criada, como um protocolo, para a definição de um tipo de documento - sim, originalmente, apenas um documento, como um arquivo de texto ou de uma planilha eletrônica - predominantemente textual, que pudesse incorporar ligações a outros documentos feitas a partir de termos, palavras-chave, ou até mesmo parágrafos inteiros do próprio documento (o tal hipertexto).

Em sua definição original, o HTML não era uma forma de hipermídia (um suporte que pudesse incorporar todos os outros suportes), mas simplesmente uma ideia, inovadora, de que marcações em um documento pudessem nos encaminhar a outros documentos relacionados, conforme a proposição original de Tim Barnes-Lee ao CERN, em 1989. A ampliação como suporte multimidiático veio muito tempo depois de sua implementação nos primeiros computadores conectados em rede, como uma teia de documentos que poderiam ser "navegados" à partir deles mesmos.

O CERN (Conseil Européen pour la Recherche Nucléaire, hoje conhecido como European Organization for Nuclear Research) mantém uma emulação online de seu primeiro computador (um NeXT, dispositivo criado por Steve Jobs em 1985 após ter deixado a Apple) conectado à internet e rodando o primeiro naveador web, de 1990. Nele, é possível experimentar como o código HTML funcionava em sua forma original.

Entender suas origens como uma solução para exibir arquivos de texto (informação em formato verbal) em dispositivos diferentes, acessados remotamente e organizados/relacionados como parte de uma árvore de informações, parece ser importante para compreender porquê a especificação adquiriu a forma e os mecanismos de funcionamento que possui hoje.

O código HTML é o bloco elementar de construção daquilo que se vê em um navegador web. Mas não apenas dos navegadores: os livros digitais mostrados por leitores de e-book são, também, código HTML; e muitos vezes, aquilo que se vê na tela de aplicativos (mobile ou desktop) são construídos utilizando este mesmo código.

Uma "página HTML", "documento HTML", ou simplesmente website, é uma construção feita, geralmente, a partir de três linguagens combinadas: o código HTML, abordado neste volume, que define a estrutura dos dados no documento e seu conteúdo; o código CSS, responsável pelas especificações visuais, o layout (organização e posicionamento dos elementos), a tipografia, as cores de cada componente, suas formas, contornos, e outras definições gráficas; e o código Javascript, responsável pela interação e os comportamentos do documento.

Podemos dizer, então, que o HTML se tornou um dos materiais primordiais na construção de artefatos computacionais, e, por ser um dos mais simples para se trabalhar (o que não significa que não possa se tornar confuso e intrincado para ser usado), ele é, possivelmente, a porta de entrada para o entendidmento do código computacional como material construtivo para os diversos artefatos do universo digital. Sua aplicação é muito ampla e variada, e seu entendimento é quase obrigatório para qualquer pessoa que pretenda lidar com o projeto de artefatos computacionais.

Uma observação importante se faz necessária neste ponto: o conhecimento profundo sobre os materiais, e sua tecnologia, não resultam diretamente na formação de um bom projetista - leia-se: o domínio técnico não faz o bom projetista. Contudo, um bom projetista entende perfeitamente que o conhecimento profundo sobre os materiais que ele manipula e adota em seus projetos é fundamental, principalmente para que respeite suas limitações, empregue bem aquilo que o material oferece de melhor, explore intencionalmente suas possibilidades, e, sobretudo, para que o material não se torne uma força de oposição ao projeto, como uma barreira ou dificuldade aos objetivos pretendidos, ou seja, para que ele use o material à favor do projeto.

Organização do material técnico

Este texto amplia o conteúdo do "livro" com todo o material técnico relativo ao código HTML. Este conteúdo está organizado de acordo com os próprios elementos do código HTML:

Em Estrutura você encontrará os textos que explicam como o código é escrito, sua sintaxe, propriedades, e os elementos do tronco comum à todo e qualquer documento HTML; no capítulo Head se concentram os elementos que constroem o cabeçalho do código e definem toda meta-informação presente nele; em Inline/Conteúdo estão os elementos básicos que incluem conteúdos (textuais e imagéticos) no documento HTML; em Block os elementos que estruturam blocos de informação e estruturam os dados dentro do documento; Formulários contém os elementos que constrõe os campos de entrada de dados e preenchimento de informações para encaminhamento à outros documentos, e, por fim, em Todas as Tags estão todos estes elementos do código HTML organizados por ordem alfabética.

Na sequência, você encontrará as demais linguagens de programação incluídas nesta obra no capítulo +Linguagens, incluíndo o material relativo ao código CSS, responsável pelos aspectos visuais, layout, tipografia, etc. do documento web.

Por se tratar de um material digital e interativo, que, ao contrário do papel, pode ser atualizado, é possível solicitar que procedimentos, técnicas ou especificações sejam detalhadas ou incluídas aos volumes técnicos. Isso pode ser feito pelo formulário disponível no capítulo Solicitações, e são produzidos/incluídos conforme os leitores/usuários apresentam necessidades comuns, que possam ser aqui ilustradas.

Todos os exemplos contidos no material são interativos e permitem que experimentações/modificações sejam realizadas sobre eles no próprio documento.

Ferramentas necessárias

O código HTML pode ser construído e executado sem a necessidade de ferramentas específicas para seu desenvolvimento. O código em sí é um arquivo de texto puro (UTF-8) que pode ser elaborado usando um editor como o Notepad (do Windows), o Text Editor (do MacOS ou Linux), ou mesmo através de um terminal (no Linux, MacOs, Windows, MS-Dos, ou qualquer outro sistema operacional). Há, contudo, ferramentas de produtividade destinadas a agilizar/facilitar seu desenvolvimento que incluem verificação de erros no código (Linting), marcação de sintaxe (Highlight), e outros recursos bastante úteis para o programador. Aqui está uma relação das ferramentas mais populares para edição de código:

p5.js Pad - Code Art Editor for Figma
Microsoft Visual Studio Code
Sublime Text
Brackets
Atom

Outras opções, atualmente, são a edição do código HTML através de ferramentas disponíveis dentro do próprio navegador. Para isto, contamos com ambientes integrados de desenvolvimento (IDEs) inteiramente online, e ferramentas de experimentação - chamadas de Live Code - que interpretam e executam o código em tempo-real, conforme ele vai sendo digitado. Oferecemos aqui, também, uma relação destas opções:

LIVECODE

Observable: HTML+CSS+JS Livecode
Javascript, HTML & CSS Livecode Playground

IDE ONLINE

Visual Studio Code online
Visual Studio Code online (Github)
Observable: Plataforma de Programação Literária
OpenProcessing - HTML / JS / Processing / P5.js Online IDE
CodeSandbox
CodePen

Experimentações com o código podem ser realizadas em qualquer página do material técnico desta obra, no próprio editor live code incluído, como o que se encontra logo abaixo. Nenhuma modificação feita nos documentos é permanente, e o editor está inserido nas próprias páginas do "livro" para torná-lo interativo, e permitir ao leitor que modifique e experimente com os códigos, sem a necessidade de instalar ou configurar nenhum software previamente.

O editor, infelizmente, não funciona na plataforma iOS.

  
<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    Hello World!
  </body>
</html>

Execução e publicação

O código HTML é executado, normalmente, dentro dos navegadores web. Para executá-lo, portanto, basta abrir seu arquivo .HTML com o navegador de sua preferência. Códigos mais complexos que envolvam integração com sistemas e bancos de dados precisarão ser acessados através de um servidor web, instalado localmente no computador do desenvolvedor, ou online, em um serviço de hospedagem web. As ferramentas de produtividade mais sofisticadas costumam contar com instâncias de servidores web locais para realização de testes nos códigos em desenvolvimento, e ferramentas de upload/deploy do código diretamente para os serviços contratados de hospedagem.

A construção deste tipo de programação é normalmente utilizada para produção de websites. Para um website funcionar na rede - o que costuma ser chamado de ambiente de produção - ele precisará, obrigatoriamente, ficar disponível permanentemente através de um servidor web fornecido por uma empresa de hospedagem de websites. Há incontáveis opções, e seus preços variam drasticamente em função dos produtos e serviços adicionais inclusos na oferta de cada prestador de serviço.

Um domínio (o www.meusite.com.br) também precisará ser adquirido. Esta aquisição pode ser feita, no Brasil, através do registro.br, website do Núcleo de Informação e Coordenação do .BR, e no exterior, através das agências reguladoras de cada pais ou de empresas autorizadas a intermediar seu registro. Após adquirido, a configuração ligando o domíninio ao servidor precisará ser feita nas duas pontas, seguindo instruções fornecidas por cada uma das entidades.

Steve Jobs
EUA, 1955 - 2011
Um dos fundadores da Apple Computer e grande responsável pelas transformações revolucionárias na computação pessoal entre 1980 e 2010.
Apple Computer / Apple Inc.
EUA, 1976
Fundada por Steve Jobs e Steve Wozniak, é uma das empresas responsáveis pela revolução na computação pessoal.
Organização Europeia para a Pesquisa Nuclear
Suiça
Renomado centro de pesquisa, mais conhecido por abrigar o Grande Colisor de Hádrons, usado na pesquisa da "partícula de deus" (bóson de Higgs).

Acesse o emulador através deste link.
Abra a página web de sua preferência através das opções do menu: "Document" > "Open from full document reference".