Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебное пособие (лабораторный практикум)
.pdf
МИНИCTEPCTBO НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ
РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«СЕВЕРО-КАВКАЗСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»
WEB-ТЕХНОЛОГИИ
УЧЕБНОЕ ПОСОБИЕ
(ЛАБОРАТОРНЫЙ ПРАКТИКУМ)
Направление подготовки
09.03.01 Информатика и вычислительная техника
Направленность (профиль) «Автоматизированные системы обработки
информации и управления»
Квалификация выпускника – бакалавр
Ставрополь
2019
УДК 004.77 (075.8)
ББК 22.18 я73
В 26
Печатается по решению
редакционно-издательского совета
Северо-Кавказского федерального
университета
д-р техн. наук, доцент Г. И . Л инец,
канд. пед. наук, доцент Ж. В. Игнатенко
В 26 Web-технологии: учебное пособие (лабораторный практи-
кум) / авт.-сост. С. В. Говорова. – Ставрополь: Изд-во СКФУ,
2019. – 163 с.
Пособие представляет лабораторный практикум, подготовленный в
соответствии с Федеральным государственным образовательным стандартом высшего образования. В нём рассматривается теория и практика реализации языка гипертекстовой разметки HTML и языка web-программирования JavaScript.
Предназначено для студентов, обучающихся по направлению
09.03.01 Информатика и вычислительная техника.
ст. преподаватель С. В. Го ворова
Рецензенты:
(АНО ВО СКСИ)
УДК 004.77 (075.8)
ББК 22.18 я73
Автор-составитель
© ФГАОУ ВО «Северо-Кавказский
федеральный университет», 2019
2
ПРЕДИСЛОВИЕ
Освоение дисциплины «Web-технологии» позволит будущему
бакалавру полноценно осуществлять свою профессиональную деятельность, в частности, обладать следующими компетенциями:
1. Способность осваивать методики использования программ-
ных средств для решения практических задач (ОПК-2).
2. Способность разрабатывать модели компонентов информа-
ционных систем, включая модели баз данных и модели интерфейсов "человек – электронно-вычислительная машина" (ПК-1).
Дисциплина занимается вопросами формирования фундаментальных знаний и основополагающих принципов использования
современных информационных технологий в области web-
технологий и web-программирования, привитие умений и навыков
использования данных знаний при работе в различных областях
применения информационных систем и технологий в современном
обществе.
Задачами дисциплины являются:
− изучение технологий взаимодействия индивидуального и
коллективного пользователя с мировыми информационными
ресурсами;
− изучение технологий создания web-сайта.
Дисциплина «Web-технологии» обеспечивает изучение дисциплин: «Web-приложения баз данных», «Программирование мобильных устройств», «Программированиев компьютерных сетях»,
практика по получению первичных профессиональных умений и
навыков, в том числе первичных умений и навыков научноисследовательской деятельности, «Технологии и методы программирования», «Программирование на языке высокого уровня, «Информационные войны в сети Интернет».
Лабораторный практикум представляет материалы по организации лабораторных занятий по направлению 09.03.01 Информатика и вычислительная техника (квалификация «Бакалавр»).
3
1. ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА HTML.
ОСНОВНЫЕ ПОНЯТИЯ
Цель работы: ознакомить студентов с основными понятиями языка
HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физическими и логическими
стилями, приобретение навыков создания простейших статических Webдокументов.
Знания, умения и владения, приобретаемые обучающимися в результате освоения темы, в рамках формируемых компетенций:
знать: Обладает знаниями для использования программных средств
для решения практических задач, знаниями для разработки модели компонентов информационных систем, включая модели баз данных и модели
интерфейсов «человек – электронно-вычислительная машина»;
уметь: Умеет осваивать методики использования программных
средств для решения практических задач, умеет разрабатывать модели
компонентов информационных систем, включая модели баз данных и модели интерфейсов «человек – электронно-вычислительная машина»;
владеть: Владеет способностью осваивать методики использования
программных средств для решения практических задач, разрабатывать модели компонентов информационных систем, включая модели баз данных и
модели интерфейсов «человек – электронно-вычислительная машина».
Теоретическая часть
Основы языка разметки гипертекста – HTML
Базовым элементом языка разметки гипертекста является –
ТЕГ (дескриптор, маркер). Тег всегда заключен между скобками
< > и имеет следующий вид: <ТЕГ параметр1="ЗНАЧЕНИЕ" ... параметрN="ЗНАЧЕНИЕ''>
Теги бывают одиночными и контейнерными. Контейнером
называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.
<ТЕГ> Содержимое контейнера </ТЕГ>
Открывающий тег служит для указания программе-браузеру
начала какого-либо объекта или задания свойств объектов, помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения
свойств, заданных в открывающем теге. Параметры (атрибуты) тега задают значения свойств данного объекта или объектов, поме-
4
щенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.
HTML документ представляет собой обычный текстовый
файл, содержащий маркированный тегами форматирования текст,
а также заданные специальными тегами ссылки на графические и
прочие файлы мультимедиа, ссылки на другие документы HTML и
ресурсы Internet.
Браузер (Browser) – программа для просмотра Web-страниц.
Структура HTML-документа
Документ HTML начинается открывающим тегом <HTML> и
заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части
HTML документа: заголовок, заключенный в контейнер <HEAD>...
</HEAD> и тело документа в контейнере <BODY>...</BODY>. Таким образом, структура простого HTML документа выглядит примерно так:
Структура HTML-документа
<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN" >
<HTML>
<HEAD> Заголовок документа </HEAD>
<BODY> Тело документа </BODY>
</HTML>
Объявление <!DOCTYPE>
Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически). Он сообщает серверу WEB способ
обработки документа и то, какие дескрипторы могут находиться на
странице, хотя чаще всего он игнорируется браузерами. Поэтому
его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL">
Здесь текст определяет версию HTML, а URL позволяет браузерам пользователей загрузить DTD, например,:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://WWW.W3.ORG/TR/REC-HTML40/strict.dtd">
Тэг <HTML>
Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ. Как и <!DOCTYPE> тэги
<HTML> и </HTML> – не являются строго обязательными. Но,
5
все-таки, их использование является правилами хорошего тона т.к.
браузеры у пользователей могут быть всякие и не известно –
насколько корректно они визуализируют такой код.
В дополнение к обязательной структуре настоятельно рекомендуется вставлять различные структурные детали.
Каждый HTML документ должен содержать основную информацию о его происхождении.
Если Вы стремитесь к тому, чтобы люди отыскали Ваш документ по соответствующим связям, важность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет Ваш документ с помощью, например, поискового
ресурса AltaVista, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл HTML должен
предоставлять самую основную информацию (или связи к информации) о его происхождении и природе. Например, в собрании
книгоподобных документов, разделенных на малые файлы, каждый
файл должен содержать, по крайней мере, связь к "первой странице" "книги" (home page).
О происхождении документа должна быть представлена, по
крайней мере, следующая информация:
Автор документа, имеющий уникальное имя. При этом должна
быть задана связь с домашней страницей автора. Если у документа
несколько авторов, определите их всех, а также роль каждого из
них; например, ведущего автора, редактора, действующего спонсора, а также лиц, формально отвечающих за документ. Дата создания документа или его последней модификации, или и та и другая.
Представляемая дата должна быть понятна во всем мире; в частности, название месяца лучше писать словом, а не цифрой. Контекст
документа и его статус, например: часть официальной документации компании об одном из ее продуктов, или часть личной информации о хобби автора, или что-то другое. Адрес (URL) документа.
Такая информация зачастую чрезмерна, однако она может быть
очень полезной, когда кому-то нужна копия именно того документа, который он нашел. Лучше не полагаться на броузер (и пользователя), добавляющих такую информацию, когда сделана копия
документа.
6
Элемент <BODY>
Элемент <BODY> предназначается для выделения той части
документа, которая будет визуализирована для пользователя. Он
имеет как начальный, так и конечный теги. Начальный тег
<BODY> может иметь несколько атрибутов.
Вложенные атрибуты элемента <BODY>:
– BACKGROUND Атрибут задает графическое изображение,
которое как черепица заполнит фон документа. Синтаксис: <BODY
BACKGROUND="(URL)(путь) имя файла">
– BGCOLOR Этот атрибут задает цвет фона документа при
помощи шестнадцатеричных значений интенсивности цветов RGB,
или при помощи строчного литерала, соответствующего названию
цвета.
Синтаксис: <BODY BGCOLOR="#ff0000"> или <BODY
BGCOLOR="RED">
– TEXT Этот атрибут задает используемый по умолчанию
цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным. Синтаксис: <BODY TEXT="цвет">
– LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис:
<BODY LINK="цвет">
– ALINK Этот атрибут задает цвет активной гиперссылки, он
меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. · Синтаксис: <BODY ALINK="цвет">
– VLINK Этот атрибут задает цвет посещенной гиперссылки,
не желательно задавать ему цвет фона и цвет атрибута LINK по
понятным причинам. Синтаксис: <BODY VLINK="цвет">
Заголовочные тэги
Элемент <HEAD> </HEAD> определяет заголовок документа.
BASE – базовый, основной URL Цель Задание базового URL
для относительных URL в документе (например, в атрибутах HREF
элемента A). Этот элемент часто используется для отображения
документов. Например: <BASE href="http://foo.com/index.html">.
Элемент BASE непосредственно не отображается в документе.
Основной синтаксис <BASE HREF="URL">. Так как в документе
допускается только один элемент BASE, Вы не можете иметь различные базовые URL в различных частях файла HTML. При отсут-
7
ствии элемента BASE в документе URL самого документа становится базовым в пределах документа.
META – метаинформация
Используется для задания метаинформации (информации о документе), т.е. пар имя/значение, описывающих свойства документа,
например, авторство, истечение даты, список ключевых слов и т.д.
Типичное отображение Элементы META не влияют на отображение
самого документа. Они могут давать некоторый эффект при представлении информации о документе, например, в верхнем окне броузера или в ответе на запрос от поискового средства.
Cинтаксис:
<META NAME=имя элемента метаинформации
CONTENT=содержимое информации> или
<META HTTP-EQUIV=имя элемента метаинформации
CONTENT=содержимое информации>.
Примеры:
<META NAME=DESCRIPTION CONTENT= "An extensive
guide to writing HTML 3.2 documents, with ../../examples and practical
advice.">
<META NAME=KEYWORDS CONTENT= "structural HTML,
logical markup">.
Тег META влияет на индексирование документа, когда он
включается в базу данных поискового сервера.
TITLE – "внешний" заголовок (титул)
Используется для задания обязательного "внешнего" заголовка
документа.
Титул может выводиться в окне заголовка программы просмотра; в списке результатов поиска, возвращаемых поисковым
сервером; в горячем списке, определяемом пользователем; списке
истории и т.д.
Основной синтаксис <TITLE>последовательность символов</TITLE>
В TITLE можно использовать escape последовательности,
например, < (для <) и ä (для д), но никакие теги HTML не
разрешены, поэтому Вы не можете задавать в заголовке размеры
шрифтов или выделения.
Примеры <TITLE>A study of population dynamics</TITLE>
Примечания Написать хорошее заглавие – очень важно, так как
8
списки результатов поиска, возвращаемые поисковым сервером,
могут использовать его.
Комментарии
Файл HTML может содержать комментарии, дающие пояснения для человека, читающего HTML код. Комментарии не влияют
каким-либо образом на представление документа, т.е. они игнорируются бро-узером. Вы можете начать комментарии с четырехсимвольной последовательности <!- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью -> (два дефиса, знак "больше чем"). Например:
<!- Написано Иваном Ивановым ->.
Пример 1
<HTML>
<HEAD>
<TITLE> моя первая страница </title>
<META NAME="AUTHOR" CONTENT=" SIDOROV SIDOR">
<META NAME="KEYWORDS" CONTENT=" Животные,
природа, фауна ">
</head>
<BODY>
Здравствуйте, это моя первая страница.
<!--<PRE> КОММЕНТАРИЙ </PRE>-->
<BR>
Добро пожаловать! :)
</body>
</html>
<comment>...</comment>
Текст комментария. В любом языке программирования есть
конструкции, позволяющие создавать произвольные ремарки.
HTML в этом смысле – не исключение. Текст, помещенный внутри
COMMENT, игнорируется браузером. COMMENT может располагаться в любом месте кода Web-страницы. Комментарий должен
быть отделен от основного текста.
Существует, правда, одно ограничение: внутри комментария
не должны располагаться другие элементы. Так должно быть, разумеется, только в том случае, когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора.
Если в комментарии будет присутствовать другой элемент, то его
9
содержимое будет выведено на экран, отформатированное соответствующим образом.
Существует еще один способ обозначения комментария. Он
заключается в использовании восклицательного знака и обрамлении текста комментария двойными тире.
Пример 2
<!--Строка комментария-->
<!--Комментарий--Не комментарий--Снова комментарий-->
<HTML>...</html>
Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML
является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе,
этот элемент можно рассматривать как формальность. Он имеет
атрибуты version, lang и dir, которыми в данном случае мало кто
пользуется, и допускает вложение элементов HEAD, BODY и
PLAINTEXT, определяющих общую структуру Web-страницы.
Естественно, что конечным тегом </html> заканчиваются все гипертекстовые документы.
<HEAD>...</head>
Информация о документе, которая не выводится на экран,
называется заголовком. Так же как и HTML, HEAD служит только
для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускает вложение элементов
TITLE, ISINDEX, BASE, МЕТА, LINK, NEXTID.
<TITLE>...</title>
Элемент для размещения заголовка Web-страницы. Строка
текста, расположенная внутри, отображается не в документе, а в
заголовке окна браузера. Эта особенность часто используется для
организации поиска в WWW. Поэтому авторы, создающие Webстраницы, должны позаботиться о том, чтобы строка внутри TITLE,
не будучи слишком длинной (не более 64 символов), достаточно
точно отражала назначение документа.
<META>
Этот элемент содержит служебную информацию, которая не
отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый
элемент МЕТА содержит два основных атрибута, первый из кото-
10
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]