10. Теги и из атрибуты (запись и значения)

Заголовки

В качестве тегов, для указания заголовка страницы обычно используют теги <head>…</head> и <title>…</title>. Отличаются они лишь тем, что <head> указывает на заголовок страницы, скрытый от глаз пользователя, а содержимое тега <title> обычно отображается вместо названия вкладки браузера.

Помимо глобальных тегов заголовков существуют и теги, используемые в контейнере <body>…</body>. Они обозначаются как <h1>…</h1>, <h2>…</h2>,<h3>…</h3>, …, <h6>…</h6>. Используется для форматирования текста. Теги заголовков поддерживают атрибут align, имеющий значения left, center, right. Также параметры заголовков определенных уровней можно изменить с помощью каскадных таблиц стилей (CSS), описываемых в контейнерном теге <style>…</style>.

Графические объекты

Графические объекты вставляются после обработки редакторами и должны иметь расширение графических файлов (например, jpeg, jpg, gif или png). Описываются графические объекты в коде с помощью тега <img>. Атрибуты у данного тега следующие:

• src=”…” – атрибут полного пути к тому месту, где находится используемое изображение – это может быть: 1) URL-адрес изображения, если оно хранится в сети Интернет или на другом компьютере; 2) имя файла, если он хранится в той же папке, что и веб-страница; 3) полный путь к файлу, если он хранится на этом же компьютере, но в совершенно другой папке;

• alt=”…” – атрибут альтернативного текста, который отражается, когда изображение не может полностью прогрузиться на веб-странице;

• align=”…” – атрибут выравнивания изображения на странице относительно левой и правий границ (страницы или таблицы) – имеет значения left (по левому краю), center (по центру), right (по правому краю), justify (по ширине);

• valign=”…” – атрибут выравнивания изображения, аналогичный атрибуту align, но в данном случае выравнивающий изображение по вертикали – относительно верхней и нижней границы страницы или таблицы и имеющий значения top (по верхнему краю), middle (по центру), bottom (по нижнему краю)

• border=”…px” – рамка изображения (толщина указывается в пикселях)

• width=”…” – ширина изображения (в пикселях или процентах)

• height=”…” – высота изображения (в пикселях или процентах)

• hspace=”…” – отступ содержимого страницы от изображения по горизонтали (в пикселях)

• hspace=”…” – отступ содержимого страницы от изображения по вертикали (в пикселях)

Форматирование текста (общие, локально)

Текст оформляется с помощью следующих тегов и их атрибутов:

1. Перенос строки <br>

2. Запрет переноса строки <nobr>…</nobr>

3. Горизонтальная линия <hr> со следующими атрибутами:

• width=”…” – ширина (в пикселях или процентах относительно ширины страницы);

• align=”…” – выравнивание (left, center, right и без justify);

• size=”…” – толщина линии (в пикселях);

• color=”…” – цвет линии (названием цвета или его шестнадцатиричный код);

• noshade – рельефность (с применением этого параметра линия становится плоской).

При вставке горизонтальной линии до и после нее вставляются пустые строки

Для оформления частей любого текста используется тег <font>…</font> со следующими атрибутами:

• face=”…” – название применяемого шрифта (если несколько, то указываются через “,”);

• size=”…” – размер текста (от 1 до 7, по умолчанию равен 3); можно также указать относительно предыдущего текста используя знаки “+” и “-” и значение, на которое нужно увеличить / уменьшить текст;

• color=”…” – цвет текста (название или шестнадцатиричный код).

Текстовые гиперссылки

Гиперссылки в html-документе помогают осуществить навигацию как по самому документу, так между несколькими документами. Текстовые гиперссылки описываются контейнерным тегом <a>…</a>, в котором содержится текст, являющийся кликабельным.

В общем виде это выглядит так: <a href=”URL”>какой-либо объект или текст</a>

Гиперссылки бывают: активные и неактивные. Активные выделяются цветом и показывают, что по ним можно перейти к другому якорю / документу. Неактивные показывают, что гиперссылку пользователь уже посещал (+ цвет гиперссылки меняется).

Тег <a> имеет основной атрибут href, в котором указывается место, в которое гиперссылка перенесет пользователя. Это вполне может быть любая веб-странца, адрес которой и будет прописан в атрибуте href.

Гиперссылки в виде графических объектов

В качестве гиперссылки может выступать графическое изображение. В этом случае в контенере <a>…</a> размещается тег <img>, в котором и указывается изображение-ссылка.

Понятие якоря и его использование

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

<a name=”[имя якоря / метки]”>…</a>

Текст, который распологается между тегами в окне браузера никак не выделяется

Имена меток не должны содержать зарезервированные в языке комбинации букв.

Адрес документа, на который ведет ссылка может быть как относительным, так и абсолютным. В абсолютном прописывается расположение ресурса в глобальной сети (URL-адрес) с использованием протокола сети:

• http:// - веб-страница

• ftp:// - передача файлов

• file:// - локальное расположение

и так далее по шаблону:

[протокол] :// [адрес узла] [:порт] / [путь] / [имя файла с расширением]#метка

Адрес узла – доменное имя или ip-адрес компьютера в сети. Порт сервера указывать необязательно. Путь – путь к объекту на ресурс.

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

<a href=”#metka”>…</a>

Такая конструкция позволяет перейти к другой части документа, отмеченной меткой с именем «metka». Если другой документ, на одну из меток которого необходимо сделать ссылку, находится в той же папке, где лежит текущий документ, то конструкция приобретает следующий вид:

<a href=”document.html#metka”>…</a>

Если искомый документ находится в родительской папке по отношению к текущему документу, то сама родительская папка отображается в пути к документу следующим образом:

<a href=”…/document.html”>…</a>

Если в дочерней папке, то указывается полный путь к документу. Например:

<a href=” [имя папки] / [имя документа].html>…</a>

Ссылка на почтовый ящик выглядит так:

<a href=”mailto:adress@gmail.com”>…</a>

Списки (нумерованные, маркированные)

Списки подразделяются на нумерованные, маркированные и списки определений.

( ! ) HTML также поддерживает и вложенные списки ( ! )

( ! ) Закрывающие теги в этом случае обязательные ( ! )

Нумерованные - <ol>…</ol>, где каждый элемент содержится между <li>…</li>, расположенными по порядку.

Тег <ol>…</ol> имеет следующие атрибуты:

1. start=”n” – где, n – число, устанавливающее номер первого элемента в списке

2. type=”…” – атрибут, устанавливающий тип нумерации элементов списка и имеющий такие значения:

• A – нумерация [ A, B, C, D …]

• a – нумерация [ a, b, c, d …]

• I – нумерация [ I, II, III, IV …]

• i – нумерация [ i, ii, iii, iv …]

• 1 – нумерация [ 1, 2, 3, 4 …] –установлен по умолчанию

Маркированные - <ul>…</ul> - по умолчанию в окне браузера элементы списка отображаются с маркером «●». Атрибутом в данном случае является type, устанавливающий тип маркера:

• disc – черная точка «●»;

• circle – полая точка «○».

• square – квадрат «■».

Если есть желание, то можно создать свой маркер

<ul><img src=”marker.gif” align=”top”>…</ul>

Либо у отдельных элементов как:

<br>элемент списка

<img src=”marker.gif” align=”top”>

<br>элемент списка

Вложенные списки – тег одного списка вставляется в тег другого списка. Для нумерованных списков как основные, так и вложенные списки нумеруются только арабским цифрами (но можно сменить с помощью атрибута type).

Таблицы

Обозначаются тегом <table>...</table>. При необходимости можно тегом <caption>…</caption> указать заголовок таблицы.

Строка таблицы – тег <tr>…</tr>. Ячейка в строке таблицы - <td>…</td>.

Атрибуты тега <table>:

• border=”…” – толщина границ таблицы (по умолчанию равна 0);

• width=”…” – ширина таблицы (в пикселях или процентах);

• height=”…” – высота таблицы (в пикселях или процентах);

• align=”…” – горизонтальное выравнивание таблицы относительно границ страницы (left, center, right);

• vspace=”…” – вертикальный отступ содержимого страницы от границ таблицы (в пикселях);

• hspace=”…” – горизонтальный отступ содержимого страницы от границ таблицы (в пикселях);

• bgcolor=”…” – цвет рамки;

• background=” URL / цвет ” – фон таблицы;

Выравнивание данных в ячейке осуществляется с помощью атрибута align=” left / center / right”. Если он установлен во главе таблицы, то его действие распространяется на все ячейки, но можно применить и отдельно для каждой ячейки.

Аналогичный атрибут – valign=” top / center / bottom ”, регулирующий выравнивание содержимого по вертикали, ( ! ) действует на всю строку ( ! ).

Объединение ячеек – предназначенно для объединение смежных ячеек таблицы:

• <td rowspan=”[кол-во ячеек для объединения]”> - по cтроке

• <td colspan=”[кол-во ячеек для объединения]”> - по столбцу

Цветовые параметры ячеек таблицы регулируются атрибутами:

• bgcolor=”…” – заливка

• bordercolor=”…” – цвет рамки

В качестве фона ячейки также можно использовать графическое изображение.

Понятие фреймов и их организация

Фреймы разбивают окно документы на несколько разделов. В каждом фрейме может быть показан свой html-документ. Фрейм может содержать полосы прокрутки, ссылки, графические изображения. Фреймы могут функционировать независимо друг от друга, а могут оказывать друг на друга влияние.

Для создания фрейма используется контейнер:

<frameset>…</frameset>

Таблица, разделенная на фреймы, называется документом группы фрейма. Основная веб-страница может содержать тег <head>, но не содержать тег <body>. Внутри контейнера могут распологаться другие контейнеры или тег <frame>.

Параметры кадров: <frameset [rows / cols]=”*, *, *, *, …, *”>, где атрибут rows / cols определяет кол-во горизонтальных / вертикальных фреймов, на которые будет делиться страница.

Тег <frame> располагается внутри контейнера <frameset>…</frameset> и не является контейнером.

( ! ) Кол-во тегов <frame> строго равно кол-ву подразделов в теге <frameset> ( ! )

Атрибуты тега <frame>:

• src=”…” – указывает на файл, которые будет выводиться в этом фрейме (файл должен быть полноценным html-документом); если документ находится в другом месте, то нужно указать к нему путь; если документ находится в интернете, то указать URL;

• name=”…” – имя нужно для того, чтобы найденный по гиперссылке документ разместился именно в этом окне;

• marginwidth=”…” и marginheight=”…” – атрибуты показывают на сколько точек по вертикали / горизонтали нужно отступить от границ фрейма внутри него для размещения содержимого;

• scrolling=” yes / no / auto ” – отображение полос прокрутки;

• noresize – авто-адаптация размера окна под разрешение экрана (атрибут запрещает);

( ! ) Изображения выводятся только в <frame> ( ! )

• border=”…” – указывает толщину рамки всех окон данного тега <frameset> (в пикселях);

• frameborder=” yes / no ” – если yes, то рамка трехмерна, если no, то рамка имеет цвет фона и невидима; по умолчанию – yes;

• bordercolor=”…” – цвет рамки – используется как в <frameset>, так и в <frame>.

Атрибуты тега <frameset>:

• border=”…” – только с <frameset> (в пикселях);

• frameborder=” yes /no ” – используется c <frameset> и с <frame>;

• bordercolor=”…” - цвет рамки.

• target (управление действием гиперссылок, расположенных в фреймах): 1) если target отсутствует, то файл загружается в то окно, где находится ссылка; 2) если target имеет значение, то загружается в указанное меткой окно; 3) если target=”blank”, то открывается новое пустое окно и в него загружается файл; 4) если target=”top”, то загружается в это же окно, «стирая» все фреймы.