Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид

Лабораторная работа № 1

ВвЕДЕНИЕ В НTML

Предисловие

Язык html - язык публикаций во Всемирной паутине WWW глобальной сети Internet. Создаваемые с помощью этого языка web-страницы или web-сайты (наборы web-страниц одного автора) могут быть просмотрены на любом компьютере, подключенном к Internet, независимо от аппаратного и программного обеспечения этого компьютера.

Web-страницы просматриваются с помощью программ браузеров, которыми оснащаются компьютеры, подключаемые к Internet. К наиболее распространенным браузерам относятся браузер Internet Explorer, разработанный фирмой Microsoft, и браузер Netscape Navigator фирмы Netscape.

Язык html включает в себя определенный набор элементов. Элементы заключаются в угловые скобки-теги. Различают стартовые <элемент> и конечные </элемент> теги. У конечного тега перед элементом в угловых скобках помещается наклонная черта. Теги определяют границы действия элементов и отделяют элементы друг от друга.

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

Любая web страница начинается со стартового тега <html> и заканчивается конечным тегом</html>.

Web-страница, или html-документ, состоят из двух частей - заголовочной части и тела документа.

Область заголовка документа располагается между стартовым тегом <head> и конечным тегом </head>.

Тело документа размещается между стартовым тегом <body>и конечным тегом </body>. Итак, общая структура html-документа имеет вид:

<html>

<head>

<title>Название документа</title>

<head>

<body>

Тело документа

</body>

</html>

Элемент <title>…</title> в заголовочной части используется для размещения заголовка web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в строке заголовка браузера.

Файл web-страницы можно создать следующими способами.

Если на вашем компьютере установлен текстовый процессор Word 97 или Word 2003, то откройте эту программу и сразу же задайте команду «Сохранить как» в меню «Файл». В открывшемся диалоговом окне «Сохранение документа» в поле ввода «Тип файла» нужно выбрать значение «Документ html». После щелчка по кнопке «Сохранить»» будет создан файл в указанную в поле ввода «Папка» папку и под тем именем, которое будет указано в поле ввода «Имя файла».

Щелкните правой кнопкой мыши на свободном месте рабочего стола. В появившемся контекстном меню выберите команду «Документ HTML».

Щелкните правой кнопкой мыши на свободном месте рабочего стола. В появившемся контекстном меню (при отсутствии команды «Документ HTML») выбирается команда «Текстовый документ». На рабочем столе появится значок файла текстового редактора «Блокнот». Выполните на этом значке щелчок правой кнопкой мыши. В открывшемся контекстном меню выберите команду «Переименовать». Затем выведите с клавиатуры имя файла с расширением имени html и нажмите клавишу Enter. Появится диалоговое окно «Переименование» с предостережением: «После смены расширения имени файла этот файл может оказаться недоступным. Изменить расширение?». Щелкните кнопку «Да» в этом диалоговом окне. Обратите внимание на изменение вида значка у созданного файла - это уже файл html-страницы.

Для открытия созданного файла web-страницы в браузере выполните двойной щелчок мышью на значке этого файла. Вполне естественно, что при этом окно документа браузера будет пустым - появится только заголовок открытого файла в строке заголовка.

При создании web-страницы мы будем пользоваться, в основном, только двумя командами браузера - командами «Источник» и «Обновить». Обе команды задаются из меню «Вид».

При задании команды «Источник» откроется окно редактора web-страницы с исходным текстом html документа.

Если вы открыли пустой файл, созданный с помощью редактора Word, то в режиме «Источник» в окне редактора вы увидите следующую информацию:

<HTML>

<HEAD>

<META HTTP-EQUIV= “Content - Type” CONTENT= “text/html;

charset=windows-1251”>

</HEAD>

<BODY>

</HTML>

В данном случае Word уже практически заполнил за вас заголовочную часть web-страницы. Пока не вчитывайтесь в представленную на экране информацию. В тегах <meta> содержится некоторая служебная информация (указание названия приложения, с помощью которого был создан файл, описание типа и характеристик web-страницы, ее краткого описания содержания и т.д.). Вам остается заполнить только тело документа после уже введенного стартового тега <body>. Вполне естественно, что вам не потребуется ввод и конечных тегов </body> и </html>, поскольку они также уже введены.

По окончании ввода html-документа в окне редактора задайте команду «Сохранить» из меню «Файл». Затем окно редактора закройте командой «Выход» из меню «Файл». Для просмотра введенной html-страницы в окне браузера введите команду «Обновить» из меню «Вид».

Если вы создали пустой файл html-документа вторым способом - с помощью команды «Документ HTML» из контекстного меню, то при открытии этого файла в режиме браузера «Источник» в окне редактора будут введены только стартовый и конечный теги элемента html.

Наконец, если создан пустой файл html документа третьим способом - способом смены расширения имени файла, то при открытии этого файла в браузере в режиме «Источник» окно редактора будет пусто. То есть в этом случае надо будет вводить html-документ полностью, начиная со стартового тега <html>.

Данная лабораторная работа состоит из двух частей. В первой части представлен набор упражнений для отработки навыков составления html-документов. Во второй части представлены справочные данные по языку html.

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

Подготовительные операции.

Создайте в папке «Диск С:» новую папку «web-страницы», в которой вы будете постепенно накапливать результаты экспериментов при выполнения представленных упражнений. Откройте папку «Мой компьютер». Откроите папку «Диск С:». Выполните на свободном месте в окне открытой папки «Диск С:» щелчок правой кнопкой мыши. В открывшемся контекстном меню выберите команду «Создать»», а в открывшемся подменю - команду «Папка». Введите с клавиатуры в поле ввода появившегося значка новой папки название папки «web-страницы» и нажмите клавишу Enter.

На рабочем столе и в папке «web-страницы» создайте графические файлы рисунка и фонового узора в формате .gif или .jpg.

Это, например, можно сделать так. Откройте редактор Word. Задайте в программном окне Word команду «Рисунок» из меню «Вставка», и в открывшемся подменю - команду «Из файла». В диалоговом окне «Вставка рисунка» выберите папку «Popular» (она находится в папке «Clipart»). В окне Popular выделите подсветкой один из представленных графических файлов (например, графический файл Agrce.wmf) и щелкните кнопку «Добавить». В итоге в окно документа Word вы вставите соответствующий рисунок. Сохраните теперь этот документ с вставленным рисунком в файле непосредственно на рабочем столе, задав тип файла «Документ HTML». Вы увидите, что наряду с созданным файлом в формате html редактор Word сформирует и графический файл вставленного рисунка в формате .gif присвоив ему имя image1. Выделите подсветкой значок этого файла и комбинацией клавиш Ctrl-C скопируйте этот файл в буфер обмена. Затем откройте созданную в предыдущем упражнении папку «web- страницы» и в окне этой папки задайте команду «Вставить»» из меню «Правка».

Точно такую же процедуру выполните и при создании графического файла для фонового узора. В окне Word задайте команду вставки рисунка из файла, но в данном случае укажите в диалоговом окне «Вставка рисунка» папку «windows’», а в ней - один из графических файлов фоновых уборов (например, файл «Орнамент.bmp»). И в этом случае, при сохранении документа в формате html, Word преобразует вставленный графический файл из формата .bmp в формат .gif, присвоив имя файлу image2. Скопируйте и этот файл в папку «web- страницы».

Примечание. Если на нашем компьютере установлен один из графических редакторов, поддерживающих формат .gif (например, PhotoFinish 3.0), то можно поступить еще проще - открыть в окне этого редактора рисунок или фоновый узор в одном формате, а затем его же сохранить в файле, но уже в формате jpg.

Бегущая строка на html-странице

Для создания бегущей строки щелкните правой кнопкой мыши на свободном месте рабочего стола, выберите в открывшемся контекстном меню команду… <html> <head>

Заголовки в html-страницах

Создайте html-страницу следующего вида: <html> <head>

Горизонтальная линия

Вставьте в текст html-документа «Заголовки» после стартового тега body элемент <hr>. Сохраните сделанное изменение в файле и просмотрите… Добавьте в элемент hr атрибут color= “red” для преобразования этой… Измените толщину нижней горизонтальной линии, включив в состав нижнего тега hr атрибут size=50.

Изменение общего дизайна html-страницы

Оформите фон страницы синим цветом, а цвет букв в строках заголовков оформите желтым цветом. Для этого в состав стартового тега body включите… <body bgcolor= “#0000ff” text= “#ffff00”> Проведите соответствующие эксперименты с html-страницей «Заголовки».

Форматирование абзацев

Создайте новый файл html-страницы. В этот файл введите отрывок из рассказа М.Зощенко «Собачий нюх»: <html> <head>

Вставка изображений

Вставьте в html-документ «Абзацы» графический файл Image1.gif из папки «Internet». Для этого перед конечным тегом </body> этого документа вставьте строку

<img src= “file:c:Internet|Image.gif”>.

Списки

Маркированные списки. Создайте новый html-файл следующего содержания:

<html>

<head>

<title>СПИСКИ</title>

</head>

<body>

<h2>МАРКИРОВАННЫЙ СПИСОК</h2>

<h3>На нашем огороде росли:</h3>

<ul>

<li>огурцы;

<li>помидоры;

<li>укроп.

</ul>

</body>

</html>

Откройте этот документ в окне браузера.

Нумерованные списки. В режиме «Источник» дополните предыдущий html- документ фрагментом:

<h2>Нумерованный список</h2>

<h3>Мои ближайшие планы:</h3>

<li>Написать статью в журнал;

<li>Посетить художественный музей;

<li>Подготовить к изданию сборник упражнений.

</ol>

Этот фрагмент должен находиться между конечными тегами </ul> и <body>. Просмотрите обновленный вариант документа.

Проведите эксперименты с нумерованным списком, задав разные способы нумерации при помощи атрибута type: type=“i” (нумерация римскими строчными символами), tуре=“I” (нумерация римскими прописными символами), type=“a” (нумерация латинскими строчными буквами) и type=“А” (нумерация латинскими прописными буквами).

Вложенные списки. Дополните html-документ еще одним фрагментом:

<h2>Вложенные списки</h2>

<h3>Мои планы на 2001 год:</h3>

<ul>

<li>В первом полугодии:

<li> Прочитать рассказ И.С. Тургенева «Му-Му»;

<li>Сходить с женой на рынок.

</ol>

<li>Во втором полугодии:

<li>Прочитать поэму Н.А. Некрасова «Мороз – красный нос»;

<li>Сходить в кинотеатр.

</ol>

<ul>

Таблицы

Создайте еще один файл под общим названием «Таблицы.html». Создайте в этом файле следующую html- страницу: <html> <head>

Гиперссылки

Создайте новый файл html-документа следующего вида:

<html>

<head>

<title>Лабораторная работа по WWW</title>

</head>

<body>

<h1> ЛАБОРАТОРНАЯ РАБОТА</h1>

<h2><u>СОДЕРЖАНИЕ:</u></h2>

Бегущая строка</A>

Заголовки </A>

Абзац</A>

Списки</A>

Таблицы</A>

</body>

</html>

Откройте этот документ в браузере. Выполните переход к выбранному разделу щелчком мышью по соответствующему разделу (пусть это будет раздел «Бегущая строка»).

Видоизмените html-страницу:

<html>

<head>

<title> ЛАБОРАТОРНАЯ РАБОТА ПО WWW</title>

</head>

<body>

<h1> ЛАБОРАТОРНАЯ РАБОТА </h1>

<h2><u>СОДЕРЖАНИЕ:</u></h2>

<p>Перейти к разделу

Бегущая строка</A>

<p>Перейти к разделу

Заголовки </A>

<p>Перейти к разделу

Абзац</A>

<p>Перейти к разделу

Списки</A>

<p>Перейти к разделу

Таблицы</A>

</body>

</html>

В режиме «Источник» добавьте в текст html-страницы «Бегущая строка» перед конечным тегом </body> следующие строки:

В обновленной странице щелкните мышью на появившемся рисунке, и вы опять вернетесь на страницу с оглавлением работы.

Аналогичным образом создайте рисунки для гиперссылок и в других разделах выпускной работы для возвращения в оглавление из любого раздела.

В режиме источника в html-странице «Таблицы» сразу после стартового тега <body> вставьте метку переходи вида:

Перед конечным тегом </body> той же страницы введите следующую конструкцию для перехода к установленной метке:

<a href= “Метка1”>Переход в начало страницы</a>

Создайте на html-странице «Таблицы» описанным выше способом несколько меток (“”Метка2", «Метка3» и так далее) для организации переходов внутри этого документа. Сам переход к различным частям документа оформите в виде следующего «оглавления»:

<p>Переход к<a href= “#Метка2”>разделу А</a></p>

<p>Переход к<a href= “#Метка3”>разделу Б</a></p>,

где «Раздел А» и «Раздел Б» - названия соответствующий разделов страницы.

Карты

На рабочем столе Windows находится созданный заранее графический файл Fish.jpg с изображением золотой рыбки. У этой рыбки глаз имеет координаты 269, 119. Сделаем глаз этой рыбки (круг радиуса R=20 с координатами центра 269, 119) в качестве гиперссылки для перехода к файлу та6лицы.html.

Откройте html-страницу с оглавлением выпускной работы (выпускная работа.html) и в режиме источника дополните эту страницу следующим фрагментом:

<area alt= “круг” shape= “circle”

coords= “269,119,20” href= “file://c:windowsРабочий столтаблицы.html”>

</map>

Сохраните сделанные изменения в файле и просмотрите обновленный вид html-страницы. Подведите указатель мыши к глазу рыбки, и вы увидите, что указатель мыши превратится в указующий перст, а в строке состояния браузера полный путь для перехода. Щелкните мышью по глазу рыбки, и вы перейдете к разделу «Таблицы». Для возвращения в оглавление щелкните кнопку «Назад» на панели инструментов браузера.

Воспользуемся другими частями изображения рыбки для организации переходов к различным разделам лабораторной работы. Так, например, область нижнего плавничка (прямоугольник с координатами 163,121,220,155) можно использовать для перехода к файлу списки.html, а хвост рыбки, описываемый многоугольником с координатами вершин 23,44,146,37,174,63,174,89,96,124,31,53, - для перехода к файлу абзац.html. В итоге, фрагмент страницы с переходами к трем разделам выпускной работы будет иметь вид:

<area alt= “круг” shape= “circle”

coords= “269,119,20” href= “file://c:windowsРабочий столтаблицы.html”>

<area alt= “прямоугольник” shape= “rect”

coords= “163,121,220,155” href= “file://c:windowsРабочий столсписки.html”>

<area alt= “многоугольник” shape= “poly”

coords= “23,44,146,37,174,89,96,124,31,53” href= “file://c:windowsРабочий столабзац.html”>

</map>

Проведите соответствующие эксперименты с обновленным вариантом html-страницы.

Использование карты дня организация переходов внутри страницы. Вставьте сразу же после стартового тега <body> метку для перехода:

В фрагменте:

<area alt= “прямоугольник” shape= “rect”

coords= “163,121,220,155” href= “file://c:windowsРабочий столсписки.html”>

затем в атрибуте href измените ссылку - не на файл, а на метку. Поэкспериментируйте и с этим вариантом html-страницы.

Формы

Создание полей ввода. Создайте новый файл html-страницы следующего вида:

<html>

<head>

<title>Формы</title>

</head>

<body>

<h2>Формы</h2>

<h3>Поля ввода</h3>

<p><b><u>Фамилия</u></b>

</body>

</html>

Откройте созданный файл в окне браузера.

Модернизируйте созданную html-страницу, включив в тег input атрибут value=”Фамилия И.О.” Просмотрите обновленный вариант страницы.

Флажки. Дополните созданную в предыдущем упражнении страницу «Формы» следующим фрагментом:

<hr>

<h3>Флажки</h3>

<p><b><u>Пол:<input type= “checkbox”> «Мужской»

<input type= “checkbox”> «Женский»

и проведите эксперименты с дополненной страницей.

Переключатели. Добавьте в html-страницу «Формы» следующий фрагмент:

<hr>

<h3>Переключатели</h3>

<p><b><u>Варианты действий:</u></b>

Просмотрите обновленный вариант страницы.

Создание отдельных кнопок. Добавьте на страницу «Формы» фрагмент для построения трех типов кнопок - кнопки с рисунком, кнопки Enter для подтверждения ввода информации в форму и кнопки Reset для отмены ввода данных в форму.

<hr>

<h3>Отдельные кнопки</h3>

<hr>

Создание элемента «Список”. Дополните страницу «Формы» следующим фрагментом:

<hr>

<h3>Списки</h3>

<h3>Ваша профессия:

<option value=a>Инженер

<option value=b>Учитель

<option value=c>Врач

<option value=d>Ученый

</select></h3>

Создание областей для ввода текста. Дополните страницу «Формы» следующим фрагментом:

<hr>

<h2>Область ввода</h2>

<h3>Примечание:

Область для ввода текста.

</textarea>

</h3>

Здесь экономится место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.

Фреймы

Деление области просмотра по вертикали пополам. Создайте новый файл с именем Фреймы.html следующего содержания:

<html>

<head>

<title>Фреймы</title>

</head>

<body>

</frameset>

</body></html>

Деление области просмотра по горизонтали. Видоизмените файл Фреймы.html к следующему виду:

<html>

<head>

<title>Фреймы</title>

</head>

<body>

</firameset>

</body></html>

Примечание. В данном примере для верхней горизонтальной области отведено 150 пикселов, для средней- тридцать процентов, а для нижней - все, что останется.

Деление области просмотра и по горизонтали, и по вертикали. Еще раз видоизмените файл Фреймы.html:

<html>

<head>

<title>Фреймы</title>

</head>

<center><font size=6>ФРЕЙМЫ</font></center>

</frameset>

</frameset>

</body>

</html>

Приложение 1. Название и коды цветов