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

Читать, слущать книги онлайн бесплатно!

Электронная Литература.

Бесплатная онлайн библиотека.

Читать: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Александрович Дронов на бесплатной онлайн библиотеке Э-Лит


Помоги проекту - поделись книгой:

Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)

Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержимое тега <STRONG> будет отображаться как часть абзаца (тега <P>).

Давайте ради интереса выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех

.

Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!

Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.

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

— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.

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

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

Вложенность тегов

Если мы снова посмотрим на приведенный в листинге 1.2 фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег <STRONG> вложен в тег <P>, являясь частью его содержимого. Тег <P>, в свою очередь, вложен в тег <BODY>, а тот — в "глобальный" тег <HTML>. (Теги <BODY> и <HTML> мы рассмотрим чуть позже.) Такая вложенность тегов в HTML — обычное явление.

Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега <STRONG> будет наложено на действие тега <P>, и фрагмент абзаца окажется выделенным полужирным шрифтом, при этом оставаясь частью этого абзаца.

Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег <EM>, заключим еще и в тег <STRONG>. Вот так:

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</STRONG></EM>! Здесь вы сможете найти

.

В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега <STRONG> будет наложено на действие тега <EM>.

Теперь — внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.

Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):

<P>Приветствуем на нашем Web-сайте всех, кто занимается

<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти

.

Web-обозреватель может отобразить нашу Web-страницу неправильно.

НА ЗАМЕТКУ

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

Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега <EM> в приведенном далее примере тег <P> — родительский, а тег <STRONG> — дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно — не может же он быть непосредственно вложен одновременно в два тега).

Элемент Web-страницы, в который вложен элемент, создаваемый данным тегом, называется родительским, или родителем. А элемент Web-страницы, который вложен в данный элемент, — дочерним, или потомком. То же самое, что и в случае тегов.

Уровень вложенности того или иного тега показывает количество тегов, в которые он последовательно вложен. Если принять за точку отсчета тег <P>, то тег <EM> будет иметь первый уровень вложенности, т. к. он вложен непосредственно в тег <P>. Тег <STRONG> же будет иметь второй уровень вложенности, поскольку он вложен в тег <EM>, а тот, в свою очередь, — в тег <P>. В сложных же Web-страницах уровень вложенности иных тегов может составлять несколько десятков.

Уровень вложенности тегов в HTML-коде обозначают с помощью отступов, которые ставят слева от соответствующего тега и создают с помощью пробелов (листинг 1.3). На отображение Web-страницы они никак не влияют.

Листинг 1.3

<BODY>

<H1>Справочник по HTML</H1>

<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>

</BODY>

Здесь сразу видно, что теги <H1> и <P> вложены в тег <BODY>, — видно по отступам.

Секции Web-страницы

Снова вернемся в полному HTML-коду нашей Web-странички. Мысленно удалим из него уже рассмотренный фрагмент и получим листинг 1.4.

Листинг 1.4

<!DOCTYPE html>

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

<BODY>

.

</BODY>

</HTML>

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

Секция тела Web-страницы находится внутри парного тега <BODY>. Она описывает само содержимое Web-страницы, то, что будет выведено на экран. Именно секцию тела мы рассматривали в предыдущих разделах.

А в парном теге <HEAD> находится секция заголовка Web-страницы. (Не путать с заголовком, который создается с помощью тега <H1>!) В эту секцию помещают сведения о параметрах Web-страницы, не отображаемые на экране и предназначенные исключительно для Web-обозревателя.

И заголовок, и тело Web-страницы находятся внутри парного тега <HTML>, который расположен на самом высшем (нулевом) уровне вложенности и не имеет родителя.

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

Метаданные и тип Web-страницы

Вернемся к сведениям о параметрах Web-страницы, которые находятся в секции ее заголовка. Что это за параметры? И что они задают?

Сначала введем еще пару терминов. Параметры Web-страницы, не отображаемые на экране и предназначенные для Web-обозревателя, назовем метаданными. Это своего рода данные, описывающие другие данные, в нашем случае — Web-страницу. А HTML-теги, которые задают метаданные, называются метатегами.

Прежде всего, в метаданные входит название Web-страницы. Оно отображается в заголовке окна Web-обозревателя, где выводится содержимое данной Web- страницы, и хранится в "истории" (списке посещенных к настоящему времени Web- страниц). Название помещается в парный тег <TITLE> и располагается в секции заголовка Web-страницы:

<HEAD>

.

<TITLE>Пример Web-страницы</TITLE>

</HEAD>

Далее, обычно в секции заголовка расположен особый метатег, задающий кодировку, в которой сохранена Web-страница. Этот метатег имеет "говорящее" имя

<META>:

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

.

</HEAD>

Приведенный тег задает кодировку UTF-8, в которой мы сохранили нашу Web- страничку. Существуют аналогичные теги, задающие кодировки 1251, КОИ-8, кодировка западноевропейских и восточноазиатских языков и др.

НА ЗАМЕТКУ

Кодировка UTF-8 — это разновидность кодировки Unicode, предназначенная для Web-дизайна. Кодировка Unicode (а значит, и UTF-8) может закодировать все символы всех языков, имеющихся на Земле. Именно она в настоящее время чаще всего применяется для создания Web-страниц.

Кстати, вы не заметили ничего странного в теге <META>? У него нет ни содержимого, ни закрывающей пары! Это так называемый одинарный тег, который имеет только открывающую пару. Такой тег действует в той точке HTML-кода, где он сам находится, и либо задает метаданные, либо помещает в соответствующее место Web-страницы какой-либо элемент, не относящийся к тексту. Впоследствии нам будут часто встречаться одинарные теги.

Теперь осталось рассмотреть последний тег, находящийся в самом начале HTML-кода нашей Web-страницы. Этот тег находится даже вне "всеобъемлющего" тега <HTML>. Важная, должно быть, персона… Вот он:

<!DOCTYPE html>

Метатег <!DOCTYPE> задает, во-первых, версию языка HTML, на которой написана Web-страница, а во-вторых, разновидность данной версии. Так, существуют мета- теги <!DOCTYPE>, указывающие на HTML 5, "строгую" и "переходную" разновидности HTML 4.01 (это предыдущая версия языка HTML, еще действующая на данный момент) и язык XHTML (ответвление HTML, имеющее несколько другой синтаксис).

Так вот, метатег <!DOCTYPE html>, который мы поставили в начало нашей Web- странички, указывает на HTML 5. Будем работать только с самыми новыми технологиями! Долой всякое старье!

Атрибуты HTML-тегов

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

Посмотрим на тег <META>, задающий кодировку Web-страницы:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

Здесь мы видим, что между символами < и >, помимо имени тега, присутствуют еще какие-то данные. Это атрибуты тега, задающие его параметры. В частности, два атрибута данного тега <META> указывают, что документ представляет собой Web-страницу, и задают ее кодировку.

Каждый атрибут тега имеет имя, за которым ставится знак равенства, и значение данного атрибута, взятое в двойные кавычки. Так, атрибут с именем HTTP-EQUIV имеет значение "Content-Type", говорящее о том, что данный метатег задает тип документа. А атрибут с именем CONTENT имеет значение "text/html; charset=utf-8", обозначающее, что данный документ представляет собой Web-страницу, и указывающее, что она набрана в кодировке UTF-8.

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

Атрибуты 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>



Поделиться книгой:

На главную
Назад