close

Вход

Забыли?

вход по аккаунту

?

Agranovskiy

код для вставкиСкачать
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное
образовательное учреждение высшего образования
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ
А. В. Аграновский, В. С. Павлов, Е. Л. Турнецкая
ОСНОВЫ
ИНТЕРНЕТ-ПРОГРАММИРОВАНИЯ
Учебное пособие
УДК 004.9
ББК 32.973
А25
Рецензенты:
доктор технических наук, профессор С. И. Зиатдинов;
кандидат технических наук, доцент А. В. Покровский
Утверждено
редакционно-издательским советом университета
в качестве учебного пособия
Аграновский, А. В.
А25 Основы интернет-программирования: учеб. пособие / А. В. Аграновский, В. С. Павлов, Е. Л. Турнецкая. – СПб.: ГУАП,
2018.– 135 с.
ISBN 978-5-8088-1302-1
Предназначено для студентов всех форм обучения, проходящих подготовку по направлениям 09.03.03 – Прикладная информатика (уровень бакалавриата), 09.04.03 – Прикладная информатика (уровень магистратуры) и
38.03.05 – Бизнес-информатика (уровень бакалавриата), а также школьников
старших классов, интересующихся программированием. В нем рассмотрены
вопросы создания интернет-ресурсов средствами языка семантической разметки HTML. Особое внимание уделено вопросам проектирования сайтов,
создания современной программной среды на компьютере веб-разработчика,
особенностям контентной модели HTML5 и, как следствие, созданию конкурентоспособного веб-ресурса.
Теоретический материал подкреплен практическими работами с примерами их выполнения. Использование пособия в учебном процессе поможет активизировать самостоятельную работу обучающихся и позволит преподавателям контролировать индивидуальную работу студентов в течение всего семестра.
УДК 004.9
ББК 32.973
ISBN 978-5-8088-1302-1
© Санкт-Петербургский государственный
университет аэрокосмического
приборостроения, 2018
ВВЕДЕНИЕ
В процессе обучения студентам предстоит научиться создавать
интернет-ресурсы любой тематической направленности c разноплановым функциональным назначением, поэтому им необходимо овладеть практическими умениями и навыками решения типовых
задач клиентской веб-разработки с применением языка семантической разметки HTML5.
Язык HTML5 позволяет конструктивно определять положение
базовых элементов интернет-страниц: текста, изображения, таблиц, гиперссылок, интерактивных форм, аудио- и видеоконтента.
После изучения материалов теоретической части и выполнения
всех практических заданий обучающиеся получат знания, которые
станут основой для формирования компетенций, предусмотренных
программой их подготовки в соответствии с требованиями Федерального государственного образовательного стандарта высшего образования, и умения:
– использовать нормативно-правовые документы, международные и отечественные стандарты в области информационных систем
и технологий (ОПК-1);
– проводить обследование организаций, выявлять информационные потребности пользователей, формировать требования к информационной системе (ПК-1);
– разрабатывать, внедрять и адаптировать прикладное программное обеспечение (ПК-2);
– программировать приложения и создавать программные прототипы решения прикладных задач (ПК-8);
– принимать участие во внедрении, адаптации и настройке информационных систем (ПК-10).
3
1. ПРОЕКТИРОВАНИЕ ИНТЕРНЕТ-РЕСУРСА
1.1. Классификация веб-сайтов
На начальном этапе проектирования интернет-ресурса определяют его принадлежность к определенному типу информационных ресурсов. От этого будет зависеть сложность, трудоемкость и
стоимость разработки. При классификации веб-ресурсов выделяют
группы признаков, соответствие которым будет указывать на принадлежность к определенной категории [1, 2].
I. По используемым технологиям.
1. Статические сайты и веб-страницы.
Статические веб-страницы содержат информацию, которая не
должна подвергаться частым изменениям. По запросу пользователя сервер передает содержимое веб-страниц: текстовые и графические материалы. При повторном запросе содержание веб-источника
будет отображено в неизмененном виде. К недостаткам статических
сайтов можно отнести отсутствие интерактивности.
2. Динамические сайты и веб-страницы.
Динамические страницы формируются во время запроса пользователя при помощи скриптов, написанных на разных языках, например, PHP, Perl или ASP. Поэтому содержание и вид такой страницы может зависеть от многих факторов: конкретного пользователя, вида запроса, времени создания запроса.
К основным достоинствам подобных сайтов можно отнести их
интерактивность. Пользователь в реальном масштабе времени может осуществлять поиск по сайту, редактировать и сохранять информацию в личном кабинете, общаться с другими посетителями.
3. Флеш-сайты.
Интерактивные сайты, созданные с использованием технологий
Flash или Silverlight, отличает красочная анимация с аудиосопровождением. Они трудоемки в изготовлении и занимают много места
при хранении на сервере.
II. По принадлежности (кто является владельцем сайта).
1. Персональные сайты.
Этот тип ресурсов, как правило, создаваемый и поддерживаемый автором, предоставляет информацию об его интересах.
2. Сайты коммерческих организаций:
– сайт-визитка состоит из нескольких страниц, созданных по
правилам простого и функционального дизайна, на которых содержится основная информация об организации. Основными раз4
делами сайта могут быть: «О компании», «Продукция или услуги»,
«Прайс-листы», «Контактная информация».
– промосайты предназначены для презентации и продвижения
конкретных товаров и услуг параллельно основному сайту кампании. От сайтов-визиток их отличает наличие развитой системы
управления контентом i-cont, позволяющей быстро добавить на него
требуемую для эффективного продвижения товара рекламную информацию.
– сайты электронной коммерции обладают полноценным интерфейсом интернет-магазина, на котором представлен полный каталог товаров, что позволяет пользователю сделать онлайн-заказ понравившегося товара.
3. Сайты некоммерческих организаций.
К сайтам некоммерческих организаций относят образовательные веб-порталы, сайты общественных организаций, интернет-ресурсы средств массовой информации и другие. Их отличает интерактивность, наличие большого количества фото-, видео-, аудиоинформации.
III. По уровню решаемых задач.
1. Простые сайты.
Простые сайты, состоящие из нескольких малоинформативных
веб-страничек, как правило, создаются их владельцами для получения практического опыта при обучении программированию в сети Интернет.
2. Тематические узконаправленные сайты.
На ресурсах такого вида хранятся материалы на определенную
тему. На них пользователь может быстро найти интересующую его
информацию.
3. Многофункциональные сайты.
На многофункциональных интернет-ресурсах представлена информация, охватывающая широкий спектр интересов посетителей.
Они предоставляют собой доступ к различным интернет-сервисам,
работающим в режиме онлайн. Примерами ресурсов подобного типа могут служить популярные поисковые системы.
IV. По информационным возможностям, предоставляемым пользователям.
1. Сайты для предоставления пользователям информации.
По характеру предоставляемого контента можно выделить сайты информационно-тематические; развлекательные; сайты-базы
документов, например, база нормативных документов Консультантплюс (http://www.consultant.ru/), онлайн-энциклопедии, словари
5
и сайты-каталоги, обобщающие информацию о других сайтах, например Яндекс-каталог, который можно найти по ссылке https://
yandex.ru/support/catalogue.
2. Сайты для общения и взаимодействия между пользователями.
К ресурсам данного типа можно отнести форумы, чаты, интернет-биржи труда, сайты для организации онлайн-игр и т.д.
3. Сайты электронной коммерции.
В эту группу войдут интернет-магазины; сайты электронных
платёжных систем; сайты банков; интернет-ресурсы, предоставляющие различные платные услуги: IT-услуги, онлайн-консультации.
4. Сайты, предоставляющие онлайн-сервисы.
К наиболее распространенным интернет-сервисам относятся онлайн-ресурсы для хранения и передачи данных, электронная и речевая почта, проведения сеансов связи, видео-сервис. В последнее
время популярными стали онлайн-ресурсы кампании Microsoft:
для обработки числовых данных, создания текстовых документов и
подготовки презентаций.
V. Классификация веб-сайтов по функциональным возможностям.
1. Интернет-представительства:
– сайты-визитки(https://lpgenerator.ru);
– корпоративные сайты (https://www.granit-electron.ru);
– интернет-витрины (https://www.nike.com);
– промосайты (http://poshdeco.com).
2. Информационные сайты:
– тематические сайты (https://www.say7.info);
– интернет-порталы (https://www.gastronom.ru);
– блоги (https://habrahabr.ru/);
– каталоги сайтов (https://top100.rambler.ru).
3. Веб-сервисы:
– поисковые системы (https://yandex.ru);
– почтовые системы (https://mail.ru);
– интернет-форумы (http://forum.littleone.ru/);
– фото-, видео-, аудио-хостинги (http://pixs.ru/);
– доски объявлений (https://spb.gde.ru);
– социальные сети (https://vk.com).
6
1.2. Проектирование структуры веб-сайта
Проектирование структуры интернет-ресурса выполняют на
двух уровнях: внутреннем, определяющем логические связи между веб-страницами, и внешнем, описывающим схему передвижения
посетителя по сайту [3, 4].
1.2.1. Внутренняя структура веб-сайтов
1. Линейная структура.
Подразумевает последовательную связь страниц сайта между
собой (рис. 1.1). При навигации по сайту пользователь постепенно переходит по ссылкам от одной страницы к другой. Линейную
структуру используют на сайтах с небольшим количеством страниц, например бесплатный сервис проверки текста на стоп-слова
Главред (https://glvrd.ru) или онлайн-сервис интернет-проектa
для проверки текстовых документов на наличие заимствований
из открытых источников в сети Интернет и других источников
(https://www.antiplagiat.ru/).
2. Линейная с ответвлениями структура.
При развитии сайта и увеличении на нем информационного контента возникает необходимость изменить навигацию по интернетресурсу. Линейная с ответвлениями структура (рис. 1.2) свойственна авторским блогам (http://techmeat.net/), небольшим корпоративным ресурсам (https://perm.domru.ru) или сайтам визиткам
(https://educan.ru). Как правило, ссылки на большинство страниц
веб-ресурса размещены на главной странице, благодаря чему они
1
2
3
4
5
6
Рис. 1.1. Линейная структура веб-сайта
4
1
2
3
5
7
8
6
Рис. 1.2. Линейная с ответвлениями структура веб-сайта
7
обладают интуитивно-понятной навигацией. Глубина вложения
страниц не превышает трех кликов мышки пользователя.
3. Иерархическая (древовидная) структура.
При такой структуре информация на сайте расположена в нескольких уровнях (рис. 1.3). От стартовой страницы веб-ресурса
идут ссылки на страницы второго (нижележащего) уровня. Примером воплощения иерхической структуры могут быть сайты-визитки
(http://firstfederal.ru), или интернет-каталоги (https://yandex.
ru; http://www.rosmarket.ru/).
Для быстрой визуальной оценки такой структуры при анализе
построения интересующего вас веб-ресурса обратите внимание на
написание адреса страниц сайта в адресной строке браузера.
Предположим, что учебный интернет-проект site _ guap.ru обладает иерархической структурой и имеет 3 уровня вложения страниц. В адресной строке браузера при переходе по запросам с одной
страницы на другую пользователь увидит:
– site _ guap.ru/history/
– site _ guap.ru/history/liap.html
– site _ guap.ru/history/guap.html
– site _ guap.ru/profkom/
– site _ guap.ru/students/
– site _ guap.ru/ students/raspisanie.html
– site _ guap.ru/ students/biblioteka.html
4. Структура типа «паутина».
Структура сайта в виде «паутины» позволяет быстро перемещаться между страницами без посещения промежуточных страниц. Однако такая структура обладает избыточностью связей, что
затрудняет написания HTML-кода интернет-ресурса и неудобна при
просмотре материалов сайта для пользователей из-за большого количества гиперссылок.
1.2
2.1
3.1
2.2
3.2
3.3
3.4
Рис. 1.3. Иерархическая структура веб-сайта
8
1.2
2.1
3.1
2.2
3.3
3.2
3.4
Рис. 1.4. Cтруктура веб-сайта типа «паутины»
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
Рис. 1.5. Решетчатая структура веб-сайта
5. Решетчатая структура.
Решение проблемы эффективного перемещения посетителями
сайта по страницам, лежащим на одном уровне (горизонтально) или
расположенным на разных уровнях (вертикально), при одновременном уменьшении сложности программного кода возможно при
установлении связей между веб-страницами по типу «решетки»
(рис. 1.5).
Обратите внимание, что на всех страницах имеется ссылка на
стартовую страницу. Страницы одного уровня (разделы) связаны
между собой и стартовой страницей. Подобная структура характерна для крупных информационных порталов (http://www.mk.ru/)
и интернет-каталогов (https://www.ulmart.ru/).
6. Смешанная структура.
Характерна для современных веб-ресурсов (http://www.
fontanka.ru/; http://new.guap.ru/). В основу смешанной структуры положена структура по типу «иерархия».
При анализе сайтов-конкурентов логическую структуру сайта можно оценить с помощью специализированных программ-сканеров, например http://byinsecure.com. Рассмотрим подробнее
9
Рис. 1.6. Рабочее окно программы-сканера
Рис. 1.7. Отчет о сканировании
10
методику формирования запроса на анализ структуры интересующего нас сайта.
1. Перейдите по ссылке http://byinsecure.com на сайт специализированного приложения.
2. Найдите вкладку Tools, активируйте Site Structure Scanner.
3. Введите в рабочее поле приложения адрес интернет-ресурса
(рис. 1.6).
4. Вариант отчета о сканировании представлен на рис. 1.7.
1.2.2. Внешняя структура веб-сайта
Внешняя структура веб-сайта показывает расположение видимых пользователем блоков интернет-проекта (рис. 1.8). К базовым
элементам относят [5]:
– шапку сайта (header) – графическое изображение с заголовком
сайта, подзаголовком и логотипом сайта;
Рис. 1.8. Внешняя структура веб-сайта
11
– область контента (content) – область в центре страницы сайта,
описательную часть и медиаинформацию;
– область меню (sitebar) – боковые колонки по бокам страницы
сайта, служащие для размещения информеров, рекламы, служебных форм и других вспомогательных блоков;
– подвал (footer) – нижняя область страницы сайта, предназначенная для отображения служебной информации, элементов навигации, контактной информации и социальных данных.
1.2.3. Программы для проектирования
внутренней структуры интернет-ресурса
Блок-схему внутренней структуры веб-ресурса можно спроектировать, например, с помощью специализированного бесплатного
онлайн-приложения Draw.io, предназначенного для эффективного
формирования разнообразных диаграмм, графиков и схем (рис. 1.9).
Рабочее окно приложения по созданию графиков, диаграмм и
блок-схем Draw.io имеет четыре главные области:
1) главное меню приложения;
Рис. 1.9. Рабочее окно приложения Draw.io
12
2) панель инструментов, из которой пользователь выбирает требуемый элемент;
3) панель свойств элементов, позволяющая изменить настройки
элементов, например: стиль шрифта; цвет фона документа или объектов; тени и степень прозрачности; цвет и толщину линий; заливку и градиент;
4) область построения диаграммы.
Результат моделирования можно сохранить в форматах графических изображений PNG, GIF, JPG, PDF или в формате HTML. Созданные документы можно синхронизировать с Google Drive.
Порядок выполнения моделирования:
1. Перед началом работы с сервисом зарегистрируйте адрес электронной почты в бесплатном почтовом сервере Google по адресу
https://mail.google.com.
2. Наберите в адресной строке браузера https://www.draw.io. Выберите место сохранения созданных в программном средстве документов, например Google Drive.
3. Согласитесь с приветствием сервиса (рис. 1.10) и активируйте
кнопку Create New Diagram.
4. Выберите требуемый тип элементов блок-схемы, например,
Charts (рис. 1.11) и нажмите Create.
5. Приложение автоматически сгенерирует новый документ.
6. Выберите требуемые объекты на Панели элементов и перетащите их в Область построения диаграмм.
7. Для соединения элементов блок-схемы выделите первый объект, затем наведите указатель мыши на второй. После появления
зеленого флажка автоматически произойдет объединение этих элементов (рис. 1.12).
Рис. 1.10. Создание новой диаграммы в приложении Draw.io
13
Рис. 1.11. Выбор типа элементов блок-схемы внутренней сруктуры
Рис. 1.12. Соединение объектов блок-схемы
14
8. Сохраните документ в одном из предлагаемых приложением
Draw.io форматов.
Аналогичные действия по проектированию блок-схемы учебного
сайта можно провести, например, в программах MS Visio, Paint и
других специализированных приложениях.
1.3. Проведение анализа средств разработки
и проверки доменных имен интернет-ресурсов
одной предметной направленности
Проверку доменного имени веб-ресурсов проводят с помощью
специализированных онлайн приложений, например, Whois сервис (https://www.nic.ru). Этот сервис позволяет узнать следующую
информацию (рис. 1.13):
– получить данные о дате регистрации и возрасте домена;
– уточнить контактные данные организации, получившей доменное имя;
– связаться с администраторами домена и т. д.
Рис. 1.13. Отчет о доменном имени интернет-ресурса
15
Рис. 1.14. Установка параметров поиска веб-сервисом BuiltWith.com
Веб-сервис BuiltWith.com (https://builtwith.com) позволяет определить основные технические характеристики интернет-ресурса:
– информацию о сервере (Server Information);
– какая CMS использована (Content Management Systems);
– фреймворк (Framework);
– рекламные площадки ресурса (Advertising);
– системы аналитики и SEO-анализа (Analytics and Tracking);
– библиотеки JavaScript сайта (JavaScript Libraries);
– виджеты, установленые на сайте (Widgets);
– информацию о CSS/HTML версиях и пр. (Document Information);
– кодировку на сайте (Encoding).
При работе с сервисом введите в рабочее поле адрес веб-ресурса и
нажмите Lookup (рис. 1.14).
1.4. Практикум по разделу 1
1.4.1. Практическая работа № 1
КЛАССИФИКАЦИЯ САЙТОВ
Цель работы: обучение методике классификации (табл. 1.1) интернет-ресурсов.
Порядок проведения работы.
1. Ознакомьтесь с примером выполнения работы.
2. По аналогии составьте классификацию не менее 10 веб-сайтов,
относящихся к разным типам интернет-ресурсов.
Содержание отчета.
1. Цель работы.
2. Таблица с классификацией интернет-ресурсов.
3. Выводы о проделанной работе.
4. Список использованных источников.
16
17
7
6
5
4
Система
для расчета
платежей
Социальная
сеть для
передачи
графической
информации
Информация
о вузе
Социальная
сеть
Цель создания
Санкт-Петербургская инженерная
академия
http://www.rae-info.ru
Интернет-магазин
https://www.eldorado.ru
Коммерческая
Информация
об академии
Санкт-Петербургский государственный университет аэрокосмического приборостроения
http://new.guap.ru/
Государственный русский музей
Информация
http://www.virtualrm.spb.ru/ о музее
Система для расчета платежей
Webmoney
https://www.webmoney.ru
Социальная сеть Instagram
https://www.instagram.com/
2
3
Социальная сеть «ВКонтакте»
https://vk.com
Название
1
№
п.п
По задачам
Государственной организации
Динамический
С контентом
С контентом и предоставлением услуг
С контентом
Темати- С контентом
ческий
Портал
Узкотематический
Коммерческой Портал
организации
ДинамичеГосударственский + Flash ной организации
Статический Общественной
организации
Динамический
Мобильный
сервис
Динамический
По возможностям использования
Таблица 1.1
С контентом
и онлайнобщением
Коммерческой Темати- С предосорганизации
ческий тавлением
услуг
Коммерческой Темати- С контеном
организации
ческий и онлайнобщением
По принадлежности
ДинамичеКоммерческой Портал
ский + Flash организации
По технологии
Классификация сайтов
1.4.2. Практическая работа № 2
РАЗРАБОТКА КОНЦЕПЦИИ ВЕБ-РЕСУРСА
Цель работы: разработка идеи и концепции тематического интернет-ресурса.
Часть 1. Разработка концепции веб-ресурса.
1. Обоснование выбора предметной области и тематики сайта.
Подробно опишите, почему Вы решили создавать сайт в данной
предметной области. Объясните выбор тематики сайта, имея в виду,
что тематика:
а) хорошо знакома;
б) узконаправленна;
в) конкурентоспособна.
2. Функциональное назначение и предполагаемая аудитория.
а) выберите в соответствии с приведенной в п.1.2. классификацией, к какому типу веб-ресурсов относится сайт;
б) определите его функциональное назначение и цель создания;
в) составьте собирательный образ посетителя веб-сайта, учитывая следующие характеристики: возраст, пол, образование, сферу
занятости, семейное положение, место проживания и т. д.
3. Выбор названия веб-ресурса.
Название должно быть информативным, ясным, кратким и легко произносимым. Оптимальная длина названия сайта составляет от
трех до десяти символов. При возникновении необходимости записи
названия ресурса транслитерацией используйте ГОСТ 7.79–2001 «Правила транслитерации кирилловского письма латинским алфавитом».
При создании названия существует несколько практически проверенных подходов: создание аббревиатуры из согласных букв (менее шести символов); создание названия из первых слогов нескольких слов (сложносокращенные слова).
3.1. Для оценки фонетического воздействия на возможного посетителя названия интернет-ресурса, проверьте его с помощью бесплатной программы ВААЛ-мини (http://www.vaal.ru).
3.2. Проверьте уникальность имени в приложении Whois сервис.
Часть 2. Создание информационного контента тематического
сайта.
Подготовьте информационный материал, состоящий не менее
чем из 4000 знаков. Статья на первой странице разрабатываемого
ресурса должна рассказать о назначении сайта. Она имеет заголовок, состоит из введения, основной части и заключения. Каждая
часть статьи имеет законченную мысль.
18
Представление материала логически и последовательно выверено. Желательно материал статьи структурировать в виде маркированных или нумерованных списков.
Используйте в тексте стили физической разметки текста: полужирное начертание, подчеркивание, курсивное выделение. Для
лучшего визуального восприятия разбейте монолитный текст на
абзацы. В обязательном порядке проверьте грамотность написания подготовленных текстов. При желании можете воспользоваться средствами специализированных интернет-ресурсов по проверке орфографии, например онлайн-приложением «Яндекс-Спеллер»,
находящимся по адресу https://tech.yandex.ru/speller/.
Часть 3. Разработка предварительной структуры сайта.
Представьте на проверку преподавателю информацию о том, какие текстовые и графические материалы будут размещены на главной странице и внутренних страницах сайта в соответствии со следующим примером.
1. Главная страница:
– описание назначения и целей создания сайта;
– перечисление страниц сайта (меню);
– текст приветствия посетителей сайта;
– новости сайта (при необходимости).
2. Вторая страница:
– проекты;
– таблица услуг.
3. Галерея фотографий.
4. Регистрация посетителей сайта.
5. Контакты.
Содержание отчета.
Цель работы.
Часть 1. Разработка концепции веб-ресурса:
а) обоснование выбора предметной области и тематики сайта;
б) функциональное назначение и предполагаемая аудитория;
в) выбор названия веб-ресурса.
Часть 2. Создание информационного контента тематического
сайта.
Часть 3. Разработка предварительной структуры сайта.
Выводы о проделанной работе.
Список использованных источников.
19
1.4.3. Практическая работа № 3
ЭКСПЕРТИЗА ВЕБ-РЕСУРСОВ
Часть 1. Многокритериальный анализ веб-ресурсов предметной области.
Цель работы: проведение многокритериального анализа сайтовконкурентов.
Порядок выполнения работы.
1. Выберите не менее пяти сайтов-конкурентов из первых позиций выдачи любой поисковой машины. Запрос на поиск сформируйте из «ключевых слов» вашего сайта.
2. Следуя нижеперечисленным критериям, оцените веб-ресурсы.
Результаты исследований сведите в таблицу.
Оценка дизайна:
1. Кросс-платформенность или «Резиновый» дизайн (да, нет).
2. Наличие логотипа организации или предприятия (есть/нет).
3. Цветовая гамма (от 0 до 5 баллов).
4. Эксклюзивный дизайн сайта (от 0 до 5 баллов).
5. Общая оценка дизайна (от 0 до 5 баллов).
Оценка структуры сайта и удобства навигации:
1. Удобство работы с навигацией (от 0 до 5 баллов).
2. Контактная информация (есть/нет).
3. Доступность контактной информации (от 0 до 5 баллов).
4. Понятно ли предназначение каждой страницы? Нет ли лишних? (есть/нет).
5. Присутствие опции обратной связи с администрацией сайта
(есть/нет).
Поддерживаемые сервисы:
1. Поиск (есть, нет).
2. Помощь (есть, нет).
3. Вопрос-ответ (есть, нет).
4. Обратная связь (есть, нет).
5. Регистрация пользователей (есть/нет).
6. Интерактивный помощник/консультант (есть/нет).
Технические характеристики (см. п. 1.4):
1. Дата создания домена.
2. Возраст домена.
3. Контактные данные организации.
4. Информация о сервере.
5. Информация о CSS/HTML-версиях.
6. Кодировка сайта.
7. Библиотеки JavaScript-сайта.
20
Самостоятельно добавьте не менее пяти критериев оценивания
интернет-ресурса.
Внимание! После таблицы в краткой форме сделайте вывод по
каждому веб-ресурсу: логотип ресурса, его название, ваша оценка
дизайна и поддерживаемых сервисов, основные технические характеристики.
В приложении А приведен пример выполнения экспертизы вебресурсов в краткой форме.
Часть 2. Составление SWOT-анализа будущего интернет-ресурса.
Методические указания по выполнению.
Метод SWOT-анализ (Strengths Weaknesses Opportunities Threats –
сильные, слабые стороны, возможности и угрозы) предназначен для
оценки концепции создаваемого интернет-ресурса [6].
Этот метод позволяет определить сильные и слабые стороны в деятельности веб-ресурса, потенциальные внешне угрозы и благоприятные возможности для создаваемого проекта, провести оценку позиционирования относительно стратегически важных конкурентов.
Приведем примерные варианты факторов в первичной SWOTтаблице (табл. 1.2).
При составлении таблицы SWOT-анализа для проектируемого ресурса помните, что при создании сайта невозможно влиять на
внешнее окружение веб-ресурса. Поэтому акцентируйте свое внимание на преимуществах и недостатках, связанных с внутренней
средой веб-проекта. Особое внимание уделите вопросам оформления и содержания веб-ресурса. Для разрабатываемого веб-ресурса
составьте таблицу «SWOT- анализ веб-сайта».
Таблица 1.2
Среда
Сильные стороны
Слабые стороны
Возможности
«O» – opportunities
1. Новые виды продукции.
2.Новые технологии.
3. Новые потребности, например мода, в том числе потребности неосознанные.
4. Захват смежных сегментов,
изучение ситуаций переключения потребителей. 5. Дополнительные услуги.
6. Тенденции спроса
Угрозы «T» – threats
ВНЕШНЯЯ
Схема SWOT-анализа
1.Активность конкурентов.
2.Сезонный спад. 3.Экономический спад.
4. Новые стратегии продвижения конкурентов.
5. Изменения в интересах посетителей сайта
21
Среда
Сильные стороны
Слабые стороны
ВНУТРЕННЯЯ
Окончание табл. 1.2
Преимущества «S» – strength
1. Низкая себестоимость вебресурса.
2. Удовлетворенность посетителей сайта.
3. Веб-ресурс создается после
анализа проблем на сайтах-конкурентах.
4. Уникальное содержание
сайта.
5. Характеристики дизайна
сайта.
6. Определена аудитория сайта.
7. Устаревание сайтов-конкурентов в связи со скоростью
развития информационных
технологий и моды на дизайн
Недостатки «W»–weakness
1. Недостаточно хорошо определена целевая аудитория сайта.
2. Не развито мастерство копирайтера или рерайтера.
3. Отсутствие стратегии развития.
4. Мало оборотных средств.
5. Низкая квалификация сотрудников.
6. Плохо подобрано информационное наполнение сайта.
7. Не соблюдены правила
usability [12] при проектировании ресурса
Содержание отчета.
1. Цель работы.
2. Таблица с многокритериальным анализом сайтов-конкурентов.
3. Обобщение результатов анализа по каждому интернет-ресурсу.
4. SWOT- анализ проектируемого веб-сайта.
5. Выводы о проделанной работе.
6. Список использованных источников.
1.4.4. Практическая работа № 4
ПРОЕКТИРОВАНИЕ ЛОГИЧЕСКОЙ
СТРУКТУРЫ ВЕБ-РЕСУРСА
Цель работы: проектирование логической структуры веб-ресурса.
Порядок выполнения работы
1. Обоснуйте, выберите и представьте в отчете внутреннюю
структуру проекта.
2. Спроектируйте внешнюю структуру веб-ресурса.
Методические указания по выполнению практической работы № 4.
Для создания прототипа сайта можно использовать специальные программы. Рассмотрим подробно процесс прототипирования
сайта, состоящего из трех страниц: главной, регистрации пользо22
вателей и контактной информации, в специализированном онлайнсервисе Ninjamock (электронный адрес https://ninjamock.com).
Предлагаемая для изучения программа предоставляет следующие инструменты для создания фигур произвольной формы:
«Линия», «Прямоугольник», «Эллипс», «Полилиния», «Карандаш»,
«Кривые Безье».
1. В адресной строке наберите https://ninjamock.com. Для создания учебного проекта в сервисе можно не создавать учетной записи
и сразу перейти в окно создания проекта. Для этого нажмите на логотип приложения в правом верхнем углу, после перехода на следующую страницу по адресу https://ninjamock.com/home, активируйте запись «Start designing now». В настоящее время приложение
поддерживает работу на множестве платформ Android, iPhone, iPad
и других (рис. 1.15). Создайте сайт на платформе www.
2. Внимательно ознакомьтесь с рабочими областями приложения (рис. 1.16). Окно проекта можно условно разделить на 4 части.
В левой области окна расположены объекты для создания прототипа сайта, в центре –холст для создания прототипа и базовые инструменты пользователя, справа – область, в которой пользователь может изменять параметры объектов, внизу – последовательно размещены спроектированные страницы сайта.
3. Ознакомьтесь с элементами для создания прототипа сайта. Они разделены на несколько групп, различающихся по своему
функциональному назначению.
а) группа Basic включает в себя элементы для формирования
описательной (текстовой) части сайта: логотип, текстовая область,
заголовки разных уровней, календарь и т. д.;
б) группа Navigation позволяет работать с элементами меню будущего сайта;
в) группа Keyboards содержит элементы для создания клавиатуры символов и цифр;
г) группа Forms состоит из элементов различного вида форм регистрации будущих посетителей сайта;
Рис. 1.15. Платформы для создания интернет-ресурса
23
Рис. 1.16. Окно приложения Ninjamock для создания прототипа сайта
д) группа Media предлагает элементы для формирования требуемых медиаресурсов сайта;
е) группа Dialog включает элементы для создания интерактивных форм общения между посетителями сайта и его менеджерами;
ж) группа Data tables имеет всего два элемента для создания
обычных таблиц на странице сайта. Вид этих таблиц можно модифицировать методом перетаскивания границ между ячейками,
строками и столбцами;
з) группа Maps содержит несколько элементов карт местности:
города, материка, мира;
и) группа Charts с помощью элементов позволяет создавать графические иллюстрации в виде диаграмм и графиков;
к) группа Shapes предлагает создавать иллюстрации к тексту
с помощью элементов Фигуры.
4. Перетащите в правый верхний угол холста элемент «Логотип»
группы Basic.
24
Измените название логотипа. Для этого внутри блока два раза
щелкните левой кнопкой мышки на слове «Logo». Введите название «Логотип ГУАП». Обратите внимание на область изменения параметров объекта (рис. 1.17). В группе Label можно изменить текст
логотипа, задать его выравнивание внутри блока. Элементы группы Font позволяют выбрать гарнитуру и размер шрифта, цветовое
оформление и возможности начертания символов обычным шрифтом, курсивом, полужирным или с подчеркиванием. Геометрический размер объекта «Логотип» можно увидеть и изменить в группе
Layout. Для поворота текста логотипа можно использовать элемент
Angle группы Appearance.
5. Перетащите элемент Главное меню на полотно первой страницы чуть ниже и правее Логотипа ГУАП. Измените названия вкладок, их размер и скорректируйте геометрические размеры элемента.
6. Из группы Basic добавьте элементы Рисунок и Название
сайта (Heading2).
Рис. 1.17. Изменения параметров объекта «Логотип»
25
Рис. 1.18. Прототип Главной страницы сайта
Рис. 1.19. Прототип страницы «Контакты»
26
7. Сконструируйте прототип вспомогательного левого меню сайта с помощью элементов из группы Navigation. Меню учебного макета состоит из 7 частей: Новости, Оформление текста, Таблицы
и рисунок, Рисование в HTML, Фотогаллерея, Немного о себе.
8. В центр первой страницы сайта поместите элемент Text block.
Он расположен в группе Basic. При наведении на него курсора появится всплывающая подсказка Text block. Для изменения содержания текстового блока дважды щелкните по нему левой кнопкой
мышки (текстовое поле будет выделено синим цветом), удалите его
и напишите требуемый.
9. Добавьте рисунок и футер в конец первой страницы сайта. При
необходимости растяните холст страницы. Результат прототипирования Главной страницы можно увидеть на рис. 1.18.
10. Создайте вторую страницу сайта Контакты по образцу,
представленному на рис. 1.19. Для этого в нижней части окна приложения нажмите на значок
, расположенный рядом с первой страницей проекта. При макетировании страницы Контакты
используйте элементы из группы Maps, Forms или Dialog.
11. Спроектируйте третью страницу сайта Регистрация с учетом
модификации элементов из группы Forms (рис. 1.20).
Рис. 1.20. Прототип страницы Регистрация
27
Рис. 1.21. Связывание страниц сайта
12. Все страницы сайта свяжите между собой с помощью элемента Link из группы Basic. Для этого сделайте активной Главную
страницу, выделите в верхнем меню вкладку Контакты и измените свойство Page link из области Property параметров элементов
(рис. 1.21).
13. Сохраните полученный результат прототипирования сайта,
используя один из предлагаемых сервисом форматов: PDF, PNG,
HTML, Ninja package. В главном меню сервиса откройте вкладку
export и выберите требуемый формат.
Задание для выполнения второй части практической работы № 4.
1. Выберите сервис для создания прототипирования сайта. В письменном виде обоснуйте свое решение.
2. Изучите его функциональные возможности.
3. Создайте прототип разрабатываемого вами тематического сайта. Разработайте Главную страницу сайта, общий вид страниц второго и последующих уровней вложения. Сохраните проект в формате PDF.
28
Содержание отчета
1. Цель работы.
2. Внутренняя структура веб-ресурса.
3. Описание выбранного сервиса для прототипирования сайта.
Прототипы – не менее пяти страниц будущего сайта.
4. Выводы о проделанной работе.
5. Список использованных источников.
29
2. ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML
2.1. Специализированные приложения
для работы веб-программиста
В настоящее время в ходе создания интернет-ресурса принято
работать с функционально удобными инструментами автоматизации написания кода, обладающими интуитивно понятным интерфейсом. Поэтому для разработки веб-сайта необходимо установить
на компьютер комплекс программ: текстовый редактор, браузер и
графический редактор. Рассмотрим некоторые рабочие инструменты веб-программиста.
Текстовые редакторы с подсветкой синтаксиса:
– Atom (https://atom.io);
– Brackets (http://brackets.io);
– Microsoft Expression Web 4 (https://www.microsoft.com/);
– Notepad++ (https://notepad-plus-plus.org);
– Sublime Text (https://www.sublimetext.com);
– AkelPad (http://akelpad.sourceforge.net);
– Visual Studio Code (https://code.visualstudio.com).
Браузеры:
– Google Chrome (https://www.google.ru/chrome/browser);
– Opera (www.opera.com/ru/download);
– Microsoft Internet Explorer (https://www.microsoft.com/);
– Mozilla Firefox (https://www.mozilla.org/ru/firefox/new);
– Safari (https://www.apple.com/ru/safari).
Проверить наличие ошибок в коде можно с помощью специальных программ-валидаторов:
– http://validator.w3.org;
– https://html5.validator.nu;
– http://lint.brihten.com/HTML;
– http://tidy.sourceforge.net.
Графические редакторы:
– GIMP (https://www.gimp.org/downloads);
– Inkspace (https://inkscape.org/ru/download);
– Blender (https://www.blender.org/download);
– Adobe Photoshop (https://www.adobe.com/ru/products);
– Paint.NET (https:// www.paintnet.ru/download);
– Sketch (https://sketchapp.com);
– Pixate (https:// www.pixate.com/getstarted);
– Avocode (https://avocode.com/download).
30
Рис. 2.1. Рабочее окно программы Microsoft Expression Web 4
При выполнении практических заданий и упражнений студенты могут использовать бесплатную программу Microsoft Expression
Web 4 (рис. 2.1).
Рабочее окно программы Microsoft Expression Web 4:
1. Главное меню.
2. Настраиваемая панель инструментов.
3. Панель папок.
4. Панель настройки CSS-стилей и параметров тегов.
5. Область панелей инструментов Toolbox и Snippets. Объекты
Toolbox востребованы для редактирования ASP.NET и HTML-тегов,
состоящая из трех групп: Tags, Forms Control и Media. С помощью
готовых элементов из библиотеки Snippets можно ускорить процесс
написания кода.
6. Область панелей инструментов Apply Style и Manager Style показывает примененные CSS-стили.
7. Рабочая область.
8. Область предварительного просмотра интернет-страницы.
31
Рис. 2.2. Начальная страница приложения Atom
9. Кнопки переключения режимов рабочей области:
– в режиме Desing виден только результат верстки кода;
– в режиме Split отображены HTML-код (в верхней части рабочего окна) и соответствующий ему результат верстки (в нижней
части);
– в режиме Code показан только HTML-код.
10. Строка состояния с дополнительными настройками.
В настоящее время наиболее распространенным инструментом
разработчиков HTML-кодов является приложение Atom (рис. 2.2).
2.2. Введение в язык гипертекстовой разметки HTML
Веб-страницы верстают с помощью созданного в 1986–1991 гг.
ученым Тимом Бернерс-Ли языка разметки гипертекста HyperText
Markup Language (HTML) [7]. Следует отметить, что HTML относится к декларативным языкам и решает задачи отображения данных.
Он не является языком программирования в узком смысле, так как
на нем нельзя производить вычислительные операции. Стандарт
разработки языка регулирует международная общественная организация World Wide Web Consortium – W3C (http://www.w3.org).
Основными конструкциями языка являются теги. Теги разметки – это специальные команды, служащие для отображения на
экране текста, медиаинформации, для подключения других интернет-ресурсов (приложение В).
32
Все HTML-элементы делятся на пять основных типов:
– пустые элементы: <area>, <base>, <br>, <col>, <embed>,
<hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>,
<param>, <source>, <track>, <wbr>;
– элементы с неформатированным текстом: <script>, <style>;
– элементы, выводящие неформатированный текст: <textarea>, <title>;
– элементы из другого пространства имен (MathML и SVG);
– обычные элементы: все остальные элементы, не упомянутые
выше.
Теги бывают парные, например <p> и </p>, предназначенные для
обозначения границ некоторого фрагмента текста, в котором может
быть размещен текст или другие конструктивные элементы, а также одиночные, используемые для вставки одиночного объекта, например, для вставки рисунка на веб-страницу применяют тег <img>.
Таким образом, каждый тег начинается с символа «<» (левой
угловой скобки) и заканчивается символом «>» (правой угловой
скобкой). Каждый парный тег состоит из двух частей (открывающего и закрывающего тега), например <title> Название сайта
</title>. При вложении тегов один в другой необходимо строго соблюдать правило закрытия тегов: последним открыли – первым закрыли [8].
Пример правильного вложения –
<p> Начало абзаца <b> выделение жирным шрифтом </b></p>.
Пример неправильного вложения –
<p> Начало абзаца <b>выделение жирным шрифтом </p> </b>.
Существует строгая иерархия вложения тегов, например, тег <p>
может находится только внутри тега <body>, теги <title> и <meta>
внутри тега <head>.
Каждый тег обладает определенными параметрами, которые называются атрибутами. Каждый атрибут имеет своё значение: текст,
число, процент или путь к файлу. При написании кода атрибуты записывают внутри тега после его названия, между ними ставят знак
пробела.
Общий синтаксис написания тегов выглядит следующим образом:
<тег атрибут1="значение" атрибут2 = "значение" >
Атрибуты могут быть обязательными или необязательными. Например, у тега <img> обязательным является атрибут src, который
задает адрес расположения картинки, а необязательными – атри33
буты width или height, задающие ширину и высоту изображения.
В соответствии со спецификацией языка HTML [3] значения атрибутов указывают в двойных («значение») или одинарных кавычках
(‘значение’). Порядок следования атрибутов друг за другом в теле
тега не влияет на результат отображения элемента в окне браузера.
Если какой-либо атрибут не будет указан, то браузер подставит то
значение, которое у него выставлено по умолчанию.
Например:
<img src="guap.png" width="100%" alt="Изображение alma mater">
Атрибуты тегов можно разделить на логические и со значением.
В вышеприведенном примере рассмотрены атрибуты width, src и
alt, имеющие конкретные значения.
Логические атрибуты значения не имеют. Отображения элемента браузером будет зависеть только от присутствия того или иного
параметра внутри тега. Пример записи тега с логическими атрибутами:
<audio src="audio/gimn _ guap.mp3" controls loop
autoplay></audio>
Полный список универсальных атрибутов приведен в приложении В.
2.3. Структура HTML-документа
После получения информации с сервера браузер пользователя
интерпретирует переданные ему данные: HTML-код, изображения,
CSS файлы и т.д. Браузер считывает инструкции и в соответствии
с ними отображает конструктивные элементы веб-страницы. Рассмотрим базовую структуру HTML-документа [9].
Листинг 2.1. Структура HTML-документа
<!DOCTYPE html>
<html>
<head>
<!- -Информация для браузеров и поисковых машин - ->
<meta
http-equiv="Content-Type"
content=
“text/html;
charset=utf-8">
<title>Заголовок страницы</title>
</head>
34
<body>
<!- - Контент сайта – основная часть документа - ->
<h1>Заголовок текста на странице</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
</body>
</html>
Тег <!DOCTYPE html> предназначен для указания браузеру, что
данный документ написан с помощью языка HTML5. Начало и конец HTML-файла определяет парный тег <html>…</html>. Между ними хранится заголовок <head> и содержательная часть вебстраницы, заключенная между тегами <body>. Для добавления
комментариев в документ используют тег <!- - и заканчивают тегом - - >. Текст, помещенный внутри этих тегов, браузером отображаться не будет.
Рассмотрим подробнее, какая техническая информация хранится между тегами <head> и </head>.
Парный тег <title> определяет заголовок страницы. Он в обязательном порядке должен присутствовать в коде документа. Результаты поискового запроса ранжируются поисковыми роботами по
ключевым словам, которые находятся в этом теге и выводятся в виде ссылки для перехода на соответствующий сайт (рис. 2.3). Кроме
этого, его применяют для отображения строки текста в левом верхнем углу браузера и названия сайта на открытой вкладке (рис. 2.4).
Тег <meta> содержит описание кодировки страницы, ключевые
слова, описание документа. В тексте HTML-документа разрешено
одновременное использование нескольких метатег.
Метатег описания сайта:
<meta name="description" content="Описание веб-страницы">
На его основе поисковые системы формируют сниппет страницы
в выдаче по запросу пользователя. Сниппет – это краткое описание
под ссылкой на страницу (рис. 2.5).
Метатег ключевых слов: <meta name="keywords" content="Перечень ключевых слов">
Ключевыми словами являются слова, которые наиболее полно
характеризуют контент сайта.
35
Рис. 2.3. Результат выдачи поискового запроса в соответствии
с ключевыми словами в теге <title>
Рис. 2.4. Отображение названия сайта браузером на вкладке страницы
Рис. 2.5. Формирование сниппета сайта
на основе метатега описания сайта
36
Техническая информация о документе хранится в метатеге кодировки: <meta http-equiv="Content-Type" content= "Тип документа и его кодировка">.
Таким образом, в теле документа каждой страницы веб-сайта может быть прописана следующая информация:
<head>
< meta http-equiv="content-type" content="Тип документа и
его кодировка">
< meta name="keywords" content=" Перечень ключевых слов">
< meta name="description" content="Описание страницы">
< title>Заголовок страницы< /title>
</head>
Например, для сайта «Основы профилизации» техническая информация может выглядеть следующим образом:
<head>
<meta
content=
"text/html;
charset=
utf-8"
httpequiv="content-type">
<meta name="keywords" content="компьютерная грамотность,
программирование, интернет-технологии">
<meta name="description" content="базовые навыки создания веб-ресурса">
<title>Основы профилизации </title>
</head>
Рассмотрим подробнее некоторые теги, формирующие основную
содержательную часть страницы, которая располагается между тегами <body>…</body>. Эти теги условно можно разделить на следующие типы [5]:
1. Блочные элементы созданы для структурирования основных
частей документа методом деления его на отдельные логические
блоки. Они занимают всю предусмотренную веб-программистом
ширину области расположения на экране, а высота элемента будет
определяться содержимым. Каждый блочный элемент всегда начинается с новой строки. В эти элементы можно вкладывать данные,
блочные и строчные элементы. К блочным элементам можно, например, отнести парные теги:
– абзаца <p>;
– выделения длинных цитат <blockquote>;
– теги заголовков текста <h1>,…,<h6>;
– раздела <section>;
– статьи <article>;
– контейнера для тегов <div>.
37
2. Строчные (встроенные) элементы предназначены для логического форматирования текста. Как правило, их применяют внутри
другого элемента. Например:
<p>Выпускники<a href =" http://new.guap.ru/"> ГУАП </a>
созданы для успеха</p>
К строчным элементам относятся следующие теги:
– <a>, предназначенный для создания ссылок;
– теги форматирования текста <strong> и <em>;
– тег <img>, позволяющий браузеру отображать графическую информацию;
– тег перевода строки в тексте <br>;
– тег <input>, с помощью которого можно создать различные виды форм взаимодействия с посетителем сайта.
3. Универсальные элементы могут быть использованы в зависимости от контекста как строчные или блочные элементы. К ним относятся парные теги <del> и <ins>, позволяющие акцентировать
внимание на удаленном и новом текстовом содержании документа.
4. Теги для создания списков, позволяющие структурировать
информацию на странице:
– нумерованный список устанавливает тег <ol>;
– маркированный список создает тег <ul>;
– пункты списка определяет тег <li>;
– список определений начинается с тега-контейнера <dl>, в который входит тег <dt>, создающий название термина и тег <dd>, задающий определение этого термина.
5. Для создания таблиц на странице используют тег-контейнер
<table>, в котором размещают теги <tr> для задания строки таблицы, и тег <td> для формирования ячейки.
Упражнение 2.1. Создание первого HTML-документа
1. В Windows откройте программу Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Наберите следующий листинг в Блокноте.
Листинг 2.2. Первая веб-страница
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
38
<title>Девиз студента </title>
</head>
<body>
<h1>Девиз студентов ГУАП</h1>
<p>Учись</p>
<p>Изобретай</p>
<p>Живи</p>
</body>
</html>
3. Сохраните готовый документ (Файл > Сохранить как...) под
именем index1.html, при этом поставьте в диалоговом окне сохранения тип файла: «Все файлы» и кодировку UTF-8 (рис. 2.6).
4. Запустите браузер Internet Explorer или Google.
5. Откройте файл index1.html в окне браузера: щелкните по правой кнопке мышки и в раскрывшемся контекстном меню выберите
Открыть с помощью Internet Explorer или любого другого браузера.
6. Сравните полученный Вами результат с представленным на
рис. 2.7.
Рис. 2.6. Параметры сохранения в Блокноте
Рис. 2.7. Вид страницы в браузере Internet Explorer
39
Рис. 2.8. Отображение страницы при некорректной кодировке документа
Внимание! При несоблюдении кодировки документа при его сохранении браузер может не отобразить текст (рис. 2.8).
Чтобы редактировать текст документа и видеть вносимые Вами
изменения в окне браузера, не закрывайте текстовый редактор и
программу просмотра. Работайте в них одновременно: внесите изменения в исходный код, сохраните их (Ctrl+S) и обновите окно браузера (кнопка F5).
2.4. Форматирование документов
Содержательную часть веб-страницы размещают между тегами
<body>…</body>. Атрибуты этого тега, перечисленные в табл. 2.1,
определяют вид документа в целом [11].
Атрибуты парного тега <body>
Атрибут
background
bgcolor
Таблица 2.1
Назначение
Указывает на URL-адрес изображения, которое
используется в качестве фонового
Определяет цвет фона документа
bgproperties
Если установлено значение fixed, фоновое
изображение не прокручивается
alink
Определяет цвет активной ссылки
link
vlink
text
topmargin
leftmargin
40
Определяет цвет еще не просмотренной ссылки
Определяет цвет уже просмотренной ссылки
Определяет цвет текста
Устанавливает границу верхнего поля в пикселях
Устанавливает границу левого поля в пикселях
Рис. 2.9. Изменение цвета фона документа
Например, результат выполнения следующих инструкций посмотрите на рис. 2.9.
Листинг 2.3. Веб-страница «Девиз студента»
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8" >
<title>Девиз студента </title>
</head>
<body
bgcolor="999CCCC"
alink="#FF0000"
vlink="#000080" text="#000000">
<h1>Девиз студентов ГУАП</h1>
<p>Учись</p>
<p>Изобретай</p>
<p>Живи</p>
</body>
</html>
link="#000000"
Цветовая система в HTML основана на аддитивной цветовой модели RGB, основными цветами которой являются красный (red), зеленый (green) и синий (blue). Для каждого цвета задают значение
в десятичной системе счисления от 0 до 255 или в шестнадцатеричном HEX-коде в пределах от 00 до FF. Затем их объединяют в одно
число, перед которым ставят символ #. В табл. 2.2 приведены стандартные веб-цвета с соответствующими им кодировками.
При отображении браузером текст заполнит окно приложения
целиком. В зависимости от диагонали дисплея и заданных размеров окна браузера будут автоматически изменены переносы слов
в документе.
41
Таблица 2.2
Стандартная интернет-палитра
Название
Hex
RGB
#00FFFF
(000,255,255)
Black (черный)
#000000
(000,000,000)
Blue (голубой)
#0000FF
(000,000,255)
Fuchsia (фуксин)
#FF00FF
(255,000,255)
Gray (серый)
#808080
(128,128,128)
Green (зеленый)
#008000
(000,128,000)
Lime (ярко-зеленый)
#00FF00
(000,255,000)
Maroon (темно-бордовый)
#800000
(128,000,000)
Navy (темно-синий)
#000080
(000,000,128)
Olive (оливковый)
#808000
(128,128,000)
Purple (фиолетовый)
#800080
(128,000,128)
Red (красный)
#FF0000
(255,000,000)
Silver (серебряный)
#C0C0C0
(192,192,192)
Teal (серо-зеленый)
#008080
(000,128,128)
White (белый)
#FFFFFF
(255,255,255)
Yellow (желтый)
#FFFF00
(255,255,000)
Aqua (морская волна)
Для создания текстовой области используют тег параграфа <p>,
дающий инструкции браузеру к началу нового абзаца. При этом
приложение для просмотра веб-документа отделит эти абзацы друг
от друга пустой строкой. Для удобства создания текстового фрагмента с заранее заданными переносами слов используют самозакрывающийся тег <br>.
По стандартам HTML [12] каждый текст должен иметь заголовки, с помощью которых происходит структурирование документа.
Наличие заголовков в документе учитывают поисковые роботы при
отображении результатов поиска.
В HTML предусмотрено шесть элементов для заголовков от
<h1> до <h6>, что позволяет создать иерархию подразделов. На странице может быть только один заголовок первого уровня <h1>, применяемый для заголовка статьи. На рис. 2.10 представлен вид заголовков на веб-странице, созданный по следующим инструкциям.
42
Рис. 2.10. Вид заголовков на веб-странице
Листинг 2.4. Заголовки на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta
content=
"text/html;
equiv="content-type">
<title>Девиз студента </title>
</head>
<body>
<h1>Девиз студентов ГУАП</h1>
<h2>Девиз студентов ГУАП</h2>
<h3>Девиз студентов ГУАП</h3>
<h4>Девиз студентов ГУАП</h4>
<h5>Девиз студентов ГУАП</h5>
<h6>Девиз студентов ГУАП</h6>
</body>
</html>
charset=
utf-8"
http-
Упражнение 2.2. Форматирование HTML-документа
1. В Windows откройте программу Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Наберите следующий листинг в Блокноте.
43
Листинг 2.5. Форматирование HTML-документа
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
<title>Гимн ГУАП </title>
</head>
<body>
<h1>Гимн Alma Mater</h1>
<p>Пусть славный ЛИАП уж не молод годами,<br>
Но юное сердце в нем бьется всегда!<br>
От смелых идей до космических далей<br>
Питомцы ГУАПа творят чудеса! </p>
</body>
</html>
3. Сохраните готовый документ (Файл > Сохранить как...) под
именем index2.html.
4. Откройте документ в браузере и сравните полученный результат с представленным на рис. 2.11.
Для визуального отделения разных логических блоков друг от
друга используют рельефную горизонтальную полосу, созданную
с помощью элемента <hr> (рис. 2.12). Данный тег имеет атрибуты,
представленные в табл. 2.3.
Для привлечения внимания посетителя к контенту сайта используют тег <marquee>, создающий эффект бегущей строки на
Рис. 2.11. Форматирование HTML-документа
44
Рис. 2.12. Горизонтальная линия в веб-документе
Таблица 2.3
Атрибуты тега <hr>
Атрибут
align
width
Назначение
Выравнивает по краю или центру; имеет
значения left, center, right
Устанавливает длину линии в пикселях или
процентах от ширины окна браузера;
в последнем случае добавляется символ %
size
Устанавливает ширину линии в пикселях
noshade
Отменяет рельефность линии
color
Указывает цвет линии
веб-странице. Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте на расстоянии, которое устанавливают в значении атрибута scrollamount.
Например,
<marquee scrollamount="10" style="color: #D9470D; fontsize: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Цитирование произнесенных фраз, отрывок интервью или другое прямое использование текста со ссылкой на автора придает полноту и достоверность информации, представленной на веб-ресурсе.
В языке HTML для визуального выделения цитат предусмотрен тег
<blockquote>, благодаря использованию которого текст, выделенный этим тегом, отступает от левого края документа на 8 пробелов
(рис. 2.13).
45
Рис. 2.13. Отображение цитаты на веб-странице
Листинг 2.6. Цитата на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset= utf-8" http-equiv="contenttype">
<title>Цитата</title>
</head>
<body>
<p><strong>Психолог Боб Бьорк в своей статье пишет: </strong>
<blockquote><em>&laquo;Практически любая работа подразумевает непрерывное обучение и понимание того, каким образом вы можете повлиять на эффективность этого процесса, значительно повысит ваши шансы на успех&raquo;.</em>
</ blockquote>
</p>
</body>
</html>
Для акцентирования внимания часть текста выделяют жирным
или курсивным начертанием. В этом случае следует применять парные теги <strong> и <em>. В HTML5 [2] теги визуального форматирования текста получили дополнительную смысловую окраску,
определяющую важность информации для посетителя сайта. Проще всего заметить подобные логические акценты при включении
опции прослушивания для слабослышащих людей. В этом случае
диктор интонационно выделит слова, заключенные между тегом
<strong>Важные слова<strong>. Визуального различия в отображение текста, написанного между тегами <strong>…<strong> и <b>…</b>,
не существует. При отображении браузером текст, заключенный
между ними, будет написан полужирным шрифтом.
46
На специализированных сайтах возникает необходимость записи единиц измерения или написания формул надстрочным или подстрочным шрифтом. В языке HTML предусмотрена возможность
смещения символов относительно базовой линии текста вверх или
вниз с помощью соответственно тегов <sup> и <sub>.
Кроме этого, в описательной части нельзя отрывать значение величины от единиц измерения (20 Гц), обозначение года (2017 г.), фамилию от инициалов (Попов А.С.) и т.д. Чтобы отобразить на вебстранице отсутствующие на стандартной клавиатуре символы применяют мнемоники. Они представляют собой конструкцию SGML
(англ. Standard Generalized Markup Language – стандартный обобщённый язык разметки) и начинаются с символа «&» (амперсанда)
и заканчиваются символом «;» (точка с запятой).
В табл. 2.4 приведены часто встречающие спецсимволы.
Таблица 2.4
Мнемоники
Имя
Код
&nbsp;
&#160;
&copy;
&#169;
©
Знак copyright
&guot;
&#34;
«
Двойная кавычка
&lt;
&#60;
<
Знак «меньше»
&gt;
&#62;
>
Знак «больше»
&ndash;
&#8211;
–
Тире
«
Левая типографская кавычка (кавычкаелочка)
&laquo;
&#171;
&raquo;
&#187;
Вид
Описание
Неразрывный пробел
»
Правая типографская кавычка (кавычкаелочка)
Упражнение 2.3. Физическое форматирование текста
1. Наберите следующий листинг в Блокноте.
Листинг 2.7. Физическое форматирование текста
<!DOCTYPE html>
<html>
<head>
<meta
content=
"text/html;
equiv="content-type">
charset=
utf-8"
http47
<title>Индексы в HTML</title>
</head>
<body>
<!-- Тег <u> используют для выделения текста подчеркиванием
-->
<center><h1><u>Решение квадратного уравнения</u></h1>
<p>
<em>Чтобы решить квадратное уравнение вида ax<sup>2</
sup>+bx+c=0, необходимо сначала <br>
вычислить дискриминант по формуле: D=b<sup>2</sup>-4ac<br>
 Если D&#60;0, то уравнение не имеет вещественных корней,
<br>
если D=0, то уравнение имеет только один корень, <br>
если D&#62;0, то уравнение имеет два корня</em>
</p></center>
</body>
</html>
2. Сохраните готовый документ под именем index3.html.
3. Откройте документ в браузере и сравните полученный результат с представленным на рис. 2.14.
Рис. 2.14. Физическое форматирование текста
Упражнение 2.4. Спецсимволы на веб-странице
1. Наберите следующий листинг в Блокноте.
Листинг 2.8. Спецсимволы на веб-странице
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
48
<title>Спецсимволы</title>
</head>
<body>
<h1>Отрывок из гимна ГУАП</h1>
<p>Обитель крылатой науки и знаний<br>
ГУАП&nbsp;&ndash;&nbsp; это творчество, поиск и труд,<br>
ГУАП &nbsp;&ndash;&nbsp; наша сила, ГУАП &nbsp;&ndash;&nbsp;
наше знамя,<br>
В грядущее &#171;завтра&#187; межзвездный маршрут!</p>
</body>
</html>
2. Сохраните готовый документ под именем index4.html.
3. Откройте документ в браузере и сравните полученный результат с представленным на рис. 2.15.
Рис. 2.15. Использование спецсимволов
При исправлении ошибок после тестирования и внесении изменений в код применяют специальные теги <del> и <ins> с обязательным атрибутом datetime, в котором указывают дату внесения
правок в документ.
Например, <del datetime="2017-11-04">Нет логотипа</del>;
 <ins datetime="2017-11-31">Логотип восстановлен</ins>.
2.5. Списки на веб-странице
Средства HTML [11] позволяют структурировать текстовые фрагменты в виде нумерованных или маркированных списков. Для создания глоссариев интернет-ресурса используют списки определений, состоящие из двух частей: определяемого термина и его описания.
49
1. Маркированный список.
Маркированный список создают с помощью тега <ul> от от англ.
Unordered List (неупорядоченный список). Каждый пункт списка
формируют элементом <li> от англ. List Item (элемент списка). По
умолчанию программы просмотра добавляют перед началом списка
и после него строку.
Для визуальной актуализации списка перед каждым пунктом
ставят маркеры (bullets). Для этого внутри тега <ul> записывают его
атрибут type с требуемым значением параметра. В качестве маркеров используют символы:
– disc: маркеры в виде закрашенного кружка;
– circle: маркеры в виде незакрашенного кружка;
– square: квадратные маркеры;
– рисованные маркеры.
HTML-код создания маркированного списка приведен в листинге 2.9. Результат его отображение браузером представлен на рис. 2.16.
Листинг 2.9. Маркированный список
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
<title>Маркированный список</title>
</head>
<body>
<h4> Институт вычислительных систем и программирования</h4>
<ul type="square">
<li>Кафедра вычислительных систем и сетей</li>
<li>Кафедра компьютерных технологий и программной
инженерии</li>
<li>Кафедра проблемно-ориентированных вычислительных
комплексов</li>
</ul>
</body>
</html>
2. Нумерованный список.
Набор пунктов с их порядковыми номерами создает нумерованный список. Его задает тег <ol> от англ. Ordered List (упорядоченный список). Каждый пункт обозначают элементом <li>. Тип порядкового номера задают атрибутами, список которых приведен
в табл. 2.5.
50
Рис. 2.16. Маркированный список на странице
Таблица 2.5
Атрибуты тега <ol>
Атрибут
Назначение
compact
Представляет список в более компактном виде
type=A
Устанавливает маркер в виде прописных букв
type=а
Устанавливает маркер в виде строчных букв
type=I
Устанавливает маркер в виде больших римских цифр
type=i
Устанавливает маркер в виде маленьких римских цифр
type=1
Устанавливает маркер в виде арабских цифр
start=n
Устанавливает начальный маркер в текущем списке
В качестве нумерующих значений атрибута type могут выступать следующие значения:
– арабские числа (1, 2, 3, …);
– прописные латинские буквы (A, B, C, …);
– строчные латинские буквы (a, b, c, …);
– прописные римские числа (I, II, III, …);
– строчные римские числа (i, ii, iii, …).
По умолчанию применяют список с арабскими числами (1, 2,
3, …), как показано в листинге 2.10. Результат отображения браузером представлен на рис. 2.17
Листинг 2.10. Нумерованный список
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нумерованный список</title>
51
</head>
<body>
<p><strong>Направления подготовки института № 4 ГУАП</
strong></p>
<ol><em>
<li>Прикладная инженерия</li>
<li>Прикладная информатика</li>
<li>Информатика и вычислительная техника</li>
<li>Электроника и наноэлектроника</li>
<li>Математическое обеспечение и администрирование
информационных систем</li>
</em></ol>
</body>
</html>
Рис. 2.17. Нумерованный список на веб-странице
Начать нумерацию списка с определенного значения можно следующими способами:
– используя атрибут start элемента <ol>;
– с помощью атрибута value тега <li>.
Пример начала нумерации списка с позиции № 7 представлен на
листинге 2.11. Результат его отображения – на рис. 2.18.
Листинг 2.11. Нумерованный список, начатый с 7-й позиции
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
52
<title>Нумерованный список</title>
</head>
<body>
<center><p><strong>Рейтинг технических вузов
России 2017</strong></p></center>
<ol type="1" start=»7»>
<li>Санкт-Петербургский государственный университет
аэрокосмического приборостроения.</li>
<li>Национальный исследовательский университет
"Московский институт электронной техники".</li>
<li>Уральский федеральный университет имени первого
Президента России Б.Н. Ельцина</li>
<li>Казанский (Приволжский) федеральный университет.</li>
<li>Балтийский государственный технический
университет "Военмех" имени Д.Ф. Устинова.</li>
</ol>
</body>
</html>
Рис. 2.18. Нумерованный список, начатый с 7-й позиции
Стандарт HTML [5] позволяет создавать вложенные списки. Пример создания такого списка показан в листинге 2.12, результат его
отображения программой просмотра – на рис. 2.19.
Листинг 2.12. Вложенный список
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
53
<title>Вложенный список</title>
</head>
<body>
<p><strong>Направления подготовки института № 4</strong></p>
<ol type="1">
<li>Кафедра № 41:</li>
<ul type="square">
<li>Прикладная информатика;</li>
<li>Электроника и наноэлектроника.</li>
</ul>
<li>Кафедра № 43:</li>
<ul type="square">
<li>Програмная инженерия;</li>
<li>Математическое обеспечение и администрирование
информационных систем.</li>
</ul>
<li>Кафедра № 44:</li>
<ul type="square">
<li>Информатика и вычислительная техника.</li>
</ul>
</ol>
</body> </html>
Рис. 2.19. Вид вложенного списка
54
Рис. 2.20. Вид обратного списка
Для привлечения внимания посетителей на странице интернетресурса используют обратный список. HTML-код создания такого
списка с помощью атрибута reversed тега <ol> приведен в листинге 2.13, а результат отображения браузером – на рис. 2.20.
Листинг 2.13. Обратный список
<!DOCTYPE html>
<html>
<head>
<meta
content=
"text/html; charset=
utf-8" httpequiv="content-type">
<title>Маркированный список</title>
</head>
<body>
<h4> 5 правил эффективного обучения в ГУАП</h4>
<ol reversed>
<li>Учёба даст толк, если будет даваться с усилием</li>
<li>Объективно оценивайте свои успехи</li>
<li>Забудьте о &laquo; зубрёжке &raquo;</li>
<li>Ищите решение задачи до того, как вам скажут ответ</li>
<li>Используйте ментальные модели</li>
</ol>
</body>
</html>
3. Список определений.
Список определений состоит из двух элементов: термина и описания этого термина. Поэтому чаще всего его применяют при созда55
нии словарей на веб-странице. Для формирования списка используют три вложенных друг в друга тега. Список терминов задают тегом
<dl> от англ. Description List (список описаний), термин – элементом <dt> от англ. Definition Term (определение слова), а его описание – с помощью элемента <dd> от англ. Description (описание определения). Например:
<dl>
<dt>Первый термин</dt>
<dd>Описание первого термина</dd>
<dt>Второй термин</dt>
<dd>Описание второго термина</dd>
</dl>
На листинге 2.14 приведен пример кода списка определений.
Результат его отображения программой просмотра представлен на
рис. 2.21.
Листинг 2.14. Список определений
<!DOCTYPE html>
<html>
<head>
<meta content= "text/html; charset= utf-8" http-equiv= "contenttype">
<title>Список определений</title>
</head>
<body>
<center><p><strong>СПИСОК ОПРЕДЕЛЕНИЙ</strong></p></center>
<dl>
<dt><strong>Электронно-вычислительная машина</strong></dt>
<dd>комплекс технических средств, где основные функциональные элементы выполнены на электронных элементах.</dd>
<dt><strong>IT-специалист</strong></dt>
<dd>cпециалист в области информационных систем и технологий.</dd>
<dt><strong>Веб-программирование</strong></dt>
<dd>раздел программирования, ориентированный на разработку
веб-приложений. </dd>
</dl>
</body>
</html>
56
Рис. 2.21. Вид списка определений
2.6. Связывание текста и документов гиперссылками
Для связывания двух документов средства языка HTML [8] располагают тремя тегами: <a>, <area>, <link>, с помощью которых
создают ссылки на внешние ресурсы и гиперссылки.
Ссылки на внешние ресурсы создает тег <link>. Его используют для расширения возможностей отображения HTML-документа
при обработке программой просмотра, например при подключении
CSS-файла. Данный элемент записывают в раздел технической информации о документе между тегами <head>…</head>. Он имеет собственные атрибуты, указанные в табл. 2.6.
Таблица 2.6
Собственные атрибуты парного тега <link>
Атрибут
charset
Назначение
Кодировка связываемого документа
href
Путь к связываемому файлу
media
Определяет устройство, для которого требуется применить стилевое оформление
target
Указывает на то, в каком окне должен открываться
документ, к которому ведет ссылка.
Принимает следующие значения:
_self – страница загружается в текущее окно;
_blank – страница открывается в новом окне браузера;
_parent – страница загружается во фрейм-родитель;
_top – страница загружается в полное окно браузера
57
Гиперссылки позволяют посетителю сайта перейти на другую
веб-страницу или загрузить необходимые материалы, хранящиеся
на внешнем сетевом ресурсе.
Синтаксис парного тега гиперссылок <a> следующий:
<a
href="http://site-guap.ru/dep4/kafedra _ 41.html">Указатель
ссылки</a>.
Ссылка состоит из двух частей: указателя и адресной части. Указателем ссылки может быть текстовая фраза или изображение.
Адресную часть определяет обязательный атрибут href, в котором в качестве значения параметра прописывают URL-адрес
интересующей пользователя интернет-страницы. Рассмотрим более подробно способ записи адресной части, например, http://
site-guap.ru/dep4/kafedra _ 41.html. Формат записи показывает,
что в нем присутствует протокол обмена данными (http://); имя
сервера (site-guap.ru/) и путь к веб-странице (dep4/kafedra _
41.html).
По стандарту URL (https://tools.ietf.org/html/rfc3986), регламентированному организацией IETF, адресная часть любой ссылки
имеет следующий формат: схема доступа:// имя-сервера / путь.
В настоящее время используют следующие протоколы обмена
данных:
1) http:// от англ. hypertext transfer protocol или https:// от англ.
hypertext transfer protocol security предоставляют доступ к вебстранице:
http://site-guap.ru/dep4/kafedra _ 41.html
2) ftp:// осуществляет запрос к FTP-серверу на получение файла:
ftp://site-guap.ru/
3) mailto начинает сеанс почтовой связи с указанным адресатом:
mailto: kafedra _ 41@mail.ru
4) file разрешает чтение файла с локального диска:
file:///dep4/kafedra _ 41.html
При связывании документов стандарт HTML предлагает описание двух типов ссылок: абсолютной и относительной.
1. Абсолютная ссылка (путь).
Абсолютная ссылка указывает абсолютный путь к HTMLдокументу, находящемуся на другом сетевом ресурсе, и состоит из следующих частей: протокола передачи данных, домена
сервера (или IP-адрес компьютера), папки, в которой находится
58
интересующий файл и непосредственно запрашиваемый файл.
Например:
http://site-guap.ru/dep4/kafedra _ 41.html
2. Относительная ссылка.
Относительная ссылка указывает путь к HTML-документу относительно текущего файла. При этом оба файла расположены на
одном сервере, поэтому в адресной части отсутствует информация
о протоколе передачи, например, http://. Внимательно ознакомьтесь, как формируется значение атрибута href в зависимости от местоположения исходного файла [8].
1) Текущий файл и ссылаемый файл локализованы в одной папке (рис. 2.22). В этом случае ссылка на файл будет следующей:
<a href="Ссылаемый документ.html">указатель ссылки</a>
2) Файлы размещены в разных папках (рис. 2.23):
<a href="../Ссылаемый документ.html">указатель ссылки</a>
Текущий документ.html
Ссылаемый документ.html
Рис. 2.22. Файлы локализованы в одной папке
Сайт
Папка 1
Текущий документ.html
Ссылаемый документ.html
Рис. 2.23. Файлы размещены в разных папках
59
Сайт
Папка 1
Папка 2
Текущий документ.html
Ссылаемый документ.html
Рис. 2.24. Файлы размещены в разных папках
с добавочным уровнем вложения
3) Фалы расположены в разных папках с добавочным уровнем
вложения (рис. 2.24):
<a href="../../Ссылаемый документ.html">указатель ссылки</a>
При наличии на веб-странице большого количества информации
средства HTML [5] позволяют осуществить внутренний быстрый
переход к требуемому разделу. Для этой цели служит значение #
атрибута href. В определенном месте интернет-страницы создают
закладку (якорь) с уникальным именем с помощью параметра id
(листинг 2.15).
Листинг 2.15. Создание якоря на странице веб-документа
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Создание якоря</title>
</head>
<body>
<p id="top"></p> /*создание якоря
<!- - Имя закладки должно совпадать со значением href после
сивола # (решетки)- ->
<p><a href="#top">Наверх</a></p> /*создание ссылки на якорь
</body>
</html>
60
Закладку можно использовать в качестве внешней ссылки на
другую веб-страницу или интернет-ресурс (листинг 2.16).
Листинг 2.16. Создание якоря на другой веб-странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Якорь в другом веб-документе</title>
</head>
<body>
<p><a
href="http://guap.ru/guap/kaf41/krat _ main.
shtml#kaf41">
ГУАП.Информация о кафедре № 41.</a></p>
</body>
</html>
При создании интернет-ресурса одновременно написать код для
всех станиц не представляется возможным. Поэтому можно использовать пустые ссылки на страницы, адрес которых еще не определён (листинг 2.17). Их вид в окне браузера не будет отличаться от
ссылки с адресом (рис. 2.25).
Листинг 2.17. Пустые ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пустые ссылки</title>
</head>
<body>
<center><h4>Пустые ссылки</h4></center>
<p><a href="#">1.Основы синтаксиса и семантики HTML5</
a><br>
<a href="#">2.Формы HTML5</a><br>
<a href="#">3.Медиа-элементы HTML5</a><br>
<a href="#">4.Рисуем с помощью Canvas</a><br>
<a href="#">5.Геопозиционирование и хранилище данных</
a></p><br>
</body>
</html>
61
Рис. 2.25. Вид пустых ссылок на веб-странице
Для лучшего визуального восприятия пользователем вида ссылок средства HTML [2] позволяют по умолчанию выделять их разным цветом:
– непосещаемую ссылку по умолчанию изображают синим цветом с подчеркиванием;
– активную ссылку помечают в момент открытия красным цветом;
– посещенную ссылку изображают фиолетовым цветом.
2.7. Добавление изображений в веб-документ
Изображения на страницах интернет-ресурса делает его визуально привлекательнее для пользователей. Средства HTML [3] позволяют разместить изображение с помощью тега <img>, который
помещают внутрь тега <p>. Обязательными атрибутами этого тега являются src и alt. Значение параметра src определяет адрес
графического файла. Значение атрибута alt добавляет альтернативный текст для изображения, который будет выведен на экран
монитора или мобильного устройства до его загрузки или при отключении функции воспроизводства графических материалов
в программе просмотра.
Примеры синтаксиса кода тега приведены ниже:
<img src="Picture.jpg" alt="Альтернативный текст">;
<img src="URL" alt="Альтернативный текст">,
где URL от англ. Universal Resourse Locator (универсальный указатель ресурсов) является указателем к графическому файлу.
Атрибуты тега <img> приведены в табл. 2.7.
62
Таблица 2.7
Атрибуты тега <img>
Атрибут
Назначение
alt
Добавляет альтернативный текст для изображения
height
Задает высоту изображения. Может указываться в px
или %
title
Служит всплывающей подсказкой при наведении на изображение курсора мышки
usemap
Определяет изображение в качестве карты-изображения
width
Задает ширину изображения. Может указываться в px
или %
Рассмотрим способы задания пути к графическому файлу для
размещения его на интернет-странице. Предположим, что требуется разместить файл с названием Picture.jpg, местоположением которого является папка Images в корне сайта:
a) http://sait.ru/Images/Picture.jpg
Так как адрес начинается с протокола передачи гипертекста
http:// (или https://), то в тексте кода указан абсолютный адрес нахождения графического файла;
б) /Images/Picture.jpg
В начале адреса ссылки поставлена косая черта (/), следовательно, папка Images расположена в корне сайта;
в) .. /Images/Picture.jpg
Если в начале адреса стоят две точки и косая черта (../), то это
интерпретируют таким образом, что папка с графическим файлом
Images
Picture.jpg
HTML
Index.html
Рис. 2.26. Графический файл расположен на уровень выше HTML-файла
63
расположена на уровень выше в структуре HTML-документа, куда
необходимо вставить изображение (рис. 2.26);
г) Images/Picture.jpg
Имя папки без всяких точек и косых линий в начале адреса показывает, что файл с кодом HTML и папка с изображением находятся на одном уровне (рис. 2.27);
д) Picture.jpg
Присутствие только названия графического файла указывает на
то, что изображение и HTML-документ расположены в одной папке
(рис. 2.28).
Внимательно ознакомьтесь с примером, в котором показаны варианты ссылок на графические файлы.
Листинг 2.18. Варианты добавления рисунка на веб-страницу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Добавление изображений</title>
</head>
<body>
<p><img src="http://sait.ru/Images/Picture.jpg"
alt="Абсолютный адрес изображения"></p>
<p><img src="/Images/Picture.jpg"
alt="Адрес файла изображения относительно корня сайта"></p>
Images
Picture.jpg
Picture.jpg
Index.html
Рис. 2.27. Графический файл
расположен на одном уровне
с HTML-файлом
64
Index.html
Рис. 2.28. Графический файл
и HTML-файл
находятся в одной папке
<p><img src="Images/Picture.jpg"
alt="Адрес файла изображения находится на одном уровне
с HTML-документом"></p>
<p><img src="Picture.jpg"
alt="Адрес файла изображения находится в той же папке,
что и HTML-документ"></p>
</body>
</html>
Измененить размеры изображения можно с использованием
атрибутов height (высота) и width (ширина). Значения этих параметров задают в пикселях или процентах относительно размера родительского элемента. Если будет задан только один из атрибутов,
то второй будет вычисляться программой просмотра автоматически
для сохранения пропорций рисунка.
Например, можно встретить следующие равносильные записи
добавления изображения на страницу:
<img src="Picture.jpg" alt="" width="100" height ="150">;
<img src="Picture.jpg" alt="" width="150">;
<img src="Picture.jpg" alt="" width="100%">.
Для появления видимой подсказки при наведении на изображение курсора мышки в окне просмотра (рис. 2.29) используют атрибут title. Синтаксис записи тега с рассмотренными выше атрибутами будет следующий:
<img src="Picture.jpg" alt="Альтернативный текст"
title="Выпускники ГУАП созданы для успеха!" width="150"
height ="250">
Рис. 2.29. Отображение браузером всплывающей подсказки
65
Средства HTML позволяют добавить изображение на веб-страницу с возможностью обтекания ее текстом (рис. 2.30). Для этих целей служит атрибут align тега <img> с соответствующими значениями, указанными в табл. 2.8. Пример написания кода в нотациях
HTML демонстрирует листинг 2.21.
При создании фото-галерей в коде часто используют ссылкуизображение, когда к уменьшенной версии изображения ставится
ссылка на полноразмерное изображение, например,
<a href="kafedra-41-big.jpg “ target=" _ blank" >
<img src="kafedra-41-small.jpg" alt="Кафедра 41"></a>
Таблица 2.8
Значения атрибута align
Значение
атрибута
Назначение
top
Выравнивает текст по верху изображения
middle
Выравнивает текст по середине изображения
bottom
Выравнивает текст по низу изображения
left
Выравнивает изображение по левому краю, текст будет
обтекать его справа
right
Выравнивает изображение по правому краю, текст будет
обтекать его слева
Рис. 2.30. Позиционирование изображения на веб-странице
66
Листинг 2.19. Позиционирование изображения на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta content= "text/html; charset= utf-8" http-equiv= "ContentType">
<title>Позиционирование изображения</title>
<body >
<center><h1>Гимн Alma mater</h1></center>
<p><img src="GUAP-1.jpg" width="250" alt=" Фото-Гуап “
align="left">
<font size="5">
Пусть славный ЛИАП уж не молод годами,<br>
Но юное сердце в нем бьется всегда!<br>
От смелых идей до космических далей<br>
Питомцы ГУАПа творят чудеса!<br><br></p>
<p><img src="GUAP.jpg" width="250" alt="Фото-Гуап"
align="right">
Крылатый предвестник грядущих свершений,<br>
Ты в ногу с Россией идешь по пути!<br>
Овеян ты духом высоких стремлений.<br>
Прекраснее вуза в стране не найти!<br>
</font></p>
</body>
</html>
В некоторых случаях изображение может служить гиперссылкой. В этом случае тег <img> помещают внутрь тега <a>…</a>. Например,
<a href="http://guap.ru">
<img src="guap.png" alt="Alma matet">
</a>
Создать простой слайдер на веб-странице можно при помощи тега <marquee>, создающего бегущею строку.
<marquee direction="right" scrollamount="10">
<img src="Путь до изображения №1">
<img src="Путь до изображения №2">
<img src="Путь до изображения №3">
67
<img src="Путь до изображения №4">
<img src="Путь до изображения №5">
</marquee>
В приведенном ниже фрагменте html-кода каждое изображение
служит ссылкой для перехода.
<marquee scrollamount="10">
<a href="URL статьи №1"><img №1"></a>
<a href="URL статьи №2"><img
№2"></a>
<a href="URL статьи №3"><img
№3"></a>
<a href="URL статьи №4"><img №4"></a>
<a href="URL статьи №5><img №5"></a>
</marquee>
src="Путь до изображения
src="Путь до изображения
src="Путь до изображения
src="Путь до изображения
src="Путь до изображения
В табл. 2.9 приведены характеристики графических файлов, используемых на Интернет-страницах [14].
Таблица 2.9
Форматы графических файлов на веб-странице
Формат
Описание
Применение
Растровые форматы
GIF
JPEG
Использует от 2 до 256 цветов и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения без потерь. Формат применяют
для создания анимированных рисунков.
Может содержать прозрачные области
Текст, логотипы, иллюстрации с четкими
краями, анимированные рисунки, изображения с прозрачными
участками
Использует 16,7 млн цветов. ПодИспользуется для
держивает плавные переходы цветов.
фотографий
Формат не поддерживает прозрачность.
Используют лучший алгоритм сжатия,
чем GIF, но текст и большие площади
со сплошным цветом могут покрыться
пятнами
PNG-8 Формат аналогичен GIF: содержит
Текст, логотипы, ил256 цветов, но не отображает анимацию. люстрации с четкими
Позволяет один цвет сделать прозрачкраями
ным. Использует улучшенный формат
сжатия данных по сравнению с GIF
68
Окончание табл. 2.9
Формат
Описание
PNG-24 Формат аналогичен JPEG, поддерживает 16 млн цветов. Сохраняет яркость и
оттенки цветов в фотографиях. Поддерживает прозрачность
Применение
Фотографии, рисунки, содержащие
прозрачные и полупрозрачные участки,
рисунки с большим
количеством цветов
и четкими краями
изображений
BMP
Представляет собой несжатое (оригинальное) растровое изображение,
шаблоном которого является прямоугольная сетка пикселей
Иллюстрации
ICO
Формат хранения значков файлов в
Иконки сайтов
Microsoft Windows. Наиболее употребимы квадратные значки со сторонами 16,
32 и 48 пикселей
Векторные форматы
SVG
SVG – рисунок состоит из набора геометрических фигур: линия, эллипс,
многоугольник. Поддерживает статичную и анимированную графику
Масштабируемые
изображения, рисунки, логотипы, иллюстрации, графики и
диаграммы
2.8. Создание карты-изображения
Средства HTML [3, 11] позволяют создавать графические изображения в виде карты с активными областями, при активации которых по щелчку мыши посетитель веб-страницы может переходить
к связанным с ними документам. Для этих целей предусмотрен тег
<map> с атрибутом name, который в обязательном порядке должен
соответствовать имени в атрибуте usename тега <img>. Синтаксис записи последовательности тегов будет следующим:
<img src="url" usemap="#имя _ карты">
<map name="имя _ карты">
</map>
Внутри контейнера <map> расположены самозакрывающиеся теги <area>, задающие интерактивные области в изображении карты.
Элемент <area> обладает следующими уникальными атрибутами
(табл. 2.10) [5].
69
Таблица 2.10
Атрибуты тега <area>
Атрибута тега
Назначение
alt
Задает альтернативный текст для активной области карты
coords
Определяет позицию области на экране.
Координаты задаются в единицах длины и разделяются
запятыми:
для круга – координаты центра и радиус круга;
для прямоугольника – координаты верхнего левого и
правого нижнего углов;
для многоугольника – координаты вершин многоугольника в нужном порядке, также рекомендуется указывать
последние координаты, равные первым, для логического
завершения фигуры
download
Дополняет атрибут href и сообщает браузеру, что ресурс
должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл)
href
Указывает URL-адрес для ссылки. Может быть указан
абсолютный или относительный адрес ссылки
hreflang
Определяет язык связанного веб-документа. Используется
только вместе с атрибутом href. Принимаемые значения –
аббревиатура, состоящая из пары букв, обозначающих
код языка
shape
Задает форму активной области на карте и ее координаты.
Может принимать следующие значения:
rect – активная область прямоугольной формы;
circle – активная область в форме круга;
poly – активная область в форме многоугольника;
default – активная область занимает всю площадь изображения
target
Указывает, куда будет загружен документ при переходе
по ссылке. Принимает следующие значения:
_self – страница загружается в текущее окно;
_blank – страница открывается в новом окне браузера;
_parent – страница загружается во фрейм-родитель;
_top – страница загружается в полное окно браузера
2.9. Таблицы на веб-странице
Средством эффективной визуализации и представления данных в документах служат таблицы [13]. Для ее создания используют парный тег <table>. Строку таблицы описывают тегом <tr>
70
Таблица 2.11
Атрибуты тега <table >
Атрибут
Назначение
cellspacing Задает расстояние между рамками соседних ячеек. По умолчанию параметр имеет значение 2
cellpadding Задает расстояние между текстом и границей ячейки.
По умолчанию параметр имеет значение 1
border
Задает границу ячеек и таблицы
bgcolor
Указывает цвет фона таблицы
width
Определяет ширину таблицы в пикселях или процентах
от размера окна программы просмотра
от англ. table row (строка таблицы), ячейку формируют с помощью
тега <td> от англ. table data (табличные данные). Для задания элементов шапочки таблицы применяют тег <th> от англ. table header
(заголовок таблицы). При этом браузер отобразит текст в ячейках
шапочки таблицы выровненным по центру и жирным начертанием.
Атрибуты тега <table> приведены в табл. 2.11.
Пример базовой структуры таблицы представлен на листинге 2.20. Результат отображения кода программы браузером посмотрите на рис. 2.31.
Листинг 2.20. Структура HTML-таблиц
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
<title>Спецсимволы</title>
</head>
<body>
<table border="1" width="200">
<caption>Заголовок таблицы</caption>
<tr>
<td align="center">1 ячейка</td>
<td align="center">2 ячейка</td>
</tr>
<tr>
71
<td align="center">3 ячейка</td>
<td align="center">4 ячейка</td>
</tr>
</table>
</body>
</html>
Рис. 2.31. Вид таблицы на веб-странице
Заголовок, содержащий название таблицы, описывают элементом <caption>. Этот тег отформатирует положение заголовка относительно таблицы. По умолчанию заголовок помещают сверху
таблицы по центру. Изменения места расположения задают атрибутами элемента. При желании к заголовку применяют теги физического форматирования текста (табл. 2.12).
Для формирования требуемого вида таблиц задают параметры
тега <td>:
– colspan – объединяет ячейки по горизонтали;
– rowspan – объединяет ячейки по вертикали.
Таблица 2.12
Атрибуты тега <caption>
Атрибут
72
Назначение
left
Выравнивает заголовки по левому краю таблицы
right
Выравнивает заголовки по правому краю таблицы
center
Заголовок располагается сверху таблицы
по ее центру
top
Заголовок располагается сверху таблицы
bottom
Заголовок располагается внизу таблицы
по ее центру
Листинг 2.21. Объединение ячеек по вертикали и горизонтали
<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="contenttype">
<title>Объединение ячеек</title>
</head>
<body>
<table border="1" cellspacing="0" width="100%" >
<caption><h3>Результаты обучения студентов ГУАП в осеннем
семестре</h3></caption>
<tr>
<td align="center" rowspan="3">Студенты ГУАП</td>
<th align="center" colspan="4">Учебные дисциплины</th>
</tr>
<tr>
<td align="center" colspan="2">Основы профилизации</td>
<td align="center" colspan="2">Интернет-программирование</
td>
</tr>
<tr>
<td align="center">Рейтиг семестра </td>
<td align="center">Результат обучения </td>
<td align="center">Рейтиг семестра </td>
<td align="center">Результат обучения </td>
<tr>
<td align="left">Полтавченко Георгий</td>
<td align="center">92 балла</td>
<td align="center">отлично</td>
<td align="center">96 баллов</td>
<td align="center"> отлично</td>
</tr> 
<tr>
<td align="left">Могучий Андрей</td>
<td align="center">94 балла</td>
<td align="center">отлично</td>
<td align="center">90 баллов</td>
<td align="center"> отлично</td>
</tr>
<tr>
73
<td align="left">Хрусталев Дмитрий</td>
<td align="center">93 балла</td>
<td align="center">отлично</td>
<td align="center">89 баллов</td>
<td align="center">отлично</td>
</tr>  
</table>
</body>
</html>
Рис. 2.32. Объединение ячеек в таблице по вертикали и горизонтали
2.10. Практикум по разделу 2
2.10.1. Практическая работа № 5
СОЗДАНИЕ КОМБИНИРОВАННЫХ СПИСКОВ
НА ВЕБ-СТРАНИЦЕ
Цель работы: создание комбинированных списков на вебстранице.
Порядок выполнения работы
1. Наберите следующий листинг в Блокноте.
Листинг 2.22. Создание комбинированных списков на веб-странице
<!DOCTYPE html>
<html>
74
<head>
<meta charset="utf-8">
<title> Веб-технологии</title>
</head>
<body>
<center><p>
<strong>Направления обучения веб-технологиям</strong>
</p></center>
<ol type="1">
<li>Веб-маркетинг:</li>
<ul type="circle">
<li>Поисковая оптимизация;</li>
<li>Поисковая оптимизация для профессионалов.</li>
</ul>
<li>Веб-дизайн:</li>
<ul type="disc">
<li>Создание макетов сайтов;</li>
<li>Технологии верстки веб-интерфейсов;</li>
 <li>Профессиональная верстка. HTML5 и CSS3;</li>
 <li>Векторная графика и анимация в Интернет. Adobe Flash.</
li>
</ul>
<li>Веб-программирование:</li>
<ul type="square">
<li>Разработка веб-приложений (Основы PHP);</li>
 
<li>Профессиональная разработка сложных Web-систем <br>
(Объектно-ориентированный PHP);</li>
<li>Разработка пользовательских Web-интерфейсов
(JavaScript);</li>
 
<li>Разработка пользовательских Web-интерфейсов
с применением современных библиотек (jQuery).</li>
</ul>
</ol>
<p><strong>Марк Цукерберг в своем интерью говорит: </
strong></p>
<blockquote><em>&laquo;Я думаю, что в будущем все,
а не только программисты будут связаны с элементами
программирования&raquo;.</em></ blockquote>
</body>
</html>
75
Рис. 2.33. Создание комбинированного списка
2. Сохраните его под именем index5.html.
3. Откройте файл в браузере и сравните полученный результат
с представленным на рис. 2.33.
2.10.2. Практическая работа № 6
СОЗДАНИЕ ТЕКСТОВОЙ, ГОЛОСОВОЙ
И ВИДЕОСВЯЗИ ЧЕРЕЗ ИНТЕРНЕТ
Цель работы: создание текстовой, голосовой и видеосвязи через
Интернет.
Порядок выполнения работы
1. Наберите в программе Блокнот следующий код.
Листинг 2.23. Создание гиперссылок на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Создание гиперссылок</title>
</head>
<body>
76
<center><h3> Создание текстовой, голосовой и видеосвязи через
Интернет </h3></center>
<p>
<strong>Звонок на телефонный номер:</strong>
<a href="tel:+78121234567"> <br>+7 (812) 123-45-67</a><br>
<p><strong>Cсылка на адрес электронной почты guap@mail.ru:
</strong><br>
<a href="mailto:guap@mail.ru">Отправить письмо на электронную
почту guap@mail.ru</a><br>
<p><strong>Cсылка на скайп для звонка:</strong><br>
<a href="skype:имя-пользователя?call">Позвонить другу
через Skype</a><br>
<p><strong>Cсылка на скайп для открытия чата:</strong><br>
<a href="skype:имя-пользователя?chat">
Начать чат в Skype</a><br>
<p><strong>Ссылка на скайп для добавления
Рис. 2.34. Создание гиперссылок на веб-странице
77
в список контактов:</strong><br>
<a href="skype:имя-пользователя?add">Добавить
в список контактов Skype</a><br>
<p><strong>Ссылка на скайп для отправки
электронного документа:</strong><br>
<a href="skype:имя-пользователя?sendfile">
Отправить файл через Skype</a><br>
</p>
</body>
</html>
2. Сохраните его и откройте затем в программе просмотра.
3. Сравните полученный результат с представленным на рис. 2.34.
4. Самостоятельно создайте гиперссылку на странице учебного
сайта.
2.10.3. Практическая работа № 7
СОЗДАНИЕ ССЫЛОК С ЯКОРЕМ
И ВСПЛЫВАЮЩИХ ПОДСКАЗОК
Цель работы: создание ссылок с якорем и всплывающих подсказок.
Порядок выполнения работы
1. Наберите в программе «Блокнот» следующий код.
Листинг 2.24. Создание оглавления и всплывающих подсказок
на веб-странице
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Всплывающая подсказка</title>
</head>
<body>
<h2 id="contents">Исторические вехи ГУАП</h2>
<ol>
<li><a href="#LAI" title="LAI">Ленинградский авиационный
институт &nbsp;&ndash;&nbsp; ЛАИ</a></li>
<li><a href="#LIAP" title="LIAP">Ленинградский институт
78
авиационного приборостроения
&nbsp;&ndash;&nbsp;ЛИАП</a></li>
<li><a href="#GAAP" title="GAAP">Государственная академия
аэроксмического приборостроения
&nbsp;&ndash;&nbsp;ГААП</a></li>
<li><a href="#GUAP" title="GUAP">Государственный университет
аэрокосмического приборостроения
&nbsp;&ndash;&nbsp;ГУАП</a></li>
</ol>
<h2 id="LAI" >Ленинградский авиационный институт
&nbsp;&ndash;&nbsp; ЛАИ</h2>
<p>25 января 1941 года Совет народных комиссаров Союза
Советских Социалистических Республик
принял постановление о создании
Ленинградского авиационный института.
Эта дата является официальным днем рождения нашего вуза.</p>
<p>Неоценимую помощь в создании нового института,
в комплектовании его профессорско-преподавательского
состава, в оборудовании кафедр оказали ленинградские
вузы,
научные институты и промышленные предприятия.</p>
<p>Ленинградский авиационный институт имел три факультета:
самолетостроительный, приборостроительный
и моторостроительный.</p>
<a href="#contents">К оглавлению</a>
<h2 id="LIAP">Ленинградский институт авиационного приборостроения
&nbsp;&ndash;&nbsp;ЛИАП</h2>
<p>20 февраля 1945 года было принято
Постановление Правительства о возобновлении деятельности
Ленинградского авиационного института и преобразовании его
в Ленинградский институт авиационного приборостроения
(ЛИАП).</p>
<p>Перед Ленинградским институтом авиационного приборостроения
79
были поставлены задачи
по открытию новых специальностей,
резкому увеличению приема студентов,
расширению научных исследований.</p>
<p>Для этого в ЛИАП не хватало учебных площадей.
Поэтому в 1960 году ему было
предоставлено здание по ул. Герцена, 67
теперь эта улица называется Большая Морская)</p>
<a href="#contents">К оглавлению</a>
<h2 id="GAAP">Государственная академия аэрокосмического
приборостроения&nbsp;&ndash;&nbsp;ГААП</h2>
<p>В 1992 году ЛИАП успешно прошел государственную аттестацию,
по итогам которой он был преобразован
в Государственную академию аэрокосмического приборостроения
(ГААП).</p>
<p>В середине девяностых годов в связи с потребностями
рынка
труда и образовательных услуг
из узкопрофильного отраслевого вуза
ГААП превращался в вуз широкого профиля.</p>
<a href="#contents">К оглавлению</a>
<h2 id="GUAP">Государственный университет аэрокосмического
приборостроения&nbsp;&ndash;&nbsp;ГУАП</h2>
<p>В 1998 году вуз прошел очередную государственную аттестацию,
получил статус университета и наименование
&nbsp;&ndash;&nbsp;Санкт-Петербургский
государственный университет
аэрокосмического приборостроения (ГУАП).</p>
<p> Установлены и успешно развиваются отношения
с ведущими университетами США, Англии, Франции,
Бельгии, Китая, Германии, Японии.</p>
<a href="#contents">К оглавлению</a>
</body>
</html>
80
Рис. 2.35. Создание ссылок с якорем и всплывающих подсказок
2. Сохраните его и откройте затем в программе просмотра.
3. Сравните полученный результат с представленным на рис. 2.35.
4. Самостоятельно создайте фрагмент веб-страницы, содержащей все вышеперечисленные элементы.
2.10.4. Практическая работа № 8
СОЗДАНИЯ КАРТЫ-ИЗОБРАЖЕНИЯ НА ВЕБ-СТРАНИЦЕ
Цель работы: изучить процесс создания карты-изображения.
Порядок выполнения работы
1. Создайте разметку изображения на активные элементы требуемой формы. Для изучения особенностей построения карты используйте рис. 2.36. По умолчанию началом координатной сетки считают левый верхний угол экрана. Отсчет ведут в пикселях.
Для упрощения примем масштаб 1:10. Он соответствует тому, что
в 10 отсчетах лежат 100 пикселей.
2. Активная область на карте может принимать следующие формы:
rect – прямоугольник; circle – круг; poly – многоугольник или default,
81
занимая всю площадь изображения. Для их задания необходимо
знать координаты точек, по которым можно построить соответствующие геометрические фигуры с помощью параметра shape (табл. 2.13).
При задании координат многогранника помните, что координаты первой и последней точек совпадают, иначе вы построите ломаную линию.
В общем случае синтаксис записи следующий:
<area shape="rect" coords="x1, y1, x2, y2">;
<area shape="circle" coords="x1, y1, r “>;
<area shape="poly" coords=" x1, y1, x2, y2, x3, y3, x4, y4,
x1, y1">
Для рассматриваемого примера:
<map>
<area shape="poly" coords=" 30, 30, 50, 10, 70, 30, 30, 30 ">
<area shape="rect" coords="30, 30, 70, 70">
<area shape="circle" coords="50, 50, 10 “>;
</map>
3. Укажите ссылку для перехода с помощью атрибута href
свяжите рис. 2.36 с картой, используя атрибут name тега <img>:
и
<img src="picture.gif" usemap="#karta1">
<map name="karta1">
<area href=" http://new.guap.ru/" shape="rect" coords="30,
30, 70, 70" alt="GUAP" target=" _ blank">
<area href="http://www.eltech.ru/" shape ="poly “
coords="30, 30, 50, 10, 70, 30, 30, 30"
alt="LETI"
target=" _ blank">
<area href= http://www.spbstu.ru/" shape= “circle"
coords="50, 50, 10 “ alt=" POLYTECH" target=" _ blank">
</map>
Таблица 2.13
Геометрические
фигуры
Координаты для построения
Прямоугольник
Координаты верхнего левого угла и координаты нижнего правого угла
Круг
Координаты центра окружности и радиус
Треугольник
Координаты трех вершин
Многоугольник
Координаты каждой вершины
82
0
10 20 30 40 50 60 70 80 90
X
(50, 10)
10
20
30
40
(30, 30)
(70, 30)
(50, 50)
50
60
80
(70, 70)
80
Y
Рис. 2.36. Разметка изображения для карты
4. Самостоятельно создайте карту перехода для разрабатываемого интернет-ресурса в выбранной предметной области. Для вычисления координат требуемых точек при определении активных областей используйте специализированные приложения для обработки
графической информации, например, MS Paint или Adobe Photoshope.
2.10.5. Практическая работа № 9
СОЗДАНИЕ ТАБЛИЦ СЛОЖНОЙ ФОРМЫ НА ВЕБ-СТРАНИЦЕ
Цель работы: создание таблиц сложной формы средствами HTML.
Порядок выполнения работы
1. Наберите следующий листинг в Блокноте.
Листинг 2.25. Создание таблицы на веб-странице без CSS
<!DOCTYPE html>
<head>
<meta content= "text/html; charset= utf-8" http-equiv= "contenttype">
<title>Таблица зарплат</title>
</head>
<body>
<table border="1"> /*начало таблицы
<caption><h3>10 лучших вузов России по уровню зарплат выпускников,
работающих в IT</h3></caption> /*Заголок таблицы
<tr> /*шапка таблицы
<th> № п.п.</th>
83
<th>ВУЗ, город</th><th>Зарплата в Москве, руб</th>
<th>Средний
балл ЕГЭ в 2016-2017&nbsp;г.г.</th>
<th>Оставшиеся в городе обучения</th>
</tr>
<tr> /*первая строка
<td align="center">1</td>
<td>Московский физико-технический институт</td>
<td align="center">130 000</td><td align="center">93,5</
td>
<td align="center">75%</td>
</tr>
<tr> /*вторая строка
<td rowspan="2" align="center">2</td>> /*объединение ячеек
по вертикали <td>МИФИ</td
<td align="center">100 000</td><td align="center">90</td>
<td align="center">87%</td>
</tr>
<tr> /*третья строка
<td>Московский государственный университет
  им. Н.Э.&nbs;pБаумана</td>
<td align="center">100 000</td><td align="center">88,1</
td>
<td align="center">82%</td>
</tr>
<tr> /*четвертая строка
<td rowspan="2" align="center">3</td> /*объединение ячеек по   вертикали
<td>Пермский государственный национальный исследовательский
университет</td>
<td align="center">90 000</td><td align="center">
78</td>
<td align="center">70%</td>
</tr>
<tr> /*пятая строка
<td>Московский государственный университет
им. М.В.&nbsp;Ломоносова</td>
<td align="center">90 000</td><td align="center">86,9</td>
<td align="center">90%</td>
</tr>
<tr> /*шестая строка
84
<td align="center">4</td>
<td>Санкт-Петербургский национальный исследовательский
университет информационных технологий, механики и оптики
</td>
<td align="center">87 000</td><td align="center">82,7
</td>
<td align="center">98%</td>
</tr>
<tr> /*седьмая строка
<td align="center">5</td>
<td>Новосибирский национальный исследовательский </td>
<td align="center">85 000</td><td align="center">81,1
</td>
<td align="center">83%</td>
</tr>
<tr>
<td align="center">6</td> /*восьмая строка
<td>Санкт-Петербургский государственный университет
аэрокосмического приборостроения</td>
<td align="center">84 000</td><td align="center">74</td>
<td align="center">96%</td>
</tr>
</table> /*конец таблицы
<p>Полную версию рейтинга можно увидеть на
<a href="https://students.superjob.ru/" target=" _ blank">
Students.SuperJob.ru </a>
</body>
</html>
2. Сохраните код в файле index6.html.
3. Результат отображения браузером HTML-кода таблицы можно
увидеть на рис. 2.37.
После ознакомления с листингом и основными комментариями
по HTML-коду можно увидеть, что многократно повторены атрибуты, связанные с выравниванием текста внутри ячейки по центру.
Для эффективной работы верстальщика в данный текст необходимо внести каскадные таблицы стилей – CSS (Cascading Style Sheets)
[3, 14], основное назначение которых будет рассмотрено ниже. Подключите CSS в HTML-документ и посмотрите, как изменится код
веб-страницы (листинг 2.26).
85
Рис. 2.37. Таблица на веб-странице
Листинг 2.26. Создание таблицы на веб-странице с применением CSS
<!DOCTYPE html>
<head>
<meta content="text/html; charset= utf-8" http-equiv="contenttype">
<title>Таблица зарплат</title>
<style>
table {border: 1 px; solid black;} /*задание границ ячеек в
таблице
td { text-align: center;} /*выравнивание текста во всех ячейках по центру
.left{text-align: left;} /* создание добавочного класса для
ячеек с выравниванием текста по левому краю
</style>
</head>
<body>
<table border="1" >
<caption><h3>10 лучших вузов России по уровню зарплат выпускников, работающих в IT</h3></caption>
<tr>
<th> № п.п.</th>
86
<th>ВУЗ, город</th><th>Зарплата в Москве, руб</th>
<th>Средний балл ЕГЭ в 2016-2017&nbsp;г.г.</th>
<th>Оставшиеся в городе обучения</th>
</tr>
<tr>
<td >1</td>
<td class=»left»>Московский физико-технический институт</td>
<td >130 000</td><td >93,5</td><td >75%</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>МИФИ</td>
<td>100 000</td><td >90</td><td >87%</td>
</tr>
<tr>
<td class=»left»>Московский государственный университет
им. Н.Э.&nbsp; Баумана</td>
<td >100 000</td><td >88,1</td><td >82%</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td class=»left»>Пермский государственный национальный
исследовательский университет</td>
<td >90 000</td><td>78</td><td >70%</td>
</tr>
<tr>
<td class=»left»> Московский государственный университет
им. М.В.&nbsp;Ломоносова</td>
<td >90 000</td><td>86,9</td><td>90%</td>
</tr>
<tr>
<td>4</td>
<td class=»left»>Санкт-Петербургский национальный
исследовательский университет информационных технологий,
механики и оптики</td>
<td>87 000</td><td>82,7</td><td >98%</td>
</tr>
<tr>
<td>5</td>
<td class=»left»>Новосибирский национальный
87
 
исследовательский </td>
<td >85 000</td><td>81,1</td><td >83%</td>
</tr>
<tr>
<td>6</td>
<td class=»left»>Санкт-Петербургский государственный
университет аэрокосмического приборостроения</td>
<td >84 000</td><td >74</td><td >96%</td>
</tr>
</table>
<p>Полную версию рейтинга можно увидеть на
<a href="https://students.superjob.ru/" target=" _ blank">
 Students.SuperJob.ru</a>
</body>
</html>
3. Самостоятельно создайте таблицу требуемой формы на странице учебного сайта.
88
3. СЕМАНТИЧЕСКИЕ ЭЛЕМЕНТЫ HTML5
Новые семантические элементы HTML5 позволяют [3]:
1) упростить понимание логической структуры веб-страницы
разработчиками ресурсов сети интернет;
2) повысить доступность информации с веб-страницы для посетителей, сканирующих сайты с помощью специализированных
программ просмотра;
3) увеличить вероятность попадания в результаты автоматизированной выборки поисковыми машинами по запросу пользователей.
Применение новых элементов позволяет изменить структуру вебдокумента таким образом, чтобы ее смогли корректно прочитать и
отобразить новые поколения браузеров и различных интернет-приложений. Следует отметить, что в нотациях HTML5 [11] появилась
возможность создавать графические объекты средствами Canvas.
3.1. Контентная модель HTML5
В спецификации HTML5 [12] описаны следующие категории
контента в элементах (рис. 3.1):
– метасодержимое;
– потоковое содержимое;
– секционное содержимое;
– заголовочное содержимое;
– текстовое содержимое;
ПОТОКОВОЕ СОДЕРЖАНИЕ
Интерактивное
содержимое
Текстовое
содержимое
Встроенное
содержимое
Мета
содержимое
Заголовочное
содержимое
Секционное
содержимое
Рис. 3.1. Категории контента HTML5
89
– встроенное содержимое;
– интерактивное содержимое.
Контентная модель HTML5 описывает, какой тип содержимого
может находиться внутри элемента и какие элементы могут быть
вложены в другие элементы (http://www.w3.org).
К потоковому содержанию относится большинство элементов,
создающих и формирующих контент и структуру веб-страницы [10].
К мета-содержимому контента сайта относятся теги, которые
содержат информацию о самом HTML-документе для корректного
отображения его браузерами, например <meta>, <script>, <style>,
<title>, <base>.
Под секционным содержимым понимают некоторую область,
которую определяют с помощью тегов колонтитулов и заголовков,
таких как <article>, <aside>, <nav>, <section>. Каждая область
имеет заголовок, информационное наполнение и структуру в соответствии с параметрами создающего его элемента.
Заголовочное содержимое размечают с помощью элементов заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Встроенное содержимое импортируют в документ из других
источников при использовании, например, элементов <audio>,
<video>, <img>, <canvas>. Интерактивное содержимое предназначено для взаимодействия
с посетителем сайта. К элементам, создающими возможность режима диалога, относятся <a> (при наличии атрибута href), <audio>
(при наличии атрибута controls), <button>, <input>, <label>,
<select>, <textarea>, <video> (при наличии атрибута controls).
Текстовое содержимое формируют теги для разметки текста внутри абзацев, например, <a>, <br>, <span>, <strong>, <sub>, <sup>,
<em>, <img>, <input>, <audio>, <video>, <script>, <select> и др.
Внимание! «Элемент» и «тег» не синонимы. Тег – это оператор
разметки, <а> и </а> ‒ это два разных тега. Элемент – объект, который находится между ними: <а> Сссылка </а>.
В настоящее время HTML-документ имеет иерархическую структуру, построенную по стандарту DOM2 (Object Document Model
level 2), созданному организацией World Wide Web Consorcium (W3C)
[2, 9, 11]. В качестве примера рассмотрим следующий HTML-код.
Листинг 3.1. Базовая структура веб-страницы
<html>
<head>
<title>Заголовок страницы</title>
90
</head>
<body>
<h1>Название статьи</h1>
<div>
<h2>Название раздела статьи</h2>
<p>Текст статьи</p>
</div>
</body>
</html>
В соответствии с моделью DOM2 браузер начинает строить дерево
документа (рис. 3.2), узлами которого выступают теги.
Корневым элементом дерева является узел document. Он имеет
один дочерний узел html, в который вложены узлы второго уровня
head и body. Узлами третьего уровня вложения по отношению к body
считают узлы h1 и div. Четвертый уровень образуют узлы h2 и p.
3.2. Элементы для добавления аудиоконтента на веб-страницу
Вставку проигрывателя аудифайлов на веб-страницу осуществляют с помощью парного элемента <audio>. Его часто используют
совместно с атрибутом controls, наличие которого указывает браузеру о необходимости отображения базовых элементов управления
воспроизведения: начала и остановки воспроизведения звука, регулировки громкости, перехода в другое место записи [7]. Общий вид
разметки записывают в следующем виде:
<audio src="name.mp3" controls>Аудиофайл</audio>
document
html
body
head
title
h1
div
h2
p
Рис. 3.2. Дерево DOM2
91
Таблица 3.1
Атрибуты тега <audio>
Атрибут
Назначение
autoplay
Автоматическое воспроизведение аудиофайла сразу же
после загрузки страницы
controls
Указывает браузеру, что нужно отобразить базовые
элементы управления воспроизведением
loop
muted
preload
src
Циклическое воспроизведение аудиофайла
Выключает звук при воспроизведении аудиофайла
Атрибут, отвечающий за предварительную загрузку
аудиоконтента. Имеет значения:
auto – браузер загружает аудиофайл полностью, чтобы
он был доступен, когда пользователь начнет его воспроизведение;
metadata – браузер загружает первую небольшую часть
аудиофайла, чтобы определить его основные характеристики;
none – отсутствие автоматической загрузки аудиофайла
Содержит абсолютный или относительный URL-адрес
аудиофайла
Аудиоинформацию для веб-сайта создают в специальных программах аудиокодеках. В настоящее время браузеры поддерживают данные, сохраненные в форматах mp3, aac и ogg.
MP3 – популярный аудиоформат, использующий сжатие с потерями качества звучания. Размер файла уменьшается в несколько
раз за счет урезания той части спектра звукового сигнала, которую
не воспринимает слух человека.
AAC (Advanced Audio Codec) – аналог MP3 (по сравнению с ним,
поддерживает более высокое качество звука при похожем размере
файла).
Ogg Vorbis – бесплатный формат с открытым кодом. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.
При вставке аудиофайлов обращают внимание на возможность
воспроизведения выбранного формата браузером [7, 11, 14]. Например, формат mp3 не поддерживается браузером Google Chrome. В настоящий момент не существует аудиоформата, который можно воспроизводить во всех браузерах, поэтому требуется включать несколько источников звука с помощью атрибута src элемента <source>. 92
3.3. Элементы для добавления видеоконтента на веб-страницу
Для размещения видеоданных на веб-странице используют парный элемент <video> с атрибутом controls. В теле элемента желательно присутствие атрибута poster, который позволяет добавить
изображение, позволяющее задержать внимание посетителя сайта
на время загрузки видеофайла [2]. Размер окна воспроизведения задают атрибутами width и height. В общем виде HTML-разметка для
размещения видеофайла на странице имеет следующий вид:
<video src="video.mp4" controls>Видеофайл</video>
Атрибуты тега <video>
Атрибут
Таблица 3.2
Назначение
autoplay
Автоматическое воспроизведение видеоофайла сразу же
после загрузки страницы
controls
Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение,
пауза, громкость)
height
Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop
muted
Циклическое воспроизведение видеофайла
Выключает звук при воспроизведении видеофайла
poster
URL-файла изображения, которое будет отображаться во
время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не
задан, то будет отображаться первый кадр видеофайла
preload
Атрибут, отвечающий за предварительную загрузку
видеоинформации. Возможные значения:
auto – браузер загружает видеофайл полностью, чтобы
он был доступен, когда пользователь начнет его воспроизведение;
metadata – браузер загружает первую небольшую часть
видеофайла, чтобы определить его основные характеристики;
none – отсутствие автоматической загрузки видеофайла
src
width
Содержит абсолютный или относительный URL-адрес
видеофайла
Задает ширину окна для отображения видеоданных, возможные значения: px или %
93
Видеофайл
Видеодорожка
Аудиодорожка
Метаданные
Рис. 3.3. Структура видеофайла
Браузеры поддерживают не все способы аудиокодирования, поэтому при написании HTML-кода указывают несколько альтернативных источников видеоресурсов, сохраненных в разных форматах. Видеофайл является файловым контейнером, в котором хранятся другие файлы: аудио- и видеодорожки (рис. 3.3). Метаданные
содержат информацию о данном видеоролике — изображение обложки, субтитры и пр.
В настоящее время браузеры поддерживают следующие форматы видеофайлов (табл. 3.3).
Таблица 3.3
Форматы видеофайлов
Формат файла
Видеокодирование
Аудиокодирование
.mp4
H.264
AAC
.ogg/.ogv
Theora
Vorbis
.webm
VP8
Vorbis
Таблица 3.4
Атрибуты элемента <source>
94
Атрибут
Описание, принимаемое значение
media
Определяет, для каких устройств оптимизирован файл
src
Содержит абсолютный или относительный URL-адрес
медиафайла
type
Определяет MIME-тип медиафайла
Конвертировать в требуемый формат аудио и видеофайлы можно
с помощью конвертеров видеоданных, например Movavi (https://
www.movavi.ru) или ONLINE-CONVERT (https://www.onlineconvert.com).
Для корректного отображения браузерами мультимедийных ресурсов используют элемент <source>, атрибуты которого приведены
в табл. 3.4.
3.4. Формы на веб-странице
При сборе и передаче данных о пользователе с веб-страницы на
сервер используют веб-формы, состоящие из логически сгруппированных элементов управления (полей формы). В качестве полей
формы в соответствии со стандартами WIMP (аббревиатура от начальных букв англ. слов window, icon, menu, pointing device) могут
выступать текстовые поля, чекбоксы, селекторы, радиокнопки,
списки и т.д.
Веб-форму создают с помощью парного тега-контейнера <form>.
Атрибуты этого тега (табл. 3.5) содержат информацию, общую для
всех полей формы [13, 14]. Внутри этого тега прописывают теги,
определяющие поля ввода.
Таблица 3.5
Атрибуты тега <form>
Атрибут
Назначение
accept
Значение charset задает кодировки, которые могут быть
использованы при записи данных
action
Прописывают адрес (URL) серверного приложения, принимающего данные
enctype
Применяют только в случае method="post". Используют
для указания MIME-типа данных, отправляемых вместе
с формой, например, enctype="multipart/form-data"
method
Задает способ передачи данных формы.
Метод get передает данные небольшого объема на сервер
через адресную строку браузера. Метод post применяют
для пересылки данных больших объемов, а также конфиденциальной информации и паролей
name
Задает имя формы, которое будет использоваться для
доступа к элементам формы через сценарии, например,
name="legenda"
95
Окончание табл. 3.5
Атрибут
Назначение
target
Указывает окно, в которое будет направлена информация:
_blank – новое окно;
_self – тот же фрейм;
_parent – родительский фрейм (если он существует, если
нет, то – в текущий);
_top – окно верхнего уровня по отношению к данному
фрейму. Если вызов происходит не из дочернего фрейма,
то в тот же фрейм
Основные элементы управления задаются значением атрибута
type тега <input>. Синтакис этого тега можно представить в следу-
ющем виде:
<input type="тип _ элемента" name="имя" [прочие атрибуты] />
Для отправки данных из формы используют кнопку submit, например, <input type="submit">. Пример HTML-кода, построенного на основе конструкции, использующей тег <input>, приведен
в листинге 3.2. Веб-формы рассматриваемого примера сформированы с использованием последовательности элементов:
<input type="text"> для ввода текста
<input type="password"> для ввода пароля
<input type="submit"> для создание кнопки отправки формы
<input type="reset" > для создания кнопки сброса введенных данных
Отображение HTML-кода браузером приведено на рис. 3.4.
Рис. 3.4. Веб-форма передачи данных на электронный адрес
96
Упражнение 3.1. Веб-форма передачи данных на электронный
адрес
Наберите следующий листинг в Блокноте:
Листинг 3.2. Веб-форма передачи данных на электронный адрес
<!DOCTYPE html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=
utf-8">
<title>формы</title>
</head>
<body>
<h1>Форма входа</h1>
<form action="action="mailto:kafedra41@mail.ru"
enctype="text/plain">
<label for="login-field">Ваш логин</label>
<input type="text" name="login" id="login-field">
<br><br>
<label for="password-field">Ваш пароль</label>
<input type="password" name="password"
id="password-field">
<br><br>
 
<input type="submit" value="Войти">
 
<input type="reset" value="Сброс">
</form>
</body>
</html>
Отправка формы происходит по нажатию кнопки Войти, но перед этим браузер преобразует содержимое формы в пары «имя–значение», где имя определяется атрибутом name элемента управления из формы, а значение – его атрибутом value. Сформированные
параметры запроса передаются на сервер по методу, указанному
в атрибуте method, и URL сервера-обработчика, заданному в атрибуте action.
Рассмотрим подробнее значения атрибута передачи данных
method.
1. При передаче данных небольшого объема с веб-страницы на
сервер или поиске по сайту используют метод get в качестве пара97
метра атрибута method [1]. Этот метод передает запрос об отправляемых данных через адресную строку браузера:
https://yandex.ru/search/?text=%D0%B2%D0%B5%D0%B1&lr=2&cl
id=228510
Имена и значения переменных присоединяются к адресу сервера после знака «?» и разделяются между собой знаком «&». Все
специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на «+» [2, 11]. Предыдущий
запрос, выполненный латинскими буквами, выглядит в адресной
строке следующим образом:
https://yandex.ru/search/?text=web&lr=2&clid=2285101
2. При передаче данных большого объема или конфиденциальной информации и паролей применяют метод post.
Данные, отправляемые с помощью этого метода, не видны в адресной строке браузера, так как они находятся в теле сообщения. Получение и обработка данных форм на сервере происходит по программе, написанной на языках PHP, Perl.
Для управления формами в HTML предусмотрены интерактивные элементы управления (табл. 3.6).
Упражнение 3.2. Создание выпадающих списков на веб-странице.
Наберите следующий листинг в Блокноте.
Листинг 3.3. Выпадающий список
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селект</title>
Таблица 3.6
Интерактивные элементы управления
Элементы управления
Программная реализация
Текстовые поля
<input type="text">
Переключатели
<input type="radio">
Флажки
Выпадающие списки
98
<input type="checkbox">
<select>…</select>
</head>
<body>
<h3>История ГУАП</h3>
<form action="/example.php" method="GET" target=" _ blank">
<select>
<option>Ленинградский авиационный институт</option>
<option>Ленинрадский институт авиационного приборостроения</option>
<option>Государственная акадения аэрокосмического приборостроения</option>
<option>Государственный университет аэрокосмического приборостроения</option>
</select>
</form>
</body>
</html>
При использовании форм пользователь вводит требуемые параметры в соответствующие запросам текстовые поля, которые могут
иметь следующие форматы (табл. 3.7).
Текстовые поля могут отображать подсказывающий текст, который исчезнет, как только будет введён некоторый текст. Например,
<input type="text" placeholder="Введите свою фамилию">
Таблица 3.7
Форматы текстовых полей
Название
поля
Формат данных в поле
Программная реализация
Текст
Любой тип символов
<input
type="text">
Email
При введении ошибочного
email появляется сообщение
<input
type="email">
Пароль
Вместо символов показывают точки
<input
type="password">
Число
Предусмотрено использование клавиши вверх/вниз
<input
type="number">
Телефон
Возможно автозаполнение
по шаблону
Многостроч- Предусмотрено изменение
ный текст
размера поля
<input
type="tel">
<textarea></textarea>
99
Листинг 3.4. Элементы управления <input>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Упрощенная форма регистрации</title>
</head>
<body>
<h3>Форма входа</h3>
<form action="/example.php" method="GET" target=" _ blank">
<table >
<tr>
<td>Логин:</td>
<td width="250"><input type="text" name="username" /></td>
</tr>
<tr>
<td>Пароль:</td>
<td width="300"><input type="password" name="password"/></
td>
</tr>
<tr>
<td>Обращение: </td>
<td width="250"><input name="sex" type="radio" value="male">
господин
<input name="sex" type="radio" value="female" /> госпожа</
td>
</tr>
<tr>
<td>Эл.адрес:</td>
<td width="250"><input type="text" name="email"
placeholder="guap@mail"/></td>
</tr>
<tr>
<tr>
<td>Подписка на новости:</td>
<td><input type="checkbox" name="subscribe" value="1"
checked/></td>
</tr>
<tr>
<td><input name="invisible" type="hidden"
100
Рис. 3.5. Отображение элементов управления браузером
value="hiddendata" /></td>
<td><input type="submit" value="ОК"/> <input type="reset"
value="Сброс"/></td>
</tr>
</table>
</form>
</body>
</html>
3.5. Группировка элементов на веб-странице
При логическом форматировании для создания схемы разметки
веб-страницы используют три группы элементов [3, 12, 14].
Первая группа – блочные элементы, которые отображаются браузером в вертикальном порядке сверху вниз относительно окна обозревателя [5]. К блочным элементам относят: address, blockquote,
fieldset, form, h1…h6, hr, p, pre, table, ul. Особое место занимает тег-контейнер <div>...</div>, который позволяет соединить
в единый блок элементы заголовков, абзацев, списков. Используя
его, можно произвести разметку веб-страницы на шапку сайта, левую колонку, правую колонку и нижний колонтитул (рис. 3.6, 3.8).
Позиционируя с помощью свойств CSS указанные блоки в определенных местах веб-документа, можно создать сложный сценарий
разметки интернет-страницы.
Блочную модель html-элемента можно увидеть на рис. 3.7.
101
ШАПКА (header)
Левая
колонка
(nav)
Основное содержание
страницы (content)
ПОДВАЛ (footer)
Рис. 3.6. Пример логической структуры веб-документа
Поля (margin)
Границы (border)
Отступы (padding)
Контент
Рис. 3.7. Блочная модель элемента
Контент – область основного содержимого страницы, может
быть текстом или изображением. Отступы (padding) – внутренний
отступ, расстояние между основным содержимым страницы и его
границей (рамкой). Границы (border) – рамка для контента, имеющая свою ширину. Поля (margin) – внешний отступ, задающий
расстояние от внешней границы рамки до соседнего элемента. Важно помнить, что значение свойств padding и margin задают в следующем порядке: верхнее, правое, нижнее и левое.
Блочные элементы могут содержать блочные или строчные элементы. Ширину и высоту блока можно найти как сумму соответствующих значений свойств селектора элемента. Например, если
задана ширина контента (width), то ширину блока можно вычислить следующим образом:
width + padding-left + padding-right + border-left +
+ border-right + margin-left + margin–right
К группе строчных элементов относят <img>, <span>, <a>,
<code>. Они предназначены для оформления небольших фраз или
102
текста. У таких блоков не существует свойств, связанных с их высотой и шириной. Учитывают размер содержимого – данные других
строчных элементов.
Блочные элементы можно отобразить в окне браузера как строчные и наоборот, если установить соответствующее блоку значение
свойства display. Например,
/*преобразование строчного элемента в блочный */
span {display: block;}
/* преобразование блочного элемента в строчный*/
div {display: inline;}
В современной верстке код программы приблизительно на 90%
состоит из элементов <div> или <span>.Чтобы убедиться в этом, достаточно посмотреть на код любой страницы в интернете, например, http://new.guap.ru/.
Третья группа – встроенные строчно-блочные элементы:
<audio>, <video>, <canvas>, <textarea>, <input>, <button>. Для
них можно задавать поля, отступы, ширину и высоту. Значение
свойства display у таких элементов определено {display: inlineblock;}. Ширину таких блоков находят в виде суммы значений отступов, полей и границ. Внутрь строчно-блочных элементов можно
помещать текст, строчные или блочные элементы.
Упражнение 3.3. Двухколоночная верстка веб-страницы
1. Наберите следующий листинг в Блокноте и сохраните под названием index _ 2 _ kolonki.html.
Листинг 3.5. Двухколоночная верстка веб-страницы. HTML-код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Двухколоночная верстка</title>
<link href="style _ 2.css" rel="stylesheet">
</head>
<body>
<div class="header">Шапка </div>
<div class="nav"> Боковая колонка </div>
<div class="content"> Основное содержание страницы </div>
<div class="footer">Подвал</div>
</body>
</html>
103
2. Наберите следующий листинг в Блокноте и сохраните под названием style _ 2.css.
Листинг 3.6. Двухколоночная верстка веб-страницы. CSS-код
div {
margin-bottom: 15px;
padding: 10px 25px 10px 25px;
background-color: orange;
}
.content {
width: 50%;
min-height: 100px;
background-color: #8DB600;
float: right;
}
.nav {
width: 25%;
min-height: 100px;
background-color: #DF73FF;
float: left;
}
.footer {
clear: both;
background-color: #CC5500;
}
Упражнение 3.4. Трехколоночная верстка веб-страницы
1. Наберите следующий листинг в Блокноте и сохраните под названием index _ 3 _ kolonki.html.
Листинг 3.7. Трехколоночная верстка веб-страницы. HTML-код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трехколоночная верстка</title>
<link href="style _ 3.css" rel="stylesheet">
</head>
104
<body>
<div class="header">Шапка </div>
<div class="nav"> Левая колонка </div>
<div class="content"> Основное содержание страницы </
div>
<div class="sidebar"> Правая колонка </div>
<div class="footer">Подвал</div>
</body>
</html>
2. Наберите следующий листинг в Блокноте и сохраните под названием style _ 3.css.
Листинг 3.8. Трехколоночная верстка веб-страницы (рис. 3.8).
CSS-код
.wrapper {
margin: 0 10%;
}
.header{
padding: 10px 25px 10px 25px;
background-color: orange;
font: 24px “Courier New", Courier;
text-align: center;
}
.nav {
width: 30%;
margin: 1.5% 1.5%;
min-height: 100px;
ШАПКА
(header)
Левая
колонка
(nav)
Основное
содержание
страницы
(content)
Правая
колонка
(sidebar)
ПОДВАЛ
(footer)
Рис. 3.8. Трехколоночная верстка страницы
105
background-color: #8DB600;
float: left;
font: 24px “Courier New", Courier;
text-align: center;
}
.sidebar {
width: 30%;
margin: 1.5% 1.5%;
min-height: 100px;
background-color: #8DB600;
float: right;
font: 24px “Courier New", Courier;
text-align: center;
}
.content {
width: 30%;
margin: 1.5% 1.5%;
min-height: 100px;
background-color: #DF73FF;
float: left;
font: 24px “Courier New", Courier;
text-align: center;
}
.footer {
clear: both;
margin-bottom: 15px;
padding: 10px 25px 10px 25px;
background-color: #CC5500;
font: 24px “Courier New", Courier;
text-align: center;
}
3.6. Практикум по разделу 3
3.6.1. Практическая работа № 10
ДОБАВЛЕНИЕ ПРОИГРЫВАТЕЛЯ АУДИОФАЙЛОВ
НА ВЕБ-СТРАНИЦУ
Цель работы: добавление проигрывателя аудиофайлов на вебстраницу.
106
Порядок выполнения работы
1. Наберите следующий листинг в Блокноте.
Листинг 3.9. Проигрыватель аудиофайлов на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Проигрыватель звуковых файлов на веб-странице</
title>
</head>
<body>
<p>Прослушате гимн ГУАПа</p>
<audio controls>
<source src=
"audio/gimn _ guap.ogg" type=
"audio/ogg;
codecs=vorbis">
<source src="audio/gimn _ guap.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером.
<a href=" https://www.youtube.com/watch?v=nn _ L _ _ JIZqU
“>
Послушайте гимн ГУАП и посмотрите ролик о родном вузе</a>.
</audio>
</body>
</html>
2. Прослушайте гимн ГУАП и посмотрите ролик о вузе.
3. Самостоятельно добавьте аудиофайл на разрабатываемый интернет-ресурс.
Рис. 3.9. Отображение проигрывателя аудиофайлов
браузером Internet Explorer
107
3.6.2. Практическая работа № 11
ДОБАВЛЕНИЕ ПРОИГРЫВАТЕЛЯ ВИДЕОФАЙЛОВ
НА ВЕБ-СТРАНИЦУ
Цель работы: добавление проигрывателя видеофайлов на вебстраницу.
Порядок выполнения работы
1. Наберите следующий листинг в Блокноте.
Листинг 3.10. Проигрыватель видеофайлов на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<p> GeekPicnic 2017. КосмоШоу ГУАП<p>
<video width="400" height="300" controls="controls"
 poster="video/guap.jpg">
<source src="video/guap.ogv" type=’video/ogg;
codecs="theora, vorbis"’>
Рис. 3.9. Отображение видеоданных браузером Internet Explorer
108
<source src="video/ guap.mp4" type=’video/mp4;
codecs="avc1.42E01E, mp4a.40.2, H.264"’>
<source src= "video/ guap.webm" type= ’video/webm; codecs= "vp8,
vorbis"’>
Тег video не поддерживается вашим браузером.
<a href="video/guap.mp4">Скачайте видеофайл</a>.
</video>
</body>
</html>
2. Посмотрите видеорепортаж о мероприятии.
3. Добавьте на создаваемый вами интернет-ресурс проигрыватель видеофайлов. При выполнении задания обратите внимание на
форму записи атрибута type, в котором для браузеров указывают
тип данных в файле и способ видеокодирования.
3.6.3. Практическая работа № 12
ДОБАВЛЕНИЕ ФОРМ РЕГИСТРАЦИИ
НА ИНТЕРНЕТ-РЕСУРС
1. Наберите следующий листинг в Блокноте.
Листинг 3.11. Формы регистрации на веб-странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Форма регистрации</title>
</head>
<body>
<h3>Форма входа</h3>
<form action="/example.php" method="GET" target=" _ blank">
<table >
<tr>
<td>Имя</td>
<td width="250"><input type="text" name="first _ name"
placeholder="Алексей"></td>
</tr>
109
<tr>
<td>Фамилия</td>
<td width="250"><input type="text" name="last _ name"
placeholder="Ивлев"></td>
</tr>
<tr>
<td>Обращение: </td>
<td width="250"><input name="sex" type="radio" value="male">
господин
<input name="sex" type="radio" value="female" /> госпожа</
td>
</tr>
<tr>
<td>Телефон</td>
<td width="250"><input type="tel" name="phone"
placeholder="+7(ххх)-ххх-хх-хх"></td>
</tr>
<tr>
<td>Дата рождения</td>
<td><input type="date" name="date _ birth"></td>
</tr>
<tr>
<td>Логин:</td>
<td width="250"><input type="text" name="username"/></td>
</tr>
<tr>
<td>Пароль:</td>
<td width="300"><input type="password" name="password"/></
td>
</tr>
<tr>
<td>Эл.адрес:</td>
<td
width="250"><input
type="text"
name="email"
placeholder="guap@mail.ru"/></td>
</tr>
<tr>
<td>Паспортные данные</td>
<td width="250"><textarea name="pass _ data" placeholder="№
хххх
Серия ххххххх выдан ххххх УФМС России"></textarea></
td>
</tr>
110
<tr>
<tr>
<td>Город проживания</td>
<td width="250"><select name="country">
<option>Москва</option>
<option>Санкт-Петербург</option>
<option>Новосибирск</option>
<option>Владивосток</option>
<option>Екатеринбург</option>
<option>Воронеж</option>
<option>Барнаул</option>
<option>Тихвин</option>
</select></td>
</tr>
<td>Подписка на новости:</td>
<td width="250"><input type="checkbox" name="subscribe" value="1" checked /></td>
Рис. 3.11. Отображение формы регистрации браузером
111
</tr>
<tr>
<td>Любимый цвет</td>
<td width="250"><input type="color" name="best _ color"></td>
</tr>
<tr>
<td><input name="invisible" type="hidden"
value="hiddendata" /></td>
<td><input type="submit" value="ОК"/> <input type="reset"
value="Сброс"/></td>
</tr>
</table>
</form>
</body>
</html>
2. Сравните полученный результат отображения набранного вами кода с представленным на рис. 3.11.
3. На проектируемый интернет-ресурс самостоятельно добавьте
формы регистрации посетителей.
112
ПРИЛОЖЕНИЕ А
ПРИМЕР ВЫПОЛНЕНИЯ АНАЛИЗА САЙТОВ
http://
http://
http://
www.352spb. school458.
www.605spb.
edusite.ru pa.infobox.ru
ru
Характеристики
Поддерживаемые сервисы
Поиск (есть, нет)
есть
есть
нет
Помощь (есть, нет)
нет
есть
есть
Вопрос-ответ (есть, нет)
есть
есть
нет
Обратная связь (есть, нет)
нет
есть
нет
Регистрация пользователей
(есть/нет)
нет
нет
нет
Интерактивный помощник/
консультант (есть/нет)
нет
нет
нет
Корзина покупок (есть/нет)
нет
нет
нет
Технические характеристики
Дата создания домена.
Возраст домена
Контактные данные организации
Информация о сервере
Информация о CSS/HTML
версиях
03.03.2016
04.05.2015
23.10.2014
2
3
4
есть
есть
есть
edusite.ru
infobox.ru
Aanet.ru
HTML 5
HTML 5
HTML 5
Оценка дизайна
Оценка за дизайн (от 0 до 5)
3
5
5
Адаптивный дизайн
(да/нет)
да
нет
да
Цветовая гамма (от 0 до 5)
3
4
5
есть
нет
нет
5
5
5
Наличие логотипа
(есть/нет)
Легкость определения рода
деятельности фирмы, сайт
которой анализируют
(от 0 до 5)
113
http://
http://
http://
www.352spb. school458.
www.605spb.
edusite.ru pa.infobox.ru
ru
Характеристики
Оценка удобства использования
Оценка системы навигации
(от 0 до 5)
5
5
4
Вынесен ли отдельно каталог товаров/услуг и т.д.
(да/нет)
да
да
да
Наличие карты сайта
(есть/нет)
есть
есть
есть
Контактная информация
(есть/нет)
есть
есть
есть
Доступность контактной
информации (от 0 до 5)
5
5
4
Другие характеристики
Интерактивность сайта
(да/нет)
да
да
да
Реклама сторонних ресурсов (есть/нет)
нет
нет
нет
РЕЗЮМЕ
http://www.352spb.edusite.ru/ (сайт школы №352)
Простой неперегруженный дизайн. Удобная навигация. Приведена контактная информация для связи. Предусмотрена возможность увеличения шрифтов.
Doctype: HTML  
Encoding: UTF-8
http://school458.pa.infobox.ru/ (сайт школы №458)
Хорошо продуманный дизайн. Удобная навигация. Предусмотрена возможность увеличения шрифтов. Не приведен логотип организации.
Doctype: HTML 
Encoding: UTF-8
http://www.605spb.ru/ (сайт школы №605)
Удобная навигация. Приятное для глаз оформление сайта.
Сложно найти информацию для обратной связи.
Doctype: HTML 
Encoding: UTF-8
114
ПРИЛОЖЕНИЕ Б
ТЕХНИЧЕСКОЕ ЗАДАНИЕ
НА РАЗРАБОТКУ ИНТЕРНЕТ-РЕСУРСА
Согласно ГОСТ 19.201–78 (Единая система программной документации. Техническое задание. Требования к содержанию и
оформлению) техническое задание должно включать следующие
разделы:
1. Введение.
2. Основания для разработки.
3. Назначение разработки.
4. Требования к программе или программному изделию.
5. Требования к программной документации.
6. Технико-экономические показатели.
7. Стадии и этапы разработки.
8. Порядок контроля и приемки.
9. Приложения.
При разработке веб-ресурса необходимо соблюдать требования
следующих ГОСТов единой системы программной документации.
1. ГОСТ 34.602–89. ЕСКД. Техническое задание на создание автоматизированной системы.
2. ГОСТ 34.601–90. ЕСКД. Комплекс стандартов на автоматизированные системы. Автоматизированные системы. Стадии создания.
3. ГОСТ 34.201–89. ЕСКД. Информационная технология. Комплекс стандартов на автоматизированные системы. Виды, комплексность и обозначение документов при создании автоматизированных систем.
4. РД 50-34.698–90. ЕСКД. Методические указания. Информационная технология. Комплекс стандартов на автоматизированные
системы. Автоматизированные системы. Требования к содержанию
документов.
Техническое задание на разработку тематического интернет-ресурса скорректировано с учетом особенностей изучения веб-программирования по программе подготовки студентов по направлениям подготовки 09.03.03 –Прикладная информатика (бакалавры), 09.03.03 –
Прикладная информатика (бакалавры) и 38.03.05 – Бизнес-информатика (бакалавры).
115
Техническое задание на разработку тематического интернетресурса.
1. Вводная часть.
1.1. Обосновать актуальность выбора темы интернет-ресурса.
1.2. Провести анализ сайтов-конкурентов.
В адресной строке Google задать ключевые слова для поиска аналогичных по своему содержанию разрабатываемому ресурсу сайтов. Сравнить их между собой по предлагаемым критериям. Итоги
сравнения занести в таблицу. Затем проанализировать каждый ресурс (пример прилагается) и сделать вывод, почему Ваш сайт будет
интересен.
2. Общие положения.
2.1. Назначение и цель создания сайта.
2.2. Определить тематику сайта и предполагаемую аудиторию
посетителей.
2.3. Выбрать имя для веб-ресурса.
2.4. Провести SWOT-анализ для разрабатываемого интернет-ресурса.
3. Логическая структура сайта.
3.1. Внутренняя структура сайта.
3.2. Внешняя структура сайта.
4. Функциональные требования.
Перечислите функциональные блоки, которые необходимы для
каждой страницы веб-ресурса.
4.1. Для посетителей (например).
4.1.1. Зарегистрироваться (имя, телефон, e-mail (optional)).
4.1.2. Обратная связь и обратный звонок.
4.1.3. Оставить отзыв.
4.1.3. Он-лайн консультация по услуге/организации.
4.2. Для организации.
4.2.1. Добавить/изменить новости организации.
4.2.2. Добавить/изменить/удалить типы услуг организации +
описание, фото и др. информацию.
4.2.3. Он-лайн консультирование клиентов, ответ на обратную
связь, просмотр обратных звонков.
4.2.4. Отчеты для владельца организации.
5. Требования к дизайну сайта.
5.1. Выберите концепцию дизайна сайта.
5.2. Продумайте требования к цветовой гамме и графики вебресурса.
116
6. Технические требования к сайту.
6.1. Продумайте конфигурацию хостинга.
6.2. Укажите в каких браузерах должен отображаться веб-ресурс.
7. Требования к приемке-сдачи проекта.
7.1. Сроки разработки веб-проекта.
7.2. Приемо-сдаточные испытания должны проводиться по каждому этапу отдельно в сроки, оговоренные договором.
7.3. Ход проведения приемо-сдаточных испытаний документируют в Протоколе проведения испытаний.
Приложения.
Скриншоты созданных страниц сайта.
117
ПРИЛОЖЕНИЕ В
CПИСОК ТЕГОВ HTML5
Название тега
Описание тега
Тип тега
Корневой элемент
<html></html>
Корневой элемент htmlдокумента
block
Служебные теги
<!—…—>
Комментарий
none
<!DOCTYPE>
Объявление типа документа
none
<head></head>
Контейнер для метаданных
html-документа
none
Заголовок / имя htmlдокумента
none
<meta>
Мета-данные веб-страницы
none
<link>
Подключает внешние таблицы стилей
none
<script></script>
Подключает сценарии к странице
none
Подключает встраиваемые
таблицы стилей
none
<base>
Базовый url-адрес, относительно которого вычисляются
относительные адреса
none
<noscript></noscript>
Секция, не поддерживающая
скрипт
block
<title></title>
<style></style>
Таблицы
<table></table>
table
<tr></tr>
Строка таблицы
table-row
<th></th>
Заголовок столбца таблицы
table-cell
<td></td>
Ячейка таблицы
table-cell
<thead></thead>
118
html-таблица
Блок заголовков таблицы
tableheadergroup
Продолжение прил. В
Название тега
Описание тега
Тип тега
<tbody></tbody>
Тело таблицы
<tfoot></tfoot>
Нижний колонтитул таблицы
tablefootergroup
Подпись к таблице
tablecaption
<col>
Выбор столбцов для форматирования
tablecolumn
<colgroup></colgroup>
Контейнер для одного или нескольких <col>
tablecolumngroup
<caption></caption>
table-rowgroup
Текст
<h1></h1> - <h6></h6>
Заголовки шести уровней
block
Параграфы в тексте
block
<br>
Перенос текста на новую
строку
none
<hr>
Горизонтальная линия
block
<wbr>
Возможное место разрыва
длинной строки
none
<p></p>
<blockquote></blockquote> Большая цитата
<cite></cite>
block
Источник цитирования
inline
Краткая цитата
inline
<code></code>
Фрагмент программного кода
inline
<kbd></kbd>
Текст, вводимый пользователем с клавиатуры
inline
<pre></pre>
Выводит текст с пробелами и
переносами
block
Результат выполнения сценария
inline
Выделяет переменные из программ
inline
<q></q>
<samp></samp>
<var></var>
119
Продолжение прил. В
Название тега
Описание тега
Тип тега
<del></del>
Перечеркивает текст, помечая
как удаленный
inline
<s></s>
Перечеркивает неактуальный
текст
inline
Выделяет термин курсивом
inline
<em></em>
Выделяет важные фрагменты
текста курсивом
inline
<i></i>
Выделяет текст курсивом без
акцента
inline
<strong></strong>
Выделяет полужирным важный текст
inline
<b></b>
Задает полужирное начертание отрывка текста, без
дополнительного акцента
inline
<ins></ins>
Подчеркивает изменения
в тексте
inline
<u></u>
Выделяет отрывок текста
подчеркиванием, без дополнительного акцента
inline
<mark></mark>
Выделяет фрагменты текста
желтым фоном
inline
<small></small>
Отображает текст шрифтом
меньшего размера
inline
<sub></sub>
Подстрочное написание символов
inline
<sup></sup>
Надстрочное написание символов
inline
<time></time>
Дата/время документа или
статьи
inline
<abbr></abbr>
Аббревиатура или акроним
none
<address></address>
Контактные данные автора
документа или статьи
block
<bdi></bdi>
Изолирует текст, читаемый
справа налево
inline
<dfn></dfn>
120
Продолжение прил. В
Название тега
Описание тега
Тип тега
<bdo></bdo>
Задает направление написания текста
inline
<ruby></ruby>
Контейнер для восточно-азиатских символов и их расшифровки
inline
<rp></rp>
Тег для скобок вокруг символов
none
<rt></rt>
Расшифровка символов
block
Изображения
<img>
Html-изображения
inline
Активные области на картеизображении
inline
<area>
Гиперссылка с текстом или
активная область внутри карты-изображения
inline
<canvas></canvas>
Холст-контейнер для динамического отображения изображений
inlineblock
<map></map>
Ссылки
<a></a>
Гиперссылка
inline
Списки
<ol></ol>
Упорядоченный нумерованный список
block
<ul></ul>
Маркированный список
block
<li></li>
Элемент списка
<dl></dl>
Контейнер для термина и его
описания
block
<dt></dt>
Задаёт термин
block
<dd></dd>
Расшифровывает термин
block
list-item
Группировка контента
<body></body>
Тело html-документа
block
121
Продолжение прил. В
Название тега
<div></div>
Описание тега
Контейнер для разделов
html-документа, группирует
блочные элементы
block
Контейнер для строчных
элементов
inline
<header></header>
Секция для вводной информации сайта или группы навигационных ссылок
block
<footer></footer>
Секция для нижнего колонтитула документа или раздела
block
<section></section>
Логическая область (раздел)
страницы, обычно с заголовком
block
<article></article>
Раздел контента, образующий
независимую часть документа
или сайта
block
<aside></aside>
Контент страницы, имеющий
косвенное отношение к основному контенту
block
<nav></nav>
Раздел документа, содержащий навигационные ссылки
по сайту
block
<figure></figure>
Независимый контейнер для
такого контента, как изображения, диаграммы и т.п.
block
<span></span>
<figcaption></figcaption> Заголовок для элемента <figure>
122
Тип тега
block
<details></details>
Контейнер с дополнительными сведениями, который
можно открыть или закрыть
block
<summary></summary>
Видимый заголовок для элемента <details>
block
<main></main>
Контейнер для уникального основного содержимого
в пределах одной страницы
сайта
block
Продолжение прил. В
Название тега
Описание тега
Тип тега
Формы
<form></form>
Html-форма
block
Многофункциональные поля
формы
inlineblock
<textarea>
Многострочное поле формы
inlineblock
<label></label>
Текстовая метка для элемента <input>
inline
<datalist></datalist>
Контейнер для выпадающего
списка элемента <input>
с <option>-значениями
none
<select></select>
Элемент управления с выбором значений из предложенных вариантов <option>
inlineblock
<optgroup></optgroup>
Контейнер с заголовком для
группы элементов <option>
block
Вариант (опция) в раскрывающемся списке
block
Группирует связанные элементы в форме
block
<legend></legend>
Заголовок элементов формы,
сгруппированных с помощью
<fieldset>
block
<button></button>
Интерактивная кнопка
inlineblock
<keygen>
Генерирует закрытый и открытый ключи
inlineblock
<progress></progress>
Индикатор выполнения задачи
inlineblock
<meter></meter>
Индикатор измерения в заданном диапазоне
inlineblock
<output></output>
Поле для вывода результата
вычисления
inline
<input>
<option></option>
<fieldset></fieldset>
123
Окончание прил. В
Название тега
Описание тега
Тип тега
Встраиваемый контент
<audio></audio>
Добавляет аудио-файлы
inlineblock
<video></video>
Добавляет видео-файлы
inlineblock
<source>
Указывает местоположение и
тип альтернативных файлов
для <audio> и <video>
none
<track>
Субтитры для элементов
<audio> и <video>
none
<embed>
Встраивает внешний интерактивный контент или плагин
inlineblock
Контейнер для встраивания
мультимедиа
inlineblock
<object></object>
<param>
<iframe></iframe>
124
Задаёт параметры для плагинов, встраиваемых с помощью
элемента <object>
none
Создаёт встроенный фрейм
block
ПРИЛОЖЕНИЕ Г
СПИСОК УНИВЕРСАЛЬНЫХ АТРИБУТОВ HTML5
accesskey – определяет клавишу для быстрого доступа к элементу
class – задает класс CSS, который будет применяться к элементу
contenteditable – определяет, можно ли редактировать содер-
жимое элемента
contextmenu – определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши
dir – устанавливает направление текста в элементе
draggable – определяет, можно ли перетаскивать элемент
dropzone – определяет, можно ли копировать переносимые данные при переносе на элемент
hidden – скрывает элемент
id – уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
lang – определяет язык элемента
spellcheck – указывает, будет ли для данного элемента использоваться проверка правописания
style – задает стиль элемента
tabindex – определяет порядок, в котором по элементам можно
переключаться с помощью клавиши TAB
title – устанавливает дополнительное описание для элемента
translate – определяет, должно ли переводиться содержимое
элемента
125
ПРИЛОЖЕНИЕ Д
ЛИСТИНГ HTML-КОДА УЧЕБНОГО САЙТА
1. Наберите код в Блокнот и сохраните с названием index.html
в кодировке utf-8.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Интернет-программирование</title>
<link href=" guap.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="wrapper">
<img class="logo" src=" image _ guap.png" alt="Требуется обновить браузер" />
<nav class="top-menu">
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="index _ student.html">СТУДЕНТАМ</a></li>
<li><a href="index _ abiturient.html">АБИТУРИЕНТАМ</a></li>
<li><a href="index _ contact.html">КОНТАКТЫ</a></li>
</ul>
</nav>
</div>
</header>
<div class="fon">
<h1>Интернет-программирование</h1>
</div>
<div class="left-menu">
<ul>
<li> <a href="#">Новости</a> </li>
<li> <a href="index _ economica.html">Экономика </a> </li>
<li> <a href="index _ managment.html">Менеджмент</a> </li>
<li> <a href="index _ border.html">Таможенное дело</a> </li>
<li> <a href="index _ biznes.html">Бизнес-информатика</a> </li>
<li> <a href="index.html">Прикладная информатика</a> </li>
<li> <a href="index _ contact.html">Контакты</a> </li>
126
</ul>
<input class="poisc" type="sumbit" value=""></input>
<input type="reset" value="Найти"></input>
</div>
<article class="content">
<p class="p">
<h2 class="green"><center>Кафедра информационных технологий
предпринимательства</center></h2>
Современный бизнес остро нуждается в специалистах, способных
разрабатывать и внедрять
передовые инфокоммуникационные технологии для повышения его
эффективности,
определять политику предприятий и организаций в области информационных систем,
создавать информационные модели бизнес-процессов. </p>
<p class="p"> Среди основных развивающихся научных направлений деятельности кафедры можно назвать
<ul type="circle">
<li>системы корпоративного управления</li>
<li>исследования и управления рисками в экономике</li>
<li>искусственного интеллекта</li>
<li>управления проектами</li>
<li>поддержки принятия решений.</li>
</ul>
</p>
<p class="p">
Институт технологий предпринимательства предоставляет возможность получить высшее профессиональное
образование по широкому спектру направлений подготовки бакалавров и магистров
</p>
<ol type="1" >
<nav >
<li>Экономика</li>
<li>Менеджмент</li>
<li>Торговое дело</li>
<li>Таможенное дело</li>
<li>Бизнес-информатика</li>
<li>Прикладная информатика</li>
<li>Международные отношения</li>
<li>Экономическая безопасность</li>
127
</nav>
</ol>
<img src="images/1.png" height="187" width="566">
</article>
<footer class="footer">
<p> Copyright 2016 Бизнес-информатика</p>
</footer>
</body>
</html>
2. После набра CSS-кода откройте файл index.html браузером.
Сравните полученный результат с представленным на рисунке.
Внешний вид страницы учебного интернет-ресурса
128
ПРИЛОЖЕНИЕ Е
ЛИСТИНГ CSS-КОДА УЧЕБНОГО САЙТА
1. Наберите код в Блокноте и сохраните с названием guap.css
в кодировке utf-8 в том же каталоге, в котором находится файл
index.html.
.logo:{
float:left;
padding-top:0px;
margin-left:10px;
padding-left:10px;
padding-bottom:0px;
margin-top:10px;
margin-bottom:40px;
}
body{
width: 911px;
height: 1300px;
margin:20px;
padding:20px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:0.8em;
background-color: white;
color:#333333;
float:center;
margin: 0 20%;}
.top-menu {
color:#003399;
font:12px small-caps;
float: right;
padding-top: 25px;
padding-bottom: 10px;
}
.top-menu ul {
color:#003399;
list-style-type: none;
}
.top-menu ul li {
color:#003399;
129
float: left;
margin-left: 15px;
}
.top-menu ul li a {
color:#003399;
font-weight:bold;
border-left:2px solid #003399;
color: #003399;
text-decoration: none;
padding-left:10px;
padding-right:40px;
padding-top:10px;
padding-bottom:10px;
margin-top:28px;
margin-bottom:38px; }
.top-menu a:hover {
text-decoration: none;
color:#339900 ;
border-left:2px solid #339900;
}
.left-menu a{
color:#003399;
background-image:url(‘images/markerLeftMenuBlue.png’);
background-repeat:no-repeat;
background-position:left;
}
.left-menu{
float:left;
color:#003399;
text-align:top;
font:18px ;
padding-bottom:10px;
padding-left:0px;
margin-left:0px;
width:280px;
}
.left-menu>ul>li{
color:#003399;
border-bottom:1px solid #CCCCCC;
padding:4px;
130
text-decoration:none;
list-style-type:none;
}
.left-menu ul li a {
color:#003399;
font-weight:bold;
color: #003399;
text-decoration: none;
padding-left:20px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
margin-top:28px;
margin-bottom:38px;
}
.left-menu a:hover {
text-decoration: none;
color:#339900 ;
background-image:url(‘images/markerLeftMenuGreen.png’);
background-repeat:no-repeat;
background-position:left; }
.poisc{
margin-top:40px;
margin-right:20px;
margin-left:30px;
}
.content-wrapper{
float:left;
}
table{
margin-top:10px;
}
.adress{
height: 10px;
color:white;
font-size:0.8em;
line-height:100px;
padding:20px;
}
.green{
131
list-style-image:url(‘images/markerListContentGreen’);
padding-bottom:5px;
color:#339900;
}
.footer{
font:11x;
height: 30px;
border-top:2px solid #CCCCCC;
margin:0px;
padding:10px;
}
h1{
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}
header img{
margin-left: 0px;
}
header p{
position: absolute;
top: 280px;
left: 70px;
bottom: 50px;
color: #FFFFFF
}
.img{
padding-top:40px;
132
Библиографический список
1. Прохоренок, Н.А. HTML, JavaScript, PHP и MySQL. Джентельментский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. –
СПб.: БХВ-Петербург, 2015. – С. 768.
2. Дронов В.А. HTML5, CSS3 и Web 2.0. Разработка современных
веб-сайтов / В.А. Дронов. –СПб.: БХВ-Петербург, 2016. – С. 416.
3. Хоган Б.. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган... – СПб.: Питер, 2012. – С. 320.
4. Фещенко, А.В. Основы сайтостроения. Учебно-методический
комплекс А.В. Фещенко. URL: https://ido.tsu.ru/other_res/ep/sait_
umk/ (дата посещения 15.04.2018).
5. Мержевич, В. HTML и CSS на примерах / В. Мержевич. – СПб.:
БХВ-Петербург, 2005. – С.448.
6. Ершов, В.Е. Особенности использования SWOT-анализа при
применении social media marketing в системе продвижения бренда /
В.Е. Ершов // Интернет-журнал «НАУКОВЕДЕНИЕ». – 2015. – Том 7,
№ 3. URL: http://naukovedenie.ru/PDF/189EVN315.pdf
7. Никсон, Р. Создаем динамические веб-сайты с помощью PHP,
MYSQL, JAVASCRIPT, CSS И HTML5 / Р. Никсон. – СПб.: Питер,
2015. – С. 688.
8. HTML academy: интерактивный портал по обучению
веб-разработке. – URL: https://htmlacademy.ru (дата посещения 15.04.2018).
9. Сайтостроение от «А» до «Я» HTML. – URL: https:// www.
internet-technologies.ru (дата посещения 15.04.2018).
10. Мержевич, В. Самоучитель HTML. – URL: https://webref.ru
(дата посещения 15.04.2018).
11. Интернет-ресурс по обучению HTML, CSS, JavaScript и jQuery. – URL: https://html5book.ru (дата посещения 15.04.2018).
12. Роббинс, Дж. HTML5. Карманный справочник / Дж. Роббинс. –
СПб.: Вильямс, 2016. – С. 192.
13. Клименко, Р. Веб-мастеринг на 100% / Р. Клименко. – СПб.:
Питер, 2015. – С. 512.
14. Разработка веб-сайтов. – URL: https://habrahabr.ru/hub/
webdev (дата посещения 15.04.2018).
133
СОДЕРЖАНИЕ
Введение..................................................................... 1. ПРОЕКТИРОВАНИЕ ИНТЕРНЕТ-РЕСУРСА................ 1.1. Классификация веб-сайтов.................................. 1.2. Проектирование структуры веб-сайта................... 1.2.1. Внутренняя структура веб-сайтов................ 1.2.2. Внешняя структура веб-сайта..................... 1.2.3. Программы для проектирования
внутренней структуры интернет-ресурса...... 1.3. Проведение анализа средств разработки
и проверки доменных имён интернет-ресурсов
одной предметной направленности....................... 1.4. Практикум по разделу 1...................................... 1.4.1. Практическая работа № 1. Классификация
сайтов..................................................... 1.4.2. Практическая работа № 2. Разработка
концепции веб-ресурса.............................. 1.4.3. Практическая работа № 3. Экспертиза
веб-ресурсов............................................. 1.4.4. Практическая работа № 4. Проектирование
логической структуры веб-ресурса.............. 2. Язык гипертекстовой разметки HTML......................... 2.1. Специализированные приложения
для работы веб-программиста.............................. 2.2. Введение в язык гипертекстовой разметки HTML... 2.3. Структура HTML-документа................................ 2.4. Форматирование документов............................... 2.5. Списки на веб-странице...................................... 2.6. Связывание текста и документов гиперссылками... 2.7. Добавление изображений в веб-документ............... 2.8. Создание карты-изображения.............................. 2.9. Таблицы на веб-странице.................................... 2.10. Практикум по разделу 2.................................... 2.10.1. Практическая работа № 5. Создание
комбинированных списков на веб-странице.
2.10.2. Практическая работа № 6. Создание
текстовой, голосовой и видеосвязи
через интернет...................................... 2.10.3. Практическая работа № 7. Создание ссылок
с якорем и всплывающих подсказок......... 134
3
4
4
7
7
11
12
15
16
16
18
20
22
30
30
32
34
40
49
57
62
69
70
74
74
76
78
2.10.4. Практическая работа № 8. Создания
карты-изображения на веб-странице........ 81
2.10.5. Практическая работа № 9. Создание
таблиц сложной формы на веб-странице... 83
3. Семантические элементы HTML5................................ 89
3.1. Контентная модель HTML5.................................. 89
3.2. Элементы для добавления аудиоконтента
на веб-страницу................................................. 91
3.3. Элементы для добавления видеоконтента
на веб-страницу................................................. 93
3.4. Формы на веб-странице....................................... 95
3.5. Группировка элементов на веб-странице................ 101
3.6. Практикум по разделу 3...................................... 106
3.6.1. Практическая работа № 10.
Добавление проигрывателя аудифайлов
на веб-страницу......................................... 106
3.6.2. Практическая работа № 11.
Добавление проигрывателя видеофайлов
на веб-страницу......................................... 108
3.6.3. Практическая работа № 12.
Добавление форм регистрации
на интернет-ресурс.................................... 109
Приложение А. Пример выполнения анализа сайтов......... 113
Приложение Б. Техническое задание
на разработку интернет-ресурса..................................... 115
Приложение В. Cписок тегов HTML5.............................. 118
Приложение Г. Список универсальных атрибутов HTML5. 125
Приложение Д. Листинг HTML-кода учебного сайта......... 126
Приложение Е. Листинг CSS-кода учебного сайта............. 129
Библиографический список........................................... 133
135
Учебное издание
Аграновский Андрей Владимирович Павлов Владислав Станиславович Турнецкая Елена Леонидовна ОСНОВЫ
ИНТЕРНЕТ-ПРОГРАММИРОВАНИЯ
Учебное пособие
Редактор Л. А. Яковлева
Компьютерная верстка Н. Н. Караваевой
Сдано в набор 18.06.18. Подписано к печати 28.10.18.
Формат 60×84 1/16. Бумага офсетная. Усл. печ. л. 7,9.
Уч.-изд. л. 8,5. Тираж 50 экз. Заказ № 413.
Редакционно-издательский центр ГУАП
190000, Санкт-Петербург, Б. Морская ул., 67
136
Документ
Категория
Без категории
Просмотров
22
Размер файла
4 819 Кб
Теги
agranovskiy
1/--страниц
Пожаловаться на содержимое документа