HTML sem medo

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:
 
17.png

 
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 &copy;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 &copy;livres.
    </footer>
   </body>
</html>
 
41.png
 
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.
 
16.png
 
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.
 
Autor: Hudson Lupes Ribeiro de Souza - Coordenador do Tela Cidadã no NCD

Category: