Как записать html код в файл
Обновлено: 06.07.2024
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.
Введение в HTML импорт
HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.
Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Обходные пути
Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram'ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.
Начнём
Базовый синтаксис
Прежде чем смотреть примеры, давайте глянем на синтаксис подгрузки файла через тег импорта. Импорт, это новый тип link тега, так что должно быть нетрудно понять следующую строчку:
Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.
Базовый пример
Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Чтобы записать содержимое в файл, нужно создать объект FileWriter. Этот объект возвращается методом createWriter() интерфейса File-Entry, дополняющего интерфейс Entry и предоставляющего два метода для работы с файлами:
-(функция для успешного завершения, функция для завершения с ошибкой). Этот метод мы будем применять позже для считывания содержимого файла. Он создает объект File (аналогичный тому, который возвращают элемент <input> и операция перетаскивания), связанный с выбранной записью.
У объекта FileWriter, возвращаемого методом createWriter(), есть несколько собственных методов, свойств и событий, упрощающих процесс добавления содержимого в файл:
Для подготовки содержимого, которое будет добавлено в файл, необходимо создать еще один объект. Конструктор BlobBuilder() возвращает объект BlobBuilder, предлагающий следующие методы:
В HTML-документ из листинга 12.17 мы добавили второе поле, в которое нужно будет вводить текст, представляющий собой содержимое файла. Будем использовать код из данного листинга для примеров далее в этой главе.
Листинг 12.17. Шаблон для определения имени файла и его содержимого
Информация недоступна </section>
Для выполнения операции записи откроем файловую систему, извлечем ссылку на файл или создадим новый с помощью getFile() и вставим в открытый файл предоставленные пользователем значения. Будем пользоваться двумя разными функциями: writefile() и writecontent().
Для того чтобы вам было проще учиться, мы постарались не делать файл излишне сложным. Однако вы всегда можете прибегнуть к помощи анонимных функций, если хотите ограничить контекст (поместить все внутрь одной функции), или воспользоваться возможностями объектно-ориентированного программирования для создания более продвинутых и масштабируемых реализаций.
Так же, как в случае с методом requestFileSystem(), в текущей реализации Google Chrome с конструктором BlobBuilder() необходимо использовать браузерный префикс. Для тестирования кода в браузере в этом и последующих примерах данный конструктор следует записывать как WebKitBlobBuilder().
Когда пользователь щелкает на кнопке Выполнить, информация из полей отправляется на обработку функциям writefile() и writecontent(). Функция writefile() принимает значение myentry и с помощью getFile() открывает или создает файл. Возвращенный ею объект Entry используется в методе createWriter() для создания объекта FileWriter. Если операция завершается успешно, происходит вызов функции writecontent().
Функция writecontent() принимает объект FileWriter и записывает в файл значение из поля mytext. Для того чтобы текст можно было использовать в операции записи, сначала его следует преобразовать в бинарный блок. Для этого мы применяем конструктор BlobBuilder(). Создаем объект BlobBuilder, добавляем текст к этому объекту, используя метод append(), и извлекаем содержимое в форме бинарного блока с помощью getBlob(). Это дает нам информацию в формате, подходящем для записи в файл посредством метода write().
Весь процесс выполняется асинхронно, то есть о статусе операции нам непрерывно сообщают события. В функции writecontent() мы прослушиваем только событие writeend (используя обработчик события onwriteend). В случае успеха вызываем функцию success() и выводим на экране строку «Готово!». Можно также контролировать прогресс выполнения задачи или проверять ошибки, прослушивая остальные события, предоставляемые объектом FileWriter.
Скопируйте шаблон из листинга 12.17 в новый HTML-файл (для этого шаблона можно использовать CSS-стили, которые мы создали ранее в листинге 12.2). Создайте JavaScript-файл с именем file. js и поместите в него код из листинга 12.18. Откройте HTML-документ в своем браузере, укажите имя файла и текст, который хотели бы в него вставить. Если на экране появится строка «Готово!», значит, операция была выполнена успешно.
Для того, чтобы начать работать с технологией HTML и изучать основные элементы этого языка, нам понадобится специальный файл, в котором мы будем работать.
Давайте приступим к практическим действиям и прямо сейчас создадим свой первый HTML-файл.
Это будет "полигон", который мы будем наполнять содержимым, расширять и экспериментировать.
Для тех, кто любит видео:
Первый способ, который мы рассмотрим по созданию файла HTML - это способ создания файла в простом текстовом редакторе.
Способ 1. Создаем файл html в программе «Блокнот».
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.html.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Только что мы с вами создали свой первый HTML-файл, который уже можем заполнять содержимым.
Аналогично html-файл создается с помощью программы Notepad++.
Но, пользоваться таким способом не всегда бывает удобно и, как видите, это не самый быстрый способ по созданию html-файлов. Есть программы, которые позволяют решить эту проблему намного быстрее.
Одной из таких программ является универсальный редактор кода Dreamweaver.
Способ 2. Создание файла HTML в универсальном редакторе кода (на примере Dreamweaver).
После того, как программа загрузиться появляется следующее окно приветствия:
Все, что нужно сделать, это выбрать в этом окне, в разделе «Создать», файл HTML.
После этого файл будет успешно создан. Причем, обратите внимание, что программой был автоматически добавлен некоторый код.
Это обязательный код, который должен присутствовать на веб-странице о нем мы еще поговорим. Dreamweaver добавляет этот код автоматически, что экономит нам время.
Теперь, для того, чтобы этот файл появился на жестком диске, его нужно сохранить. Делается это через меню «Файл – Сохранить как…»
Далее выбираете место, где должен будет находиться этот файл, и нажимаете на кнопку сохранить.
Обратите внимание, чтобы при сохранении вы случайно не убрали расширение html, которое присваивается файлу.
Аналогично можно создать файл HTML и в других программах, я лишь хотел показать общий смысл, как это делается.
В предыдущем уроке мы научились читать из текстового файла. В этом уроке будем записывать в него.
Эти два метода очень похожи, но есть одно важное отличие: для записи необходимо наличие права на запись. Это значит, что должен размещаться в директории, в которой у вас есть необходимые права.
Если вы работаете локально на своём компьютере, то можете сами установить права: щёлкните правой мышью на папке и выберите "Свойства/Properties". На большинстве вэб-хостов обычно имеется только одна папка с правами записи. Часто она называется "cgi-bin", "log", "databases" и т. п. Если ваш вэб-хост допускает, можно устанавливать права самостоятельно. Обычно можно щёлкнуть правой мышью на папке в FTP-клиенте и выбрать "properties" или "permissions" ил что-то похожее. Скриншот ниже показывает, как это выглядит в FileZilla.
См. также страницы поддержки ваших вэб-хостов.
Обратите внимание, что именно текстовый файл должен находиться в папке с правами на запись, а не РНР-файл.
Открытие текстового файла для записи
Как и при чтении текстового файла, функция fopen используется при записи, но на этот раз режим устанавливается "w" (writing) или "a" (appending).
Разница между writing и appending в том, как размещается 'курсор' - в начале или в конце текстового файла.
В примерах этого урока используется пустой текстовый файл textfile.txt. Но вы можете создать свой собственный файл, если желаете.
Сначала попробуем открыть этот текстовый файл для записи:
Пример 1: Запись строки в текстовый файл
Для записи строки мы должны использовать функцию fwrite:
Поскольку файл открыть для записи, строка добавляется в начало файла и перезаписывает существующую строку. Если мы открываем файл для appending, строка добавляется в низ файла, который увеличивается на одну строку всякий раз при записи.
Пример 2: Добавление блока текста в текстовый файл
Разумеется, можно также добавлять целый текстовый блок, а не одну строку:
В следующих уроках мы разберём другой способ хранения данных: базы данных.
Читайте также: