HTML
HTML (HyperText Markup Language) é a linguagem de marcação fundamental para a construção de páginas na Web. Documentos HTML são interpretados por navegadores, permitindo a visualização de conteúdo online. Essa tecnologia surgiu da combinação dos padrões HyTime e SGML, tornando-se a base da internet como a conhecemos.
Pontos-chave
- HTML é a linguagem de marcação essencial para criar páginas web.
- Navegadores interpretam documentos HTML para exibir conteúdo online.
- Tim Berners-Lee criou o HTML para facilitar a comunicação e disseminação de pesquisas.
- A sintaxe do HTML evoluiu de flexível para mais rígida, mas navegadores mantêm retrocompatibilidade.
- Documentos HTML são arquivos de texto simples, editáveis em qualquer editor.
Imagem: Jesper Rønn-Jensen · BY-SA · Openverse
O HTML original foi concebido pelo físico britânico Tim Berners-Lee, que também desenvolveu protocolos associados como o HTTP. Ele utilizou uma estação NeXTcube com o ambiente NeXTSTEP para criar uma coleção de ferramentas que resolvessem seu problema de comunicação e disseminação de pesquisas. Essa solução, aliada à emergente internet pública, ganhou reconhecimento global. As primeiras versões do HTML tinham regras sintáticas flexíveis, o que facilitou a adoção por pessoas sem experiência em publicação web. Com o tempo, a autoria de HTML cresceu, e a sintaxe tornou-se mais rigorosa. No entanto, por razões de retrocompatibilidade, os navegadores ainda conseguem interpretar códigos HTML que não são estritamente válidos.
Imagem: webmove · BY · Openverse
Todo documento HTML é composto por marcadores, conhecidos como 'tags', que são palavras ou abreviações entre parênteses angulares (< e >). Essas tags funcionam como comandos de formatação da linguagem. Um 'elemento' HTML é formado por um nome de tag, atributos, valores e, opcionalmente, 'filhos' (que podem ser outros elementos ou texto). Os atributos modificam o comportamento padrão dos elementos, e seus valores caracterizam essas mudanças. Por exemplo, um elemento simples pode não ter filhos, enquanto um elemento composto encapsula outros elementos ou texto para aplicar formatação a uma porção específica do documento. Existem também elementos 'vazios' que não marcam uma região de texto, mas inserem algo no documento. É crucial conhecer os atributos e valores permitidos para cada elemento, como o atributo 'href' usado com a tag '<a>' para links, mas não com a tag '<meta>'.
Imagem: tacker · BY-ND · Openverse
Documentos HTML são arquivos de texto simples, o que significa que podem ser criados e editados em qualquer editor de texto comum, como o Bloco de Notas no Windows ou o TextEdit no Macintosh. Para otimizar a produção de documentos, existem editores HTML específicos no mercado. Esses editores oferecem recursos avançados que simplificam tarefas repetitivas, a inserção de objetos, a criação de tabelas e outras funcionalidades. Basicamente, eles se dividem em dois tipos principais, facilitando o trabalho de desenvolvedores e designers web.
A estrutura básica de um documento HTML (HyperText Markup Language) é definida por um conjunto de marcadores essenciais. É importante notar que os marcadores HTML não são sensíveis à caixa (maiúsculas/minúsculas), ou seja, <HTML>, <Html>, <html> ou <HtMl> são todos interpretados da mesma forma. Os marcadores fundamentais, cuja presença é altamente recomendada em todas as páginas, organizam o conteúdo em duas seções principais: o cabeçalho e o corpo.
Cabeçalho (<head>)
O cabeçalho de um documento HTML contém meta informações sobre a página, que não são exibidas diretamente no navegador, mas são cruciais para o seu funcionamento e indexação. Dentro do cabeçalho, podemos encontrar elementos como <meta>, que fornecem dados sobre o documento. Esses campos são amplamente utilizados por mecanismos de busca (como Google, Yahoo! e Bing) para obter informações adicionais sobre a página, visando uma melhor classificação. Por exemplo, a tag <meta name="description" content="descrição da sua página"> pode ser adicionada para indicar o texto de descrição a ser exibido junto ao link do documento nos resultados de busca. É importante saber que, para o Google, elementos meta como 'keywords' não são mais usados para indexar páginas; apenas o <title> e a meta description são relevantes para descrever a página indexada.
Corpo (<body>)
O corpo de um documento HTML é onde todo o conteúdo visível da página é colocado. Dentro do corpo, encontramos uma vasta gama de marcadores que moldam a apresentação e a interação da página. Exemplos incluem tags para títulos (<h1>, <h2>, etc.), parágrafos (<p>), imagens (<img>), listas (<ul>, <ol>, <li>), links (<a>), e muitos outros elementos que estruturam e exibem o conteúdo para o usuário.
Imagem: Liz Castro · BY-NC-ND · Openverse
As cores em documentos HTML podem ser aplicadas de diversas formas, geralmente utilizando CSS (Cascading Style Sheets). Uma maneira comum é através do atributo 'style' diretamente na tag HTML (CSS inline) ou associando uma classe CSS com o atributo 'class'. Por exemplo, <p style="color: blue;"> ou <p class="minha-cor">. A cor pode ser especificada de várias maneiras: pelo nome em inglês (ex: 'red', 'blue'), por um código hexadecimal (ex: '#FF0000' para vermelho), pela notação RGB (ex: 'rgb(255,0,0)'), RGBA (com canal alfa para transparência), ou HSL/HSLA (matiz, saturação, luminosidade, com canal alfa). Existem tabelas e listas de cores disponíveis para referência.
Imagem: 𐂀 jgraham · BY-NC-SA · Openverse
Uma das funcionalidades mais poderosas do HTML é a capacidade de criar hiperligações, ou links, que conectam documentos ou partes de um mesmo documento. Para isso, utiliza-se o marcador '<a>' (de 'anchor', âncora). Este marcador possui atributos importantes: 'href' define o alvo da hiperligação, que pode ser uma página da internet, uma seção específica da mesma página ou um endereço de e-mail. O atributo 'name' (ou 'id' em HTML5) define um ponto de destino dentro da página, permitindo criar links internos. Por exemplo, <a href="#nome">Texto do Link</a> pode ser usado para ligar a um 'anchor' definido por <a name="nome"></a>. O atributo 'target' controla como o link será aberto: 'target="_blank"' abre o link em uma nova janela ou aba, enquanto 'target="_new"' ou 'target="booger"' podem abrir vários links em uma única nova janela. Para abrir uma página em branco, pode-se usar 'about:blank' na URL do link.
Imagem: drew.harry · BY · Openverse
Para representar caracteres especiais e símbolos em documentos HTML, são utilizados comandos específicos que começam com '&' e terminam com ';'. Esses comandos permitem exibir caracteres que não são facilmente digitáveis ou que possuem significado especial em HTML. Alguns exemplos incluem: 'á' para 'á', 'à' para 'à', 'ã' para 'ã', 'â' para 'â', 'ä' para 'ä' e 'ç' para 'ç'. Qualquer outra vogal pode ser substituída pelo 'a' nesses exemplos, e o mesmo se aplica a suas versões maiúsculas, garantindo a correta exibição desses caracteres em qualquer navegador.
