close

Вход

Забыли?

вход по аккаунту

?

Krasilnikova 06877DD1AC

код для вставкиСкачать
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное
образовательное учреждение высшего образования
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ
О. И. Красильникова, Н. Н. Красильников
WEB-ТЕХНОЛОГИИ ДЛЯ РАЗРАБОТКИ
КЛИЕНТСКОЙ ЧАСТИ WEB-СТРАНИЦ
Часть 1
Учебное пособие
Санкт-Петербург
2017
УДК 004.777
ББК 32.973.202.018-1
К78
Рецензенты:
доктор технических наук, профессор Е. А. Крук;
кандидат технических наук, доцент А. А. Овчинников
Утверждено
редакционно-издательским советом университета
в качестве учебного пособия
Красильникова, О. И.
К78 Web-технологии для разработки клиентской части webстраниц: учеб. пособие в 2 ч. Ч. 1 / О. И. Красильникова,
Н. Н. Красильников. – СПб.: ГУАП, 2017. – 59 с.: ил.
ISBN 978-5-8088-1193-5
Рассмотрены вопросы разработки клиентской части web-страниц,
связанные с использованием языка HTML5 и технологии каскадных
таблиц стилей CSS3.
Предназначено для студентов направления 09.03.02 – «Информационные системы и технологии».
УДК 004.777
ББК 32.973.202.018-1
ISBN 978-5-8088-1193-5
©
©
Красильникова О. И., Красильников Н. Н., 2017
Санкт-Петербургский государственный
университет аэрокосмического
приборостроения, 2017
Предисловие
Полезность Интернета понимают все, но особенно те, кто до его
появления вынужден был без него обходиться. Студентам, наверное,
кажется, что так здорово было всегда, а ведь на самом деле одна из
наиболее востребованных служб Интернета – WWW – world wide
web, всемирная паутина, стала доступна нам только в 90-х годах прошлого века. Как всем уже хорошо известно, названа она так потому,
что посредством использования гиперссылок организуется система
гиперсвязей одной web-страницы с массой других web-страниц, которые в свою очередь связаны с еще большим числом страниц, в результате получается нечто подобное паутине.
Данное пособие позволит читателю ознакомиться с основными понятиями, относящимися к области web-технологий, предназначенных для создания клиентской части web-страниц, так называемой
front-end. Клиентская часть web-страницы реализует пользовательский интерфейс, она формирует запросы к серверу и обрабатывает ответы от него. Профессионалов, работающих в этой области, называют
по-разному: web-мастер, web-верстальщик, HTML-верстальщик, web
developer, фронтенд-разработчик и т. д. Разработчики клиентской части web-страниц отвечают за то, чтобы страница полностью соответствовала макету дизайнера, одинаково отображалась во всех браузерах и формировала необходимые запросы, передаваемые конкретному серверу. Для создания клиентской части web-страниц необходимо
знание как минимум языка HTML, технологии каскадных таблиц
стилей CSS, а также основных положений концепции Web 2.0, которые должны приниматься во внимание всеми разработчиками webресурсов. Этим вопросам посвящен материал данного пособия. Кроме
того, не обойтись и без создания сценариев, а для этого необходимо
знать язык JavaScript и его замечательные библиотеки. На самом же
деле чтобы стать хорошим профессионалом в данной области, важно
постоянно дополнять свои знания теми новшествами, которые непрерывно появляются в этой быстро развивающейся области.
3
1. ОСНОВЫ СОЗДАНИЯ WEB-СТРАНИЦ
С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА HTML
1.1. Основные понятия и положения
Web-страницы создаются с помощью языка HTML – Hyper Text
Markup Language – языка разметки гипертекста. Все версии этого
языка являются результатом работы Консорциума Всемирной паутины (World Wide Web Consortium – W3C). Сейчас актуальной является 5-я версия языка – HTML5. Термин «гипертекст» был впервые
предложен в 1965 г., а в 90-х годах прошлого века появился Web. Развитие технологии не прекращается, и имеется немало публикаций о
разработке HTML6.0.
Гипертекст – это документ, содержащий ссылки на другие документы. В качестве гиперссылок могут использоваться как текстовые элементы, так и графические изображения.
Технология WWW реализована по схеме «клиент-сервер». Для
обмена гипертекстовой информацией между клиентами и серверами используется протокол HTTP (HyperText Transfer Protocol). Программа, называемая web-сервером, обеспечивает запись и сопровождение web-страниц, а также взаимодействие с другими программами на сервере. Web-серверы принимают запросы от клиентов и
возвращают запрашиваемую информацию. На стороне клиента для
просмотра web-страниц, навигации между ними, выполнения ряда
действий, например, ввода данных, используются программы, называемые web-браузерами. Браузер обрабатывает HTML-код и представляет информацию в удобном для пользователя виде.
В настоящее время имеется большое многообразие браузеров, однако они очень различаются по популярности. По данным рейтинга
интернет-браузеров [1], в 2016 г. наиболее популярным в мире являлся браузер Google Chrome (72,50 %), затем следовали Mozilla Firefox
(16,30 %), Microsoft Internet Explorer (5,30 %), Apple Safari (3,50 %)
и Opera (1,00 %).Что касается России, то к числу самых популярных
относится также браузер Yandex (7,93 % по данным 2015 г.). Поскольку, как это следует из приведенных данных, пользователи Интернета
пользуются разными браузерами, то одна из важнейших задач разработчика web-страниц – обеспечить одинаковость представления
создаваемой страницы в любом из них.
Еще один немаловажный аспект состоит в том, что разнообразные устройства для просмотра web-страниц: мониторы, планшеты,
смартфоны и т. д. очень сильно различаются размерами экранов.
4
Это накладывает жесткие требования и к обеспечению адаптивности – надо создавать адаптивные сайты с интерфейсом, который
был бы удобен для всех устройств.
Прежде чем перейти к вопросам создания web-страниц, рассмотрим кратко важные положения концепции Web 2.0, которая представляет собой некий комплексный подход к организации, реализации и поддержке web-ресурсов [2].
1. При разработке web-страниц необходимо придерживаться современных открытых интернет-стандартов. Их разработкой занимается
организация W3C. Все опубликованные на сайте этой организации
стандарты [http://www.w3.org] обязательны к применению. Соблюдение стандартов обеспечивает одинаковость отображения web-страниц
у всех пользователей всемирной паутины. Из этого положения, в частности, следует необходимость полного отказа от устаревших и закрытых интернет-технологий, например, от Adobe Flash, до недавнего времени широко использовавшейся в web-дизайне, и Microsoft ActiveX.
2. Особое внимание нужно обратить на структуру и наполнение
web-страниц. Для того чтобы посетитель быстро нашел нужную ему
информацию, структура web-страниц должна быть максимально
простой, а содержание достаточно полным. Представленная информация должна легко читаться, к наиболее важным материалам следует привлекать внимание посетителя.
3. Web-страницы обязательно следует делать максимально доступными на любых устройствах. Web-страницы должны быстро загружаться и выводиться на экран и не должны требовать для отображения никакого дополнительного программного обеспечения.
4. Необходимо соблюдать принцип разделения содержимого, представления и поведения web-страницы. Содержимым является информация, которая выводится на web-странице, представление описывает формат вывода этой информации, а поведение – реакцию webстраницы или отдельных ее элементов на действия посетителя. Этот
принцип существенно упрощает процесс разработки и редактирования web-страниц.
5. При разработке web-страниц важно соблюдать принцип подгружаемого содержимого. Он состоит в том, что для сокращения объема
передаваемой по сети информации по щелчку на гиперссылке страница не будет обновляться целиком, вместо этого следует обеспечить
подгрузку только ее части, содержащей необходимую информацию.
6. В целях сокращения сетевого трафика целесообразно генерировать отдельные части web-страницы непосредственно в браузере.
5
7. Следует использовать семантическую разметку данных. Такая разметка служит для связывания данных согласно каким-либо правилам.
Пользователь, загрузив страницу, сможет перейти на связанные с ней
страницы, содержащие дополнительные или родственные сведения.
1.2. Структура HTML-файла
Для того чтобы созданные web-документы можно было просматривать с помощью браузеров, все элементы документа размечаются
тегами HTML. Теги (tags) – управляющие коды, заключенные в скобки <>. Они определяют параметры и место расположения того или
иного элемента, определяют стили, служат для создания таблиц,
форм и т. д.
Существует два типа тегов HTML: парные и непарные.
Парный тег имеет вид <имя, атрибуты> и </имя>, где имя – это
название тега, а атрибуты – его параметры. Между открывающим и
закрывающим тегами помещается содержимое (фрагмент кода), которое будет форматироваться в соответствии с используемым тегом.
Имена тегов можно писать как прописными, так и строчными буквами. Между символами <, >, / и именами тегов, а также внутри имен
тегов пробелы и переносы строк ставить нельзя. Для описания атрибута тега указывается имя этого атрибута, затем ставится знак равенства и значение данного атрибута, взятое в двойные кавычки. Примеры использования парных и непарных тегов будут представлены
ниже, а мы перейдем к рассмотрению структуры HTML-документа.
В первой строке кода должен быть расположен тег указания типа
документа – DTD (Document Type Definition, описание типа документа) для того, чтобы указать браузеру версию языка HTML. Применительно к HTML5 этот тег имеет вид
<!DOCTYPE html>.
Если тег указания типа документа отсутствует, то браузер переходит в режим совместимости, в котором не работают многие возможности HTML5, а также могут возникнуть ошибки с отображением документа. Сам web-документ обрамляется парным тегом <html> </html>.
Этот тег используется без атрибутов.
Далее следуют два раздела: раздел заголовка и раздел содержательной части. Раздел заголовка помещается в парный тег <head>, содержательная часть заключается в парный тег <body>. Между тегами
заголовка помещается название документа, расположенное между тегами <title> (оно показывается в заголовке окна браузера) и в списках
избранных страниц. Это название в частности используется програм6
мами-спайдерами, которые исследуют Всемирную паутину в целях построения баз данных для поисковых систем. Чтобы название воспринималось полностью, его длина должна быть не более 40 символов. Кроме
названия в заголовке помещается вся необходимая для представления
документа информация: метаданные, скрипты и др. Посредством метатегов, которые используются для хранения информации, предназначенной для браузеров и поисковых систем, можно добавлять ключевые
слова, описание документа, задавать кодировку страницы (например,
<meta charset="utf-8">) и т. д. Cодержимое раздела заголовка непосредственно на самой web-странице не показывается.
Таким образом, укрупненно структура HTML-файла может быть
представлена в следующем виде:
<!DOCTYPE html>
<html>
<head>
<title>
…
</title>
<meta …>
</head>
<body>
Содержимое web-страницы
</body>
</html>
HTML-код можно создавать, используя простейший текстовый
редактор, например «Блокнот». Но гораздо более удобным является использование специально предназначенных для создания webстраниц редакторов (к примеру, Notepad++), с их помощью процесс
написания кода становится менее трудоемким. Файл следует сохранить с расширением .htm или .html (все современные браузеры одинаково хорошо понимают и .htm, и .html). В названии сайта следует
использовать строчные английские буквы.
Если сайт состоит из нескольких страниц, то главную страницу
сайта рекомендуется назвать index.html.
Создание комментариев. Для создания комментария его текст
помещают между открывающим тегом <!-- и закрывающим тегом
--> и обязательно отделяют от этих тегов пробелами. Как видим, открывающий и закрывающий теги комментария разные.
Пример:
<!-- Создание навигационной панели -->.
7
Таблица 1.1
Буквенные и цифровые эквиваленты зарезервированных символов
Символ
Буквенный эквивалент
Цифровой эквивалент
<
&lt; (less than)
&#60;
>
“
&
&gt; (grater than)
&quot;
&amp;
&#62;
&#34;
&#38;
Использование зарезервированных символов. Так как символы <,
>, &, “ используются в HTML для определенных целей, то употреблять
их в тексте нельзя. Вместо них вставляется буквенный или цифровой
эквивалент. В табл. 1.1 представлены примеры буквенных и цифровых
эквивалентов для некоторых наиболее часто употребляемых зарезервированных символов. Буквенный эквивалент начинается амперсандом
и заканчивается точкой с запятой. Его запомнить легче, чем цифровой,
поскольку буквы обозначают слова, описывающие смысл символа.
Перед тем как перейти к детальному изучению основ HTML, обратим внимание на то, что по мере развития этого языка ряд тегов выходят из употребления и переходят в категорию нерекомендуемых к использованию, то же относится и к атрибутам тегов. Одновременно появляется много новых тегов, либо существенно упрощающих процесс
создания web-страниц, либо открывающих полезные возможности для
их разработчиков [3]. Так, например, в HTML5 для создания структуры кода введено несколько новых тегов: <article>, <aside>, <footer>,
<header>, <nav>. Их использование является весьма эффективным,
поскольку они позволяют поисковым системам лучше индексировать
сайт. Некоторые новые теги связаны с включением в web-страницу элементов мультимедиа. Например, теги <audio> и <video> добавляют,
воспроизводят и управляют настройками, соответственно, аудиозаписи и видеоролика на web-странице. С полным списком рекомендуемых
к использованию тегов и их атрибутов в соответствии со спецификацией
HTML5 можно ознакомиться, например, на сайте [4]. В данном разделе
мы остановимся только на наиболее часто используемых.
1.3. Теги для структурирования и оформления текста
По умолчанию браузеры игнорируют символы конца строк, табуляции и вставленные лишние пробелы. Поэтому следует пользоваться специальными тегами [5]:
<br> – перевод строки.
8
<p> – тег абзаца (парный). Абзац – это независимый элемент webстраницы, который отображается отдельно от других элементов (такие элементы называются блочными). Абзацы отделяются друг от
друга пустой строкой.
<hr> создает горизонтальную разделительную линию. Она визуально подчеркивает завершенность отделяемой области страницы.
<pre> обеспечивает вывод текста на экран с сохранением изначального форматирования. Поскольку, как уже было отмечено, браузеры игнорируют вставленные лишние пробелы, символы конца
строк и табуляции, то для того, чтобы текст выглядел так, как мы
его вводим, используется этот парный тег предварительного форматирования текста. Следует иметь в виду, что текст будет отображен
моноширинным шрифтом (например, Courier). Этот тег часто используется для создания календарей, таблиц и т. п.
Теги заголовков
Теги от <h1> до <h6> служат для создания заголовков, они также относятся к блочным элементам. При переходе от <h1> к <h6>
уменьшаются размер и толщина шрифта. Эти теги используются
только для выделения заголовков разделов и подразделов, поэтому
необходимо учитывать их иерархию. Так, например, тег <h1> предназначен для создания заголовка самого верхнего уровня, поэтому
рекомендуется использовать его на странице только один раз. Тегом
<h2> обозначаются подзаголовки тега <h1>.
Неразрывный пробел
Если необходимо вставить между словами несколько пробелов, а
также не позволять отделять слова друг от друга переводом строки
(например, имя и фамилию), используется так называемый неразрывный пробел &nbsp;. Обратим внимание на то, что в конце неразрывного пробела ставится символ «точка с запятой».
Списки
Удобным часто используемым приемом структурирования текста
является создание списков. В HTML определены три основных типа
списков:
– упорядоченные (нумерованные) списки;
– неупорядоченные (маркированные) списки;
– списки определений.
Списки и их пункты относятся к блочным элементам webстраницы. Web-браузер выводит список с отступом слева. Расстоя9
ние между пунктами списка он делает меньшим, чем в случае абзацев или заголовков. Также он сам расставляет маркеры или нумерацию. Задавать тип маркера или способ нумерации научимся
позже, посредством технологии каскадных таблиц стилей (CSS3).
Именно она позволяет следовать ранее упомянутому важнейшему
принципу разделения содержимого, представления и поведения
web-страницы. Основам CSS3 посвящен второй раздел данного пособия, а пока будем создавать содержимое, опуская на время тонкости его представления.
1. Упорядоченный список создается с помощью тегов <ol> </ol>
(ordered list). Элементы списка оформляются с помощью парного
тега <li>. Для задания нумерации могут использоваться арабские
цифры (1, 2, 3, ...), прописные латинские буквы (A, B, C, ...), строчные латинские буквы (a, b, c, ...) и т. д. Например, для кода
<ol>
<li> Иванов</li>
<li> Петров</li>
<li>Сидоров</li>
</ol>
список в зависимости от заданного с помощью CSS3 способа нумерации будет представлен одним из вариантов, которые показаны
в табл. 1.2 (множество других вариантов в таблице не приведены).
2. Для создания маркированных списков используются теги <ul>
и </ul> (unordered list). Элементы списка так же, как и для нумерованных списков, задаются с помощью парного тега <li>. В маркированном списке для выделения его элементов используются
специальные символы, называемые маркерами списка. Вид маркера (закрашенный кружок, незакрашенный кружок, закрашенный
квадрат) также задается с помощью CSS3.
В тексте web-страницы можно комбинировать различные типы
списков, а также вкладывать их друг в друга независимо от того,
к одному или разным типам они относятся. Глубина вложения списков не ограничена.
Таблица 1.2
Варианты представления упорядоченного списка
Вариант 1
1. Иванов
2. Петров
3. Сидоров
10
Вариант 2
A. Иванов
B. Петров
C. Сидоров
Вариант 3
a. Иванов
b. Петров
c. Сидоров
Вариант 4
i. Иванов
ii. Петров
iii. Сидоров
3. Списки определений отличаются от рассмотренных типов списков
тем, что в них каждому термину соответствует абзац определения, расположенный с отступом. Такого рода списки довольно часто используются
в учебных материалах, например, при пояснении каких-либо терминов.
Список определений содержится в теге <dl></dl>, а термин и его
определение задаются с помощью парных тегов <dt> и <dd> соответственно.
<dl>
<dt> Термин 1</dt>
<dd> Определение термина 1</dd>
<dt> Термин 2</dt>
<dd> Определение термина 2</dd>
…
</dl>
При этом на экране термины и их определения расположатся примерно так:
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Один из новых тегов, включенных в HTML 5.0, – <details> –
предоставляет удобную возможность отображения на странице подробностей при описании какого-то объекта, например:
Полезные свойства шампиньонов
Содержат витамины:
Е, РР, В, Д
Содержат микро- и макроэлементы:
фосфор, калий, цинк, железо, магний, серу, кальций
Код для данного примера:
<details>
<summary> Полезные свойства шампиньонов</summary>
<dl>
<dt>Содержат витамины:</dt>
<dd>Е, РР, В, Д</dd>
<dt>Содержат микро- и макроэлементы:</dt>
<dd>фосфор, калий, цинк, железо, магний, серу, кальций</
dd>
</dl>
</details>
11
Рис. 1.1. Исходный вид описания объекта
Рис. 1.2. Вид описания после раскрытия деталей
Из этого кода видно, что подробности хранятся в элементах <dt>
(заглавие подробностей) и <dd> (элементы данных подробностей). На
экране данный вид списка будет выглядеть так, как это показано на
рис. 1.1 и 1.2.
Теги для выделения фрагментов текста
Оформление текста web-страницы в основном производится, как
мы уже упоминали, с помощью технологии CSS, большинство ранее
используемых для выделения текста тегов выведены из употребления, но часть тегов осталась и даже добавились новые. Теги для форматирования текста несут смысловую нагрузку и обеспечивают стилевое оформление для текста, заключенного между открывающим и
закрывающим тегами, например, выделяют текст жирным начертанием. Рассмотрим некоторые такие парные теги:
<strong> преобразуют шрифт в полужирный (указывают на
важность текста);
<em> преобразуют текст в курсивный (указывают на значимость
текста);
<i> тоже преобразуют текст в курсивный;
<small> уменьшают размер шрифта на единицу по отношению
к обычному тексту;
<sup> создают из текста верхний индекс (уменьшают размер текста и сдвигают его выше уровня строки);
<sub> создают из текста нижний индекс (уменьшают размер текста и сдвигает его ниже уровня строки);
<code> выделяют фрагменты текста в виде программного кода,
преобразуют текст в моноширинный;
<var> выделяют имена переменных, отображая их курсивом;
12
<cite> выделяют цитаты, названия произведений, сноски на другие документы;
<q> выделяют короткие цитаты, добавляют кавычки;
<blockquote> выделяют блочные цитаты. Текст отделяется пустыми строчками и приобретает отступ слева (можно использовать
несколько раз для усиления эффекта). В тег <blockquote> можно поместить несколько абзацев, заголовки и списки.
Кроме рассмотренных, имеются и другие теги, используемые
для форматирования текста, с полным их перечнем можно ознакомиться на сайтах [4, 5].
1.4. Создание гиперссылок
Гиперссылка, или как ее кратко называют, ссылка, обеспечивает переход с одной web-страницы на другую, но кроме HTML-файлов
она может указывать и на файлы других типов, например текстовые,
звуковые и т. д.
Ссылка состоит из двух частей – указателя и адресной части.
Указатель – это текст либо графическое изображение, по которому
пользователь должен щелкнуть, чтобы выполнился переход. Текстовый
указатель может состоять из нескольких букв, слов или даже строк.
Адресная часть (URL) указывает адрес ресурса, к которому необходимо перейти по щелчку пользователя. Адресная часть ссылки пользователю не видна. URL (Uniform Resource Locator – унифицированный указатель ресурсов) определяет местонахождение
устройств и ресурсов Интернета. Иногда используют аббревиатуру
URI (Uniform Resource Identifier – унифицированный идентификатор ресурса), которая обозначает фактически то же самое.
URL имеет формат следующего вида:
метод доступа://имя сервера /путь доступа.
Метод доступа, или протокол передачи данных, например, http
(HyperText Transfer Protocol – протокол передачи гипертекста), https
(специальная реализация протокола HTTP, использующая шифрование), ftp (File Transfer Protocol – протокол передачи файлов), mailto
(протокол передачи электронной почты) и др.;
имя сервера – описывает полное имя машины в сети, например,
www.ecvp.org;
путь доступа – идентифицирует полный путь к ресурсу на выбранном хосте, например, /abstracts/section1/ paper1.doc.
Для создания ссылок используется парный тег <a> (anchor – якорь).
Контейнер <a>…</a> может использоваться только в теле документа.
13
В этот контейнер и помещается указатель (текст, изображение), который определенным образом помечается web-браузером (например,
текст выделяется другим цветом). Тег <a> имеет обязательный атрибут href, в качестве значения которого используется url документа.
<a href=”…”>Текст указателя</a>
Значение атрибута href может представлять собой абсолютный
или относительный путь поиска.
Абсолютный путь поиска включает в себя следующие компоненты: протокол (например, http), доменное имя или IP-адрес компьютера, имя папки, в которой находится файл, и имя файла.
http://www.mysite.ru/biography/file.html
Относительный путь поиска определяется с учетом местоположения web-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы того же самого сайта.
Если открываемый файл file2.html лежит в том же самом каталоге, где лежит текущий документ, то следует писать
<a href=”file2.html”>Текст указателя</a>.
Если файл file2.html находится на один уровень выше, то используется обозначение
../ file2.html
Если файл file2.html находится на два уровня выше, то обозначается это так:
../../ file2.html.
Если исходный файл располагается в корневом каталоге сайта,
а файл, на который необходимо сделать ссылку, находится в папке,
то ссылка будет иметь следующий вид:
<a href="название папки/file2.html"> Ссылка на другую страницу
сайта </a>.
Для того чтобы указать, где должен открываться документ, к которому ведет ссылка, в тег <a> добавляется атрибут target. В качестве
значений этого атрибута могут быть использованы _ blank (страница
откроется в новом окне браузера), _ self (страница загрузится в текущее окно) и др.
Как было отмечено ранее, ссылка может быть нацелена на документ не только с расширением .html, но и со многими другими (.doc,
.mp3, .jpg, .gif, .txt, .zip, .exe и т. д.). Например:
<a href=”http://www.melody.ru/music.mp3”>Скачать песню </a>
14
Если адрес указан таким способом:
<a href=”http://www.melody.ru/”> Музыкальный сайт </a>,
то это означает, что в указанном каталоге есть файл, например,
index.html, который загрузится по умолчанию.
Вид указателя (цвет, подчеркивание и т. д.) можно задать с помощью каскадных таблиц стилей (см. разд. 2).
Создание внутренних ссылок в документе
Внутренние ссылки, или переход по метке (якорю), обеспечивают переход к различным разделам текущей web-страницы, таблицам, рисункам, терминам и т. д.
Внутренние ссылки также создаются при помощи тега <a>,
но в качестве значения атрибута href следует указать название
метки (якоря, или, как еще говорят, закладки), перед которым
ставится знак #:
<a href=”#text1”>Переход по метке</a>.
Далее в нужном месте документа помещается метка (якорь, закладка). Она создается тоже с помощью тега <a> с обязательным
атрибутом id, который задает имя якоря:
<a id=”text1”>…</a>.
Чаще всего между открывающим и закрывающим тегами <a> не
помещают ничего. Имена якорей должны быть уникальны в пределах документа, они не могут отличаться только регистром. Имена
якорей должны содержать только символы набора ASCII.
Переход на якорь (метку) другого документа
Переход на якорь другого документа, например файла file2.html,
будет иметь следующий вид:
<a href=”file2.html#par1”>текст</a>
В этом случае в файле file2.html должен где-нибудь стоять этот якорь
<a id=”par1”></a>.
Создание почтовых гиперссылок
Такие ссылки указывают на адрес электронной почты. Предположим, мы создаем гиперссылку, указывающую на почтовый адрес
кафедры:
<a href=”mailto:kaf53@guap.ru”>Кафедра 53 – пишите письма </a>.
15
Обратите внимание на то, что между двоеточием после mailto и
адресом не должно быть пробелов!
Создание графической гиперссылки
В этом случае вместо текста указателя внутрь контейнера <a>…</a>
помещается тег вставки изображения в web-страницу
<a href=”file2.html”><img src=”photo1.jpg”></a>.
Вокруг изображения-ссылки браузер создает рамку, убрать ее можно с использованием каскадных таблиц стилей.
Cсылка на телефонный номер
Сравнительно недавно появились новые возможности – по щелчку на ссылке можно не только переходить на другие web-страницы,
а также скачивать файлы, но и звонить по указанному в ссылке номеру телефона, звонить по Skype и т. д. Например, ссылка на телефонный номер может иметь следующий вид:
<a href=”tel:+78121234567”>+7(812)123–45-67</a>.
Создание карты-изображения
Создание карты-изображения (Image Map), или, как ее еще называют, навигационной карты, является одной из привлекательных возможностей HTML, позволяющей привязывать ссылки на другие документы
к отдельным фрагментам изображения. Эта технология может быть использована при создании графических меню, когда формируется одно
большое изображение, составленное из элементов меню; при создании
географических карт, содержащих гиперссылки на web-страницы,
представляющие соответствующие географические объекты; при разработке организационных структур фирм и учреждений и т. д.
Навигационные карты задаются парным тегом map. Между парой
этих тегов вставляются теги area, которые определяют геометрические области внутри карты и ссылки, связанные с каждой областью.
<map...>
<area ...>
<area ...>
...
<area ...>
</map>.
Таким образом, тег <map> служит контейнером для элементов
<area>, которые определяют активные области для карт-изображений.
16
Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Многоточие внутри указанных тегов отражает факт наличия внутри них атрибутов.
Активные области и то, куда пользователь попадет при нажатии
на них, определяет тег <area> и его атрибуты shape и coords.
Атрибут shape задает форму области (прямоугольник (shape=
”rect”), круг (shape=”circle”) или многоугольник (shape=”poly”)).
Для создания активной области прямоугольной формы следует
задать координаты верхнего левого и нижнего правого углов области. Отсчет ведется от левого верхнего угла изображения (0;0). Порядок записи координат следующий:
coords=”x1,y1,x2,y2”.
Для создания круглой области требуется задать координаты ее
центра (x и y) и длину радиуса (R) в пикселях:
coords=”x,y,R”
Многоугольники создаются путем перечисления координат углов:
coords=”x1,y1,x2,y2,...,xN,yN”.
Здесь x1, y1 – координаты первого угла; x2, y2 – координаты второго
угла и т. д. Например, для пятиугольника запись будет выглядеть так:
coords=”x1,y1,x2,y2,x3,y3,x4,y4,x5,y5”.
Далее необходимо указать, на какой документ будет ссылаться созданная активная область, для этого в теге <area> используется атрибут
href.
Чтобы изображение стало ссылкой, необходимо указать имя карты и связать ее с ним. Достигается это применением единого идентификатора в двух тегах: в теге <img> и в теге <map>. В теге <img> для
этого используется атрибут usemap, а в теге <map> – атрибут name, т. е.
имя карты. Имя карты однозначно идентифицирует данную карту,
может содержать только латинские буквы, цифры и знаки подчеркивания и начинаться должно с буквы. К примеру, пусть наша навигационная карта называется navkarta, тогда код будет иметь вид
<map name=”navkarta”>
<area href=”file2.html”shape=”...” coords=”...”>
</map>.
Для того чтобы связать карту с изображением (например, f.gif), надо
при вставке изображения, на основе которого создается карта, использовать атрибут usemap с именем карты после знака # в качестве значения:
<img src=”f.gif” usemap=”#navkarta”>
17
…
<map name=”navkarta”>
<area href=”file2.html” shape=”...” coords=”...”>
</map>.
Как и в случае с обычными ссылками, можно ссылаться на удаленный фрагмент данного документа, тогда в качестве значения
атрибута указывается название метки после знака #:
<area href=”#metka” shape=”...” coords=”...”>.
Целесообразно указывать название для каждой области, что делается с помощью атрибута alt. Тогда при наведении на область будет всплывать надпись с названием данной области.
Таким образом, общая структура кода будет иметь следующий вид:
<img src=”f.gif” usemap=”#navkarta”>
...
<map name=”navkarta”>
<area href=”file2.html” shape=”...” coords=”...” alt=”название
области”>
</map>
При создании карт-изображений можно одновременно использовать разные области, например круг и многоугольник:
<img src=”f.gif” usemap=”#navkarta”>
…
<map name=”navkarta”>
<area href=”file2.html” shape=”circle” coords=”x,y,R”>
<area href=”file3.html” shape=”poly” coords=”x1,y1,x2,y2,
...,xN,yN”>
</map>
Активные области могут пересекаться. В этом случае при нажатии
на область пересечения приоритет имеет та область, которая указана
первой, т. е. пользователь попадет на страницу, куда она ссылается.
Создание навигационных карт может быть существенно упрощено, если использовать специальные программы, ориентированные на разработку графики для web-страниц. К таким программам
относится, например, Adobe Fierworks, с помощью которой можно
легко создать карту, не прописывая коды вручную.
18
2. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
Каскадные таблицы стилей, или CSS (Cascading Style Sheets), отвечают за представление web-страницы, описывают, как она должна выглядеть. Таблицы стилей упрощают разметку HTML и заметно снижают участие языка HTML в представлении документа. Таблицы стилей
существенно расширили возможности улучшения внешнего вида страниц. Подчеркивая важность этой технологии, говорят, что каскадные
таблицы стилей стали своего рода революцией, потрясшей WWW.
Таблица стилей содержит набор правил (стилей), которые определяют параметры шрифта, выравнивание, цвет, виды рамок, размеры и расположение изображений, анимационные эффекты и многое-многое другое.
2.1. Синтаксис таблиц стилей
Определение стиля включает в себя селектор и список атрибутов
стиля с их значениями. Селектор обозначает, что нужно отформатировать (какой элемент страницы). Атрибуты стиля с их значениями задают, как надо отформатировать. Атрибут стиля – это один
из параметров: например, размер шрифта, его цвет, цвет рамки или
фона и т. д.
После селектора ставится пробел и в фигурных скобках указывается список атрибутов и их значений (между ними – двоеточие).
Между парами атрибут стиля и его значение ставится точка с запятой [6]:
h2 {color: white; font-size: 14 pt; font-family: arial}
body {background-color: #0000FF; color: #cccccc}
Внутри селекторов и имен стилей пробелов не должно быть,
в остальных местах браузер пробелы игнорирует.
Селекторы можно набирать как прописными, так и строчными
буквами.
Виды селекторов
1. Универсальный селектор
* {margin: 0; padding: 0}
Универсальный селектор соответствует любому html-элементу.
2. Элементы, специфицированные по их названию (тегу)
p {color: blue}
Это так называемый стиль переопределения тега.
19
3. Элементы, специфицированные по их атрибуту. В качестве такого атрибута могут использоваться:
– Идентификатор (при этом создаются так называемые именованные стили для единственного элемента страницы). В CSS-файле,
например, может быть написано
#par1 {color: navy;…}.
Значит, в HTML-документе имеется элемент, в данном случае параграф, с таким идентификатором:
<p id=”par1”> …
Часто идентификатор id используют для парного тега <div>. Эти
парные теги образуют своего рода контейнер, в который помещается фрагмент содержимого web-страницы (там могут быть текст, графика и т. д.). При этом данный фрагмент будет обрамлен пустыми
строками, поэтому он должен охватывать целые абзацы, не прерывая их. Задание стиля применительно к тегу <div> выполняется
аналогично тегу <p>.
– Класс. Селекторы класса позволяют задавать стили для одного
и более элементов, которые могут быть разными (например, параграфы, заголовки и т. д.), могут быть размещены в разных местах
web-страницы или на разных страницах сайта, но важно, чтобы они
имели одинаковое имя класса. Перед названием класса используется лидирующая точка. Предположим, стили для двух классов были
заданы следующим образом:
.redtext {color: red}
.second {font-size: 20px}.
В самом HTML-документе эти классы были назначены ряду тегов:
<h1 class=”redtext”>Заголовок</h1>
<p class=”redtext”>Какой-то абзац</p>
<h2 class=”second”>Заголовок</h2>
<p class=”second”>Другой абзац</p>.
В этом случае и заголовок первого уровня, и какой-то абзац будут иметь красный цвет шрифта. Остальные свойства, например заголовка, если они были определены ранее, сохранятся.
В качестве значения атрибута class можно указывать сразу несколько имен классов через пробел
<h2 class=”redtext second”>…
Подчеркнем основное отличие между классами и идентификаторами: в документе какой-либо класс может быть присвоен сразу несколь20
ким элементам, а идентификатор – только одному. Важно учитывать
и то, что имена классов и идентификаторов чувствительны к регистру.
– Псевдокласс. Псевдоклассы можно использовать в селекторах
правил форматирования, однако реально в тексте web-документа
они не существуют. Например, можно описать правила отображения связей (гиперссылок) через псевдоклассы тега <a>. При этом
псевдоклассы будут описывать вид гиперссылки с определенным
состоянием в web-документе:
a:link {text-decoration:none}
a:visited {text-decoration:none; color: navy}
a:active {text-decoration:none; color:maroon}
a:hover {text-decoration:underline; color:red}.
Кстати заметим, что с помощью приведенной записи мы получили симпатичный эффект «подсветки» (на самом деле изменения
цвета) гиперссылки и ее подчеркивания при наведении указателя
мыши. Можно было бы изменять и другие параметры шрифта (например, размер), но часто это выглядит неудачно, и потому прежде
чем добавлять какие-то стили, следует поэкспериментировать.
– Псевдоэлементы:
p::first-letter {font-size:30px}.
Этот стиль предназначен для создания так называемой «буквицы», когда первая буква абзаца имеет стиль, отличный от последующих букв. Иногда при обозначении псевдоэлементов используют
одинарное двоеточие p:first-letter.
Группировка селекторов
h4, h5, .redtext {color: red}.
Комбинация названия тега и имени стилевого класса
p.redtext {color: red; font-size:larger}.
Это означает применение данного стиля к любому тегу <p>, для
которого указано имя данного стилевого класса.
Селектор потомка, или контекстные селекторы
Его применяют к элементу, к тегу, вложенному в другой тег:
ul li {color:blue}.
Названия тегов разделяются пробелом. Заданный стиль будет
применен ко всем элементам li, являющимся потомками всех эле21
ментов ul. Такие селекторы еще называют контекстными селекторами, поскольку можно сказать, что стиль применяется контекстно. Например, если мы хотим, чтобы курсивный текст был голубым всегда, когда он является заголовком 2-го уровня, т. е. находится между тегами <h2> и </h2>, то в таблице стилей напишем
h2 em {color: blue}.
В самом HTML-документе можем написать
<h2><em>Какой-то текст (шрифт будет голубым курсивным) </em></h2>
<em>Какой-то текст (шрифт будет черным курсивным)</em>.
Если нужно отформатировать потомки определенного элемента,
то этому элементу задают стилевой класс:
p.redtext a {font-family:arial}
Данный стиль применится ко всем ссылкам, которые являются
потомками абзаца с классом .redtext.
Если запись имеет вид
p .redtext a {font-family:arial} ,
т. е. после первого селектора перед классом добавили пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса .redtext, который является потомком элемента <p>.
Дочерний селектор
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. У одного элемента может быть
несколько дочерних элементов. Дочерний селектор используют в том
случае, когда необходимо выбрать элементы определенного типа из
множества дочерних элементов. Дочерний селектор позволяет применить стили, только если дочерний элемент идет сразу за родительским
элементом, не будучи вложенным ни в какой другой элемент. Если, например, необходимо задать стиль для всех элементов em, являющихся
дочерними по отношению к p, то селектор будет иметь вид
p > em.
Соседние, или смежные, или сестринские селекторы
Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Селекторы
соседних элементов позволяют выбрать элементы из группы элементов одного уровня.
h1 + p {font-size: 20px}.
22
Стиль при такой записи применяется к элементу, записанному после
знака (+), в данном случае селектор задает размер шрифта для каждого
первого параграфа, идущего непосредственно за любым тегом <h1>.
h1 ~ p {font-size: 20px}.
В этом случае стиль будет задан для всех абзацев, являющихся
сестринскими по отношению к любому заголовку h1 и идущих сразу
после него. При этом <h1> и <p> должны иметь общего родителя, поэтому если <p> вставить внутрь <div>, то стиль применяться не будет.
Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута. Рассмотрим примеры:
[alt] – такой селектор позволяет выбрать все элементы, для которых задан атрибут alt;
img[alt] – с помощью такого селектора можно задать стиль в данном примере изображениям, для которых определен атрибут alt;
а [href= ”http://www.guap.ru”] {color:green} – все ссылки с указанным значением атрибута href будут зеленого цвета.
Рассмотренные виды селекторов относятся к наиболее часто используемым и не исчерпывают всего их многообразия. В заключение необходимо еще остановиться на понятии наследование. Оно
подразумевает, что задание свойств для элемента, порождающего
другие элементы, распространится и на них. Например, если задать
body {color: black; font-family: arial; background: aqua},
то это будет означать форматирование документа по умолчанию.
Применение стиля к части элемента страницы
Если требуется применить стиль не к целому абзацу или заголовку, а к части какого-то элемента страницы (например, к одному
или нескольким словам), то используют парный тег <span>. Он не
является дескриптором уровня блока, как теги <p>, <div>, и потому не вызывает отделение заданного фрагмента пустыми строками:
<style>
.def {font-weight:bold; color:maroon; font-style:italic}
</style>
…
<body>
<p> Направление <span class=”def”> Информационные системы и
технологии</span> одно из самых популярных в ГУАП<p>
23
В итоге получаем абзац, внутри которого несколько слов будут
выделены темно-красным полужирным курсивом.
Оформление таблицы стилей
Атрибуты селекторов в рассмотренных примерах мы для экономии места записывали в одну строку. Чаще для улучшения читабельности кода и упрощения его редактирования каждое свойство
располагают на отдельной строке:
p.redtext {
color: red;
font-size:larger
},
однако при этом из-за использования переносов строк незначительно возрастает объем данных.
Комментарии
Комментарии в каскадных таблицах стилей задаются так же,
как в языке С. Многострочный комментарий:
.redtext {color: red} /* красный текст */.
Однострочный комментарий создают с помощью символа / (слэш)
в самом начале строки, которая станет комментарием:
/ Красный текст
.redtext {color: red}.
2.2. Разновидности таблиц стилей
Таблицы стилей в зависимости от места их хранения разделяются на два вида. Таблица стилей может храниться в коде самой webстраницы или, что больше соответствует концепции Web 2.0, в отдельном файле.
Внешние таблицы стилей
Задание информации о стиле делается во внешнем файле с расширением .css (Cascading Style Sheets). В этом файле кроме описания стилей ничего не содержится:
body {color: black; font-family: arial; background: aqua}
.redtext {color: red}
#par1 {color: navy;…}
24
Внешние таблицы могут быть использованы для нескольких
документов сразу. Отделение таблицы стилей от документа HTML
дает следующие преимущества:
– использование таблицы стилей сразу в целом ряде web-страниц
и даже в других сайтах;
– изменение таблицы стилей без изменения HTML-документа;
– существенное уменьшение размеров файлов HTML-документов.
Когда создается внешняя таблица стилей, возникает необходимость
связать ее с каждой из разрабатываемых web-страниц, для которых
она будет применена. Для этого в секцию заголовка HTML-документа
помещается одинарный метатег <link>:
<head>
…
<link rel=”stylesheet” href=”http://.....mystyles1.
css” type=”text/css”>
…
</head>
Путь к файлу с расширением .css может быть как абсолютным,
так и относительным. Атрибут rel указывает, чем является файл,
на который ссылается тег <link>, для текущей web-страницы; значение ”stylesheet” говорит, что этот файл – внешняя таблица стилей, а атрибут type указывает тип MIME (Multipurpose Internet
Mail Extensions – многоцелевые расширения почты Интернета)
файла, на который ссылается данный тег. Внешняя таблица стилей
имеет тип MIME text/css, а, например, сама web-страница имеет
тип MIME text/html.
Внутренние таблицы стилей
Задание информации о стиле делается в заголовке документа, ее
заключают в парный тег <style>:
<head>
…
<style>
h1 {text-align: center}
.redtext {color: red}
</style>
…
</head>.
Такое задание стиля распространяется на весь документ. Удобство внутренней таблицы стилей в том, что она никогда не «поте25
ряется». Недостатки использования внутренней таблицы стилей
существенные:
– стили, определенные во внутренней таблице стилей, применяются только к той web-странице, в которой эта таблица стилей находится;
– внутренняя таблица стилей не в полной мере соответствует концепции Web 2.0, требующей отделять содержимое web-страницы от ее
представления.
Встроенные стили
Встроенные стили используются в тех случаях, когда необходимо оформить только один определенный элемент в HTMLдокументе. Называются встроенными они потому, что встраиваются в нужный тег.
Определение встроенного стиля указывают в качестве значения
атрибута style этого тега:
<p style="font-size: 20pt; font-style: italic">…</p>
Фигурные скобки здесь не ставятся. В определении встроенного стиля вместо кавычек используются апострофы (например, если
требуется указать название гарнитуры шрифта в несколько слов).
Встроенные стили используются не часто, как правило, только
для выполнения редактирования страницы во время экспериментов со стилями. Это связано с тем, что такой подход, как уже отмечалось, не соответствует концепции Web 2.0.
Импортирование CSS
В заключение рассмотрения вопроса о разновидностях таблиц
стилей покажем возможность импортировать содержимое CSSфайла в текущую стилевую таблицу (внешнюю или внутреннюю).
Для этой цели используется команда @import.
– Импортирование CSS во внутреннюю таблицу:
<style>
@import url("style/header.css");
h1 {font-size:120%; font-family:Arial; color:green}
</style>
– Импортирование CSS во внешнюю таблицу:
@import url("style/text1.css");
@import url("style/text2.css");
body {font-family: Arial, Verdana; background: white;
color:black}
26
2.3. Каскадность таблиц стилей
К одной web-странице могут быть применены сразу несколько таблиц стилей. Кстати, так часто и делается. При этом действует принцип приоритетности. Браузер выстраивает приоритетность применения этих стилей в виде каскада.
Стили, подключенные разным способом, имеют разный приоритет:
– внешние стили – приоритет 1;
– внутренние стили – приоритет 2;
– встроенные стили – приоритет 3 (самый высокий).
В том случае, когда web-страница имеет несколько стилей, подключенных разным способом, и в них заданы разные свойства оформления для одного и того же элемента, в итоге элемент будет оформлен
согласно содержимому стиля с более высоким приоритетом.
Правила каскадности [2]
1. Внешняя таблица стилей, ссылка на которую (тег <link>) встречается в HTML-коде страницы позже, имеет приоритет перед той,
ссылка на которую встретилась раньше.
2. Внутренняя таблица стилей имеет приоритет перед внешними.
3. Встроенные стили имеют приоритет перед любыми стилями,
заданными в таблицах стилей.
4. Более конкретные стили имеют приоритет перед менее конкретными. Это значит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, так как стилевой класс привязывается к конкретным тегам. Точно так же комбинированный
стиль имеет приоритет перед стилевым классом.
5. Если к тегу привязаны несколько стилевых классов, то те, что
указаны правее, имеют приоритет перед указанными левее.
Если необходимо сохранить какой-то стиль, невзирая на все возможные последующие таблицы, которые могут его заменить, отдельные атрибуты можно помечать как важные. Это позволяет корректно «нарушать»
правила каскадности. Чтобы сделать атрибут стиля важным, необходимо
после его значения через пробел поставить слово !important (между восклицательным знаком и словом «important» пробел не ставится):
.bluetext {color: #0000FF; font-weight: bold !important}.
2.4. Атрибуты стилей CSS3
В настоящее время имеется огромное количество разнообразных
атрибутов, каждый из которых может принимать, как правило,
27
целый ряд значений. Ввиду такого разнообразия свойств CSS3 рассмотрим только наиболее часто употребляемые. С полным перечнем
можно ознакомиться, например, на сайте [6]. Там же рекомендуется
получить информацию о том, какими браузерами (их версиями) на
момент создания web-сайта поддерживается каждое из свойств.
Атрибуты стилей, задающие параметры шрифта
1. font-family указывает имя шрифта.
В качестве значения этого свойства задается либо непосредственно имя нужного шрифта (если такого шрифта нет, то текст выводится
шрифтом, заданным в настройках по умолчанию), либо можно задавать одновременно несколько шрифтов, разделив их имена запятыми:
p {font-family: Arial, Verdana}.
В этом случае web-браузер сможет выбрать тот из указанного перечня,
который установлен на компьютере. Браузер начинает поиск с первого из
перечисленных шрифтов, если его не находит, то ищет второй, и т. д.
Имена шрифтов задаются в виде их названий, например Arial или
Times New Roman. Если имя шрифта содержит пробелы, его нужно
заключить в кавычки:
h3 {font-family: “Times New Roman”}.
Если данный атрибут стиля присутствует во встроенном стиле,
то, как уже отмечалось, кавычки заменяют апострофами:
<p style=”font-family: ‘Times New Roman’”>.
Вместо имени конкретного шрифта можно задать имя одного из
семейств шрифтов, представляющих наборы аналогичных шрифтов. Таких семейств пять:
– serif (шрифты с засечками);
– sans-serif (шрифты без засечек);
– cursive (шрифты, имитирующие рукописный текст);
– fantasy (декоративные шрифты);
– monospace (моноширинные шрифты).
Например:
h3 {font-family: Arial, Verdana, sans-serif }.
Значение атрибута стиля font-family по умолчанию – inherit.
При этом текст элемента web-страницы будет набран тем же шрифтом, что и текст родительского элемента.
Обратим внимание на то, что условно шрифты разделяются на те,
которые без проблем отображаются у большинства пользователей (их
28
называют безопасными шрифтами), и на те, которые у большинства
пользователей отсутствуют (так называемые опасные шрифты). Безопасным шрифтом можно считать шрифт, который является стандартным для всех операционных систем (ОС). На основе шрифтов
Windows, использующихся в других ОС, сформировался следующий
список безопасных web-шрифтов: Arial, Verdana, Times, Georgia,
Courier New и несколько других. Подробно о выборе шрифта написано в работе [7].
Имеется возможность встраивания нужных шрифтов, в этом
случае браузер загружает эти шрифты в кэш и использует их для
оформления текста на странице. Для этого может быть использовано правило @font-face [8].
2. font-size задает размер шрифта, используемого в элементе страницы. У этого свойства значения могут быть заданы следующими способами:
font-size: <размер>| xx-small |x-small | small | medium |
large | x-large | xx-large |larger | smaller
Для задания размера шрифта могут использоваться абсолютные
и относительные единицы измерения.
Абсолютные единицы измерения:
– pt – пункты (1 пункт равен 1/72 дюйма);
– in – дюйм (1 дюйм равен 2,54 см);
– mm – миллиметр;
– cm – сантиметр;
– pc – пика (1 пика равна 12 пунктам).
Относительные единицы измерения:
– em – размер буквы «m» текущего шрифта;
– ex – размер буквы «x» текущего шрифта;
– px – пиксел;
– % – процент.
Примеры:
font-size: 200% – относительная величина (проценты);
font-size: 50px – размер в пикселах;
font-size: 30pt – размер в пунктах;
font-size: smaller – размер шрифта, который на размер меньше
родительского шрифта.
3. font-weight задает «жирность» шрифта, для чего может быть
использовано одно из следующих значений:
font-weight: normal |bold |bolder |lighter |100..900.
29
Для задания этого свойства используются следующие способы:
– использование предопределенных значений normal и bold, задающих обычное и жирное начертание соответственно;
– использование относительных значений bolder и lighter, делающих шрифт элемента страницы жирнее и светлее шрифта родителя (следующие степени жирности);
– использование одного из девяти значений от 100 до 900 (значение должно быть кратно 100), при этом нормальному начертанию
соответствует значение 400, а жирному – 700.
По умолчанию применяется значение normal (400).
4. font-style задает начертание шрифта:
font-style: normal | italic |oblique |inherit
font-style: normal задает обычный вид шрифта (используется
по умолчанию);
font-style: italic задает курсивное начертание;
font-style: oblique задает наклонное начертание (легкий наклон нормального шрифта).
5. font-variant задает вид малых букв шрифта:
font-variant: normal| small-caps;
font-variant: normal задает обычный вид малых букв шрифта
(используется по умолчанию);
font-variant: small-caps делает буквы такими же, как большие, только меньшего размера (капитель).
6. сolor определяет цвет элемента.
Цвет можно задать, используя его название или шестнадцатеричный RGB-код (Red, Green, Blue – красный, зеленый, синий), в котором доли всех цветов указаны в виде шестнадцатеричных чисел
от 00 до FF:
h1 {color: #0000FF}
h2 {color: blue}.
7. opacity позволяет указать степень непрозрачности элемента:
p {opacity:0.6}.
8. font позволяет задать одновременно сразу несколько параметров
шрифта: имя, размер, начертание, вид строчных букв, жирность и т. д.
Обязательным параметром является только имя шрифта, остальные параметры могут отсутствовать:
p {font: italic 12pt Arial}.
9. font-stretch устанавливает узкое, нормальное или широкое
начертание шрифта, что позволяет уплотнять или расширять текст.
30
При этом могут быть использованы следующие способы задания
значений этого свойства:
font-stretch: inherit | ultra-condensed | extra-condensed |
condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded
Кроме перечисленных имеются также и другие атрибуты стилей
для шрифта [6].
Атрибуты стилей, задающие параметры текста
1. text-decoration задает специальное оформление текста: подчеркнутый, зачеркнутый и т. п.:
text-decoration:none отменяет любое специальное оформление
(значение по умолчанию для большинства тегов);
text-decoration:underline подчеркивает текст;
text-decoration:overline черта сверху текста;
text-decoration:line-through зачеркивает текст.
2. text-align определяет горизонтальное выравнивание текста
в блочном элементе:
text-align: left выравнивает по левому краю (по умолчанию);
text-align: right выравнивает по правому краю;
text-align: center выравнивает по центру;
text-align: justify выравнивает по обоим краям (по ширине).
3. text-transform позволяет изменить регистр символов текста.
Можно преобразовать текст к верхнему (значение uppercase
этого атрибута) или нижнему (lowercase) регистру, преобразовать
к верхнему регистру первую букву каждого слова (capitalize) или
оставить в изначальном виде (none).
4. line-height задает высоту строки текста.
Если в качестве значения этого атрибута задано некоторое число,
большее нуля, оно будет восприниматься как множитель от размера
шрифта текущего текста. Так, например, значение 1.5 устанавливает полуторный межстрочный интервал [6]. В качестве значений
принимаются также любые единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др. Если в качестве значения
используются проценты, то за 100 % берется высота шрифта.
Пример: для увеличения высоты строки вдвое по сравнению с обычной мы можем написать
p { line-height: 2}.
5. letter-spacing позволяет задать дополнительное расстояние
между символами текста. Можно задать абсолютное и относительное рас-
31
стояние, указав соответствующую единицу измерения CSS. Наилучший
результат дает использование относительных единиц, основанных на
размере шрифта (em и ex). Расстояние может быть положительным и отрицательным. В последнем случае символы шрифта будут располагаться
друг к другу ближе обычного, и надо следить за тем, чтобы текст хорошо
читался:
h1 {letter-spacing: 3px} – текст будет разреженным;
h3 {letter-spacing: -1px} – текст будет уплотненным.
6. word-spacing устанавливает интервал между словами. В качестве значений принимаются любые единицы длины, принятые в CSS:
h1 {word-spacing: 5mm}
7. white-space задает правила, управляющие разрывом строк.
Значения этого атрибута могут быть следующими:
normal – последовательности пробелов преобразуются в один
пробел, web-браузер сам разрывает текст на строки, чтобы вместить
его в свое окно по ширине;
pre – текст выводится в том виде, в каком он записан в HTMLкоде, т. е. с учетом всех пробелов и переносов, web-браузер сам не
разрывает текст на строки (если строка текста оказывается слишком длинной и не помещается в окне браузера, то добавляется горизонтальная полоса прокрутки);
nowrap – пробелы не учитываются, переносы строк в коде HTML
игнорируются, весь текст отображается одной строкой;
pre-wrap – в тексте сохраняются все пробелы и переносы, webбраузер автоматически разрывает слишком длинные строки, чтобы
избежать горизонтальной прокрутки;
pre-line – последовательности пробелов преобразуются в один
пробел, переводы строк сохраняются, текст автоматически переносится на следующую строку, если он не помещается в заданную область, чтобы избежать горизонтальной прокрутки.
В качестве примера рассмотрим стиль, переопределяющий тег
<pre> таким образом, чтобы при необходимости его содержимое разрывалось на строки:
pre { white-space: pre-wrap}.
8. vertical-align выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Этот атрибут имеет восемь значений [6]:
baseline выравнивает базовую линию блока по базовой линии
родителя; если у блока нет базовой линии, то за нее принимается
нижняя граница;
32
sub опускает базовую линию блока вниз для создания нижнего
индекса, не оказывает влияние на размер текста;
super поднимает базовую линию блока вверх для создания верхнего индекса, не оказывает влияние на размер текста;
top выравнивает верхний край фрагмента текста по верхнему
краю родительского элемента;
text-top выравнивает верхнюю границу элемента по верхнему
краю содержимого родителя;
middle выравнивает вертикальную среднюю точку блока по
базовой линии родительского блока плюс половина высоты буквы «x»;
bottom выравнивает низ блока по нижней части строки;
text-bottom выравнивает нижнюю границу элемента по нижнему краю содержимого родителя.
Рассмотрим ряд полезных примеров.
Создание верхнего индекса:
.supind {vertical-align:super; font-size:smaller}.
Выравнивание графического изображения, являющегося частью
абзаца:
<p>Кнопка<img style="vertical-align: text-bottom"
src="button.gif"> для выбора инструмента рисования</p>
Низ изображения кнопки будет выровнен по нижнему краю текста абзаца (изображение будет как бы возвышаться над текстом).
text-indent – отступ красной строки. Значение по умолчанию 0.
Применяется к блочным элементам. Допускаются абсолютные и относительные (процент от ширины абзаца) величины отступа. Для создания
выступа первой строки может быть указано отрицательное значение.
p {text-indent: 5mm }.
text-shadow – создание тени у текста. Этот атрибут добавляет
тень к тексту, а также устанавливает ее цвет, смещение относительно надписи и радиус размытия. Формат записи
text-shadow:<сдвиг по x><сдвиг по y><радиус размытия><цвет>.
Цвет тени задается в виде названия цвета или шестнадцатеричного RGB-кода. Горизонтальное и вертикальное смещение задается
с помощью любых поддерживаемых CSS3 единиц измерения, сами
значения могут быть положительными или отрицательными. Если
задано положительное смещение, тень будет расположена правее
(ниже) текста, если отрицательное – левее (выше).
33
text-shadow: 1px 1px 3px black
– в этом случае тень черного цвета расположена правее и ниже
текста на 1 мм и имеет радиус размытия 3 пиксела.
Задание стилей для списков
1. list-style-type задает вид маркеров или нумерации у пунктов списка:
list-style-type: disc|circle|square|decimal|decimal-leadingzero| lower-roman|upper-roman|lower-greek|lower-alpha|lowerlatin|upper-alpha|upper-latin| armenian| georgian|none|inherit
disc – маркер в виде черного кружка (значение по умолчанию);
circle – маркер в виде светлого кружка;
square – маркер в виде квадратика, он может быть светлым или
темным, в зависимости от web-обозревателя;
decimal – нумерация арабскими цифрами (значение по умолчанию);
decimal-leading-zero – нумерация арабскими цифрами от 01 до
99 с начальным нулем;
lower-roman – нумерация римскими цифрами в нижнем регистре (i, ii, iii, iv, v, ...);
upper-roman – нумерация римскими цифрами в верхнем регистре (I, II, III, IV, V, ...);
lower-greek – нумерация строчными греческими буквами (α, β,
γ, δ, ...);
lower-alpha и lower-latin – нумерация строчными латинскими
буквами (a, b, c, d, ...);
upper-alpha и upper-latin – нумерация заглавными латинскими буквами (A, B, C, D, ...);
armenian – нумерация традиционными армянскими цифрами;
georgian – нумерация традиционными грузинскими цифрами;
none – маркер и нумерация отсутствуют (обычное поведение для
не-списков).
2. list-style-position позволяет задать то, как будет отображаться текст внутри списка, если текст элемента списка длиннее строки:
list-style-position: inside | outside
– inside – маркер обтекается текстом.
Пример списка, где маркер обтекается текстом:
– системы, поддерживающие банки данных (фактографические
базыданных);
34
– системы документографические, поддерживающие полнотекстовые документальные архивы;
– системы информационного обслуживания (системы научно-технической информации, информационно-поисковые системы).
– outside – маркер вынесен за границу элемента списка.
Пример списка, где маркер вынесен за границу элемента списка:
– системы, поддерживающие банки данных (фактографические
базы данных);
– системы документографические, поддерживающие полнотекстовые документальные архивы;
– системы информационного обслуживания (системы научнотехнической информации, информационно-поисковые системы).
3. list-style-image определяет замену маркеров в списках на изображение. Устанавливает адрес изображения, которое служит в качестве маркера списка. Это свойство наследуется, поэтому для отдельных элементов списка в целях восстановления маркера используется
значение none, которое отменяет изображение в качестве маркера.
url – относительный или абсолютный путь к графическому файлу. Значение можно указывать в одинарных, двойных кавычках
или без них:
list-style-image: url(images/book.gif).
4. list-style – универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение,
которое будет использоваться в качестве маркера:
list-style: list-style-type | list-style-position | list-styleimage
Могут быть заданы любые комбинации трех значений, определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале
идет тип маркера, затем положение и картинка. Ни одно значение не
является обязательным, поэтому неиспользуемые можно опустить [2].
Пример задания квадратных маркеров, которые размещаются за
пределами текстового блока:
ul {list-style: square outside}
Задание обрамления, полей и отступов
1. border-color задает цвет всех границ элемента страницы.
border-color:
transparent|<цвет>
35
Может быть задано от одного до четырех значений, разделенных
между собой пробелами:
– если задано одно значение, оно применяется ко всем четырем
границам;
– если задано два значения, первое относится к верхней и нижней границам, а второе – к левой и правой;
– если задано три значения, то первое применяется к верхней
границе, второе – к левой и правой, третье – к нижней;
– если задано четыре значения, то они относятся соответственно
к верхней, правой, нижней и левой границам.
Сразу отметим, что данное правило задания нескольких значений будет относиться и к другим атрибутам стиля рамки.
Возможно использование атрибутов стиля border-left-color,
border-top-color, border-right-color и border-bottom-color,
которые задают цвет соответственно левой, верхней, правой и
нижней сторон рамки.
2. border-style устанавливает стиль границы вокруг элемента
страницы.
border-style: none|hidden|dotted|dashed|solid|double|groove|
ridge | inset|outset
none и hidden – рамка отсутствует, ее толщина равна нулю;
dotted – точечная линия;
dashed – штриховая линия;
solid – сплошная линия;
double – двойная сплошная линия;
groove – трехмерная вдавленная линия;
ridge – трехмерная выпуклая линия
и др.
Может быть задано от одного до четырех значений, их действие будет подчиняться тому же правилу, что и для предыдущего атрибута.
Атрибуты стиля border-left-style, border-top-style, borderright-style и border-bottom-style задают стиль линий, которыми
будет нарисована соответственно левая, верхняя, правая и нижняя сторона рамки.
3. border-width задает толщину всех границ элемента страницы
border-width: thin| medium |thick|<толщина>.
Можно указать либо абсолютное или относительное числовое значение толщины рамки, либо одно из предопределенных значений:
thin (тонкая – 2 пиксела), medium (средняя – 4 пиксела) или thick
36
(толстая – 6 пикселов). Значение толщины по умолчанию зависит от
web-браузера, поэтому ее всегда лучше устанавливать.
h1 {border-bottom-width: 5px}
– такое описание стиля сделает все заголовки первого уровня подчеркнутыми.
Атрибут стиля border-width позволяет указать значения толщины сразу для всех сторон рамки, используя от одного до четырех
значений:
border-width: 3px 7px 3px 7px
– такое описание стиля будет обозначать, что сверху и снизу рамка
более тонкая, чем слева и справа.
Атрибуты стиля border-left-width, border-top-width, borderright-width и border-bottom-width задают толщину соответственно левой, верхней, правой и нижней сторон рамки.
4. border – это универсальное свойство. Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Значения разделяются пробелом и могут идти в любом порядке:
#cont1 {border: thin double red}.
Если требуется установить стили границы только на определенных сторонах элемента, удобно использовать свойства border-top,
border-bottom, border-left, border-right.
5. border-radius позволяет создавать скругленные уголки.
Это свойство может иметь одно, два, три или четыре значения,
разделенных пробелом, которые и определяют радиус всех уголков
или каждого по отдельности:
– если указано одно значение, то одинаковый радиус задан для всех
четырех уголков;
– если заданы два значения, то первое значение задает радиус
верхнего левого и нижнего правого уголка, второе значение – верхнего правого и нижнего левого уголка;
– если заданы три значения, то первое значение устанавливает радиус для верхнего левого уголка, второе – одновременно для верхнего
правого и нижнего левого, а третье – для нижнего правого уголка;
– если заданы четыре значения, то они устанавливают радиус
соответственно для верхнего левого, верхнего правого, нижнего
правого и нижнего левого уголка.
Интересные примеры использования данного свойства представлены на сайте [9].
6. padding позволяет установить значение полей вокруг содержимого элемента. Полем называется расстояние от внутрен-
37
Поле
Полем называется
расстояние
от внутреннего края
рамки элемента
до ...
Рис. 2.1. Иллюстрация понятия «поле»
него края рамки элемента до воображаемого прямоугольника,
ограничивающего его содержимое. Для примера на рис. 2.1 показано поле слева от текста:
padding: [значение | проценты] {1, 4}
Могут быть заданы одно, два, три или четыре значения, разделенные между собой пробелом:
– одно значение означает установку одинаковых полей от каждого края элемента;
– при задании двух значений первое устанавливает поля от верхнего и нижнего края, второе – от левого и правого;
– при задании трех значений первое значение задает поле от верхнего края, второе – одновременно от левого и правого края, а третье –
от нижнего края;
– при задании четырех значений соответственно устанавливаются поля от верхнего, правого, нижнего и левого края.
Величину полей можно задавать в пикселах (px), процентах (%)
или других допустимых для CSS единицах:
border: 2px solid black; /* Параметры рамки */
padding: 20px; /* Поля вокруг текста */
При задании поля в процентах значение считается от ширины родителя элемента.
7. margin устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. На рис. 2.2 для
примера показан отступ от левого края элемента.
margin: [<размер> | <проценты> | auto] {1,4}
Разрешается задавать одно, два, три или четыре значения, разделенных между собой пробелом:
38
Отступ
Отступом называется
пространство от
границы текущего ...
Рис. 2.2. Иллюстрация понятия «отступ»
– одно значение означает установку одинаковых отступов от каждого края элемента;
– при задании двух значений первое устанавливает отступ от верхнего и нижнего края, второе – от левого и правого;
– при задании трех значений первое задает отступ от верхнего края, второе – одновременно от левого и правого края, а третье – от нижнего края;
– при задании четырех значений соответственно устанавливаются отступы от верхнего, правого, нижнего и левого края.
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может
быть задано как положительным, так и отрицательным числом.
Если для задания отступа использовано значение auto, то это значит, что размер отступов будет автоматически рассчитан браузером.
Можно также использовать атрибуты стилей margin-left,
margin-right, margin-top, margin-bottom.
Задание фона web-страницы
Фон можно задать для всей web-страницы, для фрагмента текста
(встроенного элемента), блочного элемента, таблицы в целом, для ее
строк и ячеек. Однако следует иметь в виду, что фон у отдельных
элементов, отличный от фона самой web-страницы, рекомендуется
задавать так, чтобы не мешать восприятию информации. Рассмотрим используемые для задания фона атрибуты стилей.
1. background-color задает фоновый цвет web-страницы или ее
элемента:
background-color: {Цвет}|transparent;
Значением по умолчанию является transparent, т. е. «прозрачный» фон. В этом случае фон web-страницы задает web-браузер.
body {background-color: #cccccc}.
39
2. background-image позволяет назначить в качестве фона графическое изображение, оно называется фоновым изображением:
background-image: none|url(<интернет-адрес файла изображения>).
Значение none является значением по умолчанию. Для того чтобы
задать графическое изображение в качестве фонового, следует интернет-адрес файла с фоновым изображением заключить в скобки, а
перед ними поставить символы url. Путь к файлу при этом можно
писать как в кавычках (двойных или одинарных), так и без них.
Графический фон выводится поверх обычного фона, заданного
с помощью атрибута стиля background-color. При задании фонового изображения целесообразно одновременно задавать и цвет фона,
близкий по тону к изображению. Это позволит сохранить примерный
вид страницы в тех случаях, когда у пользователя отключена загрузка изображений или фоновое изображение долго загружается.
Если размер фонового изображения меньше, чем элемент, для которого оно задано, то web-браузер будет повторять это изображение, пока
не «замостит» им весь элемент. Получится что-то вроде мозаики. Это
накладывает ограничение на выбор фоновых изображений (не должно
быть видно границ между соседними отдельными изображениями).
При выборе фоновой графики следует также обращать внимание
на размер графического файла для обеспечения высокой скорости
загрузки. Но в погоне за малым размером изображения не следует
делать фоновое изображение размером в несколько пикселов, поскольку на его загрузку потребуется времени даже больше, чем на
загрузку фонового изображения размером 50 × 50. Важным при выборе фонового изображения является и эстетический аспект – сложный рисунок быстрее надоедает и может мешать чтению текста.
3. background-repeat устанавливает порядок повторения фонового рисунка на web-странице или ее элементе.
background-repeat: no-repeat|repeat|repeat-x|repeat-y
no-repeat – фоновое изображение не будет повторяться;
repeat – фоновое изображение будет повторяться по горизонтали
и вертикали (обычное поведение);
repeat-x – фоновое изображение будет повторяться только по горизонтали;
repeat-y – фоновое изображение будет повторяться только по
вертикали.
4. background-position задает местонахождение фонового рисунка относительно элемента web-страницы, для которого оно назначено:
40
background-position: <горизонтальная позиция> [<вертикальная
позиция>]
Горизонтальная позиция фонового изображения может быть задана с использованием следующих значений:
<числовое значение>|left|center|right
Числовое значение указывает местоположение фонового изображения в элементе web-страницы по горизонтали. Координата может быть
задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) и
т. д. с применением любой из поддерживаемых CSS единиц измерения.
left (значение по умолчанию) – фоновое изображение прижимается к левому краю элемента web-страницы;
center – располагается по центру;
right – прижимается к правому краю.
Вертикальная позиция фонового изображения может быть задана с использованием следующих значений:
<числовое значение>|top|center|bottom
Числовое значение указывает местоположение фонового изображения в элементе web-страницы по вертикали и может быть задано
аналогично заданию горизонтальной координаты.
top (значение по умолчанию) – фоновое изображение прижимается к верхнему краю элемента web-страницы;
center – располагается по центру;
bottom – прижимается к нижнему краю.
Если применяются вышеприведенные ключевые слова, то порядок
их следования не имеет значения. При процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Связь между используемыми ключевыми словами и процентной записью следующая [10]:
top left = left top = 0% 0% – в левом верхнем углу;
top = top center = center top = 50% 0% – по центру вверху;
right top = top right = 100% 0% – в правом верхнем углу;
left = left center = center left = 0% 50% – по левому краю
и по центру;
center = center center = 50% 50% – по центру;
right = right center = center right = 100% 50% – по правому
краю и по центру;
bottom left = left bottom = 0% 100% – в левом нижнем углу;
bottom = bottom center = center bottom = 50% 100% – по центру
внизу;
41
bottom right = right bottom = 100% 100% – в правом нижнем углу.
Из приведенных примеров видно, что если задана только одна координата, то для другой принимается значение center.
Для примера расположим фотографию как фоновое изображение
посередине внизу:
body (background: url(photo.jpg) bottom}.
5. background-attachment управляет фиксацией фона.
Когда мы прокручиваем содержимое web-страницы, вместе с ней
прокручивается и фоновое изображение (если оно есть). Рассматриваемый атрибут может разрешить или запретить прокрутку графического фона web-страницы во время прокрутки самой страницы.
background-attachment: scroll | fixed
scroll (значение по умолчанию) заставляет web-браузер прокручивать фон вместе с содержимым web-страницы;
fixed фиксирует фон на месте.
Имеет смысл фиксировать только графический фон, заданный для
самой web-страницы. Графический фон у отдельных элементов webстраницы фиксировать не следует.
6. background-size масштабирует фоновое изображение согласно заданным размерам [6].
background-size: [ <значение> | <проценты> | auto | cover |
contain
<значение> задает размер в любых доступных для CSS единицах;
<проценты> задает размер фоновой картинки в процентах от ширины или высоты элемента.
Ширину и высоту фонового изображения можно задать путем записи их через пробел. Однако при этом надо следить за сохранением
пропорций изображения. Если установлено только одно значение,
то считается, что оно задает ширину фонового изображения, второе
значение принимается при этом за auto. В этом случае пропорции
изображения сохраняются автоматически.
auto – если задано одновременно для ширины и высоты (auto
auto), размеры фонового изображения остаются исходными; если
только для одной стороны изображения (200px auto), то размер вычисляется автоматически исходя из пропорций картинки;
cover – изображение масштабируется с сохранением пропорций
так, чтобы его ширина или высота равнялась ширине или высоте
блока, при этом фон занимает всю доступную площадь; фоновая картинка может целиком не поместиться, но пустых мест не останется;
42
Рис. 2.3. Изображение, которое будет использовано как фоновое
contain – изображение масштабируется с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь
блока, при этом, естественно, могут остаться пустые места.
Рассмотрим для примера случай, когда требуется сделать фоном
web-страницы фотографию (рис. 2.3) так, чтобы она заняла собой
все окно браузера, не повторяясь по осям.
Мы видим, что это изображение вытянуто по вертикали и потому для решения поставленной задачи правильным вариантом будет
выбор для атрибута background-size значения cover. Кроме того,
поскольку задача заключается и в том, чтобы фоном было бы занято
все окно браузера, то рекомендуется задать высоту html и body равной 100 % [11]. При этом код для таблицы стилей будет следующим:
html { height: 100%}
body {
margin: 0;
height: 100%;
background: url(photo.jpg);
background-repeat:no-repeat;
background-size: cover;
}
Результат такого задания стилей для фонового изображения представлен на рис. 2.4.
Как видим, для подгонки размера фотографии под размер окна
браузер, сохраняя ее пропорции, был вынужден обрезать фотографию
43
Рис. 2.4. Результат задания для атрибута background-size
значения cover
Рис. 2.5. Результат задания для атрибута background-size
значения contain
по вертикали. Проведем небольшой эксперимент, чтобы увидеть, как
изменится web-страница, если к атрибуту background-size применить
значение contain. Получим результат, показанный на рис. 2.5. В данном случае фоновое изображение поместилось в окно браузера целиком, но заняло собой лишь часть окна браузера.
44
Кроме рассмотренных атрибутов стиля, предназначенных для задания фона web-страницы, имеется и ряд других (например, backgroundclip, определяющий, как цвет фона или фоновая картинка должна
выводиться под границами; background-origin, определяющий область позиционирования фонового рисунка). Все они детально описаны и проиллюстрированы на сайте [6].
7. Background – это универсальное свойство. Оно задает все свойства фона элемента страницы. Значения могут идти в любом порядке:
background: background-image | background-position | background-size | background-repeat | background-attachment | background-origin | background-clip | background-color
Обратим внимание также на возможность задания нескольких фоновых изображений для web-страницы или ее элемента, которые будут отображаться одновременно. Для этого необходимо перечислить
путь к фоновым изображениям через запятую в свойстве backgroundimage. Изображения будут накладываться друг на друга в перечисленной очередности (т. е. первая заданная картинка будет отображаться
поверх последующих). Для того чтобы расположить эти фоновые изображения определенным образом, требуется перечислить необходимые значения в нужном порядке через запятую (к примеру, в свойстве
«background-position:bottom right, center;» bottom right будет
применено к первому, а center – ко второму фоновому изображению):
background-image:url(f1.gif),url(f2.jpg);
background-position:bottom right, center;
background-size:150px 100px, 100px auto;
background-repeat:no-repeat,no-repeat.
В заключение данного раздела еще раз подчеркнем, что мы рассмотрели лишь небольшую часть атрибутов стилей CSS3, с полным перечнем можно ознакомиться в рекомендуемой литературе, например [6],
а некоторые весьма полезные свойства будут рассмотрены в последующих разделах пособия по мере изучения дальнейшего материала.
45
3. ГРАФИКА В WEB-СТРАНИЦАХ
3.1. Вставка изображения
Для вставки изображения в web-страницу используется непарный
тег <img>. Его обязательным атрибутом является src, значение которого задает абсолютный или относительный путь к файлу изображения.
Например:
<img src=”photo.jpg”>.
При отключенном в браузере показе графики или во время ее загрузки (если канал связи медленный и изображение долго будет загружаться) полезен необязательный атрибут alt, с помощью которого указывается так называемый альтернативный текст или текст
замены. Такой текст появляется раньше самого изображения и дает
представление о его содержании. Затем зарезервированное пустое
поле заменяется картинкой. Этот прием рекомендуется использовать
только при вставке информативных для пользователя изображений.
Если изображение является элементом оформления web-страницы,
то атрибут alt указывать не следует.
<p><img src="house.gif" alt="Здание университета"></p>.
В приведенном примере тег <img> помещен внутри тегов <p> не
случайно. Дело в том, что изображение, помещенное на web-страницу
с помощью тега <img>, является встроенным элементом, а не блочным. Это значит, что изображение должно быть частью блочного элемента, например абзаца.
Для задания размеров изображения используются атрибуты стиля CSS3 width и height. Значения ширины и высоты не включает
толщину границ вокруг элемента, значения отступов и полей:
width: значение | проценты | auto | inherit;
height: значение | проценты | auto | inherit
В качестве значений принимаются любые единицы длины, принятые в CSS3. При использовании процентной записи ширина элемента
вычисляется в зависимости от ширины родительского элемента. Если
родитель явно не указан, то в его качестве выступает окно браузера.
Auto устанавливает ширину исходя из содержимого элемента;
inherit наследует значение родителя.
3.2. Выбор формата для web-графики
Согласно спецификации HTML, примерами широко распознаваемых форматов являются JPEG, GIF и PNG. При выборе формата web46
графики следует учитывать такие аспекты, как минимальный размер файла графического изображения при достаточном уровне его
качества, необходимость поддержки анимации, прозрачности фона,
режима чередования строк и т. д. Для того чтобы для конкретного
изображения выбрать тот или иной формат его записи, необходимо
хотя бы в общих чертах представлять особенности этих форматов.
JPEG (Joint Photographic Experts Group, был разработан объединенной группой экспертов по фотографии).
– Предназначен для обеспечения фотографического качества изображений. Обеспечивает эффективное сжатие изображений с потерей качества.
– Поддерживает 24 бита на пиксел, т. е. количество цветов в изображении может превышать 16 млн, поэтому он хорошо подходит для
полутоновых изображений.
– Прогрессивный JPEG позволяет воспроизводить изображение за
несколько проходов. Сначала появляется изображение с плохим качеством, а затем, за несколько итераций (обычно 3–5), оно превращается
в обычное. Для файлов большого размера и низкой скоростью связи
можно увидеть, что содержит изображение до его полной загрузки.
– Не имеет свойства прозрачности и не поддерживает анимацию.
GIF (Graphics Interchange Format – формат обмена графикой).
– Обеспечивает сжатие без потери качества. Эффективно сжимает,
если в изображении содержатся большие однотонные области (как это
имеет место, например, в логотипах и в мультипликации). Количество
цветов в изображении – до 256. Таким образом, изображения с ограниченным количеством цветов и четкими краями, такие как текст и линии, рекомендуется сохранять именно в формате GIF. А вот для хранения изображений фотографического качества, с плавными цветовыми
переходами и большим количеством цветов он не годится.
– Позволяет создавать изображения с прозрачным фоном. Вместо фона изображения виден фон web-страницы, изображения при
этом выглядят более естественными.
– Поддерживает режим чередования строк (interlaced mode) – неодновременное воспроизведение строк изображения. Сначала выводится каждая восьмая строка изображения (качество изображения
плохое, зато сразу видно, что на нем представлено), затем каждая
четвертая и т. д. Полностью изображение воспроизводится за 4 прохода, а предварительный просмотр достигается очень быстро.
– Позволяет создавать анимацию, так как в файле могут храниться несколько изображений.
47
PNG (Portable Network Graphics)
– Использует сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не
требующим лицензии для использования. Имеет ряд преимуществ
перед GIF, в частности, практически неограниченное количество
цветов в изображении – PNG поддерживает глубину цвета в пределах до 48 бит.
– Поддерживает прозрачность, причем степень прозрачности у него – величина переменная. Это позволяет достигать эффекта постепенного растворения фона графики на фоне страницы.
3.3. Оптимизация web-графики
При выборе формата для графических изображений, которые
предназначены для размещения на web-странице, необходимо обращать внимание на то, чтобы размер файла изображения был как
можно меньшим при достаточном уровне качества. Это так называемая задача оптимизации web-графики, которую необходимо
решать для сокращения времени загрузки изображений. Заметим,
что обычно размеры графических изображений достаточно велики даже несмотря на то, что каждый из рассмотренных форматов
базируется на использовании того или иного метода сжатия. Оптимизация графики достигается правильным выбором формата для
конкретного изображения, установки зависящих от формата параметров, выбор которых может оказать существенное влияние на
размер файла. Среди таких параметров – степень сжатия, глубина
цвета, степень дизеринга (он применяется для аппроксимации отсутствующих цветов) и др. Можно также изображение, содержащее
неоднородные по структуре области, разбивать на отдельные фрагменты и оптимизировать каждый из них по отдельности. Те фрагменты изображения, на которых искажения, связанные с увеличением степени сжатия, менее заметны для зрителя, подвергаются
более сильному сжатию. Самые значимые фрагменты изображения
могут быть сжаты в меньшей степени, чтобы сохранить высокое
качество изображения. При таком подходе может быть достигнуто
весьма заметное уменьшение размера файла.
Удобным инструментарием для оптимизации графических изображений является, например, приложение Adobe Fireworks. Это
графический редактор, специально предназначенный для webдизайнеров. Он позволяет создавать, редактировать и оптимизировать изображения для размещения на web-страницах. Последняя
48
его версия CS6 была выпущена в 2012 г. Основной инструментарий
для оптимизации доступен также и в последних версиях приложения Adobe Photoshop. Для перехода в окно, где можно выполнить
необходимые действия по оптимизации графики, надо из пункта
меню File перейти в Export и далее в Save for Web.
49
4. СОЗДАНИЕ ТАБЛИЦ В WEB-ДОКУМЕНТАХ
Таблица HTML представляет собой блочный элемент web-страницы.
Это значит, что она размещается отдельно от всех остальных блочных
элементов: абзацев, заголовков, больших цитат, аудио- и видеороликов.
4.1. Теги для создания таблицы
Рассмотрим теги, с помощью которых может быть создана таблица на web-странице:
<table> – парный тег, объявляющий таблицу;
<tr> – Table Row – тег для создания строк;
<th> – Table Header – тег для ячеек заголовков, в которые будет
помещаться «шапка» соответствующего столбца таблицы;
<td> – Table Data – тег для создания ячеек данных.
Теги <td> и <th> помещают в теги <tr>, создающие строки таблицы, в которых должны находиться эти ячейки.
Теги <th> и <td> во многом схожи. Отличие между ними состоит
в том, что текст между <th> и </th> автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки.
В ячейку таблицы можно поместить любое содержимое: абзацы,
заголовки, изображения, аудио- и видеоролики и даже другие таблицы. Ячейки таблицы должны иметь хоть какое-то содержимое, иначе
web-браузер может их вообще не отобразить. Если же какая-то ячейка должна быть пустой, в нее следует поместить неразрывный пробел
(HTML-литерал &nbsp;).
Для создания названия таблицы используется тег <caption>. Заголовок таблицы выводится над ней, а текст его выравнивается по
центру таблицы.
Пример: Предположим, требуется создать таблицу, показанную
на рис. 4.1.
Фрагмент HTML-кода, относящийся к формированию структуры таблицы, будет иметь следующий вид:
<table>
<caption> Оснащенность вычислительной лаборатории </caption>
<tr>
<th>№ помещения</th><th>Кафедра</th><th>Количество компьютеров</th>
</tr>
<tr>
<td>23-17</td><td>53</td><td>11</td>
</tr>
<tr>
<td>33-04</td><td>53</td><td>10</td>
50
Оснащенность вычислительной лаборатории
№ помещения
Кафедра
Количество компьютеров
23–17
33–04
33–05
53
53
53
11
10
10
Рис. 4.1. Вид таблицы, которую следует создать
</tr>
<tr>
<td>33-05</td><td>53</td><td>10</td>
</tr>
</table>
Можно логически разбить таблицу HTML на три значащие части – секции таблицы:
– секцию заголовка, в которой находится строка с ячейками заголовка, формирующая ее «шапку»;
– секцию тела, где находятся строки таблицы, составляющие основные данные;
– секцию завершения со строками, формирующими «поддон» таблицы (обычно в «поддоне» располагают итоговые данные и различные примечания).
Секцию заголовка таблицы формирует тег <thead>, секцию тела –
<tbody>, а секцию завершения – <tfoot>. Все эти теги парные, помещаются непосредственно в тег <table> и содержат теги <tr>, формирующие строки таблицы, которые входят в соответствующую секцию.
Следует иметь в виду, что элемент <tfoot> должен быть помещен в
коде до элемента <tbody>.
Для тегов, формирующих секции таблицы, можно задать с помощью CSS3 стили, которые будут определять их отображение.
4.2. Объединение ячеек таблицы
Предположим, требуется создать таблицу, представленную на
рис. 4.2. Она отличается от предыдущей таблицы, показанной на
рис. 4.1, объединением ряда ячеек.
Воспользуемся атрибутами объединения:
– по горизонтали colspan с указанием количества объединяемых
ячеек;
– по вертикали rowspan с указанием количества объединяемых ячеек.
Для этого случая полный HTML-код будет иметь следующий вид
(для удобства использована внутренняя таблица стилей):
<!Doctype html>
51
Оснащенность вычислительной лаборатории
Лаборатории института № 5
23–17
33–02
33–04
33–05
Каф. 53
ВСЕГО
Количество компьютеров
11
10
10
10
41
Рис. 4.2. Таблица с объединенными ячейками
<html>
<head>
<title>Tables</title>
<style>
table, th, td {border: solid 2px; text-align: center; verticalalign:middle}
tfoot {font-weight:bold}
</style>
</head>
<body>
<table>
<caption> Оснащенность вычислительной лаборатории </caption>
<thead>
<tr>
<th colspan=2>Лаборатории института №5</th><th>Количество
компьютеров</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=2>ВСЕГО</td><td>41</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>23-17</td><td rowspan=4>Каф.53</td><td>11</td>
</tr>
<tr>
<td>33-02</td><Td>10</td>
</tr>
<tr>
52
Рис. 4.3. Промежуточный результат создания таблицы
<td>33-04</td><td>10</td>
</tr>
<tr>
<td>33-05</td><td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Полученная в результате таблица представлена на рис. 4.3.
Вид полученной таблицы отличается от представленного на
рис. 4.2. Рамки всех ячеек и внешняя рамка оказались нарисованы
отдельно с небольшим расстоянием друг от друга. Чтобы привести
данную таблицу к желаемому виду, рассмотрим ряд наиболее часто
используемых при создании таблиц атрибутов CSS3. С полным списком атрибутов можно ознакомиться на сайте [12].
1. border-collapse устанавливает, как отображать границы вокруг ячеек таблицы, когда для ячеек установлена рамка:
border-collapse: collapse | separate | inherit
collapse – между ячейками отображается только одна линия, одновременно принадлежащая обеим ячейкам; это же правило соблюдается
и для внешних границ, когда вокруг самой таблицы добавляется рамка;
separate – вокруг каждой ячейки отображается своя собственная
рамка, в местах соприкосновения ячеек показываются сразу две линии;
inherit – наследует значение родителя.
Обратим внимание на то, что этот атрибут применяется к тегу <table>.
2. border-spacing задает расстояние между границами ячеек
в таблице. Этот атрибут не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse:
border-spacing: значение1 [значение2]
53
Рис. 4.4. Окончательный результат создания таблицы заданного вида
Если используется одно значение, то оно устанавливает одновременно расстояние по вертикали и горизонтали между границами
ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе – вертикальное:
border-spacing: 3px 6px.
3. text-align задает горизонтальное выравнивание, его значениями могут быть left (по умолчанию), right, center.
4. vertical-align задает выравнивание по вертикали в ячейках, его значениями могут быть top, middle, bottom.
5. width задает ширину таблицы и ячеек.
6. background-color задает цвет фона таблиц в целом, строк или
ячеек применительно к соответствующим селекторам.
7. padding задает поля (расстояние от текста до границ ячеек).
Воспользуемся представленными атрибутами для рассматриваемого нами примера:
<style>
table, th, td {border: solid 2px; text-align: center;
vertical-align:middle}
table {border-collapse: collapse; margin:5px}
th, td {padding:5px}
tfoot {font-weight:bold}
</style>
Тогда результатом будет таблица, представленная на рис. 4.4.
4.3. Использование псевдоклассов для оформления таблицы
В заключение данного раздела добавим несколько дополнительных полезных советов по оформлению таблиц. В случае, когда таблица является многострочной, для удобства восприятия информации часто бывает желательно выделить все нечетные строки фоном
54
одного цвета, а четные – фоном другого цвета. С этой целью хорошим приемом является использование псевдоклассов.
Предположим, все нечетные строки должны иметь фон светлосерого цвета, а четные – тоже серого, но несколько темнее. Код будет иметь следующий вид:
tr:nth-of-type(even) {background-color: #dddddd}
tr:nth-of-type(odd) {background-color: #aaaaaa}
Напомним, что even в переводе с английского означает четный, а
odd – нечетный.
Для оформления первой строки таблицы также можно использовать псевдокласс с выбранными атрибутами стилей:
table tr:first-child {background-color:aqua; font-size: 20px;
font-weight:bold; color:navy; text-align:center}.
Последнюю строку таблицы можно выбрать, используя селектор
вида tr:last-child.
В этих примерах использован селектор типа nth-child, который ищет дочерние элементы заданного элемента. Для выбора
всех строк таблицы он будет выглядеть следующим образом: table
tr:nth-child(n), для выбора каждой второй строки таблицы –
table tr:nth-child(2n), для выбора каждой третьей строки – table
tr:nth-child(3n). Поэтому еще одним вариантом задания цвета
фона, например для четных строк, может быть такой:
table tr:nth-child(2n) {background: #f0f0f0}.
В ряде случаев может потребоваться выделять определенным образом строки не с начала таблицы, а с одной из последующих строк.
Например, пусть требуется найти каждую вторую строку, начиная
с третьей. Тогда к счетчику строк надо добавить смещение, и селектор будет иметь следующий вид:
table tr:nth-child(2n+3).
Аналогичный подход может быть использован и для выбора
столбцов таблицы. Предположим, требуется во всех столбцах таблицы, кроме первого, установить выравнивание по правому краю.
Тогда может быть использована следующая запись:
td:nth-child(n+2) {text-align:right}.
Подробно об использовании псевдоклассов применительно к таблицам можно прочитать в книге [3].
55
ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ
1. Перечислите основные положения концепции Web 2.0.
2. Как на практике реализуется принцип разделения содержимого, представления и поведения web-страницы?
3. К каким последствиям может привести отсутствие указания
типа документа <!DOCTYPE html>?
4. В чем состоит различие между абсолютным и относительным
путями поиска при создании гиперссылок?
5. Перечислите преимущества использования технологии CSS.
6. Перечислите разновидности таблиц стилей.
7. В чем состоит принцип приоритетности для внешних, внутренних и встроенных стилей?
8. Приведите пример описания стиля для создания нижнего индекса в тексте.
9. В чем различие атрибутов стилей padding и margin?
10. Перечислите абсолютные и относительные единицы измерения, с помощью которых можно задать размер шрифта, используя
свойство font-size.
11. Перечислите и сравните между собой форматы графических
файлов, используемые для создания web-страниц согласно спецификации HTML.
12. Как и для каких целей выполняется оптимизация графики
для web-страниц?
13. Какие атрибуты используются для объединения ячеек таблицы по горизонтали и по вертикали?
14. С помощью какого свойства CSS3 можно задать выравнивание текста в ячейке таблицы по вертикали?
15. Каким образом можно задать ширину таблицы и ячеек?
16. Каким образом можно задать цвет для всех четных строк
многострочной таблицы?
56
Заключение
В настоящее время технологии, связанные с разработкой webстраниц, стремительно развиваются, дополняются все новыми функциональными возможностями. Практически нереально привести
в рамках одного учебного пособия всю необходимую для разработчика информацию. Поэтому такую задачу авторы перед собой и не
ставили. Планируется, что пособие, посвященное web-технологиям,
предназначенным для разработки клиентской части web-страниц,
будет состоять по крайней мере из двух частей.
В данной, первой части пособия, нами рассмотрены основные концепции, на которых базируются современные подходы в области webдизайна, основы языка гипертекстовой разметки документов HTML5,
технологии каскадных таблиц стилей CSS3, основы создания гиперссылок различного типа, использования web-графики, а также разработки таблиц. Данное пособие не является справочником, хотя в нем
представлена довольно обширная информация по рассматриваемым
вопросам. Для получения полной информации обучающимся рекомендуется обращаться к информационным источникам, перечисленным в списке литературы. В то же время, мы надеемся, пособие окажется весьма полезным в учебном процессе при изучении теоретических вопросов дисциплины «Web-технологии», а также при выполнении лабораторных работ в рамках этого курса.
Вторую часть данного пособия планируется посвятить очень важным вопросам верстки web-документов, в том числе адаптивной, созданию web-форм и другим интересным аспектам разработки клиентской части web-страниц.
57
Библиографический список
1. Рейтинг интернет браузеров. http://sd-company.su/articleд/browsers/
rating-browsers-russia (дата обращения: 20.12.2016).
2. Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. – СПб.: БХВ-Петербург, 2014. – 416 с.
3. Хоган Б. HTML5 и CSS3. Веб-разработки по стандартам нового
поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с.
4. Справочник HTML5. https://webref.ru/html (дата обращения:
20.12.2016).
5. Теги для HTML текста. html5book.ru/html-text/ (дата обращения: 20.12.2016).
6. Справочник CSS. www.webref.ru/css (дата обращения: 20.12.2016).
7. Верстальщику о шрифтах. Безопасные шрифты. http://lamp-dev.
ru/verstalshhiku-o-shriftax-bezopasnye-shrifty-185.html (дата обращения: 20.12.2016).
8. Правило @font-face. html5book.ru/pravilo-font-face/ (дата обращения: 20.12.2016).
9. Скругленные уголки. http://htmlbook.ru/css3-na-primerakh/
skruglennye-ugolki (дата обращения: 20.12.2016).
10. Свойство background-position. http://htmlbook.ru/css/backgroundposition (дата обращения: 20.12.2016).
11. Масштабирование фона. http://htmlbook.ru/css3-na-primerakh/
masshtabiro vanie-fona (дата обращения: 20.12.2016).
12. Свойства, изменяющие вид табличных данных. https://webref.ru/
css/type/table (дата обращения: 20.12.2016).
58
СОДЕРЖАНИЕ
Предисловие...........................................................................
3
1. ОСНОВЫ СОЗДАНИЯ WEB-СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ
ЯЗЫКА HTML.........................................................................
1.1. Основные понятия и положения..................................... 1.2. Структура HTML-файла................................................ 1.3. Теги для структурирования и оформления текста............. 1.4. Создание гиперссылок.................................................. 4
4
6
8
13
2. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ........................................
2.1. Синтаксис таблиц стилей.............................................. 2.2. Разновидности таблиц стилей........................................ 2.3. Каскадность таблиц стилей............................................ 2.4. Атрибуты стилей CSS3.................................................. 19
19
24
27
27
3. ГРАФИКА В WEB-СТРАНИЦАХ...........................................
3.1. Вставка изображения................................................... 3.2. Выбор формата для web-графики.................................... 3.3. Оптимизация web-графики............................................ 46
46
46
48
4. СОЗДАНИЕ ТАБЛИЦ В WEB-ДОКУМЕНТАХ..........................
4.1. Теги для создания таблицы............................................ 4.2. Объединение ячеек таблицы.......................................... 4.3. Использование псевдоклассов для оформления таблицы.... 50
50
51
54
ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ............................................
56
Заключение............................................................................
57
Библиографический список.......................................................
58
59
Учебное издание
Красильникова Ольга Ивановна,
Красильников Николай Николаевич
WEB-ТЕХНОЛОГИИ ДЛЯ РАЗРАБОТКИ
КЛИЕНТСКОЙ ЧАСТИ WEB-СТРАНИЦ
Часть 1
Учебное пособие
Редактор А. Г. Ларионова
Компьютерная верстка В. Н. Костиной
Сдано в набор 05.06.17. Подписано к печати 21.08.17. Формат 60 × 84 1/16.
Усл. печ. л. 3,4. Уч.-изд. л. 3,7. Тираж 50 экз. Заказ № 287.
Редакционно-издательский центр ГУАП
190000, Санкт-Петербург, Б. Морская ул., 67
Документ
Категория
Без категории
Просмотров
3
Размер файла
971 Кб
Теги
06877dd1ac, krasilnikov
1/--страниц
Пожаловаться на содержимое документа