автордың кітабын онлайн тегін оқу HTML, XHTML и CSS
Е.Яковлева, Н. Комолова

Тегін үзінді

Оқу

Қосымшада тыңдау

Кітап туралы Дәйексөздер201 Қазір оқып жатыр419 Сөрелерде Тегін фрагмент

Н. Комолова, Е. Яковлева

HTML, XHTML и CSS

2014

Технический редактор Ю. Сергиенко

Литературный редактор Ю. Сергиенко

Художник Л. Адуевская

Корректор В. Листова

Верстка Л. Неволайнен

Н. Комолова, Е. Яковлева

HTML, XHTML и CSS. — СПб.: Питер, 2014.

ISBN 978-5-459-01011-4

Введение

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

Статистический отдел поисковой системы Яндекс провел анализ русскоязычной части Интернета. Согласно их исследованиям, на сегодняшний день насчитывается примерно 15 миллионов русскоязычных сайтов, что не превышает 6,5 процента от общего количества сайтов в сети. Создавайте русскоязычные сайты!

Официальным днем рождения Интернета считается 2 января 1969 года, когда Управление перспективных исследований (Advanced Research Project Agency, ARPA) Министерства обороны США начало работу над проектом связи оборонных компьютеров.

В 1970-е Интернет превратился в международную сеть. Первыми службами Интернета стали электронная почта (electronic mail, e-mail) и группы новостей (Usernet). В начале 1980-х годов был создан протокол управления передачей данных TCP/IP (Transmission Control Protocol/Internet Protocol). Он стал доминирующим в процессах обмена пакетами в ARPANet.

В 1984 году была предложена доменная система имен (Domain Name System, DNS), отображающая символьные имена на IP-адреса. До конца 1980-х годов Интернет существовал как объединение нескольких больших сетей.

В 1986 году Международная организация по стандартизации (International Organization for Standardizations, ISO) приняла первый стандарт ISO-8879, названный SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки). SGML — обогащенный метаязык, позволяющий строить системы логической и структурной разметки текстов любых уровней сложности.

Структурная разметка — форматирование текста, в которой управляющие коды не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, то есть задают его логическую структуру. SGML-документ требует определения типа документа (Document Type Definition, DTD). DTD посылается вместе с SGML-документом или включается в SGML-документ для того, чтобы можно было распознать теги, созданные пользователем. Язык SGML не получил распространения, однако его идеология повлияла на многие компьютерные разработки.

В 1989 году выпускник Оксфордского университета, бакалавр в области физики, сотрудник Европейского центра ядерных исследований (CERN) Тим Бернерс-Ли (Tim Berners-Lee) разработал язык HTML (HyperText Markup Language — язык разметки гипертекста), ставший основным языком создания веб-документов и прототипом Всемирной паутины (World Wide Web, WWW). По сути, язык HTML — это набор SGML-предписаний, сформулированный в виде DTD. В случае языка HTML определение типа документа хранится в браузере, и это определение намного проще, чем DTD языка SGML.

Однако нельзя сказать, что именно Тим Бернерс-Ли один все и придумал. К открытию подошло все человечество, накопив достаточные знания. Так, еще в середине двадцатого столетия Ванневар Буш (Vannevar Bush) объявил миру новое слово — «гипертекст», а Тед Нельсон (Ted Nelson) предложил создать «документарную вселенную», связав все тексты, произведенные человечеством на свет, перекрестными ссылками. Для работы с текстами был разработан специальный протокол передачи гипертекста (HyperText Transfer Protocol, HTTP).

Летом 1991 года проект WWW, покоривший научный мир Европы, пересек океан и влился в американский проект Интернет. Вспыхнувшее соперничество между Европой и Америкой за новую информационную технологию сошло «на нет» с переездом Тима Бернерса-Ли в США. В 1994-м он возглавил кафедру в Массачусетском технологическом институте, а затем — международный консорциум W3C (World Wide Web Consortium), играющий роль органа по стандартизации Всемирной паутины.

Консорциум W3C разработал стандарты, необходимые для дальнейшего развития World Wide Web. В 1996 году Консорциум W3C объявил о сотрудничестве с лидерами рынка в целях стандартизации программного обеспечения.

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

Появившийся в 1991 году язык HTML постоянно дорабатывался и дополнялся. Из всех этих видоизменений выделяют следующие версии:

• HTML 1.0. Первая версия языка, считая год его появления.

• HTML 2.0. Эта версия (RFC 1866) была разработана в 1994 году. Рабочая группа по HTML в составе IETF (Internet Engineering Task Force) ввела соответствующие изменения, и набор базовых элементов HTML 2.0 приобрел статус стандарта.

• HTML 3.0. Эта версия языка была реализована в начале 1996 года. Появилось много нововведений, включая теги для создания таблиц, для разметки математических формул, для вставки обтекаемых текстом рисунков, для вставки примечаний и т. д. Не нарушая основные концепции разметки гипертекста, авторы версии 3.0 ввели новое средство — каскадные листы стилей (Cascading Style Sheets, CSS).

• HTML 3.2. Эта версия языка была реализована в 1996 году. В ней были предусмотрены дополнительные элементы, предназначенные для создания апплетов, задания регистра символов и т. д. Версия HTML 3.2 стала компромиссным решением — попыткой примирить Microsoft и Netscape и объединить их оригинальные решения.

• HTML 4.0. Эта версия языка была реализована в 1997 году. Вторая скорректированная реализация вышла в 1998 году. В HTML 4.0 была введена поддержка мультимедиа, языков сценариев, а также средств воспроизведения документов для пользователей с физическими ограничениями.

• HTML 4.01. Эта версия вышла в 1999 году. В ней были исправлены ошибки, замеченные в предыдущей версии.

• HTML 5. Разработка этой версии началась в рабочей группе W3C в 2007 году и 22 января 2008 года появилась в новой спецификации. Спецификация и сейчас находится в разработке и может находиться в этой стадии еще несколько лет.

Для просмотра веб-документов в WWW необходимо специальное программное обеспечение. Такие программы называются браузерами (от англ. browse — листать, просматривать, читать).

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

В 1993 году был выпущен первый графический браузер Mosaic. Ныне существует довольно большое количество браузеров, из которых самыми популярными являются браузеры Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Chrome, Safari и NCSA Mosaic.

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

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

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

В феврале 1998 году был предложен язык XML (Extensible Markup Language — расширяемый язык разметки). Этот язык похож на HTML тем, что для описания различных разделов документа в нем используются теги. Однако в отличие от HTML язык XML позволяет разработчикам определять собственные теги и ставить им в соответствие собственные способы воспроизведения информации.

Язык Dynamic HTML (динамический язык HTML) — это попытка объединить объектную модель документа (Document Object Model, DOM), язык JavaScript и каскадные листы стилей (CSS). Dynamic HTML позволяет создавать интерактивные веб-страницы с расширенной поддержкой мультимедиа. Многие средства Dynamic HTML описаны в спецификации HTML 4.01.

Язык Java произошел от языка программирования Oak, ориентированного на работу в Интернете. Синтаксис языка Java близок к синтаксису языка C++. Программы на языке Java можно разделить на две большие группы. К первой группе относятся Java-приложения, предназначенные для автономной работы под управлением специальной интерпретирующей машины Java. Реализации этой машины созданы для всех основных компьютерных платформ. Вторая группа — это так называемые апплеты.

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

JavaScript — это язык сценариев, с помощью которого можно расширять возможности HTML-страниц. Многие элементы этого языка, предназначенные для поддержки дополнительных функциональных возможностей статических веб-страниц, разработала фирма Sun Microsystem. В отличие от Java-апплетов, загружаемых отдельно от HTML-документа, в котором они используются, программы, написанные на языке JavaScript, встраиваются непосредственно в HTML-документы с помощью элемента <script>.

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

VBScript — язык, который был разработан Microsoft как подмножество языка Visual Basic. VBScript создавался для работы с Internet Explorer и Microsoft Internet Information Server.

PHP — это язык сценариев, обрабатываемый сервером. PHP-код непосредственно включается в состав HTML-документа. Первоначальным названием PHP являлось Personal Home Page Tools (Персональная домашняя страница). Позднее эта технология, допускающая размещение на сервере выполняющихся скриптов веб-страниц, работающая, главным образом, на платформах Unix, Linux и Solaris, стала расшифровываться по-другому: PHP (PHP Hypertext Preprocessor).

В PHP реализованы лучшие решения многих языков, таких как C и Perl, кроме того, PHP предоставляет разработчику мощные средства для работы с базами данных. Слово Perl является аббревиатурой выражения Practical Extraction and Report Language. Подобно Perl, PHP — свободно распространяемая открытая система, и сообщество разработчиков имеет возможность ее модернизировать.

Новой технологией для создания лучшего, удобного и более интерактивного веб-приложения, а не новым языком программирования является AJAX. AJAX — это акроним Asynchronous JavaScript And XML. AJAX использует JavaScript, чтобы посылать и получать данные между веб-браузером и веб-сервером.

Приложения AJAX являются браузерами и платформно независимы (кросс- платформенная и кросс-браузерная технология). Вместе со AJAX, Интернет-приложения можно сделать богаче (меньше, быстрее и легче для использования). К известным средствам разработки можно отнести также CGI (Common Gateway Interface), ASP, JSP ( Java Server Pager), SSI (Server Side Includes), VRML (Virtual Reality Markup Language) и др.

Apache — это открытый веб-сервер, наиболее часто используемый для платформ Unix, Linux и Solaris.

ASP (Active Server Pages) — технология, используемая для написания мощных клиент-серверных интернет-приложений, позволяющая создание динамических HTML-страниц.

Какие программы лучше использовать для создания веб-страниц? Это, несомненно, WebBuilder, Microsoft FrontPage, Adobe Dreamweaver, E-Texteditor, Notepad++. Для редактирования изображений могут применяться программы Adobe Photoshop, GIMP, Corel Photo-Paint, Adobe Illustrator, Macromedia Freehand, Corel DRAW, Adobe Flash. Для работы с аудио- и видеоданными — программы Adobe Premier, Apple Final Cut Pro, Apple Quick Time, RealProducer, Windows Media.

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

Язык XHTML (Extensible HyperText Markup Language — расширяемый язык разметки гипертекста) — это сочетание HTML и XML. Когда консорциум W3C, объединяющий представителей более 500 организаций из разных стран, рекомендовал использовать XHTML вместо HTML, на это предложение откликнулось большинство разработчиков веб-страниц.

О стандартах языка XHTML 1.0 корпорацией W3C было впервые объявлено 26 января 2000 года. Новые изменения появились в версии XHTML Modularization 1.1 — Second Edition, разработанной корпорацией W3C 29 июля 2010 года.

Для разработки стандартов языка следующей версии — XHTML 2.0 — 16 декабря 2010 была создана рабочая группа корпорации W3C. Подробное описание этого программного продукта можно найти на сайте http://www.w3.org/TR/xhtml2.

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

Большинство информации получают при обращении к веб-серверу. Для того чтобы стать сервером, необходимо подключиться к Интернету и инсталлировать серверное программное обеспечение. Это программное обеспечение включено в состав многих популярных операционных систем: Windows, Mac OS, Unix. Веб-сервер постоянно работает в Интернете и ждет запросов от клиентских браузеров типа Opera, Mozilla Firefox, Internet Explorer и т. п.

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

ПРИМЕЧАНИЕ

Не следует использовать для создания веб-страниц программу Microsoft Word или Microsoft Power Point.

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

Таблица В.1. Основные элементы HTML/ХHTML

Модуль

Элементы модуля

Документ

body, head, html, title

Структуры

address, blockcode, blockquote, div, h, h1, h2, h3, h4, h5, h6, p, pre, section, separator

Текст

abbr, cite, code, dfn, em, kbd, l, q, samp, span, strong, sub, sup, var

Гипертекст

Список

dl, dt, dd, label, nl, ol, ul, li

Рисунок

img (элемент); alt src (атрибуты)

Атрибуты гипертекста

href, hreftype, cite, target, rel, rev, access, nextfocus, prevfocus и xml:base

Разные атрибуты

xml:lang (интернационализация); dir (направление текста); edit и datetime (редактирование); src и type (внедрение); usemap, ismap, shape, и coords (карта изображения); media (медиа)

Метаинформация

meta, link (элемент); about, content, datatype, typeof, property, rel, resource и rev (атрибут)

Объект

object, param, standby

Стиль

style (элемент); style (атрибут)

Таблицы

caption, col, colgroup, summary, table, tbody, td, tfoot, th, thead, tr

Заметки

ruby, rbc, rtc, rb, rt, rp

Формы

alert, bind, case, choices, copy, delete, extension, filename, group, help, hint, input, insert, instance, item, itemset, label, load, mediatype, message, model, output, range, rebuild, recalculate, refresh, repeat, reset, revalidate, secret, select, select1, send, setfocus, setindex, setvalue, submission, submit, switch, textarea, toggle, trigger, upload и value (элемент); repeat-model, repeat-bind, repeat-nodeset, repeat-startindex и repeat-number (атрибуты)

XML (события)

listener (элемент); defaultAction, event, handler, objserver, phase, propagate и target (атрибуты)

XML (handlers-ручной настройки)

action, dispatchEvent, addEventListener, removeEventListener, stopPropagation, preventDefault (атрибуты)

XML (скрипт)

script (элемент)

Другие элементы

article, aside, bdo, button, canvas, command, dd, del, details, fieldset, figcaption, figure, footer, form, iframe, ins, legend, meter, nav, noscript, progress, var

Интернационализация

rules (элемент); translate (атрибут)

Другие атрибуты

accesskey, class, contentedittable, contentmenu, data, draggable, hidden, id, item, itemprop, spellcheck, subject, tabindex, title

События

onabort, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onscroll

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

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

От издательства

Ваши замечания, предложения и вопросы отправляйте по адресу электронной почты comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

Подробную информацию о наших книгах вы найдете на веб-сайте издательства http://www.piter.com.

Урок 1. Основные сведения

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

Основные понятия

Язык HTML (HyperText Markup Language — язык разметки гипертекста) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WWW (World Wide Web — Всемирная паутина). HTML-документы (или веб-документы) могут просматриваться различными типами веб-браузеров.

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

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

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

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

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

Первый из протоколов — это TCP/IP (Transmission Control Protocol/Internet Protocol). После того как установлено соединение по TCP/IP, запускается веб-браузер, который использует протокол передачи гипертекста (http, hyper text transfer protocol) для обмена командами. Затем веб-сервер посылает специальным образом размеченные документы (HTML, XHTML) на браузер клиента, который выводит их на экран.

Http не является единственным протоколом, использующимся в Интернете. Существуют протоколы передачи файлов (file transfer protocol, ftp), обмена сообщениями электронной почты (post office protocol, simple mail transport protocol) и др. Имеются также различные разновидности http, например шифрованный http (shttp).

Результатом видоизменения HTML стал стандарт XHTML. Язык XHTML (Extensible HyperText Markup Language — расширяемый язык разметки гипертекста) — это сочетание HTML и XML. Корпорация W3C ввела семейство модулей и типов документов XHTML, устранив не стандартизированную разметку XML и модернизируя существующее содержимое HTML 4 (или более ранних версий). XHTML-документы (или веб-документы) могут просматриваться различными типами веб-браузеров.

Указатель информационных ресурсов URL

Каждая веб-страница, как и любой другой интернет-ресурс, имеет свой уникальный адрес. Эти адреса называются унифицированными указателями информационных ресурсов, чаще используют сокращение URL (Uniform Resource Locators).

Доступ к большинству интернет-служб осуществляется с помощью схемы адресации. Каждый тип службы имеет свой формат адреса, который обычно чем-нибудь да отличается от других. Например, чтобы послать электронное письмо, следует написать адрес в поле адреса своего почтового приложения, например: ninapetergof@mail.ru. Чтобы получить доступ к FTP-серверу AOL, нужно написать: piter.com.

Вот пример URL для доступа к некому веб-документу на сайте корпорации Microsoft: http://www.microsoft.com/windows/index.html.

В соответствии с форматом URL, http:// означает протокол, www.microsoft.com — адрес веб-сервера компании Microsoft. Далее следует косая черта (/), обозначающая, что после нее следует путь. Путь к файлу указывает на то, что ведется поиск документа index.html, расположенного в папке Windows. Таким образом, URL позволяет не только определить тип интернет-ресурса, но и с помощью системы адресации идентифицировать каждый документ, программу или файл в Интернете.

В табл. 1.1 показаны некоторые альтернативные протоколы, которые могут быть частью URL.

Таблица 1.1. Основные протоколы

Протокол

Использование при обращении к…

http://

Веб-серверам

ftps://

Некоторым веб-серверам с шифрованием

file://

HTML-документам на вашем жестком диске

ftp://

FTP-серверам и файлам

gopher://

Gopher-меню и документам

news://

Серверам групп новостей Usenet

news:

Конкретной группе новостей Usenet

mailto:

Определенному адресу электронной почты

telnet:

Удаленному серверу Telnet

Как создаются HTML-документы?

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

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

Код программы на языке HTML — обычный текстовый файл, поэтому проще всего написать его в Блокноте — стандартном Windows-приложении, которое вызывается командой Пуск\Программы\Стандартные\Блокнот.

Наберите код программы, приведенный ниже, — это шаблон документа, созданного на языке XHTML 1.0 Transitional.

Листинг 1.1. Шаблон документа на языке XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

charset=windows-1251" />

<title> Шаблон XHTML-документа</title>

</head>

<body>

</body>

</html>

Пример программы, написанной на языке HTML в Блокноте, показан на рис. 1.1.

Рис. 1.1. Пример программы, написанной на языке HTML в Блокноте

Когда программа написана, файл следует сохранить не с расширением txt, а с расширением .htm (рис. 1.2). Если получится, то можно сохранить файл с расширением html или xhtml. Имя HTML-файла следует писать строчными латинскими буквами без пробелов, можно использовать цифры, знаки подчеркивания и дефисы.

Рис. 1.2. Диалоговое окно сохранения файла в программе Блокнот

Как только файл будет записан с расширением .htm, его значок сразу примет вид «интернетовского» (рис. 1.3). Первая пиктограмма соответствует текстовому файлу, вторая — файлу с расширением htm в браузере Internet Explorer, третья — в браузере Mozilla Firefox, четвертая — в браузере Opera, пятая — в браузере Safari, шестая — в браузере Google Chrome.

Рис. 1.3. Примеры значков TXT- и HTML-файлов

Если используется операционная система, отличная от Windows, можно воспользоваться простым текстовым редактором, например Pico (Linux) или TextEdit (Mac).

Критерии документа

1. Корневым элементом является элемент <html>. Программа, написанная на языке HTML, находится в «контейнере» <html> …</html>.

2. Корневой элемент документа обязан обозначать пространство имен XHTML, используя атрибут xmlns [XMLNAMES]. Определителем пространства имен XHTML является «http://www.w3.org/1999/xhtml».

3. Перед корневым элементом в документе обязательно должно присутствовать объявление DOCTYPE. При наличии публичного идентификатора, включенного в объявление DOCTYPE, он обязан ссылаться на DTD (Document Type Definition — Определение типа документа).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

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

<title> Заголовок документа </title>

Итак, тег — последовательность символов, заключенных между символами < и >. Закрывающий тег выглядит так же, как открывающий, и отличается от него символом прямого слэша перед текстом внутри угловых скобок. В данном примере тег <title> говорит веб-браузеру об использовании элемента заголовка, а тег </title> — о завершении текста заголовка.

Ранее язык HTML был нечувствителен к регистру символов, описывающих тег, но в настоящее время в кодах программы XHTML рекомендуется использовать символы нижнего регистра. Теги могут иметь параметры, или атрибуты, которые играют роль дополнения тегов. Иногда теги называют дескрипторами. Дескриптор (описатель) — лексическая единица (слово, словосочетание) информационно-поискового языка, выражающая основное смысловое содержание какого-либо текста. Дескриптор используется при информационном поиске документов в информационно-поисковых системах.

Пример документа XHTML 1.1

Листинг 1.2. Пример документа XHTML 1.1

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Пример документа XHTML 1.1</title>

</head>

<body>

<p>Перейдите на сайт<a href="vlib.org.

http://vlib.org/">vlib.org</a>.</p>

</body>

</html>

Обратите внимание, что в этом примере используется объявление XML. Подобное объявление не является обязательным для всех документов XML. Авторам XHTML-документов настоятельно рекомендуется использовать объявления XML. Такое объявление требуется, когда кодировка символов документа отличается от кодировки по умолчанию — UTF-8 или UTF-16.

Стандарты XHTML

• XHTML является регистрозависимым языком, поэтому все имена элементов должны записываться строчными буквами: <р>, </р>, br /> и т. д.;

• все элементы должны иметь закрывающие теги либо закрывающую косую черту, даже если они являются пустыми, например <br />;

• все значения атрибутов должны быть заключены в двойные кавычки:

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

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

Модуль документа

Модуль документа включает элементы html, head, title, body. Когда веб-браузер получает документ, он по элементам определяет, как документ должен быть интерпретирован.

• Корневой элемент <html>. Самый первый элемент, который встречается в документе, должен быть тегом <html>. Данный тег сообщает веб-браузеру, что документ написан на языке XHTML или HTML.

Структурно документ делится на две части: заголовочную и основную, или тело документа. Заголовочная часть размещается между тегами <head> и </head>, основная — между тегами <body> и </body>.

• Элемент <head>. Внутри контейнера <head> и </head> могут размещаться элементы <title> (текст заголовка), <meta> (служебная информация), <style> (стили на странице), <script> (добавление сценария), <link> (ссылка на внешние стили), <base> (базовый адрес документа), <basefont> (шрифт на странице), <bgsound> (фоновый звук на странице).

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

• Элемент <title>. Внутри контейнера <head> и </head> размещается единственный обязательный контейнер из тегов <title> и </title>, содержащий текст заголовка.

Элемент заголовочной части документа <head> должен быть указан сразу после элемента <html> и более нигде в теле документа. Открывающий элемент <head> указывается непосредственно перед элементом <title>, а закрывающий элемент </head> — сразу после окончания описания документа. Заголовок документа при отображении самого документа в окне браузера не виден.

• Элемент <body>. Тело документа должно находиться между элементами <body> и </body>. Это та часть документа, в которой отображается текстовая и графическая информация.

Между открывающим элементом <body> и закрывающим элементом </body> размещаются все элементы программы, составляющие основное содержание документа. Элемент <body> предназначается для выделения той части документа, которая должна быть показана пользователю на экране.

Изменение программы

Если в код веб-документа (файлы с расширением htm, html или xhtml), который можно просмотреть в браузере Internet Explorer, требуется внести изменения, то следует открыть этот файл в текстовом редакторе, выбрав в браузере Internet Explorer команду Вид\Источник (рис. 1.4).

Рис. 1.4. Просмотр HTML-кода документа

HTML-файл будет открыт в окне программы Блокнот (см. рис. 1.1). Выполнив изменения кода программы, следует воспользоваться командой Файл-Сохранить (рис. 1.5).

Рис. 1.5. Сохранение программы

Чтобы увидеть произведенные изменения в браузере Internet Explorer, необходимо щелкнуть на кнопке Обновить (она четвертая слева на рис. 1.6) или выполнить команду Вид\Обновить (см. рис. 1.4).

Рис. 1.6. Панель инструментов программы Internet Explorer

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

Элементы и атрибуты

Элемент — код языка HTML, с помощью которого выполняется разметка исходного текста. Раньше все такие управляющие команды назывались тегами, в настоящее время их принято называть элементами. Элементы записывается в угловых скобках. Все элементы начинаются с символа < и заканчиваются символом >. После открывающей угловой скобки следует имя элемента (команды). Каждый элемент может иметь атрибуты. После перечисления всех атрибутов начальный, или открывающий, тег закрывается. Все значения атрибутов должны быть заключены в двойные кавычки. После открывающего элемента располагается содержимое элемента. Код HTML-документа заканчивается конечным, или закрывающим, элементом (рис. 1.7). Закрывающие элементы начинаются с символа косой черты (/).

Рис. 1.7. Структура HTML-элемента

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

Первая веб-страница

Можно открыть Блокнот и в теле документа записать текст, не задумываясь о его размерах и цвете. На рис. 1.8 показано, какой вид примет листинг 1.1 при просмотре в браузере.

Рис. 1.8. Веб-страница с текстом

Листинг 1.3. Пример создания веб-страницы с текстом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html>

<head>

<title> Моя первая веб-страничка</title>

</head>

<body>

33 удивительнейшие буквы русского алфавита передают человечеству события, факты, настроение, переживания, радость и вдохновение, то есть все, что можно видеть, слышать, пробовать, трогать, чем можно наслаждаться. </body>

</html>

Пример документа XHTML 2.0

При создании веб-страницы необходимо придерживаться определенных правил. На рис. 1.9 показан внешний вид документа XHTML 2.0 (листинг 1.4), соответствующего стандартам корпорации W3C.

Листинг 1.4. Пример документа XHTML 2.0

<?xml version="1.0" encoding="UTF-8"?>

<head>

<title>Пример документа XHTML 2.0</title>

</head>

<body>

<p>Перейдите к примеру <a href="example.org.

http://example.org/">example.org</a>.</p>

</body>

</html>

Рис. 1.9. Пример документа XHTML 2.0

Основные правила создания веб-страниц

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

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

• Каждая веб-страница должна иметь заголовок.

• Не перегружайте страницу графикой.

• Попытка выделить все визуально означает не выделить ничего.

• Не забывайте житейскую мудрость: «Все гениальное — просто».

• Помните про пословицу: «Выплескивая воду из корыта, не выплесните с водой ребенка». Иногда веб-страница сделана так красиво и оригинально, что непонятно, чему она посвящена.

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

Атрибуты элемента <body>

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

Начальный элемент <body> может иметь несколько атрибутов, например:

• Атрибут background задает графическое изображение, которое как кафельная плитка заполнит фон документа. Файл с изображением должен быть сохранен в формате GIF или JPEG. Пример:

Файл с изображением фона лучше размещать в том же каталоге, что и файл самого документа, тогда URL-адрес и путь указывать не нужно. Пример использования этого атрибута в HTML-документе имеется в уроке 4.

Атрибут bgcolor задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветовой модели RGB (Red, Green, Blue — красный, зеленый, синий) или строчного литерала, соответствующего названию цвета, например:

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

• Атрибут link задает цвет гиперссылки; в большинстве браузеров он по умолчанию темно-синий. Пример:

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

• Атрибут vlink задает цвет посещенной гиперссылки, который желательно делать отличным от цвета фона (задаваемого атрибутом link) и от цвета активной гиперссылки (задаваемого атрибутом alink). Пример:

• Атрибут bgproperties задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее прокрутку изображения. Пример:

• Атрибут topmargin задает верхнюю границу страницы в пикселах. Пример:

• Атрибут bottommargin задает нижнюю границу страницы в пикселах. Пример:

• Атрибут leftmargin задает левую границу страницы в пикселах. Пример:

• Атрибут rightmargin задает правую границу страницы в пикселах. Пример:

На рис. 1.10 показана веб-страница (листинг 1.5), для которой верхняя, левая, правая и нижняя границы не заданы, то есть равны 0. Видно, что текст как бы прилипает к левому краю страницы, без отступов сверху и снизу. Правый край текста имеет отступ от правой границы только из-за того, что в нем после каждой строки указан элемент перехода на новую строку (элемент <br />).

Листинг 1.5. Пример создания веб-страницы, для которой не заданы границы

<html><head><title>МОЯ ПЕРВАЯ ПРОГРАММА</title></head>

<h2> А. С. Пушкин </h2>

<h2> Зимняя дорога</h2>Сквозь волнистые туманы <br />Пробирается луна,<br />На печальные поляны<br />Льет печально светона<br /><br />По дороге зимней, скучной<br />Тройка борзая бежит,<br />Колокольчик однозвучный<br />Утомительно гремит.<br /><br />Что-то слышится родное <br />В долгих песнях ямщика:<br />То разгулье удалое<br />То сердечная тоска...<br /><br />Ни огня, ни черной хаты, <br />Глушь и снег... Навстречу мне, <br />Только версты полосаты<br />Попадаются одне...<br /><br />Скучно, грустно...Завтра, Нина, <br />Завтра к милой возвратясь,<br />Я забудусь у камина, <br />Загляжусь не наглядясь.<br /><br />Звучно стрелка часовая<br />Медный круг свой совершит,<br />И, докучных удаляя,<br />Полночь нас не разлучит<br /><br />Грустно, Нина: путь мой скучен, <br />Дремля смолкнул мой ямщик,<br />Колокольчик однозвучный,<br />Отуманен лунный лик.<br /><i>1826</i></body></html>

Рис. 1.10. Веб-страница, для которой не заданы границы

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

Рис. 1.11. Веб-страница с отступами от границ

Листинг 1.6. Пример создания веб-страницы, для которой заданы границы

<html><head> title>МОЯ ПЕРВАЯ ПРОГРАММА</title></head

<H2>А. С. Пушкин </h2>

<h2>Зимнее утро </

h2>Мороз и солнце; день чудесный; <br />Еще ты дремлешь, друг прелестный,<br />Пора, красавица, проснись:<br />Открой сомкнуты негой взоры<br>Навстречу северной Авроры,<br />Звездою Севера явись!<br /><i>1829</i> </body></html>

Подведем итоги

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

Урок 2. Текст

В этом уроке рассматриваются основные элементы, отвечающие за структуру документа:

address, blockcode, blockquote, div, h, h1, h2, h3, h4, h5, h6, p, pre, section, separator

и текстовые элементы:

abbr, cite, code, dfn, em, kbd, l, q, samp, span, strong, sub, sup, var.

Если в ранних версиях языка HTML использовался элемент <font> и его атрибут size, то в настоящее время такой подход считается устаревшим, рекомендуется оформлять текст с помощью других элементов или использовать CSS (см. урок 5).

Уровни заголовков

Заголовки различного уровня позволяют структурно разделить формально не ограниченный по длине текст на отдельные разделы и абзацы. Первый уровень заголовков (самый высокий) обозначается цифрой 1, следующий — 2 и т. д. Элементы с меньшими номерами соответствуют заголовкам более высокого уровня. Большинство браузеров поддерживают интерпретацию шести уровней заголовков, определяя для каждого из них собственный стиль. Заголовок самого верхнего уровня имеет признак 1. Синтаксис заголовка первого уровня («h» от англ. head — заголовок):

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

Заголовок любого уровня можно записать в общем виде:

<hx> Заголовок x-го уровня </hx>

Здесь x — цифра от 1 до 6, определяющая уровень заголовка.

На рис. 2.1 показано окно программы, содержащей заголовки, при просмотре в браузере (листинг 2.1).

Рис. 2.1. Пример с заголовками разных уровней

Листинг 2.1. Пример создания веб-страницы с заголовками

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html><head><title> Заголовки </title></head><body>

<h1> Заголовок 1 - Транспортный протокол</h1>

<h2> Заголовок 2 - Протокол маршрутизации</h2>

<h3> Заголовок 3 - Протокол передачи файлов</h3>

<h4> Заголовок 4 - Протокол передачи почты</h4>

<h5> Заголовок 5 - Сетевой протокол</h5>

<h6> Заголовок 6 - Протокол поддержки сетевого адреса</h6>

</body></html>

Данный элемент появился в HTML версии 2.0. Заголовки более высокого уровня отображаются шрифтом большего размера. Текстовая информация на странице может чередовать заголовки и абзацы (рис. 2.2 и листинг 2.2).

Листинг 2.2. Пример чередования заголовков и абзацев

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Заголовки и абзацы</title></head>

<p>Это несколько компьютеров, соединенных друг с другом кабелем и расположенных в одном месте. </p>

<h2> Локальная сеть </h2>

<p>Обычно располагается на этаже здания или в небольшой фирме.</p>

<h2>Local Area Network</h2>

<p>Перевод с англ.: Local –локальный, Area – область, Net – сеть,

work – работа </p>

<h1>Глобальные сети </h1>

<p> Это совокупность локальных сетей, связанных коммуникационными

каналами.</p>

<h2> WAN (Wide Area Network) </h2>

<p> Перевод с англ.: Wide –широкий </p>

<h3> Городская сеть - MAN (Metropolitan Area Network)</h3>

<p> Региональные (городские) сети используют технологии объединения

локальных сетей в глобальные в регионе, например в городе.</p>

</body></html>

Рис. 2.2. Пример чередования заголовков и текста

В стандартах XHTML 2.0 были убраны многие элементы форматирования текста, существовавшие в предыдущих версиях, и появилась рекомендация использовать для этих целей CSS.

Пример использования элемента заголовка <h1> с форматированием CSS можно увидеть на рис. 2.3, а код программы — в листинге 2.3.

Листинг 2.3. Заголовок в рамке

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Заголовок с форматированием </title>

h1 {border-width: thin; border-style: solid; text-align: center}

</style></head>

<body>

<h1>Сервер</h1>

Серверные сети или клиент/сервер (server/based или client/server)

</body></html>

Можно привести еще ряд примеров заголовков с форматированием CSS внутри тела программы.

Рис. 2.3. Заголовок в рамке

Внешний вид заголовка с форматированием CSS внутри тела программы можно посмотреть на рис. 2.4, а код — в листинге 2.4.

Рис. 2.4. Пример заголовка с форматированием CSS

Листинг 2.4. Пример заголовка с форматированием CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Почему XHTML?</title></head>

<body>

<h1 style="background-color: rgb(255, 0, 0); color: rgb(0, 255, 0)";class="left"><span class="left_h1"> Гибридные сети </span>– сети клиент/сервер с одноранговыми разделяемыми ресурсами </h1>

</body>

Еще один пример использования элемента <h1> с множеством стилей форматирования CSS можно увидеть на рис. 2.5, а код программы — в листинге 2.5.

Листинг 2.5. Заголовок с использованием нескольких стилей форматирования CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Заголовок с форматированием </title>

h1 {font-size : 400%; border : 5px solid #e5eecc; border-style: solid; color : #555555; margin-top : 20px; text-align : right; background-color : #98bf21; }

</style></head>

<body><h1>Сетевая топология</h1>

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

</body></html>

Рис. 2.5. Заголовок, использующий множество стилей форматирования CSS

Абзацы и разрывы строк

В HTML-документе невозможно разбить текст на абзацы, используя Enter. Нажатие этой клавиши улучшает внешний вид исходного текста, но не влияет на получаемое изображение. Для перехода на следующую строку следует воспользоваться элементом <br/> (сокращение от англ. break — разрыв). Элемент <p> позволяет разделить текст на абзацы. Если этого не сделать, документ будет выглядеть как один большой абзац.

Пример использования абзацев с форматированием CSS и разрывами можно увидеть на рис. 2.6, а код программы — в листинге 2.6.

Листинг 2.6. Пример элементов абзацев и разрывов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Абзацы и разрывы </title></head>

Warum nicht? Почему бы и нет?<br/>

Richtig. Правильно. <br/>

Oh Gott! О Боже! <br/>

Endlich! Наконец! </p>

</body></html>

Рис. 2.6. Веб-страница, содержащая элементы абзацев и разрывов

Еще один пример использования элемента с форматированием CSS можно увидеть на рис. 2.7, а код программы — в листинге 2.7.

Листинг 2.7. Пример элементов <p> с форматированием шрифта CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Абзацы с форматированием CSS</title></head>

Одноранговые сети (peer-to-peer) </p>

В них нет серверов и разделяются ресурсы независимых узлов </p>

Эта технология используется в программе Skype </p>

</body></html>

Рис. 2.7. Веб-страница с элементом p и форматированием CSS

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

Рис. 2.8. Пример внедрения других элементов в элемент p

Листинг 2.8. Пример внедрения других элементов в элемент <p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title>Абзацы с другими элементами</title></head>

<body><p>Платежи возможны при наличии:

<ul><li>Средств</li>

<li>Кредитной карты</li>

<li>Платежных поручительств</li></ul></p></body></html>

Элемент div

Элемент <div> (от англ. division — раздел) позволяет выделить в структуре документа несколько разделов. Изначально (в версии HTML 3.2) этот элемент редко использовался. Однако если проанализировать современные веб-страниц, то можно заметить, что элемент <div> встречается очень часто. Он является блочным элементом, похожим на элемент <p> и <div> начинает новый абзац.

Элемент <div> в сочетание с атрибутами с id, class и role задействует механизм генерации добавления внешних структур к документам. Этот элемент определяет концепции представления элемента. Кроме того, CSS, атрибуты xml: lang и другие инструменты позволяют использовать этот элемент для веб-дизайна (рис. 2.9 и листинг 2.9).

Рис. 2.9. Веб-страница, содержащая элемент div

Листинг 2.9. Пример использования элемента div

<html><head><title> Элемент div </title></head>

<body> <h2>Все хорошо</h2> <p>что хорошо кончается</p>

<div class="slide"><h3>alles gut</h3>

...</div>

</body></html>

В сочетании с каскадными листами стилей элемент <div> превращается в мощное средство структурирования документа.

Выравнивание

Атрибут align позволяет выровнять текст по левому или правому краю, по центру или по ширине страницы. По умолчанию текст, графика и элементы таблицы выравниваются по левому краю, то есть начала строк расположены на одном уровне, а концы — на разных. Выравнивание по левому краю задается атрибутом align="left", выравнивание по правому краю — атрибутом align="right", центрирование — align="center".

Пример веб-страницы, содержащей текст, выровненный различными способами, показан на рис. 2.10 (листинг 2.10).

Рис. 2.10. Веб-страница с текстом, выровненным различными способами

Листинг 2.10. Пример выравнивания текста различными способами

<html>

<head>

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

</head>

<body>

<p align="center"> Атрибут align позволяет выровнять текст по левому или правому краю, <br />

по центру или по ширине </p>

<p align="right">По умолчанию текст, графика и элементы таблицы выравниваются по левому краю <br />

и не выравнивается по правому краю, то есть начало строк находится на одном уровне, а конец - на разных.<br />

Выравнивание по левому краю задается атрибутом align="left". Выравнивание по правому краю задается<br />

атрибутом align=right </p>

<p align="left">Центрирование элементов документа можно производить разными способами.

</body>

</html>

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

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

Внутри предварительно отформатированного текста разрешается использовать:

• символы перевода строки;

• символы табуляции (сдвиг на 8 символов вправо);

• непропорциональный шрифт, устанавливаемый браузером.

Форматирование абзаца, заданное другими элементами, такими как <hx> и <address>, будет игнорироваться браузером при помещении их между тегами <pre> и </pre>.

Листинг 2.11. Пример специфического форматирования текста

<html><head><title>Символы</title></head>

<h5 align="center"> С праздником 8 марта!</h5>

<pre>

_____________________88888______________________

___________________888888888____________________

_________________888 888__________________

__________________888 888___________________

8888888

____________________8888888_____________________

__________________888 888___________________

_________________888 888__________________

_______________888 888_________________

_______________888 888________________

________________888 888_________________

_________________8888888888888__________________

__________________88888888888___________________

____________________8888888_____________________

___________$$$$___$$$$____$$$$___$$$$

__________$$$$$$$$$$$$$"""$$$$$$$$$$$$$

__________"$$$$$$$$$$$____$$$$$$$$$$$"

_________"___$$$$$$$________$$$$$$$___"

________"______$$$____________$$$______"

________"___$______________________$____"

________"___$$$__________________$$$____"

________"____$$$$$$$$$$$$$$$$$$$$$$_____"

_________"_____$$$$$$$$$$$$$$$$$$______"

__________"______$$$$$$$$$$$$$$_______"

_____"______$$$$$$$$$$_______"

______________"___________________"

________________"___"__"__"__"__"

</pre></body></html>

Рис. 2.11. Веб-страница с текстом, имеющим специфическое форматирование

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

Задание начертания

Для выделения текстовой информации в документах можно использовать различное начертание. Большинство браузеров поддерживают жирное и курсивное начертание, моноширинный шрифт, большой и маленький шрифты, а также подстрочный и надстрочный индексы. Элементы <b>, <i>, <tt>, <strong> появились в HTML 2.0, элементы <u>, <big>, <small>, <strike>, <sub>, <sup> — в HTML 3.2. Пользоваться этими элементами не запрещено, но консорциум W3C рекомендует применять средства каскадных листов стилей (см. урок 5).

Результат применения этих элементов показан на рис. 2.12 (листинг 2.12).

Листинг 2.12. Пример веб-страницы, содержащей текст разных начертаний

<html>

<head>

<title> Стили шрифта </title>

</head>

<body>

<b> Этот текст жирный </b><br />

<i> Этот текст наклонный </i><br />

<u> Этот текст подчеркнутый </u><br />

<tt> Этот текст с непропорциональным шрифтом </tt><br />

Этот текст <big> большой </big><br />

Этот текст <small> маленький </small><br />

Этот текст <strong> увеличенный </strong><br />

Этот текст <strike> перечеркнутый </strike><br />

Этот текст <sub> подстрочный </sub><br />

Этот текст <sup> надстрочный </sup><br />

</body>

</html>

Рис. 2.12. Веб-страница с текстом разного начертания

Элемент <var> используется для дополнительного выделения переменных в коде. Синтаксис:

<var> переменная </var>

Пример использования этого элемента показан на рис. 2.13, а код программы — в листинге 2.13.

Рис. 2.13. Веб-страница, содержащая элемент var

Листинг 2.13. Веб-страница, содержащая элемент var

<html><head><title> Элементы форматирования</title></head>

<body bgcolor=#"ec1dfc">Доджер - <var>рекламный проспект </var></body></html>

Элемент <var> появился в версии HTML 2.0. Он определяет переменную или параметр программы и обычно отображается курсивом.

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

Рис. 2.14. Веб-страница, содержащая элемент span

Листинг 2.14. Пример веб-страницы, содержащей элемент span

<html><head><title>Форматирование символов</title></head>

Медиапланирование -<span><i> составление оптимального плана размещения рекламы в СМИ на основе маркетинговых и медиаисследований. </span></i>

Паблисити - <span><i>неоплаченная информация, стимулирующая спрос на товар или деловую кампанию посредством распространения о них коммерческих и (или) социальных сведений в средствах коммуникации</span></i>

<span><i>Характерные признаки: достоверность (в сравнении с рекламными сообщениями); широкий охват аудитории (новинка, сенсация, напоминание); броскость (эффективная и многожанровая форма).</span></i></body></html>

Данный элемент появился в HTML 4.0. Так как он используется в сочетании с каскадными листами стилей (см. урок 5), в данном примере его преимущества не слишком заметны.

Элементы <l> и <blockcode>

Элемент <l> дает команду браузеру объединить весь текст в одну строку, не разрывая ее. Пример такой строки показан на рис. 2.15 (листинг 2.15).

Листинг 2.15. Пример веб-страницы, содержащей текст в одной строке

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN"

"http://www.w3.org/MarkUp/DTD/xhtml2.dtd">

<html> <head> <title> Строка </title></head>

<body>

<l> Ключевые понятия - </l>

<l> Классифицированная реклама. </l>

<l> Профессиональный риск. </l>

<l> Персонализация рекламы. </l>

</blockcode>

</body></html>

Рис. 2.15. Веб-страница с неразрывной строкой

В этом примере используется еще один элемент, предназначенный для работы с текстом, — <blockcode>, который, согласно названию, как бы содержит блок кода текста (см. элемент <code>). Элемент <blockcode>, подобно элементу <pre>, позволяет задействовать пустое пространство для оформления фрагментов текста. Пример использования данного элемента показан на рис. 2.16, код программы — в листинге 2.16.

Рис. 2.16. Веб-страница, содержащая элемент blockcode

Листинг 2.16. Пример веб-страницы с использованием элемента blockcode

<html><head><title> Цитата </title></head>

<body>

Элемент blockquote добавляет поля слева и справа от текста. <br />

Этот элемент позволяет расположить текст компактно в центре страницы. <br />

<blockquote>Текст, помеченный элементом, отступает от левого края документа на 8 пробелов </blockquote>

</body></html>

Элемент <blockquote>

Элемент <blockquote> используется для оформления больших цитат и отображает их с отступами от левого и правого краев. Вложенная структура из элементов <blockquote> позволяет сузить текстовую колонку с обеих сторон. Элемент <blockquote> имеет атрибут cite="uri", где uri задает цитируемый документ или сообщение. URI (Uniform Resource Identifier) — это унифицированный идентификатор ресурса, в состав которого входит URL.

Данный элемент позволяет расположить текст компактно в центре страницы (рис. 2.17, листинг 2.17).

Листинг 2.17. Пример веб-страницы, содержащей цитату

<html>

<head>

<title> Цитата </title>

</head>

<body> Хот-шоп-

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

</blockquote>

</body>

</html>

Рис. 2.17. Фрагмент веб-страницы с длинной цитатой

Элемент <blockquote> появился в HTML 2.0 и, в отличие от элемента <q>, предназначен для оформления длинных цитат .

Вставка цитат

Элемент <q> предназначен для оформления небольших цитат. Он имеет атрибут cite="uri", где uri задает цитируемый документ или сообщение. Обычно в короткую цитату не входят символы разрыва строки, и цитата считается элементом текстового уровня. Символы кавычек отображает браузер.

Пример использования элемента <q> показан на рис. 2.18 (листинг 2.18).

Рис. 2.18. Фрагмент веб-страницы с короткой цитатой

Листинг 2.18. Пример веб-страницы, содержащей элемент q

<html><head><title>Цитата</title></head>

"Постер" - наружная реклама, плакат </q></body></html>

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

Комментарии могут встречаться в документе где угодно и в любом количестве. Данный элемент появился в HTML 2.0.

Акронимы

Два элемента <abbr> (см. гл. 16) и <acronym> позволяют выделять акронимы, или аббревиатуры (сокращения полных названий), в пределах текста. Содержимое элементов <abbr> и <acronym> выводится в виде всплывающих подсказок, которые дают пользователю возможность увидеть расшифровку акронимов. Пример использования элемента <acronym> показан на рис. 2.19 (листинг 2.19).

Рис. 2.19. Фрагмент веб-страницы, содержащей акроним

Листинг 2.19. Пример создания веб-страницы, содержащей акроним

<html>

<head>

<title> Акроним </title>

</head>

<body>

<acronym title="Санкт-Петербургский государственный университет технологии и дизайна"> СПГУТД </acronym>

</body>

</html>

ВНИМАНИЕ

Не следует забывать, что знак равенства (=) в программе не должен быть окружен пробелами.

Элемент <acronym> появился в HTML 4.0.

Определения

Если название поместить внутри элемента <cite>, то это название отобразится курсивом. Элемент <cite> может иметь атрибут cite=«uri», где uri задает цитируемый документ или сообщение. Термины можно задать еще и элементом <dfn>. Пример использования этих элементов показан на рис. 2.20 (листинг 2.20).

Рис. 2.20. Фрагмент веб-страницы с определениями

Листинг 2.20. Пример создания веб-страницы, содержащей определения

<html><head><title>Определения</title></head>

"Переулок Джамбула, дом 13"</cite> Это адрес Северо-Западного института печати <br /> Санкт-Петербургского государственного университета технологии и дизайна <br />

<dfn> PR - деньги из воздуха </dfn> В России PR пока недооценивается.<br />

Его репутация не слишком высока, а само слово PR превратилось в "пиар" и вызывает негативные <br />

ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в €20 млн.<br />

Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок <br />

- стало больше статей под шапкой "на правах рекламы".

</body></html>

Элемент <cite> появился в HTML 2.0. Он определяет цитату или ссылку на источник, содержимое данного элемента обычно воспроизводится курсивом.

Шрифтовое выделение

Элемент <em> используется для выделения особым шрифтом (обычно курсивом) слова или текста. Синтаксис:

<em> Текст </em>

Пример использования этого элемента можно посмотреть на рис. 2.21, а код программы — в листинге 2.21.

Листинг 2.21. Пример создания веб-страницы со специфическим форматированием

<html><head><title>Форматирование</title></head>

<body bgcolor="00fffc"> Имидж –

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

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

</body></html>

Рис. 2.21. Веб-страница, содержащая элемент em

Элемент <em> появился в версии HTML 2.0, чаще всего содержимое данного элемента выводится курсивом.

Использование моноширинных шрифтов

Надписи, выполненные моноширинными шрифтами, создаются с помощью элементов <code>, <kbd> и <samp>. Результаты применения этих тегов обычно идентичны.

Элемент <code> используется для выделения фрагментов программного кода моноширинным шрифтом. Данный элемент предпочтительнее, чем элемент <tt> (см. раздел «Задание начертания»). Синтаксис:

Пример использования этого элемента можно посмотреть на рис. 2.22, а код программы — в листинге 2.22.

Рис. 2.22. Веб-страница, содержащая элемент <code>

Листинг 2.22. Пример создания веб-страницы, содержащей элемент <code>

<html><head><title> Элемент code </title></head>

<body bgcolor="#00ffec"> Промоушн - <code> продвижение продаж - комплекс различных мер стимулирования покупки товаров.</code>

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

</body></html>

Элемент <code> появился в HTML 2.0.

Элемент <kbd> используется с целью выделения диалога пользователя с компьютером. Синтаксис:

<kbd> Ввод с клавиатуры </kbd>

Пример применения этого элемента показан на рис. 2.23, а код программы — в листинге 2.23.

Рис. 2.23. Веб-страница, содержащая элемент <kbd>

Листинг 2.23. Пример веб-страницы, содержащей элемент <kbd>

<html><head><title>Элемент kbd</title></head>

<body bgcolor="#ec1dfc"> Имидж –

<kbd> модификация образа личности, фирмы, товара путем сгущения красок, приукрашивания или очернения.</kbd>

Теория создания имиджей именуется имиджелогией, или иконикой.

</body></html>

Элемент <kbd> появился в HTML 2.0.

Элемент <samp> используется для выделения диалога пользователя с компьютером. Синтаксис:

<samp> Системное сообщение компьютера </samp>

Пример использования этого элемента можно посмотреть на рис. 2.24, а код программы — в листинге 2.24.

Рис. 2.24. Веб-страница, содержащая элемент <samp>

Листинг 2.24. Пример веб-страницы, содержащей элемент samp

<html><head><title> Элемент samp</title></head>

<body bgcolor="#ec1dda">Корпоративная реклама –

<samp>реклама, создающая потребность не в конкретной марке товара, а в полном товарном ассортименте.</samp></body></html>

Элемент <samp> появился в HTML 2.0.

Элемент address

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

<address> Адрес-автора </address>

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

Рис. 2.25. Документ, содержащий адрес автора

Листинг 2.25. Пример создания документа, содержащего адрес

<html><head><title>АДРЕС</title></head>

<address> HTML- Учебный курс<br/> Комолова Нина Владимировна<br /> Северо-Западный институт печати<br />

Санкт-Петербургского государственного университета технологии

и дизайна<br />

ninapetergof@.mail.ru</address>

</body></html>

Элемент section

Элемент <section> в сочетании с заголовками и параграфами предлагает механизм структурирования документа на разделы. Содержание структурируется на уровне блоков. Пример использования этого элемента показан на рис. 2.26, а код программы — в листинге 2.26.

Рис. 2.26. Веб-страница, содержащая элемент section

Листинг 2.26. Пример, содержащий элемент section

<html><head><title> Элемент section </title></head>

<body><h1> Текст в em </h1>

<p> Корпорация W3C рекомендует измерять текст в em. </p>

<h3>Параграф</h3>

<p> По умолчанию размер текста параграфа составляет 16px</p>

<section><h1> Заголовок h1 </h1>

<section><h2> Заголовок h2 </h2>

<section><h> Параграф</h>

</section></body></html>

Элемент separator

Элемент <separator> разделяет части документа.

Пример текста с элементом <separator> показан на рис. 2.27, а код программы — в листинге 2.27.

Листинг 2.27. Пример, содержащий элемент separator

<html><head><title> Элемент separator </title></head>

<body><p> Свойство сокращения кода </p>

<p> Чтобы сократить код, можно соединить все свойства в одно. </p>

<ul>

<label>Поля могут иметь 4 значения: </label>

<li href="top"> верхнее 25px </li>

<li href="right"> правое 50px </li>

<li href="bottom"> нижнее 75px </li>

<li href="left"> левое 100px</li>

</ul></body></html>

Рис. 2.27. Веб-страница, содержащая элемент separator

Подведем итоги

В этом уроке были рассмотрены основные элементы, предназначенные для работы с текстом. Элемент <hx> используется для создания заголовков. Элементы <p>, <pre>, <b>, <i>, <tt>, <strong>, <u>, <big>, <small>, <strike>, <sub>, <sup>, <blockquote>, <blockcode>, <dfn>, <cite>, <em>, <code>, <kbd>, <l>, <var>, <samp>, <div>, <span>, <q>, <address>, <section>, <separator> позволяют форматировать текст, красиво располагать его на странице. Элемент <acronym> предназначен для создания всплывающих подсказок.

Урок 3. Графика

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

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

Размещение графики на веб-странице

Для вставки графики на веб-страницу используется элемент <img>. Графика позволяет значительно улучшить внешний вид и функциональность документов. Элемент <img> (от англ. image — изображение) появился в HTML 2.0. Если в первых версиях языка HTML элемент <img> был одинарным тегом, то теперь, в соответствие со стандартами XHTML, все элементы должны иметь закрывающие теги либо закрывающую косую черту, даже если они являются пустыми.

Элемент <img> имеет атрибуты src, alt, longdesc, height, width, usemap, ismap, align, border, hspace, vspace. Пример:

• Атрибут src (от англ. source — источник). Определяет месторасположение изображения, включаемого в состав документа. URL — обязательный параметр, который указывает браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, например в формате GIF или JPEG.

Если графический файл находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

Если графический файл находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя этого файла, например:

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

• Атрибут alt. Необязательный атрибут alt задает альтернативный текст, который выводится браузером, пока идет загрузка изображения (или браузером, не поддерживающим отображение графики). Обычно это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если этот атрибут не задан, на месте изображения большинство браузеров выводят значок, щелкнув на котором пользователь сможет увидеть изображение.

• Атрибут longdesc. Необязательный атрибут longdesc задает ссылку на удаленный ресурс.

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

• Атрибут width. Необязательный атрибут width используется для указания ширины рисунка в пикселах. Если данный атрибут не указан, используется оригинальная ширина рисунка. Этот атрибут позволяет сжимать или растягивать рисунок по горизонтали.

• Атрибут align. Необязательный атрибут align используется для точного позиционирования объектов на экране. Доступные значения:

• top — верхний край объекта выравнивается по верхнему краю строки;

• middle — центр объекта выравнивается по базовой линии строки;

• bottom — нижний край объекта выравнивается по базовой линии строки;

• left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом;

• right — объект выравнивается по правому краю, при этом возможно обтекание объекта текстом.

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

• Атрибут border. Задает толщину обрамления для изображения.

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

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

Форматы графических файлов

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

Обычно в Интернете используется два растровых формата — JPEG и GIF. Кроме того, в Интернете довольно много изображений, имеющих форматы BMP и PCX. Очень популярен формат PNG — самый современный формат переносимой сетевой графики.

Формат GIF

Формат GIF (Graphic Interchange Format — формат обмена графическими данными) служит для записи и хранения растровых графических изображений. Этот формат был разработан корпорацией Compuserve с использованием технологии Unisys. Формат GIF применяется для хранения 256-цветных изображений (или изображений с меньшим количеством цветов), сжатых по методу Лемпела—Зива (LZW). Тот же метод сжатия характерен для архиваторов файлов.

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

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

Формат JPEG

Применяющийся в формате JPEG ( Joint Photographic Expert Group — объединенная группа экспертов в области фотографии) алгоритм обработки изображений разработан группой экспертов как средство сжатия изображений с палитрой 24 бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов.

JPEG — один из самых мощных алгоритмов. Практически он является стандартом де-факто для полноцветных изображений. Формат JPEG был создан для того, чтобы избавиться от недостатков формата GIF.

Алгоритм оперирует областями 8 × 8 пикселов, в которых яркость и цвет плавно меняются. Сжатие в формате JPEG осуществляется за счет того, что в реальных изображениях, в частности в фотографиях, цвет обычно меняется достаточно плавно. Обеспечивается высокий коэффициент сжатия, значение которого достигает 100 и зависит от допустимого уровня потерь изобразительной информации.

Формат широко используется в HTML-документах и для передачи графики по сети. Сохраняет параметры графики в цветовой модели RGB. Изображения в формате JPEG хранятся в файлах с расширением jpg.

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

Формат PNG

Последнее время получили распространение файлы в формате PNG (Portable Network Graphics — переносимая сетевая графика). Само название формата говорит о его назначении — использовании при передаче изображений в сетях. Формат поддерживает полноцветные RGB-изображения и индексированные изображения. Допускает наличие дополнительного канала для хранения маски обрезки. Имеет эффективный алгоритм сжатия без потери информации.

Формат BMP

Первым графическим форматом для IBM-совместимых компьютеров, нашедшим широкое применение, был формат BMP (Bit Map — битовая карта). Можно сказать, что с него все началось. В формате BMP первоначально использовалось простейшее кодирование — по пикселам (самое неэкономное). Пикселы обходились последовательно по строкам, начиная с нижнего левого угла графического изображения. Файлы именно этого формата поддерживались первыми версиями оболочки Windows. В них использовались только индексированные цвета в количестве 256, то есть один пиксел представлялся одним байтом. В дальнейшем формат стал применяться и для кодирования полноцветных изображений. Это стандартный формат растровой графики. Поскольку bmp-файлы представляют собой «родной» формат графики для Microsoft Windows, подобных изображений в Интернете достаточно много.

Формат PCX

Формат PCX использует только индексированные палитры. Он был разработан фирмой Z-soft специально для пакета PaintBrush, а в дальнейшем получил более широкое распространение. В нем предусмотрено сжатие, обеспечивающее большую компактность по сравнению с форматом BMP. Тем не менее практически он пригоден только для простых изображений или изображений с индексированными цветами.

Пикселы и разрешение

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

Растровая графика — это, во-первых, графика, представляемая в компьютере в виде множества точек (пикселов), во-вторых, файл определенного формата.

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

Разрешение — количество точек на единицу измерения:

• dpi (dots per inch) — количество точек на дюйм;

• ppi (points/pixels per inch) — количество пикселов на дюйм;

• spi (samples per inch) — оптическое, первоначальное разрешение сканера, означающее количество проб на дюйм, то есть число «просмотров» сканером изображения во время сканирования.

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

Разрешение иллюстрации обычно измеряется в dpi. Чем больше разрешение, тем более качественным является изображение, но и тем больший размер имеет файл, в котором изображение сохраняется.

Различают разрешение изображения, разрешение экрана и разрешение принтера.

Статические растровые изображения представляют собой двумерный массив чисел. Элементы этого массива называют пикселами (от англ. pixel — picture element, или элемент изображения). Пиксел — минимальный адресуемый элемент двумерного растрового изображения; одна точка изображения.

Примеры размещения графики на веб-странице

Прежде чем размещать изображение на веб-странице, проведем эксперимент. Возьмем любительскую фотографию высотой 11 см и шириной 13 см. Как она будет выглядеть на экране? Если мы отсканируем фотографию в трех вариантах, в первом выберем цветной режим с разрешением 300 dpi, во втором — черно-белый режим с разрешением 300 dpi, в третьем — цветной режим с разрешением 72 dpi, то в первых двух вариантах отсканированная фотография будет иметь размер 1304 × 1479 пикселов, а в третьем варианте — 313 × 355 пик-селов.

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

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

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

Рис. 3.1. Настенный рисунок на веб-странице

Листинг 3.1. Пример создания веб-страницы с рисунком

<html>

<head>

<title> РИСУНОК</title>

</head>

<body>

</body>

</html>

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

СОВЕТ

Размеры изображения можно уточнить и при необходимости изменить в программе Photoshop фирмы Adobe или в свободно распространяемой программе GIMP.

На рис. 3.2 показан пример размещения изображения шириной 354 и высотой 442 пиксела (листинг 3.2). В этом примере рисунок имеет отступ слева и сверху на 100 пикселов от левого верхнего угла веб-страницы. Хотя листинги 3.1 и 3.2 практически совпадают, изображения имеют разные размеры в пикселах и поэтому занимают разную площадь.

Рис. 3.2. Изображение винограда на веб-странице

Листинг 3.2. Пример создания веб-страницы с изображением винограда

<html>

<head>

<title>Рисунок на странице с полями</title>

</head>

</body>

</html>

На рис. 3.3 показан пример размещения четырех изображений шириной 92 и высотой 114 пикселов каждое в табличном виде (листинг 3.4). Подробно принципы работы с таблицами будут рассмотрены далее.

Рис. 3.3. Четыре рисунка в таблице

Листинг 3.3. Пример создания четырех рисунков в таблице

<html><head><title>ЧЕТЫРЕ РИСУНКА В ТАБЛИЦЕ</title></head>

<tr><td><img alt="Портрет" src="Портрет.jpg"

width="92" heigth="114" /> </td>

<td><img alt="Подснежник" src="Подснежник.jpg"

width="92" heigth="114" /> </td></tr>

<tr> <td><img alt="Цветы" src="Цветы.jpg"

width="92" heigth="114" /> </td>

<td> <img alt="Портрет" src="Портрет.jpg"

width="92" heigth="114" /></td></tr>

</body></html>

Выравнивание изображений

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

Рис. 3.4. Пример выравнивания изображений на веб-странице

Листинг 3.4. Пример выравнивания изображений на веб-странице

<html>

<head>

<title>Обтекание графики текстом</title>

</head>

<body>

<h1>Обтекание текстом объектов</h1>

ActiveMovie stream - это дополнительный пакет для работы с internet explorer.<br />C помощью этой программы можно проигрывать файлы в формате asf в таких не слишком быстрых сетях, как интернет.<br />

за счет инкапсуляции в active movie stream можно эффективно синхронизировать <br />

и хранить на различных серверах файлы в популярных форматах мультимедиа,<br />

таких как mpeg, avi, wav и apple Quick Time<br />

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

<tr> <td>Возможно </td></tr>

<tr><td>обтекание текста </td></tr>

<tr><td>вокруг таблицы </td></tr>

Необходимо ввести в веб-страницу звук, видео и интерактивность. OLE - объектно-ориентированная технология создания программных объектов

</body></html>

Карты изображений

Карты изображений (image maps) позволяют пользователю связывать ссылки на другие документы с отдельными частями изображений. Щелкая мышью на частях изображения, так называемых активных областях (hot spots), пользователь может выполнять те или иные действия, переходить к другим документам и т. п.

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

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

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

Элемент <map>

Элемент <map> применяется для представления графического изображения в виде карты с активными областями. Активные области можно идентифицировать по всплывающей подсказке, которая появляется при наведении на такую область указателя мыши. Данный элемент появился в версии HTML 3.2.

Контейнер, состоящий из тегов <map> и </map>, является блоком описателей активных областей.

Элемент <map> может быть связан с элементом <img> или элементом <input> с помощью атрибута usemap.

Чтобы включить поддержку карты изображения, необходимо ввести атрибут usemap в элемент img:

Атрибут usemap указывает, в каком месте находится карта изображения. Карта изображения определяет, какому участку изображения какой URL-адрес соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе. Размещение карты в другом документе позволяет объединить вместе изображения из разных документов, но добавляет еще одну итерацию в механизм функционирования карты, поскольку за первую итерацию выясняется местонахождение карты, а за вторую выполнение действия, предписанного URL-адресом данного участка изображения. Параметр map_name указывает имя карты для изображения, а предшествующий ему URL-адрес — местонахождение карты. Если параметр URL отсутствует, карта с указанным именем ищется в текущем документе.

Пример синтаксиса определения карты изображения:

<map name="map_name"> <area [shape=" shape "] coords="x,y,..." [href=" reference "] [nohref]></map>.

Атрибут name задает имя карты, например: name=«КАРТА» — имя карты.

Элемент <area>

Элемент <area> определяет активную область в составе карты изображений на стороне клиента (это описатель активной области). Элемент <area> не имеет закрывающего тега. Синтаксис:

Для каждой активной области карты имеется свой элемент <area>.

• Атрибут shape. Задает форму активной области на карте и ее координаты, он может принимать значения:

• rect — прямоугольная область;

• circle — область в форме круга;

• poly — область в форме многоугольника;

• default — вся область.

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

• Атрибут coords. Определяет позицию области на экране. Синтаксис:

coords="координаты"

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

• для круга необходимо задать координаты центра и радиус в пикселах (координаты центра отсчитываются от левого края и верхнего края рисунка);

• для прямоугольной области задаются координаты всех четырех углов;

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

• Атрибут href. Задает URL-адрес для ссылки. Синтаксис:

• Атрибут alt. Задает альтернативный текст для браузеров, которые не поддерживают тег <area>. Синтаксис:

• Атрибут title. Задает текст подсказки, всплывающей при наведении указателя мыши на активную область. Синтаксис:

• Атрибут target. Идентифицирует фрейм, в котором должен быть открыт целевой ресурс. Синтаксис:

target="имя|_blank|_self|_parent|_top"

Параметры:

• имя — документ открывается во фрейме с именем, задаваемым с помощью атрибута name дескриптора <frame> (имя фрейма должно начинаться с буквы);

• _blank — документ открывается в новом неименованном окне;

• _self — документ открывается в том же окне, в котором содержится текущий документ;

• _parent — документ открывается во фрейме, родительском по отношению к фрейму, содержащему текущий документ (если родительского фрейма не существует, документ открывается в текущем фрейме);

• _top — документ открывается в текущем окне и занимает все окно.

• Атрибут nohref. Указывает на то, что с областью не связана ссылка.

• Атрибут tabindex. Определяет порядок, в котором активные области получают фокус после нажатия клавиши Tab. Синтаксис:

tabindex="число"

• Атрибут accesskey. Определяет комбинацию клавиш, используемую для доступа к активной области (перехода по URL). Синтаксис:

accesskey="символ"

• Атрибут onfocus. Определяет обработчик события, возникающего при получении активной областью фокуса ввода (фокус ввода может быть получен как с помощью мыши, так и в результате перебора после нажатия клавиши Tab). Синтаксис:

onfocus="сценарий"

• Атрибут onblur. Определяет обработчик события, возникающего при потере активной областью фокуса ввода (фокус ввода может быть потерян как в результате выбора другого элемента с помощью мыши, так и в результате перебора после нажатия клавиши Tab). Синтаксис:

onblur="сценарий"

• Атрибут usemap. Необязательный атрибут usemap связывает с данным элементом карту изображения. Синтаксис:

usemap="URL"

Этот атрибут разрешает использовать изображения, отдельные части которого связаны с картами и объединяются тегом <map>. В этом случае щелчок на карте обрабатывает браузер:

• Атрибут ismap. Необязательный атрибут ismap используется для определения карты изображения на стороне сервера. Синтаксис:

ismap="длина"

Элемент <img> должен быть включен в элемент <a>. Атрибут ismap сообщает браузеру, что данное изображение дает пользователю возможность выполнять какие-либо действия, щелкая мышью на активных областях. Этот атрибут разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие изображения применяются совместно с тегом <a>. В этом случае реакцию на щелчок отрабатывает сервер:

Примеры карт изображений

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

Код карты представлен в листинге 3.5, а на рис. 3.5 показаны варианты карты изображения с активными областями в виде круга, прямоугольника и многоугольника. Под изображением находится поле, в котором появляется название области при наведении на нее указателя мыши. Изображение, которое выбрано для примера, имеет размер 400 × 300 пикселов.

Рис. 3.5. Пример карты изображения

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

<html><head><title>ФОТОГРАФИЯ-КАРТА</title></head>

<area onmouseover="document.where.who.value='Папа'"

shape="circle" coords="70","70","70" href="father.htm">

<area onmouseover="document.where.who.value='Сынок'"

shape="poly" coords="130,50,250,50,270,156,260,196,220,290,140,141" href="son.htm">

<area onmouseover="document.where.who.value='Дочка'"

shape="rect" coords="59,125,170,220" href="daughter.htm">

<area onmouseover="document.where.who.value='Мама'"

shape="circle" coords="310,80,70" href="mather.htm"></map>

</map></body></html>

В данном примере изображение, размещенное на странице с помощью элемента <img>, становится картой с помощью атрибута usemap.

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

Листинг 3.6. Пример создания карты изображения с активными областями в виде прямоугольников

<html><head><title>МЕНЮ-КАРТА</title></head>

<h1>Пригороды Санкт-Петербурга</h1>

<tr><td><a href="graph1.htm"> Петродворец</a>

<td><a href = "#img">Ломоносов</a>

<td><a href = "move.htm"> Пушкин</a>

<td><a href = "#map">Павловск</a>

</table></center>

<h2>Графические ссылки</h2>

</map>

Рис. 3.6. Еще один пример карты изображения

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

Изображение, состоящее из четырех видов пригородов Санкт-Петербурга, имеет размеры 380 × 540 пикселов.

Рис. 3.7. Разметка прямоугольных областей карты

Масштабирование изображений

На рис. 3.8 показана веб-страница (листинг 3.7), содержащая три изображения разного размера, источником которых является один и тот же файл. Файл имеет размеры 154 пиксела в ширину и 248 пикселов в высоту. Первое изображение увеличено в два раза, второе имеет реальный размер, размеры третьего изображения уменьшены в два раза.

Рис. 3.8. Три изображения разного размера из одного файла

Листинг 3.7. Пример создания трех изображений разного размера из одного файла

<html><head><title>РАЗМЕРЫ РИСУНКА</title></head>

<body>

</body></html>

Расстояние между изображениями соответствует ширине трех неразрывных пробелов (которые задаются символами &nbsp).

Если непродуманно задать ширину и высоту изображения, оно исказится. Такой пример показан на рис. 3.9 (листинг 3.8).

Листинг 3.8. Пример неудачного получения трех изображений разного размера из одного файла

<html><head><title>ИСКАЖЕННЫЕ РИСУНКИ</title></head>

Рис. 3.9. Три изображения разного размера, полученные из одного файла

Стандартные современные мониторы могут иметь разрешение 1024 пикселов в ширину и 768 пикселов в высоту. При разработке изображений следует учитывать, что окно просмотра будет занимать лишь часть этой области. На рис. 3.10 показаны изображения в виде полос с указанием их ширины и высоты в пикселах (листинг 3.9). Первая полоса имеет размеры 90 пикселов в высоту и 980 в ширину, вторая — 80 пикселов в высоту и 780 в ширину, третья — 75 пикселов в высоту и 600 в ширину, четвертая — 70 пикселов в высоту и 500 в ширину, пятая — 65 пикселов в высоту и 400 в ширину, шестая — 60 пикселов в высоту и 200 в ширину, седьмая — 50 пикселов в высоту и 100 в ширину.

Рис. 3.10. Примеры изображений с указанием их размеров в пикселах

Листинг 3.9. Примеры создания изображений с указанием их размеров в пикселах

<html><head><title>РАЗМЕРЫ РИСУНКОВ В ПИКСЕЛАХ</title>

</head>

<body>

Если размер изображения по ширине превышает 980 пикселов, оно не может полностью поместиться на экране, и появляется горизонтальная полоса прокрутки. Если размер изображения по высоте превышает 570 пикселов, оно не может полностью поместиться на экране, и появляется вертикальная полоса прокрутки. Для мониторов, размеры которых в пикселах отличаются от величины 1024 × 768, размеры полностью размещаемого на экране изображения будут другие, но суть останется та же.

Подведем итоги

В этом уроке были рассмотрены элементы, позволяющие размещать графику на веб-страницах. Главным из них является элемент <img> с атрибутами src, alt, longdesc, heigth, width, align, border, vspace, hspace. Местоположением изображения на странице управляет атрибут выравнивания align, который может принимать значения top, middle, bottom, left и right (сверху, посередине, снизу, слева, справа). Рассказано также об элементе <map>, который применяется для представления графического изображения в виде карты с активными областями. Представлены примеры карт.

Рассмотрены популярные в Интернете форматы графических файлов jpeg и gif. Рассказано также о форматах bmp, pcx и png.

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

Урок 4. Фон и цвет

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

Цвет на веб-странице может задаваться как:

• имя цвета, например white;

• RGB-значение, например rgb(255, 255, 255);

• шестнадцатеричное значение, например #ffffff. Если цифры одинаковые, то запись можно сократить до трех символов, например #fff.

Цвет на веб-странице

Многие создатели веб-страниц используют для фона документа, обычного текста и ссылок предопределенные цвета. Чтобы задать эти цвета, необходимо включить в элемент <body> дополнительные параметры:

Здесь каждый из параметров определяет цвет того или иного элемента страницы:

• bgcolor — цвет фона документа;

• text — цвет простого текста документа;

• link — цвет ссылки.

Цвет задается шестизначным числом в шестнадцатеричном формате и цветовой модели RGB. Значение #000000 соответствует черному цвету, значение #ffffff — белому. Например:

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

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

Рис. 4.1. Веб-страница, содержащая текст белого цвета с дополнительными отступами

Листинг 4.1. Веб-страница, на которой текст белого цвета имеет отступы

<html><head><title>Текст белого цвета</title></head>

<body bgcolor="123456" text= "ffffff" topmargin="100" bottommargin="100" leftmargin="100" rightmargin="100"> <h2>Текст белого цвета</h2></body></html>

Фоновые рисунки

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

Описание фонового рисунка включается в элемент <body> и выглядит следующим образом:

На рис. 4.2 показана страница с фоном, код которой представлен в листинге 4.2.

В качестве фона выбран рисунок с размерами 4,97 × 4,52 см. Несмотря на небольшие размеры, рисунок покрывает всю площадь страницы, словно множество плиток кафеля. На рис. 4.3 слева показан исходный рисунок, а справа — диалоговое окно с размерами этого рисунка, открытое в программе Adobe Photoshop.

Листинг 4.2. Пример создания веб-страницы с фоновым рисунком

<html>

<head>

<title> Графический фон</title>

</head>

</body>

</html>

Рис. 4.2. Веб-страница с фоновым рисунком

Рис. 4.3. Рисунок, выбранный в качестве фона, и диалоговое окно с размерами этого рисунка

Фон и CSS

Для вставки фонового изображения можно использовать CSS-свойство background-image. Разместите в папке вашей веб-страницы, рисунок, например файл m.jpg. Этот рисунок будет использоваться в качестве фона.

Откройте программу Блокнот командой Пуск\Программы\Стандартные\Блокнот. Напишите следующий код (листинг 4.3) и сохраните его как файл style_4.3.css:

Листинг 4.3. CSS-файл, предназначенный для внедрения на веб-страницу

body {

background-image: url("m.jpg");

}

h1 {

color: #987000;

background-color: #fc8654;

}

Различные CSS-свойства позволяют повторять рисунок по горизонтали, по вертикали, фиксировать его в определенном месте и блокировать положение. В папке, где находятся файлы m.jpg и style_4.3.css, создайте веб-страницу (листинг 4.4).

Листинг 4.4. Фоновое изображение как CSS-свойство

<html>

<head>

<title>Рисунок и CSS</title>

</head>

<body>

<h1>Рисунок и CSS</h1>

</body>

</html>

На рис. 4.4 показана веб-страница с фоновым изображением, созданным с помощью CSS.

Рис. 4.4. Фоновое изображение, используемое как свойство CSS

Обычно в качестве фона выбирают прозрачные, легкие рисунки, но в этом случае, чтобы продемонстрировать возможности CSS, был выбран четкий, темный рисунок с размерами 4,3 × 3,8 см.

Таблица цветов

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

Рис. 4.5. Фрагмент веб-страницы, содержащей таблицу цветов

Листинг 4.5. Пример создания таблицы цветов

<html><head><title>Таблица цветов</title>

<style>

body {background: f2e0be;}

table {width: 100%;height: 100%;}

table td { text-align: center; }

{font-size: 8pt;}

sup {font-size: 24;}

</style></head>

<h1 align="center">Таблица цветов</h1> <p align="left">

<table bgcolor="gray" border="2" cellpadding="0" cellspacing="5"> <tbody><tr><td bgcolor="aliceblue">aliceblue-грязно голубой <br/>(#f0f8ff) </td>

<td bgcolor="antiquewhite">antiquewhite-античный белый <br/>(#faebd7) </td>

<td bgcolor="aquamarine">aquamarine-аквамарин-зеленовато-голубой <br/>(#7fffd4) </td></tr>

<tr><td bgcolor="azure">azure-лазурный<br/>(#f0ffff) </td>

<td bgcolor="beige">beige-бежевый<br />(#f5f5dc) </td>

<td bgcolor="bisque">bisque-бисквит<br/>(#ffe4c4)</td>

<td bgcolor="black">black-черный<br/>(#000000)</td></tr>

<tr> <td bgcolor="blanchedalmond">blanchedalmond-бледный дальмонд <br />(#ffebcd) </td>

<td bgcolor="blue">blue-синий<br />(#0000ff) </td>

<td bgcolor="blueviolet">blueviolet-фиолетовый<br />(#8a2be2) </td>

<td bgcolor="brown">brown-коричневый<br />(#a52a2a) </td></tr>

<tr> <td bgcolor="burlywood">burlywood-древесный<br />(#deb887) </td>

<td bgcolor="cadetblue">cadetblue-морской<br />(#5f9ea0) </td>

<td bgcolor="chartreuse">chartreuse-ликер шартрез<br />(#7fff00) </td>

<td bgcolor="chocolate">chocolate-шоколадный<br />(#d2691e) </td></tr>

<tr> <td bgcolor="coral">coral-коралл<br />(#ff7f50)</td>

<td bgcolor="#c0f0e0">cornflower-кукурузный цветок<br /> (#6495ed) </td>

<td bgcolor="cornsilk">cornsilk-кукурузный шелк<br /> (#fff8dc) </td>

<td bgcolor="crimson">crimson-малиновый<br />(#dc143c) </td></tr>

<tr> <td bgcolor="cyan">cyan-голубой<br/>(#00ffff) </td>

<td bgcolor="darkblue">darkblue- темно-синий<br />(#00008b) </td>

<td bgcolor="darkcyan">darkcyan- темно-голубой<br />(#008b8b) </td>

<td bgcolor="darkgoldenrod">darkgoldenrod- темно-золотой<br /> (#b8860b) </td></tr>

<tr> <td bgcolor="darkgray">darkgray- темно-серый<br /> (#a9a9a9) </td>

<td bgcolor="darkgreen">darkgreen- темно-зеленый<br /> (#006400)</td>

<td bgcolor="darkkhaki">darkkhaki- темный хаки<br />(#bdb76b) </td>

<td bgcolor="darkmagenta">darkmagenta- темно-пурпурный<br /> (#8b008b) </td></tr>

<tr> <td bgcolor="darkolivegreen">darkolivegreen- темно-зелено-оливковый <br />(#556b2f) </td>

<td bgcolor="darkorange">darkorange- темно-оранжевый<br /> (#ff8c00) </td>

<td bgcolor="darkorchid">darkorchid- темной орхидеи<br /> (#9932cc) </td>

<td bgcolor="darkred">darkred- темно-красный<br />(#8b0000) </td></tr>

<tr> <td bgcolor="darksalmon">darksalmon- темно-оранжево розовый <br />(#e9967a)</font> </td>

<td bgcolor="darkseagreen">darkseagreen- темно-зеленый морской <br />(#8fbc8b) </td>

<td bgcolor="darkslateblue">darkslateblue- темно-серо-голубой <br />(#483d8b) </td>

<td bgcolor="darkslategray">darkslategray- темно-голубо-серый <br />(#2f4f4f)</td></tr>

<tr> <td bgcolor="darkturquoise">darkturquoise- темно-бирюзовый <br />(#00ced1) </td>

<td bgcolor="darkviolet">darkviolet- темно-фиолетовый<br /> (#9400d3) </td>

<td bgcolor="deeppink">deeppink- насыщенно розовый<br /> (#ff1493) </td>

<td bgcolor="deepskyblue">deepskyblue- насыщенно небесный <br /> (#00bfff) </td></tr>

<tr> <td bgcolor="dimgray">dimgray-тускло-серый<br />(#696969) </td>

<td bgcolor="dodgerblue">dodgerblue- измененный синий<br /> (#1e90ff)</td>

<td bgcolor="firebrick">firebrick- огненно-кирпичный<br /> (#b22222) </td>

<td bgcolor="floralwhite">floralwhite- цветочно-белый<br /> (#fffaf0) </td></tr>

<tr> <td bgcolor="forestgreen">forestgreen- лесной зелени<br />(#228b22)</td>

<td bgcolor="#f0c00a">fuchia-фисташковый<br />(#ff00ff) </td>

<td bgcolor="gainsboro">gainsboro-гейнсборо<br />(#dcdcdc) </td>

<td bgcolor="ghostwhite">ghostwhite-еле заметный белый<br /> (#f8f8ff)</td></tr>

<tr> <td bgcolor="gold">gold-золотой<br />(#ffd700) </td>

<td bgcolor="goldenrod">goldenrod- темно-золотой<br /> (#daa520) </td>

<td bgcolor="gray">gray-серый<br />(#808080) </td>

<td bgcolor="green">green-зеленый<br />(#008000)</td></tr>

<tr> <td bgcolor="greenyellow">greenyellow- зелено-желтый<br /> (#adff2f)</td>

<td bgcolor="honeydew">honeydew- медвеной росы<br />(#f0fff0) </td>

<td bgcolor="hotpink">hotpink- жарко-розовый<br /> (#ff69b4)</td>

<td bgcolor="indianred">indianred- красный индиго<br /> (#cd5c5c) </td></tr>

<tr> <td bgcolor="indigo">indigo-индиго<br /> (#4b0082)</td>

<td bgcolor="ivory">ivory- слоновой кости<br /> (#fffff0)</td>

<td bgcolor="khaki">khaki-хаки<br />(#f0e68c) </td>

<td bgcolor="lavender">lavender- лавандовый<br /> (#e6e6fa) </td></tr>

<tr> <td bgcolor="lavenderblush">lavenderblush- покрасненной лаванды <br />(#fff0f5)</td>

<td bgcolor="lawngreen">lawngreen- травяной зелени <br /> (#7cfc00) </td>

<td bgcolor="lemonchiffon">lemonchiffon- лимонно-коричневый <br /> (#fffacd)</td>

<td bgcolor="lightblue">lightblue- светло-синий <br />(#add8e6) </td></tr>

<tr> <td bgcolor="lightcoral">lightcoral- светло-коралловый <br />(#f08080)</td>

<td bgcolor="lightcyan">lightcyan- светло-голубой <br /> (#e0ffff)</td>

<td bgcolor="lightgoldenrodyellow">lightgoldenrodyellow- светло-золотой<br />(#fafad2) </td>

<td bgcolor="lightgreen">lightgreen- светло-зеленый <br /> (#90ee90) </td></tr>

<tr> <td bgcolor="lightgrey">lightgrey- светло-серый <br /> (#d3d3d3) </td>

<td bgcolor="lightpink">lightpink- светло-розовый <br /> (#ffb6c1) </td>

<td bgcolor="lightsalmon">lightsalmon- светло-оранжево-розовый <br />(#ffa07a) </td>

<td bgcolor="lightseagreen">lightseagreen- светлой морской волны<br />(#20b2aa) </td></tr>

<tr> <td bgcolor="lightskyblue">lightskyblue- светло-небесно-синий<br />(#87cefa) </td>

<td bgcolor="lightslategray">lightslategray- светло-голубо-серый<br />(#778899)</td>

<td bgcolor="lightsteelblue">lightsteelblue- светлый серо-синий<br />(#b0c4de)</td>

<td bgcolor="lightyellow">lightyellow- светло-желтый <br /> (#ffffe0) </td></tr>

<tr> <td bgcolor="lime">lime-липовый цвет<br />(#00ff00) </td>

<td bgcolor="limegreen">limegreen- липово-зеленый <br /> (#32cd32) </td>

<td bgcolor=linen>"linen-льняной"<br />(#faf0e6)</td>

<td "bgcolor=magenta">magenta- пурпурный <br />(#ff00ff) </td></tr>

<tr> <td bgcolor="maroon">maroon- каштановый<br /> (#800000)</td>

<td bgcolor="mediumaquamarine">mediumaquamarine- умеренный аквамарин<br />(#66cdaa) </td>

<td bgcolor="mediumblue">mediumblue- умеренный синий<br /> (#0000cd) </td>

<td bgcolor="mediumorchid">mediumorchid- умеренной архидеи<br /> (#ba55d3) </td></tr>

<tr> <td bgcolor="mediumpurple">mediumpurple- умеренно пурпурный<br />(#9370db) </td>

<td bgcolor="mediumseagreen">mediumseagreen- умеренно морской <br />(#3cb371)</td>

<td bgcolor="mediumslateblue">mediumslateblue <br />(#7b68ee) </td>

<td bgcolor="mediumspringgreen"> mediumspringgreen- умеренно серо-синий <br />(#00fa9a) </td></tr>

<tr> <td bgcolor="mediumturquoise">mediumturquoise- умеренно бирюзовый <br />(#48d1cc) </td>

<td bgcolor="mediumvioletred">mediumvioletred- умеренно фиолетово-красный<br />(#c71585) </td>

<td bgcolor="midnightblue">midnightblue- средний темно-синий<br />(#191970) </td>

<td bgcolor="mintcream">mintcream- кремовый <br />(#f5fffa) </td></tr>

<tr> <td bgcolor="mistyrose">mistyrose- красный туман <br /> (#ffe4e1) </td>

<td bgcolor="moccasin">moccasin- цвет обуви индейцев <br /> (#ffe4b5) </td>

<td bgcolor="navajowhite">navajowhite- светло-коричневый<br /> (#ffdead) </td>

<td bgcolor="navy">navy-морской<br />(#000080)</td></tr>

<tr> <td bgcolor="oldlace">oldlace- старые кружева<br /> (#fdf5e6) </td>

<td bgcolor="olive">olive- оливковый<br />(#808000) </td>

<td bgcolor="olivedrab">olivedrab- серые оливки <br /> (#6b8e23) </td>

<td bgcolor="orange">orange- оранжевый<br />(#ffa500) </td></tr>

<tr> <td bgcolor="orangered">orangered- оранжево-красный <br />(#ff4500) </td>

<td bgcolor="orchid">orchid- орхидеи<br />(#da70d6) </td>

<td bgcolor="palegoldenrod">palegoldenrod- бледно-золотой <br /> (#eee8aa) </td>

<td bgcolor="palegreen">palegreen- бледно-зеленый <br /> (#98fb98) </td></tr>

<tr> <td bgcolor="paleturquoise">paleturquoise- бледно-бирюзовый <br />(#afeeee) </td>

<td bgcolor="palevioletred">palevioletred- бледно-фиолетово-красный<br />(#db7093) </td>

<td bgcolor="papayawhip">papayawhip- дынная плеть <br /> (#ffefd5) </td>

<td bgcolor="peachpuff">peachpuff- персиковый дым <br /> (#ffdab9) </td></tr>

<tr> <td bgcolor="peru">peru- цвет пустыни<br />(#cd853f) </td>

<td bgcolor="pink">pink- розовый<br />(#ffc0cb) </td>

<td bgcolor="plum">plum- сливовый<br />(#dda0dd) </td>

<td bgcolor="powderblue">powderblue- порошково-синий <br /> (#b0e0e6) </td></tr>

<tr> <td bgcolor="purple">purple- пурпурный <br />(#800080) </td>

<td bgcolor="red">red- красный<br />(#ff0000) </td>

<td bgcolor="rosybrown">rosybrown- розово-коричневый <br /> (#bc8f8f) </td>

<td bgcolor="royalblue">royalblue- королевско-синий <br /> (#4169e1) </td></tr>

<tr> <td bgcolor="saddlebrown">saddlebrown- коричневое седл <br />(#8b4513)</td>

<td bgcolor="salmon">salmon- цвет лосося<br />(#fa8072)</td>

<td bgcolor="sandybrown">sandybrown- рыжевато-коричневый <br /> (#f4a460) </td>

<td bgcolor="seagreen"> seagreen- морской зелени <br /> (#2e8b57) </td></tr>

<tr> <td bgcolor="seashell"> seashell- морских раковин <br /> (#fff5ee) </td>

<td bgcolor="sienna"> sienna- охра<br />(#a0522d)</td>

<td bgcolor="silver"> silver- серебряный<br />(#c0c0c0) </td>

<td bgcolor="skyblue"> skyblue- синего неба<br />(#87ceeb) </td></tr>

<tr> <td bgcolor="slateblue"> slateblue- сланцево-синий <br /> (#6a5acd) </td>

<td bgcolor="slategray"> slategray- сланцево-серый<br /> (#708090</td>

<td bgcolor="snow"> snow- снег<br />(#fffafa)</td>

<td bgcolor="springgreen"> springgreen- весенняя зелень<br /> (#00ff7f) </td></tr>

<tr> <td bgcolor="steelblue"> steelblue-синевато-стальной<br />(#4682b4) </td>

<td bgcolor="teal"> teal-чирок<br />(#008080) </td>

<td bgcolor="thistle"> thistle-чертополох <br />(#d8bfd8) </td></tr>

<tr> <td bgcolor="tomato"> tomato-томатный <br />(#ff6347) </td>

<td bgcolor="turquoise"> turquoise-бирюза <br />(#40e0d0) </td>

<td bgcolor="violet"> violet-фиолетовый <br />(#ee82ee)</td>

<td bgcolor="wheat"> wheat-пшеница <br />(#f5deb3) </td></tr>

<tr> <td bgcolor="white"> white-белый <br />(#ffffff)</td>

<td bgcolor="whitesmoke"> whitesmoke-дым <br />(#f5f5f5)</td>

<td bgcolor="yellow"> yellow-желтый <br />(#ffff00) </td>

<td bgcolor="yellowgreen"> yellowgreen- желто-зеленый <br /> (#9acd32)</td></tr></tbody></table></p><p> </p></body></html>

В этом примере для центрирования надписей в ячейках в заголовке листинга был использован элемент <style>, о котором будет рассказано в уроке 5.

Подведем итоги

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

Урок 5. CSS — правила форматирования

Этот урок представляет собой введение в большую и сложную тему — CSS (Cascading Style Sheets) — каскадные листы стилей.

Более подробно о CSS можно узнать на сайте http://www.w3/org/Style/CSS.

Поддержка стилей

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

Стили HTML-, XHTML- и XML-документов задаются с помощью каскадных листов. Свойства CSS имеют фон (color, background-color, background-image, background-repeat, background-position, background-attachment, background), шрифт (font-size, font-family, font-weight, font-style, font-variant, font, font-size-adjust, font-stretch), текст (text-decoration, text-transform, word-spacing, letter-spacing, text-shadow, cursor), бокс (width, max-width, min-width, margin, padding, border-width, border-style, border-color, border, text-align, white-space, text-indent, line-height, vertical-align), изображения (display, float clear, position, top, right, bottom, left, overflow, clip, visibility), списки (list-style-type, list-style-image, list-style-position, list-style, marker-offset), таблицы (caption-side, table-layout, border-collapse, border-spacing, empty-cells), язык (direction, unicode-bidi), содержание (content, quotes, counter-reset, counter-increment и псевдо-элементы :before и :after), верстку и строение веб-страниц (@page, size, marks, page-break-after, page-break-before, page-break-inside, orphans, widows), отрезки (outline-width, outline-style, outline-color, outline), аудио (azimuth, cue-before, cue-after, cue, elevation, pause-before, pause-after, pause, pitch, pitch-range, play-during, richness, speak, speak-header, speak-punctuation, speek-numeral, speech-rate, stress, voice-family, volume).

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

a.menu:link

{

color: #c2a1a0;

font-family: arial;

font-size: 14px;

font-weight: bold;

text-decoration: none

}

Заметим, что в этом примере размер шрифта задан в пикселах. Задание значений размеров для метрических свойств возможно в пикселах, em и процентах.

В соответствие с правилами HTML при использовании стилей в коде необходимо включать в заголовок документа (в элементе <head>) соответствующее META-определение:

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

Уровни CSS

О технологии CSS стало известно в мае 1995 года, когда недавно образованный (и в декабре 1994 года проведший свое первое совещание) консорциум W3C объявил о выборе технологии CSS для форматирования HTML-документов.

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

Первый уровень стилевых шаблонов (CSS1) был утвержден 11 января 1999 года, второй уровень (CSS2) был принят к обсуждению в мае 1998 года, а третий уровень (CSS3) начали обсуждать в мае 2001 года.

Переход от одного уровня к другому говорит о попытках систематизации CSS.

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

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

Синтаксис листа стиля

Синтаксис листа стиля имеет четкую структуру.

• Элемент. Все начинается с элемента, или селектора. Существуют не только простые элементы, например заголовок <h1> или абзац <p>, но и более сложные элементы, например ссылка <a> или таблица <td>.

• Свойство. Именно для элемента назначаются атрибуты форматирования или набор свойств. Каждый элемент характеризуется своими свойствами, например начертанием шрифта (font-family: arial), значением поля (margin: 15px), обрамлением (border-right: white 1px solid), высотой (height: 1px) и др.

• Значение. Каждое свойство принимает определенное значение. В примерах свойства приведены уже со значениями (arial; white 1px solid, 1px).

• Объявление. Свойство и значение, которое оно должно принять, образуют объявление.

• Правило. Элемент и его объявление образуют правило.

Правило определения синтаксиса листа стиля проиллюстрировано на рис. 5.1.

Рис. 5.1. Правило определения синтаксиса листа стиля

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

<p color="red"><strong><u> Поклонитесь солнцу! </u></strong></p>

А если подобный стиль требуется применить несколько раз? Хорошо, если 5 раз, а если 10–20? Вот тут и помогает СSS.

Благодаря следующей записи все элементы <h1> в документе будут красного цвета, размером в 20 пунктов:

h1 {color:red; size:20pt;}

Четыре варианта использования CSS

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

• встраивание;

• подключение;

• связывание;

• импорт.

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

Встраиваемые стили

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

Атрибут style

Встраиваемый стиль реализуется атрибутом style. Соответствующий код показан в листинге 5.1 (рис. 5.2).

Листинг 5.1. Пример применения стиля к абзацу

<html><head><title>Атрибут style </title></head>

<body> <p style="font: 1em comic sans ms" title = "Размер шрифта в em. "> Размер шрифта в em. По умолчанию размер текста параграфа составляет 16px (16px=1em). </p>

</body></html>

В данном примере используется атрибут style.

Рис. 5.2. Применение стиля к абзацу

Подключаемые стили

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

Элемент style

Стили определяются для различных типов HTML-документов. Так, можно задать отображение всех элементов <h1> серым цветом шрифтом Verdana размером 14 пунктов, а форматирование абзацев производить по-другому. Соответствующий код представлен в листинге 5.2 (рис. 5.3).

Рис. 5.3. Использование подключаемых стилей

Листинг 5.2. Пример использования подключаемых стилей

<html><head><title>Элемент style</title>

<style>

<!--

body {

background: #ffffff;

color: #000000;

}

h1 {

font: 14pt Book Antiqua;

color: #cc0000;

}

font: 12pt times;

}

a {

color: #ff0000; text-decoration: none;

}

-->

</style></head>

<body>

<h1>Иван Комолов НЕЗАБУДКА </h1>

<p >Незабудка, с ветром споря <br />Говорит: "Разумным будь". <br />

Все хорошее запомни, <br>Все плохое позабудь.<br></p><p ></p>

<P >Вспомни май и берег речки,<br /> Луг зеленый был в цвету<br />

Как хорошие словечки<br /> Ты шептал мне на лету.<br /></p><p ></p>

<p >И ушел в широко поле<br />Глубоко волнуя грудь. <br />

Все хорошее запомни, <br />Все плохое позабудь.<br /></p><p></p>

<p >Прилетай в зеленом звоне,<br />Соловьи здесь росы пьют, <br />

Все хорошее запомни, <br />Все плохое позабудь.<br /></p>

</body></html>

В данном примере использован элемент <style>, расположенный внутри элемента <head>.

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

Связываемые, или внешние, стили применяются к документам всего веб-сайта, они реализуются с помощью обращения к внешнему файлу, с расширением .css. Создайте с помощью любого текстового редактора документ, содержащий только определения стилей, и сохраните его в файле style_1.css, например листинг 5.3 (рис. 5.4).

Листинг 5.3. Пример файла style_1.css

body {

background: #fedcba; color: #000000; margin-left:100px;

}

h1 {

color: # ff0000; font-size: 24 pt;

}

p {font-family: garamond, times;

font-size: 14 pt;

}

Рис. 5.4. Внешние стили, созданные в блокноте

Внешний файл style.css размещается внутри элемента <head> с помощью элемента <link>.

Элемент link

Ссылка из HTML-документа на таблицу стилей style.css реализуется элементом <link> с соответствующими атрибутами:

Эта строчка вставляется в заголовок документа, между тегами <head> и </head> (листинг 5.4).

Ссылка работает, если добавить ссылку на созданный файл стилей в раздел заголовка HTML-документа. Если в файл стилей были внесены изменения, то эти изменения отразятся в каждом документе, который содержит ссылку на файл стилей. На рис. 5.5 показан пример применения CSS (см. листинг 5.3) к тексту (листинг 5.4).

Рис. 5.5. Применение стилей, находящихся во внешнем файле

Листинг 5.4. Пример применения стилей, находящихся во внешнем файле

<html><head><title>Внешний CSS-файл</title>

<body> <h4>Иван Комолов</h4>

<h1>У каждого свое</h1>

<p>У гор - отроги,<br />

У рек - ручьи,<br />

У ног - дороги. <br />

Иди ищи<br />

Ключи от счастья<br />

Среди тревог.<br />

Они во власти<br />

Твоих дорог <br /></p>

<h1>Подснежники</h1>

<p>Пробудились первыми, <br />

Позабыли сны.<br />

Ощутили нервами<br />

Биоток весны. <br /></p>

</body></html>

Внешний css-файл style_1.css, определяющий параметры форматирования показанной на рис. 5.5 веб-страницы, представлен в листинге 5.3. Все файлы должны быть сохранены в одной папке.

Импортируемые стили

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

На рис. 5.6 показан результат импорта внешних стилей (листинг 5.5).

Рис. 5.6. Импорт внешних стилей

Листинг 5.5. Пример импорта внешних стилей

<html><head><title>ПРИМЕР ИМПОРТА ВНЕШНИХ СТИЛЕЙ </title>

<!--

@import c:\nina\piter\кн html\cd\глава 5\листинг5.6.css;

-->

</style>

</head>

<body><h3>Современные технологии форматирования</h3>

<p>Импорт внешних стилей<br />

позволяет сократить<br />

размеры HTML-файлов<br /></p>

</body></html>

Внешний css-файл для веб-страницы, показанной на рис. 5.6, представлен в листинге 5.6 (файл листинг5.6.css).

Листинг 5.6. Внешний файл (листинг5.6.css) для веб-страницы, показанной на рис. 5.6

h3 {color:crimson font-family:arial black}

p {background:turquoise; font-family: times}

</style>

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

Типы рамок

Существуют различные типы рамок. В главе 2 уже был приведен пример заголовка в рамке. Теперь управление форматированием рамки реализуем во внешнем файле CSS. Сохраним форматирование как файл style_2.css, задав его следующим образом:

body {

background-color: #ffedcb;

}

h1 {

color: #ff0000; font-size: 48; ptborder-width: thick;

border-style: dotted;

border-color: violet;

}

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

Если рамку отображать не следует, то для свойства border-style должно быть выбрано значение none (нет) или hidden (скрытый). Тип рамки зависит от свойства border-style, которое может принимать значения: dotted (точечная), dashed (пунктир), solid (прямая), double (двойная), groove (выемка), ridge (по краю), inset (внутренняя), outset (внешняя).

На рис. 5.7 показана веб-страница, выполненная с помощью CSS (листинг 5.7).

Рис. 5.7. Пример использования рамки

Листинг 5.7. Заголовок в рамке, созданный с использованием внешнего css-файла

<html>

<head>

<title>Рамка из точек</title>

<body><h1>Модулированная передача</h1></body></html>

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

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

• position задает абсолютное или относительное положение элемента в документе. Свойство position может принимать значения:

• absolute — атрибуты left и top задают в пикселах абсолютное положение элемента в документе;

• relative — атрибуты left и top задают в пикселах относительное положение элемента в документе;

• static — элемент размещается без учета атрибута position;

• left, top, wigth, height — координаты верхнего левого угла элемента, его ширина и высота;

• z-index — размещает элемент на переднем (или заднем) плане всех пересекающихся с ним элементов. Допустимые значения: auto или целое число, где 0 соответствует размещению элемента на заднем плане.

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение (перпендикулярное экрану). Расположением элементов по z-оси управляет z-index.

Нарисуйте в любом графическом редакторе 5 квадратов разных цветов, но одинаковой ширины и высоты (200 px) и сохраните их в файлах с именами 1.jpg–5.jpg, соответственно, в той же папке что и файл, созданный на основе листинга 5.8. Расположим квадраты в определенном месте с помощью свойства position и будем управлять наложением, используя свойство z-index (рис. 5.8).

Рис. 5.8. Пример наложения разноцветных квадратов

Листинг 5.8. Наложение разноцветных квадратов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head><title>Цветные квадраты</title>

<style>

<!-- #yellow {

position: absolute;

left: 100px;

top: 100px;

z-index: 1;

}

#black {

position: absolute;

left: 130px;

top: 130px;

z-index: 2;

}

#red {

position: absolute;

left: 160px;

top: 160px;

z-index: 3;

}

#blue {

position: absolute;

left: 190px;

top: 190px;

z-index: 4;

}

#green {

position: absolute;

left: 220px;

top: 220px;

z-index: 5;

}

--></style></head>

<body>

<h2>Цветные квадраты</h2>

</div>

</div>

</div>

</div>

</div></body></html>

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

Элемент div

Элемент div используется для структурирования документа, часто совместно с атрибутами class и id. Откройте программу Блокнот, сохраните в файле style_4.css следующий код:

#cabel{

background:turquoise;

}

#seti {

background:yellowgreen;

}

На рис. 5.9 показан пример с элементом div и атрибутом id (листинг 5.11).

Рис. 5.9. Пример с элементом div и атрибутом id

Листинг 5.9. Пример с элементом div и атрибутом id

<html>

<head>

<title>Раздел/title>

</head>

<body>

<ul><li>коаксиальный кабель </li>

<li>витая пара </li>

<li>неэкранированная витая пара</li>

<li>экранированная витая пара</li>

<li>оптоволоконный кабель </li></ul></div>

<ul><li> беспроводные сети</li>

<li>лазер</li>

<li>радиопередача</li></ul></div></body></html>

Элемент span

Элемент span используется для структурирования документа, часто совместно с атрибутами class и id. Элемент span можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, span позволяет создавать визуальные эффекты для отдельных текстовых блоков. Откройте программу Блокнот, сохраните в файле style_5.css набранный код:

span.stich {

color:sienna;

}

На рис. 5.10 показан пример использования элемента span и атрибута id (листинг 5.10).

Рис. 5.10. Пример с элементом span и атрибутом class

Листинг 5.10. Пример с элементом span и атрибутом class

<html>

<head>

<title> Раздел</title>

<body><p>ГЕРАКЛИТ <span class="stich">Все есть борьба,

справедливость - в расправе, <br />

все рождается в борьбе и по необходимости.

</span></p></body></html>

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

Селекторы классов (class selectors) имеют следующий синтаксис:

селектор.класс {cвойства}

Классы могут также быть описаны без явного привязывания к определенным элементам, например:

.класс {свойства}

Вид курсора

С помощью элемента span и его атрибута style можно составить программу, при выполнении которой курсор мыши будет менять вид. На рис. 5.11 показан пример изменения вида курсора (листинг 5.11).

Рис. 5.11. Пример изменения вида курсора

Листинг 5.11. Изменение вида курсора

<html> <head><title> Изменение вида курсора</title></head><body>

<p>Наведите курсор мыши на фразу с названием его вида.</p>

<span style="cursor:crosshair"> перекрестье</span><br />

<span style="cursor:default"> по умолчанию</span><br />

<span style="cursor:e-resize">e- размер</span><br />

<span style="cursor:help"> справка </span><br />

<span style="cursor:move">движение</span><br />

<span style="cursor:n-resize">n- размер </span><br />

<span style="cursor:ne-resize">ne- размер</span><br />

<span style="cursor:nw-resize">nw- размер</span><br />

<span style="cursor:pointer">указатель</span><br />

<span style="cursor:progress">процесс</span><br />

<span style="cursor:s-resize">s-размер</span><br />

<span style="cursor:se-resize">se- размер </span><br />

<span style="cursor:sw-resize">sw- размер </span><br />

<span style="cursor:text">текст</span><br />

<span style="cursor:w-resize">w- размер </span><br />

<span style="cursor:wait">ожидание</span><br />

</body></html>

Изображение и CSS

Коррекцию изображений следует производить в программах, созданных для работы с растровой графикой, например такими, как Adobe Photoshop или GIMP. Однако, если их нет под рукой, можно воспользоваться стилями CSS.

Изменение размеров рисунка

Изменение размеров рисунка реализуется с помощью свойств CSS height (высота) и weight (ширина). Рассмотрим это на примере, приведенном в листинге 5.12 (рис. 5.12).

Листинг 5.12. Изменение размеров рисунка

<html>

<head><title> Изменение размеров попиксельно </title>

img.normal{height:auto;weight:auto;}

img.izm{height:200px;weight:200px;}

p.exy{height:100px; width:250px;}

</style></head>

<p class="exy">Высота этого параграфа составляет 100px, а ширина 200px.</p>

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

</body></html>

Рис. 5.12. Пример изменения размеров рисунка

Элемент <style>, управляющий масштабированием рисунка, был размещен внутри элемента <head>. В этом примере менялись размеры не только рисунка, но и параграфа, причем ширина и высота задавались в пикселах.

Процентное изменение размеров

Свойства CSS height (высота) и weight (ширина) можно задавать и с помощью процентного содержания от первоначального размера. Рассмотрим изменение размеров рисунка на примере, приведенном в листинге 5.13 (рис. 5.13).

Листинг 5.13. Процентное изменение размеров

<html><head><title> Процентное изменение размеров</title>

img.normal {height:auto;}

img.1 {height:50%;}

img.2 {height:10%;}

</style></head>

<body>

<img class="normal" src="2.jpg " /> Высота auto<br />

<img class="1" src="2.jpg " /> Высота 50%<br />

<img class="2" src="2.jpg" /> Высота 10%

</body></html>

Рис. 5.13. Процентное изменение размеров рисунка

В этом примере размер рисунка задавался в процентах.

Задание размеров числом

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

Рис. 5.14. Вид изображения при изменении размеров

Листинг 5.14. Управление размерами изображения

<html><head><title> Задание размеров числом и стилем</title>

</body></html>

Видно, что стилевое форматирование, примененное к рисунку, имеет приоритет над локальным форматированием.

Создание галереи

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

Рис. 5.15. Галерея изображений

Листинг 5.15. Создание галереи

<html><head><title> Галерея изображений </title>

div.img { margin:2px; border:1px solid #0000ff; height:auto;

width:auto; float:left; text-align:center; }

div.img img {display:inline; margin:3px; border:1px solid #ffffff; }

div.img a:hover img { border:1px solid #0000ff;}

div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; }

</style></head>

<div class="desc">Двое_на_лодке</div></div>

<div class="desc"> Ступка </div></div>

</body></html>

При желании можно по-другому оформить надписи к рисунку, изменить масштаб изображений.

Изменение прозрачности изображения

Изменение прозрачности изображений реализуется с помощью фильтра filter:alpha. В данном примере используются стили, при этом прозрачность (свойство opacity) задается равной 30% (листинг 5.16 и рис. 5.16).

Листинг 5.16. Изменение прозрачности изображения

<html><head> <title>Изменение прозрачности изображения</title></head>

<body>

<img src="9.jpg" width="300" height="226" alt="Слон"

style="opacity:1.0;filter:alpha(opacity=100)" />

<img src="9.jpg" width="300" height="226" alt="Слон"

style="opacity:0.3;filter:alpha(opacity=30)" />

</body>

</html>

Рис. 5.16. Создание прозрачных изображений

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

Изменение прозрачности изображения при наведении курсора мыши

Изменение прозрачности изображений реализуется с помощью фильтра. Пусть прозрачность (opacity) в этом примере будет иметь значение 40% и будет изменяться при генерации события, состоящего в наведении курсора мыши на изображение (листинг 5.17 и рис. 5.17). Данное событие должно не только изменять прозрачность изображения, но и выводить всплывающую подсказку с названием изображения.

Листинг 5.17. Изменение прозрачности изображения при наведении курсора мыши

<html><head><title> Галерея изображений </title><style type="text/css">

img{opacity:0.4;filter:alpha(opacity=40);}

</style></head>

<body><h1>Прозрачность изображений</h1>

<img src="Бык.jpg" width="450" height="339" alt="Бык"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

</body></html>

Рис. 5.17. Изменение прозрачности изображения при наведении курсора мыши

Создание прозрачного блока текста на фоне изображения

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

Листинг 5.18. Создание прозрачного блока текста на фоне изображения

<html><head><title> Текст на фоне изображения </title>

div.background{ width: 500px; height: 250px; background: url(9.jpg) repeat; border: 2px solid black;}

div.transbox{ width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff;

border: 1px solid black; filter:alpha(opacity=60); opacity:0.6;}

div.transbox p{ margin: 30px 40px; font-weight: bold; color: #000000;

.q{font-weight:900;

COLOR:#00f000;FONT-FAMILY:'Comic Sans MS';letter-spacing:3;background-color:#fefeee}

</style></head>

<h1 STYLE="COLOR:#00f000;font-size:72;

FONT-FAMILY:'Comic Sans MS';letter-spacing:10;"> Пакет </h1> <div class="q">Это адрес источника (source), идентифицирующий компьютер-отправитель; передаваемые данные; адрес местоназначения (destination), идентифицирующий компьютер-получатель. </p></div></div></body></html>

Рис. 5.18. Создание прозрачного текстового блока на фоне изображения

Боксовая модель CSS

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

Рис. 5.19. Структурная схема боксовой модели CSS

Составляющие боксовой модели

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

• Содержание (Content) — внутреннее пространство блока, предназначенное для размещения текста и (или) изображения.

• Отступ (Padding) — пустое пространство вокруг содержания. Отступы сверху, справа, снизу и слева могут иметь разные или одинаковые размеры. Цвет, совпадающий с цветом содержания.

• Рамка (Border) — граница, окружающая Content и Padding. Рамка имеет цвет, стиль (непрерывная, точечная, пунктирная линия и т. д.), ширину (тонкая, средняя, толстая). Эти свойства рамки можно изменять. Поле (Margin) — пустая область вокруг рамки. Поле полностью прозрачно и создает пространство, в которое не могут вторгаться другие элементы. Поля сверху, справа, снизу и слева могут быть как одинаковыми, так и разными.

Пример использования боксовой модели приведен в листинге 5.19 (рис. 5.20).

Листинг 5.19. Боксовая модель

<html>

<head><title>Боксовая модель 1</title>

[title]

{

color:blue;

}

#wrapper {

border: 20px solid #fff000;

}

#box1 {

width: 500px;

padding: 30px;

border: 4px solid #999;

margin: 50px;

background-color: #00f000;

color: #000;

}

</style>

</head>

<body>

<h1 title="Боксовая модель">Боксовая модель</h1>

<p>Боксовая модель включает контент, отступы, границы, поля.

</div>

<p>Боксовая модель показывает рамку вокруг элемента и его размещение в пространстве по отношению к другим элементам.</p>

</body>

</html>

Рис. 5.20. Пример боксовой модели

Внешняя рамка оформляется с помощью контейнера #wrapper, внутренняя — с помощью контейнера #box1.

Использование внешнего файла

Рассмотрим страницу с четырьмя текстовыми блоками (рис. 5.21), размещенными в рамке (листинг 5.20).

Листинг 5.20. Четыре блока текста

<html><head><title>Текст в блоках</title>

<body>

<div id=box1> Я люблю тебя, жизнь,</div>

<div id=box3> Я люблю тебя, жизнь. </div>

<div id=box4> Я люблю тебя снова и снова.</div>

</body></html>

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

Рис. 5.21. Пример текста в блоках

Листинг 5.21. Файл style_5.20.css, используемый в листинге 5.20

body {

margin-bottom: 3em;

background-color: gainsboro;

}

#box1 {

position:absolute;

top: 50px;

left: 50px;

background-color: #ffedcb;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

background-color: #ecb7ff;

}

#box4 {

position:absolute;

bottom: 50px;

right: 50px;

background-color: #00ff95;

}

#box3 {

position:absolute;

bottom: 50px;

left: 50px;

background-color: yellow;

}

Раздел в разделе

Рассмотрим еще один пример боксовой модели, использующий вложение раздела в раздел (листинг 5.22). Название «Красный квадрат» соответствует фоновому цвету веб-страницы (рис. 5.22).

Листинг 5.22. Четыре блока текста, форматируемых внешними стилями

<html><head><title>КРАСНЫЙ КВАДРАТ</title>

html {

background: #ff0000;

color: #fff;

}

#wrapper {

background: #0000ff;

width: 350px;

height: 200px;

margin: 40px 0 0 40px;

}

#box {

background: #fff;

color: #111;

width: 150px;

height: 150px;

top: 80px;

left: 80px;

}

</style></head>

<p>Трансформация позволяет изменение размера, поворот,

искажение и отражение объекта.

Выравнивание объектов возможно относительно полей,

а также относительно друг друга.

</p></div></body></html>

Рис. 5.22. Пример раздел в разделе

Ширина бокса

Рассмотрим пример, в котором используются 5 боксов разной ширины, рамки которых имеют разный цвет и толщину (листинг 5.23). На рис. 5.23 показан фрагмент этой веб-страницы.

Листинг 5.23. Пять боксов разной ширины

<html>

#box1 {

border: 5px solid #353535;

}

#box2 {

width: 25%;

border: 10px solid #00f000;

}

#box3 {

width: 50%;

margin-top: 20px;

border: 15px solid #252525;

}

#box4 {

width: 80%;

margin-top: 20px;

padding: 20px;

border: 20px solid #959595;

}

#box5 {

width: 30%;

margin-top: 10px;

border: 1px solid #c0b090;

}

#box5 p {

padding: 25px;

}

</style>

</head>

<body>

<h3 title="Боксовая модель">Боксовая модель</h3>

<p>Боксовая модель позволяет управлять положением объектов на странице</p>

</body>

</html>

Рис. 5.23. Пять боксов разной ширины

Абсолютное позиционирование

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

Рис. 5.24. Абсолютное позиционирование

Листинг 5.24. Абсолютное позиционирование

<html>

<head><title>Боксовая модель 3</title>

#box1 {

width: 15%;

border: 19px solid #00f090;

}

#box2 {

position: absolute;

top: 50px;

right: 50px;

width: 20%;

border: 10px solid #cf0b090;

background-color: #f0e0c1;

color: #000;

}

#box3 {

position: absolute;

width: 25%;

margin-top: 60px;

border: 30px solid #292929;

}

#box4 {

position: absolute;

margin-top: 10px;

right: 50px;

border: 40px solid #f00;

}

#box5 {

position: absolute;

top: 250px;

right: 250px;

width: 20%;

border: 10px solid #f00;

background-color: #f2e9c3;

color: #000;

}

</style>

</head>

<body>

<h3 title="Боксовая модель">Боксовая модель</h3>

<p>Абсолютное позиционирование позволяет<br/>привязать бокс к определенной точке</p>

</body>

</html>

Плавающие боксы

Еще одним из способов позиционирования боксов являются плавающие боксы. Свойство float может принимать значение "left" или "right". Пример позиционирования четырех боксов, из которых два плавающих и два статичных (листинг 5.25), показан на рис. 5.25.

Рис. 5.25. Плавающие боксы

Листинг 5.25. Плавающие боксы

<html>

<head><title>Боксовая модель 4</title>

#box1 {

margin-top: 10px;

width: 22%;

border: 10px solid #c0b0f0;

background-color: #ffe0c0;

}

#box2{

float: left;

width: 22%;

width: 10em;

margin: 30px;

border: 1px solid #cdb090;

background-color: #f0e0c0;

color: #000;

}

#box3 {

float: right;

width: 10em;

margin: 10px;

border: 1px solid #c0b090;

background-color: #f0e0c0;

color: #000;

}

#box4 {

margin-top: 30px;

border: 1px solid #444;

}

</style>

</head>

<body>

<h3 title="Плавающий бокс">Плавающий бокс</h3>

</body>

</html>

Подведем итоги

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

Урок 6. Гиперссылки

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

Универсальный указатель ресурса

Для организации ссылок в HTML используется универсальный указатель ресурса (Uniform Resource Locator, URL), в общем случае имеющий следующий формат:

метод://имя_сервера:порт/путь#якорь

Первая часть URL (до двоеточия) описывает метод доступа или сетевую службу, вторая часть (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно два прямых слэша после двоеточия обозначают имя машины.

Наиболее часто используемыми методами являются file, http, ftp, mailto, telnet и news.

Имя сервера — необязательный параметр URL, описывающий полное сетевое имя машины. Например, www.piter.com — полное сетевое имя сервера издательства «Питер». Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL, относится к той же машине, на которой хранится HTML-документ, содержащий ссылку.

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

Якорь — это ссылка на место внутри текущего HTML-документа. Как будет показано далее, места в документе, на которые ссылается якорь, указываются в документе при помощи атрибута NAME.

Вставка ссылок в документ

Для вставки ссылок в документ используется элемент <а>. Он же позволяет вставить в документ якорь. Элемент <а> имеет собственные атрибуты, как общие, так и связанные с обработкой событий: href, name, id, methods, title, accesskey, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, charset, coord, hreflang, onblur, onfocus, rel, rev, shape, tabindex, target, type.

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

• Атрибут href. При вставке ссылки в документ обязательно указывается атрибут href. Значением атрибута является URL-адрес документа, на который указывает ссылка:

При использовании атрибута href любой текст, находящийся между тегами <a> и </a>, специальным образом выделяется веб-браузером (обычно подчеркивается и выделяется синим цветом).

• Атрибут name. Используется вместо атрибута href при вставке якоря в документ (см. раздел «Переходы внутри документа»).

• Атрибут id. Идентичен атрибуту name, может использоваться не только в теге <a>, но и в других тегах:

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

<a href="#имя абзаца"> ссылка</a>

• Атрибут methods. Задает протокол извлечения документа, например FTP, Gopher и т. д. Синтаксис:

<a methods="название"> необязательный текст </A>

• Атрибут title. Служит для визуализации подсказки. Синтаксис:

<a title="имя ссылки"> ССЫЛКА</a>

• Атрибут accesskey. Позволяет указать «горячую» клавишу, при нажатии на которую будет выполнен переход по ссылке. Синтаксис:

<a accesskey="имя клавиши"> ССЫЛКА</a>

Ниже перечислены некоторые примеры ссылок.

• Ссылка на HTML-файл с использованием протокола HTTP:

<a href="http://www.mizic.ru/alex/lena/page1.html"> ССЫЛКА </a>

• Ссылка на ZIP-файл с использованием протокола HTTP:

<a href="http://www.mizic.ru/alex/lena/test.zip"> ССЫЛКА </a>

• Ссылка на TXT-файл с использованием протокола HTTP:

<a href="http://www. mizic.ru/alex/lena/test.txt"> ССЫЛКА </a>

• Ссылка на MPG-файл с использованием протокола HTTP:

<a href="http://www.mizic.ru/alex/lena.mpg"> ССЫЛКА </a>

• Ссылка на EXE-файл с использованием протокола FTP:

<a href="ftp://ftp.spbszip.com/pub/priem/priem/install.exe"> ССЫЛКА </a>

• Ссылка, инициирующая создание сообщения электронной почты:

<a href="mailto:name@domen.ru"> ССЫЛКА </a>

• Ссылка на группу новостей:

<a href="news:comp.infosystems.www.announce"> ССЫЛКА </a>

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

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

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

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

Пример документа, содержащего внутренние ссылки, показан на рис. 6.1 (листинг 6.1).

Листинг 6.1. Пример создания внутренних ссылок

<html>

<head><title>Лекции по веб-дизайну</title></head>

<center><h1>Лекции по веб-дизайну </h1></center>

<p><h2><a href="Лекция1.htm">Лекция 1</a></p>

<p><a href="Лекция2.htm">Лекция 2</a></p>

<p><a href="Лекция3.htm">Лекция 3</a></p></h2>

</body></html>

Рис. 6.1. Документ с внутренними ссылками

Внешние ссылки

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

Пример документа, содержащего внешние ссылки, показан на рис. 6.2 (листинг 6.2).

Рис. 6.2. Документ с внешними ссылками

Листинг 6.2. Пример создания внешних ссылок

<html><head><title>Внешние ссылки</title></head>

<a href="http://www.piter.com/" target="main">Издательство <i>ПИТЕР</i></a> </body></html>

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

Переходы внутри документа

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

При вставке якоря также используется элемент <a>, но вместо атрибута href указывается атрибут name. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов, например:

<a name="имя_якоря"> Переходы внутри документа </a>

Для ссылки на установленный якорь необходимо в конце URL-адреса после имени документа указать имя якоря, отделив его символом #:

<a href="#имя_якоря"> Ссылка </a>

Пример использования якоря приведен на рис. 6.3 (листинг 6.3).

Рис. 6.3. Пример веб-страницы с якорями

Листинг 6.3. Пример создания якорей в документе

<html><head><title>ПРИМЕР ЯКОРЯ</title></head>

<h1>Пример якоря</h1></center>

<p><b>Оглавление</b></p>

<ul> <li><a href="#glava1">Глава 1</a></li>

<li><a href="#glava">Глава 2</a></li> </ul>

<p><a name="glava"></a>Глава 1</p>

<il> <p>Текст главы 1</p> </ul>

<p><a name="glava"></a>Глава 2</p>

<ul> <p>Текст главы 2 <br></p>

</body></html>

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

Графические ссылки

Как вы помните (см. урок 3), ссылкой может быть не только текст, но и изображение. При этом код программы на языке HTML и изображение должны находиться в одном каталоге.

Пример графической ссылки показан на рис. 6.4 (листинг 6.4). При щелчке на изображении открывается файл 4.4.htm.

Рис. 6.4. Графическая ссылка

Листинг 6.4. Пример создания графической ссылки

<html><head><title>Пеликан</title></head>

<h3 align=center> Пеликан </h3>

</body></html>

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

Ссылки и CSS

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

Псевдоклассы позволяют учитывать различные условия или события при определении свойств HTM-тега.

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

Для настроек специфических свойств ссылок используются псевдоклассы CSS: link, visited, hover, active.

Псевдокласс link предназначен для ссылок на страницы, которые пользователь еще не посещал. Псевдокласс visited используется для ссылок на страницы, которые пользователь посетил. Псевдокласс hover соответствует перемещению мышки над ссылкой. Псевдокласс active указывает на активную ссылку. Пример использования ссылок показан на рис. 6.5 (листинг 6.5).

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

Рис. 6.5. Пример использования ссылок

Листинг 6.5. Пример использования ссылок

<html>

<head><title>Ссылки</title>

a:link {color:red;} /*Не посещенная ссылка*/

a:visited {color:green;} /*Посещенная ссылка*/

a:hover {color:yellow;} /*Перемещение мышки над ссылкой*/

a:active {color:lime;} /*Активная ссылка */

</style></head>

<body>

<p><b><a href="Это">www.piter.com">Это не посещенная ссылка</a></b></p>

<p><b><a href="Это">www.piter.com">Это посещенная ссылка</a></b></p>

<p><b><a href="Это">www.piter.com">Это перемещение мышки над ссылкой</a></b></p>

<p><b><a href="Это">www.piter.com">Это активная ссылка</a></b></p>

</body></html>

Пример форматирования ссылок

Приведем еще один пример ссылок (рис. 6.6, листинг 6.6), где надпись меняет оформление при использовании ссылки.

Рис. 6.6. Пример форматирования надписей для ссылок

Листинг 6.6. Пример форматирования надписей для ссылок

<html>

<head><title>Форматирование надписей для ссылок</title>

a.one:link {color:#ff0000;}

a.one:visited {color:#0000ff;}

a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}

a.two:visited {color:#0000ff;}

a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}

a.three:visited {color:#0000ff;}

a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}

a.four:visited {color:#0000ff;}

a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}

a.five:visited {color:#0000ff;text-decoration:none;}

a.five:hover {text-decoration:underline;}</style></head>

<body><p>Виды ссылок</p>

<p><b><a class="one" href="Ссылка">www.piter.com">Ссылка меняет цвет</a></b></p>

<p><b><a class="two" href="Ссылка">www.piter.com">Ссылка меняет размер</a></b></p>

<p><b><a class="three" href="Меняется">www.piter.com">Меняется фон за ссылкой</a></b></p>

<p><b><a class="four" href="Ссылка">www.piter.com">Ссылка меняет шрифт</a></b></p>

<p><b><a class="five" href="Ссылка">www.piter.com">Ссылка подчеркивается</a></b></p>

</body></html>

При наведении курсора на ссылку надпись меняет внешний вид (увеличивается размер шрифта, появляется фон и т. д.).

Атрибуты гиперссылок

Гиперссылки можно вставить в документ не только с помощью элемента <а>, но и с помощью атрибутов гипертекста cite, href, hreflang, hrefmedia, hreftype, nextfocus. Пример атрибута гипертекста, управляющего списком, приведен в листинге 6.7 (рис. 6.7).

Рис. 6.7. Пример использования атрибутов гиперссылок

Листинг 6.7. Пример использования атрибутов гиперссылок

<html><head><title>Атрибуты гиперссылок</title></head>

<body>

<p cite="07_01.htm">Обратитесь к первому упражнению</p>

Учите немецкий!</p>

<quote href="07_02.htm"> Обратитесь ко второму упражнению </quote>

<p href="http://www.example.com/forPrinters.html"

hrefmedia="print">

Это печатная версия страницы.

</p>

<p href="http://www.piter.com "

hreftype="text/html,application/xhtml+xml">

Это тип страницы.

</p>

<table>

</table>

</body></html>

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

Подведем итоги

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

Урок 7. Списки

В этом уроке рассматриваются способы создания разнообразных списков.

Виды списков

Существует три основных вида списков в HTML-документе:

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

• маркированный список;

• список определений.

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

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

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

Нумерованные списки создаются с помощью элемента <ol> (от англ. ordered list — нумерованный список). Каждый элемент списка начинается с элемента <li>. Пример нумерованного списка, в котором нумерация осуществляется по умолчанию, показан на рис. 7.1 (листинг 7.1).

Листинг 7.1. Пример создания списка, нумерованного по умолчанию

<html><head><title>НУМЕРОВАННЫЙ СПИСОК</title></head>

<h3> ПРОТОКОЛЫ И МОДЕЛИ ИНТЕРНЕТ-ВЗАИМОДЕЙСТВИЯ </h3>

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

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

<ol>

<li>Модель клиент-сервер</li>

<li>Протокол TCP/IP (Transmission Control Protocol/Internet Protocol) </li>

<li>Протокол http (Hyper Text Transfer Protocol) </li>

<li>URL(Uniform Resource Locator) - унифицированный указатель ресурса </li>

<li>Протокол FTP (File Transfer Protocol) </li>

<li>Microsoft Internet Explorer - самый популярный браузер</li>

<li>Netscape Navigator - популярный браузер фирмы Netscape</li>

</ol></body></html>

Рис. 7.1. Список с нумерацией, заданной по умолчанию

Элемент ol> может иметь атрибуты type и start. Синтаксис:

Здесь:

• type — символы списка:

• A — прописные латинские буквы (A, B, C...);

• a — строчные латинские буквы (a, b, c...);

• I — большие римские цифры (I, II, III...);

• i — маленькие римские цифры (i, ii, iii...);

• 1 — арабские цифры (1, 2, 3...);

• start="n" — начальное значение списка.

Пример нумерованного списка с большими римскими цифрами и начальным значением XLIX показан на рис. 7.2 (листинг 7.2).

Рис. 7.2. Список с нумерацией из больших римских цифр

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

<html><head> <title> СПИСОК С НУМЕРАЦИЕЙ ИЗ БОЛЬШИХ РИМСКИХ ЦИФР </title></head>

WWW – World Wide Web (Всемирная паутина) – одна из служб, <br />

доступных пользователям Интернета<br />

_____________________________________________________________ <br />

Характеристики языка HTML:

<li> Простота</li>

<li> Универсальность</li>

<li>Совместимость</li>

</ol>

_____________________________________________________________ <br />

Интернет развивается с конца 1950-х годов

</body></html>

Пример списка с нумерацией из прописных латинских букв и начальным значением I показан на рис. 7.3 (листинг 7.3).

Листинг 7.3. Пример создания списка с нумерацией из прописных латинских букв

КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ WEB<br />

_____________________________________________________________ <br />

WWW - это не только текст и изображение, это еще и поведение

<li> Представление</li>

<li> Структура</li>

<li>Поведение</li>

</ol>

_____________________________________________________________ <br />

IAB (Internet Advisory Board) - координационный совет Интернета

</body></html>

Рис. 7.3. Список с нумерацией из прописных латинских букв

Пример списка с нумерацией из строчных латинских букв и начальным значением e показан на рис. 7.4 (листинг 7.4).

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

<body bgcolor="khaki">КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ WEB

Этап, предшествующий разработке

<li>Получение заказа на выполнение проекта</li>

<li>Работа с заказчиком</li>

<li>Взаимодействие с представителем заказчика</li>

<li>Мозговой штурм</li>

<li>Определение предполагаемой аудитории</li>

<li>Определение масштаба веб-узла</li>

<li>Анализ информации, представленной конкурентами</li>

<li>Бюджет и время выполнения проекта</li>

<li>Переговоры и подписание договора</li>

</ol>

_____________________________________________________________ <br />

ISOC (Internet Society) - неправительственная некоммерческая организация, <br />

специально созданная для поддержки и развития Интернета

</body></html>

Рис. 7.4. Список с нумерацией из строчных латинских букв

Пример списка с нумерацией из маленьких римских цифр и начальным значением iii показан на рис. 7.5 (листинг 7.5).

Листинг 7.5. Пример создания списка с нумерацией из маленьких римских цифр

<html><head><title>СПИСОК С НУМЕРАЦИЕЙ ИЗ МАЛЕНЬКИХ РИМСКИХ ЦИФР</title></head>

<body bgcolor="honeydew">Участники разработки веб-страницы

<li> Веб-дизайнер</li>

<li> Главный конструктор </li>

<li> Веб-мастер </li>

<li> Аудиодизайнер </li>

<li> Видеодизайнер </li>

<li> Аниматор </li>

<li> Программист </li>

<li> Авторы текстов </li>

<li> Специалист, оценивающий применимость узла </li>

<li> Руководитель проекта</li></ol>

_____________________________________________________________ <br />

IETF - международная организация, в которую входят специалисты по сетевым технологиям

</body></html>

Рис. 7.5. Список с нумерацией из маленьких римских цифр

Пример списка с нумерацией из арабских цифр и начальным значением 11 показан на рис. 7.6 (листинг 7.6).

Листинг 7.6. Пример создания списка с нумерацией из арабских цифр и начальным значением 11

<html><head><title>ЯЗЫКИ РАЗМЕТКИ</title></head>

<body bgcolor="moccasin">Языки разметки веб-страницы<br />

_____________________________________________________________ <br />

<li> HTML (Hyper Text Markup Language) </li>

<li> SGML (Standard Generalized Markup Language) </li>

<li> XHTML</li>

<li> Dynamic HTML</li></ol>

__________________________________________________________<br />

Mozilla - рабочая группа в составе Netscape

</body></html>

Рис. 7.6. Список с нумерацией из арабских цифр и начальным значением 11

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

Маркированные списки создаются с помощью элемента <ul> (от англ. unordered list — ненумерованный список). Каждый элемент списка начинается с элемента <li> (от англ. list item — элемент списка). Элемент <ul> может иметь атрибут type:

Атрибут type определяет внешний вид маркера. Доступные значения:

• disc — закрашенные круглые маркеры (вариант, заданный по умолчанию);

• circle — незакрашенные круглые маркеры;

• square — квадратные маркеры.

Пример маркированного списка с параметрами, заданными по умолчанию, показан на рис. 7.7 (листинг 7.7).

Листинг 7.7. Пример создания маркированного списка с параметрами, заданными по умолчанию

<html><head><title>ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА</title></head>

<body bgcolor="snow">Инструментальные средства<br />

____________________________________________________________ <br />

<ul>

<li>HTML-редакторы</li>

<li>WYSIWYG-редакторы </li>

<li>Adobe GoLive</li>

<li>Microsoft FrontPage</li>

<li>Macromedia Dreamweaver</li>

</ul>____________________________________________________________<br />

Java - язык программирования<br />

JavaScript - интерпретируемый язык, предназначенный для написания сценариев

</body></html>

Рис. 7.7. Маркированный список с параметрами, заданными по умолчанию

Пример списка с маркерами в виде квадратов показан на рис. 7.8 (листинг 7.8).

Листинг 7.8. Пример создания списка с маркерами в виде квадратов

<html><head><title>ЭЛЕМЕНТЫ ДИЗАЙНА</title></head>

<body bgcolor="paleturquoise">Элементы дизайна<br />

____________________________________________________________ <br />

<li>Пространство</li>

<li>Формат</li>

<li>Фрагмент</li>

<li>Основа</li>

<li>Линия</li>

<li>Форма</li>

<li>Фигура</li><li>Текстура</li>

</ul>

____________________________________________________________<br />

Дизайн - это организация визуальной информации

</body></html>

Рис. 7.8. Список с маркерами в виде квадратов

Пример списка с незакрашенными круглыми маркерами показан на рис. 7.9 (листинг 7.9).

Рис. 7.9. Список с незакрашенными круглыми маркерами

Листинг 7.9. Пример создания списка с незакрашенными круглыми маркерами

<html><head><title>ПРИНЦИПЫ ВЕБ-ДИЗАЙНА</title></head>

<body bgcolor="palegoldenrod">Принципы веб-дизайна<br />

____________________________________________________________ <br />

<li>Элементы дизайна </li>

<li>Удобство восприятия </li>

<li>Согласованность</li>

<li>Единство стиля</li>

<li>Контрасты</li>

<li>Простота</li>

<li>Наличие структуры</li>

<li>Акценты </ul>

____________________________________________________________ <br />

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

</body></html>

Вложенные списки

Примеры вложенных списков показаны на рис. 7.10 (листинг 7.10) и 7.11 (листинг 7.11).

Листинг 7.10. Пример создания вложенных списков

<html><head><title> СПИСОК СОТРУДНИКОВ </title></head>

<h2> Северо-Западный институт печати </h2>

<h3>Санкт-Петербургский государственный университет технологии и дизайна</h3>

<p> Единственный в Северо-Западном регионе России государственный специализированный вуз </p>

<ol>

<li> Факультет</li>

<ul>

<li> Издательское дело, реклама и книжная торговля</li>

<li> Полиграфические технологии и оборудование</li>

<li> Заочное отделение</li>

</ul>

<li> Специальности</li>

<li> Издательское дело и редактирование</li>

<li> Книгораспространение</li>

<li> Реклама</li>

<li> Графика</li>

<li> Технология полиграфического производства</li>

<li> Полиграфические машины и автоматизированные комплексы</li>

<li> Автоматизация технологических процессов и производств</li>

</ul>

</ol>

</body>

</html>

Рис. 7.10. Вложенные списки

Рис. 7.11. Еще один пример вложенных списков

Листинг 7.11. Еще один пример создания вложенных списков

<html><head><title> ПРИМЕР ВЛОЖЕННЫХ СПИСКОВ </title></head>

<ul>

<li> Пункт 1</li>

<ol>

<li> Пункт 1.1</li>

<lI> Пункт 1.2</li></ol>

<li> Пункт 2</li>

<ol>

<li> Пункт 2.1</li>

<li> Пункт 2.2</li></ol>

<li> Пункт 3</li>

<ol>

<li> Пункт 3.1</li>

<li> Пункт 3.2</li></ol></li></ul>

</body></html>

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

Список определений состоит из специальным образом расположенных терминов и их описаний (определений). Для создания списков определений на веб-страницах используются элементы <dl>, <dt> и <dd>.

• Элемент <dl> (от англ. definition list — список определений). Начинает список определений. Он включает в себя элементы <dt> (помечает термин) и <dd> (помечает описание термина). Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии. Элемент <dl> имеет атрибуты compact (современными браузерами не поддерживается), class, id, lang и style.

Если определяемые термины короткие, используется атрибут compact, который предназначен для вывода элементов списка в компактной форме (с уменьшенным кеглем и расстоянием между строками):

Атрибут compact не имеет значений, синтаксис остальных атрибутов:

class="Стилевой класс"

id="Имя"

lang="Код языка"

style="Определение встроенного стиля"

• Элемент <dt> (от англ. definition term — определяемое слово, термин). Представляет собой блочный элемент, который помечает текст термина в списке определений. Атрибуты элемента <dt>:

class="Стилевой класс"

id="Имя"

lang="Код языка"

• Элемент <dd> (от англ. definition description — описание определяемого термина). Представляет собой блочный элемент, который помечает текст определения в списке определений. Атрибуты элемента <dd>:

class="Стилевой класс"

id="Имя"

lang="Код языка"

style="Определение встроенного стиля"

Пример списка определений показан на рис. 7.12 (листинг 7.12).

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

Листинг 7.12. Пример создания списка определений

<html><head><title>ВВЕДЕНИЕ В ИНТЕРНЕТ</title></head>

<dl>

<dt>Интернет </dt>

<dd>- совокупность сетей, применяющих единый протокол обмена (точнее, обширное семейство из сотен протоколов) для передачи информации</dl>

<dl>

<dt>Локальная сеть </dt>

<dd>- соединение нескольких компьютеров при помощи технических и программных средств, которые позволяют объединять файловые системы входящих в нее компьютеров </dd></dl>

<dl>

<dt>Глобальная сеть </dt>

<dd>- такое соединение компьютеров, при котором допускается использование информации, физически находящейся на других компьютерах сети (однако пользовательским программам не представляется непосредственный доступ к файловой системе других компьютеров) </dd></dl>

<dl>

<dt>Провайдер сетевых услуг </dt>

<dd>- владелец конкретной сети, с которой клиент находится в юридических отношениях </dt></dl>

<dl>

<dd>- бит в секунду - единица измерения пропускной способности канала - основная характеристика канала связи </dd></dl>

<dl>

<dt>Гипертекст

<dd>- информационная структура, обеспечивающая навигацию посредством гипертекстовых ссылок </dd></dl>

<dl>

<dt>Гипертекстовая ссылка </dt>

<dd>- фрагмент текста или изображение, при активизации которого отображается документ, связанный со ссылкой</dd></dl>

</body></html>

Рассмотрим пример нескольких списков с разными маркерами, который показан на рис. 7.13 (листинг 7.13).

Листинг 7.13. Пример создания списков с разными маркерами

<html><head><title>ЕЩЕ ОДИН ПРИМЕР СПИСКОВ</title>

</head>

<ul>

....<li>Метод мозгового штурма</li>

....<li type=square> Метод моментов</li>

</ul>

<ol>

....<li> Метод системологии</li>

....<li> Метод системной ориентации</li>

....<li value=4> Метод проб и ошибок</li>

</ol>

....<li> Метод попарного сравнения</li>

....<li> Метод профильного анализа</li>

....<li> Метод Данахера—Руста</li>

</ol>

</body></html>

Рис. 7.13. Списки с разными маркерами

Помимо описанных в этом уроке списков, для создания логически связанных списков можно использовать элементы <menu> и <dir>.

• Синтаксис элемента <menu>:

<menu><li> элемент списка <li> элемент списка </menu>

• Синтаксис элемента <dir>:

<dir><li> элемент списка <li> элемент списка </dir>

Пример списка с созданием меню полей выбора представлен в листинге 7.14 (рис. 7.14).

Рис. 7.14. Пример списка с созданием меню

Листинг 7.14. Пример списка с созданием меню

<html><head><title>СПИСОК С СОЗДАНИЕМ МЕНЮ </title></head>

<body>

<menu>

<li><input type="checkbox" />Красный</li>

<li><input type="checkbox" />Желтый </li>

<li><input type="checkbox" />Голубой </li>

</menu>Не угнаться за тобой!</body></html>

Атрибут гипертекста

Атрибут гипертекста xml:base определяет базовый URI и позволяет в виде списка перелистать все страницы указанного ресурса. Пример атрибута гипертекста, управляющего списком, представлен в листинге 7.15 (рис. 7.15).

Рис. 7.15. Пример списка, управляемого атрибутом гипертекста

Листинг 7.15. Пример списка, управляемого атрибутом гипертекста

<html><head><title>СПИСОК С СОЗДАНИЕМ МЕНЮ </title></head>

<body>

<li href="/" src="Icons/piter_home">Домашняя страница издательства ПИТЕР</li>

<li href="/Comp">Это страница редакции компьютерной литературы</li>

<li href="/Econom">Литература по экономике</li>

<li href="/Econom/Market">Литература по маркетингу</li>

</ul>

</body></html>

Подведем итоги

В этом уроке были рассмотрены способы создания разнообразных списков, в частности нумерованных (с арабскими и римскими цифрами), маркированных (с маркерами в виде кругов и квадратов) и списков определений. Допускается создание вложенных списков. Приведены примеры использования элемента <menu> и атрибута гипертекста xml:base.

Урок 8. Таблицы

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

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

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

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

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

Элемент <table> имеет атрибуты align, border, background, bgcolor, bordercolor, cellpadding, cellspacing, hspace, space, colspec, width.

• Атрибут align. Если атрибут align располагается внутри элементов <caption> и </caption>, он определяет положение подписи таблицы и может принимать значения top (сверху, вариант заданный по умолчанию) и bottom (снизу). Если атрибут align встречается внутри элементов <tr>...</tr>, <th>...</th> или <td>...</td>, он управляет выравниванием данных в ячейках по горизонтали и может принимать значения left (слева), right (справа) или center (по центру).

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

border=3

• Атрибут background. Позволяет создать фоновое изображение для всей таблицы:

background = url

• Атрибут bgcolor. Задает фоновый цвет.

• Атрибут bordercolor. Задает цвет рамки. Используется только с атрибутом border, например:

<tablе border="число" bordercolor="цвет">

• Атрибут cellpadding. Определяет расстояние от границ ячейки до ее содержимого в пикселах.

• Атрибут cellspacing. Определяет расстояние между ячейками в пикселах.

• Атрибут hspace. Задает свободное пространство слева и справа от таблицы в пикселах.

• Атрибут vspace. Задает свободное пространство сверху и снизу от таблицы в пикселах.

• Атрибут colspec. Позволяет создать столбцы фиксированной ширины. Значение ширины задается либо в символах, либо в процентах, например:

colspec="20%"

• Атрибут width. Определяет ширину таблицы. Значение ширины задается либо в пикселах, либо в процентах от текущей ширины окна браузера; например:

width="256"

width="100%"

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

Создание строк и столбцов таблицы

Для создания строк и столбцов таблицы служит элемент <tr> и <col>.

Элемент <tr> (от англ. Table Row — строка таблицы) задает строку таблицы. Количество строк определяется количеством встречающихся пар <tr> и </tr>. Строки могут иметь атрибуты align (выравнивание по горизонтали) и valign (выравнивание по вертикали).

Элемент <col> (от англ. Column — столбец) используется для задания столбцов таблицы и может иметь атрибуты width, bgcolor, align, valign и id.

• Атрибут width. Задает ширину ячеек в столбце:

• Атрибут bgcolor. Задает цвет фона ячеек:

<сol bgcolor="цвет">

• Атрибут align. Задает режим горизонтального выравнивания содержимого внутри ячейки. Он может принимать значения left (влево), center (по центру) и right (вправо), например:

<сol align="значение">

• Атрибут valign. Задает режим вертикального выравнивания содержимого внутри ячейки. Он может принимать значения middle (по середине) и top (вверх), например:

<сol valign="значение">

• Атрибут id. Задает имя для ссылки, например:

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

Для создания ячейки таблицы служит элемент <td> (от англ. Table Data — табличные данные). Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером столбца, к которому она относится. Если в строке для некоторых столбцов отсутствует одна или несколько ячеек, браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами align="left" и valign="middle". Данное расположение может быть изменено как на уровне описания строки, так и на уровне описания ячейки.

Создание заголовка и подписи таблицы

Для создания заголовка таблицы используется элемент <th> (от англ. Table Head — заголовок таблицы). Ячейка заголовка таблицы имеет ширину всей таблицы. Текст в данной ячейке имеет атрибуты bold и align="center".

Для создания подписи таблицы используется элемент <caption> (от англ. caption — подпись). Элемент <caption> должен присутствовать внутри элементов <table> и </table>, но вне описания строки или ячейки. Атрибут align определяет, где будет находиться подпись. По умолчанию атрибут align имеет значение top (сверху), но может быть установлен равным bottom (снизу). Подпись всегда центрирована в рамках таблицы по горизонтали.

Элементы группирования таблиц

Для группирования элементов таблиц служат элементы <colgroup>, <tbody> и <tfoot>.

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

Элемент <colgroup> используется с целью группирования столбцов таблицы и может иметь атрибуты bgcolor, align, valign, span, width, id.

• Атрибут bgcolor. Задает цвет фона ячеек, например:

• Атрибут span. Задает количество столбцов в группе, например:

• Атрибут width. Задает ширину ячеек в столбцах, например:

• Атрибут id. Задает имя для ссылки, например:

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

Для создания логических связанных групп строк в теле таблицы используется элемент <tbody>, например:

У элемента <tbody> есть атрибуты bgcolor, align, valign, которые имеют тот же смысл, что и одноименные атрибуты элемента <colgroup>.

Для логического группирования строк в верхней части таблицы (то есть для создания верхней шапки таблицы) используется элемент <thead>, например:

У элемента <thead> есть атрибуты bgcolor, align, valign, id, которые имеют тот же смысл, что и одноименные атрибуты элемента <colgroup>.

Для логического группирования строк в нижней части таблицы (то есть для создания нижней шапки таблицы) используется элемент <tfoot>, например:

У элемента <tfoot> есть атрибуты bgcolor, align, valign, id, которые имеют тот же смысл, что и одноименные атрибуты элемента <colgroup>.

Основные атрибуты элементов таблицы

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

• Атрибут align. Управляет выравниванием содержимого ячеек. Допустимые значения left (влево), right (вправо) и center (по центру).

• Атрибут background. Задает фоновое изображение для ячеек строки:

background="url"

• Атрибут bgcolor. Задает фоновый цвет для ячеек строки.

• Атрибут border. Задает толщину рамки, обрамляющей ячейки строки. Нулевое значение данного атрибута означает отсутствие обрамления.

• Атрибут valign. Встречается внутри элементов <tr>, <th> и <td>. Он определяет вертикальное выравнивание данных в ячейках. Доступные значения top (вверху), bottom (внизу), center (по центру), middle (по середине) и baseline (по базовой линии).

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

• Атрибут colspan. Указывает, какое количество ячеек будет объединено по горизонтали с указанной ячейкой. По умолчанию значение этого атрибута равно 1.

• Атрибут rowspan. Указывает, какое количество ячеек будет объединено по вертикали с указанной ячейкой. По умолчанию значение этого атрибута равно 1.

• Атрибут rules. Определяет правила вывода линий между ячейками, например:

Доступные значения:

• none — нет линий (это значение используется по умолчанию);

• groups — линии отображаются только между группами строк (которые задаются элементами <thead>, <tfoot> и <tbody>) или группами столбцов (которые задаются элементами <colgroup> и <col>);

• rows — линии отображаются только между строками;

• cols — линии отображаются только между столбцами;

• all — линии отображаются между строками и столбцами.

• Атрибут frame. Указывает, какие стороны фрейма, окружающего таблицу, должны быть видимыми, например:

Доступные значения:

• void — стороны невидимы (это значение используется по умолчанию);

• above — видима только верхняя сторона;

• below — видима только нижняя сторона;

• hsides — видима только верхняя и нижняя стороны;

• vsides — видима только левая и правая стороны;

• lhs — видима только левая сторона;

• rhs — видима только правая сторона;

• box — видимы все четыре стороны;

• border — как и в предыдущем случае, видимы все четыре стороны (визуальных различий между этими двумя значениями нет).

• Атрибут id. Задает имя для ссылки, например:

Примеры таблиц

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

Рис. 8.1. Таблица из двух строк и семи столбцов, в которой надписи центрированы

Листинг 8.1. Пример создания таблицы из двух строк и семи столбцов, в которой надписи центрированы

<html><head><title>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</title>

</head>

<body>

<h3>Таблица из двух строк и семи столбцов</h3>

</table></body></html>

В следующем примере, представленном на рис. 8.2, надписи ячеек выполнены с использованием тегов <td> и </td>, поэтому они по умолчанию выровнены по левому краю (листинг 8.2).

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

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

<html><head><title>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</title>

</head>

<body>

<h3>ТАБЛИЦА ИЗ ДВУХ СТРОК И СЕМИ СТОЛБЦОВ</h3>

<tr>

<tr>

</table></body></html>

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

Рис. 8.3. Таблица из четырех строк и двух столбцов, у которой ширина рамки равна одному пикселу

Листинг 8.3. Пример создания таблицы из четырех строк и двух столбцов, у которой ширина рамки равна одному пикселу

<title>ТАБЛИЦА ЦВЕТОВ ИЗ ЧЕТЫРЕХ СТРОК И ДВУХ СТОЛБЦОВ</title></head>

<tr>

<h2>ЦВЕТОВАЯ МОДЕЛЬ CMYK</h2>

<tr>

<td width="50%">MAGENTA</td>

<tr>

<td width="50%">YELLOW</td>

<tr>

<td width="50%">BLAСK</td>

</table></body></html>

Программа, создающая таблицу из предыдущего примера, но выровненную по центру и имеющую толщину рамки 70 пикселов, представлена в листинге 8.4, а результат работы этой программы показан на рис. 8.4. Здесь несколько раз использован элемент<br>, что позволило опустить таблицу относительно заголовка. Ширина этой таблицы, регулируемая параметром width, составляет 30% от ширины экрана.

Рис. 8.4. Таблица основных цветов модели CMYK

Листинг 8.4. Пример создания таблицы основных цветов модели CMYK

<html><head><title>Таблица основных цветов модели CMYK</title></head>

<tr><h2>цветовая модель cmyk</h2><br /><br /><br /><br />

<tr><td width="50%">MAGENTA</td>

<tr><td width="50%">YELLOW</td>

<tr><td width="50%">BLAСK</td>

</table></center></body></html>

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

Рис. 8.5. Таблица из девяти строк и девяти столбцов

Листинг 8.5. Пример создания таблицы умножения

<html><head><title>ТАБЛИЦА</title></head>

<body>

<caption>ТАБЛИЦА УМНОЖЕНИЯ</caption>

</table></body></html>

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

Рис. 8.6. Таблица из восьми строк и пяти столбцов

Листинг 8.6. Пример создания таблицы из восьми строк и пяти столбцов

<html><head><title>ТАБЛИЦЫ БЕЗ РАМКИ</title></head>

<body>

<h3>ПРОСТАЯ ТАБЛИЦА БЕЗ РАМКИ</h3>

<table>

<tr><td>ячейка 11 </td><td>ячейка 12 </td><td>ячейка 13 </td><td>ячейка 14 </td><td>ячейка 15 </td></tr>

<tr><td>ячейка 21 </td><td>ячейка 22 </td><td>ячейка 23 </td><td>ячейка 24 </td><td>ячейка 25 </td></tr>

<tr><td>ячейка 31 </td><td>ячейка 32 </td><td>ячейка 33 </td><td>ячейка 34 </td><td>ячейка 35 </td></tr>

<tr><td>ячейка 41 </td><td>ячейка 42 </td><td>ячейка 43 </td><td>ячейка 44 </td><td>ячейка 45 </td></tr>

<tr><td>ячейка 51 </td><td>ячейка 52 </td><td>ячейка 53 </td><td>ячейка 54 </td><td>ячейка 55 </td></tr>

<tr><td>ячейка 61 </td><td>ячейка 62 </td><td>ячейка 63 </td><td>ячейка 64 </td><td>ячейка 65 </td></tr>

<tr><td>ячейка 71 </td><td>ячейка 72 </td><td>ячейка 73 </td><td>ячейка 74 </td><td>ячейка 75 </td></tr>

<tr><td>ячейка 81 </td><td>ячейка 82 </td><td>ячейка 83 </td><td>ячейка 84 </td><td>ячейка 85 </td></tr>

</table></body></html>

Программа, создающая ту же таблицу без рамок из восьми строк и пяти столбцов, но с атрибутом width, равным 100%, показана в листинге 8.7 (рис. 8.7).

Рис. 8.7. Таблица с шириной, равной ширине экрана

Листинг 8.7. Пример создания таблицы из восьми строк и пяти столбцов с шириной экрана