Теги заголовков

Заголовок 1 уровня

Заголовок 2 уровня

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

• Элемент списка 1
• Элемент списка 2

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

1. Элемент списка 1
2. Элемент списка 2

Вложение ненумерованных списков

• Элемент списка 1
  • Элемент списка 1.1
  • Элемент списка 1.2
• Элемент списка 2

Вложение нумерованных списков

1. Элемент списка 1
   1. Элемент списка 1.1
   2. Элемент списка 1.2
2. Элемент списка 2

Сложные списки

1. Элемент списка 1
   • Элемент списка 1.1
   • Элемент списка 1.2
2. Элемент списка 2

Вставка картинок

Таблицы

Таблицы (продолжение 1)

Таблицы (продолжение 2)

Таблицы в HTML-документах - …

... - определитель ряда таблицы Атрибуты ALIGN=“align” - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center)) VALIGN=alignment - определяет положение текста в ячейках таблицы - вырвнивание к верху (top), к низу (bottom) или по центру (по умолчанию) Дополнительно (в реализациях различных броузеров) BGCOLOR=color - цвет фона ряда таблицы

Таблицы в HTML-документах - …

… - определитель ячейки таблицы, помещается внутри определителя ряда ... Атрибуты COLSPAN=colspan - определяет количество столбцов, которые занимает ячейка ROWSPAN=rowspan- определяет количество рядов, которые занимает ячейка NOWRAP - запрещает разрыв строки текста внутри ячейки WIDTH - задает ширину ячейки в пикселях HEIGHT - задает высоту ячейки в пикселях ALIGN=“align” - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center)) VALIGN=alignment - определяет положение текста в ячейках таблицы - вырвнивание к верху (top), к низу (bottom) или по центру (по умолчанию) Дополнительно (в реализациях различных браузеров) BGCOLOR=color - цвет фона в таблице BORDERCOLOR=color - определяет цвет рамки таблицы; может использоваться совместно с BORDERCOLORDARK, BORDERCOLORLIGHT

Таблицы - Пример

Формы - Интерактивный элемент World Wide Web

Пример HTML-текста формы

Формы

- Определитель полей ввода в формах

Атрибуты: TYPE= ”type” - ввод строки текста VALUE=”default_string” - начальное значение содержимого полей ввода NAME=”var-name” - присваивает имя ”var-name” вводимым данным SIZE=”n” , MAXLENGTH=”nmax” - определяют размер отображаемого поля текста и длину текстового буфера для типов ”text” и ”password” ALIGN=”top”, “middle”, “bottom” - привязка текста и графического образа для TYPE=”image” SRC=”URL”- используется для указания URL интерактивного образа

TYPE - Атрибут типа полей ввода в формах

TYPE= ”text” - ввод строки текста ”password”- ввод пароля - при вводе текст заменяется “звездочками” ”radio” - группа “радиокнопок”, из которых может быть выбрана только одна ”checkbox” - ввод логических элементов, определяемых значением Вкл./Выкл. ”hidden” - неотображаемый элемент текста, применяемый для связи форм ”reset” - управляющая кнопка для сброса всех полей формы ”submit” - управляющая кнопка, инициирующая пересылку данных к серверу ”image” - управляющая кнопка, инициирующая пересылку данных к серверу

- Элементы меню в формах

Item_1 Item_2 Атрибуты: NAME=”var-name” - имя переменной, ассоциированное с вводимым элементом SELECT MULTIPLE - определяет формат меню в виде списка с прокруткой, а также допускает выбор множества элементов списка OPTION SIZE=”n” - определяет количество элементов в списке прокрутки OPTION - элементы списка SELECT VALUE=”value” - определяет величину, присвоенную данному элементу списка OPTION SELECTED - отмечает предварительно выбранный элемент списка OPTION

- Ввод нескольких строк текста</p><p><TEXTAREA NAME=”var-name” ROWS=”n” COLS=”m” > Default text to be displayed </ TEXTAREA > Атрибуты: NAME=”var-name” - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA ROWS=”n” - количество рядов в зоне ввода текста COLS=”m” > - количество колонок в зоне ввода текста</p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/10/83127/images/screen26.jpg"><img src="https://prezentacii.org/upload/cloud/18/10/83127/images/thumbs/screen26.jpg" alt="- Ввод нескольких строк текста - Пример. Comments: Any comments are highly appreciated. Thank you! ." title="- Ввод нескольких строк текста - Пример. Comments: Any comments are highly appreciated. Thank you! ." ></a></div><div class="slide_right"><span>Слайд 26</span><p class="slide_title"><TEXTAREA> - Ввод нескольких строк текста - Пример</p><p><form method=POST action="/cgi-bin/cadguestbook.pl"> Comments:<br> <textarea name=comments COLS=70 ROWS=8> Any comments are highly appreciated. Thank you!

Элементы -Флаги-переключатели

Text_Item_# …. Text_Item_# Example

Элементы -Переключатели-”радиокнопки”

Text_Item_# … Text_Item_# Example

Активные графические образы

Атрибуты HREF=“http://host/cgi-bin/imagemap/table_or_base SRC=“directory/image.gif” ISMAP - серверный вариант формирования ссылок по координатам USEMAP - клиентский (в браузере) вариант формирования ссылок по координатам Формат HTTP-запроса к WWW-серверу GET http://host/cgi-bin/imagemap/table_or_base?x,y HTTP1.0

Формат таблицы IMAGE.MAP

METHOD URL Coordinates pairs # Image map for image.gif circle dir1/capital.html 50,20 50,30 rec dir2/region.html 80,40 120,60 poly dir3/area.html 10,20 10,45 15,55 20,78 default dir/default.html circle - круг - задаются координаты центра и правой крайней точки rectangle (rec) - прямоугольник - задаются координаты левой верхней и правой нижней точек polygon (poly) - задаются координаты вершин многоугольника point - задаются координаты точки default - задается URL, который выдается, если указатель мыши не попадает на выделенную зону образа

Активные графические образы клиентского типа USEMAP

... Атрибуты SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default) HREF=URL - гипертекстовая ссылка, соответствующая выделенной области COORDS="x1,y1,x2,y2, …, xN, yM" - координаты опорных точек активной зоны ALT="Alt Text" - текст, который отображается неграфическим броузером

Использование фреймов в HTML-документах

… - задание параметров фрейма ... - # информация, которая должна отображаться в … # броузерах, не понимающих фреймы <NOFRAMES> <FRAMESET ></p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/10/83127/images/screen35.jpg"><img src="https://prezentacii.org/upload/cloud/18/10/83127/images/thumbs/screen35.jpg" alt="Задание параметров фреймов - . Атрибуты: ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)" title="Задание параметров фреймов - . Атрибуты: ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)" ></a></div><div class="slide_right"><span>Слайд 35</span><p class="slide_title">Задание параметров фреймов - <FRAMESET></p><p><FRAMESET ROWS=“m,n,p” COLS=“a,b,c”> Атрибуты: ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)</p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/10/83127/images/screen36.jpg"><img src="https://prezentacii.org/upload/cloud/18/10/83127/images/thumbs/screen36.jpg" alt="Атрибуты фреймов - . Атрибуты: NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве … SRC=“URL” - адрес документа: отображаемого в данном фрейме MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=“l” -отступ отображаемой информации от го" title="Атрибуты фреймов - . Атрибуты: NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве … SRC=“URL” - адрес документа: отображаемого в данном фрейме MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=“l” -отступ отображаемой информации от го" ></a></div><div class="slide_right"><span>Слайд 36</span><p class="slide_title">Атрибуты фреймов - <FRAME></p><p><FRAME NAME=“framename#” SRC=“URL” MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE> Атрибуты: NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве <A>…</A> SRC=“URL” - адрес документа: отображаемого в данном фрейме MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto) NORESIZE - запрещает изменение размера фрейма</p></div><div class="slide_left"><a data-fancybox="gallery" href="https://prezentacii.org/upload/cloud/18/10/83127/images/screen37.jpg"><img src="https://prezentacii.org/upload/cloud/18/10/83127/images/thumbs/screen37.jpg" alt="Пример -документа с фреймами. It's a frame, I tell ya'! Alternative content no-frames browsers." title="Пример -документа с фреймами. It's a frame, I tell ya'! Alternative content no-frames browsers." ></a></div><div class="slide_right"><span>Слайд 37</span><p class="slide_title">Пример -документа с фреймами</p><p><HTML><HEAD> <TITLE>It's a frame, I tell ya'!</TITLE></HEAD> <!-- 3 columns: left and right -20%; middle - fills in.--> <!-- Frame content: left.htm, middle.htm, and right.htm --> <FRAMESET COLS="20%,*,20%"> <FRAME SRC="left.htm" NAME="left"> <FRAME SRC="middle.htm" NAME="middle"> <FRAME SRC="right.htm" NAME="right"> </FRAMESET> <!-- End of Frameset --> <NOFRAMES> Alternative content no-frames browsers.

Ссылки

Ссылка на внешний ресурс

Ссылка на файл

Обращение к почтовому клиенту (E-mail)

Фон страницы

Стиль ссылок (цвет и подчеркивание)

Элемент разметки SCRIPT

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но в его теле.