Контрольные вопросы:
Что такое теги и их атрибуты?
Из каких основных элементов структуры складывается HTML - документ? Их назначение?
Какие атрибуты элемента <BODY> отвечают за отсутствие полей?
Какими способами можно задавать цвета в HTML?
Какие основные элементы форматирования текста и их назначение?
Какие значения может принимать атрибут align?
Какое назначение имеет элемент <PRE>?
Сколько значений может принимать элемент <Hx>? Какое назначение имеют его атрибуты?
Какое назначение имеют атрибуты элемента <FONT>?
Какое назначение у элементов <B>, <I>, <U>, <BIG>, <SMALL>, <TT>?
Какие виды списков возможны в HTML? Какими элементами они определяются?
2. Использование графики, гиперссылок и таблиц
Цель: Получение навыков использования графического изображения для привлекательного оформления Web– страничек, ознакомление с разными вариантами гиперссылок, а так же ознакомление с основными принципами построения таблиц в Web- документах
Использование графики
Для отображения рисунка в HTML используется одинарный тег изображения – элемент <IMG>, атрибут Src, в котором указывается на файл-источник изображения.
Обобщенное описание тега <IMG> имеет следующий вид:
<IMG Src =Имя графического файла>
Чаще всего используются графические файлы в форматах GIF и JPEG. Эти форматы поддерживаются большинством браузеров.
Для использования изображения на вашей Web-страничке создайте файл, например, в графическом редакторе Paint, рисунок – изображение манипулятора «мыши» и сохраните его под именем my_mouse.gif в своей папке
На основе приведенного ниже кода создайте новый файл, который будет демонстрировать использование изображения:
<HTML>
<HEAD>
<TITLE> Использование изображения </TITLE>
</HEAD>
<BODY>
<H1> Мой рисунок </H1>
<IMG Src = my_mouse.gif>
</BODY>
</HTML>
Сохраните файл на диске под именем prim_7.html и откройте его в Internet Explorer.
Вы должны получить следующее изображение Web- странички:
Рис. 2.1 Пример использования изображения.
Кроме атрибута Src, элемент IMG может включать в себя ряд иных атрибутов – размеры, выравнивание, обтекание текстом и т.п.
Создание гиперссылок
Известно, что наипростейший вид перехода между Web – страничками в Internet – это переход с помощью гиперссылок. Их использование переходить в разные части странички, которая просматривается или обращаться к другим страничкам или сайтам.
В HTML различаются внутренние и внешние гиперссылки. Внутренние гиперссылки осуществляют переход в пределах одного и того же документа. Внешние – переходы к документам, которые могут быть расположены на разных Web – серверах.
Для создания ссылок используются элемент <А>, который называется элементом связи (или якорным элементом). Существует два типа элементов связывания – текстовый и графический
Простейшие ссылки имеют следующий вид:
<A href =адрес перехода>
текст ссылки
</A>
При использовании графической привязки в контейнер <А> вставляется одинарный тег изображения – элемент <IMG>, атрибут Src в котором указывается на файл – источник изображения, например:
<A href = prim_10.html> <IMG Src = my_mouse.gif>
</A>
Элемент <А> имеет атрибуты, приведенные ниже:
name - задает имя элемента метки,
<html>
<head>
<title> Пример использования гиперссылок </title>
</head>
<body>
<p>
<A name='#Bigin'> Начало документа
<A href='#End' title='На конец документа'>
Переход на окончание
</a>
<p>
<A href='prim_10.html'> <IMG src='my_mouse.gif'> </a>
<p>
<A name='#End'> Конец докумеита
<A href='#Bigin' title='На начало документа'> Переход в начало </a>
</body>
</html>
2.2.2. Сохраните файл на диске под именем prim_8.html и откройте его в Internet Explorer.
Вы должны получить следующее изображение Web- странички:
Рис. 2.2 Пример использования гиперссылок.
Перейдите из полно экранного в оконный режим Internet Explorer и установите высоту окна таким образом, чтобы в его правой части появилась полоса прокрутки (т.е. размер изображения Web- странички должен быть значительно большим, чем размер окна).
Выполните все возможные переходы на Web- страничке и проанализируйте результат.
2.2.3. Используя элемент <A>, в файле mail.html выполните следующие действия:
Создайте нумерованный список, элементами которого должны быть гиперссылки на шесть файлов, созданных раньше prim_1.html , prim_2.html, … prim_6.html .
Установите всплывающие подсказки к элементам списка.