Презентация на тему: Создание Web-сайта

KNOWLEDGE HYPERMARKET

 		Версия 15:09, 16 декабря 2011 (просмотреть исходный код)
User16  (Обсуждение | вклад)
 (Новая страница: «<metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 8 клас, Інформат...»)
← Предыдущая правка
		Текущая версия на 12:26, 16 февраля 2012 (просмотреть исходный код)
User16  (Обсуждение | вклад) 
 
		
(1 промежуточная версия не показана)
Строка 9:
Строка 9:
 <br>    <br>  
  
- '''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание Web-сайта<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Структура Web-сайта<br>'''<br><u>Тема урока:<br></u><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Контейнеры<br>'''<br>- Код страницы &lt;HTML&gt;&lt;/HTML&gt;<br>- Заголовок &lt;HEAD&gt;&lt;/HEAD&gt;<br>- Название Web-страницы &lt;TITLE&gt;&lt;/TITLE&gt;<br>- Основное содержание страницы &lt;BODY&gt;&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Назовем Web-страницу «Компьютер»''' + '''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание Web-сайта<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Структура Web-сайта<br>'''<br><u>Тема урока:<br></u><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Контейнеры<br>'''<br>- Код страницы &lt;HTML&gt;&lt;/HTML&gt;<br>- Заголовок &lt;HEAD&gt;&lt;/HEAD&gt;<br>- Название Web-страницы &lt;TITLE&gt;&lt;/TITLE&gt;<br>- Основное содержание страницы &lt;BODY&gt;&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Назовем Web-страницу «Компьютер»'''  
  
- &lt;HEAD&gt;<br>&lt;TITLE&gt; Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> <br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Поместим на страницу текст «Все о компьютерах»''' + &lt;HEAD&gt;<br>&lt;TITLE&gt; Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> <br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Поместим на страницу текст «Все о компьютерах»'''  
  
- &lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текст программы:''' + &lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текст программы:'''  
  
- &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Сохранять Web-страницы нужно с расширением .html''' + &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Сохранять Web-страницы нужно с расширением .html'''  
  
- Например, Мой сайт .html<br>Принято сохранять титульный файл сайта под именем <br>Index.html <br>'''<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Форматирование текста:''' + Например, Мой сайт .html<br>Принято сохранять титульный файл сайта под именем <br>Index.html <br>'''<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Форматирование текста:'''  
  
- Размер шрифта в заголовках задается тэгами от Н1 до Н6:<br>&lt;H1&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>Тип выравнивания заголовка задает атрибут ALIGN<br>&lt;H1 ALIGN="CENTER”&gt;Все о компьютерах<br>&lt;/H1&gt;<br>Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)<br>Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг &lt;HR&gt;<br>Задать синий цвет заголовка:<br>&lt;FONT COLOR=“BLUE"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt; <br>&lt;HR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Абзацы:''' + Размер шрифта в заголовках задается тэгами от Н1 до Н6:<br>&lt;H1&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>Тип выравнивания заголовка задает атрибут ALIGN<br>&lt;H1 ALIGN="CENTER”&gt;Все о компьютерах<br>&lt;/H1&gt;<br>Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)<br>Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг &lt;HR&gt;<br>Задать синий цвет заголовка:<br>&lt;FONT COLOR=“BLUE"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt; <br>&lt;HR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Абзацы:'''  
  
- Разделение текста на абзацы производится контейнером &lt;P&gt;&lt;/P&gt;. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: + Разделение текста на абзацы производится контейнером &lt;P&gt;&lt;/P&gt;. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:  
  
- &lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt; + &lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt;  
  
- &lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Программирование Web-сайта''' + &lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Программирование Web-сайта'''  
  
- &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt;<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставка рисунка''' + &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt;<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставка рисунка'''  
  
- Форматы .GIF, .JPG, .PNG.&nbsp;<br>Тэг &lt;IMG&gt; с атрибутом SRC, который указывает место хранения файла (путь к файлу).<br>Расположение рисунка относительно текста –атрибут ALIGN:&nbsp; + Форматы .GIF, .JPG, .PNG.&nbsp;<br>Тэг &lt;IMG&gt; с атрибутом SRC, который указывает место хранения файла (путь к файлу).<br>Расположение рисунка относительно текста –атрибут ALIGN:&nbsp;  
  
- 1. TOP<br>2. MIDDLE<br>3. BOTTON<br>4. LEFT<br>5. RIGHT + 1. TOP<br>2. MIDDLE<br>3. BOTTON<br>4. LEFT<br>5. RIGHT  
  
- Вставить рисунок в контейнер перед абзацем текста. + Вставить рисунок в контейнер перед абзацем текста.  
  
- &lt;BODY&gt;<br>&lt;IMG SRC=«Комп.gif" alt=«компьютер"<br>ALIGN="RIGHT"&gt;<br>Или<br>&lt;BODY&gt;<br>&lt;IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер "<br>ALIGN="RIGHT"&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание других страниц сайта''' + &lt;BODY&gt;<br>&lt;IMG SRC=«Комп.gif" alt=«компьютер"<br>ALIGN="RIGHT"&gt;<br>Или<br>&lt;BODY&gt;<br>&lt;IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер "<br>ALIGN="RIGHT"&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание других страниц сайта'''  
  
- &lt;HEAD&gt;<br>&lt;TITLE&gt; Заголовок страницы &lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> Создайте страницы Программы, Словарь, Комплектующие, Анкета.<br>Сохраните их в файлах с названиями: <br>software.html <br>glossary.html<br>hardware.html <br>anketa.html <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Гиперссылки''' + &lt;HEAD&gt;<br>&lt;TITLE&gt; Заголовок страницы &lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> Создайте страницы Программы, Словарь, Комплектующие, Анкета.<br>Сохраните их в файлах с названиями: <br>software.html <br>glossary.html<br>hardware.html <br>anketa.html <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Гиперссылки'''  
  
- Гиперссылки состоят из указателя ссылки и адресной части ссылки.<br>Адресная часть – URL – адрес документа.<br>Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце.<br>В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. <br>Указатели гиперссылок разделяются пробелами (&amp;nbsp) . Для каждой гиперссылки определим адрес перехода, (контейнер &lt;A&gt; &lt;/A&gt;) с атрибутом HREF, значением которого является URL – адрес. <br><br>&lt;P ALIGN= "CENTER"<br>[&lt;A HREF="software.html"&gt;Программы&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="glossary.html"&gt;Словарь&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="hardware.html"&gt;Комплектующие&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="anketa.html"&gt;Анкета&lt;/A&gt;]<br>&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Адрес электронной почты вставляется так:''' + Гиперссылки состоят из указателя ссылки и адресной части ссылки.<br>Адресная часть – URL – адрес документа.<br>Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце.<br>В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. <br>Указатели гиперссылок разделяются пробелами (&amp;nbsp) . Для каждой гиперссылки определим адрес перехода, (контейнер &lt;A&gt; &lt;/A&gt;) с атрибутом HREF, значением которого является URL – адрес. <br><br>&lt;P ALIGN= "CENTER"<br>[&lt;A HREF="software.html"&gt;Программы&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="glossary.html"&gt;Словарь&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="hardware.html"&gt;Комплектующие&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="anketa.html"&gt;Анкета&lt;/A&gt;]<br>&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Адрес электронной почты вставляется так:'''  
  
- Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.<br>&lt;ADRESS&gt;<br>&lt;A HREF="mailto&nbsp;:mailbox@provaider.ru"&gt;E-mail:<br>mailbox@provaider.ru&lt;/A&gt;<br>&lt;/ADRESS&gt;<br>По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес<br><br>карт<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка нумерованного''' + Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.<br>&lt;ADRESS&gt;<br>&lt;A HREF="mailto&nbsp;:mailbox@provaider.ru"&gt;E-mail:<br>mailbox@provaider.ru&lt;/A&gt;<br>&lt;/ADRESS&gt;<br>По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес<br><br>[[Image:1602-35.jpg|639x398px]]<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка нумерованного'''  
  
- Список располагается внутри контейнера &lt;OL&gt; &lt;/OL&gt;, а каждый элемент списка – тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;ОL&gt; можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы).<br>Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:<br> &lt;OL&gt;<br>&lt;LI&gt;Системные программы<br>&lt;LI&gt;Прикладные программы<br>&lt;LI&gt;Системы программирования<br>&lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка маркированного''' + Список располагается внутри контейнера &lt;OL&gt; &lt;/OL&gt;, а каждый элемент списка – тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;ОL&gt; можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы).<br>Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:<br> &lt;OL&gt;<br>&lt;LI&gt;Системные программы<br>&lt;LI&gt;Прикладные программы<br>&lt;LI&gt;Системы программирования<br>&lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка маркированного'''  
  
- Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера &lt;UL&gt; &lt;/UL&gt;, а каждый элемент списка определяется также тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;UL&gt; можно задать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность).<br>Добавить HTML-код, задающий вложенный список для элемента &lt;LI&gt; Прикладные программы.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание нумерованного списка''' + Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера &lt;UL&gt; &lt;/UL&gt;, а каждый элемент списка определяется также тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;UL&gt; можно задать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность).<br>Добавить HTML-код, задающий вложенный список для элемента &lt;LI&gt; Прикладные программы.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание нумерованного списка'''  
  
- - &lt;FONT COLOR="GREEN"&gt;<br>- &lt;H2 ALIGN="LEFT"&gt; <br>- &lt;OL&gt;<br>- &lt;LI&gt;Системные программы<br>- &lt;LI&gt;Прикладные программы<br>- &lt;LI&gt;Системы программирования<br>- &lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание вложенного списка''' + - &lt;FONT COLOR="GREEN"&gt;<br>- &lt;H2 ALIGN="LEFT"&gt; <br>- &lt;OL&gt;<br>- &lt;LI&gt;Системные программы<br>- &lt;LI&gt;Прикладные программы<br>- &lt;LI&gt;Системы программирования<br>- &lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание вложенного списка'''  
  
- &lt;UL&gt;<br>&lt;LI TYPE="DISC"&gt;<br>ТЕКСТОВЫЕ РЕДАКТОРЫ<br>&lt;LI&gt; ГРАФИЧЕСКИЕ РЕДАКТОРЫ<br>&lt;LI&gt; ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <br>&lt;LI&gt; СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.<br>&lt;/UL&gt;<br><br>карт<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Словарь компьютерных терминов:''' + &lt;UL&gt;<br>&lt;LI TYPE="DISC"&gt;<br>ТЕКСТОВЫЕ РЕДАКТОРЫ<br>&lt;LI&gt; ГРАФИЧЕСКИЕ РЕДАКТОРЫ<br>&lt;LI&gt; ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <br>&lt;LI&gt; СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.<br>&lt;/UL&gt;<br><br>[[Image:1602-36.jpg|538x336px]]<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Словарь компьютерных терминов:'''  
  
- Контейнер списка определений &lt;DL&gt;, &lt;/DL&gt;<br>Внутри него термин – тэг &lt;DT&gt;<br>определение - &lt;DD&gt;<br>&lt;DL&gt;<br>&lt;DT&gt;Процессор<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Центральный процессор, производящий вычисления в двоичном коде.<br>&lt;/H4&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;DT&gt;Оперативная память<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Устройство, в котором хранятся программы и данные<br>&lt;/H4&gt;<br>&lt;/DL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Таблицы''' + Контейнер списка определений &lt;DL&gt;, &lt;/DL&gt;<br>Внутри него термин – тэг &lt;DT&gt;<br>определение - &lt;DD&gt;<br>&lt;DL&gt;<br>&lt;DT&gt;Процессор<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Центральный процессор, производящий вычисления в двоичном коде.<br>&lt;/H4&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;DT&gt;Оперативная память<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Устройство, в котором хранятся программы и данные<br>&lt;/H4&gt;<br>&lt;/DL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Таблицы'''  
  
- 1. Таблица задается контейнером &lt;TABLE&gt;&lt;/TABLE&gt;, внутри которого содержится описание структуры таблицы и ее содержимого. + 1. Таблица задается контейнером &lt;TABLE&gt;&lt;/TABLE&gt;, внутри которого содержится описание структуры таблицы и ее содержимого.  
  
- 2. Любая таблица состоит из строк, которые задаются контейнером &lt;TR&gt;&lt;/TR&gt;, в который помещается описание ячейки. + 2. Любая таблица состоит из строк, которые задаются контейнером &lt;TR&gt;&lt;/TR&gt;, в который помещается описание ячейки.  
  
- 3. Формат ячейки и ее содержание помещается в контейнер &lt;TD&gt;&lt;/TD&gt;, а заголовки ячеек в контейнер &lt;TH&gt;&lt;/TH&gt;. + 3. Формат ячейки и ее содержание помещается в контейнер &lt;TD&gt;&lt;/TD&gt;, а заголовки ячеек в контейнер &lt;TH&gt;&lt;/TH&gt;.  
  
- 4. Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставить таблицу в файл hardware .html''' + 4. Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставить таблицу в файл hardware .html'''  
  
- &lt;TABLE border="2"&gt;<br>&lt;TR&gt;<br>&lt;TH&gt;&lt;FONT COLOR="BLUE"&gt;НАИМЕНОВАНИЕ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="CYAN"&gt;ТИП&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="LIME"&gt;ИЗГОТОВИТЕЛЬ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="MAGENTA"&gt;ЦЕНА&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;ПРОЦЕССОР&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;PENTIUM&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;INTEL&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2500 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;МАТЕРИНСКАЯ ПЛАТА&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;Abit&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;GIGABAIT&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2700 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt; <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Формы на Web- страницах''' + &lt;TABLE border="2"&gt;<br>&lt;TR&gt;<br>&lt;TH&gt;&lt;FONT COLOR="BLUE"&gt;НАИМЕНОВАНИЕ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="CYAN"&gt;ТИП&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="LIME"&gt;ИЗГОТОВИТЕЛЬ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="MAGENTA"&gt;ЦЕНА&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;ПРОЦЕССОР&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;PENTIUM&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;INTEL&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2500 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;МАТЕРИНСКАЯ ПЛАТА&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;Abit&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;GIGABAIT&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2700 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt; <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Формы на Web- страницах'''  
  
- Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер &lt;FORM&gt; &lt;/FORM&gt; + Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер &lt;FORM&gt; &lt;/FORM&gt;  
  
- 1. Текстовые поля задаются тэгом &lt;INPUT&gt; со значением атрибута type=“text”. + 1. Текстовые поля задаются тэгом &lt;INPUT&gt; со значением атрибута type=“text”.  
  
- 2. Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных.<br><br>3. Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки &lt;BR&gt;. + 2. Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных.<br><br>3. Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки &lt;BR&gt;.  
  
  + <br> 
  
  + '''Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:<br>'''<br>&lt;FORM&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H2 ALIGN="LEFT"&gt;<br>Пожалуйста, введите ваше имя: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="name" SIZE=30&gt; &lt;BR&gt;<br>E-mail: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="e-mail" <br>SIZE=30&gt; &lt;BR&gt;<br>&lt;/FORM&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Переключатели<br>'''<br>Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. 
  
- '''Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:<br>'''<br>&lt;FORM&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H2 ALIGN="LEFT"&gt;<br>Пожалуйста, введите ваше имя: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="name" SIZE=30&gt; &lt;BR&gt;<br>E-mail: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="e-mail" <br>SIZE=30&gt; &lt;BR&gt;<br>&lt;/FORM&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Переключатели<br>'''<br>Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. + Переключатели создается тэгом &lt;INPUT&gt; со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group” 
  
- Переключатели создается тэгом &lt;INPUT&gt; со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group” + Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"&nbsp;  
  
- Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"&nbsp; + Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере: 
  
- Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере: + Укажите, к какой группе пользователей вы себя относите: &lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="schoolboy"&gt;учащийся&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="student"&gt;студент&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="teacher"&gt;учитель&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Флажки'''&nbsp; 
  
- Укажите, к какой группе пользователей вы себя относите: &lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="schoolboy"&gt;учащийся&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="student"&gt;студент&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="teacher"&gt;учитель&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Флажки'''&nbsp; + Флажки задаются тэгом &lt;INPUT&gt; со значением атрибута type=“checkbox”<br>Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group”<br>Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“<br>Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере: 
  
- Флажки задаются тэгом &lt;INPUT&gt; со значением атрибута type=“checkbox”<br>Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group”<br>Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“<br>Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере: + '''Пример:&nbsp;''' 
  
- '''Пример:&nbsp;''' + Какие из сервисов Интернета вы используете наиболее часто:<br>&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="www"&gt;www&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="e-mail"&gt;e-mail&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="ftp"&gt;FTP&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Поля списков'''  
  
- Какие из сервисов Интернета вы используете наиболее часто:<br>&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="www"&gt;www&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="e-mail"&gt;e-mail&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="ftp"&gt;FTP&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Поля списков''' + Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер &lt;SELECT&gt; &lt;/SELECT&gt;, в котором каждый элемент списка определен тэгом &lt;OPTION&gt;. Выбираемый по умолчанию элемент задается атрибутом SELECTED. 
  
- Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер &lt;SELECT&gt; &lt;/SELECT&gt;, в котором каждый элемент списка определен тэгом &lt;OPTION&gt;. Выбираемый по умолчанию элемент задается атрибутом SELECTED. + Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере: 
  
- Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере: + &lt;SELECT NAME="browsers"&gt;<br>&lt;OPTION SELECTED&gt; Internet Explorer<br>&lt;OPTION&gt;<br>Netscape Navigator<br>&lt;OPTION&gt; Opera<br>&lt;OPTION&gt; Neo Planet<br>&lt;/SELECT&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текстовая область''' 
  
- &lt;SELECT NAME="browsers"&gt;<br>&lt;OPTION SELECTED&gt; Internet Explorer<br>&lt;OPTION&gt;<br>Netscape Navigator<br>&lt;OPTION&gt; Opera<br>&lt;OPTION&gt; Neo Planet<br>&lt;/SELECT&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текстовая область''' + Создается с помощью тэга &lt;TEXTAREA&gt; с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов.<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>Какую еще информацию вы хотели бы видеть на нашем сайте?<br>&lt;BR&gt;<br>&lt;TEXTAREA NAME="resume"<br>ROWS=4 COLS=30&gt;<br>&lt;/TEXTAREA<br>&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Отправка формы'''  
  
- Создается с помощью тэга &lt;TEXTAREA&gt; с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов.<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>Какую еще информацию вы хотели бы видеть на нашем сайте?<br>&lt;BR&gt;<br>&lt;TEXTAREA NAME="resume"<br>ROWS=4 COLS=30&gt;<br>&lt;/TEXTAREA<br>&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Отправка формы''' + Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».<br>Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>&lt;INPUT TYPE="SUBMIT"<br>value="Отправить"&gt;<br>&lt;INPUT TYPE="RESET"<br>value="Очистить"&gt;  
-   + 
- Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».<br>Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>&lt;INPUT TYPE="SUBMIT"<br>value="Отправить"&gt;<br>&lt;INPUT TYPE="RESET"<br>value="Очистить"&gt; + 
  
 Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера &lt;FORM&gt;.&nbsp;<br>&lt;FORM ACTION=http:/www.mycompany.ru /ogi-bin /bd.exe"<br>    Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера &lt;FORM&gt;.&nbsp;<br>&lt;FORM ACTION=http:/www.mycompany.ru /ogi-bin /bd.exe"<br>  
Текущая версия на 12:26, 16 февраля 2012
 
Гіпермаркет Знань>>Інформатика >>Інформатика 8 клас>> Інформатика: Етапи створення веб-сайтів 
Презентація до предмету Інформатика 8 клас. 
Тема «Создание Web-сайта». 

 
                                                                          Создание Web-сайта
                                                                          Структура Web-сайта

Тема урока:

                                                                               Контейнеры

- Код страницы <HTML></HTML>
- Заголовок <HEAD></HEAD>
- Название Web-страницы <TITLE></TITLE>
- Основное содержание страницы <BODY></BODY>

                                                             Назовем Web-страницу «Компьютер» 
<HEAD>
<TITLE> Компьютер</TITLE>
</HEAD>
 
                                                   Поместим на страницу текст «Все о компьютерах» 
<BODY>
Все о компьютерах
</BODY>

                                                                        Текст программы: 
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютерах
</BODY>
</HTML>

                                               Сохранять Web-страницы нужно с расширением .html 
Например, Мой сайт .html
Принято сохранять титульный файл сайта под именем 
Index.html 

                                                            Форматирование текста: 
Размер шрифта в заголовках задается тэгами от Н1 до Н6:
<H1>
Все о компьютерах
</H1>
Тип выравнивания заголовка задает атрибут ALIGN
<H1 ALIGN="CENTER”>Все о компьютерах
</H1>
Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)
Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг <HR>
Задать синий цвет заголовка:
<FONT COLOR=“BLUE">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT> 
<HR>

                                                                                Абзацы: 
Разделение текста на абзацы производится контейнером <P></P>. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: 
<P ALIGN="LEFT">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P> 
<P ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>

                                                           Программирование Web-сайта 
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
<FONT COLOR="GREEN">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT>
<HR>
<P ALIGN="LEFT">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
</H1>
</FONT>
<HR>
<P ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
</BODY>
</HTML>

                                                                          Вставка рисунка 
Форматы .GIF, .JPG, .PNG. 
Тэг <IMG> с атрибутом SRC, который указывает место хранения файла (путь к файлу).
Расположение рисунка относительно текста –атрибут ALIGN:  
1. TOP
2. MIDDLE
3. BOTTON
4. LEFT
5. RIGHT 
Вставить рисунок в контейнер перед абзацем текста. 
<BODY>
<IMG SRC=«Комп.gif" alt=«компьютер"
ALIGN="RIGHT">
Или
<BODY>
<IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер "
ALIGN="RIGHT">

                                                                        Создание других страниц сайта 
<HEAD>
<TITLE> Заголовок страницы </TITLE>
</HEAD>
 Создайте страницы Программы, Словарь, Комплектующие, Анкета.
Сохраните их в файлах с названиями: 
software.html 
glossary.html
hardware.html 
anketa.html 

                                                                               Гиперссылки 
Гиперссылки состоят из указателя ссылки и адресной части ссылки.
Адресная часть – URL – адрес документа.
Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце.
В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. 
Указатели гиперссылок разделяются пробелами (&nbsp) . Для каждой гиперссылки определим адрес перехода, (контейнер <A> </A>) с атрибутом HREF, значением которого является URL – адрес. 

<P ALIGN= "CENTER"
[<A HREF="software.html">Программы</A>] &nbsp 
[<A HREF="glossary.html">Словарь</A>] &nbsp 
[<A HREF="hardware.html">Комплектующие</A>] &nbsp 
[<A HREF="anketa.html">Анкета</A>]
</P>

                                                              Адрес электронной почты вставляется так: 
Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.
<ADRESS>
<A HREF="mailto :mailbox@provaider.ru">E-mail:
mailbox@provaider.ru</A>
</ADRESS>
По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес



                                                                  Создание списка нумерованного 
Список располагается внутри контейнера <OL> </OL>, а каждый элемент списка – тэгом <LI>. С помощью атрибута TYPE тэга <ОL> можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы).
Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:
 <OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>

                                                        Создание списка маркированного 
Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера <UL> </UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность).
Добавить HTML-код, задающий вложенный список для элемента <LI> Прикладные программы.

                                                            Создание нумерованного списка 
- <FONT COLOR="GREEN">
- <H2 ALIGN="LEFT"> 
- <OL>
- <LI>Системные программы
- <LI>Прикладные программы
- <LI>Системы программирования
- </OL>

                                                      Создание вложенного списка 
<UL>
<LI TYPE="DISC">
ТЕКСТОВЫЕ РЕДАКТОРЫ
<LI> ГРАФИЧЕСКИЕ РЕДАКТОРЫ
<LI> ЭЛЕКТРОННЫЕ ТАБЛИЦЫ 
<LI> СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.
</UL>



                                                    Словарь компьютерных терминов: 
Контейнер списка определений <DL>, </DL>
Внутри него термин – тэг <DT>
определение - <DD>
<DL>
<DT>Процессор
<FONT COLOR="BRAUN">
<H4>
<DD>Центральный процессор, производящий вычисления в двоичном коде.
</H4>
<FONT COLOR="GREEN">
<DT>Оперативная память
<FONT COLOR="BRAUN">
<H4>
<DD>Устройство, в котором хранятся программы и данные
</H4>
</DL>

                                                                        Таблицы 
1. Таблица задается контейнером <TABLE></TABLE>, внутри которого содержится описание структуры таблицы и ее содержимого. 
2. Любая таблица состоит из строк, которые задаются контейнером <TR></TR>, в который помещается описание ячейки. 
3. Формат ячейки и ее содержание помещается в контейнер <TD></TD>, а заголовки ячеек в контейнер <TH></TH>. 
4. Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.

                                                Вставить таблицу в файл hardware .html 
<TABLE border="2">
<TR>
<TH><FONT COLOR="BLUE">НАИМЕНОВАНИЕ</TH>
<TH><FONT COLOR="CYAN">ТИП</TH>
<TH><FONT COLOR="LIME">ИЗГОТОВИТЕЛЬ</TH>
<TH><FONT COLOR="MAGENTA">ЦЕНА</TH>
</TR>
<TR>
<TD ALIGN="CENTER">ПРОЦЕССОР</TD>
<TD ALIGN="CENTER">PENTIUM</TD>
<TD ALIGN="CENTER">INTEL</TD>
<TD ALIGN="CENTER">2500 РУБЛЕЙ</TD>
</TR>
<TR>
<TD ALIGN="CENTER">МАТЕРИНСКАЯ ПЛАТА</TD>
<TD ALIGN="CENTER">Abit</TD>
<TD ALIGN="CENTER">GIGABAIT</TD>
<TD ALIGN="CENTER">2700 РУБЛЕЙ</TD>
</TR>
</TABLE> 

                                                                 Формы на Web- страницах 
Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер <FORM> </FORM> 
1. Текстовые поля задаются тэгом <INPUT> со значением атрибута type=“text”. 
2. Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных.

3. Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки <BR>. 

 
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:

<FORM>
<FONT COLOR="GREEN">
<H2 ALIGN="LEFT">
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="текст"
NAME="name" SIZE=30> <BR>
E-mail: <BR>
<INPUT TYPE="текст"
NAME="e-mail" 
SIZE=30> <BR>
</FORM>

                                                                             Переключатели

Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. 
Переключатели создается тэгом <INPUT> со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group” 
Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"  
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере: 
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio"
NAME="group" value="schoolboy">учащийся<BR>
<INPUT TYPE="radio"
NAME="group" value="student">студент<BR>
<INPUT TYPE="radio"
NAME="group" value="teacher">учитель<BR>

                                                                           Флажки  
Флажки задаются тэгом <INPUT> со значением атрибута type=“checkbox”
Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group”
Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“
Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере: 
Пример:  
Какие из сервисов Интернета вы используете наиболее часто:
<BR>
<INPUT TYPE="checkbox"
NAME="group" value="www">www<BR>
<INPUT TYPE="checkbox"
NAME="group" value="e-mail">e-mail<BR>
<INPUT TYPE="checkbox"
NAME="group" value="ftp">FTP<BR>

                                                                          Поля списков 
Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер <SELECT> </SELECT>, в котором каждый элемент списка определен тэгом <OPTION>. Выбираемый по умолчанию элемент задается атрибутом SELECTED. 
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере: 
<SELECT NAME="browsers">
<OPTION SELECTED> Internet Explorer
<OPTION>
Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT>

                                                                          Текстовая область 
Создается с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов.
добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: 
Какую еще информацию вы хотели бы видеть на нашем сайте?
<BR>
<TEXTAREA NAME="resume"
ROWS=4 COLS=30>
</TEXTAREA
<BR>

                                                                      Отправка формы 
Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».
Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».
добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: 
<INPUT TYPE="SUBMIT"
value="Отправить">
<INPUT TYPE="RESET"
value="Очистить"> 
Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера <FORM>. 
<FORM ACTION=http:/www.mycompany.ru /ogi-bin /bd.exe"
 

Перейти до презентації можна клікнувши на текст "Презентація" і встановивши Microsoft PowerPoint 
 
 
Виконав: вчитель інформатики СЗШ № 166 Солом’янського району м. Києва Мещерінов Володимир Володимирович

Источник — «http://edufuture.biz/index.php?title=%D0%9F%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BD%D0%B0_%D1%82%D0%B5%D0%BC%D1%83:_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_Web-%D1%81%D0%B0%D0%B9%D1%82%D0%B0»
Предмети > Інформатика > Інформатика 8 клас > Етапи створення веб-сайтів > Етапи створення веб-сайтів. Презентація уроку
@@ Строка 9: / Строка 9: @@
 <br>
 '''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание Web-сайта<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Структура Web-сайта<br>'''<br><u>Тема урока:<br></u><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Контейнеры<br>'''<br>- Код страницы &lt;HTML&gt;&lt;/HTML&gt;<br>- Заголовок &lt;HEAD&gt;&lt;/HEAD&gt;<br>- Название Web-страницы &lt;TITLE&gt;&lt;/TITLE&gt;<br>- Основное содержание страницы &lt;BODY&gt;&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Назовем Web-страницу «Компьютер»'''
 &lt;HEAD&gt;<br>&lt;TITLE&gt; Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> <br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Поместим на страницу текст «Все о компьютерах»'''
 &lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текст программы:'''
 &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>Все о компьютерах<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Сохранять Web-страницы нужно с расширением .html'''
 Например, Мой сайт .html<br>Принято сохранять титульный файл сайта под именем <br>Index.html <br>'''<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Форматирование текста:'''
 Размер шрифта в заголовках задается тэгами от Н1 до Н6:<br>&lt;H1&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>Тип выравнивания заголовка задает атрибут ALIGN<br>&lt;H1 ALIGN="CENTER”&gt;Все о компьютерах<br>&lt;/H1&gt;<br>Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)<br>Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг &lt;HR&gt;<br>Задать синий цвет заголовка:<br>&lt;FONT COLOR=“BLUE"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt; <br>&lt;HR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Абзацы:'''
 Разделение текста на абзацы производится контейнером &lt;P&gt;&lt;/P&gt;. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
 &lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt;
 &lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Программирование Web-сайта'''
 &lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Компьютер&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H1 ALIGN="CENTER”&gt;<br>Все о компьютерах<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="LEFT"&gt;На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.&lt;/P&gt;<br>&lt;/H1&gt;<br>&lt;/FONT&gt;<br>&lt;HR&gt;<br>&lt;P ALIGN="RIGHT"&gt;Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставка рисунка'''
 Форматы .GIF, .JPG, .PNG.&nbsp;<br>Тэг &lt;IMG&gt; с атрибутом SRC, который указывает место хранения файла (путь к файлу).<br>Расположение рисунка относительно текста –атрибут ALIGN:&nbsp;
 . TOP<br>2. MIDDLE<br>3. BOTTON<br>4. LEFT<br>5. RIGHT
 Вставить рисунок в контейнер перед абзацем текста.
 &lt;BODY&gt;<br>&lt;IMG SRC=«Комп.gif" alt=«компьютер"<br>ALIGN="RIGHT"&gt;<br>Или<br>&lt;BODY&gt;<br>&lt;IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер "<br>ALIGN="RIGHT"&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание других страниц сайта'''
 &lt;HEAD&gt;<br>&lt;TITLE&gt; Заголовок страницы &lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br> Создайте страницы Программы, Словарь, Комплектующие, Анкета.<br>Сохраните их в файлах с названиями: <br>software.html <br>glossary.html<br>hardware.html <br>anketa.html <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Гиперссылки'''
 Гиперссылки состоят из указателя ссылки и адресной части ссылки.<br>Адресная часть – URL – адрес документа.<br>Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце.<br>В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. <br>Указатели гиперссылок разделяются пробелами (&amp;nbsp) . Для каждой гиперссылки определим адрес перехода, (контейнер &lt;A&gt; &lt;/A&gt;) с атрибутом HREF, значением которого является URL – адрес. <br><br>&lt;P ALIGN= "CENTER"<br>[&lt;A HREF="software.html"&gt;Программы&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="glossary.html"&gt;Словарь&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="hardware.html"&gt;Комплектующие&lt;/A&gt;] &amp;nbsp <br>[&lt;A HREF="anketa.html"&gt;Анкета&lt;/A&gt;]<br>&lt;/P&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Адрес электронной почты вставляется так:'''
-Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.<br>&lt;ADRESS&gt;<br>&lt;A HREF="mailto&nbsp;:mailbox@provaider.ru"&gt;E-mail:<br>mailbox@provaider.ru&lt;/A&gt;<br>&lt;/ADRESS&gt;<br>По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес<br><br>карт<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка нумерованного'''
+Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.<br>&lt;ADRESS&gt;<br>&lt;A HREF="mailto&nbsp;:mailbox@provaider.ru"&gt;E-mail:<br>mailbox@provaider.ru&lt;/A&gt;<br>&lt;/ADRESS&gt;<br>По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес<br><br>[[Image:1602-35.jpg|639x398px]]<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка нумерованного'''
 Список располагается внутри контейнера &lt;OL&gt; &lt;/OL&gt;, а каждый элемент списка – тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;ОL&gt; можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы).<br>Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:<br> &lt;OL&gt;<br>&lt;LI&gt;Системные программы<br>&lt;LI&gt;Прикладные программы<br>&lt;LI&gt;Системы программирования<br>&lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание списка маркированного'''
 Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера &lt;UL&gt; &lt;/UL&gt;, а каждый элемент списка определяется также тэгом &lt;LI&gt;. С помощью атрибута TYPE тэга &lt;UL&gt; можно задать вид маркера списка: “disc” (диск), “Square” (квадрат), “circle” (окружность).<br>Добавить HTML-код, задающий вложенный список для элемента &lt;LI&gt; Прикладные программы.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание нумерованного списка'''
 - &lt;FONT COLOR="GREEN"&gt;<br>- &lt;H2 ALIGN="LEFT"&gt; <br>- &lt;OL&gt;<br>- &lt;LI&gt;Системные программы<br>- &lt;LI&gt;Прикладные программы<br>- &lt;LI&gt;Системы программирования<br>- &lt;/OL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Создание вложенного списка'''
-&lt;UL&gt;<br>&lt;LI TYPE="DISC"&gt;<br>ТЕКСТОВЫЕ РЕДАКТОРЫ<br>&lt;LI&gt; ГРАФИЧЕСКИЕ РЕДАКТОРЫ<br>&lt;LI&gt; ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <br>&lt;LI&gt; СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.<br>&lt;/UL&gt;<br><br>карт<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Словарь компьютерных терминов:'''
+&lt;UL&gt;<br>&lt;LI TYPE="DISC"&gt;<br>ТЕКСТОВЫЕ РЕДАКТОРЫ<br>&lt;LI&gt; ГРАФИЧЕСКИЕ РЕДАКТОРЫ<br>&lt;LI&gt; ЭЛЕКТРОННЫЕ ТАБЛИЦЫ <br>&lt;LI&gt; СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.<br>&lt;/UL&gt;<br><br>[[Image:1602-36.jpg|538x336px]]<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Словарь компьютерных терминов:'''
 Контейнер списка определений &lt;DL&gt;, &lt;/DL&gt;<br>Внутри него термин – тэг &lt;DT&gt;<br>определение - &lt;DD&gt;<br>&lt;DL&gt;<br>&lt;DT&gt;Процессор<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Центральный процессор, производящий вычисления в двоичном коде.<br>&lt;/H4&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;DT&gt;Оперативная память<br>&lt;FONT COLOR="BRAUN"&gt;<br>&lt;H4&gt;<br>&lt;DD&gt;Устройство, в котором хранятся программы и данные<br>&lt;/H4&gt;<br>&lt;/DL&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Таблицы'''
 . Таблица задается контейнером &lt;TABLE&gt;&lt;/TABLE&gt;, внутри которого содержится описание структуры таблицы и ее содержимого.
 . Любая таблица состоит из строк, которые задаются контейнером &lt;TR&gt;&lt;/TR&gt;, в который помещается описание ячейки.
 . Формат ячейки и ее содержание помещается в контейнер &lt;TD&gt;&lt;/TD&gt;, а заголовки ячеек в контейнер &lt;TH&gt;&lt;/TH&gt;.
 . Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Вставить таблицу в файл hardware .html'''
 &lt;TABLE border="2"&gt;<br>&lt;TR&gt;<br>&lt;TH&gt;&lt;FONT COLOR="BLUE"&gt;НАИМЕНОВАНИЕ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="CYAN"&gt;ТИП&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="LIME"&gt;ИЗГОТОВИТЕЛЬ&lt;/TH&gt;<br>&lt;TH&gt;&lt;FONT COLOR="MAGENTA"&gt;ЦЕНА&lt;/TH&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;ПРОЦЕССОР&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;PENTIUM&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;INTEL&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2500 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;TR&gt;<br>&lt;TD ALIGN="CENTER"&gt;МАТЕРИНСКАЯ ПЛАТА&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;Abit&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;GIGABAIT&lt;/TD&gt;<br>&lt;TD ALIGN="CENTER"&gt;2700 РУБЛЕЙ&lt;/TD&gt;<br>&lt;/TR&gt;<br>&lt;/TABLE&gt; <br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Формы на Web- страницах'''
 Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер &lt;FORM&gt; &lt;/FORM&gt;
 . Текстовые поля задаются тэгом &lt;INPUT&gt; со значением атрибута type=“text”.
 . Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных.<br><br>3. Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки &lt;BR&gt;.
+<br>
+'''Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:<br>'''<br>&lt;FORM&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H2 ALIGN="LEFT"&gt;<br>Пожалуйста, введите ваше имя: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="name" SIZE=30&gt; &lt;BR&gt;<br>E-mail: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="e-mail" <br>SIZE=30&gt; &lt;BR&gt;<br>&lt;/FORM&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Переключатели<br>'''<br>Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель.
-'''Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:<br>'''<br>&lt;FORM&gt;<br>&lt;FONT COLOR="GREEN"&gt;<br>&lt;H2 ALIGN="LEFT"&gt;<br>Пожалуйста, введите ваше имя: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="name" SIZE=30&gt; &lt;BR&gt;<br>E-mail: &lt;BR&gt;<br>&lt;INPUT TYPE="текст"<br>NAME="e-mail" <br>SIZE=30&gt; &lt;BR&gt;<br>&lt;/FORM&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Переключатели<br>'''<br>Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель.
+Переключатели создается тэгом &lt;INPUT&gt; со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group”
-Переключатели создается тэгом &lt;INPUT&gt; со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group”
+Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"&nbsp;
-Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"&nbsp;
+Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере:
-Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере:
+Укажите, к какой группе пользователей вы себя относите: &lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="schoolboy"&gt;учащийся&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="student"&gt;студент&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="teacher"&gt;учитель&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Флажки'''&nbsp;
-Укажите, к какой группе пользователей вы себя относите: &lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="schoolboy"&gt;учащийся&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="student"&gt;студент&lt;BR&gt;<br>&lt;INPUT TYPE="radio"<br>NAME="group" value="teacher"&gt;учитель&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Флажки'''&nbsp;
+Флажки задаются тэгом &lt;INPUT&gt; со значением атрибута type=“checkbox”<br>Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group”<br>Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“<br>Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере:
-Флажки задаются тэгом &lt;INPUT&gt; со значением атрибута type=“checkbox”<br>Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=“Group”<br>Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения “www“, “e-mail“, “ftp“<br>Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере:
+'''Пример:&nbsp;'''
-'''Пример:&nbsp;'''
+Какие из сервисов Интернета вы используете наиболее часто:<br>&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="www"&gt;www&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="e-mail"&gt;e-mail&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="ftp"&gt;FTP&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Поля списков'''
-Какие из сервисов Интернета вы используете наиболее часто:<br>&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="www"&gt;www&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="e-mail"&gt;e-mail&lt;BR&gt;<br>&lt;INPUT TYPE="checkbox"<br>NAME="group" value="ftp"&gt;FTP&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Поля списков'''
+Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер &lt;SELECT&gt; &lt;/SELECT&gt;, в котором каждый элемент списка определен тэгом &lt;OPTION&gt;. Выбираемый по умолчанию элемент задается атрибутом SELECTED.
-Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер &lt;SELECT&gt; &lt;/SELECT&gt;, в котором каждый элемент списка определен тэгом &lt;OPTION&gt;. Выбираемый по умолчанию элемент задается атрибутом SELECTED.
+Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере:
-Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере:
+&lt;SELECT NAME="browsers"&gt;<br>&lt;OPTION SELECTED&gt; Internet Explorer<br>&lt;OPTION&gt;<br>Netscape Navigator<br>&lt;OPTION&gt; Opera<br>&lt;OPTION&gt; Neo Planet<br>&lt;/SELECT&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текстовая область'''
-&lt;SELECT NAME="browsers"&gt;<br>&lt;OPTION SELECTED&gt; Internet Explorer<br>&lt;OPTION&gt;<br>Netscape Navigator<br>&lt;OPTION&gt; Opera<br>&lt;OPTION&gt; Neo Planet<br>&lt;/SELECT&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Текстовая область'''
+Создается с помощью тэга &lt;TEXTAREA&gt; с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов.<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>Какую еще информацию вы хотели бы видеть на нашем сайте?<br>&lt;BR&gt;<br>&lt;TEXTAREA NAME="resume"<br>ROWS=4 COLS=30&gt;<br>&lt;/TEXTAREA<br>&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Отправка формы'''
-Создается с помощью тэга &lt;TEXTAREA&gt; с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк , COLS – число столбцов.<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>Какую еще информацию вы хотели бы видеть на нашем сайте?<br>&lt;BR&gt;<br>&lt;TEXTAREA NAME="resume"<br>ROWS=4 COLS=30&gt;<br>&lt;/TEXTAREA<br>&lt;BR&gt;<br><br>'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Отправка формы'''
+Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».<br>Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>&lt;INPUT TYPE="SUBMIT"<br>value="Отправить"&gt;<br>&lt;INPUT TYPE="RESET"<br>value="Очистить"&gt;
-Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».<br>Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».<br>добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере: <br>&lt;INPUT TYPE="SUBMIT"<br>value="Отправить"&gt;<br>&lt;INPUT TYPE="RESET"<br>value="Очистить"&gt;
 Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера &lt;FORM&gt;.&nbsp;<br>&lt;FORM ACTION=http:/www.mycompany.ru /ogi-bin /bd.exe"<br>

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: