Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

• Название: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
• Автор: Владимир Дронов
• Жанр: Прочая справочная литература
• Год: 2011
• ISBN: 978-5-9775-0596-3

Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.

---

Атрибуты тегов бывают обязательными и необязательными. Обязательные атрибуты должны присутствовать в теге в обязательном порядке. Необязательные же атрибуты могут быть опущены; в таком случае тег ведет себя так, будто соответствующему атрибуту присвоено значение по умолчанию.

Атрибуты HTTP-EQUIV и CONTENT тега <META> обязательные — кому нужен метатег без метаданных… А вот атрибут ID, поддерживаемый практически всеми тегами HTML, необязательный, он используется только в особых случаях:

<H1 ID="header1">Справочник по HTML</H1>

В частях II и III, работая со стилями CSS и Web-сценариями, мы будем активно пользоваться атрибутом тега ID. А пока что оставим его в покое.

Ранее мы изучили три правила написания HTML-кода. Добавим к ним еще шесть.

— Имена атрибутов тегов могут быть написаны как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена атрибутов тегов пишут прописными буквами, а их значения — строчными, если, конечно, значение не чувствительно к регистру букв.

— Имена атрибутов тегов пишут между символами < и > после имени тега и отделяют от него пробелом или разрывом строки. Если в теге присутствуют не- сколько атрибутов, их отделяют друг от друга также пробелами или разрывами строки.

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

— Значение атрибута тега пишут после его имени и заключают в двойные кавычки. Между именем атрибута тега и его значением ставят знак равенства.

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

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

На этом пока закончим с HTML. В последующих главах части I мы продолжим его изучение.

Программы, которыми мы будем пользоваться

Поговорим о программах, с которыми будем работать. Не считая Блокнота (или аналогичного текстового редактора), таких программ две: Web-обозреватель и Web-сервер.

Что дальше?

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

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

Web-обозреватель

Web-обозревателей на свете довольно много. Но если отбросить старые и специализированные, останется всего пять: Microsoft Internet Explorer, Mozilla Firefox, Opera, Google Chrome и Apple Safari.

Разумеется, все эти программы поддерживают языки HTML, CSS (язык описания каскадных таблиц стилей) и JavaScript (язык, на котором пишутся Web-сценарии). Большинство этих программ поддерживает некоторый набор возможностей HTML 5 и CSS 3 (новая версия CSS):

— Mozilla Firefox — начиная с версии 3.5;

— Opera — начиная с версии 9.5;

— Google Chrome — начиная с версии 2.0.158.0;

— Apple Safari — начиная с версии 4.0.

НА ЗАМЕТКУ

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

А что же Microsoft Internet Explorer? Поддерживает ли он HTML 5 и CSS 3 на данный момент? К сожалению, нет. Поддержку HTML 5 и CSS 3 обещают лишь в версии 9.0, которая сейчас только разрабатывается.

Но какой же Web-обозреватель нам выбрать? Какой угодно из перечисленных представителей "передовой четверки" — Firefox, Opera, Chrome или Safari. А лучше — сразу все, чтобы удостовериться, что наши Web-страницы в любом из них отображаются правильно.

Web-сервер

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

Так что давайте займемся поиском подходящего Web-сервера.

К счастью, долго искать нам не придется. В составе Windows XP/2003/Vista/Se7en поставляется вполне серьезный Web-сервер Microsoft Internet Information Services. Он исключительно прост в установке и настройке, а его возможностей нам вполне хватит.

Как установить и запустить Internet Information Services, описано в документации, поставляемой в составе Windows. Настраивать его, как правило, не нужно — он сразу после установки "бросается в бой". Более того, Web-сервер Microsoft после установки создает небольшой тестовый Web-сайт, корневая папка которого находится по пути C: \Inetpub\wwwroot. Этой папкой мы и воспользуемся для тестирования наших Web-страничек.

НА ЗАМЕТКУ

Если вам не нравится Internet Information Services, вы можете использовать любой другой. Например, популярный Web-сервер Apache, хотя его придется настраивать сразу после установки.

Вообще, какой именно Web-сервер установлен, не принципиально. Главное — чтобы он был.

Теперь испытаем свежеустановленный Web-сервер в действии. Для этого нам понадобится любая программа управления файлами (например, поставляемый в составе Windows Проводник). Откроем в ней корневую папку созданного при установке Web-сайта (в случае Internet Information Services это папка C: \Inetpub\wwwroot).

ВНИМАНИЕ!

Если вы пользуетесь Internet Information Services, поставляемым с Windows Vista или Windows Se7en, то имейте в виду, что папка C: \Inetpub\wwwroot защищена UAC (User Access Control, управление доступом пользователя) — новой системой защиты ключевых папок и файлов, встроенной в эти операционные системы. Поэтому вам придется сначала запустить Проводник или иную программу управления файлами, которой вы пользуетесь, от имени администратора. Для этого достаточно щелкнуть на ярлыке этой программы правой кнопкой мыши, выбрать в появившемся на экране контекстном меню пункт Запуск от имени администратора (Run As Administrator) и положительно ответить на предупреждение UAC.

Удалим из корневой папки все имеющиеся там файлы, чтобы они нам не мешали. И скопируем туда нашу первую Web-страницу 1.1.htm.

Теперь откроем выбранный ранее Web-обозреватель и наберем в нем интернет-адрес http://localhost/1.1.htm. Интернет-адрес http://localhost идентифицирует наш собственный компьютер (локальный хост), а /1.1.htm — указание на файл 1.1.htm, хранящийся в корневой папке Web-сайта.

Если мы все сделали правильно, Web-обозреватель отобразит нашу Web-страницу (см. рис. 1.3). Значит, Web-сервер работает.

ГЛАВА 2. Структурирование текста

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

Абзацы

Если оформить текст в виде большого монолитного "куска", его вряд ли кто-то будет читать. Такой "кусок" текста выглядит как высокий черный забор, за которым не видно ни единой мысли автора, забор без единой дверцы, без единой щелочки.

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

Как мы уже знаем из главы 1, язык HTML для создания абзаца предоставляет парный тег <P>. Содержимое этого тега становится текстом абзаца:

<P>Я — совсем короткий абзац.</P>

<P>А я — уже более длинный абзац. Возможно, Web-обозреватель разобьет меня на две строки.</P>

Абзац HTML отделяется небольшим отступом от предыдущего и последующего элементов страницы. Если абзац полностью помещается по ширине в родительский элемент Web-страницы, он будет выведен в одну строку; в противном случае Web- обозреватель разобьет его текст на несколько более коротких строк.