Тип работы:
Предмет:
Язык работы:


Основы разработки сайтов. Курс внеурочной деятельности (Государственный Социально-Государственный Университет)

Работа №118202

Тип работы

Дипломные работы, ВКР

Предмет

информатика

Объем работы75
Год сдачи2023
Стоимость1500 руб.
ПУБЛИКУЕТСЯ ВПЕРВЫЕ
Просмотрено
69
Не подходит работа?

Узнай цену на написание


Введение 3
Глава I. Понятие языка гипертекстовой разметки HTML 5
1.1. История создания и развития языка HTML 5
1.2. Описание языка. Основные теги 12
Понятие тега, атрибута. Структура HTML документа 12
Редактирование и форматирование текста. Создание списков 15
Блочные и встроенные элементы 23
Создание таблиц 25
Гипертекстовые переходы 27
Импорт аудио, видео и графических файлов 29
1.3. Характеристика HTML-редакторов 31
Atom 31
Visual Studio Code 33
Sublime Text 34
Adobe Brackets 36
Notepad++ 38
Блокнот 39
FrontPage 40
Глава II. Понятие каскадных таблиц стилей CSS 42
2.1. История создания и развития CSS 42
2.2. Теоретические аспекты CSS 46
Подключение к HTML документу. 46
Селекторы 50
Цвета 54
Текст и шрифт. 56
Управление блоками. 60
Глава III. HTML в школе. Курс «Основы разработки сайтов» 65
3.1.Основы сайтостроения в школьное курсе информатики. 65
3.2. Курс "Основы разработки сайтов" 68
Заключение 71
Список используемых источников. 72

Сайт - это интернет-ресурс, состоящий из одной, нескольких или множества виртуальных страниц. Все страницы связаны между собой ссылками и обычно объединены общей темой или задачей. Большинство компьютеров подключены к интернету и используют его возможности, но вряд ли простой обыватель задумывается о том, как это все работает и выводится на экран, он преследует простую цель – получить требуемую для него информацию в доступном для него виде и в последующем использовать её. Одной из составных частей, на которой базируется создание сайтов и которая помогает нам его «написать», является язык разметки HTML.
Создание сайтов стало одной из наиболее востребованных и актуальных услуг. При этом разработчики часто сталкиваются с важной проблемой — это изучение, понимание и осмысление того, что нужно для работы и для кого это будет создано. Многие люди интересуются по поводу того, как нужно писать сайт, какие языки требуется при этом использовать и иные подобные вопросы. Поэтому эта работа посвящена языку HTML и каскадным таблицам стилей CSS, как одним из возможных инструментов разработки сайтов, и возможностям его изучения в средней школе. В связи с этим можно выделить цели, объект и задачи выпускной квалификационной работы.
Цель работы: изучить понятие языка HTML, понятия таблиц CSS, проанализировать ПО для работы с HTML, рассмотреть возможность изучения этих средств в средней школе.
Объект работы: язык HTML, таблицы стилей CSS программное обеспечение, предназначенное для работы с HTML, основы сайтостроения, представленные в школьных учебниках информатики за 9 и 11 класс.
Предмет исследования: основные возможности языка HTML и CSS, программного обеспечения, предназначенного для работы с HTML, возможные способы и возможности изучения курса сайтостроения в школе.
Задачи:
• изучить понятие языка HTML, его историю создания и развития, его основные теоретические аспекты
• изучить понятие каскадных таблиц стилей CSS, его историю создания и развития, его основные теоретические аспекты
• рассмотреть некоторые HTML – редакторы, определить их достоинства и недостатки
• разработать курс внеурочной деятельности по основам сайтостроения для учащихся 9-10 классов.
Моя выпускная квалификационная работа состоит из 3 глав.
Первая глава поделена на три части. Первая часть посвящается истории создания HTML и этапам его развития. Во второй части первой главы приведен теоретический материал по данному языку разметки. В третьей части даётся краткие характеристики некоторых HTML редакторов (особенности, достоинства и недостатки)
Вторая глава поделена на 2 части. Первая часть посвящается истории создания CSS и этапам его развития. Во второй части приведен теоретический материал по данным каскадным таблицам стилей.
В третьей главе я проанализировал некоторые учебники школьного курса информатики и информацию в них, посвященную основам сайтостроения, а также предложил собственную концепцию курса посвященную HTML и CSS.


Возникли сложности?

Нужна помощь преподавателя?

Помощь в написании работ!


Исходя из написанной работы, можно прийти к выводу, что цели и задачи, поставленные в введении, были выполнены. Я изучил понятие языка HTML, познакомился с основными понятиями, основными тегами и аргументами проанализировал ПО для работы с HTML, рассмотрел возможности изучения этих средств в средней школе путём создания пробного курса лабораторных работ для учащихся.
Сегодня, в век интернета, умение создавать web-страницы и сайты становится элементом общей культуры человека информационного общества. По этой причине разделу web-программирования должно отводиться значительное место в программе изучения информатики и информационных технологий.
World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам интернета. Поэтому, одним из важных умений при реализации проектных творческих работ учащихся должно являться создание web-сайтов.
Знание языка HTML позволит создавать не только личные сайты, но и эффектные локальные приложения-презентации, проекты и другие учебные материалы.
Данная работа является вводной частью и подготовкой к моей выпускной квалификационной работе. В ней мы еще глубже изучим HTML, узнаем о форматировании текста с помощью CSS, а также проработаем, добавим и усовершенствуем лабораторные работы для учащихся



1. 10 лучших HTML редакторов. // Сайт «Делаю сам» [Электронный ресурс] Режим доступа: https://uspet-vse.ru/articles/html-redaktor-mozhno-ispolzovat.html (дата обращения 01.12.2022г.)
2. Барнаш В.Г., Коваленко Т.А. HTML – развитие языка стандарта отображения страниц [Текст] / В.Г. Барнаш, Т.А. Коваленко // Научный журнал «Вестник научных конференций». – 2017. - №18 – С. 14 – 15.
3. Белаш В. Ю., Смирнов В.В. Возможности применения технологии HTML в образовательном процессе [Текст] / В.Ю. Белаш, В.В. Смирнов. // Материалы «Региональной университетской научно-практической конференции» - 2018. – С. 344 – 347.
4. Гагарин А.Г., Рогачев А.Ф., Плещенко Т.В. Применение языка гипертекстовой разметки для разработки интернет-ресурсов [Текст] / А.Г. Гагарин, А.Ф. Рогачев, Т.В. Плещенко. – г. Волгоград.: Издательство Нива, 2013.
5. Голубева И.Е., Галанина О.В., Павлютина И.П. Основы HTML. [Текст] / И.Е. Голубева, О.В. Галанина – г. Брянск, Издательство Брянской государственной сельскохозяйственной академии, г. 2014
6. Демчинова Е. А., Исаева М. В. Web Программирование в 4 частях. Часть 1. [Текст] / Демчинова Е. А., Исаева М. В. – г. Кострома, Издательство Костромского государственного университета, г. 2017.
7. Замалетдинов Н.И. Создание сайта на языке HTML по теме «компьютерные сети» [Текст] / Н.И. Замалетдинов // Материалы региональной молодежной научно-технической конференции «Автоматика и электронное приборостроение» - 2018. – С. 92 - 94.
8. Изображения в HTML. // Сайт «MDN Web Docs.org» [Электронный ресурс] Режим доступа:https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML (дата обращения 05.12.2022г.)
9. Коваленко Т.А., Барнаш В.Г. Анализ возможностей языка HTML [Текст] / Т.А. Коваленко, В.Г. Барнаш // Научный журнал «Наука и мир». - 2017. - №44 – С. 54 - 65.
10. Нигай Р.М. Методические указания и практические работы по созданию web-сайтов на языке HTML [Текст] / Р.М. Нигай. – г. Москва.: Издательство Спутник, 2022.
11. Описание среды разработки Microsoft Visual Studio. // Сайт «Studbooks.net» [Электронный ресурс] Режим доступа: https://studbooks.net/2258619/informatika/opisanie_sredy_razrabotki_microsoft_visual_studio (дата обращения 02.12.2022г.)
12. Основы HTML. // Сайт «Aboozov.com» [Электронный ресурс] Режим доступа: https://abuzov.com/osnovy-html/#istor (дата обращения 15.11.2022г.)
13. Семикопенко А.А. Учебник по HTML. [Текст] / А.А. Семикопенко – г. Санкт – Петербург, Издательство Гангут, 2021.
14. Спиридонов А.А. Методические особенности преподавания HTML в школе [Текст] / А.А. Спиридонов // Материалы «70-й научно-практической конференции преподавателей и студентов» - 2021. – С. 939 – 941.
15. Списки HTML // Сайт «HTMLBoss.ru» [Электронный ресурс] Режим доступа: http://htmlboss.ru/beginner-lessons/lesson8 (дата обращения: 30.11.2022г.)
16. Тевс Д.П. Основные методы подготовки Интернет-страниц. [Текст] / Д.П. Тевс – г. Барнаул, Издательство Алтайской государственной педагогической академии, 2012.
17. Тег . // Сайт «HTMLBook.ru» [Электронный ресурс] Режим доступа: http://htmlbook.ru/html/img (дата обращения: 05.12.2022г.)
18. : имя заголовка документа // Сайт «MDN Web Docs.org» [Электронный ресурс] Режим доступа: https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 01.12.2022г.)<br /> 19. HTML – атрибуты. // Сайт «HTML5Book.ru» [Электронный ресурс] Режим доступа: https://html5book.ru/html-attributes/ (дата обращения: 25.11.2022г.)<br /> 20. HTML – мнемоники // Сайт «Unicode-table.com» [Электронный ресурс] Режим доступа: https://unicode-table.com/ru/html-entities/ (дата обращения: 27.11.2022г.)<br /> 21. HTML Цвета. // Сайт «ColorScheme.ru» [Электронный ресурс] Режим доступа: https://colorscheme.ru/html-colors.html (дата обращения: 29.11.2022г.)<br /> 22. Microsoft FrontPage. // Cайт «Википедия» [Электронный ресурс] Режим доступа: https://translated.turbopages.org/proxy_u/en-ru.ru.d1ea8af1-6382455c-17e8c580-74722d776562/https/en.wikipedia.org/wiki/Microsoft_FrontPage (дата обращения 03.12.2022г.)<br /> 23. Notepad ++. // Сайт «Wiki-wiki.ru» [Электронный ресурс] Режим доступа: https://wp.wiki-wiki.ru/wp/index.php/Notepad%2B%2B (дата обращения 31.11.2022г.)<br /> 24. SGML. // «Сайт «Википедия» [Электронный ресурс] Режим доступа: https://ru.wikipedia.org/wiki/SGML (дата обращения: 25. 11. 2022г.)<br /> 25. . http://htmlbook.ru/HTML/span<br /> 26. . http://htmlbook.ru/samcss/psevdoklassy<br><button class="btn" onclick="location.href='//workspay.ru/work/118202/#w_order_last';">Купить</button></div> </noindex> <br> </div> </div> <a id="order"></a> <div class="wtab"> <div id="tabs5" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <div class="t-left"><div class="t-right"> <ul class="clear ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="w_order" aria-labelledby="ui-id-5" aria-selected="false" aria-expanded="false"><span><a href='//workspay.ru/work/118202/#w_order_last'><strong>КУПИТЬ</strong></a></span></li> </ul> </div> </div> <div id="w_order1" > <noindex> <div id="w_order_last" class="OrderFrame ui-tabs-panel ui-widget-content ui-corner-bottom "> <p class="winfo">Работу высылаем на протяжении 30 минут после оплаты.</p> <form method="post" enctype="multipart/form-data" action="//workspay.ru/work/118202/#order" id="WNF"> <input type="hidden" name="w_order" id="w_order" value="w_order_new" /> <div> <label for="fio">ФИО <span class="req">*</span></label> <input type="text" required="required" name="fio" id="fio" value="" /><span id="fio_er" class="ferror"></span> </div> <div> <label for="email">E-mail для получения работы <span class="req">*</span></label> <input type="text" required="required" name="email" id="email" value="" /><span id="email_er" class="ferror"></span> </div> <div> <label for="mphone">Телефон <span class="req">*</span></label> <input type="text" required="required" name="mphone" id="mphone" value="" /><span id="mphone_er" class="ferror"></span> </div> <div> <label for="ucomm">Дополнительная информация, вопросы, комментарии</label> <textarea name="ucomm" id="ucomm" style=""></textarea> </div> </noindex> <!--div> <label for="otkuda">Откуда узнали о сайте <span>*</span></label> <select name="otkuda" id="otkuda" required><option value="0">- выберите из списка -</option><option value="2">Google.com</option><option value="44">Yandex.ru</option><option value="301">Вконтакте (соц сеть)</option><option value="302">Одноклассники (соц сеть)</option><option value="300">От друзей</option><option value="304">Прочее</option></select> <span class="ferror" id="er_otkuda">Пожалуйста, укажите откуда вы узнали о сайте!</span> </div--> <!--div> <label for="check_code">Код с картинки <span class="req">*</span></label> <input type="text" name="check_code" id="check_code" value="" style="width:50px;" required="required" /> <img src="check_code.php" border="0" vspace="1" hspace="1" id="ChkCodeImg" style="vertical-align:middle;"/> <small><a href="javascript:void(null)" onclick="document.getElementById('ChkCodeImg').src = 'check_code.php?'+Math.random();">Обновить рисунок</a></small><span id="check_code_er" class="ferror"></span> </div--> <div> <label for="accept"> </label> <input type="checkbox" required="required" name="accept" id="accept" value="y" /> С <a href="//workspay.ru/uslovia-pokupki-raboti/" target="blank" id="uslovia">условиями приобретения работы</a> согласен<span id="accept_er" class="ferror"></span> </div> <div> <label></label> <input type="hidden" class="recaptcha-field" name="g-recaptcha-response" /><br/><br/> <input type="submit" value="Заказать" class="btn" /> </div> </form> </div> </div> <div class="wtype_block"> <h2 class="yellow">Подобные работы</h2> <ul> <li><a href="//workspay.ru/work/154743/">ВНЕУРОЧНЫЙ КУРС КАК СРЕДСТВО РАЗВИТИЯ ЭЛЕМЕНТОВ ФУНКЦИОНАЛЬНОЙ ГРАМОТНОСТИ</a><br /> <small>Дипломные работы, ВКР, педагогика. Язык работы: Русский. Цена: 4800 р. Год сдачи: 2024</small></li> <li><a href="//workspay.ru/work/41581/">ПОЗНАВАТЕЛЬНАЯ ДЕЯТЕЛЬНОСТЬ УЧАЩИХСЯ 5-6-х КЛАССОВ В ПРОПЕДЕВТИЧЕСКОМ КУРСЕ МАТЕМАТИКИ С ИСПОЛЬЗОВАНИЕМ ПРОГРАММЫ GEOGEBRA </a><br /> <small>Магистерская диссертация, педагогика. Язык работы: Русский. Цена: 4900 р. Год сдачи: 2018</small></li> <li><a href="//workspay.ru/work/158576/">Формирование функциональной грамотности обучающихся 5-6 классов в процессе обучения математике на основе использования контекста повседневной жизни</a><br /> <small>Магистерская диссертация, педагогика. Язык работы: Русский. Цена: 4650 р. Год сдачи: 2024</small></li> <li><a href="//workspay.ru/work/14723/">Обучение использованию векторного метода в школьном курсе геометрии </a><br /> <small>Дипломные работы, ВКР, математика. Язык работы: Русский. Цена: 4900 р. Год сдачи: 2018</small></li> <li><a href="//workspay.ru/work/15544/">Организация коллективной проектной деятельности учащихся на уроках предмета «Технология»</a><br /> <small>Дипломные работы, ВКР, педагогика. Язык работы: Русский. Цена: 4900 р. Год сдачи: 2018</small></li> <li><a href="//workspay.ru/work/22438/">Разработка методического обеспечения программы дополнительной профессиональной подготовки «Методика профессионального обучения» </a><br /> <small>Бакалаврская работа, информатика. Язык работы: Русский. Цена: 5900 р. Год сдачи: 2018</small></li> <li><a href="//workspay.ru/work/31273/">Конструирование содержание и технологии обучения web-программированию старшеклассников в процессе внеурочной деятельности </a><br /> <small>Магистерская диссертация, педагогика. Язык работы: Русский. Цена: 4900 р. Год сдачи: 2018</small></li> <li><a href="//workspay.ru/work/33120/">ОРГАНИЗАЦИЯ ПРОЕКТНОЙ ДЕЯТЕЛЬНОСТИ СТАРШИХ ШКОЛЬНИКОВ В ПРЕДМЕТНОЙ ОБЛАСТИ «ИСТОРИЯ» </a><br /> <small>Дипломные работы, ВКР, педагогика. Язык работы: Русский. Цена: 6500 р. Год сдачи: 2019</small></li> <li><a href="//workspay.ru/work/36508/">ИНТЕРАКТИВНЫЕ МЕТОДЫ ОБУЧЕНИЯ НА УРОКАХ ПО ОСНОВАМ БЕЗОПАСНОСТИ ЖИЗНЕДЕЯТЕЛЬНОСТИ КАК СРЕДСТВО ФОРМИРОВАНИЯ БЕЗОПАСНОГО ПОВЕДЕНИЯ ПОДРОСТКОВ</a><br /> <small>Магистерская диссертация, безопасность жизнедеятельности (БЖД). Язык работы: Русский. Цена: 5700 р. Год сдачи: 2019</small></li> </ul> </div> </div> <div class="pc_menu"> </div> </div> </div> </div> <!--Content left--> <div class="sidebar_left"><div class="in"> </div> </div> </div> </div> </div> <br style="clear:both;" /> <div class="empty" id="empty"></div> </div> </div> <!--Footer--> <div class="foot_mob"> ©2025 Cервис помощи студентам в выполнении работ </div> <div class="footer_block"> <div id="footer"> <!-- menu2 --> <noindex> <div class="menu2"> <a href="//workspay.ru/agreement/" title="agreement">Соглашение</a> <a href="//workspay.ru/partneram/" title="Партнерам">Инструкция</a> <a href="//workspay.ru/avtoram/" title="Авторам">Авторам</a> <a href="//workspay.ru/pokupatelyam/" title="Покупателям">Студентам</a> <a href="//workspay.ru/faq/" title="Вопрос-Ответ">Вопрос-Ответ</a> <a href="//workspay.ru/order/" title="Заказ работы">Заказ работы</a> <a href="//workspay.ru/articles/" title="Статьи">Статьи</a> <a href="//workspay.ru/work/" title="Каталог готовых работ" class="msel">Готовые работы</a> <a href="//workspay.ru/search/" title="Поиск">Поиск</a> </div> </noindex> <!--Copyright--> <div class="copyright"> <div class="in"> <div class="left"><noindex> <p>© 2025. Сервис помощи студентам и аспирантам</p> <p>Материалы, представленные на сайте, созданы их авторами или размещены пользователями сайта и опубликованы исключительно для ознакомления. Авторские права принадлежат их законным авторам. Ответственность за разрешение любых спорных моментов, касающихся самих материалов и их содержания, берут на себя пользователи, разместившие материал на сайте. Мы готовы оказать поддержку в решении любых вопросов, связанных с работой и содержанием сайта. Если Вы заметили, что на данном сайте незаконно используются материалы, сообщите об этом нам на наш email: info@workspay.ru </p> </noindex></div> <div class="centr"> <script src="https://disshelp.ru/widget/widget.min.js" left_position_percent="97" auto_open_timeout="45"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <a href="https://api.whatsapp.com/send?phone=79168535880&text=Здравствуйте!" class="float" target="_blank"> <i class="fa fa-whatsapp my-float"></i> </a> <!-- CSS --> <style> .float{ position:fixed; width:60px; height:60px; bottom:50px; right:100px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .my-float{ margin-top:16px; } </style> </div> <div class="right"><div><noindex class="NoIndex_clr_bg_txt_and_img NoIndex_cross_txt"> <div> <p>Образовательный центр Workspay.ru,<br /> выполняет требования законодательства РФ,<br /> оказывая строго иформационные услуги.</p> <p>Workspay.ru предоставлят удобный интерфейс<br /> для совершения сделки купли-продажи.<br /> Эксперты образовательного центра WorksPay.ru<br /> осуществляют информационные услуги<br /> по сбору, обработке и структурированию информации<br /> по предложенным требованиям в заказе.<br /> Полученный результат выполненной работы<br /> на заказ либо образца готовой работы,<br /> выставленной на продажу не является<br /> готовым научным трудом,<br /> однако может служить основным источником<br /> для его написания.</p> </div> </noindex></div> </div> </div> <br style="clear:both;" /> </div> </div> <div id="overlay"></div> <div id="dhtmlwindowholder"><span style="display:none">.</span></div> <script type="text/javascript"> function checkCookies(){ let cookieDate = localStorage.getItem('cookieDate'); let cookieNotification = document.getElementById('cookie_notification'); let cookieBtn = cookieNotification.querySelector('.cookie_accept'); // Если записи про кукисы нет или она просрочена на 1 год, то показываем информацию про кукисы if( !cookieDate || (+cookieDate + 31536000000) < Date.now() ){ cookieNotification.classList.add('show'); } // При клике на кнопку, в локальное хранилище записывается текущая дата в системе UNIX cookieBtn.addEventListener('click', function(){ localStorage.setItem( 'cookieDate', Date.now() ); cookieNotification.classList.remove('show'); }) } checkCookies(); </script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PRD5ZFK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html>