Título da Aula: Elementos HTML: Negrito, Itálico, Sublinhado e Texto Marcado

Introdução

Olá e bem-vindo de volta à nossa jornada de aprendizado de HTML! Na aula anterior, falamos sobre títulos, parágrafos e quebras de linha. Hoje, vamos explorar como podemos adicionar ênfase e estilo ao nosso texto usando os elementos de negrito, itálico, sublinhado e texto marcado. Então, vamos começar!

Corpo da Aula

Negrito

Em HTML, podemos fazer o texto aparecer em negrito usando as tags <b> ou <strong>. Embora ambos resultem em texto em negrito, eles têm significados semânticos diferentes. <b> é usado para estilizar o texto sem dar qualquer significado especial, enquanto <strong> indica que o texto tem forte importância. Aqui está um exemplo de como usar negrito em HTML:

<p>Este é um texto normal. <b>Este é um texto em negrito.</b></p>
<p>Este é um texto normal. <strong>Este é um texto importante.</strong></p>

A diferença entre <b> e <strong> pode não ser aparente visualmente, mas é importante para a acessibilidade. Leitores de tela, que são usados por pessoas com deficiência visual para navegar na web, darão ênfase especial ao texto marcado com <strong>, enquanto o texto marcado com <b> será lido normalmente.

Itálico

Podemos fazer o texto aparecer em itálico usando as tags <i> ou <em>. Semelhante ao negrito, <i> é usado para estilizar o texto sem dar qualquer significado especial, enquanto <em> indica ênfase. Aqui está um exemplo de como usar itálico em HTML:

<p>Este é um texto normal. <i>Este é um texto em itálico.</i></p>
<p>Este é um texto normal. <em>Este é um texto enfatizado.</em></p>

Assim como com <b> e <strong>, a diferença entre <i> e <em> é importante para a acessibilidade. Leitores de tela darão ênfase especial ao texto marcado com <em>, enquanto o texto marcado com <i> será lido normalmente.

Sublinhado

O sublinhado pode ser adicionado ao texto usando a tag <u>. No entanto, o uso de sublinhado é geralmente desencorajado em HTML, pois pode ser confundido com um link. Aqui está um exemplo de como usar sublinhado em HTML:

<p>Este é um texto normal. <u>Este é um texto sublinhado.</u></p>

É importante lembrar que o sublinhado tem uma conotação específica na web – geralmente indica um link clicável. Portanto, usar sublinhado para ênfase pode confundir os usuários. Se você precisa enfatizar o texto, é melhor usar <strong> ou <em>.

Texto Marcado

Podemos destacar ou marcar texto usando a tag <mark>. Isso fará com que o texto apareça com um fundo amarelo, semelhante a um texto destacado com um marcador. Aqui está um exemplo de como usar texto marcado em HTML:

<p>Este é um texto normal. <mark>Este é um texto marcado.</mark></p>

A tag <mark> é útil para indicar partes do texto que são de particular importância ou relevância. Por exemplo, você pode usá-lo para destacar palavras-chave ou frases em um artigo ou para indicar partes de um texto que foram alteradas ou corrigidas.

Conclusão

E aí está! Agora você sabe como adicionar ênfase e estilo ao seu texto usando negrito, itálico, sublinhado e texto marcado. Lembre-se, embora essas tags possam parecer semelhantes visualmente, elas têm significados semânticos diferentes que podem afetar a acessibilidade de sua página. Na próxima aula, vamos explorar como criar listas em HTML. Até lá, experimente adicionar algum estilo ao texto em sua página “Hello World”!

Exercícios da Aula: Elementos HTML – Negrito, Itálico, Sublinhado e Texto Marcado

Exercício 1: Texto em Negrito

Receba o seguinte parágrafo de “O Senhor dos Anéis” e aplique a tag <b> e <strong> em palavras ou frases específicas. Lembre-se de que <strong> é usado para indicar texto de forte importância.

Um Anel para a todos governar, Um Anel para encontrá-los, Um Anel para a todos trazer e na escuridão aprisioná-los.

Exercício 2: Texto em Itálico

Receba o seguinte parágrafo de “Harry Potter e a Pedra Filosofal” e aplique a tag <i> e <em> em palavras ou frases específicas. Lembre-se de que <em> é usado para enfatizar o texto.

Não vale a pena mergulhar nos sonhos e esquecer de viver.

Exercício 3: Texto Sublinhado

Receba o seguinte parágrafo de “As Crônicas de Nárnia” e aplique a tag <u> em palavras ou frases específicas. Lembre-se de que sublinhado em HTML é geralmente desencorajado pois pode ser confundido com um link.

Algumas vezes é preciso decidir entre uma coisa a que se está acostumado e outra que gostaríamos de conhecer.

Exercício 4: Texto Marcado

Receba o seguinte parágrafo de “Percy Jackson & Os Olimpianos” e aplique a tag <mark> em palavras ou frases específicas. Lembre-se de que <mark> é usado para destacar partes do texto que são de particular importância ou relevância.

Ser um meio-sangue é perigoso. É assustador. Na maioria das vezes, acaba com a gente de um jeito penoso e detestável.

Exercício 5: Revisão e Combinação de Estilos

Receba o seguinte parágrafo de “Duna” e aplique as tags <b>, <strong>, <i>, <em>, <u> e <mark> de maneira apropriada para adicionar ênfase e estilo ao seu texto.

Eu devo não ter medo. O medo é a mente assassina.