Transcript Document

ЯЗЫК HTML 4.0

1 .

2 .

3 .

4 .

С П Е Ц И Ф И К А Ц И И H T M L О Б Щ А Я С Т Р У К Т У РА Я З Ы К А H T M L С Т Р У К Т У РА H T M L - Д О К У М Е Н ТА О С Н О В Ы Я З Ы К А H T M L 4 . 0

    HTML (Hyper Text Markup Language) – язык гипертекстовой разметки Гипертекст (hypertext) – это особый текст, в котором есть ссылки на другие документы Web-страницы можно создавать вручную с помощью языка HTML, при этом ввод HTML-кода выполняется в любом текстовом редакторе или с помощью HTML-редакторов В HTML, помимо команд языка, в исходный HTML-код также может записываться коды сценариев

Спецификации HTML

      Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в конце 80-х г.

1995 г. – World Wide Web Consortium (W3C) разрабатывает спецификацию HTML 2.0

Январь 1997 г. – выпущена спецификация HTML 3.2

Декабрь 1997 г. – выходит спецификация HTML 4.0

1999 г. – вносятся изменения (HTML 4.01) HTML 5.0 – в разработке

Общая структура языка HTML

  При разработке HTML-документа выполняется разметка текстового документа с помощью тэгов (tags) Тэги заключаются в угловые скобки (< >). Все объекты, не заключенные в угловые скобки, воспринимаются браузером как текстовые элементы

контейнер

 Например 

Существует два типа тэгов

одиночный

 Например 

Теги могут записываться с параметрами (атрибутами)    параметры отделяются друг от друга пробелами порядок следования параметров произволен многие параметры требуют указания их значений, которое указывается через знак равенства

HTML позволяют использовать принцип вложения одного тэга в другой   HTML нечувствителен к регистру исключения: URL-адреса и escape-последовательности

Escape-последовательности

  запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками escape-последовательность начинаются с символа ампресанд (&) и заканчиваются точкой с запятой, а между ними размещается команда, записываемая в нижнем регистре

Символ < > " & © ® Значение

Символ "меньше"; левая угловая скобка Символ "больше"; правая угловая скобка Парные кавычки Ампресанд Символ авторского права Символ зарегистрированной торговой марки

Команда

< > " & &сору; ®

Комментарии

 HTML-документ может содержать комментарии, которые не обрабатываются интерпретаторами браузеров и не отображаются на экране

Цветовые спецификации

   Некоторые элементы языка HTML могут иметь в качестве параметров переменные, обозначающие цвета Цвет задаётся с помощью меток или цифрового кода в палитре RGB (Red, Green, Blue) Перед самим кодом ставится символ #, далее следует набор из шести знаков в шестнадцатеричной системе счисления

Цвет Белый Черный Зеленый Светло-зеленый Серый Светло-серый Желтый Темно-бордовый Синий Темно-синий Голубой Изумрудный Красный Пурпурный Розовый Оливковый Значение RGB

255 255 255 000 0 128 0 0 255 0 128 128 128 192 192 192 255 255 0 128 00 0 0 255 0 0 128 0 255 255 0 128 128 255 0 0 128 0 128 255 0 255 128 128 0

Символьная метка

White Black Green Lime Gray Silver Yellow Maroon Blue Navy Aqua Teal Red Purple Fuchsia Olive

Цифровой код

#FFFFFF #000000 #008000 #00FF00 #808080 #C0C0C0 #FFFF0 #800000 #0000FF #000080 #00FFFF #008080 #FF0000 #800080 #FF00FF #808000

Структура HTML-документа

Документ HTML Заголовок документ Внешний заголовок Тело документа Основной код

Внешний заголовок Содержимое Web-страницы

Раздел документа HEAD

Раздел HEAD может включать теги  TITLE – определяет название документа   META – сообщает браузеру дополнительную информацию о документе BASE – задает базовый адрес документа     STYLE – определяет внешний вид документа ISINDEX – указывает, что данный документ будет использоваться в поисковых системах SCRIPT – определяет операторы интерпретируемых языков программирования, таких как JavaScript и VBScript и др.

Заголовок странички

 Тэг-контейнер </i>служит для того, чтобы дать заголовок документу. Оно обычно показывается в заголовке окна браузера</p> <a id="p17" href="#"></a> <h2><b>Раздел документа BODY</b></h2> <p>Тэг-контейнер <BODY> содержит в себе всю отображаемую на странице информацию. Тэг может иметь параметры:  BACKGROUND – фонового изображение      BGCOLOR – цвет фона документа BGPROPERTIES – если установлено значение FIXED, фоновое изображение не прокручивается BOTTOMMARGIN – устанавливает границу нижнего поля документа в пикселах LEFTMARGIN – устанавливает границу левого поля документа в пикселах RIGHTMARGIN – устанавливает границу правого поля документа в пикселах       TOPMARGIN – устанавливает границу верхнего поля документа в пикселах SCROLL – устанавливает наличие или отсутствие полос прокрутки окна браузера TEXT – определяет цвет текста LINK – определяет цвет еще не просмотренной ссылки ALINK – определяет цвет активной гиперссылки VLINK – определяет цвет уже просмотренной ссылки</p> <a id="p18" href="#"></a> <h2><b>Форматирование текста </b></h2> <p><b>Логическое форматирование</b></p> <p>  обозначают структурные типы текстовых фрагментов Фрагменты с логическим форматированием браузеры отображают на экране определённым образом, заданным по умолчанию</p> <p><b>Физическое форматирование</b></p> <p> определяют формат отображения указанного в них фрагмента текста в окне браузера</p> <a id="p19" href="#"></a> <h2><b>Тэги логического форматирования текста</b></h2> <p>         <i><ACRONYM> </i>– обозначение аббревиатуры <i><СIТЕ> </i>, <i><Q>, <BLOCKQUOTE> </i>– цитаты <i><DFN> </i>– выделение текстового фрагмента как определение <i><ЕМ> , <STRONG> </i>– важные фрагменты текста <i><INS> </i>– обозначение текста как вставки <i><CODE> </i>– обозначение текста как небольшого фрагмента программного кода <i><SAMP> </i>– обозначение текста, выдаваемого программой <i><VAR> </i>– обозначение в тексте имен переменных программ <i><KBD> </i>– обозначение текста, вводимого пользователем с клавиатуры</p> <a id="p20" href="#"></a> <h3>Обозначение аббревиатуры</h3> <p> Имеет параметр <i>TITLE</i>, в качестве значения которого можно указать полную форму записи аббревиатуры</p> <a id="p21" href="#"></a> <h3>Обозначение цитат</h3> <p>   используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д.</p> <p>отмечает короткие цитаты в строке текста цитат используется для отображения длинных </p> <a id="p23" href="#"></a> <h3>Обозначение определений</h3> <p> <i><DFN> </i>– выделение текстового фрагмента как определение</p> <a id="p24" href="#"></a> <h3>Выделение важных фрагментов</h3> <p> <STRONG<i>> </i>обычно размечают более важные фрагменты текста, чем те, что размечены <ЕМ></p> <a id="p25" href="#"></a> <h3>Обозначение вставок и удалений</h3> <p>   1.</p> <p>2.</p> <p>используют для отметки изменений, вносимых в документ. используют для отметки в документе удалённого текса Имеют два необязательных параметра: CITE - URL-адрес документа, поясняющего подробности внесенных изменений DATETIME указывает дату внесения изменений в формате: YYYY-MM-DDThh:mm:ssTZD</p> <a id="p27" href="#"></a> <h3>Обозначение элементов программ</h3> <p>   - обозначение текста как небольшого фрагмента программного кода - текст, выдаваемой программой - обозначение в тексте имён переменных программ</p> <a id="p29" href="#"></a> <h3>Обозначение вводимого с клавиатуры текста</h3> <p> – обозначение текста, вводимого пользователем с клавиатуры</p> <a id="p30" href="#"></a> <h3>Тэги физического форматирования текста</h3> <p>         отображает текст полужирным шрифтом отображает текст курсивом отображает текст моноширинным шрифтом отображает текст подчеркнутым и отображают текст, перечеркнутый горизонтальной линией выводит текст шрифтом большего размера, чем непомеченная часть текста выводит текст шрифтом меньшего размера, чем непомеченная часть текста сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера</p> <a id="p33" href="#"></a> <h3>Изменение параметров шрифта</h3> <p>указывает параметры шрифта.</p> <p>Имеет параметры:  FACE - типа шрифта, которым программа просмотра пользователя будет выводить текст   SIZE - размер шрифта COLOR - цвет шрифта</p> <a id="p35" href="#"></a> <h3>Форматирование информации на веб-страничке</h3> <p>1.</p> <p>2.</p> <p>3.</p> <p>4.</p> <p>Разделение на абзацы Перевод строки Заголовки внутри HTML-документа Горизонтальные линии</p> <a id="p36" href="#"></a> <h3>Разделение на абзацы</h3> <p>- определяет абзац Имеет параметр выравнивания <i>ALIGN</i>, который может принимать значения:  <i>LEFT </i>– выравнивание текста по левой границе окна браузера    <i>CENTER </i>– выравнивание по центру окна браузера <i>RIGHT </i>– выравнивание по правой границе окна браузера <i>JUSTIFY </i>– выравнивание по ширине (по двум сторонам)</p> <a id="p37" href="#"></a> <h3>Перевод строки</h3> <p>  Включение тэга размещение последующего текста с начала новой строки в текст документа обеспечит Бывают ситуации, когда требуется выполнить операцию противоположного назначения – запретить перевод строки. Для этого существует тэг-контейнер </p> <a id="p38" href="#"></a> <h3>Заголовки внутри HTML-документа</h3> <p>Для разметки заголовков используются тэги , , , и Имеют параметр выравнивания <i>ALIGN</i>:  <i>RIGHT </i>– позиционирование по правой границе документа   <i>LEFT </i>– позиционирование по левой границе документа <i>CENTER </i>– позиционирование по центру документа , </p> <a id="p39" href="#"></a> <h3>Горизонтальная линия</h3> <p>Тэг позволяет провести горизонтальную линию в окне большинства программ просмотра Иметь параметры:  <i>ALIGN </i>– выравнивает по краю или центру, может принимать значения <i>LEFT</i>, <i>CENTER</i>, <i>RIGHT</i>    <i>WIDTH </i>– устанавливает длину линии в пикселях или процентах от ширины окна браузера <i>SIZE </i>– устанавливает толщину линии в пикселях <i>COLOR </i>– указывает цвет линии с помощью формата <i>RGB </i>или стандартного имени</p> <a id="p40" href="#"></a> <p><b><P ALIGN=LEFT> aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaaaaaaa </P> <P ALIGN=CENTER> aaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaa</P> <P LIGN=RIGHT> aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaa aaaaa</P> <P ALIGN=JUSTIFY> aaaaaaaa aaaaa aaaa aaaaaa aaaaa aaaaaaaaaaaa aaa aaaaa aaaaa aaaaaaaaaaaaa aaaa aaaaaaa aaaaaa aaaa aaaaa aaaaaaa aaaaaa aaaaa aaaa aaaaaaaaaa aaaaaaa aaaaaaaaaaa </P> <P ALIGN=JUSTIFY> aaaaaaaaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaaaaa <BR> aaaaa aaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaa </P> <HR ALING=CENTER WIDTH=90% SIZE=2 COLOR=RED> <NOBR> aaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaaaa </NOBR></b></p> <a id="p42" href="#"></a> <h2><b>Организация ссылок</b></h2> <p>  Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который она ссылается. Оба действия выполняются при помощи тэга Тэг <i><А> </i>имеет единственный параметр <i>HREF</i></p> <a id="p43" href="#"></a> <h3>Внутренние ссылки</h3> <p> Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения  После того как место назначения определено, можно создать ссылки на него</p> <a id="p44" href="#"></a> <h3>Ссылки на документы различных типов</h3> <p><b>Ресурсы Internet Web-страница e-mail Newsgroup FTP TelNet Формат ссылки</b></p> <p>http://имя сайта mailto:адрес mailto:me@mysite.com</p> <p>news:имя группы новостей news:news.newusers.questions</p> <p>ftp://имя сайта ftp://ftp.mysite.com/ telnet://имя сайта</p> <p><b>Пример записи ссылки</b></p> <p>http://www.mysite.com/ telnet://bbs.mysite.com/</p> <a id="p46" href="#"></a> <h3>Списки</h3> <p>В языке HTML предусмотрены следующие типы списков:  маркированный   нумерованный список определений</p> <a id="p47" href="#"></a> <h3>Маркированный список</h3> <p>   Для создания маркированного списка необходимо использовать тэг-контейнер Каждый элемент списка должен начинаться тэгом <UL> имеет параметр TYPE, который может принимать значения:    DISC – маркеры отображаются закрашенными кружками CIRCLE – маркеры отображаются не закрашенными кружками SQUARE – маркеры отображаются закрашенными квадратиками</p> <a id="p48" href="#"></a> <h3>Нумерованный список</h3> <p> Для создания нумерованного списка следует использовать тэг-контейнер      Каждый элемент списка должен начинаться тэгом Тэг <OL> может имеет параметры TYPE и START Параметр TYPE задаёт вид нумерации списка:  А – задаёт маркеры в виде прописных латинских букв     a – задаёт маркеры в виде строчных латинских букв I – задаёт маркеры в виде больших римских цифр i – задаёт маркеры в виде маленьких римских цифр 1 – задаёт маркеры в виде арабских цифр Параметр START позволяет начать нумерацию списка не с первого значения Тэг <LI> для нумерованных списков разрешает использовать параметры TYPE и VALUE. Параметр TYPE может принимать такие же значения, как и для тэга <OL>. Параметр VALUE позволяет изменить номер данного элемента списка</p> <a id="p49" href="#"></a> <h3>Список определений</h3> <p> Списки определений задаются с помощью тэга контейнера <DL>. Внутри контейнера тэгом <DT> помечается определяемый термин, а тэгом <DD> – его определение</p> <a id="p52" href="#"></a> <h3>Графика</h3> <p>  На web-страницах в подавляющем большинстве случаев используется растровая графика форматов: GIF, JPG и PNG Использование графики:   Фоновые изображения ( параметра <i>BACKGROUND </i>тэга </p> <p><i><BODY></i></p> <p>) Встраивание изображений в HTML-документы  Использование изображения в качестве ссылки</p> <a id="p53" href="#"></a> <h3>Встраивание изображений в HTML-документы</h3> <p> Для встраивания изображений в HTML-документ используется тэг <IMG>, имеющий обязательный параметр SRC, определяющий URL-адрес файла с изображением</p> <a id="p54" href="#"></a> <h3>Параметр ALIGN тега <IMG></h3> <p>        ТОР – верхняя граница изображения выравнивается по самому высокому элементу текущей строки ТЕХТТОР – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки MIDDLE – выравнивание середины изображения по базовой линии текущей строки ABSMIDDLE – выравнивание середины изображения посередине текущей строки BASELINE или BOTTOM – выравнивание нижней границы изображения по базовой линии текущей строки ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны RIGHT – изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны</p> <a id="p58" href="#"></a> <h3>Другие параметры тега <IMG></h3> <p>      WIDTH - ширина HEIGHT - высота HSPACE - отступы от изображения по горизонтали VSPACE - отступы от изображения по вертикали BORDER - рамка ALT - альтернативный текст</p> <a id="p61" href="#"></a> <h3>Использование изображения в качестве ссылки</h3> <p> Графические изображения могут использоваться как указатель гипертекстовых связей. Для этого изображение необходимо вставить внутрь тэга контейнера <А></p> <a id="p62" href="#"></a> <h3>Таблицы в HTML</h3> <p>       Документ может содержать произвольное число таблиц Допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом и завершаться тэгом - заголовок таблицы – строка таблицы – ячейка-заголовок – ячейка-данных</p> <a id="p65" href="#"></a> <h3>Параметры тэга <TABLE></h3> <p>       BORDER – управляет изображением рамки таблицы CELLSPACING – определяет расстояние между ячейками CELLPADDING – определяет расстояние между содержимым ячейки и её границами WIDTH – определяет ширину таблицы ALIGN – определяет горизонтальное расположение таблицы в области просмотра HEIGHT - определяет высоту таблицы BGCOLOR - задает цвет подложки всей таблицы</p> <a id="p66" href="#"></a> <h3>BORDER=2</h3> <a id="p67" href="#"></a> <h3>BORDER=2 CELLSPACING=10</h3> <a id="p68" href="#"></a> <h3>BORDER=2 CELLSPACING=10 CELLPADDING=10</h3> <a id="p69" href="#"></a> <h3>BORDER=2 WIDTH=70%</h3> <a id="p70" href="#"></a> <h3>BORDER=2 WIDTH=200 ALIGN=CENTER</h3> <a id="p71" href="#"></a> <h3>Объединение нескольких ячеек</h3> <p>   Для сложных таблиц необходимо объединять нескольких ячеек в одну Данная возможность реализуется с помощью параметров COLSPAN и ROWSPAN, задаваемых в кодах <TD> или <TH>. COLSPAN определяет, на сколько столбцов следует расширить текущую ячейку по горизонтали, ROWSPAN по вертикали</p> <a id="p74" href="#"></a> <h3>Дополнительные параметры</h3> <p>     BORDERCOLOR определяет цвет всех элементов рамок таблицы BORDERCOLORLIGHT окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки, а BORDERCOLORDARK задаёт цвета противоположных краев BACKGROUND определяет фоновый рисунок для таблицы или ячейки. Этот параметр может задаваться в тэгах <TABLE>, <TD> и <TH> FRAME - прорисовка рамок вокруг таблицы RULES - прорисовка внутренних линий сетки таблицы</p> <a id="p77" href="#"></a> <p>Параметр FRAME может принимать следующие значения         BOX или BORDER – рамка рисуется со всех четырех сторон ABOVE – только с верхней стороны BELOW – только с нижней стороны HSIDES – рисуется нижняя и верхняя сторона VSIDES – рисуется левая и правая сторона LHS – только с левой стороны RHS – только с правой стороны VOID – таблица без внешних рамок</p> <a id="p78" href="#"></a> <p>Параметр RULES может принимать следующие значения      ALL – рисуются все внутренние линии GROUPS – рисуются только линии, разделяющие группы ROWS – рисуются линии, разделяющие строки COLS – рисуются линии, разделяющие столбцы NONE – внутренние линии не рисуются</p> <a id="p81" href="#"></a> <h3>Фреймы</h3> <p>  Фреймы позволяют разбить окно браузера на несколько прямоугольных областей, располагающихся рядом друг с другом В каждую из областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других</p> <a id="p82" href="#"></a> <h3>Правила описания фреймов</h3> <p>     Для описания структуры фреймов применяются тэги и Фреймы определяются с помощью тэга <FRAMESET> Web-страницы, составленные из фреймов, не могут содержать раздел <BODY>, а страницы с разделом <BODY> не могут использовать фреймы Контейнер из тэгов <FRAMESET> … </FRAMESET> обрамляет каждый блок определений фрейма Внутри контейнера <FRAMESET> могут содержаться только тэги <FRAME> и вложенные тэги <FRAMESET></p> <a id="p83" href="#"></a> <h3>Тэг <FRAMESET></h3> <p> Тэг <FRAMESET> имеет два параметра:   ROWS – строки COLS – столбцы   Можно определить значения для ROWS или COLS, или обоих вместе Необходимо определить, по меньшей мере, два значения хотя бы одного из этих параметров</p> <a id="p84" href="#"></a> <p> Список значений параметров ROWS и COLS тэга <FRAMESET> представляет собой разделённый запятыми список значений, которые могут задаваться:  в пикселях  в процентах  в относительных единицах</p> <a id="p85" href="#"></a> <p>  Контейнер <FRAMESET>…</FRAMESET> может быть вложен внутрь другого такого же контейнера Тэг <FRAME> определяет одиночный фрейм, он должен располагаться внутри контейнера <FRAMESET>…</FRAMESET></p> <a id="p90" href="#"></a> <h3>Параметры тэга <FRAME></h3> <p>     SRC – определяет URL-адрес документа, который будет изначально загружен в данный фрейм NAME – определяет имя фрейма, которое может использоваться для ссылки к данному фрейму MARGINWIDTH и MARGINHEIGHT – устанавливают ширину полей фрейма SCROLLING – управляет отображением полосы прокрутки NORESIZE – запрещает возможность изменения пользователем размера фреймов</p> <a id="p91" href="#"></a> <h3>Файл frame1.html</h3> <a id="p92" href="#"></a> <h3>Файл frame2.html</h3> <a id="p93" href="#"></a> <h3>Файл frame3.html</h3> <a id="p95" href="#"></a> <h3>Взаимодействие между фреймами</h3> <p>  Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по команде из другого фрейма Для взаимодействия между фреймами используется параметр TARGET тэга <A></p> <a id="p96" href="#"></a> <h3>Имеется четыре зарезервированных имени</h3> <p>    – обеспечивает загрузку документа в новое окно. Это окно не будет иметь имени и, следовательно, в него невозможно будет загрузить другой документ – загрузка документа будет произведена в текущий фрейм (или окно) – вызывает загрузку документа в полное окно – вызывает загрузку документа в область, занимаемую фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя данное значение параметра действует так же, как "_top"</p> <a id="p97" href="#"></a> <h3>Плавающий фрейм</h3> <p>   В HTML 4.0 появилась возможность вставлять фрейм в обычный HTML-документ Для этого используется тэг При этом другие тэги <FRAME> и <FRAMESET> не требуются</p> <a id="p98" href="#"></a> <h3>Тэг <IFRAME> может иметь параметры</h3> <p>             ALIGN – выравнивание фрейма ALLOWTRANSPARENCY – прозрачность фона фрейма FRAMEBORDER – граница вокруг фрейма (1/0 или yes/no) HEIGHT и WIDTH – высота и ширина фрейма HSPACE и VSPACE – горизонтальный и вертикальный отступы от фрейма до окружающего контента MARGINHEIGHT – отступ сверху и снизу от содержания до границы фрейма MARGINWIDTH – отступ слева и справа от содержания до границы фрейма NAME – имя фрейма SANDBOX – позволяет задать ряд ограничений на контент загружаемый во фрейме SCROLLING –отображение полосы прокрутки во фрейме (auto / no / yes) SEAMLESS – определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа SRC – путь к файлу, содержимое которого будет загружаться во фрейм SRCDOC – хранит содержимое фрейма непосредственно в атрибуте</p> <a id="p99" href="#"></a> <h3>Значения параметра ALIGN</h3> <p>        <b>absmiddle </b>– выравнивание середины фрейма по середине текущей строки <b>baseline </b>– выравнивание фрейма по базовой линии текущей строки <b>bottom </b>– выравнивание нижней границы фрейма по окружающему тексту <b>left </b>– выравнивает фрейм по левому краю окна <b>middle </b>– выравнивание середины фрейма по базовой линии текущей строки <b>right </b>– выравнивает фрейм по правому краю окна <b>texttop </b>– верхняя граница фрейма выравнивается по самому высокому текстовому элементу текущей строки <b>top </b>– верхняя граница фрейма выравнивается по самому высокому элементу текущей строки</p> <a id="p100" href="#"></a> <h3>Значения параметра SANDBOX </h3> <p>    <b>allow-same-origin </b>– разрешает загружать содержание фрейма, воспринимая его из того же источника, что и родительский документ. Может использоваться для безопасного открытия контента, блокируя при этом всплывающие окна <b>allow-top-navigation </b>– позволяет открывать ссылки фрейма в родительском документе <b>allow-forms </b>– позволяет содержимому фрейма отправлять формы <b>allow-scripts </b>– разрешает запуск и выполнение скриптов. Создание всплывающих окон при этом запрещено</p> <a id="p102" href="#"></a> <h3>Карты-изображения</h3> <p>   Язык HTML позволяет привязывать гипертекстовые ссылки к различным областям изображения Карты-изображения предоставляют пользователям дружественный интерфейс для перехода на другие web-страницы Чтобы выполнить переход по такой ссылке, следует просто выбрать нужное место на изображении и щелкнуть мышью</p> <a id="p103" href="#"></a> <p>    Карта-изображение это обычное встроенное изображение Конфигурация карты-изображения записывается в виде обычного текста, который может быть сохранен в отдельном файле или являться частью HTML-документа Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей Активные области могут иметь форму прямоугольников, кругов и многоугольников</p> <a id="p104" href="#"></a> <h3>Реализация карт-изображений</h3> <p>Карты изображения серверные клиентские NCSA CERN</p> <a id="p105" href="#"></a> <h3>Серверный вариант карт-изображений</h3> <p>     HTML-документ должен быть размещен на сервере Сервер должен поддерживать CGI-сценарии (Common Gateway Interface - общий шлюзовой интерфейс) Для каждой карты-изображения на сервере должен быть размещен файл, описывающий конфигурацию активных областей Для изображения необходимо указать, что оно является опорным для карты. Это выполняется заданием параметра ISMAP в тэге <IMG> Изображение необходимо сделать ссылкой к файлу конфигурации (*.map)</p> <a id="p106" href="#"></a> <h3>Формат CERN (Европейский научный центр )</h3> <p>   типы областей:    </p> <p><i>rect (rectangle) circ (circle) poly (polygon) default</i></p> <p>значения пар координат <i>X </i>и <i>Y </i>разделяются запятой и заключаются в круглые скобки не допускается использование комментариев</p> <a id="p107" href="#"></a> <h3>Пример</h3> <a id="p108" href="#"></a> <p>Формат NCSA (Национальный центр суперкомпьютерных приложений университета штата Иллинойс)    типы областей:     </p> <p><i>rect circle poly default point</i></p> <p>координаты <i>X </i>и <i>Y </i>отделяются запятыми, но не заключаются в круглые скобки  круговая область задаётся координатами двух точек - центра и любой точки, лежащей на окружности допускается использование строк комментариев (#)</p> <a id="p109" href="#"></a> <h3>Пример</h3> <a id="p110" href="#"></a> <h3>Клиентский вариант карты-изображения</h3> <p>  В этом варианте конфигурация карты может располагаться непосредственно в том же HTML документе, в котором задана ссылка на опорное изображение, и допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку Для указания того, что встроенное изображение является опорным для карты, используется параметр USEMAP тэга <IMG></p> <a id="p111" href="#"></a> <p>   Для описания конфигурации областей карты изображения используется тэг NAME , единственным параметром которого является Внутри тэга <МАР> должны располагаться описания активных областей карты, для чего используется тэг Каждый отдельный тэг <AREA> задаёт одну активную область</p> <a id="p112" href="#"></a> <h3>Параметрами тэга <</h3> <p><i>AREA</i></p> <h3>></h3> <p>      SHAPE – форма активной области:    </p> <p><i>rect circle poly</i></p> <p><i>default </i>( не все браузеры поддерживают ) COORDS – координаты отдельной активной области HREF – адрес ссылки NOHREF – отсутствие ссылки TARGET – имя фрейма, в который будет загружаться документ по данной ссылке ALT – альтернативный текст </p> <a id="p113" href="#"></a> <h3>Правила задания координат</h3> <p>    Для области типа <i>rect </i>задаются координаты верхнего левого и правого нижнего углов прямоугольника Для области типа <i>circle </i>задаются три числа – координаты центра круга и радиус Для области типа <i>poly </i>задаются координаты вершин многоугольника в нужном порядке Область типа <i>default </i>не требует задания координат</p> <a id="p114" href="#"></a> <h3>Пример</h3> <a id="p115" href="#"></a> <p>Комбинация клиентского и серверного вариантов   Допустимо использование комбинированного варианта, при котором для одного и того же изображения определены оба параметра – USEMAP и ISMAP Параметр USEMAP является доминирующим</p> <a id="p116" href="#"></a> <h3>Мультимедиа</h3> <p> Гипермедиа-ссылка отличается от других ссылок только тем, что вместо связи с другими <i>HTML</i> документами она обеспечивает связь с файлом мультимедиа  Встретив такую ссылку, браузер должен суметь определить тип файла, с которым установлена связь, и обратиться к требуемому вспомогательному приложению</p> <a id="p117" href="#"></a> <h3>Модули-приложения для различных форматов</h3> <p>    LiveAudio. Данный модуль обеспечивает воспроизведение звуковых файлов форматов AIFF, AU, MIDI и WAV Live3D. Этот модуль обеспечивает воспроизведение формата VRML (расширение .WRL) LiveVideo. Данный модуль обеспечивает воспроизведение видеофайлов формата AVI QuickTime. Этот модуль обеспечивает видеофайлов формата QuickTime (расширение .MOV)</p> <a id="p118" href="#"></a> <p>Встраивание мультимедийных файлов в web-страницу  Тэг воспроизводить файл мультимедиа непосредственно в окне браузера позволяет  Вид внедренного объекта зависит от установленных в браузере плагинов, типа загружаемого файла, а также от параметров тега <EMBED></p> <a id="p119" href="#"></a> <h3>Параметры тэга <EMBED></h3> <p>       SRC – путь к воспроизводимому файлу WIDTH и HEIGHT – ширина и высота окна модуля приложения ALIGN – определяет как объект будет выравниваться на странице и способ его обтекания текстом HIDDEN – указывает, скрыть объект на странице или нет (TRUE / FALSE) HSPACE и VSPACE – горизонтальный и вертикальный отступы от объекта до окружающего контента PLUGINSPAGE – адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру TYPE – MIME-тип объекта</p> <a id="p120" href="#"></a> <h3>Значения параметра ALIGN</h3> <p>        <b>absmiddle </b>– выравнивание середины объекта по середине текущей строки <b>baseline </b>– выравнивание объекта по базовой линии текущей строки <b>bottom </b>– выравнивание нижней границы объекта по окружающему тексту (по умолчанию) <b>left </b>– выравнивает объект по левому краю окна, текст обтекает его справа <b>middle </b>– выравнивание середины объекта по базовой линии текущей строки <b>right </b>– выравнивает объект по правому краю окна, текст обтекает слева <b>texttop </b>– верхняя граница объекта выравнивается по самому высокому текстовому элементу текущей строки <b>top </b>– верхняя граница объекта выравнивается по самому высокому элементу текущей строки</p> <a id="p121" href="#"></a> <h3>Пример MIME-тип объекта</h3> <p><b>Расширение файла avi avi avi mp3 mp3 mp3 mp3 mpeg mov Тип данных</b></p> <p>video/avi video/msvideo video/x-msvideo audio/mpeg3 audio/x-mpeg-3 video/mpeg video/x-mpeg video/mpeg video/quicktime</p> <a id="p122" href="#"></a> <h3>Фоновый звук</h3> <p>      тэг используется для включения в документ фонового звукового сопровождения параметры тэга: BALANCE – управляет балансом звука между правой и левой колонками. Целое число от -10000 до 10000. Значение 0 служит для баланса громкости, отрицательные числа увеличивают громкость в левой колонке, а положительные – в правой LOOP – устанавливает, сколько раз проигрывать музыкальный файл. Значение 0 проигрывает файл один раз, -1 проигрывает музыку до тех пор, пока текущая веб-страница открыта. Любое целое положительное число заставляет браузер проигрывать музыкальный файл указанное число раз SRC – путь к музыкальному файлу VOLUME – задаёт громкость звучания музыки. Целое число от 10000 до 0. Ноль соответствует максимальной громкости звучания</p> <a id="p123" href="#"></a> <p>Для воспроизведения файлов в формате AVI можно использовать специальный параметр DYNSRC тэга <IMG>  Условие запуска видео:   FILEOPEN – автоматический старт MOUSEOVER – при щелчке мыши</p> <a id="p124" href="#"></a> <p>Для загрузки внешних данных рекомендуется использовать тег <OBJECT>    Тэг <OBJECT> сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы Тэг <OBJECT> является контейнером с множеством атрибутов</p> <a id="p125" href="#"></a> <h3>Параметры тэга <OBJECT> </h3> <p>           ALIGN – определяет, как объект будет выравниваться на странице и способ его обтекания текстом.</p> <p>ARCHIVE – устанавливает путь к файлам, необходимым для работы объекта CLASSID – адрес программы (приложения или плагина), которая работает с данным объектом, и будет запускать его.</p> <p>CODE – имя объекта для его выполнения.</p> <p>CODEBASE – путь к папке с объектом, который указан атрибутом CODE или CLASSID CODETYPE – указывает на тип объекта, который задан атрибутом CLASSID DATA – адрес файла для его отображения в окне браузера HEIGHT и WIDTH – высота и ширина объекта HSPACE и VSPACE – горизонтальный и вертикальный отступы от объекта до окружающего контента TABINDEX – определяет порядок перехода между элементами с помощью клавиши </p> <p><b><i>Tab</i></b></p> <p>TYPE – MIME-тип объекта</p> <a id="p126" href="#"></a> <h3>Создание бегущей строки</h3> <p>   Для создания бегущей строки используется тэг контейнер Содержимое контейнера <MARQUEE> позволяет перемещать любые элементы веб-страницы (изображения, текст, таблицы и т.д.) Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение</p> <a id="p127" href="#"></a> <h3>Параметры тэга <MARQUEE></h3> <p>         BEHAVIOR – задаёт тип движения содержимого контейнера <MARQUEE> BGCOLOR – цвет фона DIRECTION – указывает направление движения содержимого контейнера <MARQUEE> HEIGHT и WIDTH – высота и ширина области прокрутки HSPACE и VSPACE – горизонтальные и вертикальные поля вокруг контента LOOP – задаёт, сколько раз будет прокручиваться содержимое SCROLLAMOUNT – скорость движения контента SCROLLDELAY – величина задержки в миллисекундах между движениями TRUESPEED – отменяет встроенный ограничитель скорости при низких значениях атрибута SCROLLDELAY</p> <a id="p128" href="#"></a> <h3>Значения параметра BEHAVIOR</h3> <p>   ALTERNATE – контент перемещается между правым и левым краем элемента SCROLL – контент перемещается в направлении, заданным атрибутом DIRECTION, затем скрывается за пределами области, после чего начинает движение с начала SLIDE – контент перемещается в направлении, заданным атрибутом DIRECTION, доходит до края области и останавливается</p> <a id="p129" href="#"></a> <h3>Значения параметра DIRECTION</h3> <p>    DOWN – движение сверху вниз LEFT – движение справа налево RIGHT – движение в правую сторону UP – движение вверх</p> <a id="p130" href="#"></a> <h3>Организация связей с другими документами</h3> <p>   В HTML-документах имеют ссылки на другие документы и файлы Ссылки могут быть как абсолютные, так и относительные. И те, и другие имеют недостатки В языке HTML предусмотрены два тэга, , которые включаются в заголовок для того, чтобы связи между документами не нарушалась и </p> <a id="p131" href="#"></a> <h3>Тэг <BASE></h3> <p>  Тэг <BASE> располагается в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация Он имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа. А на основе этого URL-адреса создаются относительные адреса</p> <a id="p132" href="#"></a> <h3>Пример</h3> <a id="p133" href="#"></a> <h3>Тэг <LINK></h3> <p>   Тэг <LINK> используется для поддерживания логической связи между документами Он используется внутри элемента HEAD и состоит из URL-адреса и параметров, конкретизирующих отношения документов Заголовок документа может содержать любое количество тэгов <LINK></p> <a id="p134" href="#"></a> <h3>Параметры тэг <LINK></h3> <p>     HREF – указывает на URL-адрес другого документа REL – определяет отношение между текущим и другим документом REV – определяет отношение между другим документом и текущим (отношение, обратное REL) LANG – определяет язык документа TYPE – указывает тип и параметры присоединенного файла</p> <a id="p135" href="#"></a> <h3>Значения параметров REL и REV</h3> <p>            <b>alternate </b>– другая версия документа <b>bookmark </b>– закладка в документе <b>contents </b>– оглавление документа <b>copyright </b>– документ, содержащий информацию об авторских правах на данный документ <b>glossary </b>– документ, содержащий толковый словарь терминов для данного документа <b>help </b>– справочный документ <b>index </b>– документ, содержащий алфавитный указатель данного документа <b>next </b>– документ, следующий сразу за данным документом <b>previous </b>– документ, находящийся непосредственно перед данным документом <b>start </b>– первый документ в группе <b>stylesheet </b>– таблица стилей и др.</p> <a id="p136" href="#"></a> <p>  Тэг <LINK> не создаёт реальной ссылки Он только документирует связи между страницами, чтобы помочь поисковым системам в них разобраться</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com © 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>