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 <mark> 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:
Surgiu no HTML5 e serve para <mark>evidenciares</mark> partes do teu texto.
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 <b> ou o elemento <strong>. 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 <b> quando pretendes colocar o conteúdo a negrito, apesar de ele não ter importância.
Hoje comi uma bela <b>salada de frutas</b> que me deixou com vontade de comer mais.
Deves utilizar a tag <strong> quando pretendes dar importância a uma determinmada palavra ou expressão.
Se encontrares um animal magoado na rua <strong>é imperdoável</strong> não o ajudares.
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 <i> deve ser usada quando queres colocar o texto a itálico mas não pretendes dar-lhe importância.
Estou a seguir o tutorial <i>HTML5 para Crianças</i> para aprender a fazer sites.
A tag <em> deve ser usada quando queres colocar o texto a itálico e enfatizá-lo (dar-lhe importância).
Sai da cama <em>já</em>!
Sublinhado
Para sublinhar texto, podes usar a tag <u>. 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:
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 <abbr>. 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 title 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:
sigla
Para perceberes melhor o que ele faz, vê os seguintes exemplos:
Mais à frente neste tutorial vamos aprender CSS, mas antes de lá chegar vou descansar um bocado enquanto jogo CS:GO.
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 <sub> e <sup>.
Podes utilizá-los por exemplo assim:
O relvado de um campo de futebol tem aproximadamente 8500m<sup>2</sup> e a água que usam para o regar tem como símbolo químico o H<sub>2</sub>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 pagina2.html.
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.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>A minha Segunda Página</title>
</head>
<body>
</body>
</html>
Como já sabes, é dentro do elemento <body> 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.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>A minha Segunda Página</title>
</head>
<body>
<h1>A Minha Segunda Página</h1>
<p>Hoje aprendi a usar o elemento <mark>mark</mark>, aprendi a <i>inclinar</i> as letras e a fazê-las mais <b>gordas</b> e ainda aprendi a <u>sublinhá-las</u>.</p>
<p>Mas não foi tudo. Fiquei a saber que um campo de futebol tem cerca de 8500m<sup>2</sup> e, depois de consultar a Internet, descobri que a fórmula química do ácido sulfúrico é H<sub>2</sub>SO<sub>4</sub>.</p>
<p>Fiz isto tudo enquanto a minha irmã fazia o <abbr title="Trabalho Para Casa">TPC</abbr> e o meu irmão estava no <abbr title="Actividades de Tempos Livres">ATL</abbr>.
</body>
</html>
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.