Файл: Основы программирования на языке HTML ( Язык программирования HTML как средство создания гипертекстовых документов ).pdf

Атрибут: Hspace

Он определяет отступ картинки (в пикселах) по горизонтали от других объектов документа. При помощи указанного числа пикселей отдаляет изображение от текста.

<img src=«http://site.ru/images/kartinka.gif» hspace=«30»>

Атрибут: Vspace

Определяет отступ картинки (в пикселах) по вертикали от других объектов документа. Так же необходим при отдалении изображения от текста.

<img src=«http://site.ru/images/kartinka.gif» Vspace=«20»>

Здесь можно посмотреть примеры применения этих атрибутов.[2]

Важно указывать значения параметров Hspace и Vspace, если вы хотите оставитьизображение от текста. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

Атрибут: Align

Обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

Left

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

Right

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

top и texttop

Выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

Middle

Выравнивает базовую линию текущей текстовой строки с центром изображения.

Absmiddle

Выравнивает центр текущей текстовой строки с центром изображения.

Absbottom

Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

<img src=«http://site.ru/images/kartinka.gif» align=«left»>

Здесь можно посмотреть действие всех значений атрибута «Align» элемента <Img>

bottom и baseline

Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

Атрибут: Name

Указывает имя изображения, уникальное для данного документа. Имя можно указывать любое без пробелов с использованием латинских символов и цифр. Если необходимо, то нужно осуществлять доступ к изображению, например, из JavaScript-сценариев.

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

<img src=«http://site.ru/images/kartinka.gif» name=«risunok»>

Атрибут: Alt

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

<img src=«http://site.ru/images/kartinka.gif» alt=«Это сообщение, об ошибке, которое выводится вместо картинки»>

Атрибут: Border

---

Он позволяет создать рамку в ширину вокруг изображения в пикселах. Рамка не появляется при условии, если этот атрибут не указан в теге <Img>, только если изображение является гипертекстовой ссылкой. В таких случаях значение Border обычно указывают равным нулю.

Записывается так:

<img src=«http://site.ru/images/kartinka.gif» border=«2»>

Атрибут: Lowsrc

Указывает адрес (URL) графического файла с расширением с альтернативным изображением более низкого качества, чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

<img lowsrc=«http://site.ru/images/mini.gif» src=«http://site.ru/images/ kartinka.gif»> [8]

2.3 Особенности разработки ВЕБ-приложений для информационных киосков

Информационный киоск (информационный терминал, инфокиоск, инфомат) представляет собой автоматизированный программно-аппаратный комплекс, который предназначен для предоставления справочной информации. Ключевым достоинством данного устройства является его автономность, т.е. он способен предоставлять пользователю необходимую информацию без привлечения обслуживающего персонала 24 часа в сутки 7 дней в неделю. [1] Благодаря этому информационные киоски получили широкое применение. Их можно встретить во многих учреждениях, где предоставляется какая-либо справочная информация.

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

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

• дизайн;
• безопасность;
• запуск приложения.

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

---

Особое внимание стоит уделить высоким инфокиоскам с большой диагональю экрана. Во-первых, необходимо помнить о расстоянии между терминалом и пользователем. Оно не будет превышать расстояния вытянутой руки. А значит, фото- и видеоизображение не должно открываться на весь экран (иначе пользователю придется отходить от устройства для комфортного просмотра). Также не стоит располагать элементы управления слишком высоко (пользователь может не дотянуться) или слишком низко (пользователь может не попадать на элемент управления из-за малого значения угла зрения). [4]

Не меньшего внимания требует вопрос безопасности. Пользователь должен иметь возможность работать только с разрабатываемой системой. При этом к другому функционалу терминала доступа быть не должно, т.к. в этом случае действия пользователя непредсказуемы (например, он может выключить устройство). Для этого браузер с системой должен быть открыт в полноэкранном режиме. Можно переводить браузер в полноэкранный режим при каждом запуске. Однако, это не совсем удобно. Намного лучше открывать браузер в режиме информационного киоска. Для этого необходимо в свойствах ярлыка браузера прописать соответствующий ключ и адрес веб-приложения. [7] А если терминал используется только для разрабатываемого приложения, то для повышения скорости запуска системы можно добавить браузер с режимом информационного киоска в автозапуск. [8]

На следующем этапе работы над безопасностью системы необходимо не допустить возможность выхода из полноэкранного режима. Несмотря на отсутствие компьютерной мыши (и соответственно возможности вызова контекстного меню за счет клика ее правой кнопки), в информационных киосках контекстное меню может быть вызвано касанием с удержанием (долгий тап). Поэтому необходимо отключить вызов контекстного меню. Это можно сделать установкой соответствующего расширения для браузера [8] или написанием соответствующего скрипка в веб-приложении [9].

При работе над безопасностью разрабатываемого продукта необходимо особое внимание уделить клавиатуре. В большинстве информационных терминалов используется экранная клавиатура. В этом случае нельзя оставлять стандартную, потому что она предоставляет слишком широкие возможности пользователю. А это в свою очередь угрожает безопасности системы. [5] Поэтому необходимо использовать готовый плагин экранной клавиатуры [10] или разрабатывать свой. Содержание каждой отдельной клавиатуры будет зависеть от ее цели. Поэтому сложно сказать, что в ней должно быть. Однако однозначно можно сказать, каких клавиш в ней быть не должно:

---

• Alt;
• Win;
• Ctrl;
• Shift;
• Esc. [6]

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

По причине угрозы безопасности также стоит избегать ссылок на документы. Это связано с тем, что некоторые документы, которые браузер может отобразить (например, с расширением .pdf), будут открыты в другой вкладке браузера. А из-за полноэкранного режима пользователь не сможет самостоятельно вернуться в веб-приложение. Остальные документы, которые браузер не может открыть, будет предложено скачать. Для этого на экране терминала будет отображена панель задач и окно сохранения. Дальнейшие действия пользователя непредсказуемы, а значит, угрожают безопасности системы.

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

Браузеры в информационных киосках имеют дополнительные возможности. К ним относится функция pinch-to-zoom (возможность масштабирования контента на экране, разводя и сводя два пальца). [11] Однако на практике эта возможность не только не востребована, но и неудобна. Ее можно отключить, добавив соответствующий ключ в свойствах ярлыка браузера. [12]

Другой дополнительной возможностью, которая на практике неудобна, является перемещение по истории браузера жестом «Свайп вправо». Ее также можно отключить, добавив соответствующий ключ в свойствах ярлыка браузера. [12]

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

Заключение

В нашей жизни всё шире распространился Internet. Работа с языком гипертекстовой разметки HTML дает нам возможность создавать собственные сайты или Web-страницы. Для создания гипертекстовых документом используют обычное ПО, так и специальные программы.

---

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

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

1. В процессе работы с курсовой была изучена и проанализирована литература специального и научно-исследовательского содержания. Наиболее полно структура Web-страницы и Web-сайта рассмотрены в работе Храпоничевой Ю.А. [18]. В работе Петюшкин А. [12] подробно описан вопрос о размещении и оформлении текста в Web-документе. В работе Глушакова C.В. [5] хорошо представлен вопрос о гиперссылках в HTML документе.

2. Большое количество людей пользуется сетью Интернет. И одним из способов их самовыражения стало создание личных страничек.

Web-страница (англ. Web page) - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера[4]. 

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

3.Веб-страница - самостоятельная часть веб-сайта;  документ, снабженный уникальным адресом (URL).[16]

В странице может содержаться не только текст, но и другие элементы (графические файлы, шрифтовое оформление текста, таблицы и т. п.),и для того чтобы управлять конструкцией сайта используют теги. Весь набор правил, по которым нужно создавать файл с web-страницей и записывать отдельные теги, называется языком разметки гипертекста (HyperText Markup Language, HTML). При открытии HTML файла в браузере, он способен расшифровать теги и показать страницу в своём окне так, как она была задумана создателем. При обучении тегов в HTML нет необходимости помещать страницы на действующий сайт в Internet, достаточно всего лишь хранить их в виде файлов на конкретной рабочей станции или на сервере локальной сети.

4. Материалы приложения представлены электронным портфолио, разработанным на автора курсовой работы. Структура портфолио включает в себя титульную страницу, разделы «Биография», «Мои достижения», «Мои работы». Подготовленное портфолио отображает все приемы работы с языком HTML, рассмотренные в теоретической части курсовой работы.

Таким образом, язык HTML представляет широкие возможности для создания как отдельных Web-страниц, так и сайтов, электронные портфолио, электронных учебный пособий.

---