Задания для самостоятельного выполнения
Приложение 1Б
форма «Титульный лист методических указаний и заданий
по выполнению лабораторных (практических) работ»
УТВЕРЖДАЮ
Зам.директорапоучебнойработе
___________
А.Даирбекова
«___»________ 2017 г.
МЕТОДИЧЕСКИЕ УКАЗАНИЯ И ЗАДАНИЯ ПО ВЫПОЛНЕНИЮ
ПРАКТИЧЕСКИХ (ЛАБОРАТОРНЫХ) РАБОТ
Web-программирование и интернет-технологии
Дисциплина
____________________________________1304000-ВТ__________________________________
Специальность/ шифр
______________________________Гольцева И.А.____________________________________ Ф.И.О. Автор/разработчик/преподаватель
Cодержание УМКрассмотрено и утверждено
цикловой методической комиссией ВТ
Протокол №8 от «12»апреля2017года
Председатель ЦМКВТ И.А.Гольцева__________
(Ф.И.О /подпись)
СОДЕРЖАНИЕ
Лабораторная работа №1. Создание WEB-страницы.. 4
Цели и задания. 4
Теоретические сведения. 4
Задания для самостоятельного выполнения. 13
Справочный материал к лабораторной работе №1. 14
Примеры.. 22
Контрольные вопросы.. 24
Лабораторная работа №2. Графика и фреймы.. 26
Цели и задачи. 26
Теоретические сведения. 26
Задания для самостоятельного выполнения. 31
Лабораторная работа №3. Блоки. 32
Цели и задачи. 32
Теоретические сведения. 32
Контрольные вопросы.. 34
Задания для самостоятельного выполнения. 35
Лабораторная работа №4. Каскадные таблицы стилей. 36
Цели и задачи. 36
Теоретический материал. 36
Контрольные вопросы.. 42
Справочный материал. 42
|
|
|
Лабораторная работа №5. Написание сценариев на языке JavaScript 47
Цели и задачи. 47
Лабораторная работа 6. Форма HTML.. 61
Цели и задачи. 61
Теоретические сведения. 61
Лабораторная работа №7. Внедрение сценариев в HTML-документ. 68
Цели и задачи. 68
Теоретический материал. 68
Лабораторная работа 9. Внедрение элементов защиты в документ. Работа с объектами JavaScript 73
Цели и задачи. 73
Теоретические сведения. 73
Лабораторная работа №10.Разработка Web-приложений на языке PHP. 80
Цели и задачи. 80
Теоретические сведения. 80
Основы языка PHP. 84
Операторы PHP. 88
Массивы в PHP. 90
Строки в PHP. 91
Оператор условного перехода. 93
Оператор ветвления. 94
Циклы в PHP. 95
Получение данных. 96
Пример создания Web-приложения. 97
Задание для самостоятельной работы.. 100
Лабораторная работа №11.Разработка Web-приложений с использованием баз данных на языке PHP. 103
Цели и задачи. 103
Теоретические сведения. 103
Задание на лабораторную работу. 113
Лабораторная работа №12.Реализация запросов. 114
Цели работы.. 114
Теоретические сведения. 114
Операции над отношениями. 117
Задание на лабораторную работу. 124
СПИСОК ЛИТЕРАТУРЫ... 125
Лабораторная работа №1. Создание WEB-страницы
Цели и задания
Цель:Научиться работать с HTML – документами, создавать простейшие странички, размещать на них графику, звук, видео, бегущую строку
|
|
|
Задание:Создайте HTML – страничку, разместив на ней красочный рассказ на заданную тему. Разместите не менее 3 фреймов, 2 таблицы, 4 списка. Текст оформите фото и видеоматериалами, различными шрифтами, заголовками, рамками, бегущей строкой.
Теоретические сведения
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html
Метки можно вводить как большими, так и маленькими буквами.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
Обязательные метки
<html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
|
|
|
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P><BR>
Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца.
<HR>
Метка <HR> описывает вот такую горизонтальную линию:
Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана).
|
|
|
&-последовательности
Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ "&" (амперсанд) кодируется последовательностью &
Двойные кавычки (") кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа " или & не допускается.
Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.
Комментарии
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев.
<!-- Это комментарий -->Форматирование шрифта
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.
Физические стили
Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом.
Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<EM> ... </EM>
От английского emphasis — акцент.
<STRONG> ... </STRONG>
Отанглийского strong emphasis — сильныйакцент.
<CODE> ... </CODE>
Рекомендуется использовать для фрагментов исходных текстов.
<SAMP> ... </SAMP>
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
<KBD> ... </KBD>
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
<VAR> ... </VAR>
От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
Связывание
Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес перехода]"> выделенный фрагмент текста</A>В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF="index.html">Перейти к оглавлению</A>Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента, при нажатии на который в текущее окно будет загружен документ index.html.
Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком.
На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере.При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html:
<A NAME="AAA">Переход закончен</A>Слова "Переход закончен" при этом никак не будут выделены в тексте документа.
Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:
<A HREF="2.html#AAA">Переход к анкеру AAA</A>Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.html — достаточно только включить в него вот такой фрагмент:
<A HREF="#AAA">Переход к анкеру AAA</A>На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа.
Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно.
Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
<A HREF="mailto:user@mail.box">Послатьписьмо</A>Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box.
Разберем все, что мы знаем о связывании, с помощью примера 5
<HTML><HEAD><TITLE>Пример 5</TITLE></HEAD><BODY><H1>Связывание</H1><P>С помощью ссылок можно переходить к другим файлам (например, к <A HREF="index.html">оглавлению </A>).</P><P>Можно выгружать файлы (например, <AHREF="ftp://yi.com/home/metodichka/html-pr.doc">эта методичка в формате Microsoft Word </A>) по FTP.</P><P>Можно дать пользователю возможность послать почту(например, <A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P></BODY></HTML>Изображения в HTML-документе
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя
Разберем все, что мы знаем об изображениях, с помощью пример 6.
<HTML><HEAD><TITLE>Пример 6</TITLE></HEAD><BODY><H1>Изображения</H1><P>Изображение можно встроить очень просто: </P><P><IMG SRC="picture.gif"></P><P>Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P><P><A HREF="index.html"><IMG SRC="picture.gif"></A></P></BODY></HTML>Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.
Ненумерованные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>.
У метки <LI> нет парной закрывающей метки.
Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры.
Списки определений: <DL> ... </DL>
Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:
<DL><DT>HTML<DD>Термин HTML (HyperTextMarkupLanguage) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. <DT>HTML-документ <DD>Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). </DL>Этот фрагмент будет выведен на экран следующим образом:
HTML
Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).
Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток.
Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:
<DL COMPACT><DT>А <DD>Первая буква алфавита <DT>Б <DD>Вторая буква алфавита <DT>В <DD>Третья буква алфавита </DL>будет выведен на экран примерно так:
А
Первая буква алфавита
Б
Вторая буква алфавита
В
Третья буква алфавита
Вложенные списки
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует.
Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Наши знания о списках можно вкратце свести в пример 7 :
<html><head><title>Пример 7</title></head><body><H1>HTML поддерживает несколько видов списков </H1><DL><DT>Ненумерованные списки <DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева: <UL><LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL><DT>Нумерованные списки <DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией: <OL><LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </OL><DT>Списки определений <DD>Этот вид списков чуть сложнее, чем два предыдущих,но и выглядит более эффектно. <P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности.</P><P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P></DL></body></html>Форматированный текст: <PRE> ... </PRE>
В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.
Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.
Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>
Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Задания для самостоятельного выполнения
Вариант выбирается по порядковому номеру студента в журнале группы.
Вариант 1
Разработайте веб-страничкуна тему «Мой колледж».
Вариант 2
Разработайте веб-страничкуна тему «Мой город
Вариант 3
Разработайте веб-страничкуна тему «Моя компания».
Вариант 4
Разработайте веб-страничкуна тему «Лето».
Вариант 5
Разработайте веб-страничкуна тему «Компьютерная техника».
Вариант 6
Разработайте веб-страничкуна тему «Спорт».
Вариант 7
Разработайте веб-страничкуна тему «Мой город».
Вариант 8
Разработайте веб-страничкуна тему «Наша молодежь»
Вариант 9
Разработайте веб-страничкуна тему «Места отдыха в У-Ка».
Вариант 10
Разработайте веб-страничкуна тему «Моя профессия».
Вариант 11
Разработайте веб-страничкуна тему «Модная одежда».
Вариант 12
Разработайте веб-страничкуна тему «Автомобили».
Вариант 13
Разработайте веб-страничкуна тему «Здравствуйте! Это я!».
Вариант 14
Разработайте веб-страничкуна тему «Моя группа»
Вариант 15
Разработайте веб-страничкуна тему «Музыка».
Вариант 16
Разработайте веб-страничкуна тему «История моего города».
Вариант 17
Разработайте веб-страничкуна тему «Собаки».
Вариант 18
Разработайте веб-страничкуна тему «В ожидании зимы».
Вариант 19
Разработайте веб-страничкуна тему «Мой любимый праздник».
Вариант 20
Разработайте веб-страничкуна тему «Кошки».
Вариант 21
Разработайте веб-страничкуна тему «О чем мечтает мое поколение
Вариант 22
Разработайте веб-страничкуна тему «Освоение космоса».
Вариант 23
Разработайте веб-страничкуна тему «Если бы я был волшебником».
Вариант 24
Разработайте веб-страничкуна тему «Мир аквариума».
Вариант25
Разработайте веб-страничкуна тему «Классики и современники»
Дата добавления: 2018-04-04; просмотров: 444; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!