1. HTML и CSS
1.1. Теги: HTML, HEAD, TITLE, META, BODY, P (назначение каждого тега, атрибуты и их значения, применяемые совместно с тегами, примеры использования тегов).Понятия: тег, атрибут и значение, правило CSS, селектор, блок определений,определение, свойство и значение.
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег <html> идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий тег <html> должен всегда стоять в документе последним.
Синтаксис
<html>
...
</html>
Атрибуты
title
Добавляет всплывающую подсказку на веб-страницу.
manifest
Указывает файл манифеста, необходимый для создания оффлайнового приложения.
xmlns
Указывает пространство имен для XHTML-документов.
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
Синтаксис
<head>
...
</head>
Закрывающий тег
Не обязателен.
Атрибуты
profile
Указывает адрес профиля метаданных.
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Рис. 1. Вид заголовка в браузере Firefox
Синтаксис
<head>
<title>Заголовок</title>
</head>
Закрывающий тег
Обязателен.
Атрибуты
Нет.
<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.
Синтаксис
HTML <head>
<meta content="...">
</head>
XHTML <head>
<meta content="..." />
</head>
Атрибуты
charset
Задает кодировку документа.
content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv
Предназначен для конвертирования метатега в заголовок HTTP.
name
Имя метатега, также косвенно устанавливает его предназначение.
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.
Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.
Синтаксис
<body>
...
</body>
Атрибуты
alink
Устанавливает цвет активной ссылки.
background
Задает фоновый рисунок на веб-странице.
bgcolor
Цвет фона веб-страницы.
bgproperties
Определяет, прокручивать фон совместно с текстом или нет.
bottommargin
Отступ от нижнего края окна браузера до контента.
leftmargin
Отступ по горизонтали от левого края окна браузера до контента.
link
Цвет ссылок на веб-странице.
rightmargin
Отступ от правого края окна браузера до контента.
scroll
Устанавливает, отображать полосы прокрутки или нет.
text
Цвет текста в документе.
topmargin
Отступ от верхнего края окна браузера до контента.
vlink
Цвет посещенных ссылок.
Также для этого тега доступны универсальные атрибуты и события.
Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Синтаксис
<p>Текст</p>
Атрибуты
align
Определяет выравнивание текста.
Также для этого тега доступны универсальные атрибуты и события.
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 7.1).
1.2. Заголовки и списки в HTML документе: теги H1, H2, H3, H4, H5, H6, UL, OL, LI,DD, DL, DT (назначение каждого тега, атрибуты и их значения, применяемыесовместно с тегами, примеры использования тегов).
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Синтаксис
<h1>Заголовок первого уровня</h1>
Атрибуты
align
Определяет выравнивание заголовка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
Атрибуты
type
Устанавливает вид маркера списка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.
Синтаксис
<ol>
<li>элемент нумерованного списка</li>
<li>элемент нумерованного списка</li>
</ol>
Атрибуты
type
Устанавливает вид маркера списка.
reversed
Нумерация в списке становится по убыванию (3,2,1).
start
Задаёт число, с которого будет начинаться нумерованный список.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
<ol>
<li>элемент нумерованного списка</li>
</ol>
Атрибуты
type
Устанавливает вид маркера нумерованного или маркированного списка.
value
Число, с которого будет начинаться нумерованный список.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег <dd> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dd> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
Закрывающий тег
Не обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Тег <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина.
Синтаксис
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Тег <dt> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <dl>, куда входит тег <dt> создающий термин и тег <dd> задающий определение этого термина. Закрывающий тег </dt> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Синтаксис
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
Закрывающий тег
Не обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
1.3. Графические элементы в HTML документе: теги IMG и HR (назначение каждоготега, атрибуты и их значения, применяемые совместно с тегами, примерыиспользования тегов).
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
HTML <img src="URL" alt="альтернативный текст">
XHTML <img src="URL" alt="альтернативный текст" />
Атрибуты
align
Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt
Альтернативный текст для изображения.
border
Толщина рамки вокруг изображения.
height
Высота изображения.
hspace
Горизонтальный отступ от изображения до окружающего контента.
ismap
Говорит браузеру, что картинка является серверной картой-изображением.
longdesc
Указывает адрес документа, где содержится аннотация к картинке.
lowsrc
Адрес изображения низкого качества.
src
Путь к графическому файлу.
vspace
Вертикальный отступ от изображения до окружающего контента.
width
Ширина изображения.
usemap
Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег <hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Синтаксис
HTML <hr>
XHTML <hr />
Атрибуты
align
Определяет выравнивание линии.
color
Цвет линии.
noshade
Рисует линию без трехмерных эффектов.
size
Толщина линии.
width
Ширина линии.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
1.4. Тег А (назначение тега, его атрибуты и значения, создание гиперссылок на различные объекты (на страницы своего сайта, на другие ресурсы, на адрес электронной почты, файлы), привести примеры создания гиперссылок).
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
<a href="URL">...</a>
<a name="идентификатор">...</a>
Атрибуты
accesskey
Активация ссылки с помощью комбинации клавиш.
coords
Устанавливает координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задает адрес документа, на который следует перейти.
hreflang
Идентифицирует язык текста по ссылке.
name
Устанавливает имя якоря внутри документа.
rel
Отношения между ссылаемым и текущим документами.
rev
Отношения между текущим и ссылаемым документами.
shape
Задает форму активной области ссылки для изображений.
tabindex
Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
target
Имя окна или фрейма, куда браузер будет загружать документ.
title
Добавляет всплывающую подсказку к тексту ссылки.
type
Указывает MIME-тип документа, на который ведёт ссылка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
1.5. Тег А (назначение тега, его атрибуты и значения, создание закладок в HTML документе, примеры создания закладок).
1.6. Теги DIV и SPAN (назначение каждого тега, атрибуты и их значения, применяемые совместно с тегами, примеры использования тегов).
Элемент <div>является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div>всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис
<div>...</div>
Атрибуты
align
Задает выравнивание содержимого тега <div>.
title
Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span>и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Синтаксис
<span>...</span>
Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
1.7. Теги TABLE, CAPTION, TR, TD, TH (назначение тегов и их атрибутов, значения атрибутов. Принципы безошибочного построения таблиц. Примеры создания простейших таблиц. Растягивание ячеек по горизонтали и вертикали).
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
Синтаксис
<table>
<caption>Текст</caption>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align
Определяет выравнивание заголовка по горизонтали.
valign
Устанавливает расположение заголовка до или после таблицы.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
align
Определяет выравнивание содержимого ячеек по горизонтали.
bgcolor
Цвет фона ячеек.
bordercolor
Цвет рамки.
char
Выравнивание содержимого ячеек относительно заданного символа.
charoff
Смещение содержимого ячеек относительно указанного символа.
valign
Выравнивание содержимого ячеек по вертикали.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты
abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки с заголовком.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Синтаксис
<table>
<tr>
<th>...</th>
</tr>
</table>
Атрибуты
abbr
Краткое описание содержимого ячейки.
align
Определяет выравнивание содержимого ячейки по горизонтали.
axis
Группирует ячейки связанные между собой похожей информацией.
background
Задает фоновый рисунок в ячейке.
bgcolor
Цвет фона ячейки.
bordercolor
Цвет рамки.
char
Выравнивает содержимое ячейки по заданному символу.
charoff
Смещает содержимое ячейки относительно заданного символа.
colspan
Объединяет горизонтальные ячейки.
headers
Позволяет связать ячейки таблицы с заголовками в речевых браузерах.
height
Высота ячейки.
nowrap
Запрещает перенос строк.
rowspan
Объединяет вертикальные ячейки.
scope
Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
valign
Выравнивание содержимого ячейки по вертикали.
width
Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
1.8. Теги FORM, TEXTAREA, SELECT, OPTION (назначение каждого тега, атрибуты и их значения, применяемые совместно с тегами, примеры использования тегов).
Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.
Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.
http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5
Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).
Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.
Синтаксис
<form action="URL">
...
</form>
Атрибуты
accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
autocomplete
Включает автозаполнение полей формы.
enctype
Способ кодирования данных формы.
method
Метод протокола HTTP.
name
Имя формы.
novalidate
Отменяет встроенную проверку данных формы на корректность ввода.
target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
<textarea атрибуты>
текст
</textarea>
Атрибуты
accesskey
Переход к полю с помощью сочетания клавиш.
autofocus
Автоматическое получение фокуса.
cols
Ширина поля в символах.
disabled
Блокирует доступ и изменение элемента.
form
Связывает текстовое поле с формой по её идентификатору.
maxlength
Максимальное число введенных символов.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
placeholder
Указывает замещающийся текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
rows
Высота поля в строках текста.
tabindex
Порядок перехода между элементами при нажатии на клавишу Tab.
wrap
Параметры переноса строк.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Синтаксис
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Атрибуты
accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Тег <option> определяет отдельные пункты списка, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Синтаксис
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Атрибуты
disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не обязателен.
1.9. Тег INPUT (назначение тега, атрибуты и значения. Привести примеры).
Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
HTML <input атрибуты>
XHTML <input атрибуты />
Атрибуты
acceptУстанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
accesskeyПереход к элементу с помощью комбинации клавиш.
alignОпределяет выравнивание изображения.
altАльтернативный текст для кнопки с изображением.
autocompleteВключает или отключает автозаполнение.
autofocusУстанавливает фокус в поле формы.
borderТолщина рамки вокруг изображения.
checkedПредварительно активированный переключатель или флажок.
disabledБлокирует доступ и изменение элемента.
formСвязывает поле с формой по её идентификатору.
formactionОпределяет адрес обработчика формы.
formenctypeУстанавливает способ кодирования данных формы при их отправке на сервер.
formmethodСообщает браузеру каким методом следует передавать данные формы на сервер.
formnovalidateОтменяет встроенную проверку данных на корректность.
formtargetОпределяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
listУказывает на список вариантов, которые можно выбирать при вводе текста.
maxВерхнее значение для ввода числа или даты.
maxlengthМаксимальное количество символов разрешенных в тексте.
minНижнее значение для ввода числа или даты.
multipleПозволяет загрузить несколько файлов одновременно.
nameИмя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
patternУстанавливает шаблон ввода.
placeholderВыводит подсказывающий текст.
readonlyУстанавливает, что поле не может изменяться пользователем.
requiredОбязательное для заполнения поле.
sizeШирина текстового поля.
srcАдрес графического файла для поля с изображением.
stepШаг приращения для числовых полей.
tabindexОпределяет порядок перехода между элементами с помощью клавиши Tab.
typeСообщает браузеру, к какому типу относится элемент формы.
valueЗначение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег INPUT</title>
</head>
<body>
<form name="test" method="post" action="input1.php">
<p><b>Ваше имя:</b><br>
<input type="text" size="40">
</p>
<p><b>Каким браузером в основном пользуетесь:</b><Br>
<input type="radio" name="browser" value="ie"> Internet Explorer<Br>
<input type="radio" name="browser" value="opera"> Opera<Br>
<input type="radio" name="browser" value="firefox"> Firefox<Br>
</p>
<p>Комментарий<Br>
<textarea name="comment" cols="40" rows="3"></textarea></p>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
</body>
</html>
1.10. Использование бесплатных скриптов WYSIWYG-редакторов HTML-кода.Интеграция скриптов на страницу.
WYSIWYG (произносится [ˈwɪziwɪɡ], является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор».
Список WYSIWYG-редакторов текста
• Microsoft Word (из пакета Microsoft Office)
• OpenOffice.org Writer (из пакета OpenOffice.org)
• AbiWord (из пакета GNOME Office)
• KWord (из пакета KOffice)
• Pages (из пакета iWork)
Список WYSIWYG-редакторов HTML-кода
• Adobe GoLive
• Adobe (Macromedia) Dreamweaver
• Namo Webeditor
• Microsoft FrontPage
• Microsoft SharePoint Designer
• Microsoft Expression Web
• Mozilla Composer
• Quanta Plus
• Kompozer (основан на Nvu)
• WYSIWYG Web Builder 5
• Web Page Maker
Основанные на JavaScript (встраиваемые в веб-страницу)
• TinyMCE
• CKeditor (бывший FCKeditor)
• CLEditor
• NicEdit
• elRTE
• Spaw
• Xinha
• dijit.Editor — виджет javascript-фрэймворка Dojo Toolkit
CKEditor Quick Start Guide
The aim of this article is to get you up and running with CKEditor in two minutes.
Download
Visit the official CKEditor Download site. For a production site we recommend you choose the default Standard Package and click the Download CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Package instead.
Unpacking
Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.
Trying Out
CKEditor comes with a collection of samples that you can try out to verify if the installation was successful as well as see some CKEditor usage scenarios, both basic and more advanced.
Open the following page in the browser: http://<your site>/ckeditor/samples/index.html
Browse the samples to see how CKEditor can be used and customized.
Adding CKEditor to Your Page
If the samples work correctly, you are ready to build your own site with CKEditor included.
To start, create a simple HTML page with a <textarea> element in it. You will then need to do two things:
1. Add a call to the CKEditor script in the <script> element of your page.
2. Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.
See the following example:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<scriptsrc="../ckeditor.js"></script>
</head>
<body>
<form>
<textareaname="editor1"id="editor1"rows="10"cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace(editor1);
</script>
</form>
</body>
</html>
When you are done, open your sample page in the browser.
1.11. Правила Web-дизайна (цвета, текстуры, фон, текст, изображения).
В современном Интернете принято молчаливое соглашение о том, что - профессиональный сайт должен корректно отображаться при экранном разрешении 640x480 точек с цветовой палитрой в 256 цветов.
Web-страница должна идентично отображаться в Microsoft InternetExplorer и других броузерах, причем весьма желательно - в последней и предпоследней версиях данных программ.
Все страницы web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему.
Созданная вами web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду.
Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.
Далее приведен перечень цветовых сочетаний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия:
• синее на белом;
• черное на желтом;
• зеленое на белом;
• черное на белом;
• зеленое на красном;
• красное на желтом;
• красное на белом;
• оранжевое на черном;
• черное на пурпурном;
• оранжевое на белом;
• красное на зеленом.
1. Не использовать горизонтальную прокрутку
А причина этого ограничения весьма проста – большинство мышек просто не имеет колесиков для горизонтальной прокрутки.
2. Использовать минимальное количество шрифтов
Когда шрифты в большом количестве присутствуют на сайте, они начинают конфликтовать друг с другом, внося хаос и беспорядок. Поэтому, для того, чтобы эффективно использовать несколько шрифтов, нужно, чтобы сайт был изначально ориентирован на типографику, а остальные элементы при этом были приглушены.
3. Не использовать большого количества цветов
Иногда новичков в дизайне отличает экстремальное употребление цветов, типа горящего текста, мерцающих слов и т.д. Поэтому, чтобы не быть принятым за начинающего в дизайне, сайты с богатой цветовой палитрой следует делать на максимально высоком техническом уровне и с чувством стиля.
4. Назначение сайта должно быть сразу понятно
Одно из непреложных правил дизайна гласит о том, что посетитель сразу должен понять, куда он попал, прежде чем прочитает первый текст. Нарушая это правило, можно сделать акцент на другом, а именно попытаться заинтриговать посетителя, включить его любопытство и, тем самым, значительно увеличить время пребывания посетителя на сайте.
5. Навигация должна быть проста и понятна
С одной стороны, навигация должна быть проста и понятна, а с другой стороны, этот элемент тоже может быть объектом применения креатива. Зачастую это приводит к тому, что пользователю приходится ломать голову, чтобы разобраться в навигации, но при этом это превращается в весьма увлекательный и занимательный процесс.
6. Использовать разные цвета для текста и фона
Пожалуй, это не самое категоричное правило. Но новички, так боятся сделать текст нечитаемым, что они практически исключают возможность использования похожих цветов. Однако, сделать текст читаемым можно и за счет использования эффекта тиснения или вообще превратить текст в объект искусства.
7. Не использовать анимацию в дизайне
Пользователи очень не любят, когда их отвлекают от чтения каким-нибудь движущимся объектом. Однако, неужели этот милый паучок не добавит немного беспорядка в аккуратную конструкцию сайта и не придаст сайту изюминку?
8. Не использовать интро флеш заставки
Подобные флеш заставки удлиняют путь посетителя с содержимому сайта, да и поисковики не очень жалуют эти странички. Однако, если заставка сделана вдохновенно и со вкусом, то это может быть очень интересно и креативно.
1.12. Создание стилей и таблиц стилей (понятия и определения, внутренниетаблицы стилей, внешние таблицы стилей, связывание таблиц стилей с HTML-кодом).
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.
CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.
1.13. Позиционирование в CSS (виды позиционирования, примеры случаев, когдаабсолютное позиционирование становится относительным).
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position, изменяется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.
Нормальное позиционирование
Если для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.
Свойства left, top, right, bottom если определены, игнорируются.
Абсолютное позиционирование
При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).
Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании
Для режима характерны следующие особенности.
• Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
• Слой не меняет своё исходное положение, если у него нет свойств right, left, top и bottom.
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.
• Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top, только слой уйдёт за верхний край.
• Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top, только речь пойдёт о вертикальной полосе прокрутки.
• Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top, bottom и height.
• Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.
Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты (пример 3.31).
1.14. Позиционирование в CSS (когда и где используют относительноепозиционирование, скрытие частей страницы, позиционирование внутри элемента,исключение элемента за пределы блока).
Относительное позиционирование
Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 3.46), отрицательное — сдвиг вверх.
Рис. 3.46. Значения свойств left и top при относительном позиционировании
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Рис. 3.47. Значения свойств right и bottom при относительном позиционировании
Для относительного позиционирования характерны следующие особенности.
• Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
• При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.
Вложенные слои
Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin. Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 3.49).
Рис. 3.49. Значения свойств left, right, top и bottom во вложенных слоях
Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются. В следующем примере текст располагается в правом нижнем углу слоя возле границы, игнорируя свойство padding.
<div style="position: relative; padding: 10px; border: 1px solid #000; background: #fc0; height: 500px;">
<div style="position: absolute; right: 0; bottom: 0">
Текст
</div
</div>
Благодаря использованию четырёх свойств left, right, top, bottom для управления положением внутреннего слоя, размеры родительского слоя знать не обязательно. Это расширяет сферу применения позиционирования, поэтому position довольно активно применяется при вёрстке различных элементов. В качестве примера возьмём наложение на фотографию разной информации: количество комментариев к ней, ссылки «Добавить комментарий», «Информация об авторе» и «Добавить в избранное». В целом, результат должен быть примерно таким, как на рис. 3.50.
Рис. 3.50. Фотография с наложенными элементами
Сам код приведён в примере 3.37. Для слоя photo установлено относительное позиционирование, а для внутренних слоёв img (вывод фотографии), comment (число комментариев) и tool (ссылки внизу фотографии) задано абсолютное позиционирование.
1.15. Позиционирование в CSS (использование CSS-позиционирования для разметки страниц).
Пример 3.31. Создание аналога фреймов
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Абсолютное позиционирование</title>
<style type="text/css">
body{ margin:0; }
#sidebar, #content{ position: absolute; }
#sidebar, #content{ overflow: auto;padding:10px; }
#header{
height:80px;/* Высота слоя */
background:#FEDFC0;border-bottom:2px solid #7B5427;
}
#headerh1{ padding:20px;margin:0; }
#sidebar{
width:150px;background:#ECF5E4;border-right:1px solid #231F20;
top:82px;/* Расстояние от верхнего края */
bottom:0;/* Расстояние снизу */
}
#content{
top:82px;/* Расстояние от верхнего края */
left:170px;/* Расстояние от левого края */
bottom:0;right:0;
}
</style>
</head>
<body>
<div id="header"><h1>Плов народов мира</h1></div>
<div id="sidebar">
<p>Плов по-фергански</p><p>Плов узбекский</p>
<p>Плов сибирский</p><p>Плов итальянский</p>
<p>Плов эстонский</p><p>Плов по-американски</p>
<p>Плов по-индейски</p>
</div>
<div id="content">
<h2>Плов по-фергански</h2>
<p>Положить в казан нарезанное кусочками мясо и поджарить его до
образования корочки. Нашинкованный кольцами лук жарить вместе
с мясом до красноватого цвета, затем добавить морковь, нарезанную
соломкой. Положить половину соли, всё перемешать и жарить, пока
морковь не приобретёт золотисто-коричневый цвет. После этого налить
половину необходимого количества воды и дать закипеть.</p>
<p>Засыпать ровным слоем рис, усилить огонь и тотчас налить воду,
чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов
при помощи шумовки собрать к середине горкой, проколоть палочкой в
нескольких местах так, чтобы вода, находящаяся на поверхности,
прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.</p>
<p>Тщательно перемешайте готовый плов, переложите в большое блюдо,
сверху разложите мясо.</p>
</div>
</body>
</html>
1.16. Механизм наследования стилей (определения, упрощение таблиц стилей через наследование, ограничения наследования).
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <table> внутри которого добавляются теги <tr>, а затем идёт тег <td>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
TABLE {
color: red; /* Цвет текста */
background: #333; /* Цвет фона таблицы */
border: 2px solid red; /* Красная рамка вокруг таблицы */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td><td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <td> наследует свойства тега <table>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задаёт рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере тёмный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступает transparent, т. е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.
Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).
Пример 18.2. Параметры текста для всей веб-страницы
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
</body>
</html>
1.17. Селекторы: определение элементов стилизации (селекторы типов (тегов), селекторы классов, стилизация вложенных тегов, стилизация групп тегов).
С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.
В CSS существуют следующие виды селекторов:
Селекторы тэгов
p
{
color:green;
}
h2
{
color:red;
}
Селектор id
Данный вид селекторов позволяет производить более точную выборку и используется, когда необходимо выбрать только один определенный элемент на странице, с предварительно заданным идентификатором.
Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).
/* Оформим элемент с id="test1" */
#test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Селектор class
Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.
С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).
/* Свойства будут применены ко всем элементам с class="test1" */
.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
Селекторы атрибутов
Элементы на странице могут быть выбраны по их атрибутам.
/* Оформит все элементы имеющие атрибут src */
[src]
{
border:solid green 3px;
}
Комбинирование селекторов
Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.
Например, Вы можете комбинировать селекторы тэгов с селекторами class:
/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */
div p
{
color:green;
font-family:verdana;
font-size:1.2em;
}
1.18. Форматирование текста. Стилизация текста (выбор шрифта, придание тексту цветового оформления). Установка размера шрифта. Форматирование символов и слов (курсив и полужирный шрифт, прописные буквы, украшение текста, межсимвольный и межсловный интервал).
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Код HTML Описание Пример
<b>Текст</b> Жирное начертание текста Текст
<i>Текст</i> Курсивное начертание текста Текст
<sup>Текст</sup> Верхний индекс e=mc2
<sub>Текст</sub> Нижний индекс H2O
<pre>Текст</pre> Текст пишется как есть, включая все пробелы Текст
<em>Текст</em> Курсивный текст Текст
<strong>Текст</strong> Жирное начертание текста Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов <b> и <i> (пример 1). Их порядок в данном случае не важен.
1.19. Форматирование текста. Форматирование абзацев текста (установкамежстрочного интервала, выравнивание текста, отступ первой строки абзаца иудаление полей абзацев, форматирование первой буквы, первой строки абзаца).
Код HTML Описание
<p>Текст</p> Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
<p align="center">Текст</p> Выравнивание по центру.
<p align="left">Текст</p> Выравнивание по левому краю.
<p align="right">Текст</p> Выравнивание по правому краю.
<p align="justify">Текст</p> Выравнивание по ширине.
<nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr> Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>.
<div align="center">Текст</div> Выравнивание по центру.
<div align="left">Текст</div> Выравнивание по левому краю.
<div align="right">Текст</div> Выравнивание по правому краю.
<div align="justify">Текст</div> Выравнивание по ширине.
1.20. Форматирование текста. Стилизация списков (типы списков, позиционирование маркеров и нумерации списков, графические маркеры).
Для списков предусмотрены следующие атрибуты CSS:
• list-style-type - вид маркера;
none - нет символов;
disc - незаполненная окружность;
circle - заполненная окружность;
square - заполненный квадрат;
decimal - нумерация арабскими цифрами;
lower-roman - нумерация строчными римскими цифрами;
upper-roman - нумерация прописными римскими цифрами;
lower-alpha - нумерация строчными латинскими буквами;
upper-alpha - нумерация прописными латинскими буквами;
• list-style-position - положение маркера относительно текста;
• list-style-image - адрес изображения, используемого в качестве маркера;
• list-style - позволяет задать значения всех трех или нескольких вышеперечисленных атрибутов одновременно.
1.21. Поля, отступы, границы. Понятие блочной модели. Управление размерами полей и отступов (сокращенный набор свойств margin и padding, конфликты полей, удаление пустых полей с помощью отрицательных значений, отображение встроенных и блочных элементов).
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле слева от текста
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
Число значений Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
margin: [значение | проценты | auto] {1,4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
Число значений Результат
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.
1.22. Поля, отступы, границы. Добавление границ (сокращенный набор свойства border, форматирование отдельных границ). Установка цвета фона. Определение параметров высоты и ширины (вычисление фактических размеров блочных элементов, управление поведением блочных элементов с помощью свойства overflow).
1.23. Поля, отступы, границы. Управление обтеканием содержимого плавающих элементов (фон, границы и плавающие элементы, отмена правил обтекания).
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both | inherit
Значения
NoneОтменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
BothОтменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
LeftОтменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
RightОтменяет обтекание с правой стороны элемента.
InheritУстанавливает значение родителя.
1.24. Добавление графики на веб-страницы. CSS и тег IMG. Фоновые изображения. Управление повтором фоновых изображений. Сокращенный вариант свойства background.
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
CSS2.1 background: [background-attachment || background-color || background-image
|| background-position || background-repeat] | inherit
CSS3 background: [<фон>, ]* <последний_фон>
Здесь:
<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
1.25. Добавление графики на веб-страницы. Позиционирование фоновых изображений (ключевые слова, точные значения, процентные значения, фиксация изображения на месте).
Задача
Вставить изображение на веб-страницу.
Решение
Для добавления изображения в документ применяется тег <img>, его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега <img> необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.
В HTML4, HTML5
<img src="путь к файлу" alt="альтернативный текст">
В XHTML
<img src="путь к файлу" alt="альтернативный текст" />
Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла (пример 1).
Пример 1. Добавление картинки на веб-страницу
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Мои рисунки</title>
</head>
<body>
<p><img src="images/dzen.png" alt="Письма мастера дзен"></p>
</body>
</html>
1.26. Навигация сайта. Выборка стилизуемых ссылок (состояния ссылок, выборка отдельных ссылок). Стилизация ссылок (подчеркивание ссылок, создание кнопок, использование изображений).
#menu{ /* Левая колонка */
float: left;/* Обтекание справа */
border:1px solid #333;/* Параметры рамки вокруг */
width:200px;/* Ширина колонки */
padding:5px;/* Поля вокруг текста */
margin:10px 10px 20px 5px;/* Значения отступов */
}
#menudiv{
padding:2px;/* Поля вокруг ссылок */
}
#menua{
display: block;/* Отображать ссылку как блок */
padding:2px;/* Поля вокруг ссылок */
margin:1px;/* Отступы вокруг */
font-size:0.9em;/* Размер текста */
text-decoration: none;/* Убираем подчеркивание текста */
}
#menua:hover {
background:#faf3d2;/* Цвет фона */
border:1px dashed #634f36;/* Добавление пунктирной рамки */
margin:0;/* Убираем поля */
}
<div id="menu">
<div><a href="1.html">Все байки</a></div>
<div><a href="2.html">Байки по автору</a></div>
<div><a href="3.html">Байки по теме</a></div>
<div class="line"></div>
<div><a href="4.html">Популярные разделы</a></div>
<div><a href="text.html">Последние байки</a></div>
</div>
1.27. Навигация сайта. Создание панелей навигации (использование маркированных списков, вертикальные панели навигации, горизонтальные панели навигации).
<divid="nav">
<ul>
<li><ahref="/index">Home</a></li>
<li><ahref="/link1">Link 1</a></li>
<li><ahref="/link2">Link 2</a></li>
<ul>
</div>
1.28. Форматирование таблиц и форм. Правильное использование таблиц. Создание стилей для таблиц (добавление отступов, настройка горизонтального и вертикального выравнивания, создание таблиц, применение стилей к строкам и столбцам).
Форматирование таблиц
Теперь эту простенькую таблицу можно немного приукрасить. Ниже перечислены отдельные стилевые атрибуты, предусмотренные для форматирования внешнего вида HTML таблиц.
align – Выравнивание содержимого ячейки по горизонтали; возможные значения: left (по умолчанию), right, center и char. Применяется ко всем тегам.
bgcolor – Фоновый цвет. Применяется ко всем тегам.
border – Толщина разделительной линии (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегом <table>.
cellpadding – Расстояние между разделительной линий и содержимым ячейки (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
cellspacing – Расстояние между ячейками (значение указывается в пикселях). По умолчанию значение 0. Применяется с тегами <td> и <tr>.
colspan – Количество столбцов, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rowspan – Количество строк, которое должна занимать текущая ячейка. По умолчанию значение 1. Применяется с тегами <td> и <tr>.
rules – Применяется для отображения линеек между ячейками; возможные значения: rows, cols и all. Применяется с тегом <table>.
valign – Выравнивание содержимого ячейки по вертикали; возможные значения: top, bottom и baseline. По умолчанию значение center. Применяется с тегами <td>, <th> и <tr>.
width – Ширина таблицы или ячейки (значение указывается в пикселях или в процентном выражении относительно ширины страницы). Применяется со всеми тегами.
1.29. Форматирование таблиц и форм. Создание стилей для форм (элементы HTML-форм, компоновка форм с помощью CSS).
#log_form{
position: absolute;
border:4px solid #9FD95D;
border-radius:8px;
background:#CAEDA2;
width:256px;
}
#log_forma{
padding:038px 0;
}
1.30. Разметка страницы на основе плавающих элементов. Принцип работы CSS-разметки. Типы разметок веб-страниц. Основы плавающих разметок. Использование плавающих элементов в разметках (перемещение всех столбцов, плавающие элементы внутри плавающих элементов, использование отрицательных полей для размещения элементов).
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Следует понимать, что никто и нигде не плавает, поэтому правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и будем использовать в дальнейшем.
Плавающие элементы достаточно активно применяются при верстке и в основном служат для воплощения следующих задач.
• Обтекание картинок текстом.
• Создание врезок.
• Расположение слоев по горизонтали (добавление колонок).
Все это выполняет одно стилевое свойство float, а помогают ему в этом другие свойства. Хотя первоначально float не планировался на столь универсальную роль, но жизненные реалии расставили все по своим местам.
Обтекание картинок текстом
Есть разные способы, как объединять воедино текст и рисунки к нему. Обычно картинка выравнивается по левому или правому краю, а текст обтекает ее по контуру (рис. 1).
Рис. 1. Обтекание фотографий текстом
Для подобного форматирования используется атрибут align тега <img> со значением left или right. Чтобы создать промежуток между символами и краем изображения к тегу <img> также добавляется атрибут hspace для горизонтального отступа и vspace для вертикального (пример 1).
Пример 1. Использование атрибута align
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Плавающие элементы</title>
</head>
<body>
<p><img src="images/figure.jpg" width="100" height="111"
align="left" hspace="5" vspace="5" alt="Картинка"></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>
Приведенный в данном примере способ, хотя и считается уже классическим, имеет тот недостаток, что отступ слева и справа задается одинаковым. Аналогично дело обстоит и с отступом сверху и снизу. Это связано с особенностью атрибутов hspace и vspace, поэтому вообще отказываемся от их услуг, отступы задаем через стилевое свойство margin, а обтекание делаем с помощью float (пример 2).
Пример 2. Использование float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Плавающие элементы</title>
<style type="text/css">
.figure{
float: left;/* Выравнивание рисунка по левому краю */
background:#d6d3a2;/* Цвет фона */
padding:4px;/* Поля вокруг картинки */
margin:06px 4px 0;/* Отступы */
}
</style>
</head>
<body>
<p><img src="images/figure.jpg" width="100" height="111"
class="figure" alt="Картинка"></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>
В данном примере рисунок выравнивается по левому краю окна браузера путем использования значения left у свойства float, а текст обтекает картинку по правому и нижнему краю. Цвет фона и поля вокруг изображения предназначены для красоты и не являются обязательными.
1.31. CSS для распечатываемых веб-страниц. Создание таблиц стилей для печати (использование правила !important для отмены экранного стиля, изменение текстовых стилей, стилизация фонов для печати, скрытие нежелательных областей страницы, добавление разрывов страницы для печати).
Роль CSS в распечатывании веб-страниц
Большинство сайтов, предоставляющих возможность распечатать содержимое, используют PHP, и с его помощью преобразовывают оригинал страницы, или просто создают отдельные для печати страницы. Зачем? Можно обойтись без дубликатов.
Веб-страницы, предназначенные для печати, зачастую являются отдельно созданными страницами. Я не вижу ни одного достоинства у такого подхода — только недостатки. Главные из этих недостатков:
• Расходуется лишний объём дискового пространства.
• Если сайт динамический, то появляется лишняя нагрузка на сервер.
• Необходимо изменять структуру HTML-кода страниц.
• Ненужное дублирование текста.
Распечатать эту страницу
Итак, CSS-файл для печати создан. Теперь подключаем его с помощью следующей строки кода, которую необходимо поместить между тэгами <head></head>:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Дальше, когда посетитель захочет распечатать страницу и нажмёт кнопку печати в своём браузере, то документ распечатается в задуманном виде, т.е. подключится print.css и возьмёт на себя ответственность за стиль распечатанного материала. Но как быть в том случае, когда ожидания посетителя не оправдались? Да, страница распечаталась, но не в том виде, в котором посетитель видел эту страницу на экране. В таких случаях можно предоставить выбор в виде ссылки, щёлкнув по которой, подключается созданный CSS-файл для печати, после чего внешний вид страницы меняется и остаётся только то, что будет распечатано. Ожидания посетителя будут оправданы.
Подключаем новый CSS-файл для печати
Теперь необходимо, чтобы при нажатии ссылки, подключался созданный для распечатывания CSS-файл. Я выбираю метод с использованием PHP (есть несколько вариантов с использованием JavaScript), который успешно работает на Zen Garden (меняет дизайны), и который Дэйв предлагает использовать любому желающему.
Код следующий:
<? php
$tempCSS = $HTTP_GET_VARS["cssfile"];
if ($tempCSS != "") {
$loadCSS = $tempCSS;
} else {
/* устанавливается CSS-файл поумолчанию, если нет строки запроса */
$loadCSS = "default.css";
};
$currentDesign = $loadCSS;
?>
Этот PHP-скрипт необходимо вставить в каждую страницу сайта, где будет подгружаться новый CSS-файл. default.css — название оригинального CSS-файла, предназначенного для экрана монитора. Теперь необходимо заменить оригинальную строку (между <head></head>) следующей строкой кода:
<link rel="stylesheet" type="text/css" href="<?php echo $loadCSS; ?>" title="default" media="screen" />
и так тоже работает:
<style type="text/css" media="all">@import "<?php echo $loadCSS ?>";</style>
Наконец, чтобы сослаться на конкретный CSS-файл и применить его к конкретной интернет-странице, необходимо прописать следующее:
<a href="thispage.html?cssfile=print.css">Распечатать страницу</a>
thispage.html — название страницы, на которой будет выполняться подгруздка каскадных таблиц, а print.css — это уже непосредственно название самого CSS-файла для печати.
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
• !important добавлен в авторский стиль — будет применяться стиль автора.
• !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
• !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
• !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important в общем случае показан в табл. 1.
Табл. 1. Результат применения !important
Стиль автора Стиль пользователя Результат
BODY {
/* Серый цвет текста */
color: silver;
/* Размер текста 8 пунктов */
font-size: 8pt
} BODY {
/* Черный цвет текста */
color: #000;
/* Размер текста 12 пунктов */
font-size: 12pt
} Lorem ipsum dolor sit amet...
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;
/* Размер текста 8 пунктов */
font-size: 8pt
} BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;
/* Размер текста 12 пунктов */
font-size: 12pt
} Lorem ipsum dolor sit amet...
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;
/* Размер текста 8 пунктов */
font-size: 8pt
} BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;
/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
} Lorem ipsum dolor sit amet...
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;
/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important
} BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;
/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
} Lorem ipsum dolor sit amet...
При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.
В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Оформление, как показано на рис. 1.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
HTML и CSS
Статьи по предмету «Web-программирование»