O que é o HTML5 para Crianças?

O HTML5 para Crianças surgiu quando o meu filho, o Guilherme, começou a ficar interessado pelo desenvolvimento de páginas web, também conhecidas por “sites”. Embora ele tenha bastante interesse neste tema, e me peça dicas com frequência, eu nem sempre tenho tempo para o poder estar a ensinar. Assim, decidi que todos os bocadinhos em que eu tivesse um pouco de disponibilidade ia redigir um pequeno tutorial para ele poder seguir e aprender quando eu não estivesse disponível. Este conjunto de páginas web que criei para lhe ensinar HTML5 e CSS são o resultado dessa decisão e, assim como as disponibilizei para ele, decidi disponibilizá-las para ti e para todos os que quiserem aprender estas linguagens. Por isso, se tiveres um amigo ou amiga que gostava de aprender estes temas, não te esqueças de partilhar este tutorial com ele ou ela.

Para quem é o HTML5 para Crianças?

O HTML5 para Crianças é para todos os que querem criar um site na Internet mas não têm conhecimento para o fazer. É para todos os que não conhecem ou estão a começar a iniciar-se nestes tópicos.

Embora este tutorial tenha uma linguagem menos formal, mais virada para as crianças e jovens, os tópicos aqui ensinados são os tópicos usados por todos os web designers profissionais. HTML5 só há um e é tanto para crianças como para os avós delas.

Se sabes ler e escrever, estás apto a seguir este tutorial e a tornares-te num perito em HTML e CSS.

Quais são os Requisitos para o HTML5 para Crianças?

Os requisitos são poucos e fáceis de cumprir. Para seguires este tutorial e aprenderes a fazer sites basta teres o seguinte:

• Um computador
• Um editor de texto – Todos os sistemas operativos trazem um editor de texto incluído mas, para Windows aconselho o Notepad++. É leve, rápido e gratuito e tem muitas funcionalidades que o Notepad original do Windows não tem. Podes descarregá-lo clicando na seguinte ligação: Descarregar o Notepad++
• Vontade de aprender

Índice

Estás pronto para começar?

Então clica aí em baixo, nesse botão amarelo 🡦 , para acederes ao Capítulo 1 – 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.

1. <!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.

2. <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.

3. <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.

4. <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.

5. <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?

6. </head>

   – A tag de fecho do elemento “head”. Esta secção acaba aqui.

7. <body>

   – Abre a parte do documento que é exibida aos utilizadores. Todo os os elementos visuais (ou de áudio) estão nesta secção.

8. <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.

9. </body>

   – A tag de fecho do elemento “body”, Não deve ser colocado mais nenhum conteúdo depois desta tag.

10. </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.

Formatação do Texto

A maior parte dos elementos do HTML são para estruturar a tua página, no entanto, há alguns que permitem aplicar estilos a pedaços do teu texto. Vamos ver alguns.

O Elemento <mark>

O elemento

não existia em versões anteriores do HTML. Surgiu no HTML5 e serve para evidenciares partes do teu texto. Repara como eu evidenciei a palavra “evidenciares” na frase anterior. 🙂 O código que usei foi o seguinte:

Há algumas situações em que este elemento te pode ser útil. Por exemplo, nos resultados de pesquisas dá jeito evidenciar o termo que usámos para a pesquisa, na frase em que ele se encontra. Repara como o Google faz:

Eu pesquisei pela palavra “HTML” e o Google evidenciou essa palavra no resultado das pesquisas. No caso do Google, a letra é colocada a negrito mas, usando CSS, podes mostrar o conteúdo deste elemento como quiseres. Mais à frente neste tutorial vamos ver isso.

Negrito, Itálico e Sublinhado

Negrito

Para colocares o texto a negrito podes usar o elemento

ou o elemento

. Embora façam os dois a mesma coisa, a diferença entre eles está na semântica, ou seja, a situação em que são utilizados.

Deves utilizar a tag

quando pretendes colocar o conteúdo a negrito, apesar de ele não ter importância.

Deves utilizar a tag

quando pretendes dar importância a uma determinmada palavra ou expressão.

Itálico

À semelhança do que acontece com o negrito, para colocares o texto em itálico (inclinado) também podes usar duas tags. E tal como as anteriores, ambas produzem o mesmo resultado visual mas devem ser usadas em circunstâncias diferentes.

A tag

deve ser usada quando queres colocar o texto a itálico mas não pretendes dar-lhe importância.

A tag

deve ser usada quando queres colocar o texto a itálico e enfatizá-lo (dar-lhe importância).

Resultado

Estou a seguir o tutorial HTML5 para Crianças para aprender a fazer sites.
Sai da cama já!

Sublinhado

Para sublinhar texto, podes usar a tag

. Esta tag define-se pela letra “u” porque sublinhar, em inglês, escreve-se underline.

Embora funcionasse, esta tag deixou de ser válida em HTML4 para sublinhar palavras ou expressões. Voltou a ser válida em HTML5 mas num contexto diferente. Na realidade, embora no seu estado original esta tag coloque uma linha a sublinhar palavras, não foi para isso que ela foi trazida de volta. Ela deve ser usada, por exemplo, para assinalar erros. Como vamos ver mais tarde, sublinhar palavras deve ser feito em CSS mas, de qualquer das maneiras, aqui fica um exemplo de como deves usar esta tag:

Resultado

A palavra erradu termina com a letra “o” e não como eu a a escrevi.

Abreviatura

Para marcar uma expressão ou sigla como sendo uma abreviatura, e disponibilizar o seu significado ao utilizador, usa-se o elemento

. Este elemento é o primeiro que te mostro que precisa de um parâmetro. É o mesmo que referi no capítulo anterior, lembras-te? Embora possa ter outros, o parâmetro obrigatório é o

que, em inglês, significa “título”.

Este elemento cria uma pequena janela quando se passa o rato por cima dele, que tem o significado com conteúdo que lá se colcou. Usa-se da seguinte forma:

Para perceberes melhor o que ele faz, vê os seguintes exemplos:

Podes criar uma nova página HTML, ou até usares a que criaste no capítulo anterior para veres o resultado deste código. De qualquer das maneiras, o resultado deste código é o seguinte (passa o rato por cima das siglas “CSS” e “CS:GO”):

Resultado

Mais à frente neste tutorial vamos aprender CSS, mas antes de lá chegar vou descansar um bocado enquanto jogo CS:GO.

Subscrito e Superscrito

Estes dois elementos permitem colocar caractéres (letras, números ou símbolos) ligeiramente mais abaixo ou mais acima no teu conteúdo. Se quiseres, por exemplo, dizer aos teus amigos qual é a área do teu quarto, vais provavelmente dar-lhes esse valor em metros quadrados. Para escreveres correctamente essa unidade, tens que colocar o “2” ligeiramente acima do “m”, assim m².

É aqui que entram os elementos

e

.

Podes utilizá-los por exemplo assim:

Resultado

O relvado de um campo de futebol tem aproximadamente 8500m² e a água que usam para o regar tem como símbolo químico o H₂O.

Há mais algumas tags que podes usar para formatar texto mas este tutorial ia ficar gigantesco se eu referisse todos os elementos do HTML. O meu interesse não é mostrar-te as tags todas que podes usar, mas sim ensinar-te a usar as mais comuns e deixar-te descobrir depois as menos usadas à medida que vais precisando delas.

Revisão

Aprendemos muitas tags novas e está na altura de as experimentar. Para isso, vais criar um novo ficheiro, na mesma pasta em que criaste o anterior, com o nome

.

Agora abre o ficheiro novo no teu editor de texto e vamos colocar o esqueleto da nossa página para recordar. Não te esqueças de alterar o título da página visto que esta já é a tua segunda.

Como já sabes, é dentro do elemento

que se passa a nossa acção, por isso é lá que vamos colocar os nossos elementos. Eu criei um pequeno texto em que os consegui usar todos. Podes copiar o meu ou, melhor ainda, criar um vindo da tua imaginação.

Tenho a certeza que já fizeste a tua segunda página e que não tiveste dificuldade. Mesmo assim vou deixar uma ligação para a minha aqui, para que possas ver se está parecida com a tua: pagina2.html.

Agora está na altura de avançar para coisas mais interessantes. Já criámos duas páginas de um site mas ficámo-nos por aí. Agora temos que encontrar uma maneira de irmos de uma para a outra sem estarmos a escrever o seu nome na barra de endereços do navegador. É aí que entram os hyperlinks ou links, ou em Português, ligações. Vamos então para o Capítulo 3 – Hiperligações.

Já sabes qual é o procedimento… Basta clicares aqui em baixo, no botão do lado direito, para avançares para o capítulo seguinte.

Hiperligações

Introdução às Hiperligações

As hiperligações ou, como já deves ter ouvido antes, links, são usadas para ligar páginas do mesmo entre si mas também podem ser usadas para ligar a conteúdos dentro de uma mesma página. Podem ainda servir para ligar a páginas de outros sites, abrir aplicações, etc.

Os links são criados usando a tag

, na qual temos que colocar pelo menos um parâmetro – aquele que define a que página é que o link deve ligar – com o nome

. Para além deste parâmetro, temos que colocar o conteúdo da tag, que é o texto que vai ser mostrado ao utilizador. Parece difícil, mas é fácil. Vamos ver um exemplo.

Resultado

Para acederes ao Google clica aqui.

Vês como é simples? O conteúdo está no seu sítio habitual – entre as tags – e o valor do parâmetro é o endereço da página a que queremos ligar. Quer isto dizer que, à semelhança dos outros elementos, os links são introduzidos da seguinte forma:

Mas este elemento permite usar mais do que um parâmetro. Aliás, são vários que podes usar dependendo das tuas necessidades. Na tabela seguinte mostro-te quais são.

Parâmetro	Explicação
href	É o único parâmetro que é indispensável neste elemento e especifica o endereço de destino da ligação. Pode ser um endereço relativo, um endereço absoluto ou o nome de uma localização interna do documento. Mais à frente neste capítulo já te explico o que são endereços relativos e absolutos.
hreflang	Especifica o idioma da página para onde estás a criar a ligação.
rel	Especifica a relação entre a página actual e a página para onde estás a ligar.
target	Especifica onde deve ser aberto o link. No mesmo separador ou numa janela separada, por exemplo.
title	Dá mais informação sobre o link. É útil para os motores de busca, por exemplo, e aparece numa pequena janelinha quando se passa o rato por cima da ligação
download	Especifica que o alvo da ligação deve ser descarregado para o computador do utilizador, em vez de ser carregado no navegador. O valor deste parâmetro vai ser o nome do ficheiro que o utilizador vai descarregar.

Ligação Externa

Como viste mais acima quando criámos um link para o Google, é muito simples criar uma ligação para outro site. Mas agora que já conheces outros parâmetros, conseguimos melhorar um pouco esse link. Já sabemos o endereço alvo

, sabemos que é um site externo e não uma página do nosso site, sabemos que título lhe podemos dar e, o melhor de tudo, sabemos que o utilizador pode aceder ao link sem perder rasto à nossa página se o fizermos abrir o link noutro separador ou janela.

Vamos lá então escrever este link mais completo.

Resultado

Para acederes ao site do Google clica aqui.

Vamos dissecar este link para perceberes melhor o que aqui fizémos:

1. href=”https://google.com”

   – Com este parâmetro estamos a definir que o alvo/destino deste link é o endereço “https://google.com”.

2. rel=”external”

   – Com este parâmetro estamos a definir que este link é para uma página externa ao nosso site.

3. title=”Página inicial do Google”

   Com este parâmetro estamos a definir um título para o link. Para um motor de busca é essencial saber que este link é a “Página inicial do Google” e não a página “clica aqui” que é o conteúdo do nosso elemento. Experimenta colocar o ponteiro do teu rato por cima do link e vê o que aparece.

4. target=”_blank”

   – Com este parâmetro estamos a definir que queremos que esta ligação abra noutra janela ou separador. Clica no link e vê como ele abre noutro separador. A vantagem deste parâmetro é que assim o utilizador não perdeu o acesso à nossa página porque ainda a tem disponível no separador anterior.

Assim, se quisesses aconselhar este tutorial a um amigo teu, podias criar uma página a explicar-lhe o que é este tutorial, o que é que ele pode aprender, e no fim juntavas ao teu conteúdo uma hiperligação deste tipo:

Isto foi só para te relembrar que os espaços a mais e as mudanças de linha não são processados pelo HTML. Por isso, o que eu escrevi acima é igual a isto:

Resultado

HTML5 para Crianças

Ligação Dentro da Mesma Página

As ligações dentro da mesma página são úteis para saltar para tags dessa mesma página. Eu estou a usar várias nesta para poder saltar de título para título.

Para usares este tipo de link tens que criar um parâmetro, chamado

, à tag para onde queres que o link aponte. Depois, basta referires esse

no href do link. Parece difícil mas vou-te mostrar como é fácil com o exemplo desta página.

Nesta página tenho 5 títulos de nível

. A todos eles, atribuí, um

diferente como podes ver aqui:

As reticências representam os parágrafos todos que estão entre os títulos e que, por razões de poupança de espaço e para manter o código limpo, não incluí neste exemplo.

Para criar as ligações internas que me levam directamente a estes elementos

basta usar os ids dos títulos como valores do parâmetro href, precedidos do símbolo

:

Repara no resultado deste código e experimenta clicar nos links do resultado para veres o que acontece.

Resultado

Introdução às Hiperligações
Ligação Externa
Ligação Dentro da Mesma Página
Ligação para uma Página do Mesmo Site
Ligação para um Endereço de Email

Vou-te dar mais um exemplo de uma ligação dentro da mesma página que dá muito jeito. Experimenta descer até ao fim desta página e, no rodapé dela, procura um link que diz “voltar ao topo da página”. Está mesmo na última linha. Clica nele para veres o que faz, apesar de já saberes o que vai acontecer. 🙂

Ligação para uma Página do Mesmo Site

Ali em cima, na tabela em que descrevi os parâmetros dos links, disse-te que mais à frente te ia falar em endereços absolutos e endereços relativos. Chegou essa altura.

Para criares ligações de uma página para outra dentro do teu site, podes usar dois tipos de endereços. Vamos ver a diferença entre eles.

Endereços Absolutos

Endereços absolutos – são atalhos que têm o endereço completo da localização do ficheiro no computador ou servidor.

No caso desta página que estás a ler agora, como podes ver na barra de endereços do teu navegador, o endereço absoluto é

. Este é o endereço completo ou absoluto do ficheiro

. Ou seja, este ficheiro está numa pasta chamada “html5-para-criancas” e essa pasta está na pasta raíz do servidor.

No caso do teu computador, vamos imaginar que tens as tuas páginas

e

dentro de uma pasta “sites” que, por sua vez, está dentro do disco “C”, assim:

Disco C:
↳ sites
↳ pagina.html
↳ pagina2.html

Os endereços absolutos para os teus ficheiros, que podes usar para acederes a eles no teu navegador, são:

Atendendo a isto, aposto que chegaste à conclusão de que já sabes como criar ligações com endereços absolutos. No fundo, é o tipo de endereços que usámos até agora em exemplos anteriores.

Vamos experimentar criar ligações entre as nossas duas páginas?

No gestor de ficheiros do teu computador, abre a pasta onde colocaste os ficheiros

e

. Espero que tenhas colocado os dois na mesma pasta. Se o teu sistema operativo é Windows, clica agora com o botão direito do rato em cima de um deles e escolhe a opção “Propriedades”. Nessa janela que abriste, vê qual é o caminho absoluto para esse ficheiro.

No meu caso, é

. No teu caso vai ser outro caminho, por isso a seguir tens que usar o teu.

Copia esse caminho que te leva aos teus ficheiros, e coloca-o no teu ficheiro

a seguir ao último parágrafo que lá tens. No meu caso fica assim:

Agora, coloca o nome do teu ficheiro a seguir a esse caminho. Não te esqueças de colocar uma barra

a separar o nome da última pasta e o nome do ficheiro.

Este é o caminho ou endereço absoluto para o teu ficheiro

. Experimenta copiá-lo e colá-lo na barra de endereços do teu navegador. Se a tua página carregou no browser, fizeste tudo bem.

Agora que já descobrimos o endereço absoluto das nossas páginas, vamos colocar um link na primeira página que aponta para a segunda, e vice-versa. Ou seja, vamos abrir o ficheiro

no editor de texto e colocar lá, antes da tag que fecha o

o link que abre a

desta maneira. NOTA que tens que usar o teu endereço absoluto e não o meu, senão não funciona! Não te esqueças também que tens que ter o

e o resto do código que aprendemos no primeiro capítulo. Eu estou só a colocar partes do conteúdo do

porque são as únicas partes que estamos a alterar.

Agora faz o mesmo na

, mas não te esqueças de, na hiperligação, trocares o nome do ficheiro para

.

Grava as alterações em ambos os ficheiros, abre um deles no teu navegador, e experimenta clicar nos links.

Espero que o teu resultado tenha sido parecido com este senão tens que voltar atrás e tentar perceber o que é que fizeste mal. Tenho a certeza que, com um bocadinho de paciência, vais descobrir o que é que está errado. Se mesmo assim não conseguires, podes contactar-me que eu ajudo-te a perceber o que está errado. Não te esqueças de colocar na mensagem o código que usaste.

Endereços Relativos

Ao contrário dos endereços absolutos, em que colocas no link o caminho completo para o ficheiro, nos endereços relativos colocas o caminho do ficheiro a que queres ligar, relativamente ao ficheiro em que te encontras.

Para te ajudar a perceber melhor o que referi, imagina que tens a seguinte estrutura no teu computador:

Disco C:
↳ sites
↳ imagens
↳ fortnite.jpg
↳ pagina.html
↳ pagina2.html

No disco C: tens uma pasta “sites”. Dentro da pasta “sites”, tens outra pasta “imagens” e os dois ficheiros html. Dentro da pasta “imagens” tens uma imagem do Fortnite.

Agora vamos imaginar que na tua primeira página, queres criar 2 ligações: uma para a tua segunda página e outra para a imagem do fortnite. Se fosse com endereços absolutos, era fácil, já dominas este tipo de endereços e por isso sabes que são os seguintes:

Os relativos são igualmente simples e até mais curtos porque se escrevem apenas relativamente à página em que estás a criar os links, ou seja na

. Quer isto dizer que, como o ficheiro

está ao mesmo nível que a tua primeira página, o endereço relativo é apenas o nome do ficheiro a que queres ligar, ou seja, o endereço relativo é escrito assim no link:

Já a imagem está dentro de outra pasta, mas sabes que essa pasta está no mesmo nível que a tua

. Por isso é fácil. Tal como no caso anterior, como a pasta está ao mesmo nível, o endereço relativo da imagem, relativamente à tua primeira página começa com o nome da pasta “imagens”, assim:

Para finalizar esta parte dos endereços relativos, que já vai longa, vamos abrir os nossos dois ficheiros no editor de texto e, abaixo dos links absolutos que criámos antes, vamos criar também os nossos links relativos e ver como fazem exactamente a mesma coisa.

pagina.html

pagina2.html

Conseguiste? Parabéns! Agora já te deves estar a começar a aperceber que o HTML não é nenhum bicho de 7 cabeças e que até é relativamente simples. Vamos então terminar este capítulo com uma explicação rápida sobre como se cria uma ligação para um endereço de email.

Ligação para um Endereço de Email

Se quiseres permitir que os teus leitores te contactem, podes criar um link que abre o cliente de emails deles e coloca automaticamente o teu endereço de email no campo do destinatório.

A sintaxe que deves usar é a seguinte:

Repara que a única coisa que muda é o valor do atributo

, ou seja, em vez de um endereço, colocas “mailto:” seguido do teu endereço de email.

Abre o ficheiro

no teu editor de texto e, logo antes da tag que fecha o body, cria o link com o teu endereço de email. Depois abre a página no navegador, e experimenta clicar nele.

Espero que tenhas aprendido a criar hiperligações e que, acima de tudo, tenhas gostado deste capítulo que te abriu as portas para novos ficheiros. 🙂

Não acredito que não tenhas conseguido acompanhar mas, se por alguma razão isso aconteceu, deixo aqui os links para que possas descarregar os dois ficheiros que já criámos desde o início do tutorial.

• pagina.html
• pagina2.html

O que se segue? Vamos aprender a fazer listas iguais a esta que eu criei agora para colocar os links para os dois ficheiros que criámos?
Vamos a isso. Clica aí em baixo no botão que diz “HTML5 para Crianças – Listas” para ires para o Capítulo 4 – Listas deste tutorial.

Listas

As listas em HTML permitem-nos agrupar um conjunto de items relacionados uns com os outros. Há 3 tipos de listas que podemos usar: listas ordenadas, listas não ordenadas e listas descritivas.

• As listas ordenadas usam uma sequência para indicar a ordem dos elementos da lista. Por exemplo, se criares uma lista com os capítulos de um livro, vais querer apresentá-los pela ordem que eles aparecem no livro.
• As listas não ordenadas não têm uma sequência definida. Podes usar este tipo para criar, por exemplo, uma lista de compras no supermercado, visto que não vais comprar os artigos de que precisas por uma ordem pré-definida.
• As listas descritivas permitem usar um elemento HTML para o nome do item da lista e outro para a sua descrição, de modo a que possam ter estilos diferentes.

Para criares listas em HTML tens de usar pelo menos 2 elementos:

1. A lista
2. O(s) item(s) da lista

Listas Ordenadas

As tags que te permitem criar uma lista ordenada são:

1. <ol>

   para a lista (abreviatura de ordered list)

2. <li>

   para o item da lista lista (abreviatura de list item)

E criá-la é muito simples. Basta abrires a lista

, colocares os items lá dentro

e fechares a lista

.

De seguida vou fazer uma lista ordenada com o que tenho que fazer quando vou colocar gasóleo no carro. É ordenada porque tenho que dar estes passos por esta ordem.

Repara que eu não escrevi nenhum número neste código. No entanto, vê o resultado dele.

Resultado

1. Dirijo-me à bomba onde quero abastecer
2. Estaciono à frente da bomba
3. Desligo o motor do carro
4. Saio do carro
5. Abro a tampa do depósito
6. Abasteço
7. Fecho a tampa do depósito
8. Pago o gasóleo
9. Entro no carro
10. Ligo o motor
11. Saio das bombas de gasolina

Sim, eu sei, faltaram muitos passos pelo meio! Não abri a porta do carro para sair, não tirei a carteira do bolso para pagar, etc. Mas tu percebeste a ideia. 🙂

A numeração decimal, que vês acima e que foi adicionada pelo navegador quando interpretou o código HTML, é o tipo de sequência padrão que os navegadores usam para as listas ordenadas, mas é possível alterá-la tanto em CSS como em HTML. O mais habitual é fazê-lo usando CSS, mas em HTMl é possível fazê-lo adicionando ao elemento

o atributo

, que pode ter os seguintes valores:

• 1

  – sequências em números decimais (é aquele que vês no meu exemplo anterior)

• a

  – sequências ordenadas alfabeticamente, com letras minúsculas

• A

  – sequências ordenadas alfabeticamente, com letras maiúsculas

• i

  – sequências em números romanos com letras minúsculas

• I

  – sequências em números romanos com letras maiúsculas

Vou deixar aqui 2 exemplos. Um usando o valor

e outro usando o valor

.

Resultado

1. Minecraft
2. Fortnite
3. CS:GO

1. Minecraft
2. Fortnite
3. CS:GO

Listas Não Ordenadas

Para criares uma lista não ordenada, fazes exactamente a mesma coisa, mas em vez de usares a tag

que representa uma lista ordenada, usas a tag

que representa uma lista não ordenada (unordered list).

Resultado

As modalidades desportivas que eu já pratiquei foram:

• Natação
• Ginástica
• Karaté
• Ténis
• Crossfit

Nota como nesta lista não há uma sequência porque isso não é relevante. Não interessa a ordem por que as modalidades aparecem. Eu apenas quero mostrar uma lista de desportos que já pratiquei. Por essa razão, em vez de números ou letras sequenciais, o HTML coloca apenas as bolinhas antes de cada elemento da lista.

Listas Descritivas

Como referi acima, na introdução a este capítulo, as listas descritivas (ou listas de definições como eram designadas antes do HTML5) usam 3 elementos:

• <dl>

  – é a tag que cria a lista (description list)

• <dt>

  – é a tag que cria o nome dos items da lista (data term)

• <dd>

  – é a tag que cria a descrição dos items da lista (data definition ou data description)

Parece esquisito mas vais ver que é fácil com este exemplo que te vou dar. Para este exemplo, vou escrever o mesmo que escrevi aqui já em cima numa lista não ordenada, mas vou usar uma lista descritiva.

Resultado

<dl>

é a tag que cria a lista (description list)

<dt>

é a tag que cria o nome dos items da lista (data term)

<dd>

é a tag que cria a descrição dos items da lista (data definition)

O resultado não é especialmente cativante mas mais à frente, quando começarmos a aprender CSS, vais aprender a alterar estas listas de modo a que sejam apresentadas de maneiras completamente diferentes.

Listas Dentro de Listas

Agora que já sabes criar listas, deixa-me dizer-te que é possível criar listas dentro de listas ou, como se diz em Inglês, nested lists. O procedimento é igual ao que usamos para criar listas de 1 só nível, mas tens de ter em atenção que as novas listas são colocadas dentro de um item da lista principal e não dentro da própria lista principal.

Hum! Não percebi nadinha!

Ok, é justo. Vou dar-te um exemplo e ficas já a perceber.

Resultado

Lista de compras

• Detergente para a loiça
• Manteiga
• Carne
  • Peito de frango
  • Coxas de peru
• Leite
• Fruta
  • Maçãs
  • Laranjas

Neste exemplo usei listas não ordenadas para o nível principal e para o segundo nível, mas podes misturar tipos de listas e até podes criar mais níveis de listas.

Para veres um exemplo de uma lista com 3 níveis, podes olhar para o índice deste tutorial.

Antes de terminarmos este capítulo, vamos meter mãos à obra para fazermos uma revisão.

No teu editor de texto, cria um novo ficheiro chamado

, na mesma pasta em que criaste os dois anteriores, e coloca aquelas tags que temos que colocar em todos os ficheiros HTML. Depois, logo a seguir à tag que abre o

, cria uma nova lista, não ordenada, com os links para as tuas páginas. NOTA: Não te esqueças de colocar o valor no elemento

e de criares um

para saberes em que página estás quando a visualizas.

Agora copia o bloco de código onde tens a lista, para as outras duas páginas, e coloca-o logo a seguir ao

, como fizemos na página 3. Assim:

Se tiveres feito tudo bem, acabaste de criar um menu para o teu site. Sim, porque 3 páginas já podem ser consideradas um site. 🙂

Agora descansa um bocadinho porque não deves estar muito tempo seguido a olhar para o ecrã. Os teus olhos estiveram muito tempo a focar para perto, por isso, vai até à janela e olha para longe. Experimenta olhar uns minutos para o horizonte e para objectos que estejam longe ti.

Quando voltares, vamos passar ao Capítulo 5 – Tabelas, mas não tenhas pressa porque eu vou estar cá quando voltares.

Tabelas

Introdução às Tabelas

As tabelas permitem-nos disponibilizar dados ao utilizador de uma forma tabelar, ou seja, em linhas por colunas. É uma forma tão prática de guardar e disponibilizar informação, que tanto o Excel como a maior parte das bases de dados usam tabelas para armazenar dados.

As tags mais populares que podemos usar na construcção de uma tabela estão na tabela abaixo.

Tag	Descrição
<table>	Define uma tabela
<tr>	Define uma linha numa tabela (table row)
<td>	Define uma célula numa tabela (table data)
<th>	Define uma célula do cabeçalho da tabela (table header)
<tbody>	É usada para agrupar o conteúdo do corpo da tabela
<thead>	É usada para agrupar o conteúdo do cabeçalho da tabela
<tfoot>	É usada para agrupar o conteúdo do rodapé da tabela

Tabelas Simples

Numa tabela simples, usamos a tag

para criar a tabela e, dentro dela, usamos a tag

para criar as linhas e a tag

para criar as células dentro dessas linhas. Caso a tabela necessite de um cabeçalho, podemos também usar a tag

para criar as células do cabeçalho.

Se não alterarmos as propriedades da tabela, ela é mostrada pelo navegador sem bordas a separar as colunas e as linhas. Nas versões anteriores ao HTML5, era possível adicionar o atributo

para as células ficarem com bordas de 1 píxel de espessura. Mas com o aparecimento desta versão, como referi no início deste tutorial, o HTML trata da estrutura e o CSS da apresentação. Por esse motivo, já não se usam atributos no HTML para mudar os estilos das tabelas. Eu vou usar um bocadinho de CSS para incluir as bordas, mas não o vou incluir no código para não confundir. Mais à frente neste tutorial vais aprender isso tudo.

Resultado

Variação da população no concelho de Coimbra

Ano	População	Variação
1991	139052	+0.1%
2001	148443	+6.8%
2008	135314	-8.8%
2011	143052	+5.7%

Já reparaste como a primeira linha da tabela ficou com letras diferentes (mais gordas) do que resto dos conteúdos da tabela? Isso é porque nós definimos a primeira linha como sendo o cabeçalho da tabela porque fizémos as células com o

em vez do

.

Tabelas Avançadas

Também é possível criar tabelas agrupando diferentes conteúdos. Isto dá jeito não só por uma questão de semântica, mas para mais tarde podermos dar estilos diferentes com CSS. Aqui fica um exemplo com 3 agrupamentos: um cabeçalho, o corpo e um rodapé.

Resultado

Cidade	População	Área
Coimbra	143396	319,40 km2
Figueira da Foz	62125	379,05 km2
Cantanhede	36595	390,88 km2
TOTAL	242116	1089.33 km2

União de Linhas

Agora que já sabes fazer tabelas, parece que está tudo dito relativamente a elas. Mas não. Há situações em que é necessário unir (merge) 2 ou mais células numa só. Para o fazeres vais precisar de colocar um atributo novo

se fores unir células numa linha ou

se as unires numa coluna. Depois, precisas de contar bem os

de cada linha para bater tudo certo.

Na tabela abaixo, vamos unir 3 células porque têm todas o mesmo conteúdo e não faz sentido repeti-lo 3 vezes. Para isso, vamos usar o atributo

, com o valor

.

Resultado

Modalidades preferidas

Joana	Ginástica
Guilherme	Crossfit
Rosa
Alexandre

Olha bem para o código para veres o que fizémos. Como é complicado explicar isto, vamos ver por partes.

1. A tabela tem 2 colunas
2. A primeira coluna tem 4 linhas.
   Cada linha desta coluna corresponde ao primeiro
   <td>

   de cada

   <tr>

   (as linhas assinaladas a castanho).

   <h4>Modalidades preferidas</h4>

   <table>

   <tr>

   <td>Joana</td>

   <td>Ginástica</td>

   </tr>

   <tr>

   <td>Guilherme</td>

   <td rowspan=“3”>Crossfit</td>

   </tr>

   <tr>

   <td>Rosa</td>

   </tr>

   <tr>

   <td>Alexandre</td>

   </tr>

   </table>
3. A segunda coluna tem 2 linhas, que significa que só pode ter 2
   <td>

   .
   Como colocámos o atributo

   rowspan=”3″

   na segunda linha, as duas linhas seguintes não podem ter o respectivo

   <td>

   porque esses já foram unidos ao

   <td>

   da segunda linha.

   <h4>Modalidades preferidas</h4>

   <table>

   <tr>

   <td>Joana</td>

   <td>Ginástica</td>

   </tr>

   <tr>

   <td>Guilherme</td>

   <td rowspan=“3”>Crossfit</td>

   </tr>

   <tr>

   <td>Rosa</td>

   </tr>

   <tr>

   <td>Alexandre</td>

   </tr>

   </table>

União de Colunas

Para unir células em colunas o processo é exactamente o mesmo, mas vamos usar o atributo

.

Vou deixar aqui um exemplo com várias uniões de colunas, para olhares bem para o código e veres como fiz. Olha com bastante atenção para o número de

que tem cada um dos 3

.

Resultado

Feriados Nacionais em 2020

Ano	2020
Mês	Jan	Abr			Mai	Jun		Ago	Out	Nov	Dez
Dia	1	10	12	25	1	10	11	15	5	1	1	8	25

Analisaste bem o último exemplo? Conseguiste percebê-lo? Espectáculo! Então estás pronto para criar qualquer tabela em HTML, por mais difícil que ela seja.

E só porque és assim tão esperto, no próximo capítulo vamos descansar um bocado de tanto HTML e vamos entrar um bocadinho no CSS. Vamos literalmente começar a dar cor ao nosso HTML.

Encontramo-nos no Capítulo 6 – Introdução ao CSS. Até já!

Introdução ao CSS

O que é o CSS?

CSS significa Cascading Style Sheets ou, em Português, “folhas de estilo em cascata”. É uma linguagem usada para descrever a aparência e formatação dos elementos de um documento ou página. É usada, juntamente com o HTML, para o desenvolvimento de páginas web. Através do CSS podes dar uma aspecto completamente diferente ao teu site, sem tocares numa linha de HTML.

As grandes vantagens de usarmos CSS com HTML em vez de usarmos apenas HTML são:

• Não precisamos de repetir os mesmos estilos em todas as páginas porque podemos usar apenas uma folha de estilos para todas as páginas do site;
• Poupamos muito tempo porque, caso precisemos de alterar um estilo, podemos fazê-lo apenas uma vez para um site inteiro;
• Temos muito mais variedade de opções porque os atributos que há em CSS são muito mais do que os que havia nas versões anteriores do HTML.

Elá! Isto promete!

Sintaxe do CSS

Uma regra em CSS é composta por um selector, uma ou mais propriedades e um ou mais valores. As regras são escritas desta forma:

Tal como em HTML, os espaços e mudanças de linha são ignorados, por isso, posso escrever a mesma instrucção ou regra desta forma:

Confuso? Até podes estar, mas com este exemplo que vou dar agora vais ver como é simples. Na minha opinião, o CSS até é mais fácil do que o HTML.

Suponhamos que eu quero escrever o título principal do meu site com a cor das letras a branco e o fundo a preto. Vamos ver quais são as variáveis que eu vou usar:

• O selector é o meu título, ou seja, o
  <h1>;
• As propriedades são
  color

  para definir a cor do texto e

  background-color

  para definir a cor do fundo;

• Os valores são
  white

  para a cor do texto e

  black

  para a cor do fundo;

Então, a nossa regra, que tem 1 elemento e 2 propriedades, é escrita assim:

Código HTML

Código CSS

Resultado

Título do Meu Site

Como deves ter reparado, as propriedades são separadas por um

. Só assim é que o CSS sabe que acabaste de declarar uma propriedade e vais começar a declarar outra. Na última não é obrigatório porque não declaraste mais nenhuma propriedade a seguir. No entanto, eu, por norma, coloco sempre o

. Nunca se sabe quando é que preciso de voltar atrás para adicionar mais propriedades e depois posso esquecer-me de o colocar. Na minha opinião é uma boa prática fechar sempre a propriedade.

Voltando ao nosso código… O título está quase bem. Mas acho que ficava melhor se estivesse centrado na página. Será que conseguimos fazê-lo com CSS?

Vamos adicionar mais uma propriedade à nossa regra. Como não fechei a última regra no exemplo anterior com um

, espero não me esquecer de o colocar agora!

Resultado

Título do Meu Site

Ah! Assim, sim. Está bem melhor.

Onde Coloco o Código CSS?

Boa pergunta! Há 3 locais onde podes colocar o código CSS dos teus sites:

1. Inline – que significa que o código CSS é colocado directamente nos elementos, com o atributo
   style=”…”;
2. Interno – que significa que o código CSS é colocado na página, mas no
   <header>

   do HTML;

3. Externo – que significa que criamos um ou mais ficheiros só para o código CSS e os anexamos às nossas páginas HTML.

Reparaste que para descrever as 3 maneiras de colocar o CSS nos sites, criei uma lista ordenada em vez de uma lista não ordenada? Foi de propósito, e a razão pela qual o fiz é porque há prioridades nas regras CSS e essas prioridades é que dão origem à palavra Cascading na definição desta linguagem.

Imagina que tens um ficheiro só com código CSS, e criaste tantas regras que o teu ficheiro já tem mais de 200 linhas de código.

Torna-se dificil de gerir e, por engano, podes criar regras para elementos que já tinhas criado antes. E, não só acontece mais vezes do que podes imaginar, como por vezes essas regras são diferentes daquelas que já tinhas criado.

Neste caso, em que as regras estão todas no mesmo ficheiro, quando há conflitos o navegador dá prioridade à última que escreveste, ou seja, à que está mais abaixo no ficheiro. Mas o navegador também tem que saber a qual dar prioridade quando o conflito é entre uma que está no ficheiro e outra que está inline, por exemplo.

Daí a minha lista ordenada. Caso tenhas atribuido a cor “preta” a um título no ficheiro CSS e a cor “cinzento escuro” inline no teu documento HTML, a prioridade vai para o que tens inline.

O navegador dá prioridade primeiro ao CSS inline, depois ao CSS interno e, por último, ao CSS externo.

CSS Inline

Como referi acima, quando usamos CSS inline, colocamos o código directamente no elemento HTML, usando o atributo

. O valor que colcamos nesse atributo, são as propriedades e respectivos valores.

Assim, se eu decidir alterar os títulos de nível 2 do site com CSS inline, terei que o fazer da seguinte forma:

Como deves calcular, esta forma de colocar o CSS não é boa se, por exemplo, quiseres que todos os

do teu documento tenham este estilo. Neste caso terias que colocar estas regras em todos, um a um.

Vou dar mais um exemplo para te mostrar que, só com CSS, podemos disponibilizar o mesmo elemento no navegador de formas completamente diferentes. Aqui vou usar o

e dar-lhe três estilos diferentes, inline.

1. Ao primeiro
   <p>

   não vou dar estilos. Vou deixar o “original”.

2. Ao segundo
   <p>

   vou-lhe dar

   • um fundo cor-de-rosa
     background-color:pink;
   • bordas arredondadas com 5 pixeis de raio
     border-radius:5px;
   • cor do texto preta
     color:black;
   • texto centrado
     text-align:center;
3. Ao terceiro
   <p>

   vou-lhe dar

   • um fundo preto
     background-color:black;
   • uma sombra branca com 2 pixeis para a direita, 2 pixeis para baixo e um aspecto “desfocado”
     box-shadow:2px 2px 8px white;
   • cor do texto branca
     color:white;

O código HTML com o CSS inline é o seguinte:

Resultado

Isto é um parágrafo para testar diferentes estilos com CSS!

Isto é um parágrafo para testar diferentes estilos com CSS!

Isto é um parágrafo para testar diferentes estilos com CSS!

CSS Interno

O CSS Interno é colocado no elemento

do HTML, entre as tags

. Tem a vantagem de poder ser usado em todos os elementos desse documento que obedecerem a essas regras. Ou seja, só precisas de o escrever uma vez nessa página.

Se usar os exemplos que dei acima, é fácil de perceber que colocando a regra no elemento

, ela vai ser válida para todos os elementos

e

dessa página. Desta forma não precisas de colocar as regras em cada um deles.

Resultado

Sub-Título do Meu Site

Isto é um parágrafo para testar diferentes estilos com CSS!

Outro Sub-Título com os mesmos estilos do anterior

Outro parágrafo com os mesmos estilos do anterior.

CSS Externo

O CSS Interno parece ser o ideal. Permite-nos poupar tempo e espaço ao permitir que as regras possam ser aproveitadas para um grande número de elementos iguais, na mesma página, certo?

Visto nesse prisma é verdade mas… E se o nosso site tiver 50 páginas? Ou 100? Temos que repertir esse CSS cinquenta ou cem vezes e, mesmo que não precisemos de muito tempo para o copiar de uma página para a outra, estamos a encher as nossas páginas com código repetido, aumentando assim o tempo que elas demoram a carregar e, dessa forma, estragando a experiência aos utilizadores que as estão a ver.

Felizmente é fácil resolver esse problema. A solução chama-se CSS Externo. No fundo, o CSS externo é apenas um (ou mais) ficheiro(s) à parte com todo o teu código CSS.

Queres ver um exemplo de um ficheiro só de CSS? Podes ver um dos ficheiros CSS deste site visitando o seguinte endereço: https://alexandrefigueiredo.com/html5-para-criancas/css/styles.css.

Mas, deves estar tu a questionar-te, como é que o meu ficheiro HTML sabe que ficheiro CSS usar?
É uma excelente pergunta. Para dizermos ao nosso HTML que ficheiro CSS é que queremos usar temos que colocar uma linha no

do nosso HTML com essa referência.

Aqui, tal como nos links, podemos usar endereços relativos ou absolutos. O exemplo que eu vou usar, é com um endereço relativo, e parte do princípio que tens um ficheiro CSS, chamado

, na mesma pasta em que se encontram os teus ficheiros HTML.

Como vês, é um

, que diz que a relação que há entre o ficheiro CSS e o ficheiro HTML é uma folha de estilos

e que também diz qual é o endereço desse ficheiro de estilos

.

Se colocares apenas esta linha em todos os teus ficheiros HTML, o mesmo ficheiro CSS será usado em todas as páginas do teu site. Como os navegadores guardam os ficheiros CSS no computador/smartphone do utilizador por uns tempos, este ficheiro só precisa de ser descarregado uma vez porque depois é sempre reutilizado pelo teu navegador ao carregar as outras páginas do teu site.

E pronto. Já tivémos um cheirinho de CSS. Agora temos que voltar ao HTML porque há uns atributos muito importantes que nos vão muito jeito quando quisermos usar CSS especificamente em alguns elementos.

Vamos então navegar para o Capítulo 7 – Classes e Ids.

Classes e Ids

O que são Classes e Ids?

As classes e os ids são atributos ou parâmetros que podemos colocar em quase todos os elementos de HTML e que facilitam a referenciação desses elementos em ficheiros de estilos (CSS) e em scripts escritos em JavaScript. Quer isto dizer que, atribuindo uma classe ou um id a um elemento, estamos a diferenciá-lo dos outros.

A grande diferença entre uma classe e um id, é que podemos ter vários elementos com a mesma classe na mesma página, mas só podemos ter 1 elemento com um determinado id. Embora se possam usar ids para referenciar elementos em CSS, eles são mais indicados para serem referenciados em JavaScript ou, como já vimos antes, para criar links internos, e o seu uso em CSS é desencorajado por questões de performance.

O valor destes atributos pode ter letras maiúsculas e minúsculas, e até números (desde que não comecem por um número), mas não pode ter espaços nem pode estar vazio. Podes usar

(underscores) e

(o traço ou sinal de menos) se quiseres juntar duas ou mais palavras. Por exemplo

ou

.

De seguida, vamos ver como e quando usar cada um deles.

Classes

Classes são identificadores para os elementos aos quais foram atribuídas. Ou seja, são usadas para identificar elementos HTML de modo a distingui-los dos outros iguais.

Para referenciarmos uma classe em CSS, colocamos um

(ponto) seguido do nome da classe. E elementos diferentes podem ter a mesma classe. Por exemplo, se eu criar uma classe com o nome “maior”, para aumentar o tamanho da letra de alguns elementos em 120%, posso atribuí-la a alguns

e a alguns

do meu documento, e todos eles vão aparecer com o tamanho da letra 120% superior ao dos outros

e

que não têm essa classe. Assim:

Código HTML

Código CSS

Também podes associar várias classes ao mesmo elemento. Por exemplo se escreveres um parágrafo a que queres dar muita importência, e já tiveres no teu CSS duas classes. Uma que coloca o tamanho da letra maior e outra que coloca a cor do texto a vermelho, podes usar as duas no mesmo elemento, separadas por um espaço.

Código HTML

Código CSS

IDs

O atributo

é usado para especificar o identificador único de um elemento do documento HTML.

Para referenciarmos um ID em CSS, colocamos um

seguido do nome do ID. Podes ter vários elementos com IDs diferentes na tua página, mas esses IDs têm que ser únicos. Não podes ter mais do que 1 elemento com o mesmo ID, mesmo que seja um elemento igual.

Como viste no capítulo das hiperligações em HTML, os Ids podem ser usados para criar links dentro da mesma página.

Mas, tal como as classes, também podem ser usados para dares estilos diferentes aos elementos do teu HTML.

Código HTML

Código CSS

Revisão

Vamos então fazer uma pequena revisão de algumas coisas que aprendemos neste capítulo.

Podemos fazer isto:

Não podemos fazer isto:

Porque, como sabes, não podemos repetir Ids no mesmo documento.

Podemos fazer isto:

Não podemos fazer isto:

Porque as classes e Ids não podem estar vazias nem começar por um número.

Este capítulo terminou. Foi mais pequenino dos que os outros mas tratou de temas igualmente importantes. Vamos agora aprender o que são comentários, como e quando usá-los. Clica aí em baixo para seguirmos para o Capítulo 8 – Comentários.

Comentários

O que são Comentários no Código?

Tal como em praticamente todas as linguagens de programação, tanto o HTML como o CSS permitem colocar comentários no código de forma a facilitar a sua leitura e a comunicar dados importantes a outros programadores que possam estar a trabalhar no mesmo projecto. Para além disso, mesmo que estejas a trabalhar sozinho num documento, podes usar comentários para criar notas para ti próprio.

Como esta informação é apenas auxiliar, os navegadores (ou Internet browsers ou até só browsers) não processam esta informação e, como tal, não aparece no teu site.

Por essa razão, há também muitos programadores que, durante a fase de desenvolvimento, os usam para testar partes do código. Ao comentarem secções de código, fazem com que essas secções não sejam processadas pelo navegador de Internet e assim podem experimentar como é que o site fica com e sem essas secções sem terem que as apagar do código.

Comentários em HTML

Os comentários em HTML colocam-se entre os caracteres

que abrem o comentário, e os caracteres

que fecham o comentário.

Usando esta funcionalidade do HTML, podes comentar uma linha de código, várias linhas de código, e até partes do conteúdo dentro de um elemento. Deixo aqui alguns exemplos:

Comentários em CSS

Os comentários em CSS usam-se exactamente pela mesma razão, mas os caracteres usados para os criar são diferentes. Para abrir um comentário usas

e para fechar, fazes ao contrário

.

Não há mais nada para dizer sobre comentários no código. Como vês, são fáceis de usar e podem tornar o nosso código menos confuso e mais fácil de ler. No fundo, existem para nos facilitar a vida.

O que há muito para dizer é sobre os elementos que vamos conhecer no próximo capítulo. Estou a ficar bastante entusiasmado porque, depois de os conheceres, vamos poder começar a falar sobre a estrutura dos websites e como fazer os diversos blocos que a constituem.

Sendo assim, já sabes o que fazer. Basta clicares no botão aí de baixo para passarmos ao Capítulo 9 – Elementos de Seccionamento.

Créditos para: https://alexandrefigueiredo.com/html5-para-criancas