Градации красного

Код

Цвет

Код

Цвет

#010000

#800000

#100000

#900000

#200000

#A00000

#300000

#B00000

#400000

#C00000

#500000

#D00000

#600000

#E00000

#700000

#FF0000

Градации зеленого

Код

Цвет

Код

Цвет

#000100

#008000

#001000

#009000

#002000

#00A000

#003000

#00B000

#004000

#00C000

#005000

#00D000

#006000

#00E000

#007000

#00FF00

Градации синего

Код

Цвет

Код

Цвет

#000001

#000080

#000010

#000090

#000020

#0000A0

#000030

#0000B0

#000040

#0000C0

#000050

#0000D0

#000060

#0000E0

#000070

#0000FF

 

Горизонтальная линия в качестве цветного прямоугольника:

 

А так может выглядеть компьютерная радуга:

К

О

Ж

З

Г

С

Ф

Варианты оранжевого цвета:

Код

Цвет

#FFB000

1

#FFA800

2

#FFA000

3

#FF9800

4

#FF9000

5

#FF8800

6

#FF8000

7

#FF7800

8

#FF7000

9

#FF6800

10

#FF6000

11

#FF5800

12

ЛАБОРАТОРНАЯ РАБОТА № 5

ИСПОЛЬЗОВАНИЕ УКАЗАТЕЛЕЙ И ССЫЛОК

ГИПЕРССЫЛКИ И РИСУНКИ.

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

НЕ нашли? Не то? Что вы ищете?

Тег гиперссылки

Гиперссылки в HTML - документах создаются с помощью специальных тегов. Чаще всего используют такой шаблон:

1.Произвольный текст <A ATRIBUTE = "Адрес ссылки"> текст для щелчка </a>

Или такой

2.<A href ="Адрес сылки"> <IMG src = "Ссылка на рисунок"> </a>

Первый шаблон применяется в том случае, когда видимую часть гиперссылки представляет собой текст. Именно на нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования. Более подробно рассмотрим этот атрибут чуть позже.

Вернемся к формату атрибута текстовой гиперссылки <A ATRIBUTE = "Адрес ссылки">.

В левой части вместо ATRIBUTE следует подставить href или name. GREF указывает на гиперссылку, т. е. текст расположенный справа от знака "=", является тем документом, на который указывает гиперссылка. Общий вид формата тега с этим атрибутом следующий :

<A href="Адрес ссылки"> Текст для щелчка </a>

NAME - указывает на помеченное место в самом документе. Формат его прост:

<A name="Фрагмент">

Вы можете использовать данный атрибут для того, чтобы быстро находить фрагменты самого HTML- документа. Просто добавьте в нужное место метку :

<A name="Фрагмент">,

а затем в том же документе создайте гиперссылку:

<A href="#Фрагмент">

СОЗДАНИЕ ССЫЛОК НА ЛОКАЛЬНЫЕ ДОКУМЕНТЫ

Самые простые ссылки - это те, которые указывают на документы, хранящиеся на одном компьютере. Например, у вас есть два документа, расположенных в одной папке: first1.html и first2.html. Чтобы пользователь мог открыть второй документ из первого, вы включаете в текст первого соответствующий тег, например:

Задание 1.

<HTML>

<HEAD>

<TITLE> Просто HTML-документ, содержащий локальную ссылку </title>

</head>

<BODY>

<H1> Документ с гиперссылкой на локальный файл </h1>

Добро пожаловать на нашу страничку.

<P> Попробуйте открыть документ, щелкнув на <A href="first2.html"> моей гиперссылке </a>

</body>

</html>

Внимание! Если вы набрали этот текст и попытались просмотреть его броузере, возможно, он выдаст вам сообщение об ошибке. Все дело в том, что документ, на который указывает ссылка еще не создан.

А если документы находятся в разных папках, просто измените адресную часть тега, указав путь к файлу. Например документ first2.html находится в подпапке student, то открывающий тег должен выглядеть так:

<A href= "student/first2.html">

Вы можете указать и полный, абсолютный адрес файла:

file://winword/myfiles/student/first2.html

или относительный - ./student/first2.html

Задание 2.

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

Создайте в своей папке документ с именем prep. html

<HTML> <HEAD> <TITLE> </title> </head>

<BODY>

Поиск по тексту:

<A href="prep. html#pr"> Преподаватели </a>

<br> <A href="prep. html#st"> Студенты </a></p>

<h2 align=center>

<A name="pr"> Преподаватели </a></h2></b>

Зав. лабораторией

<br>

<br>

<br>

<br>

<br> </p>

<h2 align=center>

< A name="st"> Студенты </a></h2></b>

<br>

<br>

<br>

<br> </p>

</body>

</html>

Таким же путем вы можете попасть в нужную часть текста с другой страницы. Создайте файл kafedra. html :

<HTML> <HEAD> <TITLE> </title> </head>

<BODY>

<A href="prep. html"> Преподаватели </a></p>

<A href="prep. html#st"> Студенты </a> </p>

</body>

</html>

Задание3.

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

Лабораторная работа №6

Таблицы

Таблицы являются очень удобным средством форматирования данныx на Web-странице, браузер берет на себя определения размер рамки в соответствии с размерами окна, размером текста или рисунков. Эти преобразования можно делать как в автоматическом режиме (по умолчанию), так и в ручном. Кроме того таблицы решают дизайнерские задачи: выравнивание разных частей таблиц относительно центра или друг друга, размещать рядом рисунок и текст. При создании таблиц используется принцип вложения; внутри основного элемента (TABLE), создается ряд элементов строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки строки (TD, TH). См. лабораторную №4.

<TABLE></table>

Таблица редактируется по горизонтали при помощи атрибута align:

align=”left” - влево

align=”center” - по центру

align=”right” - вправо

Надо отметить что содержимое ячеек можно выравнивать и по вертикали следующими атрибутами:

valign=”top”

valign=”middle”

valign=”bottom”

Изменение цветов в таблице выполняется все тем же атрибутом bgcolor=#RRGGBB см. Лабораторную работу №4

Ширину таблицы можно задавать точно, в пикселях, или в процентном отношении по отношению к ширине окна браузера:

Width=400

Width=70%

Для управлением видом рамки используются два атрибута, боковой и фронтальной линии.

border=ширина в пикселях

при border=0 ячейки таблицы становятся невидимыми, и шириной фронтальной рамки управляет cellspacing:

cellspacing= ширина в пикселях. При отсутствии этого атрибута ширина рамки ячейки таблицы равна 1.

Создайте документ.

<body bgcolor="#FFFFFF">

<table width="20%" align=center border="5">

<tr>

<td width="50%">Econom - eto class</td>

</tr>

<tr>

<td width="50%">&nbsp;</td>

</tr>

<tr>

<td width="50%">&nbsp;</td>

</tr>

</table>

<p>&nbsp;</p>

<table width="200" border="1" cellspacing="1">

<tr>

<td width="69">67890</td>

<td width="58">&nbsp;</td>

<td width="59">&nbsp;</td>

</tr>

<tr>

<td width="69">&nbsp;</td>

<td width="58">&nbsp;</td>

<td width="59">&nbsp;</td>

</tr>

<tr>

<td width="69">&nbsp;</td>

<td width="58">&nbsp;</td>

<td width="59">12345</td>

</tr>

</table>

Как мы видим, в коде страницы также определяется и ширина ячейки по отношению ко всей таблице. В процентах:

<tr>

<td width="50%">Econom - eto class</td>

</tr>

или пикселях:

<tr>

<td width="69">67890</td>

<td width="58">&nbsp;</td>

<td width="59">&nbsp;</td>

</tr>

Заголовки таблицы <CAPTION></caption> определяются атрибутами. В принципе этот атрибут сопоставим с <TITEL></titel>.

align=”top” - заголовок над таблицей;

align=”bottom” - заголовок под таблицей;

Задание.

Создайте 2 таблицы, в каждой не менее 3–х столбцов и строк. Ширина одной из которых равна 100% от ширины экрана, а второй 460 пикселов. С заголовками Пример 1 и Пример 2 соответственно. В первой таблице толщина внешней рамки обрамления 5 пикселей, а внутренней 3. Во второй ячейки шириной в 1 пиксель. Измените цвет ячеек по диагонали в первой и второй таблице. В первой градацию зеленого, а во второй красный.

Лабораторная работа №7

Бегущая строка

Очень интересное графическое решение, которое мо­жет украсить вашу страничку, — это бегущая строка. Но перед тем как использовать ее, тщательно проду­майте текст и место бегущей строки. Тегом, создаю­щим бегущую строку, является главный и единствен­ный тег

<MARQUEE>TEKCT</MARQUEE>.

На место слова ТЕКСТ подставля­ется любое слово или фраза, кото­рую надо заставить бежать по экрану компьютера. Вот и все. Самый про­стой вариант расположения текста в бегущей строке — когда вставленная фраза появляется из-за правого края программы просмотра и, пройдя че­рез всю страницу, скрывается за ле­вым краем. Направление движения бегущей строки можно менять. Для этого применяет­ся специальный атрибут направления.

В том случае, если бегущую строку нужно напра­вить справа налево, тег принимает вид

<MARQUEE DIRECTION=left>TEKCT</MARQUEE>.

Тег сохранит движение слева направо, если ис­пользовать значение right:

<MARQUEE DIRECTION=right>TEKCT</MARQUEE>.

Чтобы задавать характер движения надписи по странице, применяется другая группа атрибутов.

+ scroll — стандартное движение от правого края к левому. Этот атрибут организует бесконечный цикл. Число циклов можно ограничить, введя опе­ратор LOOP, например:

<MARQUEE LOOP=n BEHAVIOR= scrol>TEKCT</MARQUEE>.

Значение n оператора LOOP указывает число повторений цикла. В данном случае, поскольку в тег еще включен атрибут BEHAVIOR со значением scroll, надпись совершит стандартное движение от правого до левого края Web-страни­цы три раза.

+ slide — надпись один раз пробегает от правого края к левому и там остается.

+ alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл.

Внимательно посмотрите, как выглядят теги бегу­щей строки с включенными в них атрибутами харак­тера движения:

<MARQUEE BEHAVIOR=scrol1>TEKCT</MARQUEE>

<MARQUEE BEHAVIOR=slide>TEKCT</MARQUEE>

<MARQUEE BEHAVIOR=alternate>TEKCT</MARQUEE>

Нет необходимости растягивать бегущую строку на всю ширину раскрытой Web-страницы. Можно указать ширину участка, занимаемого бегущей стро­кой. Тег бегущей строки в этом случае приобретает вид:

<MARQUEE WIDHT=n>TEKCT</MARQUEE>,

где n — ширина той части страницы, на которой рас­положена бегущая строка. Значение n указывается как в пикселах, так и в процентах от общей ширины видимой части страницы.

Для того чтобы регулировать движение надписи по экрану, указывается, какое число пикселов должен пройти текст надписи, чтобы снова появиться на эк­ране:

<MARQUEE scrolIamount=n>TEKCT</MARQUEE>.

Здесь n — число пикселов.

Для задания скорости указывается интервал вре­мени, через который текст будет перерисован на экра­не заново. В данном случае переменная величина — время t — измеряется в миллисекундах:

<MARQUEE scrolI delay=t>TEKCT</MARQUEE>.

В заключение скажем еще несколько слов о внеш­нем виде пробегающей надписи. Например, есть воз­можность указывать величину шрифта текста в стро­ке:

<FONTSIZE=n><MARQUEE> TEKCT</MARQUEE></FONT>.

Можно окрасить поверхность бегущей строки, в какой-либо цвет:

<MARQUEE BGCOLOR=n>TEKCT</MARQUEE>,

где n, как это бывало и раньше, можно указать в виде шестнадцатеричного числа или названия цвета на английском.

Можно указать высоту бегущей строки, задавая величину n в пикселах:

<MARQUEE HEIGHT=n>TEKCT</MARQUEE>.

Задание. Вставьте в свою Web-страницу бегущую строку. Сделайте так, чтобы она гармонировала с цветом вашей странички или была контрастной. Надпись должна совершить стандартное движение от левого до правого края Web-страницы пять раз. Затем попробуйте проверить различные варианты цикличности движения строки и выберите оптимальный.

Движущиеся изображения

Скорее всего, вы уже встречались с так называемыми «жи­выми» или анимированными картинками. Они явля­ются промежуточным звеном между статичными графическими изображениями и настоящими муль­тимедийными файлами. Секрет их прост: в графиче­ский файл в формате Animated GIF (.gif) при помощи различных программ для работы с графикой, скажем WebImage, записывается несколько изображений или кадров, а также время демонстрации каждого кадра и количество прокруток такого минимультфильма. Ну а включить такое «живое» изображение в свою HTML-страницу очень просто. Это делается точно так же, как с обыкновенной картинкой, при помощи тега

<IMG SRC="animat. gif">.

Программа просмотра, загрузив такой файл, присту­пает к демонстрации мультфильма, показывая кадр за кадром. Но по возможности не используйте их слишком часто и ни в коем случае не располагайте их кучно. Один мигающий символ может смотреться до­вольно неплохо, одно мигающее слово при определенных обстоя­тельствах может быть приемле­мо, но когда мигают несколько слов подряд, такую страницу хо­чется поскорее закрыть. Старай­тесь не перегружать свои сайты анимационными файлами, мель­кание на вашей страничке может вызвать раздражение у посетителей. Очень много красивых графических изображений, а именно — кнопок, линий, картинок, «обоев», можно найти в Сети. Есть специальные серверы, которые предлагают это добро для всех и совершенно бесплат­но! Чтобы сохранить понравившееся вам изображе­ние на своем жестком диске, надо всего лишь помес­тить на него указатель мыши, щелкнуть правой кнопкой и выбрать в появившемся меню пункт Save Image as (Сохранить рисунок как). Но все же старайтесь сделать свою страницу так, чтобы даже при исполь­зовании чужой графики она не потеряла бы свою индивидуальность.

Задание. Вставьте в свою Web-страницу двигающееся изображение.

Язык сценариев JavaScript

Скрипт (script) – программа, включенная в состав Web- страницы для расширения ее возможностей.

Когда мы создаем Web-страницы, нам всегда хочется сделать их просмотр более удобным и придать им не­которые дополнительные функциональные возмож­ности, отсутствующие в языке HTML. Как это сде­лать? Наиболее часто средств стандартного HTML не хватает при создании интерактивных документов, заданным образом откликающихся на внешние собы­тия, например, действия читателя или сигналы таймера. Фирма Netscape Corporation, автор самой попу­лярной в настоящий момент программы просмот­ра Netscape Navigator, разработала специальный язык программирования JavaScript, поддержка которого включена в Netscape Navigator начиная с версии 2.0. Сейчас уже можно определенно сказать, что Java­Script скоро станет стандартом, поддерживаемым по­давляющим большинством программ просмотра дру­гих фирм. Действительно, уж если корпорация Mic­rosoft снизошла до включения интерпретатора этого языка в свой Internet Explorer, то JavaScript заслу­живает самого пристального внимания.

JavaScript можно рассматривать как расширение HTML — фрагменты программ на JavaScript включа­ются непосредственно в текст HTML-документа и интерпретируются программой просмотра при его за­грузке. JavaScript предоставляет следующие основ­ные возможности:

+ управление окнами и фреймами в окне программы просмотра (открытие, закрытие, изменение располо­жения, загрузка и вывод в них заданных документов и т. п.) в ответ на действия пользователя, сигналы таймера и некоторые другие внешние события;

+ вывод фрагментов HTML-документов;

+ взаимодействие с Java-апплетами, включенными в Web-страницу;

+ обработка (а также «предобработка» перед Посыл­кой CGI-запроса на сервер) ввода пользователя в заполняемые формы.

Чтобы увидеть страницы, написанные с исполь­зованием JavaScript, необходимо пользоваться программой просмотра, которая поддерживает JavaScript. Предварительно убедитесь в том, что интерпретатор JavaScript не отключен. Подключить его можно сле­дующем образом.

1.  В программе Netscape 3.0 выберите пункт меню Options (Настройки).

2.  В открывшемся списке щелкните мышью на ко­манде Network Preferences...

3.  В категории Languages включить: EnableJavaScript.

По JavaScript, так же как и по языку Java, имеется множество учебных пособий как в печатном виде, так и в электронном, доступном через сеть. Если вас за­интересовали эти языки, попробуйте самостоятельно найти описание и руководства к ним в Сети, используя различные поисковые системы и каталоги.

ТЕМЫ ЗАДАНИЙ ДЛЯ САМОСТОЯТЕЛЬНЫХ И КОНТРОЛЬНЫХ РАБОТ.

Все задачи рассчитаны на использование в качестве основы готового функционального интерактивного сайта, который студент обязан создать в течение семестра

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

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

3. Введите дополнительное текстовое поле в форму, которую пользователь передаёт на сервер, введите в серверную базу данных и результат отобразите на стороне клиента.

4. Вставьте на начальную страницу своего сайта  вывод текущей даты и времени, изменяющегося в реальном времени.

5. Организуйте на любой странице своего сайта два поля ввода информации пользователя. Предусмотрите ввод даты в одно поле и вывод этой даты в другое поле.

6. Организуйте на любой странице своего сайта два поля ввода информации пользователя. Предусмотрите ввод двух чисел в эти поля, а результат выдайте на панель сообщения. Всё выполнить на стороне клиента!

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

8.Создайте форму с флажками типа  "RADIO" и передайте информацию из формы на сервер. Результат обработки выдайте пользователю.

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4