- •Общие сведения о языке разметки гипертекста(html)
- •Общие сведения о языке разметки гипертекста (html)
- •Структура html-документа
- •Знакомство с графическими объектами
- •Создание gif-файлов
- •Цвета в html
- •Главное о форматировании текста
- •Заголовки
- •Начертание шрифта
- •Выравнивание и отступы
- •Выравнивание текста по левому или правому краю
- •Центрирование объектов
- •Поля вокруг изображения
- •Фоновые изображения и фоновый цвет
- •Локальные ссылки
- •Ссылка - строка
- •Ссылка - изображение
- •Якорь и ссылка на него
- •Глобальные ссылки
- •Дополнительные возможности форматирования текста
- •Текст, обтекающий границы объекта
- •Отображение текста в одной строке (без переноса на другую строку)
- •Выделение абзацев с помощью списков определений и полей
- •Рекомендации по проведению занятий
Фоновые изображения и фоновый цвет
Для повышения привлекательности сайта на нем создается фон. В качестве фона можно использовать gif-файл или цвет. Для задания gif-файла в качестве фонового изображения используется атрибут BACKGROUND= тега <BODY>. Например, в файле FON1.htm записан следующий документ:
<HTML>
<HEAD>
<TITLE> Фон 1</TITLE>
</HEAD>
<BODY BACKGROUND="summer.gif">
Фоном сделано изображение яхты (получились “обои”). В gif-файл записывают
обычно логотип фирмы.
</BODY>
</HTML>
Изображение summer.gif мало по размеру, поэтому программа просмотра использует его повторно в своем окне. Для задания цвета фона используется атрибут BGCOLOR= тега <BODY>. Например, в файле FON2.htm записан следующий документ:
HTML>
<HEAD>
<TITLE> Фон 2</TITLE>
</HEAD>
<BODY BGCOLOR=#FF3300>
Фоном сделан красный цвет
</BODY>
</HTML>
Задание 3.3.1. Просмотреть страницы, создаваемые файлами FON1.htm и FON2.htm. Оценить привлекательность документов.Задание 3.3.2.Используя файл FON1.htm как исходный, записать в рабочую папку файл FON1a.htm, в котором поэкспериментировать со значениями атрибута BACKGROUND=. Убедиться в нецелесообразности черно-белых рисунков.Задание 3.3.3. Используя файл FON2.htm как исходный, записать в рабочую папку файл FON2a.htm, в котором поэкспериментировать со значениями атрибута BGCOLOR=.
Ссылки
Локальные ссылки
Ссылка - строка
Ссылка - изображение
Якорь и ссылка на него
Глобальные ссылки
В пунктах 1, 2 и 3 рассмотрены теги, которые задают размещение на странице и внешний вид объектов, включенных в тело документа. Рассмотрим теперь теги, которые указывают ссылки на другие документы. Рассматриваемые теги реализуют гипертекстовые ссылки, называемые также гиперссылками, или сылками на точки привязки. Рассмотрим также теги, указывающие ссылки на другие точки того же документа, в котором они записаны. Такие точки привязки называются якорями. Посетитель сайта может от рассмотрения одного материала перейти к анализу другого, щелкнув мышкой по нужной ссылке.
Локальные ссылки
Посетитель сайта видит на дисплее документ. Для того, чтобы в окне программы просмотра мог появиться какой-либо другой документ, расположенный на этом сайте, необходимы ссылки от просматриваемого документа на другие. Такие ссылки, действующие в пределах одного сайта, называются локальными. Локальные ссылки могут иметь форму строки или изображения.
Ссылка - строка
Начнем создание простейшего HTML-документа ssylki1.htm . Для этого необходимо уяснить и выполнить следующие действия.
Запустить приложение Блокнот, используя кнопку “Пуск” на панели задач: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ
Набрать в поле редактирования следующий текст:
<HTML>
<HEAD>
<TITLE> 1-й текстовый HTML-документ со
ссылкой-строкой </TITLE>
</HEAD>
<BODY> <A HREF="ssylki2.htm">установите указатель мыши
на эти слова и щелкните левой кнопкой.</A>
</BODY>
</HTML>
Сохранить документ в рабочей папке под именем ssylki1.htm (Блокнот закрывать не следует, он пригодится для дальнейшей работы). В заголовке документа ssylki1.htm записан текст, используемый как надпись в заголовке окна программы просмотра и на кнопке панели задач. В теле записана пара тегов: ... , которая создает (Add - добавить) гиперссыл-ку (HREF = Hypertext REFerence - гиперссылка) на документ ssylki2.htm.
Набрать Блокнотом в поле редактирования текст документа ssylki2.htm:
<HTML>
<HEAD>
<TITLE> 2-й текстовый HTML-документ со
ссылкой-строкой </TITLE>
</HEAD>
<BODY> 1. <a href="ssylki1.htm">установите указатель мыши
на эти слова и щелкните левой кнопкой.</a> <BR> 2. <BR>
3. <BR>4. <BR>5. <BR>
</BODY>
</HTML>
Сохранить документ в рабочей папке под именем ssylki2.htm.
В окне рабочей папки выполнить двойной щелчок левой кнопкой мыши по значку только что созданного документа ssylki1.htm и с помощью MS Internet Explorer просмотреть получившийся документ.
Щелкнуть мышью по надписи в окне программы просмотра, убедиться в появлении на экране документа ssylki2.htm.
Щелкнуть мышью по надписи в окне программы просмотра, убедиться в появлении на экране документа ssylki1.htm.
Задание 4.1.1.1. Используя файл ssylki1.htm как исходный, записать в рабочую папку файл ssyl1.htm, в котором должен содержаться нумерованный список, аналогичный рассмотренному в пункте 2.3:
<HTML>
<HEAD>
<TITLE> 1-й текстовый HTML-документ </TITLE>
</HEAD>
<BODY>
<OL TYPE=1>
<LH>Это нумерованный список<BR>
<LI><A HREF="ssyl2.htm"> ssyl2 </A>
<LI><A HREF="ssyl3.htm"> ssyl3 </A>
</OL>
</BODY>
</HTML>
Записать файлы ssyl2.htm и ssyl3.htm, в которых должны быть ссылки на ssyl1.htm. Убедиться в работоспособности ссылок. Задание 4.1.1.2. Используя как исходный файл bm.htm, созданный при выполнении задания 2.3.2, записать в рабочую папку файл bm0.htm, в котором должны содержаться ссылки на документы, содержащие пункты настоящей методички. Названия этих документов можно выбрать, например, такими: 1.htm, 11.htm, 12.htm, 13.htm, 14.htm, 15.htm, 2.htm, 21.htm, 22.htm, 23.htm. Используя как исходный файл ssylki2.htm, нужно создать Блокнотом документ-шаблон со ссылкой на bm0.htm. Этот документ-шаблон может получить имя 1.htm, его следует использовать затем для создания документов, содержащих пункты настоящей методички. Каждый документ, содержащий пункт методички, создается следующим образом. Нужно выделить весь текст пункта методички: указатель мыши разместить на полосе выделения слева от строки, в которой записан заголовок пункта. Прижать левую клавишу мыши и протащить указатель мыши по полосе выделения до конца пункта. Скопировать выделенное в буфер обмена, щелкнув в инструментальном меню "Стандартное" по кнопке или посредством команды операционного меню {Правка, Копировать}. Снять выделение текста, щелкнув левой клавишей мыши. Вставить содержимое буфера обмена в документ-шаблон, используя команду {Правка, Копировать} операционного меню Блокнота. Записать файл, используя коман-ду {Файл, Сохранить как ...} операционного меню Блокнота. Убедиться в работоспособности ссылок.