O que é HTML

postado em: O que é, Programação, Web Design, Web Série | 1

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. A marcação ocorre por meio de tags, isto é, rótulos.

Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do “casamento” dos padrões HyTime e SGML.

Rótulo

Todo documento HTML apresenta rótulos, elementos entre parênteses angulares (< e >); esses elementos são os comandos de formatação da linguagem. A maioria dos rótulos tem sua correspondente de fechamento: <rótulo>…</rótulo>.

Isso é necessário porque os rótulos servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento: <rótulo>.

Um rótulo é formado por comandos, atributos e valores. Os atributos modificam os resultados padrões dos comandos e os valores caracterizam essa mudança. Exemplo: <HR color=”red”>.

No qual:

  • HR = comando que desenha uma barra horizontal
  • color = atributo que especifica a cor da barra
  • red = valor do atributo color, que é a cor da barra que será desenhada

Cada comando tem seus atributos possíveis e seus valores. Um exemplo, é o atributo class que pode ser usado com o comando DIV e SPAN mas, não pode ser usado com o comando HEAD. Isso quer dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.

De uma maneira geral o HTML éum poderoso recurso, sendo uma linguagem de marcação muito simples e acessível voltada para a produção e compartilhamento de documentos e imagens.

Edição de documentos HTML

Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows, ou o TextEdit, do Macintosh. Para facilitar a produção de documentos, no mercado existem editores HTML específicos, com recursos sofisticados, que facilitam a realização de tarefas repetitivas, inserção de objetos, elaboração de tabelas e outros recursos (Ver lista abaixo). Basicamente dividem-se em dois tipos:

  • Editores de texto fonte: inserem automaticamente os rótulos, orientando a inserção de atributos e marcações.
  • Editores WYSIWYG: oferecem ambiente de edição com um “esboço” resultado final das marcações.

Estrutura básica de um documento

A estrutura de um documento HTML apresenta os seguintes componentes:

<html lang="pt">
<head>
<title>Título do Documento</title>
</head>
<body>
aqui fica a página,
texto (geralmente <p></p>, <div></div> ou <span></span>),
imagem (<img></img>),
links (<a></a>),
...
</body>
</html>

Os rótulos HTML não são sensíveis à caixa, portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.

Os rótulos básicas de HTML, cuja presença é altamente recomendada nas páginas são:

  • <html> define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
  • <head> define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
  • <body> define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

Cabeçalho – Dentro do cabeçalho podemos encontrar os seguintes comandos:

  • <title> define o título da página, que é exibido na barra de título dos navegadores.
  • <style> define formatação em CSS.
  • <script> define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript.
  • <link> define ligações da página com outros arquivos como feeds, CSS, scripts, etc
  • <meta> define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento.

Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor.

Obs: os rótulos <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na página quanto para invocar códigos existentes em outros arquivos externos.

Corpo – Dentro do corpo podemos encontrar outros vários rótulos que irão moldar a página, como por exemplo:

  • <h1>, <h2>,… <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior sera o tamanho da letra)
  • <p> novo parágrafo
  • <br> quebra de linha
  • <table> cria uma tabela (linhas são criadas com <tr> e novas células com <td>. Já os cabeçalhos de coluna são criados com o rótulo <th>)
  • <div> determina uma divisão na página a qual pode possuir variadas formatações
  • <font> altera a formatação (fonte, cor e tamanho) de um trecho do texto
  • <b>, <i>, <u> e <s> negrito, itálico, sublinhado e riscado, respectivamente
  • <img> imagem
  • <a> hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço
  • <textarea> caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter
  • <acronym> acrônimo (sigla)
  • <cite> citação
  • <address> endereço

Hiperligações

Uma propriedade importante dos documentos HTML é a possibilidade de fazer hiperligações. Para isso usa-se o rótulo <a> (do inglês, anchor). Esta tem os atributos: href que define o alvo da hiperligação (que pode ser uma página de Internet, uma parte da mesma página ou um endereço de email) ou name que define um alvo nessa página (a onde se pode fazer uma hiperligação usando o rótulo <a> com o atributo href). Exemplos:

  • <a href="http://cavas.com.br/">Clique aqui para acessara página principal do site Cavas.com.br</a>
  • <a name="nome">texto</a>

Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a href=”#nome”> </a> para hiperligar a este anchor, isto é, âncora.

Caracteres especiais e símbolos

Os caracteres especiais definem-se usando comandos que começam com & e terminam com um ;. Alguns exemplos incluem &aacute; (á), &agrave; (à), &atilde; (ã), &acirc; (â), &auml; (ä) e &ccedil; (ç). Qualquer outra vogal pode ser substituída pelo a destes exemplos, incluindo maiúsculas.

Editores HTML