Практическое занятие № 1.
Создание HTML – документов в текстовом редакторе Блокнот. Структура документа, форматирование, работа со шрифтами.
1. Откройте текстовый редактор Блокнот (Пуск® Программы® Стандартные® Блокнот).
2. Сохраните документ с имением doc1.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя (Для этого в окне сохранения файла выберете в поле тип файла пункт «Все файлы», в поле имя файла вручную введите имя и расширение).
3. Введите следующий HTML – код:
<HTML >
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<! -- Это очень простой документ -->
У меня дома живут животные:
собака
кошка
морская свинка
попугай
канарейка
Документ составлен Ивановой А.А.
</BODY>
</HTML>
4. Сохраните документ. Просмотрите его в браузере. (Для этого откройте браузер и в адресной строке наберите полный путь к файлу или просто наберите С: а далее открывайте папки действуя как в Проводнике). Посмотрите как выглядит заголовок окна браузера.
5. Вернитесь в окно Блокнота и внесите следующие изменения
a) Тег <TITLE> </TITLE> заполните текстом “Домашние животные Ивановой”;
b) перед первой и последней строкой тела документа и словом “собака” вставьте тег <p>, перед словами “кошка”, “морская свинка”, “попугай”, “канарейка” – тег <br>.
6. Сохраните документ. Перейдите в окно браузера и обновите страницу. Проанализируйте изменения. Вернитесь в окно Блокнота.
7. Заключите слово “собака” в тег <i>, “кошка” – в тег <b>, “морская свинка” – в тег <u>, “попугай” – в тег <em>. Перед словом “канарейка” поставьте отрывающий тег <strong> и «забудьте» поставить закрывающий. Выполните действия шага 6 и продолжайте выполнять задания, следующие за данным пунктом.
8. a) Исправьте свою «ошибку», то есть допишите закрывающий тег </strong>;
b) Первую строку документа заключите в теги <center></center>.
c) В тег <p> перед словом “собака” добавьте атрибут align=”center”.
9. a) В первой строке тела документа впишите строку “Меня зовут Маша Иванова”. Заключите ее в тег <h2></h2>, перед самим текстом напишите четыре раза (через точку с запятой) мнемонический код пробела
b) Строки “У меня дома есть животные” и “Документ составлен Ивановой М.А.” Заключите в тег <h3></h3>. В тег <h3> перед строкой “Документ составлен Ивановой М.А.” добавьте атрибут align=”right”. Выполните действия шага 6 и продолжайте выполнять задания, следующие за данным пунктом.
10. Задайте у тега <BODY> следующие атрибуты bgcolor=”green” text=”#FFFFFF”. Слово “собака” заключите в тег <font size=4 color=yellow face= Arial Cyr></font>. Выполните действия шага 6 и продолжайте выполнять задания, следующие за данным пунктом.
11. В первой строке тела документа задайте элемент <basefont size=4>. У тега font, содержащего слово “собака”, измените параметр size=+1. Выполните действия шага 6 и продолжайте выполнять задания, следующие за данным пунктом.
12. Перед строкой “Документ составлен Ивановой М.А.” вставьте разделительную линию <hr width=50 >. Выполните действия шага 6 и продолжайте выполнять задания, следующие за данным пунктом.
13. Измените атрибуты тега <hr width=50% noshade size=2 color=yellow>. Выполните действия шага 6 и покажите созданный документ преподавателю.
Практическое занятие № 2.
Создание HTML – документов в текстовом редакторе Блокнот. Работа со списками и гиперссылками.
1. Откройте текстовый редактор Блокнот (Пуск® Программы® Стандартные® Блокнот).
2. Сохраните документ с имением doc2.html в папке С:\Winnt\Profiles\Ваше_имя_пользователя (Для этого в окне сохранения файла выберете в поле тип файла пункт «Все файлы», в поле имя файла вручную введите имя и расширение).
3. Введите следующий HTML – код:
<HTML >
<HEAD>
<TITLE>Работа со списками и гиперссылками </TITLE>
</HEAD>
<BODY>
Меня зовут Маша Иванова. Я учусь в СГУ.
<p> Я должна знать следующие основные теги HTML:
</BODY>
</HTML>
4. В теле документа вставьте нумерованный список:
<ol>
<li>Структурные теги
<li>Теги форматирования
<li>Теги для работы со списками
<li>Теги для работы с гиперссылками
</ol>
5. Сохраните документ. Просмотрите его в браузере.
6. После нумерованного списка вставьте заголовок <h4>Основные структурные теги</h4> и ненумерованный список
<ul>
<li>< html >
<li>< head >
<li>< body >
</ul>.
7. Сохраните документ. Перейдите в окно браузера и обновите страницу. Проанализируйте изменения. Вернитесь в окно Блокнота.
8. После ненумерованного списка вставьте заголовок <h4>Основные форматирующие теги</h4> и ненумерованный список
<ul type=square>
<li>< p >
<li>< br >
<li>< hr >
<li>< i >
<li>< b >
<li>< u >
<li>< em >
<li>< strong >
</ul>
Выполните действия шага 7 и продолжайте выполнять задания, следующие за данным пунктом.
9. После ненумерованного списка вставьте заголовок <h4>Основные теги работы со списками</h4> и список определений
<dl>
<dt>< ol > <dd> Нумерованный список
<dt>< ul > <dd> Ненумерованный список
<dt>< li > <dd> Элемент списка
<dt>< dl > <dd> Список определений
</dl>
Выполните действия шага 7 и продолжайте выполнять задания, следующие за данным пунктом.
10. a) Создайте в документе метки: <a Name=struktur>, <a Name=format>, <a Name=list> для элементов “Основные структурные теги”, “Основные форматирующие теги”, “Основные теги работы со списками” соответственно, то есть
<a Name=struktur> <h4>Основные структурные теги </h4></a>
<a Name=format> <h4> Основные форматирующие теги </h4></a>
<a Name=list><h4> Основные теги работы со списками </h4></a>
b) Элементы нумерованного списка документа сделайте ссылками на соответствующие метки документа, то есть:
<li><a href=#struktur> Cтруктурные теги </a>
<li><a href=#format> Форматирующие теги </a>
<li><a href=#list>Теги работы со списками </a>
с) Слово СГУ сделайте ссылкой на сайт СГУ (www.sgu.ru), то есть
<a href=http:\\www.sgu.ru> СГУ</a>
Выполните действия шага 7 и продолжайте выполнять задания, следующие за данным пунктом.
11. a) В тег <body> добавьте атрибуты link=green alink=red vlink= gray
b) В тег <a>, заключающий в себя слово СГУ добавьте атрибут target=_blank
Выполните действия шага 7 и покажите созданный документ преподавателю.