XII Международный конкурс научно-исследовательских и творческих работ учащихся

Старт в науке

Создание сайта в формате HTML

• Авторы
• Руководители
• Файлы работы
• Наградные документы

Ялин Е.О. 1

---

1ГОУ "ЗАБАЙКАЛЬСКИЙ КРАЕВОЙ ЛИЦЕЙ-ИНТЕРНАТ"

Иванова А.А. 1

---

1ГОУ "ЗАБАЙКАЛЬСКИЙ КРАЕВОЙ ЛИЦЕЙ-ИНТЕРНАТ"

Работа в формате PDF

2.7 MB

Автор работы награжден дипломом победителя III степени

Диплом школьникаСвидетельство руководителя

Введение

Свою проектную работу я посвятил созданию сайта в формате языка разметки HTML. В своей работе я хочу изучить основы языка разметки HTML и создать информационный сайт для ребят Забайкальского края, которые начинают кататься на трюковом самокате. Актуальность данного проекта заключается в том, что в наше время появилось очень много молодых райдеров (от англ. «rider» [ˈraɪdə] сущ. наездник, всадник) на трюковых самокатах, которые не очень хорошо разбираются в сборке деталей и их комбинировании. Цель моей работы создать специальный сайт, который поможет многим новичкам обучиться сборке трюкового самоката и понять, как правильно сочетать детали. Основные задачи для достижения цели:

Изучить основы программирования с помощью языка разметки HTML.

Провести опрос для создания сайта.

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

Глава 1. Теоретическое обоснование проекта

Обоснование выбора и темы проекта

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

Как только начинаешь думать о создании своего информационного сайта, наталкиваешься на длинные рассуждения о знании html, javascript, php и прочих языков и технологий. Соответствует ли это действительности?Интерес в том, что создать сайт бесплатно самому можно, даже не зная языка разметкиhtml. Достаточно найти подходящий конструктор сайтов, чтобы быстро сделать и разместить свой сайт в интернете.Конструктор сайта – эта программа, которая позволяет из готовых шаблонов создать ваш собственный сайт.

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

Создание сайта потребует желания изучать что-то новое, пробовать на практике и не останавливаться на достигнутом. Все это занимает время. Но в результате, уже через некоторое время можно с гордостью сказать: "Я сделал свой сайт".

История возникновения и основные элементы языка HTML

В 1991 году британец Тимоти Джон Бернерс-Ли в Женевском Центре высоких энергий (CERN) изобрел язык гипертекстовой разметки, он же HyperTextMarkupLanguage, он же HTML, предназначенный для разметки и оформления документов WorldWideWeb.

Еще Сэр Тим разработал глобальный гипертекстовый проект (сейчас мы его знаем как Всемирную паутину). Собственно, HTML и родился в процессе работы над этим проектом.Точная дата создания HTML не известная, так как это был долгосрочный проект. А рождение первого веб-сайта – 6 августа 1991 года.

Что же такое язык HTML?

HTML (Hyper Text Markup Language) - язык разметки гипертекста.

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

Язык разметки HTML создавался для того, чтобы им могли пользоваться и люди-неспециалисты в области верстки.

Разработчики HTML смогли решить две задачи:

1) предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;

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

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

Например:

<b>Что такое html?</b> - этот текст будет отображаться жирным;

<i>Этот текст будет выделен курсивом</i>

В данном случае, символы <b></b> - делают текст жирным, а символы <i></i> - курсивом. Такие символы составляют основу html, они называются ТЕГАМИ. Между < и > находится имя тега и его параметры (если они есть).

В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.

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

Теги могут иметь параметры (или атрибуты), например,

<body bgcolor="red">Здесьсодержимое</body>

В данном случае тег <body> имеет параметр bgcolor, значение которого равно "red". Переводя на человеческий язык - сделать фон документа красного цвета.

По сути, HTML - это набор тегов и их параметров

Особенности использования и преимущества языка HTML

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

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

Т.е. уже с первых дней у HTML были такие плюсы:

- простота - за счет небольшого набора структурных элементов – дескрипторов (они же «теги»). Все теги пишутся в угловых скобках, напр. <img> и несут какую-то смысловую нагрузку;

- возможность форматировать документ без привязки к средствам отображения (будь то монитор компьютера, экран телефона)

Где может использоваться HTML?

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

Преимущества языка HTML:

- меньший вес;

- экономичный расход ресурсов сервера;

- не требуется обновления движка или отдельных модулей;

- практически неуязвим к взлому;

- упрощенная система создания бэкапа;

- высокий уровень безопасности данных;

- высокая стабильность (если ошибка допущена на одной странице, она не может затронуть работу всего сайта).

Глава 2. Практическое описание проекта(реализация)

2.1. Основные проблемы

Процесс создания сайта «ScooterFiles»начался с осознания проблемы, что этот сайт для меня – это необходимый инструмент для развития вида спортивного движения на трюковых самокатах в Забайкальском крае. С помощью моего сайта самокатеры (подростки 13-17 лет) смогут подобрать детали и сконструировать трюковые самокаты по собственным предпочтениям.

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

2.2. Создание сайта ScooterFiles

Виды сайтов

Сайты бывают разные. Их можно классифицировать по цели их создания. Согласно данной классификации можно выделить такие сайты:

- Сайт-визитка (предоставление информации о фирме и ее услугах, состоит из 5-15стр.);

- Новостной сайт. Такие сайты можно разделить на 2 группы: тематические (сайты, посвященные какой-либо теме) и территориальные(сайты, посвященные какой-либо стране, городу, региону);

- Корпоративный сайт (средство общения и обмена информацией между сотрудниками одной фирмы, партнерами, клиентами);

- Сайт-каталог (необходимы фирмам – производителям товаров);

- Интернет-портал (мега-сайты, предлагающие большое количество сервисов);

- Блог (отдельный вид сайта посвящен отдельному человеку и его увлечениям).

Мой сайт ScooterFilesотносится к тематическому сайту, посвящен описанию деталей трюковых самокатов и теме подбора деталей для конструирования трюковых самокатов. Вёрстка моего сайта блочная.

Общая структура сайта

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

Главная страница сайта отражает тематикусайта. Она должна быть интересной для посетителей.

При разработке сайта ScooterFiles используется произвольная структура расположения страниц.

Основные этапы создания сайта

Условно можно выделить следующие основные этапы создания сайта.

1. На первом этапе необходимо сформировать основную идею создания сайта:

- Определить цель: с помощью сайта «ScooterFiles» я смогу предложить консультационные услуги для сбора трюковых самокатов.

- Определить целевуюаудиторию: я разработал сайт для молодых людей Забайкальского края (подростки в возрасте 13-17 лет).

- Определить предпочтения целевой аудитории.Чтобы сайт успешно развивался, он должен соответствовать тому, чего от него ожидают посетители. С целью изучения предпочтения целевой аудитории я провел опрос (какую информацию ищут, изучил наклонности, привычки). Это помогло мне определить основной контент (содержание) моего ресурса.

- Определение технических ограничений и технологий. Главное знать меру, технические возможности целевой аудитории. Чем проще технологии, тем большее количество посетителей можно получить.

2. Определение типа сайта.

Сайт «Scooter Files» - тематический сайт, статьи которого посвящены теме подбора деталей для конструирования трюковых самокатов.

Определение структуры сайта.

Подготовка макета сайта (подготовка картинок всех ключевых страниц сайта)

Перевод макета сайта в HTML. Существуют два вида верстки сайта (блочная и табличная).

Инструкция создания сайта в формате HTML

Нужно создать новый файл в стандартном приложении «Блокнот» и сохранить его в формате html. Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент.

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

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

Можно создать логотип. Надо сделать папку «image», в которой будут находиться все картинки, имеющие отношение к сайту. Примерный размер логотипа составляет 200х100 px, скачайте и загрузите выбранную картинку в папку. Логотипу нужно присвоить имя и сделать для него разрешение в формате png или jpg (а начиная с 2019 года в обиход входит формат webp, которые является более современным и легким).

Оформление страницы и форматирование текста.

Соединение страниц между собой и оформление контента.

Размещение сайта в интернете.

Работа с конструктором

Создавая сайт в формате языка разметки HTML,я также использовал конструктор «Nicepage», который очень сильно помог мне при создании моего сайта. Благодаря ему, я смог сделать полное оформление страниц на сайте, а также использовал дополнительные функции:

большое количество шрифтов

различные предметы оформления страниц (фигуры, шаблоны страниц любой тематики)

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

Также можно выделить отдельные недостатки и достоинства при работе с конструктором:

Достоинства:

удобный интерфейс и понятная инструкция работы с программой

большое количество функций, которые помогают оформлять сайт

быстрый и удобный экспорт файлов в любые языки, включая язык разметки HTML

возможность редактировать код в программе

Недостатки:

платная премиум версия конструктора

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

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

Давайте рассмотрим каждый вариант в отдельности и попробуем выяснить его особенности.
1) HTML – это язык разметки гипертекста. Мы набираем текст определенными правилами и получаем красивую веб-страницу. Скажем так, что это самый трудоемкий способ создания сайта. Чтобы убедиться в этом, достаточно открыть код даже маленькой html-страницы и увидеть, сколько всего там написано. Нелегко набрать столько кода, даже если будешь пользоваться html-редактором. Не правда ли? А если в этом коде нужно что–нибудь изменить, представляете, сколько времени на это может уйти?

2) Конструктор сайта – эта программа, которая позволяет из готовых шаблонов создать ваш собственный сайт.

Прежде всего, программы такого рода можно разделить на две группы:
— Off-line конструкторы – могут работать и без подключения к Интернет. Единственное, когда это подключение вам понадобиться – это когда нужно будет опубликовать сайт в сети или внести изменения в уже работающий сайт.
— On-line конструкторы – здесь же все наоборот. Весь процесс создания сайта происходит непосредственно в Сети.

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

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

Хостинг сайта

Основные шаги создания собственного сайта выполнены. Сайт создан и находится на локальном компьютере. Теперь сайт надо выложить в Интернет для доступа посетителям. Для этого необходимо приобрести доменное имя и поместить сайт на каком-нибудь сервере, предоставляющем услуги по размещению и хранению ресурса, иными словам зарегистрировать хостинг. После этого все страницы сайта станут доступными для просмотра во всем мире. Компаний, предоставляющих услуги хостинга, много. Чтобы выбрать соответствующую компанию надо провести маркетинговое исследование.

Оценка ожидаемых результатов и социальных эффектов проекта

В результате выполнения проекта создания сайта «ScooterFiles» 25-30 подростков 13-17 лет Забайкальского края будут пользоваться информационными услугами по подбору деталей для трюковых самокатов и их сборке.

Показатели ожидаемой эффективности реализации проектасоздания сайта «Scooter Files»:

1) Общее число детей и взрослых, принимающих участие в мероприятиях проекта -50 человек.

2) Число семей, находящихся в трудной жизненной ситуации, включенных в состав целевой группы проекта и получивших помощь с использованием новых методик и технологий 10 семей.

Перспективы развития проекта

Разработка сайта «Scooter Files» начата в феврале 2021 года. С этого времени в основном шла разработка раздела «Тематические статьи» «Scooter Files». Из других разделов практически ничего не создавалось. Для дальнейшего развития сайта необходимо добавить раздел«Вопросы и ответы».

Таким образом, план развития сайта будет следующий:

- Включение в работу страницы «Обратная связь»

Библиографический список

«Изучаем HTML,XHTMLи CSS» Фримен Эрик, Робсон Элизабет, 2017, издательство Питер

«HTMLиCSS. Разработка и дизайн веб-сайтов». Джон Дакетт

Интернет-ресурсы

www.site-do.ru

https://ru.wikipedia.org/wiki/HTML

Приложение 1.

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Анкета

«Трюковые самокаты»

Приложение 2.