Лекции.Орг


Поиск:




Лабораторная работа №1. Создание простых WEB-страниц с фреймовой структурой

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ И МОЛОДЕЖНОЙ ПОЛИТИКИ

ХАНТЫ-МАНСИЙСКОГО АВТОНОМНОГО ОКРУГА – ЮГРЫ

БУ ВО «СУРГУТСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

 


Политехнический институт

Кафедра автоматики и компьютерных систем

 

 

Д.А. Кузин

Основы WEB -технологий

Методическое руководство по выполнению лабораторных работ

 

 

Сургут 2017

 

 

УДК 004.65(076.5)

ББК 32.937.26-018.2я73

К 89

Рекомендовано учебно-методическим советом

Политехнического института СурГУ

Опубликовано в авторской редакции с оригинал-макета,
подготовленного автором

 

Рецензент

кандидат технических наук доцент кафедры автоматики

и компьютерных систем П.В. Гришмановский

 

  К 89 Основы WEB -технологий: методическое руководство по выполнению лабораторных работ/ Д. А. Кузин; Сургут. гос. ун-т ХМАО – Югры. – Сургут: 2017. – 54 с.  
  Материал методического руководства предназначен для проведения лабораторных занятий по дисциплине «Основы WEB-технологий», направлений подготовки 090304 «Программная инженерия»и 270304 «Управление в технических системах». Методическое руководство содержит основные сведения по работе со средствами создания web-приложений с высокой степенью интерактивности, лабораторные задания, порядок выполнения лабораторных работ. Приводится большое количество примеров. Предназначен для студентов кафедры автоматики и компьютерных систем. Может использоваться при выполнении курсовых и дипломных проектов, связанных с разработкой информационных систем с web-интерфейсом. Для выполнения лабораторных работ требуется программное обеспечение Mozilla Firefox (с плагином HTTP Fox), notepad++, Denver  

УДК 004.65(076.5)

ББК 32.937.26-018.2я73

 

Сетевое электронное издание

 

© Кузин Д.А., 2017

© ГБОУ ВПО «Сургутский государственный
университет ХМАО – Югры», 2017

ОГЛАВЛЕНИЕ

1.  Лабораторная работа №1. Создание простых WEB-страниц с фреймовой структурой 5

1.1.   Введение. 5

1.2.   Структура HTML-документа. 5

1.3.   Фреймы.. 6

1.4.   Ссылки. 7

1.5.   Текст. 8

1.5.1.  Текстовые блоки. 8

1.5.2.  Форматирование текста. 8

1.5.3.  Списки. 8

1.5.4.  Таблицы.. 9

1.6.   Изображения. 10

1.7.   Задание на лабораторную работу. 10

1.8.   Варианты заданий. 11

1.9.   Справочники и руководства. 12

2.  Лабораторная работа №2. Использование каскадных таблиц стилей CSS 13

2.1.   Назначение CSS. 13

2.2.   Включение CSS в документ HTML. 13

2.2.1.  Внешниестили (external style sheets) 13

2.2.2.  Таблицы стилей документа (document style sheets) 13

2.2.3.  Стили, встроенные в элемент (inline styles) 14

2.3.   Синтаксис CSS. 14

2.3.1.  Виды селекторов. 14

2.3.2.  Селекторы, зависящие от контекста. 16

2.4.   Лабораторное задание. 16

2.5.   Справочники и руководства. 16

3.  Лабораторная работа №3. HTML-формы.. 17

3.1.   Элементы HTML для создания форм. 17

3.1.1.  Элемент FORM.. 17

3.1.2.  Элемент TEXTAREA.. 17

3.1.3.  Элемент INPUT. 17

3.1.4.  Элемент SELECT.. OPTION.. 19

3.2.   Пример реализации формы.. 19

3.3.   Обработка данных форм на JavaScript 22

3.4.   Лабораторное задание. 26

3.5.   Справочники и руководства. 26

4.  Лабораторная работа №4. JavaScript. Работа с HTML-страницей при помощи объектной модели документа DOM.. 27

4.1.   Введение. 27

4.2.   Структура программы JavaScript 27

4.2.1.  Включение сценария в HTML-файл. 27

4.2.2.  Выполнение сценариев и отображение страницы.. 28

4.2.3.  Операторы и комментарии. 28

4.3.   DOM: работа с HTML-страницей. 28

4.3.1.  Глобальная структура объектов браузера. 28

4.3.2.  Дерево DOM-объектов. 29

4.3.3.  Доступ к элементам DOM и навигация. 30

4.3.4.  Свойства элементов DOM.. 30

4.3.5.  Атрибуты элементов DOM.. 31

4.3.6.  Добавление и удаление элементов DOM.. 32

4.3.7.  Работа с таблицами в DOM.. 35

4.3.8.  Работа с фреймами в DOM.. 36

4.4.   Работа со стилями при помощи JavaScript 36

4.4.1.  Работа с классом элемента. 36

4.4.2.  Работа с CSS-свойствами. 37

4.5.   Задание на лабораторную работу. 38

4.6.   Справочники и руководства. 42

5.  Лабораторная работа 5. Сценарии PHP. Обработка форм на стороне сервера 43

5.1.   Формирование динамических WEB-страниц на языке PHP. 43

5.2.   Обработка форм на PHP. 44

5.3.   Лабораторное задание. 48

6.  Лабораторная работа 6. Блочная верстка сайта. 49

6.1.   Виды HTML-верстки. 49

6.2.   Основные способы организации контента при помощи блоков. 49

6.3.   Лабораторное задание. 53

7.  Лабораторная работа 7. Использование шаблонов в PHP. 54

7.1.   Принцип шаблонизации. 54

7.2.   Лабораторное задание. 56

7.3.   Справочники и руководства. 56

 

Лабораторная работа №1. Создание простых WEB-страниц с фреймовой структурой

Введение

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме. Следует отметить, что конечный вид HTML-документа после будет зависеть от средства воспроизведения, т.е. одни и те же документы могут по-разному выглядеть в разных браузерах, однако логическая структура документов при этом сохраняется.

Структура HTML-документа

Любой документ HTML состоит из трех частей:

1. Строки, содержащей информацию о версии HTML (элемент < !DOCTYPE>).

2. Блока заголовка документа (элемент <HEAD>).

3. Тела документа, либо содержащего непосредственно отображаемую информацию, либо определяющего набор фреймов(элемент BODY).

Вторая и третья части должны быть вложены в контейнер <HTML></HTML>. Все перечисленные элементы являются опциональными. Для всех остальных элементов HTML открывающий тег обязателен.

В заголовкедокумент может иметь элемент < T ITLE>. Этот элемент используется для определения содержания документа. Большинство браузеров отображают строку, размещенную внутри элемента < T ITLE> в качестве заголовка окна.

Также заголовок может содержать некоторое количество элементов <META>. Элемент <МЕТА> используется для включения различной информации о документе, а также предоставляет возможность сообщать дополнительные инструкции как клиентской части (браузеру), так и серверной. Элемент <META> может определять свойства с произвольными именами и присваивать им произвольные значения. Вместе с тем ряд свойств являются общепринятыми:

Author – автор документа.

Copyright – информация об авторском праве.

Description – описание документа (для поисковых машин).

Generator – название программы, с помощью которой создавался документ.

Keywords – ключевые слова (для поисковых машин).

Пример простейшего HTML-документа:

Фреймы

Помимо обычных HTML-документов, существуют также и фреймсодержащие. В отличие от обычных документов они не содержат никакой информации для предоставления пользователю, а служат для разделения рабочей области браузера на несколько отдельных окон, в которые и загружаются несущие информацию документы.

Фреймсодержащий документ не может нести в себе часть BODY, она заменяется элементом FRAMESET. При этом в окно браузера выводятся документы, указанные в элементах FRAME из набора FRAMESET.

Элемент FRAMESET определяет набор создаваемых фреймов и их расположение в окне браузера. Каждому конкретному фрейму соответствует элемент FRAME, располагаемый между открывающим и закрывающим тэгами FRAMESET. Расположение фреймов указывается при помощи атрибутов COLS и ROWS. Значения атрибутов указываются в пикселях, процентах либо в относительных указателях. Значения перечисляются через запятую.

Следующий документ формирует страницу с тремя фреймами, как показано на рисунке:

MAIN
TOP
LEFT

Существует несколько зарезервированных для специального использования имен фреймов. Эти имена начинаются с символа подчеркивания:

_ self - указывает на то же окно/тот же фрейм, откуда вызывается функция.

_ blank - указывает на новое окно.

_ parent - указывает на родительское по отношению к текущему окно.

_ top - указывает на самый верхний фрейм в окне.

Ссылки

Ссылки – один из самых часто используемых элементов, лежащий в основе концепции гипертекста. Ссылки задаются при помощи элемента (тэга) <a>. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. Синтаксис задания якоря:

< aname =" link 1">Перваязакладка</ a >

Вкачествезначенияатрибута href используетсяидентификаторресурса, илиURI – Universal (илиUniform) ResourceIdentifier, универсальныйидентификаторресурса. Адрес ссылки может быть абсолютным и относительным.

Абсолютный адрес состоит из адреса хоста сетевого ресурса, или URL (Uniform Resource Locator) и адреса ресурса (файла) в локальном пространстве имен, или URN (Uniform Resource Name). Абсолютные ссылки позволяют указать на любой ресурс или файл в пределах всей сети Интернет из любого места. Пример абсолютной ссылки:

< ahref =«http:// htmlbook. ru / html / a / href»>Абсолютнаяссылка</ a >.

Абсолютные ссылки могут указывать только на сетевые ресурсы, т.е. ресурсы, доступные по сетевому протоколуHTTP или FTP.

 Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Они представляют собой аналог пути к файлу в локальной файловой системе и имеют сходный синтаксис. Пример относительной ссылки:

< ahref =«../ html / a / href»>Относительная ссылка</ a >.

Относительные ссылки используют для перехода между разными документами сайта. Это позволяет размещать сайт на хосте с произвольным именем, при этом относительные ссылки всегда будут работать правильно.

При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри страницы.Имя якоря добавляется в конце абсолютной или относительной ссылки после символа «#»:

< ahref =«http:// htmlbook. ru / html / a / href # link 1»>Ссылканаякорь</ a >

При использовании фреймов бывает необходимо сделать так, чтобы объект, на который указывает ссылка из одного фрейма, был открыт в другом фрейме. Для этого в элементе < a > используется атрибут target =”имя_фрейма”, например:

<ahref=«http://htmlbook.ru/html/a/href» target=”frame_name” > Открытьвдругомфрейме </a>

Допускается использование зарезервированных имен. Например, использование атрибута target =”_ top ” при указании ссылки на фреймосодержащий документ позволяет загрузить во все фреймы документа те страницы, который указаны в свойстве sourceкаждого элемента < frame >.

Элемент BASE позволяет указать базовый URI, который будет использоваться как старшая часть всех относительных ссылок в документе:

<BASE href = "http://www.host.ru/mydir">

Элемент BASE также позволяет указать имя фрейма, в котором будут открываться ссылки данного документа:

< BASEtarget = " frame _ name ">

Если в документе явно отсутствует элемент BASE, то браузер автоматически назначает для него атрибут HREF, равный URI данного документа, и атрибут TARGET, равный _ self.

Текст

Текстовые блоки

Элементы < H 1>,< H 2>,...< H 6 > Используются для создания заголовков текста соответствующего уровня.

Элемент < P > используется для разметки параграфов. При помощи атрибута align можно задать тип выравнивания текста в параграфе – влево, вправо, по центру и по ширине.

Элемент < BR> осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе.

Элемент < R >вставляет в текст горизонтальную разделительную линию.

Форматирование текста

Элемент < BASEFONT > определяет основной шрифт, которым должен отображаться текст документа.

Элемент < FONT > Позволяет изменять цвет, размер и тип шрифта текста.

Элемент < I > Выделяет текст курсивом.

Элемент < B > Выделяет текст жирным шрифтом.

Элемент < STRONG > Усиленное выделение текста (жирным).

Элемент < U > Выделяет текст подчеркнутым.

Элемент < S >, < STRIKE > Выделяет текст перечеркнутым.

Списки

Списки в HTML бывают двух видов: нумерованные и ненумерованные. Отличаются они лишь способом оформления. Перед пунктами ненумерованных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам нумерованных списков предшествуют их номера.

Элемент < UL > создает ненумерованный список.

Элемент < OL > создает нумерованный список.

Элемент < LI > создает пункт меню внутри списка.

Для элемента < OL >можно использовать следующие атрибуты:

START - определяет первое число, с которого начинается нумерация пунктов.

TYPE - определяет стиль нумерации пунктов. Может иметь значения:

" A" - заглавные буквы A, B, C...

" a" - строчные буквы a, b, c...

" I" - большие римские числа I, II, III...

" i" - маленькие римские числа i, ii, iii...

"1" - арабские числа 1, 2, 3...

По умолчанию < ULTYPE="1">.

Пример описания списков:

 

 

Таблицы

Элемент < TABLE > создает таблицу. Обязательно должен иметь начальный и конечный теги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов:

< CAPTION > - задает заголовок таблицы;

< TR > – задает строку таблицы;

< TD > – задает столбец (ячейку) таблицы;

< TH > – то же что и < TD>, но определяет ячейку как заголовок.

У элементов <TD>и <TH>среди прочих есть важные атрибуты, позволяющие производить объединение ячеек по горизонтали и вертикали:

< COLSPAN > - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

< ROWSPAN > - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Пример описания таблицы:

Изображения

Элемент IMG Используется для вставки изображений в HTML-документ. Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).Элемент IMG не имеет конечного тега.

Задание на лабораторную работу

Согласно своему варианту предметной области создать набор веб-страниц. Приветствуются инициативные темы.

Главная страница (index.html)имеет три фрейма – «Категории», «Объекты», «Описания».

Фрейм «Категории» должен содержать перечень ссылок на категории объектов предметной области. Например, для предметной области «Реактивные самолеты»: «Гражданские», «Учебно-тренировочные», «Сверхзвуковые» т.д., всего не менее 3-х категорий.

Фрейм «Объекты» должен содержать общее описание выбранной категории иперечень ссылок на объекты этой категории, включая их уменьшенные изображения, не менее 3-х объектов для каждой категории.

Фрейм «Описания» должен содержать описание выбранного объекта – его характеристики, свойства, изображения и т.д.

Таким образом, проект должен содержать следующие файлы (имена файлов могут быть изменены):

index.html - фреймовая структура;

categories.html - перечень ссылок на категории и ссылка «главная страница»;

category1.html.. category3.html – описания категорий и ссылки на объекты категории;

object1-1.html, object1-2.html.. object3-3.html – описанияобъектов.

При открытии главной страницы в фрейме «Категории» должен отображаться список категорий. Фрейм «Объекты» должен содержать информацию «О проекте», фрейм «Описания» должен содержать описание предметной области в целом. Перечень категорий должен содержать ссылку «Главная страница», при выборе которой страница принимает первоначальный вид.

При выполнении задания необходимо использовать все элементы HTML, описанные в данной лабораторной работе!

Варианты заданий

Варианты предметной области:

1. Автомобили

2. Рыбы и животные Красного моря

3. Интегральные микросхемы

4. Компьютерные комплектующие

5. Галерея живописи           

6. Самолёты IIмировой войны

7. Реактивные самолеты

8. Комнатные растения

9. Рыбы Западной Сибири

10. Политические партии РФ

11. Футбольные клубы

12. Кулинарные рецепты

13. ВУЗы ХМАО-Югры

14. Музыкальные стили и направления

15. Кинофильмы

16. Арабские страны

17. Смартфоны

Варианты фреймовой структуры:

Вариант Расположение фреймов
1
ОПИСАНИЯ
КАТЕГОРИИ
ОБЪЕКТЫ

2
ОПИСАНИЯ
КАТЕГОРИИ
ОБЪЕКТЫ

3
ОПИСАНИЯ
КАТЕГО-РИИ
ОБЪЕКТЫ

4
ОПИСАНИЯ
КАТЕГО-РИИ
ОБЪЕКТЫ

5
ОПИСАНИЯ
КАТЕГОРИИ
ОБЪЕКТЫ

 

Справочники и руководства

http://html.manual.ru/

http://htmlbook.ru/



<== предыдущая лекция | следующая лекция ==>
Массаж спины, поясничной области и таза | Лабораторная работа №2. Использование каскадных таблиц стилей CSS
Поделиться с друзьями:


Дата добавления: 2018-10-15; Мы поможем в написании ваших работ!; просмотров: 739 | Нарушение авторских прав


Поиск на сайте:

Лучшие изречения:

Два самых важных дня в твоей жизни: день, когда ты появился на свет, и день, когда понял, зачем. © Марк Твен
==> читать все изречения...

772 - | 707 -


© 2015-2024 lektsii.org - Контакты - Последнее добавление

Ген: 0.013 с.