5. Вставка рисунка.

   1. Скопируем файл рисунка в папку WEB, возьмем файл с расширением .GIF или .BMP

   2. Вставим изображение в документ и отображение рамки вокруг рисунка, толщиной в 5 пиксел после заголовка:

<img src=cc.gif border=5>

1. Выровнять рисунок по центру <center></center>.

1. Создание списка.

   1. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список. В окне программы Блокнот (Notepad) выберите команду меню Файл Создать (File  New)

   2. Создайте структуру Web-документа, напечатав основные теги: пункт 3.1

   3. В качестве заголовка документа в теге <tltle> </title> введите: Чем мы занимаемся?

   4. Такой же заголовок для списка введите в теле документа между тегами <body> и </body>, использовав для его отображения теги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

<h2 aling =center> Чем мы занимаемся? </h2>

5. Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся теге <body>, например, так:

<body bgcolor=aqua text=navy>

Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.

6. Теперь вставим на страницу ненумерованный список с информацией о жизни и деятельности вашей группы. Ненумерованные списки создаются с помощью пары тегов <ul> </ul> - (Unordered List –неупорядоченный список), которые ограничивают список. Между ними располагается столько элементов,начинающихся с тега <LI> - (List Item – элемент списка), сколько элементов в списке.

<OL></OL>–нумерованный список – (Ordered List упорядоченный)

<DL></DL> - список определений (Difinition List)

Заголовок списка необязательный элемент, формируется с помощью парного тега: <LH></LH>

7. Вставьте пустую строку под строкой с кодом

<h2 align»center> Чем мы занимаемся? </h2> и введите в теле документа следующий код:

<ul>

<li> Изучением предметов на занятиях.

< li > Самостоятельное изучение предметов в библиотеке.

< li > Работа в Интернете.

< li > Практика по специальности.

< li > Дружба.

< li > Клуб досуга.

</ul>

Обратите внимание: тег < li > может использоваться как одиночный, т.е. без парного закрывающего тега </ li >.

1. Другой вид маркера можно установить с помощью листов стилей, например <LI type=square>–маркер в виде заполненного квадратика, <LI type=circle>- незаполненного кружка. Поэксперементируйте с этим.

2. Сохраните документ в папке Web под именем spisok.html.

3. Откройте файл spisok.html из папки Web

1. Создание формы:

Рассказав на Web-странице о сфере своей жизни вы предполагаете, что посетители сайта захотят связаться с вами, задать вопросы, обсудить общие проблемы, сделать какие либо предложения. Чтобы ускорить и облегчить им процедуру связи, достаточно поместить на данной странице специальную форму; заполнив ее, посетитель сайта передаст вам информацию, которую он посчитает нужным послать.

Подобные формы широко используются на Интернет-сайтах для сбора различных сведений, регистрации пользователя, формирования запроса и т.д. Такая форма может содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и переключатели для выбора значений и другие элементы управления. После заполнения формы пользователем специальная программа-обработчик или, как ее еще называют, скрипт, обрабатывает полученные-данные и передает их по назначению. Как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его вам по электронной почте?. Для этого вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тегов <р> </р> и выровнять по центру с помощью атрибута align=center.

1. Вставьте пустую строку между закрывающим тегом </u1> и закрывающим тегом </body> и введите в этой строке следующий код:

2. <р align=center >Если у Вас есть вопросы или предложения, напишите нам: </р>

3. Каждая форма начинается тегом <form> и заканчивается тегом </form> HTML - документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений. Открывающий тег <form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action-"mailto: km@narod.ru".

Еще один атрибут тега <form> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post: method=post. Таким образом, элемент <form>.. .</form> будет иметь примерно такой вид:

<form action="mailto: km@narod.ru" method=post>

</form>

4. Добавьте в документе spisok.html пустую строку перед закрывающим тегом </body> и введите указанный код,

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги <textarea></textarea>. В качестве атрибутов открывающего тега <textarea> необходимо указать количество строк (rows) и колонок (cols) а также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику.

5. Вставьте пустую строку перед закрывающим тегом </form> и введите следующий элемент, создающий текстовое поле:

<center><textarea rows=5 cols=40 name=comments></textarea> </center>

Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем comments (Комментарии)

6. Вставьте пустую строку перед закрывающим тегом </form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:

<p> <center> <input type=submit value= "Отправить"></center></p>

7. Работу формы можно проверить:

   1. Введите в текстовом поле несколько слов.

   2. -Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с предупреждением о том, что форма передаст ваш адрес E-mail получателю, а данные, содержащиеся в форме, будут переданы без шифрования и, если они конфиденциальны - это может быть нежелательно для вас

   3. - Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждением закроется.

Если бы соединение с Интернетом было установлено, то данные из формы были бы отправлены и через некоторое время вы получили бы их по электронной почте. Но так как соединение не установлено, то, в зависимости от настроек вашей почтовой программы или появится сообщение о невозможности отправить почту, или данные из формы будут помещены в папку исходящих сообщений почтовой программы