учебники / osnovy-informacionnyh-tehnologiy

У

общаться между собой, но и сами создавать контент web-

Т

3.4. Инструментальные средства создания web-сайтов.

страниц. Создание единого Web 2.0 (Web второго поколения) ха-

Основы web-дизайна

рактеризует информационное пространство, состоящее из мно-

Создание web-сайта состоит из нескольких этапов и взаимосвя-

жества информационных единиц, сети документов, которые рас-

занных процессов, таких как проектирование сайта, создание маке-

пределены

по различным

сайтам

и

сервисам. Эта

сеть

тов его страниц, написания наполнения и помещения его на сайт,

превращается в сеть данных, поиск которых производится поль-

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

зователями с применением наиболее удобных для них инстру-

Одним из этапов разработки web-сайта является web-дизайн, ко-

ментов, интерфейсов, технологий и сервисов, которые обеспечи-

торый в узком смысле термина означает визуальное оформление

вают доступ к содержимому сайтов.

web-страниц. В какойА-то степени это аналогия верстки газеты или

Web-сервис, который позволяет пользователям систематизиро-

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

вать ссылки, описания, снабжая их поисковыми критериями назы-

В то же времяГweb-дизайн может включать в себя и проектирование

вается социальными закладками.

структуры сайта, его навигации и в некоторых случаях даже движ-

Социальные геосервисы –

сервисы сети Интернет, которые по-

ков ресурса. Другими словами, продукт web-дизайна должен вклю-

зволяют находить, отмечать,

комментировать, снабжать фотогра-

чать в себя не только визуальные аспекты сайта, но и его юзабили-

фиями различные объекты в любом месте на изображении Земного

и

Б

шара с достаточно высокой

точностью, используются

реальные

ти – т. е. удобство при использовании.

Пять областей охватывают основные аспекты web-дизайна.

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

р

Содержимое. Сюда входят форма и организация содержимого

Адреса cоциальных геосервисов

. Возможный диапазон – от того, как написан текст до того,

http://maps.google.com/ – Карты Google

сайта

http://wikimapia.org/ – Карты Google + WikiWiki

как он организован, представлен и структурирован с помощью тех-

нологии разметки, такой как HTML.

http://earth.google.com/ – Объемная модель Земли Google

Зрительные образы. Это относится к компоновке экранного про-

http://panoramio.ru –

Фотосервис

с

возможностью

привязки

странства на сайте. Эта компоновка обычно создается с помощью

к цифровым картам

HTML, CSS или даже Flash и может включать графические элемен-

Сервис публикации фотографий. На этом сервисе каждый -

ты, выполняющие функции украшения или навигации. Визуальная

сетитель имеет возможность

опубликовать свои фо ографии,

сторона сайта – это наиболее

очевидный аспект web-дизайна,

указав их поисковые признаки. Фотографии можно

ь

но не единственная и не самая важная сторона дисциплины.

и комментировать.

по

тхран ли-

Технология. Хотя применение разнообразных

базовых Web-

YouTube. Самый быстрорастущий сайт в интернете:

технологий вроде HTML или

CSS попадает в

эту категорию,

ще видеороликов обо всем на свете, которые может акачать лю-

под технологией в этом контексте чаще подразумеваются различ-

бой желающий.

ные интерактивные элементы сайта, в особенности созданные с ис-

Интернет-аукцион.

Интернет-аукци н –

электр нная

торговая

пользованием программных методов. Это могут быть элементы

оценива

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

между людьми.

п

з

в диапазоне от языков сценариев, работающих на стороне клиента,

Интернет-телевидениеIPTV – это трансляция пр грамм телевидения

наподобие JavaScript, до серверных приложений,

таких как Java-

сервлеты, PHP-сценарии.

е

Доставка. Скорость и безотказность доставки сайта по сети Интернет

помультисервиснойсети. Обычно

ровайдеролучаетсигнал, например,

со спутника

и переда т го

о с

циальному протоколу

(MMS,

или внутренней корпоративной сети связаны с применяемым аппаратным

RTSPM и другие) конечным

ользоват лям, которые могут смотреть

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

Р

видео как наэкране компьют рного монитора, так и на телевизоре.

141

142

У

Назначение. Причина, по которой сайт существует, часто свя-

Т

Отличается от предыдущих двух типов сайтов полнотой представ-

занна с экономическими вопросами. Это следует учитывать, при-

ленной информации, зачастую содержит различные функциональ-

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

ные инструменты для работы с контентом (поиск и фильтры, ка-

web-дизайна оказывает воздействие

на

сайт,

может

изменяться

А

лендари событий, фотогалереи, корпоративные блоги, форумы).

в зависимости от типа создаваемого сайта. Личная домашняя стра-

Может содержать закрытые разделы для тех или иных групп поль-

ничка обычно не связана с экономическими соображениями, харак-

Г

зователей – сотрудников, дилеров, контрагентов и пр.

терными для Интернет-магазина. Внутренняя сеть производствен-

Процесс разработки сайтов проходит в несколько этапов.

ной компании может не попадать под влияние соображений,

1. Разработка макетов шаблонов web-страниц. Этим занимаются

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

web-дизайнеры, в задачи которых входит: определить, каким обра-

ного web-сайта, рекламирующего остросюжетный фильм.

зом конечный потребитель будет получать доступ к информации и

В настоящее время большинству сайтов свойственна динамич-

услугам сайт, т. е. разработать пользовательский интерфейс.

ность и интерактивность. Для реализации этих параметров исполь-

Готовые шаблоны предоставляются заказчику на одобрение. Чтобы

зуются web-приложения. Это готовые программные комплексы для

й

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

решения задач сайта. Web-приложение

входит в состав сайта,

содержимое. Если заказчик удовлетворен внешним видом шаблонов,

но само по себе без содержимого сайтом является только техниче-

и

то наступаетБследующая фаза разработки – верстка страниц сайта.

ски – это оболочка или шаблон, который необходимо наполнить

2. Верстальщик получает макеты шаблонов в виде простых изо-

и активизировать. Как раз этим занимаются специалисты по про-

р

бражений (например, в формате JPEG или PNG), либо разбитых

движению и раскрутке сайтов.

по слоям (например, в PSD или AI). Его основная задача – получить

Как правило, одному сайту соответствует одно доменное имя.

з этих графических макетов гипертекстовые web-страницы с под-

Именно по нему любой сайт идентифицируется в глобальной сети.

готовленными для интернета изображениями.

мо

Самое сложное на этом этапе – обеспечить совместимость

Впрочем, это не единственный возможный вариант. Один сайт -

жет размещаться на нескольких доменах,

а также несколько сайт в

со множеством браузеров, так как в некоторых из них одни и те же

ные непосредственно с деятельностью в сети, создают

собственные

зации элементов сайта. С нуля создается программная основа сайта.

могут существовать под одним доменом.

элементы разметки могут

отображаться не так, как задумано. Когда

За последние десятилетия всемирная паутина стала о личн й

достигнуто правильное отображение в большинстве браузеров, пе-

информационно-рекламной платформой и потому компании раз-

реходят к завершающему этапу.

рмация

3. Web-программирование. Программисту передаются готовые

личного масштаба (от крупных транснациональных и мировых

корпораций до частных предпринимателей), в том ч сле не связан-

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

сайты следующих типов:

о

Выбор языка программирования в данном случае – вопрос неприн-

− Сайт-визитка. На таких сайтах размещаются самые общ е

ципиальный. После того, как сайт готов к эксплуатации, остается

данные о владельце сайта. Предоставляется инф

о виде

наполнить его задуманной информацией.

деятельности, истории бизнеса, инф рмация

с трудниках, прайс-

Существует множество инструментов, с помощью которых web-

лист, контактные данные, реквизиты, схема презда.

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

− Представительский сайт. От

исанн й выше визитки отли-

ваются HTML-редакторами. В web-дизайне используется два типа

е

редакторов – визуальные и невизуальные (текстовые).

чается расширенной функциональностью: одробное описание ус-

Первые работают по принципу WYSIWYG (от англ. – What You

луг, портфолио, отзывы, форма обратной связи и т. д.

− Корпоративныйсайт. Сод ржит

олнуюинформациюокомпании-

See Is What You Get – что видишь, то и получаешь. Другими слова-

Р

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

143

144

ми, это способ подразумевает, что при редактировании материал

вать особых сложностей в работе с редактором FrontPage – знакомые

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

панели инструментов, наборы мастеров и редакторов, шаблонов, ав-

Текстовыми же редакторами, в основном, пользуются профес-

томатических функций и т. д. FrontPage – прекрасное решение для

сиональные web-дизайнеры, так как такие инструменты подразуме-

У

начинающих пользователей и web-мастеров.

вают написание кода самостоятельно. С помощью текстовых ре-

Microsoft Expression Web и SharePoint Designer отличается тем,

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

что предоставляет своим пользователям больше свободы, произво-

web-дизайнерам полностью воспроизводить задуманное, без вме-

Т

дит чистый, совместимый со стандартами код, работает с CSS

шательства инструмента по умолчанию. Существуют также редак-

и CSS-макетами. Он представляет собой конструктор и имеет сход-

торы, которые поддерживают оба принципа работы.

ство с SharePoint Designer.

Наиболее известными визуальными редакторами являются сле-

А

SharePoint. Среди возможностей – поддержка интерактивных

дующие программы, некоторые изкоторых будут рассмотрены ниже.

страниц ASP. NET, создание вида данных из RSS, XML, Office

Г

Визуальные редакторы

XML, сотрудничество со встроенным Workflow Designer, использо-

вание инструментов CSS, отслеживание статистики страниц, про-

Macromedia Dreamweaver MX – профессиональный инструмент

верка орфографии, интеграция с SharePoint Server.

HotdogБ– программа имеет простой и понятный пользователю ин-

для создания web-сайтов и приложений.

терфе с. Эта программа интегрируется с Flash, SQL, PHP, ASP, может

Разработчики утверждают,

что

Macromedia Dreamweaver MX

работать с GIF-изображениями (оптимизация, анимация), включает в

предназначена

для

проектирования, разработки

и администри-

себя HTML-компрессор, может создавать файлы-справки (CHM).

рования профессиональных web-сайтов и приожений. Кроме того,

й

Dreamweaver

легко

интегрируется

с другими

программами

и

Текстовые редакторы

от Macromedia, например такими, как Flash. Dreamweaver гораздо

Homesite – самый популярный и мощный текстовый редактор.

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

р

и сложный инструмент, а всякий сложный инструмент требует,

В нем достаточно легко работать с HTML-кодом, также есть под-

чтобы на его освоение было потрачено какое-то время, прежде, чем

держка XHTML, CSS-редактор.

пользователь сможет работать в нем.

HTML Pad поддерживает JavaScript, VBScript, SSI, ASP и Perl,

Adobe GoLive и LiveMotion – визуальный редактор для верс ки

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

web-страниц.

о

вочных материалов по CSS и HTML и многое другое.

Microsoft FrontPage

– простейший визуальный редак ор. Front-

Notepad (Блокнот). В этой программе нет функций, которые об-

Page поддерживает

HTML,

т

лечат создание сайта (подсветки кода, вставки готовых конструк-

JavaScript (скр птовый

язык),

CSS (каскадные таблицы стилей), DHTML (сочетан е HTML,

ция кода), но она имеется на компьютере у каждого пользователя

JavaScript, CSS и DOM – объектной

документа), совместим

в папке Стандартные.

и

с технологиями ASP (создание web-прил жений), XML (язык раз-

Популярные конструкторы сайтов

метки, текстовый формат, применяемый для хранения структуриро-

ванных данных), VBScript (скри т вый

з

язык пр граммирования),

Конструктор сайтов – это система из набора инструментов, которая

XSL (расширяемый язык таблиц стилей – смена CSS). FrontPage так-

позволяет создавать сайты онлайн и администрировать их без каких-

же имеет неплохие возможности

о у равлению изображениями,

либо специализированных знаний. С ее помощью можно выбрать тип

flash-роликами.

Любой

модели

опыт

работы

пользоват ль,

имеющий

будущего сайта (визитка, магазин и т. д.), готовый шаблон дизайна,

с такими приложениями как Word, Excel, Access, не будет испыты-

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

п

145

146

е

Р

У

Зачастую они предоставляют достаточно возможностей для

Т

Всего в APS-каталоге опубликованы более 200 наименований CMS

создания сайтов, которые по качеству могут превзойти продукты

и различных web-приложений (как коммерческих, так и open source).

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

Wix – имеет огромное количество качественных и разнообраз-

него бизнеса.

А

ных шаблонов (более 1000). Наряду с HTML5 есть возможность

В сети существует множество сервисов, помогающих создать

создания сайтов во Flash и поддерживается функции Drag&Drop.

web-приложение как новичку, так и человеку далекому от про-

Г

Сайты на Wix хорошо индексируются поисковыми системами.

граммирования, верстки сайтов и графических редакторов.

Большинство конструкторов сайтов бесплатны (расширение

uCoz – это бесплатный конструктор сайтов и хостинг для сайтов,

функционала потребует перехода на платный тариф), имеют более-

созданных с ее использованием.

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

Модули uCoz могут использоваться как в единой связке для соз-

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

дания полнофункционального сайта, так и по отдельности, напри-

как можно большее количество клиентов всеми доступными сред-

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

ствами. Лучшие конструкторы сайтов дают возможность на бес-

мент в системе создано более миллиона сайтов.

й

платном пакете сделать свой сайт и продвигать его в Интернете.

Модули – web-приложения, скомбинировав которые можно по-

Б

лучить сайт любой сложности:

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

и

с гостевой книгой до большого портала.

3.5. Языки разметки гипертекста HTML и XML

Любой Интернет-сайт состоит из одного или нескольких связан-

Taba.ru – онлайн-конструктор сайтов позволяет быстро создать

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

ных между собой HTML-документов и сопутствующих файлов (на-

3-го уровня и хостинг от 1 Гб.

пример, файлы картинок). HTML (Hypertext Markup Language) –

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

язык разметки гипертекста.

ко

XML (eXtensible Markup Language) используется для разметки

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

р

страиваются одним кликом мыши. Он позволяет посмотреть данные

стандартных документов во многом так же, как HTML. Однако

ты, Услуги и цены, О себе. Nethouse

предлагает

пользователю

Первым файлом сайта, который автоматически загружается, является

о новых пользователях, принять или отклонить их регистрацию.

XML ориентирован на работу со структурированными данными,

Nethouse – конструктор сайтов, который позволяет пользова елю

такими как результаты запроса, метаинформация об узле web или

создать качественный и функциональный сайт для бизнеса за -

элементы и типы схем документов.

вки

Все файлы, используемые сайтом, должны иметь имена, состоя-

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

щие только из латинских букв, цифр и знаков подчеркивания (_).

рироваться и заполнить всю необходимую информац ю – Кон ак-

APS-формат разработан, чтобы

ститьреализацию бизнес-

ется браузером.

выбрать один из множества красивых шаблонов д

айнов, а так-

файлсименемindex илиdefault (лучшевсегоиспользоватьindex).

web-приложение.

соответствии

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

же по желанию изменить фон.

Каждый HTML-документ составляется в соответствии с опреде-

APS – cтандарт пакетов автоматическ й устан

для модели

ленными правилами и должен иметь расширение *.htm или *.html.

Software-as-a-Service (SaaS).

упр

Программа, которая расшифровывает HTML-документ, называ-

Любой браузер реализует следующие функции: осуществляет алго-

модели SaaS для облачных сервис- р вайдер в и разработчиков

е

ритм обмена файлами с сайта, расшифровывает и отображает содержи-

ПО. APS-пакет – упакованное в

с APS-стандартом

На данный момент APS-стандарт

оддерживается хостинг-

скриптов JavaScript или VBScript. Для реализации и исполнения всех

Р

этих функций не нужны никакие другие программные продукты.

панелями Parallels: Plesk, Small Business Panel, POA и SysCP.

147

148

Алгоритм работы браузера при обслуживании сайта заключается

При открытии любого элемента по <имя-элемента> можно ука-

в следующем. Вы запускаете сайт по сети или головной файл сайта

зывать допустимые атрибуты этого элемента. Атрибуты описывают

из локальной папки компьютера. Браузер при этом получает пол-

свойства элемента, записываются в любой последовательности

ный URL-адрес сайта, т. е. попросту папку, где искать файлы сайта,

У

и отделяются друг от друга пробелом. Допустимые значения атри-

и отображает содержимое головного файла. Если в процессе рабо-

бутов указываются через знак

равно (=) за именем атрибута

ты с файлом требуется новый файл картинки или HTML-документа,

и должны заключаться в кавычки («значение») за исключением за-

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

Т

резервированных слов этого атрибута (не будет ошибки, если и за-

файл. С этим файлом он делает все, что предусмотрено сценарием.

резервированное слово будет заключено в кавычки). Значения ат-

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

рибута необходимо набирать с

соблюдением больших и малых

ного файла. Если по сценарию происходит частое переключение

А

букв. Перечень допустимых атрибутов всегда приводится вместе

между HTML-файлами, то это замедляет работу сайта и задейству-

с описанием конкретного элемента. Примером использования пар-

ет ресурсы сети (так называемый трафик).

Г

ного элемента может служить, например, задание для фрагмента

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

текста цвета и размера символов:

HTML (DHTML), реализуемый программами на языках скриптов.

<Font color=red size=4>фрагмент текста</Font>

Программы скриптов могут изменять сценарий, модифицировать

ТекстБHTML-документа набирается в любом текстовом редакто-

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

ре, например Блокнот (но ни в коем случае не в редакторе Word).

с которым в данный момент работает браузер.

Имена элементов, их атрибуты и значения можно набирать боль-

Единственное, чего не

может браузер даже

с использование

шими или малыми буквами. Принято элементы набирать большими

скриптов –сохранять введенную в процессе сценария информацию.

й

и

буквами.

Структура HTML-документа, основные элементы

Для правильного отображения в окне браузера HTML-документ

HTML-документ оформляется по определенным правилам и все-

набирается по определенным правилам.

гда содержит в себе элементы языка HTML. Элементы могут быть

Структура HTML-документа имеет следующий вид:

р

парными (контейнеры) и непарными (дескрипторы).

<HTML>

Контейнер имеет следующую структуру:

<HEAD>

<имя-элемента>любой текст</имя-элемента>

<TITLE> название документа </TITLE>

Как видно, контейнер открывается по <имя-элемента > закры-

<МЕТА...>

о

</HEAD>

вается по </имя-элемента>. Действие контейнера распрос раняе ся

на весь текст, который этот контейнер окаймляет (в данномтпр ме-

<BODY>

ре это любой текст).

Тело документа

Существуют парные элементы, которые допускается не закры-

</BODY>

вать, так как они автоматически закрываются по к нтексту HTML-

</HTML>

документа.

и

Элементы <BODY> и <HTML> можно не закрывать.

Дескриптор имеет следующую структуру: з

Как видно HTML-документ состоит из двух частей: заголовок

<имя-элемента>

(HEAD) и тело (BODY). В каждой части документа используются

Как видно, дескриптор

закрывается

</имя-элемента>,

свои элементы.

по

Браузером отображается только часть документа, заключенная

а смысл его использования не связан с со утствующим текстом до-

кумента, а заложен в названии самого элемента.

между <Body> и </Body>

п

149

150

не

Р

Элемент <TITLE> предназначен для указания названия доку-

Значениями атрибутов Text и BgColor могут быть зарезервиро-

мента и предназначен для лиц, изучающих ваш HTML-документ.

ванные слова цветов английского языка (в этом случае значение

Отображается элемент <TITLE>, как правило, в заголовке окна

не надо заключать в кавычки) или палитра цветов в виде: #C1D191

браузера.

У

(в этом случае значение надо заключать в кавычки). Палитра цветов

Элементы <МЕТА> используются для указания автора файла

определяется в шестнадцатеричной системе исчисления, где первые

и для указания ключевых слов,

на которые можно ориентиро-

два символа определяют красный цвет (00 – нет красного, FF – наи-

ваться при поиске информации в поисковых сайтах:

Т

больший процент красного), вторые две цифры определяют зеле-

<МЕТА NAME = "Author" Content = "Глеб Окунев"> – ука-

ный цвет и третьи две цифры – синий цвет. Зарезервированными

зание автора документа;

значениями цветов могут быть следующими:

<МЕТА NAME = "Keywords" Content = "информация, тех-

А

aqua (цвет морской волны) #00FFFF

нология, система"> – указание ключевых слов для поиска поиско-

black (черный) #000000

выми сайтами.

Г

blue (голубой) #0000FF

Лучше всего с использованием элемента META указывать также

fuchsia (фуксия) #FF00FF

вид кодировки русских букв:

gray (серый) #808080

<META Charset=”windows-1251”>

greenБ(зеленый) #008000

Таким образом, в самом простейшем виде HTML-документ бу-

lime (ярко зеленый) #00FF00

дет иметь следующий вид:

maroon (темно-бордовый) #800000

HTML>

navy (темно-синий) #000080

<HEAD>

й

и

purple (фиолетовый) #800080

<TITLE> автобиография </TITLE>

red (красный) #FF0000

< МЕТА Name = "Author" Content = " Глеб Окунев">

silver (серебряный) #C0C0C0

< МЕТА Name = "Keywords" Content = "автобиография">

yellow (желтый) #FFFF00

р

<META Charset=”windows-1251”>

white (белый) #FFFFFF

</HEAD>

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

о

<BODY>

добавлена приставка dark (темно) или light (светло), например,

Моя автобиография

в виде darkBlue.

Элемент <Body> может содержать следующ е атр бу ы:

Пример задания атрибутов в элементе Body приведен ниже:

Text=“значение” – цвет символов всего документа;

т

<Body BgColor=yellow Text=”#C0C0C0”>

BgColor=“значение” – цвет фона документа.

Кроме задания палитры цветов в шестнадцатеричной системе

BackGround=”имя файла картинки” –

документа будет

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

картинка (в качестве фона можно исп льз вать илиицвет по атрибу-

леного и синего:

ту BgColor или картинку по атрибуту BackGround).

<Body BgColor=yellow Text=”70%,10%,50%”>,

Отметим, что браузер воспринимает картинкизсо следующими

где для атрибута Text задан цвет с 70 % красного, 10 % зеленого

расширениями графических файлов: *.bmp, *.gif, *.jpg, *.jpeg. Файл

и 50 % синего смеси цветов.

картинки должен быть

в а ку,

где находится файл дан-

Если процентное содержимое всех цветов одинаковое, то это

фоном

будет серый цвет (от черного, если процентное содержимое всех

ного HTML-документа. В ”имя файла картинки” необходимо ука-

зывать полное имя файла вм сте с расширением, например, в виде:

цветов равно нулю, до белого, если процентное содержимое всех

BackGround=”aaa.gif”.

п

цветов равно ста).

151

152

помещен

Р

У

Основные элементы тела документа Body

В атрибуте

Т

Size указывается число от 1 до 7, где 1 – самый ма-

В теле документа

записывается отображаемая

часть сайта.

лый размер шрифта, 7 – самый большой размер шрифта.

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

По умолчанию полагается шрифт Times New Roman размером 3

черного цвета. Элемент фонового звука:

будет отображаться в окне браузера. В отличие от редакторов офор-

<BGSound

мительская часть текста (например, курсив или жирный текст) долж-

Balance=0

на быть указана определенным элементом, поэтому нет смысла на-

Loop=100

бирать в редакторе текст отличный от обычного его написания.

Volume=-500

При наборе текста переносы в окне редактора не будут соответ-

SRC=”aaa.wav”>

ствовать переносам в окне браузера. Переносы в окне браузера вы-

А

полняются после заполнения соответствующей строки окна браузе-

Атрибут SRC указывает вместе с расширением имя звукового

файла, предназначенного для воспроизведения. Форматами файла

ра. Это же относится и к пробелам между словами – всегда между

Г

словами будет один пробел независимо от их количества в редакто-

могут быть .wav, .au, .mid. Звуковой файл должен быть помещен в

туже папку, где находиться файл данного документа.

ре. Принудительный перенос на новую строку в браузере осущест-

Атрибут Loop указывает на то, сколько раз будет воспроизво-

вляется элементом <BR>, например в виде:

и

дитьсяБзвуковой файл. Если вместо числа указать ключевое слово

перваястрока<BR> втораястрока ит. д.

infinite, то файл будет воспроизводиться бесконечно.

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

Атрибут Balance может содержать число от –10 000 до 10 000

первая строка первая строка

р

балансирует звук между динамиками (значение 0 – одинаковое

вторая строка вторая строка и т. д.

й

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

звучание в обоих динамиках).

Атрибут Volume может принимать значение от –10 000 до 0

<BR> несмотря на то что, в редакторе этот текст записан водной строке.

и определяет громкость звука.

НижеприведеныосновныеоформительскиеэлементыHTML.

Элемент комментария:

Элемент базового шрифта:

Center – по центру

применяются по умолчанию для всего документа. Этот элементне-

<BaseFont

о

<!- комментарий->

Color=red

Этот элемент служит только для комментирования текста HTML-

документаиегосодержимоевокнебраузеранеотображается.

Face=”Times New Roman”

Элемент заголовков:

Size=3>

зеленый

ко орые

<Н1 Align = Right> текст </Н1>

Вместо H1 можно указывать H2, H3, H4, H5, H6. Элемент H1

Данный элемент задает тип, размер и цвет шр ф а,

обходимо размещать сразу же за элементом <BODY>.

Left – слева

В атрибуте Color указывается цвет

однимиз до-

Justify – по ширине окна

Текст, помещенный между <H1> и </H1>, будет являться заго-

пустимых английских

слов (в этом случае сл

можно не зак-

ловком.

п

-синий (в этом

лючать в кавычки) или в палитре красный-

случае значение надо заключать в кавычки)

т чно также,

как это

отображает заголовок самым большим шрифтом, элемент Н6 – со-

описано в соответствующем атрибуте элемента <BODY>.

В атрибуте Face

указывается

ответственно самым малым шрифтом. Атрибут Align используется

название

допустимого

шрифта

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

символов

с учетом про-

с соблюдением принятого на исания шрифта, т. е.

Right выравнивает заголовок по правой границе окна браузера,

Р

писных и заглавных букв в соотв тствующих местах.

Center – по центру, Left – по левой границе окна браузера.

153

154

У

Элемент центрирования текста:

указания размера шрифта

Т

Size

(значением этого атрибута должно

<Center>текст</Center>

быть число от 1 для самого малого размера шрифта до 7). Вместо

Элемент вставки горизонтальной линии:

элемента <Font> рекомендуется использовать листы стилей.

<HR Align = Center Width = "50%" Size = 2 Color=Red>

А

Блочные элементы:

Атрибут Align определяет выравнивание линии.

<p>текст</p> – новый абзац;

Атрибут Width определяет длину горизонтальной линии в пик-

Г

<BlockQuote> текст </BlockQuote> – текст отображается с от-

селах или в процентах относительно ширины экрана.

ступом от края листа, текст начинается с нового абзаца;

АтрибутSize определяеттолщинугоризонтальнойлиниивпикселах.

<PRE>текст</PRE> – определяет предварительно отформати-

Атрибут Color определяет цвет линии (см. описание значений

рованный текст. Переносы на новую строку и количество пробелов

цветов для элемента Body).

между словами будут такими же, как и в редакторе БЛОКНОТ;

Шрифтовые элементы:

<div> текст </div> – блок текста. Практически всегда использу-

Действие любого из приведенных ниже элементов распростра-

ется совместно с листами стилей.

няется на текст, который этот элемент ограничивает.

й

<em>текст</em> – выделенный фрагмент текста. Очень часто

<I>текст</I> – курсив;

используется совместно с листами стилей для придания фрагменту

<В>текст</В> – выделенный текст (полужирное начертание);

и

текстаБзаданных свойств.

<Strong>текст</Strong> – сильное выделение текста (жирное

<acronym Title=”Республика Беларусь”>РБ</acronym> – аббре-

начертание);

р

в атура и ее расшифровка. Расшифровка

определяется атрибутом

<U>текст</U> – подчеркивание;

Title и появляется при установке курсора мыши на аббревиатуру.

<Strike>текст</Strike> – зачеркнутый текст;

<marquee behavior=”alternate” scrolldelay=100 width=500

<ТТ>текст</ТТ> – моноширинныйшрифт(какнапишущеймашинке);

height=30> текст </marquee> – движение текста (справа-налево до

<Big>текст</Big> – большой шрифт. Этот элемент увеличивает

упора в левую границу и затем, наоборот) в блоке размером 500х30

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

-

со скоростью, определенной временем задержки 100 миллисекунд;

уменьшает

если опустить атрибут behavior, то движение текста будет только

женные друг в друга элементы <Big> для многократного увеличения

размера шрифта;

справа-налево.

<Small>текст</Small> – малый шрифт. Этот элемент

<cite Title=”Источник”>цитата</cite>

– указывает, что текст,

использова

размер шрифта на определенную величину. Можно

вло

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

вложенные друг в друга элементы <Small> для многокра ного

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

уменьшения размера шрифта. В ниже приведенном пр мере:

тов стилей тексту можно придать нужное раскрашивание. Атрибу-

<Big><Small> текст</Small></Big>

том Title можно указывать источник, откуда взята цитата; эта

текст будет печататься стандартным ра мером шр фта, так как

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

<Big> увеличивает размер шрифта, а элемент <Small> уменьшает его

Создание списков и вставка графики

на эту же величину.

п

Ненумерованный список определяется элементом <UL>, внутри

<Sub>текст </Sub> – подстрочный текст (знижний индекс);

которого может находиться элемент заголовка списка <LH> и обя-

<Sup>текст </Sup> – надстрочный текст (верхний индекс);

зательно один или несколько элементов <LI> непосредственно са-

же

– используется для ука-

мих элементов списка. Фрагмент документа для формирования не-

<Font Color=red Size=4>текст</Font>

зания характеристик шрифта. Чаще вс гоис ользуются два атрибу-

нумерованного списка имеет следующий вид:

та элемента <Font>: атрибут задания цвета символов Color (значе-

<UL>

Р

<LH> заголовок списка</LH>

ния этого атрибута такие , как и для элемента <Body>) и атрибут

155

156

<LI> первый элемент списка

<OL Type=a>

<LI> второй элемент списка

Атрибут Type может принимать следующие значения:

<LI> третий элемент списка

1 – арабские цифры;

У

</UL>

а – строчные буквы латинского алфавита;

В элементе <UL> можно указывать тип маркера списка следую-

А – прописные буквы латинского алфавита;

щим образом:

I – прописные римские цифры;

<UL Type = Disk> – заполненный кружок

Т

i – строчные римские цифры

Square – заполненный квадрат

Кроме этого нумерацию можно изменить в элементах <LI>:

Circle – незаполненный кружок

<LI VALUE = 3> – дальнейшая нумерация будет с 3-го символа.

Если тип маркера указан в явном виде, то именно он и отобра-

А

Пример формирования вложенного списка с использованием

жается. Если тип маркера не указан, то браузером автоматически

нумерованного и ненумерованного списков приведен ниже:

происходит его изменение для вложенных списков.

<ОL>

Г