Разработка мультимедийного Web-сайта

     <big>текст</big> - вывести текст шрифтом большего размера.

     <small>текст</small> - вывести текст шрифтом меньшего размера.

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

     ^текст - вывести текст, если возможно, шрифтом меньшего размера и сдвинуть выше уровня строки (верхний индекс или надстрочный). 

     В качестве примера использования  тегов блочного уровня можно привести формирование вопросов на странице разрабатываемого Web-сайта ВОПРОС-ОТВЕТ. 

Рисунок 5 – Пример использования блочного уровня (макет страницы FAQ.htm) 

Фрагмент  HTML-кода:

…

<p><strong>ВОПРОСЫ</strong></p>

<h1 class="logo">&nbsp;</h1>

          </div>

    <li><span><a href="#"><a href="1.html">1. Что представляют собой средства разработки приложений?</a></span></li>

    <li><span><a href="#"><a href="2.html">2. Как можно классифицировать средства разработки приложений?</a></span></li>

     <li><span><a href="#"><a href="3.html">3. Что представляют собой средства разработки приложений, ориентированные на конкретные СУБД?</a></span></li>

     <li><span><a href="#"><a href="4.html">4. Что такое средства разработки, универсальные по отношению к СУБД?</a></span></li>

     <li><span><a href="#"><a href="5.html">5. Какие 2 категории средств разработки, универсальных по отношению к СУБД, можно выделить?</a></span></li>

  <li><span><a href="#"><a href="6.html">6. Как можно классифицировать приложения, использующие базы данных?</a></span></li>

  <li><span><a href="#"><a href="7.html">7. Что представляют собой приложения, созданные в архитектуре «клиент-сервер»?</a></span></li>   

    <li><span><a href="#"><a href="8.html">8. Что такое распределённые приложения?</a></span></li>

<p class="p1">&nbsp;</p>

… 
 
 

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

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

     Синтаксис тега IMG:

     <IMG SRC=”URL” ALT=”текст” HEIGHT=число WIDTH=число ALIGN=top/middle/bottom/texttop/absmiddle/baseline/absbottom/left/right

     BORDER=число VSPACE=число HSPACE=число>,

     где SRC=”URL” – адрес, указывающий браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером.

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

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

     WIDTH=число позволяет задать абсолютную ширину рамки вокруг рисунка (число от 0 до 9).

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

     BORDER=число позволяет определить ширину рамки вокруг рисунка (число от 0 до 9).

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

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

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

     Описание  фонового рисунка включается в тег  BODY при помощи атрибута BACKROUND:

     <BODY BACKROUND=”URL” BGPROPERTIES=fixed>

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

     Для размещения на странице элемента «бегущая строка» используется тег MARQUEE. Синтаксис тега MARQUEE:

     <MARQUEE BEHAVIOR=alternate/scroll/side DIRECTION=down/left/right/up BGCOLOR=…  WIDTH=… HEIGHT=…>

     …тело бегущей строки…

     </MARQUEE>

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

     Для подключения видеоизображений используется тег IMG с атрибутом DYNSRC:

     <IMG DYNSRC=”URL” START=mouseover/fileopen LOOP=…

     WIDTH=… HEIGHT=…>

     Атрибут START определяет начало воспроизведения видеоклипа, атрибут LOOP задает число воспроизведения видеоклипа. 

     

     Рисунок 6  – Пример вставки изображения  на страницу (макет страницы avtor.htm) 

     Фрагмент HTML-кода: 

…<div class="title"><img src="images/я.png" width="604" height="453" alt="Я"></div>… 

2.6 Разработка и настройка  системы гиперссылок

     Гипертекстовые  связи (ссылки) являются наиболее важным элементом Web-страниц. С их помощью реализуется технология гипертекста.  Задать ссылку в HTML-документе позволяет тег А.

     Синтаксис тега А:

     <A HREF=”адрес URL” TARGET=_blank/_self/_parent/_top>

     …тело ссылки…

     </A>

     Тег <A HREF=”URL”> открывает описание ссылки, а тег </A> - закрывает его.

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

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

     Адрес URL может указывать на:

     - другой HTML-документ;

     - закладку данного документа;

     - адрес электронной почты;

     - файловый объект (запрашивать файл  по FTP-протоколу для отображения браузером).

     В URL после имени файла через # (диез) может указываться имя специального маркера – закладки. Данный элемент является ссылкой на закладку (скрытый маркер, якорь) внутри HTML-документа. Это позволяет быстро переходить от одного раздела к другому внутри документа, не использую прокрутку экрана. При щелчке на ссылке, браузер открывает указанный раздел документа, а строка, в которой стоит маркер (якорь – обычно, первая строка или заголовок раздела), будет размещена в первой строке окна браузера (если первая строка не присутствует на экране).

     Для создания ссылки на закладку необходимо выполнить следующие шаги:

     - Создать закладку (маркер, якорь  раздела):

     <A NAME=”имя_закладки”> Текст, к котрому идет переход <A/>

     - Создать ссылку на закладку (маркер):

     <A HREF=”#имя_закладки”>Текст ссылки </A>

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

     

     Рисунок 7  – Пример использования гиперссылок  для главной страницы (index.htm) 

     Фрагмент HTML-кода:

…

<ul class="list">

<li><span><a href="#"><a href="ОБ АВТОРЕ.html">ОБ АВТОРЕ</a></span></li>

<li><span><a href="#"><a href="ИНФОРМАЦИЯ.html">ИНФОРМАЦИЯ</a></span></li>

<li><span><a href="#"><a href="ВОПРОС-ОТВЕТ.html">ВОПРОС-ОТВЕТ</a></span></li>

<li><span><a href="#"><a href="ЛИТЕРАТУРА.html">ЛИТЕРАТУРА</a></span></li>

</ul>

… 

2.7 Тестирование и  продвижение  Web-сайта

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

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

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

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

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

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

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

Размещение  сайта в сети интернет на хостинге.

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

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