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
e outra de fecho
e o conteúdo é colocado entre elas:
Há, no entanto, algumas excepções à regra, em que não existe uma tag de fecho nem mesmo conteúdos. Alguns exemplos são:
,
,
,
, 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:
Vou-te dar só um exemplo rapidamente para seguirmos em frente. O elemento
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
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”.
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.
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:
.
Aqui fica um exemplo:
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.
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
e o
e para veres as diferenças entre os vários níveis de títulos.
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.