Процесс разработки. 
Инновации в Web-программировании

На основе функциональной модели был разработан web-сайт при помощи HTML5.

Навигация сайта сделана при помощи специального тега. В свою очередь тег размещается внутри тега, который служит для того, что бы выделить «шапку» сайта. Код выглядит следующим образом:

Главная |.

Вводная статья по HTML |.

Видео уроки по HTML |.

Работа тегов видео и аудио |.

Обратная связь.

Атрибут href тега служит для указания страницы, на которую мы хотим перейти. Так как все страницы, на которые мы ссылаемся, находятся в одном файле с главной страницей, мы просто указываем имя и формат файла. Для размещения текста на странице использовался тег, этот тег давно присутствует в HTML, и служит для создания таблиц. Он позволяет располагать текст на странице так, как этого хочет программист, не прибегая к CSS.

На странице «Вводная статья по HTML» так же вверху находится навигация сайта. По середине страницы размещен текст статьи, слева от текста находится содержание статьи. При выборе одного из пунктов содержания, текст изменяется, при этом без перезагрузки основной страницы. Это сделано при помощи тега, так называемого «плавающего» фрейма.

Код данного фрейма выглядит следующим образом:

Ваш браузер не поддерживает фреймы В атрибуте src указывается путь к файлу, который будет загружаться во фрейме. Атрибут align определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Атрибут name — это имя фрейма, которое необходимо, если планируется изменять загружаемую страницу во фрейме. Атрибут frameborder показывает, какой толщины будут границы фрейма, в данном случае границы отсутствуют.

Код навигации по статье выглядит следующим образом:

История создания языка HTML.

Версии языка HTML.

Разработка HTML5.

Нововведения в HTML5.

Атрибут target показывает, где будет загружаться выбранная страница, в данном случае она загружается во фрейме.

На странице «Видео уроки по HTML» находится видео материал по HTML. Технология размещения материала аналогична технологии, используемой на странице «Вводная статья по HTML».

На странице «Видео и аудио» подробно рассказывается о работе новых тегов и отображен результат их работы. Код вставки видео выглядит следующим образом:

Атрибут controls добавляет панель управления к видеоролику, при желании можно создавать свои элементы управления. Атрибут autobuffered показывает, что видео сразу начнет загружаться при переходе на страницу. Т.к. на данный момент разные браузеры поддерживают разные форматы видео, необходимо конвертировать видеоролик в несколько форматов и указать путь к ним. Это делается при помощи вложенного тега. Атрибут src указывает путь к файлу. Атрибут type указывает MIME-тип медийного источника.

Аудио вставляется по такому же принципу, как и видео. Код выглядит следующим образом:

На странице «Обратная связь» находится форма обратной связи. Форма включает в себя 4 элемента, которые расположены внутри таблицы для более эстетичного вида. Код формы выглядит следующим образом:

Тег устанавливает форму на веб-странице. Атрибут action указывает адрес программы или документа, который обрабатывает данные формы. Атрибут method сообщает серверу о методе запроса.

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

Файл mail. php, в котором происходит обработка данных, полученных из формы, содержит следующий код:

$file = fopen («file.txt» ," a+"); .

$text="Вам пришло письмо от пользователя $name «;

$text.="Текст сообщения: $mess Ответить можно на адрес электронной почты $email «;

flock ($file, LOCK_EX);

fwrite ($file, $text);

flock ($file, LOCK_UN);

fclose ($file);

echo «Сообщение отправленно. «;

echo «Вернуться на главную» ;

?>

Работа тега происходит по следующему алгоритму:

Команда fopen открывает файл file. txt для записи. Если файл отсутствует, то он будет создан в папке, в которой находится файл mail.php. Запись новых данных происходит в конец файла. Если в файле уже были данные, то происходит «дозапись» файла.

Переменной $text присваиваются значения полученные из формы в виде текста.

Команда flock блокирует доступ к файлу для того, что бы записать в его новые данные.

Команда fwrite записывает новые данные, сохранённые в переменной $text.

Команда flock открывает доступ к файлу.

Команда fclose закрывает файл.

На экране появляется сообщение о том, что данные были отправлены, и ссылка для перехода на главную страницу.

На этом процесс разработки сайта завершен. Сайт отвечает поставленным требованиям и может быть изменён и дополнен для использования.