Веб-скрэпинг. HTML и CSS
Один из основных источников данных – это, конечно, Интернет. И я даже не о данных, которые можно скачать по ссылке в .csv или каком-то другом табличном формате. Данные можно напрямую собирать с самих веб-страниц – это называется веб-скрэпингом. Для этого нам нужно немного разобраться с тем, а как вообще работает этот ваш Интернет. [
Когда в веб-браузере (например, Chrome, Safari или Firefox) мы пишем адрес в адресной строке, то происходит два процесса: сначала происходит обращение к DNS-серверу, который связывает строковое название сайта и IP-адрес – уникальный адрес сайта в сети. Потом браузер обращается по IP-адресу к веб-серверу и возвращает нам текст, размеченный с помощью языка разметки HTML. Затем веб-браузер рендерит (т.е. отрисовывает) нам полученную веб-страницу.
Веб-скрэпинг вклинивается в этот “естественный” процесс: с помощью R мы имитируем работу веб-браузера. Мы передаем адрес веб-сайта, получаем IP-адрес, передаем его веб-серверу и получаем HTML-страницу. Однако вместо отрисовки этой веб-страницы, мы пытаемся вытащить из нее то, что нам интересно. Для этого нам нужно знать как устроена HTML-страница
HTML разметка
HTML расшифровывается как HyperText Markup Language, это стандартизированный язык разметки, который используется для разметки веб-страниц в Интернете. Он был разработан сэром Тимом Бернерсом-Ли вместе с Всемирной паутиной (World Wide Web), протоколом передачи данных HTTP, стандартом веб-адресов URL – в общем, вместе со всем современным Интернетом как мы его знаем.
Давайте посмотрим на пример простой веб-страницы в формате HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
</head>
<body>
<h2>Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
</body>
</html>Если внимательно приглядеться, то можно увидеть несколько предложений на русском языке, которые со всех сторон завернуты в теги. Теги начинаются с значка <и заканчиваются >. Большинство тегов проставляются два раза: для открытия и для закрытия. Закрывающий тег выглядит так же, как и открывающий, но в нем стоит / после <:
<h1>h1 – тег для закоголовка первого уровня</h1>Теги задают структуру страницы, а так же форматируют текст желаемым образом. Давайте сначала разберемся со структурой HTML-документа, она универсальна для всех веб-страниц. 1. Сверху нас ждет <!DOCTYPE HTML> – это просто говорит нам о том, что это HTML-страница, а не что-то еще. 2. После <!DOCTYPE HTML> идет тег <html>, внутри которого есть два тега: <head> – внутри него лежит название страницы, подключаемые стили CSS и подключаемые элементы JavaScript (которые дают странице интерактивность). Короче говоря, <head> – это мета-данные страницы. 3. Второй тег внутри <html> –<body>, где лежит собственно содержание веб-страницы: сам ее текст, картинки, таблицы и т.д.
Внутри <body> находятся теги, которые форматируют внешний вид текста веб-страницы: заголовки, параграфы, списки и т.д. Например, для создания обычного параграфа текста используется тег <p>, а для заголовков – <h*>, где вместо * – уровень заголовка от 1 до 6.
Давайте теперь посмотрим, как эта HTML-страница отрендерится в веб-браузере (если вы работаете из RStudio, то для .html документов есть кнопка >Preview):
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
</head>
<body>
<h2>Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
</body>
</html>
Теперь попробуем добавить чего-то новенькое, например, гиперссылку на веб-страницу в Интернете. Для этого нам понадобится не только тег <a>, но и прописать атрибут href для этого тега. Выглядеть это будет следующим образом.
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
</head>
<body>
<h2>Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
<p><a href="https://www.w3schools.com/html/">Здесь</a> можно узнать про HTML-теги гораздо больше.</p>
</body>
</html>
Теперь попробуйте самостоятельно: 1. Добавить еще один заголовок второго уровня 2. Добавить еще один абзац с текстом 3. Добавить пронумерованный список. Для этого вам нужно самостоятельно найти нужные теги по ссылке
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
</head>
<body>
<h2>Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
<p><a href="https://www.w3schools.com/html/">Здесь</a> можно узнать про HTML-теги гораздо больше.</p>
<h2>Еще один заголовок!</h2>
<p>А еще можно создать пронумерованный список:</p>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Для веб-скрэпинга особенно важны таблицы, давайте посмотрим как они устроены в HTML-разметке.
<h2>Мои любимые цвета</h2>
<table>
<tr><th>Ранг</th><th>Цвет</th></tr>
<tr><td>1</td><td>Зеленый</td></tr>
<tr><td>2</td><td>Голубой</td></tr>
<tr><td>3</td><td>Черный</td></tr>
<tr><td>4</td><td>Желтый</td></tr>
</table>
CSS
Если мы хотим поменять внешний вид какого-либо элемента, то мы можем тоже прописать как атрибут style внутри интересующего нас тега:
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
</head>
<body>
<h2 style="color:green">Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
<p><a href="https://www.w3schools.com/html/">Здесь</a> можно узнать про HTML-теги гораздо больше.</p>
<h2>Еще один заголовок!</h2>
<p>А еще можно создать пронумерованный список:</p>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Но так сегодня никто не делает: прописывать для каждого отдельного тега стиль – дело неблагодарное! Вместо этого делают каскадные таблицы стилей (CSS), которые выглядят следующим образом:
h2 {
color:blue;
font-family: Arial;
}
p {
color: #3333AA;
font-family: Helvetica;
font-size: 20;
}Для каждого интересующего тега (заголовка второго уровня <h2> и параграфа <p> мы прописали свой стиль. Этот код нам нужно сохранить в отдельный файл с расширением .css (назовем его my_style.css). Затем файл со стилями нужно прикрепить в шапке (<head>) HTML-документа:
<link rel="stylesheet" href="my_style.css">Если мы положим наш .css-файл с my_style.css в папку с HTML-файлом, то теперь HTML-страница будет рендериться следующим образом:
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
<link rel="stylesheet" href="my_style.css">
</head>
<body>
<h2 style="color:green">Классная веб-страничка!</h2>
<p>Здесь написан какой-то текст.</p>
<p><a href="https://www.w3schools.com/html/">Здесь</a> можно узнать про HTML-теги гораздо больше.</p>
<h2>Еще один заголовок!</h2>
<p>А еще можно создать пронумерованный список:</p>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Более того, мы можем создавать собственные классы стилей, которые затем будем использовать для произвольных элементов веб-страницы:
h2 {
color:blue;
font-family: Arial;
}
p {
color: #3333AA;
font-family: Helvetica;
font-size: 20;
}
.working_class {
color: red;
}Давайте назовем этот файл “my_style2.css” и присоединим его к некоторым элементам:
<!DOCTYPE HTML>
<html>
<head>
<title>Моя веб-страничка</title>
<link rel="stylesheet" href="my_style2.css">
</head>
<body>
<h2 style="color:green">Классная веб-страничка!</h2>
<p class="working_class">Здесь написан какой-то текст.</p>
<p><a href="https://www.w3schools.com/html/">Здесь</a> можно узнать про HTML-теги гораздо больше.</p>
<h2>Еще один заголовок!</h2>
<p>А еще можно создать пронумерованный список:</p>
<ol>
<li class="working_class">Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>