Сохраните документ и просмотрите его через Explorer.

⇐ ПредыдущаяСтр 10 из 11Следующая ⇒

X. Форматирование таблицы. Добавьте в тег < TABLE> атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов).

Посмотрите через Explorer, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через Explorer, за что отвечает этот атрибут. Подробнее см. п. 2.8 и Приложение.

XI. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров.

Требования к содержанию и оформлению отчета по работе.

Отчет по работе выполняется письменно в тетради. Отчет должен содержать: тему работы; условие и ход решения для каждого задания.

Практическая работа 27

Создание персонального сайта

С использованием HTML на бесплатном хостинге

Цель работы: приобрести практический опыт работы c гипертекстовыми документами на бесплатном хостинге

Порядок выполнения работы:

1. Записать тему и цель работы в тетрадь.

2. Оформить отчет о выполненной работе.

Инструментарий. ПЭВМ IBM PC, пакет программ MS.

Задание

Создать сайт из нескольких коротких (не более одного экрана) документов на свою тему. Минимальный набор средств языка HTML, который должен быть использован в документах:

– разделение экрана на фреймы;

– разные приемы форматирования текста;

– оформление списков;

– оформление таблиц;

– гиперссылки, нацеленные на свой и чужой фреймы;

– использование изображений как независимых объектов и в качестве фона.

Выполнение

Возможные темы сайтов: любимая вокальная группа, театральный коллектив, спортивная команда, автор любимых книг, Ваш город, какой-нибудь курорт, вид спорта, отдыха, реклама какой-нибудь фирмы, себя любимого и т. п.

Если трудно придумать собственную модель организации информации, можно воспользоваться заготовкой, созданной в лабораторной работе № 4.

В документе Заголовок.html можно разместить красиво оформленную информацию, привлекающую внимание к Вашему сайту (шрифт, картинки, движущиеся объекты – если умеете).

В документе Приветствие.html можно использовать в качестве фона или самостоятельного объекта изображение логотипа фирмы, фотографию на тему сайта, а также разместить краткое пояснение того, чему посвящен Ваш сайт в целом, как двигаться по нему.

В документах Пункт1.html, Пункт2.html, Пункт3.html можно разместить разные группы информации по выбранной теме. Например, если выбрана тема «спортивная команда», Пункт1.html может содержать текстовые сведения об истории ее создания, Пункт2.html – список игроков, Пункт3.html – таблицу игр.

Документ Меню.html должен содержать гиперссылки на Пункт1.html, Пункт2.html, Пункт3.html с понятными текстами, расположенными удобным для выбора мышкой способом.

Требования к содержанию и оформлению отчета по работе.

Практическая работа 28

Размещение на сайте электронных документов, графических рисунков

Цель работы: приобрести практический опыт работы c гипертекстовыми документами, и графическими вставками.

Порядок выполнения работы:

1. Записать тему и цель работы в тетрадь.

2. Оформить отчет о выполненной работе.

Инструментарий. ПЭВМ IBM PC, пакет программ MS.

Задание

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> добавить текст

Ответственный за размещение гостей
< A HREF="..\Резюме …html" > … (Ваша фамилия) < /A>

Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через Explorer;

2) сделайте двойной щелчок на появившейся гиперссылке. Если гиперссылка не раскрыла Ваше резюме, проверьте правильность составления пути и названия файла в атрибуте HREF контейнера < A> …< /A>. Чтобы вернуться к документу с таблицей, следует нажать кнопку Назад в окне Explorer или вставить в код резюме другую гиперссылку примерно такого вида:

< A HREF=" Сайт …(Ваша фамилия) \Таблица …(Ваша фамилия).html" > Вернуться к таблице? < /A>

Подробнее о гиперссылках и их атрибутах см. п. 2.10.

V. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:

Сообщите нам о нужном Вам номере по
< A HREF=" mailto: //[email protected]" > e-mail < /A>

Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 1.6 о структуре URL и разберите в п. 2.10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.

VI. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег < IMG SRC=" …" > (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег < IMG> атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 2.9.

VII. Составьте список гиперссылок. Для этого в списке приятелей фамилию каждого приятеля вставьте в контейнер гиперссылки на его резюме. Так как эти резюме могут располагаться на разных компьютерах, здесь уже требуется задавать URL в полном виде (см. п.п. 1.6, 2.10). Каждый пункт будет выглядеть примерно так:

< LI> < A HREF=" file: //2\\c: \мои документы\гр511\Резюме Кукушкина.html" > Кукушкин Гриша < /A>

Добавьте в каждую гиперссылку атрибут TITLE с поясняющими надписями (что-нибудь вроде «классный парень», «хорошие конспекты» и т. д.).

Требования к содержанию и оформлению отчета по работе.

Практическая работа 29

⇐ Предыдущая 2 3 4 5 6 7 8 91011 Следующая ⇒