Основы программирования в Python

Алла Тамбовцева, НИУ ВШЭ

Немного про язык html

HTML (HyperText Markup Language) ‒ язык разметки (для тех, кто работал с RMarkdown: Markdown ‒ тоже язык разметки, только попроще). Поэтому, любая html-страница в интернете - это обычный текст, в котором отмечено, какие части представляют собой заголовок, абзац, таблицу, картинку и так далее. Вообще, правилом хорошего тона считается включать в html-код только содержательные вещи с разметкой, а все оформление и интерактив выносить в отдельные файлы.

Обычно, за страницей в интернете кроется примерно следующее. На сервере лежит несколько папок. В одной папке лежат сами html-страницы с размеченным текстом. В другой ‒ хранятся файлы css (Cascading Style Sheets), в которых заданы параметры оформления разных страниц (цвет заголовков, фона, меню, ширина рамочек вокруг текста и картинок и прочее). В третьей папке находятся файлы с кодом на Javascript, которые отвечают за всевозможный интерактив: будь то всплывающий перевод слова при наведении курсора, увеличение картинки при просмотре, подсветка формы для заполнения, если формат даты неверный, и так далее. Javascript ‒ тоже отдельный язык программирования (несмотря на название, с Java не связан), на котором пишется код, соответствующий интерактиву.

Все эти файлы связаны между собой: к каждому html-файлу присоединены с помощью ссылок css-файл с оформлением и код javascript. Иногда, к сожалению, html-страницы создаются не по стандартам, и в файле с текстом встречаются огромные куски, отвечающие за оформление, что значительно затрудняет работу (на примеры таких сайтов мы потом посмотрим).

Сегодня мы начнем разбирать веб-скрейпинг и парсинг html-файлов. Обычно два этих процесса связаны, просто парсинг ‒ более узкое понятие. Веб-скрейпинг (web scraping) ‒ это вообще выгрузка данных с веб-страниц, а парсинг (parsing) ‒ это выбор текста из файла с разметкой, например, из html или xml. Но прежде, чем разбирать работу с html-файлами, давайте познакомимся поближе с их структурой. Для этого зайдем на сайт w3schools.com и откроем раздел Try it yourself.

Это удобный учебный инструмент для создания html-файлов (и да, вообще на сайте много документации и тьюториалов по html, css и веб-дизайну вообще). Давайте создадим свою страничку.

Для разметки используются тэги ‒ служебные слова в треугольных скобках <>. Тэги бывают разными: открывающие и закрывающие. Закрывающие тэги начинаются с прямого слэша (/).

Вся страница заключается в тэг <html></html>. В начале обычно указывается какая-то мета-информация: язык страницы, кодировка, метки, название и прочее. Здесь, правда, такого нет. "Тело" документа, собственно страница, которая отображается при просмотре, заключается в тэг <body></body>.

Для заголовков используются тэги с h (h ‒ от header). Тэги <h1></h1> ‒ для заголовков первого уровня, тэг <h2></h2> ‒ для заголовков уровня, и так далее. В тэги <p></p> заключаются абзацы (p ‒ от paragraph). Давайте для начала внесем изменения в файл ‒ создадим страничку о себе. Можете скопировать код ниже в поле на странице Try it Yourself и нажать кнопку Run.

In [ ]:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Моя первая html-страница</h1>
<h2>О себе</h2>
<p>Я учусь создавать html-страницы.</p>

</body>
</html>

Теперь добавим небольшую таблицу. Знания об устройстве таблиц нам понадобятся, потому что чаще всего при парсинге приходится "выцапывать" данные из таблиц на html-страницах.

Вся таблица заключается в тэги <table></table>. Далее таблица заполняется по строкам. Строка таблицы заключается в тэги <tr></tr> (от table row). Ячейки таблицы тоже имеют свои тэги. Если ячейка обычная, то есть не является названием столбца или строки, она окружена тэгом <td></td> (от table ), если является ‒ то <th></th> (от table header).

Создадим свою таблицу:

In [ ]:
<table>
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Тамбовцева</td>
<td>Алла</td>
<td>24</td>
</tr>
</table>

Можем добавить явные границы ячеек ‒ добавить атрибут border и отрегулировать ширину.

In [ ]:
<table border="1">
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Тамбовцева</td>
<td>Алла</td>
<td>24</td>
</tr>
</table>

Еще добавим заголовок и на этом закончим. Еще краткий конспект по html будет выложен в дополнительных материалах.

In [ ]:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Моя первая html-страница</h1>
<h2>О себе</h2>
<p>Я учусь создавать html-страницы.</p>

<table border="1">
<caption>Информация</caption>
<tr>
<th>Фамилия</th>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Тамбовцева</td>
<td>Алла</td>
<td>24</td>
</tr>
</table>

</body>
</html>