Веб-страницы с гиперссылками и изображениями.

Цель работы: Знакомство с различными возможностями перехода на другие страницы и вставки графических изображений

Теоретическая часть:

Важнейшую роль в оформлении страницы играют иллюстрации.

Для размещения рисунков в документе служит одиночный тег < IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.

Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).

Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.

Для создания гиперссылки в документе используются теги < A> и < /A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.

В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.

Практическая часть

Создайте папку и переименуйте её своей фамилией.

В папке создайте 2 документа в программе Блокнот, на основе которого можно сделать Веб-страницу. (сделайте заголовок, тело).

В свою папку скопируйте две картинки (большую для фона и маленькую) и одну анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (расширения должны быть соответствующими вашим изображениям).

На основе первого документа сделайте страницу, содержащую все скопированные вами изображения. Код для разметки Веб-страницы будет следующим:

< html>

< head>

< title> ИЗОБРАЖЕНИЕ1 < /title>

< /head >

< body background=paint1.jpg>

< img scr=paint2.gif>

< img scr=anim.gif>

< /body>

< /html>

Сохраните этот документ под именем document1.

Второй документ должен содержать ссылку на этот документ, при нажатии на которую появится список. Код тела этой веб-страницы должен иметь вид:

< body>

< A HREF=” document1.htm> < /A>

< /body>

Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6 предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой пояснительный текст. Вторая – гиперссылку на первый документ.

Таблица начинается открывающимся тегом < TABLE> и завершается закрывающимся < /TABLE>.

Строки таблицы начинаются открывающимся тэгом < TR> и завершаются закрывающимся < /TR>, а каждая ячейка таблицы начинается тегом < TD> и завершается < /TD>.

Практическая часть

Создайте папку и переименуйте её своей фамилией.

В папке создайте 2 документа в программе Блокнот, на основе которого можно сделать Веб-страницу. (сделайте заголовок, тело).

На первом документе отобразите следующий список:

• сканеры для ввода текстов и иллюстраций
1. листовые сканеры
2. ручные сканеры
3. планшетные сканеры
• специальные типы сканеров
1. барабанные сканеры
2. сканеры форм
3. штрих-сканеры

HTML- код для этой страницы выглядит следующим образом:

< ul>

< li> сканеры для ввода текстов и иллюстраций

< ol> < li> листовые сканеры

< li> ручные сканеры

< li> планшетные сканеры

< /ol>

< li> специальные типы сканеров

< ol> < li> барабанные сканеры

< li> сканеры форм

< li> штрих-сканеры

< /ol>

< /l>

Сохраните документ под именем spisok.htm

В теле этой же Веб-страницы постройте следующую таблицу:

Такая таблица реализуется следующим кодом:

< TABLE >
< TR> < TD> Монитор< /TD>
< TD> Клавиатура < /TD> < /TR>
< TR> < TD> Мышь < /TD>
< TD> Системный блок < /TD> < /TR>
< /TABLE>

Самостоятельно создайте документ, в состав которого обязательно должен войти следующий список:

• Рабочие дни:
1. понедельник
2. вторник
3. среда
4. четверг
5. пятница
• Выходные дни:
1. суббота
2. воскресенье

и таблица:

Прогноз погоды:

Ячейки в таблице могут быть объединены с помощью атрибутов rowspan = n, где n (n > 1) — количество строк, выделяемых под ячейку или colspan = k, где k (k > 1) — количество столбцов, выделенных под ячейку.

Пример: таблица с тремя объединенными ячейками в первом столбце второй строки.

< table border=4 cellspacings=0> < tr> < td bgcolor=" yellow" > Заголовок 1 < td bgcolor=" yellow" > Заголовок 2 < /tr> < tr> < td rowspan=3 bgcolor=" lime" > Ячейка 1 < td> Ячейка 2 < tr> < td> Ячeйкa 3 < /tr> < tr> < td> Ячейка 4 < /tr> < /table>

При построении таблицы на языке HTML допускается вложение в ячейки других таблиц.

1. Создайте на языке HTML таблицу «Композиторы»: