Задание для самостоятельной работы
Для самостоятельной проработки материала первого урока слушателям предлагается сначала подготовить в любом текстовом редакторе три HTML-страницы.
На первой странице предлагается попробовать возможности выделения текста (italic, bold, underline), написания нескольких уровней заголовков, различные виды списков.
На второй странице предлагается представить несколько графических изображений, одно из которых будет являться ссылкой к некоторому отдельному изображению. Кроме этого, предлагается вставить в страницу видеоизображение (файл *.avi), опробовав различные параметры тега <IMG> для видеоизображений.
На третьей странице предлагается создать таблицу из нескольких строк и столбцов, а также вставить изображение с диаграммой к этой таблице. Данные предлагается взять из следующей таблицы:
Таблица 1.1. Доля отдельных развитых стран в ВВП мира (%)
| Страна | 1970 | 1980 | 1995 |
| США | 23,7 | 21,4 | 20,9 |
| Япония | 6,2 | 7,6 | 8,6 |
| Германия | 5,6 | 5,0 | 4,6 |
| Франция | 3,8 | 3,7 | 3,4 |
| Великобритания | 4,3 | 3,5 | 3,2 |
| Италия | 3,9 | 3,6 | 3,3 |
В качестве дополнительного задания в таблице предлагается применить перекрытие нескольких строк и столбцов, а также использовать графическое изображение в качестве данных одной из ячеек.
Примерные тексты первой, второй и третьей страниц приведены ниже:
Первая страница
<html>
<head>
<title>Общие сведения</title>
</head>
<body>
<h1 align="center">Язык гипертекстовой маркировки HTML</h1>
<h2>Общие сведения</h2>
<p>Среди общедоступных средств Internet для предоставления информации <b>система WWW</b> занимает особое место.
<p>Система WWW была разработана несколько лет назад в одном из крупнейших европейских центров ядерных исследований CERN (<i>EuropeanCenterforNuclearResearch, Швейцария</i>), и предназначена для объединения документов и файлов по всей сети Internet с помощью гипертекстовых связей.
<p><b><u>Язык гипертекстовой маркировки HTML</u></b> является одним из составных компонентов WWW. Он был основан на стандарте <b><i> ISO 8879-1986 SGML</i></b>.
<p> HTML позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные элементы: иллюстрации, аудио- и видео- фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.
<p>В основу гипертекстовой разметки была положена теговая модель описания документа, позволяющая представить документ в виде совокупности элементов, каждый из которых окружен тегом (управляющим HTML-кодом). По своему значению теги близки к понятию операторных скобок begin/end в универсальных языках программирования и задают области действия имен локальных переменных, определяют область действия правил интерпретации текстовых элементов документа и т.п.
<p>Документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими HTML-кодами (тегами). Каждый тег начинается с левой угловой скобки ''<'' и заканчивается правой угловой скобкой ''>''. Между скобками записывается идентификатор тега и, если необходимо, дополнительные аргументы. Все теги по их назначению и области действия можно разделить на пять основных групп:
<ol>
<li>общего назначения; </li>
<li>определения структуры текста;</li>
<li>определения атрибутов текста;</li>
<li>навигации и гипертекстовых ссылок;</li>
<li>задания специальных эффектов и форматов данных.</li>
</ol>
</body>
</html>
Вторая страница
<html> <head> <title>Животные</title> </head> <body> <h2 align="center"><u>Животные, обитающие в России</u></h2> <p>Тигр: <ahref="Tigers.jpg"><imgsrc="Tiger.jpg" width="40" heght="40"></a> Данная картинка является ссылкой! Щелкните по ней мышью и увидите... <p>Зубр: <imgsrc="Zubr.gif" border=0 align="middle" width="307" height="220"> Песец: <imgsrc="Pesec.gif" border=0 align="middle" width="408" height="160"> </body> </html>
Третья страница
<html> <head> <title>Экономика</title> </head> <body> <p> <tableborder="1" width="50%"> <captionalign="top"><i>Таблица </i> <b>Доля отдельных развитых стран в ВВП мира (%)</b></caption> <tr> <thwidth="40%">Страны</th> <thwidth="15%">1970</th> <thwidth="15%">1980</th> <thwidth="15%">1995</th> </tr> <tr> <td>США</td> <td>23,7</td> <td>21,4</td> <td>20,9</td> </tr> <tr> <td>Япония</td> <td>6,2</td> <td>7,6</td> <td>8,6</td> </tr> <tr> <td>Германия</td> <td>5,6</td> <td>5,0</td> <td>4,6</td> </tr> <tr> <td>Франция</td> <td>3,8</td> <td>3,7</td> <td>3,4</td> </tr> <tr> <td>Великобритания</td> <td>4,3</td> <td>3,5</td> <td>3,2</td> </tr> <tr> <td>Италия</td> <td>3,9</td> <td>3,6</td> <td>3,3</td> </tr> </table> </td> </tr> </table> <p><imgsrc="Diagram.gif" border=0 width="528" height="268"> </body> </html>
После этого слушателям предлагается объединить созданные HTML-страницы в единый Web-документ, создав навигационные элементы. Для этого в отдельной HTML-странице требуется создать ссылки на ранее созданные страницы, а в каждой из этих страниц - ссылки для возвращения на начальную страницу.
После этого упражнения предлагается построить Web-документ, используя фреймы (кадры). Для этого оформляется новая HTML-страница, содержащая описание кадров, а затем к ней подключаются страницы, созданные в предыдущих упражнениях.
Далее предлагается опробовать технологию карт изображений на примере UseMap. Для этого необходимо начальную страницу заменить другой страницей, содержащей графическое изображение, являющееся картой изображений. Данная карта изображений содержит некоторые элементы, которые можно сделать ссылками на различные HTML-страницы или другие элементы. В данном упражнении сделайте ссылки на три ранее созданные HTML-страницы.
