Министерство сельского хозяйства РФ
Воронежский государственный аграрный университет им. К.Д. Глинки
Кафедра информационного обеспечения и моделирования агроэкономических систем

 

Контактная информация:
E-Mail cyb123@vsau.ru
http://iomas.vsau.ru
  Адрес:
г. Воронеж
ул. Мичурина, 1, ауд. 124

Подготовка простейшего гипертекстового документа средствами программы Блокнот

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>

 


Кусмагамбетов С.М.