Разработка Web-сайтовс использованием языка разметки гипертекста НТМL. презентация

Содержание:
1.Web -страницы и Web – сайты
Для создания Web-страниц
Создание Web-страниц с использованием НТМL-тэгов
Web-сайты. Основные моменты
Размещение в Интернет
Контрольные вопросы
2.Структура Web-страницы
ТЭГИ
Разработка заготовка
Контрольные вопросы
3.Форматирование текста на Web-странице
Шрифт
Выравнивание текста
Абзацы. Горизонтальная линия
Контрольные вопросы
4.Вставка изображений в Web-страницы
Положение рисунка относительно текста
Вставка альтернативного текста
Контрольные вопросы

5.Гиперссылки на Web-страницах
Панель навигации по сайту.
ссылка на адрес электронный почты
Пример
6. Списки на Web-страницах
нумерованные списки
маркированные списки
списки определений
Контрольные вопросы
7. Интерактивные формы на Web-страницах
Форма
Текстовые поля. Текстовые поля.HTML –код
Переключатели. Переключатели. HTML-код
Флажки. Флажки. HTML-код
Раскрывающиеся списки. Раскрывающиеся списки.HTML код
Текстовая область.
Отправка данных из формы.
Контрольные вопросы
Что должно получиться
Основные HTML -тэги

1.Web -страницы и Web - сайты
Web -страницы создаются с использова­нием языка разметки гипертекстовых документов НТМL (Нуреr Техt Markup Language). В обычный текстовый доку­мент вставляются управляющие символы — НТМL-тэги, ко­торые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
• малый информационный объем;
• возможность просмотра в различных операционных системах.
Содержание

Для создания Web-страниц
Для создания Web-страниц используются простейшие текстовые редакторы или специальные программы-HTML –редакторы (HtmlPad FisherMan). В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Содержание

Создание Web-страниц с использованием НТМL-тэгов
требует больших усилий, времени и знания синтаксиса языка.
Применение специальных инструментальных программ­ных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и ре­дактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG
(от англ. «What You See Is What You Get - Что видишь, то и получишь»).
Содержание

Web-сайты. Основные моменты
Публикации во Всемирной паутине реализу­ются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме.
Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Содержание

Размещение в Интернет
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Содержание

Контрольные вопросы
1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?
2. Каким образом Web -страницы объединяются в Web-сайты?
Содержание

2. Структура Web-страницы
НТМL-код страницы помещается внутрь контейнера <НТМL>
.
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер <НЕАD>
и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
Содержание

Тэги заключаются в угловые скобки и могут быть одиночными или парными.
Парные тэги содержат откры­вающий и закрывающий тег (такая пара тэгов называ­ется контейнером).
i
<НЕАD>
<НТМL>
Содержание

ТЭГИ
Закрывающий тэг содержит прямой слэш (/) перед обозначением.
Название страницы помещается в контейнер
и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помеща­ется в контейнер
Содержание

Разработка заготовка
Компьютер<br></ТIТLЕ><br></HEAD><br><BODY><br>Компьютер и ПО<br></BODY><br></HTML><br><p>Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm.</div></h3></h3><!----><!----><div class="slides-content">В качестве расширения файла Web-страницы можно также использовать html.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p>Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе,<br>и имя</div></h3></h3><!----><!----><div class="slides-content">Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера.<br> Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами<br><p>i<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Контрольные вопросы<br><p>Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? <br>Какова логическая структура Web-страницы?<br>Практическое</div></h3></h3><!----><!----><div class="slides-content">задание. <br>Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>3. Форматирование текста на Web-странице<br><p>С помо­щью тэгов можно задать различные параметры форматиро­вания текста.<br>Заголовки.</div></h3></h3><!----><!----><div class="slides-content"><br>Размеры шрифтов заголовков задаются параметрами тэгов от <br> <Н1></Н1> (самый крупный) <br>до <H6></H6> (самый мелкий).<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Шрифт.<br><p>Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения.<br>С</div></h3></h3><!----><!----><div class="slides-content">помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. <br>Атрибут FACE позволя­ет задать гарнитуру шрифта (например, FACE="Arial"), <br> Атрибут SIZE — размер шрифта (например, SIZE=4).<br>Атрибут COLOR позволяет задавать цвет шрифта (напри­мер, COLOR="blue"). <br>Значение атрибута COLOR можно за­дать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением - "#RRGGBB"<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>Выравнивание текста.<br><p>Задать способ выравнивания тек­ста позволяет атрибут ALIGN. <br>Выравнивание по левой грани­це задается</div></h3></h3><!----><!----><div class="slides-content">так: ALIGN="left",<br> выравнивание по правой границе: ALIGN="right", <br>выравнивание по центру: ALIGN= "center".<br>Таким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:<br><FONT COLOR="blue"><br><Н1 ALIGN="center">компьютер и П0</Н1><br></FONT><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>Горизонтальная линия. <br>Заголовки целесообразно отде­лять от остального содержания страницы горизонтальными линиями с помощью</div></h3></h3><!----><!----><div class="slides-content">одиночного тэга <HR>.<br>Абзацы. <br>Разделение текста на абзацы производится с помощью контейнера <р></р>. При просмотре в браузере аб­зацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и па­раметры форматирования шрифта.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><h3 class="slides-content text-center font-bold"><div><p>Домашняя страница сайта.<br><p>На домашней странице сайта обычно размещается текст, кратко описывающий его содер­жание.</div></h3></h3><!----><!----><div class="slides-content">Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:<br><Р ALIGN="left"><br>Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.<br></Р> <br><Р ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.<br></Р><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-20.jpg" target="_blank" rel="noopener">Слайд 21</a><h3 class="slides-content text-center font-bold"><div><p><FONT COLOR="blue"><br><Н1 ALIGN="center"><br>Компьютер и ПО<br></Н1><br></FONT><br><HR><br><Р ALIGN="left">Ha этом сайте...</Р><br><Р ALIGN ="right"> Терминологический словарь<br>...</Р><br><p>Содержание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-21.jpg" target="_blank" rel="noopener">Слайд 22</a><h3 class="slides-content text-center font-bold"><div><p>Контрольные вопросы
<br><p>Какие тэги (контейнеры) используются для ввода заголовков? <br>Форматирования шрифта? <br>Ввода абзацев?<br>Практическое задание.</div></h3></h3><!----><!----><div class="slides-content"><br>Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>4.Вставка изображений в Web-страницы<br><p>На Web-страницы можно помещать изображения, хра­нящиеся в графических файлах трех</div></h3></h3><!----><!----><div class="slides-content">форматов — GIF, JPEG и PNG.<br>Вставка изображений. <br>Для вставки изображения ис­пользуется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. НАПРИМЕР:<br><IMG SRC="computer.gif"><br><IMG SRC="C:\computer\computer.gif"><br><IMG SRC="http://www.server.ru/computer.gif"><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>Положение рисунка относительно текста. <br><p>Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN,</div></h3></h3><!----><!----><div class="slides-content">который может принимать пять различных значений: <br>ТОР (верх), <br>MIDDLE (середина),<br> BOTTOM (низ), <br>LEFT (слева) <br>и RIGHT (справа).<br>НАПРИМЕР:<br><IMG SRC="computer.gif" ALIGN="right"><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-24.jpg" target="_blank" rel="noopener">Слайд 25</a><h3 class="slides-content text-center font-bold"><div><p>Вставка альтернативного текста.<br><p>Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических</div></h3></h3><!----><!----><div class="slides-content">изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.<br>Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:<br><IMG SRC="computer.gif" ALIGN="right» ALT="Компьютер"><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-25.jpg" target="_blank" rel="noopener">Слайд 26</a><h3 class="slides-content text-center font-bold"><div><p>Контрольные вопросы<br><p>1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?<br>Практическое</div></h3></h3><!----><!----><div class="slides-content">задание.<br> Вставить в Web-страницу «Компьютер» изображение и альтернативный текст и просмотреть ее в браузере.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-26.jpg" target="_blank" rel="noopener">Слайд 27</a><h3 class="slides-content text-center font-bold"><div><p>5. Гиперссылки на Web-страницах<br><p>Гиперссылки.<br> Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие</div></h3></h3><!----><!----><div class="slides-content">Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.<br>Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хра­нится загружаемая Web-страница:<br><А HREF="Адрес">Указатель ссылки</А><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-27.jpg" target="_blank" rel="noopener">Слайд 28</a><h3 class="slides-content text-center font-bold"><div><p>Панель навигации по сайту.<br> Создадим папку сайта «Компьютер» и добавим в сайт пустые</div></h3></h3><!----><!----><div class="slides-content">страницы «Программы», «Словарь», «Комплектующие» и «Анкета». <br>Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p>панель навигации.<br><p>На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В</div></h3></h3><!----><!----><div class="slides-content">качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.<br>Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами . Такое размещение гиперссылок часто называют панелью навигации.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-29.jpg" target="_blank" rel="noopener">Слайд 30</a><h3 class="slides-content text-center font-bold"><div><p>Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:<br><Р ALIGN="center"><br>[<А HREF="software.htm">Программы</A>] & nbsp</div></h3></h3><!----><!----><div class="slides-content"><br>[<А HREF="glossary.htm">Словарь</A>] <br>[<А HREF="hardware.htm“>Комплектующие</A>] <br> [<A HREF="anketa.htm“>Анкетa</A>] </P><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-30.jpg" target="_blank" rel="noopener">Слайд 31</a><h3 class="slides-content text-center font-bold"><div><p>Гиперссылка на адрес электронной почты.<br><p>Полезно на домашней странице сайта создать ссылку на адрес</div></h3></h3><!----><!----><div class="slides-content">электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса:<br><ADDRESS><br><А HREF="mailto:[e-mail]">E-mail:<br>[e-mail]</A><br></ADDRESS><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-31.jpg" target="_blank" rel="noopener">Слайд 32</a><h3 class="slides-content text-center font-bold"><div><p>Пример<br><p>Содержание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-32.jpg" target="_blank" rel="noopener">Слайд 33</a><h3 class="slides-content text-center font-bold"><div><p>6. Списки на Web-страницах <br><p>нумерованные списки, <br>когда элементы списка идентифицируются с помощью чисел;<br>маркированные</div></h3></h3><!----><!----><div class="slides-content">списки, <br>когда элементы списка идентифицируются с помощью специальных символов (маркеров);<br>списки определений, <br>позволяющие составлять перечни определений в так называемой словарной форме.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-33.jpg" target="_blank" rel="noopener">Слайд 34</a><h3 class="slides-content text-center font-bold"><div><p>Нумерованные списки.<br><p>Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом</div></h3></h3><!----><!----><div class="slides-content"><LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: <br>арабские цифры (по умолчанию),<br> "I" (римские цифры),<br> "а" (строчные буквы) <br><OL><br><LI>Системные программы <br><LI>Прикладные программы <br><LI>Системы программирования </0L><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-34.jpg" target="_blank" rel="noopener">Слайд 35</a><h3 class="slides-content text-center font-bold"><div><p>Маркированные списки.<br><p>Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом</div></h3></h3><!----><!----><div class="slides-content"><LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: <br>"disc" (диск), <br>"square" (квадрат) <br>или "circle" (окружность):<br><UL TYPE="square"><br><LI>текстовые редакторы;<br><LI>графические редакторы;<br><LI>электронные таблицы;<br><LI>системы управления базами данных.<br></UL><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-35.jpg" target="_blank" rel="noopener">Слайд 36</a><h3 class="slides-content text-center font-bold"><div><p>Список определений.<br><p>Список определений располагается внутри контейнера <DL>/<DL>. Внутри него текст оформля­ется в виде</div></h3></h3><!----><!----><div class="slides-content">терминов, которые выделяются одинарными тэгами <DT> и определений, которые следуют за одинарными тэгами <DD>.<br>Web-страницу «Словарь» мы представим в виде словаря компьютерных терминов <br><DL><br><DТ>Процессор<br><DD>Центральное устройство компьютера,<br>производящее обработку информации в двоичном коде.<br><DТ>Оперативная память<br><DD>Устройство, в котором хранятся программы и данные.<br></DL><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-36.jpg" target="_blank" rel="noopener">Слайд 37</a><h3 class="slides-content text-center font-bold"><div><p>Контрольные вопросы
<br><p> Какие тэги используются для создания нумерованных списков? Маркированных списков?<br>Практическое задание. <br>Создать</div></h3></h3><!----><!----><div class="slides-content">Web-страницу «Программы» с нумерованным списком и вложенным маркированным спис­ком.<br>Создать Web-страницу «Словарь» со списком терминов.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-37.jpg" target="_blank" rel="noopener">Слайд 38</a><h3 class="slides-content text-center font-bold"><div><p>Содержание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-38.jpg" target="_blank" rel="noopener">Слайд 39</a><h3 class="slides-content text-center font-bold"><div><p>7. Интерактивные формы на Web-страницах <br><p>Для того чтобы посетители сайта могли не только</div></h3></h3><!----><!----><div class="slides-content">просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: <br>текстовые поля, <br>раскрывающиеся списки, <br>флажки, <br>переключатели, <br>текстовые области и т. д.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-39.jpg" target="_blank" rel="noopener">Слайд 40</a><h3 class="slides-content text-center font-bold"><div><p>Форма<br><p>Вся форма заключается в контейнер <F0RM></F0RM>. <br>В первую очередь выясним имя посетителя нашего</div></h3></h3><!----><!----><div class="slides-content">сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide41" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-40.jpg" target="_blank" rel="noopener">Слайд 41</a><h3 class="slides-content text-center font-bold"><div><p>Текстовые поля.<br><p>Для получения этих данных разместим в форме два однострочных текстовых поля для</div></h3></h3><!----><!----><div class="slides-content">ввода информации.<br>Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута TYPE="text". <br>Атрибут NAME является обязательным и служит для идентификации полученной ин­формации.<br> Значением атрибута SIZE является число, задаю­щее длину поля ввода в символах.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide42" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-41.jpg" target="_blank" rel="noopener">Слайд 42</a><h3 class="slides-content text-center font-bold"><div><p>Текстовые поля.HTML -код<br><p>Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга</div></h3></h3><!----><!----><div class="slides-content">перевода строки <BR>
<br><FORM><br>Пожалуйста, введите ваше имя:<br><BR><br><INPUT TYPE="text" NАМЕ="ФИ0" SIZE=30><br><BR><br>E-mail:<br><BR><br><INPUT TYPE="text" NAME="e-mail" SIZE=30><br><BR><br></FORM><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide43" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-42.jpg" target="_blank" rel="noopener">Слайд 43</a><h3 class="slides-content text-center font-bold"><div><p>Переключатели.<br><p>Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT></div></h3></h3><!----><!----><div class="slides-content">со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".<br>Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUE должно быть уникаль­ным для каждой «радиокнопки».<br>Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки <BR> <br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide44" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-43.jpg" target="_blank" rel="noopener">Слайд 44</a><h3 class="slides-content text-center font-bold"><div><p>Переключатели. HTML-код<br><p>Укажите, к какой группе пользователей вы<br>себя относите:<br><BR><br><INPUT TYPE="radio" NAME="group"<br>VALUE="учащийся">учащийся<br><BR><br><INPUT TYPE="radio" NAME="group"<br>VALUE="студент">студент<br><BR><br><INPUT TYPE="radio"</div></h3></h3><!----><!----><div class="slides-content">NAME="group"<br>VALUЕ="учитель">учитель<br><BR><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide45" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-44.jpg" target="_blank" rel="noopener">Слайд 45</a><h3 class="slides-content text-center font-bold"><div><p>Флажки.<br><p>Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками.<br>Флажки создаются</div></h3></h3><!----><!----><div class="slides-content">в тэге <INPUT> со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д.<br>Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "e-mail" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка.<br>Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки <BR> :<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-45.jpg" target="_blank" rel="noopener">Слайд 46</a><h3 class="slides-content text-center font-bold"><div><p>Флажки. HTML-код<br><p>Какие из сервисов Интернета вы используете<br>наиболее часто:<br><BR><br><INPUT TYPE="checkbox" NAME="box1"<br>VALUE="WWW">WWW<br><BR><br><INPUT TYPE="checkbox" NAME="box2"<br>VALUE="e-mail">e-mail<br><BR><br><INPUT TYPE="checkbox"</div></h3></h3><!----><!----><div class="slides-content">NAME="box3"<br>VALUE="FTP">FTP<br><BR><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide47" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-46.jpg" target="_blank" rel="noopener">Слайд 47</a><h3 class="slides-content text-center font-bold"><div><p>Раскрывающиеся списки.<br><p>Для реализации раскрывающегося списка используется контейнер <SELECT></SELECT>, в котором каждый элемент списка</div></h3></h3><!----><!----><div class="slides-content">определяется тэгом <0PTI0N>.<br>B переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-47.jpg" target="_blank" rel="noopener">Слайд 48</a><h3 class="slides-content text-center font-bold"><div><p>Раскрывающиеся списки.HTML код<br><p><BR><br>Какой браузер вы используете<br>наиболее часто:<br><SELECT NAMЕ="Браузер"><br><OPTION SELECTED>Internet Explorer<br><OPTION>Netscape Navigator<br><OPTION>Opera<br><OPTION>Mozilla<br></SELECT><br><p>Содержание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-48.jpg" target="_blank" rel="noopener">Слайд 49</a><h3 class="slides-content text-center font-bold"><div><p>Текстовая область.<br><p>В такое поле можно ввести достаточно длинный текст.<br>Создается текстовая область с помощью</div></h3></h3><!----><!----><div class="slides-content">тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.<br>Вставим в HTML-код текстовую область :<br>Какую еще информацию вы хотели бы видеть<br>на сайте?<br><BR><br><TEXTAREA NAME="Ваши предложения"<br>ROWS=4 COLS=30><br></TEXTAREA><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide50" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-49.jpg" target="_blank" rel="noopener">Слайд 50</a><h3 class="slides-content text-center font-bold"><div><p>Отправка данных из формы.<br><p>Отправка введенной в форму информации осуществляется с помощью щелчка по</div></h3></h3><!----><!----><div class="slides-content">кнопке.<br>Кнопка создается с помощью тэга <INPUT>. Атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, присвоить значение "Отправить" <br><INPUT TYPE=" submit" VALUЕ="Отправить"><br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide51" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-50.jpg" target="_blank" rel="noopener">Слайд 51</a><h3 class="slides-content text-center font-bold"><div><p>Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной</div></h3></h3><!----><!----><div class="slides-content">почты. Для этого атрибуту ACTION контейнера <FORM> надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:<br><FORM ACTION="mailto:[e-mail]" METHOD="POST" ENCTYPE="text/plain"><br>После открытия в браузере Web-страницы «Анкета» и внесения данных в поля формы необходимо щелкнуть по кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide52" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-51.jpg" target="_blank" rel="noopener">Слайд 52</a><h3 class="slides-content text-center font-bold"><div><p>Контрольные вопросы:<br><p>Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся</div></h3></h3><!----><!----><div class="slides-content">списков? Текстовых областей?<br>Какие значения необходимо присвоить атрибутам тэга <FORM> для отправки введенной в форму информации <br>Практическое задание:<br>Создать страницу «Анкета», содержащую форму для ввода данных<br><p>Содержание<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide53" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/549389/slide-52.jpg" target="_blank" rel="noopener">Слайд 53</a><h3 class="slides-content text-center font-bold"><div><p>Содержание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Разработка-Web-сайтовс-использованием-языка-разметки-гипертекста-НТМL..pptx <br> Количество просмотров: 17 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/uncategorized/prezentatsiya-pokrov-presvyatoy-bogoroditsy" class="navigation-link">ПРЕЗЕНТАЦИЯ ПОКРОВ ПРЕСВЯТОЙ БОГОРОДИЦЫ.</a></div><div class="navigation-item"><div>Следующая -</div><a href="/uncategorized/issledovatelskaya-rabota-po-kraevedeniyu-1" class="navigation-link">Исследовательская работа по краеведению</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/universalnaya-desyatichnaya-detsimalnaya-klassifikatsiya-udk" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/350913/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/350913/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/350913/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/350913/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/350913/slide-0.jpg 1440w" class="slides-image related-itemImage"> Универсальная десятичная (децимальная) классификация (УДК)</a></div><div class="related-item"><a href="/informatika/programma-figma" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/138171/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/138171/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/138171/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/138171/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/138171/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программа Figma</a></div><div class="related-item"><a href="/informatika/modeli-sistem-informatsionnye-sistemy-i-bazy-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/182401/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/182401/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/182401/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/182401/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/182401/slide-0.jpg 1440w" class="slides-image related-itemImage"> Модели систем. Информационные системы и базы данных</a></div><div class="related-item"><a href="/informatika/obzor-videoredaktorov-preimushchestva-i-nedostatki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/92113/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/92113/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/92113/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/92113/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/92113/slide-0.jpg 1440w" class="slides-image related-itemImage"> Обзор видеоредакторов. Преимущества и недостатки</a></div><div class="related-item"><a href="/informatika/ponyatie-o-deloproizvodstve-i-dokumente-lektsiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/364909/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/364909/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/364909/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/364909/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/364909/slide-0.jpg 1440w" class="slides-image related-itemImage"> Понятие о делопроизводстве и документе. (Лекция 1)</a></div><div class="related-item"><a href="/informatika/sluzhba-kataloga-microsoft-windows-server-2012" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/210947/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/210947/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/210947/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/210947/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/210947/slide-0.jpg 1440w" class="slides-image related-itemImage"> Служба каталога Microsoft Windows Server 2012. Назначение. Структура. Возможности</a></div><div class="related-item"><a href="/informatika/elektro-vychislitelnaya-mashina" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/172417/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/172417/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/172417/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/172417/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/172417/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электро-вычислительная машина</a></div><div class="related-item"><a href="/informatika/kodirovanie-zvuka-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420224/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/420224/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/420224/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/420224/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420224/slide-0.jpg 1440w" class="slides-image related-itemImage"> Кодирование звука</a></div><div class="related-item"><a href="/informatika/tehnicheskie-kanaly-utechki-informatsii-lektsiya-5" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/400675/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/400675/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/400675/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/400675/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/400675/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технические каналы утечки информации. (Лекция 5)</a></div><div class="related-item"><a href="/informatika/power-bi" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/20282/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/20282/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/20282/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/20282/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/20282/slide-0.jpg 1440w" class="slides-image related-itemImage"> Power BI</a></div><div class="related-item"><a href="/informatika/prioritetnye-produkty-iyun19" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194175/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/194175/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/194175/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/194175/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194175/slide-0.jpg 1440w" class="slides-image related-itemImage"> Приоритетные продукты. Июнь’19</a></div><div class="related-item"><a href="/informatika/smeta-2014" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166722/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/166722/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/166722/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/166722/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/166722/slide-0.jpg 1440w" class="slides-image related-itemImage"> СМЕТА-2014</a></div><div class="related-item"><a href="/informatika/vizualizatsiya-dannyh-14" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/193326/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/193326/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/193326/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/193326/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/193326/slide-0.jpg 1440w" class="slides-image related-itemImage"> Визуализация данных</a></div><div class="related-item"><a href="/informatika/znakomstvo-s-elektronnoy-obrazovatelnoy-sredoy-gertsenovskogo" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/403194/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/403194/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/403194/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/403194/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/403194/slide-0.jpg 1440w" class="slides-image related-itemImage"> Знакомство с электронной образовательной средой Герценовского университета</a></div><div class="related-item"><a href="/informatika/osnovnye-algoritmicheskie-konstruktsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/151885/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/151885/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/151885/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/151885/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/151885/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основные алгоритмические конструкции</a></div><div class="related-item"><a href="/informatika/prilozhenie-kosvennyy-dostup-k-parametram-fc" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/178211/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/178211/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/178211/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/178211/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/178211/slide-0.jpg 1440w" class="slides-image related-itemImage"> Приложение: косвенный доступ к параметрам FC и FB</a></div><div class="related-item"><a href="/informatika/elektronnye-obrazovatelnye-resursy-6" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/514044/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/514044/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/514044/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/514044/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/514044/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронные образовательные ресурсы</a></div><div class="related-item"><a href="/informatika/vvedenie-v-php-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167674/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/167674/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/167674/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/167674/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167674/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в PHP</a></div><div class="related-item"><a href="/informatika/delovaya-grafika-uslovnaya-funktsiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/254639/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/254639/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/254639/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/254639/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/254639/slide-0.jpg 1440w" class="slides-image related-itemImage"> Деловая графика. Условная функция</a></div><div class="related-item"><a href="/informatika/puteshestvie-v-stranu-infoznayka" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302183/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/302183/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/302183/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/302183/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/302183/slide-0.jpg 1440w" class="slides-image related-itemImage"> Путешествие в страну Инфознайка</a></div><div class="related-item"><a href="/informatika/razrabotka-plana-deystviy-raznoobrazie-zadach-obrabotki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/137200/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/137200/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/137200/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/137200/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/137200/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка плана действий. Разнообразие задач обработки информации</a></div><div class="related-item"><a href="/informatika/formuly-i-funktsii-v-excel" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/15223/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/15223/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/15223/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/15223/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/15223/slide-0.jpg 1440w" class="slides-image related-itemImage"> Формулы и функции в Excel</a></div><div class="related-item"><a href="/informatika/solving-ultimate-pit-limit-problem-through" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/590107/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/590107/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/590107/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/590107/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/590107/slide-0.jpg 1440w" class="slides-image related-itemImage"> Solving ultimate pit limit problem through graph closure (L-G algorithm) and the fundamental tree algorithm</a></div><div class="related-item"><a href="/informatika/informatsionnye-tehnologii-115" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/341929/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/341929/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/341929/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/341929/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/341929/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационные технологии</a></div><div class="related-item"><a href="/informatika/predstavlenie-informatsii-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/270527/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/270527/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/270527/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/270527/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/270527/slide-0.jpg 1440w" class="slides-image related-itemImage"> Представление информации</a></div><div class="related-item"><a href="/informatika/elektronnyy-dokumentooborot-lektsiya-n2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578099/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/578099/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/578099/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/578099/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/578099/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронный документооборот. Лекция №2</a></div><div class="related-item"><a href="/informatika/fizicheskiy-i-kanalnyy-urovni-protokol-ethernet" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/201687/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/201687/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/201687/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/201687/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/201687/slide-0.jpg 1440w" class="slides-image related-itemImage"> Физический и канальный уровни. Протокол Ethernet</a></div><div class="related-item"><a href="/informatika/case-tehnologii-analiza-i-proektirovaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/329579/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/329579/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/329579/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/329579/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/329579/slide-0.jpg 1440w" class="slides-image related-itemImage"> CASE-технологии анализа и проектирования</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:549389,name:k,category:G,count:54,jpg:"jpg\u002F549389",hits:H,download:b,h1:"Разработка Web-сайтовс использованием языка разметки гипертекста НТМL. презентация",meta:{h1:k,title:k,description:"Разработка Web-сайтовс использованием языка разметки гипертекста НТМL. презентация на тему, доклад, Информатика",keywords:"Разработка Web-сайтовс использованием языка разметки гипертекста НТМL., презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Разработка Web-сайтовс использованием языка разметки гипертекста НТМL. из раздела Информатика. Презентация на заданную тему содержит 54 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EСодержание:\u003Cbr\u003E\u003Cp\u003E1.Web -страницы и Web – сайты\u003Cbr\u003EДля создания Web-страниц\u003Cbr\u003EСоздание Web-страниц с использованием НТМL-тэгов\u003Cbr\u003EWeb-сайты. Основные моменты\u003Cbr\u003EРазмещение в Интернет\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E2.Структура Web-страницы\u003Cbr\u003EТЭГИ\u003Cbr\u003EРазработка заготовка\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E3.Форматирование текста на Web-странице\u003Cbr\u003EШрифт\u003Cbr\u003EВыравнивание текста\u003Cbr\u003EАбзацы. Горизонтальная линия\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E4.Вставка изображений в Web-страницы\u003Cbr\u003EПоложение рисунка относительно текста\u003Cbr\u003EВставка альтернативного текста\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E \u003Cp\u003E5.Гиперссылки на Web-страницах\u003Cbr\u003EПанель навигации по сайту.\u003Cbr\u003Eссылка на адрес электронный почты\u003Cbr\u003EПример\u003Cbr\u003E6. Списки на Web-страницах\u003Cbr\u003Eнумерованные списки \u003Cbr\u003Eмаркированные списки\u003Cbr\u003Eсписки определений\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E7. Интерактивные формы на Web-страницах\u003Cbr\u003EФорма\u003Cbr\u003EТекстовые поля. Текстовые поля.HTML –код\u003Cbr\u003EПереключатели. Переключатели. HTML-код\u003Cbr\u003EФлажки. Флажки. HTML-код\u003Cbr\u003EРаскрывающиеся списки. Раскрывающиеся списки.HTML код\u003Cbr\u003EТекстовая область.\u003Cbr\u003EОтправка данных из формы.\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003EЧто должно получиться\u003Cbr\u003EОсновные HTML -тэги\u003Cbr\u003E\u003Cbr\u003E",file:"Разработка-Web-сайтовс-использованием-языка-разметки-гипертекста-НТМL..pptx",texts:["\u003Cp\u003EРазработка Web-сайтов\r\nс использованием языка разметки гипертекста НТМL\r\n\u003Cbr\u003E\u003Cp\u003EХайрулина Анастасия Владиславовна,\u003Cbr\u003EМОУ СОШ №10, г. Кандалакша, Мурманская обл.\u003Cbr\u003E","\u003Cp\u003EСодержание:\u003Cbr\u003E\u003Cp\u003E1.Web -страницы и Web – сайты\u003Cbr\u003EДля создания Web-страниц\u003Cbr\u003EСоздание Web-страниц с использованием НТМL-тэгов\u003Cbr\u003EWeb-сайты. Основные моменты\u003Cbr\u003EРазмещение в Интернет\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E2.Структура Web-страницы\u003Cbr\u003EТЭГИ\u003Cbr\u003EРазработка заготовка\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E3.Форматирование текста на Web-странице\u003Cbr\u003EШрифт\u003Cbr\u003EВыравнивание текста\u003Cbr\u003EАбзацы. Горизонтальная линия\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E4.Вставка изображений в Web-страницы\u003Cbr\u003EПоложение рисунка относительно текста\u003Cbr\u003EВставка альтернативного текста\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E","\u003Cp\u003E5.Гиперссылки на Web-страницах\u003Cbr\u003EПанель навигации по сайту.\u003Cbr\u003Eссылка на адрес электронный почты\u003Cbr\u003EПример\u003Cbr\u003E6. Списки на Web-страницах\u003Cbr\u003Eнумерованные списки \u003Cbr\u003Eмаркированные списки\u003Cbr\u003Eсписки определений\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003E7. Интерактивные формы на Web-страницах\u003Cbr\u003EФорма\u003Cbr\u003EТекстовые поля. Текстовые поля.HTML –код\u003Cbr\u003EПереключатели. Переключатели. HTML-код\u003Cbr\u003EФлажки. Флажки. HTML-код\u003Cbr\u003EРаскрывающиеся списки. Раскрывающиеся списки.HTML код\u003Cbr\u003EТекстовая область.\u003Cbr\u003EОтправка данных из формы.\u003Cbr\u003EКонтрольные вопросы\u003Cbr\u003EЧто должно получиться\u003Cbr\u003EОсновные HTML -тэги\u003Cbr\u003E","\u003Cp\u003E1.Web -страницы и Web - сайты\u003Cbr\u003E\u003Cp\u003EWeb -страницы создаются с использова­нием языка разметки гипертекстовых документов НТМL (Нуреr Техt Markup Language). В обычный текстовый доку­мент вставляются управляющие символы — НТМL-тэги, ко­торые определяют вид Web-страницы при ее просмотре в браузере.\u003Cbr\u003EОсновными достоинствами Web-страниц являются:\u003Cbr\u003E• малый информационный объем;\u003Cbr\u003E• возможность просмотра в различных операционных системах.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EДля создания Web-страниц\u003Cbr\u003E\u003Cp\u003EДля создания Web-страниц используются простейшие текстовые редакторы или специальные программы-HTML –редакторы (HtmlPad FisherMan). В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EСоздание Web-страниц с использованием НТМL-тэгов\u003Cbr\u003E\u003Cp\u003Eтребует больших усилий, времени и знания синтаксиса языка. \u003Cbr\u003EПрименение специальных инструментальных программ­ных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и ре­дактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG \u003Cbr\u003E(от англ. «What You See Is What You Get - Что видишь, то и получишь»).\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EWeb-сайты. Основные моменты\u003Cbr\u003E\u003Cp\u003EПубликации во Всемирной паутине реализу­ются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме.\u003Cbr\u003E\u003Cp\u003EСайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EРазмещение в Интернет\u003Cbr\u003E\u003Cp\u003EПрежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.\u003Cbr\u003EДля публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы\u003Cbr\u003E\u003Cp\u003E1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?\u003Cbr\u003E2. Каким образом Web -страницы объединяются в Web-сайты?\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E2. Структура Web-страницы\u003Cbr\u003E\u003Cp\u003EНТМL-код страницы помещается внутрь контейнера \u003CНТМL\u003E\u003C\u002FНТМL\u003E. \u003Cbr\u003EБез этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. \u003Cbr\u003EWeb-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.\u003Cbr\u003EЗаголовок Web-страницы заключается в контейнер \u003CНЕАD\u003E\u003C\u002FНЕАD\u003E и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EТэги заключаются в угловые скобки и могут быть одиночными или парными. \u003Cbr\u003EПарные тэги содержат откры­вающий и закрывающий тег (такая пара тэгов называ­ется контейнером).\u003Cbr\u003E\u003Cp\u003Ei\u003Cbr\u003E\u003Cp\u003E\u003CНЕАD\u003E\u003Cbr\u003E\u003C\u002FНЕАD\u003E \u003Cbr\u003E\u003Cbr\u003E\u003CНТМL\u003E\u003Cbr\u003E\u003C\u002FНТМL\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EТЭГИ\u003Cbr\u003E\u003Cp\u003EЗакрывающий тэг содержит прямой слэш (\u002F) перед обозначением. \u003Cbr\u003EНазвание страницы помещается в контейнер \u003CTITLE\u003E \u003C\u002FTITLE\u003E и при просмотре отображается в верхней строке окна браузера.\u003Cbr\u003EОтображаемое в браузере содержание страницы помеща­ется в контейнер \u003CBODY\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EРазработка заготовка\u003Cbr\u003E\u003Cp\u003E\u003CHTML\u003E\u003Cbr\u003E\u003CHEAD\u003E\u003Cbr\u003E\u003CTITLE\u003EКомпьютер\u003Cbr\u003E\u003C\u002FТIТLЕ\u003E\u003Cbr\u003E\u003C\u002FHEAD\u003E\u003Cbr\u003E\u003CBODY\u003E\u003Cbr\u003EКомпьютер и ПО\u003Cbr\u003E\u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E\u003Cp\u003EСозданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EНеобходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе,\u003Cbr\u003Eи имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера.\u003Cbr\u003E Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами\u003Cbr\u003E\u003Cp\u003Ei\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы\u003Cbr\u003E\u003Cp\u003EКакие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? \u003Cbr\u003EКакова логическая структура Web-страницы?\u003Cbr\u003EПрактическое задание. \u003Cbr\u003EСоздать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E3. Форматирование текста на Web-странице\u003Cbr\u003E\u003Cp\u003EС помо­щью тэгов можно задать различные параметры форматиро­вания текста.\u003Cbr\u003EЗаголовки. \u003Cbr\u003EРазмеры шрифтов заголовков задаются параметрами тэгов от \u003Cbr\u003E \u003CН1\u003E\u003C\u002FН1\u003E (самый крупный) \u003Cbr\u003Eдо \u003CH6\u003E\u003C\u002FH6\u003E (самый мелкий).\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EШрифт.\u003Cbr\u003E\u003Cp\u003EНекоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения.\u003Cbr\u003EС помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. \u003Cbr\u003EАтрибут FACE позволя­ет задать гарнитуру шрифта (например, FACE=\"Arial\"), \u003Cbr\u003E Атрибут SIZE — размер шрифта (например, SIZE=4).\u003Cbr\u003EАтрибут COLOR позволяет задавать цвет шрифта (напри­мер, COLOR=\"blue\"). \u003Cbr\u003EЗначение атрибута COLOR можно за­дать либо названием цвета (например, \"red\", \"green\", \"blue\" и т. д.), либо его шестнадцатеричным значением - \"#RRGGBB\"\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EВыравнивание текста.\u003Cbr\u003E\u003Cp\u003EЗадать способ выравнивания тек­ста позволяет атрибут ALIGN. \u003Cbr\u003EВыравнивание по левой грани­це задается так: ALIGN=\"left\",\u003Cbr\u003E выравнивание по правой границе: ALIGN=\"right\", \u003Cbr\u003Eвыравнивание по центру: ALIGN= \"center\".\u003Cbr\u003EТаким образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:\u003Cbr\u003E\u003CFONT COLOR=\"blue\"\u003E\u003Cbr\u003E\u003CН1 ALIGN=\"center\"\u003Eкомпьютер и П0\u003C\u002FН1\u003E\u003Cbr\u003E\u003C\u002FFONT\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EГоризонтальная линия. \u003Cbr\u003EЗаголовки целесообразно отде­лять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга \u003CHR\u003E.\u003Cbr\u003EАбзацы. \u003Cbr\u003EРазделение текста на абзацы производится с помощью контейнера \u003Cр\u003E\u003C\u002Fр\u003E. При просмотре в браузере аб­зацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и па­раметры форматирования шрифта.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EДомашняя страница сайта.\u003Cbr\u003E\u003Cp\u003EНа домашней странице сайта обычно размещается текст, кратко описывающий его содер­жание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:\u003Cbr\u003E\u003CР ALIGN=\"left\"\u003E\u003Cbr\u003EHa этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.\u003Cbr\u003E\u003C\u002FР\u003E \u003Cbr\u003E\u003CР ALIGN=\"RIGHT\"\u003EТерминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.\u003Cbr\u003E\u003C\u002FР\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E\u003CFONT COLOR=\"blue\"\u003E\u003Cbr\u003E\u003CН1 ALIGN=\"center\"\u003E\u003Cbr\u003EКомпьютер и ПО\u003Cbr\u003E\u003C\u002FН1\u003E\u003Cbr\u003E\u003C\u002FFONT\u003E\u003Cbr\u003E\u003CHR\u003E\u003Cbr\u003E\u003CР ALIGN=\"left\"\u003EHa этом сайте...\u003C\u002FР\u003E\u003Cbr\u003E\u003CР ALIGN =\"right\"\u003E Терминологический словарь\u003Cbr\u003E...\u003C\u002FР\u003E\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы\r\n\u003Cbr\u003E\u003Cp\u003EКакие тэги (контейнеры) используются для ввода заголовков? \u003Cbr\u003EФорматирования шрифта? \u003Cbr\u003EВвода абзацев?\u003Cbr\u003EПрактическое задание. \u003Cbr\u003EСоздать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E4.Вставка изображений в Web-страницы\u003Cbr\u003E\u003Cp\u003EНа Web-страницы можно помещать изображения, хра­нящиеся в графических файлах трех форматов — GIF, JPEG и PNG.\u003Cbr\u003EВставка изображений. \u003Cbr\u003EДля вставки изображения ис­пользуется тэг \u003CIMG\u003E с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. НАПРИМЕР:\u003Cbr\u003E\u003CIMG SRC=\"computer.gif\"\u003E\u003Cbr\u003E\u003CIMG SRC=\"C:\\computer\\computer.gif\"\u003E\u003Cbr\u003E\u003CIMG SRC=\"http:\u002F\u002Fwww.server.ru\u002Fcomputer.gif\"\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EПоложение рисунка относительно текста. \u003Cbr\u003E\u003Cp\u003EРасположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: \u003Cbr\u003EТОР (верх), \u003Cbr\u003EMIDDLE (середина),\u003Cbr\u003E BOTTOM (низ), \u003Cbr\u003ELEFT (слева) \u003Cbr\u003Eи RIGHT (справа).\u003Cbr\u003EНАПРИМЕР:\u003Cbr\u003E\u003CIMG SRC=\"computer.gif\" ALIGN=\"right\"\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EВставка альтернативного текста.\u003Cbr\u003E\u003Cp\u003EПользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.\u003Cbr\u003EАльтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:\u003Cbr\u003E\u003CIMG SRC=\"computer.gif\" ALIGN=\"right» ALT=\"Компьютер\"\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы\u003Cbr\u003E\u003Cp\u003E1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?\u003Cbr\u003EПрактическое задание.\u003Cbr\u003E Вставить в Web-страницу «Компьютер» изображение и альтернативный текст и просмотреть ее в браузере.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E5. Гиперссылки на Web-страницах\u003Cbr\u003E\u003Cp\u003EГиперссылки.\u003Cbr\u003E Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.\u003Cbr\u003EГиперссылка создается с помощью универсального тэга \u003CА\u003E и его атрибута HREF, указывающего, в каком файле хра­нится загружаемая Web-страница:\u003Cbr\u003E\u003CА HREF=\"Адрес\"\u003EУказатель ссылки\u003C\u002FА\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EПанель навигации по сайту.\u003Cbr\u003E Создадим папку сайта «Компьютер» и добавим в сайт пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета». \u003Cbr\u003EСохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие «пустые» страницы должны иметь заголовки, но могут пока не иметь содержания:\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003Eпанель навигации.\u003Cbr\u003E\u003Cp\u003EНа домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.\u003Cbr\u003EРазместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами . Такое размещение гиперссылок часто называют панелью навигации.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EВставим в домашнюю страницу сайта HTML-код, создающий панель навигации:\u003Cbr\u003E\u003CР ALIGN=\"center\"\u003E\u003Cbr\u003E[\u003CА HREF=\"software.htm\"\u003EПрограммы\u003C\u002FA\u003E] & nbsp \u003Cbr\u003E[\u003CА HREF=\"glossary.htm\"\u003EСловарь\u003C\u002FA\u003E] \u003Cbr\u003E[\u003CА HREF=\"hardware.htm“\u003EКомплектующие\u003C\u002FA\u003E] \u003Cbr\u003E [\u003CA HREF=\"anketa.htm“\u003EАнкетa\u003C\u002FA\u003E] \u003C\u002FP\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EГиперссылка на адрес электронной почты.\u003Cbr\u003E\u003Cp\u003EПолезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер \u003CADDRESS\u003E\u003C\u002FADDRESS\u003E, который задает стиль абзаца, принятый для указания адреса:\u003Cbr\u003E\u003CADDRESS\u003E\u003Cbr\u003E\u003CА HREF=\"mailto:[e-mail]\"\u003EE-mail:\u003Cbr\[e-mail]\u003C\u002FA\u003E\u003Cbr\u003E\u003C\u002FADDRESS\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003E6. Списки на Web-страницах \u003Cbr\u003E\u003Cp\u003Eнумерованные списки, \u003Cbr\u003Eкогда элементы списка идентифицируются с помощью чисел;\u003Cbr\u003Eмаркированные списки, \u003Cbr\u003Eкогда элементы списка идентифицируются с помощью специальных символов (маркеров);\u003Cbr\u003Eсписки определений, \u003Cbr\u003Eпозволяющие составлять перечни определений в так называемой словарной форме.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EНумерованные списки.\u003Cbr\u003E\u003Cp\u003EНумерованный список располагается внутри контейнера \u003COL\u003E\u003C\u002FOL\u003E, а каждый элемент списка определяется тэгом \u003CLI\u003E. С помощью атрибута TYPE тэга \u003COL\u003E можно задать тип нумерации: \u003Cbr\u003Eарабские цифры (по умолчанию),\u003Cbr\u003E \"I\" (римские цифры),\u003Cbr\u003E \"а\" (строчные буквы) \u003Cbr\u003E\u003COL\u003E\u003Cbr\u003E\u003CLI\u003EСистемные программы \u003Cbr\u003E\u003CLI\u003EПрикладные программы \u003Cbr\u003E\u003CLI\u003EСистемы программирования \u003C\u002F0L\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EМаркированные списки.\u003Cbr\u003E\u003Cp\u003EМаркированный список располагается внутри контейнера \u003CUL\u003E\u003C\u002FUL\u003E, а каждый элемент списка определяется тэгом \u003CLI\u003E. С помощью атрибута TYPE тэга \u003CUL\u003E можно задать вид маркера списка: \u003Cbr\u003E\"disc\" (диск), \u003Cbr\u003E\"square\" (квадрат) \u003Cbr\u003Eили \"circle\" (окружность):\u003Cbr\u003E\u003CUL TYPE=\"square\"\u003E\u003Cbr\u003E\u003CLI\u003Eтекстовые редакторы;\u003Cbr\u003E\u003CLI\u003Eграфические редакторы;\u003Cbr\u003E\u003CLI\u003Eэлектронные таблицы;\u003Cbr\u003E\u003CLI\u003Eсистемы управления базами данных.\u003Cbr\u003E\u003C\u002FUL\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EСписок определений.\u003Cbr\u003E\u003Cp\u003EСписок определений располагается внутри контейнера \u003CDL\u003E\u002F\u003CDL\u003E. Внутри него текст оформля­ется в виде терминов, которые выделяются одинарными тэгами \u003CDT\u003E и определений, которые следуют за одинарными тэгами \u003CDD\u003E.\u003Cbr\u003EWeb-страницу «Словарь» мы представим в виде словаря компьютерных терминов \u003Cbr\u003E\u003CDL\u003E\u003Cbr\u003E\u003CDТ\u003EПроцессор\u003Cbr\u003E\u003CDD\u003EЦентральное устройство компьютера,\u003Cbr\u003Eпроизводящее обработку информации в двоичном коде.\u003Cbr\u003E\u003CDТ\u003EОперативная память\u003Cbr\u003E\u003CDD\u003EУстройство, в котором хранятся программы и данные.\u003Cbr\u003E\u003C\u002FDL\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы\r\n\u003Cbr\u003E\u003Cp\u003E Какие тэги используются для создания нумерованных списков? Маркированных списков?\u003Cbr\u003EПрактическое задание. \u003Cbr\u003EСоздать Web-страницу «Программы» с нумерованным списком и вложенным маркированным спис­ком.\u003Cbr\u003EСоздать Web-страницу «Словарь» со списком терминов.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E",I,"\u003Cp\u003E7. Интерактивные формы на Web-страницах \u003Cbr\u003E\u003Cp\u003EДля того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: \u003Cbr\u003Eтекстовые поля, \u003Cbr\u003Eраскрывающиеся списки, \u003Cbr\u003Eфлажки, \u003Cbr\u003Eпереключатели, \u003Cbr\u003Eтекстовые области и т. д.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EФорма\u003Cbr\u003E\u003Cp\u003EВся форма заключается в контейнер \u003CF0RM\u003E\u003C\u002FF0RM\u003E. \u003Cbr\u003EВ первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EТекстовые поля.\u003Cbr\u003E\u003Cp\u003EДля получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.\u003Cbr\u003EТекстовые поля создаются с помощью тэга \u003CINPUT\u003E со значением атрибута TYPE=\"text\". \u003Cbr\u003EАтрибут NAME является обязательным и служит для идентификации полученной ин­формации.\u003Cbr\u003E Значением атрибута SIZE является число, задаю­щее длину поля ввода в символах.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EТекстовые поля.HTML -код\u003Cbr\u003E\u003Cp\u003EДля того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки \u003CBR\u003E\r\n\u003Cbr\u003E\u003CFORM\u003E\u003Cbr\u003EПожалуйста, введите ваше имя:\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"text\" NАМЕ=\"ФИ0\" SIZE=30\u003E\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003EE-mail:\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"text\" NAME=\"e-mail\" SIZE=30\u003E\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003C\u002FFORM\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EПереключатели.\u003Cbr\u003E\u003Cp\u003EДалее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга \u003CINPUT\u003E со значением атрибута TYPE=\"radio\". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME=\"group\".\u003Cbr\u003EЕще одним обязательным атрибутом является VALUE, которому присвоим значения \"учащийся\", \"студент\" и \"учитель\". Значение атрибута VALUE должно быть уникаль­ным для каждой «радиокнопки».\u003Cbr\u003EВставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки \u003CBR\u003E \u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EПереключатели. HTML-код\u003Cbr\u003E\u003Cp\u003EУкажите, к какой группе пользователей вы\u003Cbr\u003Eсебя относите:\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"radio\" NAME=\"group\"\u003Cbr\u003EVALUE=\"учащийся\"\u003Eучащийся\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"radio\" NAME=\"group\"\u003Cbr\u003EVALUE=\"студент\"\u003Eстудент\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"radio\" NAME=\"group\"\u003Cbr\u003EVALUЕ=\"учитель\"\u003Eучитель\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EФлажки.\u003Cbr\u003E\u003Cp\u003EДалее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками.\u003Cbr\u003EФлажки создаются в тэге \u003CINPUT\u003E со значением атрибута TYPE=\"checkbox\". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME=\"box1\", NAME=\"box2\" и т. д.\u003Cbr\u003EЕще одним обязательным атрибутом является VALUE, которому присвоим значения \"WWW\", \"e-mail\" и \"FTP\". Значение атрибута VALUE должно быть уникальным для каждого флажка.\u003Cbr\u003EВставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки \u003CBR\u003E :\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EФлажки. HTML-код\u003Cbr\u003E\u003Cp\u003EКакие из сервисов Интернета вы используете\u003Cbr\u003Eнаиболее часто:\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"checkbox\" NAME=\"box1\"\u003Cbr\u003EVALUE=\"WWW\"\u003EWWW\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"checkbox\" NAME=\"box2\"\u003Cbr\u003EVALUE=\"e-mail\"\u003Ee-mail\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CINPUT TYPE=\"checkbox\" NAME=\"box3\"\u003Cbr\u003EVALUE=\"FTP\"\u003EFTP\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EРаскрывающиеся списки.\u003Cbr\u003E\u003Cp\u003EДля реализации раскрывающегося списка используется контейнер \u003CSELECT\u003E\u003C\u002FSELECT\u003E, в котором каждый элемент списка определяется тэгом \u003C0PTI0N\u003E.\u003Cbr\u003EB переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EРаскрывающиеся списки.HTML код\u003Cbr\u003E\u003Cp\u003E\u003CBR\u003E\u003Cbr\u003EКакой браузер вы используете\u003Cbr\u003Eнаиболее часто:\u003Cbr\u003E\u003Cbr\u003E\u003CSELECT NAMЕ=\"Браузер\"\u003E\u003Cbr\u003E\u003COPTION SELECTED\u003EInternet Explorer\u003Cbr\u003E\u003COPTION\u003ENetscape Navigator\u003Cbr\u003E\u003COPTION\u003EOpera\u003Cbr\u003E\u003COPTION\u003EMozilla\u003Cbr\u003E\u003C\u002FSELECT\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EТекстовая область.\u003Cbr\u003E\u003Cp\u003EВ такое поле можно ввести достаточно длинный текст.\u003Cbr\u003EСоздается текстовая область с помощью тэга \u003CTEXTAREA\u003E с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.\u003Cbr\u003EВставим в HTML-код текстовую область :\u003Cbr\u003EКакую еще информацию вы хотели бы видеть\u003Cbr\u003Eна сайте?\u003Cbr\u003E\u003CBR\u003E\u003Cbr\u003E\u003CTEXTAREA NAME=\"Ваши предложения\"\u003Cbr\u003EROWS=4 COLS=30\u003E\u003Cbr\u003E\u003C\u002FTEXTAREA\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EОтправка данных из формы.\u003Cbr\u003E\u003Cp\u003EОтправка введенной в форму информации осуществляется с помощью щелчка по кнопке.\u003Cbr\u003EКнопка создается с помощью тэга \u003CINPUT\u003E. Атрибуту TYPE необходимо присвоить значение \"submit\", а атрибуту VALUE, который задает надпись на кнопке, присвоить значение \"Отправить\" \u003Cbr\u003E\u003CINPUT TYPE=\" submit\" VALUЕ=\"Отправить\"\u003E\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EЩелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера \u003CFORM\u003E надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:\u003Cbr\u003E\u003CFORM ACTION=\"mailto:[e-mail]\" METHOD=\"POST\" ENCTYPE=\"text\u002Fplain\"\u003E\u003Cbr\u003EПосле открытия в браузере Web-страницы «Анкета» и внесения данных в поля формы необходимо щелкнуть по кнопке Отправить. Данные будут отправлены по указанному адресу электронной почты.\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E","\u003Cp\u003EКонтрольные вопросы:\u003Cbr\u003E\u003Cp\u003EКакие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?\u003Cbr\u003EКакие значения необходимо присвоить атрибутам тэга \u003CFORM\u003E для отправки введенной в форму информации \u003Cbr\u003EПрактическое задание:\u003Cbr\u003EСоздать страницу «Анкета», содержащую форму для ввода данных\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E",I,"\u003Cp\u003EСайт\u003Cbr\u003E\u003Cp\u003EСодержание\u003Cbr\u003E"],href:"\u002Finformatika\u002Frazrabotka-web-saytovs-ispolzovaniem-yazyka-razmetki",href_category:"\u002Finformatika",date:1663956459,related:[{id:350913,name:"Универсальная десятичная (децимальная) классификация (УДК)",href:"\u002Finformatika\u002Funiversalnaya-desyatichnaya-detsimalnaya-klassifikatsiya-udk",jpg:"jpg\u002F350913"},{id:138171,name:"Программа Figma",href:"\u002Finformatika\u002Fprogramma-figma",jpg:"jpg\u002F138171"},{id:182401,name:"Модели систем. Информационные системы и базы данных",href:"\u002Finformatika\u002Fmodeli-sistem-informatsionnye-sistemy-i-bazy-1",jpg:"jpg\u002F182401"},{id:92113,name:"Обзор видеоредакторов. Преимущества и недостатки",href:"\u002Finformatika\u002Fobzor-videoredaktorov-preimushchestva-i-nedostatki",jpg:"jpg\u002F92113"},{id:364909,name:"Понятие о делопроизводстве и документе. (Лекция 1)",href:"\u002Finformatika\u002Fponyatie-o-deloproizvodstve-i-dokumente-lektsiya",jpg:"jpg\u002F364909"},{id:210947,name:"Служба каталога Microsoft Windows Server 2012. Назначение. Структура. Возможности",href:"\u002Finformatika\u002Fsluzhba-kataloga-microsoft-windows-server-2012",jpg:"jpg\u002F210947"},{id:172417,name:"Электро-вычислительная машина",href:"\u002Finformatika\u002Felektro-vychislitelnaya-mashina",jpg:"jpg\u002F172417"},{id:420224,name:"Кодирование звука",href:"\u002Finformatika\u002Fkodirovanie-zvuka-3",jpg:"jpg\u002F420224"},{id:400675,name:"Технические каналы утечки информации. (Лекция 5)",href:"\u002Finformatika\u002Ftehnicheskie-kanaly-utechki-informatsii-lektsiya-5",jpg:"jpg\u002F400675"},{id:20282,name:"Power BI",href:"\u002Finformatika\u002Fpower-bi",jpg:"jpg\u002F20282"},{id:194175,name:"Приоритетные продукты. Июнь’19",href:"\u002Finformatika\u002Fprioritetnye-produkty-iyun19",jpg:"jpg\u002F194175"},{id:166722,name:"СМЕТА-2014",href:"\u002Finformatika\u002Fsmeta-2014",jpg:"jpg\u002F166722"},{id:193326,name:"Визуализация данных",href:"\u002Finformatika\u002Fvizualizatsiya-dannyh-14",jpg:"jpg\u002F193326"},{id:403194,name:"Знакомство с электронной образовательной средой Герценовского университета",href:"\u002Finformatika\u002Fznakomstvo-s-elektronnoy-obrazovatelnoy-sredoy-gertsenovskogo",jpg:"jpg\u002F403194"},{id:151885,name:"Основные алгоритмические конструкции",href:"\u002Finformatika\u002Fosnovnye-algoritmicheskie-konstruktsii",jpg:"jpg\u002F151885"},{id:178211,name:"Приложение: косвенный доступ к параметрам FC и FB",href:"\u002Finformatika\u002Fprilozhenie-kosvennyy-dostup-k-parametram-fc",jpg:"jpg\u002F178211"},{id:514044,name:"Электронные образовательные ресурсы",href:"\u002Finformatika\u002Felektronnye-obrazovatelnye-resursy-6",jpg:"jpg\u002F514044"},{id:167674,name:"Введение в PHP",href:"\u002Finformatika\u002Fvvedenie-v-php-1",jpg:"jpg\u002F167674"},{id:254639,name:"Деловая графика. Условная функция",href:"\u002Finformatika\u002Fdelovaya-grafika-uslovnaya-funktsiya",jpg:"jpg\u002F254639"},{id:302183,name:"Путешествие в страну Инфознайка",href:"\u002Finformatika\u002Fputeshestvie-v-stranu-infoznayka",jpg:"jpg\u002F302183"},{id:137200,name:"Разработка плана действий. Разнообразие задач обработки информации",href:"\u002Finformatika\u002Frazrabotka-plana-deystviy-raznoobrazie-zadach-obrabotki",jpg:"jpg\u002F137200"},{id:15223,name:"Формулы и функции в Excel",href:"\u002Finformatika\u002Fformuly-i-funktsii-v-excel",jpg:"jpg\u002F15223"},{id:590107,name:"Solving ultimate pit limit problem through graph closure (L-G algorithm) and the fundamental tree algorithm",href:"\u002Finformatika\u002Fsolving-ultimate-pit-limit-problem-through",jpg:"jpg\u002F590107"},{id:341929,name:"Информационные технологии",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-115",jpg:"jpg\u002F341929"},{id:270527,name:"Представление информации",href:"\u002Finformatika\u002Fpredstavlenie-informatsii-4",jpg:"jpg\u002F270527"},{id:578099,name:"Электронный документооборот. Лекция №2",href:"\u002Finformatika\u002Felektronnyy-dokumentooborot-lektsiya-n2",jpg:"jpg\u002F578099"},{id:201687,name:"Физический и канальный уровни. Протокол Ethernet",href:"\u002Finformatika\u002Ffizicheskiy-i-kanalnyy-urovni-protokol-ethernet",jpg:"jpg\u002F201687"},{id:329579,name:"CASE-технологии анализа и проектирования",href:"\u002Finformatika\u002Fcase-tehnologii-analiza-i-proektirovaniya",jpg:"jpg\u002F329579"}],navigation:{next:"\u002Funcategorized\u002Fissledovatelskaya-rabota-po-kraevedeniyu-1",next_name:"Исследовательская работа по краеведению",prev:"\u002Funcategorized\u002Fprezentatsiya-pokrov-presvyatoy-bogoroditsy",prev_name:"ПРЕЗЕНТАЦИЯ ПОКРОВ ПРЕСВЯТОЙ БОГОРОДИЦЫ."}}},categories:{result:[{id:J,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:J,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:H,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:S,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Разработка Web-сайтовс использованием языка разметки гипертекста НТМL.","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",17,"\u003Cp\u003EСодержание\u003Cbr\u003E",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>