|
Министерство сельского хозяйства РФ |
||
|
|
Подготовка простейшего гипертекстового документа средствами программы Блокнот
1. На рабочем диске создать свою папку, а в ней текстовый файл с наименованием index.htm.
2. Ввести в документ следующий текст:
<HTML>
<HEAD>
</HEAD>
<BODY>
Мой первый HTML - документ
</BODY>
</HTML>
3. Закрыть документ, предварительно сохранив его под тем же именем.
4. Открыть Проводник, просмотреть, как выглядит пиктограмма созданного документа. Двойным щелчком запустить его, проанализировать, как отображаются введенные теги в браузере.
5. Отредактировать документ.
5.1. Вызвать меню браузера "Вид" - "Источник HTML" и добавить текст подписи, например «Студент 1-ой группы экономического факультета Иванов Иван».
Сохранить документ (не закрывать) и "Обновить" его просмотр в браузере.
5.2. Отредактировать документ так, чтобы подпись начиналась с новой строки - использовать тег <BR>. Просмотреть в браузере новый вариант.
5.3. Добавить внутри тега <HEAD> название страницы для отображения его в заголовке окна, используя парный тег <TITLE>.
Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки "Обновить" на панели инструментов или нажатием клавиши F5.
6. Шрифтовое оформление документа.
6.1. Оформить первую строку документа стилем Заголовок-1 с помощью парного тега <H1> …</H1>.
6.2. Оформить строку с подписью шрифтом с размером, увеличенным на 2. Использовать тег <FONT SIZE=+2>.
6.3. Изменить стиль оформления заголовка на Заголовок-2.
6.4. Просмотреть полученный документ в браузере.
7. Оформление абзацев.
7.1. Выровнять строку заголовка "По центру" (использовать парный тег <CENTER>).
7.2. Выровнять строку с подписью по правому краю. Использовать парный тег оформления параграфа <P> с параметром выравнивания ALIGN=RIGHT.
8. Оформление списков.
8.1. Дополнить
текст документа - ввести после заголовка еще три строки:
Я знаю, как оформлять:
Текст,
Заголовки.
8.2. Оформить две последние строки как нумерованный список. Для этого использовать следующую конструкцию тегов:
<OL>
<LI> Первый элемент списка </LI>
<LI> Второй элемент списка </LI>
</OL>
8.3. Дополнить список своих знаний. Например, между пунктами "Текст" и "Заголовки" добавить пункт "Абзацы". Проанализировать, как изменилась нумерация элементов списка.
9. Вставить в текст рисунок.
9.1. Подготовить в редакторе Paint свой автопортрет размером 3X4 см. Сохранить файл в той же папке под именем pic1.jpg.
9.2. Вставить рисунок в документ - после заголовка поместить тег:
<IMG SRC="pic1.jpg">.
Просмотреть результат в браузере.
9.3. Выровнять рисунок по центру экрана.
9.4. Перед рисунком поместить надпись "Это мой автопортрет". Оформить ее как Заголовок 3-го уровня, выровнять "По центру".
10. Научиться оформлять фон HTML - документа.
10.1. Сохранить документ под именем rabota.htm. Отредактировать тег <BODY>, введя в него атрибут цветового оформления фона BGCOLOR=. Задать значение атрибута в формате RGB (например, код #FFFFFF соответствует белому цвету, а код #000000 - черному).
10.2. Подобрать цвет фона в голубых тонах.
11. Выполнить оформление текста.
11.1. Ввести в тег <BODY> еще один атрибут, изменяющий цвет текста - TEXT=. Значение атрибута указать названием цвета, например YELLOW.
11.2. Используя тег <FONT> и его атрибут COLOR=, изменить цвет фразы «Я знаю, как оформлять:» на красный (red).
11.3. Используя теги <I>, <B>, <U> и <FONT> с атрибутом FACE=, оформить строки: «Текст» - курсивом, шрифт «Tahoma»; «Абзацы» - жирным, шрифт «System»; «Заголовки» - подчеркнутым, шрифт «Courier».
12. Продемонстрировать документ преподавателю.
13. Создание таблиц.
13.1. Вернуться к редактированию документа index.htm и сохранить его под именем index_tabl.htm
13.2. Разместить рисунок и подпись к нему в двух ячейках таблицы. Для этого использовать конструкцию тегов:
<TABLE>
<TR><TD>Строка 1 Столбец 1 </TD>
<TD>Строка 1 Столбец 2</TD></TR>
</TABLE>
13.3. Добавить дополнительные 2 строки и один столбец в созданную таблицу, заполнив их произвольным текстом.
14. Продемонстрировать созданные документы преподавателю.
15. Используя пройденный материал и теги, приведенные в приложении 1, создайте страницу, подобную представленной на рисунке 16
Рис. 16. Пример гипертекстового документа
При этом:
· выполнить страницу, используя таблицу;
· вместо черного прямоугольника необходимо вставить свой рисунок;
· название страницы должно иметь стиль заголовка;
· фразы «мой первый документ» и т.д. должны иметь соответственно гиперссылки на ранее созданные файлы index.htm, rabota.htm и index_tabl.htm;
· использовать разные цвета и шрифты при написании комментариев для гиперссылок на документы;
· информация о родителях должна быть представлена маркированным списком;
· для групп ячеек применить разные фоновые цвета.
· используя свою фантазию, дополнительно оформить документ или его отдельные элементы.
16. Продемонстрировать документ преподавателю.
Основы языка HTML
|
Назначение |
Вид тегов |
Примечание |
||
|
Общая структура документа HTML |
||||
|
Тип документа |
<HTML></HTML> |
Начало и конец |
||
|
Имя документа |
<HEAD></HEAD> |
Не отображается браузером |
||
|
Заголовок |
<TITLE></TITLE> |
Отображается в строке заголовка окна браузера |
||
|
Тело |
<BODY></BODY> |
|
||
|
Комментарий |
<! --***--> |
Обозревателем игнорируется |
||
|
Структура содержания документа |
||||
|
Внутренние заголовки различного уровня |
<HN></HN> |
Где N – номер уровня заголовка (от1 до 6). |
||
Заголовок с выравниванием |
<H? ALIGN=”left”></H?> |
Типы выравнивания: · left - по левому краю, · center - по центру, · right - по правому краю |
||
|
Форматирование абзацев |
||||
|
Создание абзаца (параграфа) |
<P></P> |
|
||
|
Перевод строки внутри абзаца |
<BR> |
Одиночный тег |
||
|
Перенос |
<WBR> |
|
||
|
Выравнивание абзаца |
<P ALIGN=”left”></P> |
Типы выравнивания: · left - по левому краю, · center - по центру, · right - по правому краю |
||
|
Разделительная горизонтальная линия между абзацами |
<HR> |
Одиночный тег |
||
|
Толщина линии |
<HR SIZE=?> |
Размер указывается в пикселях |
||
Продолжение приложения 1
|
Форматирование шрифта |
|||
|
Жирный |
<B></B> |
Фрагмент документа: <HR> Обычный текст <B>Жирный</B> <EM>Выделение текста</EM> </HR> |
|
|
Курсив |
<I></I> |
||
|
Выделение текста |
<EM></EM> или <STRONG> |
||
|
Подчеркнутый |
<U></U> |
||
|
Верхний индекс |
<SUB></SUB> |
||
|
Нижний индекс |
<SUP></SUP> |
||
|
Размер шрифта |
<FONT SIZE=?></FONT> |
От 1 до 7 |
|
|
Базовый размер шрифта |
<BASEFONT SIZE=?> |
От 1 до 7; по умолчанию равен 3 и задается для всего документа в целом |
|
|
Цвет шрифта (задается либо ключевым словом, либо шестнадцатеричным кодом) |
<FONT COLOR=”$$$$$$”> </FONT> |
Red –красный Blue – голубой #ff0000 – 16-теричный код – красный цвет в формате RGB |
|
|
Создание списков |
|||
|
Упорядоченный |
<OL><OL> |
Фрагмент документа: <OL> <LI>Элемент списка 1<LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL>
|
|
|
Неупорядоченный |
<UL><UL> |
||
|
Элемент списка |
<LI><LI> |
||
|
Списки определений |
<DL><DL> |
||
|
Определяемые термины |
<DT><DT> |
||
|
Определения |
<DD><DD> |
||