|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
У |
|
общаться между собой, но и сами создавать контент 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> |
Г |
|
|
|||||
|
|
|
|
|
|
|
|
|
||||||
В качестве маркера может быть использована любая картинка, |
|
|
|
<LH>список магистрантов: |
|
|||||||||
подключение которой выполняется с использованием листов сти- |
|
|
|
<LI> |
|
|
|
|
||||||
лей, что будет рассмотрено в соответствующем разделе. |
|
|
|
|
<UL> |
|
|
|
|
|||||
Пример фрагмента формирования ненумерованного списка при- |
|
|
|
БГАТУ |
|
|
|
|||||||
|
|
|
<LI>агромеханический факультет |
|||||||||||
веден ниже: |
|
|
|
|
|
|
|
|
|
<LI>агроэнергетический факультет |
||||
<UL> |
|
|
|
|
|
|
|
|
|
<LI>факультет предпринимательства и управления |
||||
<LH>список клиентов: |
|
|
|
|
|
|
|
й |
|
|
|
|
||
|
|
|
|
|
|
и |
</UL> |
|
|
|
|
|||
<LI>Иванов |
|
|
|
|
|
|
|
<LI>БГЭУ |
|
|
|
|||
<LI>Петров |
|
|
|
|
|
|
|
<UL> |
|
|
|
|
||
<LI>Сидоров |
|
|
|
|
|
|
|
<LI>учетно-экономический факультет |
||||||
|
|
|
|
|
|
р |
|
|||||||
</UL> |
|
|
|
|
|
|
|
<LI>факультет международных экономических отношений |
||||||
Организация нумерованного списка |
|
|
|
|
</UL> |
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|||||
Нумерованный список формируется с использованием элемен а <OL>, |
|
|
|
<LI>БГУ |
|
|
|
|||||||
внутрикоторогоможетнаходитьсяэлементформированиязаголовкасписка |
|
|
|
</OL> |
|
|
|
|
||||||
|
|
|
|
|
|
о |
|
|
Список определений |
|
|
|||
<LH> иобязательноодинилинесколько элементов<LI> форм рован яне- |
|
|
|
|
|
|||||||||
посредственно самих элементов списка. Фрагмент документа длятформ ро- |
|
|
|
Элемент <DL> списка определений в отличие от нумерованных и |
||||||||||
ваниянумерованногоспискаимеетследующийвид: |
и |
|
|
|
|
ненумерованных списков состоит из двух частей: первая служит для |
||||||||
<OL> |
|
|
|
|
|
|
|
|
задания термина, вторая – для вывода определения этого термина. В |
|||||
<LH> заголовок списка </LH> |
|
|
|
|
|
|
одном <DL> может находиться определение нескольких терминов: |
|||||||
<LI> первый элемент списка |
|
з |
|
|
|
|
<DL> |
|
|
|
|
|||
<LI> второй элемент списка |
|
|
|
|
|
<LH> заголовок списка </LН> |
||||||||
<LI> третий элемент списка |
о |
|
|
|
|
|
<DT> термин 1 |
|
|
|
||||
</OL> |
|
|
|
|
|
|
|
<DD> определение термина 1 |
|
|||||
|
|
|
|
|
|
|
|
<DT> термин 2 |
|
|
|
|||
По умолчанию нум рация осущ ствляется арабскими цифрами, |
|
|
|
|
|
|
||||||||
начиная с 1. Это умолчание можно изменить указанием атрибута |
|
|
|
<DD> определение термина 2 |
|
|||||||||
Type в виде: |
|
п |
|
|
|
|
|
|
</DL> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
157 |
|
|
|
|
|
|
|
|
|
|
158 |
|
|
е |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Р |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
У |
Текст после элемента <DD> будет отображаться с отступом |
|
|
|
|
|
Т |
||||||||||||
|
|
|
Vspace – ширина незаполненного пространства в пикселах снизу |
|||||||||||||||
от левой границы окна браузера. |
|
|
|
|
|
|
|
|
|
|
и сверху от изображения. |
|
|
|||||
Внутри <DD> могут находиться нумерованные и ненумерован- |
|
|
|
Alt – всплывающая подсказка появляющаяся при установке кур- |
||||||||||||||
ные списки. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
А |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
сора мыши на картинку. Чаще всего используется, если картинка |
||||
Примерспискаопределенийприведенниже: |
|
|
|
|
|
|
|
является гиперссылкой. |
|
|
||||||||
<DL> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Г |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
DynSrc – тоже, что и Src, только используется для анимацион- |
||||
<LH> заголовоксписка</LН> |
|
|
|
|
|
|
|
|
|
|
ных видеофайлов *.gif или *.avi. |
|
||||||
<DT> термин1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Loop – используется совместно с DynSrc и задает количество |
||||
<DD> определениетермина1<br>возможноизнесколькихстрок |
|
|
|
повторов видеоролика либо ключевое слово Infinite при бесконеч- |
||||||||||||||
<DT> термин2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
ном повторе. |
|
|
|
|
<DD> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вставка таблицы |
|
|
|
определение термина 2<br>вторая строка определения<br> тре- |
|
|
|
Таблицы являются одними из самых используемых при форми- |
||||||||||||||
тьястрока |
|
|
|
|
|
|
|
|
|
|
|
|
|
й |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ровании HTML-документа элементов. Часто таблицы используются |
||||
</DL> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
при формировании меню и еще более часто для рационального |
|||
Вставка графики |
|
|
|
|
|
|
|
|
|
|
и |
и компактногоБразмещения информации на странице. |
||||||
Вставка графики в документ HTML производится с помощью |
|
Пример формирования таблиц: |
||||||||||||||||
|
|
|
||||||||||||||||
элемента <IMG>: |
|
|
|
|
|
|
|
|
|
|
р |
|
<HTML> |
|
|
|
||
<Img srс=”имя графического |
файла” |
Align= |
Height= |
|
<Head> |
|
|
|
||||||||||
|
|
|
|
|
|
|||||||||||||
Width= Border= Hspace= Vspace= Alt= > |
|
|
|
|
|
|
|
</Head> |
|
|
|
|||||||
src – определяет имя графического файла |
вместе с его расшире- |
|
|
|
<Body> |
|
|
|
||||||||||
|
|
|
|
|
|
|
|
|
|
|
о |
|
|
<H1> Простейшая таблица</H1> |
||||
нием, сам графический файл должен находиться в той же папке, |
|
|
|
|||||||||||||||
что и HTML-документ. |
|
|
|
|
|
|
|
|
|
|
|
|
<Table Border=1> <!–это начало таблицы → |
|||||
Align – задает расположение изображения относительно |
|
|
|
|
<Caption Align=Center>У таблицы может быть заголо- |
|||||||||||||
документа: Left – изображение располагается слева |
от екс ; |
|
|
|
вок</Caption> |
|
|
|
||||||||||
Right – изображение располагается справа от текста; Top – вверх |
|
|
|
<TR> <!– это начало первой строки → |
||||||||||||||
|
|
|
|
|
|
|
|
|
низ |
|
|
|
|
<TD><!– это начало первой ячейки (столбца) → |
||||
изображения по строке текста; Bottom – (умолчание) |
изображе- |
|
|
|
||||||||||||||
ния по строке текста; |
|
|
|
|
|
|
|
текста |
|
|
|
Первая строка, первая колонка |
||||||
Middle – середина изображения по строке текста. |
|
|
|
</TD><!– это конец первой ячейки (столбца) → |
||||||||||||||
Height – |
высота изображения в пикселах. Если это свойство |
|
|
|
<TD><!– это начало второй ячейки (столбца) → |
|||||||||||||
не задано, то высота изображения |
определяется |
|
|
|
|
|
|
Первая строка, вторая колонка |
||||||||||
|
|
|
сам м файлом; |
|
|
|
|
|||||||||||
Width – ширина изображения в пикселах. Если это свойство |
|
|
|
</TD><!– это конец второй ячейки (столбца) → |
||||||||||||||
не задано, то ширина изображения |
|
|
самим файлом; |
|
|
|
|
</TR><!– это конец первой строки → |
||||||||||
Border – ширина рамки в |
пикселах |
|
|
|
|
|
|
|
Вторая строка, вторая колонка |
|||||||||
|
|
|
в кругизбражения (0 – |
|
|
|
<TR> <!– это начало второй строки → |
|||||||||||
нет рамки); |
|
|
незаполненного |
|
|
|
|
|
|
|
|
<TD><!– это начало первой ячейки (столбца) → |
||||||
Hspace – |
ширина |
ространства |
(расстояние |
|
|
|
Вторая строка, первая колонка |
|||||||||||
|
|
|
|
|
|
|
||||||||||||
от границы изображения до т кста) |
в икселах слева и справа от |
|
|
|
</TD><!– это конец первой ячейки (столбца) → |
|||||||||||||
изображения; |
Р |
|
|
|
|
|
|
|
|
|
|
|
<TD><!– это начало второй ячейки (столбца) → |
|||||
|
|
159 |
|
|
|
|
|
|
|
|
|
|
|
|
160 |
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|