Ход работы. Размещение графики на Web-странице
Размещение графики на Web-странице. Тег <img> является одиночным, т.е. закрывающий тег не применяется. Внесите изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY BGCOLOR="#FFFFFF" TEXT="#330066"><P ALIGN=CENTER><FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR><FONT SIZE="6"><I>занятий на вторник</I></FONT><BR><BR><IMG SRC="schedule.jpg"></P></BODY></HTML>1. Самостоятельно внесите изменения в файл schedule.html, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:
Фоновое отображение графики на Web-странице 1. Поместите файл back.jpg в ту же папку, что и schedule.html. 2. Внесите изменения в файл schedule.html: <HTML><HEAD><TITLE> Учебный файл HTML </TITLE></HEAD><BODY BACKGROUND="back.jpg" TEXT="#330066"><P ALIGN=CENTER><FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR><FONT SIZE="6"> <I>занятий на вторник</I></FONT><BR><BR></P></BODY></HTML>На экране вы увидите:
В действительности же графический файл back.jpg выглядит так:
Линейки и буквицы Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики. Во-первых, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (<HR>). Вот так он выглядит в окне браузера: Хотя тег <HR> и поддается настройке, графический разделитель вместо <HR> часто выглядит лучше:
Во-вторых, можно применить графический элемент в качестве буквицы. Встроить буквицу в текст можно следующим образом:
1. Разместите в Вашем документе schedule.html разделитель anim_hr.gif. 2. Задайте этому изображению высоту, равную 2 пикселям. 3. Сместите анимированный разделитель в центр документа. 4. В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами (файл r.gif). 5. Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране. 6. Используя любой графический редактор, создайте свое, альтернативное, изображение буквы Р и встройте его в документ. Графические маркеры. Язык HTML позволяет создавать маркированные и нумерованные списки. Пример маркированного списка: o элемент списка o элемент списка o... o элемент списка В терминах языка HTML это выглядит так: <ul><li>элемент списка<li>элемент списка<li>...<li>элемент списка</ul>Пример нумерованного списка: 5. элемент списка 6. элемент списка 7.... 8. элемент списка В терминах языка HTML это выглядит так: <ol><li>элемент списка<li>элемент списка<li>...<li>элемент списка</ol>Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое – когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно – от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники. 2. Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker.gif).. 3. Этот файл нужно поместить рядом с уже созданным файлом schedule.html. 4. Теперь введем в тег <UL> атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS – Cascading Style Sheets): <UL STYLE="list-style-image: url('marker.gif');"> Ваш список должен выглядеть так: o элемент списка o элемент списка o... o элемент списка Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Оформление кнопок. Еще одно частое применение графических элементов – это оформление кнопок. Вообще говоря, кнопка – это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики. 1. Чтобы создать кнопку, поместите в Ваш html-документ следующий код: <BUTTON>ЭТO KHОПKА</BUTTON> В браузере она должна выглядеть так: ЭТO KHОПKА Между тегами <BUTTON>...</BUTTON> можно поместить не только текст, но и изображение. Если мы поместим туда тег <IMG>, то получим кнопку с графическим изображением. 2. Скопируйте изображение home-button.gif из папки с лабораторными работами, поместите его в ту же папку, что и файл schedule.html. 3. Замените текст ЭТO KHОПKА на описание тега <IMG>, указывающего на файл home-button.gif. 4. В тег <BUTTON> введите атрибут onClick – этот атрибут позволяет описать действия, которые необходимо отработать браузеру при шелчке мыши по объекту. Обновленный тег должен вылядеть так: <BUTTON onClick="location.href='http://www.mail.ru'"> Теперь при нажатии указателем мыши на созданную кнопку браузер перейдет на страницу www.mail.ru:
|
от пример встроенной в текст буквицы, она добавлена в начало параграфа. Для экономии места приводится текст только того места странички где вставлена буквица. На всякий случай в качестве альтернативного текста дается буква "В", чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.
