Как писать текст html страницы в блокноте

< center >Учебный ресурс для студентов .. курса отделения .

1. Сохраните документ в своей папке:
   • Файл—СохранитьКак
   • Укажите свою папку
   • Дайте имя файлу index.html
2. Откройте файл с помощью InternetExplorer и просмотрите результат.

По вопросам, связанным с этим веб-узлом, обращайтесь по адресу rspu@rspu.edu.ru

© КЛ ЛИ РГПУ, 2005-2006. Все права защищены.
Последнее изменение: 13.09.2006 .

Работа с кодировкой текста HTML-страниц

В стандартном «Блокноте» создаю простенькую HTML-страничку, на которой есть текст на русском, а теги HTML, естественно, на английском.

Через пункт меню «Файл», подпункт «Сохранить как. » страницу можно сохранить в четырех кодировках:

Кстати, заметил, что Notepad++ 7.5.6 в строке состояния часто показывает неправильный размер файла. Например, в таблице выше для номеров 2, 3 и 4 показывает 410.

Файлы в других кодировках можно открыть в «Блокноте», однако текст на русском будет отображен неправильно.

Файл в кодировке UTF-8 можно открыть в «Блокноте», но при сохранении этого файла он запишется в кодировке UTF-8-BOM. По сути это одна и та же кодировка, просто в UTF-8-BOM в начале файла записывается специальный символ (метка порядка байтов, BOM), занимающий три байта и обозначающий, что в файле используется Юникод.

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

Метод document.write

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.

Метод document.write – один из наиболее древних методов добавления текста к документу.

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

Как работает document.write

Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

HTML-документ ниже будет содержать 1 2 3 .

 1  3 

Нет никаких ограничений на содержимое document.write .

Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.

   Текст внутри TD. 

Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .

Только до конца загрузки

Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.

Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.

Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.

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

Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:

Из-за этой особенности document.write для загруженных документов не используют.

XHTML и document.write

В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.

Это лишь одна из причин, по которой XML-режим обычно не используют.

Преимущества перед innerHTML

Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.

• Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом. Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
• Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).

Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.

Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.

Антипример: реклама

Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:

На заметку:

Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.

Также используют запись:

document.write('');

Здесь вместо : обратный слеш \ обычно используется для вставки спецсимволов типа \n , а если такого спецсимвола нет, в данном случае \/ не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .

Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой document.write , рисующий на этом месте баннер.

Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.

То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.

Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.

В современных браузерах у скриптов есть атрибуты async и defer , которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать document.write именно на этом месте, и браузер не должен двигаться вперёд по документу.

Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.

Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.

Итого

Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.

• Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
• Метод document.write очень быстр. В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
• Иногда document.write используют для добавления скриптов с динамическим URL. Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.

Как писать текст html страницы в блокноте

4.11.2. Основы ИНТЕРНЕТ — программирования

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

Гипертекстом называется текст, отображаемый браузером, в который встроены специаль­ные командные коды (теги), управляющие иллюстрациями, аудио- и видеофрагментами, гиперссылки.

Использование документов с гиперссылками удобно не только в Интернете, но и вообще при создании доклада, презентации, электронного учебника и т.п. для вывода их на экран компьютера. Языком для подготовки таких электронных доку­ментов является HTML. Как уже говорилось, для того чтобы выдать на экран HTML-страницу, необходима специальная программа — браузер.

Термин HTML (Hypertext Markup Language) переводится на русский как «Язык разметки ги­пертекста». Ключевым здесь является слово «гипертекст». Под ним подразумевается воз­можность создания документов посредством включения в текст специальных указаний (те­гов). Структура тегов четко оговорена в описании языка.

Структура HTML-страницы. Большинство элементов языка HTML сопровождаются специальными скобками. Открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. Форма скобок и конструкция таких страниц имеют следующий вид:

Документ состоит из двух частей — заголовка и тела.

Заголовок задает оформление электронного документа в целом и может вообще отсутствовать. Начало заголовка обозначается тегом , а конец .

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

Этих сведений достаточно для того, чтобы уже сейчас создать простейшую тексто­вую HTML-страницу. Для этого необходимо в любом текстовом редакторе, на­пример, программе Notepad (Блокнот), создать текстовый файл с любым именем и расширением .htm . При этом придерживайтесь приведенной выше структуры HTML-страницы, но вместо слов «тело документа» напечатайте любой текст — и ваша первая HTML-страница будет готова. Посмотреть ее можно в любом брау­зере (Internet Explorer, Opera и т.д.).

Пример простейшего HTML-документа:

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

Простейшие элементы форматирования текста. Рассмотрим элементы тела HTML-страницы.

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

Для разбивки текста на параграфы используется тег . Точнее, параграф поме­щается внутрь тега .. .< /P >, но так как вложенных параграфов не бывает, закры­вающий тег можно пропускать.

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

Горизонтальная черта (HR). Еще одним способом разделения текста на части можно назвать горизонтальную линию. Она задается тегом . Закрывающий тег не требуется. При этом тег добавляет в HTML-документ горизонтальную линию. Перед и после линии поме­щается пустая строка. Атрибуты:

■ size – устанавливает высоту (толщину) линии;

■ width – устанавливает ширину (длину) линии в пикселях или процентах;

■ noshade – создает линию без тени;

■ color – задает цвет линии.

Пример: — обычная линия, a — потолще, красного цвета.

Заголовки различных уровней (Н1-Н6). В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию важ­ности от 1 до 6 и обозначаемых скобками:

Весь текст внутри таких скобок считается заголовком и выдается соответственно настройке вашего браузера. Размер HI соответствует самому крупному шрифту, а размер Н6 – самому мелкому. Вот пример документа с использованием заголов­ков первого и второго уровней:

Центрирование (CENTER). Если заголовок или изображение надо расположить посередине строки, то исполь­зуются теги вида , а то, что заключено между ними, будет цент­рировано. Например, конструкция:

расположит по центру экрана текст ЗАГОЛОВОК УРОВНЯ 3.

Вставка изображений (IMG SRC). В HTML-страницу можно вставить графический файл. Допустимые форматы фай­лов определяются браузером. Уже говорилось о том, что для Интернета наиболее приемлемыми являются форматы JPG и GIF, поддерживаемые всеми браузерами.

С изображением можно сделать такие операции: вставить его в HTML-документ, нарисовать рамку, присвоить изображению текст или превратить его в ссылку, за­дать размеры изображения, сделать отступы от рисунка и многое другое.

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

Рамки к рисункам (BORDER). Рамки для изображения задаются конструкцией: , где значением атрибута BORDER является толщина рамки. Рамки при этом при­обретают основной цвет текста, а если рисунок заключен в тег гиперссылок, он приобретает цвет гиперссылок.

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

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

Редактор FrontPage позволяет создавать страницы профессионального уровня, не требуя при этом знания тонкостей HTML. Работа в редакторе FrontPage похожа на работу с текстовым процессором Microsoft Word. В интерфейсе те же стандарт­ные кнопки, такие, как полужирный шрифт, курсив и подчеркивание, маркиро­ванные и нумерованные списки, повтор и отмена операции и т. п. Если, например, редактируя страницу, вы захотите написать слово курсивом или изменить цвет заголовка — пожалуйста, выделите нужный фрагмент текста и щелкните на нуж­ной кнопке, так, как вы это привыкли делать в MS Word, a FrontPage сам сгенери­рует соответствующий код HTML. Если же вы знакомы с языком HTML, то смо­жете прямо в редакторе FrontPage писать код HTML и тут же, не запуская браузер, контролировать результаты своей деятельности.

В редакторе FrontPage в вашем распоряжении имеются обычные элементы страниц, такие как тексты, гиперссылки, заголовки и ряд менее ординарных: таблицы (tables), рамки (frames), бегущие строки (marquees), фоновые звуки (background sounds) и видео (video). Еще один важный элемент веб-страниц — изображения. Редактор так­же позволяет вставлять в страницы формы (forms) и компоненты (components). Са­мые передовые веб-технологии, такие, как компоненты ActiveX и сценарии Java, тоже легко встраиваются в HTML-страницы с помощью редактора FrontPage.