HTML5 Para Crianças – 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).
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:
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”):
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 m2.
É aqui que entram os elementos
e
.
Podes utilizá-los por exemplo assim:
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.