Тема 4. Web-конструирование. Html-редакторы.
Урок 4.1. Язык HTML.
Запустить редактор Блокнот.
Написать - код (20-30 строк).
Сохранить в Интернет-формате в папке Мои Интернет-документы под именем index.html
Открыть броузером и проверить работоспособность.
Исправить ошибки. Снова проверить броузером.
Пример. В папке КСИС в файлеhtml.chmимеется пример с ошибками! Найдите и исправьте их.
<htm1>
<head> <title Мой первый Интернет документ /title>
</head> <body> Это тело документа
<p> Это начало нового абзаца
<a href=”c:\my_site.html>
</body> </htm>
Урок 4.2. Публикация и поддержка WEB-сайтов в сети.
Запустить любой редактор HTML (Блокнот, Word,FrontPage,HyperMethod,DreamViewили др.).
Разработать структуру сайта (10-20 элементов).
Разработать макет домашней страницы. Тема страницы – электронный бизнес.
Дополнить сайт другими страницами. Связать их гиперссылками.
Сохранить его в своей папке. Проверить работу с помощью броузера.
Опубликовать разработанный вами сайт в сети (Интернет). Например, на www.narod.ruилиwww.ukoс.ru(С помощью средств этих ресурсов или с помощьюМастера Веб-публикаций).
Изменить вашу Веб-публикацию в сети Интернет (С помощью средств этих ресурсов или сервисаFTP).
Справка 1. Компонента Web-папки Win XP позволяет использовать Проводник для передачи файлов на FTP-сервера. Функция применима к некоторым Web-серверам под управлением серверной программы MS. Администрирование веб-узла осуществляется с помощью оснасткиIIS.Название службы:seclogon (файлsvchost.exe). По умолчанию в XP - Не установлена.Вход от имени: Локальная система. Для работы Мастера нужны службы: 1) IISAdmin/ По умолчанию - Не установлена 2) Удаленный вызов процедур (RemoteProcedureCall(RPC)). По умолчанию - Автоматически.3) Диспетчер учетных записей безопасности (Security Accounts Manager).
Пример 1. Для использования Web-папок для загрузки/выгрузки файлов нужно зайти в Сетевое окружение и:
1. Выбрать задачу Добавить новый элементв сетевое окружение. Запустится Мастер создания соединения с FTP-или Web-сервером, с которого нужно загрузить (выгрузить) файлы. Далее Мастер спросит:
2. Где создать новый элемент - Другое сетевое размещение / Далее.
3. Адрес - введите адрес FTP-или Web-сервера (Например, www.narod.ru). Далее.
4. При соединении с общедоступным FTP-сервером установите флажок анонимного входа. При наличии учетной записи снимите флажок с этой опции и введите свое имя пользователя. Далее.
5. Введите имя Web-папки.Далее. Готово.
6. Появится новый элемент. Просмотрите содержимое. Скопируйте файлы с (на) FTP-или Web-сервер.
Справка 2. Можно также загружать файлы на свой сайт через FTP-клиента (в т.ч. проводник, броузер и др.).
Пример 2. Как подключиться к Народ.Ру по FTP?В командной строке FTP-клиента набрать: ftp://ваш_логин_в_Яндекс-Паспорте:ваш_пароль@ftp.narod.ru. Например, если ваш логин в Яндекс-Паспорте - myname, а пароль к нему - 12345, то строка должна быть такой: ftp://myname:12345@ftp.narod.ru. Когда соединение будет установлено, в окне браузера появится список файлов вашего сайта.
Примечание: при соединении через прокси, доступ по FTP возможен только в пассивном режиме. Это значит, что через браузер и др. программы, в которых нет возможности смены режимов связи, FTP работать не будет.
Урок 4.3. Язык XML.
Задание. Разработать XML- документ и просмотреть его с помощью браузера.
XML - это язык разметки XML-документов, позволяющий создавать и использовать свои собственные тэги.
Пример. Если мы хотим для обозначения элемента rose в документе использовать тэг <flower>, то можно ввести его и включить в документ фрагменты типа: <flower>rose</flower>. Можно задать иерархию - если описание цветка должно идти внутри описания оранжереи, то задаем новые тэги и порядок их следования.
<conservatory>
<flower>rose</flower>
<flower>tulip</flower>
<flower>cactus</flower>
</conservatory>
XML устанавливает единый стандарт на структуру документов, служит для описания грамматики других языков, контроля за корректностью данных в документах, проверки иерархических отношений внутри документа. Его можно использовать при построении сложных ИС, требующих обмена информацией между разными приложениями.
Пример. Общая структура простейшего XML-документа может выглядеть так
<?xml version="1.0"?>
<list_of_items>
<item id="1"><first/>Первый</item>
<item id="2">Второй <sub_item>подпункт 1</sub_item></item>
<item id="3">Третий</item>
<item id="4"><last/>Последний</item>
</list_of_items>
Правила создания. XML-документ начинается с тега <?xml?>. Тело состоит из элементов разметки (markup) и содержимого документа - данных (content). XML-документ называется формально-правильным, если:
В заголовке помещается объявление XML, включающее язык, номер версии и дополнительную информацию
Каждый открывающий тэг обязательно должен иметь закрывающий
В XML учитывается регистр символов
Все значения атрибутов, используемых в определении тэгов, должны быть заключены в кавычки
Вложенность тэгов строго контролируется и нужно следить за порядком открывающих и закрывающих тэгов
Конструкции языка. Содержимое XML-документа - это набор элементов, секций CDATA, директив анализатора, комментариев, спецсимволов, текстовых данных.
Элемент данных - это структурная единица XML-документа. Любой непустой элемент должен состоять из начального, конечного тэгов и данных (между тэгами). Вся информация между начальным и конечными тэгами, рассматривается как данные и поэтому учитываются все символы форматирования (пробелы, переводы строк, табуляции не игнорируются, как в HTML)
Пример. Следующий фрагмент является элементом:
<city>Novosibirsk</city>
Набором элементов в документе задается его структура и определяются иерархическое соотношения. Плоская модель данных превращается в сложную иерархическую систему с множеством связей между элементами.
Пример. Описание месторасположения Новосибирских университетов (расположены в городе Новосибирске, который, в свою очередь, находится в России) использует вложенность элементов XML:
<country id="Russia">
<cities-list>
<city>
<title>Новосибирск</title>
<state>Siberia</state>
<universities-list>
<university id="2">
<title>Новосибирский Государственный Технический Университет</title>
<noprivate/>
<address URL="www.nstu.ru"/>
<description>очень хороший институт</description>
</university>
<university id="2">
<title>Новосибирский Государственный Университет</title>
<noprivate/>
<address URL="www.nsu.ru"/>
<description>тоже не плохой</description>
</university>
</universities-list>
</city>
</cities-list>
</country>
В XML документе, как правило, определяется хотя бы один элемент (корневой) и с него программы-анализаторы начинают просмотр документа (в данном примере - <country>). В некоторых случаях тэги могут изменять и уточнять семантику фрагментов документа, по разному определяя одну и ту же информацию и тем самым предоставляя приложению-анализатору сведения о контексте данных. Например, прочитав фрагмент <city>Holliwood</city> можно догадаться, что речь в этой части документа идет о городе.
Комментариями является любая область данных, заключенная между <!-- и -->.
Атрибуты. Если при определении элементов нужны уточняющие параметры, то можно использовать атрибуты, т.е. пары "название" = "значение", которые надо задавать при определении элемента в начальном тэге.
Пример:
<color RGB="true">#ff08ff</color>
<color RGB="false">white</color>
или
<author id=0>Ivan Petrov</author>
<font color=”white” name=”Arial”>Black</font>
Cпецсимволы. Чтобы включить в документ спецсимвол (угловую скобку и т.п.), нужно использовать его специальный символьный либо числовой идентификатор. Например, < > " или $ (десятичная форма записи),  (шестнадцатеричная). Строковые обозначения спецсиволов могут определяться при помощи (entity).
Директивы анализатора. Инструкции, предназначенные для анализаторов языка, описываются специальными тэгами <? и ?>;. Программа клиента использует эти инструкции для управления разбором документа. Обычно инструкции используются при определении типа документа (<? Xml version=”1.0”?>) или создании пространства имен.
CDATA. Чтобы задать область документа, которую при разборе анализатор будет рассматривать как простой текст, игнорируя любые инструкции и спецсимволы, но, в отличии от комментариев, иметь возможность использовать их в приложении, используют тэг <![CDATA] и ]]>. Внутри этого блока можно помещать любую информацию (в область CDATA можно помещать, например, инструкции JavaScript). Естественно, надо следить за тем, чтобы в области, ограниченной этими тэгами не было последовательности символов ]].
Урок 4.4. Каскадные таблицы стилей. CSS.
С помощью стандартных тэгов HTML <font...>, <b> и т.д. можно задавать оформление web-страницы. У тэга <font...> могут быть параметры size, color, face. Когда на странице имеется много таких тэгов, то ее размер серьезно возрастает. Кроме того, становится сложным изменение дизайна страницы: чтобы изменить цвет шрифта приходится просматривать весь документ и заменять значение параметра color во всем тексте. Если несколько страниц объединены единым дизайном текста, то при попытке изменить хотя бы один параметр придется перерабатывать все страницы.
Возникает идея: а почему бы не отделить описание форматирования текста от самого текста? Чтобы информация о внешнем виде, свойствах всех тэгов одного типа находилась в одном месте. А еще лучше - чтобы она могла быть доступной не с одной web-страницы, а сразу с нескольких. Для реализации такой идеи придуманы CSS.
Каскадные таблицы стилей - это определенный способ записи информации об оформлении web-страницы, как бы некий отдельный язык разметки web-документов. Все современные браузеры его поддерживают.
Свойства CSS можно задавать любым объектам страницы - абзацам, ссылкам, ячейкам таблицы, а также произвольным фрагментам страницы. Для этого в тэги всех таких объектов помещается специальный параметр class. Все объекты web-страницы, имеющие одинаковое значение параметраclass, считаются принадлежащими к одному и тому же классу оформления. Оформление каждого класса и типа стандартных объектов описывается в начале страницы в тэге<style>. Содержимое этого тэга и называется "таблицей стилей", и именно в нем располагается информация об оформлении элементов web-страницы. Желательно, чтобы таблица стилей помещалась в разделе<head>, хотя она может находиться и после тэга<body>в любом местеweb-страницы.
Пример. Таблица стилей.
<STYLEtype="text/css">
P{text-align: justify; color: "#000000"}
A:link {font-family: Arial; color: "#2f4f4f"}
A:visited {font-family: Arial; color: "#717171"}
A:active {font-family: Arial; color: "#d4aa00"}
A:hover {font-family: Arial; color: "#c39100"}
.text1 {color: #113311; font-size: 12 px; font-weight: bold}
.text2 {font-size: 12 px; font-weight: bold}
.risun {height: 10; width: 20}
</STYLE>
В ней задано оформление двум тэгам - <a>и<p>и трем классам объектов - с именамиtext1,text2иrisun.
Если такую таблицу поместить на web-страницу, то весь текст в тэгах<p>будет выровнен по ширине и окрашен в черный цвет (указанный в таблице стилей #000000). Чтобы обеспечить такое же оформление без таблицы стилей, пришлось бы в каждом тэге<p>указывать параметрalign=justify, а после тэга перед текстом ставить<font color=#000000>. Помимо увеличения размера страницы и затруднения написания ее кода это привело бы еще и к невозможности быстро поменять цвет или выравнивание всех абзацев - пришлось бы править каждый тэг.
Запись о параметрах оформления стандартного тэга в таблице стилей, при отображении страницы эквивалентна указанию этих параметров именно в этом тэге. Поэтому если на странице, содержащей приведенную таблицу стилей, поставить тэг <center>перед<p>, то текст, оформленный тэгом<p>, останется выровненным по ширине, а если после<p><center>- то выровненным по центру.
Тэг <a>(гиперссылка) допускает четыре состояния: просто расположенная на странице -link, активная (то есть нажимаемая в данный момент) -active, посещенная -visited и "готовящаяся стать активной" (состояние при наведении курсора на ссылку) -hover. Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше - например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.
В вышеприведенной таблице описано еще три класса обьектов - text1,text2иrisun. Чтобы использовать эти описания для объектов на web-странице, необходимо указать принадлежность объекта к определенному классу с помощью включения параметра class в тэг этого объекта. Например,<td class=text1> приведет к оформлению текста в данной ячейке таблицы в соответствии с таблицей стилей - высота 12 пикселов, жирный шрифт и т.д.
Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг <div class=text1>, окружая им эти фрагменты. У<div>нет каких-либо свойств по умолчанию, поэтому его использование не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом.
Допустимо задание свойств и изображениям - например, если в странице присвоить класс risun изображению<img src="d.gif" class=risun>, то оно будет иметь размеры, указанные в таблице (высота 10 и ширина 20 пикселов).
Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например, <p style="margin-top: 140px"> задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство.
Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге "<p style="text-align: center">", будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга "<p>".
Способ задания размера шрифта в таблице стилей отличается от употребляемого в тэге <font…>. Если в качестве значения параметра "size" тэга<font…>может указываться 1-7, то в таблице стилей, в параметреfont-sizeможет быть указан либо фиксированный размер шрифта в пикселах (например "font-size: 12 px"), который при отображении в браузере увеличить или уменьшить нельзя (в Internet Explorer 5.0 это можно сделать в меню "Вид-Размер Шрифта"), либо процентное значение ("font-size: 120%"), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй - во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта - в пикселах - не стоит, так как многие пользователи предпочитают настраивать просмотрweb-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать.
Синтаксис таблицы стилей можно посмотреть в приведенном выше примере. Все задаваемые параметры заключаются в фигурные скобки. Разделитель между параметрами - точка с запятой, разделитель между параметром и его значением - двоеточие. Перед именем определяемого класса в таблице стилей ставится точка, а перед определяемым стандартным тэгом HTML - нет. Каждый новый тэг или класс описывается с новой строки. Параметры, каждого типа объектов - многообразны. Полный перечень можно посмотреть с помощью программы MSScript Editor.
Таблицу стилей можно использовать одну на несколько web-страниц. Можно даже брать ее с другого сайта. Для этого надо сохранить таблицу стилей (от тэга <style>до</style>без самих этих тэгов) в текстовом файле с расширением .css и поместить этот файл на сервер, желательно в ту же директорию, где находятся сами web-страницы. В раздел<head>каждой страницы надо поместить тэг<link rel=stylesheet type="text/css" href="url">, где вместо Url поставить имя файла с таблицей стилей или путь к нему Тогда при загрузке страницы таблица тоже будет загружена. При изменении тэгов и классов в таблице стилей изменится внешний вид всех страниц, на которых она используется.
С помощью таблиц стилей можно задать объектам страницы огромное количество свойств - гораздо большее, чем позволяют стандартные тэги HTML. Например, можно указать для фрагмента текста отступы от остального текста, причем эти отступы могут быть и отрицательными, что позволяет добиваться весьма оригинального вида web-страницы - c наложением фрагментов текста друг на друга. Можно сделать страницу с "водяными знаками" на заднем плане, причем без использования сложной графики в качестве фона.
Пример. На рис. 1 приведен пример подобной web-страницы. Ее HTML-текст имеет следующий вид:
<HTML><HEAD>
<STYLE type="text/css">
.x1 {color: green; font-size: 40pt}
.x2 {color: navy; font-size: 50pt; margin-top: -10px;}
.x3 {color: silver; font-size: 80pt; margin-top: -140px}
</STYLE>
</HEAD><BODY><CENTER>
<DIV class="x1">Первая строка</DIV>
<DIV class="x2">Вторая строка</DIV>
<DIV class="x3">Третья строка</DIV>
</CENTER></BODY></HTML>
Свойство margin-top определяет отступ текста сверху от предыдущего элемента web-страницы. Задав его значение отрицательным, можно получить наложение текста на предыдущий элемент (изображение, таблица и др.).
Р
ис.1
Web-страница, сделанная с использованием
таблицы стилей.
Пример. На рис.2 представлена web-страница, созданная без использования тэгов<table>, всего с одним рисунком. Подчеркнутый адрес является ссылкой. Как видно, возможности таблиц стилей позволяют сделать web-страницу похожей на красочный буклет, причем без использования сложной и медленной графики.
Рис..2. На этой странице нет таблиц и есть лишь один рисунок.
Примечание. Принцип таблицы стилей похож на принцип стилевого оформления текста в Word. Редактор WordXPи др. потому и могут сохранять в web-странице все доступное форматирование, что при сохранении документа в формате HTML используют таблицы стилей и тэгstyle.
Урок 4.5. Dynamic HTML.
Dynamic HTML - это не новый язык, отличный от стандартного HTML, а набор определенных команд и способ их использования, позволяющий динамически управлять web-страницей. Внешний вид страницы, на стандартном HTML, после загрузки изменен быть не может. Для возможности изменять внешний вид web-страницы без ее перезагрузки, в ответ на определенные действия пользователя, и был придуман DHTML. Чтобы возможности DHTML могли быть использованы, браузер должен поддерживать команды DHTML.
Принцип DHTML прост. Каждому элементу страницы может быть присвоено имя - идентификатор id. По этому имени к элементу можно обращаться с помощью скриптов или команд DHTML, изменяя свойства этого элемента. Изменения сразу вступят в силу, и внешний вид страницы изменится. Перезагрузка не потребуется.
С помощью DHTML можно обращаться не только к поименованным с помощью идентификаторов объектам, но и к любым объектам на странице. Можно, например, сделать так, что при определенном действии пользователя изменится стиль (цвет, шрифт, размер) всех заголовков на странице или всех гиперссылок. Скажем, была страница оформлена в зеленых тонах, а теперь стала оформлена в синих. Причем для этого не нужны громоздкие долго загружающиеся конструкции - достаточно небольшого скрипта, использующего возможности DHTML.
В DHTML существует возможность изменять не только свойства элементов страницы, но и ее содержание. К примеру, проводить замену одного текста на другой. Можно менять не только текст на странице, но и элементы ее оформления, например, фон, рисунки или заглавие страницы (отображающееся в заголовке окна браузера).
Команды DHTML построены так же, как и команды любого ООП-языка программирования: вначале пишется имя объекта, над которым выполняется действие или свойство которого нужно узнать, а затем, через точку - его подобъекты или свойства. Они могут быть использованы как в отдельно взятом виде, так и в составе скрипта на VBScript или JavaScript. В первом случае они выполняются при происхождении какого-либо события, в описании которого и помещаются команды. Во втором случае выполнение команд происходит при выполнении скрипта.
Для изменения элемента web-страницы нужно присвоить этому элементу идентификатор (включить в его тэг параметр "id="оригинальное имя""), и затем с помощью команды изменить свойство этого элемента. К примеру, для замены рисунка web-страницы на другой нужно в тэг включить идентификатор – например<img src="picture1.jpg" id=pict>, а затем в скрипт или описание события элемента – командуpict.src="picture2.jpg (установить значение свойства "источник" -src-элементаpict какpicture2.jpg).При выполнении этой команды исходный рисунок picture1.jpg будет замещен новым - picture2.jpg. Такая возможность открывает широкие перспективы перед web-дизайнерами. Можно, к примеру, организовать "галерею": посетитель нажимает название картины и ему тут же, без перехода на другую страницу, показывается эта картина.
Все элементы web-страницы связаны для браузера, поддерживающего DHTML, в разветвленную иерархическую структуру. Скрипты, использующие возможности DHTML, могут обращаться к различным элементам в этой структуре, учитывая его расположение в ней. Однотипные элементы (например, все изображения, все формы и.т.д.) объединяются в группы - так называемые "коллекции". Существуют встроенные коллекции - то есть группы элементов, которые объединены в коллекции по умолчанию, и к элементам этих групп можно обращаться из скриптов без специальных команд, например, коллекция всех изображений на странице.
У создателя web-страницы есть возможность самостоятельно организовывать однотипные элементы в коллекции и обращаться к разным элементам коллекций по их порядковым номерам. Например, чтобы изменить выравнивание текста во втором абзаце web-страницы, нужно включить в текст скрипта на VBScript такие строки:
Set abzaci=document.all.tags("p")
abzaci(0).align="right"
Эти две строки создают коллекцию всех тэгов абзацев и обращаются ко второму ее элементу - второму абзацу, присваивая значение "right" параметру "align" его тэга "<p>". Нумерация элементов всех коллекций начинается с нуля. Следует помнить, что при присваивании элементам страницы каких-либо свойств можно использовать лишь доступные свойства. Нельзя, например, непосредственно присвоить тэгу "<p>" или "<div>" свойствоcolor. Для этого нужно изменить свойствоstyle элемента "<p…>", например, командой "имя_элемента.style.color="red"", так как сами тэги "<p>" и "<div>" свойство color не поддерживают.
Для изменения текста web-страницы используется специальное свойство объектов, могущих содержать текст - innerHTML. Например, следующая команда заменит текст тэга "<div id=asdf>Старый текст</div>" новым "asdf.innerHTML="<b>Новый текст</b>"". При этом новый текст может содержать тэги HTML, как, например, здесь - "<b>", они будут интерпретироваться так же, как если бы были в документе изначально.
Команды DHTML можно включать как в скрипты, так и в текст web-страницы. В последнем случае они должны быть включены в обработчики событий элементов страницы. С каждым элементом web-страницы могут происходить различные события: на него могут навести курсор мыши, его могут кликнуть, его могут выделить и т.д. При каждом совершении того или иного события может быть выполнен скрипт или какая-либо команда DHTML. Например, так может выглядеть команда, которая при наведении курсора мыши на рисунок производит вышеописанную замену текста "<imgsrc="picture.jpg" onmouseover= (asdf.innerHTML= "<b>Новый текст</b>")>".
Задание. Выполнить пример с использованием технологии DHTML (можно на основе приведенных).