- •Оглавление
- •Введение Информация о курсе
- •Тенденции веба
- •Переход в веб
- •Введение в html Что такое html?
- •Элементы
- •Атрибуты
- •Базовая структура документа
- •Стандарт xhtml 1.0 Strict
- •Введение в css
- •Правила, свойства, значения
- •Простые селекторы
- •Универсальный селектор
- •Селектор по типу элемента
- •Селектор по id
- •Селектор по class
- •Подключение таблицы стилей к веб-документу
- •Элемент style
- •Атрибут style
- •Работа с цветом
- •Свойство color
- •Миф о «безопасных» цветах
- •Свойство background
- •Background-color — цвет фона
- •Background-image — фоновое изображение
- •Background-repeat — режим повторения изображения
- •Background-attachment — режим прокрутки (прикрепления) изображения
- •Background-position — положение изображения
- •Свойства border-top, border-right, border-bottom, border-left
- •Свойства border-width, border-color, border-style — параметры рамки
- •Собирательное свойство border — рамка
- •Элементы html Области элементов
- •Некоторые текстовые элементы
- •Заголовки
- •Элемент p — абзац
- •Элемент address — адресные данные
- •Атрибут title
- •Оформление гиперссылок
- •Псевдоклассы гиперссылок
- •Элементы dt и dd — главная и подчиненная части списка определений
- •Оформление списков
- •Элемент img — изображение
- •Атрибут src — адрес изображения
- •Атрибут alt — альтернативное описание
- •Атрибут style — оформление изображения
- •Атрибуты colspan и rowspan — объединение ячеек
- •Семантическая верстка и микроформаты
- •Оформление страниц при помощи css Оформление текста
- •Свойство font-family — гарнитура шрифта
- •Семейства шрифтов
- •Свойство font-size — кегль шрифта
- •Свойство font-style — управление наклоном
- •Свойство font-weight — насыщенность шрифта
- •Свойство font — управление шрифтом
- •Свойство text-transform — преобразование регистра
- •Свойство line-height — высота строки
- •Свойство vertical-align — вертикальное выравнивание
- •Вертикальное выравнивание для строчных элементов
- •Вертикальное выравнивание для ячеек таблиц
- •Область элемента
- •Свойство text-indent — управление абзацным отступом
- •Свойство padding — внутренний отступ
- •Свойство margin – внешний отступ
- •Верстка Что такое верстка?
- •С кем взаимодействует верстальщик?
- •Как создается веб-страница?
- •Процесс верстки
- •Пример верстки
- •Глава 6. Введение в JavaScript
- •Что такое JavaScript?
- •Типы данных
- •Переменные
- •Операторы
- •Инструкции
- •Конструкторы
- •Прототипы
- •Возможности расширения
- •Экземпляры и классы
- •Общие методы класса Object
- •Интеграция html и JavaScript
- •Элемент script
- •Интеграция в данные
- •Глава 7. Клиентский JavaScript Формы в html
- •Элемент form — собственно форма
- •Обработчики событий
- •Обработчики событий как атрибуты
- •Обработка событий без внедрения кода через атрибуты
- •Таймеры
- •Объект Location
- •Объект History
- •Объект Window
Элементы
Элемент (element) — это основная конструкция HTML-документа. Они подразделяются на два вида:
-
Непустой элемент (non-empty element) — это открывающий тег, соответствующий ему закрывающий тэг и все, что находится между ними. Примеры:
<title>My page</title>
<td class=”filter on”>Депозит «Юбилейный»</td>
<script>alert(‘hijack’);</script>
<body><p>Текст абзаца</p></body>
-
Пустой элемент (empty element) — это элемент, состоящий только из тега пустого элемента. Примеры таких элементов:
<br />
<img src=”logo.png” alt=”Рога и Копыта” />
Атрибуты
Атрибут (attribute) — это конструкция вида A=”B”. A — имя атрибута, B — его значение. Примеры атрибутов:
-
rel=“stylesheet”
-
type=“text/css”
-
lang=”ru”
-
content=“text/html; charset=utf-8”
Атрибуты всегда принадлежат элементам. Они специально созданы для расширения их возможностей. В результате один и тот же тип элементов может выполнять различные функции (конечно, в некоторых пределах).
Атрибуты могут записываться в открывающем теге или в теге пустого элемента. Если атрибутов несколько, то их можно записывать друг за другом в любом порядке, разделяя пробелами. Хотя пробел обязателен только между именем тэга и первым атрибутом, рекомендуется разделять атрибуты пробелом — так код становится проще читать.
Базовая структура документа
Каждый HTML-документ содержит в себе несколько обязательных элементов. Для того чтобы разобраться с базовой структурой документа взгляните на листинг 1.1. В нем приведен базовый шаблон HTML-файла для стандарта XHTML 1.0 Strict. Вы можете использовать его в собственных разработках.
Листинг 1.1. Базовый шаблон HTML-файла
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="" media="all" />
</head>
<body>
</body>
</html>
Для новичков в веб-программировании данный шаблон кажется очень сложным и непонятным. Однако понимание предназначения каждой строки существенно облегчает дальнейшую работу с HTML.
Первая строка не является тегом. Как уже говорилось ранее, это служебная конструкция. Она относится к языку XML (напомню, что XHTML построен на базе HTML и XML) и указывает на версию XML (1.0) и кодировку XML-документа (UTF-8).
Данная конструкция рекомендуется стандартом. Однако если используется версия XML 1.0 и кодировка UTF-8, то ее можно убрать. Это особенно полезно в случаях работы с еще живущим (но уже стремительно вымирающим) браузером Internet Explorer 6. Он может распознать эту директиву как признак XML-файла и вместо обработки HTML-документа строит и выводит XML-дерево.
Для файлов HTML и CSS рекомендуется использовать кодировку UTF-8. Она наиболее универсальна и хорошо поддерживается всеми браузерами. Некоторые разработчики до сих пор используют устаревшие кодировки, такие как Windows-1251 или KOI8-R, что демонстрирует их непрофессионализм или лень. Кроме того, работа с устаревшими кодировками усложняет разработку.
Вторая директива, из-за своей длины занявшая две строки листинга также не является тэгом. Эта конструкция называется DTD (Document Type Declaration, «доктайп»), что в переводе на русский означает «объявление типа документа». Компоненты объявления:
-
Тип корневого элемента. Для HTML корневым элементом является html
-
PUBLIC указывает, что формальные правила синтаксиса языка общедоступны
-
Формальное открытое имя (formal public identifier) — полное имя, которым язык обозначается в компьютерных системах. Для XHTML 1.0 Strict оно выглядит как "-//W3C//DTD XHTML 1.0 Strict//EN"
-
Системное имя (system identifier) — это адрес ресурса, содержащего формальное описание правил языка (файл dtd). Для XHTML 1.0 Strict это имя выглядит так: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd".
Элемент html является корневым для HTML-документа. Он обозначает всю страницу. В нем должны обязательно содержаться два элемента: head и body. Причем они должны размещаться именно в этом порядке. Других дочерних элементов, кроме head и body, у элемента html быть не может.
Обязательный атрибут xmlns служит для определения пространства имен XML. Поскольку язык XML включает только правила построения документа, но не набор элементов, то для конкретного типа документа нужно указать на набор таких элементов и их иерархию. Именно эти описания и содержатся в пространстве имен XML.
Атрибуты lang и xml:lang обозначают естественный (человеческий) язык документа. Эти атрибуты необязательны, но полезны для поисковых систем. В качестве значения атрибутов используются метки языка: ru, en, fr, de, grc и т.д. Языковые атрибуты можно задавать не только для элемента html, но и для любого другого элемента, где это имеет значение. Значение языковых атрибутов наследуется, поэтому достаточно указать их для элемента html, а для остальных элементов указывать их явно для элемента только в случае наличия другого языка в этом элементе.
Элемент head содержит в себе служебные элементы, которые не отображаются в документе, но могут влиять на его внешний вид или поведение. Единственный обязательный дочерний элемент — элемент title, который содержит заглавие документа. Также могут использоваться такие элементы как:
-
link — для связи с ресурсами (например, с CSS-файлами);
-
meta — для хранения метаинформации (например, сведений о кодировке);
-
object — для внедрения объекта;
-
script — для внедрения скрипта;
-
style — для внедрения стилей в документ (не рекомендуется использовать).
Обратите внимание на элемент meta в листинге 1.1. Он содержит сведения о кодировке документа и стоит перед title. Это делается для того, чтобы браузер получил сведения о кодировке документа раньше, чем встретит какие-либо символьные данные (контент). Несмотря на то, что элемент meta почти не используется на практике, в некоторых (пусть и редких) случаях он помогает правильно отобразить веб-страницу.
Элемент body обозначает основную часть веб-страницы. Содержимое этого элемента предназначено для отображения. Особенностью данного элемента является то, что он может содержать в себе только блочные элементы. Это означает, что в body нельзя напрямую вписывать текст, установить обычную гиперссылку или изображение (img).