Файл: Основы программирования на языке HTML.pdf

Указание адреса Интернет-ресурса может быть относительным или абсолютным. Если указываем папку и имя файла - такой путь называется относительным (относительно нашего файла). Если же указываем протокол для передачи файла, имя сервера, на котором расположен файл, и полный путь к нему от корневой директории на сервере - перед нами абсолютная ссылка.

Относительные указатели удобны в использовании. Намного проще вставить только имя файла, а не весь длинный URL-адрес. Они также позволяют перемещать файлы в пределах сервера без больших изменений в межстраничной адресации.

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

При этом относительный указатель будет работать по-другому, если в HTML-документе используется тэг <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. [1, c.112]

Ссылки на электронную почту

Для создания ссылки, которая запускала бы программу электронной почты, установленную на компьютере посетителя, и позволяла бы отправить электронное письмо на указанный вами адрес, вам нужно будет воспользоваться элементом <а>. Однако теперь значение атрибута href должно начинаться со слова mailto:, после которого необходимо указать адрес электронной почты, на который посетитель должен будет отправить свое письмо. На рисунке справа вы можете увидеть ссылку на электронную почту, которая выглядит как обычная ссылка, но при щелчке мышью по ней она запускает программу для отправки электронной почты и создает новое письмо, в адресной строке которого будет введен адрес, указанный вами при создании ссылки. [6, c. 84]

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <а>. Значение этого атрибута должно быть установлено в _ blank.

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

В обычной ситуации следует избегать открытия ссылок в новом окне, однако если вы используете этот прием, то будет не лишним заранее предупредить посетителя, что страница откроется в новом окне. [6, c. 85]

Ссылки создаются с помощью тега <A>, для обозначения адреса страницы, на которую указывает ссылка, используется атрибут href. Для создания ссылок на страницы собственного сайта лучше всего использовать относительные URL-адреса.

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

Для обозначения целевых элементов страницы, на которые можно создавать ссылки, пользуйтесь атрибутом id.

6. Списки

Существует множество ситуаций, когда необходимо пользоваться списками. В языке HTML существует три их разновидности.

• Упорядоченные списки — это списки, каждый элемент которых имеет порядковый номер.
• Неупорядоченные списки — это списки, рядом с каждым элементом которых помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер).
• Списки определений состоят из набора понятий и сопровождающих их определений. [6, c. 64]

Упорядоченные списки (Нумерованные списки)

Одним из типов списков, реализованных в языке HTML, является нумерованный (упорядоченный) список. Последнее название произошло от формального перевода названия соответствующего тэга <OL>, с помощью которого и организуются списки такого типа в HTML-доку ментах (OL — Ordered List, упорядоченный список). Списки данного типа обычно представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тэгов списка.

Каждый элемент нумерованного списка должен располагаться в отдельной паре тегов <LI>... </LI> (List Item — элемент списка). Хотя последнее время его применяют и как одиночный.

Открывающий и закрывающий тэги списка <OL> и </OL> обеспечивают отступ до и после списка, отделяя, таким образом, его от основного содержимого документа. [1, c. 77]

По умолчанию браузеры автоматически расставляют нужные отступы для элементов списков.

Иногда при просмотре существующих страниц вы будете встречать аргумент type в элементе <о1>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). [6, c. 66]

Неупорядоченные списки (Маркированные списки)

Как известно, кроме нумерованных списков, т.е. таких, где важен порядок следования элементов, есть такие, где важен только их перечень. Вместо цифр или букв в них используют маркеры — точки, черточки, кружки. Такие списки называют маркированными или ненумерованными (неупорядоченными).

Для разметки маркированных списков в HTML применяется тот же принцип, что и для нумерованных списков, только вместо дескриптора <OL> используется дескриптор <UL>. Как нетрудно догадаться его название происходит от английского «unordered list» — «неупорядоченный список».

Что получится, если в рассмотренном выше примере заменить дескриптор <OL> на <UL>? Нумерация исчезнет, а вместо цифр в начале каждой строки появятся характерные жирные точки.

Заметим, что кроме элементов списка, отмечаемых тэгом <LI> внутри тега <UL>, могут присутствовать и другие HTML-элементы, например, обычный текст, не являющийся пунктом списка, а играющий роль его заголовка.

В тэге <UL> может быть указан аналогичный параметр TYPE, используемый для задания типа маркера.

Конкретный вид маркера будет зависеть от используемого браузера.

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

• TYPE = disc — маркеры отображаются закрашенными кружками;
• TYPE = circle — маркеры отображаются не закрашенными кружками;
• TYPE = square — маркеры отображаются закрашенными квадратиками. [1, c. 81]

Списки определений

Список определений создается с помощью элемента <dl> и, как правило, содержит набор понятий и их определений.

Внутри элемента <dl> вы зачастую сможете увидеть пары элементов <dt> и <dd>.

<dt> - используется для обозначения понятия (термина).

<dd> - используется для определения понятия.

Иногда вы можете столкнуться со списками, в которых два понятия имеют одно определение или где для одного понятия приводится несколько определений. [6, c. 68]

Вложенные списки

Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня.

Браузеры отображают вложенные списки с большим отступом по сравнению с основным, или родительским, списком. Кроме того, браузер, как правило, также изменяет вид маркеров вложенного неупорядоченного списка. [6, c. 69]

Бывают случаи, когда в элемент списка одного типа требуется включить целый список такого же типа или другого. При этом будут организованы многоуровневые или вложенные списки. В HTML допустимо произвольное вложение различных типов списков, однако при их организации следует проявлять аккуратность. Здесь действует все тот же «принцип матрешки» вложенности тегов.

В качестве совета добавим, что при составлении сложных вложенных списков особое внимание следует уделять корректному указанию закрывающих тегов </UL> и </OL>. Для того чтобы не запутаться в разветвленной структуре HTML-кода вложенных списков, каждый последующий уровень вложенности лучше всего отделять от предыдущего небольшим отступом от левого края документа. [1, c. 82]

В языке HTML существует три вида списков: упорядоченные, неупорядоченные и списки определений. В упорядоченных списках используются цифры, а в неупорядоченных списках используются маркеры. Списки определений обычно применяются для расшифровки терминов. Списки могут быть вложены в другие списки.

7. Таблицы

Табличное представление данных

Таблицы обычно используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. С помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.

Таблица состоит из строк, строки состоят из ячеек. Ячейки могут содержать текст и рисунки. Для добавления таблицы на Web-страницу используется тег <table>. Этот элемент служит контейнером для элементов <tr>, определяющих строки таблицы. Каждая строка служит контейнером для элементов <th> или <td>, определяющих ячейки. Содержимое элемента <th>, в отличие от <td>, выводится жирным шрифтом и выравнивается по центру. [2, c. 79]

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

Сетка помогает воспринимать большие объемы данных путем соотнесения их с подписями по обеим осям. Отдельный блок сетки называется ячейкой таблицы. С помощью языка HTML таблицы пишутся построчно. [6, c. 125]

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием «преформатированного» текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тэгов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2. [1, c. 88]

<table>

Для создания таблиц используется элемент <table>. Контент таблицы описывается построчно. [6, c. 126]

Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются отдельные ячейки.

Для задания строк используется тег <TR> (от английского «Table Row» - строка таблицы), внутри которого расположены ячейки <TD> (от английского «Table Data» - данные, или содержимое таблицы). После того как встретится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </TABLE>).

Завершающие коды </TR>, </TD> могут быть опущены. Однако все же рекомендуется их указывать для предотвращения ошибок, которые могут возникнуть при создании сложных вложенных таблиц. Завершающий тэг таблицы </TABLE> является обязательным. [1, c. 88]

<tr> - открывающий тег <tr> обозначает начало новой строки таблицы. После него помещаются элементы <td>, каждый из которых соответствует отдельной ячейке в этой строке. Конец строки обозначается закрывающим тегом </tr>.

<td> - каждая ячейка таблицы должна быть представлена элементом <td>. Конец ячейки обозначается закрывающим тегом </td>. Некоторые браузеры автоматически создают линии вокруг таблиц и/или ячеек. [6, c. 126]

Элемент <th> используется точно так же, как и элемент <td>, однако его назначение — создание заголовка строки или столбца.

Помните, что даже если ячейка не содержит данных, то вы все равно должны представить ее пустым элементом <td> или <th>, в противном случае таблица будет некорректно отображена в браузере. Употребление элемента <th> помогает людям, использующим программы экранного доступа, улучшает результативность индексирования таблиц поисковыми системами, а еще этот элемент помогает управлять оформлением таблиц при использовании CSS. Как правило, браузеры выделяют полужирным шрифтом содержимое элемента <th> и выравнивают его по центру ячейки. [6, c. 127]

Отображение рамок и их цвет (границы и заливка)

Итак, для того чтобы отобразить линии сетки таблицы, и вокруг всей таблицы необходимо указать параметр BORDER для тега <TABLE>. Можно указать просто BORDER или задать ему численное значение.

Например, <TABLE BORDER> или c TABLE BORDER=3>.

Численное значение параметра определяет толщину рамки в пикселях, рисуемую вокруг всей таблицы, однако на толщину рамок вокруг каждой ячейки это значение не влияет. При отсутствии численного значения оно принимается равным 1. Расположить ячейки как можно ближе друг к другу возможно заданием BORDER=0, что означает отсутствие рамок. Это значение и принято по умолчанию. Возможность независимого управления отображением рамки вокруг всей таблицы и рамками вокруг ячеек пока отсутствует.