Como criar espaços no texto entre duas divisões em um código HTML

Escrito por lizzie flynn | Traduzido por michel makarios
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar espaços no texto entre duas divisões em um código HTML
Use a tag span para estilizar um parágrafo com múltiplas classes (Stockbyte/Stockbyte/Getty Images)

Divisões (<div>) nos códigos HTML dividem seções de uma página para propósitos de estilo. Adicionar uma tag <div> no código HTML de uma página cria quebras de linha naturais ou separa caixas. Divisões contém elementos de bloqueios, como <h1> e <p> e elementos em linha. O texto não pode separar duas divisões. Estilizar um parágrafo com duas divisões diferentes cria dois blocos de texto separados.

A solução é utilizar a tag <span>. Essa tag é parecida com a <div> pois separa áreas da página por estilo, exceto que ela só pode conter elementos em linha. Utilize <span> para mudar os estilos dentro de um parágrafo, uma linha única de texto ou uma palavra única.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o editor HTML e crie a página HTML. Insira o seguinte código para criá-la: <html> <head> <style type=”text/css”> </style> </head> <body> <div id= “content”> <p>Olá, Mundo!</p> </div> </body> </html> A tag <html> cria a página. A tag <head> contém os dados e o estilo em linha da página, mas não aparece na tela. A tag <style> diz ao navegador como estilizar a página. O navegador lê e exibe tudo entre as tags <body>. A tag <div> cria uma caixa para o texto. A tag <p> cria um parágrafo. Use "Olá, Mundo!" para esse exercício.

  2. 2

    Insira o estilo entre as tags <style>. Essa página terá a caixa divisória e a frase "Olá, Mundo!". A caixa ocupará 50% da largura da tela. "Olá, Mundo!" possuirá dois estilos. "Olá" será exibido com uma fonte vermelha e "Mundo!" com uma fonte verde. O # representa a identidade da divisão e o ponto (.) em frente a "olá" e "mundo" representa a "classe".

    container{

    width: 50%; } .olá{ color: red; } .mundo{ color: green; } </style>

  3. 3

    Adicione as tags span em volta de "Olá," e "Mundo!" respectivamente. Insira o nome da classe após "span". A tag do parágrafo (<p>) não precisa de uma classe ou identidade pois não foi estilizada no exercício. Os navegadores da internet criam blocos para parágrafos por padrão. <div id=”container> <p> <span class=”olá”>”Olá,</span><span class=”mundo”>Mundo!</span> </p> </div>

  4. 4

    Salve o documento como "olamundo.html". Clique na nova página para abri-la em um navegador para procurar algum erro.

Dicas & Advertências

  • Dê um recuo nas tags que estiverem muito próximas para manter o código limpo e organizado.
  • Feche todas as tags para prevenir erros no navegador.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível