HTML дает возможность связывать один Web-ресурс с другим, легко переходить с одного документа к другому. Эта возможность реализована через ссылки.
Ссылка(гиперссылка) – связь между элементом Web-страницы (текстом, рисунком и др.) и другим Web-ресурсом.
Ссылка имеет 2 конца, называемых источниками (anchois), и направление, т.е. в ссылке указывается какой источник является исходным (начало), а какой целевым (конец). Ссылка может быть внешней (если целевой источник – внешний файл) или внутренней (если целевой источник внутри документа, тогда концы ссылки называют якорями).
Элемент а (<a> , конечный тег </a> обязателен). Содержимое элемента А называется указателем ссылки, это может быть текст или рисунок.
URL (uniform resource locator) – универсальный указатель информационного ресурса, входит в термин более высокого уровня абстракции URI (uniform resource identifier) – универсальный идентификатор ресурса. Указатель ресурса может быть абсолютным или относительным. Абсолютный указатель содержит схему механизма доступа к ресурсу (протокол), имя машины на который расположен ресурс (в сети WWW), имя ресурса в виде пути(перечисляются папки в которые вложен файл). Если целевой файл-источник находится в той же папке, что и исходный документ-источник, то в качестве url-адреса достаточно указать имя файла. Если целевой файл-источник находится в предыдущей папке, то перед именем файла указывается комбинация символов ‘../’. Эти символы можно использовать несколько раз, чтобы подняться на соответствующий уровень вложенности. Такие указатели называются относительными.
Если в документе есть ссылка на другую веб-страничку, то по умолчанию загружается файл с именем index.html.
Целевой файл-источник открывается браузером, если поддерживается формат этого файла. Возможные действия браузера при нажатии на ссылку:
- браузер открывает файл сам;
- вызывает программу открывающую файл;
- предлагает выбрать действия с файлом (стандартное окно).
Атрибуты элемента <а>:
href – основной атрибут. href =”адрес ссылки”, адрес целевого источника может быть:
- веб-ресурс: href=”http://www.abc.ru”
<a href=”http://www.adobe.com/”> графический редактор </a> adobe Photoshop
- файл (относительный или абсолютный адрес): href=”chapter.html”, href=”pic.jpg”
- адрес эл.почты (браузер запускает программу электронной почты для создания нового письма по указанному адресу) href=”mailto: myadress@mail.ru”
- закладка (ссылка на элемент документа), целевой источник может быть задан с помощью элемента А и его атрибута name или любого другого элемента и его атрибута id: href=”#abc”
Пример:
<a href=”#chapter1> Глава 1 </a>
<h1><a name=”#chapter1> Глава 1 </a></h1>
или
<h1 id=”#chapter1> Глава 1 </h1>
- одновременно ресурс и закладка: href =”http://abc.com/animals.html# bbear”
Атрибут name – имя
Атрибут hreflang – язык целевого источника (только если указан href)
Атрибут rel – отношение текущего документа к целевому
- alternate – альтернативная версия документа (на другом языке)
- start –первый документ
- next – следующий
- prev – предыдущий
- contents – документ служит содержанием
- index – указатели
- glossary – список терминов
- chapter – документ является главой
- section – раздел
- appendix – приложение
- help – справка
Атрибут rev – отношение исходного ресурса к текущему
Атрибут title – текстовая строка всплывающей подсказки, появляется при наведении курсора на указатель ссылки
Атрибут target – задает окно, в котором должен открываться документ
- blank – новое окно
- self – текущее окно
- parent – родительский фрейм
- top – полное окно, перекрывает остальные
Значения parent и top эквивалентны self если нет родительского фрейма или фреймы не используются.
По умолчанию элемент «а» имеет следующие свойства: текст ссылки подчеркивается и выделяется голубым цветом, при наведении внешний вид курсора меняется. Если ссылку использовали, то ее цвет меняется на малиновый. CSS позволяет меня свойства элемента «а»: цвет, фон, отступы, шрифт и т.д.
Пример:
а: link{color: blue; background:url(p1.gif) no-repeat center center} – неиспользованная ссылка
a: visited {color: green} – использованная ссылка
а: active {color: red} – активная ссылка (при нажатии)
a: hover {color: yellow} – ссылка на которой находиться указатель мыши
Чтобы ссылка не подчеркивалась, следует указать свойство text-decoration: none
Указатели ссылки могут быть рисунками – графическая ссылка.
Для добавления рисунка в тест html-странички используют элемент <img> (конечный тег запрещен). Его атрибуты:
src – адрес файла с рисунком (абсолютный или относительный), должен присутствовать обязательно;
alt – альтернативный текст, выводимый, если нельзя вывести изображение;
width – ширина в рх или %;
height – длина, рекомендуется обязательно указывать ширину и длину рисунка, т.к. зная расположение и границы рисунка, браузер отобразит текст быстрее;
align – выравнивание, значения:
bottom – выравнивание нижней границы изображения по базовой линии текущей строки
middle – по центру объекта
top – выравнивание относительно верхней линии текстовой строки
left – рисунок располагается слева, текст обтекает его справа
right – рисунок справа
usemap – связывает рисунок с клиентской навигационной картой
ismap – связывает рисунок с серверной навигационной картой
Указатель ссылки может включать и рисунок, и текст. Вложенность ссылок не допустима. Ссылка может быть одновременно и исходным источником и целевым источником, для этого необходимо указать значения и для атрибута href, и для атрибута name. Вместо name в элементе «а» можно использовать атрибут id. Значения id и name не могут пересекаться так как они входят в одно и тоже пространство имен.
Таблица состоит из:
Заголовок (вне и внутри)
Ячейки, организованные в строки и столбцы, группы
Заголовок столбца
Нижняя часть таблицы включает подпись, различные примечания
Формирование и описание таблицы в HTML происходит по строкам сверху вниз, а в строке ячейки по порядку слева направо.
В приведенной таблице ячейки 2 и5 получены объединением нескольких.
Контейнерный элемент TABLE <table> </table> Элементы TABLE могут быть вложены. Используется для структурирования содержания страницы. Но следует помнить, что использование таблиц затрудняет отображение страницы для невизуальных агентов.
Атрибуты:
width – ширина (в единицах и в %) по умолчанию определенный браузер.
border – ширина в пикселях рамки вокруг таблицы (по умолчанию 0-нет) Если значение атрибута указано, то каждая ячейка будет иметь свою рамку, толщиной в 1px (не измен.).
frame – указывает какие стороны рамки видны, значения:
void - нет (по умолчанию)
above – верх
below - низ
hsides – верх и низ
vesicles – влево и право
lhs - левая
rhs - правая
box - все
border – все
rules – указывает какие линии отображены между ячейками
none - нет (по умолчанию)
all – все
rows – между строками
cols – между столбцами
groups – между группами, выделенными с помощью различных тегов THEAD, TFOOT, TBODY, COLAROUP, COL.
Cellspacing – определяет пространство между ячейками таблицы и краями таблиц и ячеек.
Cellpadding – определяет пространство между содержанием ячейки и ее границей.
summary – краткая информация о таблице (для невизуальных средств генерации таблиц)
Заголовок таблицы – элемент CAPTION (расположен сверху вне таблицы): <caption> </caption> обязателен закрывающий тег. Располагается только после начального тега <table>. Одна таблица может содержать только один элемент CAPTION.
Ячейка таблицы описывается тегом <td> </td> (закрывающий тег необязателен, если его нет, то с открытием новой ячейки считается предыдущая закрыта). Атрибуты элемента td:
align и valign – горизонтальное и вертикальное выравнивание текста в ячейке.
width и height – ширина и высота ячейки в пикселях
rowspan – объединение ячеек по вертикали, значение – число строк, охватываемых ячейкой (по умолчанию 1).Если указан 0, то объединяются все ячейки от текущей до конца табл.
colspan – объединение ячеек по горизонтали, значение – число столбцов охватываемых ячейкой.
nowrap – содержимое ячейки должно быть показано в одну строку.
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если рамка нужна, в ячейку можно ввести символ неразрывного пробела – (non-breaking space). Ячейка будет пустой, но с рамкой вокруг нее. Ячейка таблицы может содержать в себе другую таблицу.
Ячейка заголовка столбца таблицы помечается тегом <th> </th> (закрывающий тег необязателен). Содержание такой ячейки будет выровнено по центру и выделено полужирным шрифтом.
Таблица в html описывается построчно, ячейки объединяются в строки тегами <tr> </tr>(закрывающий тег необязателен)
В таблице можно использовать колонтитулы:
· верхний – элемент THEAD <thead> </thead>, в таблице помещается только один раз;
· нижний – элемент TFOOT <tfoot> </tfood>, в таблице помещается только один раз;
· основной – элемент TBODY <tbody> </tbody>, может встречаться в таблице несколько раз.
Наличие закрывающих тегов у элементов колонтитула обязательно. Верхний и нижний колонтитулы функционально очерчивают логические заголовки соответствующего уровня и используются в основном для больших таблиц, не помещающихся в пределах одной страница электронного документа. Каждый из элементов должен содержать группу строк заданную элементом TR.
Элементы COLGROUP и COL позволяют объединить в группу несколько ячеек расположенных в одном столбце для единообразного представления данных в объединенных ячейках. Таблица может содержать любое число явных групп столбцов. <colgroup> </colgroup> Атрибуты:
span – число столбцов в группе (по умолчанию один),
width – ширина каждого столбца в текущей группе.
<col> нет конечного тега, служит для создания группы ст
span – число столбцов в группе (по умолчанию один),
width – имеет приоритет над соответствующим атрибутом из элемента COLGROUP
COL может содержаться внутри COLGROUP. Внутри COL ничего не может быть (не содержит)
Пример: в таблице 40 столбцов
< COLGROUP width=”20 px”>
< COL span=”38”>
< COL class=”mycllus” span=”2” >
</ COLGROUP>
Еще одним способом структурирования текста являются списки. В каждом списке должен быть хотя бы один элемент. В HTML 4.0 предусматривается 3 основных типа списков:
- неупорядоченные (маркированные)
- упорядоченные (нумерованные)
- списки определений
Элемент UL <ul> </ul>- обязательные, внутри перечисленные элементы списка, каждый помечен<li> </li> (закрывающий необязателен). Браузер отображает элементы списка, каждый с новой строки с отступом и маркером. Атрибуты type и compact являются нежелательными. Вид маркера определяется в стиле с помощью свойства list- style- type:
- None
- Circle (окружность)
- Disk (черный круг) по умолчанию
- Square (квадрат) может быть закрыт
Другие параметры
list- style- position положение маркера элемента (внутри или вне элемента)
- outside (вне) по умолчанию
- inside (внутри)
- list- style- image определенный URL адрес графического маркера
- none по умолчанию
- URL адрес графического файла url (…)
Общий параметр list-style: вид_маркера положение адрес_графического_маркера
