- •Государственная морская академия имени адмирала с. О. Макарова
- •Д. Н. Фомин основы разработки веб-страниц
- •Введение
- •1. Общие вопросы разработки веб-страниц
- •1.1. Цели и задачи создания веб-страниц
- •1.2. Основные понятия и пояснения к ним
- •1.3. Основные элементы веб-страницы и файловая структура веб-сайта
- •1.4. Программное обеспечение рабочего места веб-мастера
- •1.4.1. Редактор html-страниц
- •1.4.2. Редакторы графики
- •1.4.3. Браузеры
- •1.4.4. Вспомогательные программы
- •2. Непосредственная работа с html-кодом
- •2.1. Структура html-документа
- •2.2. Основные тэги
- •2.2.1. Заголовки
- •2.2.2. Абзацы и переводы строки
- •2.2.4. Вставка изображений на веб-страницу
- •2.2.5. Маркированные и нумерованные списки
- •2.2.6. Изменение шрифта
- •2.2.7. Горизонтальная линия
- •2.2.8. Комментарии
- •2.3. Вставка специальных символов в html-документ
- •2.4. Таблицы в html
- •2.4.1. Тэги для таблиц, строк и ячеек
- •2.4.2. Таблицы с объединёнными ячейками
- •2.5. Каскадные таблицы стилей (css)
- •2.5.1. Вводные замечания о таблицах стилей
- •2.5.2. Синтаксис таблиц стилей
- •2.5.3. Наследование
- •2.5.4. Контекстные селекторы
- •2.5.5. Способы включения стилевых таблиц в html-документ
- •2.5.6. Приоритет применения таблиц стилей
- •2.5.7. Классы в стилевых таблицах
- •2.5.8. Комментарии в стилевых таблицах
- •2.5.9. Оформление гипертекстовых ссылок
- •2.6. Свободно позиционируемые элементы
- •3. Визуальный редактор веб-страниц Microsoft FrontPage
- •3.1. Интерфейс Microsoft FrontPage
- •3.2. Ввод и редактирование текста в Microsoft FrontPage
- •3.2.1. Базовые средства редактирования
- •3.2.2. Средства отмены и возврата действий
- •3.2.3. Ввод символа, отсутствующего на клавиатуре
- •3.3. Форматирование текста
- •3.3.1. Базовые средства форматирования
- •3.3.2. Списки
- •3.3.3. Вставка изображений
- •3.4. Создание таблиц в Microsoft FrontPage
- •3.4.1. Создание таблицы при помощи панели инструментов.
- •3.5. Каскадные таблицы стилей в Microsoft FrontPage
- •3.5.1. Создание внешней стилевой таблицы
- •3.5.2. Создание внутренней стилевой таблицы
- •3.5.3. Определение стиля внутри тэга
- •3.5.4. Создание пользовательских классов
- •4. Язык сценариев JavaScript
- •4.1. Простейшие сценарии JavaScript
- •4.2. Типы данных в JavaScript
- •4.2.1. Строки
- •4.2.2. Числа
- •4.2.3. Булевы значения
- •4.2.4. Особые типы данных
- •4.3. Переменные в JavaScript
- •4.3.1. Простые переменные
- •4.3.2. Переменные-массивы
- •4.4. Выражения, условия и операции
- •4.4.1. Арифметические операции
- •4.4.2. Операции сравнения
- •4.4.3. Логические операции
- •4.4.4. Операция присваивания
- •4.4.5. Прочие операции
- •4.5. Основные операторы JavaScript
- •4.5.1. Оператор ветвления if…else
- •4.5.2. Операторы цикла
- •4.5.3. Прочие операторы
- •4.6. Функции в JavaScript
- •4.6.1. Объявление и вызов функций
- •4.6.2. Вызов функций JavaScript по событию
- •4.6.3. Передача параметров в функцию и возврат значений из функции
- •4.7. Использование объектов в JavaScript
- •4.7.1. Общие понятия об объектах в JavaScript
- •4.7.2. Использование объекта Math
- •4.7.3. Использование объекта Date
- •4.7.4. Использование объекта String
- •4.8. Использование объектной модели документа
- •4.8.1. Использование объекта document
- •4.8.2. Строки ввода и кнопки
- •4.9. Способы подключения сценария к веб-странице
- •4.9.1. Размещение сценария в отдельном файле
- •4.9.2. Размещение сценария внутри тэга
- •4.10. Примеры анимации на веб-страницах
- •4.10.1. Часы на веб-странице
- •4.10.2. Обратный счётчик
- •4.10.3. Движущийся текст
- •4.10.4. Изменение цвета текста под указателем мыши
- •4.10.5. Смена изображения под указателем мыши
- •4.10.6. Переливающийся текст
- •Литература
- •Приложение 1.
- •Приложение 3. Часто используемые свойства стилевых таблиц
- •Приложение 2. Часто используемые символьные подстановки
1. Общие вопросы разработки веб-страниц
1.1. Цели и задачи создания веб-страниц
В настоящее время размещение информации в сети Интернет необходимо широкому кругу пользователей. World Wide Web сегодня – одна из наиболее интересных и быстро развивающихся технологий, которую многие организации и частные лица используют в своей деятельности. Основной целью создания веб-сайта является донесение информации до широкого круга читателей.
Веб-сайты можно условно разделить на личные (созданные человеком в личных целях) и корпоративные (созданные предприятиями и организациями для решения своих задач). Предприятия и организации создают веб‑сайты с целью рекламы своих товаров и услуг, поиска потенциальных заказчиков. Личные сайты могут создаваться в целях поиска работы, привлечения внимания работодателей, демонстрации собственных достижений, обмена полезной информацией, общения по интересам.
1.2. Основные понятия и пояснения к ним
Сформулируем определения основных понятий веб-технологии, необходимые для дальнейшего изложения [6].
World Wide Web (сокращённо WWW) – глобальная информационная система, связывающая между собой множество документов (веб-страниц), размещённых на веб-серверах по всему миру.
Веб-страница – гипертекстовый документ, размеченный с помощью специальных элементов – тэгов языка HTML. Основное отличие этих гипертекстовых документов от хорошо всем известных текстовых состоит в том, что они могут включать ссылки на другие аналогичные документы.
Веб-браузер (англ. Web browser) – программа-клиент, с помощью которой пользователь получает доступ к системе WWW (к указанной пользователем веб-странице). Веб-браузер осуществляет запрос к веб-серверу по протоколу HTTP (англ. HyperText Transfer Protocol), определяющему правила взаимодействия клиента и сервера при передаче гипертекстовых документов, и затем отображает полученную страницу на экране компьютера пользователя. Современные популярные веб-браузеры:
Microsoft Internet Explorer (версии 5.0, 5.5 и 6.0),
Netscape Navigator (версии 6 и 7),
Opera (версии 7, 8 и 9),
Mozilla Firefox (версии 1.0 и 1.5).
Веб-сервер (более точно – HTTP-сервер, реализующий поддержку протокола HTTP) – специальная программа, установленная на общедоступном (имеющем постоянное подключение к сети Интернет) компьютере. Веб-сервер обеспечивает хранение веб-страниц в виде файлов, структурированных определённым образом, и обработку запросов от веб-браузеров с целью поиска и (или) формирования веб-страниц с последующей их отправкой клиентам. Современные популярные веб-серверы:
Apache – устанавливается в основном на ОС Unix и ей подобные (Linux, FreeBSD), но существует и версия для Windows. Используется большинством веб-провайдеров. Загрузить Apache можно бесплатно с сайта http://www.apache.org/.
Microsoft Internet Information Server (IIS) – устанавливается на ОС Windows. Используется чаще в качестве отдельно стоящего веб-сервера, находящегося непосредственно в организации.
IP-адрес представляет собой последовательность из четырёх чисел, разделённых точками. Каждый компьютер, подключённый к Интернету (так называемый хост), имеет уникальный IP-адрес, однозначно определяющий этот компьютер в сети. Именно по IP-адресу происходит поиск и взаимодействие устройств. Запомнить такие адреса довольно трудно, поэтому была разработана доменная система имен (Domain Name System, DNS), которая позволяет поставить в соответствие IP-адресу символьное имя. Например, IP-адрес сервера, на котором находится веб-сайт известной поисковой системы «Яндекс»: 213.180.204.11. Этому IP-адресу соответствует доменное имя www.yandex.ru.
Доме́нное имя сервера (англ. domain name) – уникальный идентификатор, который назначается определённому IP-адресу. Доменное имя даёт возможность обращаться к веб-серверу по имени типа www.mysite.ru вместо числового IP-адреса. Для размещения веб-сайта в Интернете необходимо наличие доменного имени. Для этого его надо зарегистрировать на сайте, предоставляющем эту услугу.
Веб-сайт – это набор веб-страниц, относящихся к одной фирме или одному пользователю. Автора веб-сайта называют веб-мастером.
Uniform Resource Locator, URL (единообразный идентификатор ресурса) – уникальный адрес, определяющий местоположение веб-страницы в World Wide Web. Каждая страница имеет свой адрес. Примеры URL:
http://www.gma.ru/ – HTTP-сервер должен найти и отправить клиенту (браузеру) стартовую страницу сайта ГМА им. адм. С.О. Макарова;
http://www.gma.ru/history.html – HTTP-сервер должен найти и отправить клиенту (браузеру) файл history.html – страницу сайта ГМА им. адм. С.О. Макарова, посвящённую истории академии.
URL включает:
Метод доступа к ресурсу, т.е. протокол доступа (HTTP – наиболее часто используемый метод доступа к HTML-документу в сети).
Доменное имя сайта (имя хост-машины), в вышеприведённых примерах – www.gma.ru.
Полный путь к файлу на сервере (может отсутствовать, в этом случае пользователь запрашивает, а сервер отправляет стартовую страницу веб-сайта).
