Название: сетевые информационные технологии (Н.Э. Унру)

Жанр: Информатика

Просмотров: 1245


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

 

Подготовка текстового документа

в формате HTML

 

ЦЕЛЬ РАБОТЫ

 

Изучение языка разметки гипертекста HTML и создание web-страницы

 

1.  ПОЯСНЕНИЯ К РАБОТЕ

 

Универсальный язык разметки гипертекста html (hyper text markup language) нашёл самое широкое распространение для представления в www (world wide web) web-страниц, электронных книг, презентаций и др.

Html не является языком программирования, так как он не содержит команд – главной компоненты любого языка программирования. Файлы с html-кодом представляют собой обычные текстовые файлы, которые может прочитать как человек, так и компьютер. Благодаря этому, разрабатывать Web-страницы можно в любой операционной системе, используя разнообразные приложения (Word, Far, NotePad, Windows Commander и др.).

Для просмотра Web-страниц, написанных на html, могут использоваться, например, браузеры типов Internet Explorer, Netscape Navigator или Opera. Для того чтобы браузер воспринимал содержимое текстового файла как html-код, его расширение должно быть .html или .htm.

Гипертекстовый документ состоит из заголовка head и тела body документа. Ниже на рис.1 приведён пример простейшего гипертекста и соответствующая ему web-страница.

Html является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый

из которых начинается и заканчивается тегами, т.е. документ html представляет собой обычный АSСII-файл, с добавленными в него управляющими html−кодами (тегами). Текст тега заключается в угловые скобки ("<" и ">").

 

 

Рис. 1. Гипертекст и соответствующая ему web-страница

 

Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые для изменения функции тега. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута – одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Universe Resource Locator − унифицированный указатель ресурса), других документов в качестве значения атрибута href.

Чаще всего элементы разметки html или html−контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта – курсив <i> закрывающая пара представляет собой </i>, а для тега заголовка <title> закрывающей парой будет </title>). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок «begin/end» в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.

Все теги html по их назначению и области действия можно разделить на следующие основные группы:

определяющие структуру документа;

оформление блоков гипертекста (параграфы, списки, таблицы, картинки);

гипертекстовые ссылки и закладки;

формы для организации диалога;

вызов программ.

Рассмотрим синтаксис тегов некоторых из перечисленных групп.

Теги, определяющие структуру документа:

1. <html> …Вся страница html… </html>. Этими двумя тегами должна начинаться и заканчиваться web-страница.

2. <head> …Заголовок… </head>. Заголовок html−документа является необязательным элементом разметки. В него включают тег <title> и др.

3. <title> …Имя… </title>. Элемент разметки title служит для именования документа в World Wide Web и является необязательным элементом разметки. Роботы многих поисковых систем используют содержание элемента title  для создания поискового образа документа. Слова из title попадают в индекс поисковой системы. Из этих соображений элемент title всегда рекомендуется использовать на страницах web-страницы.

4. <body> …Содержимое html страницы… </body>. Между этими двумя тегами располагается всё, что будет отображено на web-странице. Среди атрибутов тега <body> следует упомянуть bgcolor, который применяется для задания фона web-страницы. Он может, например, принимать значения: aqua, black, blue, gray, green, fuchsia, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow и др.

Теги, оформляющие блоки гипертекста:

1. <p> …Содержимое абзаца… </p>. Создаётся абзац с пробелами до и после. Использовать закрывающий тег не обязательно, но рекомендуется. У тега <p> может быть всего один, отвечающий за выравнивание текста, аргумент Align, который принимает одно из четырёх значений: Left, Right, Center или Justify.

2. <h1> …Заголовок… </h1> − <h6> …Заголовок… </h6>. Этот тег делает заголовок жирным. Заголовки уровня 1 – больше, а заголовки уровня 6 – меньше, чем обычный текст. У этого тега может также быть всего один, отвечающий за выравнивание текста, аргумент Align (выравнивание). Align может принимать одно из следующих значений:

– left − выравнивание текста по левому краю (по умолчанию);

– right − выравнивание текста по правому краю;

– center − выравнивание текста по центру.

3. <br> − разрыв текущей строки и переход на следующую. Это одиночный тег.

4. <nobr> …Текст… </nobr> − не даёт возможность браузеру разрывать Текст. Если Текст не умещается на экране, то посетителю web-страницы придётся воспользоваться полосой прокрутки; если текст не умещается в колонке, то она расширяется.

5. <font> …Текст… </font > − устанавливает гарнитуру (шрифт), его цвет и размер шрифта для Текст. Для установления шрифта используется атрибут face. Для задания цвета используют атрибут с форматом color=#RRGGBB (от английских слов Red, Green, Blue), где RR, GG и BB − шестнадцатеричные числа, обозначают яркости каждой составляющей. Вторая форма записи атрибута проще: color = Color, где Color − одно из слов английского языка, обозначающего цвет.  Размер указывается цифрами от 1 до 7 − для этого применяют атрибут size. По умолчанию обычно стоит 3. Пример. < font size = 6 face = Arial color = #0000ff > Структура гипертекстовой сети < /font >.

6. <b> …Текст… </b> или <strong> …Текст… </strong> − пишет Текст жирно.

7. <i> …Текст… </i> или <em> …Текст… </em> − пишет Текст наклонно.

8. <u> …Текст… </u> − подчёркивает Текст.

9. <hr> − отображает горизонтальную линию поперёк текста.

10. <!-- …Текст… --> − браузер рассматривает Текст как комментарий и не выводит его на экран.

11. <ol> …Список… </ol>, <li> …Элемент списка… </li>. Эти две пары тегов отображают нумерованный список. У тега <ol> могут быть два атрибута: start и type. Первый из них задает первый номер списка (по умолчанию 1), а второй – выбирает систему нумерации (возможные значения: A – большими латинскими буквами, a – малыми латинскими буквами, I – большими римскими цифрами, i – малыми римскими цифрами, 1 – арабскими цифрами).

12. <ul> …Список… </ul>, <li> …Элемент списка… </li>. Эти две пары тегов отображают маркированный список. У тега <ul> может быть только один атрибут − type. Он может принимать одно из трёх значений: circle, disc и square.

13. <img> − отображает рисунок формата GIF, JPEG или PNG. Тег имеет следующие атрибуты:

– src − его значение задаёт имя файла, в котором находится изображение, и путь к нему. Задавая путь, нужно руководствоваться правилами, принятыми для записи URL. В частности, имена папок и файлов разделяются прямыми косыми чертами, а строчные и прописные буквы различаются;

– width и height − определяют высоту и ширину изображения в пикселях или процентах от размера окна (в последнем случае надо указывать символ \%);

– align − используется для выравнивания картинки относительно текста по горизонтали (значения left и right) и вертикали (значения: absbottom, absmiddle, baseline, bottom, middle, texttop и top). Для отмены обтекания изображения текстом применяют тег <br> с атрибутом clear, который может принимать значения: right, left и all;

– alt − используется для снабжения изображений комментирующими надписями, которые появляются рядом с указателем мыши, наведённым на изображение;

– border − определяет толщину чёрной рамки картинки в пикселях (по умолчанию толщина равна 2);

– hspace и vspace − определяют горизонтальный и вертикальный отступы между изображением и текстом в пикселях.

14. <table> …Таблица…</table> − создают таблицу. Таблица состоит из строк, а строки состоят из столбцов. Тег <table> имеет следующие атрибуты:

– align − определяет горизонтальное выравнивание таблицы относительно окна;

– bgcolor − определяет цвет фона;

– border − определяет толщину рамки в пикселях (по умолчанию 0);

– bordercolor − определяет цвет рамки;

– cellpadding − определяет расстояние между рамкой и содержимым ячейки таблицы в пикселях;

– cellspacing − определяет расстояние между рамками ячеек;

– height – определяет минимальную высоту таблицы;

– width – определяет минимальную ширину таблицы.

15. <caption> …Заголовок таблицы… </caption> − добавляют к таблице её заголовок.

16. <tr> …Содержимое строки…  </tr> − задают содержимое строки. Тег имеет следующие атрибуты: align, bgcolor, bordercolor, height, width и др. Перечисленные атрибуты выполняют те же функции, что и для тега <table>, но уже для строки таблицы.

17. <td> …Содержимое столбца… </td> − задают содержимое столбца. Тег имеет следующие атрибуты: align, bgcolor, bordercolor, height, width и др. Перечисленные атрибуты выполняют те же функции, что и для тега <table>, но уже для ячейки таблицы. Атрибуты colspan и rowspan позволяют объединять столбцы и строки соответственно.

Пример использования тегов <table> - </table>, <caption> - </caption>, <tr> - </tr> и <td> - </td> показан ниже на рис. 2.

Теги, обеспечивающие гиперссылки:

1. <a> …Гиперссылка… </a> − обеспечивает гиперссылку на другую страницу или файл. Пример. <a href=second.htm>Запустите второй html-документ</a> − отображается подчёркнутая гиперссылка (Запустите второй html-документ) на Web-страницу с названием second.htm в том же каталоге.

 

 

Рис. 2. Гипертекст с таблицей и соответствующая

ему web-страница

 

Пример того, как работают рассмотренные выше теги, может дать рис. 3.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка − это адрес другого HTML−документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена. Абзац выделяется не «красной строкой», а большими интервалами между строками.

 

 

Рис. 3. Гипертекст и соответствующая ему web-страница

2.  АППАРАТНОЕ И ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

 

1. ПЭВМ класса IBM PC или выше.

2. Браузер типа Internet Explorer или Opera.

3. Текстовый редактор типа Far, Блокнот и им подобные.

 

3 . Домашнее задание

 

1. Ознакомится с настоящими методическими указаниями.

2. Подготовить HTML-код web-страницы, предложенной преподавателем.

 

4.  ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

 

1. Исследовать работу каждого тега и его атрибутов.

2. Разработать web-страницу, предложенную преподавателем.

 

5.  Контрольные вопросы и задания

 

1. Какова структура HTML-документа?

2. Каков общий порядок записи тега и его атрибутов?

3. Перечислите основные группы тегов.

4. Поясните порядок применения изученных тегов.