1. Подготовка к созданию Web документа.
1.1. Цель и место размещения документа Web
2. Язык гипертекстовой разметки.
2.1. Структура текста Web документа
2.2. Гипертекстовые ссылки
2.3. Редакторы Web документов
3. Создание документов в стандарте HTML
3.1. Заголовки
3.2. Форматирование, изменение стилей
3.3. Списки
1.1. Цель и место размещения документа Web
Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.
Иными словами, средства, предназначенные для работы с Сетью, стали использоваться и в других целях, с нею не связанных, а среди программного обеспечения, устанавливаемого на большинство персональных компьютеров, приложения для Internet заняли свое почетное место.
В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Существует огромный список серверов, дающих пространство для размещения вашей станицы в глобальной сети, однако при виртуальном подписании договора между двумя сторонами, оговаривается тот факт, что Вы не имеете права использовать ваш сайт в рекламных целях, а также вставлять в него чужую рекламу (условия и услуги на всех серверах разные). Наиболее популярными являются Geocities, Chat.ru, Fortunecity и другие.
Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства.
1.2. Сценарий и структура Web-документа.
Для того, чтобы понять структуру и сценарий Web-документа, мы должны рассмотреть несколько Web-страниц и выявить общие элементы.
Любой Web-документ состоит из тегов? , причем обычно начальные теги пишутся большими буквами, а конечные - маленькими.
Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде всего это
Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница.
Также основным тегом является
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа.
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается броузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Без этих тегов невозможно создать ни одну Web-cтраницу. Более подробно эти и другие теги мы рассмотрим в параграфе 2.1.
2.1. Структура текста Web-документа
Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.
Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.
Для того чтобы понять структуру Web-страницы, нам необходимо подробно рассмотреть все элементы, входящие в приведенный листинг.
Комментарий к документу
Структура Web-страницы
(см. 2.1.)
На рис. 3.1. видно как изменится вид заголовка размера 2 после такого переопределения. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE необязательно.
Интересно, как синтаксис в HTML отражает историю развития вычислительной техники. Например, старый, а теперь почти забытый элемент BLINK напоминает о тех временах, когда использовались дисплеи, имевшие только текстовый режим. При таком положении вещей мерцание текста (BLINK) было, пожалуй, единственным доступным визуальным эффектом. В противоположность этому, элемент STYLE, введенный совсем недавно, вызывает ассоциации с программами для Windows, так как в них впервые появилось стилевое оформление текста, которое теперь невероятно популярно и без него уже немыслима работа в таких приложениях, как Word или Excel.
3.3. Списки
Списки (list) были добавлены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу берет на себя программа. Если список добавляется новыми пунктами или укарачивается, нумерации корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружочки, прямоугольники, росбы или другие изображения. В результате список принимает удобочитаемый, «фирменный вид». Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты), а другие задают его внутреннюю сторуктуру. Существует несколько разновидностей списков.
Самый простой ненумерованный список (unordered list). Его шаблон представлен ниже:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 3.3.
* Пункт 1 списка
* Пункт 2 списка
* Пункт 3 списка
Рис.3.3. Ненумерованный список.
Структура нумерованного списка похожа на предыдущую:
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Нумерованный список использует другой внешний тег: OL. В этом случае каждый пункт нумеруется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита. На рис. 3.4. показан пример списка, соответствующего приведенному выше листингу.
I. Пункт 1
II. Пункт 2
III. Пункт 3
IV. Пункт 4
Рис. 3.4. Нумерованный список.
Способ нумерации задается при помощи атрибута type. В табл. 3.1. приведены все способы нумерации.
Атрибут
Последовательность нумерации
type=’’1’’
1, 2, 3, 4, ...
type=’’i’’
i, ii, iii, iv, ...
type=’’I’’
I, II, III, IV, ...
type=’’a’’
a, b, c, d, ...
type=’’A’’
A, B, C, D, ...
Табл. 3.1. Значение атрибута type
Списки с определениями (definition lists) создаются при помощи тегов трех видов:
Пункт 1
Определение пункта 1
Другое определение пункта 1
Пункт 2
Определение пункта 2
Пункт 3
Определение пункта 3
Наглядное представление ос писке с определениями дает рис. 3.5. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение - произвольный текст под заголовком.
Пункт 1
Определение пункта 1
Другое определение пункта 1
Пункт 2
Определение пункта 2
Пункт 3
Определение пункта 3
Рис.3.5. Список с определениями
Другой способ создания сложных списков - использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список. В том случае, когда структура списка ясна, удобно воспользоваться шаблоном. В нем должны быть указаны все пункты на всех уровнях. Доработка такого шаблона сводиться к вписыванию конкретных строк текста в соответствующие пункты. Ниже дан пример такого шаблона:
Пункт 1
Пункт 1.1
Пункт 1.2
Пункт 2
Пункт 2.1
Пункт 2.2
Пункт 3
Пункт 3.1
Пункт 3.2
В нем нумерованные списки размещены внутри пунктов ненумерованного списка. Рис 3.6. дает представление о том, как выглядит такая конструкция.
- Пункт 1
1. Пункт 1.1
2. Пункт 1.2
- Пункт 2
1. Пункт 2.1
2. Пункт 2.2
- Пункт 3
1. Пункт 3.1
- Пункт 3.2
Мои работы:
www.baltnet.ru/wbas www.baltnet.ru/wbas/radio.htm www.baltnet.ru/wbas/fith_av.htm business.fortunecity.com/koch/726
E-mail: [email protected]
? Тег - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки,. А конечный всегда снабжается косой чертой
1 Броузер (browser) - программа для просмотра Web-страницы
2 Тег (tag) - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
3 Элемент (element) - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любой Web-документ представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.
4 Атрибут (attribute) - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой присваивается определенный набор значений: стандартных или произвольных. Атрибуты располагаются внутри стартового тега и отделяются друг от друга пробелами.
5 WWW, World Wide Web - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Internet.
6 Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
7 URL (Uniform Resource Locator) - адрес некоторого объекта в Internet
8 Код HTML - гипертекстовый документ в своем изначальном виде, когда видны все элементы и атрибуты, то есть, по сути дела, текстовый файл, содержащий набор элементов HTML.
9 Сайт (site) - набор Web-страниц, принадлежащих одному владельцу.
10 Пользовательский агент (user agent) - броузер или другая программа, работающая на компьютере-клиенте.