Главная | Обратная связь | Поможем написать вашу работу!

Лабораторная работа 2. Специальные символы

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

Таблица 2.1 – Специальные символы

Символ	HTML-код	Название
	¡ или	неразрывный пробел
¢	¢	значок цента
£	£	значок фунта стерлингов
¤	¤
¥	¥	значок японской йены
§	§	параграф
©	© или ©	символ авторского права
«	« или «	левая русская кавычка
®	® или ®	зарегистрированная торговая марка
°	°	градус
±	±	плюс-минус
²	²	квадрат
³	³	куб
»	» или »	правая русская кавычка
¼	¼	четверть
½	½	половина
¾	¾	три четверти
×	×	знак умножения
÷	÷	знак деления

Определение цвета

Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода. Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например, white — белый, black — черный, red — красный, green — зеленый, blue — синий.

Фрагмент таблицы цветов приведен в таблице 2.2, полную таблицу легко найти в Интернете.

Таблица 2.2 – Фрагмент таблицы цветов

Название цвета	Красная компонента	Зеленая компонента	Синяя компонента
beige	F5	F5	DC
bisque	FF	E4	C4
black
blanchedalmond	FF	EB	CD
blue			FF
blueviolet	8A	2B	E2
brown	A5	2A	2A
burlywood	DE	B8
cadetblue	5F	9E	A0
chartreuse	7F	FF
chocolate	D2		1E
coral	FF	7F
cornflowerblue			ED
cornsilk	FF	F8	DC

Другой способ задать цвет — указать его код в формате RGB. Цвет записывается в виде трех пар шестнадцатеричных цифр, перед которыми ставится символ #. Каждая пара цифр может принимать значения в интервале от 00 до FF (или от 0 до 255 в десятичной записи). Первая пара обозначает яркость красного (R — red), вторая и третья - яркости зеленого (G — green) и синего (B — blue) в этом цвете. Всего такая форма записи позволяет задать более 16 миллионов разных цветов (режим True Color — истинный цвет), однако возможно, что не все они могут быть реализованы на экране монитора. Примеры цветов в шестнадцатеричном формате: #FFFFFF — белый, #000000 — черный, #FF0000 — красный, #00FF00 — зеленый, #0000FF — синий.

Вставка иллюстраций в текст документа

На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры. Рисунки Web-страниц обычно занимают намного больше места, чем текст, поэтому в сети Интернет используют такие способы кодирования, при которых информация находится в сжатом виде и распаковывается браузером в момент вывода рисунка на экран. В настоящее время поддерживаются следующие три формата: GIF, JPEG и PNG.

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

Фон страницы

Рисунок можно установить в качестве фона страницы. Для этого используется параметр BACKGROUND тега BODY. Если указано только имя файла, рисунок должен находиться в том же каталоге, что и сама Web-страница: <BODY BACKGROUND="lake.jpg">.

Можно указать также относительный адрес файла (так же, как в ссылках) или URL

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

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

Обычно фоновый рисунок прокручивается вместе с текстом, однако можно запретить прокрутку фона, задав параметр BGPROPERTIES="fixed" тега BODY: <BODY BACKGROUND="lake.jpg" BGPROPERTIES="fixed">

Объекты

Объекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, VRML.

К тегам, размещающим подобные объекты, относятся:

● IMG - Используется для вставки в HTML изображений

● EMBED - Используется для вставки в HTML различных объектов

● NOEMBED- Используется, если браузер не поддерживает элемент EMBED

● APPLET - Используется для вставки в HTML Java-апплетов

● PARAM - Используется для передачи параметров Java-программе (см. элемент APPLET).

Наиболее популярным является тег IMG, который используется для вставки изображений в HTML-документ. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Четвертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тега. Атрибуты:

· SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL.

Пример1:

Здесь рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в соседнем каталоге IMAGES, а image3.jpg — на сервере в Интернете.

· HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

· HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

Пример2:

Пример3:

· ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Например: <IMG SRC="image.jpg" ALIGN="left">. Может принимать следующие значения:

o left – выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

o right – выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

o top и texttop – выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

o middle – выравнивает базовую линию текущей текстовой строки с центром изображения.

o absmiddle – выравнивает центр текущей текстовой строки с центром изображения.

o bottom и baseline – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

o absbottom – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

· NAME – определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

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

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

· LOWSRC – указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

· USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.

· ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения.

Пример 4:

<IMG SRC="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь"

HSPACE="10" ALIGN="left"> Этот текст обтекает картинку справа и находится от нее на расстоянии 10 пикселов.

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

<IMG SRC="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right"

BORDER="0" ALT="Моё резюме">

</A>

Для просмотра резюме нажмите на кнопку справа.

Пример 6. Использование ISMAP:

<IMG SRC="map.gif" ISMAP></A>');

Пример 7. Использование USEMAP:

<IMG SRC="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle"

BORDER="0" USEMAP="#ButtonsMap">');

ПРИМЕЧАНИЯ (ОСОБО ВАЖНО):

Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно.

Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в атрибуте ALT.

Всегда сразу после <IMG...> ставьте <BR>! А то проблем не миновать – после картинки появится пустое пространство в несколько пикселей. Причём ставьте вплотную, без пробелов: <img...><br>.

Для завершения обтекания изображения текстом используйте атрибут CLEAR элемента BR.

Значения top и texttop атрибута ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.

Указывайте значения атрибутов HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

Пример8:

<BODY>
<IMG SRC="web.jpg" ALIGN="left">
Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.
<BR CLEAR="left">
До самого вечера тело с варежками то меняло направление своего движения, то останавливалось, то снова приходило в движение.
</BODY>

Пример9:

Рисунки очень часто являются гиперссылками. Если вы хотите сделать рисунок ссылкой, надо заключить соответствующий ему тег <IMG> внутрь тега <A>.

Пример10:

Нулевое значение параметра BORDER тега <IMG> служит для того, чтобы избавиться от синей границы вокруг рисунка-ссылки.

Практическая часть

Задание 2.1.

Проделать примеры1 – 10, приведенные в тексте. В случае необходимости дополнить текст нужными тегами. В случае отсутствия объектов ссылок, приложить усилия по их созданию или выйти из положения другими способами. Каждый пример расположить на отдельной странице браузера.

Задание 2.2.

Создать файл Pr_2_1.html в текстовом редакторе Блокнот, в него набрать нижеследующий пример:

<HTML>

<HEAD>

<TITLE>Пример размещения иллюстрации отдельно от текста</TITLE>

</HEAD>

<BODY>

<H1 ALIGN=CENTER><B>Зимняя сказка</B></H1>

<P ALIGN=JUSTIFY>Зима медленно догорала под еще не жарким весенним солнцем. Сосульки, за долгую зиму наросшие на старой валежине, под которой находилась берлога Медведицы, тихо плакали в потемневший снег. Тогда-то и появился на свет (если только можно назвать "светом" царящие в берлоге сумерки) Медвежонок - маленькая меховая рукавичка с юрким блестящим кнопкой-носиком.</P>

</BODY>

</HTML>

Просмотрите результат в браузере

Задание 2.3.

Создать файл Pr_2_2.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:

⇐ Предыдущая 3 4 5 6 789 10 11 12 Следующая ⇒

Воспользуйтесь поиском по сайту: