|
|
Методические указания для студентов всех направлений (бакалавриат) и специальностей очной и заочной форм обучения
Министерство образования Российской Федерации
Санкт-Петербургский государственный университет
низкотемпературных и пищевых технологий
Кафедра прикладной математики
ЛАБОРАТОРНЫЕ РАБОТЫ
ПО ОСНОВАМ HTML
Методические указания для студентов
всех направлений (бакалавриат) и специальностей
очной и заочной форм обучения
Санкт-Петербург 2004
УДК 681.3
Петрунина Е. Б. Лабораторные работы по основам HTML. Метод. указания для студентов всех направлений (бакалавриат) и специальностей очной и заочной форм обучения. СПб.: СПбГУНиПТ, 2004. – 18 с.
Представлен цикл лабораторных работ, позволяющих постепенно освоить средства языка HTML, необходимые для самостоятельного создания своего сайта.
Рецензент
Канд. техн. наук, доц. А. В. Зайцев
Одобрены к изданию советом факультета экономики и менеджмента
|
Санкт-Петербургский государственный университет низко-
температурных и пищевых
технологий, 2004
|
ВВЕДЕНИЕ
Цикл лабораторных работ, представленных в данных методических указаниях, помогает постепенно освоить главные понятия и средства языка HTML, применяемые при составлении документов, публикуемых в WEB. Для лучшего усвоения материала в инструкциях по выполнению работ приведены ссылки на параграфы методических указаний [1]. В этих параграфах подробно описаны теги, необходимые на каждом этапе работы, и разнообразные примеры их использования. Электронные варианты данных лабораторных работ можно получить на кафедре прикладной математики СПбГУНиПТ.
ЛАБОРАТОРНАЯ РАБОТА № 1
Форматирование текста в HTML-документах
Задание
Составить свое резюме по следующему плану (в общей сложности 4 – 5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):
Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).
В 19… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата ...
В 19… году поступил на факультет … СПбГУНиПТ. Средний балл по первым сессиям (аттестациям) …
В свободное от учебы время увлекаюсь … (перечислить не менее трех увлечений помимо учебы).
Мои приятели в группе: …(перечислить не менее трех фамилий из группы).
Выполнение
I. Прочтите общие сведения о языке HTML (п.п. 2.1, 2.2).
II. Подготовьте бланк для HTML-кода Вашего резюме. Для этого следует:
выполнить команду Пуск Программы Стандартные Блокнот Файл Сохранить как…;
в окне Сохранение документа открыть папку своей группы. В поле Имя ввести Резюме Фамилия.html (вместо Фамилия, естественно, должна стоять Ваша фамилия), нажать кнопку Сохранить.
Если все сделано правильно, то в папке Вашей группы появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.
III. Введите в созданный документ стандартные теги:
напечатайте свое резюме. Выполните команду Файл Сохранить.
V. Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из папки своей группы. Сжать размеры окна Explorer.
Обратите внимание на информацию в заголовке окна Explorer и в поле Адрес, а также на то, как компонуются строки текста при изменении размеров окна, в которое он выдается.
VI. Проведите первую коррекцию кода. Для этого следует:
не закрывая Explorer, перейти в окно Блокнота;
вставить в контейнер контейнер
(вместо ФИО, естественно, должна стоять Ваша фамилия);
выполнить команду Файл Сохранить;
перейти в окно Explorer;
нажать кнопку Обновить.
Посмотрите, как повлиял тег
вставьте скелетные теги таблицы (см. п. 2.8):
Характеристики гостиниц
|
|
……..
|
Количество контейнеров для строк рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.
Отцентрируйте заголовок таблицы. Расположите ее на цветном фоне. Выберите цвет для шрифта (см. лабораторную работу № 1).
IV. Заполните первую строку таблицы. Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры | … | . Окончательно контейнер первой строки выглядит так:
|---|
Название | Адрес |
Тип номера | Цена за день |
|---|
V. Заполните вторую строку таблицы. Так как это уже содержание таблицы, для ячеек используйте контейнеры … | . Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3. Окончательно контейнер второй строки выглядит так:
Центральная |
Пр. Мира, д. 4 |
Люкс одноместный | $150 |
VI. Заполните контейнер третьей строки таблицы. Для ячеек по-прежнему используйте контейнеры … | . Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:
Люкс двухместный | $250 |
VII. Аналогично п. VI заполните контейнер четвертой строки. Сохраните документ и просмотрите его через Explorer. В таблице пока нет разлиновки, но, если все сделано правильно, структура расположения информации должна просматриваться. Если нет – исправляйте ошибки.
VIII. Добавьте в таблицу сведения о гостинице Спортивная. Они располагаются в пятой и шестой строках. Похожие строки находятся во второй и третьей строках таблицы, и теги, создающие их, уже сформированы. Скопируйте теги из второй и третьей строк соответственно в контейнеры пятой и шестой строк, замените содержание ячеек. Так как здесь первая и вторая ячейки по высоте занимают только 2 строки, поменяйте значение атрибута
ROWSPAN. Получаем для новых строк:
Спортивная |
Бульвар Профсоюзов, д. 15 | одноместный | $50 |
двухместный | $80 |
IX. Добавьте в таблицу сведения о гостинице Вокзальная. Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию. Можно скопировать теги второй строки, убрать в них атрибуты ROWSPAN и просто заменить информацию в контейнерах ячеек:
Вокзальная |
Привокзальная пл., д. 3 |
Четырехместный | $50 |
Сохраните документ и просмотрите его через Explorer.
X. Форматирование таблицы. Добавьте в тег атрибуты BORDER=3 WIDTH=70% ALIGN=CENTER BGCOLOR=YELLOW BORDERCOLOR=MAROON (можно взять свои значения атрибутов).
Посмотрите через Explorer, как действуют эти атрибуты на вид таблицы. Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10. Посмотрите через Explorer, за что отвечает этот атрибут. Подробнее см. п. 2.8 и Приложение.
XI. Форматирование ячеек. Выделите сведения, относящиеся к разным гостиницам, разной заливкой. Выровняйте по центру ячеек цены номеров. Необходимые для этого сведения – в п. 2.8 и Приложении.
ЛАБОРАТОРНАЯ РАБОТА № 3
Подключение дополнительных файлов к HTML-документу
Задание
В документ Таблица Фамилия.html (лабораторная работа № 2) вставить:
файл-картинку в виде фона для одной ячейки таблицы, затем для таблицы в целом, затем для документа в целом;
после таблицы вставить гиперссылку на администратора конференции.
2) В документ Резюме Фамилия.html вставить:
файл-фотографию, проверить разные варианты обтекания изображения текстом;
преобразовать список приятелей в список гиперссылок на их резюме.
Выполнение
I. Подготовьте необходимые для работы файлы. Для этого нужно:
выполнить команду Пуск Найти Файлы и папки…;
в поле Имя ввести маску поиска *.jpg, в поле Где искать выбрать диск С:, нажать кнопку Найти;
в протоколе поиска выбрать три файла с изображениями пейзажей и один с изображением человека, скопировать их в каталог своей группы;
в папке своей группы создать новую папку с именем Сайт Фамилия (команда Файл Создать Папку);
открыть в папке своей группы файл Таблица Фамилия.html;
в окне Explorer выполнить команду Вид Показать код HTML.
II. Создайте фон в разных частях документа. Для этого нужно:
в открывающий тег какой-нибудь ячейки таблицы вставить атрибут BACKGROUND="имя файла-пейзажа с расширением". В результате тег должен выглядеть примерно так:
сохранить код с исправлением и просмотреть его в окне Explorer.
В ячейке в виде фона отображен левый верхний угол картинки;
скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл другого пейзажа. Сохранить код с исправлением и просмотреть его в окне Explorer.
Теперь вся таблица изображается на фоне второй картинки, а в ячейке по-прежнему сохраняется предыдущий фон;
скопировать атрибут BACKGROUND="…" в открывающий тег , заменить название файла на файл третьего пейзажа. Сохранить код с исправлением и просмотреть его в окне Explorer.
Фон, указанный в , заполняет все окно Explorer, а фон, заказанный во внутренних тегах, распространяется только на область их действия. Вывод: внутренние назначения заменяют внешние. Подробнее об этом см. п. 2.9.
III. Проанализируйте способы указания адресов нужных файлов (URL). Для этого сделайте следующие манипуляции:
перенесите в папку Сайт Фамилия все файлы пейзажей, нажмите кнопку Обновить в окне Explorer. Фон пропал;
в атрибутах BACKGROUND="…" добавьте перед именами файлов название папки, в которой они находятся. В результате получим примерно это:
BACKGROUND="Сайт Кукушкина\море.jpg"
Сохраните изменения и просмотрите их через Explorer. Фон появился. Прочтите п. 1.6 (фрагмент про относительный URL) и просмотрите примеры п. 2.9 при разных ссылках на файлы.В нашем примере мы сделали ссылку на файл в дочерней папке;
поменяйте местами файл с таблицей и файлы пейзажей (файл с таблицей – в папку Сайт…, а файлы пейзажей – в папку своей группы), закройте окно Explorer и откройте таблицу снова из папки Сайт… Фон опять пропал;
в атрибутах BACKGROUND="…" замените название дочерней папки на значок родительской. В результате получим примерно это:
BACKGROUND="..\море.jpg"
Сохраните изменения и просмотрите их через Explorer. Фон появился. В этом примере мы сделали ссылку на файл в родительской папке.
Вывод: самый простой URL получается, если все файлы, необходимые для просмотра документа, находятся в одной папке. В противном случае надо указывать пути к ним.
IV. Добавьте первую гиперссылку. Для этого нужно:
в код документа с таблицей после закрывающего тега добавить текст
Ответственный за размещение гостей
… (Ваша фамилия)
Внимание! В атрибуте HREF при указании пути и названия файла Вашего резюме следует соблюдать все регистры букв и пробелы. Сохраните изменения и просмотрите их через Explorer;
сделайте двойной щелчок на появившейся гиперссылке. Если гиперссылка не раскрыла Ваше резюме, проверьте правильность составления пути и названия файла в атрибуте HREF контейнера …. Чтобы вернуться к документу с таблицей, следует нажать кнопку Назад в окне Explorer или вставить в код резюме другую гиперссылку примерно такого вида:
Вернуться к таблице?
Подробнее о гиперссылках и их атрибутах см. п. 2.10.
V. Добавьте гиперссылку на почтовый ящик e-mail. Для этого нужно в код документа с таблицей после контейнера с первой гиперссылкой добавить строку:
Сообщите нам о нужном Вам номере по
mailto://adm@mail.ru"> e-mail
Сохраните изменение и просмотрите результат. Сделайте двойной щелчок на этой гиперссылке. Просмотрите окно создания сообщения. Прочтите в п. 1.6 о структуре URL и разберите в п. 2.10 примеры различных гиперссылок. Добавьте во все гиперссылки атрибут TITLE с какими-нибудь поясняющими надписями.
VI. Вставьте изображение как самостоятельный объект. Для этого откройте файл с Вашим резюме. После сведений о том, где Вы родились, вставьте тег  (вместо многоточия укажите URL своего файла с изображением человека). Сохраните и просмотрите изменение. Добавьте в тег ![]() атрибуты размеров картинки, сделайте ей окантовку в виде толстой рамки, поэкспериментируйте с вариантами разного расположения текста около нее. Необходимые для этого сведения см. в п. 2.9.
VII. Составьте список гиперссылок. Для этого в списке приятелей фамилию каждого приятеля вставьте в контейнер гиперссылки на его резюме. Так как эти резюме могут располагаться на разных компьютерах, здесь уже требуется задавать URL в полном виде (см. п.п. 1.6, 2.10). Каждый пункт будет выглядеть примерно так:
Кукушкин Гриша
Добавьте в каждую гиперссылку атрибут TITLE с поясняющими надписями (что-нибудь вроде «классный парень», «хорошие конспекты» и т. д.).
ЛАБОРАТОРНАЯ РАБОТА № 4
Разделение окна Explorer на фреймы
Задание
Составить HTML-документ, разделяющий и заполняющий экран по следующей схеме:
-
Заголовок.html
|
Меню.html
|
Приветствие.html
|
В документ Меню внести гиперссылки на документы Пункт1.html, Пункт2.html, Пункт3.html, которые будут раскрываться в правом нижнем фрейме вместо файла Приветствие.html
Выполнение
I. В папке Сайт подготовьте бланки для шести HTML-документов. Для этого следует:
выполнить команду Пуск Программы Стандартные Блокнот Файл Сохранить как…;
в окне Сохранение документа открыть папку своей группы, затем папку Сайт. В поле Имя ввести Заголовок.html, нажать кнопку Сохранить. Если все сделано правильно, то в папке Сайт появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова;
ввести в созданный документ следующее содержание и сохранить его:
Заголовок сайта
> слово Заголовок на слово, соответствующее названию файла;
просмотреть через Explorer, правильно ли созданы файлы, и если да, то закрыть все окна с ними. В результате на панели задач должна остаться только кнопка папки Сайт.
II. Создайте в папке Сайт и просмотрите в Explorer новый документ, назвав его Index.html:
Внешний контейнер |
|
|
Скачать 160 Kb.