- •Міністерство освіти і науки україни
- •Методические указания
- •Порядок выполнения работ
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №2 Списки и таблицы в html.
- •2. Методические указания
- •3. Порядок выполнения работ
- •Атрибуты table:
- •Атрибуты td, th:
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа № 3 Создание html-страницы с резюме.
- •2. Краткие теоретические сведения – правила составления резюме
- •Образец (пример) составления (написания) резюме
- •3. Методические указания
- •Лабораторная работа №4 Каскадные таблицы стилей (css).
- •2. Методические указания
- •3. Порядок выполнения работ
- •4. Порядок выполнения работы
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №5 html Формы.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Практическое задание
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №6 Резка и верстка веб-страниц.
- •Методические указания
- •Порядок выполнения работ
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №7 Обработка событий в html.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Практическое задание
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №8 Основы синтаксиса JavaScript
- •2. Методические указания
- •4. Теоретические сведения
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №9 Математические функции JavaScript. Объект Math.
- •2. Методические указания
- •3. Теоретические сведения
- •4. Содержание отчёта
- •5. Контрольные вопросы
- •Лабораторная работа №10 Объект JavaScript – document.
- •2. Методические указания
- •3. Теоретические сведения
- •Лабораторная работа №11 Объект JavaScript – Date.
- •Методические указания
- •Теоретические сведения
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №12 Объект JavaScript – Image.
- •Методические указания
- •Теоретические сведения
- •Содержание отчёта
- •Контрольные вопросы
- •Лабораторная работа №12 Объект JavaScript – window.
- •Методические указания
- •Теоретические сведения
- •4. Задания:
- •5. Содержание отчёта
- •6. Контрольные вопросы
- •Лабораторная работа №14
- •2. Методические указания
- •3. Теоретические сведения
- •4. Задания:
- •5. Содержание отчёта
- •6. Контрольные вопросы:
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
імені Володимира Даля
Методичні вказівки до виконання лабораторних робіт
з дисципліни «web-технології»
Луганськ 2011
Лабораторная работа №1 4
Структура HTML документов и основные теги. 4
Более опытные пользователи могут воспользоваться любым специализированным редактором HTML страниц (Macromedia Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio) 4
Лабораторная работа №2 10
Списки и таблицы в HTML. 10
Лабораторная работа № 3 18
Создание HTML-страницы с резюме. 18
Лабораторная работа №4 23
Каскадные таблицы стилей (CSS). 23
Лабораторная работа №5 30
HTML Формы. 31
Лабораторная работа №6 35
Резка и верстка веб-страниц. 35
Лабораторная работа №7 38
Обработка событий в HTML. 38
Лабораторная работа №8 42
Основы синтаксиса JavaScript 42
Лабораторная работа №9 48
Математические функции JavaScript. Объект Math. 48
48
Лабораторная работа №10 55
Объект JavaScript – document. 55
Лабораторная работа №11 60
Объект JavaScript – Date. 60
Лабораторная работа №12 67
Объект JavaScript – Image. 67
Лабораторная работа №12 73
Объект JavaScript – window. 73
Лабораторная работа №14 77
Основы Dynamic HTML. Работа со слоями 77
Міністерство освіти і науки україни
СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ
імені Володимира Даля
Методичні вказівки до виконання лабораторних робіт
з дисципліни «web-технології»
Луганськ 2011
Лабораторная работа №1
Структура HTML документов и основные теги.
Цель Изучить структуру HTML документа, освоить и научиться применять на практике основные теги HTML.
Методические указания
При изучении конструкций языка HTML можно использовать любой текстовый редактор. Для получения HTML файла, сохраняйте свои изменения как текстовые, для файла используйте расширение *.htm или *.html.
Более опытные пользователи могут воспользоваться любым специализированным редактором HTML страниц (Macromedia Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio)
Создаваемые файлы необходимо тестировать в основных браузерах Internet Explorer, Mazilla Firefox, Opera.
Отлаженные файлы необходимо сохранять в отдельном каталоге.
По окончанию работы сохраните все созданные файлы на своих носителях.
Порядок выполнения работ
Запустите программу "Блокнот" (notepad.exe). Создайте файл с именем и расширением <Ваша фамилия>.htm.
В этом файле наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Лабораторная работа №1.<Ваша фамилия></TITLE>
</HEAD>
<BODY>
Так выглядит простейший файл HTML.
</BODY>
</HTML>
Наберите по очереди параметры тега BODY и проверьте результат:
Атрибут BODY |
Назначение |
BACKGROUND |
Указывает на URL-адрес изображения или имя файла, которое используется в качестве фонового. На экран выводятся повторяющиеся копии картинки, поверх которых показывается текст. Для фона желательно подбирать неконтрастные изображения |
BGCOLOR |
Определяет цвет фона документа |
Атрибут BODY |
Назначение |
ALINK |
Определяет цвет активной ссылки. |
VLINK |
Определяет цвет уже просмотренной ссылки. |
LINK |
Определяет цвет еще не просмотренной ссылки. |
ТЕХТ |
Определяет цвет текста. |
LEFTNARGIN |
Устанавливает границу левого поля в пикселях. |
TOPMARGIN |
Устанавливает границу верхнего поля в пикселях. |
RIGHTMARGIN |
Устанавливает границу правого поля в пикселях. |
BOTTOMMARGIN |
Устанавливает границу нижнего поля в пикселях. |
<BODY BGCOLOR="red" LINK="#2000C0" VLINK="900020" ALINK="#336633" TEXT="#000000">
Премините теги <BR>, <I>, <B>, <U>, <S>:
<I>Ваше Имя</I><BR>
<B>Ваша Фамилия</B><BR>
<U>Ваше Отчество</U><BR>
<S>Ваша группа</S><BR>
Попробуйте группировать теги. Например:
<U><B><I>ФИО</I></B></U><BR>
Используйте тег <FONT>:
имя атрибута |
возможные значения |
описание |
примечания |
FACE |
Times New Roman, Courier, Arial, Helvetica |
позволяет указать как один, так и несколько шрифтов (через запятую). |
Это весьма полезное свойство, так как платформы Windows и Macintosh имеют почти идентичные шрифты, называющиеся по-разному. Весь список будет просмотрен слева направо, и первый из имеющихся на машине пользователя будет использован для вывода документа. |
имя атрибута |
возможные значения |
описание |
примечания |
SIZE |
1-7, +/- 1-7 |
Этот атрибут служит для указания размера шрифта в условных единицах от 1 до 7 |
Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Последний метод чаще употребляется. |
COLOR |
|
Этот атрибут устанавливает цвет шрифта, который может быть указан как в формате RGB, так и стандартным именем |
|
<FONT SIZE=3 FACE="Verdana, Arial, Helvetica" COLOR="GREEN">ФИО</FONT>
Для проведения горизонтальной линии используется тег <HR>
Атрибуты <HR>
Назначение
ALIGN
Выравнивает по краю или центру; имеет значения LEFT, CENTER,RIGHT.
WIDTH
Устанавливает длину линии в пикселях или процентах от ширины окна браузера; в последнем случае добавляется символ % и значение обязательно заключается в кавычки
SIZE
Устанавливает ширину линии в пикселях.
NOSHADE
Отменяет рельефность линии.
COLOR
Указывает цвет линии. Используется формат RGB или стандартное имя.
Сделайте ссылку на страничку http://www.google.com.ua
имя атрибута |
возможные значения |
описание |
HREF |
URL |
Задание адреса гиперссылки в URL формате |
NAME |
|
задает символическую метку внутри документа, для переходов в это место документа |
TITLE |
|
Определяет заголовок, который появляется когда мышь "находит" на ссылку или во время загрузки документа. |
TARGET |
window, _blank, _parent, _self, _top |
Определяет место (окно) загрузки документа. |
<A HREF="1.htm">Лабораторная номер … </A> <A HREF="http://www.google.com.ua">Самая лучшая поисковая система</A>
Относительный адрес
Файл, который находится в том же (текущем) каталоге, что и читаемый документ задается своим именем. Файл document.htm, который находится в подкаталоге directory текущего каталога, задается как directory/document.htm . Обратите внимание, в отличие от MS-DOS, каталог обозначается прямой, а не обратной, косой чертой. Родительский каталог обозначается двумя точками ../ .
Если вместо имени файла задать каталог, то в зависимости от настройки сервера, будет использован файл index.htm этого каталога, сгенерирован файл с оглавлением каталога, или возвращена ошибка.
Абсолютный адрес
Если полное имя файла начинается с косой черты, то указан его путь относительно корневого каталога документов, который не совпадает с корневым каталогом компьютера.
Вставьте картинку в ваш документ. Для вставки в текст картинки используется одиночный тег <IMG SRC="адрес графического файла"> с одним обязательным атрибутом SRC. Адрес задается так же, как и адрес ссылки. Вставлять изображения можно следующих форматов: jpg, gif, png, bmp.
-
имя атрибута
возможные значения
описание
примечания
SRC
URL
адрес изображения
обязателен
ALT
строка
текстовое описание изображения
ALIGN
TOP, MIDDLE, BOTTOM, LEFT, RIGHT
позиционирование изображения относительно текущей текстовой строки
TOP –позиционирует верх изображения с верхом текущей текстовой строки.
MIDDLE
- выравнивает середину изображения по основной текстовой строке.
BOTTOM
(по умолчанию) –выравнивает низ изображения по основной строке.
LEFT
– перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль правой стороны изображения.
RIGHT – перемещает изображение к текущему правому краю.
HEIGHT
целое
высота в пикселях
WIDTH
целое
ширина в пикселях
BORDER
целое
ширина бордюра (рамки) в пикселях
используется, когда элемент IMG появляется, как текст якоря; используйте BORDER=0 для подавления рамки
HSPACE
целое
ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях
VSPACE
целое
высота незаполненного пространства выше и ниже изображения в пикселях
<IMG SRC="primer.jpg" ALT="Pic Primer" WIDTH=110 HEIGHT=168 ALIGN=RIGHT>
Измените вид странички следующим образом:
Задайте отличные от установленных по умолчанию цвета: текста, фона и гиперссылок. Задайте отступ для строки от верхнего и левого края окна браузера. Сделайте так, чтобы цвет второго абзаца был отличен от первого.
Вставьте между абзацами картинку и обведите её рамкой с толщиной более 1 пикселя. Установите текст второго абзаца справа от картинки на определённом расстоянии.
Добавьте после абзаца с картинкой и до гиперссылки красную нерельефную линию шириной в 2 пикселя и длиной 80% от ширины окна браузера, выровняв её по середине странички.
Просмотрите свою страницу в двух различных браузерах и сделайте соответствующие выводы.