IkxJ2A64Jt
.pdfМИНОБРНАУКИ РОССИИ
–––––––––––––––––––––––––––––––––––––––––––
Санкт-Петербургский государственный электротехнический университет «ЛЭТИ» им. В. И. Ульянова (Ленина)
–––––––––––––––––––––––––––––––––––––––––––
РАЗРАБОТКА ВЕБ-РЕСУРСОВ
С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА HTML
Методические указания к лабораторным работам
Санкт-Петербург Издательство СПбГЭТУ «ЛЭТИ»
2015
УДК 004(075)
Разработка веб-ресурсов с использованием языка HTML: методич. указания к лабораторным работам / сост.: А. А. Армашев, А. В. Шевченко. СПб.: Изд-во СПбГЭТУ «ЛЭТИ», 2015. 31 с.
Рассматриваются вопросы разработки веб-приложений с использованием языка разметки гипертекста HTML.
Предназначено для студентов, обучающихся по направлению подготовки магистров 140400.68 «Электроэнергетика и электротехника».
Утверждено редакционно-издательским советом университета
в качестве методических указаний
© СПбГЭТУ «ЛЭТИ», 2015
2
Введение
Веб-технологии как составная часть интернет-технологий – это сравнительно молодая, но очень динамично развивающаяся область науки и техники. Появление в 1970-х гг. универсального протокола, объединяющего неоднородные сети в одну глобальную сеть, позволило создать простые и дешевые средства доступа к информационным ресурсам.
Внастоящее время веб-технологии применяются в различных областях человеческой деятельности и их востребованность продолжает расти. Задуманный в девяностые годы как средство общения ученых разных стран, Интернет очень быстро вырос и стал мотором бизнеса, науки и социальных процессов. Широкое распространение получили средства личного общения через всемирную сеть, такие как социальные сети, блоги, форумы, голосовая
ивидеосвязь. С каждым годом появляется все больше различных интернетресурсов, предоставляющих социальные услуги (запись на прием к врачу, оплата коммунальных услуг, покупки в интернет-магазинах и т. д.), что создает существенную экономию времени пользователей.
Использование веб-технологий в промышленности позволяет не только наладить работу внутри одного предприятия, но и быстро и эффективно взаимодействовать с удаленными подразделениями различных организаций. Средства удаленной диагностики, видеонаблюдение и мониторинг объектов в той или иной мере используют веб-технологии. Поэтому специалисты в электротехнике и автоматизации процессов должны иметь хорошие знания в этой области.
Настоящее издание в силу своего объема охватывает ограниченный ряд вопросов веб-технологий. В разд. 1 рассматриваются история и основы вебтехнологий (модель взаимодействия клиент– сервер, применяемые протоколы, адресация ресурсов).
Второй раздел посвящен программированию разметки веб-страниц с использованием языка HTML. Рассматриваются основные элементы разметки страниц – теги и их параметры. Показаны примеры влияния различных элементов HTML на вид страницы.
Вразд. 3 раскрыто применение каскадных листов стилей (CSS) для придания страницам сайта единообразия. Даются примеры настройки стилей различных элементов страниц. В последнем разделе затрагиваются вопросы программирования динамики страниц с использованием языка JavaScript.
3
1.ОСНОВЫ ВЕБ-ТЕХНОЛОГИЙ
В1945 г. Вэннивар Буш разработал концепцию расширения памяти человека с помощью технических устройств и индексации информации для ее быстрого поиска. В 1989 г. Тим Бернерс-Ли создал первые в мире веб-сервер
ивеб-клиент, изобрел идентификаторы URI, протокол HTTP и язык HTML. Эти технологии были использованы для создания гипертекстовых документов, связанных между собой гиперссылками. Развитие этого проекта привело к образованию Всемирной паутины.
Всемирная паутина (англ. World Wide Web), или веб, – распределенная система, предоставляющая доступ к связанным между собой документам. Эти документы размещаются на различных компьютерах, подключенных к сети Интернет. Большинство ресурсов Всемирной паутины представляет собой гипертекст. Основным коммуникационным протоколом является HTTP (HyperText Transfer Protocol – гипертекстовый протокол передачи), обеспечивающий связь между информационными ресурсами (веб-страницами) посредством гиперссылок – специальных указателей на адрес документа.
Веб-страница – это минимальная логическая единица Всемирной паутины, которая представляет собой документ, однозначно идентифицируемый своим уникальным URL (Unified Resource Locator). Веб-сайтом называется набор тематически связанных веб-страниц, находящихся на одном сервере и принадлежащий одному владельцу. В частном случае сайт может быть представлен одной единственной страницей. Всемирная паутина является совокупностью всех веб-сайтов.
Веб-технологии строятся на взаимодействии через HTTP-протокол вебклиентов и веб-серверов, находящихся в различных узлах глобальной сети. HTTP является протоколом прикладного уровня передачи данных, надстройкой над протоколами TCP-IP и UPD-IP. Программы-клиенты (их еще называют браузерами) запрашивают информационные ресурсы с помощью URLзапросов и получают в ответ HTML-страницы, которые интерпретируются браузером и отображаются на экране (рис. 1.1).
Передаваемый URL содержит следующую информацию: применяемый протокол; адрес сервера; номер порта (если отличается от стандартного); имя файла страницы или программы; список параметров.
4
Глобальная сеть с протоколом TCP-IP
|
|
|
|
HTTP-протокол |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
Веб-клиент |
|
|
|
|
|
|
Веб-сервер |
|
|
|
|
|
|||||||
|
|
|
|
URL-запросы |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Х-клиент |
|
|
|
|
|
|
Х-клиент |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
Х-клиент |
|
|
|
|
|
|
Х-клиент |
|
|
|
|
|
|
|
|
|
HTML- |
|
|
Веб-контент |
|
|
|
|
Веб-приложения |
|
|
|
|
||||
|
|
|
|
|
|
|
|
|||||||||||||
|
|
|
|
страницы |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Персональный компьютер |
|
|
|
|
|
|
|
Сервер |
||||||||||||
|
|
|
|
|
|
|
|
|||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Рис. 1.1
Обмен сообщениями происходит по схеме «запрос– ответ». HTTP-со- общения состоят из текстовых строк и имеют общую структуру для запросов
иответов, включающую:
∙стартовую строку (Starting line), содержащую метод отправки и URL;
∙заголовки (Headers), определяющие параметры передачи;
∙тело сообщения (Message Body), непосредственно содержащее данные.
Элемент |
Запрос |
Ответ |
|
|
|
Стартовая |
Формат запроса: метод/ URL |
Формат ответа: версия протокола/код |
строка |
|
состояния/сообщение |
|
Пример: GET index.html HTTP/1.0 |
Пример: HTTP/1.0 200 OK |
Заголовки |
DNS веб-сервера |
Время отправления |
|
Пример: Host: www.google.ru |
Пример: Date: 1 Jan 2015 00:00:00 |
|
Используемый браузер |
Используемый веб-сервер |
|
Пример: User-agent:Opera 12.0 |
Пример: Server: Apache/1.3.0(Unix) |
|
Предпочитаемый язык |
Количество байт в теле сообщения |
|
Пример: Accept-language:ru |
Пример: Connect-Length: 1234 |
|
Режим соединения |
Режим соединения |
|
Пример: Connection: close |
Пример: Connection: close |
Пустая строка |
|
|
|
|
|
Тело со- |
Ключевые слова для поисковой ма- |
Текст запрашиваемой страницы |
общения |
шины или файлы для передачи на |
|
|
сервер |
|
|
|
|
Тело сообщения обязательно должно отделяться от заголовков пустой строкой. Форматы стартовых строк и заголовков приведены в таблице.
HTTPS (HyperText Transfer Protocol Secure) – это расширение протоко-
ла HTTP с применение методов шифрования. Он используется для создания защищенных соединений.
5
Веб-программирование заключается в подготовке страниц (статических) или написании приложений, формирующих страницы в момент запроса (динамических). Для подготовки веб-страниц широко используются следующие технологии [1]–[3]:
∙HTML – язык разметки страниц;
∙CSS – каскадные листы стилей;
∙JavaScript – язык программирования на веб-страницах.
HTML, CSS, JavaScript – являются языками, с помощью которых можно создавать веб-сайты.
Объектная модель документа (DOM), является стандартным способом представления веб-страниц с помощью набора объектов. Она содержит набор объектов для содержимого документа. При написании приложений для поддержки межбраузерной переносимости необходимо придерживаться стандар-
тов DOM.
Как видно из вышесказанного, все элементы веб-технологий тесно взаимосвязаны. Понимание этого факта позволит легче осознать назначение того или иного механизма, применяемого при создании веб-приложений.
6
2. ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА
2.1. Общие сведения
HTML (HyperText Markup Language) – язык разметки гипертекста,
предназначенный для создания веб-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой совокупность тегов, с помощью которых можно описать структуру документа, однако окончательное визуальное представление информации зависит от используемого браузера и может различаться в разных браузерах.
Тег (tag) HTML определяет, каким образом отобразить пользователю информацию, содержащуюся внутри этого тега. Тег всегда имеет открывающую часть и может иметь тело и закрывающую часть. Открывающая часть состоит из символа «<», имени тега и символа «>». Закрывающая часть отличается от открывающей наличием символа «/» между символом «<» и именем тега. Информация, заключенная между открывающей и закрывающей частью, называется телом тега.
<имя тега> тело тега </имя тега>
Теги могут быть заключены друг в друга, при этом информация будет выведена пользователю с учетом всех тегов внутри которых она заключена. Рекомендуется закрывать теги в последовательности обратной последовательности их открытия.
Рекомендуется:
Не рекомендуется: <тег1><тег2>информация</тег1></тег2>
Теги могут содержать различные атрибуты, которые записываются в открывающей части тега через пробел после его имени. Атрибуты имеют имя и значение и записываются следующим образом:
<тег1 атрибут1=значение1 атрибут2=значение2> информация </тег1>
Атрибуты могут быть как общими для всех тегов, так и уникальными конкретного тега или группы тегов.
Регистр тегов и атрибутов в HTML не имеет значения.
Для того чтобы браузер понял, что файл является не просто текстовым, а HTML-документом, файл должен иметь расширение *.html.
7
2.2. Структура HTML-страницы
Для создания структуры страницы используются теги: html, head и body. Тег html обозначает начало и конец текста, который браузер должен интерпретировать как HTML-документ.
Тег head – заголовочный и предназначен для указания служебной информации, не выводящейся непосредственно в окно браузера, а также для подключения различных функций. Наиболее часто в теге head используется тег title, служащий для задания заголовка сайта. Этот заголовок будет виден на вкладке браузера либо, если браузер не поддерживает вкладки, в заголовке окна браузера.
В теле тега body помещается вся информация, отформатированная тегами и предназначенная для вывода в окно браузера.
Код простейшей HTML-страницы представлен ниже.
<html>
<head>
<title>Заголовок сайта.</title> </head>
<body>
Текст на странице. </body>
</html>
2.3. Служебные символы, пробелы и перевод строки
Под служебными понимают такие символы, которые имеют особое значение для браузера, вследствие чего обрабатываются им по специальному алгоритму.
В качестве примера служебного символа приведем знак «<»: он будет указывать браузеру на начало тега, хотя в математических выражениях он необходим для записи неравенств.
Кроме символа «<», браузер считает служебными знак «больше» (>), двойные кавычки ("), одинарные кавычки (') и амперсанд (&). Эти символы зарезервированы и поэтому могут не отображаться при просмотре HTMLдокумента.
Для корректного отображения служебных символов была разработана специальная система [1]. Она позволяет записать в код некоторые символы, зарезервированные программой как служебные, следующим образом: амперсанд (&) + именная замена + точка с запятой (;)
8
Левую угловую скобку (<) можно записать как "<", правую (>) – ">", где "lt" и "gt" – именные замены для левой и правой скобок соответственно.
Кроме именной замены можно использовать десятичный или шестнадцатеричный код. Узнать эти коды можно с помощью приложения «Таблица символов», которое является стандартным приложением Windows.
Символ |
Название |
Именная замена |
Десятичный |
Шестнадцате- |
|
|
|
код |
ричный код |
< |
Левая угловая скобка |
< |
< |
< |
|
|
|
|
|
> |
Правая угловая скобка |
> |
> |
> |
|
|
|
|
|
& |
Амперсанд |
& |
& |
& |
|
|
|
|
|
" |
Двойные кавычки |
" |
" |
" |
|
|
|
|
|
' |
Одинарная кавычка |
|
' |
' |
|
|
|
|
|
|
Неразрывный пробел |
|
|
|
|
|
|
|
|
– |
Неразрывный дефис |
|
‑ |
‑ |
|
|
|
|
|
|
Мягкий дефис |
|
|
|
|
|
|
|
|
́ |
Знак ударения |
|
|
́ |
|
|
|
|
|
Браузер заменяет последовательно идущие пробелы, знаки табуляции и переводы строк на пробел. Благодаря этому можно писать структурированный и легко читаемый исходный код HTML-страниц.
Когда необходимо сделать несколько пробелов подряд, можно использовать неразрывные пробелы (см. таблицу).
Для перевода строки следует использовать тег br.
Ниже представлен пример кода, реализующего использование неразрывных пробелов и переноса строки.
<html>
<head>
<title>Заголовок сайта.</title> </head>
<body> Текст<br>на<br><br>нескольких<br><br><br>строках.
<br><br> Текст с
множесвом п
робелов. </body> </html>
9
Рис. 2.1
Тег pre выводит содержимое так, как записано в файле. Его удобно использовать, когда необходимо выводить большой объем текста, специфически оформленного пробелами и/или переводами строк.
2.4.Форматирование текста
ВHTML есть различные способы форматирования текста. Тег body имеет два атрибута – text и bgcolor, они отвечают за цвет текста и фон страницы соответственно. Так как тег body содержит в себе всю информацию на странице, выбранные цвета применятся ко всему тексту на странице.
Цвет текста можно задать одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов (red, blue и т. д.).
Цветовая модель, основанная на красной, зеленой и синей составляющих получила название RGB (red, green, blue). В HTML значения для данной цветовой модели задаются с помощью шестнадцатеричной системы: #ffcc00. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первая пара символов определяет красную составляющую цвета, вторая – зеленую, а третья – синюю. Каждый из трех цветов может принимать значения от 00 (черный) до FF (белый) [2].
Пример использования атрибутов тега body:
<body text=blue bgcolor=#cccccc>содержимое страницы</body>
Тег p определяет текстовый абзац и всегда начинается с новой строки. Абзацы текста, идущие друг за другом, разделяются между собой пустым
10