XXI Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
СОЗДАНИЕ ВЕБ-ПРИЛОЖЕНИЯ СРЕДСТВАМИ HTML, CSS, JAVASCRIPT
Автор работы награжден дипломом победителя I степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
1. Введение
1.1. Введение в тему
С развитием сети Интернет в последние десятилетия создание общественных сайтов стало одним из наиболее популярных и востребованных направлений в веб -разработке. Использование языков HTML, CSS и JavaScript (JS) является неотъемлемой частью этого процесса. Эти языки являются основополагающими и предоставляют возможности для создания динамических, интерактивных и привлекательных веб -страниц.
Использование языков HTML, CSS и JS в создании общественных сайтов позволяет создавать интуитивно понятный пользовательский интерфейс, динамические эффекты и интерактивность. Общественные сайты могут быть ориентированы на различные цели, такие как социальное взаимодействие, предоставление информации и ресурсов для общественного блага, участие в общественной деятельности и многое другое.
В данной исследовательской работе мы рассмотрим основные принципы и техники использования языков HTML, CSS и JS в создании сайтов. Мы также создадим сами реальный проект, чтобы продемонстрировать, как эти языки могут быть применены для достижения желаемых результатов. В конечном итоге, использование таких языков в разработке сайтов позволяет создавать веб-платформы, которые могут иметь значительный социальный, экономический и культурный вклад, облегчая взаимодействие и обмен информацией между людьми.
Тема данной работы имеет практическое значение и может быть полезна для студентов, программистов, веб-разработчиков, дизайнеров и всех тех, кто интересуется созданием общественных сайтов. Работа состоит из следующих разделов: обзор основных концепций HTML, CSS и JS; анализ примеров веб-проектов, где эти языки были использованы; применение техник и методов разработки общественных сайтов с использованием HTML, CSS и JS; и заключительные выводы.
В дальнейшем мы подробно рассмотрим каждый из вышеупомянутых языков и приведем примеры, чтобы продемонстрировать, как они могут быть использованы для создания сайтов. Важно отметить, что эти языки продолжают развиваться, и новые аспекты и функциональности могут появляться со временем.
Исследовательская работа имеет целью охватить основные аспекты и принципы использования языков HTML, CSS и JS для создания сайтов. Путем изучения этих языков и рассмотрения примеров реализации конкретных проектов, исследователь может получить полное представление о практическом применении этих языков в создании общественных сайтов.
1.2. Цель исследования
Цель данного исследования заключается в более глубоком изучении роли языков программирования HTML, CSS и JavaScript в создании сайтов. Конкретные цели исследования включают:
1. Понять, как каждый из этих языков программирования веб-разработки — HTML, CSS и JS — влияет на создание общественных сайтов. Мы рассмотрим, какие именно аспекты сайта обеспечивают эти языки и как они взаимодействуют между собой.
2. Изучить функциональные возможности языка HTML. Мы раскроем основные элементы и теги HTML и объясним, как они помогают организовать информацию на сайте.
3. Понять важность языка CSS в веб-разработке. CSS отвечает за стилизацию и внешний вид веб-страниц. Мы изучим синтаксис CSS, его основные свойства и возможности, а также рассмотрим примеры применения стилей для создания привлекательного дизайна сайта.
4. Изучить роль языка JavaScript в создании общественных сайтов. JavaScript является языком программирования, который добавляет динамическое и интерактивное поведение на веб-страницах. Мы рассмотрим основные концепции языка JavaScript, такие как переменные, условия, функции и манипуляции с DOM, и объясним, как они помогают создавать интерактивные элементы на сайте.
5. Создать свой сайт и объяснить, какие именно языки программирования были использованы для его создания. Мы также рассмотрим конкретные примеры популярных сайтов, таких как социальные сети, форумы или сайты для обмена информацией, и объясним, какие решения на основе HTML, CSS и JavaScript использовались для их разработки.
Исследование этих целей поможет разработчикам и веб-дизайнерам лучше понять роль и важность языков программирования веб-разработки при создании общественных сайтов. Они смогут использовать эти знания для создания более удобных, привлекательных и интерактивных пользовательских интерфейсов на сайтах.
1.3. Обзор структуры работы
В данной работе мы представим следующую структуру:
1. Введение: данный раздел, в котором мы обозначим важность веб-разработки и цели исследования.
2. Роль HTML в веб-разработке: здесь мы рассмотрим язык HTML и его возможности в создании структуры и содержимого веб-страниц.
3. Роль CSS в веб-разработке: в этом разделе мы обсудим язык CSS, который отвечает за стилизацию и внешний вид веб-страниц.
4. Роль JavaScript в веб-разработке: здесь мы рассмотрим язык JavaScript и его возможности для создания динамических и интерактивных элементов на веб-странице.
5. Создание собственной веб-страницы с помощью вышеперечисленных языков: в этом разделе мы собственноручно создадим сайт, на который сможет зайти любой человек.
6. Заключение: подведение итогов исследования, а также выводы о значимости языков веб-разработки для создания сайтов.
2. Роль HTML в веб-разработке
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Этот язык необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.
2.1. Структура HTML-документа
HTML-документ представляет собой текстовый файл, который структурирован определенным образом для отображения веб-страницы в браузере. Он состоит из следующих основных элементов:
1. Декларация типа документа (DOCTYPE)
Первая строка HTML-документа - это декларация типа документа (DOCTYPE), которая сообщает браузеру, какую версию HTML использует документ. (рис.1)
2. Тег <html>
Тег <html> является корневым элементом HTML-документа и содержит все остальные элементы. Он имеет два основных дочерних элемента: <head> и <body>.
3. Тег <head>
Тег <head> содержит метаданные о документе, такие как заголовок, описание, ключевые слова и ссылки на внешние ресурсы (например, CSS и JavaScript). Он не отображается в браузере.
4. Тег <body>
Тег <body> содержит видимое содержимое веб-страницы, такое как текст, изображения, ссылки и формы.
5. Заголовок (тег <h1> - <h6>)
Заголовки используются для структурирования содержимого и предоставления пользователям и поисковым системам краткого обзора содержимого страницы. Они имеют шесть уровней, от <h1> (самый важный) до <h6> (наименее важный).
6. Параграфы (тег <p>)
Параграфы используются для отображения блоков текста.
7. Списки (теги <ul> и <ol>)
Списки используются для отображения упорядоченных или неупорядоченных элементов.
8. Ссылки (тег <a>)
Ссылки используются для создания гиперссылок на другие страницы или ресурсы.
9. Изображения (тег <img>)
Изображения используются для отображения изображений на веб-странице.
2.2. Структура HTML-документа на примере сайта
Рассмотрим структуру HTML-документа на примере сайта www.example.com (рис.2)
2.2.1. Анализ структуры
Декларация типа документа указывает, что документ является HTML-документом.
Раздел заголовка содержит метаданные о документе, такие как заголовок, описание и ключевые слова.
Раздел тела содержит видимое содержимое документа, включая заголовок, параграф и список ссылок.
Эта структура обеспечивает логическую иерархию контента и облегчает браузеру отображение документа.
3. Роль CSS в веб-разработке
CSS (Cascading Style Sheets) является одним из ключевых инструментов веб-разработки. Он определяет внешний вид и стиль веб-страницы, позволяя разработчикам создавать красивые и удобные пользовательские интерфейсы. В этом тексте я подробно расскажу о важности CSS, приведу примеры его применения и объясню, какие возможности предоставляет разработчикам.
3.1. Структура CSS-документа
CSS позволяет разделить структуру HTML и внешний вид веб-страницы. Это означает, что разработчики могут разрабатывать и изменять структуру страницы, не затрагивая стиль. Например, если у нас есть кнопка на веб-странице, мы можем легко изменить ее внешний вид, просто изменяя CSS-код, не затрагивая HTML-структуру. Это делает код более модульным и поддерживаемым.
CSS-документ обычно состоит из следующих разделов:
1. Объявление набора правил:
Набор правил CSS состоит из селектора, который указывает элементы, к которым будут применяться стили, и блока деклараций, который содержит свойства и значения стилей. (рис.3)
2. Блок деклараций:
Блок деклараций содержит свойства и значения стилей, которые применяются к выбранным элементам.
Свойства CSS определяют аспект элемента, который будет изменен, например цвет, размер шрифта или отступы.
Значения CSS определяют, как будет изменено свойство.
Например, в приведенном выше наборе правил свойство color имеет значение red, а свойство font-size имеет значение 2em.
3. Комментарии:
Комментарии используются для добавления заметок или объяснений в CSS-документ.
Комментарии игнорируются браузерами и не влияют на внешний вид веб-страницы.
Комментарии начинаются с /* и заканчиваются */. (рис.4)
4. Импорт:
Директива @import используется для импорта других CSS-файлов в текущий документ.
Это позволяет разработчикам организовать свои стили и повторно использовать общие стили в нескольких документах. (рис.5)
5. Медиа-запросы:
Медиа-запросы используются для применения различных стилей в зависимости от характеристик устройства или среды просмотра.
Они позволяют разработчикам создавать адаптивные веб-сайты, которые хорошо отображаются на разных устройствах и размерах экрана. (рис.6)
6. Наборы правил с несколькими селекторами:
Наборы правил с несколькими селекторами позволяют разработчикам применять стили к нескольким типам элементов одновременно. (рис.7)
Понимание структуры CSS-документа имеет решающее значение для эффективной работы с CSS и создания хорошо оформленных веб-сайтов.
3.2 Преимущества CSS
3.2.1. Единообразный дизайн
С помощью CSS можно создавать единообразный дизайн для всего веб-сайта. Разработчики могут создавать стандартные стили для заголовков, параграфов, ссылок и других элементов, которые будут применяться автоматически на каждой странице. Это позволяет поддерживать единообразие внешнего вида и упрощает обновление стилей на всем сайте.
3.2.2. Адаптивный дизайн
С CSS можно создавать адаптивные веб-страницы, которые хорошо отображаются на разных устройствах и разрешениях экрана. С помощью медиа-запросов можно определять стили, которые будут применяться только на определенных устройствах. Например, мы можем настроить стили для мобильных устройств, планшетов и настольных компьютеров. Это помогает улучшить пользовательский опыт и делает сайт более доступным для всех пользователей.
3.2.3. Анимации и переходы:
CSS предоставляет возможность создавать анимации и переходы на веб-страницах. Это позволяет добавлять интерактивность и живость к сайту. Например, мы можем создать анимацию при наведении на кнопку или при загрузке страницы. Это помогает привлечь внимание пользователей и сделать сайт более привлекательным.
3.2.4. Улучшенная доступность:
CSS позволяет улучшить доступность веб-страницы для пользователей с ограниченными возможностями. Мы можем определить стили, которые будут применяться только при использовании программ чтения с экрана или при печати страницы. Это помогает обеспечить лучшую читаемость и понимание содержимого страницы.
3.2.5. Структура CSS-документа на примере сайта
Рассмотрим структуру CSS-документа на примере сайта www.example.com (рис.8)
3.2.5.1. Анализ структуры
В этом примере мы используем CSS для задания стилей для заголовка, параграфа и ссылки на веб-странице. Это позволяет нам изменять цвет, размер шрифта и другие свойства этих элементов без изменения HTML-кода.
4. Роль JavaScript в веб-разработке
4.1 Структура документа JavaScript
Документ JavaScript состоит из двух основных разделов:
4.1.1. Директивы скрипта:
Директивы скрипта — это теги, которые указывают браузеру, что начинается или заканчивается блок кода JavaScript.
Открывающая директива: <script>
Закрывающая директива: </script>
4.1.2. Тело скрипта:
Тело скрипта — это раздел между открывающей и закрывающей директивами, где вы пишете свой код JavaScript. Здесь вы можете определять функции, переменные и выполнять другие операции.
4.1.2.1. Типы скриптов:
Существует два основных типа скриптов JavaScript:
Внутренние скрипты: Встраиваются непосредственно в HTML-документ с помощью тегов <script>.
Внешние скрипты: Хранятся в отдельных файлах с расширением .js и подключаются к HTML-документу с помощью атрибута src тега <script>.
Размещение скриптов:
Скрипты можно размещать в двух основных местах:
В заголовке (<head>): Скрипты, размещенные в заголовке, загружаются и выполняются до отображения страницы. Это полезно для скриптов, которые должны быть выполнены до загрузки остальной части страницы.
В теле (<body>): Скрипты, размещенные в теле, загружаются и выполняются после загрузки остальной части страницы. Это полезно для скриптов, которые не требуются для первоначальной отрисовки страницы.
Существуют также советы по размещению скриптов:
Размещайте скрипты в конце документа, чтобы избежать блокировки загрузки страницы.
Используйте внешние скрипты для улучшения производительности и организации кода.
Добавляйте комментарии в свой код для улучшения читаемости и обслуживания.
Понимание структуры документа JavaScript имеет решающее значение для написания эффективного и хорошо организованного кода JavaScript.
4.2. . Структура JS-документа на примере сайта
Рассмотрим структуру JS-документа на примере сайта www.example.com (рис.9)
4.2.1. Объяснение кода
Теги <script> и </script> определяют блок кода JavaScript.
Функция sayHello() определена с помощью ключевого слова function.
Функция выводит сообщение "Привет, мир!" в консоль браузера с помощью метода console.log().
Функция sayHello() вызывается после ее определения.
Когда этот код выполняется в браузере, он выведет сообщение "Привет, мир!" в консоль. Это простой пример, который демонстрирует, как писать и выполнять код JavaScript в документе HTML.
4.2.2. Анализ структуры
Простая функция: Функция sayHello() проста и понятна, выполняя одну задачу - вывод сообщения в консоль.
Немедленное выполнение: Функция sayHello() вызывается сразу после ее определения, что приводит к немедленному выполнению кода.
В целом, код хорошо написан и демонстрирует основные принципы HTML и JavaScript. Он выполняет простую задачу вывода сообщения в консоль, но может быть расширен для выполнения более сложных задач.
5. Создание собственной веб-страницы с помощью вышеперечисленных языков
Настоящее исследование посвящено созданию собственного веб-сайта после освоения базовых языков программирования, таких как HTML, CSS и JavaScript. Целью данного проекта является изучение процесса разработки и развертывания веб-сайта, а также приобретение практического опыта в применении полученных знаний.
5.1. План создания веб-сайта
1. Планирование
Определение темы и цели сайта
Выявление целевой аудитории
2. Разработка
Создание HTML-структуры сайта
Стилизация сайта с помощью CSS
Добавление интерактивности с помощью JavaScript
5.2. Конечный продукт:
Полностью функциональный веб-сайт, отвечающий поставленным целям и требованиям целевой аудитории
Демонстрация навыков программирования и понимания принципов веб-разработки
Ценный практический опыт в применении теоретических знаний
5.3. Значимость
Данное исследование имеет практическую значимость, поскольку оно предоставляет исследователю возможность применить свои навыки программирования для создания реального продукта. Кроме того, исследование вносит вклад в область веб-разработки, демонстрируя процесс создания сайта с использованием базовых языков программирования.
5.4 Создание
Приступим же к планированию сайта, следуя нашему плану:
-
Темой моего сайта будет являться фильм «Интерстеллар», целью моего сайта будет является предоставление информации о фильме, обмен отзывами, а также показ редких фотографий со съемочной площадки.
-
Целевой аудиторией сайта будут являться люди любых возрастов, интересующихся фильмами в целом.
Теперь пришла очередь разработки:
-
Начнем с создания HTML-файла, который будет являться главной страницей сайта. (рис.10)
С помощью сочетания горячих клавиш Shift+!+Tab, я создала стандартную модель HTML-документа, которую буду изменять для создания сайта.
Вначале изменим имя страницы, вместо «Document», на «Website about the movie "Interstellar"» (рис.11)
Далее добавим сайту его название и меню, чтобы потенциальный пользователь мог перейти на другие страницы. Чтобы указать системе, какую страницу открыть после нажатия на кнопку, я воспользуюсь тегом <a href>, а также применю тег <div>, который предназначен для выделения фрагмента документа с целью изменения вида содержимого. (рис.12)
Как можно увидеть, теперь у сайта есть название и меню. Но я хочу добавить еще и цитату режиссера этого фильма, чтобы сайт не выглядел пустым. Это я могу сделать с помощью тега <div>, предназначение которого я объяснила выше. (рис.13)
Пока что, это все, что я хочу, чтобы находилось на первой странице сайта. Сейчас покажу, как она выглядит на данный момент. (рис.14)
Да, сайт выглядит пусто, но я исправлю это в будущем с помощью CSS. А сейчас нужно доделать остальные страницы. Процесс их создания будет очень похож, поэтому я не буду его также описывать, но заострю внимание на важных изменениях.
Это следующая страница сайта – About Film. В ней будет рассказываться краткий сюжет фильма. Из изменений можно заметить добавление тега <footer> - так называемого «подвала» сайта. Этот тег будет присутствовать на всех страницах сайта, кроме главной страницы. Так выглядит эта страница. (рис.15,16)
Это страница, на которой пользователи смогут познакомиться с актерами. Как можно увидеть, на этой странице я прикрепила фотографии, с помощью тега <img src=””>, которые будут видны на сайте. Так эта страница выглядит. (рис.17,18,19)
Следующая страница – это галерея, где пользователи смогут посмотреть фотографии. Она была сделана почти также, как и предыдущая страница. Ниже будут представлены фотография кода и изображение страницы в интернете. (рис.20,21)
Позже, с помощью JS, я хочу создать из этих фотографий интерактивную галерею.
Это последняя станица нашего сайта – страница с отзывами. Чтобы оформить цитаты, я применила тег <blockquote>. Так эта страница выглядит в интернете. (рис.22,23)
На этом заканчивается разработка HTML-документов, но начинается разработка оформления сайта с помощью CSS.
-
Стилизация сайта с помощью CSS. Я хочу, чтобы сайт был интересным и привлекательным для пользователя, поэтому подберу красивый шрифт из библиотеки шрифтов. Привязав шрифт к странице сайта, система поймет какой шрифт использовать. Чтобы сделать это, воспользуемся тегом <link href>, а после «href» вставим ссылку на шрифт, а также сразу привяжем одноименные файлы, но уже в формате .css. Покажу это на примере одной страницы, потому что на других все будет точно такое же. (рис.24)
Далее, я буду работать с оформлением главной страницы. Хочу добавить для нее фон – кусок фильма, а также просто оформить страницу красиво. Для первой задачи мне нужно будет добавить тег <video>, в котором с помощью тега <source src=””> укажу путь к видео. (рис.25)
После этого нужно оформить сайт до конца. (рис.26,27,28,29,30,31)
Это весь код для CSS-оформления главной страницы сайта. Теперь она выглядит вот так. (рис.32)
При нажатии на надписи: About Film, Actors, Gallery, Reviews, пользователь может перейти на другие страницы сайта, которые тоже оформлены в подобном стиле. Ниже я покажу, как они будут выглядеть в интернете. Чтобы подробнее ознакомиться с моим кодом, я прикреплю ссылку мой сайт в общественном доступе. (рис.33,34,35,36)
-
Добавление интерактивности с помощью JavaScript
Как я и говорила выше, я хочу сделать интерактивную галерею, поэтому к файлу gallery.html нужно привязать файл с JS(te.js). Это сделать я могу с помощью тега <script src=””>. (рис. 37)
Внутри файла я напишу такой код, чтобы при нажатии на фото, оно открывалось на весь экран. Еще я сразу добавила кнопку для закрытия фотографии. (рис.38)
Теперь эта страница выглядит так. (рис.39)
На этом заканчивается разработка моего сайта. Вот ссылка на него: https://frutonana.github.io/science-work/te.html Далее нужно протестировать на разных устройствах, чем я и займусь в следующем блоке создания сайта.
6. Заключение.
В ходе рассмотрения языков веб-разработки для создания сайтов, можно сделать следующие выводы о них.
1. HTML (язык гипертекстовой разметки) является основой любого веб-сайта. Он определяет структуру и содержимое страницы, позволяет создавать различные элементы, такие как заголовки, параграфы, таблицы, формы и т. д. HTML важен для доступности, SEO-оптимизации и обеспечения хорошей структуры сайта.
2. CSS (каскадные таблицы стилей) используется для стилизации веб-страниц и создания привлекательного визуального оформления. С помощью CSS можно управлять цветами, шрифтами, отступами, размещением элементов и многим другим. CSS важен для создания современного и профессионального внешнего вида сайта.
3. JavaScript является языком программирования, который добавляет динамику, взаимодействие и функциональность на веб-страницы. С помощью JavaScript можно создавать сложные веб-приложения, анимации, выполнять валидацию форм, обработку событий и многое другое. JavaScript является неотъемлемой частью современной веб-разработки.
Выводы:
Языки веб-разработки играют важную роль в создании сайтов и веб-приложений. Каждый язык имеет свои особенности, преимущества и области применения. HTML, CSS и JavaScript являются основными языками, необходимыми для создания современного веб-сайта с привлекательным дизайном и интерактивностью. Выбор языка зависит от потребностей и целей проекта, а также от опыта и уровня веб-разработчика.
Важно также отметить, что развитие языков веб-разработки и появление новых инструментов и фреймворков происходит постоянно. Поэтому веб-разработчикам необходимо быть в курсе последних тенденций и постоянно обновлять свои навыки, чтобы оставаться конкурентоспособными и создавать современные, эффективные и безопасные сайты.
Приложение
Рис. 1.
Рис. 2.
Рис. 3.
Рис. 4.
Рис. 5.
Рис. 6.
Рис. 7.
Рис. 8.
Рис. 9.
10.
Рис. 11.
Рис. 12.
Рис. 13.
Рис. 14.
Рис. 15.
Рис. 16.
Рис. 17.
Рис. 18.
Рис. 19.
Рис. 20.
Рис. 21.
Рис. 22.
Рис. 23.
Рис. 24.
Рис. 25.
Рис. 26.
Рис. 27.
Рис. 28.
Рис. 29.
Рис. 30.
Рис. 31.
Рис. 32.
Рис. 33.
Рис. 34.
Рис. 35.
Рис. 36.
Рис. 37.
Рис. 38.
Рис. 39.