Курс лекций по "Информатике"

Автор работы: Пользователь скрыл имя, 17 Декабря 2010 в 20:36, курс лекций

Краткое описание

Работа содержит лекции в виде уроков по предмету "Информатика".

Содержимое работы - 1 файл

html.doc

— 252.00 Кб (Скачать файл)

<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 (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:

blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }  

Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела. 

А что, если захочется  изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:  

<P STYLE="text-indent: 15pt; color: red; background-color: white">

или

<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;

border-color: #F0F0F0; text-align: center"> 

Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать  в каком-то определенном стиле. Чтобы  не писать аттрибут STYLE каждый раз, можно  поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:  

Информация о работе Курс лекций по "Информатике"