HTML5 Para Crianças - Introdução
Introdução
HTML, que significa HyperText Markup Language é um sistema composto por elementos que representam conteúdo específico. Quando escreves código em HTML, principalmente em HTML5, estás a declarar qual é o conteúdo que vai ser disponibilizado ao leitor e não como é que esse conteúdo vai ser disponibilizado. A estrutura e o conteúdo são definidos em HTML e a as representações visuais ou o modo como este conteúdo é disponibilizado são definidas em CSS. Nota que ainda há elementos que permitem alterar o modo como o conteúdo é disponibilizado em HTML5, mas estão obsoletos e não devem ser usados.
Por falar em elementos... um elemento em HTML, na sua forma mais básica, é constituído por uma tag de abertura <header> e outra de fecho </header> e o conteúdo é colocado entre elas:
<header> O conteúdo é colocado entre as tags de abertura e fecho. </header>
Há, no entanto, algumas excepções à regra, em que não existe uma tag de fecho nem mesmo conteúdos. Alguns exemplos são: <br>, <hr>, <input>, <img>, etc.
As tags dos elementos podem, ou não, ter parâmetros. Depende das tags e das tuas necessidades. Não te quero estar já a encher de informação que ainda não é precisa mas, a título de introdução, mostro-te já que os elementos podem ter esta configuração:
<tag parâmetro="valor_do_parâmetro"> conteúdo </tag>
Vou-te dar só um exemplo rapidamente para seguirmos em frente. O elemento <abbr> mostra o significado de uma expressão ou sigla quando se passa o rato por cima dele. O conteúdo do elemento é a expressão e o parâmetro é o significado dela. Assim, este código
HTML
Devolve o seguinte resultado (passa o rato por cima da sigla): HTML
Como já deves ter percebido, uma página em HTML consiste de um conjunto de elementos que são lidos, interpretados e depois disponibilizados por um navegador de Internet de modo a que o destinatário possa visualizar o conteúdo num ecrã.
Para concluir esta introdução, resta referir que os ficheiros HTML são meros ficheiros de texto, aos quais mudas a extensão de .txt para .html, e que podem ser criados e editados em qualquer editor de texto. O Windows, por exemplo, vem originalmente com o Notepad, mas eu não aconselho porque não tem syntax highlighting (código por cores), linhas numeradas e muitas outras funcionalidades que nos ajudam a escrever código HTML.
Se queres um editor rápido, leve e gratuito para escreveres código HTML, aconselho o famoso Notepad++, que podes obter aqui: clica para descarregares o Notepad++.
A minha Primeira Página
Como esta primeira parte teórica, embora curta, está a ser uma grande seca, vamos então meter mãos à obra e criar a nossa primeira página. Para isso, abre o teu editor de texto (Notepad, Notepad++ ou outro), cria um novo ficheiro, e grava-o numa pasta à tua escolha com o nome pagina.html.
Depois, copia o código seguinte, e cola-o no teu ficheiro "pagina.html".
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>A minha Primeira Página</title>
</head>
<body>
<h1>Olá!</h1>
</body>
</html>
Agora, antes de eu te explicar o que é que cada linha significa, experimenta abrir o ficheiro no teu navegador preferido (Google Chrome, Firefox, Edge, etc.).
Apareceu a expressão "Olá!"?
Parabéns! Acabaste de escrever a tua primeira página em HTML.
Vamos então dissecar este código.
<!DOCTYPE html>- Define que a versão HTML que estás a usar é a HTML5 ou superior. Deve ser sempre a primeira linha que colocas num ficheiro HTML5.<html lang="pt">- A tag "html" abre a página. O parâmetro "lang" diz qual é o idioma principal que vais usar na tua página. Neste caso "pt" corresponde a Português.<head>- Abre a secção "head", cujos conteúdos não aparecem disponibilizados ao utilizador na janela do navegador. Serve para colocar informação sobre o nosso documento chamada metadados. Serve ainda para importar ficheiros externos em CSS e/ou JavaScript que vamos usar, mas vou explicar esta parte com mais detalhe noutro capítulo.<meta charset="UTF-8">- Fornece ao navegador alguns metadados sobre o nosso documento. Neste caso diz que a codificação dele é em UTF-8. Esta tag "meta" é uma das tags que não tem tag de fecho.<title>A minha Primeira Página</title>- É o título da nossa página e, para além de ser usada pelos motores de busca como o Google para "baptizar" a nossa página, também aparece lá em cima, estás a ver? No separador do navegador?</head>- A tag de fecho do elemento "head". Esta secção acaba aqui.<body>- Abre a parte do documento que é exibida aos utilizadores. Todo os os elementos visuais (ou de áudio) estão nesta secção.<h1>Olá!</h1>- O elemento "H1" significa "Heading" ou "Título" de nível máximo. Neste caso, o conteúdo que está dentro do elemento é o título da tua página.</body>- A tag de fecho do elemento "body", Não deve ser colocado mais nenhum conteúdo depois desta tag.</html>- A tag de fecho do elemento "html". Deve ser sempre a última tag do teu documento porque a página é fechada nesta tag.
Títulos e Parágrafos
Títulos
Os "Títulos" ou, em Inglês, "Headings", servem para descrever o conteúdo que vem a seguir a eles. Há 6 níveis de títulos que podem ser usados em HTML, sendo que o nível 1 é mais alto e o nível 6 o mais baixo. São representados por um "H" seguido do seu nível.
<h1>Título de nível 1</h1> <h2>Título de nível 2</h2> <h3>Título de nível 3</h3> <h4>Título de nível 4</h4> <h5>Título de nível 5</h5> <h6>Título de nível 6</h6>
Os motores de busca usam os títulos por vários motivos, incluindo para criar uma espécie de tabela de conteúdos. por essa razão, deves usá-los sempre com coerência. Se usarmos esta página como exemplo, o meu H1 é o título da página "HTML5 para Crianças - Capítulo 1", um dos meus H2 é este aqui em cima, que diz "Títulos e Parágrafos" e o H3 é o logo abaixo que tem o conteúdo "Títulos". Assim, tanto os leitores como os motores de busca sabem que o conteúdo desta página tem a seguinte estrutura:
- HTML5 para Crianças - Introdução
- Introdução
- A minha Primeira Página
- Títulos e Parágrafos
- Títulos
- Parágrafos
Parágrafos
O parágrafo é, provavelmente, o elemento que vais usar mais vezes. Sempre que crias um novo parágrafo, vais notar que o navegador deixa uma linha de espaço entre ele e o anterior. Se, em alguma situação, quiseres apenas mudar de linha, não fechas o parágrafo, mas usas um line break que se representa assim: <br>.
<p>Esta frase está contida dentro do elemento "P", ou parágrafo. Esta segunda frase que agora comecei está no mesmo parágrafo.</p> <p>Esta frase já está num novo parágrafo e, como tal, tem uma linha a separá-la das duas frases anteriores que estão noutro parágrafo.<br>Esta frase está numa linha logo abaixo da anterior porque apenas mudámos de linha mas mantivémo-la no mesmo parágrafo.</p>
Mas afinal, perguntas tu, porque é que não basta eu mudar de linha no conteúdo do meu ficheiro em vez de estar a usar tags para mudar de linha? A resposta é simples. Porque o HTML ignora as mudanças de linha. Se estiveres a escrever uma frase e mudares de linha no teu código, o HTML não vai interpretar essa mudança de linha e vai mostrar a frase toda na mesma linha. O mesmo acontece com os espaços. Se escreveres mais do que um espaço seguido, o HTML vai ignorá-lo. Vai ignorar todos os espaços que estejam após 1 espaço.
Para te mostrar melhor, de seguida coloco dois exemplos que, quando visualizados no navegador, são exactamente iguais.
<p>Esta frase vai aparecer no teu navegador toda na mesma linha e com apenas um espaço a separar cada palavra.</p>
<p>Esta frase vai aparecer no teu navegador toda na mesma linha e com apenas um espaço a separar cada palavra.</p>
E pronto, chegámos ao fim do Capítulo 1 deste "HTML5 para Crianças". Espero que estejas a gostar. Antes de passares ao segundo capítulo, vamos utilizar o que aprendemos agora, no nosso ficheiro "pagina.html".
Copia o seguinte código para o teu ficheiro e, depois de o gravares, abre-o no navegador para veres o resultado. Aproveita e faz algumas experiências para veres a diferença entre o <p> e o <br> e para veres as diferenças entre os vários níveis de títulos.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>A minha Primeira Página</title>
</head>
<body>
<h1>Olá!</h1>
<p>Já terminei o capítulo 1 do tutorial "HTML5 para Crianças".<br>Estou a gostar mas parece que ainda não aprendi quase nada.</p>
<p>Espero que o capítulo 2 seja igualmente fácil, mas que me dê um conhecimento mais aprofundado do HTML e que me mostre novos elementos que mostrem coisas mais interessantes do que apenas um parágrafo ou um título.</p>
</body>
</html>
Já viste a tua página? Está a ficar fixe?
Se ficou igual a esta [ pagina.html ] fizeste tudo bem!
Então, se estiveres pronto, clica na ligação abaixo para seguires para o Capítulo 2 - Formatação do Texto e ficares a conhecer novos elementos que te vão permitir fazer muito mais coisas.