средства создания динамических web-сайтов

Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное
учреждение высшего профессионального образования
«Иркутский государственный университет»
Международный институт экономики и лингвистики
Я. В. Курзыбова
СРЕДСТВА СОЗДАНИЯ
ДИНАМИЧЕСКИХ WEB-САЙТОВ
Учебное пособие
УДК 681.3.06(075.8)
ББК 32.973.01я73
К93
Печатается по решению ученого совета МИЭЛ ИГУ
Рецензенты:
ст. науч. сотр. ИДСТУ СО РАН, канд. физ.-мат. наук А. В. Банщиков,
ст. преп. кафедры естественных дисциплин МИЭЛ ИГУ О. Ю. Башарина
К93
Курзыбова Я. В.
Средства создания динамических web-сайтов : учеб. пособие /
Я. В. Курзыбова. – Иркутск : Изд-во ИГУ, 2011. – 121 с.
ISBN 978-5-9624-0558-2
Изучение web-технологий студентами специальностей экономического
направления позволит грамотно ориентироваться в современном информационном пространстве и использовать полученные навыки в профессиональной деятельности.
Учебное пособие предназначено для подготовки студентов в предметной области разработки web-сайтов. Описываются современные технологии
создания динамических сайтов: язык разметки гипертекста HTML, каскадные
таблицы стилей CSS, скриптовый язык JavaScript. В пособии студенты найдут справочную информацию о web-технологиях со стороны клиента: HTML,
CSS, JavaScript.
Пособие предназначено для студентов МИЭЛ ИГУ, специальности
080301 «Коммерция» и специальности 080111 «Маркетинг» при изучении
курсов «Информационные технологии в коммерческой деятельности», «Информационные системы маркетинга», «Е-коммерция», «Е-маркетинг». Пособие может быть полезно преподавателям при проведении практических занятий, лабораторных, контрольных и самостоятельных работ.
Библиогр. 7 назв. Ил. 2. Табл. 8. Прил. 3.
УДК 681.3.06(075.8)
ББК 32.973.01я73
© Курзыбова Я. В., 2011
© ФГБОУ ВПО «ИГУ», 2011
ISBN 978-5-9624-0558-2
2
Содержание
Введение ............................................................................................................... 4
Основные понятия web-технологий .................................................................. 6
Раздел 1. Язык разметки гипертекста HTML .............................................. 7
1.1. Введение в HTML ......................................................................................... 7
Версии и стандарты HTML ...................................................................... 8
Синтаксис HTML ..................................................................................... 11
Классификация элементов HTML по типу ........................................... 13
Правила написания HTML-кода ............................................................ 15
Структура HTML-документа.................................................................. 16
1.2. Гиперссылки ................................................................................................ 17
Ссылки внутри страницы........................................................................ 18
Ссылка на новое окно ............................................................................. 19
1.3. Графика ........................................................................................................ 19
1.4. Фреймы ........................................................................................................ 22
1.5. Формы .......................................................................................................... 28
1.6. Практикум по HTML .................................................................................. 33
Лабораторная работа 1. Форматирование и редактирование текста.. 33
Лабораторная работа 2. Гиперссылки и графика .............................. 34
Лабораторная работа 3. Создание и редактирование таблиц .......... 35
Лабораторная работа 4. Формы .......................................................... 37
Лабораторная работа 5. Фреймы ........................................................ 38
1.7. Вопросы для самоконтроля ....................................................................... 38
Раздел 2. Основы каскадных таблиц стилей CSS ..................................... 40
2.1. Добавление CSS .......................................................................................... 43
2.2. Практикум по CSS ...................................................................................... 51
2.3. Вопросы для самоконтроля ....................................................................... 55
Раздел 3. Основы скриптового языка JavaScript ...................................... 56
3.1. История JavaScript ...................................................................................... 58
3.2. Семантика и синтаксис JavaScript............................................................. 59
3.3. Практикум по JavaScript ............................................................................ 76
Лабораторная работа 6. Введение в JavaScript .................................. 76
Лабораторная работа 7. Операторы JavaScript .................................. 78
Лабораторная работа 8. Циклы и массивы ........................................ 81
3.4. Вопросы для самоконтроля ....................................................................... 86
Использованная литература.............................................................................. 87
Приложение 1. Итоговый тест. Изучение HTML, CSS и JavaScript ............ 88
Приложение 2. Краткий справочник по тэгам HTML ................................... 93
Приложение 3. Краткий справочник по CSS ................................................ 119
3
ВВЕДЕНИЕ
В последние годы Интернет прочно вошел в нашу жизнь и охватывает почти все ее сферы: культуру, искусство, бизнес. Наряду с
обычными музеями, библиотеками, магазинами все большую популярность во всем мире завоевывают аналогичные интернет-ресурсы.
Даже бизнес становится виртуальным: создаются web-представительства фирм, электронные магазины и торговые площадки, электронные банки, которые дают возможность осуществлять типичные
для этих сфер операции с большей скоростью.
Сейчас происходит массовый переход сферы информации, рекламы, бизнеса на платформу Интернета. Преимущества данной
платформы – глобальная доступность информационных ресурсов,
оперативность, мощные возможности поиска, невысокая себестоимость реализации, широкая потенциальная аудитория, развитая среда
доставки различных данных. Вместе с определенным насыщением
этого рынка наблюдается разочарование в возможностях интернеттехнологий и возвращение к традиционным методам. Анализ коммерческих ресурсов показывает, что дело в низкой культуре представления информации, не позволяющей использовать все возможности сайта для получения прибыли.
В ходе развития Интернет сформировались электронные связи
индивидуальных и корпоративных пользователей, что явилось базой
для создания новой электронной среды, в которой информация стала
более значимой и более доступной. Интернет является одновременно
и причиной и результатом возникновения этого нового вида экономики, продуктом фундаментальных технологических и экономических изменений, приведших к ее рождению, а также ее средой и
рынком.
Всё это вызвало существенные изменения в экономике. Изменились базовые отношения и модели ведения бизнеса: от господства в
них производителя, а затем посредника, – к главенствующей роли
потребителя; от массового производства – к изготовлению на заказ;
от ценности материальных ресурсов и активов – к ценности информации, знаний и интеллекта.
В связи с этим профессии web-дизайнера и web-программиста
стали востребованы в России.
Интернет-технологии создания web-ресурсов требуют владения
такими языками для написания серверных скриптов, как Perl, PHP,
4
ASP, владения языком XML, а также умения создавать динамические
страницы и сайты, используя скрипты VBScript и JavaScript, которые
позволяют осуществлять вычисления, работу с датой и временем,
изменение элементов страницы по желанию пользователя.
В этом пособии студенты найдут справочную информацию о
web-технологиях со стороны клиента: HTML, CSS, JavaScript. Полученные в ходе работы с пособием навыки помогут студентам эффективно использовать современные Интернет-технологии в профессиональной деятельности.
Пособие состоит из трех частей. В первой части даются базовые сведения по структуре HTML-документов, приводятся основополагающие знания, необходимые для создания web-страниц. В
этой части речь идет о синтаксисе HTML, обсуждаются вопросы
правильной организации HTML-документов, форматирования текста, связывания страницы, работы с изображениями, с фреймами,
таблицами и списками.
Во второй части рассматриваются вопросы по работе с каскадными таблицами стилей (Cascading Style Sheets – CSS), позволяющими определять и присоединять стили к документам HTML. Изучение материала данной части направлено на развитие умений задавать внешний вид документа HTML при его отображении в окне
браузера (шрифт и цвет заголовков разных уровней, шрифт и т. д.).
В третьей части рассматриваются основные понятия языка сценариев JavaScript. Перечисляются задачи, в решении которых может
помочь JavaScript. Рассматриваются вопросы размещения скриптов в
HTML-документах, синтаксис языка JavaScript: алфавит, операции,
данные, выражения, операторы, операторы циклов, операторы манипулирования с объектами. В данной главе представлена также информация о работе с объектами, подробно дается понятие объектной
модели документа и модели событий в JavaScript, описываются отдельные примеры использования JavaScript.
Помимо теоретического материала в работе предлагаются разобранные упражнения, практические, а также вопросы для самопроверки. Приложения имеют необходимые дополнительные справочные данные по пройденному материалу.
5
ОСНОВНЫЕ ПОНЯТИЯ WEB-ТЕХНОЛОГИЙ
Интернет – всемирная система объединённых компьютерных сетей, построенная на использовании протокола IP и маршрутизации пакетов данных. Интернет образует глобальное информационное пространство, служит физической основой для Всемирной паутины WWW
(World Wide Web) и множества других систем (протоколов) передачи
данных. Часто упоминается как «Всемирная сеть» и «Глобальная сеть.
Всемирная паутина (англ. World Wide Web) – распределенная
система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных
к Интернету. Всемирную паутину образуют миллионы web-серверов.
Большинство ресурсов всемирной паутины представляет собой гипертекст. Гипертекстовые документы, размещаемые во всемирной
паутине, называются web-страницами. Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой
ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом.
Браузер – программное обеспечение для просмотра web-сайтов,
то есть для запроса web-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой.
Протокол (protocol) – набор правил, регулирующих процесс
приема/передачи данных.
Uniform Resourse Locator (URL) – в Интернет для задания положения файлов на других серверах используется URL. Он включает
в себя тип ресурса (gopher, FTP) и местонахождение файла на сервере. Общий синтаксис таков: протокол://хост.домен[:порт]/путь/имя
Хост (host) – 1) главный компьютер; ведущий узел (в сети); сервер; 2) Также хостом часто называют уникального пользователя (посещение) web-сайта. Учет количества и качества хостов является важной
частью статистики сайта и статистики рекламных кампаний. Большинство рейтингов считают уникальных посетителей (хосты) главным показателем трафика сайта и располагают рейтингующиеся сайты в топах в зависимости от количества хостов (уникальных посещений) в течение определенного промежутка времени (обычно суток).
Доменное имя (домен, domain, domain name) – в сети Internet – часть
иерархии имен. Синтаксически доменное имя (domain) Internet содержит
последовательность имен (меток), разделенных точками (.) например,
«www.rambler.ru.» В OSI термин домен используется как административное деление сложных распределенных систем, как в MHS Private
Management Domain (PRMD) и Directory Management Domain (DMD).
6
Раздел 1. ЯЗЫК РАЗМЕТКИ
ГИПЕРТЕКСТА HTML
1.1. ВВЕДЕНИЕ В HTML
HTML (HyperText Markup Language – «язык разметки гипертекста») – стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц создаются при помощи языка HTML.
Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879.
Язык HTML был разработан британским ученым Тимом Бернерсом Ли приблизительно в 1991–1992 годах в стенах Европейского
совета по ядерным исследованиям в Женеве (Швейцария). HTML
создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области верстки. HTML успешно справлялся с проблемой сложности SGML путем определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы
также часто называют «тэгами». С помощью HTML можно легко
создать относительно простой, но красиво оформленный документ.
Помимо упрощения структуры документа, в HTML внесена поддержка
гипертекста. Мультимедийные возможности были добавлены позже.
Документы HTML являются обычными текстовыми файлами,
содержащими специальные тэги (или управляющие элементы) разметки. Тэги разметки указывают браузеру web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу.
Файлы HTML обычно имеют расширения htm или html. Их
можно создавать при помощи любого текстового редактора.
Контент – содержание, наполнение. Качественная, отобранная
информация из нужной области знаний или человеческой деятельности, оформленная в доступной для публикации форме. Под данным
термином чаще всего понимается содержательное наполнение электронных ресурсов, например, web-сайтов. Часто поставкой контента
7
занимаются специальные фирмы – контент-провайдеры, которые его
собирают, и продают оптом.
Текстовые документы, содержащие разметку на языке HTML
(такие документы традиционно имеют расширение .html или .htm),
обрабатываются специальными приложениями, которые отображают
документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями».
Web-обозреватель, браузер (от англ. web browser) – программное обеспечение для просмотра web-сайтов, то есть для запроса webстраниц (преимущественно из сети), их обработки, вывода
и перехода от одной страницы к другой.
Обычно браузеры предоставляют пользователю удобный интерфейс для запроса web-страниц, их просмотра (и вывода на иные
внешние устройства) и, при необходимости, отправки введённых
пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox,
Apple Safari, Google Chrome и Opera.
Наиболее популярными на сегодняшний день браузерами являются (по данным на январь 2010 г.):
• Internet Explorer – 62,12 %;
• Mozilla Firefox – 24,43 %;
• Google Chrome – 5,22 %;
• Safari – 4,53 %;
• Opera – 2,38 %.
Версии и стандарты HTML
Существует множество разных версий языка HTML. Когда-то
была широко распространена версия HTML 2.0, затем ее надолго
сменил язык HTML 3.2. Сейчас чаще всего применяется HTML 4.0
или его ближайшая разновидность – HTML 4.01.
Многие версии HTML дополнительно делятся на типы. Например, существует три типа HTML 4.0 и HTML 4.01: Strict, Transitional
и Frameset.
1. Transitional («переходный») – это особенно распространенный
тип, на нем написано большинство существующих страниц и именно
ему посвящена основная масса учебников и справочников по HTML;
2. Strict («строгий») отличается от переходного тем, что в нем
недопустимы тэги и элементы, отвечающие за внешний вид, представление документа. Например, в строгом типе нет тэгов FONT и U,
атрибутов bgcolor и alink;
8
3. Frameset («фреймовый»), наоборот, еще либеральнее переходного, так как допускает всё то же, что и переходный, а также
поддерживает фреймы.
На сегодня наиболее предпочтительной является версия XHTML
1.0 Strict. Главное достоинство XHTML – в том, что он совместим с
более общим языком XML (Extensible Markup Language, «расширяемый язык разметки»).
Это значит, что всякий документ, написанный на языке XHTML,
одновременно является и документом, написанным на языке XML.
Технология XML приобретает все более широкое распространение,
поэтому совместимость с ней обеспечивает большую универсальность документов и облегчает их обработку стандартными средствами работы с XML.
В XHTML 1.0 Strict нет тэгов и атрибутов, отвечающих за
оформление текста – Например, тэгов <center>…<⁄center> и
<font>…<⁄font>, атрибутов alink, bgcolor, color и многих других, к которым привыкли некоторые разработчики. Все, что касается внешнего вида документа, должно быть закодировано не в HTML, а в
Cascading Style Sheets (CSS).
Приведем версии и стандарты HTML.
• RFC 1866 – HTML 2.0, одобренный как стандарт 22 сентября
1995 года;
• HTML 3.2 – 14 января 1997 года;
• HTML 4.0 – 18 декабря 1997 года;
• HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) – 24 декабря 1999 года;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на
HTML 4.01 Strict) – 15 мая 2000 года.
• HTML 5– в разработке. Конец разработки запланирован на
2014 год.
В версии HTML версии 4.0 произошла некоторая «очистка»
стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший
(вместо него рекомендуется использовать таблицы стилей CSS).
В 1998 году консорциум Всемирной паутины начал работу над
новым языком разметки, основанном на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название
XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.
9
Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года
консорциум Всемирной паутины объявил, что полномочия рабочей
группы XHTML 2 истекают в конце 2009 года. Таким образом, была
приостановлена вся дальнейшая разработка стандарта XHTML 2.0.
XHTML (Extensible Hypertext Markup Language – расширяемый
язык разметки гипертекста) – язык разметки web-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и
HTML, XHTML соответствует спецификации SGML, поскольку
XML является ее подмножеством.
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По
рекомендации W3C браузеры, встретив ошибку в XHTML, должны
сообщить о ней и не обрабатывать документ.
Кодировкой по умолчанию является UTF–8 (в отличие от
HTML, где кодировкой по умолчанию является ISO 8859–1).
Версии XHTML:
• XHTML 1.0 Переходный (Transitional): предназначен для легкой миграции из HTML 3.2 и для тех, кто использует инлайнфрэймы.
• XHTML 1.0 Строгий (Strict): полностью отделяет содержание
документа от оформления (задается только через CSS), многие
атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей.
• XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить окно браузера на несколько фрэймов.
• XHTML 1.1 Модульный (Module-based): авторы могут импортировать дополнительные свойства в их разметку.
• XHTML Основной (Basic): специальная облегченная версия
XHTML для устройств, которые не могут использовать полный набор элементов XHTML – в основном используется в
миниатюрных устройствах, таких как мобильные телефоны.
Подразумевается, что он заменит WML и C-HTML.
• XHTML мобильного профиля (Mobile Profile): основанный на
XHTML Basic, добавляет специфические элементы для мобильных телефонов.
• XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.
10
Более подробно о различиях:
• В XHTML все тэги и атрибуты должны быть набраны в нижнем регистре, кроме тэга <!doctype>.
• Необходимо закрывать любые тэги, в том числе одиночные,
кроме <!doctype>: <option> </option>, <br />, <hr />, <img />,
<input />, <link />, <meta />.
• Запрещается использование сокращений для булевых атрибутов, параметры вписываются полностью. К примеру, актуально:
<hr
noshade="noshade"
/>,
<input
type="checkbox"
checked="checked" />, вместо <hr noshade>, <input
type="checkbox" checked>
• Рекомендуется максимально семантически использовать тэги:
блок <div> </div> – для верстки, а таблицы – для табличного
представления данных.
• Расширением документа может быть .xhtml или .html, но чаше
встречается второй способ.
Синтаксис HTML
Тэг (дескриптор) – элемент HTML, представляющий из себя
текст, заключенный в угловые скобки <>. Тэг является активным
элементом, изменяющим представление следующей за ним информации. Тэг может иметь некоторое количество атрибутов. Обычно
используются два тэга – открывающий и закрывающий.
У тэга могут быть свойства, называемые атрибутами, дающие
дополнительные возможности форматирования текста. Они записываются в виде пары имя – значение, причем нечисловое значение.
Для обозначения начала и конца элемента применяются тэги.
Внутри тэгов могут быть атрибуты со своими значениями, расширяющими возможности тэгов, а также содержимое (рис. 1).
тэга
Тэг
тэг
Рис. 1. Тэг <a> с атрибутом href
Закрывающий тэг похож на открывающий, но содержит слэш (/)
внутри угловых скобок.
11
Пустые элементы не имеют закрывающего тэга и содержимого
(рис. 2).
Тэг
Рис. 2. Пустой тэг <img>
Атрибуты тэгов
Любые атрибуты не чувствительны к регистру и пишутся внутри
открывающего тэга и содержат имя и значение. В именах нельзя использовать пробелы, кавычки (""), апострофы (‘), знак больше (>),
слэш (/) и равно (=), а также любые символы, не определённые в
Юникоде.
Различают четыре разных способа написания атрибутов и их
значений.
1. Пустой атрибут.
Этот атрибут не имеет значения, поведение тэга определяет наличие этого атрибута.
<input required>
Вместо пустого атрибута допускается писать значение, совпадающее с названием атрибута.
<input required="required">
Однако такая форма не обязательна и может применяться только
по желанию.
Значение пишется непосредственно после знака равно (=), идущего вслед за именем атрибута. До и после знака равно можно
вставлять любое количество пробелов или обойтись без них.
<img src="link.html">
2. Использование двойных кавычек
Значение берётся в двойные кавычки, обычно такая форма указывается для текста.
<input type="checkbox">
3. Использование одинарных кавычек
Вместо двойных кавычек также допустимо писать одинарные.
<input type='checkbox'>
12
Значения атрибутов разделяются между собой пробелом, поэтому если у вас в качестве значения указывается предложение, обязательно берите его в одинарные или двойные кавычки.
Доктайп (DTD)
<!doctype> предназначен для указания типа текущего документа – DTD (document type definition, описание типа документа) для того, чтобы браузер понимал, с какой версией HTML он имеет дело.
Если доктайп не указан, браузеры переходят в режим совместимости,
в котором не работают многие возможности HTML 5, а также возникают ошибки с отображением документа. Доктайп не чувствителен к
регистру и содержит всего два слова: <!doctype html>. Это ключевой
элемент и обычно он располагается в первой строке кода.
Комментарии
Некоторый текст можно спрятать от показа в браузере, сделав
его комментарием. Хотя такой текст пользователь не увидит, он все
равно будет передаваться в документе, так что, посмотрев исходный
код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не
влияющих на вид страницы. Начинаются они тэгом <!–– и заканчиваются тэгом ––>. Все, что находится между этими тэгами отображаться на web-странице не будет.
Классификация элементов HTML по типу
Базовым кирпичиком web-страницы выступает элемент. Они могут делиться по разным критериям, например, по типу или своему
назначению.
Таблица 1
Классификация элементов по типу
Тип элементов
Описание
Перечисление элементов
Пустые
элементы
К ним относятся элементы, у
которых нет закрывающего
тэга
Сырые
текстовые
элементы
RCDATA
Предназначены для вывода
скриптов или стилей, имеющих
синтаксис отличный от HTML
Эти элементы могут содер <area>, <base>, <br>,
<col>, <command>,
<embed>, <hr>, <img>,
<input>, <keygen>,
<link>, <meta>, <param>, <source>,
<track>, <wbr>
<script>, <style>
<textarea>, <title>
13
Тип элементов
Описание
Перечисление элементов
жать любой текст или спецсимволы, за исключением нестандартных спецсимволов,
которые называются сомнительным амперсандом, например: &copi; или &#38T.
Элементы, относящиеся к
MathML или SVG
Инородные
элементы
Обычные
элементы
<svg>, <mrow>,
<msup> и т. д.
Все остальные элементы, ко<p>, <i>, <teble> и т. д.
торые не входят в предыдущие
группы
Приведем таблицу (табл. 2), отражающую классификафию по
назначению.
Таблица 2
Классификация элементов по назначению
Назначение
элемента
Корневой
элемент
Метаданные
документа
Скрипты
Разделы
Группирование
контента
Текст
Рецензирование
14
Описание
Перечисление
<html>
<head>, а также элементы, которые располагаются внутри него.
<head>, <meta>,
<title>
Скрипты позволяют добавлять ин- <script>
терактивности на web-страницу, в
эту группу входят элементы,
управляющие скриптами.
Элементы, управляющие основ<body>, <section>,
ными разделами web-страницы
<nav>, <article>,
<aside> и др.
Элементы, обрамляющие текст,
<span>, <div> и
списки, изображения.
др.
Элементы, изменяющие вид текста, например, делающие его
жирным или курсивным, а также
выделяющие текст по смыслу –
аббревиатура, цитата, переменная,
код и т. д.
Элементы, показывающие редактирование в документе.
<b>, <i>, <u>,
<abbr> и др.
<ins> и <del> и
др.
Назначение
элемента
Внедряемый
контент
Табличные
данные
Формы
Ссылки
Описание
Элементы, вставляемые на страницу в виде разных объектов –
изображения, видео, аудио и др.
Элементы для создания и управления видом таблиц.
Формы являются одним из важных элементов любого сайта и
предназначены для обмена данными между пользователем и сервером. В эту группу входят элементы для создания формы и её
полей.
Элементы <a> и <area>
Перечисление
<object>
<table>, <tr>,
<td>, <th> и др.
<form>, <input>,
<lable>, <button>
и др.
Подобное группирование условно и может принимать другой
вид, потому что одни и те же элементы могут принадлежать разным
группам.
Правила написания HTML-кода
Для того чтобы документ был совместим с XML, необходимо
соблюдать определенные правила кодирования и рекоминдации. Для
HTML 4.0 и предыдущих версий большинство этих правил были не
обязательными, но в XHTML им нужно следовать:
• булевы атрибуты записываются в развернутой форме. Например, следует писать <option selected=«selected»> или <td nowrap=«nowrap»>.
• у каждого открывающего тэга должен быть соответствующий
ему закрывающий. В старых версиях HTML некоторые тэги
(например, <p>…<⁄p> или <td>…<⁄td>) можно было не закрывать, но в XHTML закрывающие тэги обязательны;
• имена всех тэгов и атрибутов записываются строчными буквами. В XML регистр букв имеет значение, поэтому
<HEAD>…<⁄HEAD> и <head>…<⁄head> – два разных тэга;
• значения атрибутов обязательно заключаются в кавычки;
• тэги пустых элементов (<link ⁄>, <img ⁄>, <br ⁄> и др.) завершаются косой чертой. (Пробел, стоящий перед косой чертой,
не обязателен в XML, но рекомендуется для совместимости с
устаревшими браузерами, понимающими только «традиционный» HTML.)
15
• если для тэга не добавлен какой-либо допустимый параметр,
браузер будет подставлять значение, заданное по умолчанию;
• внутри тэга между его параметрами допустимо ставить перенос строк;
• все параметры тэгов рекомендуется брать в двойные или одинарные кавычки (хотя в современном браузере отсутствие кавычек не приведет к ошибкам);
• если какой-либо тэг или его параметр был написан неверно, то
браузер проигнорирует подобный тэг;
• существует определенная иерархия вложенности тэгов (например, метатэги должны находиться внутри контейнера
<HEAD>), причем если тэги между собой равноценны в иерархии, то их последовательность не имеет значения;
• порядок параметров в любом тэге не имеет значения и на результат отображения элемента не влияет.
Структура HTML-документа
В документе HTML можно выделить два основных блока: головная часть и тело документа. Содержимое головной части не выводится на экран пользователя, за исключением заголовка, в ней, как
правило, указывают ключевые слова, авторов и другую служебную
информацию, а также подключают внешние таблицы стилей и
скрипты. В теле документа размещают ту информацию, которая будет выведена пользователю.
Пример. Простейший HTML-документ
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1–transitional.dtd">
<html>
<head>
<!–– Этот раздел предназначен для заголовка страницы и технической информации. ––>
</head>
<body>
<!–– Этот раздел предназначен для размещения содержимого страницы. ––>
</body>
</html>
Кроме элементов, в HTML-документах есть и сущности (англ.
entities) – «специальные символы». Сущности начинаются с символа
16
амперсанда и имеют вид &имя; или &#NNNN; где NNNN – код символа в Юникоде в десятичной системе счисления.
Например, © – знак авторского права (©). Как правило,
сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & – амперсанда (&), < – символа «меньше»
(<) и > – символа «больше» (>), которые некорректно записывать
«обычным» образом, из-за их особого значения в HTML.
1.2. ГИПЕРССЫЛКИ
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует
сделать ссылку. Оба действия выполняются с помощью тэга A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта
или web-страницы, где прописана ссылка.
Использование абсолютных ссылок
<html>
<body>
<a href="www.yandex.ru">Поисковая система Яндекс</a>
</body>
</html>
Относительные ссылки, как следует из их названия, построены
относительно текущего документа или адреса. Примеры таких адресов:
1. /
2. /demo/
3. /images/pic.gif
4. ../help/me.html
5. manual/info.html
Первые две ссылки называются неполные и указывают webсерверу загружать файл index.html (или default.html), находящемуся в
корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном
каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта, двоеточие – перейти на уровень выше в списке
каталогов сайта.
17
Использование относительных ссылок
<html>
<body>
<a href="images/xxx.jpg">Посмотрите на мою фотографию!</a><br>
<a href="tip.html">Как сделать такое же фото?</a>
</body>
</html>
Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки
следует вначале сделать закладку в соответствующем месте и дать ей
имя при помощи параметра name тэга А.
Пример 1. Создание внутренней ссылки
<html>
<body>
<a name="top"></a> Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак
нельзя. Мгновением назад только что вот все было хорошо и вот уже
дыра, да такая, что можно забыть, что есть такой предмет в доме.
Махнул рукой нечаянно, а потом мучайся... <a
href="#top">Наверх</a>
</body>
</html>
Между тэгами <a name="top"> и </a> отсутствует текст, так как
требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается
любое, соответствующее тематике.
Можно также делать ссылку на закладку, находящуюся в другой
web-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя
закладки.
Ссылка на закладку из другой web-страницы:
<html>
<body>
<a href="text.html#bottom">Перейти к нижней части текста</a>
</body>
</html>
18
Ссылка на новое окно
Если требуется сделать ссылку на документ, который открывается в новом окне браузера, используется параметр target=«_blank»
тэга А. Создание нового окна обычно требуется в случаях, когда делается ссылка на другой сайт, в остальном лучше открывать документы в текущем окне, поскольку обилие окон может сбить читателя
с толку.
Так как ссылки на текущее или новое окно ничем не отличаются
друг от друга, на некоторых сайтах рядом со ссылкой ставят специальную иконку, показывающую, что документ открывается в новом окне.
Создание ссылки на новое окно
<html>
<body>
<a href="www.id.isu.ru">Обычная ссылка на сайт
www.id.isu.ru</a><br>
<a href="www.id.isu.ru" target="_blank">Ссылка открывает новое окно на сайт
www.id.isu.ru</a>
</body>
</html>
1.3. ГРАФИКА
Одна из наиболее привлекательных черт web – возможность
включения ссылок на графические и иные типы данных в HTMLдокумент. Делается это при помощи тэга <img...ismap>. Использование данного тэга позволяет значительно улучшить внешний вид и
функциональность документов.
Существует два способа использования графики в HTMLдокументах. Первый – это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая
иногда «inline image». Синтаксис тэга:
<img src="url" alt="text" height="n1" width="n2"
align=top|middle|bottom|texttop ismap>
Опишем элементы синтаксиса тэга:
19
Url – обязательный параметр, имеющий такой же синтаксис, как
и стандартный URL. Данный URL указывает браузеру, где находится
рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG
поддерживаются большинством браузеров.
ALT="text" – необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет
увидеть на экране. Если данный параметр отсутствует, то на месте
рисунка большинство браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг
ALT рекомендуется, если ваши пользователи используют браузер, не
поддерживающий графический режим, например Lynx.
Heigth=n1 – необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то
используется оригинальная высота рисунка. Это параметр позволяет
сжимать или растягивать изображения по вертикали, что позволяет
более четко определять внешний вид документа. Однако некоторые
браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего,
поэтому будьте внимательны при задании абсолютной величины
графического объекта.
Width=n2 – необязательный параметр, позволяет задать абсолютную ширину рисунка в пикселах.
Align – параметр используется, чтобы сообщить браузеру, куда
поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не
используется, то большинство браузеров располагает изображение в
левой части экрана, а текст – справа от него.
Ismap – параметр сообщает браузеру, что данное изображение
позволяет пользователю выполнять какие-либо действия, щелкая
мышью на определенном месте изображения. Данная возможность
является расширением HTML.
Пример использования тэга img:
<img src="images/nekton.jpg" alt="софтсервис лого" align="top"
ismap>
С версии HTML 2.0 у тэга <IMG> появились дополнительные
параметры:
20
<img src="url" alt="text" height="n1" width="n2"
align="top|middle|bottom|texttop| absmiddle|baseline|absbottom"
border="n3" vspace="n4" hspace="n5" ismap>
Новые параметры:
Border – данный параметр позволяет автору определить ширину
рамки вокруг рисунка.
Vspace – позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок.
Особенно это важно для динамически формируемых изображений,
когда нельзя заранее увидеть документ.
Hspace – установить размер в пикселах пустого пространства
над и под рисунком по горизантали.
Фоновые рисунки
Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои)
обычно хорошо выглядит в качестве фона для большинства документов.
Описание фонового рисунка включается в тэг BODY и выглядит
следующим образом:
<body background="picture.gif">
Задание стандартных цветов
Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:
<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx">
где каждый из параметров определяет цвет того или иного элемента.
Опишем эти параметры:
Bgcolor – цвет фона документа.
Text – цвет простого текста документа.
Link – цвет ссылки.
Цвет задается шестизначным числом в шестнадцатиричном
формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF – белому. Например:
<body bgcolor="#000000" text="#ffffff" link="#9690cc">
Данная строка определяет белый цвет фона документа, черный
текст и серебристые ссылки.
21
Горизонтальная линия
Используя тэг <HR>, вы можете разделить текст горизонтальной
чертой.
Формат тэга:
<hr size="number" width="number|percent" align="left|right|center" noshade>
Параметры тэга:
Size – толщина линии в пикселах.
Width – ширина линии в пикселах или процентах от ширины
окна браузера.
Align – расположение на экране (слева | по центру | справа).
Noshade – по умолчанию линия представлена в 3D виде с тенью.
NOSHADE позволяет представить линию просто однотонной темной
полоской.
1.4. ФРЕЙМЫ
Фреймы предназначены для создания многооконного HTMLдокумента. Для описания структуры фреймов применяются тэги
<frameset>, <frame> и <noframes>. Пример кода, создающего документ с четырьмя фреймами:
<html>
<head>
<title> </title>
</head>
<frameset rows="25%,50%,25%">
<frame src="header.htm">
<frameset cols="25%,75%">
<frame src="list.htm">
<frame src="info.htm">
</frameset>
<frame src="footer.htm">
</frameset>
<noframes>
ваш браузер не отображает фреймы
</noframes>
</html>
22
Тэг <frameset>
Фреймы определяются в структуре, называемой frameset, которая используется для страниц, содержащих фреймы, вместо раздела
BODY обычного документа. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTML-коде. В свою
очередь, страницы с разделом BODY не могут использовать фреймы.
Контейнер из тэгов <frameset> и </frameset> обрамляет каждый
блок определений фрейма. Внутри контейнера <frameset> могут содержаться только тэги <frame> и вложенные тэги <frameset>.
Тэг <frameset> имеет два параметра: rows (строки) и cols (столбцы) и записывается в следующем виде:
<frameset rows="cпиcoк значений" COLS="список значений">
Можно определить значения для rows или cols, или обоих вместе. Необходимо определить, по меньшей мере, два значения хотя бы
одного из этих параметров. Если другой параметр не задан, то его
значение принимается равным 100 %.
Список значений параметров rows и cols тэга <frameset> представляет собой разделенный запятыми список значений, которые могут задаваться в пикселях, в процентах или в относительных единицах. Число строк или столбцов определяется числом значений в соответствующем списке. Например, запись
<frameset rows="100,240,140">
определяет набор трех фреймов. Эти значения представляют собой
абсолютные значения в пикселях. Другими словами, первый фрейм
(первая строка) имеет высоту 100 пикселей второй – 240 и последний –
140 пикселей.
Задание значений размеров фреймов в пикселях не очень удобно. Здесь не учитывается тот факт, что браузеры запускаются в различных операционных системах и с различными разрешениями дисплеев. В то же время можно определить абсолютные значения размеров для некоторых случаев, например, для отображения небольшого
изображения с известными размерами. Лучшим вариантом будет задание значений в процентах или в относительных единицах, например:
<frameset rows="25%,50%,25%">.
В этом примере создаются три фрейма, размещаемые как строки
в полную ширину экрана. Верхняя строка займет 25 % от доступной
высоты экрана, средняя строка – 50 % и нижняя – 25 %. Если сумма
заданных процентов не равна 100 %, то значения будут пропорционально отмасштабированы, чтобы в итоге получилось точно 100 %.
23
Значения в относительных единицах выглядят следующим образом:
<frameset cols="*,2*,3*">.
Звездочка (*) используется для пропорционального деления пространства. Каждая звездочка представляет собой одну часть целого.
Складывая все значения чисел, стоящих у звездочек (если число
опущено, то подразумевается единица), получим знаменатель дроби.
В этом примере первый столбец займет 1/6 часть от общей ширины
окна, второй столбец – 2/6 (или 1/3), а последний – 3/6 (или 1/2).
Итак, числовое значение без каких-либо символов определяет абсолютное число пикселей для строки или колонки. Значение со знаком процента (%) определяет долю от общей ширины (для cols) или
высоты (для rows) от окна просмотра, а значение со звездочкой (*) задает пропорциональное распределение оставшегося пространства.
Пример, использующий все три варианта задания значений:
<frameset cols="100,25%,*,2*">.
В этом примере первый столбец будет иметь ширину 100 пикселей. Второй столбец займет 25 % от всей ширины окна просмотра,
третий столбец – 1/3 оставшегося пространства и, наконец, последний столбец – 2/3. Абсолютные значения рекомендуется назначать
первыми по порядку слева направо. За ними следуют процентные
значения от общего размера пространства. В заключение записываются значения, определяющие пропорциональное разбиение оставшегося пространства.
Если используется тэг <frameset>, в котором заданы значения и
cols, и rows, то будет создана сетка из фреймов. Например:
<frameset rows="*,2*,*" cols="2*, *">
Эта строка HTML-кода создает сетку фреймов с тремя строками
и двумя столбцами. Первая и последняя строки занимают 1/4 высоты
каждая, а средняя строка – половину. Первый столбец занимает 2/3
ширины, а второй – 1/3.
Контейнер <frameset> </frameset> может быть вложен внутрь
другого такого же контейнера, как это было показано в начальном
примере. Рассмотрим далее использование тэга <frame>.
Тэг <frame>
Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тэгов <frameset> и </frameset>. Например:
<frameset rows="*,2*">
<frame>
<frame>
</frameset>
24
Тэг <frame> не является контейнером и в отличие от <frameset>
не имеет завершающего тэга. Все определение одиночного фрейма
выполняется одной строчкой HTML-кода.
Необходимо записать столько тэгов <frame>, сколько отдельных
фреймов определено при задании тэга <frameset>. В предыдущем
примере тэгом <frameset> задано две строки, поэтому потребовалось
записать два тэга <frame>. Однако этот пример, по существу, бесполезен, так как ни один из фреймов не имеет какого-либо содержания.
Тэг <frame> имеет шесть параметров: src, name, marginwidth,
marginheight, scrolling и noresize.
Запись тэга <frame> со всеми параметрами:
<frame src="url" name="window_name" scrolling="yes |no| auto"
marginwidth="value" marginheight="value" noresize>
На практике в тэге <frame> редко используются одновременно
все параметры. Наиболее важный параметр – src (сокращение от слова source). Довольно часто в тэге <frame> задается единственный параметр src. Например: <frame src=«url»>.
Значение параметра src определяет URL-адрес документа, который будет загружен изначально в данный фрейм. Обычно в качестве
такого адреса записывается имя HTML-файла, расположенного в том
же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так: <frame
src="sample.htm">.
Следует обратить внимание, что любой HTML-файл, заданный в
описании фрейма, должен быть полным HTML-документом, а не
фрагментом. Это означает, что документ должен иметь тэги HTML,
HEAD, BODY и т. д.
Конечно, в качестве значения src может быть задан любой допустимый URL-адрес. Если, например, фрейм используется для показа изображения в формате GIF, которое располагается на некотором сервере, то следует записать:
<frame src ="http: //www.bhv.ru/example.gif ">.
Параметр name определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задается из
другого фрейма, располагающегося на той же самой странице. Например:
<frame src ="sample.htm" name = "Frame_l">.
Такая запись создает фрейм с именем «Frame_l», на который
может быть выполнена ссылка. Например:
25
<а href="other.htm" target="frame_1">.
Щелкните здесь для загрузки документа other.htm во фрейм с именем Frame_l</a>.
Обратите внимание на параметр target, который ссылается на
имя фрейма. Если для фрейма не задано имя, то будет создан фрейм
без имени, и не будет возможности использовать ссылки на него из
другого фрейма. Имена фреймов должны начинаться с алфавитноцифрового символа.
Параметры marginwidth и marginheight дают возможность устанавливать ширину полей фрейма. Записывается это следующим образом:
marginwidth="value", где "value" – абсолютное значение в пикселях. Например:
<frame marginheight= "5" marginwidth= "7">.
Данный фрейм имеет поля сверху и снизу по 5 пикселей, а слева
и справа – по 7 пикселей. Заметьте, что здесь идет речь о полях, а не
о рамках. Параметры marginwidth и marginheight определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.
Для фреймов будут автоматически создаваться и отображаться
полосы прокрутки, если содержимое фрейма не помещается полностью в отведенном пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется параметр
scrolling. Формат записи:
<frame scrolling="yes|no iauto">.
Параметр scrolling может принимать три значения: yes, no или
auto. Значение auto действует так же, как и в случае отсутствия параметра scrolling. Значение yes вызывает появление полос прокрутки
вне зависимости от необходимости этого, a no – запрещает их появление. Например:
<frame scrolling="yes">.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамке фрейма, то
курсор примет форму, указывающую на возможность изменения
размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных
фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize:
26
<frame noresize >
Этот параметр не требует никаких значений. Естественно, когда
задан параметр noresize для одного из фреймов, то размер любого из
смежных фреймов также не может быть изменен. Иногда, в зависимости от расположения фреймов, использования параметра noresize в
одном из фреймов будет достаточно, чтобы предотвратить возможность изменения размеров любого из них на экране.
Тэг <noframes>
С появлением стандарта HTML 4.0 поддержка фреймовых
структур закреплена стандартом. Тем не менее, необходимо предоставлять информацию пользователям, применяющим браузеры без
поддержки фреймов. Для таких браузеров можно предусмотреть альтернативную информацию, которая записывается между парой тэгов
<noframes> и </noframes>. Это выглядит так:
<noframes>
весь HTML-документ
</noframes>
Все, что размещено между тэгами <noframes> и </noframes>, будет отображаться браузерами, не имеющими возможностей поддержки фреймов. Браузеры с поддержкой фреймов проигнорируют
всю информацию между этими тэгами.
Заметим, что на практике разработчики HTML-страниц часто не
используют возможности тэга <noframes> для создания страниц без
фреймовых структур, а просто создают две версии своих HTMдокументов. Для такого варианта на стартовой странице обычно
предлагается выбор загрузки документа с фреймовой структурой или
без нее. Далее в зависимости от выбора пользователя загружается
только один вариант документа.
Плавающие фреймы <iframe>
Тэг <iframe> реализует концепцию плавающих фреймов. В отличие от обычных фреймов описание плавающих фреймов может
встречаться в тексте обычного HTML-документа. Браузеры, не поддерживающие тэг <iframe>, вместо фрейма будут отображать информацию, записанную между <iframe> и </iframe>. В тэге <iframe>
применяются точно такие же параметры, как и в тэге описания
обычных фреймов <frame>. Единственным исключением является
параметр noresize, применение которого бессмысленно, так как размер плавающих фреймов в любом случае не может быть изменен
пользователем при просмотре документа.
27
Кроме того, для задания расположения и размеров плавающего
фрейма в документе можно использовать следующие дополнительные параметры:
width, height, hspace, vspace, align.
Их назначение и порядок использования совпадает с соответствующими параметрами для встроенных изображений, которые задаются
тэгом <IMG>.
Пример использования плавающих:
<html>
<head>
<title>использование плавающих фреймов</title>
</head>
<body>
<center><h2>пример использования концепции плавающих фреймов</h2></center>
<iframe src="63.html" name="a" height="300" width="40%"
hspace="10"
scrolling="yes" align="right">
ваш браузер не позволяет отображать плавающие фреймы
</iframe>
такие фреймы могут размещаться в любом месте экрана так же, как
графические изображения и таблицы, фрейм справа от данного текста размещен на странице с помощью специального тэга <iframe>,
при создании фрейма было указано выравнивание вправо.
</body>
</html>
Браузеры, не поддерживающие плавающие фреймы, вместо отображения содержимого документа 63.html выдадут текст «Ваш браузер не позволяет отображать плавающие фреймы».
1.5. ФОРМЫ
Некоторые www-браузеры позволяют пользователю, заполнив
специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется web-браузером, создается специальные экранные
элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т. д. Когда пользователь заполняет форму и нажимает кнопку «Подтверждение»
(SUBMIT – специальный тип кнопки, который задается при описа28
нии документа), информация, введенна пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Когда вы описываете форму, каждый элемент ввода данных
имеет тэг <input>. Когда пользователь помещает данные в элемент
формы, инфоромация размещается в разделе VALUE данного элемента.
Все формы начинаются тэгом <form> и звершаются тэгом </form>.
<form method="get|post" action="url"> элементы_формы_и_другие_элементы_html</form>
Method – метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты
ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который
был указан в описании заголовка формы. Ваша CGI-программа (CGIскрипт) получает данные из формы в виде параметра переменной
среды query_string. Использование метода GET не рекомендуется.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа
получает данные из формы в стандартный поток ввода. Сервер не
будет пересылать вам сообщение об окончании пересылки данных в
стандартный поток ввода; вместо этого используется переменная
среды content_length для определения, какое количество данных вам
необходимо считать из стандартного потока ввода. Данный метод
рекомендуется к использованию.
Action – описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGIпрограмму, обрабатывающую данную форму.
Рассмотрим виды тэгов, которые наиболее часто используются в
кодах форм ввода в HTML.
Textarea – используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вот
пример использования тэга <textarea>:
<textarea name="address" rows="10" cols="50">
Москва, Дмитровкое шоссе, д.9Б, офис 448 </textarea>
Атрибуты, используемые внутри тэга <textarea> описывают
внешний вид и имя вводимого значения. Тэг </textarea> необходим
даже тогда, когда поле ввода изначально пустое. Описание атрибутов:
• Name – имя поля ввода.
29
• rows – высота поля ввода в символах.
• cols – ширина поля ввода в символах.
Если вы хотите, чтобы в поле ввода по умолчанию выдавался
какой-либо текст, то необходимо вставить его внутри тэгов
<textarea> и </textarea>.
Input – используется для ввода одной строки текста или одного
слова. Атрибуты тэга:
Checked – означает, что checkbox или radiobutton будет выбран.
Maxlength – определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа
звуковым сигналом и не дает его ввести. Не путать с атрибутом size.
Если maxlength больше чем size, то в поле осуществляется скроллинг. По умолчанию значение maxlength равно бесконечности.
Name – имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете
получить данные, помещенные пользователем в это поле.
Size – определяет визуальный размер поля ввода на экране в
символах.
SRC – URL, указывающий на картинку (используется совместно
с атрибутом IMAGE).
Type – определяет тип поля ввода. По умолчанию это простое
поле ввода для одной строки текста. Остальные типы должны быть
явно указаны:
Checkbox – используется для простых логических (boolean) значений. Значение, ассоциированное с именем данного поля, которое
будет передаваться в вызываемую CGI-программу, может принимать
значение ON или OFF.
Hidden – поля данного типа не отображаются браузером и не
дают пользователю изменять присвоенные данному полю по умолчанию значения. Это поле используется для передачи в CGIпрограмму статической информации: ID-пользователя, пароля или
другой информации.
Image – данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо
часть рисунка будет немедленно вызвана ассоциированная форме
CGI-программа. Значения, присвоенные переменной name, будут выглядеть так – создается две новых переменных: первая имеет имя,
обозначенное в поле name с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселах (считая
началом координат левый верхний угол рисунка), на которую указы30
вал курсор мыши в момент нажатия, а переменная с именем, содержащимся в name и добавленным .y, будет содержать Y-координату.
Все значения атрибута value игнорируются. Само описание картинки
осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.
Password – вводимое пользователем значение не отображается
браузером на экране.
Radio – данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом type=«radio» с разными значениями атрибута value, но с одинаковыми значениями атрибута name. В CGI–программу будет передано значение типа
name=value, причем value примет значение атрибута value того поля
ввода, которое в данный момент будет выбрано (будет активным).
При выборе одного из полей ввода типа radio все остальные поля
данного типа с тем же именем (атрибут name) автоматически станут
невыбранными на экране.
Reset – обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
Submit – обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут value может содержать строку, которая будет высвечена на кнопке.
Text – данный тип поля ввода описывает однострочное поле ввода.
Используйте атрибуты maxlength и size для определения максимальной
длины вводимого значения в символах и размера отображаемого поля
ввода на экране (по умолчанию принимается 20 символов).
Value – присваивает полю значение по умолчанию или значение,
которое будет выбрано при использовании типа RADIO (для типа
RADIO данный атрибут обязателен)
Меню выбора в формах – тэг SELECT
Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:
Select – пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Данный вид
представляется как выпадающий LISTBOX.
Select single – то же самое, что и Select, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то
предоставляется автоматический вертикальный скроллинг.
Select multiple – позволяет выбрать несколько элементов из listbox.
31
Select – позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Тэг select имеет один или более параметр пежду стартовым тэгом <select> и завершающим </select>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <select>:
<form> <select name="group">
<option> at 386 <option> at 486
<option> at 586 </select> </form>
Select single – это то же самое, что и select, но на экране пользователь видит одновременно несколько элементов выбора (три по
умолчанию). Если их больше, то предоставляется автоматический
вертикальный скроллинг. Количество одновременно отображаемых
элементов определяется атрибутом SIZE. Пример:
<form> <select single name="group" size="4">
<option> at 386 <option> at 486
<option> at 586 <options> pentium pro
</select> </form>
Select multiple похож на тэг select single, но пользователь может
одновременно выбрать более чем один элемент списка. Атрибут size
определяет количество одновременно видимых на экране элементов,
атрибут multiple – максимальное количество одновременно выбранных элементов. Пример:
<form> <select single name="group" size="4" multiple="2">
<option> at 386 <option> at 486
<option> at 586 <options> pentium pro
</select> </form>
Если выбрано одновременно несколько значений, то серверу передается соответствующее выбранному количество параметров
name=value с одинаковыми значениями name, но разными value.
32
1.6. ПРАКТИКУМ ПО HTML
Лабораторная работа 1.1.
Форматирование и редактирование текста
Задание 1. Сделать обзор современных браузеров и составить
сводную таблицу (табл. 3) по выполнению команд. Дополнить таблицу следущими командами: анализ DOM, наличие встроенного отладчика скриптов.
Таблица 3
Сравнение браузеров по реализации основных функций
Браузер/
команда
IE
Обновление
Ctr+R
Просмотр ис- F12 или
ходного кода F10
Включение/от
ключение
…
скриптов
Анализ DOM
…
Firefox
Opera
Ctr+R
Ctr+U
Ctr+R
Ctr+F3
Safari
Google–
chrome
Ctr+R
Ctr+Alt+
U
Ctr+R
Ctr+U
…
…
…
…
…
…
…
…
Задание 2. Сделать браузер браузером по умолчанию. В меню
«Пуск» выберите пункт «Панель управления» и, в открывшимся окне, кликните два раза на иконке «Установка и удаление программ».
Далее перейдите на вкладку «Выбор программ по умолчанию», отметьте пункт «Другая» и выберите необходимый браузер из списка.
Чтобы сохранить изменения нажмите «Ok» внизу окна.
Задание 3. Перечислить основные отличия популярных браузеров. Представить эти отличия в виде сравнительной таблицы.
Задание 4. Создать простейшие страницы, которые отбражали
бы строку «Hello world!». Первую страницу создать с помощью MS
Word, вторую с помощью редактора Блокнот, третью с помощью
Dreamweaver. Проанализирйте полученные html-коды.
Задание 5. На html-страницу «Hello world!», созданную в Блокноте, добавить текст Lorem Ipsum*. Lorem Ipsum разбить на абзацы с
*
Lorem Ipsum – название классического текста-«рыбы». «Рыба» – слово из жаргона дизайнеров, обозначает условный, зачастую бессмысленный текст, вставляемый в макет страницы. Lorem Ipsum представляет собой искажённый отрывок из философского трактата Цицерона «О пределах добра и зла», написанного
в 45 году до нашей эры на латинском языке. http://www.lipsum.com/. 33
использованием p. Каждое слово первого абзаца начать с новой
строки <br />. Снабдить текст заголовками h1, h2, h3 …h6.
Задание 6. Обосновать необходимость использования объектовсимволов: & > <   " hr, pre. Используйте элементы форматирования: b, big, i, small, u (парные тэги). Используйте
тэги редактирования del, ins, strong, sub, и sup (парные тэги). Элементы фраз acronym, cite, kdb, blockquote, span, div.
Задание 7. Нарисовать кнопку в photoshop и сделать ее ссылкой.
Задание 8. Набрать фрагмет кода на языке С, чтобы в htmlдокументе сохранилось исходное форматирование.
$a = 5; $b = 10;
$c = 3 * ∑
print "Результат = $c\n"; # выводит Результат = 45
sub sum {
return $a + $b;
}
Задание 9. В конце страницы добавить знак авторского права:
Copyright © текущий год Фамилия Имя.
Лабораторная работа 1.2.
Гиперссылки и графика
Задание 1. На странице index.html гиперссылки на задания, выполненные ранее, оформить ссылки в виде списка.
Задание 2. Используя внутренние ссылки, создать следующий
словарь терминов:
Словарь терминов
АБВГДЕ
А
АВТЕНТИЧЕСКИЙ КАДАНС
кадансовый оборот, в котором заключительная тоническая гармония
предваряется доминантовой
АЛИКВОТНЫЕ СТРУНЫ
резонирующие струны, к которым исполнитель не прикасается
во время
игры
АТАКТА
гармонический элемент на басу нижнего или верхнего вводного тона
В начало
34
Б
БАГАТЕЛЬ
небольшая нетрудная для исполнения пьеса
БАРТОКОВСКОЕ ПИЦЦИКАТО
сильный щипок струны с последующим ударом струны о гриф
БОНАНГ
набор из 10–12 гонгов разного размера
В начало
В
В начало
Г
В начало
Д
В начало
Задание 3. На отдельной странице организовать галерею картинок (эскиз изображения и само изображение) с подписями (текст
подписей определите сами). На странице расположить только эскизы. При щелчке по эскизу переход по гиперссылке на ту же картинку
только большего размера. Все графические файлы поместить в папку
images.
Лабораторная работа 1.3.
Создание и редактирование таблиц
Задание 1. Создать таблицу, используя приведенный ниже листинг кода.
<html>
<head>
<title>учебная таблица</title>
</head>
<body>
<table width="50%" border="6" cellspacing="6" cellpadding="20"
align="center" bordercolorlight="lime" bordercolordark="green" bgcolor="#dfffdf">
<thead bgcolor="aqua">
<tr><th colspan="3">учебная таблица</th></tr>
</thead>
<tbody>
<tr>
<td width="33%">это первая ячейка</td>
35
<td width="33%">это вторая ячейка</td>
<td rowspan="3">а это три ячейки третьего столбца объединились в
одну большую</td>
</tr>
<tr>
<td colspan="2">это единственная ячейка второй строки, объединяющая оба столбца</td>
</tr>
<tr>
<td>это первая ячейка третьей строки</td>
<td width="33%">а это вторая ячейка третьей строки</td>
</tr>
</tbody>
<tfoot bgcolor="yellow">
<tr>
<td colspan="3" align="center">
<small>конец</small></td>
</tr>
</tfoot>
</table>
</body>
</html>
• Атрибут cellspacing="6" задает свободное пространство между
ячейками таблицы.
• Атрибут cellpadding="20" задает свободное пространство между данными в ячейке и ее границами.
• Атрибут bordercolorlight="lime" задает цвет левого и верхнего
углов таблицы.
• Атрибут bordercolordark="green" задает цвет правого и нижнего углов таблицы.
• Атрибут bgcolor="#dfffdf" задает цвет фона таблицы.
Задание 2. Создать таблицу (табл. 4).
Таблица 4
Характеристики студентов
Студенты
Пол
36
Мужской
Женский
Характеристики
Средний рост, см
Средний вес, кг
177
73
166
65
Задание 3. Создать таблицы, приведенные ниже.
1_2 1_3
1_1
2_1 2_2
3_1 3_2
3_3
4_1 4_2
5_1
5_2 5_3
6_1 6_2
1_4
3_4 3_5
4_3 4_4
5_4
Лабораторная работа 1.4.
Формы
Задание 1. Разработать форму вида:
Ваше имя:
Ваш пол:
Мужской
Женский
Перв ый
На каком курсе Вы учитесь?
Какие языки программирования Вы знаете?
Паскаль
Си
Ассемблер
Напишите несколько слов о себе:
Отправ ить данные
Очистить форму
Задание 2. Разработать форму вида:
37
Лабораторная работа 1.5.
Фреймы
Задание 1. Создать страницы с плавающим фреймом, по приведенному ниже коду.
<html>
<head>
<title>Использование плавающих фреймов</title>
</head>
<body bgcolor="ffffcc">
<h4 align="center">Шишкин Иван Иванович</h4>
<iframe src="textsh.htm" name="flframe"> Отображение плавающих
фреймов в вашем браузере не предусмотрено.
</iframe>
<ol>
<li><a href="pictsh.htm" target="flframe">картина</a>
<li><a href="textsh.htm" target="flframe">описание</a>
</ol>
</body>
</html>
Задание 2. Создать страницы, содержащие наборы фреймов
приведенной ниже структуры.
1.7. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ
1. Структура HTML-документа. Основные части документа.
2. Основные сущности HTML и их описание: элемент, тэг, атрибут.
3. Секция HEAD, метаинформация.
38
4. Кодировка символов и современные способы ее задания.
5. Секция BODY. Примеры HTML-документов.
6. Основные понятия языка HTML: элемент, тэг, атрибут и его
значение.
7. Cпецификации HTML и XHTML, разница между ними.
8. Doctype и валидация. Разница в отображении при различных
Doctype.
9. Основные элементы, применяемые для форматирования текста, ссылок, изображений и таблиц.
10. Редакторы HTML. Инструментарий разработчика. Организация совместной разработки.
11. HTML 5 и будущее HTML.
12. Фреймы и их современное применение, а также лучшие аналоги.
13. Микроформаты.
14. Принципы построения эргономичных web-интерфейсов.
15. Смежные технологии. Ускоренное создание HTML/CSS при
помощи разметок HAML и SASS.
39
Раздел 2. ОСНОВЫ КАСКАДНЫХ ТАБЛИЦ
СТИЛЕЙ CSS
CSS (Cascading Style Sheets – каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком
разметки. Преимущественно используется как средство оформления
web-страниц в формате HTML и XHTML, но может применяться с
любыми видами документов в формате XML, включая SVG и XUL.
Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
CSS используется создателями web-страниц для задания цветов,
шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может
увеличить доступность документа, предоставить большую гибкость
и возможность управления его представлением, а также уменьшить
сложность и повторяемость в структурном содержимом. Кроме того,
CSS позволяет представлять один и тот же документ в различных
стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана) и др.
Наиболее полно поддерживающими стандарт CSS являются
браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit
(Arora, Google Chrome, Safari), а также браузер Opera.
Что касается Internet Explorer, то только 8-я его версия полностью поддерживает CSS 2.1 и частично – CSS 3.
Преимущества применения CSS:
• несколько дизайнов страницы для разных устройств просмотра;
• уменьшение времени загрузки страниц сайта за счет переноса
правил представления данных в отдельный CSS-файл;
• простота последующего изменения дизайна;
• дополнительные возможности оформления, например, с помощью CSS-верстки можно сделать блок текста, который остальной текст будет обтекать или сделать так, чтобы меню
было всегда видно при прокрутке страницы.
40
Недостатки применения CSS:
• различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS;
• часто встречающаяся необходимость на практике исправлять
не только один CSS-файл, но и тэги HTML и серверный код,
которые сложным и ненаглядным способом связаны с селекторами CSS.
Рекомендация W3C по CSS 1, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией, можно отметить:
Параметры шрифтов. Возможности по заданию гарнитуры и
размера шрифта, а также его стиля – обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона,
рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.
Рекомендация W3C по CSS 2, принята 12 мая 1998 года. Она построена на CSS 1 с сохранением обратной совместимости. В данной
CSS 2 добавлены следующие возможности:
Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением
элементов по странице без табличной верстки.
Типы носителей. Позволяет устанавливать разные стили для
разных носителей (например, монитор, принтер, КПК).
Звуковые таблицы стилей. Определяет голос, громкость и т. д.
для звуковых носителей (например, для слепых посетителей сайта).
• Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при
печати.
• Расширенный механизм селекторов.
• Указатели.
• Генерируемое содержание. Позволяет установить текст или
картинку, который будет отображаться до или после нужного
элемента.
41
Рабочая версия CSS 2.1 W3C от 8 сентября 2009 года. Она построена на CSS 2 и содержит исправления ошибок.
Рабочая версия CSS 3 cильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и
введением переменных.
CSS при отображении страницы может быть взята из различных
источников:
• Авторские стили в виде:
ƒ внешних таблиц стилей, т. е. отдельного файла .css, на
который делается ссылка в документе;
ƒ встроенных стилей-блоков CSS внутри самого HTMLдокумента;
ƒ inlineстилей, когда в HTML-документе информация
стиля для одного элемента указывается в его атрибуте
style;
• Пользовательские стили:
ƒ локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили и применяемый ко всем документам;
• Стиль браузера:
ƒ стандартный стиль, используемый браузером по умолчанию для представления элементов.
Пример таблицы стилей:
h2 {
font–size: 1.75em;
color: #469;
}
#container {
padding: 0;
}
#column_r_content, #column_l_content {
margin: 10px;
}
p#paragraph1 {
margin: 0;
}
#masthead img {
float: left;
margin: 0;
padding: 0;
42
}
#navigation a:hover {
color: #000;
text–decoration: none;
border: 1px solid #ed9;
background–color: #ed9;
}
.style_italic {
font–style: italic;
}
2.1. ДОБАВЛЕНИЕ CSS
Для добавления стилей на web-страницу существует несколько
способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с
расширением CSS, а для связывания документа с этим файлом применяется тэг <link>. Данный тэг помещается в контейнер <head>.
Пример подключения таблицы связанных стилей:
…
<head>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
…
Значения параметров тэга <link> – rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к
CSS-файлу, он может быть задан как относительно, так и абсолютно.
Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS
описываются в самом документе и обычно располагаются в заголовке web-страницы. По своей гибкости и возможностям этот способ
добавления стиля уступает предыдущему, но также позволяет раз 43
мещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <style>.
Пример использования таблицы глобальных стилей:
…
<head>
…
<style type=«text/css»>
p{
font–size: 110%;
font–family: Verdana, Arial, Helvetica, sans–serif;
}
</style>
</head>
…
Замечание. Таблица глобальных стилей может размещаться не
только внутри контейнера <head>, но также в любом месте кода
HTML-документа.
Внутренние стили
Внутренний стиль является по существу расширением для одиночного тэга используемого на web-странице. Для определения стиля
используется параметр тэга style, а его атрибуты указываются с помощью языка таблицы стилей.
Пример использования внутренних стилей:
…
<body>
<p style="font–size: 110%; font–family: Verdana, Arial, Helvetica, sans–
serif; ">Текст</p>
</body>
…
Замечание. Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в
том, что добавление таких стилей увеличивает общий объем файлов,
что ведет к повышению времени их загрузки в браузере, и усложняет
редактирование документов для разработчиков.
Все описанные методы использования CSS могут применяться
как самостоятельно, так и в сочетании друг с другом. В этом случае
необходимо помнить об их иерархии. Первым всегда применяется
внутренний стиль, затем таблица глобальных стилей и в последнюю
очередь таблица связанных стилей.
44
Базовый синтаксис
Способ записи CSS отличается от формы использования тэгов
HTML и в общем виде имеет следующий синтаксис:
Селектор { свойство1: значение; свойство2: значение; ... }
Селектором называется имя стиля, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тэгов, идентификаторы, классы и др. После указания селектора
идут фигурные скобки, в которых записывается необходимое стилевое свойство, а его значение указывается после двоеточия. Параметры разделяются между собой точкой с запятой, в конце этот символ
можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и
символам табуляции, поэтому форма записи зависит от желания разработчика.
Имена селекторов обязательно должны начинаться с латинского
символа (a–z, A–Z) и могут содержать в себе цифры
Селекторы тэгов
В качестве селектора может выступать любой тэг HTML, для которого определяются правила форматирования, такие как: цвет, фон,
размер и т. д. Правила задаются в следующем виде:
Тэг { свойство 1: значение; свойство 2: значение; ... }
Пример изменения стиля тэга параграфа:
…
<head>
…
<style type="text/css">
p{
font–size: 110%;
font–family: Verdana, Arial, Helvetica, sans–serif;
}
</style>
</head>
…
В данном примере изменяется размер шрифта и семейство
шрифта параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.
45
Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента web-страницы или задать разные стили для
одного тэга. При использовании совместно с тэгами синтаксис для
классов будет следующий:
Тэг.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется желаемый тэг, а затем, через точку пользовательское имя класса. Чтобы указать в коде
HTML, что тэг используется с определенным стилем, к тэгу добавляется параметр class=«Имя класса».
Пример использования классов c тэгами:
…
<head>
…
<style type="text/css">
p{
font–size: 110%;
font–family: Verdana, Arial, Helvetica, sans–serif;
}
p.Color {
color: navy;
}
</style>
</head>
<body>
<p>Пример использования селектора тэгов.</p>
<p class="Color">Пример использования класса.</p>
</body>
…
Можно также использовать классы и без указания тэга. Синтаксис в этом случае будет следующий:
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи, класс можно применять к любому тэгу.
Классы удобно использовать, когда нужно применить стиль к
разным тэгам web-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также
блоков, содержащих в себе разные элементы, употребляются тэги
<span> и <div>.
46
Идентификаторы
Идентификатор (называемый также «ID селектор») определяет
уникальное имя элемента, которое используется для изменения его
стиля и обращения к нему через скрипты, что позволяет управлять
стилем элемента динамически.
Синтаксис использования идентификатора следующий:
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
В отличие от классов идентификаторы должны быть уникальны,
иными словами, встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам,
но в качестве ключевого слова у тэга используется параметр id, значением которого выступает имя идентификатора (пример). Символ
решетки при этом уже не указывается.
Пример использования идентификатора:
…
<head>
…
<style type="text/css">
#help {
position: absolute;
left: 160px;
top: 50px;
width: 225px;
height: 180px;
background: #f0f0f0;
}
</style>
</head>
<body>
<div id="help">Пример использования Идентификаторов</div>
</body>
…
В данном примере определяется стиль тэга <div>, для которого
указан селектор help через параметр id.
Как и при использовании классов, идентификаторы можно применять к конкретному тэгу. Синтаксис при этом будет следующий:
Тэг#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тэга, затем без пробелов символ решетки и название идентификатора.
47
Контекстные селекторы
При создании web-страницы часто приходится вкладывать одни
тэги внутрь других. Чтобы стили для этих тэгов использовались корректно, помогут селекторы, которые работают только в определенном контексте.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тэга синтаксис будет следующий:
тэг1 тэг2 { ... }
В этом случае стиль будет применяться к тэгу2, когда он размещается внутри тэга1, как показано ниже.
Пример использования контекстных селекторов:
…
<head>
…
<style type="text/css">
PB{
font–weight: bold;
color: navy;
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>
</body>
…
В данном примере показано обычное применение тэга <B> и
этого же тэга, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста.
Замечание. Не обязательно контекстные селекторы содержат только один вложенный тэг. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тэгов.
Более широкие возможности контекстные селекторы дают при
использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.
48
Соседние селекторы
Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим
пример отношения элементов:
<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>
Тэги <var> и <b> представляют собой соседние элементы.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами.
Общий синтаксис следующий:
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи
применяется к Селектору 2, но только в том случае, если он является
соседним для Селектора 1 и следует сразу после него.
Соседние селекторы удобно использовать для тех тэгов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут тэги
<H1> и <H2>, то расстояние между ними легко регулировать как раз
с помощью соседних селекторов.
Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за
счет включения отрицательного значения параметра margin-top. При
этом текст поднимается вверх, ближе к предыдущему элементу.
Дочерние селекторы
Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис
применения таких селекторов следующий:
Селектор 1 > Селектор 2 {Описание правил стиля}
Стиль применяется к Селектору 2, но только в том случае, если
он является дочерним для Селектора 1.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым
потомком, иными словами, непосредственно располагается внутри
родительского элемента. Для контекстного селектора допустим любой уровень вложенности.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами.
49
Однако использование дочерних селекторов расширяет возможности
по управлению стилями элементов, что в итоге позволяет получить
нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов,
которые обладают иерархической структурой – сюда относятся, например, таблицы и разные списки.
Селекторы атрибутов
Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тэга по присутствию определенного параметра или его
значения.
Замечание. Селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы
примеров необходимо добавить правильный <!doctype>.
Рассмотрим один вариант применения таких селекторов – Селектор атрибута со значением.
Данный селектор устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра.
Синтаксис применения следующий.
[атрибут="значение"] {Описание правил стиля}
Селектор[атрибут="значение"] {Описание правил стиля}
В первом случае стиль применяется ко всем элементам, которые
содержат указанное значение атрибута. А во втором – только к определенным селекторам.
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех
элементов web-страницы, например, задать шрифт или начертание
текста. В этом случае поможет универсальный селектор, который соответствует любому элементу web-страницы.
Для обозначения универсального селектора применяется символ
звездочки (*) и в общем случае синтаксис будет следующий:
* {Описание правил стиля}
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату. Вообще, этот тип селекторов применяется
в основном в структурных языках вроде XML, для обозначения имен
элементов, которые в стилях не известны.
50
Группирование
При создании стиля для сайта, когда одновременно используется
множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода.
Селекторы группируются в виде списка тэгов, разделенных между собой запятыми. В группу могут входить не только селекторы
тэгов, но также идентификаторы и классы. Общий синтаксис следующий:
Селектор 1, Селектор 2, ... Селектор N {Описание правил стиля}
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
2.2. ПРАКТИКУМ ПО CSS
Задание. Используя таблицу 5, примените эффекты оформления
на web-странице (для каждого эффекта создать 2 файла *.html и *.css).
Таблица 5
Эффекты форматирования различных объектов страниц
Эффект
Убрать отступы у
тела документа.
Добавить поля к
документу
Создание
широкой
горизонтальной
линии
Создание
пунктирной
линии
Полужирный
текст большого
размера
CSS
Использование
body{
margin:0px 0px 0px 0px;
}
body{
margin: 10px 40px 10px 40px;
}
p{
padding-top: 0.5em;
margin-top: 0;
border-top: 10px solid #000;
}
p{
padding-top: 0.5em;
margin-top: 0;
border-top: 10px dotted #666;
}
<body>
.leader{
text-transform: uppercase;
font-family: Verdana;
font-weight: bold;
}
<p class=«leader»>
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit.</p>
<body>
<p>
<p>
51
Эффект
CSS
Заголовок в прямоугольнике из
тонких линий
h3{
text-align: right;
font-weight: bold;
border: 0.1em solid #000;
padding: 0.25em;
margin-bottom: 0;
}
Отступ первой
p{
строки абзаца
padding-top: 0;
margin-top: 0;
text-indent: 50px;
}
Создание втяжки p{
padding-top: 0;
margin-top: 0;
text-indent: –50px;
}
Создание
h3{
цветного фона
text-align: left;
заголовка
font-weight: bold;
margin-bottom: 0;
background-color: #999;
}
Создание
h3{
фонового рисунка text-align: left;
font-weight: bold;
margin-bottom: 0;
background-image:
url(example.gif);
background-repeat: no-repeat;
}
h3{
Горизонтальная
text-align: left;
линия под
font-weight: bold;
заголовком
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 4 solid #000;
}
Боковик с
body {
подчеркиванием
margin-top: 5em;
margin-right: 10%;
margin-bottom: 10em;
52
Использование
<h3>
< p>
< p>
< h3>
<h3>
<h3>
<h3>Lorem ipsum
dolor </h3>
<p>Lorem ipsum
dolor sit amet, con-
Эффект
CSS
margin-left: 10%;
}
Использование
sectetur adipiscing
elit. Fusce
commodo... </p>
h3{
Боковик с обводкой и правым выравниванием
font-family: Arial, Helvetica,
sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #000;
background-color: #999;
padding: 10px;
float: left;
margin-top: –10px;
margin-right: 10px;
margin-bottom: 0.5px;
margin-left: 1px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #999999;
width: 150px;
}
p{
padding: 20px;
margin-top: 1em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999;
text-align: justify;
}
body {
margin-top: 5em;
margin-right: 10%;
margin-bottom: 10em;
margin-left: 10%;
}
<body>
<h3>
h3{
font-family: Arial, Helvetica,
sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #000;
background-color: #999;
53
Эффект
CSS
Использование
padding: 10px;
float: right;
margin-top: –10px;
margin-right: 0px;
margin-bottom: 0.5px;
margin-left: 10px;
border-top-width: 4px;
border-top-style: solid;
border-top-color: #999;
width: 150px;
}
p{
padding: 20px;
margin-top: 1em;
text-align: justify;
border: 1px solid #999;
Добавление фонового изображения к параграфу
}
body {
margin-top: 5em;
margin-right: 10%;
margin-bottom: 10em;
margin-left: 10%;
}
h3{
font-family: Arial, Helvetica,
sans-serif;
font-size: 14px;
text-transform: uppercase;
color: #000;
padding: 10px;
float: left;
margin-top: –10px;
margin-right: 10px;
margin-bottom: 0.5px;
margin-left: 0px;
width: 150px;
background-color: #FFFFFF;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
54
<h3>Lorem ipsum
</h3>
<p>Lorem ipsum
dolor sit amet, consectetur adipiscing
elit. Fusce
commodo. Nullam
ultricies lorem.
Pellentesque vitae
ante. Curabitur
rutrum urna ac urna.
Maecenas sagittis
sollicitudin tortor.
Sed quam. </p>
Эффект
CSS
Использование
border-left-color: #999999;
}
p{
<p>
padding: 20px;
margin-top: 1em;
text-align: justify;
border: 1px solid #999;
background-image:
url(example.jpg);
background-repeat: no-repeat;
background-position: –10px –
10px;
float: none;
}
2.3. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ
1. Основы CSS, описание стилей для элементов HTML.
2. Область применения CSS, семантическая верстка.
3. Основные селекторы: класс, ID, псевдоклассы, псевдоэлементы.
4. Основные CSS-свойства, способы задания.
5. Примеры CSS-правил. CSS 2.1, CSS 3.
6. Внешние таблицы стилей, подключение внешней таблицы к
HTML.
7. Поддержка CSS в современных браузерах.
8. Дополнительные свойства текстовых элементов, цвет и центрирование.
9. Блочная модель документа.
10. Дерево рендеринга.
11. Основные CSS-свойства в блочной модели, типа отображения.
12. Внешние и внутренние отступы: margin/padding, ширина элемента.
13. Особенности взаимопоглощения внешних отступов.
14. Способы центрирования текста.
15. Каскады стилей, правила на вложенные тэги.
16. Применение для верстки промежуточных тэгов.
17. Eдиницы измерения в CSS.
18. Практическая верстка для различных браузеров.
19. Вспомогательный инструментарий под IE<8, IE8, Firefox,
Opera, Safari.
20. Некоторые важные особенности IE6, IE8.
55
Раздел 3. ОСНОВЫ СКРИПТОВОГО ЯЗЫКА
JAVASCRIPT
Объектно-ориентированный скриптовый язык программирования JavaScript (первоначально назван LiveScript его создателем,
Бренданом Айхом, и развернут в составе браузера Netscape
Navigator) был впервые представлены публике в 1995 году.
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности web-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное
программирование, функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом легким для использования непрограммистами. Языком JavaScript не владеет какаялибо компания или организация, что отличает его от ряда языков
программирования, используемых в web-разработке.
JavaScript обладает рядом свойств объектно-ориентированного
языка, но реализованное в языке прототипирование обусловливает
отличия в работе с объектами по сравнению с традиционными объектно-ориентированными языками. Кроме того, JavaScript имеет ряд
свойств, присущих функциональным языкам – функции как объекты
первого класса, объекты как списки, карринг, анонимные функции,
замыкания – что придает языку дополнительную гибкость.
Структурно JavaScript можно представить в виде объединения
трех четко различимых друг от друга частей:
• ядро (ECMAScript);
• объектная модель браузера (Browser Object Model или BOM);
• объектная модель документа (Document Object Model или DOM).
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель браузера и объектная модель документа
могут не поддерживаться. Объектную модель документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с определением DOM как независимого от языка интерфейса документа.
56
Для добавления JavaScript-кода на страницу, можно использовать тэги <script></script>.
Область применения JavaScript очень широка:
• в клиентской части web-приложений;
• в AJAX;
• в технологии Comet;
• в браузерных операционных системах;
• для создания небольших программ, размещаемых в закладки
браузера (Букмарклеты);
• приложения, написанные на JavaScript, могут исполняться на
серверах, использующих Java 6 и более поздних версий, что
используется для построения серверных приложений, позволяющих обрабатывать JavaScript на стороне сервера;
• в качестве языка разработки мобильных приложений (на
платформе Mojo SDK в Palm webOS);
• для реализации виджетов, так и для реализации движков виджетов (Apple_Dashboard, Microsoft Gadgets, Google Desktop
Gadgets, Klipfolio Dashboard);
• для написания прикладного ПО (57 % исходного кода Mozilla
Firefox написано на JavaScript);
• в качестве скриптового языка доступа к объектам приложений;
• в офисных приложениях для автоматизации рутинных действий, написания макросов, организации доступа со стороны
web-служб;
• в Excel Services 2010 добавились два новых интерфейса программирования приложений: REST API и JavaScript Object
Model (JSOM).
Для обеспечения высокого уровня абстракции и достижения
приемлемой степени кросс-браузерности при разработке webприложений используются библиотеки JavaScript. Они представляют
собой набор многократно используемых объектов и функций. Среди
известных JavaScript библиотек можно отметить Adobe life, Dojo
Toolkit, Extjs, jQuery, Mootools, Prototype, Qooxdoo.
На сегодняшний день поддержку JavaScript обеспечивают современные версии всех наиболее часто используемых браузеров. В
Internet Explorer, Mozilla Firefox, Safari, Chrome, Opera имеется полная поддержка третьей редакции ECMA–262.
JavaScript – объектно-ориентированный скриптовый язык программирования. JavaScript обычно используется как встраиваемый
язык для программного доступа к объектам приложений. Наиболее
57
широкое применение находит в браузерах как язык сценариев для
придания интерактивности web-страницам.
Основные архитектурные черты:
• динамическая типизация – прием, широко используемый в
языках программирования и языках спецификации, при котором переменная связывается с типом в момент присваивания
значения, а не в момент объявления переменной, таким образом, в различных участках программы одна и та же переменная может принимать значения разных типов;
• слабая типизация – компилятор генерирует код, обеспечивающий преобразование типов, а логическая корректность такого преобразования контролируется программистом, т. е.
фактически значение переменной одного типа можно присвоить значению переменной другого почти без ограничений;
• автоматическое управление памятью – специальный код, называемый сборщиком мусора (garbage collector), периодически освобождает память, удаляя объекты, которые уже не будут востребованы приложением – то есть производит сборку
мусора;
• прототипное программирование – стиль объектно-ориентированного программирования, при котором отсутствует понятие класса, а повторное использование (наследование) производится путем клонирования существующего экземпляра объекта – прототипа;
• функции как объекты первого класса – функции в JavaScript могут использоваться без существенных ограничений, их можно
передавать как параметры, использовать как переменные, у них
могут быть свои функции (например, invoke(), delay()).
3.1. ИСТОРИЯ JAVASCRIPT
Перед Бренданом Айхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Айха перевели в группу, ответственную за
серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно в
команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программи58
рования. Менеджмент разработки браузера был убежден, что Netscape должен поддерживать язык программирования, встраиваемый в
HTML-код страницы.
Помимо Брендона Айха в разработке участвовали один из основателей Netscape Communications Марк Андрисин и один из основателей Sun Microsystems Билл Джой: чтобы успеть закончить работы
над языком к релизу браузера, компании заключили соглашение о
сотрудничестве в разработке. Они ставили перед собой цель обеспечить «язык для склеивания» составляющих частей web-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для webдизайнеров и программистов, не обладающих высокой квалификацией.
Первоначально язык назывался LiveScript и предназначался как
для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire).
На синтаксис оказали влияние языки Си и Java, и, поскольку Java в
то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun.
Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нем
декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.
В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996
года. Первым браузером, поддерживающим эту реализацию был Internet Explorer 3.0.
По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет
название ECMAScript, описывается стандартом ECMA–262. Первой
версии спецификации соответствовал JavaScript версии 1.1, а также
языки JScript и ScriptEasy.
3.2. СЕМАНТИКА И СИНТАКСИС JAVASCRIPT
Синтаксис языка JavaScript во многом напоминает синтаксис Си
и Java, семантически же язык гораздо ближе к Self или Smalltalk.
В JavaScript:
• все идентификаторы зависят от регистра;
• в названиях переменных можно использовать буквы, подчеркивание, символ доллара, арабские цифры;
59
• названия переменных не могут начинаться с цифры;
• для оформления однострочных комментариев используются
//, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.
Структура языка
Структурно JavaScript можно представить в виде объединения
трех четко различимых друг от друга частей:
• ядро (ECMAScript);
• объектная модель браузера (BOM);
• объектная модель документа (DOM).
Если рассматривать JavaScript в отличных от браузера окружениях, то объектная модель браузера и объектная модель документа
могут не поддерживаться.
Объектную модель документа иногда рассматривают как отдельную от JavaScript сущность, что согласуется с определением
DOM как независимого от языка интерфейса документа.
Ядро
ECMAScript не является браузерным языком и на самом деле в
нем не определяются методы ввода и вывода информации. Это скорее основа для построения скриптовых языков. Спецификация ECMAScript описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения, не
ограничивая авторов производных языков от расширения их новыми
составляющими.
Объектная модель браузера
Объектная модель браузера – «браузероспецифичная» часть
языка, являющаяся прослойкой между ядром и объектной моделью
документа. Основное предназначение объектной модели браузера –
управление окнами браузера и обеспечение их взаимодействия. Каждое из окон браузера представляется объектом Window, центральным
объектом BOM.
Помимо управления окнами, в рамках объектной модели браузера, браузерами обычно обеспечивается поддержка следующих сущностей:
• управление фреймами;
• поддержка задержки в исполнении кода и зацикливания с задержкой;
• системные диалоги;
60
•
•
•
•
•
управление адресом открытой страницы;
управление информацией о браузере;
управление информацией о параметрах монитора;
ограниченное управление историей просмотра страниц;
поддержка работы с HTTP cookie.
Объектная модель документа
Объектная модель документа – интерфейс программирования
приложений для HTML и XML-документов. Согласно DOM документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
• получение узлов;
• изменение узлов;
• изменение связей между узлами;
• удаление узлов.
Основной синтаксис
В JavaScript определены следующие типы:
• Number;
• String;
• Boolean;
• Object:
• Function;
• Array;
• Date;
• RegExp;
• Null;
• Undefined;
• Error.
Числа
Все числа в JavaScript согласно спецификации «64-битные двойной точности – формат IEEE 754». В JavaScript нет типа Integer, что
может привести к неожиданным последствиям, например:
0.1 + 0.2 = 0.30000000000000004.
Поддержаны стандартные арифметические операторы, такие как
сложение, деление, остаток от деления и так далее. Здесь стоит
вспомнить встроенный объект Math? содержащий математические
методы:
61
Math.sin(3.5);
d = Math.PI *r *r;
С использованием встроенной функции parseInt() можно преобразовать строку в число. Вторым параметром эта функция принимает
базу, которую стоит всегда указывать во избежание казусов:
parseInt("123", 10) //результат – «123»
parseInt("010", 10) //результат – «10»
а если не указать базу, то получим:
parseInt("010") //результат – «8»
Это произошло, потому что parseInt посчитало число восьмеричным из-за предшествующего 0.
Если функция не может преобразовать строку в число, она возвращает специальное значение NaN (сокращение от "Не Число"):
parseInt("Привет", 10) //результат – «NaN»
Результатом математической операции с NaN всегда будет NaN:
NaN + 5 //результат – "NaN"
Можно проверить значение на равенство NaN переменной с помощью встроенной функции isNaN():
isNaN(NaN) //результат – "true"
В JavaScript есть также значения Infinity и –Infinity:
1 / 0 //результат – "Infinity"
–1 / 0 //результат – "–Infinity"
Строки
Strings в JavaScript это последовательность символов. Для представления одного символа можно использовать строку единичной
длины. Для получения длины строки и объектов есть свойство length:
"Привет".length //результат – "5"
Также строка имеет набор полезных методов:
"Привет".charAt(0) //результат – "П"
"Привет, мир! ".replace("Привет", "Прощай") //результат – "Прощай, мир! "
"Привет".toUpperCase() //результат – "ПРИВЕТ"
Другие типы
JavaScript различает специальный тип и одноименное примитивное значение null – явное (программно-установленное) пустое значе62
ние, и значение undefined типа «undefined», которое говорит о том,
что значение еще не было назначено:
typeof null //результат – "object"
typeof undefined //результат – "undefined"
В JavaScript можно объявить переменную не инициализируя ее.
В этом случае значение переменной будет равно undefined.
В JavaScript есть логический тип с возможными значениями true
и false (оба являются ключевыми словами в JavaScript). Любое значение может быть преобразовано к логическому в согласии со следующими правилами:
false, 0, пустая строка (""), NaN, null, и undefined трактуются как false;
все остальное как true.
Преобразование можно провести в явном виде с использованием
функции Boolean():
Boolean("") //результат – «false»
Boolean(234) //результат – «true»
Эта возможность используется достаточно редко, поскольку такое преобразование производится автоматически в тех случаях, когда ожидается логическое значение, как в выражении if. Поэтому
обычно просто говорят о «истинных значениях» и «ложных значениях», подразумевая, в какое из логических значений оно преобразуется.
Поддерживаются стандартные логические операторы && (логическое и), || (логическое или) и ! (логическое не).
Переменные
Переменная в JavaScript объявляется с использованием ключевого слова var:
var a;
var name = "Иван";
Операторы
В JavaScript есть стандартные математические операторы +, –, *,
/ и % (остаток от деления). Значения присваиваются оператором =,
также есть операторы составного присваивания += и –=. Они позволяют записать короче часто встречающиеся выражения типа: x = x
operator y:
x += 5
x=x+5
63
Можно использовать ++ и –– для увеличения или уменьшения
значения переменной на единицу. Помещать этот оператор можно
как за символом переменной (i++) так и перед или (++i).
Оператор «+» применяется еще и для конкатенации строк:
"Привет, " + "мир! " //результат – "Привет, мир!"
При добавлении строки к числу последнее автоматически конвертируется в строку:
"3" + 4 + 5 //результат – "345"
3 + 4 + «5» //результат – "75"
Добавление пустой строки к чему-либо можно использовать, как
преобразование к строке.
В JavaScript Comparisons есть следующие операторы сравнения:
<, >, <= и >=. Их можно использовать и со строками и с числами.
Сравнение значений уже несколько сложнее. Оператор двойного равенства производит преобразование типов, что может привести к несколько неожиданным результатам:
"Приветм == "Привет" //результат – "true"
1 == true //результат – "true"
Чтобы этого избежать следует использовать оператор тройного
равенства, который учитывает типы:
1 === true //результат – "false"
true === true //результат – "true"
Есть также обратные операторы != и !== для двойного и тройного равенства соответственно.
Управляющие структуры
JavaScript имеет Си-подобные управляющие структуры. Условные операторы: if и else, из которых можно делать цепочки:
var name = "Котенок";
if (name == "Щенок") {
name += "!";
} else if (name == "Котенок") {
name += "!!";
} else {
name = "!" + name;
}
name == "Котенок!!"
64
В JavaScript есть циклы while и do-while. Первый можно использовать для бесконечного цикла; второй – в том случае, если вы хотите, чтобы тело цикла выполнилось как минимум один раз:
while (true) {
// Бесконечный цикл!
}
do {
var input = get_input();
}
while (inputIsNotValid(input))
В JavaScript for такой же, как в C, C# и Java:
for (var i = 0; i < 5; i++) {
// будет выполнен 5 раз
}
Операторы && и || «закорачиваются», т. е. будет ли выполнен
или нет второй операнд, зависит от значения первого. Это можно использовать для проверки значения объекта на null, перед тем как пытаться прочитать его свойства:
var name = o && o.getName();
Или для установки значений по умолчанию:
var name = otherName || "default";
В JavaScript есть также тернарный оператор:
var allowed = (age > 18) ? "Да" : "Нет";
Конструкция switch может быть использована для разветвления
на основании числового или строчного значения:
switch (action) {
case 'Рисовать':
drawit();
break;
case 'Есть':
eatit();
break;
default:
donothing();
}
65
Если забыть написать break, то выполнение «провалится» в следующий case:
switch (a) {
case 1: // проваливаемся
case 2:
eatit();
break;
default:
donothing();
}
Выражение default необязательно, его можно опустить.
Можно использовать «выражения» как в switch, так и в case;
сравнение будет проводиться с использованием оператора тройного
равенства ===:
switch(1 + 3):
case 2 + 2:
yay();
break;
default:
neverhappens();
}
Объекты
В JavaScript объекты это просто коллекции пар «ключ – значение».
Так как в JavaScript почти все является объектами (за исключением базовых типов), все JavaScript программы интенсивно используют хэш-таблицы. И они обладают высоким быстродействием.
«Ключ» должен быть в JavaScript строкой, в то время как значение может быть любым JavaScript типом – включая и сами объекты.
Это позволяет строить достаточно сложные структуры данных.
Есть два способа создать объект:
var obj = new Object();
или
var obj = {};
Эти два способа абсолютно идентичны. Второй способ называется объектный литерал.
После создания объекта ему можно присвоить свойства двумя
способами:
obj.name = "Иван"
66
var name = obj.name;
или
obj[«name»] = "Иван";
var name = obj["name"];
Эти два варианта дают один и тот же результат. Во втором случае имя свойства передается, как строка и может быть вычислено
динамически во время выполнения. Также через квадратные скобки
можно установить и получить свойства с именами из зарезервированных в JavaScript ключевых слов.
obj.for = "Иван"; // Синтаксическая ошибка, так как 'for' является зарезервированным словом
obj[«for»] = "Иван"; // Нет ошибки
Объектно-литеральный синтаксис может быть использован для
определения свойств объекта в момент его создания:
var obj = {
name: "Петров",
«for»: «Иван",
details: {
color: "orange",
size: 12;
}
}
Доступ к свойствам можно выстраивать в цепь (т. е. вызывать
свойства свойств и т. д.):
obj.details.color //результат – "orange"
obj["details"]["size"] //результат – "2"
Массивы
Массивы в JavaScript это специальный тип объектов. Они представляют собой почти рядовые объекты (числовые свойства доступны только через [] синтаксис), но имеют свойство «length», значение
которого всегда больше на единицу наибольшего индекса в массиве.
Старый способ создания массивов:
var a = new Array();
a[0] = "собака";
a[1] = "кошка";
a[2] = "мышь";
a.length; //результат – "3"
67
Более удобен «массивно-литеральный» синтаксис:
var a = ["собака", "кошка", "мышь"];
a.length //результат – "3"
Необходимо помнить, что array.length не всегда число элементов
массива:
var a = ["собака", "кошка", "мышь"];
a[100] = "лиса";
a.length //результат – «101»
Длина массива это просто число на единицу больше наибольшего индекса.
Если запросить элемент с несуществующим индексом, то будет
возвращено undefined:
typeof (a[90]) //результат – "undefined"
Обойти массив можно вот так:
for (var i = 0; i < a.length; i++) {
// работаем с a[i]
}
Но этот способ немного не эффективен, поскольку свойство
length будет выбираться на каждом цикле.
Безопасный способ добавления элемента к концу массива:
a[a.length] = item; //тоже что и a.push(item);
Поскольку a.length на единицу больше наибольшего индекса, вы
можете быть уверенны, что добавлен элемент в пустую позицию в
конец массива.
Массивы имеют набор встроенных методов:
• concat возвращает новый массив с элементами, добавленными
к нему;
• pop удаляет из массива и возвращает последний элемент;
• push добавляет один или несколько элементов в конец массива (также как ar[ar.length]);
• sort сортирует элементы в качестве необязательного параметра можно передать функцию;
• splice позволяет удалить или заменить целый интервал элементов в массиве;
• unshift добавляет элемент в начало массива.
68
Функции
Вместе с объектами функции играют ключевую роль в
JavaScript. Вот объявление самой простой функции:
function add(x, y) {
var total = x + y;
return total;
}
В JavaScript функции могут принимать от 0 и больше именованных параметров. Тело функции может содержать любые выражения
JavaScript и объявления внутренних переменных. Выражение return
может быть использовано в любое время для прекращения выполнения функции и возврата значения. Если return отсутствует или не
возвращает значения (пустой return), функция возвращает undefined.
Именованные параметры условны, т. е. можно вызвать функцию
без параметров или с лишними параметрами. В первом случае значения параметров будут установлены в undefined:
add() //результат – "NaN", так как undefined нельзя складывать
Также можно передать аргументов больше, чем ожидает функция:
add(2, 3, 4) //результат – "5", так как складывает первые два параметра 2 и 3, а 4 игнорируется
Внутри тела функции доступна дополнительная переменная «arguments». Это «массиво-подобный» объект, в котором хранятся все переменные, переданные в функцию. Перепишем предыдущую функцию, чтобы она суммировала все параметры, которые ей передают:
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
И вызовем ее:
add(2, 3, 4, 5) //результат – "14"
Напишем функцию для подсчета среднего арифметического:
function avg() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
69
sum += arguments[i];
}
return sum / arguments.length;
}
И вызовем ее:
avg(2, 3, 4, 5) //результат – "3.5"
Если мы захотим вычислить среднее по массиву, то можно переписать функцию, но можно воспользоваться уже существующей, поскольку в JavaScript функцию можно вызвать несколькими способами.
Первый это классический func(). Любую функцию можно вызвать также с помощью встроенного в Function метода apply(), который вызовет функцию с параметрами, переданными в виде массива в
apply() вторым параметром:
avg.apply(null, [2, 3, 4, 5]) //результат – "3.5"
JavaScript позволяет создавать анонимные функции:
var avg = function() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}
JavaScript позволяет функциям делать рекурсивные вызовы (т. е.
вызывать самих себя). Это очень полезно, когда имеешь дело с древовидными структурами, например, такими как DOM:
function countChars(elm) {
if (elm.nodeType == 3) {
return elm.nodeValue.length;
}
var count = 0;
for (var i = 0, child; child = elm.childNodes[i]; i++) {
count += countChars(child);
}
return count;
}
Пользовательские объекты
В классических объектно-ориентированных языках объект – это
коллекция данных и методов, оперирующих этими данными.
70
Рассмотрим объект person с полями first и last name (имя и фамилия). Предположим, надо иметь два метода для различных отображений полного имени: как «first last» или как «last, first». Это можно сделать с использованием объекта и функций следующим образом:
function makePerson(first, last) {
return {
first: first,
last: last
}
}
function personFullName(person) {
return person.first + " " + person.last;
}
function personFullNameReversed(person) {
return person.last + "," + person.first
}
Тогда при вызове этих функций:
s = makePerson("Иван", "Петров");
personFullName(s); //результат – "Иван Петров"
personFullNameReversed(s); //результат – "Петров, Иван"
Но если необходимо как-то присоединять имена функций к объектам, то, как это делается в обычных объектно-ориентированных
языках программирования, можно написать следующий код:
function makePerson(first, last) {
return {
first: first,
last: last,
fullName: function() {
return this.first + ' ' + this.last;
},
fullNameReversed: function() {
return this.last + ', ' + this.first;
}
}
}
Тогда при вызове этих функций:
s = makePerson("Иван", "Петров");
s.fullName(); //результат – "Иван Петров"
s.fullNameReversed(); //результат – «Петров, Иван»
71
Здесь встречается ключевое слово «this». При использовании
внутри функции this ссылается на текущий объект. Чему будет равно
this, на самом деле зависит от того, как была вызвана функция. Если
функция будет вызвана через точечную нотацию или квадратные
скобки, тогда this указывает на этот объект. Если просто вызвать
функцию, то this будет указывать на глобальный объект. Непонимание этого может привести к неприятным последствиям:
s = makePerson("Иван", "Петров");
var fullName = s.fullName;
fullName(); //результат – "undefined undefined"
Когда вызывается fullName(), в роли this выступает глобальный
объект. И поскольку не определены глобальные переменные first и
last, для каждой из них будет получено undefined.
Можно использовать this для усовершенствования нашей функции makePerson:
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
}
this.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
}
var s = new Person("Иван", "Петров");
Здесь присутствует ключевое слово «new». new связано с this.
Оно создает пустой объект и вызывает указанную функцию, внутри
которой this указывает на этот новый объект. Функции, которые будут
использоваться вместе с new, называются «конструкторами». Обычно
название таких функций начинается с заглавной буквы, и напоминает
о том, что функция должна быть использована вместе с new.
Однако до сих пор остались некоторые проблемы: каждый раз
при создании объекта, необходимо создавать по две новых функции
внутри него. Разделим эти функции между всеми объектами:
function personFullName() {
return this.first + ' ' + this.last;
}
function personFullNameReversed() {
72
return this.last + ', ' + this.first;
}
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = personFullName;
this.fullNameReversed = personFullNameReversed;
}
Теперь функции будут создаваться только один раз, а ссылки на
них назначаются в конструкторе. Однако существует более хороший
вариант:
function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
Person.prototype это объект общий для всех объектов, созданных
с помощью Person. Он входит в «prototype chain» (цепочку поиска):
каждый раз, когда происходит попытка получить свойство объекта
Person, которое у него отсутствует, JavaScript проверяет, нет ли такого свойства у Person.prototype. Таким образом, все, что будет присвоено Person.prototype становится доступно всем объектам, порожденным конструктором Person, в том числе и через объект this.
Это необычайно мощное средство. В JavaScript можно модифицировать prototype (прототипы) объектов в любое время и в любом
месте программы, что означает, что можно добавлять методы к объектам в процессе выполнения программы:
s = new Person("Иван", "Петров");
s.firstNameCaps(); //результат – "TypeError on line 1: s.firstNameCaps
is not a function"
Person.prototype.firstNameCaps = function() {
return this.first.toUpperCase()
}
s.firstNameCaps() //результат – "ИВАН"
73
Как уже упоминалось, прототип является частью цепочки, в
конце которой находится Object.prototype, у которого есть метод toString() – он вызывается, когда объект приводится к строке. И его
можно переопределить для отладки:
var s = new Person("Иван", "Петров");
Person.prototype.toString = function() {
return "<ФИО: " + this.fullName() + ">";
}
Теперь вернемся к рассмотрению первого параметр метода
avg.apply(). Первый параметр apply() это объект, на который будет
ссылаться ключевое слово «this», если оно используется в теле вызываемой функции. Например, можно сделать тривиальную реализацию new:
function trivialNew(constructor) {
var o = {}; // создаем объект
constructor.apply(o, arguments);
return o;
}
Это, конечно, не совсем new, так как не создается прототипная
цепочка (prototype chain).
Для apply() есть похожая функция call, которая также позволяет
установить this, но вместо массива параметров принимает параметры
через запятую (как при обычном вызове):
function lastNameCaps() {
return this.last.toUpperCase();
}
var s = new Person("Иван", "Петров");
lastNameCaps.call(s);
// То же самое, что и:
s.lastNameCaps = lastNameCaps;
s.lastNameCaps();
Внутренние функции
В JavaScript функции можно объявлять внутри других функций.
Очень важным аспектом является то, что внутренние функции имеют
доступ к локальным переменным, определенным в родительской
функции:
function betterExampleNeeded() {
var a = 1;
74
function oneMoreThanA() {
return a + 1;
}
return oneMoreThanA();
}
Это позволяет не засорять глобальный контекст (scope) именами
функций, которые нужны для решения частных проблем в одной
части кода. А также разделять переменные между разными вложенными функциями, не пользуясь глобальным пространством имен.
Встраивание в web-страницы
Для добавления JavaScript-кода на страницу, можно использовать тэги <script></script>. Скрипт, выводящий модальное окно с
классической надписью "Hello, World!" внутри браузера:
<script type="text/javascript">
alert('Hello, World!');
</script>
Расположение внутри тэга
Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Пример использования:
<a href="delete.php" onclick="return confirm('Вы
уверены?');">Удалить</a>
Отделение от разметки
В приведенном примере при нажатии на ссылку функция confirm('Вы уверены?') ; вызывает модальное окно с надписью "Вы уверены? ", а return false; блокирует переход по ссылке. Разумеется, этот
код будет работать, только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдет без предупреждения.
Использование кода JavaScript в контексте разметки страницы в
рамках ненавязчивого JavaScript расценивается как плохая практика.
Аналогом (при условии снабжения ссылки идентификатором alertLink):
<a href="delete.aspx" id="alertLink">Удалить</a>
приведенного примера может выступать, например, следующий
фрагмент JavaScript:
window.onload = function() {
var linkWithAlert = document.getElementById(«alertLink»);
75
linkWithAlert.onclick = function() {
return confirm('Вы уверены?');
};
};
Вынесение в отдельный файл
Есть и третья возможность подключения JavaScript – написать
скрипт в отдельном файле, а потом подключить его с помощью конструкции:
<script type="text/javascript"
src="http://Путь_к_файлу_со_скриптом"></script>
Атрибуты тэга script
Тэг script, широко используемый для подключения к странице
JavaScript, имеет несколько атрибутов.
• обязательный атрибут type для указания MIME-типа содержимого; необязательный атрибут src, принимающий в качестве значения адрес к файлу со скриптом;
• необязательный атрибут charset, используемый вместе с src
для указания используемой кодировки внешнего файла;
• необязательный атрибут defer, используемый для того, чтобы
показать, что скрипт не генерирует никакого содержимого
(что означает, в частности, то, что в этом скрипте отсутствует
вызов document.write()).
При этом атрибут language (language=«JavaScript»), несмотря на
его активное использование, относится к не рекомендуемым (deprecated), отсутствует в DTD, поэтому считается некорректным.
3.3. ПРАКТИКУМ ПО JAVASCRIPT
Лабораторная работа 6.
Введение в JavaScript
Задание 1. Рассмотреть способы вызова JavaScript:
1. Вызов команд с использованием тэга script:
<script language="JavaScript" type="text/javascript" defer="defer">
alert('Hello world');
</script>
2. Вызов команд с использованием файла с расширением JS:
76
<script language="JavaScript" src="script.js"
type="text/javascript"></script>
3. Вызов операторов в обработчике:
<a href="#" onClick="alert('Hello world')">Ссылка</a>
Задание 2. Рассмотреть принцип использования парных скобок
на примерах:
<a href="#" onClick="alert('Hello world')">Ссылка</a>
или
<a href="#" onClick='alert("Hello world")'>Ссылка</a>
Задание 3. Рассмотреть на примерах использование методов
alert, prompt и confirm:
<script language="JavaScript">
<!––
var yourName="";
yourName=prompt("Как Вас зовут?", "Маша");
if(yourName=="Маша")
{document.write("Угадал!");}
else
{document.write("Не угадал. Вас зовут "+yourName);}
//––>
</script>
<script language="JavaScript">
name=prompt ("Введи сюда своё имя", "сюда введи");
alert ("Тебя зовут, " + name);
</script>
<script language="JavaScript">
<!––
if(confirm("Рад видеть Вас на моем сайте! Пошли дальше?"))
{document.write("Пошли!");}
else
{document.write("Не хочешь – не надо...");}
//––>
</script>
Задание 4. Осуществить вывод информации в документ document.write("текст с соответствующими тэгами");
77
var anyString = "Brave new world";
document.write (" символ в индексе 0 – " + anyString.charAt (0));
document.write ("<p>’+’ символ в индексе 1 – " + anyString.charAt
(1));
document.write ("<p>’+’ символ в индексе 2 – " + anyString.charAt (2);
document.write ("<p>’+’ символ в индексе 3 – " + anyString.charAt
(3)); document.write ("<p>’+’ символ в индексе 4 – " + anyString.charAt (4));
Задание 5. Используя метод document.write(), вывести таблицу
(3*3 с числами от 1 до 9 в ячейках).
Задание 6. Используя метод document.write(), вывести таблицу
умножения.
Задание 7. Использовать символы esc-последовательностей.
alert("Имя" + name + " \n" + "Фамилия" + fam);
Лабораторная работа 7. Операторы JavaScript
Приведенная ниже функция возвращает название дня недели по
введенному номеру дня недели.
function dayOfWeek(n){
var result = "";
switch(n){
case 1: result = "понедельник"; break;
case 2: result = "вторник"; break;
case 3: result = "среда"; break;
case 4: result = "четверг"; break;
case 5: result = "пятница"; break;
case 6: result = "суббота"; break;
case 7: result = "воскресенье"; break;
default : result = "Неверный номер дня недели";
}
return result;
}
Приведенные ниже операторы демонстрируют использование регулярных выражений.
var s = "Изучаем язык JavaScript";
var re = /JAVA/;
var result = re.test(s) ? "Да" : "нет";
78
document.write("Строка " + s + result +" соответствует образцу
" + re + "<br />");
//проверка почты
//использование – (isValidEmail('dl@istu.edu'))?alert('Да'):alert('Нет')
function isValidEmail(email)
{
return (/^([a–z0–9_\–]+\.)*[a–z0–9_\–]+@([a–z0–9][a–z0–9\–]*[a–z0–
9]\.)+[a–z]{2,4}$/i).test(email);
}
Задания на использование оператора If
1. Дано целое число. Если оно является положительным, то прибавить к нему 1; в противном случае не изменять его. Вывести
полученное число.
2. Дано целое число. Если оно является положительным, то прибавить к нему 1; в противном случае вычесть из него 2. Вывести полученное число.
3. Дано целое число. Если оно является положительным, то прибавить к нему 1; если отрицательным, то вычесть из него 2; если нулевым, то поменять его на 10. Вывести полученное число.
4. Даны три целых числа. Найти количество положительных чисел в исходном наборе.
5. Даны два числа. Вывести большее из них.
6. Даны две переменные вещественного типа: A, B. Перераспределить значения данных переменных так, чтобы в A оказалось меньшее из значений, а в B – большее. Вывести новые значения переменных A и B.
7. Даны три числа. Найти наименьшее из них.
8. Даны три числа. Найти среднее из них (то есть число, расположенное между наименьшим и наибольшим).
9. Даны три переменные вещественного типа: A, B, C. Если их
значения упорядочены по возрастанию или убыванию, то удвоить
их; в противном случае заменить значение каждой переменной на
противоположное. Вывести новые значения переменных A, B, C.
10. Дан номер года (положительное целое число). Определить
количество дней в этом году, учитывая, что обычный год насчитывает 365 дней, а високосный – 366 дней. Високосным считается год,
делящийся на 4, за исключением тех годов, которые делятся на 100 и
не делятся на 400 (например, годы 300, 1300 и 1900 не являются високосными, а 1200 и 2000 – являются).
79
11. Дано целое число, лежащее в диапазоне 1–999. Вывести его
строку описание вида «четное двузначное число», «нечетное трехзначное число» и т. д.
Задания на использование оператора switch – case
1. Дано целое число K. Вывести строку-описание оценки, соответствующей числу K (1 – «плохо», 2 – «неудовлетворительно», 3 –
«удовлетворительно», 4 – «хорошо», 5 – «отлично»). Если K не лежит в диапазоне 1–5, то вывести строку «ошибка».
2. Дан номер месяца – целое число в диапазоне 1–12 (1–январь,
2–февраль и т. д.). Вывести название соответствующего времени года («зима», «весна», «лето», «осень»).
3. Дан номер месяца – целое число в диапазоне 1–12 (1 – январь,
2 – февраль и т. д.). Определить количество дней в этом месяце для
невисокосного года.
4. Единицы массы пронумерованы следующим образом: 1 – килограмм, 2 – миллиграмм, 3 – грамм, 4 – тонна, 5 – центнер. Дан номер
единицы массы (целое число в диапазоне 1–5) и масса тела в этих единицах (вещественное число). Найти массу тела в килограммах.
5. Даны два целых числа: D (день) и M (месяц), определяющие
правильную дату невисокосного года. Вывести значения D и M для
даты, предшествующей указанной.
6. Робот может перемещаться в четырех направлениях («С» –
север, «З» – запад, «Ю» – юг, «В» – восток) и принимать три цифровые команды: 0 – продолжать движение, 1 – поворот налево, −1 – поворот направо. Дан символ C – исходное направление робота и целое
число N – посланная ему команда. Вывести направление робота после выполнения полученной команды.
7. Мастям игральных карт присвоены порядковые номера: 1 –
пики, 2 – трефы, 3 – бубны, 4 – червы. Достоинству карт старше десятки присвоены номера: 11 – валет, 12 – дама, 13 – король, 14 – туз.
Даны два целых числа: N – достоинство (6 ≤ N ≤ 14) и M – масть карты (1 ≤M ≤ 4). Вывести название соответствующей карты вида «шестерка бубен», «дама червей», «туз треф» и т. п.
8. Дано целое число в диапазоне 20–69, определяющее возраст (в
годах). Вывести строку-описание указанного возраста, обеспечив
правильное согласование числа со словом «год», например: 20 –
«двадцать лет», 32 – «тридцать два года», 41 – «сорок один год».
9. Дано целое число в диапазоне 100–999. Вывести строкуописание данного числа, например: 256 – «двести пятьдесят шесть»,
814 – «восемьсот четырнадцать».
80
10. В восточном календаре принят 60-летний цикл, состоящий
из 12-летних подциклов, обозначаемых названиями цвета: зеленый,
красный, желтый, белый и черный. В каждом подцикле годы носят
названия животных: крысы, коровы, тигра, зайца, дракона, змеи, лошади, овцы, обезьяны, курицы, собаки и свиньи. По номеру года определить его название, если 1984 год–начало цикла: «год зеленой
крысы». Цикл с параметром 25 Case 20. Даны два целых числа: D
(день) и M (месяц), определяющие правильную дату. Вывести знак
Зодиака, соответствующий этой дате: Водолей (20.1–18.2), Рыбы
(19.2–20.3), Овен (21.3–19.4), Телец (20.4–20.5), Близнецы (21.5–
21.6), Рак (22.6–22.7), Лев (23.7–22.8), Дева (23.8–22.9), Весы (23.9–
22.10), Скорпион (23.10–22.11), Стрелец (23.11–21.12), Козерог
(22.12–19.1).
Лабораторная работа 8.
Циклы и массивы
Задание 1.
1. Написать функцию multiplicationTable(), которая выводит таблицу умножения.
2. Модифицировать функцию multiplicationTable(), чтобы она
раскрашивала разными цветами четные и нечетные строки.
3. Модифицровать функцию multiplicationTable(), чтобы она
раскрашивала разными цветами четные и нечетные столбцы.
4. Модифицровать функцию multiplicationTable(), чтобы она
раскрашивала разными цветами четные и нечетные столбцы, цвета
столбцов можно было указать параметрами функции.
<script language="JavaScript" type="text/javascript">
function drawTable(m, n){
var oTR = "<tr>";
var cTR = "</tr>";
var oTD = "<td>";
var cTD = "</td>";
var table = "<table width='400' border='2' cellspacing='0' cellpadding='0'>";
for(var i = 0; i < m ; i++){
table += oTR;
for(var j = 0; j < n; j++){
table += oTD + i + "–" + j + cTD;
}
table += cTR;
81
}
table += '</table>';
return table;
}
function drawTableInDiv(el){
alert(el);
el.innerHTML = drawTable(10, 10);
}
</script>
Задание 2. Рассмотреть основние принципы работы с массивами, используя приведенный ниже код.
<script language="JavaScript" type="text/javascript">
//объявление одномерных массивов
/*
1) var arr = new Array("понедельник", "вторник", "среда", "четверг",
"пятница");
2)
var arr = new Array(5);
arr[0] = "понедельник";
arr[1] = "вторник";
arr[2] = "среда";
arr[3] = "четверг";
arr[4] = "пятница";
3)
var arr = new Array();
arr[0] = "понедельник";
arr[1] = "вторник";
arr[2] = "среда";
arr[3] = "четверг";
arr[4] = "пятница";
4) var arr = ["понедельник", "вторник", "среда", "четверг", "пятница"];
*/
var days = ["понедельник", "вторник", "среда", "четверг", "пятница"];
//вывод элементов на страницу
function printArray1(arr){
var str = "Элементы массива:";
for(var i = 0; i < arr.length ; i++){
str += '<br />' + arr[i];
82
}
return str;
}
//вывод элементов в alert
function printArray2(arr){
var str = "Элементы массива:\n";
str += arr.join('\t');
return str;
}
//функция для сортировки массива
function sortArray(arr){
return arr.sort();
}
//изменение порядка следования элементов массива
function reverseArray(arr){
return arr.reverse();
}
//сортировка по длине элементов
function lengthSortArray(arr){
return arr.sort(sortLength);
}
function sortLength(a, b){
if(a.length > b.length){
return 1;
}else if(a.length = b.length){
return 0;
}else{
return –1;
}
}
</script>
Задания на формирование массива и вывода его элементов
1. Дано целое число N (>0). Сформировать и вывести целочисленный массив размера N, содержащий N первых положительных
нечетных чисел: 1, 3, 5, …
2. Дано целое число N (>0). Сформировать и вывести целочисленный массив размера N, содержащий степени двойки от первой до
N-й: 2, 4, 8, 16, …
83
3. Дано целое число N (>1), а также первый член A и разность D
арифметической прогрессии. Сформировать и вывести массив размера N, содержащий N первых членов данной прогрессии: A, A+D,
A+ 2·D, A+ 3·D, …
4. Дано целое число N (>2). Сформировать и вывести целочисленный массив размера N, содержащий N первых элементов последовательности чисел Фибоначчи FK: F1 = 1, F2 = 1, FK = FK−2
+FK−1, K = 3,4, …
5. Дан массив размера N. Вывести его элементы в обратном порядке.
6. Дан целочисленный массив размера N. Вывести все содержащиеся в данном массиве четные числа в порядке убывания их индексов, а также их количество K.
7. Дан массив A размера N (N – четное число). Вывести его элементы с четными номерами в порядке возрастания номеров: A2, A4,
A6, … , AN. Условный оператор не использовать.
Задания на использование цикл с параметром
1. Даны целые числа K и N (N > 0). Вывести N раз число K.
2. Даны два целых числа A и B (A<B). Вывести в порядке возрастания все целые числа, расположенные между A и B (включая сами числа A и B), а также количество N этих чисел.
3. Даны два целых числа A и B (A < B). Вывести в порядке убывания все целые числа, расположенные между A и B (не включая
числа A и B), а также количество N этих чисел.
4. Дано вещественное число – цена 1 кг конфет. Вывести стоимость 1, 2, ... , 10 кг конфет.
5. Дано вещественное число – цена 1 кг конфет. Вывести стоимость 0.1, 0.2, ... , 1 кг конфет.
6. Дано вещественное число – цена 1 кг конфет. Вывести стоимость 1.2, 1.4, ... , 2 кг конфет.
7. Даны два целых числа A и B (A < B). Найти сумму всех целых
чисел от A до B включительно.
8. Даны два целых числа A и B (A < B). Найти произведение
всех целых чисел от A до B включительно.
9. Даны два целых числа A и B (A<B). Найти сумму квадратов
всех целых чисел от A до B включительно.
10. Дано целое число N (>0). Найти сумму 1 + 1/2 + 1/3 + … +
1/N (вещественное число).
11. Дано вещественное число A и целое число N (>0). Найти A
в степени N: AN=A·A· … ·A (числа A перемножаются N раз).
84
12. Дано вещественное число A и целое число N (>0). Используя один цикл, вывести все целые степени числа A от 1 до N.
13. Дано целое число N (>0). Найти произведение N! = 1·2·…·N
(N-факториал). Чтобы избежать целочисленного переполнения, вычислять это произведение с помощью вещественной переменной и
вывести его как вещественное число.
Задания на использование цикла с условием
1. Даны положительные числа A и B (A > B). На отрезке длины
A размещено максимально возможное количество отрезков длины B
(без наложений). Не используя операции умножения и деления, найти длину незанятой части отрезка A.
2. Даны положительные числа A и B (A > B). На отрезке длины
A размещено максимально возможное количество отрезков длины B
(без наложений). Не используя операции умножения и деления, найти количество отрезков B, размещенных на отрезке A.
3. Даны целые положительные числа N и K. Используя только
операции сложения и вычитания, найти частное от деления нацело N
на K, а остаток от этого деления.
4. Дано целое число N (>0). Если оно является степенью числа
3, то вывести TRUE, если не является – вывести FALSE.
5. Дано целое число N (>0), являющееся некоторой степенью
числа 2: N = 2K. Найти целое число K – показатель этой степени.
6. Дано целое число N (>0). Найти наименьшее целое положительное число K, квадрат которого превосходит N: K2 > N. Функцию
извлечения квадратного корня не использовать.
7. Дано целое число N (>0). Найти наибольшее целое число K,
квадрат которого не превосходит N: K2 ≤ N. Функцию извлечения
квадратного корня не использовать.
8. Дано целое число N (>1). Вывести наименьшее из целых чисел K, для которых сумма 1 + 2 + … +K будет больше или равна N, и
саму эту сумму.
9. Дано целое число N (>1). Вывести наибольшее из целых чисел K, для которых сумма 1 + 2 + … + K будет меньше или равна N,
и саму эту сумму.
10. Дано число A (>1). Вывести наименьшее из целых чисел K,
для которых сумма 1 + 1/2 + … + 1/K будет больше A, и саму эту
сумму.
11. Дано число A (>1). Вывести наибольшее из целых чисел K,
для которых сумма 1 + 1/2 + … + 1/K будет меньше A, и саму эту
сумму.
85
12. Начальный вклад в банке равен 1000 руб. Через каждый месяц размер вклада увеличивается на P процентов от имеющейся суммы (P – вещественное число, 0 < P < 25). По данному P определить,
через сколько месяцев размер вклада превысит 1100 руб., и вывести
найденное количество месяцев K (целое число) и итоговый размер
вклада S (вещественное число).
13. Дано целое число N (>0). Используя операции деления нацело и взятия остатка от деления, вывести все его цифры, начиная с
самой правой (разряда единиц).
14. Дано целое число N (>0). Используя операции деления нацело и взятия остатка от деления, найти количество и сумму его
цифр.
3.4. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ
1. Базовые операторы зыка JavaScript.
2. Язык JavaScript. Объекты браузера.
3. Язык JavaScript. Внутренние объекты.
4. Объектная модель HTML страницы.
5. Событийная модель DHTML: связывание событий с кодом,
всплытие событий, объект Event.
6. Применение DHTML: программное изменение содержания
документа.
7. Применение DHTML: программное изменение формата документа.
8. Применение DHTML: программное изменение положения
элементов.
86
ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА
1. Лабораторный практикум по web-технологиям / М. Ф. Тубольцев, Н. П. Путивцева, И. В. Гурьянова, О. В. Немыкина. –
Белгород : Изд-во БелГУ, 2003. – Ч. 1 : Основы HTML технологий. – 49 с.
2. Таранухина А. И. Основы web-дизайна : учеб. пособие /
А. И. Таранухина. − Ростов н/Д., 2008. − 82 с.
3. Влад Мержевич [личный сайт]. [Электронный ресурс]. –
Режим доступа: http://www.htmlbook.ru (дата обращения:
01.10.2011).
4. Владимир Городулин [личный сайт]. [Электронный ресурс]. –
Режим доступа: http://css.manual.ru.
5. Сычев А. В. Теория и практика разработки современных
клиентских web-приложений. [Электронный ресурс]. – Режим
доступа: http://www.intuit.ru/department/internet/thpdevweba/
6. Elar 9000. PodkljuchenieCSS – Wiki-учебник по webтехнологиям [личный сайт]. [Электронный ресурс]. – Режим
доступа: http://www.webmasterwiki.ru/CSS/ (дата обращения:
01.10.2011).
7. Абрамян М. Э. 1000 задач по программированию /
М. Э. Абрамян. – Ростов н/Д, 2004. – Ч. 1 : Скалярные типы
данных, операторы, процедуры и функции − 43 с.
87
Приложение 1
Итоговый ТЕСТ.
Изучение HTML, Css и JavaScript
1. HTML код <span>1<div>2</div>3</span> выведет 1, 2, 3:
A
B
в одну строку
в две строки
C
в три строки
[2.0]
2. HTML–код
<ul>
<li>
<ol>
<li>1</li>
</ol>
</li>
</ul> выведет в документ:
A
B
• 1.1
•1
C
D
1.1
1. • 1
3. Какой тэг позволяет указать кодировку символов (charset)?
A
B
<link>
<object>
C
D
<a>
<div>
C
D
6
3
C
D
88
colspan
rules
C
D
[2.0]
4
5
6. Какие атрибуты используются только для тэга <td>?
A
B
[2.0]
<p>
<span>
5. Чему равно по умолчанию значение параметра size тэга
<font>?
A
B
[2.0]
<head>
<meta>
4. Какие тэги, из перечисленных ниже, определяют блочные
элементы (по умолчанию)?
A
B
[2.0]
valign
rowspan
[2.0]
7. С помощью каких тэгов загружается содержимое файла во
фрейм?
A
B
frameset
img
C
D
iframe
frame
8. В каких единицах измерения можно задавать атрибут width
тэга table?
A
B
проценты
пиксели
C
D
var a = new Array("a","b") D
var a = { "a"; "b" }
E
var a = ( "a", "b" )
alert()
prompt()
C
D
JavaScript
Script
C
D
полосы прокрутки
панель меню
Поле ввода адреса
D
E
[2.0]
ScriptJava
undefinedJava
12. Какие элементы интерфейса будут иметь новое окно браузера, открытое с помощью приведенного оператора? window.open("","1","status=1,menubar=0,location=yes");
A
B
C
[2.0]
confirm()
window()
11. Что будет выведено в HTML-документ после выполнения
приведенного JavaScript кода?
…
var a = "Script";
a += "Java";
document.write(a);
A
B
[2.0]
var a = [ "a", "b" ]
var a = "a,b".split(',')
10. С помощью какого метода в JavaScript создается окно, выводящее текстовое сообщение, содержащее кнопки OK и Cancel
(Отмена), и возвращающее значение true или false в зависимости от нажатой пользователем кнопки?
A
B
[2.0]
сантиметры
точки
9. Какие из этих вариантов задают массив из элементов "a", "b"?
A
B
C
[2.0]
[2.0]
панель инструментов
статусную строку
13. Каково будет значение переменной a после выполнения приведенного JavaScript кода?
[2.0]
89
…
var a = 1;
function myFunc(a) {
a++;
return a;
}
myFunc(a);
A
B
a = 0;
a = 1;
C
D
a = 2;
a = undefined;
14. Что будет выведено в HTML-документ после выполнения
приведенного JavaScript-кода?
…
var x = 5;
var y = 3;
var result = x % y;
document.write(result);
A
B
1
2
C
D
3
1.66
15. С помощью инструмента "New css rule" программы
Dreamweaver нельзя создать:
A
стиль класса
C
B
инлайн стиль элемента
D
position
z–index
C
D
*
/
C
D
90
Поиск и удаление тэга с
содержимым
C
[2.0]
%
^
18. При использовании команды поиск/замена c параметром поиск (search) – Specific tag действие (action) strip tag позволяет
осуществить:
A
[2.0]
border
overflow
17. Какого арифметического оператора нет в JavaScript?
A
B
[2.0]
переопределенный стиль
тэга
стиль псевдоэлементов
16. Какие свойства стилевых правил генерирует Dreamweaver
при создании слоя?
A
B
[2.0]
Поиск и удаление тэга без
содержимого
[2.0]
B
Поиск и изменение атри- D
бутов
Поиск и добавление содержимого
19. Язык Javascript позволяет создавать пользовательские объекты.
A
Истина
B
Ложь
20. Укажите синонимы объекта window.
A
B
top
opener
C
D
write
alert
C
D
pow
round
C
D
substr
split
C
D
B
перечислить селекторы
через запятую
перечислить селекторы
через пробел
С
screen
tv
С
D
[2.0]
использовать универсальный селектор*
25. Какой медиа-тип управляет отображением страниц на телетайпах?
A
B
[2.0]
charAt
anchor
24. Как применить стиль к нескольким селекторам?
A
[2.0]
ceil
floor
23. Какой из методов объекта String возвращает массив?
A
B
[2.0]
confirm
javaEnabled
22. Какой из перечисленных методов объекта Math не позволяет
округлять?
A
B
[2.0]
parent
self
21. Какие методы не принадлежат объекту window?
A
B
[2.0]
[2.0]
ttv
projection
91
Ключи к тесту
Каждый правильный ответ оценивается в 2 балла
Максимальный балл по тесту 50.
Таблица 1
Ключи к тесту
HTML, DHTML, Java Script
№
Правильный ответ
1
С
2
A
3
D
4
B, C
5
B
6
A, C, D
7
C, D
8
A, B
9
A, D, E
10
C
11
C
12
С, E
13
B
14
B
15
B
16
A, B
17
D
18
C
19
А
20
A, C, D
21
A, D
22
A
23
B
24
A, C
25
C
92
Приложение 2
Краткий справочник по тэгам HTML
Таблица 2
Типы данных HTML
Обозначение
Возможные значения
MIME-тип
MIME-тип файла для связанных или вложенных ресурсов.
URL
Абсолютный или относительный адрес URL.
Дата – время Дата и время в формате ГГГГ–ММ–ДДТчч:мм:ссУВЗ, где
ГГГГ — 4-значный год, ММ — 2-значный номер месяца
(01–12), ДД — двузначный номер дня (01–31), «T» латинская прописная — разделитель, чч — 2-значный номер
часа (00–23), мм — 2-значный номер минуты (00–59), cc
— 2-значный номер секунды (00–59), УВЗ — указатель
временной зоны. Неизвестные компоненты даты и времени заменяются на 00. Указатель временной зоны Z обозначает время по Гринвичу, +чч:мм — положительную
разницу с Гринвичем в часах и минутах, –чч:мм — аналогичную отрицательную разницу
пикселы
Целые положительные числа, задающие количество пикселов (например, 800)
размер
Целые положительные числа, задающие количество пикселов (например, 800), либо доли в процентах от размера
по горизонтали или вертикали (например, 75 %)
текст
Строка символов, возможно, включающая специальные
символы. При отображении переносы строк игнорируются, символы перевода строки и табуляции заменяются на
пробелы, начальные и конечные пробелы в значении атрибута игнорируются. Обычно значения зависят от регистра символов
типы ссылок Список типов ссылок, разделенных пробелами. Тип ссылки не зависит от регистра и не может содержать пробелов
цвет
Шестнадцатеричное число с префиксом # вида
#RRGGBB, задающее RGB-код цвета, либо одно из символических имен цветов. Не зависит от регистра символов (см. также все цвета Интернет)
число
Десятичное число, состоящее хотя бы из одной арабской
цифры
|
Выбор одного из нескольких возможных значений атрибута
93
Таблица 3
Тэги HTML и их описание
Тэг
Описание и атрибуты
<a>
Текстовый элемент. Его содержимое определяет положение
якоря ссылки или закладки в документе. Применяется для
создания закладок и гиперссылок. Может включать любые
текстовые элементы, кроме <a>.
Атрибуты:
name="текст" (название закладки);
href="URL" (URL адресуемой ссылки);
rel="типы ссылок" (прямая ссылка);
rev="типы ссылок" (обратная ссылка);
target="фрейм" (фрейм для отображения ссылки или одно из
значений "_blank", "_top", "_parent", "_self").
Примеры:
<a href="http://www.domain.ru">внешняя ссылка, текущее
окно</a>
<a href="http://www.domain.com" target="_blank">внешняя
ссылка, новое окно браузера</a>
<a href="folder/file.html">внутренняя ссылка на файл из
вложенной папки folder</a>
<a name="start">определение закладки с именем start</a>
<a href="#start">ссылка на закладку с именем start</a>
<abbr>
Текстовый элемент логического форматирования. Содержит
маркировку аббревиатуры. Расшифровка задается атрибутом title="текст".
Пример:
Дистанция 100 <abbr title="метров">м</abbr>
<acronym> Текстовый элемент логического форматирования. Содержит
маркировку акронима. Расшифровка задается атрибутом
title="текст".
Пример:
<acronym title="Организация Объединенных Наций">ООН</acronym>
<address>
94
Содержит контактную информацию о документе (имена автора, адрес E–mail и т. д.). Может содержать другие текстовые элементы.
Пример:
<address>Автор: Иванов В.А.<br>E–mail: <a
href="mailto:ivanov@mail.com">ivanov@mail.com</a>
</address>
Тэг
Описание и атрибуты
<applet>
Блочный элемент. Описывает апплет на языке Java. Содержимым являются один или несколько элементов <param>, за
которыми следуют блочные и/или текстовые элементы, отображаемые, если апплет не запускается.
Атрибуты:
code="текст" (имя файла класса);
codebase="URL" (базовый URL для файлов класса);
width="размер" (ширина окна апплета);
height="размер" (высота окна апплета);
archive="текст" (список библиотек классов);
object="текст" (сериализованный апплет);
name="текст" (имя апплета для взаимодействия с другими
объектами);
alt="текст" (альтернативный текст);
align = "top" | "middle" | "bottom" | "left" | "right" (выравнивание окна апплета);
hspace="пикселы" (горизонтальный отступ);
vspace="пикселы" (вертикальный отступ).
Пример:
<applet code="slideways.class" height="100">
<param name="Notice" value="Applet by
www.BrainCode.com">
<param name="Direction" value="1">
<param name="LinkMode" value="0">
<param name="Image1" value="01.jpg">
<param name="Image2" value="02.jpg">
</applet>
<area>
Не имеет содержимого и закрывающей части. Определяет
активную область изображения, чувствительную к нажатию
мыши.
Атрибуты:
shape="rect" | "circle" | "poly" | "default" (область в карте ссылок);
coords="список координат в карте ссылок" (числа через запятую);
href="URL" (URL ссылки);
nohref (используется, если область неактивна);
alt="текст" (альтернативный текст);
target="фрейм" (фрейм для отображения ссылки).
<b>
Текстовый элемент физического форматирования. Отображает содержимое полужирным шрифтом.
95
Тэг
Описание и атрибуты
Пример:
<p>Выделение <b>полужирным</b> шрифтом
<base>
Не имеет содержимого и закрывающей части. Помещается в
элементе <head>. Задает в обязательном атрибуте href URL
для данного документа, используемый браузером для приведения относительных URL к полным.
Атрибуты:
href="URL" (URL документа);
target="фрейм" (имя фрейма для отображения ссылок).
Пример:
<base href="http://www.domain.com/folder/myurl.html">
Эта <a href="../images/picture.gif">ссылка</a> указывает на
URL http://www.domain.com/images/picture.gif
<basefont>
Не имеет содержимого и закрывающей части. Изменяет параметры базового шрифта, влияя на внешний вид всех последующих за ним элементов, кроме заголовков. Обязательный атрибут size имеет по умолчанию значение 3.
Атрибуты:
size="число" (размер шрифта от 1 до 7);
color="цвет" (цвет шрифта);
face="текст" (наименование гарнитуры шрифта).
Пример:
<basefont size="3" color="#000033">
<bdo>
Текстовый элемент. Обязательным атрибутом dir определяет направление вывода текста. Может содержать любые
текстовые элементы и содержаться в любых блочных и текстовых элементах.
Атрибуты:
dir="ltr" | "rtl" (направление вывода текста — слева направо
(по умолчанию) или справа налево).
Пример:
<bdo dir="ltr">текст</bdo>
<bgsound>
Фоновый звук (только IE, Opera). Нестандартен, не рекомендуется.
Пример:
<bgsound src="sound/saintsgo.mid" loop="infinite">
<big>
Текстовый элемент физического форматирования. Отображает содержимое крупным шрифтом.
96
Тэг
Описание и атрибуты
Пример:
<p>Выделение <big>крупным</big> шрифтом
<blink>
Создает мерцающий текст. Нестандартен. Не поддерживается Internet Explorer. Не рекомендуется к использованию
Пример:
<blink>этот текст мерцает</blink>
<blockquote>
Блочный элемент. Применяется для маркировки блочных
цитат, состоящих из нескольких строк. Отображается как
блок текста, сдвинутый вправо. Может содержать блочные
элементы, но не может быть частью абзаца или текстового
элемента.
Пример:
<p>Как заметил Станислав Лем, <blockquote>любая возможная информация содержится в компьютерных инвентарях благ, а ее недоступность обусловлена лишь ужасающей
избыточностью накопленных сведений</blockquote></p>
<body>
Содержит HTML-элементы, предназначенные для отображения браузером. Задается в элементе <html> после элемента <head>. Атрибуты тэга считаются устаревшими и должны заменяться на стили.
Атрибуты:
background="URL" (cсылка на файл фонового рисунка);
bgcolor="цвет" (цвет фона страницы);
text="цвет" (цвет основного текста на странице);
link="цвет" (цвет непосещенных ссылок на странице);
alink="цвет" (цвет активных ссылок на странице);
vlink="цвет" (цвет посещенных ссылок на странице);
topmargin="пикселы" (верхний отступ в окне браузера);
leftmargin="пикселы" (левый отступ в окне браузера);
marginheight="пикселы" (верхний и нижний отступы в окне
браузера);
marginwidth="пикселы" (левый и правый отступ в окне
браузера).
<br>
Не имеет содержимого и закрывающей части. Определяет
разрыв строки.
Пример:
<p>Строка этого абзаца<br>будет разорвана</p>
<button>
Текстовый элемент, создает кнопку формы. Может содержать любые текстовые элементы, кроме <a>, <button>,
97
Тэг
Описание и атрибуты
<iframe>, <input>, <label>, <select>, <textarea> и любые
блочные элементы, кроме <form> и <fieldset>. Может содержаться в любых текстовых и блочных элементах, кроме
<button>.
Атрибуты:
type="submit" | "reset" | "button" (тип кнопки);
name="текст" (имя кнопки);
value="текст" (начальное значение кнопки);
disabled (используется, если элемент запрещен).
Пример:
<button type="submit" name="submit"
value="Отправить">Кнопка</button>
<caption>
Текстовый элемент. Определяет заголовок таблицы. Употребляется только как первый элемент внутри тэга <table>.
Может содержать только текстовые элементы. Расположение заголовка зависит от браузера.
Атрибуты:
align = "top" | "bottom" | "left" | "right" (горизонтальное выравнивание относительно таблицы).
<center>
Блочный элемент. Определяет блок, содержимое которого
центрируется браузером по горизонтали.
Пример:
<center>Это блок текста центрирован</center>
<cite>
Текстовый элемент логического форматирования. Служит
для выделения ссылок на названия книг, журналов, газет и
других источников. По умолчанию отображается курсивом.
Пример:
Газета <cite>Аргументы и факты</cite>
<code>
Текстовый элемент логического форматирования. Указывает на программный код. По умолчанию отображается телетайпным шрифтом.
Пример:
Простейшая программа на Паскале имеет вид<code><br>
begin<br>end.</code>
<col>
Не имеет содержимого и закрывающей части. Позволяет
группировать атрибуты для столбцов таблицы, не создавая
их групп. Должен располагаться после элемента <caption> и
перед элементом <thead>. Элементы <col> могут указываться как внутри <colgroup>, так и самостоятельно.
98
Тэг
Описание и атрибуты
Атрибуты:
span="число" (число столбцов в группе);
width="размеры" (список значений через запятую, задающих ширину каждого столбца);
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого).
<colgroup> Определяет группу столбцов таблицы. Закрывающая часть
не обязательна. Содержимым тэга являются нуль или более
тэгов <col>. Должен располагаться после элемента
<caption> и перед элементом <thead>.
Атрибуты:
span="число" (количество столбцов в группе);
width="размеры" (список значений через запятую, задающих ширину каждого столбца);
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого).
Пример:
<table align="center" border="1" cellspacing="0">
<colgroup span="6" align="center" valign="middle">
</colgroup>
<col width="1*" align="center" valign="middle">
<col width="3*" align="right" valign="bottom">
<tr>
<th>Пн</th><th>Вт</th><th>Ср</th><th>Чт</th>
<th>Пт</th><th>Сб</th>
<th><font color="red">Вс</font></th>
<td>Неделя</td>
</tr>
</table>
<dd>
Блочный элемент. Создает элемент списка определений
<dl> (описание термина). Может содержать как текстовые,
так и блочные элементы. Обычно определяемый тэгом блок
описания сдвигается браузером вправо.
<del>
Блочный или текстовый элемент. Означает удаление текста
из документа. Способ отображения не определен.
99
Тэг
Описание и атрибуты
Атрибуты:
cite="URL" (URL, где хранится объяснение внесения изменений);
datetime="дата–время" (дата и время внесения изменений).
Пример:
<del cite="www.url.com" datetime="2007–12–
31T15:30:00+03:00">Этот текст удален</del>
<dfn>
Текстовый элемент логического форматирования. Указывает на определение термина. По умолчанию отображается
курсивом.
Пример:
Элемент разметки или оформления языка HTML называют
<dfn>тэгом</dfn>
<dir>
Устаревший элемент. Использовался вместо <ul>.
<div>
Блочный элемент. Предназначен для группировки элементов HTML–документа. Служит для задания стиля группы
элементов.
Атрибуты:
align = "left" | "center" | "right" | "justify" (выравнивание текста раздела).
Пример:
<div align="center">
<p>абзац 1<p>абзац 2
</div>
<dl>
Блочный элемент. Содержит список определений. Содержимым является последовательность пар элементов <dt> и
<dd>. Допускается давать несколько определений одному
термину или сопоставлять одно определение нескольким
терминам.
Пример:
<dl>
<dt><strong>Браузер</strong>
<dt><strong>Web–обозреватель</strong>
<dd>Программа для просмотра web-страниц
<dt><strong>Internet Explorer</strong>
<dd>Cокращенно IE, MSIE – бесплатный графический браузер компании Microsoft, входящий в состав всех последних
версий Windows
</dl>
100
Тэг
Описание и атрибуты
<dt>
Блочный элемент. Создает элемент списка определений
<dl> (определение термина). Может содержать любые текстовые, но не блочные элементы. Обычно задаваемое тэгом
определение термина никак не выделяется визуально.
<em>
Текстовый элемент логического форматирования. Служит
для смыслового выделения важных фрагментов текста. По
умолчанию отображается курсивом.
Пример:
Тэг служит для <em>смыслового выделения</em> информации.
<embed>
Блочный элемент, не имеет закрывающей части и содержимого. Описывает связанный с документом объект, является
устаревающей альтернативой тэгу <object>. Нестандартен,
но широко поддерживается.
Атрибуты:
code="текст" (имя файла, содержащего Java-апплет);
src="URL" (URL загружаемого файла);
width="размер" (ширина окна объекта);
height="размер" (высота окна объекта);
units="px" | "em" (единицы измерения высоты и ширины);
name="текст" (имя для использования в сценариях);
alt="текст" (альтернативный текст);
align="top" | "middle" | "bottom" | "left" | "right" (способ выравнивания объекта);
hspace="пикселы" (горизонтальный отступ от объекта до
содержимого);
vspace="пикселы" (вертикальный отступ от объекта до содержимого);
pluginspage="URL" (URL загружаемого модуля для отображения объекта).
<fieldset>
Блочный элемент. Определяет группу управляющих элементов формы. Содержимое — элемент <legend>, задающий
заголовок группы элементов, за которым могут располагаться любые блочные и/или текстовые элементы, включая
другой тэг <fieldset>. Тэг может содержаться в элементах
<blockquote>, <body>, <dd>, <del>, <div>, <fieldset>, <form>,
<iframe>, <ins>, <li>, <map>, <noframes>, <noscript>,
<object>, <td>, <th>.
<font>
Блочный элемент. Задает параметры шрифта для отображения своего содержимого.
101
Тэг
Описание и атрибуты
Атрибуты:
size="число" (размер шрифта от 1 до 7 включительно);
color="цвет" (цвет шрифта);
face="текст" (наименование гарнитуры шрифта).
<form>
102
Блочный элемент. Используется для создания интерактивных форм, служит контейнером для управляющих элементов, образующих форму. Кроме управляющих элементов
может содержать сценарии и любые блочные элементы,
кроме <form>. Может содержаться в элементах
<blockquote>, <body>, <button>, <dd>, <del>, <div>,
<fieldset>, <form>, <iframe>, <ins>, <li>, <map>, <noframes>,
<noscript>, <object>, <td>, <th>.
Атрибуты:
action="URL" (URL сценария–обработчика формы);
method="get" | "post" (метод HTTP пересылки формы);
enctype="MIME-тип" (тип файла для пересылки формы);
name="текст" (название формы для сценариев);
target="фрейм" (фрейм для отображения результатов).
Пример:
<form name="form1" action="mailto:email@address.com" method="post" enctype="text/plain">
<fieldset>
<legend>Личная информация</legend>
<label>Введите Ваше имя:
<input type="text" name="name" maxlength="20" size="10"
value="">
</label>
</fieldset>
<fieldset>
<legend>Пожалуйста, оцените мой сайт</legend>
<label>Общая оценка:
<select name="ball" size="1">
<option value="5" selected>отлично!</option>
<option value="4">хорошо для начала</option>
<option value="3">нужно еще поработать</option>
</select>
</label>
</fieldset>
<br><input type="submit" value="Oтправить">
</form>
Тэг
Описание и атрибуты
<frame>
Не имеет содержимого и закрывающей части. Определяет
фрейм, т. е. независимое прямоугольное подокно внутри
окна браузера. Содержится внутри элемента <frameset>,
прямо или косвенно определяющего размеры окна.
Атрибуты:
name="текст" (имя фрейма для ссылки атрибутом target);
src="URL" (URL целевого документа);
frameborder="1" | "0" (наличие рамки);
marginwidth="пикселы" (ширина полей вокруг содержимого);
marginheight="пикселы" (высота полей вокруг содержимого);
noresize (используется для запрета изменения размера
фрейма);
scrolling="yes" | "no" | "auto" (служит для управления полосами прокрутки фрейма).
<frameset>
Блочный элемент. Описывает разбиение окна обозревателя
на фреймы, употребляется вместо элемента <body> и располагается сразу после <head>. Состоит из одного или нескольких элементов <frameset> или <frame>, может содержать элемент <noframes>.
Атрибуты:
rows="размеры" (список размеров строк через запятую –
пикселы, проценты или относительные размеры вида i*, где
i – число);
cols="размеры" (список размеров столбцов через запятую –
пикселы, проценты или относительные размеры вида i*, где
i – число).
Пример:
<frameset rows="40,*" frameborder="1">
<frame src="reclama.html" name="top" scrolling="no" noresize>
<frameset cols="128,*" frameborder="1">
<frame src="menu.html" name="menu" scrolling="auto">
<frame src="index.html" name="main" scrolling="yes">
<noframes>
Извините, Ваш браузер не поддерживает фреймы!
</noframes>
</frameset>
<h1>,…,
<h6>
Блочные элементы. Создают заголовки от первого до шестого уровня включительно. Все параметры отображения заголовков можно изменить через стили.
103
Тэг
Описание и атрибуты
Атрибуты:
align="left" | "right" | "center" | "justify" (задает выравнивание
заголовка).
<head>
Содержит информацию об общих свойствах документа. Задается в элементе <html> перед элементом <body>. Не отображается браузерами. Может включать в себя элементы
<title>, <meta>, <base>, <link>, <style>, <script>.
<hr>
Не имеет содержимого и закрывающей части. Блочный элемент. Создает горизонтальную черту, обычно используемую
в качестве разделителя.
Атрибуты:
size="пикселы" (толщина черты);
width="размер" (длина черты);
align="left" | "right" | "center" (горизонтальное выравнивание
черты);
color="цвет" (цвет черты);
noshade (указывается при создании линии без трехмерных
эффектов).
<html>
Указывает, что последующий документ является HTMLдокументом. Включает в себя все остальное содержимое
документа.
Пример:
<html>
<head>
<meta name="Description" content="Изучение основных возможностей языка гипертекстовой разметки HTML">
<meta name="Keywords" content="HTML, тэг, учебник">
<title>HTML. Самое необходимое</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF"
alink="#FF0000" vlink="#800080">
<p>Содержимое документа
</body>
</html>
<i>
Текстовый элемент физического форматирования. Отображает содержимое курсивом.
<iframe>
Текстовый элемент. Определяет вложенный фрейм. Может
содержаться в текстовых и блочных элементах. Может содержать текстовые и блочные элементы, отображаемые
только в случае, если браузер не поддерживает фреймы.
104
Тэг
Описание и атрибуты
Атрибуты:
name="текст" (имя фрейма для ссылки атрибутом target);
src="URL" (URL целевого документа);
align= "top" | "middle" | "bottom" | "left" | "right" (выравнивание фрейма);
width="размер" (ширина фрейма);
height="размер" (высота фрейма);
frameborder="1" | "0" (наличие рамки);
marginwidth="пикселы" (ширина полей вокруг содержимого);
marginheight="пикселы" (высота полей вокруг содержимого);
scrolling="yes" | "no" | "auto" (используется для управления
полосами прокрутки фрейма).
Пример:
<iframe name="links" src="links.html" frameborder="1"
align="left" width="170" height="100">
<p><i>Извините, Ваш браузер не поддерживает плавающие
фреймы.<br>Это окно адресует документ <a
href="links.html" target="_blank">links.html</a></i></p></iframe>
<img>
Не имеет содержимого и закрывающей части. Указывает
точку вставки в документ рисунка. Может содержаться в
любых текстовых и блочных элементах, кроме <pre>.
Атрибуты:
src="URL" (URL файла, содержащего рисунок, обязателен);
alt="текст" (альтернативный текст для отображения вместо
графики);
name="текст" (название рисунка для сценариев);
width="размер" (ширина рисунка);
height="размер" (высота рисунка);
align = "top" | "middle" | "bottom" | "left" | "right" (выравнивание рисунка);
hspace="пикселы" (горизонтальный отступ);
vspace="пикселы" (вертикальный отступ);
border="пикселы" (ширина рамки);
usemap="URL" (URL клиентской карты ссылок).
Примеры:
<img src="http://www.domain.com/folder/picture.gif">
<img src="images/smile.gif" width="19" height="19"
align="left">
<img src="images/picture.jpg" width="600" height="400"
align="center" hspace="4" vspace="4" alt="Рисунок">
105
Тэг
<input>
106
Описание и атрибуты
Не имеет содержимого и закрывающей части. Создает
управляющий элемент формы, предназначенный для ввода
данных пользователем. Может содержаться в любых блочных или текстовых элементах, кроме <button>. Многими
браузерами отображается только внутри элемента <form>.
Атрибуты:
type="text" | "password" | "checkbox" | "radio" | "submit" |
"reset" | "file" | "hidden" | "image" | "button" (задает тип элемента);
name="текст" (имя элемента);
value="текст" (начальное значение элемента для текста, возвращаемое – для флажков и переключателей, отображаемый
текст – для кнопок);
checked (состояние "выбран" для флажков и переключателей);
readonly (состояние "только чтение" для текста и паролей);
disabled (используется, если элемент запрещен);
size="число" (видимая ширина поля для текста);
maxlength="число" (максимальное количество вводимых
символов для текста);
src="URL" (URL графического образа для кнопки);
alt="текст" (альтернативный текст для графической кнопки);
usemap="URL" (URL клиентской карты ссылок для графической кнопки).
Значения атрибута type имеют следующее назначение:
text – однострочное поле ввода (принято по умолчанию);
password – поле ввода пароля;
checkbox – флажок;
radio – переключатель;
reset – кнопка сброса формы;
submit – кнопка пересылки формы;
image – графическая кнопка пересылки;
button – кнопка общего назначения;
file – элемент выбора файлов. Форма, содержащая селектор
файлов, должна иметь атрибуты method="post" и enctype="multipart/form–data";
hidden – скрытый элемент, служащий для передачи скрипту
данных вида name="value".
Пример:
<form method="post" action="mailto:email@domain.com>
<p>Ваше имя: <input name="name" type="text" maxlength="40" size="40" value="">
<p>Ваш пол:
<input type="radio" name="pol" value="male">Мужской
Тэг
Описание и атрибуты
<input type="radio" name="pol" value="female">Женский
<p>Какие языки программирования Вы знаете?
<input type="checkbox" name="pascal" value="yes"
checked>Паскаль
<input type="checkbox" name="c" value="yes">Си
<p>Напишите несколько слов о себе:
<textarea name="about" rows="6" cols="60"></textarea>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>
<ins>
Блочный или текстовый элемент. Означает вставку нового
текста в документ. Способ отображения не определен.
Атрибуты:
cite="URL" (URL, где хранится объяснение внесения изменений);
datetime="дата–время" (дата и время внесения изменений).
Пример:
<ins cite="www.url.com" datetime="2007–12–
31T15:30:00+03:00">Этот текст вставлен</ins>
<isindex>
Устаревший элемент. Использовался вместо <input
type="text">.
<kbd>
Текстовый элемент логического форматирования. Указывает на текст, вводимый пользователем с клавиатуры. По
умолчанию отображается телетайпным (моноширинным)
шрифтом.
<label>
Текстовый элемент. Создает текстовую метку для другого
элемента формы. Содержимым могут быть любые текстовые элементы, кроме <label>. Может содержаться в любых
блочных и текстовых элементах, кроме <button>. Связывается с другим элементом формы атрибутом for="id элемента" или размещением соответствующего элемента в качестве содержимого тэга.
<legend>
Текстовый элемент. Задает заголовок группы элементов.
Может содержать любые текстовые элементы и употребляться только в начале элемента <fieldset>.
<li>
Блочный элемент. Определяет один элемент списка в тэге
<ul> или <ol>. Закрывающая часть необязательна. Как правило, браузер автоматически переводит строку перед каждым элементом списка.
107
Тэг
Описание и атрибуты
Атрибуты:
type = "disc" | "square" | "circle" | "1" | "a" | "A" | "i" | "I" (определяет тип маркера элемента);
value="число" (изменяет нумерацию, начиная с этого элемента).
<link>
Не имеет содержимого и закрывающей части. Определяет
взаимосвязь между документами. Помещается в элементе
<head>.
Атрибуты:
rel="типы ссылок" (прямая ссылка);
rev="типы ссылок" (обратная ссылка);
href="URL" (URL ссылки);
target="фрейм" (имя фрейма для отображения ссылки).
<listing>
Устаревший элемент. Использовался вместо <pre>.
<map>
Создает клиентскую карту ссылок. Содержимым могут быть
либо элементы <area>, либо любые блочные элементы.
Употребляется совместно с элементами <img>, <object> или
<input>, загружающими графический образ. Обязательный
атрибут name="текст" содержит название карты, используемое в атрибуте usemap тэга графического образа.
Пример:
<map name="map1">
<area shape="circle" coords="50,50,50" href="1.html">
<area shape="poly" coords="50,200,200,264,400,0,50,200"
href="2.html">
<area shape="rect" coords="0,270,399,299" href="3.html">
</map>
<img src="img/html_map.gif" width="400" height="300" border="1" usemap="#map1">
<marquee>
Создает бегущую строку текста. Нестандартен, поддерживается не всеми браузерами, не рекомендуется. Атрибут behavior со значением "scroll", "slide" или "alternate" управляет
поведением строки.
Пример:
<center><marquee behavior="alternate" bgcolor="green" direction="right" loop="infinite" width="90%" height="50"
hspace="5" vspace="5"> Бегущая строка
текста</marquee></center>
<menu>
Устаревший элемент. Использовался вместо <ul>.
108
Тэг
Описание и атрибуты
<meta>
Не имеет содержимого и закрывающей части. Обычно размещается в элементе <head>. Содержит метаописатели общих свойств документа в виде <meta name="свойство" content="значение"> или <meta http–equiv="Заголовок сообщения HTTP" content="значение">.
Примеры:
<meta name="Author" content="А.С. Пушкин" lang="ru">
<meta name="Description" content="Изучение основных возможностей языка гипертекстовой разметки HTML">
<meta http–equiv="Content–Type" content="text/html; charset=windows–1251">
<meta http–equiv="Expires" content="Sun, 6 Jan 2008 09:00:00
GMT">
<meta http–equiv="Refresh"
content="10;URL=http://www.domain.com/new.html">
<nobr>
Текстовый элемент. Указывает, что содержащийся в нем
текст должен отображаться без разрывов строк. Нестандартен, но широко поддерживается.
Пример:
<nobr>Этот текст отображается без переноса на новую
строку в окне браузера</nobr>
<noframes>
Блочный элемент. Задает альтернативное содержание фреймового документа для браузеров, не поддерживающих
фреймы. Располагается в конце тела документа перед закрывающей частью </frameset>. Может содержать любые
элементы, допустимые внутри тэга <body>.
<noscript>
Блочный элемент. Обычно указывается после закрывающей
части тэга </script>. Определяет альтернативное содержимое для случаев, когда обозреватель не может исполнить
ранее указанный сценарий. Может содержать любые
элементы разметки содержимого.
<object>
Блочный элемент. Обеспечивает включение в документ
объектов различных типов. Может содержаться в заголовке
документа и любых текстовых или блочных элементах,
кроме <pre>. Содержимым тэга являются элементы
<param>, за которыми могут следовать текстовые или блочные тэги. Все тэги, следующие за <param>, задают альтернативное содержимое, отображаемое, если браузер не поддерживает указанный тип объектов.
109
Тэг
Описание и атрибуты
Атрибуты:
classid="URL" (URL кода объекта);
data="URL" (URL данных объекта);
archive="текст" (список архивных файлов с кодом объекта);
codebase="URL" ( URL для атрибутов classid, data, archive);
width="размер" (ширина окна объекта);
height="размер" (высота окна объекта);
align = "top" | "middle" | "bottom" | "left" | "right" (выравнивание объекта);
hspace="пикселы" (горизонтальный отступ);
vspace="пикселы" (вертикальный отступ);
border="пикселы" (ширина рамки);
usemap="URL" (URL клиентской карты ссылок);
name="текст" (название объекта для форм и сценариев);
codetype="MIME–тип" (тип кода объекта);
type="MIME–тип" (тип данных объекта).
Примеры:
<object type="image/jpeg" data="images/photo1.jpg"
width="230" height="240">Мое фото</object>
<object classid="clsid:978C9E23–D4B0–11CE–BF2D–
00AA003F40D0" id="label1" width="500" height="100"
align="middle"> К сожалению, ваш браузер не поддерживает
ActiveX</object>
<ol>
Блочный элемент. Определяет нумерованный список. Содержимое — один или более элементов <li>. Элементы списка обычно отображаются с отступом вправо и с номером
перед началом элемента.
Атрибуты:
type="1"|"I"|"i"|"A"|"a" (задает способ нумерации элементов
списка);
start="число" (определяет начало нумерации элементов списка).
Пример:
<ol>
<li>первый элемент;
<li>второй элемент
</ol>
<optgroup> Текстовый элемент. Задает группу элементов списка. Используется внутри элемента <select>. Может содержать
только элементы <option>.
110
Тэг
Описание и атрибуты
Атрибуты:
label="текст" (метка группы);
disabled (используется, если элемент запрещен).
Пример:
<select name="news" size="5" multiple>
<optgroup label="Технические новости">
<option value="server" selected>Новости сервера
<option value="soft">Програмнное обеспечение
<option value="mobile">Мобильные компьютеры
</optgroup>
<optgroup label="Прочее">
<option value="weather" selected>Прогноз погоды
<option value="tv">Программа ТВ
</optgroup>
</select>
<option>
Текстовый элемент. Описывает один элемент списка. Размещается внутри элемента <select>. Может содержать только обычный текст, включая специальные символы. Содержимое тэга отображается браузером как элемент списка.
Атрибуты:
value="текст" (имя элемента);
label="текст" (метка элемента);
selected (используется, если элемент выбран изначально);
disabled (указывается, если элемент запрещен).
<p>
Блочный элемент. Определяет абзац текста. Обычно абзац
отделяется браузерами пустой строкой.
Атрибуты:
align="left" | "right" | "center" | "justify" (задает выравнивание
абзаца).
Пример:
<p align="right">11 января 2008 г.
<p align="justify">Текст документа</p>
<param>
Не имеет содержимого и закрывающей части. Один или несколько тэгов <param> могут находиться только в начале
тэгов <object> и <applet> для задания начальных значений
параметров объекта в виде name="value".
Атрибуты:
name="текст" (название параметра);
value="текст" (значение параметра).
111
Тэг
Описание и атрибуты
<plaintext> Устаревший элемент. Использовался вместо <pre>.
<pre>
Блочный элемент. Содержит предварительно отформатированный текст, выводимый шрифтом фиксированной ширины без сжатия пробелов и автоматического переноса слов на
следующую строку. Применяется для вывода текстов, в которых размещение слов в строках имеет существенное значение.
Пример:
<p>Текст простейшей программы на Си имеет следующий
вид:
<pre>
#include <stdio.h>
void main () {
printf ("\nHello, world!");
}
</pre>
<q>
Текстовый элемент логического форматирования. Служит
для выделения коротких цитат в основном тексте.
Атрибуты:
cite="URL" (URL, где хранится источник цитаты).
Пример:
Колин Уилсон писал: <q>Самообман – это делать вид, что
свобода есть необходимость.</q>
<s>
Текстовый элемент физического форматирования. Отображает содержимое перечеркнутым шрифтом.
Пример:
В тексте есть <s>перечеркнутое</s> слово
<samp>
Текстовый элемент логического форматирования. Указывает на вывод результатов работы программы. По умолчанию
отображается телетайпным (моноширинным) шрифтом.
Пример:
При обнаружении ошибки программа выведет сообщение
<samp>Bad command or file name</samp>
<script>
Определяет сценарий, выполняемый на стороне клиента.
Тэг может содержаться в элементе <head>, а также в любых
текстовых и блочных элементах внутри тэга <body>.
Атрибуты:
type="MIME-тип" (MIME-тип языка сценариев);
language="текст" (язык сценариев, обычно JavaScript);
112
Тэг
Описание и атрибуты
src="URL" (URL для файла с внешним сценарием);
defer (только декларация).
Примеры:
<script type="text/javascript" src="scripts/script1.js"></script>
<script language="JavaScript">
function showCY(domain) {
if (domain=='') {
window.alert ('Вы не указали адрес сайта в поле ввода!'); }
else {
if (domain.indexOf ('http://')==–1) { domain='http://'+domain; }
window.open('http://www.yandex.ru/yandsearch?Link='+domain,'_
blank'); }
}
</script>
<noscript>
<p>Извините, Ваш браузер не поддерживает Javascript.
<p>Программа недоступна.
</noscript>
<select>
Текстовый элемент. Создает интерфейсный элемент формы,
предназначенный для выбора значений из списка. Отображается в виде выпадающего меню (при size="1") или многострочного списка. Содержимым тэга могут быть только тэги
<optgroup> и <option>, определяющие элементы списка. Тэг
может содержаться в любых блочных и текстовых элементах, кроме <button>.
Атрибуты:
name="текст" (имя списка);
size="число" (число видимых элементов списка);
multiple (разрешает множественный выбор);
disabled (указывается, если элемент запрещен).
Примеры: см. <form>, <optgroup>
<small>
Текстовый элемент физического форматирования. Отображает содержимое мелким шрифтом.
Пример:
<p>Выделение <small>мелким</small> шрифтом
<span>
Текстовый элемент. Предназначен для группировки элементов HTML-документа. Используется для задания стиля
группы элементов.
113
Тэг
Описание и атрибуты
Пример:
<span lang="en">Windows</span> означает "окна"
<strike>
То же, что <s>.
<strong>
Текстовый элемент логического форматирования. Служит
для сильного смыслового выделения важных фрагментов
текста. По умолчанию отображается полужирным шрифтом.
Пример:
Тэг <strong> — это <strong>более сильное</strong>
выделение.
<style>
Включает в документ внутренние таблицы стилей. Обычно
размещается в тэге <head>. Обязательный атрибут type указывает на язык описания стилей (в настоящее время всегда
задается type="text/css").
Атрибуты:
type="MIME–тип" (тип таблицы стилей).
Пример:
<style type="text/css">
P{
font–family: serif, sans–serif;
color: #000000;
font–size: 12pt;
text–align: justify;
}
</style>
<sub>
Текстовый элемент физического форматирования. Отображает содержимое подстрочным шрифтом.
Пример:
Формула воды — H<sub>2</sub>O
<sup>
Текстовый элемент физического форматирования. Отображает содержимое надстрочным шрифтом.
Пример:
My 1<sup>st</sup> HTML document
<table>
Блочный элемент, определяющий таблицу. Может содержать тэги заголовка таблицы (<caption>), группирования
столбцов (<colgroup>, <col>), выделения строковых секций
(<thead>, <tfoot>, <tbody>), отдельных строк (<tr>) и ячеек
(<th>, <td>). Ячейки таблиц <td> и <th> могут содержать
текст, графические образы, гиперссылки, формы, другие
таблицы.
114
Тэг
Описание и атрибуты
Атрибуты:
width="размер" (ширина таблицы);
border="пикселы" (ширина рамки);
frame="void" | "above" | "below" | "hsides" | "lhs" | "rhs" |
"vsides" | "box" | "border" (вид внешних рамок);
rules="none" | "groups" | "rows" | "cols" | "all" (вид внутренних
рамок);
cellspacing="размер" (расстояние между ячейками);
cellpadding="размер" (отступ от краев ячеек до содержимого);
align="left" | "right" | "center" (горизонтальное выравнивание
таблицы);
bgcolor="цвет" (цвет фона элемента).
Пример:
<table align="center" border="1" cellpadding="4" cellspacing="0">
<caption>Заголовок таблицы</caption>
<tr bgcolor="yellow" align="center">
<th>Cтрока заголовка, столбец 1</th>
<th>Cтрока заголовка, столбец 2</th>
</tr>
<tr>
<td align="center">Строка данных, столбец 1</td>
<td align="center">Строка данных, столбец 2</td>
</tr>
</table>
<tbody>
Блочный элемент. Определяет группу строк тела таблицы.
Содержимое элемента — один или несколько тэгов <tr>.
Атрибуты:
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого).
Пример:
<table border="1">
<thead><tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr></thead>
<tfoot><tr>
<th>Итог 1</th>
<th>Итог 2</th>
</tr></tfoot>
115
Тэг
Описание и атрибуты
<tbody><tr>
<td>Блок 1, строка 1, данные 1</td>
<td>Блок 1, строка 1, данные 2</td>
</tr><tr>
<td>Блок 1, строка 2, данные 1</td>
<td>Блок 1, строка 2, данные 2</td>
</tr></tbody>
<tbody><tr>
<td>Блок 2, данные 1</td>
<td>Блок 2, данные 2</td>
</tr></tbody>
</table>
<td>
Блочный элемент. Определяет одну ячейку данных таблицы. Содержимым тэга могут быть как блочные, так и текстовые элементы. Располагается внутри тэга <tr>.
Атрибуты:
rowspan = число (число строк таблицы, занятых ячейкой);
colspan = число (число столбцов таблицы, занятых ячейкой);
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого);
width="размер" (ширина элемента);
height="размер" (высота элемента);
bgcolor="цвет" (цвет фона элемента);
nowrap (если указано — не переносить содержимое на новую строку).
<textarea>
Текстовый элемент. Создает многострочное поле ввода данных. Содержимым может быть обычный текст, включая
специальные символы. Этот текст становится начальным
отображаемым в поле значением. Тэг может содержаться в
любых блочных и текстовых элементах, кроме <button>.
Атрибуты:
name="текст" (имя поля ввода);
rows="число" (рекомендуемое число видимых строк);
cols="число" (рекомендуемое число видимых столбцов);
readonly (используется, если элемент предназначен только
для чтения);
disabled (указывается, если элемент запрещен).
<tfoot>
Блочный элемент. Определяет группу строк подзаголовка
таблицы. Содержимое элемента — один или несколько тэгов <tr>. Поддерживается рядом браузеров некорректно.
116
Тэг
Описание и атрибуты
Атрибуты:
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого).
<th>
Блочный элемент. Определяет одну заголовочную ячейку
таблицы. Содержимым тэга могут быть как блочные, так и
текстовые элементы. Располагается внутри тэга <tr>. Содержимое может по умолчанию выводиться полужирным
шрифтом.
Атрибуты:
rowspan="число" (число строк таблицы, занятых ячейкой);
colspan="число" (число столбцов таблицы, занятых ячейкой);
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого);
width="размер" (ширина элемента);
height="размер" (высота элемента);
bgcolor="цвет" (цвет фона элемента);
nowrap (если указано — не переносить содержимое на новую строку).
<thead>
Блочный элемент. Определяет группу строк надзаголовка
таблицы. Содержимое элемента — один или несколько тэгов <tr>. Поддерживается рядом браузеров некорректно.
Атрибуты:
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
выравнивание содержимого).
<title>
Содержит текст, отображаемый в строке заголовка окна
браузера. Размещается в элементе <head>. Текст заголовка
может содержать специальные символы, но не другие элементы.
<tr>
Блочный элемент. Определяет одну строку таблицы. Содержимое — один или несколько тэгов <th> и/или <td>.
Атрибуты:
align="left" | "center" | "right" | "justify" (горизонтальное выравнивание содержимого);
valign="top" | "middle" | "bottom" | "baseline" (вертикальное
117
Тэг
Описание и атрибуты
выравнивание содержимого);
bgcolor="цвет" (цвет фона элемента).
<tt>
Текстовый элемент физического форматирования. Отображает содержимое телетайпным (моноширинным) шрифтом.
Пример:
Выделение <tt>телетайпным шрифтом</tt>
<u>
Текстовый элемент физического форматирования. Отображает содержимое подчеркнутым шрифтом.
Пример:
В тексте есть <u>подчеркнутое</u> слово
<ul>
Блочный элемент. Определяет маркированный список. Содержимым являются один или более элементов <li>. Элементы списка обычно отображаются с отступом вправо и с
маркером перед началом элемента.
Атрибуты:
type="disc" | "circle" | "square" (задает тип маркера списка)
Пример:
<p>Список браузеров</p><ul>
<li><a href="http://www.microsoft.com/ie" target="_blank">Internet Explorer</a>
<li><a href="http://www.opera.com/download/" target="_blank">Opera</a>
<li><a href="http://www.getfirefox.net/" target="_blank">Mozilla Firefox</a>
</ul>
<var>
Текстовый элемент логического форматирования. Применяется для выделения имен переменных и аргументов программ. По умолчанию отображается курсивом.
Пример:
Определим переменные <var>X</var> и <var>Y</var>
<wbr>
Не имеет конечного тэга и содержимого. Употребляется
только внутри элемента <nobr>, указывая, что в этом месте
возможен разрыв строки. Нестандартен, но широко поддерживается.
Пример:
<nobr>Неразрывную строку текста можно разорвать <wbr>в
этом месте</nobr>
<xmp>
Устаревший элемент. Использовался вместо <pre>.
118
Приложение 3
Краткий справочник по CSS
Таблица 4
Краткий справочник описания стилей CSS
Стиль
background
backgroundattachment
background-color
background-image
backgroundposition
background-repeat
border
border-bottom
border-left
border-right
border-top
border-bottom-color
border-left-color
border-right-color
border-top-color
border-bottom-style
border-left-style
border-right-style
border-top-style
border-bottomwidth
border-left-width
border-right-width
border-bottomwidth
border-color
Описание
Сокращенный атрибут, который позволяет устанавливать пять отдельных параметров для установки
стиля фона
Устанавливает, будет ли фоновый рисунок прокручиваться вместе с содержимым web-страницы
Цвет фона элемента
Задает фоновый рисунок элемента
Позиция левого верхнего угла фонового рисунка
Повторяемость фонового рисунка по горизонтальной и вертикальной оси.
Устанавливает толщину, цвет и стиль рамки вокруг
элемента
Все четыре параметра устанавливают толщину, цвет
и стиль одной из границ элемента
Определяет цвет одной из границ элемента
Определяет стиль одной из границ элемента
Определяет толщину одной из границ элемента
Цвет всех границ элемента
119
Стиль
border-collapse
border-style
border-width
bottom
caption-side
clear
clip
color
content
cursor
display
filter
float
font
font–family
font–size
font–style
font-variant
font-weight
height
left
letter-spacing
line-height
120
Описание
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для
ячеек установлена рамка, тогда в месте стыка ячеек
получится линия двойной толщины
Стиль всех границ элемента
Толщина всех границ элемента
Для позиционированного элемента определяет положение его нижнего края
Определяет положение заголовка таблицы, который
задается с помощью тэга CAPTION
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами
Определяет видимую область позиционированного
элемента
Цвет переднего плана элемента
Автоматически генерирует контент до или после
селектора стиля при помощи псевдоэлементов after
и before
Изменение вида курсора мыши, когда он находится
на элементе
Многоцелевой атрибут, который определяет должен
ли элемент быть виден в документе
Спецэффекты, применяемые к элементу
Определяет, с какой стороны будет происходить обтекание элемента текстом
Сокращенный атрибут, который позволяет устанавливать несколько параметров шрифта
Определяет семейство шрифтов
Размер шрифта элемента
Определяет, предоставлен ли элемент в нормальном, курсивном или наклонном начертании
Используется для написания капителью
Жирность шрифта
Высота блочных элементов
Для позиционированного элемента определяет положение его левого края
Интервал между буквами внутри элемента
Интерлиньяж (расстояние между линиями строк)
Стиль
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
position
table-layout
text-align
text-decoration
text-indent
text-transform
top
vertical-align
visibility
white-space
width
word-spacing
z-index
Описание
Сокращенный атрибут, который устанавливает вид
списка и его положение
Указывает изображение, которое будет использоваться в качестве маркеров
Определяет, является ли маркер внутри или снаружи текстового блока, содержащего список
Вид маркеров списка
Сокращенный атрибут, который устанавливает отступы от края браузера до границ элемента
Все четыре параметра устанавливают отступ от края
браузера до одной из границ элемента
Управляет обработкой содержания, которое выходит за пределы физического размера элемента
Сокращенный атрибут, который устанавливает отступы от содержимого элемента до его границ
Все четыре параметра устанавливают отступ от содержимого элемента до одной из его границ
Определяет тип позиционирования элемента
Определяет, как браузер должен вычислять высоту
и ширину ячеек таблицы, основываясь на ее содержимом
Выравнивание текста
Дополнительное оформление текста
Отступ первой строки текстового блока
Управляет преобразованием букв в прописные
Для позиционированного элемента определяет положение его верхнего края
Вертикальное выравнивание элемента
Видим элемент на стринице или нет
Устанавливает, как браузер должен обрабатывать
пробелы в тексте
Ширина блока
Устанавливает интервал между словами в тексте
Для позиционированного элемента устанавливает
его порядок относительно других элементов
121
Учебное издание
Курзыбова Яна Владимировна
СРЕДСТВА СОЗДАНИЯ
ДИНАМИЧЕСКИХ WEB-САЙТОВ
ISBN 978-5-9624-0558-2
Редактор Э. А. Невзорова
Дизайн обложки: П. Ершов
Темплан 2011. Поз. 99
Подписано в печать 16.11.11. Формат 60х90 1/16.
Уч.-изд. л. 4,4. Усл. печ. л. 7.1. Тираж 200 экз. Заказ 142.
Издательство ИГУ
664003, Иркутск, бульвар Гагарина, 36
122