Лабораторная работа 2. Специальные символы
Существуют некоторые специальные символы, для добавления которых надо использовать их числовой код или условное обозначение, перед которым ставится знак &. В таблице ниже даны самые распространенные специальные символы.
Таблица 2.1 – Специальные символы
|
Символ |
HTML-код |
Название |
|
|
¡ или |
неразрывный пробел |
|
¢ |
¢ |
значок цента |
|
£ |
£ |
значок фунта стерлингов |
|
¤ |
¤ |
|
|
¥ |
¥ |
значок японской йены |
|
§ |
§ |
параграф |
|
© |
© или © |
символ авторского права |
|
« |
« или « |
левая русская кавычка |
|
® |
® или ® |
зарегистрированная торговая марка |
|
° |
° |
градус |
|
± |
± |
плюс-минус |
|
² |
² |
квадрат |
|
³ |
³ |
куб |
|
» |
» или » |
правая русская кавычка |
|
¼ |
¼ |
четверть |
|
½ |
½ |
половина |
|
¾ |
¾ |
три четверти |
|
× |
× |
знак умножения |
|
÷ |
÷ |
знак деления |
Определение цвета
Цвет в языке HTML задается двумя способами: по имени и в виде шестнадцатеричного кода. Многие цвета имеют (английские) имена и эти названия понимают браузеры. Например, white — белый, black — черный, red — красный, green — зеленый, blue — синий.
Фрагмент таблицы цветов приведен в таблице 2.2, полную таблицу легко найти в Интернете.
Таблица 2.2 – Фрагмент таблицы цветов
|
Название цвета |
Красная компонента |
Зеленая компонента |
Синяя компонента |
|
beige |
F5 |
F5 |
DC |
|
bisque |
FF |
E4 |
C4 |
|
black |
00 |
00 |
00 |
|
blanchedalmond |
FF |
EB |
CD |
|
blue |
00 |
00 |
FF |
|
blueviolet |
8A |
2B |
E2 |
|
brown |
A5 |
2A |
2A |
|
burlywood |
DE |
B8 |
87 |
|
cadetblue |
5F |
9E |
A0 |
|
chartreuse |
7F |
FF |
00 |
|
chocolate |
D2 |
69 |
1E |
|
coral |
FF |
7F |
50 |
|
cornflowerblue |
64 |
95 |
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-страница:<BODYBACKGROUND="lake.jpg">.
Можно указать также относительный адрес файла (так же, как в ссылках) или URL
Если рисунок меньше, чем размер окна браузера, фон будет вымощен рисунками-прямоугольниками как плиткой. Поэтому для фона используют специальные рисунки, которые не дают швов при стыковке.
Вообще нежелательно использовать рисунок в качестве фона, потому, что он отвлекает от чтения текста и рассеивает внимание. Поэтому для сайтов, в которых важнее всего — текст, рекомендуется использовать только одноцветный фон. Если же по каким-то причинам надо сделать фон-рисунок, он не должен мешать чтению текста.
Обычно фоновый рисунок прокручивается вместе с текстом, однако можно запретить прокрутку фона, задав параметр BGPROPERTIES="fixed" тега BODY: <BODYBACKGROUND="lake.jpg"BGPROPERTIES="fixed">
Объекты
Объекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, VRML.
К тегам, размещающим подобные объекты, относятся:
● IMG - Используется для вставки в HTML изображений
● EMBED - Используется для вставки в HTML различных объектов
● NOEMBED- Используется, если браузер не поддерживает элементEMBED
● APPLET- Используется для вставки вHTMLJava-апплетов
● PARAM- Используется для передачи параметровJava-программе (см. элементAPPLET).
Наиболее популярным является тег IMG, который используется для вставки изображений в HTML-документ. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Четвертые версии браузеров позволяют также использовать формат PNG, но до тех пор, пока они не устареют, от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тега. Атрибуты:
SRC – обязательный атрибут. Указывает адрес (URL) файла с изображением. Если рисунок надо искать в том же каталоге, что и сама страница, надо просто написать имя файла. Можно указать также относительный адрес файла (так же, как в ссылках) или URL.
Пример1:
<IMG SRC="image1.jpg"> <IMG SRC="images/image2.jpg"> <IMG SRC="http://server/images/image3.jpg">
Здесь рисунок image1.jpg находится в текущем каталоге, рисунок image2.jpg — в соседнем каталоге IMAGES, а image3.jpg — на сервере в Интернете.
HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
HSPACE и VSPACE – определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
Пример2:
<IMG SRC="image.jpg" ALIGN="left">
Пример3:
<IMG SRC="image.jpg" ALIGN="left" VSPACE="10" HSPACE="10">
ALIGN – обязательный атрибут. Указывает способ выравнивания изображения в документе. Например: <IMGSRC="image.jpg"ALIGN="left">. Может принимать следующие значения:
left– выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right– выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
topиtexttop– выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle– выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle– выравнивает центр текущей текстовой строки с центром изображения.
bottomиbaseline– выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
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.Использование изображения в качестве гиперссылки:
<A HREF="my.html">
<IMG SRC="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right"
BORDER="0" ALT="Моё резюме">
</A>
Для просмотра резюме нажмите на кнопку справа.
Пример 6.ИспользованиеISMAP:
<AHREF="http://www.igf.ru/bin/imagemaps/map1">
<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> <IMGSRC="web.jpg" ALIGN="left"> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. <BR CLEAR="left"> До самого вечера тело с варежками то меняло направление своего движения, то останавливалось, то снова приходило в движение. </BODY>
Пример9:
<IMGSRC="photo.jpg"ALT="Моя фотография" WIDTH="50"height="80"BORDER="0">
Рисунки очень часто являются гиперссылками. Если вы хотите сделать рисунок ссылкой, надо заключить соответствующий ему тег <IMG> внутрь тега <A>.
Пример10:
<A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" BORDER="0"> </A>
Нулевое значение параметра 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=CENTER><IMG SRC="winter.gif" ALT="Зима в лесу"></P>
<P ALIGN=JUSTIFY>Зима медленно догорала под еще не жарким весенним солнцем. Сосульки, за долгую зиму наросшие на старой валежине, под которой находилась берлога Медведицы, тихо плакали в потемневший снег. Тогда-то и появился на свет (если только можно назвать "светом" царящие в берлоге сумерки) Медвежонок - маленькая меховая рукавичка с юрким блестящим кнопкой-носиком.</P>
</BODY>
</HTML>
Просмотрите результат в браузере
Задание 2.3.
Создать файл Pr_2_2.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:
|
|
