Структура документа 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.
Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</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>
<ol type="A">
<li>элемент 1</li>
</ol>
<ol start="5">
<li>элемент 1</li>
</ol>
Маркированный список
<ul type="circle">
<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 name="Начало страницы"></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 rows="200,*">
<frame name="frame1" src="lsn017.html">
<frame name="frame2" src="lsn016.html">
</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><img src=images/smiles/icon18.gif>
<input type=checkbox name=checkbox>
список
<SELECT NAME=list>
<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 указывает страницу на которую ведет данная зона карты ссылок.