Лабораторные работы по дисциплине "Web-технологии"
Формат - HTML, CSS, PHP.
Задание 1 – Применение каскадных таблиц стилей
Применяя каскадные таблицы стилей необходимо:
1 Назначить стиль отдельным элементам страницы.
Создайте с помощью текстового редактора "Блокнот" файл testcss.html и поместите на странице следующий код:
<html>
<body style="font-family:'Times New Roman', serif; font-size: 20px; color: darkgreen;">
<p>Текст для примера
<p>Следующий параграф
</body>
</html>
Просмотрите созданную страницу с помощью браузера, обратите внимание, что указанный способ позволил отобразить все абзацы на странице нужным стилем, причем код не засорен тегами <font> и их атрибутами. Поэкспериментируйте с прочими атрибутами свойства Font: font-family, font-style, font-weight , font-size.
В созданном документе используется встраивание стиля непосредственно в тег документа — так называемый inline-стиль.
Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях — если данный стиль планируется применить только к одному элементу только на одной странице сайта.
2 Назначить стиль нескольким элементам одной страницы.
В созданном документе testcss.html объявите раздел "оглавление":
<html>
<head>
</head>
<body style="font-family: 'Times New Roman', serif; font-size: 20px; color: darkgreen;">
<p>Текст для примера
<p>Следующий параграф
</body>
</html>
С помощью тегов <title> ... </title> объявите заголовок документа. Удалите объявление стиля в теге <body>. Под заголовком объявите стили для нескольких тегов:
<html>
<head>
<title>Заголовок</title>
<style>
body { font-family: 'Times New Roman', serif;font-size: 12pt;
color: darkgreen;}
h1 {font-family: Arial, sans-serif;font-size: 16pt;
color: green;
font-weight: bold;}
h2 { font-family: Arial, sans-serif;font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;}
</style>
</head>
<body>
<p>Текст для примера
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
</body>
</html>
Сохраните документ и просмотрите его с помощью браузера. Видоизмените описание стилей по вашему усмотрению.
3 Назначить стили одновременно для нескольких страниц сайта.
Создайте с помошью текстового редактора "Блокнот" файлы t1.html, t2.html и style.css. В файл style.css поместите следующий код:
h1 {font-family: 'Times New Roman', serif;font-size: 12pt;
color: darkgreen;}
p {font-family: Arial, sans-serif;font-size: 16pt;
color: green;
font-weight: bold;}
h2 {font-family: Arial, sans-serif;font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;}
На страницах t1.html и t2.html введите текст, используя теги <h6>, <p> и <td>.
Свяжите стили, определенные в файле style.css со страницами t1.html и t2.html, для этого в оглавлениях страниц поместите следующий код:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Просмотрите созданные страницы с помощью браузера, убедитесь, что стили верно применены на обеих страницах.
В том случае, если на каждой из страниц объявлены свои стили, вы можете к ним присоединить описание уже созданных в документе style.css.
На страницах t1.html и t2.html удалите код связывания
<link rel="stylesheet" type="text/css" href="style.css">.Объявите описание стиля для элемента <h3>. Например:
<html>
<head>
<title>Заголовок</title>
<style>
h3 { font-family: tahoma;font-size: 60px;
color: red;
font-weight: bold;}
</style>
</head>
<body>
...
</body>
</html>
Введите текст, используя тег <h3>. Сохраните страницу, просмотрите ее с помощью браузера. Импортируйте определенные в style.css стили в документы t1.html и t2.html:
<head>
<style>
@import: url (style.css);
...
</style>
</head>
Убедитесь, что на страницах применены стили, определенные вами в импортированном файле.
4 Использовать селектор CSS - class.
Создайте с помощью текстового редактора файл interview.html. В этом файле введите текст воображаемого интервью с известным артистом или политическим деятелем. Каждый вопрос и каждый ответ начинайте с нового абзаца. Например вот так:
<html>
<head>
<title>Интервью</title>
</head>
<body>
<p>Назовите, пожалуйста, основные идеи кампании Виктора Януковича. Иными словами — что сделает премьер, если он станет президентом?
<p>Посмотрите еще раз программу.
<p>Будет ли Виктор Янукович участвовать в телевизионных дебатах, проведение которых предусмотрено законом о выборах президента?
<p>Обязательно должны быть дебаты. И обязательно Янукович на них будет. С кем бы то ни было.
</body>
</html>
Сохраните и просмотрите полученную страницу. Обратите внимание, что способы оформления текста вопросов и ответов ничем не отличаются. Определим в таблице стилей два различных класса абзацев с помощью селектора класса. Это будет выглядеть так:
<style>
p.ask { font-style: italic;font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px }
p.answer { font-family: 'Times New Roman', serif;font-size: 12 pt; color: black; }
</style>
Теперь применим эти классы:
<html>
<head>
<style>
p.ask { font-style: italic;font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px }
p.answer { font-family: 'Times New Roman', serif;font-size: 12 pt; color: black; }
</style>
</head>
<body>
<p class="ask">Вопрос журналиста</p>
<p class="answer">Ответ интервьюируемого</p>
</body>
</html>
В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета.
Измените таблицу стилей по своему усмотрению. Вы можете создавать любое количество классов для любых элементов страницы.
5 Использовать селектор CSS – id.
Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться посредством языка PHP (такую функциональность мы будем рассматривать позже). На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов id.
Рассмотрим пример. Создайте с помощью текстового редактора файл testid.html. Введите следующий текст:
<html>
<head>
<style>
#green {color: green;}#red {color: red;}</style>
</head>
<body>
<form>
<p>Текст, вводимый в это поле, будет отображен зеленым цветом:
<input type="text" id="green" name="info1" size="20"></p>
<p>Текст, вводимый в это поле, будет отображен красным цветом:
<input type="text" id="red" name="info2" size="20"></p>
</form>
</body>
</html>
Просмотрите полученную страницу с помощью браузера. Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы.
6 Создать HTML- страницу используя для оформления контекстные селекторы CSS.
Допустим, вы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега <em> слова внутри абзацев — черным цветом на серебристом фоне. Код таблицы стилей при этом выглядит так:
h1 { color: red;background-color: gray;}
p {color: green;background-color: yellow;}
em { color: black;background-color: silver;}
Предположим, вы хотите также выделить какие-то слова в заголовке посредством того же тега <em>, но вас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Вы хотите выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое для этого нужно добавить в таблицу стилей, будет выглядеть так:
h1 em { color: #CC0000;background-color: gray;}
Вот пример кода страницы, на которой использован этот контекстный селектор:
<html>
<head>
<style>
h1 {color: red;background-color: gray; }
p { color: green;background-color: yellow;}
em { color: black;background-color: silver;}
h1 em {color: #CC0000;background-color: gray;}
</style>
</head>
<body>
<h1>Это - заголовок первого уровня с <em>выделенным</em>
словом</h1>
<p>А это - обычный абзац с <em>выделенными словами</em>
</p>
</body>
</html>
Создайте и просмотрите в браузере страницу с этим кодом.
Задание 2 – Создание сайта
Создать сайт, состоящий из нескольких HTML-документов, для оформления лабораторных работ по дисциплине.
Страница должна содержать не менее 4 блоков. Верхняя и нижняя часть страницы должны быть сделаны как отдельные таблицы или блоки, чтобы их можно было вставлять и на других страницах. Дизайн страниц разработать на свой вкус.
Для верстки HTML-документов использовать таблицы или блоки и стили.
При форматировании HTML-документов применить каскадные таблицы стилей CSS.
Создать в папке с вашим сайтом каталог /css/. В нем создать файл main.css. Подключить его ко всем страницам сайта с помощью тега <LINK>. В комментариях файла main.css пояснять все параметры.
В файле main.css обязательно помимо других параметров задать по умолчанию следующие свойства ссылок для всех страниц:
- цвет и оформление ссылки;
- цвет и оформление посещенной ссылки;
- цвет и оформление активной ссылки;
- цвет и оформление ссылки, в момент нахождения курсора мыши над ней.
Каждое задание выполнять в отдельном файле *.php. Все файлы сохранять в каталоге C:\WebServers\home\localhost\www\папка_группы.
1 Объявить две переменные: вывести их на экран в строковом формате.
2 Присвоить им числовые значения и вывести на экран результат сложения и умножения.
3 Дополнить программный код, чтобы значения переменных можно было задавать в текстовых полях (атрибуту NAME присваивается значение, равное имени переменной: <input type=text name=«a»>). Для выполнения действий в теге <form> указать метод GET.
Примечание: для того чтобы не выводилось сообщение об ошибке необходимо вначале перед объявлением тега формы прописать код:
<?php Error_Reporting(E_ALL & ~E_NOTICE); echo $a, $b; ?>;
4 Используя парный тег стилевого оформления <style>, задать стиль заголовка <h2>:
h2 {font-family:Garamond;
font-size:14pt;
color: #000FFF }
- вместо названия цвета и размера шрифта ввести фрагмент php-сценария с объявлением переменной: $colors и $fontsize соответственно.
- дополнить программный код, чтобы значения переменной можно было задавать в текстовом поле. Цвет рекомендуется указывать шестнадцатеричным числом (RGB) от 0000000(черный) до FFFFFF(белый).
- изменить программу таким образом, чтобы цвет можно было выбирать из списка (теги <select>, <option>).
Выполнение задания представлено на рисунке 4.
1. Объявить и заполнить индексный массив из изучаемых на факультете дисциплин (4-5 предметов). Вывести на экран 2-й элемент массива, все элементы массива.
2. Скопировать индексный массив и преобразовать его в ассоциативный. Вывести на экран все элементы массива.
3. Дополнить программный код, чтобы в текстовом окне можно было задавать номер индексного массива, а в выпадающем списке выбирать ключ ассоциативного массива. После нажатия на кнопку выбранные элементы отображаются на экране (рисунок 5).
Рисунок 5 - Работа с одномерными массивами
Задание 3 - Работа с формой
Написать HTML-документ, представляющий форму заказа товара и РНР-сценарий для решения задачи. HTML-документ (рисунок 6(а)) содержит форму и его элементы и служит для ввода исходных данных и вызывает РНР-сценарий. РНР-сценарий выполняет обработку данных и формирует новую HTML-страницу(рисунок 6 (б)) с результатами решения задачи.
Рисунок 6 - Скриншоты HTML-документа (а) и РНР-сценария (б)
Задание 4 - Решение уравнений
Решить квадратное уравнение ax2+bx+c=0. Коэффициенты должны вводиться посредством текстовых полей.
Задание 5 - Манипуляция строками
5.1 В предложении слова отделяются пробелами. Вывести слово с заданным номером.
5.2 Найти множество всех слов, которые встречаются в каждом из двух заданных предложений.
5.3 Для каждого из слов заданного предложения указать, сколько раз оно встречается в предложении.
Задание 1 - Основные манипуляции с файлами
1. Создать файл из 10 строк, например данные о студенте. Подсчитать количество строк в нем.
2. Добавить новую строку в конец файла.
3. Очистить файл и добавить в него строку.
4. Создать скрипт для удаления из файла нужной строки.
5. Создать скрипт для замены нужной строки в файле.
6. Считать из файла первые и последние 2 строки.
7. Вставить новые данные на 5 строку, а саму 5 строку передвинуть на 6.
Задание 2 - Работа с формой заказа
Изменить форму заказа (из 2 лабораторной работы), включив в нее адрес доставки клиента. Поле формы, предназначенное для ввода адреса доставки, носит название address.
Каждый из поступающих заказов необходимо записывать в один и тот же файл. Затем создать Web-интерфейс, чтобы можно было просматривать полученные заказы.
При открытии файла проверить существование его на сервере, если файл существует, вносить данные, если нет — создать файл с помощью соответствующей функции.
Данные из файла при просмотре выводить в таблицу.
Задание 3 - Пользовательская функция
1 Для решения квадратного уравнения необходимо создать функцию, которая будет рассчитывать дискриминант.
2 Написать функцию нахождения максимума массива.
Задание 4. Повторное использование кода
Необходимо разбить сайт, создаваемый в лабораторной работе №1, на части. Например на заголовок, тело и низ. Каждую часть оформить в отдельном файле(header.php, body.php, feather.php). С помощью оператора include() или require() включить все части сайта вместе .
Задание 1 - Создание базы данных
Создать базу данных «books», рассматриваемую в теоретической части, с помощью SQL Manager 2005 for MySQL.
Задание 2 - Создание запросов
Реализовать листинги: поиска, добавления новых элементов, рассмотренных в теоретической части лабораторной работы.
Задание 3 - Разработка интернет-сайта
Спроектировать структуру базы данных согласно варианту (таблица 1). Номер варианта равен последней цифре зачетки.
Подключиться к MySQL-серверу, создать таблицы, осуществить операции добавления, извлечения, изменения и удаления записей.
Таблица 1 – Варианты заданий
Таблица 1 – Варианты заданий
№ варианта
Варианты заданий
Спроектировать структуру базы данных о преподавателях кафедры: фамилия, должность, степень, номер комнаты, читаемые курсы.
Задание 1 - Идентификация пользователей
Поэтапно проработать все примеры, рассматриваемые в теоретической части.
Примечание: Для создания БД используйте менеджер MySQL.
Задание 2 – Разграничение доступа
Для спроектированной базы данных вашего варианта (лабораторная работа №4):
1 Создать дополнительную таблицу. Эта таблица должна хранить логины и пароли пользователей.
2 Создать скрипт, реализующий идентификацию пользователей и шифрование паролей.
Задание 1 – Создание гоствой книги
Создать на разрабатываемом сайте гостевую книгу.
Комментариев нет:
Отправить комментарий