Автор Анна Евкова

Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание

Введение

Глава 1. Язык программирования HTML как средство создания гипертекстовых документов 6

1.1. Сравнение концепций WEB: WEB 1.0, WEB 2.0, WEB 3.0, WEB 4.0 6

1.2. Структура Web-страницы и Web-сайта 11

Глава 2. Создание Web- страниц с помощью языка HTML 15

2.1. Размещение и оформление текста 15

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

Введение

Интернет развивается довольно стремительно. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементов WWW. WWW или же World Wide Web-глобальная сеть где содержит миллионы сайтов, на которых размещена различная информация. Для создания страницы необходимо владеть языками для написания серверных скриптов, как PHP,XML,ASP, Perl, для того чтобы страница была более динамичнее используются скрипты VBScript и JavaScript, они помогают производить вычисления ,как например работа с датой и временем.

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

Объект исследования: язык гипертекстовой разметки HTML.

Предмет исследования: изучение возможностей языка гипертекстовой разметки HTML.

Цель: рассмотреть особенности работы в языке гипертекстовой разметки HTML.

Задачи исследования:

Изучить и проанализировать специальную литературу по теме исследования.
Рассмотреть основы языка гипертекстовой разметки HTML.
Выявить особенности работы с языком гипертекстовой разметки HTML.
Создать электронное портфолио при помощи языка HTML.

Методы исследования: изучение литературы, анализ, синтез, классификация и обобщение, моделирование.

Практическая значимость: материалы курсовой работы можно использовать студентам и преподавателям при подготовке к учебным занятиям, а также при самостоятельном изучении языка гипертекстовой разметки HTML

Глава 1. Язык программирования HTML как средство создания гипертекстовых документов

1.1. Сравнение концепций WEB: WEB 1.0, WEB 2.0, WEB 3.0, WEB 4.0

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

Язык — HTML представляет синтаксис и набор управляющих команд (тегов, tags), они не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Также он для создания ссылок на другие документы, локальные или сетевые, которые находятся в сети Интернет. Добавляются команды, позволяющие «включать» и « выключать» те или иные режимы отображения, предписывающие браузеру выполнить какое-то действие (например, «разорвать» в этом месте абзац и перенести дальнейший текст на новую строку, загрузить из внешнего из внешнего файла и «внедрить» в текст иллюстрацию из указанного внешнего файла и пр.). Также можно разработать Web-страницу, без знания языка HTML,поскольку HTML тексты могут создаваться разными специальными редакторами. Но писать HTML нетрудно. Это даже легче чем изучить интерфейс самих специальных редакторов по HTML которые бывают ограничены в своих возможностях, или во все приводит к ошибки HTML код, который не работает на разных платформах.

Гипертекст-это информационная структура, которая позволяет установить смысловые связи между элементами текста на экране компьютера таким образом, чтобы переходить от одного элемента к другому. Когда его применяют по умолчанию он выделяется синим цветом и подчеркиванием, в последствии можно изменить цвет (гиперссылки).[14]

Слово же «гипертекстовый» в расшифровке названия языка HTML нуждается в отдельном пояснении.[8]

Сейчас, в наше время концепция Web 3.0 заполонила просторы интернета, но, прежде чем описывать WEB 3.0, нужно вспомнить историю Интернета и попытаться понять эволюцию этого живого существа, которое в наши дни является частью жизни миллиардов людей на Земле.

Первый вопрос, на который нужно ответить, это вопрос о том, почему был создан Интернет?

Вплоть до 90-ых годов 20-го столетия коммуникация и передача данных на расстояние были очень ограниченными. Но всё изменилось с появлением Интернета. Основная его идея заключалась в том, чтобы иметь возможность общаться между отдельными сетями, связывая их воедино. По мере развития интернета появлялись различные веб-сайты, что давало пользователям общаться на расстоянии.

Web 0.0 – лексический web

Web 0.0 – доинтернетовские сети, включавшие либо линейные двухточечные системы коммуникаций, либо квазипочтовые сети типа usenet, biznet, fidonet. Это были первые поиски и попытки объединения информационных сетей в действительно глобальную сеть. Web 0.0 можно охарактеризовать как стадию разработки интернета.

Web 1.0 – морфологический web

Первая реализация сети Интернет (до 1999 года) называется «сетью только для чтения». Роль среднего интернет-пользователя ограничивалась чтением информации, которая была ему представлена. На этом этапе размещением информации занимались только лишь администраторы сайта. Другими словами, веб-сайты этой эпохи позволяли пользователям искать информацию и читать её, но генерировать контент сами пользователи не могли. Было очень мало способов взаимодействия пользователя с контентом.

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

Web 2.0. – синтаксический web

Отсутствие активного взаимодействия обычных пользователей с сетью привело к рождению Web 2.0.

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

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

Это время также связано с созданием социальных сетей (таких, как MySpace, Facebook, Twitter), сайтов для обмена видео (YouTube), энциклопедий (WikipedoA), блогов (LiveJournal, Blogger). В эту же эпоху появляются веб-приложения, RSS, XML и веб-API.

Web 3.0 – семантический web

Web 3.0 также известен как «семантическая сеть». Он включает в себя несколько технологий для организации и структурирования данных, которые вы можете найти в Интернете, чтобы сделать его доступным и полезным для программ и программного обеспечения.

Цель состоит в том, чтобы сделать Интернет понятным для людей.

Многие веб-сайты начинают использовать технологию SVG для отображения анимированного контента, а Flash-анимация уже использует эту технологию для доставки расширенного анимированного контента без большого «веса» обычных видеофильмов. Контент сайтов генерируется и модерируется пользователями.

Возникли сетевые, «облачные» вычисления, забирающие управление приватными информационными ресурсами внутрь гипер-серверов Паутины.

В это время появляются описательные механизмы семантической паутины (RDF, DAML, OIL, OWL). В настоящее время они уже разработаны, однако на этапе интеллектуальной обработки и вывода информации проблемы всё ещё не решены.

Web 4.0 – прагматический web

Идея прагматической сети заключается в том, что, когда метаданные организованы (Web 3.0), люди и «машины» могут взаимодействовать в симбиозе. Это означает, что мы могли бы построить более мощные интерфейсы, например, контролируемые интерфейсы.

Инновации в сетевых технологиях WEB

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

Экспоненциальное развитие сети обусловливается её многоуровневым развитием, то есть одновременным развитием технологий на разных сетевых уровнях, когда инновация на одном уровне влечёт инновации на других уровнях иерархии:

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

Таблица 1.

Сравнение концепций Web

Концепция Уровень	Web 1.0	Web 2.0	Web 3.0	Web 4.0
аппаратно-физический	web-серверы, ПК	оптоволокно, графические процессоры	гипер-серверы, нетбуки, планшеты, многоядерные ПК	распознающие процессоры
сетевых протоколов	TCP/IP	защищённые протоколы, p2p-сети	мультимедиа-протоколы, семантические протоколы	управляющие телематические протоколы
операционно-системный	многозадачные ОС	сетевые ОС	облачные вычислительные структуры	загружаемые ОС
программно-инструмен-тальный	сетевые языки, 3GL	визуальные среды, 4GL	серверные среды, 5GL	языки искусственного интеллекта, 6GL
топологи-ческий	иерархическая фиксированная однонаправленная структура	сетевая многосвязная диалоговая структура	реляционная структура	логическая (объектно-реляционная) структура
управления данными	корпоративная сетевая СУБД	поисковые гипер-серверы	анализирующие гипер-серверы	управляющие гипер-серверы
прикладной	browser, статический HTML-сайт, HTML2.0 - HTML3.2	browser-framework, динамические сайты на CMS-движках, HTML4	идентифицирующий net-framework, сетевые прикладные сервисы, межсерверный обмен, HTML5, XML	slave-приложение, управляющее пользователем, глобальный master -управляющий гипер-сервер
сетевых отношений	сетевой гипертекст	интерактивная связь	поисковая оценивающая связь	глобальная управляющая связь
общественно-информа-ционный	технические сети, клиент осуществляет “серфинг” по сети, читает всю информацию сети	бытовые сети (СМИ), клиент “разговаривает”, общается с сервером, сервер регулирует область чтения и действий клиента	разведывательные сети, сервер собирает досье на клиента и управляет приложениями клиента.	управляющие сети, сервер управляет всеми клиентами в режиме электронного правителя

1.2. Структура Web-страницы и Web-сайта

Web-страница напоминает собой текстовый файл. Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использоваться любой текстовый редактор.

Страница на которую попадает пользователь, когда вводит www-адрес (или URL) данного сайта, должен называться index.html или welcome.html. Остальные страницы сайта (если они есть) могут иметь произвольные имена (но обязательно без символа «#» и состоящие из латинских букв, иначе могут возникнуть проблемы при их размещении на сервере), а пользователь будет попадать на них по ссылкам с основной страницы.

Содержимое файла Web-страницы заключается в тег <HTML> . . .

</HTML> - это указывает браузеру, что текст представляет собой HTML-документ, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать. Внутри этого контейнера обычно располагаются только листинги скриптов, если они имеются на данной странице.

Интернет — страница обычно состоит из двух частей: заголовка (HEAD) и тела (BODY). Эта базовая структура в простейшем виде , ее можно наглядно показать.

<HTML> Начало тега HTML – документа

<HEAD> Начало тега заголовка

<TITLE> начало тега строки — названия страницы

… строка названия страницы

</TITLE> конец тега строки — названия страницы

</HEAD> конец тега заголовка

<BODY> начало тега тела страницы

… тело (всё содержимое) страницы

</BODY> конец тега тела страницы

</HTML> конец тега HTML – документа

Таким образом, чтобы превратить имеющийся текст в готовую Web-страницу, достаточно лишь заключить весь этот текст в тег <BODY>, добавить сверху строку-название, заключённую в «двойной» тег <HEAD><TITLE>… </TITLE> <HEAD/>, а потом всё это заключать в общий тег <HTML> … </HTML>, тогда браузер воспринимает такую запись совершенно правильно и выдаёт в своём окне необходимый текст.

Чтобы создать страницу, следует сначала использовать эти теги.

Указанная строка-название будет выводиться в заголовке окна браузера, когда данная страница будет в нём просматриваться, а также (уже после размещения этой страницы в Интернете) в списках, выдаваемых поисковыми серверами, и в списке «Избранное» браузера, если эта страница будет туда помещена. [12]

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

Пример:

<TITLE> Web-страница </TITLE>

</HEAD>

<BODY>

Рис.1 Пример Web-страницы.

Полезно понять общий смысл всех структурных элементов HTML:

<main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице, и размещайте прямо внутри <body>. В идеале, он не должен быть вложен в другие элементы.
<article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
<section> подобен <article>, но больше подходит для сгруппирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или <section> на несколько <article>.
<aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т.д.).
<header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
<nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и/или название сайта или компании. Вторичные ссылки и т.д. не входят в навигацию.
<footer> представляет собой группу конечного контента для страницы.

Язык HTML — это язык гипертекстовой разметки, отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

Глава 2. Создание Web- страниц с помощью языка HTML

2.1. Размещение и оформление текста

Разбивка на абзацы

Чтобы разместить определенный текст на странице, текст может быть заготовлен заранее, тогда добавляются требуемые теги, или же Интернет-страница должна быть в виде шаблона, текст можно ввести в него с клавиатуры или скопировать через буфер обмена. Когда мы в тексте прописываем абзац, в браузере это игнорируются, поэтому каждый абзац обрамляется парой тегов: <P> (в начале) и </P> (в конце),так как этот тег закрывающийся, тогда между абзацами автоматически оставляется небольшой отступ.

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

Длинные фрагменты текста автоматически переносятся на новые строки, в соответствии с установленной в данный момент шириной окна браузера. При необходимости можно запретить такой автоперенос, заключив соответствующий фрагмент текста в тег <NOBR> . . . </NOBR>. Однако, когда такая строка не умещается в окне браузера целиком, её чтение существенно затрудняется необходимостью использования горизонтальной линейки прокрутки, поэтому злоупотреблять этим приёмом не следует.

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

Выравнивается с помощью атрибута ALIGN, если по умолчанию то будет слева, ALIGN записывается внутри тега <P>: < P ALIGN =… >, где можно записать одно из следующих значений:

CENTER - центрировать

RIGHT – выровнять по правому краю

LEFT – выровнять по левому краю

JUSTIFY – выравнивание по формату (по левому и правому краям одновременно).

При использовании данного атрибута в конце абзаца нужно обязательно записать закрывающий тег </P>.

Пример:

<TITLE> Абзацы</TITLE>

</HEAD>

</BODY>

<P> По умолчанию- левый край. </P>

<P ALIGN=CENTER> Значение CENTER <BR> разрыв строки. <BR> </P>

<P ALIGN=RIGHT> Значение RIGHT — выравнивание по правому краю. </P>

<P ALIGN=LEFT> Значение LEFT — выравнивание по левому краю.</P>

<P ALIGN=JUSTIFY> Значение JUSTIFY –выравнивание по ширине </P>

</BODY> </HTML>

Рис. 2. Разбивка на абзацы.

Текстовый блок

В случае необходимости указания специальных свойств отдельному фрагменту текста используется тег <DIV>. Изменение свойств осуществляется посредством назначения выбранному фрагменту текста стиля CSS, например:

<DIV STYLE=''COLOR: RED;''> Фрагмент текста, набранный серым цветом. </DIV>

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

Для этого тега возможно использование атрибута типа выравнивания ALIGN.[18]

Заголовки и подзаголовки

В HTML чтобы объявить текст заголовком или подзаголовком ( задав для него крупный и жирный шрифт, чем для остального текста), достаточно заключить абзац в тег <H*>...</H*>, где записаны звездочки записывается цифры от 1 до 6 (если тег открыт к примеру с цифрой 3 , то и закрывается он с той же цифрой). При 1-это задает шрифт наибольшего размера, 2-чуть меньше и т. д. до 6. Так же можно указать выравнивание, по умолчанию будет стоять по левому краю. Чтобы выровнять, можно воспользоваться атрибутом ALIGN и записать в составе открывающего тега <H*>.

Пример:

<H1 ALIGN=CENTER> Заголовок по центру (H1)</H1>

<H3 ALIGN= RIGHT > (Н3) по правому краю </H3>

<H5 ALIGN=LEFT> (Н5) по левому краю </H5>

<H6 > (Н6) по левому краю </H6>

Изменение атрибутов шрифта: вид, размер символов, цвет.

Тег <FONT>отображает внешний вид текста, он представляет контейнер для изменения характеристик цвета шрифта, размер и стиль. Этот тег закрывающийся. У тега <FONT> есть ряд его атрибутов:

1)Чтобы установить желаемый цвет текста COLOR= ''[цвет]'', для установки желаемого цвета используется словесное обозначение( White,Black,Green), также используется цифровой код(#FFFFFF,#000000,#008000), или же значение RGB(Red,Green,Blue) (255 250 250, 000, 0 128 0).

Таблица 2

Названия цветов

Цвет

Значение RGB

Символьная метка

Цифровой код

Белый

Черный

Зеленый

Светло-зеленый

Серый

Светло-серый

Желтый

Темно-бордовый

Синий

Темно-синий

Голубой

Изумрудный

Красный

Пурпурный

Розовый

Оливковый

255 255 255

000

0 128 0

0 255 0

128 128 128

192 192 192

255 255 0

128 0 0

0 0 255

0 0 128

0 255 255

0 128 128

255 0 0

128 0 128

255 0 255

128 128 0

White

Black

Green

Lime

Gray

Silver

Yellow

Maroon

Blue

Navy

Aqua

Teal

Red

Purple

Fuchsia

Olive

#FFFFFF

#000000

#008000

#00FF00

#808080

#C0C0C0

#FFFF00

#800000

#0000FF

#000080

#00FFFF

#008080

#FF0000

#800080

#FF00FF

#808000

- 1. Для того чтобы уменьшить или увеличить размер шрифта используется атрибут SIZE=[цифра], указывается размер шрифта в неких ''абсолютных'' единицах (от 1 до 7, по умолчанию 3).

Таблица 3

Список размеров

Значение атрибута	SIZE Размер символов в пикселях
1	9
2	10
3	12
4	14
5	18
6	24
7	36

Также может предаваться знаком ''+'' или ''-'', указывающим, что требуется увеличить или уменьшить величину шрифта на заданное количество условных единиц относительно текущего размера (например, <FONT SIZE=-2> ... </FONT>).

3) Стиль шрифта текста, отображаемого на экране- атрибут FACE=''[название шрифта]'', где в качестве значения указывается название желаемого шрифта, например: <FONT FACE = ''Courier New''>...</FONT>.

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

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

Пример действия атрибута FACE и COLOR:

<FONT FACE=''Arial Cyr'' COLOR=BLUE> ШРИФТ </FONT>

<FONT FACE=''Times new Roman Cyr'' COLOR= #008000> РАЗНОГО </FONT>

<FONT FACE=''Courier New Cyr'' COLOR= «0 255 255» > НАЧЕРТАНИЯ И ЦВЕТА </FONT> </P>

Пример действия атрибута SIZE:

Результат на экране:

шРИФт

Помимо атрибута SIZE, который находится в теге <FONT> для увеличения или уменьшения размера шрифта можно использовать и специальные теги <BIG>...</BIG> отвечающий за увеличение или <SMALL>...</SMALL>, соответственно за уменьшение, размер заключенного в них текста на одну ''условную единицу''. Эти контейнеры вкладывать друг в друга несколько раз, то можно увеличить/уменьшить шрифт на несколько ''условных единиц''.

Таблица 4

Увеличение текста с помощью тега <BIG>

Использование <FONT>	Использование <BIG>
<FONT SIZE=+1>Текст </FONT>	<BIG>Текст </BIG>
<FONT SIZE=+3>Текст</FONT>	<BIG><BIG><BIG>Текст </BIG></BIG></BIG>
<FONT SIZE=+1>Текст<FONT SIZE=+2>Разного</FONT>размера</FONT>	<BIG>Текст <BIG>разного </BIG>размера </BIG>

Аналогична применению работа тега <SMALL> в теге <FONT> атрибута SIZE с отрицательными значениями.

Управление начертанием текста

Управление параметрами текста используется простой способ. В фрагментах текста произвольной длины или отдельных слов, можно использовать специальные теги для делаемого начертания - полужирное, курсивное, подчеркнутое или ''зачеркнутое'' используя соответственные теги <B>...</B>, <I>...</I>, <U>...</U> и <S>...</S>.

Использование подчеркивания в HTML-документе нежелательно, чтобы пользователь не путал такой текст с гиперссылками.[1]

А для получения нижних индексов или верхних используются теги <SUB>…</SUB> и <SUP>…</SUP>. Эти теги могут быть, как вложены в текст абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Также их можно комбинироваться друг с другом для получения ''смешанных'' начертаний.

Пример:

<FONT SIZE=4> <B> Полужирный </B>, <I> курсив </I>, <B> <I> полужирный курсив </B> </I>, <BR> <U> подчеркнутый </U>, <S> «зачеркнутый»</S>, <SUB> нижний </SUB> и <SUP> верхний </SUP> индексы

</FONT> </P>

Рис.3 Начертание текста

Последовательность записи тегов в конце всей получаемой конструкции должна быть обратной по отношению к ее началу.[7]

Для вставки изображения в документ HTML используется тег <IMG>, как вставляется показано ниже:

Элемент IMG

Под графическим изображением подразумевают: схемы, рисунки, графические объекты и карты изображений в форматах JPEG, GIF (включая прозрачные и анимированные), PNG.

Элемент IMG не имеет конечного тэга.[17]

Тег <IMG> имеет следующие атрибуты:

Атрибут: Src

Атрибут этот является важным параметром. Указывает адрес (URL-адрес) до графического файла, или же название самого графического файла(если HTML документ находится в той же папке с графическим файлом) с расширением (поддерживаются *.jpg, *.gif, *.png).

Атрибут: Width

Определяет ширину изображения в пикселях.

Атрибут: Height

Определяет высоту изображения в пикселях.

Обязательно задаются значения параметров «width» и «heght», резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это просто плохо смотрится. [17]

Атрибут: Hspace

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

Атрибут: Vspace

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

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

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

Атрибут: Align

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

Left

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

Right

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

top и texttop

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

Middle

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

Absmiddle

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

Absbottom

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

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

bottom и baseline

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

Атрибут: Name

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

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

Атрибут: Alt

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

Атрибут: Border

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

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

Атрибут: 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-страниц, так и сайтов, электронные портфолио, электронных учебный пособий.

Список использованных источников

1. Агулар Р. Html И Css. Основа Любого Сайта:книга/Р. Агулар.-М.: Эксмо, 2010.-43с.

2. Алленова Н.В. Учебник по HTML [электронный ресурс].–2015.–Режим доступа: http://books.laborant.org.ua/html/158777/index.shtml - Дата доступа: 11.09.2016.

3. Бунаков А.Д. Оформление текства с помощью языка HTML [электронный ресурс].–2014.–Режим доступа: http://www.metabo.com.ru/design/tuts.htm

4. Википедия. Веб-страница[электронный ресурс]: https://ru.wikipedia.org/wiki/.

5. Глушаков С.В., Жакин И.А., Хачиров Т.С. Программирование Web-Страниц:книга/С.В. Глушаков,И.А. Жакин,Т.С. Хачиров.: М-2011.-37с.

6. Гончаров А. Самоучитель Html:книга/А.Гончаров .-Спб.: Питер, 2012.- 40с.

7. Кастро Э. Html И Css Для Создания Web-Страниц:книга/ Э. Кастро Издательство: Нт Пресс, 2012 Г.-34с.

8.Кожемякин А.А. Html И Css В Примерах. Создание Web-Страниц:книга/А.А. Кожемякин Инфрам, 2011.-43с.

9. Кузницов М.А. Основы языка HTML[электронный ресурс].–2015.–Режим доступа: http://www.rzn62.narod.ru

10. Мишанов. А.Е. Создание документов в стандарте HTML[электронный ресурс].–2014.–Режим доступа: http://www.arachnoid.com/arachnophilia»www.arachnoid.com/arachnophilia.- Дата доступа: 11.09.2016.

11. Муссиано Ч. И. Кеннеди Б. Html И Xhtml:книга/ Ч. И Муссиано Б. Кеннеди. –Спб.: Символ-Плюс, 2010.-35с.

12. Петюшкин А. Html. Экспресс-Курс:книга/А. Петюшкин.-Спб.: Бхв-Петербург, 2010. -25с.

13. Полонская Е.Л. Язык Html:книга/Е.Л. Полонская.-М.: Диалектика, 2009.-35с.

14. Программирование, компьютеры и кибернетика[электронный ресурс]: http://www.allbest.ru.

15. Рева О.Н. Html. Просто Как Дважды Два:книга/О.Н. Рева -М.:Эксмо, 2011.-44с.

16. Словари и энциклопедии на Академике[электронный ресурс]: http://dic.academic.ru/

17. Ссылки-гиперссылки в HTML [электронный ресурс]:

18. Храпоничева Ю.А. Создание Web-страниц с помощью языка HTML. Учебно-методическое пособие. Ю.А.Храпоничева. - Орёл: ГОУ ВПО «Орловский государственный университет» ,2010.-30 с.

19. Эрик А. Мейер CSS Каскадные таблицы стилей:книга/А. Эрик .-Спб.: Символ-Плюс, 2009.-41с.