HTML Yapısı ve CSS Seçicileri
DOM ağaçlarını anlayın ve öğeleri hedeflemek için CSS seçicileri yazın.
HTML Yapısı ve CSS Seçicileri, CoddyKit'te ücretsiz bir R Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, R Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. R Academy kursu toplamda 4 dersten oluşur.
HTML DOM Ağacı
Her web sayfası bir Belge Nesne Modeli (DOM) ağacı olarak yapılandırılır. HTML öğeleri birbirinin içine yerleşerek bir üst-alt hiyerarşisi oluşturur. Web kazıma, veri çıkarmak için bu ağaçta gezinir.
# HTML structure conceptually:
# <html>
# <body>
# <div class='container'>
# <h1 id='title'>Hello</h1>
# <p class='text'>World</p>
# </div>
# </body>
# </html>
# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))CSS Seçicisi: Etiket Seçicisi
En basit CSS seçicisi, öğeleri etiket adına göre hedefler. p yazmak tüm paragraf öğelerini seçer. h1 yazmak tüm 1. düzey başlıkları seçer.
library(rvest)
html <- read_html('
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<h2>A heading</h2>
</div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')CSS Seçicisi: Sınıf ve ID
Öğeleri sınıfa göre seçmek için .classname, ID'ye göre benzersiz bir öğe seçmek için #idname kullanın. Sınıflar birçok kez görünebilir; ID'ler sayfada benzersiz olmalıdır.
library(rvest)
html <- read_html('
<div>
<p class="highlight">Important text</p>
<p class="normal">Regular text</p>
<span id="price">$9.99</span>
</div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))Alt Öğe ve Doğrudan Alt Öğe Seçicileri
div p, bir div içindeki (herhangi bir derinlikteki) tüm p öğelerini seçer. div > p yalnızca doğrudan alt öğeleri seçer. h1 + p, bir h1 öğesinin hemen ardından gelen p öğesini seçer (bitişik kardeş).
library(rvest)
html <- read_html('
<div class="outer">
<p>Direct child</p>
<section>
<p>Nested deeper</p>
</section>
</div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p) # 2
# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p) # 1Öznitelik Seçicileri
CSS öznitelik seçicileri, HTML özniteliklerine göre filtreleme yapmanızı sağlar: [attr] varlığı denetler, [attr='val'] tam değeri denetler, [attr*='val'] ise değerin alt dize içerip içermediğini denetler.
library(rvest)
html <- read_html('
<div>
<a href="https://example.com">External</a>
<a href="/about">Internal</a>
<a>No href</a>
</div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href) # 2
# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external) # 'External'XPath Temelleri
XPath, CSS seçicilerine bir alternatiftir ve karmaşık sorgularda daha güçlüdür. rvest'te html_element(html, xpath='//tag') kullanın. //p, herhangi bir yerdeki herhangi bir p öğesi anlamına gelir; /html/body/p ise mutlak bir yoldur.
library(rvest)
html <- read_html('
<html><body>
<table>
<tr><td class="price">10.99</td></tr>
<tr><td class="price">5.50</td></tr>
</table>
</body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')
# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)Seçicileri Birleştirme
Daha hassas seçim için seçiciler birleştirilebilir. div.card h2, card sınıfına sahip bir div içindeki h2 öğelerini seçer. Virgül, birbirinden bağımsız birden çok seçiciyi ayırır: h1, h2, h3 üç başlık düzeyinin tümünü seçer.
library(rvest)
html <- read_html('
<div class="card">
<h2>Card Title</h2>
<p class="desc">Description here</p>
<span class="price">$19</span>
</div>
<div class="footer">
<h2>Footer Heading</h2>
</div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2) # 'Card Title'
# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)SelectorGadget Aracı
SelectorGadget, CSS seçicilerini etkileşimli olarak bulmanıza yardımcı olan bir tarayıcı yer imi uygulamasıdır. İstediğiniz öğelere (yeşil vurgulanır) ve istemediğiniz öğelere (kırmızı vurgulanır) tıklayın — araç en kısa CSS seçicisini otomatik olarak oluşturur.
# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:
library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')Sayfaları DevTools ile İnceleme
Tarayıcı DevTools'u (F12), DOM'u doğrudan incelemenizi sağlar. Herhangi bir öğeye sağ tıklayın, İncele'yi seçin; Öğeler paneli HTML'yi gösterir. Üzerine gelmek, sayfadaki öğeleri vurgulayarak hedeflemeniz gereken tam etiketi, sınıfı ve ID'yi belirlemenize yardımcı olur.
# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest
# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well
# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')Sözde Sınıflar ve nth-child
:first-child, :last-child ve :nth-child(n) gibi CSS sözde sınıfları, öğeleri üst öğeleri içindeki konumlarına göre seçmenizi sağlar — bu, öğelerin ayırt edici sınıfları olmadığında kullanışlıdır.
library(rvest)
html <- read_html('
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first) # 'First'
# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third) # 'Third'
# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens) # c('Second', 'Fourth')Seçici Özgüllüğü Kuralları
Birden çok seçici eşleşebildiğinde, hangisinin öncelikli olacağını özgüllük belirler. ID'ler sınıflara, sınıflar etiketlere üstün gelir. Veri kazımada bunun önemi daha azdır — ancak özgüllüğü bilmek, yanlış eşleşmeleri önleyen hassas seçiciler yazmanıza yardımcı olur.
library(rvest)
html <- read_html('
<div id="header" class="top">
<p class="title">Main Title</p>
</div>
<div class="content">
<p class="title">Content Title</p>
</div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)
# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific) # 'Main Title'
# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)Hızlı Kontrol
Web scraping işleminde rvest ile kullanılan CSS seçicilerini anlayıp anlamadığınızı test edin.
Özet: HTML ve CSS Seçicileri
Temel çıkarımlar: DOM bir ağaçtır; CSS seçicileri bu ağaçta gezinmenizi sağlar. Öğe türü için tag, sınıf için .class, benzersiz öğeler için #id, doğrudan alt öğeler için > ve öznitelikler için [attr] kullanın. SelectorGadget ve DevTools, seçicileri etkileşimli olarak keşfetmenize yardımcı olur. CSS'in yetersiz kaldığı durumlarda XPath (//tag[@attr]) kullanılabilir.
# Summary of key CSS selectors for web scraping:
# 'p' -> all <p> elements
# '.price' -> elements with class='price'
# '#main' -> element with id='main'
# 'div > p' -> direct child p of div
# 'a[href]' -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2' -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')
Yapay zeka eğitmeniyle R öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 43
- Dersler
- 159
Sıkça Sorulan Sorular
“HTML Yapısı ve CSS Seçicileri” dersi ücretsiz mi?
Evet — “HTML Yapısı ve CSS Seçicileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve R Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. R Academy kursu toplamda 4 dersten oluşur.
“HTML Yapısı ve CSS Seçicileri” dersinde ne öğreneceğim?
DOM ağaçlarını anlayın ve öğeleri hedeflemek için CSS seçicileri yazın. R Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
R Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te R Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“HTML Yapısı ve CSS Seçicileri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu R Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her R Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- HTML Yapısı ve CSS Seçicileri
- html_element() ve html_text() Temelleri
- Tabloları ve Bağlantıları Kazıma
- Sayfalandırmayı ve Birden Fazla Sayfayı İşleme