Это заголовок 1 уровня
Это заголовок 3 уровня
Это заголовок 4 уровня
Это заголовок 5 уровня
Это заголовок 6 уровня
Использовать заголовки нужно очень аккуратно в соответствии с его логическим уровнем в структуре документа. Не следует использовать команды Hn для выделения обычного текста. Они применяются именно для заголовков.
История о том, как ребята пошли в лес за грибами, может иметь такую структуру (справа от заголовка проставлен его уровень):
В лес за грибами
3.1. Встреча на полянке
3.2. Муравейник
3.3. Грибная роща
4. Возвращение домой
Горизонтальная линия
Линия простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом HR >, и этот тег не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран такую черту:
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране. Посмотрите еще раз, как линия выделяет заголовок в нашем примере «Упражнение 1».
Человеку в отличие от компьютера трудно воспринимать однородную информацию, поэтому в книгах буквы не покрывают сплошь всю страницу, хотя это здорово сэкономило бы бумагу. Страница в угоду человеческой природе содержит много пустоты, а текст делится на порции абзацы. Абзацы отделяются друг от друга «красными» и (или) пустыми строками. Красная строка это первая строка абзаца с текстом, сдвинутым вправо. Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Вот сейчас начат новый абзац, потому что закончено вступление, и разговор пойдет о том, как программируются абзацы на HTML. Как они выглядят, вы уже видите в этом тексте: как правило браузер использет не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами P > и P >, между которыми помещается текст. Фактически работа тега P > сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег P > просто игнорируется браузером, поэтому его можно и не писать.
Посмотрите в «Упражнение 1» и в тексте, который вы сейчас читаете, как выводятся абзацы на экран:
- Абзац выравнивается по левому краю.
- Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов вы поместите в
- Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда вы перешли на новую строку в
Как работает браузер
Браузер выполняя программу (интерпретируя ) формирует на экране документ, который видит пользователь.
Важно понимать, что элементы отображаются на экран последовательно: слева направо и сверху вниз в соответствие с порядком следования тегов в Нельзя написать программу так, чтобы браузер сначала нарисовал линию в нижней части экрана, а потом вывел текст в верхней.
Когда рисуют на Бейсике или Си, есть возможность вывести элемент в любое место экрана по своему усмотрению. таким свойством не обладают. Браузер не умеет работать с экранными координатами .
Программируя на HTML, нельзя ориентироваться на определенные размеры окна документа. Браузер, выполняя программу, использует то окно, которое предоставил ему пользователь. Значит, одна и та же может отображаться на экран немного по-разному на разных компьютерах и даже на одном компьютере при разных его настройках.
Окно нашего «Упражнения 1» может, выглядеть так:
Проверьте это сами! Откройте документ по нижеприведенной ссылке. Переведите его из полноэкранного режима в оконный и, меняя размеры окна мышкой, посмотрите, что у вас будет получаться.
Вы видите, что линия укорачивается или удлиняется в зависимости от размеров окна.
Текст заголовка при маленьком окне вынужден занять 2 строки.
Абзац выводится так, чтобы поместиться в окне. При этом браузер не обращает внимание на то, как размещается абзац по строкам в HTML-тексте.
Все эти «причуды» браузера заставляют новичка на вопрос «Как работает браузер?» ответить кратко: «Плохо!». Однако отмеченные минусы это лишь плата за универсальность И надо сказать, плата не такая высокая.
Обозначенные ограничения оборачиваются положительной стороной HTML, делая его независимым от компьютерной платформы (DOS, Windows, Unix, MacOs. ) и параметров видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA. ), в частности, от количества экранных точек. Это означает, что ваш HTML-документ способны увидеть все люди, на компьютерах которых установлена И становится неважным какой тип компьютера и какой тип операционной системы предпочитает конкретный пользователь. Именно это свойство HTML-программ играет такую важную роль в глобальной компьютерной сети Интернет, где представлены все мыслимые типы компьютеров и операционных систем.
Улучшенная HTML-страничка
В программе стихотворение написано, как ему и полагается на 4 строчках:
Браузер выводит стихи как единый абзац. Хотелось бы показать стихотворение по-человечески. Давайте попробуем сделать каждую строку отдельным абзацем:
Результат можно посмотреть здесь.
Получилось! Однако, пустые строки смотрятся не очень красиво.
Хорошо, не буду больше испытывать ваше терпение! HTML имеет средство для задания принудительного перехода на новую строку внутри абзаца.
Принудительный разрыв строки
Команда BR заставляет браузер продолжить вывод абзаца с новой строки. Тег BR > не имеет парного.
Посмотрите, как теперь выглядят наши стихи.
Красиво! Это потому, что вывод стихов записан так:
Осталось написать только заголовок стихотворения и имя автора. Вот теперь стихи смотрятся, как в книге:
А вот текст которая показывает эту страничку:
Нажмите кнопку «Сброс», затем выберите верные ответы на вопросы.
- Проведите экспериментальную работу с документом «Упражнение 2». Меняя размеры окна, посмотрите, как браузер показывает текст с принудительным разрывом строк.
Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
Если на вашем компьютере установлено несколько разных программ-браузеров, проведите опыты задания 1 в каждом из них. Возможно результаты будут немного отличаться, так же, как и внешний вид исходного документа. Как вы думаете, почему?
Что такое абзац с точки зрения web браузера
Литература и язык. Современная иллюстрированная энциклопедия. — М.: Росмэн . Под редакцией проф. Горкина А.П. 2006 .
Валентина Дынник. Литературная энциклопедия: Словарь литературных терминов: В 2-х т. / Под редакцией Н. Бродского, А. Лаврецкого, Э. Лунина, В. Львова-Рогачевского, М. Розанова, В. Чешихина-Ветринского. — М.; Л.: Изд-во Л. Д. Френкель , 1925
Смотреть что такое «Абзац» в других словарях:
Абзац — АБЗАЦ в первоначальном значении своем то же, что и красная строка. Но А. означает и отрывок письменной речи, заключенный между красными строками. Абзац можно рассматривать с двух точек зрения: 1) целесообразности начертательной, 2)… … Словарь литературных терминов
АБЗАЦ — (нем. Absatz от ab от и setzen класть, ставить.). Начало текста, новая строка при типографском наборе букв. Словарь иностранных слов, вошедших в состав русского языка. Чудинов А.Н., 1910. АБЗАЦ нем. Absatz, от ab, от, и setzen, класть, ставить.… … Словарь иностранных слов русского языка
абзац — См … Словарь синонимов
АБЗАЦ — котёнку [больше срать не будет]. 1. Разг. Шутл. Все кончено с кем л., с чем л. УМК, 47; Максимов,11. 2. Жарг. шк. Шутл. Об ученике, отвечающем урок у доски. ВМН 2003, 17. Взять абзац. Жарг. мол. Сделать три затяжки при курении. Никитина 2003,15.… … Большой словарь русских поговорок
абзац — АБЗАЦ, а, м. 1. Нечто странное, особенное, необычное, выдающееся. Я такого абзаца еще не видел. 2. Конец, окончание чего л. Под самый абзац работы явился, козёл, а деньги просит. 3. в зн. межд. Выражает любую эмоцию. Абзац, сколько народу!… … Словарь русского арго
Абзац — часть текста, представляющая собой смысловое единство, выделяемое отступом в первой строке, и начинающаяся с прописной (заглавной) либо строчной буквы. Абзац заканчивается точкой либо точкой с запятой, если предыдущий абзац заканчивается… … Официальная терминология
АБЗАЦ — АБЗАЦ, абзаца, муж. (нем. Absatz) (спец.). 1. Отступ вправо в начале строки, для отделения одной части текста от другой; красная строка. При наборе сделать абзац. 2. Текст между двумя такими отступами. Прочесть два абзаца. Толковый словарь… … Толковый словарь Ушакова
абзац — (неправильно абзац) … Словарь трудностей произношения и ударения в современном русском языке
АБЗАЦ — (нем. Absatz) 1) отступ в начальной строке текста.2) Часть текста (сложное синтаксическое целое), представляющая собой смысловое единство и выделяемая отступом в 1 й строке … Большой Энциклопедический словарь
АБЗАЦ — АБЗАЦ, а, муж. 1. Красная строка, отступ в начале строки. Начать писать с абзаца. 2. Текст между двумя такими отступами. Прочесть первый а. Толковый словарь Ожегова. С.И. Ожегов, Н.Ю. Шведова. 1949 1992 … Толковый словарь Ожегова
Что такое абзац с точки зрения web браузера
Средства разработки web-приложений
Обмен информацией в Internet осуществляется с помощью протоколов прикладного уровня, реализующих тот или иной прикладной сервис (пересылку файлов, гипертекстовой информации, почты и т.д.). Одним из наиболее молодых и популярных сервисов Internet, развитие которого и привело к всплеску популярности самой Internet, стала World Wide Web (WWW), основанная на протоколе HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекстовой информации). Гипертекстовые документы, представленные в WWW, имеют одно принципиальное отличие от традиционных гипертекстовых документов – связи, в них использующиеся, не ограничены одним документом, и более того, не ограничены одним компьютером. Для подготовки гипертекстовых документов используется язык HTML (Hyper Text Markup Language – язык разметки гипертекстовых документов), предоставляющий широкие возможности по форматированию и структурной разметке документов, организации связей между различными документами, средства включения графической и мультимедийной информации. HTML-документы просматриваются с помощью специальной программы – браузера. Наибольшее распространение в настоящее время получили браузеры Navigator компании Netscape (NN) и Internet Explorer компании Microsoft (MSIE). Реализации NN доступны практически для всех современных программных и аппаратных платформ, реализации MSIE доступны для всех Windows платформ, Macintosh и некоторых коммерческих Unix-систем.
HTML-документ состоит из текста, представляющего собой содержание документа, и тегов, определяющих его структуру и внешний вид при отображении браузером. Простейший html-документ выглядит следующим образом:
Разработка HTML-страниц при помощи текстового процессора Microsoft Word
Создание и изменение HTML-страниц может выполняться с помощью различных средств. В эпоху зарождения и развития Web большинство авторов использовало для этих целей обычные текстовые редакторы. При этом теги языка HTML добавлялись вручную в ходе редактирования документа. Такой способ вполне допустим и сегодня, однако требует хорошего знания самого языка HTML и значительных затрат времени на набивку и исправление тэгов. Со временем появились специальные средства редактирования HTML-документов, сделавшие работу над документами проще и эффективнее.
Редакторы HTML-документов обычно принято разбивать на две группы. К первой группе относятся так называемые редакторы тэгов, которые предоставляют возможность записывать коды непосредственно на языке HTML и имеют специальные дополнительные возможности для облегчения процесса включения тегов в создаваемый документ. Современные редакторы тегов имеют дополнительные инструменты для генерации элементов HTML. К ним относятся программы-мастера, шаблоны и иные средства, упрощающие работу с типичными HTML-элементами типа списков, таблиц, форм и фреймов. Некоторые редакторы проверяют синтаксис записи тэгов, что позволяет быстрее находить ошибки форматирования HTML-документов. Одним из наиболее популярных редакторов этой группы является программа HotDog Web Editor, разработанная компанией Sausage Software. Этот редактор используется разработчиками на протяжении уже многих лет и сильно менялся в процессе своего развития.
К другой группе относятся так называемые редакторы WYSIWYG (What You See Is What You Get — что видишь, то и получаешь), типичными представителями которой являются Netscape Composer (редактор, входящий в состав пакета Netscape Communicator) и Microsoft FrontPage. Редакторы такого рода позволяют изменять внешний вид и компоновку страницы визуально, не вдаваясь в подробности реализации в виде тэгов. При этом результирующий HTML-код документа создается автоматически. При работе с этими редакторами разработчик может вообще не представлять правил записи тегов HTML и целиком положиться на возможности соответствующего редактора. С другой стороны такие редакторы могут не обеспечивать гибкости, свойственной работе на уровне тэгов, и не обладают всеми возможностями разметки языка HTML.
На современном этапе деление редакторов на две группы становится все более и более условным. Редакторы тегов все более приближаются по своим возможностям и удобству работы к редакторам WYSIWYG, а последние, в свою очередь, становятся все более мощными и гибкими, позволяя включать все более сложные элементы. Скорее всего, в ближайшем будущем деление редакторов на группы исчезнет.
Одним из средств создания и редактирования HTML-документов является текстовый процессор пакета Microsoft Office, носящий название Microsoft Word. В принципе любая версия этой программы, как обычный текстовый редактор, может служить в качестве HTML-редактора (о различиях в возможностях версий пакета говорится в конце этой главы). Удобство его использования для редактирования HTML-документов определяется широким распространением Microsoft Word среди пользователей для создания отчетов, писем, документации, анкет и даже брошюр и книг. Огромное количество людей, использующих в своей повседневной деятельности Microsoft Word, становятся потенциальными разработчиками HTML-документов. В версии Microsoft Word 97 добавлены специальные возможности для работы с HTML-документами, которые переводят его в разряд мощных средств создания страничек для Интернета (рис. 8.1).
Рис. 8.1. Реклама возможностей Microsoft Office 97 при его инсталляции
В данной главе будут рассмотрены основные возможности текстового процессора Microsoft Word 97, используемые при редактировании HTML-документов.
Создать новую Web-страницу с помощью Microsoft Word можно одним из двух способов: с помощью мастера или шаблона, либо преобразовать существующий документ Word в формат HTML, используемый для Web-страниц. Для использования мастера (или шаблона) достаточно воспользоваться вкладкой Web-страницы меню Создание документа. Далее следует воспользоваться указаниями мастера, отвечая на его вопросы и заполняя соответствующие поля и графы нужным текстом. Выполнение этих действий не вызовет трудностей у пользователей, владеющих основами работы в Microsoft Word. Другим способом является преобразование существующего документа Word в формат HTML. Это простейшая операция, однако здесь могут возникать некоторые проблемы, описываемые ниже в данной главе.
Создав HTML-документ одним из приведенных выше способов, можно в дальнейшем выполнять его редактирование. Для этого в Word предусмотрены специальные панели инструментов, команды меню и функции. Краткому описанию этих возможностей и посвящена данная глава.
Так же, как и в документах Word, в Web-страницах можно создавать списки. Списки в HTML могут быть маркированные (Bulleted) и нумерованные (Numbered). В маркированных списках могут употребляться стандартные маркеры, реализация вида которых возлагается на браузер, а также графические изображения, загружаемые из отдельного файла. Для нумерованных списков могут быть использованы арабские или римские цифры, а также латинские буквы. Более подробная информация о правилах организации списков приводится в соответствующей главе.
Создание списков выполняется точно так же, как и в обычных документах Word. Выделите текст, который должен быть представлен в виде списка, и выберите пункт Список из меню Формат. Будет выдана панель Список, содержащая две вкладки — Маркированный (рис. 8.2) и Нумерованный (рис. 8.3).
Можно также воспользоваться кнопками панели инструментов Нумерация 111 или Маркеры ill
Рис. 8.2. Выбор вида маркированного списка
Рис. 8.3. Выбор вида нумерованного списка
При создании маркированного списка можно выбрать один из трех стандартных маркеров (последние три элемента первой строки, изображенные на рис. 8.2) или одно из предлагаемых графических изображений. Воспользовавшись кнопкой Другой можно в качестве маркера выбрать любой существующий графический файл. В зависимости от выбора типа маркеров список в HTML будет реализован по-разному. Если выбран один из трех стандартных маркеров, то список будет сформирован с помощью тега
- и элементов списка
. При этом будет генерироваться одна из следующих строк кода HTML:
- — для первого стандартного маркера (маленький черный кружок)
- — для второго маркера (квадратик)
- — для третьего маркера (закрашенный квадратик)
Приведем пример. Пусть был создан следующий текст:
Первый элемент списка
Второй элемент списка
Третий элемент списка
При разметке этого текста как списка и выборе второго стандартного маркера будет сгенерирован следующий фрагмент кода HTML:
Первый элемент списка
Второй элемент списка
Если в качестве маркера выбирается графическое изображение, то список, по существу, не формируется, то есть специальный тег списка
- использоваться не будет. Здесь каждый элемент списка будет выделен в отдельный абзац тэгом
и предварен ссылкой на встроенное изображение. Само графическое изображение маркера будет сохранено в том же каталоге, что и HTML-файл. Для приведенного примера при выборе одного из графических маркеров будет сгенерирован следующий код:
Первый элемент списка
Второй элемент списка
Третий элемент списка
Различие в использовании стандартных и графических маркеров проявляется не только в реализации, но и возможности отмены списка. Если были выбраны стандартные маркеры, то список можно отменить так же, как это делается при работе с документом Word. Достаточно выделить список и выбрать режим Нет в панели Список или же нажать соответствующую кнопку на панели инструментов. Если же были выбраны графические маркеры, то отменить список не удается. Необходимо удалить все графические маркеры по отдельности, выделяя их и нажимая клавишу .
Перейдем к рассмотрению нумерованных списков. Нумерация списков на Web-страницах почти не отличается от нумерации документов Word. Отличие состоит в том, что для Web-страниц невозможна автоматическая нумерация структурных списков и заголовков.
В зависимости от выбранного формата нумерации списка будут генерироваться следующие коды:
- — для нумерации арабскими цифрами
- I «> — большими римскими цифрами
- — маленькими римскими цифрами
- — прописными латинскими буквами
- — строчными латинскими буквами
Первый элемент списка
Второй элемент списка
Выбрать формат нумерованного или маркированного списка можно только при использовании меню. Если вы воспользовались соответствующими кнопками панели инструментов, то будет выбран формат, использованный последним.
Хотя автоматическая нумерация многоуровневых списков не предусмотрена, списку можно придать многоуровневый вид, изменяя размер отступа и используя различные формы нумерации. Для этого нужно выполнить следующие действия:
1. Выделите текст, являющийся верхним уровнем списка.
2. Выберите нужный формат нумерации из вкладки Нумерованный панели Список.
3. Сдвиньте текст, принадлежащий следующему уровню списка, установив курсор в начале каждого абзаца или строки и нажав клавишу . Хотя табуляция не применяется в HTML, в редакторе Word символы табуляции списка будут преобразованы в отступы.
4. Выберите формат нумерации для очередного уровня.
5. Для каждого уровня в списке повторите шаги 3—4.
Несмотря на то, что приведенная рекомендация по созданию многоуровневых списков дана разработчиками Word 97, она не всегда работает корректно. Иногда для того, чтобы добиться желаемого результата, приходится доводить вручную получаемый HTML-код.
Горизонтальные линии часто используются на Web-страницах для разделения текста на части. Для того чтобы вставить в документ горизонтальную линию, нужно выполнить команду Горизонтальная линия в меню Вставка. Появится панель, показанная на рис. 8.4, содержащая список возможных вариантов горизонтальных линий. Если приведенного списка покажется недостаточно, то можно нажать кнопку Другая и выбрать другой вид линии.
Рис. 8.4. Выбор вида горизонтальной линии для HTML-страницы
Все линии, кроме самой верхней в списке, представляют собой обычные файлы с графическими изображениями. Эти линии будут размещены в Web-документе как обычные встроенные изображения. Например, если выбрать самую нижнюю линию, то она будет вставлена в документ с помощью следующего кода:
Первая же линия из списка реализуется с помощью стандартного тэга . Параметры горизонтальной линии могут быть изменены, если нажать правую кнопку мыши и в появившемся меню выбрать пункт Формат автофигуры (Format Autoshape). Можно изменить длину и толщину линии, ее расположение на странице в горизонтальном направлении. Например:
Для того чтобы быстро вставить в текст страницы еще одну линию того же стиля, можно нажать кнопку Горизонтальная линия на панели инструментов.
Чтобы сделать Web-страницы более привлекательными, часто используют различные фоновые изображения, в том числе текстурную заливку.
Чтобы задать цвет фона Web-страницы или добавить фоновое изображение, следует воспользоваться командой Фон меню Формат (Format/Background). После выполнения этой команды появится диалоговая панель (рис. 8.5), с помощью которой можно выбрать требуемый цвет фона документа из списка основных или дополнительных цветов или же задать изображение, которое будет служить фоновым. Для выбора фонового изображения необходимо нажать кнопку Способы заливки (Fill Effects), при этом появится панель Заливка (Fill Effects) с вкладкой Текстура (Texture), из которой можно подобрать нужное изображение (рис. 8.6).
Рис. 8.5. Задание требуемого цвета фона
Рис. 8.6. Выбор текстуры
Кроме стандартных текстур, отображаемых на вкладке Текстура, в качестве фонового изображения можно использовать любой рисунок. Для этого нажмите кнопку Другая текстура и укажите файл, содержащий нужный рисунок.
Если будет определен цвет фона документа, то выбранное значение сохраняется в HTML-документе в качестве значения параметра BGCOLOR тег . При задании фонового изображения имя соответствующего файл графического изображения будет являться значением параметра BACKGROUN D Приведем примеры обоих вариантов:
Напомним, что фоновые изображения всегда заполняют весь экран браузера, при этом изображение будет повторяться столько раз, сколько необходимо для заполнения страницы.
При создании Web-страницы фоновое изображение сохраняется в виде отдельного файла, например image.gif, который помещается в тот же каталог, что и сама Web-страница.
При создании Web-страницы для текста и ссылок можно определить используемые по умолчанию цвета. Для этого следует воспользоваться командой Цвет текста меню Формат (Format/Text Colors). Появится панель, показанная на рис. 8.7, в которой можно задать цвет текста, цвет ссылок и цвет ссылок, соответствующий уже посещенным страницам. Зададим для примера в качестве цвета текста — синий, цвета ссылок — бирюзовый, а цвета просмотренных ссылок — зеленый. Заданные значения определят параметры тега :
Рис. 8.7. Выбор цвета всего текста для HTML-страницы
Рис. 8.8. Выбор цвета фрагмента текста для HTML-страницы
Эти параметры задают цвета по умолчанию для всего документа. Если же необходимо задать цвет для выбранного фрагмента документа, то следует использовать кнопку Цвет шрифта на панели инструментов или команду Шрифт меню Формат (рис. 8.8). Если для фрагмента текста будет выбран, например, красный цвет, то результат такого выбора в HTML-документе будет отражен так:
Этот текст будет отображаться красным цветом
Читатель Web-страницы может задать свои собственные устанавливаемые по умолчанию цвета в браузере. Чтобы текст и ссылки изображались в выбираемых по умолчанию цветах браузера, задайте значение Авто во всех трех списках панели Цвета текста.
При создании Web-страниц в редакторе Word можно использовать многие средства форматирования, предназначенные для форматирования документов Word. Например, можно присвоить тексту полужирное начертание с помощью кнопки Полужирный или выбрать стиль Заголовок 1 из списка стилей. Задание элементов форматирования текста определяет вставку соответствующих тегов HTML в генерируемый код.
Панель Шрифт, вызываемая из меню Формат, служит также для задания типа шрифта, его размеров и форматирования выделенных фрагментов текста. Установка флажков, соответствующих каждому из шести доступных в данной панели эффектов, приводит к вставке в HTML-код следующих тэгов:
Эти теги вставляются в начало выделенного фрагмента текста, а в конце фрагмента записывается соответствующий закрывающий тэг. Заметим, что может использоваться любая совокупность перечисленных эффектов, за исключением двух последних, которые являются взаимоисключающими. Для полужирного начертания, курсива и подчеркнутого текста на панели инструментов имеются специальные кнопки.
Для быстрого перехода к следующему доступному размеру шрифта используйте кнопки Увеличить размер шрифта и Уменьшить размер шрифта.
Для каждого абзаца в HTML генерируется тег начала абзаца
, а также тег конца абзаца
. Последний тег при создании документов вручную обычно опускается. Большинство браузеров абзацы автоматически отделяют пустой строкой. Чтобы реализовать переход на новую строку без образования абзаца, нажмите клавиши + . В этом случае будет генерироваться тег перехода на новую строку
.
В справочной системе Word 97 «для создания абзацев без интервалов» (именно так сформулировано) ошибочно предлагается воспользоваться клавишами + . Напомним, что совокупность клавиш + обычно используется при редактировании документов Word для принудительного перехода на следующую страницу. При преобразовании документов Word в HTML в этом случае будет лишь создан дополнительный абзац, а при редактировании Web-документов клавиши + вообще недопустимы.
Форматирование, не поддерживаемое языком HTML или некоторыми средствами просмотра Web, недоступно в разделе редактирования Web-страниц редактора Word. В число таких средств входят эффекты форматирования символов Приподнятый, С тенью и Утопленный, междустрочный интервал, поля, межсимвольный интервал, кернинг, параметры обтекания текста и интервалы между абзацами. Не следует использовать символы табуляции, так как многие браузеры изображают их как пробелы; вместо них для сдвига первой строки текста вправо можно использовать отступ.
Для изменения отступа текста используйте кнопки Увеличить отступ и Уменьшить отступ. С точки зрения языка HTML, отступы реализуются путем обрамления текста парой тегов и . Формально данный тег определяет начало списка и подразумевает использование тэгов элементов списка
Этот текст имеет один отступ
Этот текст имеет два отступа
Аналогичный подход для создания отступов применяют и другие HTML-редакторы. Например, Netscape Composer (так же, как и редактор пакета Netscape Navigator Gold) для отступов используется аналогичный прием, только в качестве тега списка применяется
- .
При увеличении отступа Word часто генерирует сразу два тега , создавая двойной отступ. Соответственно при уменьшении отступа удаляются два тега . Иногда генерируется и удаляется по одному тэгу . Логику поведения редактора понять чрезвычайно затруднительно, если вообще возможно. По всей видимости мы имеем дело с очередной некорректностью работы программы.
И дл я изменения выравнивания текста используйте кнопки По левому краю , По центру и По правому краю. Заметим, однако, что текст на Web-страницах невозможно выровнять по ширине.
Невозможность выравнивания текста на Web-страницах по ширине отмечается в справочной системе Microsoft Word. Действительно, в панели инструментов Форматирование при работе с HTML-документом нет кнопки выравнивания по ширине. Это связано с тем, что в спецификации HTML вплоть до версии 3.2 для параметров выравнивания тега абзаца
не было выравнивания по ширине. Однако в настоящее время ведущие браузеры поддерживают эту возможность, реализуемую следующим образом:
. Более того, даже в Microsoft Word это уже заложено. Если работать с документом Word, в которой имеется текст, выровненный по ширине, а затем преобразовать его HTML документ, то появятся абзацы, имеющие приведенный выше код.
На Web-страницах можно использовать встроенные стили, соответствующие форматированию, принятому для языка HTML. Стиль назначается тексту Web-страниц так же, как документам Word, однако в работе стилей есть некоторые различия.
При создании Web-страницы в Word стили HTML добавляются в список стилей на панели форматирования и в диалоговом окне Стиль (меню Формат) (рис. 8.9). Один из стилей символов Разметка HTML специально предназначен для записи исходных кодов HTML вручную.
Рис. 8.9. Выбор стиля Разметка HTML
Специальные стили HTML, например Адреса и Н2, непосредственно генерируют соответствующие команды языка HTML; поэтому изменения, внесенные в эти стили, не сохраняются. При внесении изменений во встроенный стиль Word, например Заголовок 1, связанное с этим стилем форматирование будет перенесено на соответствующую команду HTML, если такое форматирование поддерживается HTML.
Допускается создание и изменение собственных стилей. При сохранении страницы в формате HTML преобразуется только форматирование, поддерживаемое языком HTML, при этом все другие виды форматирования будут утрачены.
Microsoft Word 97 рассчитан прежде всего на создание и изменение Web-страниц в визуальном режиме без явного применения тегов HTML. Однако при необходимости на созданную страницу можно вручную вставить собственные коды HTML. Есть два пути решения этой задачи. Во-первых, можно редактировать HTML-код в режиме просмотра исходных кодов Web-страницы, а во-вторых, присвоить тексту специальный стиль Разметка HTML.
Перейти в режим просмотра исходных кодов Web-страницы можно, выполнив пункт Источник HTML в меню Вид (рис. 8.10). До того, как выполнить переход в этот режим, следует выполнить сохранение файла. Если этого не сделано, то будет выдано предупреждающее сообщение (рис. 8.11). В режиме просмотра исходных кодов Word можно использовать в качестве обычного текстового редактора, изменяя текст кода HTML. Обратный переход выполняется кнопкой Закрыть источник HTML. При этом переходе также выдается предупреждающее сообщение о необходимости сохранения сделанных изменений.
Рис. 8.10. Меню Вид Word 97 с командой Источник HTML
Рис. 8.11. Запрос подтверждения для сохранения изменений в HTML-файле
Другой путь состоит в записи необходимых HTML-кодов при работе в режиме визуального редактирования. При этом не требуется переходить в иной режим работы. Чтобы указать, что введенный текст является исходным кодом HTML, необходимо пометить его специальным стилем символов Разметка HTML. Этот стиль делает текст скрытым, поэтому, чтобы видеть его, нужно работать в режиме просмотра непечатаемых символов. Переключение данного режима осуществляется кнопкой Непечатаемые символы.
Хотя Word 97 отображает редактируемый HTML-документ практически в таком же виде, как он в дальнейшем будет отображаться браузерами, всегда следует выполнять предварительный просмотр созданной страницы в предпочитаемом вами браузере. Это позволит вам убедиться в том, что и при размещении документа на Web-сервере он будет выглядеть соответствующим образом.
Для предварительного просмотра Web-страницы в процессе ее редактирования необходимо установить на компьютере браузер. Для просмотра следует нажать кнопку Просмотр Web-страницы на панели инструментов. Для возврата в Word следует выбрать значок Word на панели задач или закрыть браузер.
Работа с таблицами на Web-страницах не отличается от работы с таблицами в документах Word. Для создания таблицы можно использовать два способа: вставить таблицу, воспользовавшись командой Добавить таблицу из меню Таблица (для этого случая необходимо задать размеры создаваемой таблицы) или путем преобразования существующего текста с разделителями (символ абзаца, символ табуляции, точка с запятой или иной символ) в таблицу (пункт Преобразовать в таблицу из меню Таблица). Для редактирования структуры таблицы используется команда Нарисовать таблицу. При этом возникнет панель инструментов Таблицы и границы (рис. 8.12), содержащая кнопки для изменения параметров таблицы.
Рис. 8.12. Изменение параметров таблицы с помощью панели инструментов Таблицы и границы
Например, если добавить таблицу размером 4×2, то Word создаст следующий код:
Так как на Web-страницах таблицы часто используются как скрытое средство форматирования (например, для обеспечения требуемого взаимного расположения текста и рисунков), вставляемые в текст таблицы по умолчанию не имеют границ. Для добавления границ к таблицам используйте команду Границы (меню Таблица).
После создания таблицы можно заняться изменением ее параметров. Для этого следует воспользоваться пунктом Свойства таблицы (рис. 8.13) или пунктом Свойства ячейки (рис. 8.14).
Рис. 8.13. Окно Свойства таблицы для изменения параметров всей таблицы
Рис. 8.14. Окно Свойства ячейки для изменения параметров отдельных ячеек таблицы
Читатели, имеющие опыт работы с таблицами в документах Word, сразу же смогут создавать таблицы и для HTML-документов. При отсутствии такого опыта можно научиться создавать таблицы по любой книге, посвященной работе с Microsoft Word, или воспользоваться справкой. Поэтому мы не будет здесь более подробно освещать вопросы создания таблиц, а отметим лишь некоторые особенности.
Поскольку возможности форматирования HTML-документов уступают аналогичным возможностям документов Word, то часто при преобразовании в HTML-документ некоторые элементы форматирования могут быть потеряны или изменены. Более того, даже при работе в режиме создания HTML-документа можно сконструировать на экране такую таблицу, которая не может быть в точно таком же виде отображена браузерами. Приведем пример. На рис. 8.15 показана таблица, созданная в Word в режиме редактирования НТМ L-документа.
Рис. 8.15. Пример таблицы, существование которой в HTML-документе невозможно
Вторая строка таблицы содержит на одну ячейку больше, чем остальные строки. Язык разметки HTML не допускает ситуации, когда в разных строчках содержится разное число ячеек. Точнее, если при записи данных для отдельных строк указывается меньшее количество ячеек, чем в остальных строках, то браузеры автоматически добавляют недостающее число ячеек, считая, что они пустые. Естественно, при подсчете числа ячеек учитываются протяженные ячейки, которые занимают несколько смежных ячеек. (Напомним, что для протяженной ячейки требуется указать параметр COLSPAN с соответствующим значением.) Поэтому очевидно, что приведенный пример не может точно также отображаться браузерами. Редактор Word должен каким-то образом учитывать сложившуюся ситуацию. Чтобы убедиться в этом, достаточно сохранить редактируемый документ в файле и вновь его загрузить в редактор. Заметим, что можно сделать даже проще, а именно, перейти в режим просмотра исходного кода документа, а затем вернуться обратно. При этих переходах предлагается сохранять изменения в файле, поэтому результат будет тот же. В результате этих действий вид таблицы изменится (рис. 8.16). Заметим, что редактор не создал дополнительной пустой ячейки, а растянул последнюю ячейку первой и третьей строк на две, создав протяженные ячейки.
Рис. 8.16. Измененный вариант таблицы после ее сохранения в виде HTML-файла
Приведенный пример показывает, что вид HTML-страницы может отличаться не только при просмотре в различных браузерах, но даже может изменяться после сохранения редактируемой в Word страницы в файле. Такого быть, конечно, не должно, но поскольку факты свидетельствуют об обратном, то не преминем дать следующий совет.
После сохранения редактируемого в Word документа формата HTML не будет излишним вновь его загрузить и просмотреть. Эти действия, впрочем, не отменяют необходимость просмотра окончательного варианта документа в браузере.
При сохранении Web-страницы в формате HTML все изображения преобразуются в формат GIF или JPEG. При этом в формате JPEG сохраняются только те изображения, которые исходно были записаны в этом формате. Все остальные форматы графических файлов преобразуются в GIF. Чтобы вставить рисунок в Web-страницу, выберите команду Рисунок в меню Вставка, а затем команду Из файла или Картинки.
Если рисунок вставляется из файла, при сохранении он копируется в ту же папку, что и Web-страница, если не установлен флажок Связь с файлом. Если флажок Связь с файлом установлен, можно задать ссылку на рисунок в заданном каталоге, как на другой Web-узел.
Вставленный на Web-страницу рисунок по умолчанию выравнивается по левому полю. Чтобы задать взаимное расположение текста и рисунка, следует выделить рисунок и выбрать соответствующую команду в меню Формат или на панели инструментов Рисование (рис. 8.17).
Рис. 8.17. Вкладка Положение окна Рисунок для задания положения рисунка относительно текста
На рис. 8.18 показан пример использования изображения на создаваемой Web-странице. Для этого примера будет сгенерирован следующий фрагмент кода:
Пример вставки изображения в текст HTML-документа. Этот рисунок взят из подборки Microsoft Clip Gallery и располагается на странице с выравниванием по правому краю.
Заметим, что Word автоматически нумерует рисунки, которые конвертируются из других форматов. В данном примере изображение, взятое из сборника рисунков Clip Gallery, было преобразовано в формат GIF и сохранено с именем Image28.gif.
Изображения в файле сохраняются в их исходном размере. При изменении размеров изображения при компоновке Web-страницы для встроенного изображения изменяются лишь значения параметров WIDTH и HEIGHT тега . Таким образом, преобразование изображения к нужному размеру будет выполняться браузером при отображении страницы.
Рис. 8.18. Вставка изображений в HTML-документ
Программа Word 97 позволяет включать в редактируемый документ ссылки внутри документа, а также ссылки на другие страницы и документы. Имеется несколько способов включения ссылок в состав документа. Наиболее простым способом является использование режима автоформатирования, когда текст, представляющий собой адрес ссылки, автоматически преобразуется в нужную ссылку. Для включения режима автоформатирования ссылок необходимо выполнить следующие действия: выбрать пункт Автозамена из меню Сервис. На вкладке Автоформат при вводе в разделе Заменять при вводе включить режим адреса Интернета и сетевые пути гиперссылками. Тогда при вводе текста, представляющего собой соответствующие адреса, они будут заменяться гиперссылками. Например, при вводе текста:
будет сгенерирован следующий код:
Другим способом включения в текст ссылки является использование команды Гиперссылка из меню Вставка. После вызова этой команды будет открыто диалоговое окно Добавить гиперссылку, в котором нужно указать требуемый адрес и другие параметры ссылок (рис. 8.19).
Рис. 8.19. Диалоговое окно Добавить гиперссылку
Редактор Word 97 имеет набор инструментов для создания форм и задания свойств их элементов. Образцы форм, например формы для опроса, предоставляются мастером Web-страниц. С помощью мастера можно создать основные формы, а затем отредактировать их в соответствии с конкретными задачами. Если нужной формы нет в мастере, ее можно создать, вводя необходимые элементы управления. Для этого необходимо перейти в режим конструктора, воспользовавшись соответствующим режимом меню Вид. Затем нужно выбрать необходимые элементы из появившейся панели Элементы управления и разместить их в форме (рис. 8.20).
Рис. 8.20. Панель Элементы управления
Например, если разместить в форме строку ввода текста и две кнопки Submit и Reset, то будет создан следующий код:
Заметим, что свойства элементов управления можно изменять, нажимая кнопку Свойства или выполняя двойной щелчок мышью на выбранном элементе.
Сохранение документа в формате HTML представляет собой простейший способ создания Web-страниц. Для его реализации не требуется никаких знаний о формате HTML, а лишь необходимо уметь работать в среде Word. После открытия существующего или создания нового документа Word можно выполнить его сохранение в виде HTML-документа. Это выполняется в специальном пункте меню Файл с названием Сохранить в формате HTML (File/Save as HTML). Документ Word закрывается, а затем вновь открывается в формате HTML. На рис. 8.21 приведено содержимое меню Файл, используемое при работе в режиме документа Word.
Если перед преобразованием документ Word не был сохранен, то будет выдано предупреждающее сообщение (рис. 8.22) о том, что ряд элементов форматирования Word-документа будет потерян.
Рис. 8.21. Меню Файл с командой Сохранить в формате HTML
Рис. 8.22. Запрос подтверждения при сохранении документа Word в формате HTML
Поэтому лучше всего предварительно сохранять документ в формате Word, а лишь затем выполнять его преобразование. После открытия документа в формате HTML полученная Web-страница изображается практически в том виде, который она имела бы при просмотре ее с помощью Web-браузера. При необходимости в Web-страницу можно внести нужные изменения и вновь сохранить ее. Заметим, что при выполнении преобразования Word переходит в режим работы с документом формата HTML. Формально это отражается на содержимом пунктов меню и некотором изменении возможностей редактора. На рис. 8.23 приведено содержимое меню Файл, используемое при работе в режиме HTML-документа. Сравните пункты меню, приведенные на рис. 8.21 и 8.23.
В справочной системе русифицированной версии Word 97 не используется термин «браузер». Вместо него применяется термин «средство просмотра Web».
Приведенных сведений вполне достаточно для выполнения преобразования простейших документов Word, не содержащих сложных элементов форматирования. Читателям, разрабатывающим документы Word с использованием элементарного набора приемов, можно на этом месте завершить ознакомление с данной главой и начать практиковаться в преобразовании своих документов. Выполнив преобразование и убедившись, что полученная Web-страница содержит все необходимые данные и выглядит практически так же, как и исходный документ Word, можно считать задачу создания HTML-документа выполненной.
Рис. 8.23. Меню Файл при работе в режиме HTML-документа
Однако, отдельные элементы форматирования, не поддерживаемые языком HTML, могут быть потеряны или изменены. Приведем таблицу элементов документа Word, которые удаляются или изменяются в процессе преобразования (табл. 8.1). Эта таблица полностью заимствована из справочной системы Word 97 с незначительными редакционными изменениями (рис. 8.24).
Рис. 8.24. Справочная система редактора Word по созданию и редактированию HTML-документов
Таблица 8.1. Элементы документа Word, которые удаляются или изменяются при преобразовании в формат HTML
| Элемент документа Word | Word — > HTML | Подробности преобразования |
| Примечания | См. подробности | Примечание, введенное с помощью команды Примечание (меню Вставка), удаляется. Однако после сохранения документа в формате HTML примечания можно снова ввести и присвоить им стиль Примечание. Примечания не изображаются при просмотре Web-страницы с помощью средства просмотра Web |
| Размер шрифтов | См. подробности | Шрифт документа заменяется шрифтом HTML соответствующего размера. Размеры шрифтов HTML изменяются от 1 до 7. Эти цифры не являются собственно размером шрифта, а служат указанием на размер шрифта для средств просмотра Web. В Word изображаются шрифты размером от 9 до 36 пунктов |
| Текстовые эффекты: приподнятый, с тенью, утопленный, все прописные, малые прописные, двойное зачеркивание и контур (меню Формат, команда Шрифт, вкладка Шрифт) | Нет | Текстовые эффекты не сохраняются, но текст остается |
| Начертания: полужирное, курсив, подчеркивание и зачеркивание | Да | Некоторые особые эффекты подчеркивания, например подчеркивание пунктиром, преобразуются в подчеркивание сплошной чертой, а другие — нет |
| Анимация текста (меню Формат, команда Шрифт, вкладка Анимация) | См. подробности | Анимация не сохраняется, но текст остается. Вместо эффектов анимации с помощью среды редактирования Web-страниц на страницу следует поместить бегущую строку |
| Графика | См. подробности | Изображения, например рисунки и картинки, преобразуются в формат GIF, если рисунки не сохранены уже в формате JPEG. Графические объекты, например, надписи и фигуры, не преобразуются. Линии преобразуются в горизонтальные линии |
| Табуляция | Да | Символы табуляции преобразуются в символы табуляции HTML, представляемые в исходных кодах как . В некоторых браузерах символы табуляции заменяются пробелами, поэтому вместо них лучше использовать отступы или таблицы |
| Поля | См. подробности | Значения полей преобразуются в текст; коды полей удаляются. Например, если в документ вставлено поле DATE, текст даты преобразуется, но сама дата не будет в дальнейшем обновляться |
| Оглавления и указатели | См. подробности | Информация преобразуется, но указатели и оглавления после преобразования не будут обновляться автоматически, так как они базируются на кодах полей. В оглавлении вместо номеров страниц изображаются звездочки; эти звездочки являются гиперссылками, позволяющими пользователю перемещаться по Web-странице. Звездочки можно заменить текстом, который будет указывать на гиперссылки |
| Буквицы | Нет | Буквицы удаляются. В среде создания и редактирования Web-страницы размер одной буквы можно увеличить, выделив ее и нажав кнопку Увеличить размер. Если для буквы имеется графическое изображение, его можно вставить перед текстом |
| См. подробности | См. подробности | |
| Границы вокруг абзацев и слов | Нет | Границы таблицы сохраняются. Для разделения частей и выделения важных мест Web-страницы можно использовать горизонтальные линии |
| Границы страниц | Нет | В HTML нет соответствия границам страниц. Страницу можно сделать более привлекательной с помощью фона. Фон выбирается командой Фон в меню Формат. Таблицу можно снабдить границами. Для разделения частей и выделения важных мест Web-страницы можно использовать горизонтальные линии |
| Верхние и нижние колонтитулы | Нет | В HTML отсутствуют аналоги колонтитулов |
| Обычные и концевые сноски | Нет | |
| Колонки | Нет | Для создания колонок используйте таблицы |
| См. подробности | ||
| N =»TOP»> Продукт |
- http://dic.academic.ru/dic.nsf/enc_literature/16/%D0%90%D0%B1%D0%B7%D0%B0%D1%86
- http://www.lghost.ru/lib/security/kurs7/theme01_chapter02.htm
- http://www.webnav.ru/books/html4/development_with_word/