Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






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

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

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

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

Для размещения рисунков в документе служит одиночный тег < 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. воскресенье

и таблица:

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

Дата Осадки Атмосферное давление
15.12.2007 Снег 753 мм. рт. ст.
15.12.2007 Нет 745 мм. рт. ст.
     

 


Ячейки в таблице могут быть объединены с помощью атрибутов 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 таблицу «Композиторы»:


<== предыдущая лекция | следующая лекция ==>
Код в файле it.htm | Браузер Microsoft Internet Explorer




© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.