Форматирование символов и абзацев

Типы HTML - редакторов

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

Мы сначала остановимся на одном из текстовых редакторов, которые предусматривают набор кода вручную, хотя и с солидной долей автоматизации этого процесса На панелях инструментов таких редакторов расположено множество кнопок, с помощью которых требуемый тег вставляется в HTML-код. Важное замечание: Чтобы ввести в код атрибут, необходимо расположить курсор внутри тега (после его имени), нажать клавишу пробела и, когда HTML-редактор представит набор возможных атрибутов в виде раскрывающегося списка, выбрать нужный. После этого программа отобразит его возможные значения. Требуемые атрибуты можно задавать и в отдельных диалоговых окнах. В этом случае также выбираются необходимые значения, а редактор размещает на странице соответствующий код. Впрочем, обо всех возможностях одного из таких редакторов вы узнаете позже, в процессе работы с ним. Итак, начнем с описания текстового HTML-редактора HomeSite, ведь на данном этапе обучения вам полезно видеть код непосредственно, чтобы быстро к нему привыкнуть.

Редактор HomeSite 5.5: установка и основные элементы окна

Для редактирования веб-страниц мы будем использовать HTML-редактор текстового типа HomeSite 5.5. Но прежде чем приступить к работе с этим редактором, его, как и все программы, сначала нужно установить Инсталляция приложения HomeSite 5.5 мало чем отличается от инсталляции любой иной программы в среде операционной системы Windows. Вставьте загрузочный компакт-диск в считывающее устройство и следуйте указаниям производителя продукта В процессе инсталляции программа запросит, необходимо ли устанавливать дополнительные компоненты. В принципе, наличие таких компонентов не помешает, хотя для работы они пока не пригодятся.

В этой главе вы не найдете подробного описания упомянутого редактора, а также полного руководства по его использованию. Возможности программы будут раскрываться постепенно, по мере освоения нового материала и при создании веб-страниц. Итак, запустите программу. Перед вами откроется диалоговое окно Macromedia HomeSite 5, показанное на рис. 2.1.

В верхней части окна, как и в окне любой другой программы, находится строка меню, а под ней — четыре панели:

□ Standard (Стандартная) — содержит кнопки, предназначенные для создания,открытия, сохранения документов.

□ View (Вид) — включает несколько кнопок для выбора режима просмотра документа.

□ Edit (Правка) — здесь расположен стандартный набор кнопок, с помощью которых производится копирование, вырезание текста, а также отмена действий

□ Tools (Инструменты) — содержит набор инструментов программы.

В правой верхней части окна расположены панели инструментов с кнопками, предназначенными для вставки тех или иных тегов. Чтобы получить доступ к требуемой панели, щелкните на соответствующей вкладке: Common (Общие), Fonts (Шрифты), Tables (Таблицы), Frames (Фреймы) и т. д.

Главное окно программы разделено на две части. Поскольку левой частью окна мы на данном этапе пользоваться не будем, ее можно убрать, щелкнув на кнопке Resource Tab (Закладка ресурсов), которая расположена на панели View (Вид).

Форматирование символов и абзацев

Процесс форматирования текста условно можно разделить на два этапа: форматирование абзацев и форматирование символов. Если вы работали с Microsoft Word, то имеете представление о символе и абзаце, а также о том, как осуществляется их форматирование. Напомним, что символом называется любой единичный элемент текста, абзацем — фрагмент текста, который отделяется от других фрагментов символом перевода строки (в текстовых редакторах это непечатаемый символ ¶|). Процесс форматирования символа заключается в том, что его сначала выделяют, а затем изменяют соответствующие параметры. Для того чтобы отформатировать один или несколько абзацев, их также сначала нужно выделить. При необходимости изменить параметры только одного абзаца достаточно расположить курсор в любой его строке, не выделяя весь абзац. Именно в этом состоит различие между форматированием символа и абзаца. В Microsoft Word средства для выполнения этих операций разнесены по разным подменю. Очень важно понять суть таких различий, поскольку они характерны и для языка HTML.

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

ПРИМЕЧАНИЕ----------------------------------------------------------------------------------------------------

В HTML для создания абзацев используются два тега: тег <Р> (с ним вы уже знакомы) и тег <DIV> (имеет то же назначение, что и тег <Р>). Между этими тегами существуют определенные различия, они будут рассмотрены ниже.

Тег < Р >

Для ввода тега <Р> в редакторе HomeSite 5.5 используется кнопка Paragraph (Абзац), находящаяся на вкладке Common (Общие). Расположите курсор в коде между тегами <BODY> и </BODY>, щелкните на указанной кнопке, и на экране появятся открывающий и закрывающий теги <Р>. Удобная возможность:Поместите курсор после символа «р», нажмите клавишу пробела, и рядом с курсором отобразится список атрибутов, которые можно выбрать для данного тега. Несмотря на то что раскрывшийся список довольно большой, найдите в нем элемент ALIGN (Выравнивание) и щелкните мышью. После этого элемент будет добавлен на страницу, и откроется новый список, где можно выбрать значение для данного атрибута.

Установите курсор между двумя тегами <Р> и введите текст. Просмотреть результат можно сразу же в окне программы Для этого щелкните на вкладке Browse (Просмотр), которая находится в левом верхнем углу окна набора кода. Если вы просматриваете страницу только в окне редактора, файл можно не сохранять, а при просмотре в браузерах его обязательно нужно сохранять. Для возвращения в режим набора кода щелкните на вкладке Edit (Правка), которая находится рядом со вкладкой Browse (Просмотр).

ПРИМЕЧАНИЕ -----------------------------------------------------------------------------------------------------

Если вы хотите, чтобы ваши веб-страницы корректно отображались, протестируйте их, открывая в разных браузерах. Ограничиваться просмотром только в окне программы HomeSite 5.5 не рекомендуется. Ведь редактор всего лишь показывает, как должна выглядеть страница с учетом введенного кода, а не то, как она будет отображаться в браузере.

Ничего нового о теге <Р>, кроме того, как вводится он сам и его атрибуты в окне программы HomeSite, вы не узнали. С его помощью абзацу можно задавать разные свойства, но об этом будет рассказано в главе, посвященной каскадным листам стилей.

Тег < DIV >

Этот тег, равно как и тег <Р>, используется для создания абзацев. Чтобы разобраться, какие существуют между ними различия, создайте два абзаца первый — с помощью тега <Р>, а второй — посредством тега <DIV> Тег <DIV> можно добавить на страницу при помощи кнопки DIV, располагаемой последней на вкладке Common (Общие). После щелчка на этой кнопке откроется диалоговое окно Tag Editor - DIV (Редактор тегов - DIV), которое показано на рис 2 2 Здесь в раскрывающемся списке Align (Выравнивание) вы можете выбрать способ выравнивания абзаца Укажите таковой и щелкните на кнопке ОК

Ваш код должен выглядеть следующим образом

<Р> текст </Р>

<DIV> текст </DIV>

ПРИМЕЧАНИЕ -------------------------------------------

Далее в книге будет приводиться только та часть кода, которую следует поместить в контейнер <BODY>. Предполагается, что все необходимые теги разметки страницы, <HTML>, <HEAD> и <BODY>, вы введете самостоятельно.

Просмотрите страницу непосредственно в окне программы (поскольку во всех браузерах она будет выглядеть одинаково), обратив внимание на различные промежутки между абзацами, задаваемые тегами <DIV> и <Р>.

Теги < FONT > и < BASEFONT >

Тег <FONT> применяют для работы с символами.

Для ввода тега <FONT> и его атрибутов в окне редактора используйте кнопка Font (Шрифт) одноименной вкладки, которая расположена рядом со вкладкой Common (Общие). После щелчка на указанной кнопке откроется диалоговое окно Tag Editor - FONT (Редактор тегов — Шрифт), показанное на рис. 2.3. Откройте это окно!

Цвет шрифта выбирается в раскрывающемся списке Color (Цвет), а размер — в списках области Size (Размер).

На вкладке HTML 4.0 того же диалогового окна (рис. 2.4) расположены три списка, которые предназначены для указания шрифтов. В коде значения атрибутов, соответствующие названиям шрифтов, разделяются запятыми. Четвертый раскрывающийся список, combo (Комбинированный), позволяет выбрать готовый набор шрифтов, а последний список generic (Групповой) — указать ключевое слово, которое определяет тип шрифта.

Перейдя на вкладку Language ( HTML 4.0) (Язык ( HTML 4.0)), в списке Direction (Направление) можно выбрать значение атрибута DIR, а в списке Language (Язык) — значение атрибута LANG. После щелчка на кнопке ОК окно Tag Editor - FONT (Редактор тегов — Шрифт) закроется, и заданный код отобразится в окне набора.

Существует еще один тег, имеющий отношение к шрифтам. это тег <BASEFONT>, который позволяет определить базовый размер шрифта. Иными словами, запись <BASEFONT SIZE=4> означает, что для всего кода вплоть до закрывающего тега </ВАSEFONT> значение размера шрифта будет равно 4. При отсутствии тега <BASEFONT> по умолчанию это значение равно 3.

ПРИМЕЧАНИЕ----------------------------------------------------------------------------------------------------

В стандарте языка HTML 4.01 тег <BASEFONT> отмечен как нежелательный.

Теги < ЕМ >, < I >, < В > и < STRONG >

Теги <ЕМ> и <I> позволяют устанавливать для символов курсивное начертание. Следовательно, текст, находящийся в контейнере <ЕМ> или <1>, будет выделен курсивом. Обратите внимание на то, что атрибутов данные теги не имеют.

<ЕМ>Этот текст будет выделен курсивом</ЕМ>

Возможность определить полужирное начертание для текста предоставляют теги <В> и <STRONG>; они также не имеют атрибутов.

<STR0NG>3TOMy тексту будет назначен полужирный ujpn(})T</STRONG>

Для ввода тегов <ЕМ> и <STRONG> в программе HomeSite 5.5 предусмотрено по две кнопки: для первого — кнопки Italic (Курсив) и Emphasis (Выделение), а для второго — кнопки Bold (Полужирный) и Strong (Сильный). Все они находятся на панели Fonts (Шрифты).

Маркированные списки

Тегами <UL> и </UL> определяется маркированный список — его начало и конец. Как и в случае с нумерованными списками каждый элемент маркированного отмечается тегом <LI>. Для создания маркированного списка необходимо ввести следующий код:

< UL >

<LI> Первый элемент списка</LI> <LI> Второй элемент списка</LI>

<LI> n-й элемент списка</LI> </UL>

Тег <UL> может иметь атрибут TYPE, посредством которого определяется внешний вид маркеров. Ему можно присваивать следующие значения: disk — закрашенный круг; circle — незакрашенный круг; square — квадрат.

В редакторе HomeSite 5.5 для ввода тегов <UL>, <0L> и <LI> предусмотрены соответственно кнопки UL (Неупорядоченный список), OL (Упорядоченный список) и LJ (Элемент списка) вкладки Lists (Списки).

У вас есть также возможность полностью автоматизировать процесс создания списков, используя для этой цели кнопку Quick List (Быстрый список) той же вкладки. После щелчка на данной кнопке откроется диалоговое окно List (Список), показанное на рис. 2.6.

Вид списка выбирается с помощью переключателей области List Style (Стиль списка). Если активизировать переключатель Ordered (Упорядоченный), то созданный список будет нумерованным, а при выборе переключателя Unordered (Неупорядоченный) создается маркированный список Тип маркеров выбирается в находящемся рядом раскрывающемся списке Туре (Тип)

Количество элементов списка задается в поле Rows (Строки), а текст вводится в области List (Список) При желании можно указать программе на необходимость закрывать теги <LI> (по умолчанию она этого не делает) Для включения данной функции достаточно установить флажок Generate </LI> tags {Генерировать теги </LI>) Когда все параметры будут определены, а текст будет введен, щелкните на кнопке ОК В результате HTML-код отобразится в указанном вами месте страницы (точнее говоря, в месте установки курсора) С помощью программы HomeSite создайте маркированный список, используя маркеры в виде квадрата

Значки списка, будь то цифры или символы, можно изменять, как и обычный текст Для этого теги значков необходимо поместить в контейнер <FONT>, который применяется для форматирования текста Код при этом будет выглядеть следующим образом

Помните, что для форматирования элементов списка контейнер <FONT> необходимо вводить в каждой строке кода.

Гиперссылки в программе HomeSite

Для создания ссылок в приложении HomeSite 5 5 предусмотрена кнопка Anchor (Якорь), расположенная на вкладке Common (Общие) После щелчка на ней откроется диалоговое окно Tag Editor - А (Редактор тегов - А), которое показано на рис 2 9

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

Srowse Local (Просмотр локальных) — открывает диалоговое окно Open (Открыть), где можно указать любой имеющийся на компьютере файл, адресация при этом будет задана программой автоматически

Select from MSIE favourites (Выбрать из избранного MSIE) — также открывает экно Open (Открыть), которое в данном случае будет содержать список страниц, хранящихся в папке Favorites (Избранное) браузера MSIE

Select from Netscape Bookmarks (Выбрать из закладок Netscape) — позволяет создать ссылку на страницу, сохраненную в папке Bookmarks браузера Netscape, кнопка работает при условии, что на компьютере установлен этот браузер, а в папке Bookmarks имеются файлы.

В расположенном под полем HREF списке Protocol (Протокол) можно выбрать один из существующих протоколов передачи данных либо ссылку на адрес электронной почты или группу новостей

Поле Name (Имя) предназначено для задания имени ссылки (атрибуты NAME и ID тега <А>) При установленном флажке Include identical NAME and ID (Включать идентичные NAME и ID) к тегу добавляются оба атрибута Во время создания ссылки вы можете снять этот флажок, тогда будет добавлен только атрибут NAME, который «понимают» все браузеры

Дата добавления: 2021-03-18; просмотров: 103; Мы поможем в написании вашей работы!

Поделиться с друзьями:

Мы поможем в написании ваших работ!