Читайте также:
|
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
Документ HTML может быть создан в любом текстовом редакторе, допускающем подготовку файлов с расширением-*.htm (*.html), или в специализированных HTML-редакторах и конвертерах. Для начального изучения вопросов проектирования Web-страниц, а именно для этого предназначается данные методические указания, целесообразно использовать текстовый редактор Блокнот (Notepad), имеющий минимальные средства редактирования текста. Это позволит наилучшим образом усвоить основные принципы и особенности проектирования Web-страницы.
Пример 1.1. Сформируем текст HTML-документа в текстовом редакторе Блокнот и сохраним его в файле index_1.html в папке Проект_Web.
Замечание. Файл сохраняется с расширением — *.html
<HTML>
<HEAD>
<TITLE>Проектирование Web-страницы </TITLE>
</HEAD>
<BODY>
Это моя первая Web-страница
</BODY>
</HTML>
В приведенном примере оператор пролога не используется.
Заголовок документа выделяется операторами <HEAD> и </HEAD>. Элемент <HEAD> (заголовок) определяет информацию о документе в целом. Заголовок документа должен содержать название документа, ограничиваемое операторами <TITLE> и </TITLE>. Тело документа, ограничиваемое операторами <BODY> и </BODY>, содержит всю информацию страницы. В данном случае эта информация ограничивается сообщением — “Это моя первая Web-страница”.
Просмотр документа. Откройте папку, в которой сохранен файл index_1.html, и запустите его на исполнение, сделав двойной щелчок левой клавишей мыши на пиктограмме файла. Активизация файла index_1.html автоматически вызывает установленную на вашем компьютере программу просмотра (программу – броузер (browser)) Microsoft Internet Explorer (IE) или Netscape Navigator (NN), в окне которого появляется содержимое вашего документа.
Второй способ (для определенности в дальнейшем будем использовать броузер Microsoft Internet Explorer, русифицированная версия 5.0) просмотра HTML – документа, записанного в файле, заключается в том, что вначале запускается броузер, а затем открывается нужный файл (в рассматриваемом примере –index_1.htm). Для открытия файла из меню Файл выбираем команду Открыть, а затем в появившейся диалоговой панели Открыть указываем адрес HTML-документа и запускаем файл на исполнение. Результат выполнения — Web-страница, соответствующая примеру (рис.1.1).
Рис.1.1. Просмотр Web-страницы, соответствующей примеру 1.1.
В раскрывшемся окне броузера мы видим содержание нашей Web-страницы – Это моя первая Web-страница.В заголовке окна броузера мы видим заголовок страницы – ”Проектирование Web – сайта”.
Рассмотрим приведенный пример подробнее.
Заголовок документа. Элемент <HEAD>. Заголовок документа выделяется операторами <HEAD> и </HEAD>. Элемент <HEAD> (заголовок) определяет информацию о документе в целом. Заголовок документа может содержать:
- название документа <TITLE>. Любой документ может иметь не более одного названия. Название не является частью текста и должно характеризовать содержание документа;
- гипертекстовые ссылки <LINK>. Используются для указания взаимоотношения между данным документом и каким-либо другим объектом, адресуемым URI. Документ может иметь любое количество элементов LINK;
- базовый адрес <BASE>. Элемент BASE позволяет документу самому назначать URI для использования сокращенных записей в теле документа;
- общая информация <META>. Атрибуты этого элемента используются для обозначения технической информации о документе (автор, ключевые слова, кодировка, и т.д.). Обработка содержащейся информации производится программами поиска и другими средствами систематизации данных в Internet.
Рассмотрим только оператор <TITLE>. Другие операторы будут рассмотрены далее. В заголовке с помощью операторов <TITLE> и </TITLE> задается идентификатор документа (Проектирование Web-сайта), который отображается в заголовке главного окна навигатора. Пара операторов <TITLE> и </TITLE> в заголовке являются обязательными.
Тело документа. Элемент <BODY>. Тело документа, ограничиваемое операторами <BODY> и </BODY>, содержит всю информацию страницы. В данном случае эта информация ограничивается сообщением — “Это моя первая Web-страница”.
Открывающий и закрывающий операторы <BODY> и </BODY> соответственно могут быть одновременно опущены. В этом случае броузер сам будет определять начало и конец содержания, ограниченное операторами. Учитывая, что поиск “начала и конца содержания” не формален, результат может быть не однозначен. Поэтому операторы <BODY> и </BODY> лучше указывать.
Атрибуты элемента <BODY>:
| Наименование атрибута | Описание атрибута |
| bgcolor | Задает цвет фона документа. Значение атрибута задается шестнадцатеричным числом или собственным именем. Например, bgcolor = #FFFF00; bgcolor = yellow. |
| background | Указывает URI графического файла, используемого в качестве фона документа (не рекомендуемый[3]). |
| text | Определяет цвет текста на странице (не рекомендуемый). |
| link | Задает цвет ссылок (не рекомендуемый). |
| vlink | Задает цвет просмотренных ссылок, на которых находится маркер в данный момент (не рекомендуемый). |
| alink | Задает цвет активных ссылок (не рекомендуемый). |
| bgproperties | bgproperties = fixed. В этом случае фон документа не прокручивается вместе с текстом, а остается “привязанным” к экрану. |
| topmargin leftmargin bottommargin rightmargin | Задает в пикселях расстояние между окном и текстом соответственно сверху, слева, снизу и справа. |
| scroll | Устанавливает полосы прокрутки |
Кроме отмеченных, присущих только этому элементу атрибутов, элементу <BODY> присущи и так называемые общие атрибуты. Общие атрибуты приведены в п. 1.2.
С элементом <BODY>, точно также как и с другими элементами HTML, связан еще один класс атрибутов — атрибуты для установки обработчиков событий: onclick, ondblclick, onmousedown, onmouseup и другие. Этот класс атрибутов будет рассматриваться далее.
В качестве содержания (контента) элемента <BODY> могут использоваться:
- блочные заголовки <H1>,... <H6>, элементы: <P>, <DIV>, <DL>, <PRE>, <BLOCKQUOTE>, <FIELDSET>, <ADDRESS>, <HR>, <TABLE>, списки <UL>, <OL>, скрипты <SCRIPT>, <NOSCRIPT>;
- встроенные элементы:
- текст;
- элементы физического форматирования — <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;
- элементы логического форматирования — <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;
- специального назначения — <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;
- форм — <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.
Элемент <BODY> не может содержать в качестве контента разделы <!doctype>, <html>, <head>.
Пример 1.2. Рассматриваемый пример иллюстрирует использование атрибута background. В качестве фона документа выбрано изображение, которое хранится в файле Bk_paper1.jpg.
Замечание. Отметим: хранение файлов index.html и Bk_paper1.jpg в одной папке позволяет не прописывать весь путь к файлу Bk_paper1.jpg, а указать только его имя. Если условие хранения файлов в одной папке не выполняется, то необходимо прописывать путь к файлу. Представим пример 1.2 в виде:
<HTML>
<HEAD>
<TITLE>Проектирование Web-страницы </TITLE>
</HEAD>
<BODY background=Bk_paper1.jpg>
Это моя первая Web-страница
</BODY>
</HTML>
Результат выполнения примера (рис. 1.2.)
Рис.1.2. Просмотр Web-страницы, соответствующей примеру 1.2.
В заключение отметим, что при проектировании Web-сайта используются различные технологии написания Web-страниц:
- язык гипертекстовой разметки HTML;
- каскадные таблицы стилей CSS;
- Web-редакторы.
Дата добавления: 2015-10-02; просмотров: 50 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Проектирование HTML – документа | | | Выравнивание параграфов текста |