Контрольные вопросы и задания
1. Дайте определение понятия HTML-документа.
2. Дайте определение понятия тега.
3. Приведите классификацию тегов по способу организации.
4. Из каких блоков состоит HTML-документ и какие теги используются для организации этих блоков?
5. Для чего используется заголовок документа HTML?
6. Какие элементы могут располагаться внутри заголовка HTML-документа?
7. Какой формат имеет файл, в котором сохраняется текст web-страницы?
8. Какое имя имеет стартовая страница HTML-документа?
9. Дайте определение понятия атрибута тега.
10. Назовите способы записи атрибутов тега.
11. Расскажите правило записи тегов.
12. Что такое escape-последовательности?
13. Какие существуют способы просмотра HTML-документа
в браузере?
14. Какой тег используется для сохранения форматированного текста с клавиатуры?
15. Как записываются комментарии в HTML-документе?
16. Какой тег используется для записи информации браузеру о версии языка HTML?
17. Дайте определение понятия метаопределения. Какие параметры могут входить в метатеги?
18. Какие вы знаете атрибуты тега <BODY> и для чего каждый из них используется?
19. Как формируется цвет в HTML-документе?
20. Какие теги входят в состав группы логического форматирования текста?
21. Заголовок какого уровня считается наивысшим?
22. Как осуществляется оформление заголовка в тексте и сколько уровней их используется в HTML-документе?
23. Какие теги входят в состав группы физического форматирования текста?
24. Какие теги используются для изменения начертания символов текста?
25. Какие теги используются для изменения размера шрифта и выбора его типа?
26. Какие теги относятся к структурному форматированию текста HTML-документа?
27. С помощью каких тегов можно сформировать текстовые блоки,
в чем разница между ними?
28. Назовите атрибуты, которые используются при форматировании абзаца.
29. Для чего используют горизонтальную линию и как настраивают ее параметры?
30. Когда применяют отступ и пустую строку в HTML-документе?
31. Какие виды списков применяются в HTML-документе?
32. Как оформляются списки в HTML-документе?
Задания для самостоятельной работы
Создайте отдельную web-страницу, для которой установите фон для тега <BODY>, используя данные согласно вашему варианту (табл. 1.7). Далее сформируйте текст на вашей странице, который должен быть отформатирован соответственно заданию в столбце «Атрибуты для текста». После этого сохраните страницу в файле с именем DZn.htm, где n – номер варианта.
Таблица 1.7
Исходные данные для создания web-страницы
| № вари-анта | Атрибуты <BODY> | Атрибуты для текста |
| 1 | Фон – графическое изображение из файла | Создайте два абзаца и осуществите выравнивание: 1-й абзац – left, 2-й абзац – right. Используйте шрифт Arial для 1-го абзаца, размер шрифта 5 пунктов, для 2-го абзаца на 2 пункта меньше |
| 2 | Фон – цвет темно-синий, цвет текста – белый | Создать маркированный список, состоящий из 5 пунктов, в качестве маркера использовать графическое изображение, текст пунктов списка выделить курсивом |
| 3 | Фон – светло-розовый | 1-й абзац: выравнивание right, заголовок 1-й уровень, шрифт Arial, цвет текста красный; 2-й абзац: выравнивание left, заголовок 2-й уровень, шрифт New Roman, цвет шрифта коричневый |
| 4 | Фон – текстура | Создать нумерованный список, состоящий из 5 пунктов, использовать римскую нумерацию, текст пунктов списка выделить полужирным начертанием и разместить список в центре |
| 5 | Фон – графическое изображение из файла | Наберите стихотворение (два четверостишия) текст должен быть оформлен курсивом. Название стихотворения должно быть заголовком и расположено в центре страницы, а автор – текст, смещенный вправо, и размер его меньше основного текста на 2 пункта |
| 6 | Фон – желтого цвета | Создайте 2 текстовых блока, 1-й – красного цвета, выровненный по правой стороне страницы, 2-й – зеленого цвета по левой стороне. Между ними вставьте горизонтальную линию |
| 7 | Фон – цвет сформируйте сами, используя насыщенность трех цветов (RGB) | Создайте два текстовых абзаца (цвет подберите в контрасте относительно фона), каждый должен иметь заголовок: 1-й абзац – 1-й уровень, жирный курсив, 2-й абзац – 2-й уровень, подчеркнутый курсив |
| 8 | Фон – графическое изображение из файла, зафиксированное при прокрутке. Задайте границы документа горизонтальные и вертикальные в 20 пикселов | Создайте два текстовых абзаца различных цветов: 1-й абзац – жирный шрифт с засечками, 2-й абзац – без засечек полужирный курсив |
Окончание табл. 1.7
| № варианта | Атрибуты <BODY> | Атрибуты для текста |
| 9 | Фон – изумрудного цвета | Создайте три текстовых блока темно-синего цвета и выровняйте их соответственно по левому, правому краям и один расположите по центру |
| 10 | Фон – текстура в контрасте с цветом текста | Создайте два текстовых блока: 1-й блок – текст красного цвета, полужирный курсив, размер шрифта 6 пунктов, 2-й блок – синего цвета, размер шрифта на 2 пункта меньше |
| 11 | Фон – графическое изображение в виде цветка из файла | Создайте два четверостишия, посвященные цветам, оформив их в виде отдельных текстовых блоков, разместив первое четверостишие по левой стороне, второе – по правой. Цвета для блоков подберите сами |
| 12 | Фон – темно-бордовый | Создайте маркированный список с заголовком из трех пунктов и каждый пункт из 2 подпунктов. В качестве маркеров основного списка используйте изображение из файлов. Цвет текста – белый |
| 13 | Фон – сиреневого цвета | Создайте два абзаца красного и зеленого цвета соответственно. Расположите их по центру и задайте размер шрифта на единицу больше существующего по умолчанию |
| 14 | Фон – текстура белый мрамор | Создайте текст золотистого цвета, строки которого отделены друг от друга пробелом. Текст должен быть отцентрирован и иметь заголовок. Заголовок – жирный шрифт, основной текст – полужирный курсив |
| 15 | Фон – фотография любимого артиста или певца | Создайте на фоне фотографии текстовый блок, содержимое которого отвечает его автобиографии. Цвет текста должен хорошо быть виден. В тексте должны чередоваться шрифты с большим и меньшим размерами. |
| 16 | Фон – пурпурного цвета | Создайте нумерованный список, состоящий из 4 пунктов с подпунктами. Задайте римскую нумерацию. Основной список сделайте жирным курсивом, подпункты – курсивом меньшего размера. При задании цвета тексту используйте возможности смешивания трех цветов (RGB) |
2. ДЕЛАЕМ WEB-СТРАНИЦУ ИНТЕРЕСНЕЕ
В предыдущей главе было рассмотрено создание простейшей web-страницы с текстовым наполнением. Чтобы эта страница привлекала внимание, на нее нужно поместить рисунки, музыкальное сопровождение, гиперссылки.
2.1. Гиперссылки
Ссылки являются ключевым компонентом, которые делают web-страницы привлекательными для пользователей. Благодаря ссылке (гиперссылке) web-страница структурируется и связывается с другими HTML-документами или другими разделами данного документа, что позволяет быстро и удобно получить информацию. Именно благодаря ссылкам Всемирная паутина получила ошеломляющую популярность, так как пользователь может легко переходить от одной страницы к другой простым щелчком мыши.
Гиперссылка – это указатель адреса в глобальной Сети, по которому можно моментально перейти из окна браузера.
Любая гиперссылка состоит из двух частей: указателя ссылки (якоря – от англ. anchor) и адреса ресурса, на который осуществляется переход. Внешне отличить гиперссылку от обычного текста можно при наведении мыши на нее, указатель мыши принимает вид руки с указательным пальцем, а сама ссылка подчеркивается (текстовая ссылка).
В качестве указателя может выступать текст (слово, фраза и даже целая страница) и графическое изображение.
Указатель ссылки описывается тегом <A></A>, адрес перехода осуществляется с помощью атрибута HREF. Значением атрибута является URL-адрес документа, на который осуществляется ссылка.
<A HREF="URL">текст гиперссылки (графическое изображение)
</A>
Все гиперссылки можно разделить на два вида: внешние и внутренние. Внешние ссылки ведут на другие ресурсы глобальной Сети или другие HTML-документы одного сайта, а внутренние – позволяют путешествовать в пределах одного документа.
Внешние ссылки. Существуют два способа записи адреса перехода по внешней ссылке: абсолютный и относительный. Абсолютный – в значении параметра HREF указывается полный путь к ресурсу. Относительный – в значении параметра HREF указывается конечный документ относительно текущего документа.
Формат абсолютного адреса указателя ресурса имеет следующий вид:
метод://имя_сервера:порт/путь#якорь
URL обычно состоит из трех частей:
– протокол доступа к источнику – это правила, которые должны выполняться при обмене данными (web-страницами);
– имя сервера, на котором хранится документ;
– имя источника (имя файла документа).
Протокол доступа – это правила, по которым происходит обмен данными между компьютерами. Наиболее часто используемые протоколы: http (поиск документов по всему WWW), ftp (протокол передачи файлов), mailto (вызов протокола электронной почты SMPT).
<A HREF="http://www.kodak.com/us/en/health">текст ссылки </A>
<A HREF="mailto://medinews@kodak.com" >текст ссылки </A>
Кроме рассмотренного атрибута HREF тег <A> имеет еще несколько атрибутов (табл. 2.1).
Таблица 2.1
Атрибуты тега <A>
| Атрибут | Назначение | Примеры написания |
| HREF | Указывает URL-адрес документа, на который указывается ссылка | <A HREF="URL"> текcт ссылки </A> |
| TARGET | Содержит директивы, описывающие правила открытия целевого документа | <A HREF="URL" TARGET="_blank"> текст ссылки</A> |
| NAME | Указывается вместо HREF при вставке якоря в документ | <A NAME="имя_якоря"> место перехода</A> <A HREF="#имя_якоря">текст ссылки</A> |
| ID | Идентичен атрибуту NAME, но может вставляться не только в тег <A>, но и в другие теги | <P ID="имя абзаца"> <A HREF="#имя абзаца"> текст ссылки </A> |
| METHODS | Задает метод извлечения документа (FTP, HTTP и т. д.) | <A METHODS="название"> необязательный текст </A> |
| FRAME | Указывает фрейм, в котором должен быть визуализирован целевой документ | <A FRAME"=имя фрейма"> </A> |
| TITLE | Используется для визуализации подсказки | <A TITLE="имя ссылки"> Ссылка</A> |
| ACCESSKEY | Указывает горячую клавишу, при нажатии которой будет выполнен переход по ссылке | <A ACCESSKEY="имя клавиши"> Ссылка </A> |
Пример использования некоторых атрибутов тега <A>:
<A HREF="http:// www. server.ru/page.htm" TARGET="_blank"
TITLE="вызов_содержимого_страницы" > текст гиперссылки </A>
где HREF – адрес страницы, с которой планируется установить гиперсвязь; TARGET – содержит директивы, описывающие правила открытия целевого документа (если атрибут TARGET принимает значение _blank (TARGET="_blank"), то открытие нового HTML-документа происходит в новом окне; если этот атрибут опущен, то новый HTML-документ открывается в этом же окне); TITLE – атрибут, который задает всплывающее название гиперссылки, при наведении на нее указателя мыши, его можно опускать (рис. 2.1).
Рис. 2.1. Пример применения гиперссылки
с наведенным на нее указателем мыши
Обычно относительный адрес записи внешней ссылки подразумевает расположение файла, на который существует гиперссылка в том же каталоге, что и файл, с которого будет осуществляться переход.
Если искомый документ расположен в одной директории с текущим, то в качестве параметра атрибута HREF достаточно написать название файла:
<A HREF="page1.htm"> текст гиперссылки </A>
Внутренние ссылки. Этот вид ссылок используется для перехода из одной части большого документа в другую его часть. Применение внутренних ссылок дает возможность пользователю легко перемещаться по странице.
Процесс создания гиперссылки можно условно разделить на два этапа.
1. Подготовка закладки. Этот этап включает в себя создание именного идентификатора (имя закладки), указывающего место в HTML-доку-менте, куда должны переместиться после нажатия на гиперссылку. Для этого применяют атрибут NAME тега <A>.
<A NAME=«имя закладки»>ключевое слово</A>
Например,
самыми любимыми предметами, которые изучают в университете, являются: <A NAME="1">информатика</A>, английский, культурология.
В приведенном выше тексте закладка сделана на ключевое слово «информатика» и присвоено имя этой закладке «1». В качестве имени можно использовать любое сочетание символов и цифр. Для задания имени закладки, конечно же, рекомендуется лучше использовать латинские символы, но и то имя, которое мы дали, не будет являться ошибкой.
2. Создание самой ссылки. Поскольку переход задается в пределах одного документа, внутренние ссылки записываются без указания URL-адреса, вместо него задается имя закладки, к которой осуществляется переход с использованием символа «#» перед этим именем. Этот символ означает, что ссылка указывает на метку, а не на внешний файл: <A HREF="#имя закладки">текст ссылки</A>.
<A HREF="#2">Увлечения</A>
<A HREF="#1">Любимые предметы</A>
<A HREF="#3">Понравившиеся фильмы</A>