Módulo 11: Falar para o Mundo
2. Resumo da Aula Anterior
No último módulo, aprendeste a tornar o teu site rápido como um relâmpago. Agora que é rápido, vamos garantir que ele pode ser lido em qualquer parte do planeta, suportando diferentes línguas e caracteres especiais.
3. O Que Vais Aprender Hoje
- ✅ Como declarar o idioma correto do site.
- ✅ O segredo do UTF-8 (Charset).
- ✅ Texto da direita para a esquerda (Idiomas Árabes).
- ✅ Boas práticas para sites bilingues.
4. Teoria: O Intérprete Web
Conceito: Internacionalização (i18n) é preparar o teu site para que ele faça sentido em diferentes culturas e regiões.
🗺️ Analogia: O Guia Turístico
Imagina que és um guia turístico num museu:
- Lang Attribute: É o crachá que usas a dizer "Falo Português" ou "I speak English".
- Charset (UTF-8): É o dicionário universal que tem todos os símbolos do mundo (acentos, emojis, kanjis). Sem ele, o teu texto vira "sopa de letras".
- RTL/LTR: É saber se no país de origem se lê um livro da esquerda para a direita ou da direita para a esquerda.
5. Exemplos Práticos
Exemplo 1: Idioma e Codificação
A base de qualquer site moderno.
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<!-- OBRIGATÓRIO: Suporta acentos e emojis 🚀 -->
<meta charset="UTF-8">
</head>Se não usares UTF-8, caracteres como 'ç' ou 'ã' podem aparecer como símbolos estranhos ().
Exemplo 2: Direção do Texto (RTL)
Para idiomas como Árabe ou Hebraico.
<!-- 'rtl' significa Right-to-Left (Direita para Esquerda) -->
<html lang="ar" dir="rtl">
<body>
<h1>مرحبا بالعالم</h1>
</body>
</html>O browser muda automaticamente a posição das barras laterais e do texto para condizer com a cultura.
Exemplo 3: Mudança de Idioma
Indicar partes do texto noutro idioma.
<p>O lema da França é <span lang="fr">Liberté, Égalité, Fraternité</span>.</p>Isto ajuda os leitores de ecrã a pronunciarem as palavras estrangeiras com o sotaque correto!
6. Agora é a Tua Vez!
Vamos criar uma página sobre "Viagens":
- Configura o HTML para Português (Portugal) e usa charset UTF-8.
- Cria um título
<h1>com emojis de bandeiras. - Escreve um parágrafo que contenha uma frase em Inglês e outra em Francês (usando a tag
spancom olangcorreto). - Cria uma pequena secção que simule uma frase em Árabe (usa
dir="rtl").
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 Define sempre o lang na tag
<html>. - 📌 UTF-8 é a única codificação que deves usar hoje em dia.
- 📌 O atributo dir controla a direção da leitura.
- 📌 Usa o lang em spans para ajudar a acessibilidade em textos multilingues.
9. Desafios Práticos
Desafio 1: O Enigma dos Acentos
Abres um site e vês "Olá Mundo" escrito como "Olá Mundo". Qual é o problema?
Desafio 2: O Mapa Global
Como diferenciavas o Português de Portugal do Português do Brasil no atributo lang?
Desafio 3: O Ponto de Interrogação
Se visses dir="ltr", o que é que isso significa?