Как разобрать html по файлам

Обновлено: 06.07.2024

Мы с Вами подошли к той теме, которая требует максимальное количество вашего внимания, поняв эту тему, вы без проблем сможете выстроить структуру будущего сайта.

Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.

Если вы активно пользуетесь интернет, то, думаю, вы замечали, что ссылки могут ссылаться на страницу / файл, который находится совершенно на другом сервере, давайте рассмотрим от чего это зависит.

В HTML гиперссылки (или просто "ссылки") определяются тегом <a> (HTML Anchor Element).

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Мы уже с Вами неоднократно говорили, что некоторые теги используются только совместно с атрибутами (бесполезны сами по себе) и это снова тот случай. Атрибут href (аббревиатура от hyper reference) - это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

Относительные и абсолютные пути ссылок

Многие, кто начинают только изучать язык гипертекстовой разметки, сталкиваются с трудностями при указании путей к файлам, ведь не всегда страница или даже изображение будет в той же папке, что и текущий HTML документ. Давайте детально разберем как правильно задавать пути, научимся отличать относительные пути от абсолютных и рассмотрим отличия корня веб-сервера от корня вашего диска.

В приведенном в начале статьи примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:

Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).

Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.

Путь относительно текущего документа

Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла, этим методом вы будете пользоваться и в практическом задании.

В примерах, когда мы размещали на нашей странице изображения, то мы указывали путь, как раз относительно текущего документа. Давайте рассмотрим аналогичный пример, но также укажем ссылку на html документ, расположенный в той же папке, что и сам файл:

Пример подключения файлов:

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:

Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.

Путь относительно корня сайта

Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой. Мы не будем использовать эти программные среды для практических занятий (можете установить после обучения HTML / CSS).

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:

Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.

Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.

Достаточно указать в адресе один прямой слэш, чтобы с любой страницы сайта перейти на главную страницу сайта ( <a href = "/" ).

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:

Ниже представлены все значения этого атрибута:

Атрибут	Значение
_blank	Загружает страницу в новое окно браузера.
_self	Загружает страницу в текущее окно. Это значение по умолчанию.
_parent	Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top	Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framename	Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника "HTML фреймы".

Атрибут mailto

Использование атрибута "mailto" в HTML документе позволяет создать ссылку для отправки письма:

Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

subject —тема письма.
cc —копия письма.
bcc —скрытая копия письма.
body —тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

Изображение как ссылка

Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a> :

При этом при клике на картинку будет осуществлён переход по указанной ссылке:

Размещение файлов на сайте для скачивания

С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download , он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
download	14.0	20.0	15.0	Нет	Нет	13.0

Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
Используя полученные знания и не изменяя структуры архива составьте следующую HTML страницу (index.html в архиве), которая содержит четыре ссылки:

Практическое задание № 4.

Первая ссылка "Информация о примере" должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:

Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.

Внутри этих страниц должно быть размещено аналогичное изображение, при клике на которое должен быть осуществлен переход обратно на главную страницу:

Заключительная задача заключается в том, чтобы при клике на четвертую ссылку запускалось скачивание архива, расположенного в дочернем каталоге download

Результат примера вы можете скачать после выполнения задач для самопроверки:

Для того, чтобы брать информацию со страницы, нам надо изучить ее. Посмотрев исходный код страницы, можно выделить следующие фрагменты:

Теперь необходимо разобраться, как получать информацию о самих участниках. Опять же глянем исходный код страницы:

В таблице каждая строка представлена 4 ячейками:

Ячейка с классом regional_tour_fio. В данной ячейке размещается фамилия, имя и отчество участника
Ячейка с классом regional_tour__nomination_td. В данной ячейке размещается элемент span, класс которого зависит от номинации, в которой участ вовал пользователь. Таких номинаций три:
- Бухгалтерский учет и налогообложение (класс nomination b)
- Кадровый учет и трудовое право (класс nomination k)
- Платформа 1С:Предприятие 8 – разработка и администрирование (класс nomination it)
Ячейка с классом text-center. В данной ячейке размещается количество баллов, набранных за отборочный тур. Также здесь можно увидеть атрибут title, в котором хранится калькуляция баллов. Например "Тест: 84, акция Вконтакте: 15, акция от партнера: 15". Здесь хотелось бы отметить, что обязательно указывается только "Тест", остальные значения могут не указываться, если участник не принимал участия в акциях партнера или проводимых Вконтакте.
Ячейка без опозновательных знаков :) В ней находится номер сертификата Профессионал 1С:ИТС. Ее будем определять как ячейку без атрибута class.

Создание справочников

Создадим пустую конфигурацию и добавим справочники Участники и Партнеры. На рисунке ниже показаны реквизиты справочников

В справочнике Участники реквизиты Фамилия, Имя, Отчество, Сертификат имеют тип Строка, БаллыЗаТест, БаллыВК, БаллыПартнер, ОбщиеБаллы имеют тип число и реквизит Партнер имеет тип СправочникСсылка.Партнеры. В справочнике Партнеры все реквизиты имеют тип строка.

Теперь создадим общую форму, с помощью которой будем обновлять информацию в справочниках. В данной форме создадим две команды: ОбновитьИнформацию и ЗакрытьФорму.

Разбор адреса

Начнем писать код в модуле этой формы. Для удобства работы напишем сперва функцию СтруктураАдреса, которая будет разбирать наш адрес по частям и возвращать структуру. Согласно RFC1738, адрес страницы строится следующим образом:

Получение DOM-объектов с веб-страницы

Получение и обработка данных из DOM-объектов

Чтобы получить необходимую информацию, нам необходимо загрузить страницу, где она расположена. Но у нас таких страниц несколько, и для этого нам необходимо обработать элементы списка партнеров. Чтобы получить список партнеров и адреса страниц, нам надо просмотреть все элементы option и получить значение атрибута value, из которого получим адреса страниц и сам текст этого элемента. Поиск элемента в объектах DOM будем осуществлять с помощью метода построителя DOM - ПолучитьЭлементыПоИмени(). В результате работы этого метода мы получим переменную с типом СписокЭлементовDOM(), в котором будут содержаться все элементы option и его содержимое. Для получения атрибута используем метод ПолучитьАтрибут(), а для получения содержимого элемента используем метод ТекстовоеСодержимое() Получить. Эти данные мы сохраним в структуре Партнер("Город", "НомерНаСайте", "Партнер"), которую в свою очередь добавим в массив. Вот тут у меня вопрос к читателям: как лучше сделать - передавать по одной структуре на сервер и там сохранять в справочнике или собрать все структуры в массив и передать массив на сервер? Я попробовал оба варианта, и по мне лучше второй. Далее мы подгружаем все страницы с информацией о участниках поочередно. Для получения информации об участниках необходимо найти таблицу без шапки (элемент tbody) и в нем получить все строки (элемент tr). После этого просматриваем все ячейки строки (элемент td) на соответствие атрибута class одному из условий. Все условия мы с вами рассмотрели ранее. Когда получаем элементы ячеек, нам необходимо выполнить некоторую обработку:

В ячейке "Номинация" необходимо найти элемент span и на основании атрибута class данного элемента получить номинацию;
Разобрать атрибут title в ячейке с количеством баллов, чтобы получить отдельно баллы за тест, за акцию ВК и баллы от партнеров.

Все полученные данные сохраняем в структуру Участник("ФИО", "Номинация", "БаллыТест", "БаллыВК", "БаллыПарт", "ОбщиеБаллы", "Сертификат", "Партнер"). Как и в случае с партнерами, данную структуру добавляем в массив. Полученные массивы отправляем на сервер для сохранения. В итоге функция получилась следующая:

Сохранение данных в справочниках

Для сохранения данных в справочниках мы создадим функции ОбновитьУчастников(МассивУчастников) и ОбновитьПартнеров(МассивПартнеров):

Осталось только сделать приятные мелочи по оформлению, но каждый делает на свой вкус и цвет. Я вывел форму списка справочника Участники единственной на рабочую облать начальной страницы, и вместо вывода номера сертификата я применил условное форматирование (строка выделяется цветом, если человек получил сертификат). В итоге получилось следующее:

В статье рассматривается реализация разбора структурированных текстов на примере анализа HTML-страниц средствами PHP

Разбор структурированного текста может быть осуществлен с помощью регулярных выражений или программных библиотек, предназначенных для восстановления его древовидной структуры. Но регулярные выражения для сложных текстов теряют наглядность, их становится трудно воспринимать и отлаживать. Построение структурного дерева текста требует больших затрат памяти и является излишним для многих практических задач.

При извлечении информации из HTML-страниц реальных интернет-сайтов можно столкнуться с ошибками верстки, которые не критичны для отображения этих страниц в браузере, но приводят к неожиданным эффектам при построении структурного дерева документа. Веб-мастера могут вносить на сайт незначительные изменения, помещать сведения в дополнительные контейнеры или, наоборот, уменьшать степень вложенности текстов. Желательно минимизировать влияние таких преобразований структуры документов на работу программы-анализатора, извлекающей информацию с сайта.

Продемонстрируем извлечение информации из HTML-файла комбинированным способом

В этой статье будет продемонстрировано, что построение собственного анализатора позволяет записать решение задачи анализа в императивных терминах, сохраняя при этом контроль над количеством используемых ресурсов – вычислительной мощности и оперативной памяти.

В общем виде анализатор текста должен состоять из трех модулей [1]:

Лексический анализатор. На вход лексического анализатора подается исходный текст в виде последовательности символов – букв, цифр, скобок и знаков препинания. На выход лексического анализатора выдается последовательность лексем – слов, чисел, строк.
Синтаксический анализатор. Принимает последовательность лексем от лексического анализатора, проверяет на соответствие формальным правилам и составляет на их основе таблицы идентификаторов и констант.
Семантический анализатор использует результаты работы лексического и синтаксического анализаторов для окончательного решения задачи анализа текста, представляет собранную информацию в удобной для дальнейшего использования форме.

При разработке анализатора HTML-документов постараемся воспроизвести эту эталонную систему.

Определение элементов структуры текста

Начнем с лексического анализа. При его выполнении исходный текст последовательно просматривается от начала к концу с попутным выделением структурных элементов. В ходе анализа HTML-текста основной задачей является определение в нем тегов – участков текста, заключенных между угловыми скобками «<» (знак меньше) и «>» (знак больше). В свою очередь, теги состоят из имени (слова, следующего сразу за знаком «<») и атрибутов, которые тоже могут иметь значения.

Например, в программе анализатора часто встречается такой код:

Пропустить символы-разделители «\040\t\r\n» (пробел, табуляция, возврат каретки и перевод строки) и записать новую позицию в переменную P1.
Если символ в позиции P1 – цифра, то обнаружено число. Для его выделения нужно пропустить цифровые символы «0. 9» и записать новую позицию в переменную P2.
Если символ в позиции P1 – буква, то обнаружен идентификатор. Для его выделения нужно пропустить алфавитно-цифровые символы «0..9A. Za. z» и записать новую позицию в переменную P2.
Если символ в позиции P1 – открывающая кавычка, то обнаружено начало строки. Для нахождения позиции конца строки нужно пропустить все символы до тех пор, пока не встретится закрывающая кавычка. Позицию конца строки нужно записать в переменную P2, а значение переменной P1 увеличить на единицу, чтобы оно указывало на начало строки, а не на открывающую кавычку.

Такой подход к анализу текста очень экономичен в плане расхода памяти. Для хранения информации об элементах текста достаточно двух числовых переменных P1 и P2, в которые записываются позиции начала элемента и символа, следующего за его концом. Значение элемента хранится неявно в анализируемом тексте и при необходимости может быть легко получено из него как подстрока [P1:P2-1]. При этом легко вычисляется длина элемента L = P2 – P1, и она может быть оценена до обработки значения элемента. Например, можно сразу сообщить об ошибке, если длина элемента превышает допустимую.

Обобщая описанную схему, в процессе лексического анализа можно обнаружить регулярное выполнение двух действий (см. рис. 1):

поиск в тексте позиции определенного символа, который служит признаком начала синтаксической конструкции или является символом-ограничителем;
пропуск символов из заданного набора (символов-разделителей или алфавитно-цифровых символов для записи идентификаторов) до тех пор, пока не встретится «посторонний» символ.

Рисунок 1. Шаги лексического анализа тега HTML. Зеленая стрелка – переход к следующему символу, голубая стрелка – пропуск символов из набора, оранжевая – поиск символа из набора

Поэтому в основу разрабатываемого лексического анализатора были положены две взаимно дополняющие функции: SkipOver (…, набор_символов) и SkipTo (…, набор_символов). Первая служит для пропуска любых символов, не входящих в указанный набор, и возврата позиции символа, который в этот набор входит. Вторая функция выполняет поиск позиции символа, который совпадает с одним из символов указанного набора. Исходный текст на языке PHP этих функций приведен в файле iaparse r.php .

Особенностью интерпретируемых языков программирования, к каковым относится PHP, является то, что время работы участков кода сильно зависит от баланса между использованием в них встроенных функций языка и языковых конструкций. Поскольку встроенные функции являются скомпилированными блоками машинного кода, то они выполняются существенно быстрее, чем эквивалентные им конструкции, записанные операторами языка. Например, поиск символа C в строке S, записанный с помощью встроенной функции strpos ():

будет выполнен значительно быстрее, нежели реализованный средствами PHP:

Хотя на компилируемых языках оба варианта отработали бы примерно за одинаковое время. Так происходит потому, что конструкции языка PHP не выполняются процессором напрямую, а проходят через интерпретатор, который на каждой итерации цикла осуществляет вызов машинных микроподпрограмм для выполнения своих операторов. Затраты на организацию множественных вызовов могут привести к катастрофическому падению производительности.

Для повышения эффективности в реализациях часто вызываемых функций SkipOver () и SkipTo () включен «защитный код», имеющий вид:

Он обеспечивает определение длины обрабатываемой строки через вызов встроенной функции strlen (), только если ее значение не было передано через необязательный параметр $l. В противном случае сразу используется предоставленное значение.

Несмотря на то что исходные тексты функций SkipOver () и SkipTo () отличаются единственным символом (в первой содержится выражение с неравенством «!==», а во второй – с равенством «==»), что позволяет объединить их в одну функцию Skip () с дополнительным параметром, задающим специфику поведения, было решено это не делать для сохранения наглядности разрабатываемых с их использованием программ.

К сожалению, разработчики интерпретаторов не посчитали нужным включить в стандартную библиотеку функции для упрощения лексического анализа. И если в PHP5 появляется функция strpbrk (), которая подходит для решения первой задачи, то для пропуска разделителей по-прежнему придется написать ресурсозатратный код на PHP.

Еще один момент, на который следует обратить внимание для повышения эффективности программы, – это передача параметров в функцию. Если функция вызывается многократно для обработки большого объема текста, как например это происходит с функциями SkipOver () и SkipTo (), то передача в нее этого текста должна осуществляться по ссылке, а не по значению.

Для передачи параметра по ссылке в языке программирования PHP в заголовке объявления функции нужно предварить название параметра символом «&» (амперсанд). Если забыть это сделать, то при каждом вызове функции будет осуществляться копирование передаваемого значения (в нашем случае – всего обрабатываемого текста), что увеличит затраты и времени, и памяти.

Разбор HTML-документов

Функции, предназначенные для разбора текстов на языке HTML, собраны в файле iahtm l.php . Их ядром является функция iaFindTagOneOf ($p, &$s, $tags), которая осуществляет поиск в тексте $s начиная с позиции $p одного из тегов, заданных параметром $tags.

Если нужно найти какой-то конкретный тег, например «p» или «div», то искомое значение передается как строка. Если же требуется обнаружить один из нескольких тегов, например любой из набора «h1», «h2», «h3», «h4», «h5», «h6», то список тегов нужно передать как массив: array (‘h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’). В представленной реализации функции регистр тегов имеет значение, как это регламентировано спецификацией языка XML, поэтому для поиска в «произвольном» HTML в список нужно включить и теги в верхнем регистре: «H1», «H2», «H3», «H4», «H5», «H6».

В результате своей работы функция iaFindTagOneOf () возвращает либо значение FALSE, означающее, что поиск завершился неудачей, либо ассоциативный массив такой структуры:

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

Искомые теги задаются своими именами. После реализации функции iaFindTagOneOf () оказалось, что ее можно использовать для поиска как открывающего, так и закрывающего тега. В последнем случае достаточно перед именем тега поставить символ «/» (наклонную черту). Тогда код для поиска тегов, ограничивающих HTML-элемент «div», будет выглядеть как:

Остальные функции, содержащиеся в модуле, имеют вспомогательное назначение. Так, iaFindTagAny ($p, &$s) ищет в тексте $s начиная с позиции $p любой тег HTML. С ее помощью «центральная» функция iaFindTagOneOf () получает очередной тег, после чего проверяет его имя на соответствие списку, переданному в параметре $tags.

Результат работы функции $tag = iaFindTagOneOf () может быть использован в вызывающей программе напрямую, но во многих случаях синтаксические конструкции доступа к ассоциативному массиву выглядят громоздко. Поэтому в комплект включены функции обработки этого результата:

iaFoundTagPos (&$tag) – возвращает номер позиции тега $tag в обрабатываемой строке;
iaFoundTagAfterPos (&$tag) – возвращает номер позиции, следующей за тегом $tag;
iaFoundTagAttr (&$tag, $attr) – позволяет получить значение атрибута $attr тега $tag (если атрибут отсутствует, то возвращается FALSE);
iaFoundElementContent (&$s, &$tagb, &$tage) – возвращает содержимое элемента, заключенное между тегами $tagb и $tage.

Таким образом, функции из файла iahtm l.php помогают произвести синтаксический анализ HTML-кода.

Демонстрация извлечения информации из HTML-страницы

В качестве примера использования описанных в статье функций рассмотрим извлечение информации из новостной ленты главной страницы сайта журнала «Системный администратор» (см. рис. 2).

Рисунок 2. Так выглядит лента новостей сайта журнала «Системный администратор» в браузере

Прежде всего найдем в HTML-коде страницы по строке «Поздравляем с наступающим Новым годом» интересующий нас участок и попробуем выявить в нем какие-нибудь характерные особенности.

Рисунок 3. HTML-код начала ленты новостей на сайте журнала «Системный администратор». Подчеркнуты характерные участки, которые используются в качестве ориентиров при обработке текста

О кодировании текстов

При обработке текстов нельзя игнорировать кодировку, в которой они представлены. Актуальные в настоящее время кодировки можно разделить на два класса: многобайтовые (UTF-8, UTF-16, UTF-32), представляющие полное множество символов UNICODE, и однобайтовые (ASCII, КОИ-8, CP866, Windows-1251), в которых представлены подмножества из 256 выбранных символов.

В общем случае для обработки текстов, представленных в многобайтовых кодировках, нужно использовать специальные функции языка программирования, учитывающие их особенность. Очевидно, что даже длина строки в многобайтовой кодировке будет отличаться от значения, которое вернет «обычная» функция, подсчитывающая количество байтов.

В языке программирования PHP функции для обработки текстов в многобайтовых кодировках начинаются с префикса «mb_»: mb_strlen (), mb_strpos (), mb_strstr () и т.д. Они выполняются несколько медленнее своих однобайтовых аналогов, потому что для правильной работы им нужно выполнять фоновый анализ встречающихся символов. Впрочем, в интерпретируемых языках программирования этим замедлением можно смело пренебречь.

В подпрограммах, описанных в этой статье, используются обычные однобайтовые функции. Такое решение принято по той причине, что в подавляющем большинстве случаев структура анализируемых текстов (документов HTML и XML, новостных лент RSS, информационных хранилищ JSON) определяется фразами из символов, входящих в подмножество первых 127 символов кодовой таблицы ASCII. А завоевавшая широкое распространение кодировка UTF-8 использует в своей основе префиксное кодирование [2], благодаря которому между кодами первых 127 символов кодировок ASCII и UTF-8 установлено взаимно однозначное соответствие. Многобайтовые символы UNICODE в кодировке UTF-8 содержат в своей записи только байты со значениями от 127 до 255.

Описанные в статье подпрограммы можно смело использовать для обработки текстов в однобайтовых кодировках и кодировке UTF-8. Они будут корректно определять структурные элементы текста, записанные младшими 127 символами, не затрагивая его информационное наполнение, которое в свою очередь может быть произвольным.

Мы продемонстрировали извлечение информации из HTML-файла комбинированным способом, который включает:

прямой поиск начала интересующего участка HTML-кода с помощью стандартной функции PHP strpos ();
последующий сбор данных путем анализа структуры HTML-кода с помощью разработанных для этой цели функций лексического и синтаксического анализа текста.

Такой подход позволяет сочетать быструю локализацию области поиска благодаря однократному вызову встроенной функции и гибкость при выполнении анализа текста специально разработанными на языке PHP для этой цели средствами. В большинстве случаев он не имеет недостатков по сравнению с построением структурного дерева HTML-документа. А кроме того не требует установки сторонних библиотек и при необходимости может быть дополнен средствами работы с регулярными выражениями.

Задача извлечения информации из HTML-страницы, рассмотренная в этой статье, гораздо проще проекта разработки компилятора для какого-нибудь языка программирования. Но следование общим принципам построения анализатора позволило сделать программу обозримой и легко адаптируемой к возможным изменениям в дизайне анализируемого сайта. Разработанные вспомогательные функции можно применять для анализа текстов на других похожих языках – XML, RSS, JSON.

Включение в стандартную библиотеку интерпретируемых языков программирования функций SkipOver (текст, набор_символов [,начальная_позиция]) и SkipTo (текст, набор_символов [,начальная_позиция]) позволило бы существенно повысить эффективность реализаций на этих языках программ для обработки текстовой информации.

Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.

Где ваш веб-сайт должен располагаться на вашем компьютере?

Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.

Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

Небольшое отступление о регистре и пробелах

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .

Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.

Какую структуру должен иметь ваш веб-сайт?

Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:

index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .

Файловые пути

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"

Скопируйте изображение, которое вы выбрали ранее, в папку images .
Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

Некоторые общие правила о путях к файлам:

Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .

На данный момент это все, что вам нужно знать

Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?

К настоящему моменту структура вашей папки должна выглядеть примерно так:

Читайте также: