XVIII Международный конкурс научно-исследовательских и творческих работ учащихся
Старт в науке
Создание сайта на языке HTML «Военная авиация России»
Автор работы награжден дипломом победителя I степени
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
Хочу начать с ответа на вопрос: почему сайт? В мире, когда информационные технологии так быстро развиваются, где обычное общение все больше переходит в виртуальный формат, считаю, что уже мало уметь набирать текст на компьютере, необходимо уметь презентовать себя в онлайн формате - на веб-сайтах. Но создание сайта — это не совсем простая задача, и специалисты в области веб-дизайна имеют абсолютно разные зарплаты: от 30 тысяч рублей до 300 тысяч рублей, в зависимости от использования ИТ-технологий.
Решил разобраться в этом вопросе. А самый простой способ разобраться в технологиях, это с помощью них решить «задачку». И я поставил себе цель – сделать сайт о военной авиации РФ.
Моя цель: создание сайта на языке HTML «Военная авиация России»
Задачи:
Собрать и проанализировать информацию о способах и редакторах создания сайтов. Выбрать более подходящий редактор.
Изучить основные инструменты программы, основы используемого языка программирования.
Собрать информацию и подготовить картинки для размещения на сайте по выбранной теме.
Создание кода страниц сайта.
Размещение сайта на открытом общедоступном сайте.
Предполагаемый продукт проекта: сайт о военной авиации России
Теоретическая часть
Существует несколько способов создания сайтов. В зависимости от вашего бюджета, опыта и конкретных потребностей существует выбор из бесплатных платформ веб-разработки, таких как WordPress и Wix, систем управления контентом с открытым исходным кодом, таких как Drupal и Joomla. Сайт можно создать, воспользовавшись языком разметки гипертекста HTML в любом текстовом редакторе, а можно воспользоваться специальным программным обеспечением – визуальными HTML-редакторами или конструкторами сайтов.
Я разбил для своего понимания все приложения для веб-разработки на 3 группы: всё моё(1 группа), основа чужая – наполнение моё (2 группа) и всё чужое – моего чуть-чуть (3 группа). Таблица 1 помогла мне проанализировать плюсы и минусы этих групп.
Таблица 1. Плюсы и минусы приложений
|
1 группа |
2 группа |
3 группа |
|
|
Представители приложений |
Sublime text, Блокнот |
Dreamweaver |
Wix, Tilda, Тинькофф |
|
Особенность работы |
В программе создаешь страницы «с нуля», есть проверка (подсветка) парных тегов обеспечивающая появление ошибок. |
Программа позволяет создавать страницы «с нуля» или на основе готовых шаблонов по принципу |
конструктор, позволяющий собирать многостраничные сайты из готовых блоков, по готовым шаблонам. |
|
Стоимость |
Только за размещение на хостинге |
от 1545 до 2 435 руб./месяц |
Есть пробный период, тариф зависит от того, как вы оплачиваете сайт – ежемесячно или за 1 год. |
|
Наличие рекламы |
нет |
нет |
Есть, плата за «отсутствие» рекламы |
|
Простота работы, необходимые навыки для старта |
Необходимо иметь базовые знания HTML, CSS |
Необходимо иметь базовые знания HTML, CSS и web-программирования. |
Прост в освоении, работа по принципу «измени чужое на свое» |
|
Плюсы |
Работа в «оффлайн». На сайте только то, что нужно тебе. Не перегружен пустыми блоками. Бесплатен. Есть визуальный редактор, подсказки при вводе, подсветка синтаксиса. |
Работа в «оффлайн». Есть визуальный редактор, подсказки при вводе, подсветка синтаксиса, инструменты отладки и другие полезные функции, ускоряющие разработку. |
Не требуется базовых знаний, можно быстро создать многостраничный сайт. |
|
Минусы |
Занимает большее количество времени на разработку. |
Серьёзные системные требования (слабое «железо» не подойдёт) и высокая стоимость. |
Работа только в режиме «онлайн». Чем больше бесплатного, тем больше чужой, в том числе и «конкурентной» рекламы размещается на твоей странице. |
В результате составления таблицы для себя решил отдать предпочтение 1 группе, а именно в программе Sublimite Text создать свой первый сайт. Для этого мне необходимо изучить базовые знания HTML.
Практическая часть
Для начала создания сайта необходимо продумать содержание и его структуру.
Моя мечта – стать военным летчиком. Могу назвать своим хобби изучение самолетов, новейших технологий в авиастроении. Отдельное восхищение вызывает профессия летчик. Сколько героических историй и сюжетов описывает летные подвиги русских пилотов начиная с ВОВ до настоящего времени. Именами русских летчиков названы самые рискованные фигуры высшего пилотажа: «петля Нестерова», «Колокол Квочура», «Чакра Фролова». Именно по этому, совместив учебу и хобби, я решил создать сайт о военной авиации России.
Из общедоступных источников я подобрал фото самолетов, собрав их в одной папке. Текст отбирал и сохранял в текстовом процессоре Word. Теперь необходимо продумать структуру сайта. Для первого опыта решил ограничиться такой (Рис.1):
С главной страницы необходимо было продумать навигацию – переходы к остальным и обратно. Переходы с главной страницы решил осуществить по нажатию кнопок, а возврат на Главную страницу по гиперссылке.
Приступая к реализации оформления сайта изучаю основы языка разметки гипертекста, по принципу «беру, что надо».
HTML – наиболее широко используемый язык для создания веб-сайтов. HTML очень удобен для тех, у кого мало опыта в программировании, поскольку он не требует знания более сложных языков программирования, таких как JavaScript.
Элементы HTML являются строительными блоками HTML страниц. HTML предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и других элементов. Элементы HTML выделяются тегами, записанными с использованием угловых скобок. Такие теги, как <img> и <input>, напрямую вводят контент на страницу. Другие теги, такие как<p>, окружают и оформляют текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры не отображают HTML-теги, но используют их для интерпретации содержимого страницы. Включение CSS в HTML описывает внешний вид и макет страницы.
Основные используемые мной теги, на примере кода разрабатываемых мной страниц, привожу в таблице 2.
Таблица 2. Используемые теги
|
Код страницы |
Описание действия |
|
<html></html> |
Обязательный начальный тег в структуре сайта. |
|
<title> История военных самолётов </title> |
Название ярлыка вкладки окна браузера |
|
body{ background-image: url("image/MAIN.jpg"); background-repeat: repeat-no; background-position: center; } |
Установка свойств фона страницы свойство фона: картинка не повторяется расположение по центру |
|
<h1><center><b><font color="navy" ="5">ИСТОРИЯ ОТЕЧЕСТВЕННОГО САМОЛЁТОСТРОЕНИЯ</font></b></center> </h1> |
Заголовок 1 уровня (h1) Жирное начертание (b) Цвет шрифта (font color) – синий Расположение по центру (center) |
|
<font size="5"> |
Размер шрифта в процентах к странице |
|
<table border="3"></table> |
Таблица (table), с рамкой (border) толщиной в 3 в процентах к странице |
|
<tr></tr> |
Строка таблицы |
|
<td colspan="2"><center><b><font size="6">1910 год. Организован Императорский военно-воздушный флот</b></center></td> |
Объединение двух ячеек строки таблицы (td colspan= ="2") и расположение текста по центру |
|
<tr> <td><img src="РИс.1 ВО.jpg"></td> |
Вставка в ячейку таблицы рисунка(<td><img src>) |
|
<td><font size="5"><p align=justify>Более ста лет насчитывает российская военная авиация. </td></tr> |
Выравнивание текста по ширине ячейки (<p align=justify>) |
|
<ul> <li>Максимальная скорость: 2 500 км/ч <li>Дальность полета: 3530 км |
Создание маркированного списка |
|
<p><a href="index.html"> НАГЛАВНУЮ <a> |
Гиперссылка по тексту (a href) |
|
<style> .c-button { border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186); border-width: 7px; width: 400px; height: 50px; text-align: center; margin: 1em; }</style> |
Организация стиля кнопки (css) Цвет рамки кнопки (border-color) Размер текста кнопки (border-width) Ширина кнопки (width: 400px;) Высота кнопки (height: 50px;) Расположение текста на кнопке по центру (text-align: center;) Отступ со всех 4-х сторон (margin: 1em;) |
|
a.rollover { background: url(su-27.jpg); /* Путь к файлу с исходным рисунком */ display: block; /* Рисунок как блочный элемент */ width: 300; /* Ширина рисунка */ height: 200; /* Высота рисунка */ } a.rollover:hover { background: url(су-27-2.jpg); /* Путь к файлу с заменяемым рисунком */ } |
Динамический блок. (css) Происходит смена картинки при наведении мыши |
Полученные страницы приведены в приложении 1.
Последний этап – размещение сайта в сети Интернет. Для начала я провел тестирование сайта: как отображаются картинки, кнопки, не сдвигаются ли фоны при изменении размеров отображаемого экрана и при смене браузеров. Пришлось несколько раз искать новые свойства для фонов, чтобы изображения были корректными. Для размещения необходимо было подобрать подходящий хостинг. По подбору мне помогли родители, оплатили платный хостинг HostiMan с выделенным доменом. Размещение на хостинге совсем простое, копирование в папку хостинга www всех полученных файлов со страницами и папки с используемыми картинками.
Заключение
В этой работе мною был создан сайт на языке HTML «Военная авиация России». Цель достигнута, все задачи выполнены.
Из научных статей, и мастер-классов я нашел различные возможности создания страниц для полноценного сайта.
Показав свою работу одноклассникам, пришли мысли на создание и присоединению дополнительных страниц к этому сайту информации о героических подвигах летчиков.
Информационные источники
История авиации
Статья «Фигуры высшего пилотажа» [электронный ресурс] https://ru.wikipedia.org/wiki/Пилотаж#Фигуры_высшего_пилотажа (дата обращения 28.02.2023)
Сайт «Патриотическийклуб «Авиатор» [электронный ресурс] http://aviator31.com.ru/ (дата обращения 28.02.2023)
Язык разметки HTML
Статья «Основы HTML» [электронный ресурс] https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics (дата обращения 28.02.2023)
Статья «Основы HTML5» [электронный ресурс] https://html5book.ru/osnovy-html/ (дата обращения 28.02.2023)
Приложение 1
Сайт «Военная авиация России»
рис.1. Главная страница
рис.2. История отечественного самолетостроения
рис.3. История отечественного вертолетостроения
рис.4. Современная военная авиация РФ
Ссылка сайта на хостинге http://zudina-al.ru/index.html