IkxJ2A64Jt

МИНОБРНАУКИ РОССИИ

–––––––––––––––––––––––––––––––––––––––––––

Санкт-Петербургский государственный электротехнический университет «ЛЭТИ» им. В. И. Ульянова (Ленина)

–––––––––––––––––––––––––––––––––––––––––––

РАЗРАБОТКА ВЕБ-РЕСУРСОВ

С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА 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

<тег1><тег2>информация</тег2></тег1>

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