Информатика. Учебники. Современные компьютерные технологии
.pdf
Рис. 35
Технология создания HTML документа в среде редактора сценариев
Для создания HTML документа активизируйте редактор сценариев од-
ним из описанных выше способов и выполните команду меню File NewFile
– в результате откроется диалоговое окно New File (рис.37).
Рис. 36
191
В раскрывшемся окне NewFile выберите шаблон HTML Page, раскрой-
те список, расположенный правее кнопки “Open”, и выберите в списке эле-
мент Open With - раскроется диалоговое окно Open With (рис. 38). Если соз-
даваемая страница будет главной в создаваемом проекте, то в списке этого диалогового окна выберите HTML/XML Editor (Defoult). Если создаваемая страница будет одной из подчиненных, то выберите в списке HTML/XML Editor with Encoding или Source Code (text) Editor, затем щелкните на кнопке
<Open>.
После выполнения этой операции откроется окно редактирования
HTML-кода для создаваемого документа, в котором по умолчанию будет создана заготовка HTML-документа на основе базового шаблона, представ-
ленного в листинге 2.
Рис. 37
Листинг 1. Базовый код HTML документа, создаваемый редактором сценариев
<HTML>
<HEAD>
<TITLE></TITLE>
192
<META NAME="GENERATOR" Content="Microsoft Visual Studio"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF- 8">
</HEAD>
<BODY>
<!-- Insert HTML here --> </BODY>
</HTML>
Сохраните документ, присвоив файлу имя.
Приведенный в листинге 2 шаблон можно использовать как основу для создания HTML - документа. Рассмотрим элементы, которые он включает.
Весь документ заключѐн в парный дескриптор < HTML > < /HTML > ,
который указывает, что всѐ, что размещено внутри этого дескриптора, брау-
зеру необходимо интерпретировать. Внутри помещены ещѐ два парных деск-
риптора HEAD и BODY.
Дескриптор HEAD - это раздел заголовка. Он устанавливает свойства документа в целом. В нем может находиться ряд других элементов, включая:
TITLE - название документа, которое будет отображаться в строке имени браузера;
META – сообщает браузеру дополнительные сведения о документе;
BASE – задает базовый адрес документа;
STYLE – определяет внешний вид документа;
ISINDEX – указывает, что документ будет использоваться в поисковых системах;
SCRIPT – определяет операторы интерпретируемых языков программиро-
вания таких, как JavaScript и VBScript.
Из перечисленных элементов дескриптор TITLE является обязатель-
ным. Он должен содержать простое, короткое и содержательное название,
193
наиболее полно отражающее функциональное назначение Web-странички. В
названии следует избегать общих фраз. Например, из двух названий: <TITLE> Проектирование Web-страниц </TITLE>
<TITLE> Проектирование Web-страниц, использование HTML
</TITLE>
второе является более удачным, поскольку оно конкретизирует содер-
жание Web-страницы.
Элемент <META> предназначен для предоставления поисковым Web-
серверам информации для каталогизации и индексации страниц. Он включа-
ет атрибуты:
NAME или HTTP-EQUIV - указывает, какая информация содержится в атрибуте CONTENT;
CONTENT – служит для краткого описания странички с помощью ключевых слов, которые позволяют ориентироваться при поиске информа-
ции на заданную тему, также он может содержать имя автора и название приложения, в котором страничка создана.
Контейнер HEAD может содержать несколько элементов META, так как, например, в коде HTML-документа, представленного листингом 3:
Листинг 2
<HEAD>
<TITLE> Проектирование Web-страниц-использование HTML </TITLE> <META NAME="KeyWords" Content=" дескрипторы, контейнеры, эле-
менты, разметка страницы,графика ">
<META NAME="Author" Content="P. Melnikov">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF- 8">
</HEAD>
194
Используя редактор сценариев, создайте HTML документ в соответст-
вии с HTML кодом, приведенном в листинге 3. Просмотрите вид этого доку-
мента в окне браузера.
7.6.Применение HTML для разметки документа
Ввод и форматирование текста
Создание структуры документа с помощью заголовков
При разработке HTML документов целесообразно в первую очередь создать структуру, используя заголовки. В HTML существует шесть уровней заголовков, каждому из которых соответствует свой размер и стилевое оформление шрифта (рис. 19). Для создания заголовков служат контейнер-
ные дескрипторы <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Синтаксис этих де-
скрипторов имеет вид:
<Hn> Содержимое дескриптора (текст) </Hn>
Создайте HTML документ, интерпретируя который браузер создает в своем окне изображение, подобное приведенному на рис. 39
Рис. 38
195
Форматирование текстовых абзацев
В документе HTML текстовая строка может быть любой длины.
Internet-браузер самостоятельно выполняет перенос строки, если она не уме-
щается по ширине экрана. Но в ряде случаев требуется специальное оформ-
ление текста с разбивкой на абзацы и на строки. Это можно сделать с помо-
щью специальных одиночных дескрипторов <P> и <BR>. Дескриптор <P>
служит для вставки строки текста, для разрыва абзаца и вставки пустой стро-
ки. Например:
<P> Выводимый текст
Дескриптор <BR> выполняет разрыв строки. Он может иметь атрибут
CLEAR="X". Обычно этот атрибут применяют, при вставке изображений, ес-
ли необходимо установить обтекание его текстом.
Эти дескрипторы в документе HTML записываются так, чтобы они предшествовали абзацу или новой строке. В листинге 4 демонстрируется применение этих дескрипторов.
Листинг 3
<BODY>
<H2> РОДИНЕ </H2><P><H4>(Лирический монолог)</H4><P>Как жаль мне, что гордые наши слова:<BR> ”Держава”, ”Родина” и “Отчизна” -<BR>Порою затерты, звенят едва<BR>В простом словаре повседневной жизни<P>Я этой болтливостью не грешил,<BR> Шагая по жизни путем солдата.<BR> Я просто с рожденья тебя любил<BR> Застенчиво, тихо и очень свято.
</BODY>
В этом листинге 4 показано, как можно отформатировать два четверо-
стишья, используя дескрипторы разрыва и дескрипторы заголовков. На рис. 117 показано действие этих дескрипторов на изображение Web-страницы.
196
Дескрипторы разрыва строк удобно использовать для создания спи-
сков. В следующем листинге показан пример создания простого списка с по-
мощью дескриптора <BR>.
Листинг 4. HTML код для создания списка
<HEAD>
<TITLE> СПИСОК</TITLE> </HEAD>
<BODY>
<H3>УЧЕБНЫЕ ЗАВЕДЕНИЯ </H3>
Московский Государственный университет<BR>Финансовая академия<BR>Технический университет<BR>
</BODY>
Создайте HTML документ, отображаемый в окне браузера в виде,
представленном на рис. 40, 41.
Рис. 39
197
Рис. 40
Выравнивание и форматирование текстовых фрагментов
Стандартной установкой выравнивания текста является выравнивание по левому краю. Другие виды выравнивания заголовков и текста - по центру или по правому краю окна браузера - служат атрибуты, применяемые в деск-
рипторах в соответствии с приведенным ниже синтаксисом: <Hn ALIGN= вид выравнивания>
<P ALIGN= вид выравнивания>
Ключевое слово ALIGN является наименованием атрибута, а ―вид вы-
равнивания‖ – устанавливаемое значение (RIGHT, LEFT или CENTER). В
листинге 6 показано, как можно выровнять заголовок и текст по центру окна браузера:
Листинг 5.
<BODY>
<H1 ALIGN=CENTER> Выравнивание заголовка по центру </H1>
<P ALIGN=CENTER> Для выравнивания заголовков и абзацев относительно окна браузера в дескрипторах следует установить значение
параметра ALIGN.
198
</BODY>
Если в HTML – документ нужно поместить уже отформатированный текстовый фрагмент из другого документа, например документа, подготов-
ленного в редакторе БЛОКНОТ, и сохранить это форматирование, то для со-
хранения форматирования в HTML коде можно использовать контейнерный дескриптор PRE. В листинге 7 демонстрируется применение элемента PRE
для сохранения форматирования текста.
Листинг 6
<HTML>
<HEAD>
<TITLE> Формтирование с помощью элемента PRE</TITLE>
<META NAME="Author" Content="P. Melnikov">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF- 8">
</HEAD>
<BODY>
<pre>РАЗГОВОР С ФИНИНСПЕКТОРОМ О ПОЭЗИИ Гражданин фининспектор!
Простите за беспокойство.
Спасибо… не тревожьтесь…
я постою …
</pre>
</BODY>
</HTML>
В окне браузера текст будет выглядеть, как показано на рис. 42.
199
Рис. 41
Как видно на рис. 119, форматирование текста в окне браузера сохра-
нено.
С помощью редактора Блокнот создайте документ, содержащий от-
форматированный текст. Создайте HTML - документ и поместите в него текст из ранее созданного документа, сохраняя его форматирование. Про-
смотрите документ в окне браузера и, если есть недостатки, устраните их.
Форматирование текста с помощью стилей
HTML позволяет форматировать текст несколькими различными спо-
собами: с помощью физических стилей, с помощью логических стилей и ус-
танавливать размер шрифта. Текст, отформатированный физическим стилем,
во всех браузерах отображается одинаково, а отформатированный логиче-
ским стилем в различных браузерах может отображаться по-разному. Для форматирования текста с помощью стилей существуют специальные деск-
рипторы. Ниже приведены дескрипторы для создания физических стилей.
200