1. Web scraping üçün CSS əsas anlayışları
Uğurlu web scraping üçün, HTML strukturu və səhifədəki CSS siniflərini başa düşmək əsas amildir. Səhifə elementlərinin CSS vasitəsilə necə stilizə edildiyini və strukturlaşdırıldığını anlamaq lazımdır ki, lazım olan məlumatları dəqiq seçib çıxarmaq mümkün olsun. CSS-in HTML-ə qoşulmasını, selektorların və style, class, id və name atributlarının tətbiqlərini nəzərdən keçirək, onlar web səhifə strukturu ilə işdə scraping üçün necə kömək edir.
CSS web səhifələrin stilizasiyasına cavabdehdir, lakin web scraping məqsədləri üçün CSS-i struktur və element seçimi aləti kimi nəzərdən keçirə bilərik. Scraping üçün vacib olan əsas CSS anlayışlar:
- Selektorlar — bunlar müəyyən HTML elementlərini göstərən qaydalardır. Onlardan istifadə lazımi məlumatları dəqiq müəyyən etməyə kömək edir.
-
class,id, vənameatributları — bunlar elementləri fərqləndirmək və seçmək üçün istifadə olunan unikal identifikatorlardır. Scraping üçün xüsusilə faydalıdır, çünki lazım olan elementləri təcrid etməyə kömək edir və məlumatların çıxarılmasını sadələşdirir.
2. CSS-in HTML sənədinə qoşulması
CSS HTML-ə bir neçə yolla qoşula bilər. Bu yolları başa düşmək elementləri tapmaq və onların stillərini və siniflərini müəyyən etmək baxımından vacibdir, çünki bu, hədəf məlumatları təcrid etməkdə kömək edəcək.
Xarici fayl
CSS tez-tez xarici fayl kimi qoşulur ki, bu da HTML sənədində <link> teqi ilə <head> bölməsində görünə bilər. Xarici CSS faylları bütün səhifə üçün stilləri müəyyən edir, o cümlədən identifikatorlar və siniflər, bu da scraping zamanı naviqasiyanı asanlaşdırır.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Daxili stillər
Bəzən stillər səhifənin daxilində <style> teqi vasitəsilə müəyyən edilə bilər. Daxili stillər <head> bölməsində tapıla bilər və lazım olan elementləri seçmək üçün siniflər və identifikatorların başa düşülməsində işarə kimi istifadə olunabilir.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Daxili atributlar (attribute style)
Daxili atributlar birbaşa HTML teqlərində yerləşir və yalnız müəyyən elementə təsir göstərir. style atributu tez-tez unikallığa malik xüsusiyyətlərə malikdir, hansı ki, hədəf məlumatları müəyyən etməkdə faydalı ola bilər.
<p style="color: red; font-size: 18px;">Daxili stilli mətn</p>
<p style="color: red; font-size: 18px;">Daxili stilli mətn</p>
3. CSS-də Selektorlar
CSS-də selektorlar elementlərə stil tətbiq etmək üçün istifadə olunur, amma veb-scraping-də onların əsas istifadəsi — bu lazım olan məlumatları saxlayan elementləri dəqiq seçməkdir. Veb-scraping zamanı istifadə olunan əsas selektor növlərini nəzərdən keçirək.
Əsas selektor növləri
Tag selektor: Bu selektor müəyyən bir tag olan bütün elementləri seçir (məsələn, <p> və ya <div>). Veb-scraping zamanı tag selektorlar mətn, şəkillər və digər məlumatları saxlayan taglardan məlumat çıxarmaq üçün faydalıdır.
p {
color: blue;
}
Class selektor: Bu selektor müəyyən class atributuna malik elementləri seçir. Class-a adın qarşısında nöqtə (.) qoyulmaqla istinad edilir. Veb-scraping zamanı class-lar xüsusilə faydalıdır, çünki onlar bir formada stilizasiyaya malik elementləri (məsələn, məhsul siyahısı) müəyyən edə bilərlər.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">Qiymət: $99</p>
ID selektor: Bu selektor unikal id atributu olan elementi seçir, # işarəsi ilə göstərilir. Veb-scraping zamanı id xüsusilə unikal elementləri, məsələn, səhifədə başlıq və ya düyməni seçmək üçün faydalıdır.
#product-title {
font-size: 24px;
}
#product-title {
font-size: 24px;
}
<h1 id="product-title">Məhsul Adı</h1>
Atribut selektorları: Bu selektorlar müəyyən atributa, məsələn, name, type və s. uyğun olan elementləri seçir. Veb-scraping zamanı atribut selektorları form elementləri və ya müəyyən sahələri (məsələn, name sahəsi olan) seçmək üçün faydalıdır.
input[name="email"] {
border: 2px solid blue;
}
Kombinə edilmiş selektorlar: Bu selektorlar bir neçə kriteriya birləşdirərək elementləri daha da dəqiq seçməyə imkan verir. Məsələn, .product-list .price yalnız product-list konteynerinin daxilində məhsul qiymətlərini seçəcək.
Atribut və kombinə edilmiş selektorlar haqqında daha ətraflı növbəti mühazirələrdə öyrənəcəksiniz.
4. style, class, id və name atributları
style atributu
style atributu elementlərə daxili stillər əlavə etmək üçün istifadə olunur. Bu, digər atributlarla müəyyənləşdirilməsi çətin olan elementlər üçün fərqləndirici bir xüsusiyyət kimi xidmət edə bilər. Veb-scraping-də bu atributdan konkret elementləri səhifədə tapmaq üçün əlavə filtr kimi istifadə etmək olar.
<p style="color: red; font-size: 18px;">Bu mətn daxili üslub ilə seçilib</p>
class atributu
class atributu eyni üsluba malik olan elementlərin, məsələn, məhsullar, qiymətlər və ya təsvirlər kimi qruplarını təyin edir. Scraping zamanı class eyni vizual struktura malik elementlərin qrupunu seçməyə kömək edir, bu da məlumatların kütləvi şəkildə çıxarılmasını asanlaşdırır.
<p class="price">Qiymət: $99</p>
<p class="price">Qiymət: $89</p>
<p class="price">Qiymət: $99</p>
<p class="price">Qiymət: $89</p>
.price {
color: red;
}
id atributu
id atributu hər bir element üçün unikaldır. Bu, unikal məlumatları çıxarmaq üçün qiymətli bir göstərici halına gəlir. Məsələn, səhifədəki məhsul başlığı unikaldırsa, bu identifikatoru həmin başlığı dəqiq seçmək üçün istifadə etmək olar.
<h1 id="main-title">Məhsulun adı</h1>
<h1 id="main-title">Məhsulun adı</h1>
#main-title {
font-size: 30px;
}
name atributu
name atributu əsasən forma elementlərində istifadə olunur və elektron poçt və ya telefon nömrəsi sahələri kimi daxil etmə sahələrini dəqiq seçmək üçün tətbiq oluna bilər. Veb-scraping üçün name formadan məlumat çıxarmaq üçün faydalıdır.
<input type="text" name="username" placeholder="İstifadəçi adını daxil edin">
<input type="text" name="username" placeholder="İstifadəçi adını daxil edin">
input[name="username"] {
border: 1px solid #333;
}
5. CSS və HTML istifadə edərək səhifə nümunəsi
Aşağıda web scraping üçün faydalı ola bilən elementləri seçmək və strukturlaşdırmaq üçün müxtəlif selektorlar və atributların istifadə olunduğu bir HTML sənədinin nümunəsi təqdim olunub.
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Web scraping üçün səhifə nümunəsi</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Həftənin məhsulu</h1>
<p class="price">Qiymət: $99</p>
<p class="description">Bu, unikal xüsusiyyətlərə malik bir məhsuldur.</p>
<form action="/submit" method="post">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Göndər</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Web scraping üçün səhifə nümunəsi</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Həftənin məhsulu</h1>
<p class="price">Qiymət: $99</p>
<p class="description">Bu, unikal xüsusiyyətlərə malik bir məhsuldur.</p>
<form action="/submit" method="post">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Göndər</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION