Éléments pour marquer les dialogues
1. Concepts de base du CSS pour le web scraping
Pour réussir le web scraping, comprendre la structure HTML et les classes CSS de la page est un facteur clé.
En comprenant comment les éléments de la page sont stylisés et structurés avec CSS, tu peux sélectionner plus précisément les données dont tu as besoin et les extraire. Voyons comment la connexion de CSS au HTML, l'utilisation des sélecteurs, ainsi que les attributs
style, class, id et name aident à travailler avec la structure
des pages web pour le scraping.
CSS est responsable de la stylisation des pages web, cependant, pour les objectifs de web scraping, nous pouvons considérer CSS comme
un outil pour comprendre la structure et choisir les éléments. Voyons les concepts clés de CSS qui sont importants pour
le scraping :
-
Les sélecteurs — ce sont des règles qui pointent vers des éléments HTML spécifiques. Leur utilisation aide
à identifier précisément les données nécessaires.
-
Les attributs
class, id, et name — ils sont des identifiants uniques
qui aident à distinguer et différencier les éléments. Pour le scraping, ils sont particulièrement utiles car
ils aident à isoler les éléments nécessaires, simplifiant ainsi l'extraction des données.
2. Connecter CSS à un document HTML
CSS peut être connecté au HTML de différentes manières. Il est important de comprendre ces méthodes pour naviguer parmi les éléments et
déterminer leurs styles et classes, car cela aidera à isoler les données cibles.
Fichier externe
CSS est souvent connecté sous forme de fichier externe, visible dans le document HTML via la balise <link>
dans la section <head>. Les fichiers CSS externes définissent les styles pour toute la page, incluant les identifiants et
les classes, ce qui facilite la navigation lors du scraping.
HTML
<head>
<link rel="stylesheet" href="styles.css">
</head>
Styles internes
Parfois, les styles peuvent être définis à l'intérieur de la page à l'aide de la balise <style>. Les styles internes peuvent
être trouvés dans le <head> de la page et utilisés comme indice pour comprendre les classes et
les identifiants,
selon lesquels tu peux sélectionner les éléments nécessaires.
HTML
<head>
<style>
.price {
color: red;
}
</style>
</head>
Styles intégrés (attribut style)
Les styles intégrés se trouvent directement dans les balises HTML et n'affectent que l'élément spécifique. L'attribut
style contient souvent des propriétés uniques, qui peuvent être utiles pour identifier les données cibles.
HTML
<p style="color: red; font-size: 18px;">Texte avec style intégré</p>
HTML
<p style="color: red; font-size: 18px;">Texte avec style intégré</p>
3. Sélecteurs en CSS
Les sélecteurs en CSS sont utilisés pour appliquer des styles aux éléments, mais pour le web scraping, leur principale utilisation
est la sélection précise d'éléments contenant les données nécessaires. Voyons les principaux types de sélecteurs qui
peuvent être utilisés lors du web scraping.
Types principaux de sélecteurs
Sélecteur par balise: Ce sélecteur choisit tous les éléments d'une balise spécifique (par exemple, <p> ou
<div>). En web scraping, les sélecteurs par balise sont utiles pour extraire des informations des balises, qui
peuvent
contenir du texte, des images et d'autres informations.
Sélecteur par classe: Ce sélecteur choisit les éléments avec une valeur d'attribut class spécifique.
La classe
est désignée par un point (.) devant le nom. En web scraping, les classes sont particulièrement utiles car elles peuvent
identifier des éléments avec les mêmes styles, par exemple une liste de produits.
CSS
.price {
color: red;
}
CSS
.price {
color: red;
}
HTML
<p class="price">Prix : $99</p>
Sélecteur par identifiant (ID): Ce sélecteur choisit l'élément avec un attribut id unique,
désigné par le symbole #. En web scraping, id est particulièrement utile pour choisir des éléments uniques,
tels qu'un titre ou un bouton sur la page.
CSS
#product-title {
font-size: 24px;
}
HTML
<h1 id="product-title">Nom du produit</h1>
Sélecteurs d'attribut: Ces sélecteurs choisissent les éléments par certains attributs, tels que name,
type, et autres. En web scraping, les sélecteurs d'attribut sont utiles pour choisir des éléments de formulaire ou
certains champs, par exemple, choisir des champs avec un certain name.
CSS
input[name="email"] {
border: 2px solid blue;
}
Sélecteurs combinés: Ces sélecteurs permettent de choisir plus précisément les éléments en combinant plusieurs critères.
Par exemple, .product-list .price sélectionnera uniquement les prix des produits à l'intérieur du conteneur
product-list.
Vous en saurez plus sur les sélecteurs d'attribut et les sélecteurs combinés dans les prochaines leçons.
4. Attributs style, class, id et name
Attribut style
L'attribut style est utilisé pour ajouter des styles intégrés aux éléments, ce qui peut servir de
signe distinctif pour les éléments qui sont difficiles à identifier par d'autres attributs. En web scraping, il peut être utilisé
comme un filtre supplémentaire pour rechercher des éléments spécifiques sur la page.
HTML
<p style="color: red; font-size: 18px;">Ce texte est mis en avant par un style intégré</p>
Attribut class
L'attribut class désigne un groupe d'éléments avec les mêmes styles, tels que produits, prix ou descriptions.
Lors du scraping, class aide à choisir un groupe d'éléments ayant la même structure visuelle, ce qui
simplifie l'extraction massive de données.
HTML
<p class="price">Prix : $99</p>
<p class="price">Prix : $89</p>
CSS
.price {
color: red;
}
Attribut id
L'attribut id est unique pour chaque élément, ce qui le rend précieux pour extraire des
données uniques. Par exemple, le titre d'un produit sur une page peut avoir un id unique, et cet identifiant peut
être utilisé pour choisir précisément ce titre.
HTML
<h1 id="main-title">Nom du produit</h1>
CSS
#main-title {
font-size: 30px;
}
Attribut name
L'attribut name est souvent utilisé dans les éléments de formulaire, et il peut être appliqué pour choisir précisément les champs de saisie,
tels que les champs pour email ou numéro de téléphone. Pour le web scraping, name est utile lors de
l'extraction de données à partir de formulaires.
HTML
<input type="text" name="username" placeholder="Saisissez le nom d'utilisateur">
CSS
input[name="username"] {
border: 1px solid #333;
}
5. Exemple de page utilisant CSS et HTML
Voici un exemple de document HTML où divers sélecteurs et attributs sont utilisés pour marquer et structurer
les éléments qui peuvent être utiles pour le web scraping.
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de page pour le web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Produit de la semaine</h1>
<p class="price">Prix : $99</p>
<p class="description">C'est un produit unique avec des caractéristiques exceptionnelles.</p>
<form action="/submit" method="post">
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<button type="submit">Envoyer</button>
</form>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de page pour le web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Produit de la semaine</h1>
<p class="price">Prix : $99</p>
<p class="description">C'est un produit unique avec des caractéristiques exceptionnelles.</p>
<form action="/submit" method="post">
<label for="username">Nom d'utilisateur :</label>
<input type="text" id="username" name="username">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<button type="submit">Envoyer</button>
</form>
</body>
</html>
CSS
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION