Практическая работа № 1

«Создание Web – страницы»

Цель работы: Научиться создавать Web-страницы.

Задачи работы:

1. Познакомиться с языком HTML.

2. Овладеть техникой создания Web-страниц.

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот», персональный компьютер.

Требования к отчету: Итоги практической работы представить в виде файла lab1.html на диске.

Технология работы:

1.Создайте папку «Сайт» в папке «Мои документы». Откройте программу «Блокнот» в качестве простого инструмента для создания веб-страниц. Блокнот — это несложный текстовый редактор, используемый для создания простых документов. Наиболее часто программа «Блокнот» используется для просмотра и редактирования текстовых (TXT) файлов, для создания файлов веб-страниц (HTML). Программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для веб-страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных веб-страницах. Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.

Документ HTML всегда начинается с тега <HTML> и заканчивается закрывающим тегом </HTML>.

Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, идущие друг за другом.

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>. Простейший правильный документ HTML, содержащий все теги, определяющие структуру, имеет вид:

<HTML>

<HEAD> <TITLE> Заголовок документа </TITLE ></HEAD>

<BODY>

Текст документа

</BODY>

</HTML>

Задание:

2.Создайте Web-страницу, в которой должны присутствовать цветной текст, список, рисунок, таблица, используя стандартную программу Блокнот, используя примеры приведенной ниже таблицы.

Запустите Internet Explorer.

Откройте созданный файл.

Теги и примеры их оформления

Пояснения

<HTML>

<HEAD><TITLE>Курсовая работа</TITLE></HEAD>

<BODY>

Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD>

</HEAD>. Раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>

<P><FONT SIZE=”14”FACE=”ARIAL”COLOR=”RED”> Содержание </FONT>

Обычный абзац начинается с тега <P>

Тег <FONT> управляет параметрами шрифта, содержит атрибуты COLOR= цвет текста (например, “GREEN”, “RED”, и т.д.), FACE= гарнитура шрифта или имя шрифта (например, ARIAL и т.д.), SIZE= размер шрифта.

<H1> Введение </H1>

<H1> 1. Использование информационных технологий при решении экономических задач

</H1> 1.1 Классификация ИТ

<H2>

Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6>

Текст до ссылки.

Ссылка. </A>

Гипертекстовая ссылка определяется парным тегом <A>. Обязательным является HREF= (знак равенства показывает, что необходимо задать значение этого атрибута, т.е. адрес документа, на который указывается ссылка)

<IMG SRC= “picture.gif”

ALINE=”MIDDLE”>.

Вставка графического элемента (используется только два формата –GIF, JPEG). Для подготовки изображения можно использовать PAINT. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG> с обязательным атрибутом SRC=, задающим адрес файла с изображением. Атрибут ALINE= режим взаимодействия изображения с текстом (BOT-TOM – рисунок выше текста, MIDDLE – рисунок в середине текста,LEFT – левее, а RIGHT – правее текста).

</BODY>

</HTML>

<HTML>

<HEAD> <TITLE> Заголовок документа </TITLE></HEAD>

<BODY>

<P> Содержание

<UL>

<LI> <A HREF= “vvedenie.htm”> Введение

</A>

<OL>

<LI>Использование информационных технологий при решении экономических задач

<LI>Решение конкретной экономической задачи с использованием Excel

</OL>

Списки

Упорядоченные (нумерованные) списки создаются при помощи парных тегов <OL>, маркированные списки при помощи <UL>.

Эти списки могут содержать только элементы списка, определяемые парным тегом <LI>. Закрывающий тег </LI> можно опускать. Например, Содержание документа можно оформлять списком и использовать гиперссылки.

<LI><A HREF=”conclusion.htm”> Заключение</A>

</UL>

<BODY>

</HTML>

Содержание

Введение

1. Использование информационных технологий при решении экономических задач

2. Решение конкретной экономической задачи с использованием Excel

Заключение

<HTML>

<HEAD><TITLE> Заголовок документа

</TITLE></HEAD>

<BODY>

<TABLE>

<CAPTION>Таблица №1 </CAPTION>

<TH> Ф.И.О.<TH> Адрес

<TR><TD> Панова И.И.

<TD>Мира 6-21

<TR><TD> Мишина В.П.

<TD>Победы 47-154

<TR><TD> Новикова Е.Н.

<TD>Московская 23-4

</TABLE>

</BODY>

</HTML>

Таблица в языке HTML задается парным тегом <TABLE>. Заголовок таблицы определяется парным тегом <CAPTION>, строки таблицы задаются при помощи тегов <TR>. Ячейки в заголовках столбцов -парным тегом <TH>. Обычные ячейки - <TD>. Закрывающиеся теги можно опускать.

Таблица №1

Ф.И.О.	Адрес
Панова И.И.	Мира 6,21
Мишина В.П.	Победы 47,154
Новикова Е.Н.	Московская 23-4

3.Сохранить файл как lab1.txt в блокноте и как lab1.html для просмотра в браузере.

Практическая работа № 2

«Базовое оформление текста»

Цель работы: Научиться создавать и форматировать документ.

Задачи работы:

1. Овладеть методикой работы форматирования документа.

2. Получить навыки работы с обязательными тегами.

Требования к отчету: Итоги практической работы представить в виде файла lab2.html на диске

Технология работы:

1.Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 2»

2.Фон задать виде рисунка, имеющихся в директории.

3.Использовать шрифты Arial и Courier New, размер шрифта 14 и 12 для заголовка и текста;

4.Заголовок (по центру и соответствующим шрифтом);

5.Используя вложенные списки создать документ согласно образцу:

Классификация ПО для ПК

1. Введение

· Основные разновидности программ

2. Разновидности программ для компьютеров

ü Прикладные программы

ü Системные программы

ü Инструментальные программы

2.1 Системные программы

· Операционная система

· Драйверы

· Программы оболочки

2.2 Вспомогательные программы утилиты

i. программы упаковщики

ii. антивирусные программы

6.Сохранить файл как lab2.txt в блокноте и как lab2.html для просмотра в браузере.

Практическая работа № 3

«Создание гиперссылок»

Цель работы: Научиться создавать гиперссылки на выбранные документы.

Задачи работы:

1. Овладеть методикой работы по созданию гиперссылок.

2. Получить навыки работы с полосой навигации;

Требования к отчету: Итоги практической работы представить в виде файла lab3.html на диске.

Технология работы:

1. Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 3»

2. Задать цвет для непосещаемой, посещаемой и активной гиперссылок.

3. Задать фон и соответствующий шрифт документу.

4. Использовать шрифты Arial и Courier New

5. Практическая №1- гиперссылка на соответствующий файл –должна быть справа на экране;

6. Практическая №2- гиперссылка на соответствующий файл –должна быть справа на экране

7. Заголовок (по центру и соответствующим шрифтом);

8. « Предметы» оформить виде вложенных списков по образцу предложенному ниже;

9. «Специальности» -заголовок (по центру экрана и соответствующим шрифтом) написать сокращенное и расшифрованное название специальностей с использованием списков определений.

10. Используя вложенные списки создать документ согласно образцу:

Изучаемые предметы

v Предметы преподаваемые на первом курсе:

Ø Математика

Ø История

Ø Программирование

§ Теория

§ Практика

Ø Химия

Ø Физика

Ø География

v Предметы преподаваемые на втором курсе

v Предметы преподаваемые на третьем курсе:

Специальности :

· ФИН – Финансы 0603

· БХ - Экономика и бухгалтерский учет 0601

· АС – Автоматизированные системы обработки информации и управления 2202

· ПВ – Правоведение 0201

11. Сохранить файл как lab3.txt в блокноте и как lab3.html для просмотра в браузере.

Практическая работа № 4

«Использование шрифтов в HTML»

Цель работы: Научиться задавать командой FONT с помощью атрибутов цвет, размер, вид шрифтов.

Задачи работы:

1. Овладеть методикой работы с командой FONT.

2. Устанавливать различные шрифты в HTML - документе;

Требования к отчету: Итоги практической работы представить в виде файла lab4.html на диске.

Технология работы:

Теоретическая часть

Задание стилей для всех семейств шрифтов, используемых на компьютере, определятся явным заданием вида шрифта, которым будет выводится текст:

Шрифт	команда
Равноширинный шрифт (teletype)	<TT>
Полужирный текст (bold)	<B>
Курсив (italic)	<I>
~~зачеркнутый текст (strike)~~	<S> или <STRIKE>
подчеркнутый текст (underline)	<U>

Задание:

1. Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 4»

2. Задать цвет текста в документе, и цвет фона.

3. Задать шрифт текста Arial и Courier New

4. С помощью тэга <p> </p> параграф выровняйте текст по левому краю; по правому краю

5. Выделите текст при помощи заголовков, используя шесть уровней заголовков

6. Используя параметр <font size=”+4”> измените размер шрифта от + до - </font> для каждого абзаца;

7. Оформите текст абзацев полужирным , наклонным, подчеркнутым.

8. Загрузите практическую работу №2, где содержится «Классификация ПО для ПК». Создайте гиперссылку для Прикладные программы (во Введении) на фал lab4.html

9. Текст для практической работы:

НЕМНОГО ИСТОРИИ

В течение многих лет предпринималось немало попыток разработать концепцию универсальной информационной базы данных, в которой можно было бы не только получать информацию из любой точки земного шара, но и иметь удобный способ связи информационных сегментов друг с другом, так чтобы наиболее важные данные могли быть быстро найдены. В 60-е годы исследования в этой области породили понятие "информационной Вселенной" (docuniverse = documentation + universe), которая преобразила бы всю информационную деятельность. Но только в настоящее время появилась технология, воплотившая эту идею и предоставляющая возможности ее реализации в масштабах планеты.

WWW - "ВСЕМИРНАЯ ПАУТИНА"

WWW – это аббревиатура от "World Wide Web" ("Всемирная паутина").

Официальное определение World Wide Web звучит как мировая виртуальная файловая система – широкомасштабная гипермедиа-среда, ориентированная на предоставление универсального доступа к информационным ресурсам. Проект WWW возник в начале 1989 года в Европейской Лаборатории физики элементарных частиц (CERN) в Женеве (http://www.cern.ch/). Идея проекта состояла в создании гипертекстовой системы связи документов в компьютерной сети. Со временем World Wide Web (WWW, Web) превратилась в общемировую систему, состоящую из программного обеспечения – WWW технологий и связанных между собой документов.

Используя специальный программный интерфейс для WWW, изменился процесс просмотра и создания информации. Суть в том, что компьютер, подключенный к Интернет в режиме on-line, можно преобразовать в Web-сервер и наполнить его информацией. По всему миру существуют тысячи информационных серверов, и с любого компьютера, имеющего выход в Интернет, можно установить сетевое соединение с Web-сервером и смотреть текст, графику, видеоролики, слушать аудиоклипы (все это вместе и называется гипермедиа).

Первый такой сервер был организован в CERN, там же с целью развития и поддержки стандартов WWW технологий был создан The World Wide Web Consortium, или W3C. Web-сервер Консорциума http://www.w3.org/pub/WWW/ является интегрирующим сервером по поддержке WWW технологий в Интернет.

2-я часть задания- текст, где каждая строка имеет начертание, соответствующее тому, что написано. Между собой строки разделены линиями разного цвета.

Курсив

Жирный шрифт

Печатная машинка

Жирный курсив

Жирная печатная машинка

Курсив+печатная машинка

Подчеркнутый

~~Перечеркнутый~~

9. Сохранить файл как lab4.txt в блокноте и как lab4.html для просмотра в браузере.

Практическая работа № 5

«Гиперссылки. Задание размеров картинки»

Цель работы: Научиться задавать размеры картинки. Закрепить методику создания гиперссылок.

Задачи работы:

1. Овладеть методикой работы с графическими файлами;

2. Получить навыки работы по маршрутизации пути файла.

Требования к отчету: Итоги практической работы представить в виде файла lab5.html на диске.

Технология работы:

Теоретическая часть :

Для того, чтобы текст располагался весь рядом с картинкой используем тэги с параметрами. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <p> - <p align="justify">. Параметр align есть и у картинок:

<img src="pr1.png" align="left">Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:
<img src="pr1.png" align="right">
Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">

Кроме параметра align существует еще несколько параметров:

(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">

где:
(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.
(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).
(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.
Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметр для нашей картинки:
<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="персональный компьютер"> Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), и если вы наведете на картинку курсор, то выскочит надпись-"персональный компьютер ".

Выполните не компьютере:

1. Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 5» (под именем lab5.html), в котором содержится текст Введение.

2. Задать цвет текста в документе, и цвет фона.

3. Задать шрифт текста Arial и Courier New

4. Загрузите практическую работу №2, где содержится «Классификация ПО для ПК». Создайте гиперссылку для Введения:

5. Задать цвет для непосещаемой, посещаемой и активной гиперссылок.

6. Введение- гиперссылка на соответствующий файл (под именем lab5.html) содержащий информацию:

Введение

Персональные компьютеры – это универсальное устройство для обработки информации. В отличие от телефона, магнитофона или телевизора, осуществляющих только заранее заложенные в них функции, персональные компьютеры могут выполнять любые действия по обработке информации. Для этого необходимо составить для компьютера на понятном ему языке точную и подробную последовательность инструкций выполняемых на компьютере программах. Поэтому часто употребляемое выражение «компьютер сделал» (подсчитал, нарисовал) означает ровно то, что на компьютере была выполнена программа, которая позволила выполнить соответствующее действие. Меняя программы для компьютера, можно превратить его в рабочее место бухгалтера или конструктора, статистика или агронома, редактировать на нем документы или играть в какую-нибудь игру.

Таким образом, для эффективного использования компьютера (т.е. программу), как надо обрабатывать информацию. Сам по себе компьютер не обладает знаниями ни в одной области своего применения, все эти знания сосредоточены в необходимо знать назначение и свойства необходимых при работе с ним программ. Рассмотрим основные разновидности программ для персонального компьютера IBM PC.

Файл практ5 оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 5» Оформите его :

1. Использовать шрифты Arial и Courier New, применить курсив, жирный подчеркивание согласно тексту.

2. Практическая №1, Практическая №2- гиперссылка на соответствующий файл –должна быть внизу на экране;

3. Практическая №5- заголовок (по центру и соответствующим шрифтом);

4. Вставить рисунок, задав ему размеры с помощью параметра width - ширина самой картинки (в пикселях=300), примените параметр alt - краткое описание картинки.;

5. Расположите картинку по левому краю, а текст обтекает ее справа. Используя параметр align, например:
<img src="pr1.png" align="left">

6. Задайте расстояние между текстом и рисунком (по вертикали и горизонтали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 30 пикселям.

7. Используя параметр border - рамка вокруг самой картинки (в пикселях), задайте бордюр вокруг картинки.

8. Оформите страницу в едином стиле с практической работой №2 «Классификация ПО для ПК»

Сохранить файл как lab5.txt в блокноте и как lab5.html для просмотра в браузере.

Практическая работа № 6

«Таблицы»

Цель работы: Научиться создавать таблицы при помощи тэга <table></table>.
Задачи работы:

1. Овладеть методикой работы по созданию таблиц .

2. Получить навыки работы с командой <Table></Table>, атрибутами <tr></tr>,<td></td>

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот»; персональный компьютер.
Требования к отчету: Итоги практической работы представить в виде файла lab6.html на диске.

Технология работы:

Теоретическая часть :
При создании сайтов таблицы используются очень часто. Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы

Зададим таблицу состоящую из двух строк и трех столбцов (ячеек). Для наглядности ячейки таблицы выделены разными цветами. Границы таблицы не заданы, поэтому вы их не видите
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Заполните получившийся каркас цифрами:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Задаем фон для каждого столбца. В параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
Параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)).

Используем параметр colspan=2, прописав его для ячейки 1х1. Код следующий:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>

Попробуйте сами написать код для такой таблицы (у вас должна исчезнуть ячейка 2х3). Для закрепления напишите код для таблицы:

Можно избавиться от пространства между ячейками таблицы.
Это достигается с помощью атрибута cellspacing, равного нулю:
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можно увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое:
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign

<table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>
Выполните на компьютере:
Задание 1

1. Создайте файл lab6.html оформите как документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 6».

2. Практическая №6- заголовок (по центру и соответствующим шрифтом).

3. Создайте таблицы согласно заданию. Задать фон ячейкам желтый, зеленый, согласно рисунку:

1)	2)

1. Создать таблицу из трех строк и четырех столбцов, ширина таблицы составляет 60% от ширины экрана.

2. Ширина левого столбца составляет 30% от ширины таблицы.

3. Задать цвет фона для элементов таблицы, установить цвет рамки.

4. Создать общий заголовок: Работа с таблицами (по центру и соответствующим шрифтом);

9. Сохранить файл как lab6.txt в блокноте и как lab6.html для просмотра в браузере.
Задание 2
9. Создать документ, в котором в заголовке окна браузера должна быть надпись " Практическая 6 часть 2". С использованием команд создания таблицы сформировать таблицу по указанному заданию.
Обратить внимание на ширину первого столбца (задать в процентах от ширины таблицы), шрифт (курсив, Courier New, Arial) и расположение текста (по центру, слева, справа).

10. Сохранить файл как lab6-2.txt в блокноте и как lab6-2.html для просмотра в браузере.

Практическая работа № 7

«Фреймы»

Цель работы: Научиться создавать многооконные документы.
Задачи работы:

1. Овладеть методикой работы с тегом <frameset></frameset>и параметрами rows, cols.

2. Научиться присваивать имена окнам при помощи атрибута name команды<frame>.

Технология работы:

1. Создать документ, в котором в заголовке окна браузера должна быть надпись "Практическая 7".

2. С использованием команд создания многооконных документов сформировать 4 файла по указанному заданию. Дать им имя: фрейм_1.Html, фрейм_2.html и т.д.

3. Пример для 1-го фрейма:

1. Пример для 2-го фрейма:

<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>

1. Пример для 3-го фрейма: параметр cols делит окно браузера на колонки<frameset cols="100,150,*">

2. Остальные фреймы создайте согласно рисунку, самостоятельно.

7. Сохранить файл как lab7.txt в блокноте и как lab7.html для просмотра в браузере.

Практическая работа № 8

«Фреймы. Гиперссылки и активные рисунки»

Цель работы: Научиться создавать многооконные документы – фреймы.
Задачи работы:

Овладеть методикой создания фреймов командой FRAMESET.
Получить навыки работы c заполнением фреймов.

Технология работы:

Создать документ согласно рисунку, в котором в заголовке окна браузера должна быть надпись "Введение в HTML". Для этого необходимо создать 4 файла соответствующего содержания.
Прописать все гиперссылки на фрейм окна "menu",набрать для них текст, соответствующего содержания.
Создать бегущую строку «Краткое руководство по HTML»

Теоретическая часть:
Пример задания многооконного документа:
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Более сложные многооконные документы, наподобие данного руководства, создаются при помощи комбинации соответствующих команд FRAMESET. Например, мы хотим создать многооконный документ, наподобие того, каким является данное пособие, содержащий вверху не меняемый заголовок (его лучше всего задать картинкой), далее слева навигационное меню и справа два содержательных окна.
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<HTML>
<FRAMESET ROWS="10%, *">
<FRAME SRC="head.html">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Пример для подключения к файлу menu.htm гиперссылки слова «СОДЕРЖАНИЕ»
<HTML>
<HEAD>
<TITLE>Пример 12</TITLE>
</HEAD>
<BODY TEXT="#FF00" BGCOLOR="FFF0FF">
<CENTER>
<H1>меню </H1>
<p align="left">
<BR>
<BR>
<A HREF="coder.html" aligen=left width=300 height=300 alt="Тематический раздел по Веб-дизайну" border="0 ">СОДЕРЖАНИЕ</A>
<BR>
<BR>
КОМАНДЫ
<BR>
<BR> РАЗМЕТКА
<BR>
<BR> ШРИФТЫ
<BR>
<BR> СПИСКИ
<BR>
<BR>ГРАФИКА
</p>
<TEXTAREAA NAME="ИМЯ" ROWS="25" COLS="40">
</BODY>

Пример для бегущей строки:
<marquee height="10" width="270" loop="4" bgcolor="#99CCFF"><H1>Краткое руководство по HTML </H1> </marquee>
Пример для раскрытия ссылки в окне name="window-1">:
<frame src="content.html" name="window-1">
<a href="tururumki.html" target="window-1">Турурумки</a>
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
9. Сохранить файл как lab8.txt в блокноте и как lab8.html для просмотра в браузере.

Практическая работа № 9

«CSS – Каскадные таблицы стилей»

Цель работы: Научиться оформлять веб - страницы с использованием каскадных таблиц стилей CSS.
Задачи работы:

Овладеть методикой работы c атрибутом STYLE.

2. Получить навыки работы замены тегов на стилевое описание.

Технология работы:

Создайте стиль следующего образца:

Для команды скопируйте текст из практической работы №4 (файл lab4.html)

· Пустое поле сверху и снизу во всем документе

· Пустое поле слева - 5; пустое поле справа-2

· Цвет фона - светло-серый, цвет текста - черный.

Установите в данном тексте цвет непосещаемых гиперссылок – коричневый, посещаемых –зеленый, стиль шрифта – черный.
Абзацы: на белом фоне. У первого абзаца – вертикальная одинарная красная черта слева; у второго абзаца – вертикальная двойная синяя черта справа; у третьего абзаца никаких линий нет
Текст абзацев идет с отступом от края белого фона, с увеличенным интервалом между строками и с заданием «красной строки»
В первом заголовке получите объемный эффект. Для этого:

с помощью свойств margin-top и margin-left сделайте наложение двух строк текста
с помощью свойства font-size установите большой размер строк
с помощью свойства color - сделайте, чтобы вторая строка выглядела тенью
шрифт заголовка - Arial.

В первом абзаце слова "информационной Вселенной" идут жирным курсивом и с разрядкой.
Второй заголовок: желтого цвета на зеленом фоне, причем фон лишь немного шире заголовка, но уже основного текста. Буквы заголовка подчеркнуты и надчеркнуты.
Во втором абзаце, в первом предложении часть слов расположена выше основного текста, а часть слов - ниже. Это должно быть сделано средствами CSS.

Практическая работа № 10

«Формы»

Цель работы: Научиться. создавать формы.
Задачи работы:

1. Овладеть методикой работы по созданию форм с помощью команды FORM.

2. Получить навыки по созданию форм, кнопок командами: INPUT, SELECT, TYPE.

Технология работы:

1. Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. Создайте в окне «содержание » практической работы №8 следующие формы:

<HTML>

<HEAD>

<TITLE>Пример создания форм</TITLE>

</HEAD>

<H1>Несколько более сложная форма </H1>

<H2>Расскажите немного о себе...</H2>

<P>Указывать подлинные данные совсем не обязательно.

Для целей демонстрации вполне подойдут и вымышленные. </P>

Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>

Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской

<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>

Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>

<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>

</FORM>

</BODY>

</HTML>

Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Оформите: окна практической работы №8 в единой цветовой гамме BGCOLOR="FFF0FF", окно "main" на тон темнее; правой верхней части окна «head» вставьте «логотип»-HТML-прямоугольник 10х100, другие оформите по своему усмотрению.
2.Создайте все формы (Пример использования), приведенные в теоретической части. Покажите выполненное преподавателю.
Теоретическая часть:
Типы элементов формы
TYPE="TEXT"
Представляет собой одностроковое текстовое поле (рис. 10.1), физический размер которого можно установить с использованием атрибута SIZE, а первоначально введенную в него символьную последовательность — с помощью атрибута VALUE.

Рис. 10.1. Элемент формы TEXT
Примером использования данного элемента в коде HTML может служить следующая строка:
<INPUT TYPE='TEXT" SIZE="40" NAME="user_name" VALUE-''Введите ваше имя">TYPE="PASSWORD"
Тип, полностью аналогичный предыдущему, за исключением того, что вводимая пользователем в текстовое поле информация будет отображаться на экране символами «*», чтобы скрыть текст от постороннего зрителя.

TYPE="CHECKBOX"
Элемент, представляющий собой простую форму выбора, принимающую одно из двух устойчивых состояний: «отмечено» — «не отмечено» (рис. 10.2).

Рис. 10.2. Элемент формы CHECKBOX
Данный элемент оперирует так называемыми булевыми переменными, то есть переменными, каждая из которых может принимать значение «ИСТИНА» или «ЛОЖЬ». Каждый элемент формы CHECKBOX создает логическую пару значений вида «имя_элемента—состояние» и передает их на сервер. Для установки первоначального состояния элемента (отмечен, либо нет) используют атрибут CHECKED.
Пример использования:
<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes">

TYPE="RADIO"
Так называемая радиокнопка (рис. 10.3) применяется в случае, когда какая-либо логическая переменная может принимать только одно значение из множества возможных.

Рис. 10.3. Элемент формы RADIO
Все элементы RADIO одной формы обозначаются одним и тем же значением атрибута NAME. Использование радиокнопок требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.
Пример использования:
<Р АLIGN="СЕМТЕR">Пожалуйста, укажите ваш возраст</Р>
<CENTER>
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="0-12">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="13-17">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="18-25">
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="26-35" CHECKED>
<INPUT TYPE="RADIO" NAME= "user-age" VALUE="36-">
</CENTER>

TYPE="BUTTON"
Отображает обыкновенную кнопку (рис. 10.4), нажатие на которую приводит к какому-либо действию сервера.

Рис. 10.4. Элемент формы BUTTON
С помощью атрибута NAME данному элементу присваивается уникальное имя, атрибут VALUE позволяет изменять надпись, отображаемую на кнопке.
Пример использования:
<INPUT TYPE="BUTTON" VALUE="Button" NAME="B1">TYPE="SUBMIT"
Определяет кнопку, по нажатии которой данные из формы передаются серверу. Так же как и в предыдущем случае, надпись, отображаемая на кнопке, задается атрибутом VALUE.
Пример использования:
<INPUT TYPE="SUBMIT" VALUE="Отправить!">

TYPE="RESET"
Создает кнопку, которая очищает неправильно заполненную текстовую форму. Параметры и значения этой кнопки не передаются на сервер вместе с другими данными формы. Пример использования:
<INPUT TYPE="RESET" VALUE="Очистить форму">TYPE="FILE"
Генерирует на экране кнопку, по нажатии на которую на экране появляется Проводник Windows, позволяющий присоединить к отсылаемым на сервер данным любой файл с локального компьютера пользователя. Данный элемент применяется в основном в формах отправки с сервера сообщений электронной почты для организации вложений, а также для загрузки изображений на сервер. Обычно рядом с кнопкой отображается небольшое текстовое поле, куда автоматически заносится имя отсылаемого файла и путь к нему на локальном диске.
Пример использования:
<INPUT TYPE="FILE" NAME="picture">TYPE="IMAGE"
Создает кнопку отсылки, аналогичную элементу SUBMIT, но с использованием графического изображения, созданного пользователем. Обычно применяется вслучаях, когда стандартная серая прямоугольная кнопка «не вписывается» в дизайн сайта. URL к изображению, играющему роль кнопки, указывается атрибутом SRC, причем сам элемент может содержать собственные атрибуты, аналогичные применяемым в теге <IMG> (см. урок 5), в том числе ALIGN, ALT и др. Атрибуты NAME и VALUE трактуются так же, как аналогичные атрибуты элемента SUBMIT.
Пример использования:
<INPUT TYPE="IMAGE" SRC="/images/button.gif ALIGN="BOTTOM" NAME="submit" VALUE="Отправить!">
TYPE="HIDDEN"
Данный элемент является скрытым и не отображается на экране монитора пользователя. Применяется он для хранения и передачи на сервер информации о текущем состоянии формы: при нажатии кнопки SUBMIT элемент HIDDEN сформирует логическую пару переменных типа «имя—значение», которые будут отосланы серверу с помощью протокола HTTP. Элементы HIDDEN служат доступной альтернативой файлам cookies — специальным файлам, в которых сохраняются индивидуальные настройки пользователя и позволяющим, например, восстановить последнее состояние формы при повторном посещении пользователем содержащей эту форму страницы.
Пример использования:
<INPUT TYPE="HIDDEN" NAME="forml" VALUE="c3576-236-2113">
Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм. Например, текстовые поля, задаваемые атрибутами TEXT и PASSWORD, весьма ограничены по количеству символов, которые можно ввести в эти поля. Если перед web-мастером встала задача создать такие текстовое поля, чтобы пользователь мог вводить большое количество символов, используется самостоятельный тег <TEXTAREA>, формирующий на экране одноименный элемент формы (рис. 10.5).

Рис. 10.5. Элемент формы TEXTAREA
Синтаксис записи данного тега выглядит следующим образом:
<TEXTAREA МАМЕ="имя элемента" ROWS-''целое число" СOLS="целое число">
Текст, выводимый в текстовом поле по умолчанию</TEXTAREA>
С атрибутом NAME, определяющим индивидуальное имя каждого элемента формы, вы уже знакомы. Атрибуты ROWS и COLS указывают соответственно максимально допустимое количество строк вводимого текста и символов в строке. В случае если набираемый пользователем текст не умещается в видимую часть текстового контейнера, по краям поля появляются вертикальные и горизонтальные полосы прокрутки для скроллинга содержимого элемента TEXTAREA.
Пример использования:
<TEXTAREA NAME="message" ROWS="25" COLS="40">
Введите сюда текст сообщения
</TEXTAREA>
Для создания меню выбора в форме (рис. 10.6) web-мастер может воспользоваться тегом <SELECT>.

Рис. 10.6. Элемент формы SELECT
Синтаксис записи данного тега в общем виде выглядит так:
<SELECT NAME="имя" MULTIPLE SIZE="целое число">
<OPTION VALUE="Пункт 1">Пункт 1</OPTION>
<OPTION VALUE-''Пункт 2">Пункт 2</OPTION>
<OPTION VALUE="Пункт 3">Пункт 3</OPTION>
OPTION VALUE="Пункт N">Пункт N</OPTION>
</SELECT>
Атрибут MULTIPLE определяет для пользователя возможность отметить не одну, а сразу несколько позиций из предложенного списка. Если данный атрибут задан, можно воспользоваться атрибутом SIZE, определяющим количество позиций, видимых на экране одновременно.
Пример использования:
<Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р>
<CENTER>
<SELECT NAME="City" MULTIPLE SIZE="3">
OPTION VALUE="a">Санкт-Петербург</OPTION>
OPTION VALUE="b">Mocква</OPTION>
<OPTION VALUE="c">Екатеринбург</OPTION>
</SELECT>
</CENTER>
3. Создайте все формы из теоретической части и сохраните их в файле form_10.txt, form_10.html
4. Сохранить файл как lab10.txt в блокноте и как lab10.html для просмотра в браузере.

Практическая работа № 11

«Графика»

Цель работы: Отработать включение графических файлов в HTML документы.
Задачи работы:

1. Овладеть методикой работы с графическими файлами с помощью команды IMG.

2. Получить навыки работы c атрибутом ALIGN;

Технология работы:

Теоретическая часть:
Включение графики в web-страницу. Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:
<IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст">
В качестве параметра атрибута SRC указывается путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например, . ./images/picture.jpg).
ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, например picture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.
С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута:
ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка.
BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.
MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.
BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.
В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.
Атрибут ALT содержит альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.
Пример применения тега <IMG>:
<IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый закат на берегу Карибского моря">
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:
<А HREF="URL документа, на который организуется ссылка">
<IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение" HEIGHT="значение"
АLТ="Альтернативный текст" BORDER="значение"></A>
Как видите, особых отличий в написании этих команд от их традиционного синтаксиса в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным нулю.
Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:
<А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg" ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A>
Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.
Выполните на компьютере:
1. С помощью любого графического редактора, позволяющего оперировать текстурными заливками, например пакета Corel Draw, подготовьте простой файл, заполненный однородной текстурой (рис. 5.13). Сохраните этот файл на диске в своей директории C:\MySite\Images под именем background.gif. Поместите в ту же папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.

Рис. 5.13. Файл bockground.gif
2. Создайте файл lab11.html дополните тег <BODY> атрибутом BACKGROUND. Данная строка будет выглядеть следующим образом:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#OOOOFF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
После тегов <Н1> </Н1>, определяющих стиль заголовка, добавьте еще одну строку кода:
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" А1_Т="Это моя фотография">
Таким образом, код данного участка нашего html-документа будет иметь следующий вид:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><HTML><HEAD>
<TITLE>Mofl домашняя страничка</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"ALINK="#FF0000" BACKGROUND="Images\background.gif">
<H1 ALIGN="CENTER"> ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</Н1><BR>
<IMG SRC="C:\MySite\Images\mypicture.JPG" ALIGN="LEFT" WIDTH="150"HEIGHT="223" HSPASE="5" ALT="Этоo моя фотография">
<P ALIGN="JUSTIFY"> и т. д.

1. Создайте свою домашнюю страницу согласно образцу. Сохраните внесенные в документ изменения и откройте вашу страничку в броузере (рис. 11.1).

Рис. 11.1. Web-страница после внесения изменений в код HTML

3.Покажите работу преподавателю.
4. Сохранить файл как lab11.txt в блокноте и как lab11.html для просмотра в браузере.

Практическая работа №12

«Анимация»

Цель работы: Научиться создавать анимационное изображение.
Задачи работы:

1. Получить навыки работы с функцией animate.

Технология работы:

1. function openWin(AddressURL,NUM) { if (NUM == 1) {VarWin = "width=300,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} else {VarWin = "width=500,height=300,status=no,toolbar=no,menubar=no,scrollbars=no"} open(AddressURL,"DWIN"+NUM,VarWin) } Создайте пример анимационного изображения, используя функцию animate. Размер всех картинок - 400x60 пикселей. Кроме кнопок "Быстрее" и "Медленнее", добавить еще кнопки "Стоп" и "Старт" (подумайте, как это можно сделать). Использование данной функции зависит от типа просмотрщика:

2. Сохранить файл как lab12.txt в блокноте и как lab12.html для просмотра в браузере.

Практическая работа №13

Графические часы

Цель работы: Создать графические часы.
Задачи работы:

Овладеть методикой работы с функцией clockTick() .

Технология работы:

Первый пример - это часы, отображающие время загрузки страницы (т.е. момент вызова скрипта). Используются методы объекта Date (getHours, getMinutes) и графические файлы, отображающие полученное время (имена этих файлов соответствуют цифрам 0-9).

Во втором примере, отображающем текущую дату, также используются методы объекта Date (getDate, getMonth, getYear) и графические файлы, отображающие полученную дату.

Задание - сделать идущие часы.
Для этого:

Задать пары для 10 цифр вида
dig0 = new Image(); dig0.src = "dg0.gif";
Создать таблицу, в которой будут выводиться цифры.
В таблице использовать команды <IMG> с обязательным атрибутом name:
<img name="dg1" src="dg0.gif" width=16 height=21>
Написать функцию clockTick(), в которой

вычисляется текущее время (час, минуты, секунды);
с помощью вспомогательной функции setRis() определяется, какая картинка куда выводится;
с помощью функции setTimeout("clockTick()", 1000) запускается сама clockTick().

Функция setRis() должна иметь два аргумента: первый аргумент - какая цифра должна быть, второй аргумент - вместо какой картинки что подставлять. Для этого использовать конструкцию вида
ris.src = dig0.src (для цифры 0).

В качестве значения аргумента ris должно передаваться соответствующее значение атрибута name из команды <IMG>.

Картинки:


dg0.gif	dg1.gif	dg2.gif	dg3.gif	dg4.gif	dg5.gif	dg6.gif	dg7.gif	dg8.gif	dg9.gif


dgam.gif	dgpm.gif	dgc.gif	dgp.gif

. Сохранить файл как lab13.txt в блокноте и как lab13.html для просмотра в браузере.

Скачано с www.znanio.ru

Практическая работа № 1 «Создание

HTML> <HEAD> <TITLE> Заголовок документа </TITLE ></HEAD> <

SIZE = размер шрифта. <

TITLE></HEAD> <BODY> <P>

HTML> <HEAD><TITLE> Заголовок документа </TITLE></HEAD> <BODY> <TABLE> <CAPTION>

Практическая работа № 2 «Базовое оформление текста»

Системные программы ·

Практическая работа № 3 «Создание гиперссылок»

Используя вложенные списки создать документ согласно образцу:

Практическая работа № 4 «Использование шрифтов в

Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 4» 2

CERN) в Женеве (http://www.cern

Практическая работа № 5 «Гиперссылки

Расстояние задается в пикселях (pixel - минимальная единица изображения, точка

Выполните не компьютере: 1.

Рассмотрим основные разновидности программ для персонального компьютера

Практическая работа № 6 «Таблицы »

Заполните получившийся каркас цифрами: <table> <tr> <td> 1x1 </td> <td> 1x2 </td> <td> 1x3 </td> </tr> <tr> <td> 2x1 </td> <td> 2x2 </td> <td> 2x3…

FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="#336699"> <center>2x3</center> </td> </tr> </table>

FFCC33" valign="bottom" > <center>2x2</center> </td> </tr> </table>

Сохранить файл как lab6-2.txt в блокноте и как lab6-2

Практическая работа № 7 «Фреймы »

Хождение по фреймам </title> <frameset rows="100,*"> <frame src="logo

Практическая работа № 8 «Фреймы

HTML> <FRAMESET ROWS="10%, *"> <FRAME

CENTER> <H1>меню </H1> <p align="left"> <BR> <BR> <A

Практическая работа № 9 «CSS –

В первом абзаце слова "информационной

Практическая работа № 10 «Формы »

SELECT NAME="selection"> <OPTION

Рис. 10.2. Элемент формы CHECKBOX

VALUE. Пример использования: <INPUT

Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм

Пример использования: <Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р> <CENTER> <SELECT

Практическая работа № 11 «Графика »

BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки

Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два:

Создайте свою домашнюю страницу согласно образцу

Практическая работа №12 «Анимация »

Практическая работа №13 Графические часы

Timeout("clockTick()", 1000) запускается сама clockTick()

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

14.05.2021

Практические работы HTML (сборник)

«Гиперссылки. Задание размеров картинки»

«Анимация»

Графические часы

Картинки:

Практическая работа № 1 «Создание

HTML> <HEAD> <TITLE> Заголовок документа </TITLE ></HEAD> <

SIZE = размер шрифта. <

TITLE></HEAD> <BODY> <P>

HTML> <HEAD><TITLE> Заголовок документа </TITLE></HEAD> <BODY> <TABLE> <CAPTION>

Практическая работа № 2 «Базовое оформление текста»

Системные программы ·

Практическая работа № 3 «Создание гиперссылок»

Используя вложенные списки создать документ согласно образцу:

Практическая работа № 4 «Использование шрифтов в

Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая 4» 2

CERN) в Женеве (http://www.cern

Практическая работа № 5 «Гиперссылки

Расстояние задается в пикселях (pixel - минимальная единица изображения, точка

Выполните не компьютере: 1.

Рассмотрим основные разновидности программ для персонального компьютера

Практическая работа № 6 «Таблицы »

Заполните получившийся каркас цифрами: <table> <tr> <td> 1x1 </td> <td> 1x2 </td> <td> 1x3 </td> </tr> <tr> <td> 2x1 </td> <td> 2x2 </td> <td> 2x3…

FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="#336699"> <center>2x3</center> </td> </tr> </table>

FFCC33" valign="bottom" > <center>2x2</center> </td> </tr> </table>

Сохранить файл как lab6-2.txt в блокноте и как lab6-2

Практическая работа № 7 «Фреймы »

Хождение по фреймам </title> <frameset rows="100,*"> <frame src="logo

Практическая работа № 8 «Фреймы

HTML> <FRAMESET ROWS="10%, *"> <FRAME

CENTER> <H1>меню </H1> <p align="left"> <BR> <BR> <A

Практическая работа № 9 «CSS –

В первом абзаце слова "информационной

Практическая работа № 10 «Формы »

SELECT NAME="selection"> <OPTION

Рис. 10.2. Элемент формы CHECKBOX

VALUE. Пример использования: <INPUT

Однако с помощью тега <INPUT> можно передать далеко не все доступные web-дизайнеру элементы форм

Пример использования: <Р АLIGN ="CENTER">Пожалуйста, укажите ваш город</Р> <CENTER> <SELECT

Практическая работа № 11 «Графика »

BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки

Помимо описанных атрибутов тега <IMG> в команде вызова изображения иногда используют еще два:

Создайте свою домашнюю страницу согласно образцу

Практическая работа №12 «Анимация »

Практическая работа №13 Графические часы

Timeout("clockTick()", 1000) запускается сама clockTick()