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

ТЕМА: «Язык создания гипертекстовых документов – HTML. Теги форматирования текста. Вставка рисунков, создание гиперссылки. Списки. Таблицы»

Основные понятия:

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документ представляет собой обычный текстовый файл, который вы можете просматривать и редактировать в любом неформатирующем текстовом редакторе. HTML-документы могут просматриваться различными типами WEB-броузеров, которые интерпретируют (выполняют) HTML документ. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей. Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки.

HTML-тэги могут быть условно разделены на две категории:

• тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом
• тэги, описывающие общие свойства документа, такие как заголовок или автор документа

Все тэги HTML начинаются с символа "<" и заканчиваются ">" . Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

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

(тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

Создание таблиц:

Для представления таблиц используются нескольких видов тегов HTML:

• теги TABLE, которые обрамляют всю табличную спецификацию
• необязательный элемент CAPTION, специфицирующий заголовок (имя) таблицы
• теги TR, специфицирующие строки таблицы
• теги TH, специфицирующие заголовки строк и столбцов
• теги TD, специфицирующие данные в таблице, т.е. содержимое табличных ячеек

Основные табличные структуры

Давайте начнем с очень простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код HTML выглядит следующим образом:

1	0
0	1

1	0
0	1

и обычно представляется броузером следующим образом:

Дополнительные свойства; типичная таблица с текстовыми ячейками

Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной модели:

• Заголовок (caption) для таблицы, связанный с самой таблицей (в дополнение к строкам текста о таблице в документе).
• Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок.
• Рамки (borders) вокруг таблицы и каждой табличной ячейки.

Заметим, что атрибуты ALIGN и VALIGN могут существенно влиять на качество отображения, устанавливают расположение таблицы по отношению к полям документа. Допустимые   значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по   центру), ALIGN=RIGHT (выравнивание вправо).   WIDTH - ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в   процентах от ширины страницы (например, WIDTH=80%).

 

Упражнение 1. Создать следующий HTML- документ, используя тэги форматирования текста

 

1. Откройте окно текстового редактора Блокнот. Сохраните данный документ как Задание1.html
2. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML.  Поэтому в первой строке нашего документа набираем .

3. Чтобы ввести заголовок окна, далее набираем:

               
               
                 

4. Теперь вводим Тело нашего документа, т.е. то, что будет отражаться в нашем HTML-документе. Для этого в следующей строке наберите

где BGCOLOR=yellow определяет, что фон документа – желтый, а TEXT=blue, что текст будет синего цвета.

5. Далее набираем

Это заголовок первого уровня

Это заголовок второго уровня

т.е. определяет заголовки разных уровней.

6. Теперь научимся определять пронумерованные и непронумерованные списки списки. Для этого вводим

Это пример пронумерованного списка
1. Первый элемент

2. Второй элемент

3. Третий элемент

Это пример непронумерованного списка
• Первый элемент

• Второй элемент

• Третий элемент

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

Это курсив

Это жирный шрифт

Это подчеркнутый текст

^{Это верхний индекс}

_{Это нижний индекс}

Это начало нового абзаца.

Это большой шрифт

Это маленький шрифт

Это перечеркнутый шрифт

8. В следующей строке строке введите
   
   . Это будет означать, что мы дважды перевели строку (нажали клавишу «Enter»).
9. Наберите в следующей строке ЭТО БЕГУЩАЯ СТРОКА. Таким образом создается бегущая строка.
10. На этом информация, отражающаяся в нашем HTML-документе, закончилась и можно закрыть тэг , набрав .
11. Теперь запись нашего HTML-документе закончилась, поэтому можно закрыть тэг , набрав.
12. Закройте блокнот и откройте ваш документ двойным щелчком.

Упражнение 2: Поменяйте текст  сайта из задания 1: создайте домашнюю страницу с небольшой информацией о себе, используя, все приведенные теги.

Упражнение 3: Теперь отредактируем наш документ.

 Поменяем фон, поставив фоновый рисунок.

1. Скопируйте в свою папку из папки Мои рисунки рисунок формата jpg  и переименуйте его на image.jpg
2. Вернитесь в окно своего HTML-документа и выполните команду Вид-Просмотр HTML-кода
3. В открывшемся окне редактора Блокнот редактируем наш HTML-код. В  тэге вместо тега цвета фона добавьте BACKGROUND="image.jpg" .
4. Закройте окно Блокнота, сохранив документ.
5. В окне своего HTML-документа выполните команду Вид-Обновить.

          Упражнение 4. Создать следующий HTML- документ, используя тэги <IMG> и

1. Откройте окно текстового редактора Блокнот. Сохраните данный документ как Задание4.html
2. В первой строке нашего документа набираем .
3. Чтобы ввести заголовок окна, далее набираем:

               

                 

                 

4. Наберите .
5. Теперь вставим рисунок. Для этого в следующей строке набираем
6. Между рисунком и дальнейшим текстом пропустим три строки. Для этого наберите
   
   
   
7. Теперь вставим гиперссылку на документ Задание1.html Для этого наберите Перейти по гиперссылке
8. Закрыть тэг .
9. Закрыть тэг .

     Упражнение 5: Создать следующий HTML- документ, который будет содержать таблицы. Наберите текст программы, сохраните документ как Задание 5.html. Изучите все теги, связанные с созданием таблицы.

Простейшая таблица

           

           

           

           

           

           

           

           

       

У таблицы может быть заголовок

Первая строка, первая колонка	Первая строка, вторая колонка
Вторая строка, первая колонка	Вторая строка, вторая колонка

       

Упражнение 6: Создайте в своей папке HTML- документ, содержащий таблицу с объединенными и разделенными ячейками. Наберите текст программы, сохраните как Задание 6.html. Изучите теги Colspan, Rowspan.

Ячейка1
Ячейка 2	Ячейка 3
Ячейка 4
Ячейка 5

       

 

Задания для самостоятельной  работы:

№ варианта	Задание
1	Составить HTML-документ вашего класса. Документ будет содержать список, таблицы и фотографию вашего класса. На свою фамилию поставьте гиперссылку на свою страничку (ваш HTML-документ), которая будет содержать небольшую информацию о вас.
2	Составить HTML-документ семьи ваших соседей. Документ будет содержать список членов семьи, таблицу и семейную фотографию. На имени отца поставьте гиперссылку на страничку (HTML-документ), которая будет содержать небольшую информацию о нем.

Примечание: Документ должен содержать все представленные выше теги создания объектов.

Контрольные вопросы:

1. Что такое HTML?
2. Как создается HTML документ?
3. Какова структура HTML документа?
4. Для чего служит браузер? Какие браузеры вы знаете?
5. Какие теги используются для создания таблиц?