Создать на локальном диске D папку, где будут храниться созданные странички, материалы для сайта.
Создадим первую страницу нашего сайта – index.html. Для этого открыть Блокнот, набрать следующий код:

<html>

<head>

<title>Виртуальный зоопарк</title>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000D0">

<table width="980" border="3" bordercolorlight="#00CC30" bordercolordark="#00CC30" align="center" height="150">

<tr>

<td width="966" bgcolor="#CCFFCC" colspan="3" height="125">

<div align="center" style="width: 955; height: 125">

</h1>

<p><font color="#336633">Знаете ли вы, что <i><b>слон - ловок и осторожен</b></i>,

домашний <i><b>верблюд - коварен</b></i> и может сыграть с вами злую

шутку, а <i><b>у медведя есть тайное имя</b></i> ? Если нет, то вы хорошо

проведете у нас время. Здесь есть фотографии и шутливые рисунки, интересные

факты и анекдоты из жизни "братьев наших меньших ".</font> </p>

</div>

</td>

</tr>

<tr>

<td width="315" bgcolor="#CCFFCC" align="center" height="13">

<a href="camel.htm">ВЕРБЛЮД</a>

</td>

<td width="349" bgcolor="#99CC66" align="center" height="13">

<a href="bear.htm">МЕДВЕДЬ</a><font color="#306830"> </font>

</td>

<td width="290" bgcolor="#CCFFCC" align="center" height="13">

<a href="elephant.htm">СЛОН</a>

</td>

</tr>

</table>

</body>

</html>

Сохранить полученный документ под именем index.html в созданной папке (файл-сохранить как-имя файла - index.html - тип файла – все файлы)
Просмотреть полученную страничку.
Изменить цвет фона на любой другой, изменить цвет букв надписи ВИРТУАЛЬНЫЙ ЗООПАРК.
Создадим вторую страничку – camel.html (страничка про верблюда). Для этого откроем новый блокнот и наберём следующий код:

<html>

<head>

<title>Верблюд</title>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000D0" background="fon.png">

<h1 align="center"><font color="#999900">ВЕРБЛЮД</font></h1>

<p align="left"><font color="#336633"> <img src="camel_foto.gif" width="183" height="203" align="left" alt="Фотография верблюда">Гордый

<a href="camel_shutka.htm">верблюд</a>, настолько гордый, что готов оплевать

любого, кто рискнет его унизить. А плевочек у него не маленький - с полведра.

Так что советуем не испытывать его терпения. Рост у него тоже хороший

- около 3,6 м. Этим, с выгодой для себя, пользуются египетские погонщики

верблюдов, предлагающие туристам сфотографироваться на экзотическом животном.

Как только турист садится на "корабль пустыни", тот сразу встает. Немногие

рискуют спрыгнуть с такой высоты - приходится раскошеливаться... </font></p>

<font color="#336633">[ </font><a href="index.htm#metka">К началу</a>

<font color="#336633">]</font> </p>

<p>  </p>

</body>

</html>

Скопировать в Вашу папку рисунки, на которые идут ссылки в данном коде, с сервера (сетевое окружение – отобразить компьютеры рабочей группы – SERVER – зоопарк). В противном случае ни один рисунок не отобразится!!! Сохранить аналогично первой странице.
Создадим 3 страницу – шутка про верблюда.

В блокноте набираем

<html>

<head>

<title>Шутка про верблюда</title>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000D0" background ="fon.png">

<h1 align="center"><font color="#999900">Шутка про верблюда</font></h1>

<p align="center"><img src="camel_ris.gif" width="156" height="169" alt="Рисунок верблюда"></p>

<p align="left"><font color="#336633">Идет экскурсия в музее. Экскурсовод

останавливается перед картиной: - Перед вами картина "Семь верблюдов".

Первый верблюд смотрит вдаль. Второй верблюд смотрит в затылок первому,

третий верблюд смотрит в затылок второму, четвертый верблюд смотрит в

затылок третьему, пятый верблюд смотрит в затылок четвертому, шестой верблюд

смотрит в затылок пятому, седьмой верблюд смотрит в затылок шестому. Шестой

верблюд смотрит в затылок пятому, пятый верблюд смотрит в затылок четвертому,

четвертый смотрит в затылок третьему, третий смотрит в затылок второму,

второй смотрит в затылок первому, первый верблюд смотрит вдаль... А теперь

переходим к картине "33 богатыря"... </font></p>

<font color="#336633">[ <a href="camel.htm#metka">Назад</a> ] [ </font><a href="index.htm#metka">К

началу</a> <font color="#336633">]</font> </p>

<p>  </p>

</body>

</html>

Сохраняем под именем camel_shutka.html.

Создать аналогичным образом ещё 4 страницы, указанные в структуре. Тексты для страниц находятся в файле Zoo.txt. Внимательно следите за правильностью написания ссылок, адресов, тэгов.
Сдать работу преподавателю. Желаю Вам успехов!

Административная контрольная работа по теме «Язык HTML».

Вариант 1.

1. Расширение для файлов, содержащих html-документ.

2. Что такое атрибут?

3. Элемент, определяющий тело документа.

4. Атрибут элемента <body>, задающий цвет фона

5. Атрибут элемента <body>, задающий цвет непосещённых гиперссылок

6. Заголовок 1-го уровня указывается тэгом…

7. Курсив задаётся тэгом…

8. Для задания названия шрифта (например, ARIAL) используется атрибут … элемента …

9. Переход на следующую строку при форматировании текста осуществляется с помощью элемента…

10. Выравнивание абзаца по левому краю осуществляется с помощью следующего кода:

11. Для задания типа маркера используется атрибут…элемента…

12. Маркированный список задаётся следующими элементами:

13. Для создания гиперссылки в форме текста (текст-гиперссылка) необходимо набрать следующие команды:

14. Для вставки картинки на страничку используется элемент…

15. Для выравнивания картинки используется атрибут…элемента…

16. Для задания высоты картинки используется атрибут…элемента…

17. Элемент, задающий таблицу

18. Значение атрибута…элемента…выравнивающего картинку по левому краю =

19. Элемент, задающий столбцы таблицы

20. Атрибут элемента <table>, указывающий положение таблицы

21. Атрибут элемента <td>, указывающий количество строк для слияния

22. Атрибут элемента <table>, указывающий толщину внешней границы таблицы

23. Написать html-код для построения следующей таблицы:

1	4
2	5
3	6

24. Написать html-код для странички Контрольная работа по информатике, содержащую заголовок Контрольная работа, напечатанный зелёным шрифтом, изображение компьютера (файл computer.jpeg), вопросы Вашего билета в форме маркированного списка (3 вопроса) и гиперссылку на ресурс www.rambler.ru.

25. Отметьте синтаксически неправильный вариант:

1) <a href='start.htm'>

2) <a href="start.htm">

3) <a href="../start.htm">

26. Отметьте синтаксически правильный вариант:

1) <img src="cat.gif">

2) <img><src="cat.gif">

3) <img scr="cat.gif">

4) <img scr="cat.gif" alt="кошка">

27. Какого атрибута нет у тега <body>?

1. Background

2. Bgcolor

3. Link

4. Xlink

5. Text

6. atext

Практическая работа

Работа с каскадными таблицами стилей

Цель работы: Освоить основные положения CSS.

Задание 1. На рис. приведено изображение HTML-документа. Ниже приведен текст данного документа. Ввести данный текст. Посмотреть, как будет изменяться отображение документа, при изменении значений таблиц стилей.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Пример с CSS</title>

<!--

font-size:26pt;

font-family: 'comic sans MS', 'fantasy';

color:maroon;

}

-->

</style>

</head>

<body>

<p>Параграф отформатированный с помощью CSS.</p>

</body>

</html>

Задание 2. На рис. приведено изображение HTML-документа. Ниже приведен текст данного документа. Ввести данный текст. Посмотреть, как будет изменяться отображение документа, при изменении значений таблиц стилей.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Использование class</title>

<!--

font-size:16pt;

font-family:'comic sans MS', 'fantasy';

color:maroon;

}

.bigsans{

font-size:24pt;

font-family:arial,sans-serif;

color:blue;

}

-->

</style>

</head>

<body>

<p>Это первый параграф</p>

<p class="bigsans">Это второй параграф, использующий селектор class</p>

</body>

</html>

Задание 3. На рис. приведено изображение HTML-документа. Ниже приведен текст данного документа. Ввести данный текст. Посмотреть, как будет изменяться отображение документа, при изменении значений таблиц стилей.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Использование стиля</title>

</head>

Это параграф имеет размер шрифта - 16 pt, цвет - blue, имя шрифта - arial.

</div>

<div>

Этот параграф отображается с помощью значений, установленных в браузере по умолчанию.

</div>

Это параграф имеет размер шрифта - 18 pt, цвет - yellow, имя шрифта - courier new. Он отображается на синем фоне.

</div>

Этот параграф отображается с помощью значений, установленных в браузере по умолчанию на фоне - yellow с полями вокруг = 24pt.

</div>

<div>

Этот параграф отображается с помощью значений, установленных в браузере по умолчанию.

</div>

</body>

</html>

Задание 4. Создать HTML-документ с использованием внешней таблицы стилей, который при отображении имеет подобный вид.

В Microsoft Word теперь реализована возможность сохранять документы в формате XML, таким образом можно разделить содержимое документа и границы его двоичного формата (.doc). Содержимое становится доступным для процессов автоматического сбора и анализа данных с последующей корректировкой. Содержимое легко искать и даже изменять отличными от Microsoft Word процессами, например серверной обработкой данных.

Кроме того, при использовании Microsoft Office Professional версия 2003 или отдельно Microsoft Office Word 2003 можно присоединить XML-схемы к любому документу, используя вкладку XML-схема диалогового окна Шаблоны и надстройки. Требуется задать имя файла схемы и, при необходимости, — проверку соответствия правилам схемы в Microsoft Word.

Затем, используйте область задач Структура XML для применения XML-тегов и просмотра разметки XML в документе.

Примечание: Пример подключения внешней таблицы стилей.

<head>

<title>Использование внешней таблицы стилей</title>

</head>

Задание 5. Создать HTML-документ с использованием внешней таблицы стилей, который при отображении имеет подобный вид.

Поддержка устройств ввода рукописных данных

Используя устройства ввода рукописных данных (например, планшетный ПК (Tablet PC) и планшетное перо), можно вводить рукописный текст. Кроме того, в Microsoft Office Word 2003 будут доступны следующие возможности.

· Внесение в документ пометок в виде рукописных заметок и примечаний.

· Включение рукописного содержания в документ Word.

· Отправка рукописных сообщений по электронной почте при помощи функции WordMail в Microsoft Outlook.

Задание 6. Создать HTML-документ с использованием внешней таблицы стилей, который при отображении имеет подобный вид.

Создание брошюры

Наилучшим способом для создания брошюры является использование нового чистого документа. Это позволяет избежать трудностей при расположении текста, графических и прочих элементов. В брошюру можно преобразовать и существующий документ, но при этом может возникнуть необходимость перемещения ряда элементов.

1. Создайте новый документ.

2. Выберите в меню Файл команду Параметры страницы, а затем откройте вкладку Поля.

3. В списке Несколько страниц выберите пункт Брошюра.

Если документ имеет книжную ориентацию, она будет заменена на альбомную.

4. В списках Правое и Левое выберите (или введите) размер правого и левого полей документа.

Если в брошюру необходимо добавить дополнительные пробелы для размещения переплета, то введите или выберите необходимое количество в поле Переплет.

5. В списке число страниц в брошюре выберите число страниц в брошюре.

Если количество страниц в документе превышает количество страниц в брошюре, документ будет распечатан в виде нескольких брошюр.

6. Установите другие необходимые параметры в окне Параметры страницы.

7. Текст, графика, колонтитулы и другие элементы добавляются в документ как обычно.