1) В документ Таблица Фамилия.html (лабораторная работа № 2) вставить:
– файл-картинку в виде фона для одной ячейки таблицы, затем для таблицы в целом, затем для документа в целом;
– после таблицы вставить гиперссылку на администратора конференции.
2) В документ Резюме Фамилия.html вставить:
– файл-фотографию, проверить разные варианты обтекания изображения текстом;
– преобразовать список приятелей в список гиперссылок на их резюме.
Выполнение
I. Подготовьте необходимые для работы файлы. Для этого нужно:
1) выполнить команду Пуск® Найти® Файлы и папки…;
2) в поле Имя ввести маску поиска *.jpg, в поле Где искать выбрать диск С:, нажать кнопку Найти;
3) в протоколе поиска выбрать три файла с изображениями пейзажей и один с изображением человека, скопировать их в каталог своей группы;
4) в папке своей группы создать новую папку с именем Сайт Фамилия (команда Файл® Создать® Папку);
5) открыть в папке своей группы файл Таблица Фамилия.html;
6) в окне Explorer выполнить команду Вид® Показать код HTML.
II. Создайте фон в разных частях документа. Для этого нужно:
1) в открывающий тег какой-нибудь ячейки таблицы вставить атрибут BACKGROUND="имя файла-пейзажа с расширением". В результате тег должен выглядеть примерно так:
<TD BACKGROUND="море.jpg">
2) сохранить код с исправлением и просмотреть его в окне Explorer. В ячейке в виде фона отображен левый верхний угол картинки;
3) скопировать атрибут BACKGROUND="…" в открывающий тег <TABLE>, заменить название файла на файл другого пейзажа. Сохранить код с исправлением и просмотреть его в окне Explorer. Теперь вся таблица изображается на фоне второй картинки, а в ячейке по-прежнему сохраняется предыдущий фон;
4) скопировать атрибут BACKGROUND="…" в открывающий тег <BODY>, заменить название файла на файл третьего пейзажа. Сохранить код с исправлением и просмотреть его в окне Explorer. Фон, указанный в <BODY>, заполняет все окно Explorer, а фон, заказанный во внутренних тегах, распространяется только на область их действия. Вывод: внутренние назначения заменяют внешние. Подробнее об этом см. п. 2.9.
III. Проанализируйте способы указания адресов нужных файлов (URL). Для этого сделайте следующие манипуляции:
1) перенесите в папку Сайт Фамилия все файлы пейзажей, нажмите кнопку Обновить в окне Explorer. Фон пропал;
2) в атрибутах BACKGROUND="…" добавьте перед именами файлов название папки, в которой они находятся. В результате получим примерно это:
BACKGROUND="Сайт Кукушкина\море.jpg"
Сохраните изменения и просмотрите их через Explorer. Фон появился. Прочтите п. 1.6 (фрагмент про относительный URL) и просмотрите примеры п. 2.9 при разных ссылках на файлы.В нашем примере мы сделали ссылку на файл в дочерней папке;
3) поменяйте местами файл с таблицей и файлы пейзажей (файл с таблицей – в папку Сайт…, а файлы пейзажей – в папку своей группы), закройте окно Explorer и откройте таблицу снова из папки Сайт… Фон опять пропал;
4) в атрибутах BACKGROUND="…" замените название дочерней папки на значок родительской. В результате получим примерно это:
BACKGROUND="..\море.jpg"
Сохраните изменения и просмотрите их через Explorer. Фон появился. В этом примере мы сделали ссылку на файл в родительской папке.
Вывод: самый простой URL получается, если все файлы, необходимые для просмотра документа, находятся в одной папке. В противном случае надо указывать пути к ним.
IV. Добавьте первую гиперссылку. Для этого нужно:
1) в код документа с таблицей после закрывающего тега </TABLE> добавить текст
Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через Explorer;
2) сделайте двойной щелчок на появившейся гиперссылке. Если гиперссылка не раскрыла Ваше резюме, проверьте правильность составления пути и названия файла в атрибуте HREF контейнера <A> …</A>. Чтобы вернуться к документу с таблицей, следует нажать кнопку Назад в окне Explorer или вставить в код резюме другую гиперссылку примерно такого вида:
<A HREF="Сайт …(Ваша фамилия) \Таблица …(Ваша фамилия).html"> Вернуться к таблице? </A>
Подробнее о гиперссылках и их атрибутах см. п. 2.10.
V. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:
Сообщите нам о нужном Вам номере по <A HREF="mailto://adm@mail.ru"> e-mail </A>
Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 1.6 о структуре URL и разберите в п. 2.10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.
VI. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег <IMG SRC="…"> (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег <IMG> атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 2.9.
VII. Составьте список гиперссылок. Для этого в списке приятелей фамилию каждого приятеля вставьте в контейнер гиперссылки на его резюме. Так как эти резюме могут располагаться на разных компьютерах, здесь уже требуется задавать URL в полном виде (см. п.п. 1.6, 2.10). Каждый пункт будет выглядеть примерно так:
