Об использовании аттрибута SHAPE со значением "default". Если в данном примере после всех ссылок добавить, например, такую строку:
<AREA SHAPE="default" HREF="javascript:alert('Вы нажали на фон');">
то весь оставшийся рисунок (в данном случае фон) станет ссылкой
Урок 11
Тема: звук на страничке.
Думаю, вам уже попадались странички, после загрузки которых начинала звучать музыка. Честно признаюсь, особого восторга от них я не испытываю. Но рассмотреть эту возможность надо.
Самый простой способ предложить посетителю послушать музыку, это сделать простую ссылку на звуковой файл. Воттак:
<A HREF="music/posen.mid">ДДТ, "Осень"</A>
Посетитель вашей страницы, увидев такую ссылку - ДДТ, "Осень", сам решит, хочет ли он это слушать и стоит ли по ней кликать. После клика по такой ссылке начнется загрузка файла, который затем можно прослушать.
Чаще используют тег <EMBED>. Действие этого элемента следующее: после загрузки страницы автоматически загружается и проигрывается звуковой файл. При этом в окне появляется панель проигрывателя (или пульт управления проигрывателя - как вам удобнее называть). Пример:
<EMBED SRC="music/osen.mid" AUTOSTART="TRUE">
Как всегда, тут не все так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных браузерах эта панель выглядит и, самое обидное, ведет себя по разному.
Элемент <EMBED> может иметь следующие аттрибуты:
WIDTH - ширина панели в пикселах (можно и в процентах);
HEIGHT - высота панели в пикселах (или процентах);
ALIGN - расположение панели относительно текста, возможные значения LEFT, RIGHT, CENTER;
HIDDEN - позволяет скрыть панель, значения аттрибута: TRUE - панель скрыта, FALSE - панель видима (значение по умолчанию);
AUTOSTART - значение TRUE - проигрыватель стартует автоматически, FALSE - ждет нажатия на кнопку "воспроизведение";
LOOP - цикл, т.е. при значении TRUE мелодия будет проигрываться по кругу, а при значении FALSE - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE.
Пример использования перечисленных выше аттрибутов:
<EMBED SRC="music/osen.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">
В данном примере панель управления будет скрыта, воспроизведение звукового файла начинается автоматически, повторяться будет бесконечно. Думаю, посетитель вашего сайта достойно оценит такое решение!
Некоторые браузеры поддерживают еще аттрибут CONTROLS ("органы управления" - англ.), который позволяет сконфигурировать панель управления. Он может иметь следующие значения:
CONSOLE - панель обычного размера;
SMALLCONSOLE - панель меньшего размера;
PLAYBUTTON - вместо всей панели только кнопка "Воспроизведение";
PAUSEBUTTON - вместо всей панели только кнопка "Пауза";
STOPBUTTON - вместо всей панели только кнопка "Стоп";
VOLUMELEVER - вместо всей панели только регулятор громкости.
Элемент <EMBED> поддерживает звуковые файлы с расширениями MID, WAV, AIFF, AU, видеофайлы AVI.
Элемент <BGSOUND> задает фоновый звук для страницы, т.е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Браузером Netscape не поддерживается. Может иметь аттрибут LOOP, определяющий количество повторов фрагмента. Пример использования:
<BGSOUND SRC="music/osen.mid" LOOP="3">
Урок 12
Тема: вкратце о CSS.
Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!
Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:
<HTML>
<HEAD>
<TITLE>Изучимтаблицыстилей!</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</H1>
<H2>Заголовок поменьше</H2>
<P>А это уже абзац - самый обычный абзац.</P>
</BODY>
</HTML>
А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css">
<!--
H1 { font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif }
H2 { font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif }
P { background: silver; text-align: center; font-family: courier, fixed,
monospace }
-->
</STYLE>
Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "<!--" и "-->") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что всякий текст, находящийся между метками <H1> и </H1>, должен отображаться шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2> должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И, наконец, строка P определяет поведение всех абзацев на странице: на сером фоне, выровнены по центру, шрифт - courier, fixed или monospace.
Вот и все. Как говорится, просто и со вкусом. Таким образом вы можете управлять проактически всем, что появляется на вашей странице. Т.е. практически любому тегу можно придать новые свойства. А теперь подробнее.
Font-family - шрифт, используемый для отображения данного элемента. В идеале, конечно, было бы неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер просматривает этот список пока не встретит имеющийся в наличии шрифт. Например, компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"
Font-size - размер шрифта. Может указываться в точках (pt), пикселах (px).
Font-style: italic - курсив (наклонный шрифт).
Font-weight: bold - жирный шрифт. Значение может быть также числовым, только различные браузеры реагируют на это по-разному.
Text-transform - преобразование текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase (все буквы будут строчные), capitalize (каждое слово будет начинаться с заглавной буквы) и none (т.е. никаких действий).
Text-decoration - выделение текста, допустимые значения: underline (подчеркнутый), line-through (перечеркнутый), blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись подчеркиванием, можно включить в заголовок документа следующий текст:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</STYLE>
Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками <STRONG> и </STRONG> будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты (т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {text-indent: 10pt}
Margin - устанавливает отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ сверху) и margin-bottom (отступ снизу).
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример: