Цикл лабораторных работ, представленных в данных методических указаниях, помогает постепенно освоить главные понятия и средства языка HTML, применяемые при составлении документов, публикуемых в WEB. Для лучшего усвоения материала в инструкциях по выполнению работ приведены ссылки на параграфы методических указаний [1]. В этих параграфах подробно описаны теги, необходимые на каждом этапе работы, и разнообразные примеры их использования.
ЛАБОРАТОРНАЯ РАБОТА № 1
Форматирование текста в HTML-документах
Задание
Составить свое резюме по следующему плану (в общей сложности 4 – 5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):
Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).
В 19… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата ...
В 19… году поступил на факультет … СПбГУНиПТ. Средний балл по первым сессиям (аттестациям) …
В свободное от учебы время увлекаюсь … (перечислить не менее трех увлечений помимо учебы).
Мои приятели в группе: …(перечислить не менее трех фамилий из группы).
Выполнение
I. Прочтите общие сведения о языке HTML (п.п. 2.1, 2.2).
II. Подготовьте бланк для HTML-кода Вашего резюме. Для этого следует:
1) выполнить команду Пуск ® Программы ® Стандартные ® Блокнот ® Файл® Сохранить как…;
2) в окне Сохранение документа открыть папку своей группы. В поле Имя ввести Резюме Фамилия.html (вместо Фамилия, естественно, должна стоять Ваша фамилия), нажать кнопку Сохранить.
Если все сделано правильно, то в папке Вашей группы появится этот файл со значком обозревателя, в противном случае – со значком блокнота. Тогда следует удалить созданный файл и повторить все снова.
III. Введите в созданный документ стандартные теги:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Теги набираются в английском регистре. Для ускорения и облегчения набора желательно активно пользоваться командами копирования и переноса информации. Подробнее об этих тегах см. п. 2.4.
IV. Внутри контейнера <BODY> напечатайте свое резюме. Выполните команду Файл® Сохранить.
V. Посмотрите, как выглядит набранный текст без «украшательств». Для этого следует открыть созданный файл из папки своей группы. Сжать размеры окна Explorer.
Обратите внимание на информацию в заголовке окна Explorer и в поле Адрес, а также на то, как компонуются строки текста при изменении размеров окна, в которое он выдается.
VI. Проведите первую коррекцию кода. Для этого следует:
1) не закрывая Explorer, перейти в окно Блокнота;
2) вставить в контейнер <HEAD> …</HEAD> контейнер
<TITLE> Резюме ФИО </TITLE>
(вместо ФИО, естественно, должна стоять Ваша фамилия);
3) выполнить команду Файл® Сохранить;
4) перейти в окно Explorer;
5) нажать кнопку Обновить.
Посмотрите, как повлиял тег <TITLE> на информацию в заголовке Explorer. Подробнее об этих тегах см. п. 2.4.
VII. Проведите вторую коррекцию кода. Для этого следует:
1) не закрывая обозреватель, перейти в окно Блокнота;
2) в открывающий тег <BODY> вставить атрибуты TEXT и BGCOLOR, значения цветов выбрать самим. Подробнее об этих атрибутах см. п. 2.4;
3) выполнить Файл® Сохранить;
4) перейти в окно Explorer;
5) нажать кнопку Обновить.
Посмотрите, как изменился вид информации в окне Explorer.
Если какой-то атрибут «не сработал», значит, допущены ошибки в написании английских слов или пропущены пробелы между атрибутами. Следует найти ошибки и повторить цикл коррекции кода.
Итак, один цикл коррекции кода включает следующие действия: внесение и сохранение исправлений в окне блокнота, переход в окно Explorer и обновление его информации кнопкой Обновить или командой Вид® Обновить. В дальнейших пунктах инструкции будут просто указываться изменения, которые следует внести в код, а все остальные действия перечисляться не будут.
VIII. Проведите третью коррекцию кода. Для этого следует:
1) после раздела «ФИО, где и когда родился», поставить тег абзаца <P>;
2) после раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки <BR>;
3) перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии <HR>.
Подробнее об этих тегах см. п. 2.6.
Посмотрите через Explorer, в чем разница действий тегов <P> и <BR>, как действует тег <HR> со значениями атрибутов по умолчанию.
IX. Оформите линию нестандартным способом. Для этого следует внести в тег <HR> атрибуты длины, толщины, цвета и выравнивания линии (см. п. 2.6). Задайте длину 20 % – 50 % от ширины окна, выравнивание по центру, толщину 4 – 10 пикселей, цвет – любой.
Посмотрите через Explorer, как действуют атрибуты на линию, созданную тегом <HR>.
X. Измените вид шрифтов в разных частях резюме. Для этого следует контейнером <H1> выделить свою фамилию, контейнером <I> – город, где Вы родились, контейнером <H6> – информацию о школе, контейнером <FONT> с атрибутами SIZE=7 COLOR=RED – информацию о факультете, контейнером <FONT> с атрибутами SIZE=1 COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение. Подробнее об этих тегах см. п. 2.5.
Просмотрите через Explorer, как действуют эти теги.
XI. Оформите часть текста в виде списка. Для этого следует контейнером <OL> выделить блок об увлечениях, разбить его на пункты тегами <LI> (подробнее см. п. 2.7). Аналогично контейнером <UL> и тегами <LI> оформить в виде маркированного списка перечень Ваших приятелей.
Посмотрите, как выглядят стандартные списки.
XII. Измените нумерацию в списке. Для этого с помощью атрибутов TYPE и START поменяйте нумерацию в списке увлечений (подробнее см. п. 2.7).
Посмотрите, как изменится стандартный нумерованный список при новых атрибутах.
