Муниципальное бюджетное общеобразовательное учреждение

«Школа №12 имени Героя Советского Союза Ф. М. Сафонова»

городского округа Самара

«Разработка web сайта»

«Мой выбор профессии»

Выполнил: Ученик 8 «Б» класса

Степанов Александр Владимирович,
Поляков Артур Владимирович

Руководитель проекта:
учитель информатики
Казаков Александр Викторович

Самара 2020
 Паспорт проекта

1) Учебный предмет, в рамках которого проводилась работа по проекту:

информатика.
2) Учебные дисциплины, близкие к теме проекта: дисциплина «Web -
дизайн».
3) Вид проекта: информационный.
4) Цель проекта: создать веб – сайт, который поможет школьникам в
изучении физики.
5) Задачи проекта:
Научиться разрабатывать web – сайты;
изучить дополнительную литературу по созданию сайтов;
обобщить полученную информацию и сделать вывод.
6) Предполагаемые результаты (продукты) проекта: разработанный web
ресурс.
 Введение

Человек с недавнего времени вступил в эпоху информационных

технологий. Одной из популярных областей в этом направлении является веб
программирование. Сегодня мы не можем представить свою жизнь без
гаджетов. Мы ищем информацию, скачиваем игры, книги и всё это человек
делает именно на сайте. Целью нашего информационного проекта является
создание сайта по физике. Актуальность данного вопроса в том, что он
помогает нам расширить наши знания, и узнать о своей будущей работе, как
можно больше.
Фраза «за интернетом будущее» весьма актуальна и носит вполне
логичный характер, так как технологии создания веб страниц постоянно
совершенствуются. Мысль о создании сайта у меня появилась давно, и я
начал изучать разработку веб – сайта. В связи с этим и была выбрана тема
проекта «Создание сайта».
Сайт, или веб - сайт — одна или несколько логически связанных между
собой веб-страниц. Обычно сайт в Интернете представляет собой массив
связанных данных, имеющий уникальный адрес и воспринимаемый
пользователем как единое целое.
История создания первого веб – сайта такая. Первый в мире сайт
info.cern.ch появился 6 августа 1991 года. Его создатель, Тим Бернерс - Ли,
опубликовал на нём описание новой технологии World Wide Web, языка
гипертекстовой разметки HTML. Также на сайте были описаны принципы
установки и работы серверов и браузеров. Сайт стал и первым в
мире интернет - каталогом, так как позже Тим Бернерс-Ли разместил на нём
список ссылок на другие сайты. Веб-сайт может быть доступным
в компьютерной сети под общим доменным именем или локально на одном
компьютере.
 В процессе работы мы выявили два популярных способа создания сайта:

1) С помощью HTML разметки или другими словами – написание кода;

2) С помощью конструктора сайтов.

Нами была поставлена цель - сделать сайт по написанию своего кода,

без какого – либо конструктора, чтобы в результате получился готовый
продукт в виде своего веб – сайта. Тема проекта (сайта) про дополнительное
самоизучение параграфов по физике в 8 классе. Проблемой данного проекта
было изучение языков программирования и нахождение нужных ресурсов
для написания самоизучение урока. В результате нашей работы мы бы
хотели реализовать проектный продукт – сайт.

Решением нашей задачи являлось написание сайта, который поможет

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

1) Световые;
2) Тепловые;
3) Электромагнитные;
4) Электрические.
Глава 1
В начале работы над созданием сайта, нам потребовался редактор, где
бы мы писали код. Этим редактором являлся Brackets. В процессе работы
выяснилось, чтобы написать разметку страницы, нужен язык
программирования HTML, а чтобы украсить её фоном или выравниванием
требуется вмешательство языка CSS. В созданиях сайта нужен и язык
JavaScript, необходимый для сценариев, взаимодействий с пользователем.
Также нами было принято решение дополнять информацию с источника
Википедия. Процессу изучения программирования помогли книги и интернет
ресурсы.

Существуют различные виды сайтов. Например:

1) Личные блоги;
2) Сайты – визитки;
3) Интернет – магазины;
4) Новостные сайты;
5) Персональный сайт;
6) Информационные порталы.

1) Личные блоги (интернет - дневник, онлайн-дневник) — веб-сайт,

основное содержимое которого — регулярно добавляемые человеком
записи, содержащие текст, изображения или мультимедиа. Для блогов
характерна возможность публикации отзывов посетителями.
2) Сайт-визитка (англ. business card website) — небольшой сайт, как
правило, состоящий из одной (или нескольких) веб-страниц, и
содержащий основную информацию об организации, частном лице,
компании, товарах или услугах, прейскуранты, контактные данные.
3) Интернет - магазин (англ. online shop или e-shop) — сайт, торгующий
товарами в сети Интернет. Позволяет пользователям онлайн, в своём
 браузере или через мобильное приложение, сформировать заказ на
покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.
4) Новостной сайт — это интернет - издание, специализация которого
заключается в сборе и выдаче новостей или новостных материалов на
одну тему.
5) Персональный сайт – это портфолио в интернете, позволяющее вам
заявить о себе.
6) Информационные - портал — сайт в компьютерной сети, который
предоставляет пользователю различные интерактивные интернет-
сервисы, которые работают в рамках этого сайта. Веб-портал может
состоять из нескольких сайтов.

Нашей конечной задачей, было сделать персональный сайт с научной

информационной тематикой. Каждой странице я уделял особое внимание, так
как содержащийся в ней контент, должен быть интересным и достоверным.

Создание хорошего сайта – это большой и трудный процесс. Обычно

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

Далее подробно рассмотрим детали разработки сайта. Сначала мы

взялись за обрисовку макета, фона и скелета сайта. Сложности вызвало
только подбор фона и сочетание цветов, ведь это ещё и немного творческий
процесс. Это все заняло не больше дня. Далее нужно продумать контент,
которым будет наполнен сайт. На это ушло тоже один день. Затем идет самая
интересная часть – программирование сайта. Нужно было соблюдать некую
аккуратность при работе с кодом, потому что он должен быть читаемый и
понятный, чтобы можно было доработать и внести поправки

«Инструменты реализации проекта»

1.1) В ходе работы мы использовали языки программирования:
1) HTML
2) CSS
3) JAVASCRIPT
4) PHP
5) Базу данных phpMyAdmin

 HTML - (от англ.  Hyper Text Markup Language —

«язык гипертекстовой разметки») - стандартизированный язык
разметки документов во Всемирной паутине. Большинство веб-
страниц содержат описание разметки на языке HTML. Язык HTML
интерпретируется браузерами; полученный в результате интерпретации
форматированный текст отображается на экране монитора компьютера
или мобильного устройства. Этот не совсем язык программирования,
т.к. в нем используются теги, простыми словами – разметка.
,

 CSS (англ. Cascading Style Sheets - каскадные таблицы

стилей) - формальный язык описания внешнего вида документа,
написанного с использованием языка разметки. То есть он полностью
зависит он HTML, и тоже не считается языком программирования.
 JavaScript — язык программирования. Поддерживает объектно-
ориентированный,  и функциональный стили. JavaScript обычно
используется, как встраиваемый язык для программного доступа к
объектам приложений. Наиболее широкое применение находит
в браузерах как язык сценариев для придания интерактивности веб-
страницам. Он нам в создании сайта не потребовался.

 PHP - Скриптовый язык общего назначения, интенсивно применяемый

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

Чтобы написать код потребуется редактор кода. Давайте рассмотрим

некоторые виды этих редакторов:

1) Блокнот;
2) Notepad++;
3) Brackets;
4) Atom.

1) Блокнот – встроенная программа для написания обычного текста в ПК.

Она представляет собой белый экран с черным написанным текстом.
На ней можно писать код, поставив нужное расширение в название
файла. Например: «index.html».

Чтобы показать пример, я скопировал свой готовый код и вставил его в

Блокнот:
2) «Notepad++» — свободный текстовый редактор с открытым исходным
кодом для Windows. Вот мой код на «Notepad»:
3) Atom — бесплатный текстовый редактор с открытым исходным кодом для
Linux, macOS, Windows с поддержкой плагинов, написанных, на Node.js, и
встраиваемых под управлением GitHub.

4) Brackets — свободный текстовый редактор для веб-разработчиков. Brackets

ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии
лежат в основе самого редактора, что обеспечивает его
кроссплатформенность, т.е. совместимость с операционными системами
Mac, Windows и Linux. Вот как на нём был бы написан наш код:
Я выбрал для написания кода именно Atom, потому что в нем можно было
скачать плагины, которые подсвечивали разные теги. Это тоже есть и в
Brackets и в Notepad++, но мой выбор был Atom. Мне также понравилась
программировать в разных окнах, т.е. на одной половине 1 файл, а на другой
2 файл.
Выводы к главе 1:
Я использую редактор Atom всегда, потому что он удобен и прост в
использовании.

Глава 2
«Способы создания сайта»
1) Конструкторы сайтов
1) Wix;
2) Setup;
 3) Drupal;
4) WordPress;
5) CMS системы;
6) Прочее ПО.

1) Wix.com — международная облачная платформа, для создания и

развития интернет - проектов, которая позволяет конструировать
сайты и их мобильные версии на HTML5.
2) Setup – еще один способ создать сайт быстро, но он со временем
устаревает.
3) Полноценный сайт с серьезным набором возможностей
проблематично написать «с нуля», поэтому программистам во
многом помогает CMS, более известная, как движок.

2) Ручная верстка
Ручная верстка – своё создание структуры гипертекстового
документа на основе HTML разметки, как правило, при использовании
таблиц стилей, таким образом, чтобы элементы дизайна выглядели
аналогично макету.
Все самые правильно написанные сайты, написанные вручную.

Выводы главы 2
Все успешные и крупные сайты созданы вручную и не рекомендуется
делать ваш веб – сайт с помощью конструкторов.

1. Первым способом является создание сайта обычным способом.

Использование гипертекстовой разметки (HTML), самый простой способ
создания сайта. (Теги HTML-документов в большинстве своем просты и
понятны, ибо они образованы с помощью общеупотребительных слов
английского языка, понятных сокращений и обозначений. НТМL- тег состоит
из имени, за которым может следовать необязательный список атрибутов
тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший
вариант тега - имя, заключенное в угловые скобки, например, <HEAD> или
<I>. Для ряда тегов характерно наличие атрибутов, которые могут иметь
конкретные значения, устанавливаемые автором для изменения функции
тега.
HTML (Hyper Text Markup Language) – это язык гипертекстовой разметки,
который получил очень широкое распространение в сети Интернет. Язык
HTML определяет структуру страниц, которую вы видите в браузере.
Каждый сайт в сети интернет использует для отображения информации язык
HTML.

2. Второй способ создания сайта – это использование CSS. CSS

используется создателями веб-страниц для задания цветов, шрифтов,
расположения отдельных блоков и других аспектов представления внешнего
вида этих веб-страниц. Основной целью разработки CSS являлось разделение
описания логической структуры веб-страницы (которое производится с
помощью HTML или других языков разметки) от описания внешнего вида
этой веб-страницы (которое теперь производится с помощью формального
языка CSS). Такое разделение может увеличить доступность документа,
предоставить большую гибкость и возможность управления его
представлением, а также уменьшить сложность и повторяемость в
структурном содержимом. Кроме того, CSS позволяет представлять один и
тот же документ в различных стилях или методах вывода, таких как экранное
представление, печатное представление, и так далее.
CSS – это формальный язык, служащий для описания оформления внешнего
вида документа, созданного с использованием языка разметки (HTML,
XHTML, XML). 
3. Третий способ создания сайта это веб-программирование – применение
языка программирования при конструировании сайта. PHP - это серверный
язык создания сценариев. Конструкции PHP, вставленные в HTML-текст,
выполняются сервером при каждом посещении страницы. Результат их
обработки вместе с обычным HTML-текстом передается браузеру. PHP-
программы состоят из простого текста, поэтому набирать их можно в любом
текстовом редакторе. Популярные HTML-редакторы имеют встроенную
поддержку для редактирования PHP-программ. MySQL это полноценная база
данных. Работает она на чистом SQL (Structured Query Language) синтаксисе.
Диктатором моды MySQL назвать нельзя, но существенный, можно даже
сказать огромный вклад, в развитие SQL база данных MySQL делает. MySQL
- это еще и система управления базами данных. В принципе, SQL синтаксис,
сложно назвать отдельным языком программирования из-за своей простоты.
SQL — простыми словами, это язык программирования
структурированных запросов (SQL, Structured Query Language), который
используется в качестве эффективного способа сохранения данных, поиска
их частей, обновления, извлечения из базы и удаления.
База данных сайта MySQL – это система, предназначенная для хранения и
обработки информации. Комплекс таблиц, взаимосвязанных между собой,
для доступа к которым применяется система управления базами данных
MySQL. 
 Заключение
Нам создавать свой сайт было легко, это не вызвало трудностей. Это был наш
первый серьезный проект, потому что раньше я делал сайты только для себя, а здесь
нужно его представить.
У нас получилось реализовать сайт по физике, только было несколько проблем – я
не смог найти информацию, как сделать адаптивный сайт (под все виды гаджетов) и
долго искал разработку на php под базу данных.
Проект продолжать я не хочу, ведь я его закончил, а чтобы продолжать вести сайт
нужна его поддержка и перспектива роста информации. Но я в свой сайт вложил
столько информации, сколько нужно было для понимания темы.
 Список литературы:
https://ru.wikipedia.org/wiki/Сайт
https://ru.wikipedia.org/wiki/Сайт#Создание_сайтов