Структура документа HTML. Рисунки и видеоролики на Web-страницах

Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы.. Для вставки графических элементов (в виде файлов с расширениями.jpg.gif.) служит тэг <IMG>. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. <img src="img/tigr.jpg" alt="Это изображение тигра"> Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. С помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Атрибут ALIGN тэга <IMG> допускает задание двух значений – left, right. Значение left - изображение слева от текста, а right - справа от него. Тэг BR с атрибутом CLEAR, указывают позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom задает вертикальное положение текста относительно границ изображения. <p><img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p> Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.

Атрибут HSPACE -ширина чистой области СЛЕВА И СПРАВА от изображения. VSPACE - СВЕРХУ и СНИЗУ.<p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. </p>

Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию – толщина линейки в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH. По умолчанию – выравнивание линейки посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN. Атрибут NOSHADE устраняет эффект объемности линейки.<hralign="left" width="50" size="5" noshade>

Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. А внедрение их в состав Web-страницы производится при помощи тега <img>. Но для указания местонахождения видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы. Если в состав тега <img> мы включим параметр start, то мы сможем явно указывать событие, после которого браузер должен будет воспроизвести загруженный видеоклип. В качестве значений данного параметра могут использоваться ключевые слова mouseover и fileopen. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе — что воспроизведение начнется сразу после полной загрузки HTML-файла. <imgdynsсr="movie.avi" start="mouseover, fileopen">

Мы можем указывать, сколько раз необходимо воспроизвести видеоролик, используя для этой цели параметр loop. В качестве значения этого параметра используется число, устанавливающее количество повторения видеоклипа. Впрочем, если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо фиксированного количества повторений, то следует использовать значение infinite. А при помощи параметра loopdeiay мы можем устанавливать временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра является число, указывающее промежуток времени в миллисекундах. <imgdynscr="movie.avi" loop="2" loopdelay="5000">
К тегу вставки видеофрагмента применяются и все остальные параметры, применимые к тегу <img>, такие, как параметры выравнивания, явного указания размера и прочие.
Для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тег <bgsound>. Тег ставляется не в тело Web-страницы, а в его заголовок, т. е. между тегами <head> и </head>. У данного тега существует обязательный параметр src, в качестве значения которого используется URL подключаемого звуквого файла. Необходимо отметить, что браузеры гарантированно распознают и воспроизводят аудиофайлы форматов MIDI и WAV. Воспроизведение иных форматов, таких как МРЗ и Real Audio, возможно только при подключении дополнительных модулей к браузерам.
Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового файла при помощи параметра loop. В качестве значения этого параметра используется число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение "-1", т. е. если мы хотим, чтобы при загрузке Web-страницы непрерывно проигрывался некий аудиофайл, следует воспользоваться следующей конструкцией:

<bgsound src="song.mid" loop="-1">

Создание таблицы

Для создания таблицы служит тэг <TABLE>. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг <TR>, для создания ячеек - <TH>, <TD>.

Тэг <TH> используется для создания ячеек с заголовками.

Тэг <TD> - для обыкновенных ячеек с данными.

Содержание ячеек заголовков отображается полужирным шрифтом и выравнивается по центру.

Для создания заголовка таблицы служит тэг <CAPTION>.

Для того, чтобы сделать видимой границы таблицы, служит атрибут BORDER тэга <TABLE>. Чтобы задать толщину разграничивающих линий внутри таблицы, необходимо воспользоваться атрибутом CELLSPACING.

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

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Форматирование текста

<B>полужирный <Big>укрупняет <Br>новая строка <Hr>горизонтальная линия <I>курсив <P>новый абзац

<U>подчеркивание текста. Размер, цвет, шрифт <Fontsizecolorface>

Рисунок <BODY background="img/fon.jpg"><p><img src="img/teacher.jpg" border="3"></p><BODY>

< width="50" height="41">размер, align="left">" align="right">выравнивание, <br clear="right">обтеканиетекстом.

Создание списков

Нумерованный список

<ol>

<li>элемент 1</li>

</ol>

<li>элемент 1</li>

</ol>

<li>элемент 1</li>

</ol>

Маркированный список

<li>элемент 1</li>

<li>элемент 2</li>

<li type="disc">элемент 3</li>

<li type="square">элемент 4</li>

</ul>

Многоуровненвый список

Списки определений

<dl>

<dt>Термин 1</dt>

<dd>Аннотация1 к термину 1</dd>

<dd>Аннотация2 к термину 1</dd>

</dl>

Гиперссылки

Гиперссылка на другую страницу

<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>

<a href="index.html">Ссылка на начало учебника</a>

Гиперссылка в пределах страницы

<a href="#Начало страницы">Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

Почтовая гиперссылка

<a href="mailto:[email protected]?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">[email protected]</a>

Открытие страниц в новом окне

<ahref="index.html" target="_blank"">Ссылка на первую страницу учебника</a>

Цвет текста гиперссылок

Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.

35. Фрагментация в Html Frame - рамка, кадр. Фреймы делят пространство окна браузера на независимые разделы, в которых отображается различная информация.

<FRAME> Определяет набор данных фрейма

Scrolling Обеспечивает сокрытие или отображение полос прокрутки фрейма

Bordercolor изменяет цвет линий рамки фрейма

Frameborder Обеспечивает сокрытие рамки фрейма

Marginheight Изменяет высоту верхнего и нижнего полей фрейма

Marginwidth Изменяет ширину левого и правого полей фрейма

<FRAMESET> Создает набор фреймов

<html>

<head>

<title>Пример работы с фреймами</title>

</head>

</frameset>

</html>

36. Для создания html-формы используется команда form. У нее могут быть следующие параметры:

NAME - определяет имя формы, обычно не указывается. Применяется для идентификации формы, если в документе присутствует несколько форм.

ACTION - обязательный параметр, он задает путь к скрипту, который будет запущен веб-сервером.

METHOD - определяет способ отправки параметров формы. Принимает значение GET или POST.

TARGET - определяет окно, в которое возвращается результат обработки отправленной формы. Возможные значения: _self, _parent, _top, _blank или явно указанное имя окна.

Поле ввода для строки <input type=text name=text value="Начальное значение" size=40 maxlength=80>.Для создания кнопки атрибут type должен быть равен button - <inputtype=buttonvalue=Кнопка>Кнопка для отправки формы создается так: <inputtype=submitvalue="Опубликовать">.Для создания радиокнопки атрибут type должен быть равен radio. <input type=radio name=smile value=images/smiles/icon18.gif>

список

<OPTION value=1>one

<OPTION value=2>two

<OPTION value=0 SELECTED>zero

</SELECT>

Областьвводадлятекстасоздаетсякомандой<textarea name=textarea cols=45 rows=6>Здесьтекстпоумолчанию</textarea>

37. Браузер (browser) – программа для доступа к самым популярным службам Internet. Самыеизвестныебраузеры – Netscape Navigator (http://www.netscape.com) и Microsoft Internet Explorer (http://www.microsoft.com).Web-браузер - это программа, установленная на компьютере пользователя, и служащая для поиска и отображения информации в сети. Браузер считывает вэб-страницы и другие файлы с диска сервера и отображает их содержимое на мониторе компьютера пользователя. Среди наиболее популярных браузеров следует назвать Microsoft Internet Explorer, Netscape Navigator, Opera.

39. Навигационная карта - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. Прежде чем создавать карту ссылок, надо в графическом редакторе определить координаты крайних точек зон. Зоны могут быть трех типов. Прямоугольная зона (rect). В этом случае задаются координаты двух точек - левого верхнего угла, правого нижнего угла. Многоугольник (poly). В этом случае задаются координаты каждой точки многоугольника. Круг (circle). В этом случае задается координата центра круга и его радиус.

Для создания карты ссылок необходимо вставить нужное изображение с помощью дескриптора <IMG>, затем, при помощи атрибута USEMAP, присвоить ему имя. После этого ввод данных при помощи тэга <MAP>.Дескриптор <AREA> определяет зоны изображения карты ссылок.Атрибут SHAPE описывает форму зоны карты ссылок.Атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон (прямоугольник, круг, многоугольник).Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.