ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Наложение изображений
Ключевое слово LOWSRC позволяет сначала загрузить файл с низким разрешением, затем больший файл с высоким разрешением:
<IMG SRC="highcar.gif" LOWSRC="lowcar.gif">
В примере сначала загружается файл lowcar.gif, а затем highcar.gif.
Анимация
Анимационный GIF является обыкновенным графическим файлом. Дело
в том, что подобный файл состоит из нескольких изображений, которые через браузер последовательно выводятся на экран. Чтобы создать анимационную картинку, необходимо сначала создать картинки, из которых будет состоять результирующий файл. Эти картинки можно сделать, например, в Adobe Photoshop.
Для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация могут использоваться теги <OBJECT> и <EMBED>.
Например, подгрузить картинку в документ можно следующим образом:
<object data="fract.jpg" type="image/jpeg"> текст фрактала</object>
Атрибут data указывает местоположение данных для объекта, атрибут type указывает тип содержимого image – изображение, jpeg – тип изображения. Текст, заключенный в тег <OBJECT></OBJECT>, отобразится, если браузер не сможет отобразить объект-картинку.
Чтобы подгрузить видеоклип, запишем аналогично:
<object data="film.mpeg" type="application/mpeg"> фильм </object>
Тэг <EMBED> поддерживается на данный момент почти всеми браузерами
и используется, как и тег <OBJECT>, для внедрения объектов в документ.
Рассмотрим внедрение музыкального файла в документ:
<embed src="music.mid" width="40" height="30"
autostart="false" loop="true"
play_loop="5" hidden="false">
</embed>
В теге могут использоваться атрибуты: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали), hidden=”true” (false) – отображать указанный объект, type=” image/jpeg” – тип подгружаемого объекта, pluginspage=”http://…” – путь к плагину (plugin – небольшая программка, выполняющая какие-либо дополнительные функции. Например, чтобы проиграть flash-анимацию, браузеру нужен плагин, к которому мы указываем путь на случай отсутствия в браузере).
Рассмотрим пример вставки flash-анимации в документ:
<ENBED src="someMovie.swf" quality=high bgcolor=#FFFFFF WIDTH=500 HEIGHT=400 swLiveConnect=true NAME=yourMovie TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/Shockwave/download/
index.cgi?Pl_Prod_Version=ShockwaveFlash">
</EMBED>
Для тега <OBJECT> четыре параметра (HEIGHT, WIDTH, CLASSIC и CODEBASE) являются атрибутами и записываются внутри тега <OBJECT>, а все остальные записываются отдельно в виде тегов <PARAM>. Например:
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
WIDTH="100"
HEIGHT="100"CODEBASE="http://active.macromedia.com/flashS/
cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE"VALUE="moviename.swf">
<PARAM NAME="PLAY"VALUE="true">
<PARAM NAME="LOOP"VALUE="true">
<PARAM NAME="QUALITY"VALUE="high">
</OBJECT>
Фреймы
Технология фреймирования в HTML позволяет просматривать в одном окне обозревателя несколько гипертекстовых документов. Однако в последние годы фреймы практически не используются.
Один фрейм отображает только один гипертекстовый документ. Создание фрейма осуществляется с помощью тегов <FRAMESET> и </FRAMESET>. Тег <BODY> в этом случае не используется. Если браузер не поддерживает фреймы, то между тегом <NOFRAMES> и тегом </NOFRAMES> заносится текст, который распознает браузер.
Тег <FRAME SRC="Name1"> позволяет описать первый фрейм, т.е. присвоить имя гипертекстовому документу. Второй фрейм описывается тегом <FRAME SRC="Name2" NAME="Main">.
Тег <FRAMESET COLS=n> позволяет определить количество фреймов и задать размер фреймов в процентах от размера окна обозревателя или зафиксировать эти размеры в пикселях.
Тег <FRAME>, имеющий самое большое количество атрибутов, позволяет настроить свойства фрейма. Ниже описываются эти атрибуты:
NAME = – имя фрейма.
MARGINWIDTH= – горизонтальный отступ (от 1 до 6) между фреймом и его границей.
MARGINHEIGHT= – вертикальный отступ (от 1 до 6) между фреймом и его границей.
SCROLLING=YES|NO|AUTO – позволяет создать/не создавать полосы прокрутки.
SCROLLING=AUTO – позволяет отображать полосы прокрутки в зависимости от свойств обозревателя.
NORESIZE – фиксированный размер фрейма.
SRC= – задать гипертекстовый документ для этого фрейма.
TARGET=Name – открыть ссылку во фрейме с именем Name.
<!--пример # 15: фреймы-->
<HTML><HEAD>
<TITLE> Пример фреймов </TITLE></HEAD>
<FRAMESET rows="20%,60%,20%">
<FRAME src="fr1.htm" noresize scrolling="no">
<FRAMESET cols="22%,78%">
<FRAME src="fr2.htm">
<FRAME src="fr3.htm" scrolling="yes" marginwidth="10"
marginheight="75">
</frameset>
<FRAME src="fr4.htm">
</frameset>
<NOFRAMES>
<CENTER><FONT size=6>Фреймы</font></center>
<HR color="blue">
Этот браузер не может воспроизводить фреймы
</noframes>
</frameset></HTML>
Формы HTML
Пользователь заполняет форму и передает информацию из нее для обработки программе, работающей на сервере. Эта программа может быть написана по технологии CGI, ASP или Servlet/JSP.
Теги <FORM>...</FORM> используются для обозначения документа как формы. Внутри элемента <FORM> определяется последовательность элементов <INPUT>, которые представляют поля для ввода информации.
<INPUT TYPE=TEXT> помещает в форму текстовое поле данных.
Если <INPUT> используется с атрибутом TYPE=TEXT, устанавливаемым по умолчанию, то могут быть использованы еще три атрибута. Атрибут MAXLENGTH устанавливает максимальное число вводимых символов. Атрибут SIZE определяет размер видимой на экране области, занимаемой текущим полем. Атрибут VALUE устанавливает начальное значение поля.
<INPUT TYPE=CHECKBOX> позволяет определить флажок для протокола передачи. Тип элемента ввода CHECKBOX позволяет получить ответы пользователя типа ДА/НЕТ. Элемент INPUT при установке атрибута TYPE=CHECKBOX использует также атрибуты NAME=”имя” VALUE=”значение”. Элемент <INPUT TYPE=RADIO> позволяет определить кнопку переключения и используется, если надо выбрать одно из нескольких значений.
<!--пример # 16: простая форма и элементы checkbox и radio-->
<HTML><HEAD>
<TITLE>Простая форма, checkbox и radio </TITLE>
</HEAD><BODY>
<FORM><H2>Простая форма</H2>
<P>My street:<INPUT NAME="street"><BR>
City: <INPUT NAME="city" SIZE="20" MAXLENGTH="20"
VALUE="Minsk"> <BR>
Zip: <INPUT NAME="zip" SIZE="5" MAXLENGTH="5"
VALUE="99999"><BR>
</FORM> <HR>
<P><H2>Ваша любимая команда</H2>
<FORM> <!--Выбор одной или нескольких команд -->
<INPUT TYPE="checkbox" NAME="team" VALUE="шахтеры">
шахтеры<BR>
<INPUT TYPE="checkbox" NAME="team" VALUE="ковбои"> ковбои <BR> <INPUT TYPE="checkbox" NAME="team" VALUE="викинги">
викинги<BR>
</FORM> <HR>
<P><H2>Какая из команд самая любимая?</H2>
<FORM><!--Выбор только одной из нескольких команд -->
<INPUT TYPE="radio" NAME="team" VALUE="шахтеры">
шахтеры <BR>
<INPUT TYPE="radio" NAME="team" VALUE="ковбои"> ковбои <BR>
<INPUT TYPE="radio" NAME="team" VALUE="викинги"> викинги <BR>
</FORM><HR>
</BODY></HTML>
Элемент ввода SELECT позволяет использовать при вводе списки с прокруткой и выпадающее меню. Для определения списка пунктов используется элемент <OPTION> и необязательные атрибуты MULTIPLE, NAME, SIZE.
Атрибут SELECTED устанавливает значение элемента для первоначального выбора. Атрибут VALUE указывает на значение, возвращаемое формой после выбора данного пункта.
<!--пример # 17: формы. Элемент SELECT-->
<HTML>
<FORM><SELECT NAME="flower">
<OPTION>chocolate
<OPTION>vanila
<OPTION VALUE="Banana">Banana
<OPTION SELECTED>cherry
</SELECT> </FORM>
</HTML>
Элемент <INPUT TYPE=RESET> используется для создания кнопки Reset, по которой можно щелкнуть мышкой и вернуться к начальным значениям полей.
Элемент <INPUT TYPE=SUBMIT> используется для создания кнопки, по которой можно щелкнуть и отправить введенные данные в виде сообщения по указанному адресу. Дополнительный атрибут NAME устанавливает название кнопки submit. Атрибут VALUE хранит значение переменной поля формы.
<!--пример # 18: формы. Элемент SELECT-->
<HTML>
<HEAD>
<TITLE> Формы </TITLE>
</HEAD>
<BODY bgcolor=#C0C0C0>
<CENTER><FONT size=6>Элементы диалога </font></center><P>
<HR color="blue">
<H2>Пример формы</h2>
<TABLE border=3 bgcolor="pink">
<FORM action="сервер.домен.путь" method="post">
<TR>
<TD><LABEL for="imya1">Имя: </label>
<TD><INPUT type="text" id="imya1">
<TR>
<TD><LABEL for="familiya1">Фамилия: </label>
<TD><INPUT type="text" id="familiya1">
<TR>
<TD><LABEL for="telefon1">Телефон: </label>
<TD><INPUT type="text" id="telefon1">
<TR>
<TD>Пол:
<INPUT type="radio" name="pol1" value="Male"> М
<INPUT type="radio" name="pol1" value="Female"> Ж
<TD align="bottom">
<INPUT align="bottom" type="submit" value="Отослать">
<INPUT type="reset">
</form>
</table>
<HR color="blue">
<H2>Элемент ISINDEX</h2>
<ISINDEX prompt="Строка для ввода критерия поиска">
<HR color="blue">
<H2>Элементы INPUT</h2>
<H3> Ввод текстовой строки </h3>
<INPUT type="text" size=50>
<H3> Ввод пароля </h3>
<INPUT type="password">
<H3> Флажки </h3>
<INPUT type="checkbox" name="F001" checked>
<INPUT type="checkbox" name="F001" checked>
<H3> Переключатели </h3>
<INPUT type="radio" name="S001" value="Первый">
<INPUT type="radio" name="S001" value="Второй">
<INPUT type="radio" name="S001" value="Третий" checked>
<H3> Кнопка подтверждения ввода </h3>
<INPUT type="submit" value="Подтверждение">
<H3> Кнопка с изображением </h3>
<INPUT type="image" src="knopka1.gif">
<H3> Кнопка очистки формы </h3>
<INPUT type="reset" value="Очистка">
<H3> Файл </h3>
<INPUT type="file" name="photo" accept="image/*">
<HR color="blue">
<H2>Элемент SELECT </h2>
<SELECT multiple>
<OPTION value=a>Первый
<OPTION value=b>Второй
<OPTION value=c>Третий
<OPTION value=d>Четвертый
</select>
<HR color="blue">
<H2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h2>
<HR color="blue">
<H2>Кнопка с надписью и рисунком</h2>
<BUTTON name="submit" value="submit" type="submit">
Надпись<IMG src="gif1.gif" alt="Рисунок"></button>
<HR color="blue">
<H2>Группа полей</h2>
<FIELDSET>
<LEGEND>Заголовок группы</legend>
Имя: <INPUT name="imya2" type="text">
Фамилия: <INPUT name="familiya2" type="text"><BR>
Телефон: <INPUT name="telefon2" type="text"><BR>
Текст подсказки
</fieldset>
<HR color="blue">
</BODY></HTML>
Метатеги
Любой метатег размещается в заголовке HTML-документа между тегами <HEAD> и </HEAD> и состоит из следующих атрибутов:
<META HTTP-EQUIV="имя" CONTENT="содержимое">
<META NAME="имя" CONTENT="содержимое">
Метатеги с атрибутом HTTP-EQUIV управляют действиями браузеров. В качестве параметра “имя” могут быть использованы следующие аргументы:
Expires – Дата устаревания: если указанная дата прошла, то запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением " 0 " заставляет браузер каждый раз при запросе проверять, изменялся ли этот документ. Например:
<META HTTP-EQUIV="expires" CONTENT="Sun, 3 April 2005 05:45:15 GMT">
Pragma – контроль кэширования. Значением должно быть “no-cache”.
Content-Type – указание типа документа. Может быть расширено указанием браузеру кодировки страницы (charset). Например:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251>
Content-language – указание языка документа. Комбинация поля Accept-Language (посылаемого браузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.
<META HTTP-EQUIV="Content-language" CONTENT="en-GB">
Refresh –определение задержки в секундах, после которой браузер автоматически обновляет документ. Дополнительная возможность – автоматическая загрузка другого документа.
<META HTTP-EQUIV="Refresh" Content="3, URL=http://www.bsu.iba.by/cgi-bin/news.pl">
Window-target – определяет окно текущей страницы; может быть использован для прекращения появления новых окон браузера при применении фреймовых структур.
<META HTTP-EQUIV="Window-target" CONTENT="_top">
Ext-cache – определяет имя альтернативного кэша
<META HTTP-EQUIV="Ext-cache" CONTENT= "name=/some/path/index.db; istructions=User nstructions">
PICS-Label – Platform-Independеnt Content rating Scheme. Обычно используется для определения рейтинга “взрослости” содержания (sex),однако может использоваться для других целей.
Управление индексацией страницы для поисковых роботов осуществляется
с использованием атрибута NAME.
<META NAME="Robots" CONTENT="NOINDEX,FOLLOW">
Возможные значения: ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW.
Description – краткая аннотация содержания документа. Используется поисковыми системами для описания документа.
<META NAME="Description" CONTENT= "Документ содержит
словарь METAтегов">
Keywords – используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке title или альтернативный заголовок.
<META NAME="Keywords" CONTENT="теги, метаданные, список">
Document-state – управление индексацией страницы для поисковых роботов. Определяет частоту индексации – или один раз индексировать, или реиндексировать документ регулярно.
<META NAME="Document-state" CONTENT="Static">
Возможные значения: Static, Dynamic
URL – управление индексацией страницы для поисковых роботов. Определяет частоту индексации: или один раз индексировать, или реиндексировать документ регулярно.
<META NAME="URL" CONTENT="absolute_url">
Author – обычно имя автора, формат произвольный.
Generator – обычно название и версия редактора, с помощью которого создана эта страница.
Copyright – обычно описание авторских прав на документ.
Resource-type – текущее состояние данного файла. Важен для поисковых систем: если его значение document, то поисковая система приступает к индексированию.
Не нашли, что искали? Воспользуйтесь поиском: