Форма отчетности: Защита лабораторной работы. Тема: Создание ссылок на документы и файлы
Лабораторная работа №5
Тема: Создание ссылок на документы и файлы. Создание списков различных типов. Построение таблиц.
Цель: Знакомство с возможностями языка HTML при создании документа с гиперссылками, списками и таблицами.
Задача: Создание страницы HTML-документа с форматированным текстом при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.
Вопросы для подготовки к лабораторной работе:
- Какие существуют виды ссылок?
- Какие теги используются для создания определений (терминов и их описаний)?
- Какой тег используется для создания гиперссылки?
- Какой атрибут определяет окно (фрейм), на которое указывает гипертекстовая ссылка?
- Какие теги существуют для создания таблиц?
Задание:
1. Создайте HTML-страницу со своими оценками за прошедший семестр в виде таблицы, фоном страницы, заголовками, .гиперссылкой на первую страницу с биографическими данными и списком предметов во втором семестре.
2. Создайте отдельную страницу с предложенной таблицей.
Материал для подготовки к лабораторной работе:
Списки
Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
Элементы:
| UL | Создает неупорядоченный (маркированный) список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. По умолчанию элементы списка маркируются черным кружочком. |
| Атрибуты: TYPE – определяет стиль маркирования пунктов. Может иметь значения: "circle" - ○ (пустая, не закрашенная окружность) "disc" - ● (закрашенная окружность; жирная точка) "square" - ■ (закрашенный квадрат) | |
| OL | Создает упорядоченный список |
| Атрибуты: START – определяет первое число, отличное от 1, с которого начинается нумерация пунктов. (только целые числа) TYPE – определяет стиль нумерации пунктов. Может иметь значения: "A" – заглавные буквы A, B, C ... "a" – строчные буквы a, b, c ... "I" – большие римские числа I, II, III ... "i" – маленькие римские числа i, ii, iii ... "1" – арабские числа 1, 2, 3 ... По умолчанию <UL TYPE="1">. Если дополнить уже существующий список новыми значениями, то браузер автоматически пересчитает его. При помощи атрибутов START VALUE можно изменить порядок нумерации списка | |
| LI | Создает пункт меню внутри элементов OL или UL |
| Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только, если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента | |
| DL | Открывает и закрывает список определений (терминов и их описаний). Определения задаются с помощью элементов DT и DD. |
| Атрибуты: COMPACT – включает режим "компактного" отображения списка. Удобно использовать, если список определений очень велик. Данный атрибут является флагом и не требует присвоения значения. | |
| DT | Создает термин в списке определений внутри элемента DL |
| DD | Создает определение термина внутри элемента DL |
Гиперссылки
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html).
| А | Создание гиперссылки |
| Атрибуты | |
| HREF | определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения: http://... – создает ссылку на www-документ; ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; news:.. – создает ссылку на конференцию сервера новостей; telnet://... – создает ссылку на telnet-сессию с удаленной машиной; wais://... – создает ссылку на WAIS – сервер; gopher://... – создает ссылку на Gopher – сервер; Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. |
| NAME | Указывается вместо атрибута HREF при вставке якоря в документ |
| ID | Идентичен NAME, но может вставляться и в другие теги |
| TARGET FRAME | определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме; _parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры; _blank – указывает, что документ должен отображаться в новом окне |
| TITLE | Визуализация подсказки |
| ACCESSKEY | Указывает «горячую» клавишу, при нажатии которой будет выполнен переход по ссылке |
Для внутренней ссылки, когда другая веб-страница находится на текущем веб-узле (папке), достаточно указать только имя документа.
Для внешней ссылки, когда веб-страницы расположены на другом веб-узле, необходимо указывать полный URL-адрес документа.
При организации переходов внутри страницы используются «якоря».
При постановке якоря используется тэг <A>, но вместо атрибута HREF указывается атрибут NAME. Имя может содержать только латинские буквы и цифры и не должно содержать пробелов.
Для ссылки на установленный якорь необходимо указать имя якоря в конце URL-адреса после имени документа, отделив его символом #. При обращении к якорю, находящемуся в том же документе достаточно указать только имя якоря, добавив в начале символ #.
При создании ссылки в виде графического объекта необходимо тег <IMG> поместить между тегами <A> </A>/
Таблицы
Таблицы в HTML формируются нетрадиционным способом – построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
В HTML таблицы используются не только для отображения таблиц как таковых, но и для дизайна. С помощью таблиц можно создать невидимый "каркас" страницы, помогающий расположить текст и изображения.
Элементы для создания таблиц:
| TABLE | Создает таблицу Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации |
| Атрибуты: | |
| ALIGN | Определяет способ горизонтального выравнивания таблицы. (обтекание таблицы текстом) Возможные значения: left, center, right. Значение по умолчанию – left. |
| VALIGN | Должен определять способ вертикального выравнивания таблицы. Возможные значения: top, bottom, middle |
| BORDER | Определяет ширину внешней рамки таблицы (в пикселях). При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет |
| BORDERCOLOR | Определяет цвет рамки. Используется только с атрибутом BORDER Возможно деление рамки на две части BORDERCOLORLIGHT – цвет левой и верхней части сторон рамки BORDERCOLORDARK – цвет нижней и правой сторон рамки |
| FRAME | Определение фрагментов внешнего очертания таблицы Возможные значения: void Все линии отсутствуют above Линия над таблицей below Линия под таблицей rhs Линия справа от таблицы lhs Линия слева от таблицы hsides Линии над и под таблицей vsides Линии слева и справа от таблицы border Все линии присутствуют (по умолчанию) |
| RULES | Указывает набор внутренних разделительных линий Возможные значения: none Все линии отсутствуютcols Линии между столбцамиrows Линии между строкамиgroups Линии между группами столбцов и строкall Все линии присутствуют (по умолчанию) |
| CELLPADDING | Определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом. По умолчанию=1пиксель |
| CELLSPACING | Определяет расстояние (в пикселях) между границами соседних ячеек. По умолчанию=1пиксель |
| WIDTH | Определяет ширину таблицы. Ширина задается либо в пикселях, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала |
| HEIGHT | Определяет высоту таблицы. Высота задается либо в пикселях, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала |
| BGCOLOR | Определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов |
| BACKGROUND | Позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка. |
| HSPACE | Задает свободное пространство слева и справа от таблицы в пикселях |
| VSPACE | Задает свободное пространство сверху и снизу от таблицы в пикселях |
| COLSPES | Позволяет создавать столбцы фиксированной ширины. Значение ширины задается либо в символах, либо в процентах |
| CAPTION | Задает заголовок таблицы Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо. |
| Атрибуты: | |
| ALIGN | Определяет способ вертикального выравнивания заголовка таблицы. Возможные значения: top – помещает заголовок над таблицей (значение по умолчанию); bottom – помещает заголовок под таблицей. |
| TR | Создает новый ряд (строку) ячеек таблицы |
| Атрибуты: | |
| ALIGN | Определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right |
| VALIGN | Определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle |
| BGCOLOR | Определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов |
| ID | Задает имя для ссылки |
| TD | Создает ячейку с данными в текущей строке |
| TH | Создает ячейку, но определяет ее как ячейку-заголовок В качестве содержимого ячейки можно использовать другие таблицы. |
| Атрибуты: | |
| ALIGN | Определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right, bleedleft прижимает содержимое ячейки вплотную к левому краю. По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH – центрирование. |
| VALIGN | Определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR. |
| WIDTH | Определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы |
| HEIGHT | Определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к высоте таблицы |
| COLSPAN | Определяет количество столбцов, на которые простирается данная ячейка. (Слияние ячеек столбцов). По умолчанию имеет значение 1. |
| ROWSPAN | Определяет количество рядов, на которые простирается данная ячейка. (Слияние ячеек из нескольких строк в пределах одного столбца). По умолчанию имеет значение 1 |
| NOWRAP | Блокирует автоматический перенос слов в пределах текущей ячейки Если вы используете одновременно атрибуты NOWRAP и WIDTH="x", где x – маленькое число, то следует дополнительно вставлять внутрь ячейки <NOBR> |
| BGCOLOR | Определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов |
| BACKGROUND | Заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. |
| COLGROUP | Создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные |
| COL | Формирует неструктурные группы столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа. |
| THEAD | Создание группы заголовков для столбцов таблицы. Этот тэг допускается использовать в пределах таблицы только одни раз. |
| TBODY | Создание одной или нескольких групп строк таблицы, содержащих основные данные. |
| TFOOT | Создание группы строк для представления информации о суммах или итогах, располагаемую в нижней части таблицы. Этот тэг допускается использовать в пределах таблицы только одни раз. Вовсе не обязательно создавать группы строк таблицы всех трех типов. |
| Атрибуты для группировки | |
| BGCOLOR | Задает цвет фона ячеек |
| ALIGN | Задает режим горизонтального выравнивания. Возможные значения: left - влево center – по центру right – вправо |
| VALIGN | Задает режим вертикального выравнивания. Возможные значения: middle – по середине top – вверх |
| SPAN | Задает количество столбцов в группе |
| WIDTH | Задает ширину ячеек в столбцах |
| ID | Задает имя для ссылки |
Форма отчетности: Защита лабораторной работы