Учебник HTML
http://on-line-teaching.com

Создание и разработка сайта для частных лиц, малого и среднего бизнеса. Оптимальное соотношение цена/скорость/качество.
 web.urikor.net

Основы HTML

Что такое Internet

Что такое WWW

Что такое URL

Что такое Web-браузер

Что такое гиперссылка

Следует сказать, что данной теме в Интернете посвящено очень много ресурсов. Поэтому материал постараюсь излагать максимально просто, не вдаваясь в дебри. Так сказать - основа для начинающих.

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

Что такое Internet

Internet - это крупнейшая компьютерная сеть в мире.

А начинался Internet из исследовательского проекта в конце 60-х годов, который выполнялся по заказу военных США. Тогда была создана сеть под названием ARPANET, охватывавшую большую часть территории США. Позже сеть подвергалась неоднократным улучшениям на основе новых технологий и получила название Internet. В начале 90-х годов компании стали предлагать услуги Internet, ориентированные на потребности обычных пользователей. Так постепенно сеть разрасталась и вовлекала граждан, живущих по всему миру.

Физически Internet состоит из сотен тысяч соединенных между собой компьютеров, разбросанных по всему миру. Компьютеры в Internet взаимодействуют между собой, используя набор протоколов, называемых TCP/IP (Transmission Control Protokol/Internet Protokol). Это набор правил, регламентирующих способы передачи данных между компьютерами в сети. Протоколы TCP/IP позволяют компьютерам обмениваться информацией таким образом, будто они подключены друг к другу напрямую.

Что такое WWW

WWW (World Wide Web) - это часть Internet, представляющая собой гигантский набор документов, хранящихся на компьютерах по всему миру. Сокращенно WWW называют просто Вэб.

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

Что такое URL

URL (Uniform Resource Locator) - это уникальный адрес, которым обладает каждая вэб-страница в сети. Если пользователю известен URL страницы, то он может ее отобразить у себя в браузере, набрав ее адрес в строке браузера.

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

Протокол определяет правила обращения к вэб-странице.

Название сервера (доменное имя) - обозначает компьютер, содержащий данную вэб-страницу.

Путь доступа - указывает местоположение страницы на диске сервера.

Например адрес данной страницы http://learn.com/html/index.html

http - наименование протокола

learn.com - наименование сервера или доменное имя

/html/index.html - путь доступа к странице на самом сервере.

Кроме http (Hyper Text Transfer Protocol) протокола, существуют другие виды протокола, применяемые для доступа к данным в Internet, - например, FTP (File Transfer Protocol). Сайты FTP, на которые следует ссылаться посредством аббревиатуры ftp, позволяют пользователю выгружать на сервер данные, хранящиеся в виде отдельных файлов.

Что такое Web-браузер

Web-браузер - это программа, установленная на компьютере пользователя, и служащая для поиска и отображения информации в сети. Браузер считывает вэб-страницы и другие файлы с диска сервера и отображает их содержимое на мониторе компьютера пользователя. Среди наиболее популярных браузеров следует назвать Microsoft Internet Explorer, Netscape Navigator, Opera.

Что такое гиперссылка

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

Дополнительная информация по теме:

Создание и разработка сайта в примерах - on-line-teaching.com/site/

Основы векторной и растровой графики - grafika-online.com


Старт

Что такое HTML

С помощью чего создаются Web-страницы

Перед тем как начать изложение материала хочу сделать существенное замечание.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - каждый год выходит новая версия HTML. С другой стороны - вэб-браузеры, с помощью которых пользователи просматривают html-страницы, также имеют свои различия в части интерпретации и поддержки отдельных тэгов. Это обусловлено тем, что разработкой браузеров занимаются различные компании. Что из этого следует? Попросту говоря, один и тот же html-код разные браузеры будут отображать по-разному, а некоторые тэги отдельные браузеры вообще "не понимают".

На страницах своего сайта я буду рассматривать дескрипторы, поддерживаемые Microsoft Internet Explorer 5.0 (IE 5.0). Это следует учитывать, когда будете разбирать приводимые примеры.

Что такое HTML

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Вэб-страницы.

Т.е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т.е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением .htm или .html.

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

Для более быстрого знакомства с HTML-кодом советую просматривать понравившуюся вам страницу в режиме "В виде HTML". Для этого в браузере надо выбрать пункт меню "Вид" - "В виде HTML".

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

С помощью чего создаются Web-страницы

Что такое Вэб-страница? По сути дела - это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в скобки). Т.е., исходя из вышеизложенного, Вэб-страницы можно набрать в любом текстовом редакторе (Блокнот, WordPad, Word и т.д.). В этом случае абсолютно все надо набирать своими ручками. Основной плюс такого метода - код получается абсолютно минимизированным, т.е. "вес" такой html-страницы будет минимальным. К недостаткам следует отнести тот факт, что пользователь должен очень хорошо знать язык html-разметки, да и результаты своего труда нельзя будет сразу посмотреть. Поэтому таким методом создания Вэб-страниц практически никто не пользуется. Порекомендовать его можно разве что для создания простеньких Вэб-страничек если нет возможности использования специализированных программ.

Практически все Вэб-дизайнеры используют специальные программы, которые называются HTML-редакторы. Наиболее популярные - Macromedia HomeSite, Dreamweaver MX.

Чем же они хороши? Прежде всего, тем, что они как раз и предназначены для создания Вэб-страниц. Синтаксис в таких программах обычно выделяется разными цветами, так что очень хорошо видно где находится текст, а где дескрипторы, а где php-код. Многие сложные конструкции тэгов можно вводить одним щелчком мышки. Результат своего труда виден тут же, в соседнем окошке. Если вы серьезно занимаетесь вэб-дизайном, то без такой программы вам просто не обойтись.

Кроме вышеуказанных программ существует еще один тип специализированных программ - это, так называемые, средства визуального проектирования (Microsoft FrontPage, HoTMetal Pro). Они позволяют создавать Вэб-страницы таким образом, чтобы полностью исключить необходимость набора тэгов HTML вручную. Подобные программы выполняют все необходимые операции автоматически, по мере "рисования" Вэб-страницы. К недостаткам таких программ следует отнести тот факт, что "вес" таких страниц оказывается большим из-за избыточного HTML-кода, да и изящную страничку без подправки кода "вручную" сделать весьма проблематично.

Сам я пользуюсь Macromedia HomeSite. Уже к ней привык и она мне очень нравится. Правда на Миллениуме у меня были с ней проблемы с инсталляцией. Но на ХР - работает без проблем. Если у вас нет возможности приобрести Macromedia HomeSite, поройтесь в Интернете. На любом софтархиве найдете много бесплатных HTML-редакторов. Попробуйте разные и выберите тот, который вам по душе.

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

Дополнительная информация по теме:


Основные тэги

Обязательные тэги

Создание абзаца, символов пробела

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

Если дела обстоят очень уж туго, и вы пользуетесь обыкновенным блокнотом, то для просмотра необходимо сохранить исходный текст с расширением .htm или .html, а затем просмотреть сохраненный файл браузером. Если у вас стоит Windows, то браузер Internet Explorer встраивается автоматически при инсталляции системы.

Ну вот, кажется, и все.

Приступим к делу.

Обязательные тэги

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

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

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

Пример:

<html>

<head>
<title>Online обучение: HTML</title>
</head>

<body>
Текст сайта
</body>

</html>

Нормальный HTML-редактор уже имеет набор вышеуказанных тэгов при создании новой страницы. Следует сказать, что к выбору наименований Вэб-страниц следует отнестись со всей серьезностью, т.к. они используются поисковыми системами для формирования каталогов Вэб-страниц. Поисковая система - это сайт, помогающий пользователям быстро находить интересующую их информацию. Ваша страница с большей вероятностью окажется найденной поисковой системой, которой задан определенный набор ключевых слов поиска, если эти слова присутствуют в названии страницы. Среди самых популярных поисковых систем следует назвать Yandex, Google, Aport, Yahoo, Rambler.

Создание абзаца, символов пробела, заголовка

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

После открытия страницы в окне Вэб-браузера все абзацы ее текста, помеченные тэгом <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

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

Пример:

HTML-код:

<p align="left">абзац выровнен влево...</p>

<p align="right">абзац выровнен вправо...</p>

<p align="center">абзац выровнен по центру...</p>

<p align="justify">абзац выровнен по ширине...</p>

Отображение в браузере:

абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево

абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо

абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру

абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине

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

Для перехода к новой строке используется тэг <BR>. Он сообщает браузеру, что следует прекратить размещение текста и других элементов страницы в пределах текущей строки и перейти к новой строке. Этот тэг не имеет своего двойника с косой чертой, так называемого закрывающего тэга.

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

HTML-код:

<p>Делаем так, чтобы текст <nobr>"У Лукоморья дуб зеленый, златая цепь на дубе том"</nobr> находился на одной строчке.</p>

<p>А теперь воспользуемся тэгом BR</p>

У попа была собака,<br>

Он ее любил,<br>

Она съела кусок мяса,<br>

Он ее убил.

Отображение в браузере:

Делаем так, чтобы текст "У Лукоморья дуб зеленый, златая цепь на дубе том" находился на одной строчке.

А теперь воспользуемся тэгом BR

У попа была собака,
Он ее любил,
Она съела кусок мяса,
Он ее убил.

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

Дополнительная информация по теме:


Заголовки и комментарии

Создание заголовков

Добавление комментариев в HTML-код

Создание заголовков

Заголовки - отличный инструмент структурной организации содержимого Вэб-страницы. Стандарт HTML предусматривает возможность использования заголовков шести уровней. Заголовки 1 уровня обозначаются тэгом <Н1> и отображаются самым крупным шрифтом, а уровня 6 (<Н6>) - самым мелким. Заголовки с крупным шрифтом (1, 2, 3) обычно используют в качестве выделения разделов документа, а тэги <Н5>, <Н6> часто применяют для выделения фрагментов текста, содержащих сведения об авторских правах и другую служебную информацию. Шрифт заголовков, форматируемых с помощью тэга <Н4>, как правило, не отличается по размеру от шрифта, которым набран основной текст страницы. Грамотное использование заголовков значительно улучшает читабельность страницы, но надо заметить, что не следует использовать на одной странице заголовки более трех различных уровней вложенности.

Пример:

HTML-код:

<h1>Заголовок 1 уровня</h1>

<h2>Заголовок 2 уровня</h2>

<h3>Заголовок 3 уровня</h3>

<h4>Заголовок 4 уровня</h4>

<h5>Заголовок 5 уровня</h5>

<h6>Заголовок 6 уровня</h6>

Отображение в браузере:

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня
Заголовок 6 уровня
Добавление комментариев в HTML-код

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

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

Дополнительная информация по теме:


Специальные символы

Вставка спецсимволов

Иногда возникает необходимость в использовании символа, которого нет на клавиатуре. Как быть в этом случае? Для этого существуют специальные символы, состоящие из знаков амперсанда (&), фунта (#), числового кода и точки с запятой (;). Либо из амперсанда, наименования символа и точки с запятой (;).

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

Таблица часто используемых спецсимволов

Мнемокод       Символ

&quot;          "
&amp;           &
&lt;            <
&gt;            >
&curren;        ¤
&brvbar;        ¦
&sect;          §
&copy;          ©
&ordf;          ª
&laquo;         «
&reg;           ®
&deg;           °
&plusmn;        ±
&micro;         µ
&para;          ¶
&middot;        ·
&sup1;          ¹
&euro;          €
<SUP><FONT SIZE="-1">TM</FONT></SUP>    TM

Дополнительная информация по теме:


Форматирование текста ч.1

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

Выделение фрагментов текста

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

Вэб-браузеры игнорируют пустые строки и избыточные пробелы внутри текста страницы. Дескриптор <PRE> указывает браузеру сохранять в неприкосновенности пустые области текста страницы.

Браузер отображает подобный предварительно отформатированный текст с помощью моноширинных шрифтов. Что такое моноширинный шрифт?

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

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

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

Пример:

HTML-код:

<pre>
У попа была собака,
Он ее любил,
Она съела кусок мяса
Он ее убил.
</pre>

Отображение в браузере:

У попа была собака,
  Он ее любил,
    Она съела кусок мяса
      Он ее убил.
Выделение фрагментов текста

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

Для выделения текста полужирным шрифтом используется тэг <B> или <STRONG>, для выделения курсивом - <I> или <EM>, для подчеркивания текста - <U>, для зачеркивания текста - <STRIKE>. Фрагменты полужирного или курсивного текста используют для ввода новых терминов, выражения важных мыслей. С подчеркиванием текста надо быть очень осторожным, т.к. в Интернете таким образом принято выделять гиперссылки.

Тэг <CENTER> позволяет центрировать текст на странице по горизонтали. Это удобно для выделения наименований или заголовков.

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

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

Пример:

HTML-код:

<p><strong>Жирный текст</strong></p>

<p><em>Курсив</em></p>

<p><u>Подчеркнутый текст</u></p>

<p><strike>Зачеркнутый текст</strike></p>

<center>Центрирование</center>

<p><strong><em>Жирный курсив</em></strong></p>

<p>Верхний <sup>индекс</sup></p>

<p>Нижний <sub>индекс</sub></p>

Отображение в браузере:

Жирный текст

Курсив

Подчеркнутый текст

Зачеркнутый текст

Центрирование

Жирный курсив

Верхний индекс

Нижний индекс

Дополнительная информация по теме:


Форматирование текста ч.2

Выбор шрифта

Изменение размера шрифта

Выбор цвета шрифта

Изменение цвета фона

Выбор шрифта

Для изменения шрифта служит тэг <FONT> с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.

Пример:

HTML-код:

<p><font face="Times New Roman, Arial">У попа была собака, ОН ЕЕ ЛЮБИЛ</p>

<p><font face="Monotype Corsiva, Arial">Она съела кусок мяса, ОН ЕЕ УБИЛ</p>

Отображение в браузере:

У попа была собака, ОН ЕЕ ЛЮБИЛ

Она съела кусок мяса, ОН ЕЕ УБИЛ
Изменение размера шрифта

Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом <BASEFONT> , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом <FONT>, можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный - 7.

Изменять шрифт можно с помощью тэгов <BIG> и <SMALL>. <BIG> укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а <SMALL>, соответственно, уменьшает.

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

Пример:

HTML-код:

<p><font size="1">Шрифт размера 1</font></p>

<p><font size="2">Шрифт размера 2</font></p>

<p><font size="3">Шрифт размера 3</font></p>

<p><font size="4">Шрифт размера 4</font></p>

<p><font size="5">Шрифт 5</font></p>

<p><font size="6">Шрифт 6</font></p>

<p><font size="7">Шрифт 7</font></p>

<p><font size="6">У</font>тро красит нежным светом</p>

<p><font size="+2">С</font>тены <small>старого</small> <big>Кремля</big></p>

Отображение в браузере:

Шрифт размера 1

Шрифт размера 2

Шрифт размера 3

Шрифт размера 4

Шрифт 5

Шрифт 6

Шрифт 7

Утро красит нежным светом

Стены старого Кремля
Выбор цвета шрифта

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

Используя атрибут TEXT в контексте тэга <BODY>, можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом <FONT> (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.

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

Наим-е
цвета       Код

aqua        ##00FFFF
black       ##000000
blue        ##0000FF
fuchsia     ##FF00FF
gray        ##808080
green       ##008000
lime        ##00FF00
maroon      ##800000
navy        ##000080
olive       ##808000
purple      ##800080
red         ##FF0000
silver      ##C0C0C0
teal        ##008080
white       ##FFFFFF
yellow      ##FFFF00

Пример:

HTML-код:

<p><font color="#ff0000">Красный цвет</font></p>

<p><font color="blue">Синий цвет</font></p>

Отображение в браузере:

Красный цвет

Синий цвет
Изменение цвета фона

Атрибут BGCOLOR дает возможность явного указания цвета фона вэб-страницы. Цвет фона задается аналогично цвету текста (именем или кодом).

Пример:

HTML-код:

<BODY BGCOLOR="#00FF00"> </BODY>

Отображение в браузере:

Дополнительная информация по теме:


Форматирование текста ч.3

Поля страницы

Моноширинные шрифты

Блоки цитат

Поля страницы

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

В IE 5.0 используются следующие атрибуты для задания полей страницы:

LEFTMARGIN - левой поле

RIGHTMARGIN - правое поле

TOPMARGIN - верхнее поле

BOTTOMMARGIN - нижнее поле

По умолчанию размер полей равен, примерно, 10 пикселям.

Моноширинные шрифты

Для отображения моноширинных шрифтов используются тэги <TT> <CODE> <KBD> <SAMP>. При этом каждому символу строки отводится одинаковое пространство.

Дескриптор <TT> наиболее часто используется и служит для выделения отдельных слов или фраз текста.

Дескриптор <CODE> применяют для выделения программных инструкций.

Дескриптор <KBD> полезен для выделения фрагментов текста, который должен быть введен пользователем.

Дескриптор <SAMP> часто используют для обозначения текстов примеров.

Пример:

HTML-код:

<p>Основной текст основной текст основной текст </p>

<p><tt>Этот текст заключен в тэг TT</tt></p>

Отображение в браузере:

Основной текст основной текст основной текст

Этот текст заключен в тэг TT
Блоки цитат

Для создания блоков цитат применяют тэг <BLOCKQUOTE>. При этом цитата отображается с дополнительными отступами.

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

Пример:

HTML-код:

<p>Основной текст основной текст основной текст основной текст</p>

<p><blockquote>Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитат</blockquote></p>

Отображение в браузере:

Основной текст основной текст основной текст основной текст

Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитат

Дополнительная информация по теме:


Создание списков

Нумерованный список

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

Многоуровненвый список

Списки определений

Основное применение списков:

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

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

Многоуровневые - для конкретизации информации определенных элементов.

Список определений - используется для форматирования словарей.

Нумерованный список

Для создания нумерованных списков используются тэги <OL> <LI>

Тэгом <OL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации.

Значение  Нумерация
  TYPE

  A       A, B, C..
  a       a, b, c..
  I       I, II, III..
  i       i, ii, iii..
  1       1. 2. 3..

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

При помощи атрибутов START VALUE можно изменить порядок нумерации списка.

START - служит для задания начального номера списка, отличного от 1.

VALUE - дает возможность назначить произвольный номер любому элементу списка.

Пример:

HTML-код:

<ol>

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol type="A">

<li>элемент 1</li>

<li>элемент 2</li>

<li>элемент 3</li>

</ol>

<ol start="5">

<li>элемент 1</li>

<li value="9">элемент 2</li>

<li>элемент 3</li>

</ol>

Отображение в браузере:

  1. элемент 1
  2. элемент 2
  3. элемент 3
  1. элемент 1
  2. элемент 2
  3. элемент 3
  5. элемент 1
  9. элемент 2
  10. элемент 3
Маркированный список

Для создания маркированных списков применяют тэги <UL <LI>

Тэгом <UL> отмечается начало/окончание всего списка.

Тэгом <LI> обозначают начало/конец отдельного элемента списка.

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

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

Пример:

HTML-код:

<ul type="circle">

<li>элемент 1</li>

<li>элемент 2</li>

<li type="disc">элемент 3</li>

<li type="square">элемент 4</li>

</ul>

Отображение в браузере:

  • элемент 1
  • элемент 2
  • элемент 3
  • элемент 4
Многоуровненвый список

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

Списки определений

Для создания списков определений используют три тэга:

<DL> - начало/конец списка.

<DT> - начало/конец конкретного термина.

<DD> - начало/конец поясняющей статьи термина.

Тэги <DT> и <DD> не обязательно чередовать. Т.е. можно "привязать" к одному определению несколько терминов, и, наоборот.

Пример:

HTML-код:

<dl>

<dt>Термин 1</dt>

<dd>Аннотация1 к термину 1</dd>

<dd>Аннотация2 к термину 1</dd>

</dl>

Отображение в браузере:

Термин 1
Аннотация1 к термину 1
Аннотация2 к термину 1

Дополнительная информация по теме:


Работа с графикой ч.1

Вставка изображения

Добавление фона

Обтекание графики текстом

Вставка изображения

Для вставки графических элементов служит тэг <IMG>.

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

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

Графика должна быть представлена в виде файлов с расширениями .jpg .gif.

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

Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг <BR>

Пример:

HTML-код:

<p><center><img src="img/tigr.jpg" alt="Это изображение тигра"></center></p>

Отображение в браузере:

Это изображение тигра
Добавление фона

Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Т.к. браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.

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

Рамка придает изображению четкость и определенность. Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет.

Пример:

HTML-код:

<BODY background="img/fon.jpg">

<p><img src="img/teacher.jpg" border="3"></p>

<BODY>

Отображение в браузере:
Обтекание графики текстом

Если хотите, чтобы графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>.

Этот атрибут допускает задание двух значений - left right.

Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.

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

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

Пример:

HTML-код:

<img src="img/majak.jpg" align="left">

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

<br><br>

<img src="img/sea.jpg" align="right">

Это небольшая яхта.

<br clear="right">

Я люблю море, но не умею плавать.

<br><br>

<img src="img/majak.jpg" align="left">

<img src="img/sea.jpg" align="right">

Море, море - мир безбрежный

Отображение в браузере:

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

Это небольшая яхта.
Я люблю море, но не умею плавать.

Море, море - мир безбрежный

Дополнительная информация по теме:


Работа с графикой ч.2

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

Пустая область вокруг изображения

Горизотнальная линейка

Списки с графическими маркерами

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

Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.

Пример:

HTML-код:

<p> <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p>

<p> <img src="img/majak.jpg" align="middle">Выравнивание по середине</p>

<p> <img src="img/majak.jpg" align="bottom">Выравнивание по нижней кромке</p>

Отображение в браузере:

Выравнивание по верхней кромке

Выравнивание по середине

Выравнивание по нижней кромке
Пустая область вокруг изображения

Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.

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

Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.

Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.

Пример:

HTML-код:

<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.</p>

Отображение в браузере:

Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.
Горизотнальная линейка

Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.

По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.

Атрибут NOSHADE устраняет эффект объемности линейки.

Пример:

HTML-код:

<hr>

<hr align="left" width="50" size="5" noshade>

Отображение в браузере:
Списки с графическими маркерами

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

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

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

Пример:

HTML-код:

<ul>

<br><img src="img/list.gif" align="middle" hspace="5">Глава 1

<br><img src="img/list.gif" align="top">Глава 2

<br><img src="img/list.gif" align="middle" hspace="15">Глава 3

</ul>

Отображение в браузере:

    Глава 1
    Глава 2
    Глава 3

Дополнительная информация по теме:


Работа с графикой ч.3

Преобразование формата изображения

Задание размеров изображения

Увеличение размеров изображения

Уменьшение изображения

Обрезка изображения

Преобразование формата изображения

Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Более подробно работа непосредственно с графикой рассматривается на сайте grafika-online.com.

Изображения GIF (Graphics Interchange Format) могут содержать 256 цветов и используются, в основном, для отображения рисунков. Кроме того, этот формат обладает средствами поддержки анимации и прозрачности.

Изображения JPEG (JPG) (Joint Photographic Experts Group) содержат более 16 млн. цветов. Данный формат используется для хранения фотографий и крупных изображений.

Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

Задание размеров изображения

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

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

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

Увеличение размеров изображения

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

Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.

Уменьшение изображения

Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.

Пример:

HTML-код:

<img src="img/tigr.jpg" width="50" height="41">

<br>

<img src="img/tigr.jpg" width="100" height="82">

<br>

<img src="img/tigr.jpg" width="10%">

Отображение в браузере:
Обрезка изображения

Обрезка изображения позволяет удалить ненужные части картинки.

После обрезки объем файла уменьшается, тем самым увеличивая скорость загрузки файла.

Более подробно работа непосредственно с графикой рассматривается на сайте grafika-online.com.

Дополнительная информация по теме:


Работа с графикой ч.4

Уменьшение разрешения изображения

Уменьшение глубины цвета изображения

Прозрачность фона изображения

Чередующиеся изображения GIF

Уменьшение разрешения изображения

Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.

Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

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

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

<IMG SRC="высокое разрешение.jpg"
LOWSRC="низкое разрешение.jpg"
WIDTH="500" HEIGHT="400">
Уменьшение глубины цвета изображения

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

Формат GIF поддерживает палитру 256 цветов. Если будете преобразовывать в этот формат картинку, содержащую более 256 цветов, то похожие цвета будут подменяться "средним" цветом. А вот если преобразовывать в этот формат рисунок, с небольшой палитрой цветов, то может оказаться, что в изображении используется менее 256 цветов (например, флаг Украины содержит всего два цвета - синий и желтый, т.е. вместо 256 можно использовать 2 цвета, что существенно сократит объем файла). Таким образом, можно просто "выбросить" ненужные цвета.

Следует заметить, что не стоит уменьшать глубину цвета изображения в формате JPEG, т.к. в этом случае мы добьемся обратного эффекта - сокращение палитры приведет к росту файла изображения. Чтобы уменьшить глубину цвета изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Прозрачность фона изображения

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

Чтобы установить прозрачный фон изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Надо отметить, тот факт, что для создания прозрачного фона, картинка должна обладать однородным фоном. Если это не так, то, с помощью графического редактора надо добиться однородности фона. Как это сделать можно узнать на grafika-online.com.

Чередующиеся изображения GIF

Формат GIF обладает еще одним полезным свойством - он поддерживает режим чередования изображения при его загрузке. Что это такое?

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

Чтобы снабдить изображение свойством чередования надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Дополнительная информация по теме:


Таблицы ч.1

Создание таблицы

Обрамление таблицы

Заголовок таблицы

Группирование столбцов

Группирование строк

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

Создание таблицы

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Тэг <TH> используется для создания ячеек с заголовками.

Тэг <TD> - для обыкновенных ячеек с данными.

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

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

Пример:

HTML-код:

<table border="1">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

</table>

Отображение в браузере:

1 | 2
3 | 4
5 | 6
Обрамление таблицы

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>.

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

По умолчанию браузер отображает рамку таблицы темно-серым цветом. Чтобы изменить цвет рамки надо применить атрибут BORDERCOLOR.

Пример:

HTML-код:

<table border="2" cellspacing="5" bordercolor="#0ff00f">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

</table>

Отображение в браузере:

1 | 2
3 | 4
5 | 6
Заголовок таблицы

Для создания заголовка таблицы служит тэг <CAPTION>.

По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.

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

Пример:

HTML-код:

<table border="1">

<caption> Заголовок таблицы </caption>

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

Отображение в браузере:

Заголовок таблицы
1 2
Группирование столбцов

Для группирования столбцов таблицы служат тэги <COLGROUP> и <COL>.

Дескриптор <COLGROUP> создает структурную группу столбцов, которая выделяет множество логически однородных ячеек. Так одна структурная группа может охватывать ячейки заголовков столбцов, а другая - ячейки, содержащие данные.

Дескриптор <COL> предназначен для формирования неструктурных групп столбцов, которые делят таблицу на разделы, не имеющих отношения к структуре. Это удобно в том случае, когда не все столбцы содержат информацию одного типа.

Пример:

HTML-код:

<table border="1">

<colgroup span="1" style="color:red"></colgroup>

<colgroup span="2">

<tr>

<th>Товар</th>

<th>Цена</th>

<th>Кол-во</th>

</tr>

<tr>

<th>Гайка</th>

<td>20р</td>

<td>50</td>

</tr>

<tr>

<th>Болт</th>

<td>30р</td>

<td>80</td>

</tr>

</table>

<br>

<table border="1">

<col span="1" style="color:green">

<col span="2" style="color:red">

<tr>

<th>Товар</th>

<th>Цена</th>

<th>Кол-во</th>

</tr>

<tr>

<th>Гайка</th>

<td>20р</td>

<td>50</td>

</tr>

<tr>

<th>Болт</th>

<td>30р</td>

<td>80</td>

</tr>

</table>

Отображение в браузере:

Товар | Цена | Кол-во
Гайка | 20р | 50
Болт | 30р | 80

Товар | Цена | Кол-во
Гайка | 20р | 50
Болт | 30р | 80
Группирование строк

Для группирования строк таблицы служат тэги <THEAD>, <TBODY>, <TFOOT>.

<THEAD> - нужен для создания группы заголовков для столбцов таблицы. Этот дескриптор допускается использовать в пределах таблицы только одни раз.

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

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

Пример:

HTML-код:

<table border="1">

<thead style="color:green">

<tr>

<th>Товар</th>

<th>Цена</th>

<th>Кол-во</th>

</tr>

</thead>

<tr>

<th>Гайка</th>

<td>20р</td>

<td>50</td>

</tr>

<tr>

<th>Болт</th>

<td>30р</td>

<td>80</td>

</tr>

<tfoot>

<tr>

<td colspan="3" align="center">Итоговая строка</td>

</tr>

</tfoot>

</table>

Отображение в браузере:

Товар | Цена | Кол-во
Гайка | 20р | 50
Болт | 30р | 80
Итоговая строка

Дополнительная информация по теме:


Таблицы ч.2

Задание цвета элементов таблицы

Графический фон таблицы

Выравнивание данных в таблице

Изменение размеров таблицы

Задание цвета элементов таблицы

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

Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.

Пример:

HTML-код:

<table border="1">

<tr bgcolor="#ff00ff">

<td>1</td>

<td>2</td>

</tr>

<tr bgcolor="#5555ff">

<td>3</td>

<td>4</td>

</tr>

</table>

Отображение в браузере:

1 | 2
3 | 4
Графический фон таблицы

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

Пример:

HTML-код:

<table background="img/sea.jpg">

<tr>

<td>11111</td>

<td>22222</td>

</tr>

<tr>

<td>33333</td>

<td>44444</td>

</tr>

</table>

Отображение в браузере:

11111 | 22222
33333 | 44444
Выравнивание данных в таблице

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.

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

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

Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

Пример:

HTML-код:

<table border="1" cellpadding="5">

<tr>

<td align="right">1111<br>2222</td>

<td valign="top" align="center">22222</td>

</tr>

<tr>

<td>Нижняя ячейка</td>

<td>Нижняя ячейка</td>

</tr>

</table>

Отображение в браузере:

1111 2222 | 22222
Нижняя ячейка | Нижняя ячейка
Изменение размеров таблицы

Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.

То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.

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

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

Пример:

HTML-код:

<table border="1" width="200">

<tr>

<td><p>Ширина 200 пикселей</p></td>

</tr>

</table>

<br>

<table border="1" width="60%">

<tr>

<td><p>Ширина 60%</p></td>

</tr>

</table>

Отображение в браузере:

Ширина 200 пикселей

Ширина 60%

Дополнительная информация по теме:


Таблицы ч.3

Слияние ячеек таблицы

Улучшение внешнего вида таблицы

Отображение границ таблицы

Перенос слов в ячейках таблицы

Вложенные таблицы

Обтекание таблицы текстом

Слияние ячеек таблицы

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.

Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.

Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.

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

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

Пример:

HTML-код:

<table border="1">

<tr>

<td rowspan="3">1111</td>

<td colspan="2">22222</td>

<td colspan="2">33333</td>

</tr>

<tr>

<td>44444</td>

<td colspan="2" rowspan="2">55555</td>

<td>66666</td>

</tr>

<tr>

<td>77777</td>

<td>88888</td>

</tr>

<tr>

<td colspan="5">99999</td>

</tr>

</table>

Отображение в браузере:

1111 | 22222 |  | 33333
 | 44444 | 55555 |  | 66666
 | 77777 |  |  | 88888
99999
Улучшение внешнего вида таблицы

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

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

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

Отображение границ таблицы

Если значение атрибута BORDER тэга <TABLE> отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.

Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.

Атрибут RULES - указывает набор внутренних разделительных линий.

Ниже приведены допустимые значения этих атрибутов.

       FRAME
Значение    Результат

void      Все линии отсутствуют
above     Линия над таблицей
below     Линия под таблицей
rhs       Линия справа от таблицы
lhs       Линия слева от таблицы
hsides    Линии над и под таблицей
vsides    Линии слева и справа от таблицы
border    Все линии присутствуют (по умолчанию)

      RULES
none      Все линии отсутствуют
cols      Линии между столбцами
rows      Линии между строками
groups    Линии между группами столбцов и строк
all       Все линии присутствуют (по умолчанию)

Пример:

HTML-код:

<table border="1" rules="rows">

<tr>

<td>111</td>

<td>111</td>

<td>111</td>

</tr>

<tr>

<td>111</td>

<td>111</td>

<td>111</td>

</tr>

</table>

Отображение в браузере:

111 | 111 | 111
111 | 111 | 111
Перенос слов в ячейках таблицы

По умолчанию браузер делает автоматический перенос слов текста внутри ячейки таблицы. Атрибут NOWRAP принудительно отключает функцию переноса слов внутри таблицы и отображает текст в одну строку. Поэтому этот атрибут рекомендуют применять по отношению к ячейкам таблицы, содержащим короткий текст, т.к. в противном случае он выйдет за пределы окна браузера. Следует сказать, что этот атрибут не оказывает воздействие на текст ячейки, отформатированный при помощи тэгов <P>, <BR>.

Вложенные таблицы

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

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

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

Пример:

HTML-код:

<table border="1">

<tr>

<td>111</td>

<td>111</td>

<td>

<table border="1" bgcolor="#00ff00">

<tr>

<td>01</td>

<td>01</td>

</tr>

<tr>

<td>01</td>

<td>01</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>111</td>

<td>111</td>

<td>111</td>

</tr>

</table>

Отображение в браузере:

111 111
01 | 01
01 | 01
111 111 111
Обтекание таблицы текстом

Атрибут ALIGN, используемый для задания признака обтекания таблиц текстом, может принимать два значения - left, right. Первое - заставляет браузер поместить таблицу слева от текста, второе - справа.

Если необходимо, чтобы форматированию подвергся определенный фрагмент текста, надо применить тэг <BR> с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой обтекание отменяется. Значения left, right, all атрибута CLEAR позволяет определить, с какой стороны текст далее будет свободен от таблицы.

Пример:

HTML-код:

<table border="1" align="left">

<tr>

<td>11</td>

<td>11</td>

</tr>

<tr>

<td>11</td>

<td>11</td>

</tr>

</table>

<p>Текст обтекает таблицу</p>

<br clear="left">

<p>Текст не обтекает таблицу</p>

Отображение в браузере:

11 | 11
11 | 11

Текст обтекает таблицу

Текст не обтекает таблицу

Дополнительная информация по теме:


Гиперссылки

Гиперссылка на другую страницу

Гиперссылка в пределах страницы

Почтовая гиперссылка

Открытие страниц в новом окне

Цвет текста гиперссылок

Порядок перехода по гиперссылкам

Гиперссылка на другую страницу

Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит дескриптор <A>

Пример:

HTML-код:

<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>

<a href="index.html">Ссылка на начало учебника</a>

Отображение в браузере:

Ссылка на главную страницу сайта
Ссылка на начало учебника
Гиперссылка в пределах страницы

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

Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.

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

Пример:

HTML-код:

<a href="#Начало страницы">Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

<a name="Начало страницы"></a>

Отображение в браузере:

Наверх страницы
Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.

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

Пример:

HTML-код:

<a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a>

Отображение в браузере:

admin@on-line-teaching.com
Открытие страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код:

<a href="index.html" target="_blank"">Ссылка на первую страницу учебника</a>

Отображение в браузере:

Ссылка на первую страницу учебника
Цвет текста гиперссылок

Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.

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

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

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

Дополнительная информация по теме:


Фреймы

Создание фреймов

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

Полосы прокрутки фреймов

Изменение границ фреймов

Плавающие фреймы

Создание фреймов

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

Очень удобно использовать фреймы когда необходимо отображать на экране данные из разных источников. Чтобы сделать фрейм, надо создать новую Вэб-страницу, с тэгами <FRAMESET> <FRAME>.

Дескриптор <FRAMESET> формирует набор фреймов, которые делят пространство окна на строки и столбцы. Далее необходимо задать значения высоты/ширины всех строк/столбцов, выраженные в процентах относительно текущих габаритов окна браузера, пикселях или в виде символа звездочки. Символ звездочки говорит о том, что размеры фреймов зависят от габаритов остальных фреймов страницы.

Дескриптор <FRAME> служит для определения структуры и содержимого конкретного фрейма.

Ниже, в качестве примера, приведен код страницы, которую можно посмотреть здесь.

<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<frameset rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</frameset>
</html>
Достоинства и недостатки фреймов

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

Достоинства:

- фреймы одновременно отображают различную информацию в пределах одного окна;

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

- можно гибко построить навигацию по сайту.

Недостатки:

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

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

- при низком разрешении экрана монитора объем видимой информации значительно уменьшается;

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

Еще одним из недостатков фреймов является тот факт, что некоторые браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг <NOFRAMES>. Текст, помещенный между открывающим и закрывающим тэгом, отображается в случае невозможности отображения фрейма.

Полосы прокрутки фреймов

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

Изменение границ фреймов

Для запрещения изменения границ фрейма применяется атрибут NORESIZE. Это удобно, если надо запретить пользователю модифицировать исходную компоновку страницы. По умолчанию пользователь может перемещать границы фрейма по своему желанию, задавая новые размеры объекта, чтобы лучше рассмотреть определенный фрагмент данных. Если фреймы лишены видимых границ, это автоматически влечет запрет на изменение их размеров. Атрибут BORDER тэга <FRAMESET> дает возможность изменять толщину линий, обрамляющих фрейм. По умолчанию браузер заключает фрейм в рамку, равной 6 пикселям и окрашивает его в серый цвет. Изменить цвет можно при помощи атрибута BORDERCOLOR. Для сокрытия границ фрейма служит атрибут FRAMEBORDER.

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

Атрибут MARGINWIDTH позволяет задавать ширину левого и правого поля.

Атрибут MARGINHEIGHT - высоту верхнего и нижнего поля.

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

Плавающие фреймы

Для создания плавающих фреймов служит тэг <IFRAME>. Плавающим называется фрейм, представляющий собой часть вэб-страницы и не требующий построения отдельной страницы с описанием фреймов. Атрибут NAME служит для задания имени плавающего фрейма, которое может затем быть использовано в определении гиперссылки с целью открытия в этом фрейме соответствующей страницы.

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

Плавающие фреймы в данное время поддерживаются только Microsoft IE.

Ниже, в качестве примера, приведен код страницы, которую можно посмотреть здесь.

<html>
<head>
<title>Пример работы с фреймами</title>
</head>
<body>
<iframe src="lsn017.html" name="frame1"
width="350" height="300" align="left"></iframe>
<h1>Пример работы с фреймами</h1>
..
<h1>Пример работы с фреймами</h1>
</body>
</frameset>
</html>

Дополнительная информация по теме:


Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами

Пример работы с фреймами


Что такое формы.

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

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

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

Формы должны быть просты и удобны в работе. Желательно чтобы форма помещалась в пределах одного экрана. Для этого она должна содержать не более 30 текстовых строк по вертикали и 70 символов по горизонтали.

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

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

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

Когда сервер получает информацию о заполненной форме, он запускает на выполнение одну или несколько программ, которые называются CGI (Common Gateway Interface). Сценарий CGI определяет правила обработки данных. К примеру, он может отослать результаты заполнения формы на электронную почту или внести их в базу данных. Такие сценарии, как правило, создаются на языке Perl.

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

Обычно CGI-сценарии хранятся на сервере в папке cgi-bin. В Интернете существует масса готовых бесплатных сценариев, которые можно "прикрутить" к своему сайту.

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

Дополнительная информация по теме:


Что такое JavaScript

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

Чтобы поместить в текст Вэб-страницы сценарий JavaScript, надо ввести дескриптор <SCRIPT>. Код JavaScript располагается между тэгами <SCRIPT> </SCRIPT>. Код HTML в этом месте размещать нельзя. Код можно размещать как в теле заголовка страницы (между тэгами <HEAD> </HEAD>), так и в теле страницы (между тэгами <BODY> </BODY>).

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

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

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

<script language=JavaScript src="../vnu_datestamp.js">
</script>

Дополнительная информация по теме:


Маленькие секреты Web-дизайна

Создание бегущей строки

Размещение текста поверх изображения

Создание всплывающих подсказок

Создание водяного знака

Создание бегущей строки

Для того чтобы создать бегущую строку, надо воспользоваться дескриптором <MARQUEE>.

Управлять движением позволяет атрибут BEHAVIOR.

Значение scroll - заставляет строку появляться с одной стороны экрана и исчезать за противоположной стороной.

Значение slide - строка появляется из-за одной стороны экрана и останавливается у другой.

Значение alternate - заставляет строку бегать взад-вперед.

Атрибут DIRECTION задает направление перемещения строки.

Атрибут LOOP - определяет количество циклов перемещения.

Атрибут BGCOLOR - позволяет изменять цвет фона бегущей строки.

Атрибут SCROLLAMOUNT - служит для задания шага перемещения строки в экранных пикселях.

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

Ниже приведены примеры бегущих строк. Следует сказать, что дескриптор <MARQUEE> до последнего времени поддерживался только Microsoft IE.

Пример:

HTML-код:

<marquee behavior="scroll" direction="left">Бегущая строка 1</marquee>

<marquee behavior="alternate" direction="right" loop="30" scrollamount="10">Бегущая строка 2</marquee>

<marquee behavior="scroll" direction="left" scrolldelay="500" bgcolor="#00ff00">Бегущая строка 3</marquee>

 Бегущая строка 1 Бегущая строка 2 Бегущая строка 3
Размещение текста поверх изображения

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

Надо создать таблицу, состоящую из одной строки и одного столбца. Чтобы удалить обрамление и свободные участки между ячейкой и границей таблицы, надо атрибутам BORDER CELLPADDING CELLSPACING присвоить нулевые значения. Атрибутами WIDTH HEIGHT надо "подогнать" размеры таблицы под размер изображения.

Вот и все. Пример смотрите ниже.

Пример:

HTML-код:

<table border="0" cellpadding="0" cellspacing="0" background="img/tigr.jpg" height="41" width="50"><tr><td>

Это тигр

</td></tr></table>

Отображение в браузере:

Это тигр
Создание всплывающих подсказок

Для создания всплывающих подсказок служит атрибут TITLE. Этот атрибут можно применять в контексте многих тэгов. Например, если применить этот атрибут в теле дескриптора гиперссылки <A>, то при наведении курсора на данную гиперссылку, пользователю будет показан текст, набранный в атрибуте TITLE.

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

Создание водяного знака

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

Для создания водяного знака надо в теле тэга <BODY> для определения графического фона, использовать атрибут BACKGROUND. Для предотвращения перемещения фона надо атрибуту BGPROPERTIES присвоить значение fixed.

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

Дополнительная информация по теме:


Эффект постепенной прорисовки

Microsoft IE позволяет сделать эффект постепенной прорисовки страницы при ее открытии или закрытии. Для этого используется дескриптор <META>. Чтобы эффект появлялся в момент открытия страницы, надо указать тип прорисовки Page-Enter, перед закрытием страницы - Page-Exit. Каждому виду прорисовки соответствует определенный номер (от 0 до 23). Определяя параметры прорисовки необходимо указывать временной интервал продолжительности процесса прорисовки.

Например:

<meta http-equiv="Page-Enter"
content="RevealTrans (Duration=5, Transition=2)">

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

0 Box in

1 Box out

2 Circle in

3 Circle out

4 Wipe up

5 Wipe down

6 Wipe right

7 Wipe left

8 Vertical blinds

9 Horizontal blinds

10 Checkboard across

11 Checkboard down

12 Random Dissolve

13 Split vertical in

14 Split vertical out

15 Split horizontal in

16 Split horizontal out

17 Strips left down

18 Strips left up

19 Strips right down

20 Strips right up

21 Random bars horizontal

22 Random bars vertical

23 Random transition

Дополнительная информация по теме:


Карта ссылок

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

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

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

Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла.

Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника.

Круг (circle). В этом случае задается координата центра круга и его радиус.

Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора <IMG>, затем, при помощи атрибута USEMAP, присвоить ему имя. После этого можно приступить непосредственно к вводу данных при помощи тэга <MAP>.

Дескриптор <AREA> определяет зоны изображения карты ссылок.

Атрибут SHAPE описывает форму зоны карты ссылок.

Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).

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

Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.

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

Северо-восточная часть Австралии Северо-западная часть Австралии Юго-восточная часть Австралии Юго-западная часть Австралии

<center>
<img src="img/map.jpg" width="132" height="121"
border="0" usemap="#australia">
</center>

<map name="australia">

<area shape="rect" coords="0,0,68,60"
href="lsn022_1.html" target="_blank"
alt="Северо-восточная часть Австралии">

<area shape="rect" coords="68,0,132,60"
href="lsn022_2.html" target="_blank"
alt="Северо-западная часть Австралии">

<area shape="rect" coords="0,60,68,120"
href="lsn022_3.html" target="_blank"
alt="Юго-восточная часть Австралии">

<area shape="rect" coords="68,60,132,120"
href="lsn022_4.html" target="_blank"
alt="Юго-западная часть Австралии">

</map>

Дополнительная информация по теме:


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

Лист стилей (CSS - Cascading Style Sheets) - позволяет сосредоточить описания признаков форматирования Вэб-страниц в одном месте и дает возможность избежать необходимости их повторного ввода в дескрипторах.

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

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

Пример:

HTML-код:

<head>

<style>

H6{text-align: right; font-style: italic; color: blue}

</style>

</head>

<h6>Этот текст отформатирован при помощи внутреннего листа стилей</h6>

Отображение в браузере:

Этот текст отформатирован при помощи внутреннего листа стилей

Дополнительная информация по теме:


Работа с листами стилей

Внешний лист стилей

Частное определение стилей

Атрибут ID

Класс стилей

Форматирование произвольного фрагмента Вэб-страницы

Внешний лист стилей

Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей надо в теле <HEAD> после заголовка <TITLE> </TITLE> прописать следующую строчку

<link rel="stylesheet" href="../style.css" type="text/css">

Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.

Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.

Частное определение стилей

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

Пример:

HTML-код:

<p>Стандартный абзац</p>

<p style="font-style:italic; color:red; text-align:right">Абзац с применением частного стиля</p>

Отображение в браузере:

Стандартный абзац

Абзац с применением частного стиля
Атрибут ID

Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.

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

<STYLE>
P#ital{font-style:italic}
<STYLE>

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

Пример:

HTML-код:

<p ID="ital">Абзац с применением атрибута ID</p>

Отображение в браузере:

Абзац с применением атрибута ID
Класс стилей

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

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

<STYLE>
P.ital{font-style:italic}
<STYLE>

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

Пример:

HTML-код:

<p class="ital">Абзац с применением класса стиля</p>

Отображение в браузере:

Абзац с применением класса стиля

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

<STYLE>
.ital{font-style:italic}
<STYLE>
Форматирование произвольного фрагмента Вэб-страницы

Если надо применить стиль к произвольному фрагменту Вэб-страницы, то для этого используется тэг <DIV>. При этом форматируется фрагмент данных, независимо от принадлежности определенным дескрипторам.

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

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

<STYLE>
DIV.ital{font-style:italic}
<STYLE>
...
<DIV class="ital">
Фрагмент Вэб-страницы
</DIV>

Дополнительная информация по теме:


Свойства шрифта - font

font-family

font-size

font-style

font-weight

font-variant

font-family

font-family - определяет тип используемого шрифта.

Можно указывать шрифт либо по названию (Arial), либо по типу (serif).

Если шрифт задавать именем, то желательно указать несколько шрифтов, т.к. у пользователя может не оказаться нужного. Рекомендуется использовать хотя бы один из общеупотребительных, например Arial.

Тип шрифтов можно задавать следующий - monospace, serif, sans-serif, cursive, fantasy. Рекомендуется тип шрифта указывать в конце списка, тем самым обезопасив себя в случае, если ни одного из предусмотренных шрифтов не окажется в наличии.

font-size

font-size - определяет размер шрифта.

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

Можно задавать размер шрифта при помощи предопределенных констант(xx-small, x-small, small, medium, large, x-large, x-large, xx-large).

Либо при помощи относительных единиц (larger, smaller)

font-style

font-style - позволяет задавать признак курсивного начертания текста.

Допустимые значения: normal, italic, oblique

Предопределенная константа italic предназначена для выбора курсивной версии текущего шрифта, а oblique - наклонного варианта его начертания. Оба варианта одного шрифта различаются только углом наклона.

font-weight

font-weight - позволяет отобразить текст полужирным шрифтом.

Для изменения степени "жирности" текста используются следующие значения: normal, bold, bolder, lighter или числа от 100 до 900. Значение 100 соответствует самому светлому шрифту, 900 - самому жирному.

font-variant

font-variant - определение вид текста - обычный, либо написание заглавными буквами размером в строчные. Допустимые значения: normal, small-caps

Свойство color позволяет задать нужный цвет шрифта. Цвет шрифта может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

<p style="font-family:sans-serif;
font-size:larger; font-style:italic;
font-weight:600; font-variant:small-caps; color:red">
Пример использования свойства шрифта font</p>

Пример использования свойства шрифта font

Дополнительная информация по теме:


Свойства текста

text-align

text-indent

text-transform

text-decoration

vertical-align

letter-spacing

line-height

list-style

text-align

text-align - принудительно задает нужный признак выравнивания текста.

Фрагмент текста, подлежащий выравниванию с помощью этого свойства, должен быть описан средствами одного из дескрипторов уровня блока (P, TABLE), которые предусматривают обрамление текста пустыми строками сверху и снизу. Допустимые значения: left (влево), right (вправо), center (по центру), justify (по ширине).

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

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

text-indent

text-indent - задает отступ (сдвиг вправо) для первой строки абзаца.

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

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

text-transform

text-transform - изменяет регистр символов фрагментов текста.

Параметр capitalize приводит к верхнему регистру первые буквы всех слов фрагментов текста.

Параметр uppercase преобразует все символы текста в верхний регистр.

Параметр lowercase преобразует все символы текста в нижний регистр.

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

text-decoration

text-decoration - позволяет отметить линиями все фрагменты текста Вэб-страницы.

Параметр underline служит для задания параметра подчеркивания текста.

Параметр line-through служит для задания параметра зачеркивания текста.

Параметр overline служит для размещения линии над фрагментом текста.

Параметр none удаляет все признаки форматирования.

vertical-align

vertical-align - позволяет задать признак вертикального выравнивания для элемента Вэб-страницы.

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

Параметр text-top выравнивает элементы относительно верхней границы последнего фрагмента текста.

Параметр text-bottom выравнивает элементы относительно нижней границы последнего фрагмента текста.

Параметр middle выравнивает элементы страницы относительно средних осей соседних объектов.

Параметр top выравнивает элементы относительно высшей точки, принадлежащей объектам, которые расположены в одной строке.

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

Параметр sub - переводит элемент в нижний регистр.

Параметр super - переводит элемент в верхний регистр.

letter-spacing

letter-spacing - задает нужный межсимвольный интервал.

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

Отрицательное значение уменьшают величину интервала между символами.

line-height

line-height - задает нужный межстрочный интервал.

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

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

list-style

list-style - изменяет стиль представления всех маркированных и нумерованных списков.

Для выбора маркера служат значения circle, disk, square.

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

Для представления нумерованного списка надо использовать значения decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i,ii,iii)upper-roman (I, II, III).

Значения inside и outside позволяют задать положение маркеров или номеров относительно текста элементов списка. Первое обеспечивает возможность обтекания маркера текстом чрезмерно длинного элемента списка. Во втором случае маркеры остаются вне текста элементов списка.

Дополнительная информация по теме:


Свойство фона - background.

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

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

Атрибут repeat определяет степень повторяемости фоновой картинки и может иметь следующие значения:

repeat - картинка бесконечно повторяется по горизонтали и вертикали, заполняя собой все фоновое пространство браузера;

repeat-x - картинка повторяется по горизонтали;

repeat-y - картинка повторяется по вертикали;

no-repeat - картинка не повторяется.

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

Атрибут scroll - определяет подвижность/статичность фона:

scroll - фон перемещается вместе с содержимым страницы;

fixed - фоновая графика статична.

Свойство background -position определяет положение картинки в окне браузера (top, middle, bottom, left, center, right). При копировании изображения с целью заполнения площади элемента браузер воспринимает значение этого свойства в качестве отправной точки. Координаты начального положения изображения можно задавать в виде процентных отношений (20%), либо абсолютных значений в пикселях (15px), либо констант (top left).

Для изменения цвета фона служит свойство background-color.

Цвет фона может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Значение transparent указывает на то, что фон является прозрачным, т.е. отсутствует.

Дополнительная информация по теме:


Рамки и размеры

Пустые области вокруг элементов Вэб-страницы

Рамки

Поля

Обтекание текстом

Задание размеров

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

- полосами чистого пространства,

- рамкой,

- полями.

Пустые области вокруг элементов Вэб-страницы

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

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

Свойство padding задает размеры области, отделяющее содержимое от рамки.

Свойства padding-left, padding-right, padding-top, padding-bottom позволяют отдельно задавать размеры соответствующих полос чистого пространства вокруг элемента.

Рамки

Свойство border позволяет облечь в рамку любой элемент Вэб-страницы.

Для задания толщины border-width рамки применяются константы thin(тонкая), medium(средняя), thick(толстая). В качестве значений размера можно задавать величины, выраженные в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании размера при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Задавая параметры рамки, надо определить стиль ее представления border-style - solid, double, groove, ridge, inset, outset, dotted, dashed.

Цвет рамки border-color может задаваться посредством наименования (red, yellow), шестнадцатеричным значением (#FF00AA), функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Все вышеуказанные свойства можно детализировать для верхней (top), нижней (bottom), левой (left), правой (right) частей рамки.

Т.е.:

border-top, border-right, border-left, border-bottom.

Поля

Свойства margin-top, margin-bottom, margin-left, margin-right позволяют задавать размеры соответствующего поля для элемента Вэб-страницы.

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

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

Задание отрицательной величины поля приводит к его сужению.

Обтекание текстом

Свойство float позволяет задать параметр обтекания текстом для любого элемента Вэб-страницы. Это свойство допускает два значения - left, right. Первое значение заставляет браузер помещать элемент слева от текста, а второе - справа. Свойство float нельзя применить по отношению к элементам страницы, размещенными средствами абсолютного позиционирования.

Свойство clear со значениями left, right, both позволяет отменить действие механизма обтекания элементов страницы текстом. Так значение left указывает, что текст не должен уступать место элементам, определенным посредством стиля float:left. Функция both отменяет обтекание во всех случаях.

Задание размеров

Для задания высоты и ширины размеров любого элемента Вэб-страницы служат свойства height, width.

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

Дополнительная информация по теме:


Относительное и абсолютное позиционирование элементов

Способ воспроизведения элементов

Разрыв страницы

Относительное позиционирование

Абсолютное позиционирование

Способ воспроизведения элементов

Свойство display позволяет задать способ воспроизведения элемента Вэб-страницы.

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

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

Значение list-item служит для придания объекту статуса элемента списка. Такие объекты воспроизводятся как элементы списка, снабженные маркерами.

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

Разрыв страницы

Для указания места разрыва страницы при печати документа используются свойства page-break-before, page-break-after со значениями always, avoid.

Свойство page-break-before со значением always указывает браузеру располагать символы разрыва страницы перед каждым элементом, описанным с помощью конкретного дескриптора. Так, например, при использовании этого свойства в определении стиля для тэга Н3 браузер будет печатать разделы документа, начинающиеся с заголовка Н3 на новой странице.

Свойство page-break-after со значением always указывает браузеру располагать символы разрыва страницы после элемента.

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

Относительное позиционирование

Для относительного позиционирования элементов Вэб-страницы служит свойство position со значением relative. При этом браузер не влияет на положение других элементов Вэб-страницы.

Для указания направления смещения служат свойства top, bottom, left, right.

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

Пример:

HTML-код:

<style>

p.rel{position:relative;bottom:27px;left:1px;color:red}

</style>

...

<p>Пример относительного позиционирования</p>

<p class="rel">Пример относительного позиционирования</p>

Отображение в браузере:

Пример относительного позиционирования

Пример относительного позиционирования
Абсолютное позиционирование

Для абсолютного позиционирования элементов Вэб-страницы служит свойство position со значением absolute. При этом браузер "вырывает" элементы абсолютного позиционирования из общего контекста страницы, причем соседние элементы сдвигаются, занимая "освободившееся" пространство.

Для указания направления отсчета координат элемента относительно сторон "родительского" объекта (обычно Вэб-страницы) служат свойства top, bottom, left, right. Например, при задании свойства top, отсчет будет вестись от верхней границы.

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

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

Дополнительная информация по теме:


Основные Мета тэги

Дескрипторы <META> - необязательные дескрипторы Вэб-страницы. Они располагаются в теле <HEAD>, после заголовка <TITLE>. Эти дескрипторы содержат описание страницы, ключевые слова, информацию об авторе, команды для роботов и прочую служебную информацию. Другими словами можно сказать, что это визитная карточка страницы для различных служб Интернета.

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

<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">

Указание типа документа и его кодировки.

<META NAME="Title" CONTENT="Заголовок страницы">

Указание заголовка страницы.

<META NAME="Description" CONTENT="Описание вашей страницы.">

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

<META NAME="Keywords" CONTENT="Ключевые слова.">

Список ключевых слов страницы. Зачастую используется поисковыми машинами. Ключевые слова должны быть простыми и обязаны описывать суть страницы.

Если содержание Вашей страницы часто меняется, то вставьте следующие два тега:

<META NAME="Document-state" CONTENT="Dynamic">

Указывает, что страница динамичная, т.е. ее содержание периодически меняется.

<META NAME="Revizit-after" CONTENT="10 days">

Указывает роботу периодичность смены информации.

<META NAME="Document-state" CONTENT="Static">

Указывает, что страница статичная, т.е. ее содержание не меняется.

<META NAME="author" content="Автор">

Тег, в который вы можете вписать своё имя.

<META HTTP-EQUIV="Reply-to" content="mail@pochta.ru">

Тег для указания адреса электронной почты автора.

<META NAME="Copyright" content="Авторские права">

Описание авторских прав на документ.

Дополнительная информация по теме:


Дескрипторы HTML и их атрибуты

В таблице представлены наиболее часто употребляемые тэги и их атрибуты

Наименование дескриптора/атрибута | Описание
<A> | Гиперссылка
accesskey | Определение "горячей клавиши" для гиперссылки
href | Определяет имя и местоположение объекта гиперссылки
name | Служит для именования области Вэб-страницы
tabindex | Определяет порядок перехода по гиперссылкам
target | Определяет окно для отображения объекта гиперссылки
<AREA> | Определяет информацию зоны карты ссылок
alt | Задает текстовый ярлык для зоны карты ссылок
coords | Задает координаты характерных точек зоны карты ссылок
href | Задает имя и местоположение файла, связанного с зоной карты ссылок
shape | Задает форму зоны карты ссылок
tabindex | Задает порядок перехода по зонам карты ссылок
<B> | Признак полужирного начертания текста
<BASEFONT> | Изменяет внешний вид всего текста
size | Изменяет размер шрифта всего текста
<BIG> | Укрупняет шрифт относительно размера соседнего текста
<BLOCKQUOTE> | Создает блок цитаты
<BODY> | Тело Вэб-страницы - описывает ее содержимое
alink, link, vlink | Опрделеляют цвет гиперссылок
background | Определяет графический фон
bgcolor | Изменяет цвет фона
bgproperties | Определяет возможность перемещения графического фона при пролистывании страницы
bottommargin | Изменяет высоту нижнего поля
leftmargin | Изменяет ширину левого поля
marginheight | Изменяет высоту верхнего и нижнего полей
marginwidth | Изменяет ширину левого и правого полей
rightmargin | Изменяет ширину правого поля
text | Изменяет цвет текста
topmargin | Изменяет высоту верхнего поля
<BR> | Создает новую строку
clear | Предотвращает перенос слов текста
<CAPTION> | Снабжает таблицу заголовком
align | Задает признак выравнивания заголовка таблицы
<CENTER> | Центрирует элемент Web-страницы
<COL> | Создает неструктурную группу столбцов таблицы
align | Задает признак выравнивания данных в ячейках группы по горизонтали
bgcolor | Задает цвет фона ячеек группы
char | Задает символ, определяющий порядок выравнивания данных в ячейках группы
span | Задает количество столбцов в группе
valign | Задает признак выравнивания данных в ячейках группы по вертикали
<COLGROUP> | Создает структурную группу столбцов таблицы
align | Создает признак выравнивания данных в ячейках группы по горизонтали
bgcolor | Задает цвет фона ячеек группы
char | Задает символ, определяющий порядок выравнивания данных в ячейках группы
span | Определяет количество столбцов в группе
valign | Задает признак выравнивания данных в ячейках группы по вертикали
<DD> | Отмечает статью определения в списке определений
<DEL> | Снабжает текст признаком зачеркивания
<DIV> | Делит Вэб-страницу на области с целью применения стилей
class | Определяет стиль, применяемый для области Вэб-страницы
<DL> | Создает список определений
<DT> | Отмечает текст термина в списке определений
<EM> | Выделяет текст курсивом
<FIELDSET> | Создает группы элементов формы
<FONT> | Изменяет внешний вид текста
color | Изменяет цвет текста
face | Изменяет шрифт текста
size | Изменяет размер шрифта
<FORM> | Создает форму
accept-charset | Задает формат кодировки данных
action | Задает место назначения данных формы
enctype | Определяет формат передаваемых данных формы
method | Задает способ пересылки данных формы по сети
target | Определяет место отображения сообщения о доставке данных формы
<FRAME> | Определяет набор данных фрейма
bordercolor | изменяет цвет линий рамки фрейма
frameborder | Обеспечивает сокрытие рамки фрейма
marginheight | Изменяет высоту верхнего и нижнего полей фрейма
marginwidth | Изменяет ширину левого и правого полей фрейма
name | Служит для именования фрейма
noresize | Предотвращает возможность изменения размеров фрейма
scrolling | Обеспечивает сокрытие или отображение полос прокрутки фрейма
src | Определяет имя и местоположение файла данных, отображаемых фреймом
<FRAMESET> | Создает набор фреймов
border | Изменяет толщину линий рамок фреймов
bordercolor | изменяет цвет линий рамок фреймов
cols | Создает столбцы рамок фреймов
frameborder | Скрывает рамки фреймов
framespacing | Задает толщину линий рамок фреймов
rows | Создает строки фреймов
<H1>..<H6> | Заголовки разных уровней
align | Признак выравнивания заголовка
<HEAD> | Определяет раздел заголовка Вэб-страницы
<HR> | Создает горизонтальную линейку
align | Признак выравнивания линейки
noshade | Эффект объемности горизонтальной линейки
size | Задает толщину линейки
width | Задает ширину линейки
<HTML> | Определяет данные как доккумент HTML
<I> | Признак курсивного начертания текста
<IFRAME> | Создает плавающий фрейм
<IMG> | Вставляет графическое изображение в текст Вэб-страницы
align | Задает признаки выравнивания текста относительно изображения
alt | Отображает альтернативный текст при отсутствии графики
border | Заключает изображение в рамку
dynsrc | Создает внедренный объект видео
height, width | Задает высоту и ширину графического изображения
hspace, vspace | Обрамляет графическое изображение полосами чистого пространства
ismap | Создает карту ссылок
lowsrc | Указывает имя и расположение файла изображения низкого разрешения
name | Именует изображение
src | Определяет имя и местоположение файла графического изображения
tabindex | Определяет порядок перехода по изображениям
usemap | Определяет имя карты ссылок
<INS> | Подчеркивает вставленный фрагмент текста
<KBD> | Выделяет текст, который необходимо ввести
<LAYER> | Позиционирует слой (группу элементов) страницы
height, width | Задает высоту и ширину слоя
left | Координата слоя относительно левой кромки окна
top | Координата слоя относительно верхней кромки окна
z-index | Задает приоритет воспроизведения перекрывающихся элементов слоя
<LI> | Определяет элемент списка
type | Стиль маркирования элемента списка
value | Устанавливает номер элемента списка
<LINK> | Ссылка на файл внешнего листа стилей
href | Определяет имя и местоположение файла внешнего листа стилей
rel | Тип отношения внешнего листа стилей к Вэб-странице
type | Формат внешнего листа стилей
<MAP> | Создает карту ссылок
name | Именование карты ссылок
<MARQUEE> | Создает объект бегущей строки
behavior | Способ поведения бегущей строки
bgcolor | Задает цвет фона бегущей строки
direction | Направление перемещения бегущей строки
height, width | Высота и ширина бегущей строки
hspace, vspace | Обрамление бегущей строки полосами чистого пространства
loop | Число циклов перемещения бегущей строки
scrollamount | Шаг единовременного перемещения бегущей строки
scrolldelay | Величина задержки между отдельными тактами перемещения текста бегущей строки
truespeed | Определяет минимальное значение нтервала задержки scrolldelay
<META> | Служебная информация о Вэб-странице для поисковых роботов
<NOBR> | Запрет перехода текста на новую строку
<NOFRAMES> | Отображает альтернативный текст при невозможности показа фреймов
<NOSCRIPT> | Отображает альтернативный текст при невозможности исполнения сценариев JavaScript
<OL> | Создает нумерованный список
start | Задает начальный номер элементов списка
type | Определяет стиль нумерации списка
<P> | Создает новый абзац
align | Признак выравнивания текста абзаца
<PRE> | Возможность сохранения признаков предварительного форматирования
<Q> | Краткий блок цитаты
<SAMP> | Выделяет текст примеров
<SCRIPT> | Создает объект сценария JavaScript
<SMALL> | Уменьшает шрифт относительно размера соседнего текста
<SPACER> | Добавляет блок чистого пространства
align | Признак обтекания блока текстом
height, width | Высота и ширина блока чистого пространства
type | Тип блока
<STRIKE> | Признак зачеркивания текста
<STRONG> | Полужирный текст
<STYLE> | Преобразует текст в подстрочный индекс
<SUB> | Преобразует текст в надстрочный индекс
<SUP> |
<TABLE> | Создает таблицу
align | Признак обтекания таблицы текстом
background | Графический фон таблицы
bgcolor | Цвет фона таблицы
border | Задает толщину линии рамки
bordercolor | Цвет линий рамки
cellpadding | Определяет размер полос чистого пространства, отделяющего содержимое ячеек таблицы от ее границ
callspacing | Определяет размеры полос чистого пространства, разделяющих ячейки таблицы.
frame | Определяет набор линий рамки таблицы, которые будут показаны
height, width | Высота и ширина таблицы
rules | Определяет набор внутренних линий таблицы, которые будут показаны
<TBODY> | Группа строк данных таблицы
align | Способ выравнивания данных по горизонтали
bgcolor | Цвет фона группы
char | Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign | Способ выравнивания данных по вертикали
<TD><TH> | Определяют ячейку данных и ячейку заголовка таблицы
align | Способ выравнивания по горизонтали
background | Графический фон ячеек
bgcolor | Цвет фона ячеек
char | Задает символ, определяющий порядок выравнивания данных в ячейках
colspan | Объединяет соседние ячейки одной строки таблицы
height, width | Высота и ширина ячейки
nowrap | Запрещает перенос слов внутри ячейки на новую строку
rowspan | Объединяет соседние ячейки одного столбца
valign | Способ выравнивания данных по вертикали
<TFOOT> | Создает группу строк итоговых данных таблицы
align | Способ выравнивания данных по горизонтали
bgcolor | Цвет фона
char | Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign | Способ выравнивания данных по вертикали
<THEAD> |
align | Способ выравнивания данных по горизонтали
bgcolor | Цвет фона
char | Задает символ, определяющий порядок выравнивания данных в ячейках группы
valign | Способ выравнивания данных по вертикали
<TITLE> | Заголовок Вэб-страницы
<TR> | Создает строку таблицы
align | Способ выравнивания данных по горизонтали
bgcolor | Цвет фона
char | Задает символ, определяющий порядок выравнивания данных в ячейках строки
valign | Способ выравнивания данных по вертикали
<TT> | Воспроизведение текста моноширинным шрифтом
<U> | Подчеркивание текста
<UL> | Создает маркированный список
type | Стиль маркированного списка

Дополнительная информация по теме:


Свойства css

Свойство | Описание
background | Создает графический фон, изменяет цвет фона
background-attachment | Определяет принак статичности графического фона
background-image | Создается графический фон элемента
background-position | Задает начальную точку размещения фонового графического изображения
beckground-repeat | Определяет способ копирования графических изображений фона
border | Заключает элемент в рамку
border-bottom | Определяет свойства нижней части рамки
border-color | Определяет цвет линий рамки
border-left | Определяет свойства левой части рамки
border-right | Определяет свойства правой части рамки
border-style | Определяет стиль представления рамки
border-top | Определяет свойства верхней части рамки
border-width | Определяет толщину линий рамки
bottom | Задает направление относительного или абсолютного позиционирования элемента
clear | Прекращает действие функций обтекания элемента текстом
color | Изменяет цвет элемента
display | Задает способ воспроизведения элемента
float | Обеспечивает возможность обтекания элемента текстом
font | Изменяет свойства шрифта
font-family | Изменяет шрифт текста
font-size | Изменяет размер шрифта текста
font-style | Задает тип начертания шрифта
font-variant | Воспроизводит текст малыми прописными буквами
font-weight | Задает тип полужирного начертания текста
height | Определяет высоту элемента
left | Задает направление относительного или абсолютного позиционирования элемента
letter-spacing | Изменяет межсимвольный интервал
line-height | Изменяет межстрочный интервал
list-style | Задает стиль нумерации или маркирования списков
margin | Определяет размеры всех полей элемента
margin-bottom | Определяет высоту нижнего поля элемента
margin-left | Определяет ширину левого поля элемента
margin-right | Определяет ширину правого поля элемента
margin-top | Определяет высоту верхнего поля элемента
padding | Определяет размеры всех полос чистого пространства вокруг элемента
padding-bottom | Определяет высоту нижней полосы чистого пространства
padding-left | Определяет ширину левой полосы чистого пространства
padding-right | Определяет ширину правой полосы чистого пространства
padding-top | Определяет высоту верхней полосы чистого пространства
page-break-after | Вводит символ разрыва страницы после элемента
page-break-before | Вводит символ разрыва страницы перед элементом
position | Задает абсолютную или относительную позицию элемента
right | Задает направление относительного или абсолютного позиционирования элемента
text-align | Устанавливает признак выравнивания текста
text-decoration | Задает признак выделения текста линиями
text-indent | Задает величину отступа для первой строки абзаца текста
text-transform | Изменяет регистр символов текста
top | Задает направление относительного или абсолютного позиционирования элемента
vertical-align | Задает признак выравнивания встроенного элемента по вертикали
width | Задает ширину элемента
word-spacing | Задает интервал между словами текста
z-index | Задает приоритет воспроизведения перекрывающихся элементов

Дополнительная информация по теме:


На этом теоретическая часть изучения языка HTML-разметки закончена. Как говорил известный герой: "Суха теория, мой друг, а древо жизни пышно зеленеет".

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

Дополнительная информация по теме:


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In Пример эффекта постепенной прорисовки Box In


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out Пример эффекта постепенной прорисовки Box Out


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in Пример эффекта постепенной прорисовки Circle in


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out Пример эффекта постепенной прорисовки Circle out


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up Пример эффекта постепенной прорисовки Wipe up


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down Пример эффекта постепенной прорисовки Wipe down


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right Пример эффекта постепенной прорисовки Wipe right


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left Пример эффекта постепенной прорисовки Wipe left


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds Пример эффекта постепенной прорисовки Vertical blinds


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds Пример эффекта постепенной прорисовки Horizontal blinds


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across Пример эффекта постепенной прорисовки Checkerboard across


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down Пример эффекта постепенной прорисовки Checkerboard down


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve Пример эффекта постепенной прорисовки Random dissolve


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in Пример эффекта постепенной прорисовки Split vertical in


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out Пример эффекта постепенной прорисовки Split vertical out


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in Пример эффекта постепенной прорисовки Split horizontal in


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out Пример эффекта постепенной прорисовки Split horizontal out


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down Пример эффекта постепенной прорисовки Strips left down


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up Пример эффекта постепенной прорисовки Strips left up


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down Пример эффекта постепенной прорисовки Strips right down


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up Пример эффекта постепенной прорисовки Strips right up


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal Пример эффекта постепенной прорисовки Random bars horizontal


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical Пример эффекта постепенной прорисовки Random bars vertical


Пример эффекта постепенной прорисовки

Назад

Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition Пример эффекта постепенной прорисовки Random transition