«Дополнительная цветовая схема и логотип» Лабораторная работа №6 Создание html-документа. Формы.
Цели работы: Научиться создавать файлы, содержащие элементы форм, предписанные языком HTML.
Ход работы:
Формы предназначены для размещения ответов на адресованные Вами посетителям вопросы. Web-форма - это то же самое, что и любая другая бумажная форма. Чаще всего они используются для:
• проведения опросов;
• получения отзывов.
Для создания простых форм используется теги <FORM> и </FORM>.
При помощи элемента <TEXTAREA> </TEXTAREA> создается область для ввода или просмотра текста. Элемент SELECT предназначен для создания списка или меню на гипертекстовой странице, а элемент OPTION - для создания пункта списка.
Элементы SELECT и TEXTAREA применяются в тех случая, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, чем стандартные списки. Область ввода текста также поможет сэкономить место на странице за счет того, что сколь угодно большой текст будет прокручиваться в окне фиксированного размера.
Все параметры задаются при помощи атрибутов. См. таб.1
Таблица 1
|
type="text" |
создание поля ввода. В нем можно автоматически разместить произвольный текст, использовав атрибут value. |
|
type="password" |
создание строки для ввода пароля. Введенная информация отображается звездочками. |
|
type="checkbox" |
создание флажка. |
|
type="radio" |
определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов input. |
Готовая
форма страницы:
Лабораторная работа №7 Размещение страницы в Интернете.
Цели работы: научиться размещать страницы в Интернете.
Ход работы:
1. Я зарегистрировалась на http://yandex.ru/, получила учетную запись и пароль для доступа к ресурсам сервера для размещения своего сайта на narod.ru.
2. Чтобы воспользоваться протоколом FTP, понадобится специальная программа, так называемый FTP-клиент. В качестве него я использовала программу FileZilla(Рис.1).
Рис.1«Вид программы FileZilla»
3. В поле Хост вводим адрес сервера.
В моём случае это chizhik-hell.ftp.narod.ru (Рис.2)
Рис.2«Адрес сервера»
Имя пользователя: chizhik-hell и пароль. Затем нажимаем Быстрое соединение (Рис.3). Программа готова для размещения файлов для сайта.
Рис.3«Быстрое соединение»
4. У нас есть два поля: Локальный сайт (Рис.4) и Удалённый сайт (Рис.5). Открываем на локальном сайте нужную нам папку с готовым сайтом и файлами для него, выделяем, копируем и переносим на Удалённый сайт.
Рис.4«Локальный сайт»
Рис.5«Удалённый сайт»
Сайт готов для использования. Его адрес: http://chizhik-hell.narod.ru/
Рис.6 «Вид главной страницы»
Лабораторная работа №8 Основы работы с JavaScript.
Цель работы: Изучить основы языка программирования JavaScript.
Ход работы:
1. Создаём документ с именем index.html и вставляем туда основную часть документа:
<html> <head> </head> <body> </body> </html>
2. В головной части задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
<div></div> используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
В браузеронезависимой вёрстке обычно используется для выравнивания блока html-кода в окне браузера.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Рис.1 «Элемент div»
На рисунке видно, что ссылка на картинку и подпись к ней расположены в <div> и расположены по центру.
3. Текст заключаем в параграф <p></p>. Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте <br>. Также для использования css для разных элементов документа нужно задавать им имена, например см.Рис.2.
Рис.2 «Имя элемента»
Имя задаётся при помощи конструкции id=”имя”, заключённой в скобках элемента <>.
4. Для вставки картинки используется конструкция
<img src="адрес/имя.расширение">.
Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую конструкцию (Рис.3).
5. JavaScript — это язык программирования, предназначенный прежде всего для создания интерактивных HTML-страниц.
Рис.3 «Текст программы»
Текст программы заключен между тегами <SCRIPT> и </SCRIPT>.
Программа состоит из одной функции click_func(), которая, в свою очередь вызывает стандартную функцию write объекта document. Эта функция выводит на экран текст, передаваемый в качестве параметра и стирает все, что содержалось на странице до ее вызова.
Объект document создается браузером в момент загрузки страницы.
Рис.4 «Вставка кнопки»
Функция активизируется по событию onClick — нажатие на кнопку. Результатом выполнения программы является вывод на экран окна предупреждения с заданным текстом.
Рис.5 «Кнопка»
Рис.6 «Действие кнопки»
6. Мы можем заменить изображение динамически, используя JavaScript.
Рис.7 «Текст программы»
Данной программой при наведении мыши на изображение 2.jpg, картинка будет меняться на 1.jpg, и наоборот, при удалении указателя мыши с поверхности изображения, оно вернётся в прежнее состояние.
Рис.8 «2.jpg и 1.jpg»
7. Итоговый вид страницы
