Файл: 1. Основные понятия создание webсайта 5 1 Сеть Internet 5.docx

Скачать файл (0,20Мб)

Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 03.12.2023

Просмотров: 23

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

_{Содержание}

1.Основные понятия – создание web-сайта 5

1.1 Сеть Internet 5

1.2 Структура HTML – документа 7

1.3 Представление графики на Web-страницах 13

2. Создание Web-страниц 14

2.1 Выбор редактора 14

2.2 Начало работы 16

2.3 Работа с кодом 16

3. Охрана труда и техника безопасности 20

Заключение 22

Список используемой литературы 23

Приложение А 25

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

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

Тенденции в веб-дизайне и разработке в 2023 году отдают приоритет скорости и мобильному дизайну, привлекательным и упрощенным проектам и многому другому. Красивый веб-сайт привлекателен, но, если дизайн тяжелый и требует много времени для полной загрузки, теряется много потенциальных клиентов, поскольку никто не любит ждать долго.

Актуальность данного вопроса обусловила выбор темы письменной экзаменационной работы: “Создание WEB-страниц с использованием HTML 5”.

Целью моей работы является: ознакомиться с языком структурирования HTML5.

Для достижения цели необходимо решить следующие задачи:

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

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

Объект исследования – процесс создания Web-страниц на чистом HTML, или с использованием дополнительных языков с использованием специальных редакторов.

Предмет исследования – создание и редактирование Web-страниц на языке структурирования HTML.

Базой практики выступил: магазин “Технопорт” ИП Пермяков.

Во время прохождения практики одной из спектра моих задач была разработка одностраничного сайта для организации, а так как иногда я практиковался в создании Web-страниц для себя, я смог создать небольшой, но тем не менее неплохой одностраничный сайт. Данная сфера деятельности на сегодняшний день достаточно востребована, поэтому я решил выбрать её в качестве темы своей дипломной работы.

Письменная экзаменационная работа включает в себя введение, три главы, заключение, список литературы, состоящий из 20 источников и приложения.

В начале работы разберём теоретическую часть, рассмотрим основные понятия и базовые элементы структуры Web-страниц, написанных на языке HTML. Затем, в практической части, рассмотрим этапы создания небольшого Web-сайта.

Основные понятия – создание web-сайта

1.1 Сеть Internet

Задача данного параграфа – рассмотрение базовых понятий и основ создания Web-страниц.

Internet - это самая большая мировая компьютерная сеть. Сегодня internet используют почти 60% населения планеты, или около 4,6 миллиардов человек. WWW доступен в основном через Internet; но говоря WWW и Internet мы подразумеваем не одно и то же. WWW можно отнести к внутреннему содержанию, то есть это какой-либо абстрактный мир знаний, в то время как Internet является внешней стороной глобальной сети в виде огромного количества кабелей и компьютеров /1, с. 1/.

Что же такое World Wide Web, или WWW, The Web, 3W? WWW – это распределенная информационная система мультимедиа, основанная на гипертексте /7, с. 4/.

В данной системе информация сохраняется на огромном множестве так называемых WWW-серверов, или компьютеров, объединенных в сеть Internet и с установленным специальным программным обеспечением. Пользователи, имеющие доступ к сети, получают информацию с помощью программ-клиентов, программ просмотра WWW-документов. Простым языком объясню принцип работы: программа просмотра посылает по компьютерной сети запрос серверу, который при получении запроса сохраняет необходимые файлы и документы, и в ответ на запрос отправляет программы необходимые данные, либо если они по тем или иным причинам не доступны, отправляет сообщение об отказе /4, с. 7/.

Взаимодействие клиент-сервер происходит по определенным правилам, или протоколам. Протокол, принятый в WWW, называет Hyper Text Transfer Protocol, сокращенно HTTP. Мультимедиа – информация, включающая не только текст, но и двух- и трехмерную графику, видео и звук. Гипертекст – информация в WWW представляется в виде документов, любой из которых может

содержать как внутренние перекрестные ссылки, так и ссылку на другие документы, хранимые на том же, или любом другом сервере /3, с. 9/.

Такие ссылки называют гиперссылками или гиперсвязями. На экране в окне программы ссылка выглядит как выделенный каким-нибудь образом участок текста или графики, зачастую это изменение цвета и/или подчеркивание. Нажимая на гиперссылку, пользователь может быстро перемещаться от одно части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером и запрашивает необходимый документ, на который сделана ссылка /8, с. 13/.

Web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами сети Internet. Чтобы реализовать все эти возможности, был разработан специальный язык, называемый Hyper Text Markup Language (HTML), или язык разметки гипертекста. Написанный на HTML документ представляет собой текстовый файл, который содержит текст, несущий информацию читателю, и флаги разметки. Флаги разметки, представляющие собой последовательность символов, являющимися инструкциями для программы просмотра, в соответствии с которыми программа располагает информацию на экране, формирует гиперсвязи с другими документами и ресурсами сети Internet.

Файл, написанный на языке HTML, приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. О языке HTML более подробно расскажу в следующем разделе, ведь без знания основ данного языка невозможно создать Web-страницу для публикации в WWW /5, с. 11/.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но его конструкции, скорее всего, будут использоваться и в будущем. Работа с HTML – это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это необходимо /9, с. 5/.

HTML поддерживается практически всеми распространенными браузерами.

Таким образом, по данному параграфу можно сделать следующие выводы: для правильной работы HTML необходимо правильное функционирование системы WWW и протокола HTTP. Так же выяснили, что HTML открывает широкий спектр возможностей в сфере представления информации пользователю благодаря возможности не только использовать текст в проекте, но и форматировать его, а так же добавлять картинки, фотографии и видеоролики на страницу.

1.2 Структура HTML – документа

Задача данного параграфа – рассмотрение структуры HTML и её составляющих.

Практически все теги, используемые в HTML парные. Сами теги заключаются в угловые скобки. Парные теги включают в себя открывающий и закрывающие теги. Закрывающий тег отличается от открывающего наличием символа “/” /11, с. 17/.

Все объекты, не заключенные в угловые в угловые скобки, воспринимаются как текст. Теги при необходимости можно вкладывать друг в друга.

Язык HTML не зависим от регистра, однако для улучшения читаемости кода рекомендуется использовать заглавный регистр. Это не относится к URL-адресам и escape-последовательностям /14, с. 15/.

Наличие и количество пробелов между тегом и текстом или тегом и тегом не имеет значения.

Тег — это команда HTML, которая указывает интерпретатору браузера, как необходимо обработать заданное конкретным директивам значение. Само значение называется атрибутом тега, и в нем их может быть несколько или же не быть вовсе. Значения атрибутов в большинстве случаев заключаются в кавычки /18, с. 17/.

HTML позволяет опускать кавычки в некоторых атрибутах:

Атрибуты, в записи которых используются только строчные или заглавные символы латинского алфавита и не включающие других символов;
Атрибуты, состоящие только из цифр 0 – 9;
Атрибуты, обозначающие промежутки времени;

В HTML так же существуют комментарии, которые отображаются только в редакторах.

Иногда в тексте встречаются символы, используемые для обозначения элементов кода HTML. Это угловые скобки, кавычки другие символы. Нам необходимо чтобы они отображались в виде текста, однако интерпретатор воспринимает их как часть команд гипертекста. Именно в таких ситуациях помогают escape-последовательности. Начинаются они с символа “&” и заканчиваются “;” а уже между ними необходимо разместить в строчном регистре саму команду /17, c. 21/.

Существует два вида записи escape-последовательности. Это именной и числовой примитивы.

В HTML используются так называемые теги стандартного абзаца, к которым можно применить атрибуты, указанные в таблице №1.
Таблица №1 – Атрибуты тегов стандартного абзаца

Атрибут	Действие
Right	Выравнивание текста по правому краю
Left	Выравнивание текста по левому краю
Center	Выравнивание текста по центру
Justify	Выравнивание текста по ширине

Если же никакой атрибут не задан, по умолчанию используется левое выравнивание /9, c. 23/.

Так же в HTML часто приходится делить и переносить элементы текста, для этого используется разрыв строк.

Чтобы внутри текстового блока браузер отобразил перевод строки в конце необходимо разместить один или несколько тегов
. Таким образом, текст, расположенный после данного тега, будет перенесён на следующую строку. Иногда данный тег содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Они позволяют переносить текст со смещением новой строки к соответствующим границам экрана /16, c 25/.

Некоторые браузеры переносят строки самостоятельно, причем разрывают строку там, где она выходит за границы экрана. Если же необходима строка фиксированной длинны без переносов, используется тег /5, c. 10/.

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

Атрибут size указывает размер шрифта. Часто используются пункты как значение размера (12 pt). Однако можно использовать и целые числа от 1 до 7. Каждый шрифт в данной шкале больше или меньше на 20% от основного размера шрифта.

Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой /7, c. 24/.

Существуют теги, применяющие на текст различные стили. Каждый из данных тегов можно вкладывать друг в друга. Список тегов указан в таблице №2.

Таблица №2 – Теги стилей

Тег	Стиль
	Полужирный шрифт
	Курсивный шрифт
	Подчеркивание текста
	Моноширинный текст
	Уменьшение размера текста
	Увеличение размера текста
	Зачеркнутый текст
	Нижний индекс
	Верхний индекс

Фразеологический элемент не указывает точного способа отображения текста, а лишь определяет содержимое элемента, несет определенную смысловую нагрузку и выделяет текст на фоне обычного /2, c. 28/.

Разделы используют для задания параметров элементам и их расположения. К разделу можно применять любые атрибуты стиля. Однако при использовании тега

браузер производит перенос раздела на новую строку, чего не происходит при использовании тега .

Заголовки позволяют разделить web-страницу на логические законченные блоки и помогают ориентироваться в коде /6, c. 26/.

HTML позволяет программисту использовать 6 различных уровней заголовков.

Чтобы добавить заголовок на страницу достаточно использовать тег где n – целое число от 1 до 6. Самым верхним уровнем считается 1.

Атрибут align позволяет определить расположение заголовка в окне браузера и имеет 3 значения: right, left, center.

Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Для создания линий используется непарный тег

. Данный элемент имеет длину, толщину и цвет.

Атрибут align задает выравнивание линии и может принимать значения center, left, right. По умолчанию выравниваются по середине.

Атрибут width задает длину линии в пикселях или процентах, если с пикселями все понятно, то в процентах длина будет равна проценту от ширины окна. Цвет линии определяется атрибутом color /19, c. 31/.

В HTML также есть возможность создания таблиц. Для этого используют тег . Ячейки таблицы создаются путём использования элементов, указанных в таблице №3.

Таблица №3 – Элементы таблицы HTML

Элемент	Функция
TR	Создает строку
TD	Определяет содержимое ячейки данных
TH	Создает ячейку заголовка
CAPTION	Элемент названия таблицы

К общим параметрам таблицы можно применить атрибуты изменения размера, расположения на странице, фонового изображения и цвета, форму, цвет и другие параметры рамки, расстояние между ячейками и другие /6, c. 34/.

Параметры заголовка можно определить следующими значениями атрибутов тега :

Тег align определяет выравнивание названия относительно границ таблицы и может принимать значения left, right, center и bottom.

Тег valign выравнивает названия при размещении над или под таблицей.

Если атрибут align имеет значение center или bottom, то для выравнивания по левой или правой стороне необходимо помимо атрибута align использовать и атрибут valign. Тогда первый будет определять выравнивание по левой или правой стороне, а второй определять расположение под или над таблицей /19, c. 28/.

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

Список основных параметров атрибутов собран в таблице №4.

Таблица №4 – Основные параметры атрибутов табличных тегов

Атрибут	Действие
Align	Задает выравнивание содержимого ячейки по горизонтали
Valign	Задает выравнивание содержимого ячейки по вертикали
Width / Height	Устанавливают ширину и высоту ячейки
Background	Упределяет фоновое изображение
BGcolor	Устанавливает цвет фона ячейки

Для удобства форматирования содержимого таблицы её можно разбить на несколько частей: заголовочную, основную и нижнюю. Группирование позволяет присваивать каждой группе элементов общие свойства /3, c. 9/.

Группирование строк задается с помощью трёх тегов, указанных в таблице №4.

Таблица №5 – Теги группирования строк таблицы


Верхняя часть таблицы

Средняя часть таблицы

Нижняя часть таблицы

В таблице можно создать несколько основных частей, но нижнюю только одну.

Таким образом, по данному параграфу можно сделать следующие выводы: структура HTML, при правильно оформлении, проста и понятна, не смотря на большое число различных элементов и такое же число их атрибутов.

1.3 Представление графики на Web-страницах

Задача данного параграфа – рассмотрение способов представления графики с использованием HTML.

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, активно заменяющий используемый практически во всех нынешних проектах, формат PNG /4, c. 15/.

GIF можно назвать традиционным форматов файлов Web. Он был первым форматом, который поддерживался Web-браузерами.

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

JPEG – содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов. Используется сжатие с потерями, так как некоторая информация отбрасывается. Зачастую это не наносит вреда изображению или же это не заметно /2, c. 39/.

PNG - может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество, а иногда и меньший объём в сравнении с GIF. Еще одним немаловажным параметром является возможность изменять уровень прозрачности.

Именно графика сделала Web таким, каким мы его видим сегодня, но не стоит забывать, что она увеличивает время, необходимое Web-странице для передачи по сети /16, c. 58/.

Таким образом по данному параграфу можно сделать следующие выводы: HTML поддерживает множество популярных, на сегодняшний день, форматов представления графики. У каждого из них есть свои плюсы и минусы, поэтому можно использовать несколько разных форматов в одном проекте.

2. Создание Web-страниц

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

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

2.1 Выбор редактора

Задача данного параграфа – рассмотрение особенностей использования различных редакторов при работе со структурами HTML.

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

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

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

На сегодняшний день существует множество редакторов HTML. У каждого из них есть свои существенные и незначительные недостатки. Существует множество различных редакторов: Visual Studio Code, SublimeText, Eclipse, Adobe Dreamweaver, Microsoft SharePoint и многие другие (смотри Рисунок 1).

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

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

Для себя самым удобным из них я выбрал Adobe Dreamweaver, так как в нем есть все вышеперечисленные функции и возможность установки модификаций. Так же очень удобной для себя функцией считаю просмотр в режиме реального времени, позволяющей наблюдать за изменениями во время корректировки кода.

Таким образом по данному параграфу можно сделать следующие выводы: существует множество редакторов, позволяющих не только упростить, но ускорить себе работу с HTML. У каждого, что естественно, есть свои плюсы и минусы.

Рисунок 1 – Редакторы

2.2 Начало работы

После выбора редактора нам необходимо определиться с тем, как будет выглядеть наш будущий сайт. Так как от визуальной части будет зависеть то, насколько удобно, а главное приятно, будет пользователю находиться на сайте.

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

2.3 Работа с кодом

Задача данного параграфа – подробное описание процесса создания элементов Web-страницы.

В некоторых редакторах вам необходимо будет вручную создавать начальную структуру Web-страницы (смотри Приложение А).

Тематикой своего сайта я выбрал новостной портал в области компьютерных комплектующих и мира компьютерных игр. Сайт будет иметь заголовок GNews. (добавь рисунок)

Рисунок 2.

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

Работа с тегом head завершена. Далее мы будем работать исключительно в теге body каждой из страниц /11, c. 25/. Данное действие скриншотом представлено в приложении Б.

Первым элементом страницы будет фон. Так как нас сайт частично связан с играми, я решил в качестве фона установить скриншот из известной игры GTA V. Пример скриншота представлен в приложении Г.

Чтобы добавить на страницу фон в теге body используем атрибут стиля style. Далее вводим и изменяем необходимые значения, такие как размер фона, позицию, выравнивание, подвижность и т.д.

Следующим этапом будет разработка шапки сайта (Рисунок 3). Для создания шапки будем использовать специальный предназначенный для этого тег header. И сразу назначаем ему атрибут style, в котором вводим и изменяем необходимые вам значения. Далее выбирает фон тега header, в нашем случае это будет черный цвет. Но помимо фона и размеров шапка должна иметь в себе содержание.

У нас должна быть постоянная область отображения информации. Поэтому создадим блочный тег div с фиксированной шириной блока. Назначаем ему фон, размеры и другие доступные параметры. Для удобства расположим его по центру используя автоматический отступ по бокам /9, c. 36/.

Добавим в шапку логотип. Для этого используем тег

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

Теперь создадим кнопку, при нажатии на которую пользователя будет отправлять на главную страницу. Для этого создаем блок div и меняем его стиль. Далее внутри тега

создаем текстовый тег в который вводим текст “Новости”. И через атрибут стиля задаем тексту цвет, размер, шрифт и другие параметры. Чтобы показать, что именно эта страница открыта в данный момент сделаем фон блока белым, а сам текст цвета фиксированной области шапки /1, c. 27/.

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

Таким образом получаем рабочую панель навигации по страницам Web-сайта. Копируем шапку на другие страницы. Не забываем в зависимости от страницы менять активные кнопки и цвет текста и фона позади него /13, c. 41/.

Теперь приступим к работе с областью содержания. Основная задача сайта сбор новостей. Yа нем не должно быть ничего лишнего. Поэтому на главную страницу добавим область содержания, в которой в начале расположим краткое описание сайта, и ниже сразу область постов.

Создадим область содержания. Для этого используем тег div с фиксированной шириной, белым фоном и отступами и расположим его по центру. Далее внутри данного блока создадим еще один блок с описание сайта. В атрибуте стиля задаем ему ширину равной 95% от ширины области содержания и автоматическое определение высоты блока. Теперь высота будет зависеть от размеров содержимого данного блока /18, c. 38/.

Теперь внутри вложенного блока расположим название Web-сайта, описание и основной контент.

Теперь приступим к созданию первого и шаблонного информационного поста.

Для этого создадим блок со схожими параметрами, что и блок с описанием. Разница будет в методе расположения этого блока относительно других. Внутри данного блока создадим блок без параметров для изображения. Самому изображению назначаем ширину и отступы от краев блока прародительского блока. Далее создаем блок с заголовком и кратким содержанием поста. Заголовку и тексту задаем шрифты, отступы и размеры. Далее создаем кнопку “Подробности”, при нажатии на которую нас перенесет на страницу с самим постом. После создаем блок с датой публикации данного поста. Шаблон поста создан /15, c. 43/.

Добавлять посты можно копируя отрывок кода, и меняя миниатюру, оглавление и краткое содержание.

Когда у нас есть полноценная область содержания можно начать работу над подвалом сайта. Для этого создаем блок div и задаем ему высоту, ширину и выравнивание по центру. Фон того же цвета, что и шапка. Внутри создаем блок без параметров и вкладываем в него текст о конфиденциальности, защите прав и ссылки на социальные сети /12, c. 45/.

Самое трудное позади, теперь нам остается сделать простейший шаг и скопировать область содержания с постами и подвал на другие страницы. Далее удаляем элементы с названием Web-сайта и кратким содержанием, затем меняем категорию. После остается только удалить лишние посты. По данному принципу создаём страницы для новостей по играм и железу /3, c. 53/.

Теперь необходимо создать страницу публикации. Для этого мы снова копируем весь код в новый документ. Удаляем из его области содержания всю информацию и добавляем заголовок с содержание. В содержании можно использовать как текст с изображениями, так и видеофайлы. По тому же принципу можно создавать страницы для остальных постов.

Небольшой сайт на HTML успешно создан. Теперь рассмотрим плюсы и минусы данного сайта.

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

К минусам сайта относиться неадаптивность. Сайт будет иметь одинаковое оформление не зависимо от используемого устройства. Нет возможности добавления постов через сам сайт, а втолько путём редактирования кода напрямую.

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

3. Охрана труда и техника безопасности

Охрана труда программистов выполняет задачи, направленные на выбор принципов защиты, разработку и использование средств защиты общества и природной среды от воздействия техногенных источников и стихийных явлений. Защита здоровья работающих, обеспечение безопасных условий труда, ликвидация производственных травм и заболеваний являются главными принципами безопасности жизнедеятельности. По причине того, что основная работа в организации данного характера производится с использованием средств вычислительной техники. Руководству организации необходимо обеспечить соответствие рабочих мест работников по нормам стандартов безопасности жизнедеятельности /18, c. 1/.

По требованиям СанПиН 2.2.2/2.4.1340–03 помещения для эксплуатации ПК должны отвечать следующим требованиям:

помещения, где используются автоматизированные рабочие места сотрудников должны иметь естественное и искусственное освещение;
необходимо, чтобы естественное и искусственное освещение соответствовало требованиям действующей нормативной документации;
площадь одного рабочего места пользователя ПК на базе плоских дискретных экранов должна составлять не менее 4,5 м 2;
помещения, где размещаются рабочие места с ПК, должны быть оборудованы защитным заземлением в соответствии с техническими требованиями по эксплуатации; – нельзя размещать рабочие места с ПК вблизи силовых кабелей и вводов; высоковольтных трансформаторов; технологического оборудования, создающего помехи в работе ПК.

Перед началом работы программист обязан:

осмотреть и привести в порядок свое рабочее место;
проверить правильность подключения оборудования в электросеть;
проверить правильность установки стола, стула, угла наклона экрана, положение клавиатуры и, при необходимости, произвести регулировку рабочего стола, кресла и элементов компьютера в целях исключения неудобных поз и длительных напряжений тела /19, c. 2/.

Также для работников сферы информационных технологий необходимо соблюдать режим отдыха — 15 минут каждый час.

Техника безопасности программиста включает в себя несколько основных правил:

необходимо следить за чистотой рабочего места;
корректно прекращать работу ПК;
следить за своим расположением на рабочем месте;
перед работой проверять целостность электроники;
запрещено самостоятельно ремонтировать электронику;
запрещено курить, пить и есть на рабочем месте;
и другие не менее важные правила.

В момент аварийных ситуаций необходимо:

при обнаружении оголенных проводов, а также в случае появления запаха гари в этот же момент завершить работу компьютера и сообщить о подобном происшествии вышестоящему руководству или дежурному специалисту;
уметь оказать первую медицинскую помощь человеку, пострадавшему от электрического тока;
следить за наличием сбоя программного обеспечения компьютера и в случае их появления сообщить вышестоящему руководству или дежурному специалисту;
в случае появления возгорания по возможности завершить работу компьютера, отключить компьютер от электрической сети, вызвать пожарную команду, сообщить о происшествии и предпринять самостоятельные попытки тушения пожара, если это возможно;

Заключение

В данной работе были изучены HTML, виды и способы представления информации в его структуре, и основные понятия Web-разработки. Кратко рассмотрены элементы структуры HTML, правила и рекомендации по разработке с их использованием. Так же были приведены примеры программ, облегчающих Web-разработку. Новичкам в данной сфере советую использовать Adobe Dreamweaver, данная программа имеет простой и удобный пользовательский интерфейс, возможности его корректировки и широкий функционал, позволяющий работать не только с HTML, но и другими языками программирования при необходимости.

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

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

В практической части был успешно выполнен ряд задач, а именно: выбор редактора, разработка дизайна, работка с кодом и подгон результата под заготовленный ранее шаблон. Данный проект, не смотря на простоту в исполнении, является, по моему мнению, лучшим вариантом исполнения для подобных проектов, но он требует множества доработок.

Список используемой литературы

Гоше, Хуан Диего HTML5. Для профессионалов / Гоше Хуан Диего. - М.: Питер, 2019. - 149 c.
Дакетт, Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. - М.: Эксмо, 2019. - 768 c.
Джереми, Кит HTML5 для веб-дизайнеров / Кит Джереми. - М.: Манн, Иванов и Фербер, 2016. - 1000 c.
Дронов, В.А. PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов / В.А. Дронов. - М.: БХВ-Петербург, 2016. - 399 c.
Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 984 c.
Дунаев, В. В. (Х)HTML, скрипты и стили. Самое необходимое / В.В. Дунаев. - М.: БХВ-Петербург, 2019. - 496 c.
Дунаев, Вадим HTML, скрипты и стили / Вадим Дунаев. - М.: Книга по Требованию, 2018. - 427 c.
Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2019. - 448 c.
Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS на 100% / Игорь Квинт. - М.: Книга по Требованию, 2018. - 448 c.
Комолова, Н. HTML. Самоучитель / Н. Комолова, Е. Яковлева. - М.: Книга по Требованию, 2018. - 288 c.
Ллойд, Йен Создай свой веб-сайт с помощью HTML и CSS / Йен Ллойд. - М.: Питер, 2019. - 401 c.
Лоусон, Б. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. - М.: Питер, 2019. - 304 c.
Мэтью, Мак-Дональд HTML5. Недостающее руководство / Мак-Дональд Мэтью. - М.: БХВ-Петербург, 2017. - 917 c.
Петюшкин, А. HTML в Web-дизайне / А. Петюшкин. - М.: БХВ-Петербург, 2019. - 509 c.
Петюшкин, Алексей HTML в Web-дизайне / Алексей Петюшкин. - М.: БХВ-Петербург, 2017. - 400 c.
Прохоренок, Н. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н. Прохоренок. - М.: БХВ-Петербург, 2019. - 912 c.
Робсон, Э. Изучаем HTML, XHTML и CSS / Э. Робсон. - М.: Питер, 2016. - 169 c.
Седерхольм, Д. Пуленепробиваемый веб-дизайн. Библиотека специалиста / Д. Седерхольм. - М.: Питер, 2019. - 583 c.
Стивен, Хольцнер HTML5 за 10 минут / Хольцнер Стивен. - М.: Диалектика / Вильямс, 2016. - 496 c.
Сухов, К. HTML 5. Путеводитель по технологии / К. Сухов. - М.: ДМК Пресс, 2017. - 352 c.