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

Использование стилей шрифтов

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

• Bold – жирный шрифт.
• Italic – шрифт-курсив (наклонный).
• Mono spaces (type writer) – с применением фиксированных шрифтов.

На практике можно комбинировать различные виды стилей, например жирный и наклонный одновременно.

Таблица 4. Стили шрифтов.

Комбинирование стилей даст вам возможность отображать в одной строке сразу несколько элементов с различными стилями.

Глава 2. Основные возможности языка HTML

Форматирование символов

Каждый тег, предназначенный для форматирования символов, имеет открывающий и закрывающий элемент и воздействует на размещенный между ними текст [2].

<FONT> является основным тегом, который всегда используется с одним или несколькими атрибутами, влияющими на размер, цвет и гарнитуру шрифтов.

Таблица 5. Атрибуты тега FONT.

Форматирование абзацев

Любой текст в браузере выводится слово за словом, и при условии, когда они достигли правой границы окна, следующее слово будет автоматически перенесено на новую строку. Допустим, что в коде страницы были вставлены пробелы или, текст был записан с новой строки, в таком случае, во время просмотра страницы в браузере эти действия не будут отображены. Для того, чтобы вывести в тексте определенную последовательность пробелов или пустых строк, необходимо использовать различные теги [9].

Тег <BR> - break, используется с целью разрыва текстового потока и вставки новой строки без образования нового абзаца. Использование нескольких последовательных тегов будет обозначать определенное количество пустых строк. Тег имеет одинарный межстрочный интервал. Также у него отсутствуют закрывающий тег и атрибуты.

Тег <P> - paragraph, используется для начала нового абзаца. Двойной межстрочный интервал отделяет новый абзац от предыдущего. Абзац не может быть пустым, т.е. несколько последовательных тегов будут определяться как один. Как и у тега <BR>, данный тег не обязывает присутствие закрывающего тега, в следствие того, что предыдущий абзац всегда заканчивается на месте начала нового. Также тег <P> содержит в себе необязательный атрибут ALIGN, который является указателем на вид выравнивания абзаца, принимающий такие значения: LEFT, RIGHT, CENTER и JUSTIFY, которые задают выравнивание по левому и правому краям, по центру, и по ширине соответственно.

При условии, когда не выставлен закрывающий элемент, существующий вариант выравнивания будет использоваться до следующего тега, который задает новое выравнивание, или до конца документа [3].

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

• <OL> - ordered list, нумерованный список
• <UL> unordered list, маркированный список.

Все элементы нумерованного или маркированного списка заключаются в тег <LI> - list item. Оно необходимо для отображения элементов с новой строки, обозначая их, при этом, маркером или номером. Также, список может содержать в себе заголовок, который определяется тегом <LH> - list header [8]. Присутствие закрывающих тегов не обязательно.

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

Также существует возможность оформления абзацев в виде заголовков с уровнями (от n=1,..6). Для этой цели необходимо использовать теги <h1>,..,<h6>. Самый большой размер шрифта получается при первом уровне заголовка. Закрывающий тег обязателен.

Использование изображений

Каждое изображение, которое выводится браузером при просмотре страниц, хранится в отдельных файлах с форматом gif, jpeg, png. Непосредственно в коде документа делается ссылка на нужное изображение [1].

Таблица 6. Атрибуты тега изображений.

Существуют два способа адресации файлов – это абсолютный и относительный. Рассмотрим их по отдельности.

Адресацию в абсолютной форме применяют при использовании ссылок на ресурсы, которые находятся на другом сервере [4]. Универсальный адрес, который определяет местоположение информационного ресурса, имеет название URL – uniform resource locator. Данный адрес состоит из двух частей, которые разделены двоеточием. Первая часть обозначает тип сетевого протокола, зависящий от типа ресурса. Допустим, что ресурс расположен на www-сервере, это означает, что протоколом в данной ситуации является http. Вторая же часть представляет собой имя компьютера в доменной системе и имен и путевое имя файла. Во время записи путевого имени названия каталогов всегда разделены косой чертой. Важно учитывать регистр при определении имён файлов и каталогов, также в названиях нельзя использовать пробелы. Примеры URL адресов:

• Http://www.google.com/images/google.jpg
• http://192.168.1.1:3030
• ftp://cloud.com/soft/gimp.zip
• Maito: Ivan_Ivanov@mail.com

Последняя ссылка, которая указывает на протокол «mailto» и адрес электронной почты, не является ссылкой на какой-либо ресурс – это единственный тип ссылок, во время записи которого не ставятся две косые черты после двоеточия [12].

При разработке web-сайта адресация рисунков в абсолютной форме, как правило, не применяется.

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

При работе с изображениями, формально обязательным является лишь один атрибут SRC, но, как правило, приходится указывать и альтернативный текст – атрибут ALT. Все этом потому, что большинство работает с браузером в режиме без загрузки изображений.

Размеры области, в которой располагается изображение, определяют с помощью атрибутов WIDTH и HEIGHT (ширина и высота соответственно) в пикселях или же в процентах к размеру экрана [7]. Если задан хотя бы один из этих атрибутов, изображение будет масштабироваться так, чтобы его высота или ширина соответствовали заданной величине. Второй размер будет установлен автоматически, в соответствии с пропорцией. Использование только одного из атрибутов будет изменять оба величины изображения. Применение обоих атрибутов одновременно даст масштабирование по двум осям в соответствии с определенными размерами.

Гиперссылки

Гиперссылка представляет из себя какой-нибудь объект, будь то текст или изображение, при щелчке по которому выполняется переход в новую страницу или фрагменту страницы. Благодаря гиперссылкам существует возможность перехода между любыми расположенными в глобальной сети web-страницами [9]. Они позволяют делать набор документов связанными и структурированными, что дает пользователю возможность получать необходимую ему информацию быстро и удобно.

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

Для определения гиперссылки используется тег <A> - anchor. Он связывает страницы и их фрагменты.

Таблица 7. Атрибуты тега ссылок.

Любой текст и изображение, которое размещено между тегами будут являться активной зоной документа, чувствительной к щелчку указателя мыши, вызывающий переход на целевой документ. Сам текст гиперссылки будет выделен подчеркиванием и цветом, который указан как значение атрибутов LINK, ALINK, VLINK тега [4].

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

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

Таблица 8. Атрибуты тегов-контейнеров.

Таблицы

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

Построение таблиц в HTML происходит построчно. Вся информация заключается в теги <TABLE>. Закрывающий элемент обязателен. Строки и ячейки задаются при помощи тегов <TR> и <TD> соответственно [10].

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