Lições
Iniciar
Começar a aprender
CodeGym /Curso Java /Frontend SELF PT /Elementos para marcação de diálogos

Elementos para marcação de diálogos

Frontend SELF PT
Nível 10 , Lição 4
Disponível

1. Conceitos básicos de CSS para web scraping

Para um bom web scraping, entender a estrutura do HTML e as classes CSS da página é fundamental. Ao entender como os elementos das páginas são estilizados e estruturados com CSS, você pode selecionar os dados corretos e extraí-los com mais precisão. Vamos ver como a ligação do CSS ao HTML, o uso de seletores e também os atributos style, class, id e name ajudam no trabalho com a estrutura de páginas web para scraping.

CSS é responsável por estilizar páginas web, mas para fins de web scraping, podemos ver CSS como uma ferramenta para entender a estrutura e selecionar elementos. Vamos ver os conceitos principais de CSS que são importantes para scraping:

  • Seletores — são regras que apontam para elementos HTML específicos. Usá-los ajuda a identificar precisamente os dados necessários.
  • Atributos class, id, e name — eles são identificadores únicos que ajudam a destacar e diferenciar elementos. Para scraping, eles são especialmente úteis, pois ajudam a isolar os elementos desejados, facilitando a extração de dados.

2. Ligando CSS a um documento HTML

CSS pode ser ligado ao HTML de várias maneiras. É importante entender esses métodos para navegar pelos elementos e determinar seus estilos e classes, pois isso ajudará a isolar os dados alvo.

Arquivo externo

CSS é frequentemente ligado em forma de arquivo externo, que pode ser visto em um documento HTML através da tag <link> na seção <head>. Arquivos CSS externos definem estilos para a página inteira, incluindo os identificadores e classes, o que facilita a navegação durante o scraping.

HTML

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Estilos internos

Às vezes, os estilos podem ser definidos dentro da página usando a tag <style>. Estilos internos podem ser encontrados no <head> da página e usados como uma pista para entender as classes e identificadores, pelos quais você pode selecionar os elementos desejados.

HTML

<head>
<style>
  .price {
    color: red;
  }
</style>
</head>

Estilos embutidos (atributo style)

Estilos embutidos estão diretamente nas tags HTML e afetam apenas o elemento específico. O atributo style também frequentemente contém propriedades únicas, que podem ser úteis para identificar os dados alvo.

HTML

<p style="color: red; font-size: 18px;">Texto com estilo embutido</p>
HTML

<p style="color: red; font-size: 18px;">Texto com estilo embutido</p>

3. Seletores em CSS

Os seletores em CSS são usados para aplicar estilos a elementos, mas para web scraping, sua principal aplicação é escolher precisamente os elementos que contêm os dados necessários. Vamos ver os principais tipos de seletores que podem ser usados em web scraping.

Tipos principais de seletores

Seletor de tag: Esse seletor escolhe todos os elementos de uma tag específica (por exemplo, <p> ou <div>). No web scraping, seletores de tag são úteis para extrair informação de tags que possam conter texto, imagens e outras informações.

CSS

p {
  color: blue;
}

Seletor de classe: Esse seletor escolhe elementos com um valor específico de atributo class. A classe é indicada por um ponto (.) antes do nome. No web scraping, as classes são especialmente úteis, pois podem identificar elementos com os mesmos estilos, como uma lista de produtos.

CSS

.price {
    color: red;
  }
CSS

.price {
    color: red;
  }
HTML

<p class="price">Preço: $99</p>

Seletor de identificador (ID): Esse seletor escolhe um elemento com um atributo único id, indicado pelo símbolo #. No web scraping, id é especialmente útil para escolher elementos únicos, como um título ou botão na página.

CSS

#product-title {
  font-size: 24px;
}
HTML

<h1 id="product-title">Nome do produto</h1>

Seletores de atributo: Esses seletores escolhem elementos por atributos específicos, como name, type, e outros. No web scraping, seletores de atributo são úteis para escolher elementos de formulário ou certos campos, por exemplo, escolher campos com um name específico.

CSS

input[name="email"] {
  border: 2px solid blue;
}

Seletores combinados: Esses seletores permitem escolher elementos mais precisamente, combinando vários critérios. Por exemplo, .product-list .price escolherá apenas os preços dos produtos dentro do container product-list.

Você aprenderá mais sobre seletores de atributo e combinados nas próximas aulas.

4. Atributos style, class, id e name

Atributo style

O atributo style é usado para adicionar estilos embutidos aos elementos, o que pode servir como um sinal distintivo para elementos que são difíceis de identificar por outros atributos. No web scraping, ele pode ser usado como um filtro adicional para encontrar elementos específicos na página.

HTML

<p style="color: red; font-size: 18px;">Este texto está destacado com estilo embutido</p>

Atributo class

O atributo class indica um grupo de elementos com os mesmos estilos, como produtos, preços ou descrições. No scraping, class ajuda a escolher um grupo de elementos que têm a mesma estrutura visual, o que facilita a extração em massa de dados.

HTML

<p class="price">Preço: $99</p>
<p class="price">Preço: $89</p>
CSS

.price {
  color: red;
}

Atributo id

O atributo id é único para cada elemento, o que o torna um guia valioso ao extrair dados únicos. Por exemplo, o título de um produto na página pode ter um id único, e você pode usar esse identificador para escolher exatamente esse título.

HTML

<h1 id="main-title">Nome do produto</h1>
CSS

#main-title {
  font-size: 30px;
}

Atributo name

O atributo name é frequentemente usado em elementos de formulário, e pode ser aplicado para escolher precisamente campos de entrada, como campos para e-mail ou número de telefone. Para web scraping, name é útil ao extrair dados de formulários.

HTML

<input type="text" name="username" placeholder="Digite seu nome de usuário">
CSS

input[name="username"] {
  border: 1px solid #333;
}

5. Exemplo de página usando CSS e HTML

Abaixo está um exemplo de documento HTML, onde diferentes seletores e atributos são usados para destacar e estruturar elementos que podem ser úteis para web scraping.

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exemplo de página para web scraping</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .price {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="main-title">Produto da semana</h1>
  <p class="price">Preço: $99</p>
  <p class="description">Este é um produto único com excelentes características.</p>
  
  <form action="/submit" method="post">
    <label for="username">Nome de usuário:</label>
    <input type="text" id="username" name="username">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">Enviar</button>
  </form>
</body>
</html>
HTML

    <!DOCTYPE html>
    <html lang="pt-BR">
    <head>
      <meta charset="UTF-8">
      <title>Exemplo de página para web scraping</title>
      <link rel="stylesheet" href="styles.css">
      <style>
        .price {
          color: red;
          font-weight: bold;
        }
      </style>
    </head>
    <body>
      <h1 id="main-title">Produto da semana</h1>
      <p class="price">Preço: $99</p>
      <p class="description">Este é um produto único com excelentes características.</p>
      
      <form action="/submit" method="post">
        <label for="username">Nome de usuário:</label>
        <input type="text" id="username" name="username">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        
        <button type="submit">Enviar</button>
      </form>
    </body>
    </html>
CSS

#main-title {
  font-size: 24px;
  color: green;
}

input[name="username"] {
  border: 1px solid #333;
  padding: 5px;
}
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION