PPt4Web Хостинг презентаций
Главная / Информатика / HTML
X Код для использования на сайте:

Скопируйте этот код и вставьте его на свой сайт

X

Чтобы скачать данную презентацию, порекомендуйте, пожалуйста, её своим друзьям в любой соц. сети.

После чего скачивание начнётся автоматически!

Кнопки:

Презентация на тему: HTML


Скачать эту презентацию

Получить код Наши баннеры
HTML Язык гипертекстовой разметки для написания кода страниц сайта
«Каркас» страницы < html > <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Мой сайт</title> </head> <body> </body> </html>
Текст в HTML < html > <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Мой сайт</title> </head> <body> <p>Текст в HTML</p> <p>&…
Теги <p>, <strong>, <em>, <br> <p><strong>Полужирный текст в HTML</strong></p> <p><em>Наклонный текст в HTML</em></p> <p><font color="ff0000">Текст1 в HTML…
Теги заголовков <h1>Заголовок 1 уровня</h1> <h2>Заголовок 2 уровня </h2>
Ненумерованные списки <ul> <li>Элемент списка 1</li> <li>Элемент списка 2 </li> </ul>
Нумерованные списки <ol> <li>Элемент списка 1</li> <li>Элемент списка 2 </li> </ol>
Вложение ненумерованных списков <ul> <li>Элемент списка 1 <ul> <li>Элемент списка 1.1</li> <li>Элемент списка 1.2</li> </ul> </li> <li>Элемент списка 2 </li> </ul>
Вложение нумерованных списков <ol> <li>Элемент списка 1 <ol> <li>Элемент списка 1.1</li> <li>Элемент списка 1.2</li> </ol> </li> <li>Элемент списка 2 </li> </ol>
Сложные списки <ol> <li>Элемент списка 1 <ul> <li>Элемент списка 1.1</li> <li>Элемент списка 1.2</li> </ul> </li> <li>Элемент списка 2 </li> </ol>
Вставка картинок <p align="center"><img src="5.gif" alt="картинка" width="275" height="100"/> </p>
Таблицы <table width="300" border="1"> <tr> <td>1</td> <td>2</td> </tr> </table>
Таблицы (продолжение 1) <table width="300" height="100" border="0" align="center" cellpadding="5" cellspacing="10"> <tr> <td><div align="center">1</div&…
Таблицы (продолжение 2) <table width="300" height="100" border="0" align="center" cellpadding="5" cellspacing="10"> <tr> <td bgcolor="#999999"><div align=&quo…
Таблицы в HTML-документах - <TR ...> … </TR> <TR ...> ... </TR> - определитель ряда таблицы Атрибуты ALIGN=“align” - выравнивание текста по левому (left), правому (right) краю (по умолчанию - по центру (center)) VALIGN=alignm…
Таблицы в HTML-документах - <TD ...> … </TD> <TD ...> … </TD> - определитель ячейки таблицы, помещается внутри определителя ряда <TR ...> ... </TR> Атрибуты COLSPAN=colspan - определяет количество столбцов, которы…
Таблицы - Пример <TABLE BORDER=3 WIDTH=40% CELLPADDING=5 ALIGN=CENTER> <CAPTION><B>Requirements for Netscape Gold</B></CAPTION> <TR> <!-- Row 1 (Header items) --> <TH>Platform, OS</TH> <TH>…
Формы - Интерактивный элемент World Wide Web
Пример HTML-текста формы <html> <head> <title> Добавить запись в гостевую книгу </title> </head> <body> <center> <h1>Добавить запись в гостевую книгу </h1> </center> <hr> <form met…
Формы <FORM METHOD=”type” ACTION=”URL” ENCTYPE=”MIME type”> <INPUT> <SELECT>…. </SELECT> <OPTION>…. (</OPTION>) <TEXTAREA>…. </TEXTAREA> </FORM> Aтрибуты: ACTION=”URL” - URL, по которому передает…
<INPUT> - Определитель полей ввода в формах <INPUT TYPE=”type” NAME=”var-name” VALUE=”default_string” SIZE=”n” MAXLENGTH=”nmax” ALIGN=”position” SRC=”URL”> Атрибуты: TYPE= ”type” - ввод строки текста VALUE=”default_string” - начальное зн…
TYPE - Атрибут типа полей ввода в формах TYPE= ”text” - ввод строки текста ”password”- ввод пароля - при вводе текст заменяется “звездочками” ”radio” - группа “радиокнопок”, из которых может быть выбрана только одна ”checkbox” - ввод логических элем…
<SELECT> - Элементы меню в формах <SELECT NAME=”var-name” MULTIPLE SIZE=”n” > <OPTION VALUE=”value” SELECTED> Item_1 <OPTION > Item_2 </SELECT> Атрибуты: NAME=”var-name” - имя переменной, ассоциированное с вводимым элем…
<TEXTAREA> - Ввод нескольких строк текста <TEXTAREA NAME=”var-name” ROWS=”n” COLS=”m” > Default text to be displayed </ TEXTAREA > Атрибуты: NAME=”var-name” - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA ROWS…
<TEXTAREA> - Ввод нескольких строк текста - Пример <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…
Элементы <CHECKBOX> -Флаги-переключатели <INPUT TYPE=”checkbox” NAME=”var#-name” CHECKED > Text_Item_# …. <INPUT TYPE=”checkbox” NAME=”var#-name” > Text_Item_# Example <FORM action="/cgi-bin/terra-dbase/terra.cgi"metho…
Элементы <RADIO> -Переключатели-”радиокнопки” <INPUT TYPE=”radio” NAME=”var-name” CHECKED> Text_Item_# … <INPUT TYPE=”radio” NAME=”var-name”> Text_Item_# Example <FORM action="/cgi-bin/terra-dbase/terra.cgi"method=GET&…
Активные графические образы <A HREF=“http://host/cgi-bin/imagemap/table_or_base”> <IMG SRC=“directory/image.gif” ISMAP> </A> Атрибуты HREF=“http://host/cgi-bin/imagemap/table_or_base SRC=“directory/image.gif” ISMAP - серверный вари…
Формат таблицы 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 - круг - задаются коор…
Активные графические образы клиентского типа USEMAP <IMG SRC= "navbar.gif" USEMAP="#map1"> ... <MAP NAME="map1"> <AREA HREF=guide.html ALT="Access Guide" SHAPE=rect COORDS="x1,y1,x2,y2"…
Использование фреймов в HTML-документах <FRAMESET ROWS=“m,n,p” COLS=“a,b,c”> <FRAME NAME=“framename#” SRC=“URL” MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE> … <A HREF=“server/pathename/file.html” TARGET=“framename”>…
Задание параметров фреймов - <FRAMESET> <FRAMESET ROWS=“m,n,p” COLS=“a,b,c”> Атрибуты: ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деле…
Атрибуты фреймов - <FRAME> <FRAME NAME=“framename#” SRC=“URL” MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE> Атрибуты: NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве <A>…</A> SRC…
Пример -документа с фреймами <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 -->…
Ссылки <p> <a href="http://nadin.miem.edu.ru" target="_blank">Ссылка на внешний ресурс</a> </p> <p> <a href ="Photoshop/lesson16/lesson16_nofp_bg.gif"> Ссылка на файл</a></p&…
Фон страницы <body bgcolor=#AFAED9> <body background="6.gif">
Стиль ссылок (цвет и подчеркивание) <style type="text/css"> <!-- a:link {color: #000000; text-decoration: none;} a:visited {color: #FF0000; text-decoration: none;} a:hover {color: #00FF00; text-decoration: underline;} a:active {co…
Элемент разметки SCRIPT Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но в его теле. <script language="JavaScript" src=scri…
Задание В «Блокноте» написать HTML-код простой странички с использованием материалов лекции. Просмотреть страницу в браузере. Спасибо за внимание!
1 из 42

Презентация на тему: HTML


Скачать эту презентацию

№ слайда 1 HTML Язык гипертекстовой разметки для написания кода страниц сайта
Описание слайда:

HTML Язык гипертекстовой разметки для написания кода страниц сайта

№ слайда 2 «Каркас» страницы &lt; html &gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-
Описание слайда:

«Каркас» страницы &lt; html &gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt; &lt;title&gt;Мой сайт&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;

№ слайда 3 Текст в HTML &lt; html &gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&
Описание слайда:

Текст в HTML &lt; html &gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1251&quot; /&gt; &lt;title&gt;Мой сайт&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Текст в HTML&lt;/p&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

№ слайда 4 Теги &lt;p&gt;, &lt;strong&gt;, &lt;em&gt;, &lt;br&gt; &lt;p&gt;&lt;strong&gt;По
Описание слайда:

Теги &lt;p&gt;, &lt;strong&gt;, &lt;em&gt;, &lt;br&gt; &lt;p&gt;&lt;strong&gt;Полужирный текст в HTML&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;Наклонный текст в HTML&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;font color=&quot;ff0000&quot;&gt;Текст1 в HTML&lt;/font&gt;&lt;br&gt; &lt;p align=&quot;center&quot;&gt;Текст2 в HTML&lt;/p&gt;

№ слайда 5 Теги заголовков &lt;h1&gt;Заголовок 1 уровня&lt;/h1&gt; &lt;h2&gt;Заголовок 2 ур
Описание слайда:

Теги заголовков &lt;h1&gt;Заголовок 1 уровня&lt;/h1&gt; &lt;h2&gt;Заголовок 2 уровня &lt;/h2&gt;

№ слайда 6 Ненумерованные списки &lt;ul&gt; &lt;li&gt;Элемент списка 1&lt;/li&gt; &lt;li&gt
Описание слайда:

Ненумерованные списки &lt;ul&gt; &lt;li&gt;Элемент списка 1&lt;/li&gt; &lt;li&gt;Элемент списка 2 &lt;/li&gt; &lt;/ul&gt;

№ слайда 7 Нумерованные списки &lt;ol&gt; &lt;li&gt;Элемент списка 1&lt;/li&gt; &lt;li&gt;Э
Описание слайда:

Нумерованные списки &lt;ol&gt; &lt;li&gt;Элемент списка 1&lt;/li&gt; &lt;li&gt;Элемент списка 2 &lt;/li&gt; &lt;/ol&gt;

№ слайда 8 Вложение ненумерованных списков &lt;ul&gt; &lt;li&gt;Элемент списка 1 &lt;ul&gt;
Описание слайда:

Вложение ненумерованных списков &lt;ul&gt; &lt;li&gt;Элемент списка 1 &lt;ul&gt; &lt;li&gt;Элемент списка 1.1&lt;/li&gt; &lt;li&gt;Элемент списка 1.2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Элемент списка 2 &lt;/li&gt; &lt;/ul&gt;

№ слайда 9 Вложение нумерованных списков &lt;ol&gt; &lt;li&gt;Элемент списка 1 &lt;ol&gt; &
Описание слайда:

Вложение нумерованных списков &lt;ol&gt; &lt;li&gt;Элемент списка 1 &lt;ol&gt; &lt;li&gt;Элемент списка 1.1&lt;/li&gt; &lt;li&gt;Элемент списка 1.2&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt;Элемент списка 2 &lt;/li&gt; &lt;/ol&gt;

№ слайда 10 Сложные списки &lt;ol&gt; &lt;li&gt;Элемент списка 1 &lt;ul&gt; &lt;li&gt;Элемен
Описание слайда:

Сложные списки &lt;ol&gt; &lt;li&gt;Элемент списка 1 &lt;ul&gt; &lt;li&gt;Элемент списка 1.1&lt;/li&gt; &lt;li&gt;Элемент списка 1.2&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Элемент списка 2 &lt;/li&gt; &lt;/ol&gt;

№ слайда 11 Вставка картинок &lt;p align=&quot;center&quot;&gt;&lt;img src=&quot;5.gif&quot;
Описание слайда:

Вставка картинок &lt;p align=&quot;center&quot;&gt;&lt;img src=&quot;5.gif&quot; alt=&quot;картинка&quot; width=&quot;275&quot; height=&quot;100&quot;/&gt; &lt;/p&gt;

№ слайда 12 Таблицы &lt;table width=&quot;300&quot; border=&quot;1&quot;&gt; &lt;tr&gt; &lt;
Описание слайда:

Таблицы &lt;table width=&quot;300&quot; border=&quot;1&quot;&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

№ слайда 13 Таблицы (продолжение 1) &lt;table width=&quot;300&quot; height=&quot;100&quot; b
Описание слайда:

Таблицы (продолжение 1) &lt;table width=&quot;300&quot; height=&quot;100&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;5&quot; cellspacing=&quot;10&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;div align=&quot;center&quot;&gt;1&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div align=&quot;center&quot;&gt;2&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

№ слайда 14 Таблицы (продолжение 2) &lt;table width=&quot;300&quot; height=&quot;100&quot; b
Описание слайда:

Таблицы (продолжение 2) &lt;table width=&quot;300&quot; height=&quot;100&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;5&quot; cellspacing=&quot;10&quot;&gt; &lt;tr&gt; &lt;td bgcolor=&quot;#999999&quot;&gt;&lt;div align=&quot;center&quot;&gt;1&lt;/div&gt;&lt;/td&gt; &lt;td width=&quot;260&quot; background=&quot;5.gif&quot;&gt;&lt;div align=&quot;center&quot;&gt; &lt;h1&gt;2&lt;/h1&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

№ слайда 15 Таблицы в HTML-документах - &lt;TR ...&gt; … &lt;/TR&gt; &lt;TR ...&gt; ... &lt;
Описание слайда:

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

№ слайда 16 Таблицы в HTML-документах - &lt;TD ...&gt; … &lt;/TD&gt; &lt;TD ...&gt; … &lt;/T
Описание слайда:

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

№ слайда 17
Описание слайда:

№ слайда 18 Таблицы - Пример &lt;TABLE BORDER=3 WIDTH=40% CELLPADDING=5 ALIGN=CENTER&gt; &lt
Описание слайда:

Таблицы - Пример &lt;TABLE BORDER=3 WIDTH=40% CELLPADDING=5 ALIGN=CENTER&gt; &lt;CAPTION&gt;&lt;B&gt;Requirements for Netscape Gold&lt;/B&gt;&lt;/CAPTION&gt; &lt;TR&gt; &lt;!-- Row 1 (Header items) --&gt; &lt;TH&gt;Platform, OS&lt;/TH&gt; &lt;TH&gt;PC Requirements&lt;/TH&gt; &lt;/TR&gt; &lt;TR ALIGN=CENTER&gt;&lt;!-- Row 2 --&gt; &lt;TD&gt;Windows&lt;/TD&gt; &lt;TD&gt;486, HDD 5MB, 8MB&lt;/TD&gt; &lt;/TR&gt; &lt;TR ALIGN=CENTER&gt;&lt;!-- Row 3 --&gt; &lt;TD&gt;Macintosh&lt;/TD&gt; &lt;TD&gt;68020, HDD 5MB, 8 MB&lt;/TD&gt; &lt;/TR&gt; &lt;TR ALIGN=CENTER&gt;&lt;!-- Row 4 --&gt; &lt;TD&gt;Unix&lt;/TD&gt; &lt;TD&gt;N/A, HDD 6 MB, 16 MB&lt;/TD&gt; &lt;/TR&gt; &lt;/TABLE&gt;

№ слайда 19 Формы - Интерактивный элемент World Wide Web
Описание слайда:

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

№ слайда 20 Пример HTML-текста формы &lt;html&gt; &lt;head&gt; &lt;title&gt; Добавить запись
Описание слайда:

Пример HTML-текста формы &lt;html&gt; &lt;head&gt; &lt;title&gt; Добавить запись в гостевую книгу &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;center&gt; &lt;h1&gt;Добавить запись в гостевую книгу &lt;/h1&gt; &lt;/center&gt; &lt;hr&gt; &lt;form method=POST action=&quot;http://cad.polytech.kiev.ua/cgi- bin/cadguestbook.pl&quot;&gt; Имя: &lt;input type=text name=realname size=30&gt;&lt;br&gt; E-Mail: &lt;input type=text name=username size=40&gt;&lt;br&gt; URL: &lt;input type=text name=url size=50&gt;&lt;br&gt; Город: &lt;input type=text value=Moskow name=city size=15&gt; Страна: &lt;input type=text value=RF name=country size=15&gt; &lt;p&gt; Комментарии:&lt;br&gt; &lt;textarea name=comments COLS=70 ROWS=8&gt;&lt;/textarea&gt;&lt;p&gt; &lt;input type=submit&gt; &lt;input type=reset&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

№ слайда 21 Формы &lt;FORM METHOD=”type” ACTION=”URL” ENCTYPE=”MIME type”&gt; &lt;INPUT&gt;
Описание слайда:

Формы &lt;FORM METHOD=”type” ACTION=”URL” ENCTYPE=”MIME type”&gt; &lt;INPUT&gt; &lt;SELECT&gt;…. &lt;/SELECT&gt; &lt;OPTION&gt;…. (&lt;/OPTION&gt;) &lt;TEXTAREA&gt;…. &lt;/TEXTAREA&gt; &lt;/FORM&gt; Aтрибуты: ACTION=”URL” - URL, по которому передается содержимое формы METHOD=”GET” or “POST” - способ/метод пересылки протоколом HTTP содержимого формы METHOD=”GET” (по умолчанию) - содержимое формы добавляется к URL METHOD= “POST” - содержимое формы пересылается HTTP-серверу в виде сообщения ENCTYPE = ”MIME type” - MIME-тип данных, пересылаемых к HTTP-серверу методом POST

№ слайда 22 &lt;INPUT&gt; - Определитель полей ввода в формах &lt;INPUT TYPE=”type” NAME=”va
Описание слайда:

&lt;INPUT&gt; - Определитель полей ввода в формах &lt;INPUT TYPE=”type” NAME=”var-name” VALUE=”default_string” SIZE=”n” MAXLENGTH=”nmax” ALIGN=”position” SRC=”URL”&gt; Атрибуты: 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 интерактивного образа

№ слайда 23 TYPE - Атрибут типа полей ввода в формах TYPE= ”text” - ввод строки текста ”pass
Описание слайда:

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

№ слайда 24 &lt;SELECT&gt; - Элементы меню в формах &lt;SELECT NAME=”var-name” MULTIPLE SIZE
Описание слайда:

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

№ слайда 25 &lt;TEXTAREA&gt; - Ввод нескольких строк текста &lt;TEXTAREA NAME=”var-name” ROW
Описание слайда:

&lt;TEXTAREA&gt; - Ввод нескольких строк текста &lt;TEXTAREA NAME=”var-name” ROWS=”n” COLS=”m” &gt; Default text to be displayed &lt;/ TEXTAREA &gt; Атрибуты: NAME=”var-name” - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA ROWS=”n” - количество рядов в зоне ввода текста COLS=”m” &gt; - количество колонок в зоне ввода текста

№ слайда 26 &lt;TEXTAREA&gt; - Ввод нескольких строк текста - Пример &lt;form method=POST ac
Описание слайда:

&lt;TEXTAREA&gt; - Ввод нескольких строк текста - Пример &lt;form method=POST action=&quot;/cgi-bin/cadguestbook.pl&quot;&gt; Comments:&lt;br&gt; &lt;textarea name=comments COLS=70 ROWS=8&gt; Any comments are highly appreciated. Thank you! &lt;/textarea&gt;&lt;p&gt; &lt;input type=submit&gt; &lt;input type=reset&gt; &lt;/form&gt;

№ слайда 27 Элементы &lt;CHECKBOX&gt; -Флаги-переключатели &lt;INPUT TYPE=”checkbox” NAME=”v
Описание слайда:

Элементы &lt;CHECKBOX&gt; -Флаги-переключатели &lt;INPUT TYPE=”checkbox” NAME=”var#-name” CHECKED &gt; Text_Item_# …. &lt;INPUT TYPE=”checkbox” NAME=”var#-name” &gt; Text_Item_# Example &lt;FORM action=&quot;/cgi-bin/terra-dbase/terra.cgi&quot;method=GET&gt; Текст 1 &lt;P&gt;&lt;HR&gt; Текст 2: &lt;INPUT type=&quot;text&quot; name=&quot;string&quot; size=50&gt; &lt;P&gt; Текст 3: &lt;INPUT type=&quot;checkbox&quot; name=&quot;ch&quot; value=&quot;artist&quot;&gt; Текст 4 &lt;INPUT type=&quot;checkbox&quot; name=&quot;ch&quot; value=&quot;sculptor&quot;&gt; Текст 5 &lt;INPUT type=&quot;checkbox&quot; name=&quot;ch&quot; value=&quot;folk art&quot;&gt; Текст 6 &lt;INPUT type=&quot;submit&quot; value=&quot;Submit Query&quot;&gt; &lt;INPUT type=&quot;reset&quot; value=&quot;Reset Form&quot;&gt;&lt;BR&gt; &lt;/FORM&gt;

№ слайда 28
Описание слайда:

№ слайда 29 Элементы &lt;RADIO&gt; -Переключатели-”радиокнопки” &lt;INPUT TYPE=”radio” NAME=
Описание слайда:

Элементы &lt;RADIO&gt; -Переключатели-”радиокнопки” &lt;INPUT TYPE=”radio” NAME=”var-name” CHECKED&gt; Text_Item_# … &lt;INPUT TYPE=”radio” NAME=”var-name”&gt; Text_Item_# Example &lt;FORM action=&quot;/cgi-bin/terra-dbase/terra.cgi&quot;method=GET&gt; Текст 1 &lt;P&gt;&lt;HR&gt; Текст 2 : &lt;INPUT type=&quot;text&quot; name=&quot;string&quot; size=50&gt; &lt;P&gt; Текст 3: &lt;INPUT type=&quot;radio&quot; name=&quot;rb&quot; value=&quot;rb1&quot; checked&gt; Текст 4 &lt;INPUT type=&quot;radio&quot; name=&quot;rb&quot; value=&quot;rb2&quot;&gt; Текст 5 &lt;INPUT type=&quot;radio&quot; name=&quot;rb&quot; value=&quot;rb3&quot;&gt; Текст 6 &lt;P&gt; &lt;INPUT type=&quot;submit&quot; value=&quot;Submit Query&quot;&gt; &lt;INPUT type=&quot;reset&quot; value=&quot;Reset Form&quot;&gt;&lt;BR&gt; &lt;/FORM&gt;

№ слайда 30
Описание слайда:

№ слайда 31 Активные графические образы &lt;A HREF=“http://host/cgi-bin/imagemap/table_or_ba
Описание слайда:

Активные графические образы &lt;A HREF=“http://host/cgi-bin/imagemap/table_or_base”&gt; &lt;IMG SRC=“directory/image.gif” ISMAP&gt; &lt;/A&gt; Атрибуты 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

№ слайда 32 Формат таблицы IMAGE.MAP METHOD URL Coordinates pairs # Image map for image.gif
Описание слайда:

Формат таблицы 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, который выдается, если указатель мыши не попадает на выделенную зону образа

№ слайда 33 Активные графические образы клиентского типа USEMAP &lt;IMG SRC= &quot;navbar.gi
Описание слайда:

Активные графические образы клиентского типа USEMAP &lt;IMG SRC= &quot;navbar.gif&quot; USEMAP=&quot;#map1&quot;&gt; ... &lt;MAP NAME=&quot;map1&quot;&gt; &lt;AREA HREF=guide.html ALT=&quot;Access Guide&quot; SHAPE=rect COORDS=&quot;x1,y1,x2,y2&quot;&gt; &lt;AREA HREF=guide.html ALT=&quot;Access Guide&quot; SHAPE=rect COORDS=&quot;x3,y3,x4,y4&quot;&gt; &lt;/MAP&gt; Атрибуты SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default) HREF=URL - гипертекстовая ссылка, соответствующая выделенной области COORDS=&quot;x1,y1,x2,y2, …, xN, yM&quot; - координаты опорных точек активной зоны ALT=&quot;Alt Text&quot; - текст, который отображается неграфическим броузером

№ слайда 34 Использование фреймов в HTML-документах &lt;FRAMESET ROWS=“m,n,p” COLS=“a,b,c”&g
Описание слайда:

Использование фреймов в HTML-документах &lt;FRAMESET ROWS=“m,n,p” COLS=“a,b,c”&gt; &lt;FRAME NAME=“framename#” SRC=“URL” MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE&gt; … &lt;A HREF=“server/pathename/file.html” TARGET=“framename”&gt; &lt;/FRAME&gt; &lt;FRAME&gt; - задание параметров фрейма ... &lt;/FRAME&gt; &lt;NOFRAMES&gt; - # информация, которая должна отображаться в … # броузерах, не понимающих фреймы &lt;NOFRAMES&gt; &lt;FRAMESET &gt;

№ слайда 35 Задание параметров фреймов - &lt;FRAMESET&gt; &lt;FRAMESET ROWS=“m,n,p” COLS=“a,
Описание слайда:

Задание параметров фреймов - &lt;FRAMESET&gt; &lt;FRAMESET ROWS=“m,n,p” COLS=“a,b,c”&gt; Атрибуты: ROWS=“m,n,p” - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*) COLS=“a,b,c” - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)

№ слайда 36 Атрибуты фреймов - &lt;FRAME&gt; &lt;FRAME NAME=“framename#” SRC=“URL” MRGINWIDT
Описание слайда:

Атрибуты фреймов - &lt;FRAME&gt; &lt;FRAME NAME=“framename#” SRC=“URL” MRGINWIDTH=“k” MRAGINHEIGHT=“l” SCROLLING=“method” NORESIZE&gt; Атрибуты: NAME=“framename#” - имя фрейма (для использования в атрибуте TARGET в директиве &lt;A&gt;…&lt;/A&gt; SRC=“URL” - адрес документа: отображаемого в данном фрейме MRGINWIDTH=“k” - отступ отображаемой информации от горизонтальных границ MRAGINHEIGHT=“l” -отступ отображаемой информации от горизонтальных границ SCROLLING=“method” - параметр режима скроллинга во фрейме (yes, no, auto) NORESIZE - запрещает изменение размера фрейма

№ слайда 37 Пример -документа с фреймами &lt;HTML&gt;&lt;HEAD&gt; &lt;TITLE&gt;It's a frame,
Описание слайда:

Пример -документа с фреймами &lt;HTML&gt;&lt;HEAD&gt; &lt;TITLE&gt;It's a frame, I tell ya'!&lt;/TITLE&gt;&lt;/HEAD&gt; &lt;!-- 3 columns: left and right -20%; middle - fills in.--&gt; &lt;!-- Frame content: left.htm, middle.htm, and right.htm --&gt; &lt;FRAMESET COLS=&quot;20%,*,20%&quot;&gt; &lt;FRAME SRC=&quot;left.htm&quot; NAME=&quot;left&quot;&gt; &lt;FRAME SRC=&quot;middle.htm&quot; NAME=&quot;middle&quot;&gt; &lt;FRAME SRC=&quot;right.htm&quot; NAME=&quot;right&quot;&gt; &lt;/FRAMESET&gt; &lt;!-- End of Frameset --&gt; &lt;NOFRAMES&gt; Alternative content no-frames browsers. &lt;/NOFRAMES&gt; &lt;/HTML&gt;

№ слайда 38 Ссылки &lt;p&gt; &lt;a href=&quot;http://nadin.miem.edu.ru&quot; target=&quot;_b
Описание слайда:

Ссылки &lt;p&gt; &lt;a href=&quot;http://nadin.miem.edu.ru&quot; target=&quot;_blank&quot;&gt;Ссылка на внешний ресурс&lt;/a&gt; &lt;/p&gt; &lt;p&gt; &lt;a href =&quot;Photoshop/lesson16/lesson16_nofp_bg.gif&quot;&gt; Ссылка на файл&lt;/a&gt;&lt;/p&gt; &lt;p&gt; &lt;a href=&quot;mailto:[email protected]&quot;&gt;Обращение к почтовому клиенту (E-mail)&lt;/a&gt;&lt;/p&gt;

№ слайда 39 Фон страницы &lt;body bgcolor=#AFAED9&gt; &lt;body background=&quot;6.gif&quot;&
Описание слайда:

Фон страницы &lt;body bgcolor=#AFAED9&gt; &lt;body background=&quot;6.gif&quot;&gt;

№ слайда 40 Стиль ссылок (цвет и подчеркивание) &lt;style type=&quot;text/css&quot;&gt; &lt;
Описание слайда:

Стиль ссылок (цвет и подчеркивание) &lt;style type=&quot;text/css&quot;&gt; &lt;!-- a:link {color: #000000; text-decoration: none;} a:visited {color: #FF0000; text-decoration: none;} a:hover {color: #00FF00; text-decoration: underline;} a:active {color: #0000FF; text-decoration: none;} --&gt; &lt;/style&gt;

№ слайда 41 Элемент разметки SCRIPT Элемент разметки SCRIPT служит для размещения кода JavaS
Описание слайда:

Элемент разметки SCRIPT Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но в его теле. &lt;script language=&quot;JavaScript&quot; src=script.code&gt;

№ слайда 42 Задание В «Блокноте» написать HTML-код простой странички с использованием матери
Описание слайда:

Задание В «Блокноте» написать HTML-код простой странички с использованием материалов лекции. Просмотреть страницу в браузере. Спасибо за внимание!

Скачать эту презентацию

Презентации по предмету
Презентации из категории
Лучшее на fresher.ru