Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование»

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование»


Скачать 191.87 Kb.
НазваниеМетодические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование»
ТипМетодические указания
rykovodstvo.ru > Руководство эксплуатация > Методические указания


ЗАДАНИЯ И МЕТОДИЧЕСКИЕ УКАЗАНИЯ
к лабораторным работам №№1÷4
по дисциплине «Web-программирование»
для студентов 3 курса
дневного отделения факультета АВТ,
обучающихся по направлениям
09.03.01 Информатика и вычислительная техника,
09.03.04 Программная инженерия


Оглавление

Содержание отчетов по лабораторным работам 3

Лабораторная работа №1. Статический html-документ
(4 часа) 4

Лабораторная работа №2. Каскадные таблицы стилей CSS
(4 часа) 14

Лабораторная работа №3. Web-сервер Apache
(8 часов) 21

Лабораторная работа №4. Динамический html-документ
(4 часа) 30


Содержание отчетов по лабораторным работам



Отчеты по лабораторным работам оформляются в электронном виде с именами АВТ-500 Иванов, Петров (лр1).doc (или *.docx, *.rtf, *.odt, *.pdf).

Отчеты оформляются по лаб. работам: №№1 и 2 (один отчет по двум лабораторным работам); №3, №4, №5, №6, №7 (отдельные отчеты по лабораторным работам с третьей по седьмую), всего шесть отчетов по семи лабораторным работам.

Образец титульного листа к отчетам находится по адресу http://ermak.cs.nstu.ru/webprog/wp_labwork_title_page.doc.

Лабораторная работа №1. Статический html-документ
(4 часа)



Цель работы:

Изучить основы языка разметки гипертекста HTML 5.
Задание:

Создать html-документ, разметить его в соответствии с вариантом (см. далее по тексту). Для ВСЕХ ВАРИАНТОВ в разметке html-документа использовать:


Вариант 1: Вариант 2:



Вариант 3: Вариант 4:



Вариант 5: Вариант 6:



Вариант 7: Вариант 8:



Вариант 9: Вариант 10:



Порядок выполнения лабораторной работы:

  1. Запустить текстовый редактор.

  2. Разметить html-документ в соответствии с заданным вариантом. Для справки о тегах и их атрибутах использовать справочники, расположенные по адресам https://www.w3schools.com/html/default.asp и https://html5book.ru/html-html5.
    Стандарт HTML 5 расположен по адресу https://www.w3.org/standards/techs/html.

  3. Проверить соответствие выполненной разметки стандарту HTML 5, использовав валидатор WWW Консорциума, расположенный по адресу http://validator.w3.org.


Содержание отчета:

По двум лабораторным работам №№1 и 2 оформляется один отчет. См. раздел «Содержание отчета» для лабораторной работы №2.
Теоретические сведения
Язык разметки гипертекста HTML (Hypertext markup language) — язык разметки, используемый для создания гипертекстовых html-документов, отображаемых браузером.

Гипертекст — форматированный текст, содержащий ссылки на другие документы (гиперссылки).

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

Язык разметки гипертекста HTML не является языком программирования.

Основным элементом языка разметки гипертекста HTML является тег (tag).

Теги содержат указания браузеру о способах отображения документа.

С помощью тегов в html-документ вставляются файлы, содержащие дополнительные данные (например, графику) и размечаются гиперссылки, посредством которых данный html-документ связывается с другими html-документами.

Как правило, теги состоят из начального и конечного элементов, между которыми размещаются текст и другие элементы html-документа. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта.

Базовый синтаксис тега:


Содержимое тега

где — это начальный элемент тега, содержащий имя тега, а — конечный элемент тега.

В начальном элементе тега может располагаться перечень атрибутов тега. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими пробелами. Порядок записи атрибутов в начальном элементе тега значения не имеет. Значение атрибута, если имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно указать после знака равенства, не заключая в кавычки. Все остальные значения необходимо заключать в кавычки, особенно если они содержат пробелы. Если атрибут не указан, браузером используется его значение по умолчанию.

Регистр символов в именах тегов и атрибутов не учитывается.


Содержимое тега

Конечные теги никогда не содержат атрибутов.

При использовании вложенных тегов их нужно закрывать, соблюдая правильную вложенность.

В некоторых случаях конечные теги можно опускать. Тем не менее, рекомендуется использовать конечные элементы тегов, чтобы избежать ошибок в отображении html-документа браузером.

Некоторые теги, не имеющие конечного элемента, называются автономными тегами.



Html-документ состоит из заголовка документа и тела документа.





Название html-документа

Заголовок html-документа





Тело html-документа




Весь html-документ заключается в тег . Html-документ состоит из заголовка и тела, которые выделяются, соответственно, тегами и . В заголовке, с помощью тега , указывается название html-документа, а также другие данные, которые браузер будет использовать при отображении документа.<br /><br />Тело html-документа — та его часть, в которую помещается собственно содержимое html-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером. <br /><br />Перечень тегов языка HTML и их атрибутов можно посмотреть в справочнике http://htmlbook.ru.<br /><br /><h2><a name="__refheading__6_1164315872"></a> Лабораторная работа №2. Каскадные таблицы стилей CSS<br />(4 часа)</h2> <br /><br /><b>Цель работы:</b><br /><br />Изучить основы каскадных таблицы стилей CSS 3.<br /><b>Задание:</b><br /><br />Оформить html-документ, полученный в результате выполнения лабораторной работы №1 «Статический html-документ», добавив каскадные таблицы стилей. Изменить оформление:<br /><ul> <li><br />документа в целом (фон и т.п.);<br /><li><br />текста;<br /><li><br />гиперссылок;<br /><li><br />списка;<br /><li><br />таблицы.<br /></ul> <br />Использовать определение стилей для тегов и классы стилей, псевдоклассы.<br />Использовать три способа определения каскадных таблиц стилей:<br /><ul> <li><br />с помощью тега <link>;<br /><li><br />с помощью тега <style>;<br /><li><br />с помощью параметра style тега.<br /></ul> <br />Продемонстрировать действие приоритетов при применении различных способов определения CSS;<br />Создать изображение в соответствии с вариантом, используя только свойства CSS.<br /><br /><table width=657 cellpadding=7 cellspacing=0> <col width=314> <col width=314> <tr valign=top> <td width=314> <br /><b>Вариант 1:</b><br /></td> <td width=314> <br /><b>Вариант 6:</b><br /></td> </tr> <tr valign=top> <td width=314> <br /><img src="150564_html_3195891e.gif"><br /></td> <td width=314> <br /><img src="150564_html_1a98fc40.gif"><br /></td> </tr> <tr valign=top> <td width=314> <br /><b>Вариант </b><b>2:</b><br /></td> <td width=314> <br /><b>Вариант 7:</b><br /></td> </tr> <tr valign=top> <td width=314> <br /><img src="150564_html_19958003.gif"><br /></td> <td width=314> <br /><img src="150564_html_m5acaea30.gif"><br /></td> </tr> <tr valign=top> <td width=314> <br /><b>Вариант </b><b>3:</b><br /></td> <td width=314> <br /><b>Вариант 8:</b><br /></td> </tr> <tr valign=top> <td width=314> <br /><img src="150564_html_m39829fa1.gif"><br /></td> <td width=314> <br /><img src="150564_html_3c1bc0bc.gif"><br /></td> </tr> <tr valign=top> <td width=314> <br /><b>Вариант </b><b>4:</b><br /></td> <td width=314> <br /><b>Вариант 9:</b><br /></td> </tr> <tr valign=top> <td width=314> <br /><img src="150564_html_4fc15714.gif"><br /></td> <td width=314> <br /><img src="150564_html_m7fa83db0.gif"><br /></td> </tr> <tr valign=top> <td width=314> <br /><b>Вариант </b><b>5:</b><br /></td> <td width=314> <br /><b>Вариант 10:</b><br /></td> </tr> <tr valign=top> <td width=314> <br /><img src="150564_html_m3af70f5c.gif"><br /></td> <td width=314> <br /><img src="150564_html_1569716a.gif"><br /></td> </tr> </table> <br /><b>Порядок выполнения лабораторной работы:</b><br /><ol> <li><br />Запустить текстовый редактор.<br /><li><br />Оформить с помощью каскадных таблиц стилей html-документ, полученный в результате выполнения лабораторной работы №1, в соответствии с заданным вариантом. Для справки о свойствах CSS и их значениях использовать справочники, расположенные по адресам https://www.w3schools.com/css/default.asp и http://htmlbook.ru/css.<br />Стандарты CSS 3 расположены по адресу https://www.w3.org/Style/CSS.<br /><li><br />Протестировать оформленный документ в браузере.<br /></ol> <br /><br /><b>Содержание отчета:</b><br /><br /><b><span>П</span></b><b>о двум лабораторным работам №1 и №2 оформляется один отчет.</b><br /><ul> <li><br />цель работы;<br /><li><br />задание;<br /><li><br />порядок выполнения лабораторной работы;<br /><li><br /><b><span>html-разметка созданного документа</span></b>, включая созданные стили;<br /><li><br /><b><span>скриншот с результатами валидации html-документа</span></b><b>;</b><br /><li><br />скриншот оформленного html-документа;<br /><li><br />выводы.<br /></ul> <br /><br /><b>Теоретические сведения</b><br />Каскадные таблицы стилей CSS (Cascading style sheets) — формальный язык описания внешнего вида документа, созданного с использованием языка разметки гипертекста.<br /><br />Каскадные таблицы стилей позволяют разделить описание логической структуры html-документа (выполненное с помощью языка разметки) и описание внешнего вида html-документа (выполненное с помощью CSS).<br /><br />Существует три способа определения стилей: 1) в отдельном файле, подключаемом к html-документам, 2) с помощью тега <style> непосредственно в некотором html-документе и 3) с помощью атрибута style непосредственно в некотором теге.<br /><br />Наиболее высокий приоритет имеет стиль, определенный в теге, затем следует определение стиля с помощью тега style и самым низким приоритетом обладают свойства, определенные в отдельном файле.<br /><br />Каскад приоритетов особенно удобен при разработке больших проектов, например, сайтов, состоящих из большого числа html-документов. В этом случае общее оформление может быть вынесено в отдельный файл, в html-документе могут быть внесены изменения в стиль документа с помощью тега <style>, атрибут тега style позволяет изменить оформление одного тега.<br /><br />Стили определяются парами свойств и значений, перечень пар заключается в фигурные скобки и пары разделяются точкой с запятой:<br /><br />{property_1:value_1; property_2:value_2; … ; property_n:value_n}<br />где property — это свойство, а value — значение свойства.<br /><br />Стиль можно определить для конкретного тега, например, задать для тега <body> отображение белого текста на черном фоне:<br /><br />body<br /><br />{background-color:black; color:white}<br />Можно определить «чистый» стиль, не привязанный заранее к конкретному тегу, в этом случае речь идет об определении класса стиля:<br /><br />.small_silver<br /><br />{font-size:10px; color:silver}<br /><br />или<br />#big_gold<br /><br />{font-size:150px; color:#D7B56D}<br />Применение класса стиля:<br /><br /><p class=small_silver>Текст светло-серого цвета размером 10 пиксел</p><br /><br />или<br /><p id=big_gold>Текст светло-желтого цвета размером 150 пиксел</p><br />Описание стилей для тегов или классов стилей выполняется одинаково как в отдельном файле, так и в теге <style>.<br /><br />Файл со стилями должен иметь расширение *.css и быть подключен к html-документу с помощью тега <link>, расположенного в теге <head>.<br /><br /><link href=”style.css” rel=”stylesheet” type=”text/css”><br />Тег <style> также должен быть расположен в теге <head>, после тега <link>.<br /><br />Стили, определяемые непосредственно в теге с помощью атрибута style:<br /><br /><br />Подчеркнутый текст красного цвета<br /><br />Возможно задание различных стилей отображения одного и того же html-документа в различных средах представления, например, на экране или печати с помощью атрибута media тега <link>.<br /><br />Файл screen.css<br /><br />body<br /><br />{color:silver; background:black}<br /><br />.forprint<br /><br />{display:none}<br />Файл print.css<br /><br />body<br /><br />{color:black; background:white}<br /><br />.forscreen<br /><br />{display:none}<br />Файл media.html<br /><br /><html><br /><br /><head><br /><br /><link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen”><br /><br /><link href=”print.css” rel=”stylesheet” type=”text/css” media=”print”><br /><br /></head><br /><br /><body><br /><br /><h2>Версия для <i class=forscreen>экрана</i><i class=forprint>печати</i></h2><br /><br /><div class=forscreen>Изображение будет видно на экране:<br /><br /><br /><img src=css3.jpg height=200px><br /><br /></div><br /><br /><div class=forprint><b>Внимание!</b> В версии для печати изображения нет.</div></link></link></link></link></style></link></head></link></style></body></style></style></style></link></body></head></html></body>

Похожие:

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по дисциплине “
Методические указания к лабораторным работам по дисциплине “Нормативные документы и должностные инструкции” / А. Г. Куприянов, А....

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по дисциплине «микроэлектронные устройства»
Горохов А. В, Пичугина Л. П. Методические указания к лабораторным работам по дисциплине «Микроэлектронные устройства». – М.: Ргу...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconО. Р. Никитин Специализация по теме диссертации Методические указания...
Методические указания к лабораторным работам предназначены для бакалавров направления 210400 «Радиотехника» и специальности 210600...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по дисциплине «Операционные системы»
Программирование в операционной среде unix: обмен информацией между параллельными процессами, организация защиты файлов в файловой...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам «спектрофотометрический анализ»
Методические указания к лабораторным работам «спектрофотометрический анализ» по спецкурсу «оптические методы анализа» для студентов...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по курсу «Новые разделы информатики»
Данные методические указания «Мультимедиа технологии»к лабораторным работам могут быть полезны студентам и преподавателям смежных...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по курсу «Новые разделы информатики»
Данные методические указания «Мультимедиа технологии»к лабораторным работам могут быть полезны студентам и преподавателям смежных...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным и домашним работам по дисциплине «Операционные системы»

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по дисциплине «Физико-химические методы анализа»
Методические указания составили: доценты: С. А. Соколова, О. В. Перегончая, Л. Ф. Науменко, А. К. Решетникова, О. В. Дьяконова,,...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconВычислительная техника ” схемотехника методические указания к лабораторным работам самара 2000
Схемотехника: Метод указания к лабораторным работам / Самар гос техн ун-т; Сост. И. В. Воронцов, В. П. Золотов. Самара, 2000, 59...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания по дисциплине пд. 02 Химия для выполнения лабораторных...
Методические указания и задания к лабораторно-практическим занятиям для студентов специальности 35. 02. 05 Агрономия по дисциплине...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания «Аналитические запросы» по дисциплине «Постреляционные базы данных»
Учебно-методические материалы «Аналитические запросы» представляют собой методические указания к лабораторным работам по дисциплине...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к лабораторным работам по дисциплине «Технологии...
Лабораторная работа 2 Составление календарного плана разработки портала вуза 16

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания к практическим работам по учебной дисциплине
Методические указания к практическим работам по учебной дисциплине История отечественного государства и права для студентов спо специальности...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания и задания к лабораторным работам по дисциплине...
...

Методические указания к лабораторным работам №№1÷4 по дисциплине «Web-программирование» iconМетодические указания по проведению лабораторных работ по дисциплине «Информатика»
Методические указания по проведению лабораторных работ предназначены для студентов гоапоу «Липецкий металлургический колледж» технических...


Руководство, инструкция по применению




При копировании материала укажите ссылку © 2018
контакты
rykovodstvo.ru
Поиск