Вычислительная техника Лабораторный практикум (стр. 3 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

------

Пример № 15. Программа.

<HTML>

<BODY>

<TABLE>

<TR>

</TR>

<TR>

<TD ALIGN=CENTER><H1>текст</H1></TD>

</TR>

<TR>

<TD ALIGN=CENTER>текст<BR>

текст

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

------

СОЗДАНИЕ РАЗНОЦВЕТНЫХ ТАБЛИЦ

-----

Ведущие броузеры позволяют отображать некоторые цвета. Всё зависит от броузера.

------

ЦВЕТНЫЕ ГРАНИЦЫ В NETSCAPE NAVIGATOR

------

Рамка может быть окрашена в цвет отличный от цвета текста и фона. Серый или любой GIF определяется в теге<BODY> как фон страницы. Затем задаётся цвет фона страницы. В результате тег <BODY> будет, например, таким:

Таким образом создаётся двойной фон - GIF и заданный цвет. Теперь фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях <HR>. Цветные линии и границы будут заметными не зависимо от цвета составляющей GIF.

------

АТРИБУТ BGCOLOR=(MICROSOFT INTERNET EXPLORER)

-------

EXPLORER позволяет задавать собственный фоновый цвет для каждой ячейки таблицы. В любом теге <TD> записывается атрибут BGCOLOR=. Так для ячейки определяется собственный цвет фона.

------

Пример № 16. Программа.

<HTML>

<BODY>

<TR>

<FONT SIZE=3 FACE="ARIAL"><B>текст</B>

</FONT><BR>

<FONT SIZE=2><B>текст</B>

<UL>

<L1><FONT SIZE=2><A HREF="http:///nct">Web Magazine</A></FONT>

<L1><FONT SIZE=2><A HREF="http://www. ">Gateway 2000</A></FONT>

<L1><FONT SIZE=2><A HREF="http://www. ">Microsoft</A></FONT>

</UL>

</TD>

<FONT SIZE=3 FACE="ARIAL"><B>текст</B></FONT><BR>

<FONT SIZE=2><B>текст</B></FONT>

<TR>

</FORM>

</FONT>

</TD>

</TR>

<TR>

</FORM>

</FONT>

</TD>

</TR>

</TABLE>

</TD>

</TR>

<FONT SIZE=3 FACE="ARIAL"><B>текст</B></FONT><BR>

<FONT SIZE=2><B>текст</B></FONT>

<UL>

<L1><FONT SIZE=2><B>текст</B></FONT>

</UL>

</TD>

<FONT SIZE=3 FACE="ARIAL"><B>текст</B></FONT><BR>

<FONT SIZE=2><B>текст</B></FONT>

<UL>

<L1><FONT SIZE=2><B>текст</B></FONT>

</UL>

</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

------

АТРИБУТ BORDERCOLOR=(MICROSOFT INTERNET EXPLORER)

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

------

Позволяет определить цвет линий, обрамляющих таблицу или ячейку. Для этого достаточно в тегах <TABLE> или <TD> записать атрибут BORDERCOLOR=код цвета.

------

Пример № 17. Программа.

<HTML>

<BODY>

<CAPTION><H2>текст</H2>

текст</FONT></TD>

текст</FONT>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

------

АТРИБУТЫ BORDERCOLORDARK= и BORDERCOLORLIGHT= (MICROSOFT INTERNET EXPLORER)

------

Выступающие, как бы трёхмерные границы, получают используя сочетание двух оттенков серого цвета. Упомянутые выше атрибуты позволяют задать два цвета для окраски трёхмерных краёв таблицы или любой ячейки внутри неё. Добавляя BORDERCOLORDARK=black, добавляют резкость граничным линиям.

------

Пример № 18. Программа.

<HTML>

<BODY>

<CAPTION><H2>текст</H2></CAPTION>

<TR>

<FONT SIZE=4>текст</FONT>

</TD>

<FONT SIZE=4>текст</FONT>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

------

Задание. Проверить предложенные примеры. Предложить варианты модификации этих примеров.

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

Изучение команд языка HTML(продолжение 5)

HTML (HyperText Markup Languag)- язык разметки гипертекста или язык описания документов системы WWW(WORLD WIDE WEB)- гипертекстовой системы поиска ресурсов Internet и доступа к ним.

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

------

ГРАФИКА

------

Обычно считают, что HTML предназначен только для создания и форматирования текстов. Это - не так. Графика украшает WEB-узел.

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

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

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

------

ОГРАНИЧИВАЮЩИЕ ПРЯМОУГОЛЬНИКИ И АТРИБУТЫ ALT=

------

Время загрузки изображения уменьшится, если в HTML - коде определить размер изображения. В этом случае броузер заранее отведёт рамку для картинки и начнёт загружать текст. Загрузив текст он даёт возможность его читать пока идёт загрузка картинки.

------

КАК ЗАДАТЬ РАЗМЕРЫ ГРАФИКИ

------

Если Вы имеете одну из программ для работы с графикой, например, Photoshop и т. п. определить размер изображения нетрудно.

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

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

Если размеры заданы, броузер нарисует прямоугольник и начнёт заливать его изображением. Если на странице есть другие графические объекты и текст, броузер будет работать с этими частями страницы, продолжая заполнение прямоугольника.

-----

АТРИБУТ ALT=

------

Если Ваш броузер смотрит только текст или отключен режим графики, атрибут ALT= тега IMG позволяет получить представление о графике на странице и её целях.

Microsoft Internet Explorer показывает на месте картинки текст из атрибута ALT= пока изображение загружается, Netscape Navigator показывает текст, если режим Auto Load Image выключен.

------

Пример № 1. Программа.

<HTML>

<BODY>

текст

</BODY>

</HTML>

------

ПРОЗРАЧНЫЕ ИЗОБРАЖЕНИЯ

------

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

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

------

ФОРМАТЫ ГРАФИЧЕСКИХ ФАЙЛОВ - РАСТРОВАЯ И ВЕКТОРНАЯ ГРАФИКА

-----

Компьютерная графика делится на растровую и векторную. Современное WEB поддерживает только растровые изображения. Растровые изображения создаются в одной из графических программ, например, Windows Painbrush или Corel PHOTO-PAINT. Отсканированные картинки сохраняют в растровом виде, которые определяются по точкам (пикселям). Задаётся вся область изображения. Затем поочерёдно записывается цвет каждой точки изображения и фона. Таким образом, растровые изображения имеют сплошной фон. Растровым файлам соответствуют форматы BMP, PCX, TIF.

Программы рисования или трёхмерной графики создают изображения в векторном формате. В них задаются координаты линий. Векторный формат является набором инструкций, которые показывают, где начертить линию указанной толщины. Фон может быть не определён. С векторной графикой связаны форматы WMF, DXF и CDR.

Чтобы использовать в WEB векторную графику, её предварительно конвертируют в растровый формат. Если векторное изображение не имело сплошного фона, он появится после конвертирования. Цвет фона может не понравиться. Его разрешается изменять.

Большинство броузеров распознают форматы графических файлов GIF и JPEG. Формат GIF - единственный поддерживает прозрачный фон.

------

КАК СДЕЛАТЬ ПРОЗРАЧНУЮ ГРАФИКУ

------

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

Нескольких минут работы в Adobe Photoshop или в Windows Paintbrush достаточно для очистки фона. Попутно необходимо узнать Red-Green-Blue(RGB:красный-зелёный-синий) значение цвета, который будет цветом фона. RGB - цвет отличается в разных программах. Некоторые броузеры показывают его в строке состояния, если мышинный курсор направить на изображение. Другие броузеры дают его в разных режимах редактирования.

Точную информацию ищут в инструкциях к программам обработки графики.

RGB - значение цвета фона равно приблизительно Это типичный светло-серый цвет фона. Каждый цвет состоит из красного, зелёного и синего. Оттенки этих цветов представляются числами от 0 до 255.

В программах Hijaak, Photoshop и им подобных, чтобы конвертировать файл в GIF - формат, его достаточно открыть и сохранить в файле с расширением GIF.

Известно два варианта формата GIF: 87a и 89a. Авторитеты графики приняли, что только GIF89a можно делать прозрачными. Однако большинство графических программ работает с GIF87a. Спасает только простая конвертация из 87a в 89a. Для этого достаточно открыть и сохранить файл в программе, поддерживающей 89a.

Детали изображения должны быть окрашены так, чтобы они не потерялись на фоне. Например, глаза на сером фоне лучше выбрать голубыми, а не серыми.

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

Если Ваш графический файл уже очищен, следует приступить к конвертированию. Для этого очень подходит программа LView Pro. Достаточно открыть графический файл в LView Pro, указать цвет фона и сохранить файл.

Программу LView можно получить через Internet, например с сервера http:///nct.

------

ИСПОЛЬЗОВАНМЕ LView Pro

------

Если эта программа уже загружена в Ваш компьютер, разархивирована, установлена и Вы зарегистрировались - остаётся открыть свой графический файл в этой программе. Она открывает файлы в форматах BMP, PCX, GIF, TIF и ещё некоторых. Разрешается загружать по несколкько файлов и конвертировать их одновременно.

Открыв графический файл в LViwe Pro, выбирите в меню Options команду Background Color и укажите цвет, который будет прозрачным.

Будет показан пример на рисунке. Одновременно программа покажет RGB-значение цвета на котором был клик. Если Вы знаете правильное значение цвета фона, проблем не возникнет.

Останется сохранить файл. Для этого выбирают команду Save или Save As в меню File.

Программа LView Pro запросит тип формата. Следует подтвердить GIF89a.

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

Среди возможностей программы LView Pro делается "чересстрочное" (interlaced) изображение с прозрачным фоном.

Примечание. Любая понравившаяся в WEB HTML - страница может быть скопирована в броузере с помощью команды Save As. В результате будет получен текст HTML-кода страницы. Его можно просматривать на своём компьютере, копировать и вклеивать куски из WEB - страниц, используя команду View Source в меню Internet Explorer. Скопировав нужный код, его можно использовать для получения заинтересовавших Вас явлений.

------

ЧЕРЕССТРОЧНЫЕ ИЗОБРАЖЕНИЯ

------

Есть примеры графики, когда изображение на экране броузера появляется сначала нечётким, затем с него постепенно снимают вуали и оно становится чётким. Это достигается постепенным добавлением пикселей в чересстрочных изображениях.

Чересстрочные изображения не загружаются быстрее. Это - заблуждение. Так кажется. Чересстрочный GIF загружается почти мгновенно. Это позволяет пользователю быстрее понять, что на рисунке и принять решение о необходимости остального.

Есть программы открытого доступа для редактирования, которые позволяют сохранять чересстрочные файлы GIF и JPEG.

-----

КАК СДЕЛАТЬ ЧЕРЕССТРОЧНУЮ ГРАФИКУ

------

Для программы LView Pro для конвертирования обычного GIF в чересстрочный достаточно открыть файл GIF и снова сохранить его, выбрав в меню Options команду Save GIFs Interlaced. Не нужно сохранять файл как GIF89a.

Если Вам нужен непрозрачный фон, лучше сохранить файл в формате GIF87a. Пликнув картинку при работе с Explorer или Navigator вызывают меню, которое предлагает сохранить её в каком-либо каталоге на Вашем диске. Следует помнить, что это чужая собственность.

------

АКТИВНЫЕ ИЗОБРАЖЕНИЯ

------

Такие изображения(image maps) чувствуют клики. Они позволяют на своём узле создавать графические меню произвольной формы. Это даёт возможность путешествовать по Вашему WEB - узлу.

Активное изображение - картинка с активными областями(hot spots), которые ссылаются на URL других страниц и узлов.

Если пользователь кликнет на картинке, определённой как активное изображение с помощью атрибута ISMAP в теге IMG, координаты клика передаются на WEB - сервер. Сервер ищет в карте(map file) активную область с определёнными координатами. Найдя такую область, сервер активизирует заданный в карте URL, броузер пользователя переходит на новую страницу.

Графический способ представления информации лучше, чем просто текст. Текстовые ссылки работают хорошо, но графика воздействует на пользователя лучше.

С помощью активных изображений создают меню своего WEB - узла и размещают на нём графику.

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

------

ГДЕ РАЗМЕЩАТЬ АКТИВНОЕ ИЗОБРАЖЕНИЕ: НА СЕРВЕРЕ ИЛИ У КЛИЕНТА?

------

Используется два вида активных изображений: на сервере и у клиента. Последнее - новый вид.

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

Активные изображения у клиента имеют преимущества. Они снижают нагрузку на сервер, т. к., например, нет необходимости просматривать всю информацию об активных областях.

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

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

Недостаток активных изображений у клиента - с ними умеет обращаться только броузеры, поддерживающие HTML 3.0 (Netscape Navigator 2.0, Microsoft Internet Explorer и Enhanced Mosaic 2.0 фирмы Spry). Если у пользователя другой броузер на странице появится обычное графическое изображение не чувствительное к мыши.

Третий способ получения активных изображений и он же наилучший - поместить оба первых вида изображений на одной странице. Это позволяет практиковаться в работе с новейшими средствами HTML 3.0 и быть готовым для просмотра страницы старыми броузерами.

Примечание. Не делайте активные области слишком маленькими, это затруднит работу с указателем таких областей - вытянутым пальцем, который использует броузер вместо стрелки.

-----

КАК СДЕЛАТЬ АКТИВНОЕ ИЗОБРАЖЕНИЕ

------

Процесс создания активного изображения состоит из двух этапов. В первую очередь должны быть определены области на картинке, которые будут активными. Затем они должны быть соотнесены со ссылками на другие URL. Активные области задают перечислением их координат в пикселях.

Всё это делают вручную, но проще это выполнить с помощью специальных программ, например, MapEdit или MapThis!. Программы получают по адресу: http://www. ecaets. ohio-state. edu/tc/mt.

MapThis! пригодна для изображений работающих как на сервере, так и у клиента. Распространяется бесплатно. 32- битная программа. Но работает она только под Windows 3.1 или Windows 3.11 при инсталлированной Win32s. Последнюю тоже получают с узла MapThis!.

Карта определяется легко. Для этого открывают в MapThis! файл, содержащий изображение на котором предстоит создать активные области. Кликают и тянут мышь, обозначая границу. Программа автоматически сгенерирует файл, который опишет границы области. Наконец, области должен быть приписан URL.

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

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

Параметры записываются в карту(Map-файл) приблизительно так:

rect/subdir/subdir/webpage. html 21, 168 97, 202

rect/subdir/subdir/otherwebpage. html 148, ,205

rect/subdir/subdir/webpage. html 410, , 202

После создания активного изображения полученный файл сохраняют в формате NCSA или CERN, для сервера, или в формате CSIM, для клиентской машины. Программа MapThis! сама создаст карту на сервере или в указанном файле HTML у клиента.

Если активное изображение делается у клиента, программа MapThis! поставит данные только для тегов <MAP>. Вам придётся самому задать тег изображения с атрибутом USEMAP и поместить его после тега </MAP>.

Важно не забыть перед именем карты в атрибуте USEMAP записать символ # таким образом:

------

КАК ПОМЕСТИТЬ АКТИВНОЕ ИЗОБРАЖЕНИЕ НА HTML - СТРАНИЦУ

------

Если изображение стало активным и для каждой активной области уже определён URL, его помещают на HTML - страницу. Известно несколько способов выбор которых зависит от того где делается изображение: на сервере или у клиента.

------

АКТИВНЫЕ ИЗОБРАЖЕНИЯ НА СЕРВЕРЕ

------

Испытанный способ создания активных изображений (для HTML 2.0) предполагает использование атрибута ISMAP в теге IMG, который относится к изображению. Его необходимо поместить между начальным и конечным тегами ссылки на файл-карту. Для этого следует занести в HTML - файл прблизительно следующее:

Атрибут ISMAP сообщает броузеру, что данное изображение является активным. Если в какой-либо области изображения происходит клик, благодаря атрибуту ISMAP серверу пересылается сообщение с координатами клика.

Перемещая мышинный курсор по активному изображению, следует обратить внимание на строку состояния внизу броузера. Там показывается нечто похожее на http://www. /something/somemap. map?300,20.

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

Карты изображений на стороне клиента показывают URL или ссылку, ассоциированную с областью карты.

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

http://www. /cgi-bin/imagemap/something/somemap. map?300,20

Здесь сервер для обработки активного изображения использует программу imagemap из каталога cgi-bin. В зависимости от программного обеспечения сервера запись об активных изображениях в HTML - выглядит по разному:

или

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

------

АКТИВНЫЕ ИЗОБРАЖЕНИЯ У КЛИЕНТА

------

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

------

Пример № 2. Ссылка в HTML - файле.

</MAP><IMG SRC="somemap. gif" USEMAP="#clientside. map">

Если опустить атрибут SHARE=, автоматически установится SHARE="RECT". Атрибут COORD= описывает координаты формы в пикселях. Атрибут USEMAP= в теге <IMG> действует как ссылка"переход на". Если перед именем файла карты помещён сммвол #, атрибут USEMAP= считает, что активное изображение находится в файле, описанном в теге <IMG>.

С помощью таких программ как MapThis! остаётся только поместить круги, квадраты или многоугольники в те области изображения, которые решено сделать активными. Программа сама запишет их координаты.

------

АКТИВНОЕ ИЗОБРАЖЕНИЕ, РАБОТАЮЩЕЕ И НА СЕРВЕРЕ, И У КЛИЕНТА

------

Если активные изображения уже созданы и на сервере и у клиента, соединить их в одном HTML - файле несложно. Для этого необходимо ввести в документ HTML ту же запись, которая была бы сделана для активного изображения на сервере. Необходимо только в теге <IMG> добавить атрибут USEMAP=, например, так:

Атрибут USEMAP= с более высоким приоритетом, чем тег ISMAP. Если броузер поддерживает активные изображения у клиента, он распознаёт этот атрибут. Броузер, не знающий о таких изображениях, проигнорирует атрибут USEMAP=.

------

ИЗОБРАЖЕНИЯ В МИНИАТЮРЕ

------

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

------

Задание. Проверить содержащиеся в тексте примеры, предложить и проверить модификации этих примеров.

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

Изучение команд языка HTML (продолжение 6)

HTML (Hypertext Markup Language) – язык разметки гипертекста или язык описания документов системы WWW (World Wide Web) – гипертекстовой системы поиска ресурсов Interhet и доступа к ним.

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

---

ФОН

---

Вместо традиционного серого фона постепенно переходят к фонам. Microsoft Internet Explorer и другие ведущие броузеры поддерживают цвет фона и графические фоновые файлы в форматах GIF и JPEG.

Предусмотрены цвета для текста, ссылок и просмотренных ссылок.

Создавая собственный фон, желательно учитывать следующее:

1.Важно правильно подобрать цвет текста на странице.

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

3.Пользователи с чёрно–белыми мониторами могут вместо цветного фона увидеть тёмное пятно, которое способно скрыть текст.

-----

ОСНОВНЫЕ СВЕДЕНИЯ О ФОНЕ

-----

Создавая на странице цвет, фоновый GIF или рисунок с водяными знаками, в тег <BODY> помещает специальный атрибут.

СОЗДАНИЕ ФОНА С ПОМОЩЬЮ АТРИБУТА BGCOLOR=

------

Цвет фона изменяют включая атрибут BGCOLOR= в теге <BODY> определяется RGB-значение.

Пример № 1. Тег <BODY BGCOLOR= "RRGGBB">

Открывающий тег <BODY> помещают непосредственно перед концом документа. "RRGGBB" – шестнадцатеричные значения красного зелёного и синего цветов и комбинации дающие нужный цвет.

Если просмотр реализуется с помощью броузеров Netscape Navigator или Microsoft Internet Explorer, числа заменяют названиями цветов: "RED", "BLAC", "YELLOW".

------

Пример № 2. Тег для синего цвета.

-----

Заданный фон действует в пределах только одной страницы, которая заключена между тегами <BODY></BODY>.

-----

Пример № 3. Программа. Случай приятного жёлтого фона страницы. Распознаётся Navigator и Explorer/

<HTML>

<HEAD>

<TITLE>текст</TITLE>

</HEAD>

<H1>текст</H1><P>

текст

</P>

</BODY>

</HTML>

Цвета текста и ссылок по умолчанию остаются чёрными.

------

ИСПОЛЬЗОВАНИЕ ФОНОВОЙ ГРАФИКИ С ПОМОЩЬЮ АТРИБУТА BACKGROUND=

------

Чтобы задать файл в формате GIF или JPEG в качестве фонового, имя и путь к файлу помещают в тег <BODY> после атрибута BACKGROUND=

------

Пример № 4. Тег.

Изображение автоматически покроет всю страницу.

-----

Для фона следует выбирать изображения не очень сложные. Слабая фактура способна создать приятный для глаза фон.

------

Пример № 5. Программа.

<HTML>

<H1 ALIGN= CENTER>текст</H1><HR>

текст<P>

текст

</BODY>

</HTML>

Сложный рисунок, даже очень хороший, мешает читать текст.

------

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

-------

Пример № 6. Программа. Случай консервативного фона.

<HTML>

<H1 ALIGN=CENTER>текст</H1><HR>

<H2>текст</H2>

</BODY>

</HTML>

На одной странице не может быть более одного фона. Фоновый рисунок задаётся только на одну страницу.

------

СОЗДАНИЕ ВОДЯНОГО ЗНАКА С ПОМОЩЬЮ АТРИБУТА BGPROPERTIES=FIXED (MICROSOFT INTERNET EPLORER)

-------

Для Explorer можно сделать графический водяной знак. Это почти фоновый рисунок. Только он не прокручивается вместе с текстом. Создавая водяной знак, атрибут BGPROPERTIES=FIXED помещают в теге <BODY>.

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

-------

Пример № 7. Программа.

<HTML>

<H2>текст</H2>

текст<P>

текст

</BODY>

</HTML>

-----

ВЫБОР РАЗМЕРА ФОНОВОГО ИЗОБРАЖЕНИЯ И ЗАПОЛНЕНИЕ КОПИЯМИ

------

Даже небольшой графический файл увеличивает время загрузки WEB - страницы. Поэтому для фона рационально использовать маленькие простые файлы. Основные типы броузеров помещают такой фоновый файл в кэш после чего размножают его так, чтобы копии заполнили всю страницу (tiling). Чем меньше графическое изображение, тем меньше размер файла. Но его не рационально выбирать слишком маленьким. В этом случае броузер потратит большое время на создание копий и потеряет результат экономии на загрузке. Заполнение страницы копиями один на один пиксель требует больше времени, чем загрузка фонового изображения размером пятьдесят на пятьдесят пикселей. Размеры изображения изменяют с помощью какого-либо графического редактора.

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

-------

СОЧЕТАНИЕ ФОНОВОЙ ГРАФИКИ С ЦВЕТОМ

-------

разрешается в одной странице задавать графический фон и цвет фона.

Для этого в тег <BODY> помещают оба атрибута: BGCOLOR= и BACKGROUND=. Фоновый цвет будет просвечиваться через горизонтальные линии, заданные тегом <HR>, и границы таблиц.

Графика и цветной фон используются, например, для обрамления таблиц. Если взять стандартный серый фон и яркий фон в атрибуте BGCOLOR=, границы таблиц окрасятся другим цветом. Можно сделать так, что границы выделятся на фоне светлого фонового изображения.

------

Пример № 8. Программа.

<TR>

<TD>

<текст>

</TD>

</TR>

</TABLE>

</BODY>

------

ГРАДИЕНТНЫЙ ФОН

------

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

Делая фон с градиентным заполнением, в Corel Draw! Или другой графической программе, рисуют узкий прямоугольник с шириной примерно в обычную страницу и высотой около дюйма. С помощью команды Gradient Fill графического редактора этот прямоугольник заполняют цветом или цветами, переходящими из одного в другой. У прямоугольника не должны быть сделаны границы. Параметр настройки выбирают с большим количеством цветов. Это позволяет получить плавные переходы. Число 256, отнесённое к числу цветов или оттенков серого цвета лучше, чем 16.

Файл экспортируется в формате GIF.

Файл может быть открыт в программе HiJaak фирмы Inset Systems или в Adobe PhotoShop. Должна быть обрезана кромка по периметру прямоугольника. Иначе останутся тонкие швы в местах стыковки копий изображения при заполнении страницы копиями.

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

Полученное изображение должно быть сохранено как GIF или JPEG.

Имя файла пишется в теге <BODY BACKGROUND="filename">. Exhlorer и Navigator заполняют страницу копиями изображения. В результате получается красивый постепенно изменяющийся фон изображения. Аналогично делается вертикальное градиентное заполнение. Для этого достаточно развернуть графическое изображение, из которого составлен фон, на 90 градусов. Оно должно быть в высоту не менее страницы.

-----

ГДЕ ВЗЯТЬ ГРАФИКУ ДЛЯ ФОНА

------

В WEB-узлах есть целые библиотеки фоновой графики. Эти файлы условно бесплатные (shareware) или свободно распространяемые. В большинстве графических программ есть библиотеки картинок, которые также можно применять в качестве фоновых.

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

В Corel Draw!, и в других графических программах есть средства построения фактуры, постепенного изменения цвета и фракталы. Их можно использовать для создания фона.

------

ЗАДАНИЕ ЦВЕТА ТЕКСТА

------

Интересный для Вас цвет фона способен подавлять цвет текста. Если цвет фона остаётся, должен быть изменён цвет текста. Например, к синему фону подходит белый или светло-жёлтый цвет текста. Даже на обычном сером фоне возможно использование ярких цветов текста. Это привлекает внимание. В Exhlorer и Navigator есть специальные атрибуты, которые позволяют раскрасить текст на одной странице в разные цвета.

Цвет всего текста можно задать в теге <BODY>.

Обычный WEB-документ содержит текст четырёх типов: основной текст, ссылки, просмотренные и активные ссылки. По умолчанию основной текст обычно чёрный, текст ссылок - голубой, просмотренные ссылки – малиновые, активные ссылки – красные. Есть специальные теги в которых задают в форме RGB цвет каждого типа текста.

Чтобы задать в RGB цвет основного текста документа, в теге <BODY> используют атрибут TEXT=:

<BODY TEXT="RRGGBB">.

В теге <BODY>, также помещают атрибуты LINK=, VLINK= и ALINK=/ Их задают даже без атрибута TEXT=.

Например, <BODY LINK= "#RRGGBB" ALINK= "#RRGGBB" VLINK= "#RRGGBB">.

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

------

ФОН WEB - СТРАНИЦЫ В РАЗНЫХ ТИПАХ БРОУЗЕРОВ

-------

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

Многие броузеры вообще не поддерживают задание фона. Проблемы с фоном могут возникнуть в связи с настойкой видеокарты. Например, Вы получите тёмные размытые пятна вместо фона, если на компьютере пользователя установлено менее 256 цветов, а фон состоит более чем из 16 цветов.

Чтобы Ваши страницы видели многие, лучше всего поддерживать 16 основных цветов. Их поддерживают все видеокарты.

На многих компьютерах установлен простой драйвер Windows VGA. Который тоже плохо поддерживает сложный фон. Это следует иметь в виду.

Монохромные мониторы показывают любой фон как чёрный. Поэтому, посетители должны знать, что Вы используете цвет.

------

Задание: Проверить содержащиеся в тексте примеры, предложить и проверить модификации этих примеров.

ЛИТЕРАТУРА

1. HTML в действии/ Пер. с англ. – Спб.: Питер, 19с : ил.

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

Вычислительная техника Лабораторный практикум (стр. 3 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы