Описание HTML, DHTML, CSS, WML,…


Содержание

Динамический HTML. DOM и клиентские скрипты

По мере развития индустрии создания веб-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента дизайнера для создания интерактивных страниц. Эта возможность появилась с внедрением технологии, получившей название Dynamic HTML (DHTML).

Dynamic HTML (DHTML) — это обообщающий термин для набора технологий, используемых совместно для создания интерактивных и анимированных веб-сайтов. Обычно под DHTML подразумевается комбинация из статического языка разметки (HTML), клиентского языка сценариев (JavaScript), языка описания представлений (CSS) и объектной модели документа (DOM). Т.е., DHTML — не особый язык, а совокупность клиентских технологий веб-разработки, которую можно представить в виде такой условной «формулы»:

DHTML = HTML + CSS + DOM + JavaScript.

DHTML представляет клиентским скриптам доступ к переменным в определении языка разметки, изменение которых влияет на внешний вид и поведение изначально статического содержимого веб-страницы. Программное управление контентом становится возможным лишь после того, как веб-страница была полностью загружена в клиентское приложение. В случае DHTML «динамичность» проявляется при просмотре страницы клиентом, а не на этапе генерации уникального содержимого веб-сервером.

О многозначности термина

С другой стороны, «динамическая веб-страница» — более широкое понятие, охватывающее любую веб-страницу, сгенерированную по-разному для каждого пользователя или набора исходных данных. Оно включает и те страницы, что созданы сценариями на стороне клиента, и те, что созданы серверными приложениями (на языках PHP, Perl, JSP, Ruby и проч.), когда веб-сервер генерирует содержимое перед отправкой клиенту.

В теме «Основы HTML» была рассмотрена обобщенная структура гипертекстового документа, которая может быть представлена в виде дерева элементов разметки. Проиллюстрируем сказанное на простом примере веб-страницы, исходный код которой приведен в Листинге 1, а структура — на рис. 1.

Рис. 1. Дерево элементов гипертекста

Архитектура DOM 3

Document Object Model (DOM)

В браузере дерево элементов разметки (рис. 1) преобразуется в структуру данных, подобную приведенной на рис. 2. Это представление основывается на спецификации Объектной Модели Документа (DOM ), разработанной и поддерживаемой W3C (актуальная версия стандарта — DOM Level 3). DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Рис. 2. Представление DOM

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

  • nodeName — имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);
  • localName — локальное имя узла (если не переопределено, то соответствует nodeName);
  • prefix — имя (не адрес) пространства имен, описывающего узел (см. лекцию Расширяемый язык разметки XML);
  • namespaceURI — адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);
  • nodeType — целочисленный идентификатор типа узла (1 — элемент; 3,8 — содержимое, 9 — документ, 10 — тип документа и т.п.);
  • nodeValue — содержимое элемента (непосредственно данные);
  • id — уникальный в пределах документа идентификатор узла;
  • class — имя класса CSS.

Атрибуты тегов в DOM представлены в виде атрибутов же узлов в формате «name=value» (рис. 3).

Рис. 2. Атрибуты узлов

API DOM

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс (API ), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

«Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.» W3C

В этом определении DHTML, данном Консорциумом W3C не указывается, какой именно скриптовый язык должен быть использован в качестве инструмента доступа к DOM при разработке динамических страниц. В общем смысле, для управления поведением веб-страницы может быть использован любой код, который позволяет изменять содержание и внешний вид документа, или иным образом взаимодействовать с пользователем через веб-браузер. Тем не менее, исторически сложилось так, что основным языком разработки динамических страниц стал JavaScript и многое из того, что относится к DHTML вращается вокруг этого скриптового языка. В результате, браузерные плагины для веб-разработки (например, DOM Inspector для FireFox) представляют узлы DOM не иначе, как в виде объектов JavaScript (рис. 4).

Рис. 4. Представление узла DOM в виде объекта JavaScript

Правила CSS

Каждому узлу DOM сопоставлен набор правил CSS, куда входят стили по умолчанию, пользовательские и авторские стили. Исходя из этого набора и с учетом приоритетов для узла формируется вычисленная таблица стилей, которая и используется при его отображении (рис. 3).

Рис. 5. DOM и CSS

Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.

DHTML в действии

После загрузки этой страницы в браузере будет выстроена модель DOM, приведенная на рис. 5а. Однако, после того как пользователь кликнет на тексте, документ изменится и его структура станет такой, как на рис. 5б.

Рис. 5. Изменение DOM после выполнения скрипта

Практическое применение DHTML

Несколько примеров, демонстрирующих некоторые возможности, представляемые DHTML:

Сравнение HTML и XHTML

И HTML , и XHTML — это языки для создания веб-страниц. HTML построен на основе SGML , а XHTML — на основе XML . Они похожи на две стороны одной медали. XHTML был создан из HTML с целью соответствия стандартам XML . Следовательно, XHTML является более строгим по сравнению с HTML и не позволяет отступать от правил написания кода.

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

Сравнительная таблица

HTML XHTML
Определение (из Википедии) HTML или HyperText Markup Language — это основной язык разметки для создания веб-страниц и других документов, которые могут быть просмотрены в браузере. XHTML (Extensible HyperText Markup Language) — это семейство языков XML-разметки, которые продолжают и расширяют Hypertext Markup Language (HTML), на котором написаны веб-страницы.
Расширения файлов .html, .htm. .xhtml, .xht, .xml, .html, .htm.
Формат использования текст/html. приложение/xhtml+xml.
Разработан W3C и WHATWG. World Wide Web Consortium.
Тип формата Формат документов. Язык разметки.
Расширен из SGML. XML, HTML.
Расшифровка Язык разметки гипертекста. Расширяемый язык разметки гипертекста.
Приложение Приложение Standard Generalized Markup Language (SGML). Приложение XML.
Функции Веб-страницы написаны на HTML. Расширенная версия HTML, более строгая, основанная на XML.
Поведение Гибкие фреймворки не требуют анализа синтаксиса HTML. Ограничен правилами XML и требует их соблюдения.
Происхождение Предложен Тимом Бернерсом-Ли в 1987 году. Рекомендация World Wide Web Consortium 2000 года.
Версии HTML 2, HTML 3.2, HTML 4.0, HTML 5. XHTML 1, XHTML 1.1, XHTML 2, XHTML 5.

Обзор HTML и XHTML

HTML является основным языком разметки веб-страниц. Он создает структурированные документы, выделяя в них такие элементы, как заголовки, списки, ссылки, цитаты и т.д. Это позволяет встраивать изображения и объекты для создания интерактивных форм. HTML задается с помощью тегов в угловых скобках — например, . Также в его коде могут содержаться скрипты, написанные на JavaScript .

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

Функции документов HTML и XHTML

Синтаксис HTML состоит из следующих компонентов: открывающий и закрывающий тег, атрибуты элементов ( задаваемые в тегах ), текстовый и графический контент. HTML-элемент — это все, что находится между тегами, включая сами теги.

Документ XHTML содержит только один корневой элемент. Все элементы, включая переменные, должны быть написаны в нижнем регистре, а присвоенные значения — заключены в кавычки, закрыты и вложены. В XHTML это является обязательным требованием — в отличие от HTML . Объявление DOCTYPE XHTML определяет правила для документов, которым необходимо следовать.

Основной синтаксис HTML допускает использование множества сокращений, чего не допускается в XHTML . Например, элементов, для которых необязательно наличие и открывающегося, и закрывающегося тега. XHTML требует, чтобы все элементы имели и открывающийся, и закрывающийся тег. В то же время XHTML вводит новые сокращения: тег XHTML может быть открыт и закрыт с помощью косой черты (
).

Введение такого синтаксиса, который не используется в объявлениях SGML для HTML 4.01 , могло привести к путанице в приложениях на ранних стадиях. Чтобы решить эту проблему, нужно использовать пробел перед закрытием тега:
.

Спецификация XHTML и HTML

HTML и XHTML могут быть задокументированы совместно. И HTML 4.01 , и XHTML 1.0 имеют три подспецификации — строгую, нестрогую и фрэймовую. Отличие документов HTML и XHTML заключается в декларировании документов. Другие отличия синтаксические. HTML допускает отсутствие закрывающегося тега, пустые элементы без закрывающегося тега. Расширяемый язык разметки гипертекста очень строг в отношении открывающихся и закрывающихся тегов XHTML . Он использует встроенный язык определения функционала атрибутов. Все требования к синтаксису XML соблюдаются в XHTML -документе.

Но эти различия проявляются только тогда, когда XHTML -документ используется как приложение XML ; то есть как MIME-типы приложение / XHTML + XML , приложение / XML или текст / XML . Документ XHTML , используемый как MIME-тип текст / HTML должен интерпретироваться как HTML , так что в данном случае применяются правила HTML . CSS , написанный для XHTML , используемого, как MIME-тип текст / HTML , может работать некорректно в документе, который применяется как, как MIME-тип приложение / XHTML + XML . Для получения дополнительной информации о MIME-типах ознакомьтесь с соответствующей документацией.

Это может быть важно, когда вы используете документы XHTML , как текст / HTML . Если не знать о данных различиях, вы можете создать CSS , который не будут работать как ожидается, если документ используется, как XHTML .

Там, где встречаются термины « XHTML » и « XHTML document «, предполагается, что в оставшейся части этого раздела они определяют использование разметки XHTML , как MIME-тип XML . XHTML-разметка , используемая в качестве текста / HTML , является HTML-документом .

Как перейти с HTML на XHTML

В соответствии с рекомендациями W3C для перехода с HTML на XHTML ( документы XHTML 1.0 ) должны быть выполнены следующие шаги:

  • Включите атрибуты xml:lang и lang для элементов, устанавливающих язык;
  • Используйте синтаксис пустого элемента для элементов, указанных в HTML , как пустые;
  • Используйте дополнительный пробел в тегах пустых элементов: ;
  • Используйте закрывающиеся теги для элементов, которые могут содержать контент, но являются пустыми: ;
  • Не включайте объявление XML .

Если следовать рекомендациям W3C по совместимости, то браузер должен уметь интерпретировать документы как HTML , так и XHTML .

Чтобы понять, чем отличается HTML от XHTML , рассмотрим преобразование документа XHTML 1.0 в HTML 4.01 . Для этого необходимо выполнить следующие действия:

  • Язык для элемента должен быть указан с помощью атрибута lang , а не атрибута XHTML xml:lang ;
  • Удалите пространство имен XML ( xmlns=URI ). HTML не имеет средств для работы с пространствами имен;
  • Измените объявление типа документа с XHTML 1.0 на HTML 4.01 ;
  • Удалить объявление XML , если оно присутствует. Как правило, это: ;
  • Убедитесь в том, что для MIME-типа документа задано: text/html . И в HTML , и в XHTML , это задается в HTTP-заголовке Content-Type , отправляемом сервером;
  • Измените синтаксис пустого элемента XML на стиль пустого элемента HTML (с
    на
    ).

Данная публикация представляет собой перевод статьи « HTML vs XHTML » , подготовленной дружной командой проекта Интернет-технологии.ру

Обзор HTML и CSS

HTML (Hyper-Text Markup Language — язык разметки гипертекста) продолжает развиваться. За последние годы в HTML появились два новых элемента: новый язык управления стилем и объектная модель для изменения поведения и повышения динамизма объектов. Динамический HTML в Microsoft Internet Explorer 4.0 заключает в себе не только объектную модель для манипулирования документом, но также многие последние рекомендации из спецификаций HTML, таблиц каскадных стилей CSS (Cascading Style Sheets) и рабочих проектов консорциума W3C (World Wide Web Consortium).

В этой главе рассматриваются некоторые из последних нововведений в HTML и CSS, поддерживаемые Microsoft Internet Explorer 4.0. Комбинация имеющихся возможностей HTML и новых элементов вместе с объектной моделью динамического HTML (Dynamic HTML) позволяют создавать интерактивные Web-страницы и Web-приложения. Данная глава не претендует на полноту описания HTML и CSS — цель заключается в обучении приемам эффективного использования HTML и CSS. Здесь вы познакомитесь с последними достижениями в этой области.

В главе рассмотрены следующие темы:

Новые элементы HTML. В этом разделе дается описание новых элементов, которые будут включены в следующую версию HTML. Следующая версия HTML (HTML 4.0) разрабатывается членами консорциума W3C. Когда вы будете читать эту книгу, спецификация HTML 4.0 уже, наверное, будет принята консорциумом W3C. В данном разделе также рассматриваются элементы HTML, поддерживаемые Internet Explorer 4.0, которые выходят за рамки спецификации HTML 4.0.

Каскадные таблицы стилей (Cascading Style Sheets). Язык SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки) и соответственно язык HTML предназначены для разделения содержания (contents) и представления (presentation). Такое разделение было невозможно до появления CSS, когда в HTML были введены теги, такие как и , для определения режима вывода содержания документа на экран. Эти теги нарушают основы структурного документа, позволяя внедрить презентацию в содержание. В данном разделе дается вводное описание языка CSS и его связей с современными сценариями. CSS служит для статического добавления стиля в документ, но с помощью расширений объектной модели стиль может динамически изменяться. Например, стиль текста может быть изменен в соответствии с параметрами среды пользователя.

Проверка определения типа документа HTML. HTML является структурированным языком с формальным описанием. В данном разделе обсуждается значение определения типа документа (document type definition, DTD), которое устанавливает параметры HTML. DTD HTML является SGML-описанием языка HTML. DTD определяет поддерживаемый набор элементов и их атрибуты, а также определяет возможность наличия в элементе других элементов. К сожалению, большинство Web-страниц нарушают определение типа документа HTML. С помощью добавления объектной модели, которая позволяет использовать сценарии для описания всей страницы, большое значение приобретает обеспечение согласованного и разумного поведения страниц путем создания грамотно структурированных документов. В данном разделе вы изучите приемы чтения DTD и использования определения типа документа для создания действительных HTML-документов.

Новые элементы HTML

Internet Explorer 4.0 обеспечивает полную поддержку HTML 4.0 следующей версии HTML, которая реализована как рекомендация W3C. В данном разделе представлены элементы, которые были недавно введены в HTML 4.0. (Некоторые данные элементы были доступны в Internet Explorer 3.0, но они только теперь включены в рекомендацию W3C.) На момент написания книги в HTML 4.0 были добавлены перечисленные ниже новые элементы:

Элементы Frameset и Iframe

Изменения в формах и облегчение доступа

Изменения в таблицах, которые касаются заголовков, примечаний и столбцов

Элемент Object для внедрения индивидуальных объектов

Элемент Script для внедрения сценариев (скриптов)

Возможности загрузки файлов с целью отправки на сервер

Улучшенный набор именованных компонентов

Элементы Frameset и IFrame, изменения в таблицах и элементы Object и Script поддерживаются, начиная с Internet Explorer 3.0. Internet Explorer 4.0 расширяет их использование, предоставляя поддержку для остальных элементов в данном списке. Информацию об HTML 4.0 и перечисленных элементах можно найти на узле консорциума W3C по адресу www.w3.org и на компании Microsoft по адресу www.microsoft.com. Написание сценариев для новых элементов и их атрибутов обсуждается на протяжении всей книги.

Далее приводится описание синтаксиса HTML для элемента Object, улучшений в формах и доступе и некоторых новых элементов HTML, которые поддерживаются в Internet Explorer 4.0, но выходят за рамки спецификации HTML 4.0.

В главе 2 рассматривается элемент Script, который является главным механизмом внедрения сценариев в документ. Описание элементов Frameset приведено в главе 5.

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

Именованные компоненты состоят из стандартных символов, которые могут быть внедрены в документ с помощью элемента &name;. Например, широко используемым именованным компонентом является неразрываемый пробел ( &nbsр), который помещает пробел, не разрываемый в конце строки в документе.

Внедрение индивидуальных объектов

Элемент Object используется для внедрения индивидуальных объектов в документ HTML. Данный элемент изначально поддерживался в Internet Explorer 3.0. Элемент Object используется для расширения HTML путем внедрения апплетов Java, элементов управления ActiveX и поддерживаемых в Internet Explorer типов MIME. Поддерживаемые типы MIME включают файлы HTML и различные форматы изображений, такие как GIF, JPEG и PNG. Ниже приведен обычный синтаксис элемента Object:

Помимо определения значения тега >CODEBASE с целью указания адреса, с которого должен быть загружен объект. Параметры могут быть определены посредством одного или нескольких элементов Param, находящихся внутри элемента Object.

Единственным действительным содержанием в элементе Object являются элементы Param. Браузеры, которые поддерживают элемент Object, игнорируют все остальные теги HTML в блоке Object. Данный элемент может быть использован для работы с примитивными браузерами, которые не поддер-живают элемент Object, как показано ниже:

Изменения в формах и облегчение доступа

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

Примечание: В данной книге термин внутренние элементы управления (intrinsic elements) используется для обозначения встроенных элементов управления HTML. Внутренние элементы управления включают в себя все элементы, такие как изображение, текст, кнопка и элементы бегущей строки, с которыми непосредственно взаимодействует пользователь при вводе и выводе данных.

Улучшения в формах в HTML 4.0 позволяют добавлять надписи и клавиши доступа, поясняющий текст к элементам, управлять последовательностью переходов, отключать элементы управления и группировать связанные элементы управления. Кроме того. Internet Explorer 4.0 улучшает внутренние элементы форм посредством поддержки таблиц стилей, кнопки по умолчанию и кнопки отмены. Кнопки и текстовые окна могут быть созданы с использованием различных шрифтов и цветов на основе таблиц стилей.

Использование таблиц стилей вводится в разделе «Каскадные таблицы стилей» ниже в данной главе.

Добавление надписей и клавиш доступа

Новый элемент Label представляет собой текстовый контейнер, связывающий текстовое содержание с определенным элементом управления. Надписи для элементов управления представляют собой то же, что и ссылки для закладок: так же как ссылки открывают закладки, так и щелчок кнопкой мыши по надписи отображает связанный элемент управления. Для переключателей и флажков щелчок по надписи также приводит к нажатию связанной кнопки и изменению ее значения.

Так же, как и тег , который определяет ссылки на закладки, тег ссылается на связанный элемент управления, используя атрибут FOR. Атрибут FOR содержит уникальный идентификатор (ID) элемента управления на странице. Приведенный ниже код создает надписи для флажка и текстового окна:

На рис. 1.1 показано, как при установке флажка вокруг надписи отображается пунктирная рамка. Для установки флажка можно также щелкнуть по самой надписи.

Рис. 1.1. Web-страница Label Demonstration

Элемент Label позволяет связывать содержание с элементом управления. Для упрощения доступа к элементу Label в HTML 4.0 имеется атрибут ACCESSKEY. Атрибут ACCESSKEY содержит одиночный символ, который может быть использован как ярлык для ссылки на элемент управления: нажатие клавиши в сочетании с клавишей доступа позволяет обратиться к ярлыку. (Клавиша доступа не чувствительна к регистру.)

Ниже приведен код HTML для создания надписи с клавишей доступа:

Назначение тега в данном примере заключается в использовании глобального стиля, который определяет воспроизведение клавиши доступа в тексте надписи. Microsoft Windows традиционно подчеркивает клавиши доступа. Это может быть выполнено в HTML путем добавления следующего глобального стиля и помещения клавиши доступа в текст надписи с тегами :

Элемент и может быть использован как альтернатива глобального стиля для активизации подчеркивания. Однако этот метод не обеспечивает преимуществ таблиц стилей. Использование глобального стиля упрощает изменение внешнего вида всех клавиш доступа в документе.

Надписи ухудшаются постепенно в браузерах низкого уровня, которые не поддерживают надписи. Тег игнорируется примитивными браузерами, поэтому надпись обрабатывается как простой текст. (Браузеры, понимающие таблицы стилей, подчеркивают букву клавиши доступа). Элемент LABEL существенно улучшает возможности использования и доступа, и рекомендован для применения с элементами управления.

Добавление поясняющего текста в элемент

Все элементы HTML теперь поддерживают атрибут TITLE, служащий для определения поясняющей строки, которая воспроизводится в Internet Explorer 4.0 как всплывающая подсказка (ТооlTiр). Всплывающая подсказка представляет собой небольшое текстовое окно, которое отображается при подведении указателя мыши к элементу. Всплывающая подсказка может быть связана с любым элементом от элемента управления до заголовка. Добавление атрибута TITLE к созданному ранее флажку приводит к отображению всплывающей подсказки при подведении указателя мыши к данному элементу:

На рис. 1.2 показана всплывающая подсказка на Web-странице ТооlTiр Demonstration (Демонстрация подсказки).

Рис. 1.2. Web-страница, демонстрирующая работу всплывающей подсказки

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

Управление последовательностью перехода

Атрибут TABINDEX был добавлен в HTML 4.0 во все внутренние элементы управления в документе. Данный атрибут позволяет Web-мастеру явно определять последовательность перехода (tabbing order). По умолчанию последовательность перехода между элементами на странице соответствует последовательности, в которой элементы определены в источнике HTML. Атрибут TABINDEX позволяет автору управлять последовательностью перехода фокуса между элементами независимо от последовательности в исходном документе. Установка отрицательного значения атрибута TABINDEX в элементе позволяет пропустить элемент в последовательности перехода.

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

Отключение элементов управления

Отключенными элементами управления (disabled controls) называются элементы, которые не могут быть активизированы или содержание которых не может быть изменено. В HTML 4.0 используются два атрибута для запрета редактирования элемента: READONLY и DISABLED. Атрибут DISABLED лишает элемент возможности получения фокуса и участия в событиях. Атрибут DISABLED должен быть использован, когда элемент не применим к текущему контексту. Так, если для получения возможности использования элемента должна быть введена определенная информация, то данный элемент управления может быть отключен до ввода требуемой информации. Для отключения элемента используйте следующий код:

После ввода необходимой информации кнопка Submit Data может быть активизирована с помощью сценария. Примеры динамического манипулирования элементами форм с помощью объектной модели приведены в главе 10.

Атрибут READONLY используется, когда элемент применим к контексту, но установлен запрет на редактирование содержания элемента управления. В отличие от отключенного элемента управления элемент управления только для чтения (read-only control) может получить фокус, и его содержание может быть выделено. Однако содержание данного элемента нельзя изменять. Атрибут READONLY применим только к тем элементам, в которых пользователь может вводить данные. Например, элементы Button недоступны для редактирования, поэтому использование атрибута READONLY для них не требуется.

Элемент управления только для чтения не отличается от доступного для редактирования элемента управления. Отключенный элемент в Windows отображается серым цветом. Приведенный ниже программный код демонстрирует отключение поля E-Mail Address на рис. 1.1.

На рис. 1.3 показано отключенное текстовое окно. С помощью сценария можно активизировать текстовое окно, когда пользователь устанавливает флажок Send Information.

Рис. 1.3. Web-страница с отключенным элементом

Новый элемент Button

В HTML 4.0 введен новый элемент Button, который позволяет отображать разнообразные элементы в виде кнопок. Например, приведенный ниже код элемента Button может быть добавлен в пример Label Demonstration:

Действие кода продемонстрировано на рис. 1.4.

Рис. 1.4. Web-страница демонстрации работы кнопки

Кнопки могут быть созданы с использованием всех возможностей, доступных в HTML и таблицах стилей. Единственным недостатком элемента Button является то, что примитивные браузеры обрабатывают код HTML не как кнопку, а как обычный текст HTML. Поэтому для примитивных браузеров следует определить другую кнопку в элементе Button с помощью тега :

В браузерах, которые поддерживают элемент Button, тег игнорируется, а в браузерах низкого уровня, которые не поддерживают элемент Button, код HTML обрабатывается и отображается кнопка.

Примечание: Данный метод, при использовании которого современные браузеры игнорируют альтернативный код HTML, в действительности создает недействительный документ, поскольку определение типа документа HTML запрещает наличие элементов Input в элементе Button. Однако данный метод продемонстрирован здесь по причине того, что это единственный способ эффективного использования элемента Button в примитивных браузерах, которые не поддерживают тег .

Элемент Fieldset

Элемент Fieldset используется для группирования элементов форм, аналогично использованию тегов

Рис. 1.5. Элемент Fieldset содержит группу связанных элементов управления

На рис. 1.5 показан пример элемента Fieldset.

Элемент Fieldset может содержать одиночную надпись в рамке набора полей. После надписи может быть помещено любое содержание HTML. Набор полей работает хорошо с примитивными браузерами и рекомендован для группирования связанных полей, но для группирования связанного содержания HTML должны быть, тем не менее, использованы теги

Кнопки Default u Cancel

Internet Explorer 4.0 содержит две новых возможности: кнопка Submit теперь может работать как кнопка по умолчанию для формы. Это значит, что кнопка активизируется, когда пользователь нажимает клавишу в любом месте формы. Кнопка Reset функционирует как кнопка Cancel для формы. Это значит, что кнопка активизируется при нажатии пользователем клавиши в форме.

Кнопки Default и Cancel работают в рамках текущей активной формы. Поэтому если документ содержит множество форм, то текущие кнопки Default и Reset зависят от формы, с которой работает пользователь. Кнопки Submit и Reset могут так же работать за пределами формы, как кнопки по умолчанию и отмены, но без установленного поведения по умолчанию. Для определения поведения кнопок за пределами формы необходимы сценарии.

На рис. 1.6 показаны кнопка по умолчанию и кнопка отмены. Кнопки по умолчанию с установленным тегом TYPE=SUBMIT имеют дополнительную рамку.

Рис. 1.6. Кнопка по умолчанию и кнопка отмены

Улучшенный элемент бегущей строки

Элемент Marquee (бегущая строка) не является новым для Internet Explorer 4.0 — данный элемент впервые появился в Internet Explorer 3.0. Однако он уникален для Internet Explorer и не определен в HTML 4.0. В Internet Explorer 4.0 возможности элемента Marquee были расширены для отображения текста HTML и теперь можно прокручивать содержание не только влево и вправо, но также вверх и вниз. Элемент Marquee имеет столько же возможностей, а в некоторых случаях предоставляет даже большее количество возможностей, что и элемент Button, описанный выше. Элементы Marquee могут содержать элементы и даже таблицы, и все обработчики событий для элементов внутри элемента Marquee работают соответствующим образом. Кроме того, элемент Marquee представляет теперь полноценный объект в объектной модели.

В главе 9 приведены примеры использования объекта элемента Marquee. Приведенный ниже код демонстрирует строку, бегущую в направлении снизу вверх:

Связывание данных

В Internet Explorer 4.0 введены возможности связывания страницы HTML с источником данных на сервере и связывания различных HTML-элементов с полями и данными из источника данных. При загрузке страницы данные также отправляются с сервера и асинхронно появляются на странице. На высшем уровне это позволяет создавать Web-страницы типа клиент/сервер, на которых клиент манипулирует всеми данными. Например, поисковая машина может вернуть список узлов, которые клиент может отфильтровать и рассортировать, не связываясь с сервером. Данные мгновенно отобража-ются на странице без перезагрузки.

Связывание данных HTML подробно обсуждается в главе 15.

Каскадные таблицы стилей

Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это язык, который содержит набор свойств для определения внешнего вида документа. Спецификация CSS (CSS1) определяет свойства и описательный язык для установления связи свойств с элементами в документе. Internet Explorer 3.0 обеспечивал начальную поддержку CSS. В Internet Explorer 4.0 поддержка была расширена и улучшена. Понимание таблиц стилей необходимо для добавления динамического стиля страницы. (Динамический стиль (dynamic style) представляет собой модификацию таблицы стилей, связанную с документом посредством сценария).

На узле консорциума W3C (www.w3.org) можно найти последнюю информацию о нововведениях и элементах, поддерживаемых таблицами стилей.

Таблицы стилей представляют собой абстракцию, в которой стиль документа определяется отдельно от содержания или структуры. Существует три метода добавления таблиц стилей в документ, доступных для Web-мастера — в целом, с повышением уровня сложности расширяются предоставляемые возможности с одновременным увеличением степени абстракции. Первый метод заключается в использовании таблицы внутренних стилей (inline style sheet). Внутренние стили (inline styles) определяются непосредственно в элементе. Второй метод заключается в использовании таблицы глобальных стилей (global style sheet) для определения стиля в начале документа. Третий, наиболее абстрактный и мощный метод заключается в использовании таблицы связанных стилей (linked style sheet) для определения стиля отдельно в другом документе.

Внутренние стили мало отличаются от традиционного HTML. При использовании внутренних стилей внешний вид документа трудно изменить. Преимущество данного метода заключается в сокращенном объеме разметки и в том, что HTML может быть более полноценно использован для представления содержимого презентации. Использование таблицы глобальных стилей позволяет более эффективно отделить презентацию от содержимого, а также дает возможность быстрого и независимого изменения стиля и обработки документа. Использование таблицы связанных стилей дает больше преимуществ, представляя содержимое в виде набора страниц или определяя целый Web-узел с помощью одного файла.

Термин cascading (каскадные) в названии CSS указывает на возможность слияния различных таблиц стилей для создания единого определения стиля для элемента или для целого документа. Это позволяет проводить предсказуемое слияние таблицы стилей Web-узла с таблицей стилей документа и даже с внутренним стилем.

Внутренние стили

Внутренний стиль (inline style) является по существу таблицей стилей для одиночного экземпляра элемента и определен в строке начального тега элемента. Таблица внутренних стилей определяется с использованием атрибута STYLE, а данные для атрибута определяются с помощью языка таблицы стилей. Ниже приведен код HTML, который увеличивает содержание параграфа и выравнивает параграф по центру на желтом фоне:

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

Таблицы глобальных стилей

Все параграфы теперь больше и выровнены по центру на желтом фоне.

Атрибут TYPE тега

Селекторы могут быть перечислены через запятую, что позволяет одновременно описать несколько селекторов:

Контекстуальные селекторы определяют иерархию контейнеров, с которой должен быть связан стиль. Иерархия контейнеров определяется порядком элементов в списке через запятую. Например, приведенный ниже оператор определяет правило для всех элементов ЕМ, находящихся в элементе P:

Каждый селектор может ссылаться на теги >ID или тип элемента. Ниже приведена более сложная версия контекстуального селектора:

Все элементы контекстуального селектора являются нечувствительными к регистру — например, .cool это то же самое, что и .сOоL.

Илон Маск рекомендует:  Что такое код asp line

Псевдоклассы

Псевдокласс (pseudo- >Anchor (якорь) представляют собой псевдокласс visited. Активные и не просмотренные ссылки представляют собой псевдоклассы active и link, соответственно.

Псевдокласс в таблице стилей отделяется двоеточием (:):

Во втором примере опущено имя элемента ( A), так как только ссылки имеют псевдокласс link. Псевдокласс может быть использован так же, как класс или указатель >anchor.

Последовательность каскадирования

На одни и те же элементы могут ссылаться несколько селекторов. CSS определяет последовательность каскадирования (cascading order), которая используется для разрешения проблем перекрывания областей действия селекторов и правил. Последовательность каскадирования объединяет все правила, применимые к элементу, путем сортировки на основе их определений. Например, элемент Strong, находящийся в элементе H1, может иметь правила представления, определенные селектором H1, селектором STRONG и контекстуальным селектором для элементов Strong внутри элементов H1. Параметр каскадирования в CSS определяет порядок объединения данных трех правил. В общем, правило для более конкретного контекстуального селектора отбрасывает правило для менее конкретного селектора, а правила, определенные ниже в исходной таблице стилей или документе, имеют более высокий приоритет.

Элементы CSS

В данном разделе представлены примеры некоторых новых элементов CSS, которые поддерживаются в Internet Explorer 4.0. Некоторые из них могут быть использованы для замены широко используемых приемов размещения содержания, в основе которых лежит использование таблиц для выравнивания содержания. Данные элементы преимущественно содержатся в дополнительных рабочих проектах и предложениях и отсутствуют в главной спецификации CSS1.

Выравнивание текста

Internet Explorer 4.0 обеспечивает полную поддержку выравнивания текста по левому и правому краям и по ширине. Выравнивание по ширине является новым в Internet Explorer 4.0 и позволяет выравнивать текст с обеих сторон. Выравнивание задается с помощью свойства text-align в CSS:

Маркированные списки

С помощью свойства list-style можно использовать символы маркера, определенные как файлы GIF, вместо встроенных символов. Символы маркера могут быть определены для списка в целом или индивидуальных элементов списка. Данный метод не работает с браузерами низкого уровня, которые отображает список с использованием стандартных символов маркера. Приведенный ниже код HTML демонстрирует замену стандартного символа маркера:

На рис. 1.7 показан список с использованием индивидуальных символов маркера.

Рис. 1.7. Маркированный список с индивидуальными символами маркера

Создание врезок

Врезки (s >float. Тексту может быть назначен класс с помощью тегов или

Врезок, которые выровнены по левому или правому краю и окружены текстом, подобно рисунку.

Врезки, которые появляются за пределами полей общего документа. Создание данного типа врезок требует манипулирования полями элемента.

Ниже приведен пример создания этих типов врезок:

На рис. 1.8 проиллюстрированы оба типа врезок.

Рис. 1.8. Врезка с текстом вокруг нее и врезка на полях слева

Сравнение свойств visibility и display

Спецификация CSS1 определяет свойство display для удаления элементов из представления документа. Рабочий проект по позиционированию CSS содержит дополнительное свойство visibility, которое позволяет создавать прозрачные элементы в тексте документа. Эти свойства используются для получения различных эффектов при обработке документа. Установка значения h >visibility определяет, что содержание страницы является прозрачным, то есть невидимым. Установка значения none для свойства display приводит к тому, что браузер игнорирует элемент. На рис. 1.9 показано использование свойств visibility и display.

Рис. 1.9. Эффект использования свойств visibility и display

Для правого столбца установлены свойства visibility:h >display:none. Содержание левого столбца отображается полностью. При использовании свойства display:none невидимые элементы не занимают места на экране.

Управление курсором

Свойство cursor в CSS используется для индивидуальной настройки указателя мыши. Это свойство особенно полезно, когда с традиционными текстовыми элементами связан сценарий. Например, использование традиционного I-образного курсора с текстом, когда предполагается, что пользователь должен нажать на кнопку, будет неуместным. В данном случае будет логичным использование стрелки или другого подобного курсора.

В табл. 1.1 перечислены установки для свойства cursor, определенного на данный момент в CSS. Эти курсоры можно найти в примерах для главы 1 на прилагаемом компакт-диске.

Таблица 1.1. Установка свойства cursor

Значение Описание
auto Браузер самостоятельно определяет, каким должен быть отображен курсор на основе текущего контекста
crosshair Простой курсор-крест Обычно стрелка. Независимый от платформы
default Курсор по умолчанию
hand Курсор в виде руки. Используется для представления области на экране, по которой можно щелкнуть мышью
text Обычно 1-образный курсор. Используется для индикации редактируемого текста
help Обычно курсор имеет форму знака вопроса или шара. Указывает на доступность справки для объекта, который находится под курсором
e-resize,
ne-resize,
nw-resize,
n-resize,
se-resize,
sw-resize,
s-resize,
w-resize
Различные курсоры в виде стрелок. Используются для представления операции изменения размера — например, когда пользователь щелкает по рамке окна для изменения размера окна
move Используется для указания, что элемент может быть перемещен
wait Обычно представляет собой песочные часы. Указывает на паузу вследствие занятости программы

Поддержка CSS для внутренних элементов

В Internet Explorer 4.0 текст, кнопка и элементы бегущей строки полностью поддерживают таблицы стилей. Элемент Select имеет ограниченную поддержку таблиц стилей. Для предотвращения проблем с браузерами предшествующих поколений внутренние элементы не наследуют таблицы стилей от родительских элементов. Напротив, правила стилей должны быть связаны с определенными элементами по типу элемента или атрибутам >ID.

Приведенная ниже простая таблица стилей форматирует все элементы Input в классе text как текст зеленого цвета с полужирным начертанием:

Использование атрибута >text. Данный метод требует некоторой избыточности в атрибутах TYPE и > >ID, или типа элемента.

Внедрение индивидуальных шрифтов

До появления Internet Explorer 4.0 Web-мастера должны были использовать встроенные шрифты браузера или использовать шрифты, доступные в системе. Internet Explorer 4.0 предоставляет Web-мастеру возможность указания отображаемых шрифтов, которые загружаются вместе с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксисе CSS. Ниже приведен синтаксис для определения загружаемого шрифта в таблице стилей:

Значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

После определения нового шрифта его имя может быть использовано как действительное для свойства font-family. Свойство font-family может быть связано с равным списком шрифтов, так что если первый в списке шрифт не может быть загружен, то браузер попытается загрузить следующий шрифт или семейство шрифтов. В данном примере последним определенным шрифтом является шрифт sans-serif, что позволяет браузеру использовать любой шрифт семейства sans-serif для воспроизведения элемента.

Пользовательские установки

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

В табл. 1.2 содержится набор новых ключевых слов, определяющих цвет, доступных в Internet Explorer 4.0. (В списке не указаны имеющиеся цвета, которые могут быть определены для любого атрибута цвета CSS). Полный список именованных цветов, а также демонстрационная страница с отображением данных цветов, находятся на прилагаемом компакт-диске.

В табл. 1.3 перечислены ключевые слова шрифтов, которые представляют текущие пользовательские установки системы. Данные значения могут быть использованы только для свойства font и не могут быть использованы со свойством font-family, поскольку свойство font-family автоматически определяется на основе пользовательских установок системы.

Таблица 1.2. Новые ключевые слова цвета в Internet Explorer 4.0

Ключевое слово Описание
activeborder Цвет рамки активного окна
active caption Цвет заголовка активного окна
appworkspace Цвет фона приложений многодокументного интерфейса (multiple document interface, MDI)
background Цвет фона рабочего стола
buttonface Цвет кнопок
buttonhighlight Цвет выделения для кнопок
buttonshadow Цвет тени для кнопок
buttontext Цвет текста на кнопках
captiontext Цвет текста в заголовке, в окне и кнопках стрелок на полосе прокрутки
graytext Цвет серого (отключенного текста). Установлен равным 0, если текущий драйвер дисплея не поддерживает серый цвет
highlight Цвет выбранных пунктов в элементе
highlighttext Цвет текста пунктов, выбранных в элементе
inactiveborder Цвет рамки неактивного окна
inactivecaption Цвет заголовка неактивного окна
inactivecaptiontext Цвет текста в неактивном заголовке
infobackground Цвет текста для всплывающей подсказки
infotext Цвет текста для всплывающей подсказки
menu Цвет фона меню
menutext Цвет текста в меню
scrollbar Цвет фона полосы прокрутки
threeddarkshadow Темный цвет тени для объемных элементов
threedface Цвет объемных элементов
threedhighlight Яркий цвет объемных элементов
threedlightshadow Яркий цвет тени объемных элементов
threedshadow Цвет тени для объемных элементов
window Цвет фона окна
windowframe Цвет фрейма окна
windowtext Цвет текста в окнах

Таблица 1.3. Новые ключевые слова системных шрифтов в Internet Explorer 4.0

Ключевое слово Описание
caption Шрифт, используемый для элементов с заголовками (кнопок, раскрывающихся списков и так далее)
icon Шрифт, используемый для надписей значков
menu Шрифт, используемый в меню
messagebox Шрифт, используемый в диалоговых окнах
smallcaption Шрифт, используемый в надписях для малых элементов
statusbar Шрифт, используемый в строках состояния окон

Позиционирование CSS

Internet Explorer 4.0 также поддерживает новый проект CSS, CSS-P, который предоставляет большие возможности при позиционировании элементов. Совместное использование новых расширений со сценариями позволяет создавать анимированные и движущиеся элементы. Данный элемент предоставляет Web-мастеру осуществлять полный контроль над разметкой страницы и дает возможность управления положением и отношениями между элементами.

В главе 12 приводится описание синтаксиса для позиционирования элементов с помощью CSS, а также поддержки позиционирования элементов с помощью сценариев.

Эффекты фильтров и перехода

Internet Explorer 4.0 также поддерживает набор фильтров и переходов, которые могут быть связаны с HTML-содержанием. Фильтры могут быть непосредственно применены к тексту в документе. Переходы позволяют добавлять в документ или элементы документа такие эффекты, как растворение и скольжение элементов. Например, вы можете сделать текст рельефным или полупрозрачным и сделать так, что страницы будут постепенно исчезать и снова появляться при их открытии. Эти функциональные возможности поддерживаются посредством нового свойства CSS filter.

Проверка определения типа документа HTML

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

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

Для понимания процедуры создания правильного документа HTML необходимо уметь читать определение типа документа (document type definition, DTD). DTD определяет набор действительных элементов, идентифицирует элементы, которые могут находиться в других элементах, и определяет действительные атрибуты для каждого элемента. В данном разделе изложены основные положения DTD, которые необходимы для чтения и анализа определений типов документов. В разделе отсутствуют подробные описания процедуры создания индивидуальных DTD — это тема для отдельной книги.

Определение элемента

Элемент в DTD определяется с помощью ключевого слова ELEMENT. Определение элемента устанавливает, содержит ли элемент другие элементы и необходимость наличия тегов начала и конца. Ниже приведен код HTML, который демонстрирует прототип для определения элемента:

Заменители тегов beginTag и endTag могут быть дефисом (-) или символом O. Дефис указывает, что тег требуется, а символ O определяет, что тег необязателен. Заменитель contentModel может быть равен EMPTY, это значит, что элемент не может содержать другие элементы или может быть спецификацией действительного содержания элемента. Приведенный ниже код определяет элемент Body, в котором теги начала и конца являются необязательными:

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

В приведенном выше определении элемента Body установлено, что элемент может содержать фрагмент %body.content. Символ % в данном определителе указывает, что содержание документа определяется посредством макроса (который называется компонентом в SGML). Определение указывает элементы, которые могут содержаться в элементе Body. Такие макросы полезны, поскольку они допускают повторное использование моделей содержания многочисленными элементами, делая DTD более компактным и простым в использовании. Модели содержания также могут быть определены непосредственно в строке. Например, приведенный ниже код определяет элемент Map, который может содержать только элементы Area.

Набор действительных элементов в модели содержания определяется с помощью языка простых регулярных выражений. Квалификатор * после тега ( AREA) указывает, что в элементе Map может содержаться любое число элементов Area.

Определение атрибутов

Атрибуты определяются аналогично элементам. Списки атрибутов определяются с помощью ключевого слова !ATTLIST. Атрибуты для элемента Body определяются следующим образом:

Первый тег ниже ключевого слова !ATTLIST определяет элемент, после которого указан список связанных с ним атрибутов. Каждый атрибут представляет собой макрос, указывающий на другой список атрибутов или определение типа данных, которое указывает, является ли атрибут необходимым или подразумеваемым. Макрос может быть использован для связи группы атрибутов с элементом или даже для определения типа данных.

Определение компонента

Компонент (entity) представляет собой макрос, который может быть повторно использован в DTD. Ниже показан компонент attrs, используемый элементом Body, вместе с компонентом style. Обратите внимание, что компонент attrs указывает на дополнительные компоненты: style, il8n (интернационализация) и events.

Компонент body.content также определяется с помощью других компонентов:

Данное определение указывает, что тело может содержать любое количество элементов, определенных с помощью компонентов %heading, %text, и %block и любое число элементов Address.

Одним из наиболее сложных элементов в HTML является элемент Table. Ниже приведено определение элемента Table:

Содержание таблицы может начинаться с одиночного необязательного заголовка, после которого указано любое число элементов Col или ColGroup, затем одиночный необязательный элемент Thead и необязательный элемент Tfoot, после которого расположен один или большее число элементов Tbody. Разделитель в виде запятой определяет последовательность элементов. Поэтому если указывается элемент Caption, то он должен быть первым элементом в таблице.

Может показаться странным, что в таблице запрещено помещение элемента TR непосредственно ниже таблицы. Это не означает, что почти все таблицы на Web являются недействительными. Элемент TBody определен с необязательными тегами начала и конца. Поэтому тег TR за пределами THead и TFoot неявно находится в теге TBody. Данное отношение в дальнейшем поддерживается в объектной модели, где элемент TBody всегда синтезируется. Синтезированный элемент в объектной модели представляет элемент, который неявно принадлежит всём документам, независимо от того, определен он явно или нет. Например, считается, что все документы имеют элементы HTML, Head, Body в объектной модели.

Синтезированные элементы в объектной модели подробно обсуждаются в главе 7.

Описание HTML, DHTML, CSS, WML,…

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • HTML, CSS, PHP, JavaScript, SQL – что и зачем?

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!


Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

HTML, CSS, PHP, JavaScript, SQL – что и зачем?

В этом материале я хочу обзорно рассмотреть назначение основных языков программирования и разметки, применяющихся в веб-разработке.

Идея написать эту статью родилась не спонтанно, а под влиянием часто повторяющихся вопросов, которые мне присылают в письмах и задают в службе поддержки.

Это вопросы следующего плана:

— В каком порядке надо изучать языки создания сайтов?
— Что сложнее: JavaScript или PHP?
— Зачем нужен язык SQL?
— Чем отличаются версии CSS друг от друга, и какую из них следует изучать?
— Как работаю динамические сайты?
— Для чего нужен PHP?
и т.д…

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

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

Итак, поехали. Начнем мы с языка HTML.

Расширения файлов: .htm, .html

HTML— это язык разметки гипертекста (от англ. HyperText Markup Language).

Данный язык применяется для создания веб-страниц. Он интерпретируется (обрабатывается) браузером и отображается в виде документа в удобной для человека форме.

HTML – это неотъемлемая составляющая и основа практически любой веб-страницы. Язык HTML в первую очередь выступает как средство логической разметки страницы.

Именно HTML позволяет нам наделять содержимое страницы определенным смыслом, а реализуется это с помощью так называемых тэгов.

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

Скажем, мы можем заключить контент (содержимое) страницы в тэг параграфа, и данное содержимое будет считаться браузером параграфом.

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

Мы можем поместить контент в тэг таблицы, и содержимое в итоговом документе будет отображаться в виде таблицы и т.д.

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

Язык HTML имеет достаточно длительную историю развития, и за это время претерпел значительные изменения. Большая часть изменений связана с добавлением в язык новых тэгов и «выводом из обращения» устаревших. На момент написания этой статьи уже была начата разработка версии HTML 5.1.

Для разных версий HTML предусмотрено разное объявление типа документа. Рассмотрим с вами пару примеров объявления типа HTML 4.01 (на данный момент его можно считать уже устаревшим).

1. Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated):

2. Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML:

3. С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов:

Объявления типов документов, приведенные выше, со временем будут все больше уходить в прошлое, уступая место версии HTML 5.

В HTML 5 используется только один вариант DOCTYPE (тип документа):

Также следует упомянуть о том, что существует еще и язык XHTML. Это расширяемый язык разметки гипертекста (от англ. Extensible Hypertext Markup Language). На данный момент его развитие остановлено и рекомендуется использовать HTML. Новые версии XHTML не выпускаются.

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

Однако такой подход считается неверным и устаревшим, т.к. для задания внешнего вида существует отдельный язык.

На этом с HTML мы завершаем и переходим к языку CSS.

Расширение файлов: .css

CSS – это язык описания внешнего вида документа, написанного с использованием языка разметки. Название произошло от англ. Cascading Style Sheets — каскадные таблицы стилей.

Проще говоря, язык CSS предназначен для того, чтобы придавать необходимый внешний вид HTML-документам.

Придание внешнего вида документам HTML – это хоть и самый популярный, однако лишь частный случай применения языка CSS, т.к. с его помощью можно придавать вид и документам других типов: XHTML, SVG и XUL. Про них мы отдельно говорить не будем, т.к. это выходит за рамки рассматриваемого вопроса.

Итак, целью создания CSS было отделение описания логической структуры веб-страницы от ее внешнего вида. Как вы уже знаете, для описания структуры используется HTML, для описания же того, как эта логическая структура будет выглядеть, отвечает как раз CSS.

Раздельное описание логической структуры и представления документа позволяет более гибко управлять внешним видом документа и минимизировать объем повторяющегося кода, который бы неизбежно возникал при использовании HTML для описания внешнего вида документа.

С помощью CSS веб-разработчик может задавать для страницы и отдельных ее элементов различные гарнитуры и размеры шрифта, цвета элементов, отступы элементов друг от друга, расположение отдельных блоков на странице и т.д.

Разумеется, для того, чтобы использовать CSS для придания внешнего вида HTML-документу, нужно этот документ как-то связать со стилями, т.е. «сообщить» HTML-документу, что он будет оформлен с помощью CSS.

Для этого существуют различные способы подключения CSS к документу, которые дают браузеру знать, что к странице в целом, либо к каким-то отдельным ее элементам должно быть применено стилевое оформление.

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

Важно понимать, что CSS-файл – это обычный текстовый файл. В нем пишутся специальные инструкции, описывающие внешний вид элемента и его позиционирование на странице а также комментарии (произвольные пояснения относительно написанных инструкций).

Стили CSS могут быть подключены к странице (либо внедрены в нее) четырьмя следующими способами:

1. Если таблица стилей находится в отдельном файле, то она подключается к документу с помощью специального тэга link, который должен располагаться в этом документе внутри тэга head:

В атрибуте href при этом указывается путь до подключаемого файла стилей.

2. Второй способ подключения применяется также в том случае, если стили находятся в отдельном файле. При этом используется директива @import, которая должна находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head):

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

3. Третий способ используется в случае, когда стили CSS расположены внутри того документа, к которому они должны применяться. В этом случае стили должны находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head):

В примере выше внутри тэгов style расположен стиль, задающий красный цвет текста для элемента body веб-страницы.

4. Четвертый способ также применяется в случаях, когда таблица стилей описана в самом документе. При этом стилевое оформление задается для какого-то конкретного элемента веб-страницы (тэга) посредством использования его атрибута style.

При этом все CSS-правила, заданные таким образом, будут применяться только к текущему тэгу (элементу веб-страницы).

В примере выше мы задаем размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа.

Подводя итог по способам подключения стилей, можно сказать, что в первых двух случаях к документу применялись внешние таблицы стилей, в то время как в 3 и 4 способах мы имеем дело со встроенными (или внутренним) стилями.

Сами стилевые правила задаются в виде пар «свойство: значение;». При этом применяются эти правила к так называемым селекторам. Скажем, в 3 примере мы имеем дело с селектором элемента (body). В качестве свойства выступает color, а в качестве значения – red.

Всего существует 10 видов селекторов, рассмотрение которых, по понятным причинам, выходит за рамки данного обзора.

Важно, чтобы вы понимали общий принцип.

Селектор определяет один или группу элементов, к которым будут применяться стилевые правила (в нашем случае это все содержимое тэга body)

Свойство можно определить как вид преобразования, которое будет применено к элементу (в нашем случае это color, т.е. цвет текста).

Значение же определяет непосредственно значение определенного вида преобразования (в нашем примере это red, т.е. красный цвет).

В процессе своего развития язык CSS уже прошел достаточно длинный путь, и в настоящее время существует несколько его уровней: CSS1, CSS2, CSS2.1, CSS3. C конца 2011 года разрабатывается уже CSS4.

Смысл разных уровней в том, что происходит исправление существующих ошибок, добавление новых свойств, расширение механизма селекторов и т.д.

Иными словами, каждый следующий уровень является не чем-то обособленным, а логическим развитием и продолжением предыдущего уровня, позволяя более тонко и гибко управлять внешним видом web-страниц.

На этом обзор CSS мы заканчиваем и переходим к следующему звену – языку PHP.

Расширение файлов: .php

Когда вы уже хоть немного разобрались с HTML и CSS, то сразу возникает вопрос: «А что же дальше?». Вы же хотели создавать классные сайты, а с помощью HTML и CSS сделать этого ну никак не получается…

Здесь вам нужен уже язык совершенно другого типа и назначения.

PHP на протяжении многих лет стабильно находится с списке наиболее популярных языков программирования и веб-разработки.

Что же такое PHP?

PHP расшифровывается как Hypertext PreProcessor (что-то вроде «преобработчик HTML»).

Что это означает? Начнем немного издалека: есть два типа языков. Один тип называется «клиентским», а другой — «серверным».

Это значит, что клиентские языки работают в браузере каждого конкретного человека. Типичным представителем клиентских языков является JavaScript, о котором Вы наверняка слышали.

Все действия и команды, которые мы задаем, скажем, на языке JavaScript, выполняются браузером (для упрощения мы не рассматриваем серверный JavaScript).

Это означает, что один и тот же код, написанный нами, обрабатывается в одном случае браузером Internet Explorer, в другом — Firefox, в третьем — Opera, в четвертом — Google Chrome, т.е. тем обозревателем, который использует каждый конкретный человек для просмотра нашей страницы.

Браузер, таким образом, имеет альтернативное название — клиент.

В случае с серверными языками (к которым и относится PHP) мы наблюдаем другую картину.

Наш сайт всегда расположен на каком-либо сервере, т.е. мощном компьютере, специально предназначенном для размещения на нем сайтов многих людей.

Все команды и скрипты, написанные на языке PHP, выполняются именно на сервере, и никак иначе. После того, как PHP-скрипт выполнится на сервере, сервер «отдает» результат своей работы браузеру, который преобразует этот результат в удобный для нас вид.

Здесь важно понимать следующий момент: по исходному коду веб-страницы, который можно посмотреть в любом браузере через опцию вроде «Исходный код страницы» нельзя определить, использовался ли язык PHP для создания данной страницы, или нет.

Невозможно это сделать как раз потому, что PHP-скрипты обрабатываются на сервере, а в браузер передается уже готовый, обработанный вариант. По сути, только HTML-код.

Разница по сравнению с обычными статичными HTML-страницами заключается в одном дополнительном этапе обработки кода.

В случае с HTML-страницей есть только один этап: браузер обрабатывает HTML-код, т.е. разметку страницы в соответствии с определенными правилами, в результате чего мы и видим веб-страницу в нормальном виде.

В случае с PHP-страницей есть два этапа: сначала так называемый PHP-интерпретатор (обработчик) производит выполнение PHP-кода (в результате этого получается простой HTML-код), а после этого уже браузер обрабатывает результат этой обработки, т.е., по сути, выполняется тот самый этап, который является единственным в случае с HTML-страницей.

Вообще PHP прекрасно работает в паре с HTML. Более того, в HTML-код можно делать вставки PHP-кода, а с помощью PHP выводить HTML-разметку.

Важно запомнить следующий простой момент: Не имеет значения, насколько сложен Ваш PHP-код, в конечно итоге «на выходе» он станет обычным HTML.

Для чего использовать PHP?

HTML на 100% статичен. Встраивая же в наши страницы PHP-код, мы можем добиться того, чтобы содержимое одной и той же страницы было различно в зависимости от определенных условий (динамические страницы).

За долгие годы своего существования язык PHP зарекомендовал себя как великолепное решение для создания динамических веб-сайтов.

Что нужно, чтобы начать работать с PHP?

Для полноценной работы с PHP на Вашем компьютере нужны следующие вещи:

1. Веб-сервер Apache (он используется в большинстве случаев);
2. Система Управления Базами Данных (СУБД) MySQL (в базе данных хранится наполнение сайта);
3. Установленный интерпретатор PHP;
4. Текстовый редактор, в котором Вы будете писать код;
5. Браузер.

Теперь чуть подробнее о первых трех пунктах.

1. Веб-сервер предназначен для имитации на Вашем компьютере того самого сервера, на котором потом будет размещаться Ваш сайт уже на хостинге в Интернет. Это нужно для того, чтобы у себя на компьютере Вы могли писать любые PHP-скрипты и смотреть, как они работают, вносить в них изменения и правки. Одним словом, это необходимо для так называемой отладки.

2. СУБД MySQL нужна для хранения информации, которая будет на Вашем сайте. В случае с HTML-страницами все содержимое сайта находится непосредственно в них. Каждая страница содержит определенный объем информации (контента).

При использовании PHP для целей хранения полезного информационного наполнения сайта используется, как правило, база данных. В подавляющем большинстве случаев это MySQL.

3. Интерпретатор PHP — это своеобразная программа, которая осуществляет обработку PHP-кода на веб-сервере. Без него мы никак не сможем выполнить наши PHP-скрипты и увидеть результат их работы.

Для того чтобы сообщить веб-серверу о том, что должна быть произведена обработка PHP-кода, необходимо использовать следующий синтаксис при добавлении PHP в HTML-документ:

В этом случае веб-сервер, дойдя до открывающего тэга PHP ( ) интерпретатор PHP прекращает свою работу.

Вернемся теперь к роли PHP в создании сайтов.

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

На таком сайте нет возможности создать форму обратной связи, комментарии, регистрацию пользователей, поиск и т.д.

Кроме того, у такого сайта не может быть панели управления, из которой мы могли бы добавлять новые страницы, либо редактировать и удалять уже существующие.

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

Все, что мы можем – это вручную открыть отдельную HTML-страницу в редакторе кода и как-то ее модифицировать.

Использование же языка PHP позволяет нам создавать действительно мощные сайты благодаря тому, что мы можем продумывать и реализовывать «поведение» нашего сайта.

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

Возможность задания нужной нам логики «поведения» сайта является одной из важнейших и наиболее ценных в языке PHP.

Наряду с уже озвученными преимуществами следует упомянуть, что PHP предоставляет нам множество инструментов для работы с данными различных типов.

Чаще всего приходится иметь дело с текстовыми данными и данными, представленными в виде массивов. Для облегчения этих задач в PHP предусмотрены многочисленные функции, позволяющие с легкостью манипулировать любой информацией.

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

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

Это такие вещи, как:

— форма обратной связи;
— возможность комментирования;
— регистрация пользователей;
— поиск по сайту;
— запоминание введенной пользователем информации (по принципу «покупательской тележки»); и т.д.

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

Добавление новых материалов, редактирование категорий, модерирование комментариев, изменение пунктов меню сайта, управление настройками – все это и многое-многое другое можно реализовать средствами PHP.

Резюмируя обзор по языку PHP, можно сказать, что следующим шагом после освоения HTML и CSS должно быть изучение языка PHP, т.к. именно он позволит вам перейти на принципиально иной уровень в создании сайтов.

С PHP мы заканчиваем и переходим к еще одному языку – JavaScript.

Расширение файлов: .js

JavaScript – это язык программирования, нашедший наиболее широкое применение в браузерах для придания интерактивности веб-страницам.

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

Илон Маск рекомендует:  Что такое код declare

Основной задачей JavaScript в рассматриваемом нами контексте является манипулирование элементами DOM-модели web-страницы.

Давайте разберемся с тем, что же такое DOM.

DOM – это объектная модель документа (от англ. Document Object Model).

Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

— получение узлов;
— изменение узлов;
— изменение связей между узлами;
— удаление узлов.

Именно эти манипуляции и позволяет нам осуществлять над элементами страницы язык JavaScript.

Для добавления JavaScript-кода на страницу можно использовать тэг script. Его рекомендуется помещать внутри тэга head, хотя это и не обязательно.

Контейнеров script в одном документе может быть сколько угодно. При этом атрибут «type=’text/javascript’» указывать необязательно, т.к. значение javascript является значением по умолчанию.

Ниже приведен пример скрипта, выводящего так называемое модальное окно с классической надписью «Hello, World!» внутри браузера:

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

В примере выше при нажатии на ссылку «Удалить» функция confirm(‘Вы уверены?’); вызывает модальное окно с надписью «Вы уверены?».

При этом при отрицательном ответе (т.е. «нет», если мы не уверены) происходит блокировка перехода по ссылке.

Обратите внимание, что такая практика использования JavaScript не считается хорошей.

Правильным вариантом применения JavaScript был бы такой подход. Сперва мы снабжаем идентификатором ( ) ссылку:

В этом примере мы создаем функцию, срабатывающую при загрузке веб-страницы. Эта функция находит элемент с идентификатором alertLink и отслеживает событие клика по нему (т.е. по ссылке «Удалить»).

По событию клика мы выводим модальное окно с уже знакомым нам сообщением.

Возможно, данный пример покажется вам немного сложным, если вы ничего не знаете о JavaScript, но на данном этапе это не так важно.

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

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

Здесь ситуация очень похожа на ту, что была в случае с CSS, только вместо CSS-кода мы пишем в файле (с расширением .js) JavaScript-код, после чего подключаем его в нужный нам файл в тэге head при помощи конструкции:

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

Итак, можно сказать, что JavaScript – это язык, который позволяет вам активно управлять структурой вашей страницы, манипулировать ее элементами.

На практике это находит свое применение при создании различных анимационных эффектов, эффектов перемещения, растворения, увеличения и уменьшения объектов.

JavaScript применяется для создания различных фотогалерей, так называемых слайдеров или ротаторов контента, суть которых заключается в том, чтобы в определенном ограниченном пространстве происходило чередование различных объектов (например, изображений).

Часто JavaScript используется и для первичной проверки данных, которые пользователь вводит в формы.

Говоря о JavaScript, нельзя не упомянуть о специальных JavaScript-библиотеках (jQuery, Prototype, MooTools и др.)

Смысл JavaScript-библиотек заключается в том, чтобы предоставить кросс-браузерный интерфейс к методам DOM.

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

К тому же библиотеки избавляют веб-разработчиков от необходимости изучать в деталях сам JavaScript, предоставляя ряд удобных в использовании инструментов, позволяющих с легкостью управлять объектной моделью документа.

Резюмируя, можно сказать, что JavaScript может стать «изюминкой» вашего сайта, причем как в плане его украшения, так и в плане дополнительного функционала, который можно обеспечить с помощью данного языка.

С JavaScript у нас все, и мы переходим к последнему языку – SQL

Расширения файлов: .sql

SQL – это информационно-логический язык, предназначенный для описания, изменения и извлечения данных, хранимых в реляционных базах данных.

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

Для чего вообще нужна база данных?

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

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

Базы данных имеют ряд преимуществ по сравнению, например, с хранением текстовой информации в файлах:

1. Высокая скорость получения информации;

2. Они позволяют получать произвольный доступ к данным. (т.е. легко обратиться к какой-то одной, конкретной записи в базе);

3. Из базы данных можно извлекать данные, соответствующие определенным критериям, которые нас интересуют;

4. Применение базы данных позволяет нам не беспокоиться о параллельном доступе к данным. Т.е. для нас в этом случае не важно, что одну и ту же запись одновременно могут затребовать несколько десятков человек.

Если бы мы имели дело с файлами, то нам пришлось бы намного сложнее.

Поэтому, параллельный доступ к данным — одно из важнейших преимуществ баз данных.

Отличие базы данных от СУБД

Важно различать термины «база данных» и «система управления базами данных» (СУБД).

База данных — это информация, которую мы храним и структура этой информации, в то время как СУБД — это программа, которая предоставляет внешним приложениям доступ к базам данных.

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

СУБД же выбирается нами из определенного ограниченного списка (Oracle, MySQL, PostgreSQL и т.д.)

Чаще всего можно встретить связку PHP + MySQL. В большинстве случаев вы также будете работать именно с ней.

Рассмотрим теперь понятие реляционной базы данных.

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

Реляционные базы данных — это базы данных, состоящие из таблиц.

Само же слово «реляционные» происходит от англ. relation — отношение.

Под «отношением» понимается связь между различными таблицами, входящими в базу данных.

Что характерно, таблицы в базе данных — это действительно обычные таблицы, которые по своей сути идентичны любым таблицам, с которыми вы сталкивались в жизни — начиная от таблицы умножения, и заканчивая таблицами в Microsoft Excel.

Таблица имеет некоторое ограниченное количество столбцов (как правило, небольшое) и сколь угодно много строк.

Каким образом можно вставлять новые данные в базу, изменять их, удалять и производить иные манипуляции?

Для этого и существует специальный язык SQL (от англ. Structured query language — язык структурированных запросов).

Т.е. SQL — это универсальный компьютерный язык, разработанный именно для управления реляционными базами данных.

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

Как правило, SQL-запросы передаются в СУБД посредством внешней программы. При этом СУБД выполняет указанный запрос и возвращает в ответ некоторый результат.

Каждая команда SQL — это либо запрос данных из базы, либо обращение к базе данных, которое приводит к изменению данных в базе. В соответствии с тем, какие изменения происходят в базе данных, различают следующие типы запросов:

— запросы на создание или изменение в базе данных новых или существующих объектов (при этом в запросе описывается тип и структура создаваемого или изменяемого объекта);
— запросы на получение данных;
— запросы на добавление новых данных (записей)
— запросы на удаление данных;
— обращения к СУБД.

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

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

Именно поэтому во многих инструментах веб-разработки (к примеру, во фреймворке CodeIgniter) взаимодействие сайта с базой данных реализовано с помощью своеобразной «надстройки», которая позволяет выполнять с ней все необходимые действия, не изучая при этом сам язык SQL.

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

Ну что ж, давайте подведем небольшой итог этого обзора.

Фундаментом веб-разработки был и остается язык HTML. Без него все остальное практически лишено смысла, ведь именно HTML-разметка преобразуется браузером в ту итоговую картину, что мы видим на экране монитора.

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

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

JavaScript выступает в качестве важного, но не всегда обязательного дополнения. Он способен существенно повысить удобство использования вашего сайта и его интерактивность, добавить в него определенную «изюминку».

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

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

С уважением, Дмитрий Науменко.

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

html и css

Я думаю уже ни для кого не секрет, что основами создания сайта являются знания таких элементарных языков как html и css, но как известно, чтобы что либо изучать нужно хотя бы иметь общее представление об этом, понимать суть, именно об этом далее и будет рассказано.

Что такое html

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

Язык HTML придуман уже достаточно давно, его первая версия появилась примерно с 1986-1991 год, тогда этот язык был придуман для обмена научной и технической документацией, он содержал в себе не так уж и много дескрипторов, которые так же называются тегами. Благодаря этому несложному языку можно было делать хорошо структурированные и красиво отображающиеся документы.

Интернет развивался и развивался язык, усложняясь и приобретая все новые возможности. На данный момент самая последняя версия языка это HTML 5 хотя официально она ещё не законченная, но все же уже повсеместно используется и поддерживается всеми современными браузерами.

На самом деле язык html достаточно простой, и не стоит его бояться думая, что не каждый сможет понять или нечто подобное, все достаточно просто, и я на личном опыте в этом не раз убедился. Достаточно сделать хотя бы один сайт по четким инструкциям и вы все поймете и почувствуете как все доступно. Рекомендую изучать HTML5 так как он является на данный момент самым современным и его возможности намного шире чем у предыдущих версий, собственно все мои дальнейшие уроки будут именно на нем.

Что такое CSS

CSS – это каскадные таблицы стилей, это язык который направлен на описание внешнего вида документа, написанного на языке гипертекстовой разметки то есть html. По сути, это язык стилей, который имеет огромные возможности в плане формирования внешнего вида страниц. Так же этот язык непосредственно используется при верстке сайтов.

Основной задачей при разработке данного языка являлась разделение описания логической структуры, от описания внешнего вида этой страницы. Смысл тут в том, чтобы язык html не имел лишних дополнительных параметров и атрибутов, а являлся лишь для разметки, а вот все свойства и настройки всех тегов и элементов дизайна были выделены в отдельную таблицу стилей, что собственно у них и получилось.

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

Данный язык, так же как и html достаточно несложный и с его освоением я думаю, ни у кого не возникнет проблем.

Почему HTML и CSS вместе?

На самом деле ответ достаточно прост, потому, что по-другому никак.

Во-первых, язык CSS без языка html просто не может существовать как самостоятельный язык, так как он и был создан в помощь html.

Во-вторых, если в старых версиях языка html еще можно было обойтись без css, то на данный момент просто ни как.

Они как одно целое, которое уже не разделишь, и вместе они создают одно целое которое на данный момент, уже содержит огромный функционал, не требующий подключения многих дополнительных языков типа Java. Поэтому и нет никакого смысла изучать их по отдельности, намного лучше научиться делать сайты комплексно изучая их вместе, это намного проще и эффективнее, что проверено опытом.

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

Дата публикации:2014-03-23

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Описание HTML, DHTML, CSS, WML,…

CSS — C ascading S tyle S heets (ЛБУЛБДОЩЕ ФБВМЙГЩ УФЙМЕК) — ЬФП УТЕДУФЧП, РПЪЧПМСАЭЙЕ ЪБДБЧБФШ ТБЪМЙЮОЩЕ УЧПКУФЧБ оБРТЙНЕТ, НПЦОП ХЛБЪБФШ ЛБЛ ДПМЦЕО ЧЩЗМСДЕФШ ЛПОЛТЕФОЩК БВЪБГ P :

л ЬФПНХ БВЪБГХ РТЙНЕОЕОП УФЙМЕЧПЕ ПРТЕДЕМЕОЙЕ.

чПФ ЮФП ОБРЙУБОП ДМС ЬФПЗП БВЪБГБ Ч HTML-ЛПДБИ:

уФЙМШ ЪБДБЕФУС БФТЙВХФПН style . вТБХЪЕТХ ДБОП ХЛБЪБОЙЕ ЧЩЧЕУФЙ БВЪБГ ЪЕМЕОЩНЙ ВХЛЧБНЙ ТБЪНЕТПН Ч уФЙМЕЧЩЕ ПРТЕДЕМЕОЙС ЪБДБАФУС РТЙ РПНПЭЙ ХЛБЪБОЙК

хЛБЪБОЙС ПФДЕМСАФУС ДТХЗ ПФ ДТХЗБ УЙНЧПМПН “;”.

бФТЙВХФ style НПЦОП ЙУРПМШЪПЧБФШ РТБЛФЙЮЕУЛЙ Ч ЛБЦДПН ФЕЗЕ, ЪБДБЧБС ЕЗП УРЕГЙЖЙЮЕУЛЙЕ УЧПКУФЧБ. рПУНПФТЙФЕ ЕЭЕ ПДЙО РТЙНЕТ ЧОЕДТЕОЙС УФЙМЕК Ч ФЕЗЙ

уФЙМШ ДМС ПФДЕМШОПЗП HTML-ЖБКМБ

нПЦОП ЪБДБЧБФШ УФЙМШ ДМС ФЕЗБ ЙМЙ ЗТХРРЩ ФЕЗПЧ ФБЛ, ЮФПВЩ ПРТЕДЕМЕОЙЕ ТБВПФБМП ОБ РТПФСЦЕОЙЙ ЧУЕЗП оБРТЙНЕТ, НПЦОП ХЛБЪБФШ ЧЙД ЧУЕИ ЪБЗПМПЧЛПЧ. дМС ЬФПЗП ДПУФБФПЮОП ОБРЙУБФШ ПРТЕДЕМЕОЙЕ Ч ЗПМПЧОПК ЮБУФЙ ДПЛХНЕОФБ:

вТБХЪЕТ ПФПВТБЦБЕФ ЪБЗПМПЧЛЙ Ч ЬФПН ДПЛХНЕОФЕ ТХВМЕОЩН ЫТЙЖФПН ГЧЕФБ “maroon” Й ЧЩТБЧОЙЧБЕФ ЙИ РП РТБЧПНХ ЛТБА ЬЛТБОБ. фБЛПЕ РПЧЕДЕОЙЕ ВТБХЪЕТБ УППФЧЕФУФЧХЕФ ЙОУФТХЛГЙЙ:

уФЙМЕЧЩЕ ПРТЕДЕМЕОЙС ( УЕМЕЛФПТЩ ) ТБУРПМБЗБАФУС ЧОХФТЙ ФЕЗПЧ “ЪБРБЛПЧБООЩЕ” Ч HTML-ЛПННЕОФБТЙЙ (ДМС ВТБХЪЕТПЧ, ЛПФПТЩЕ ОЕ РПДДЕТЦЙЧБАФ CSS).

CФЙМЕЧПЕ ПРТЕДЕМЕОЙЕ ЙНЕЕФ ЧЙД:

ч РТЙЧЕДЕООПН ЧЩЫЕ РТЙНЕТЕ ЙУРПМШЪПЧБОЩ ФТЙ ИБТБЛФЕТЙУФЙЛЙ:

text-align:right;
ЪБДБЕФ ЧЩТБЧОЙЧБОЙЕ РП МЕЧПНХ ЛТБА
color:maroon;
ЪБДБЕФ ГЧЕФ “maroon”
font-family:»Arial Cyr»,Geneva,Helvetica,sans-serif;
ЪБДБЕФ ТХВМЕООЩК ЫТЙЖФ

ъБЗПМПЧЛЙ ВХДХФ ЧЩЧПДЙФШУС ЫТЙЖФПН “Arial Cyr”, ЕУМЙ, ЛПОЕЮОП, ЬФПФ ЫТЙЖФ ЕУФШ ОБ ЛПНРШАФЕТЕ РПМШЪПЧБФЕМС. еУМЙ ЫТЙЖФБ ОЕФ, ВТБХЪЕТ РПУМЕДПЧБФЕМШОП ЙЭЕФ ЫТЙЖФЩ “Geneva”, “Helvetica” ЙМЙ, Ч ЛПОГЕ ЛПОГПЧ, ЛБЛПК-ОЙВХДШ ТХВМЕОЩК ЫТЙЖФ (ХЛБЪБОЙЕ “sans-serif”). ч УМХЮБЕ РПМОПК ОЕХДБЮЙ ВТБХЪЕТ ЧЩЧЕДЕФ ФЕЛУФ ЫТЙЖФПН РП-ХНПМЮБОЙА, ФП ЕУФШ, ЛБЛ РТБЧЙМП, ЫТЙЖФПН “Times New Roman”.

уФЙМШ ДМС ОЕУЛПМШЛЙИ HTML-ЖБКМПЧ

пВЩЮОПК РТБЛФЙЛПК СЧМСЕФУС ХЛБЪБОЙЕ УФЙМЕК Ч ПФДЕМШОПН ЖБКМЕ. дМС ФБЛЙИ ЖБКМПЧ ЙУРПМШЪХАФ ТБУЫЙТЕОЙЕ css . оБРТЙНЕТ, НПЦОП Ч ЖБКМЕ style.css ЪБРЙУБФШ:

дМС РПДЛМАЮЕОЙС ЬФЙИ ХЛБЪБОЙК Ч ТБЪДЕМЕ HEAD >. HEAD > ОХЦОП РПНЕУФЙФШ УУЩМЛХ:

рПОСФОП, ЮФП ФБЛПК УРПУПВ ТБУРПМПЦЕОЙС УФЙМЕЧЩИ ПРТЕДЕМЕОЙК ПЮЕОШ ХДПВЕО. оБ ПДЙО Й ФПФ ЦЕ УФЙМЕЧПК ЖБКМ НПЗХФ УУЩМБФШУС НОПЗП йЪНЕОЕОЙС Ч ЬФПН ЕДЙОУФЧЕООПН ЖБКМЕ УЛБЦХФУС ОБ ЧОЕЫОЕН ЧЙДЕ ДЕУСФЛБ (Б ФП Й УПФОЙ) ДПЛХНЕОФПЧ.

пВТБФЙФЕ ЧОЙНБОЙЕ ОБ УФЙМЕЧПЕ ХЛБЪБОЙЕ пОП ЪБДБЕФ ПФУФХР УМЕЧБ Ч 40 РЙЛУЕМПЧ ДМС ЧУЕЗП ДПЛХНЕОФБ Ч ГЕМПН. ч УЙМХ ФБЛПЗП ПРТЕДЕМЕОЙС ЧЙЪХБМШОЩЕ ЬМЕНЕОФЩ УФТБОЙГЩ ОЕ ВХДХФ “ОБРПМЪБФШ” ОБ ЧЕТФЙЛБМШОХА РПМПУХ УМЕЧБ УФТБОЙГЩ. лБЛ ЧЙДЙФЕ, ДМС ЪБДБОЙС УФТБОЙЮОПЗП ПФУФХРБ НПЦОП ПВПКФЙУШ ВЕЪ ФБВМЙГ Й “ТБУРПТПЛ” П ЛПФПТЩИ ЗПЧПТЙМПУШ Ч ЛОЙЗЕ “HTML-ЛПОУФТХЙТПЧБОЙЕ-1”.

лПНВЙОЙТПЧБОЙЕ УФЙМЕК

вЩМП РПЛБЪБОП ФТЙ УРПУПВБ ЧОЕДТЕОЙС УФЙМЕЧЩИ ХЛБЪБОЙК Ч

  • ОБ ХТПЧОЕ ПФДЕМШОПЗП ФЕЗБ
  • ОБ ХТПЧОЕ ПДОПЗП HTML-ЖБКМБ
  • ОБ ХТПЧОЕ ОЕУЛПМШЛЙИ HTML-ЖБКМПЧ

б ЮФП ЕУМЙ ОБЮБФШ ЛПНВЙОЙТПЧБФШ ЬФЙ УРПУПВЩ? лБЛПК ЙЪ ОЙИ ПЛБЦЕФУС УБНЩН “УЙМШОЩН” ДМС ЛПОЛТЕФОПЗП ФЕЗБ?

рТПДЕМБКФЕ УЕТЙА ПРЩФПЧ.

дПЛХНЕОФ ВЕЪ CSS-ХЛБЪБОЙК

CSS-ХЛБЪБОЙС Ч ПФДЕМШОПН ФЕЗЕ

CSS-ХЛБЪБОЙС Ч HEAD

CSS-ХЛБЪБОЙС Ч css-ЖБКМЕ

CSS-ХЛБЪБОЙС Ч css-ЖБКМЕ


    рПУМЕ ЧОЙНБФЕМШОПЗП ЙЪХЮЕОЙС ЙУИПДОЩИ ФЕЛУФПЧ РТЙЧЕДЕООЩИ ЧЩЫЕ РТЙНЕТПЧ ПФЧЕФШФЕ ОБ УМЕДХАЭЙЕ ЧПРТПУЩ:


    лБЛПЕ CSS-ХЛБЪБОЙЕ ЗМБЧОЕЕ: ПРЙУБООПЕ Ч ПФДЕМШОПН ФЕЗЕ ЙМЙ ТБЪНЕЭЕООПЕ Ч

лБЛПЕ ХЛБЪБОЙЕ ЗМБЧОЕЕ: ПРЙУБООПЕ Ч ЙМЙ ТБЪНЕЭЕООПЕ Ч ПФДЕМШОПН Й УЧСЪБООПЕ У ДПЛХНЕОФПН РТЙ РПНПЭЙ ФЕЗБ LINK , РПНЕЭЕООПЗП Ч ъБЧЙУЙФ МЙ ТЕЪХМШФБФ ПФ РПТСДЛБ УМЕДПЧБОЙС ЬФЙИ РТЕДРЙУБОЙК?

йУРПМШЪХС УФЙМЙ, РПУФТПКФЕ ДПЛХНЕОФ Ч ЛПФПТПН:


    пУОПЧОЩЕ ГЧЕФБ: ЮЕТОЩК ФЕЛУФ ОБ ВЕМПН ЖПОЕ.

пФУФХР ЧУЕИ ЬМЕНЕОФПЧ ОБ УФТБОЙГЕ УМЕЧБ Й УРТБЧБ ТБЧЕО РП 2 УН.

бВЪБГЩ ЧЩТБЧОЙЧБАФУС УРТБЧБ.

ъБЗПМПЧЛЙ ЧЩТБЧОЙЧБАФУС УРТБЧБ Й ЪБРЙУЩЧБАФУС ТХВМЕОЩН ЫТЙЖФПН ЛТБУОПЗП ГЧЕФБ.

фЕТНЙОЩ, ЧЩДЕМСЕНЩЕ ЛХТУЙЧПН, ЪБРЙУЩЧБАФУС ЪЕМЕОЩН ГЧЕФПН.


ъБ ЮФП НЩ МАВЙН CSS

йУРПМШЪХС CSS НПЦОП:


    ъБДБЧБФШ РПМС, ПФУФХРЩ, ТБЪНЕТ Й ФЙР ЫТЙЖФБ, ГЧЕФБ ФЕЛУФБ Й ЖПОБ ДМС ПФДЕМШОЩИ ЬМЕНЕОФПЧ УФТБОЙГЩ (БВЪБГЕЧ, УМПЧ, ВХЛЧ), ПЖПТНМСФШ ЛТБУОЩЕ УФТПЛЙ, ВХЛЧЙГЩ. ч CSS РТЕДУФБЧМЕО ТСД УЧПКУФЧ, У РПНПЭША ЛПФПТЩИ НПЦОП УПЪДБЧБФШ ЧЩРБДБАЭЙЕ НЕОА, ОБЛМБДЩЧБФШ ПДЙО ЬМЕНЕОФ ОБ ДТХЗПК, ЪБУФБЧМСФШ ФЕЛУФ ПФВТБУЩЧБФШ ФЕОШ, РТПСЧМСФШУС Ч ТЕОФЗЕОПЧУЛЙИ МХЮБИ Й ЙУРПМШЪПЧБФШ ДТХЗЙЕ ЬЖЖЕЛФЩ. нПЦОП ЧЩЧПДЙФШ ЬМЕНЕОФЩ ОБ ЬЛТБО ВТБХЪЕТБ У ФПЮОПУФША ДП ПДОПЗП РЙЛУЕМБ, ДЙОБНЙЮЕУЛЙ РЕТЕНЕЭБФШ ЙИ РП ЬЛТБОХ Ч ТБЪОЩИ УМПСИ (ПДОЙ ЬМЕНЕОФЩ ВХДХФ РТПИПДЙФШ ОБД ЙМЙ РПД ДТХЗЙНЙ). йОЩНЙ УМПЧБНЙ, CSS ЧНЕУФЕ У JavaScript РПЪЧПМСЕФ НПОФЙТПЧБФШ ОБ ЬЛТБОЕ ВТБХЪЕТБ РТЙМПЦЕОЙЕ, РТБЛФЙЮЕУЛЙ ОЙЮЕН ОЕ ПФМЙЮБАЭЕЕУС ПФ ЛПНРШАФЕТОПК РТПЗТБННЩ, ОБРЙУБООПК ОБ РТПЖЕУУЙПОБМШОПН СЪЩЛЕ РТПЗТБННЙТПЧБОЙС, ФБЛПН, ЛБЛ уЙ, ОБРТЙНЕТ.

йЪНЕОСФШ ПЖПТНМЕОЙЕ ГЕМПЗП УБКФБ, УПУФПСЭЕЗП ЙЪ УПФЕО ЖБКМПЧ ОЕ РТЙЛБУБСУШ Л ТЕДБЛФЙТХС ЧУЕЗП МЙЫШ ПДЙО

хНЕОШЫБФШ ЛПМЙЮЕУФЧП ФЕЗПЧ Ч ПФДЕМСС ЙОЖПТНБГЙПООПЕ ОБРПМОЕОЙЕ ПФ ЕЗП ЧОЕЫОЕЗП РТЕДУФБЧМЕОЙС ОБ ЬЛТБОЕ ВТБХЪЕТБ.

пГЕОЙФЕ ЧПЪНПЦОПУФЙ CSS, РПТБВПФБЧ УП УМЕДХАЭЙНЙ РТЙМПЦЕОЙСНЙ:

Введение в CSS, встраивание в HTML

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-тегам.

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила : значение правила). Никаких кавычек в значениях правил не ставим! Пример:

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

  • Вложение(inline).
  • Встраивание(embeding).
  • Связывание(linking).

Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила : значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “< >”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

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

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение .css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel ( rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.

Динамический HTML

Динамический HTML (Dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым.

Реализация DHTML покоится на трех «китах»: непосредственно HTML, каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model — DOM), являющейся, по сути, интерфейсом прикладного программирования (API). DOM связывает воедино три перечисленных компонента, придавая простому документу HTML новое качество, — возможность динамического изменения своего содержимого без перезагрузки страницы. Символически подобное единство показано на рис. 10.1.

Рис. 10.1. Компоненты динамического HTML

Каскадные таблицы стилей можно сравнить со стилевыми файлами любого текстового редактора. С их помощью определяется внешний вид отображаемого HTML-документа: цвет шрифта и фона документа, сам шрифт, разбивка текста и многое другое. Для каждого элемента, задаваемого определенным тэгом HTML, можно определить свой стиль отображения в окне браузера. Например, заголовки первого уровня будут отображаться шрифтом Arial I6pt синего цвета, заголовки второго уровня — Arial 14pt красного цвета, основной текст — Times New Roman 10pt черного цвета с одинарным интервалом между строками. Можно создать таблицу стилей и использовать ее для всех документов, расположенных на сервере, что придаст стройность и строгость всему Web-сайту.

Объектная модель документа делает все элементы страницы программируемыми объектами. С ее помощью через языки сценариев можно получить доступ и управлять всем, что есть в документе. Каждый элемент HTML доступен как индивидуальный объект, а это означает, что можно изменять значение любого параметра любого тега HTML-страницы, и, как следствие, документ действительно становится динамическим. Любое действие пользователя (щелчок кнопкой мыши, перемещение мыши в окне браузера или нажатие клавиши клавиатуры) объектной моделью документа трактуется как событие, которое может быть перехвачено и обработано процедурой сценария.

DHTML достаточно новая технология, и не все браузеры поддерживают объектную модель документа и каскадные таблицы стилей. Однако DHTML использует стандартные теги HTML, и поэтому пользователи браузеров, не поддерживающих DOM, практически увидят все, что задумано разработчиком динамической страницы, но только в статическом виде.

Есть еще одна «неприятность», связанная с тем, что разные фирмы-разработчики браузеров могут реализовывать собственную объектную модель документов, как это произошло с двумя популярными браузерами Internet Explorer и Netscape Navigator. Поэтому разработчикам динамических страниц приходится, в конечном счете, писать два варианта своих приложений, чтобы пользователи указанных браузеров могли правильно просматривать их страницы.

В данной главе описываются каскадные таблицы стилей, объектные модели документов браузеров Internet Explorer и Netscape Navigator и приемы создания динамических HTML-страниц.

Каскадные таблицы стилей впервые были реализованы в Internet Explorer 3.0, но информация о них в то время была большей частью противоречивой. При реализации Internet Explorer 4.0 были приняты во внимание рекомендации REC-CSS1 Консорциума W3 относительно каскадных таблиц стилей, датированные 17 декабря 1996 года. К настоящему времени они пересмотрены и известны как рекомендации по каскадным таблицам стилей, уровень 1, документ REC-CSS1-19990111 от 11 января 1999 года. В мае 1998 года Консорциум издал рекомендации по каскадным таблицам стилей, уровень 2, документ REC-CSS2-19980512, часть из которых реализована в Internet Explorer 4.01. В соответствии с этими рекомендациями и будет вестись описание каскадных таблиц стилей.

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

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

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

Почему в название таблиц стилей включено определение «каскадные»? Дело в том, что рекомендации Консорциума W3 позволяют использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким «каскадом», по которому и «прокатывается» документ. Правила приоритетности и разрешения возникающих конфликтов описаны ниже в данном разделе.

Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице следует задать правило:

Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тег HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент HI, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий

(значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение I6pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;), как это демонстрируется в приведенном примере.

Созданная только что таблица стилей влияет на форматирование элемента определенного типа: заголовок первого уровня. Ее комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера.

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

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

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.

Существует четыре способа связывания документа и таблицы стилей:

1. Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.

2. Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе.

3. импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере.

4. Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы.

Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега
, задаваемого в разделе

Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS.

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

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

Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тег комментария .

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

А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра CLASS является ссылка на класс, задаваемый в таблице стилей.

Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:

В тексте документа ссылка на соответствующий класс задается в параметре CLASS :

Kpac ный шрифт на синем фоне

И мя класса в параметре >

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

Теперь два класса red и blueBgrd можно применять к любым элементам документа:

Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне.

Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.

Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:

STYLE TYPE=» text/ess» > —

Разреженные слова в абзаце

В этом примере абзац идентифицирован именем раг24 в параметре ID, поэтому к нему применимо правило с селектором #раг24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.

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

При разработке страниц HTML часто приходится одни элементы вкладывать в другие, например, выделять слова тэгом в каком-нибудь абзаце, задаваемом тэгом

. В этом случае говорят, что элемент P порождает элемент ЕМ и является его предком, а сам элемент ЕМ является потомком элемента P. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:

Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило:

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

Таким образом, правила с контекстными селекторами задают исключения из общих правил форматирования элементов документа, определенных с простыми селекторами.

Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.

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

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

В браузерах Internet Explorer и Netscape Navigator реализованы только псевдоклассы для элементов связей А. Псевдоэлементы в них не используются вообще.

Связь в документе HTML определяется тэгом с параметром HREF. Обычно браузеры отображают посещенные связи отлично от непосещенных (например, разными цветами). Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента А:

A:link < color: red >/* непосещенная связь */

A:visited < color: blue >/* посещенная связь */

A:active < color: green >/* активная связь */

A:hover < color: lime >/* связь, на которой расположен курсор мыши */

Любую связь в документе можно отнести к одному из перечисленных классов. Активная связь — это связь, которая выбрана в данный момент.

Комментарии в каскадных таблицах стилей задаются аналогично комментариям в языке С: текст, заключенный между символами /* и */, является комментарием.

Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.

В приведенном примере задается отображение непосещенных связей красным цветом, посещенных — синим, активных — зеленым. Если курсор мыши будет расположен над связью, то ее цвет изменится на ярко-зеленый.

Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.

Так как псевдоклассы применяются к единственному типу элементов А, то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:

A:link < color: red >/* непосещенная связь */

:link < color: red >/* непосещенная связь */

К одному документу можно присоединить несколько таблиц стилей, которые одновременно будут влиять на представление документа в окне браузера. Этот принцип является основополагающим принципом применения каскадных таблиц стилей, и можно указать на две причины, по которым он рекомендован группой разработчиков Консорциума W3:

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

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

Но как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, — какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют каскад, по которому документ «прокатывается» и постепенно форматируется на основе правил таблиц стилей, образующих каскад.

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

Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес. импортируемые таблицы стилей сами могут импортировать и перекрывать другие таблицы.

Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей. Обычно все операторы @import задаются в таблице стилей до определений правил, а это как раз и показывает, что правила самой таблицы перекрывают правила импортируемых таблиц.

Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:

Hi (color: red ! important; background: white ! important>

В приведенном примере оба свойства имеют увеличенный вес.

Правило читателя со значением important перекрывает аналогичное правило автора, заданное без увеличения веса. Авторское правило со значением important перекрывает аналогичное правило читателя с увеличенным весом.

Разрешение конфликтов осуществляется на основе внутреннего механизма, реализованного в каскадных таблицах стилей. Для определения значения комбинации элемент-свойство используется следующий механизм:

1. ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.

2. Определения сортируются по явно заданным весам: определения со значением important имеют больший вес по сравнению с нормальным (без увеличения веса) определением.

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

4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество параметров ID (а), параметров CLASS (b) и названий тегов (с) в селекторе. Составляется число abc, которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:

LI <. >/* а=0 b=0 с=1 специфичность = 1 */

UL LI <. >/* а=0 b=0 с=2 специфичность = 2 */

UL OL LI <. >/* а=0 b=0 с=3 специфичность = 3 */

LI.red <. >/*а=0 b=1 с=1 специфичность = 11 */

UL OL LI.red <. >/*а=0 b=1 с=3 специфичность = 13 */

#х34у <. >/* а=1 b=0 с=0 специфичность = 100 */

Псевдоклассы и псевдоэлементы считаются как нормальные элементы и классы, соответственно.

5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.

При определенном навыке применение алгоритма приоритетности правил не представляет труда. Для новичков можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с параметром CLASS в качестве селектора, правило с параметром ID в качестве селектора, встроенное в тег HTML правило. Для начальных разработок таблиц стилей этих правил вполне достаточно.

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

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

Рис. 10.2. Блоковая модель форматирования абзаца

Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для абзаца это элемент BODY). Отступ всегда имеет цвет фона самого элемента.

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

С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.

Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).

Элементы co значением свойства display ра вным block или list-item, а также элементы со значением свойства float, отличным от none (не «плавающие» элементы), являются блоковыми элементами. их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рис. 10.3 показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.

Рис. 10.3. Параметры форматирования блоковых элементов

Параметры «верх» (top) и «низ» (bottom) не применяются к блоковым элементам, они существуют только для встроенных (inline) элементов, речь о которых пойдет ниже.

Ширина (width) элемента — это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента — расстояние между внутренним верхом и низом.

При вертикальном форматировании блоковых, не «плавающих» элементов значения параметров «верхнее поле» и «нижнее поле» определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов LI списка UL или OL.

Горизонтальное форматирование элемента определяется значениями семи свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина (w >отступ (padding-right), правая граница (border-right) и правое поле (margin-right). Сумма значений этих семи параметров всегда равняется ширине элемента-родителя или ширине окна браузера, если элемент не вложен в другой элемент.

По умолчание параметр width имеет значение auto. Если элемент не является замещаемым (в тэге элемента задан параметр SRC), то браузер вычисляет ширину элемента из условия равенства суммы значений семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в auto. В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура подгонки зависит от браузера).

Чтобы удовлетворить условию равенства суммы значений семи параметров ширине элемента-родителя или окна браузера, в рекомендациях Консорциума W3 определено, в каких случаях значения каких параметров устанавливаются браузером в auto.

Свойство float может переводить любой элемент в разряд «плавающих». Это приводит к тому, что указанный элемент выводится из нормального потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента равным left позволяет создать буквицу при выводе абзаца текста, как показано на рис. 10.4.

Рис. 10.4. Плавающий элемент IMG, представляющий букву Ж

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

Пример 10.1. Буквица в тексте

или-были в далекие времена далеко на Севере большие и сильные люди. При одном только их виде дрожали все, обитавшие в округе племена.

Таблица стилей определяет все элементы IMG как плавающие элементы со смещением влево. Встроенная в абзац картинка, смещаясь влево, образует буквицу абзаца.

Элементы, которые не форматируются как блоковые, являются встроенными (inline) элементами. Они совместно с другими элементами используют область строки. Обычно, выделяемые в строке элементы (ЕМ, STRONG, B и т. д.) классифицируются как встроенные.

Рассмотрим пример задания встроенных элементов в блоковый элемент абзац P:

В абзац можно помещать

Если ширина абзаца достаточна для отображения всех встроенных элементов в строке, то они отобразятся в одной строке. Если ширина недостаточна, то некоторые элементы могут быть разбиты на два и отображены в двух строках (рис. 10.5).

Рис. 10.5. Отображение встраиваемых элементов

В каскадных таблицах стилей, уровень 1 и 2 (CSS1 и CSS2), все доступные свойства форматирования элементов в документе HTML разбиты на 9 категорий, представленных в табл. 10.1. Категории или свойства, появившиеся во втором уровне каскадных таблиц стилей, отмечены верхним индексом 2.

Таблица 10.1. Категории свойств элементов

Типографские свойства шрифтов

Цвет текста и фона, а также картинки в качестве фона

Выравнивание, форматирование и разрядку текста

Свойства форматирования блоковых элементов

Свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков

Спецификацию разрыва страницы

Фильтры и переходы 2

Мультимедийные эффекты и преобразования графических изображений

Псевдоклассы и другие свойства

Свойства @ import, cursor 2 и important

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

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

Таблица 10.2. Единицы измерения в таблицах стилей

Абсолютные em Высота шрифта элемента in Дюйм (1 in = 2.54 cm) ex Высота буквы х cm Сантиметр рх Пиксел mm Миллиметр % Процент pt Пункт (1pt= 1/72 in)

Пика(1 рс= 12 pt)

Относительные единицы измерения em и ех во всех свойствах вычисляются относительно высоты шрифта элемента. Единственное исключение — свойство font-size, в котором эти единицы относятся к высоте шрифта элемента-родителя.

Пикселы являются единицами измерения, относящимися к разрешению дисплея компьютера. Если плотность пикселов на устройстве вывода сильно отличается от типового дисплея, браузер должен переопределить эту единицу. Новая единица, ссылочный пиксел, — это угол, под которым виден один пиксел монитора с плотностью 90dpi с расстояния вытянутой руки пользователя (28 дюймов).

В качестве значений цветов можно использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков (например, aqua, black, white и т. п.) или использовать цветовую модель RGB. Примеры способов задания цветовых оттенков приведены ниже:

ЕМ /* #rgb соответствует #rrggbb */
ЕМ /* rrggbb */
EM /* целые в интервале 0 — 255 */
ЕМ /* вещественные от 0.0% до 100.0% */

Для задания URL-адреса ресурса используется функциональная запись url(. ):

Скобки, запятые, пробелы, одинарные и двойные кавычки в URL-адресе задаются с предшествующей обратной косой чертой (\), \ (, \,).

В каскадных таблицах стилей частичный URL-адрес интерпретируется относительно месторасположения таблицы стилей, а не относительно расположения документа.

Выбор подходящего шрифта для отдельных частей документа является од ним из наиболее часто выполняемых действий в процессе разработка HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и п о «жирности» отображения (нормальный, полужирный). Каскадные табл ицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов. Кроме того, уровень 2 каскадных таблиц стилей позволяет загружать отсутствующие на компьютер! читателя шрифты непосредственно с сервера, на котором расположен документ.

Свойство font-family задает приоритетный список семейств шрифтов и/ ил и типовых семейств шрифтов. Если использовать для отображения страниц ы один определенный шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся на странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимы й символ. В отличие от других свойств каскадных таблиц стилей назван ия семейств в списке отделяются запятыми, чтобы показать их альтернативность:

При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif— одного из типовых семейств шрифтов компьютера.

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

  • serif (например, Times)
  • sans-serif (например, Helvetica)
  • cursive (например, Zapf-Chancery)
  • fantasy (например, Western)
  • monospace (например, Courier)

имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки:

Следует использовать кавычки разных типов при задании последовательности всех определяемых свойств в параметре STYLE и при задании имени шрифта в свойстве font-family.

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

Нормальный шрифт — это обычный прямой шрифт, используемый для печати документов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первоклассников и близок к рукописному. Наклонные шрифты генерируются из обычных прямых шрифтов небольшим наклоном символов.

Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).

Следующие правила определяют курсивный стиль шрифта заголовка первого уровня и нормальный, прямой шрифт выделенных частей заголовка:

Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства — капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.

Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта. Рекомендации по каскадным таблицам стилей допускают создание шрифта капитель простой заменой строчных букв масштабированными символами верхнего регистра.

Следующие правила задают отображение заголовка четвертого уровня капителью с наклонной капителью в выделенных частях:

Свойство font-variant наследуется элементом ЕМ от своего родителя — поэтому в приведенном примере выделенные части заголовка будут отображаться наклонной капителью.

Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому «бледному» шрифту, тогда как 900 — самому «жирному».

Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.

Выбор определенной градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, — это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную.

Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.

Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, к оторые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium.

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

Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. Например, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.

Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:

Два последние правила для выделенного в абзаце элемента ЕМ определяют одинаковую высоту шрифта 12pt.

Основное назначение свойства font — установить в одном определении значения свойств font-style, font-variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:

В этом примере для абзаца задается наклонный шрифт Times Cyr высотой 12 пунктов. Высота строк — 14 пунктов. Если не найден шрифт Times Cyr, то применяется любой шрифт типового семейства serif.

Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2. Оно предназначено для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу:

Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.

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

Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:

Оба правила в примере устанавливают синий цвет текста соответствующих элементов.

Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.

Цвет фона определяется значением свойства background-color, а изображение, используемое в качестве фона, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.

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

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no-repeat (изображение не повторяется). В следующем примере

задается повторяемость изображения фона по вертикали.

Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке. Пример закрепленного в окне браузера изображения фона представлен ниже:

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

Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

Пара абсолютных значений, например 10mm 10mm, размещает верхний левый угол изображения на 10 мм правее и на 10 мм ниже левого верхнего угла блока содержимого.

Ключевые значения и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в табл. 10.3.

Таблица 10.3. Допустимые комбинации ключевых значений

html и css

Я думаю уже ни для кого не секрет, что основами создания сайта являются знания таких элементарных языков как html и css, но как известно, чтобы что либо изучать нужно хотя бы иметь общее представление об этом, понимать суть, именно об этом далее и будет рассказано.

Что такое html

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

Язык HTML придуман уже достаточно давно, его первая версия появилась примерно с 1986-1991 год, тогда этот язык был придуман для обмена научной и технической документацией, он содержал в себе не так уж и много дескрипторов, которые так же называются тегами. Благодаря этому несложному языку можно было делать хорошо структурированные и красиво отображающиеся документы.

Интернет развивался и развивался язык, усложняясь и приобретая все новые возможности. На данный момент самая последняя версия языка это HTML 5 хотя официально она ещё не законченная, но все же уже повсеместно используется и поддерживается всеми современными браузерами.

На самом деле язык html достаточно простой, и не стоит его бояться думая, что не каждый сможет понять или нечто подобное, все достаточно просто, и я на личном опыте в этом не раз убедился. Достаточно сделать хотя бы один сайт по четким инструкциям и вы все поймете и почувствуете как все доступно. Рекомендую изучать HTML5 так как он является на данный момент самым современным и его возможности намного шире чем у предыдущих версий, собственно все мои дальнейшие уроки будут именно на нем.

Что такое CSS

CSS – это каскадные таблицы стилей, это язык который направлен на описание внешнего вида документа, написанного на языке гипертекстовой разметки то есть html. По сути, это язык стилей, который имеет огромные возможности в плане формирования внешнего вида страниц. Так же этот язык непосредственно используется при верстке сайтов.

Основной задачей при разработке данного языка являлась разделение описания логической структуры, от описания внешнего вида этой страницы. Смысл тут в том, чтобы язык html не имел лишних дополнительных параметров и атрибутов, а являлся лишь для разметки, а вот все свойства и настройки всех тегов и элементов дизайна были выделены в отдельную таблицу стилей, что собственно у них и получилось.

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

Данный язык, так же как и html достаточно несложный и с его освоением я думаю, ни у кого не возникнет проблем.

Почему HTML и CSS вместе?

На самом деле ответ достаточно прост, потому, что по-другому никак.

Во-первых, язык CSS без языка html просто не может существовать как самостоятельный язык, так как он и был создан в помощь html.

Во-вторых, если в старых версиях языка html еще можно было обойтись без css, то на данный момент просто ни как.

Они как одно целое, которое уже не разделишь, и вместе они создают одно целое которое на данный момент, уже содержит огромный функционал, не требующий подключения многих дополнительных языков типа Java. Поэтому и нет никакого смысла изучать их по отдельности, намного лучше научиться делать сайты комплексно изучая их вместе, это намного проще и эффективнее, что проверено опытом.

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

Дата публикации:2014-03-23

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Семантическая структура для HTML5 страницы. Семантика в HTML5

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про новые семантические теги в HTML5. Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

Семантическая структура для HTML5 страницы

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

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

Контент на странице

Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

Подвал сайта оформляется тегом

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

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

Илон Маск рекомендует:  Что такое код asp hccompressiondll
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL