Neste laboratório, você aprenderá como usar as tags HTML <span> para criar estilos de texto inline e aprimorar a apresentação visual do conteúdo web. O laboratório se concentra em entender o propósito das tags span, criar uma estrutura básica de documento HTML e aplicar estilos inline personalizados a segmentos específicos de texto.
Através de um exemplo prático e evolutivo, você explorará como as tags span podem ser usadas para direcionar e estilizar pequenas porções de texto sem interromper o fluxo do documento. Ao final deste laboratório, você será capaz de aplicar cores de texto personalizadas, fundos e outras técnicas de estilo inline usando elementos span HTML, proporcionando uma formatação de texto mais dinâmica e visualmente atraente em suas páginas web. Construiremos sobre um único arquivo HTML ao longo deste laboratório, adicionando gradualmente mais recursos e estilos.
Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 96%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.
Entendendo o Propósito das Tags Span
Nesta etapa, você aprenderá sobre o propósito e a funcionalidade das tags <span> em HTML. As tags <span> são elementos de nível inline. Isso significa que elas são projetadas para funcionar dentro do fluxo de um texto, ao contrário de elementos de nível de bloco como <p> ou <div>, que criam quebras de linha antes e depois deles. As tags <span> permitem que você aplique estilos específicos ou adicione significado semântico a uma pequena porção de texto dentro de um bloco maior de conteúdo.
Pense nisso como destacar uma palavra específica em uma frase com um marcador. A tag <span> age como esse marcador, permitindo que você direcione essa palavra específica para estilização.
Elas são particularmente úteis para:
Aplicar estilos inline: Alterar a aparência de palavras ou frases específicas.
Adicionar formatação personalizada: Tornar partes do texto em negrito, itálico, colorido, etc.
Destacar texto específico: Chamar a atenção para partes importantes do seu conteúdo.
Direcionar pequenos segmentos de texto para manipulação JavaScript ou CSS: Dando a você controle preciso sobre peças individuais de texto.
Vamos criar um arquivo HTML simples para demonstrar o uso de tags <span>. Abra o WebIDE e crie um novo arquivo chamado styling-example.html no diretório ~/project. Este arquivo será nossa tela para o restante do laboratório.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
Neste exemplo, a tag <span> envolve a palavra "special". No momento, ela não altera a aparência, mas marca essa palavra como algo que podemos estilizar mais tarde.
Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE. Reserve um momento para visualizar styling-example.html no WebIDE. Você verá ambos os parágrafos exibidos normalmente. A tag <span>, por si só, não altera a aparência do texto.
Aplicando Estilos Inline Básicos
Agora, vamos fazer com que a palavra "special" se destaque. Nesta etapa, você aprenderá como aplicar estilos inline diretamente ao elemento <span> usando o atributo style. Estilo inline significa adicionar propriedades CSS diretamente dentro da tag HTML.
Abra o arquivo styling-example.html no WebIDE e modifique a tag <span> desta forma:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
Adicionamos o atributo style à tag <span>. Dentro do atributo style, escrevemos font-weight: bold;. Esta é uma propriedade CSS básica que deixa o texto em negrito.
Aqui está uma análise:
style=" ... ": Este é o atributo HTML que permite que você aplique regras CSS diretamente a este elemento.
font-weight: bold;: Esta é uma declaração CSS.
font-weight: Esta é a propriedade CSS que controla o quão negrito o texto é.
bold: Este é o valor que estamos atribuindo à propriedade font-weight.
;: O ponto e vírgula é importante! Ele separa diferentes declarações CSS dentro do atributo style. Se você quiser adicionar mais estilos mais tarde, precisará separá-los com pontos e vírgulas.
Visualize styling-example.html no WebIDE novamente. Agora você deve ver a palavra "special" em negrito. Isso demonstra como as tags <span> permitem que você direcione texto específico para estilização.
Adicionando Mais Estilos Inline
Vamos tornar a estilização mais interessante. Você pode aplicar múltiplos estilos inline a uma única tag <span>. Nesta etapa, adicionaremos itálico e sublinhado à nossa palavra "special".
Abra styling-example.html no WebIDE e modifique a tag <span> para incluir mais estilos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
Adicionamos mais duas declarações CSS dentro do atributo style, separadas por ponto e vírgula:
font-style: italic;: Isso torna o texto em itálico.
text-decoration: underline;: Isso adiciona um sublinhado ao texto.
Lembre-se do ponto e vírgula após cada declaração! É crucial para o navegador entender onde um estilo termina e o próximo começa.
Visualize styling-example.html. A palavra "special" agora deve estar em negrito, itálico e sublinhado. Isso mostra o poder de combinar múltiplos estilos inline com a tag <span>.
Personalizando a Cor do Texto e o Fundo
Agora, vamos mudar as cores do texto e do seu fundo. Nesta etapa, você aprenderá como usar as propriedades CSS color e background-color dentro do atributo style da tag <span>.
Abra styling-example.html e modifique a tag <span> novamente:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
Adicionamos duas novas declarações CSS:
color: blue;: Isso define a cor do texto para azul. Você pode usar vários nomes de cores (como red, green, black, etc.) ou códigos de cores hexadecimais (como #FF0000 para vermelho).
background-color: lightyellow;: Isso define a cor de fundo do span para amarelo claro. Semelhante a color, você pode usar cores nomeadas ou códigos hexadecimais.
Visualize styling-example.html. A palavra "special" agora deve estar em negrito, itálico, sublinhado, azul e ter um fundo amarelo claro. Isso demonstra como você pode mudar significativamente a aparência de texto específico usando tags <span> e estilos inline.
Um Exemplo Mais Prático
Vamos ver como você pode usar as tags <span> em um cenário mais realista. Imagine que você está criando uma descrição de produto. Você pode querer destacar certos recursos ou o preço.
Abra styling-example.html e substitua seu conteúdo pelo seguinte:
Usamos <span> para deixar o nome do produto em negrito.
Usamos <span> para codificar por cor os principais recursos.
Usamos <span> para tornar o preço maior e vermelho. Observe a propriedade font-size aqui, mostrando que você também pode controlar o tamanho do texto! A unidade em é uma unidade relativa, tornando o tamanho do texto relativo ao tamanho da fonte do elemento pai.
Usamos <span> para destacar uma oferta especial com uma cor de fundo e preenchimento. padding adiciona espaço ao redor do texto dentro da cor de fundo.
Visualize styling-example.html. Você verá como as tags <span> podem ser usadas para adicionar ênfase visual e estrutura ao seu conteúdo, tornando-o mais envolvente e fácil de ler.
Resumo
Neste laboratório, você aprendeu sobre o propósito e a implementação das tags HTML <span>, focando em seu papel na aplicação de estilos de texto inline. Você viu como as tags <span>, como elementos de nível inline, permitem que você direcione e estilize porções específicas de texto sem interromper o fluxo geral do seu documento.
Você praticou a criação de um documento HTML básico e adicionou progressivamente estilos inline usando o atributo style dentro das tags <span>. Você explorou várias propriedades CSS como font-weight, font-style, text-decoration, color e background-color, aprendendo como combiná-las para obter diferentes efeitos visuais. Finalmente, você aplicou seu conhecimento para criar um exemplo de descrição de produto mais prático, demonstrando como as tags <span> podem aprimorar a apresentação e a legibilidade do seu conteúdo web. Você agora está equipado para usar as tags <span> de forma eficaz para adicionar formatação de texto dinâmica e visualmente atraente às suas páginas web.
