HTML é uma linguagem de marcação de hipertexto (HyperText Markup Language) criada por Tim Berners-Lee na década de 80, Tim é professor do MIT e também criou a World Wide Web (WWW – Rede Mundial de Computadores). Mas somente em 1997 o grupo de trabalho do W3C trabalhou na versão 3.2 transformando o HTML numa prática comum. O HTML ganhou várias versões, tais como HTML+, HTML 2.0, HTML 3.0 e a mais atual, HTML 5.
Mas serve pra quê?
HTML é utilizada para produzir páginas na Web. Os arquivos HTML são interpretados pelos navegadores (Firefox, Chrome e etc) e então conseguimos ver a representação gráfica das páginas nas telas de nossos computadores e telefones móveis.
HMTL não é uma linguagem de programação, e sim de marcação. O que significa que através dela não é possível usar a lógica humana para resolver problemas, por exemplo condições como “se é maior que 10 faça isso”. No entanto, utiliza-se o HTML para demarcar as informações do código através de TAGs para que assim o navegador entenda cada parte corretamente.
Por onde começar?
Tags são estruturas que sinalizam o início e o fim das informações através de um padrão de rótulos, como o exemplo da tag <p> que é utilizada para designar um parágrafo:
<p>Isso é um parágrafo.</p>
A estrutura abaixo é a mínima necessária para que uma página Web seja exibida corretamente:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
</head>
<body>
<h1>Isso é um título</h1>
<p>Isso é um parágrafo.</p>
</body>
</html>
A primeira coisa que deve haver no seu código HTML é a declaração <!DOCTYPE>, que é uma instrução ao navegador sobre qual é a versão do código HTML escrito. No caso, estamos dizendo que usamos a versão HTML 4.01 Strict no nosso código, o que significa que tags antigas, como <font>, não funcionaram.
A tag <html> define que tudo dentro dela se trata de um código HTML. Interno à ela, temos a tag <head> que define a parte inteligente da página, onde são carregados metadados, scripts e páginas de estilo, como CSS e Javascript. E também temos a tag <body> que define todo o corpo de texto que será mostrado na tela.
Para testar, crie em seu computador um arquivo com extensão .html (e.g. “arquivo.html”), cole o nosso trecho de código dentro dele e clique duas vezes para que seja aberto com o seu navegador. O resultado deve ser próximo desse:
Mas ué, porque o texto ficou estranho? Resumindo a missa: usamos um padrão que não aceita os caracteres com acentos e cedilha. O que nos mostra que precisamos melhorar nosso trecho de código.
Dá para melhorar?
Sempre dá! É essencial que apareça o título da página na aba do navegador, o que não acontece com o nosso código, que mostra o endereço do arquivo no computador. Para mudar, basta adicionar, dentro da <head>, uma tag chamada <title>.
<title>Título da página</title>
Para consertar o problema com os acentos e cedilhas, basta adicionar, dentro da <head> a tag <meta> definindo o seu atributo charset como UTF-8, que nada mais é do que um padrão de escrita.
<meta charset=”UTF-8″>
Então, depois dessas duas inclusões, o código da <head> ficaria assim:
<head>
<title>Título da página</title>
<meta charset=”UTF-8″>
</head>
Vamos agora adicionar um rodapé à página, usando a tag <footer> escrevemos o que queremos que apareça no fim da página.
<footer>
Todos os direitos ©livres.
</footer>
Com isso, temos o nosso código HTML dessa forma e com o resultado abaixo:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”pt-br”>
<head>
<title>Título da página</title>
<meta charset=”UTF-8″>
</head>
<body>
<h1>Isso é um título</h1>
<p>Isso é um parágrafo.</p>
<footer>
Todos os direitos ©livres.
</footer>
</body>
</html>
Posso estudar as páginas que acesso?
Podemos aprender com as páginas que acessamos cotidianamente, lendo os seus códigos e conhecendo como funcionam. Agora que conhecemos o básico sobre HTML, podemos entender um pouco das páginas que acessamos e isso pode ser feito de duas formas:
Na página desejada, pressione as teclas Ctrl e S ao mesmo tempo (Ctrl+S) e escolha o local de destino no seu computador. O navegador irá salvar na pasta escolhida uma cópia dos códigos HTML e demais arquivos utilizados na exibição e programação daquela página Web.
Na página do Tela Cidadã, por exemplo, clique na tecla F12. Será aberta uma ferramenta de análise de páginas Web dos navegadores. Com ela é possível abrir e modificar praticamente todos os arquivos usados na exibição das páginas, simular como seria a visualização da página num aparelho móvel e até visualizar a página em modo 3D.
Dicas
Recomendamos, para continuar seus estudos sobre HTML e Web Designer, que faça cursos online gratuitos e que leia o conteúdo de sites da Web, tais como W3Schools, Codecademy e Prime Cursos.
Esse texto é de minha autoria e foi publicado originalmente no site do Núcleo de Cidadania Digital, do qual sou membro. Para ver o texto no site do NCD, clique aqui.
vassourinhadeconteudo 