Metod_rekomendatsii_po_HTML
.pdf
Рис. 5. Образец мини-сайта лабораторной работы № 4
Лабораторная работа № 5
Тема: Формы в HTML-документе. Время: два академических часа.
Цель занятия: научиться создавать интерактивные формы в HTML-до- кументе.
Литература: [1, c. 90–113; 2, с. 61–69; 4, с. 141–171; 6, c. 55–67; 7, c. 91–
100].
Задания:
1. Ознакомьтесь с теоретическим материалом предложенных источни-
ков.
2.Изучите инструкцию для лабораторной работы.
3.Создайте HTML-документ form.html по образцу (рис. 6). Учтите:
страница должна иметь поля и заголовок «Лабораторная работа № 5 “Формы в HTML-документе”»;
элементы формы должны быть выровнены за счет их размещения в ячейках таблицы.
4.Добавьте созданный HTML-документ form.html в мини-сайт, включив соответствующий пункт в меню сайта и настроив гиперссылку.
5.Покажите преподавателю созданные HTML-документы.
11
Рис. 6. Образец HTML-документа лабораторной работы № 5
Лабораторная работа № 6
Тема: Каскадные таблицы стилей. Время: четыре академических часа.
Цель занятия: научиться использовать возможности каскадных таблиц стилей для форматирования HTML-документов.
Литература: [1, c. 133–159; 2, с. 70–81; 3, c. 95–185; 4, с. 172–256; 6, c. 77– 119; 7, c. 100–107].
Задания:
1. Ознакомьтесь с теоретическим материалом предложенных источни-
ков.
2.Изучите инструкцию для лабораторной работы.
3.Создайте HTML-документ css.html по образцу (рис. 7). Обратите вни-
мание:
страница должна иметь поля и заголовок «Лабораторная работа № 6 “Каскадные таблицы стилей”»;
12
для определения параметров форматирования элементов HTML-документа необходимо использовать наиболее подходящий способ задания стилей.
4.Добавьте полученный HTML-документ css.html в мини-сайт, включив соответствующий пункт в меню сайта и настроив гиперссылку.
5.Покажите преподавателю созданные HTML-документы.
Рис. 7. Образец HTML-документа лабораторной работы № 6
Лабораторная работа № 7
Тема: Позиционирование элементов в HTML-документе. Время: два академических часа.
Цель занятия: научиться позиционировать и группировать элементы в HTML-документе.
Литература: [1, c. 160–167; 2, с. 82–85; 4, с. 257–264; 6, c. 67–68; 7, c. 108–
118].
Задания:
1. Ознакомьтесь с теоретическим материалом предложенных источни-
ков.
2.Изучите инструкцию для лабораторной работы.
3.Создайте HTML-документ position.html по образцу (рис. 8). Обратите внимание:
страница должна иметь поля и заголовок «Лабораторная работа № 7 “Позиционирование в HTML-документе”»;
13
для наложения элементов друг на друга и размещения их в HTML-документе в определенных позициях использовались слои и доступные параметры позиционирования и видимости элементов.
4.Добавьте полученный HTML-документ position.html в мини-сайт, включив соответствующий пункт в меню сайта и настроив гиперссылку.
5.Покажите преподавателю созданные HTML-документы.
Рис. 8. Образец HTML-документа лабораторной работы № 7
Лабораторная работа № 8
Тема: Проектное задание «Разработка веб-сайта». Время: восемь академических часов.
Цель занятия: закрепить полученные знания и умения по работе с языком разметки гипертекста HTML.
Задания:
1.Выбрать тему информационного ресурса.
2.Разработать информационную модель ресурса в соответствии с требованиями, предъявляемыми к информационным ресурсам.
3.Подобрать информацию для ресурса: текст, фотографии, картинки, создать баннеры и др.
14
4. Выполнить разработку в соответствии со следующими техническими требованиями:
На оценку «удовлетворительно»:
содержание сайта тщательно продумано, логически выстроено, соответствует выбранной теме и целостно отражает ее;
объем 20–25 страниц, связанных гиперссылками (должны быть использованы текстовые и графические ссылки, продумана удобная навигация);
каждая страница содержит текст (не менее 1000 символов на каждой) и иллюстрации (не менее одной на каждой странице, всего не менее 20);
текст должен быть отформатирован: проведено разбиение на абзацы, использованы шрифтовые выделения (курсив, полужирный и др.), различные гарнитуры (использование CSS);
все иллюстрации оптимизированы для веб, имеют объем не более 50–60 килобайт (использование альтернативного текста, подсказок).
На оценку «хорошо» (дополнительно к требованиям на оценку «удовлетворительно»):
все страницы сайта оформлены в едином стиле;
выполнены основные дизайнерские требования к оформлению работы;
использован табличный дизайн сайта;
применен фоновый рисунок собственного изготовления («швы» не видны, текст хорошо читается).
На оценку «отлично» (дополнительно к требованиям на оценку «хорошо») выполнено одно из требований:
на одной из страниц располагается анимированный баннер, созданный во Flash;
использованы скрипты (можно использовать готовые);
применены оригинальные (самостоятельно разработанные) сочетания таблиц, бегущих строк и других элементов оформления;
проявлен творческий подход к созданию сайта.
15
2.Инструкции к лабораторным работам
Вданном разделе представлены инструкции, необходимые студентам для выполнения лабораторных работ. Инструкции содержат ряд задач (Задача
№1, Задача № 2 и т. д.). Все задачи состоят в свою очередь из подзадач, каждая из которых имеет одно или несколько решений. В рамках инструкции есть комментарии (краткие теоретические сведения) и заметки (практические указания), расширяющие знания и навыки студентов по определенным темам.
2.1. Структура и форматирование HTML-документов
Задача № 1 |
Создание, сохранение и открытие HTML-документа |
|
Запуск текстового редактора |
Решение |
В контекстном меню Рабочего стола |
|
выбрать |
|
Откроется текстовый редактор Блокнот |
Ввод данных в HTML-документ
Комментарий:
Все теги записываются в угловых скобках – < >. Существуют теги парные (имеют открывающийся элемент, заключенный в угловых скобках < >, и закрывающийся, заключенный между </ >) и непарные (имеют только открывающийся элемент в угловых скобках < >).
Решение Ввести в окно редактора код HTML-документа, например
|
Сохранение HTML-документа |
Решение |
В диалоговом окне сохранения файла заключите имя файла |
|
HTML-документа с расширением HTML в кавычки (иначе Блокнот |
16
добавит к нему расширение TXT и файл получит имя, например
1.1.html.txt)
Далее в поле со списком Кодировка 
необходимо выбрать кодировку UTF-8 и нажать кнопку 
Загрузка HTML-документа в веб-браузере
Решение |
Запустите HTML-документ, щелкнув по нему два раза левой |
||
|
кнопкой мыши. Откроется веб-браузер и отобразит созданный |
||
|
HTML-документ |
|
|
|
|
||
|
|
|
|
|
Добавление данных о кодировке HTML-документа |
Решение |
Поскольку ранее HTML-документ был со- |
|
хранен с использованием кодировки UTF-8, |
|
в сам код HTML-документа необходимо |
|
добавить информацию о том, какая коди- |
|
ровка будет нами использоваться. Поэтому |
|
между тегами <HEAD> … </HEAD> следует |
|
добавить тег <META> (используется для |
|
хранения информации, предназначенной |
|
для браузеров и поисковых систем) со сле- |
|
дующими параметрами |
Заметка:
При работе над созданием HTML-документа в текстовом редакторе нет необходимости закрывать редактор после каждого изменения кода HTML-документа. Можно просто сохранять изменения. Веб-браузер также можно не закрывать – достаточно обновить страницу, нажав F5.
17
Задача №
Решение
2 |
Настройка внешнего вида HTML-документа |
Задание цвета фона HTML-документа
Втег <BODY> добавить параметр bgcolor
суказанием цвета (одним из двух способов, см. заметку справа). Например, для задания светло-желтого цвета фона необ-
ходимо добавить 
либо 
Задание цвета основного текста HTML-документа
Решение В тег <BODY> добавить параметр text с указанием цвета. Например, чтобы задать синий цвет текста, необходимо добавить еще один параметр 
Задание фонового рисунка
Решение В тег <BODY> добавить параметр background с указанием пути и имени рисунка (с
определением формата рисунка – его расширения). Например, если рисунок fon.jpg лежит в том же каталоге (папке), в котором находится сам HTML-документ, то в тег <BODY> следует добавить следующий параметр 
Если рисунок лежит в подкаталоге (например, pics), то параметр
будет выглядеть таким образом: 
Если же рисунок лежит на другом сайте, то путь прописывается полностью, например 
Задание полей странички
Решение В тег <BODY> добавить параметры leftmargin, rightmargin, topmargin и/или bottommargin с необходимыми значениями в пикселях. Например, если для содержимого HTML-документа необходимо задать отступ слева в 100 пикселей, следует добавить следующий параметр 
Задача №
Решение
3 |
Форматирование символов в HTML-документе |
Физическое форматирование символов
Под физическим форматированием понимается придание тексту определенного эффекта: полужирный (<B>), курсив (<I>), зачеркнутый текст (<DEL>), надстрочный (<SUP>) и подстрочный (<SUB>), а
18
также использование моноширинного шрифта (<CODE>). Для того чтобы применить к тексту один из этих эффектов, следует поместить этот текст в один из следующих тегов: 
На первом рисунке изображен фрагмент кода HTML-документа, на втором – его результат в виде скриншота фрагмента окна браузера.
Заметка:
Любые теги можно использовать в комбинациях. Например, чтобы сделать текст курсивом и подчеркнутым, следует использовать комбинацию тегов <B><U></U></B>: 
Обратите внимание, что последовательность закрывающих тегов должна быть «зеркальной» по отношению к последовательности открывающих тегов.
Решение
Задача №
Решение
Изменение параметров шрифта текста
Для изменения таких параметров текста, как тип шрифта, его цвет и размер, используется специальный парный тег <FONT>. Этот тег имеет следующие параметры: size – размер текста (задается в пунктах от 1 до 7; по умолчанию равен 3); color – цвет текста; face – тип шрифта (шрифт должен присутствовать на компьютере пользователя, иначе браузер будет использовать шрифт по умолчанию (обыч-
но это Times New Roman). Пример
4 |
Форматирование абзацев в HTML-документе |
Создание абзацев
Обычно большие тексты разбиваются на абзацы (фрагменты текста, состоящие из нескольких предложений). Для того чтобы
19
сделать часть текста абзацем, следует ис- |
Заметка: |
||
пользовать тег <P>. При обнаружении этого |
|||
Некоторые символы, вве- |
|||
тега браузер поставит пустые строки до и |
денные в HTML-документ, |
||
после абзаца. |
могут быть неверно поня- |
||
Этот парный тег обладает следующими |
ты браузером. Например, |
||
символы < и > интерпре- |
|||
параметрами: title – краткое описание аб- |
|||
тируются браузером в ка- |
|||
заца (всплывает в виде подсказки при наве- |
|||
честве тегов. Вместо этих |
|||
дении курсором мышью на текст абзаца); |
|||
символов необходимо |
|||
align – задает выравнивание абзаца (сenter – |
использовать замену |
||
по центру, left – по левому краю, right – по |
|
|
|
правому краю, justify – по ширине экрана). |
|
|
|
Пример |
|
|
|
Решение
Решение
Использование неразрывных пробелов
Браузеры игнорируют множественные пробелы 
Для того чтобы браузер их не пропускал, следует воспользоваться кодом неразрывного пробела ( ) 
Принудительный перенос на следующую строку
Браузеры также игнорируют символы конца строки 
Заметка:
Ряд символов (например, неразрывный пробел, ©, ∑, и др.) невозможно набрать с клавиатуры, поэтому вместо них необходимо использовать специальные коды. Таблицу специальных символов и их кодов можно посмотреть в Приложении II «Таблица замены специальных символов».
Для принудительного переноса на следующую строку используется тег <BR> 
20