Технология создания сайта HTML "Увековечение памяти героев войны в названии улиц Кировского района Санкт-Петербурга"

Опубликовано Песковатскова Оксана Михайловна вкл 06.06.2019 - 11:52

Автор:

Волков Анатолий, 8 класс

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

Существует несколько способов создания сайтов.

Во-первых, можно документ, подготовленный в текстовом процессоре (Microsoft Word), сохранить как Web-страницу (в формате HTML).

Во-вторых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который будет размещаться на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличить теги от текста, их заключают в угловые скобки.

В-третьих, можно воспользоваться специальным программным обеспечением – визуальными HTML-редакторами (Adobe Dreamweaver, Nvu) или конструкторами сайтов (uCoz, Сайткрафт).

В 2015 году празднуется 70-летие Победы в Великой Отечественной войне. Во имя высшей справедливости, во имя гордого будущего России нельзя допустить, чтобы Великая Отечественная война стала для потомков «неизвестной войной».

Скачать:

Вложение	Размер
tehnologiya_sozdaniya_sayta.pdf	625.96 КБ
sozdanie_sayta.doc	92 КБ

Предварительный просмотр:

Чтобы пользоваться предварительным просмотром создайте себе аккаунт (учетную запись) Google и войдите в него: https://accounts.google.com

Предварительный просмотр:

ПРАВИТЕЛЬСТВО САНКТ-ПЕТЕРБУРГА КОМИТЕТ ПО ОБРАЗОВАНИЮ

Государственное бюджетное общеобразовательное учреждение средняя общеобразовательная школа № 249 имени М.В. Маневича Кировского района Санкт-Петербурга

Технология создания сайта HTML

«Увековечение памяти героев войны

в названии улиц Кировского района

Санкт-Петербурга»

Секция: информатика

Выполнил: Волков Анатолий, 8 класс

Руководитель: Песковатскова Оксана Михайловна, учитель информатики первой категории

Санкт-Петербург

2014-2015 учебный год

Оглавление

Введение………………………………………………………………………………...3
Технологии создания сайта……………………………………………………………4
Технология создания сайта HTML……………………………………………………4

HTML – язык разметки гипертекста……………………………………………..4
Содержание и структура сайта…………………………………………………...4
Структура HTML документа……………………………………………………..5
Оформление сайта………………………………………………………………...6
CSS – каскадные таблицы стилей………………………………………………..7
Размещение сайта в Интернете…………………………………………………..7

Вывод…………………………………………………………………………………...7
Информационные источники…………………………………………………………8

1. Введение

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

Гипотеза: я предполагаю, что освоить технологию HTML возможно каждому, кто интересуется сайтостроением.

Объект исследования: технология создания сайта HTML.

Предмет исследования: названия улиц Кировского района Санкт-Петербурга, которые носят имя героев Великой Отечественной войны.

Цель работы: создание сайта по увековечению памяти героев Великой Отечественной войны.

Задачи: изучить и практически освоить способ создания сайта на основе технологии HTML.

Метод исследования: теоретический и практический.

Актуальность выбора темы сайта: в 2015 году празднуется 70-летие Победы в Великой Отечественной войне. Во имя высшей справедливости, во имя гордого будущего России нельзя допустить, чтобы Великая Отечественная война стала для потомков «неизвестной войной».

Меня заинтересовало, когда и в связи с чем улицы нашего района стали носить имена героев Великой Отечественной войны. Я решил изучить эту тему, выбрав несколько улиц района для исследования, выбрав несколько улиц района для исследования: проспект Маршала Жукова, улица Генерала Симоняка, улица Лени Голикова, улица Зины Портновой, улица Партизана Германа – улица, на которой я живу. И я не мог не осветить историю своей улицы, хоть она территориально относится к Красносельскому району.

2.Технологии создания сайта

Существует несколько способов создания сайтов.

Во-вторых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который будет размещаться на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличить теги от текста, их заключают в угловые скобки.

В-третьих, можно воспользоваться специальным программным обеспечением – визуальными HTML-редакторами (Adobe Dreamweaver, Nvu) или конструкторами сайтов (uCoz, Сайткрафт).

3.Технология создания сайта HTML

3.1. HTML – язык разметки гипертекста

Гипертекст – это текст, в котором есть ссылки. Ссылки позволяют пользователю перемещаться в любое интересное место текста.

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

Тег – это команда, которая определяет элемент и задает его внешний вид. Все теги выделяются угловыми скобками <>, внутри которых записывается имя тега.

<имя тега>

содержимое тега контейнера

Большинство тегов используется парно и называются тегами-контейнерами. Они имеют открывающий тег и закрывающий. В открывающем теге можно указать параметры элемента. В закрывающем теге параметры не указываются, и обязательно присутствует прямой слеш /.

3.2. Содержание и структура сайта

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

Содержание сайта должно привлекать внимание, отражать главную мысль.

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

Представление информации для удобства восприятия.

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

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

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

Изобразим структуру сайта в виде графа:

3.3. Структура HTML – документа

Документа HTML имеет жесткую структуру. Первый тег, с которого начинается HTML-документ это открывающийся тег . Закрывающий тег завершает код страницы.

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

служебная информация для браузера

все элементы WEB-страницы

Раздел HEAD

В этот раздел помещается служебная информация для браузера. Теги, расположенные внутри тега-контейнера , на странице не отображаются.

Исключением является тег . Содержание этого тега можно увидеть в заголовке или в закладке WEB-обозревателя, оно должно соответствовать информационному содержанию страницы. Это самая первая информация о сайте, которую видит пользователь.</span></p><p class="c5"><span class="c7">Правильно и грамотно составленный </span><span class="c0">HEAD </span><span class="c7">может быть весьма полезен как пользователю, так и владельцу сайта.</span></p><p class="c5 c24"><span class="c7"></span></p><p class="c30"><span class="c0">Раздел BODY</span></p><p class="c5"><span class="c7">В теге-контейнере <body> располагаются элементы WEB-страницы. Заголовки, текстовые параграфы, изображения, ссылки, таблицы и пр. – всё это и есть объекты/элементы. Все теги, определяющие содержимое WEB-страницы, находятся в разделе </span><span class="c23">BODY.</span></p><p class="c5"><span class="c7">WEB-страницы можно создавать в простом текстовом редакторе «Блокнот». Для этого необходимо открыть эту программу, сохранить файл, указав имя латинским буквами без пробела и расширение html (например, index.html).</span></p><p class="c5"><span class="c7">В редакторе код документа набирается вручную, а в браузере он отображается.</span></p><hr style="page-break-before:always;display:none;"><p class="c17"><span class="c10">3.4. Оформление сайта</span></p><p class="c5"><span class="c7">Основная задача информационного дизайна – помогать пользователю воспринимать и усваивать информацию с минимальными затратами.</span></p><p class="c5"><span class="c7">Любой сайт загружается с главной (домашней) страницы (home page), которая, прежде всего, должна давать ответ на вопрос: «О чем этот сайт?».</span></p><p class="c5"><span class="c7">Для этого на главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, а также главное меню – ссылки на основные разделы сайта. Также на главной странице могут быть размещены имя автора сайта и его контактная информация.</span></p><p class="c5"><span class="c7">Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это заголовок сайта, расположенный в самом верху страницы и главное меню, чаще размещенное в левой части страницы. Причем количество пунктов меню, их названия и порядок неизменны на всех страницах сайта.</span></p><p class="c5"><span class="c7">Желательно, чтобы страницы сайта были выполнены в едином стиле.</span></p><p class="c5"><span class="c7">При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:</span></p><ul class="c8 lst-kix_list_1-0 start"><li class="c14"><span class="c7">Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.</span></li><li class="c14"><span class="c7">Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.</span></li><li class="c14"><span class="c7">Не выбирайте для страниц пестрый фон, на таком фоне текст читается с трудом.</span></li><li class="c14"><span class="c7">Не размещайте на странице слишком много информационных и художественных блоков.</span></li><li class="c14"><span class="c7">Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.</span></li><li class="c14"><span class="c7">В каждом абзаце используйте одни и те же приемы форматирования.</span></li></ul><p class="c5"><span class="c7">Известно, что текстовая информация воспринимается человеком лучше, если она визуализирована – организована в виде списков, таблиц, диаграмм, снабжена иллюстрациями (фотографиями, рисунками, схемами).</span></p><p class="c5"><span class="c7">Для описания ряда объектов, обладающих одинаковыми наборами свойств, наиболее часто используют таблицы. Главную страницу сайта я решил оформить в виде таблицы, для этого использовал следующие теги.</span></p><p class="c5"><span class="c7">Тег <</span><span class="c0">table</span><span class="c7">> определяет таблицу на веб-странице. Этот тег служит контейнером для всех элементов, определяющих содержимое таблицы.</span></p><p class="c5"><span class="c7">Любая таблица состоит из строк и ячеек. Внутри тега-контейнера <</span><span class="c0">table</span><span class="c7">> расположен обязательный тег строки <</span><span class="c0">tr</span><span class="c7">>, который содержит теги ячеек <</span><span class="c0">td</span><span class="c7">>.</span></p><p class="c5"><span class="c7">Таблица должна содержать хотя бы одну строку с ячейкой.</span></p><p class="c5"><span class="c7">Структура строения таблицы</span></p><p class="c5"><span class="c7"><body></span></p><p class="c30 c35"><span class="c7"><table></span></p><p class="c2"><span class="c7"><tr></span></p><p class="c21"><span class="c7"><td>11</td></span></p><p class="c21"><span class="c7"><td>12</td></span></p><p class="c2"><span class="c7"></tr></span></p><p class="c2"><span class="c7"><tr></span></p><p class="c21"><span class="c7"><td>21</td></span></p><p class="c21"><span class="c7"><td>22</td></span></p><p class="c2"><span class="c7"></tr></span></p><p class="c30 c35"><span class="c7"></table></span></p><p class="c5"><span class="c7"></body></span></p><p class="c17"><span class="c10">3.5. CSS – каскадные таблицы стилей</span></p><p class="c5 c24"><span class="c7"></span></p><p class="c5"><span class="c7">Внешний вид элементов страницы задается стилевыми описаниями CSS. </span></p><p class="c5"><span class="c7">CSS (Cascading Style Sheets) - </span><span class="c0">Каскадные таблицы стилей</span><span class="c7"> – это набор правил, описывающих представление разных элементов HTML – страницы.</span></p><p class="c5"><span class="c7">Каскадные таблицы стилей – это мощный механизм, позволяющий описывать правила оформления HTML – документа и отделять их от HTML – разметки. Использование стилей очень удобно при оформлении текста, ссылок, изображений и других элементов Веб-страницы. В стиле можно указать цвет объекта, шрифт, размер, положение объекта на странице, его отступы. Стиль задается по определенным правилам и может быть применен к различным элементам страницы.</span></p><p class="c5"><span class="c7">Стандарт CSS определяет всего три способа задания стиля для элементов:</span></p><p class="c5"><span class="c7">- параметр тэга</span></p><p class="c5"><span class="c7">- внутренняя или внедренная таблица стилей</span></p><p class="c5"><span class="c7">- внешний файл стилевых описаний</span></p><p class="c5"><span class="c7">Стиль, созданный во внешнем файле для тега, автоматически переопределяет внешний вид объекта на всех HTML-страницах, где подключен файл стилевых описаний.</span></p><p class="c17"><span class="c10">3.6. Размещение сайта в Интернете</span></p><p class="c3 c34"><span class="c7"></span></p><p class="c5"><span class="c7">Перед размещением сайта в сети Интернет следует провести его тестирование, т. е. убедиться в том, что он правильно отображается разными браузерами: тексты хорошо читаются на выбранном фоне, рисунки расположены на своих местах, гиперссылки обеспечивают правильные переходы.</span></p><p class="c5"><span class="c0">Хостинг</span><span class="c7"> – услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.</span></p><p class="c5"><span class="c7">Частные лица для своих сайтов могут воспользоваться бесплатным хостингом, возможности которого ограничены по сравнению платными вариантами (небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня), но их вполне достаточно для домашних страниц пользователей.</span></p><p class="c5"><span class="c7">Главным недостатком бесплатных хостингов является то, что при размещении вашего сайта компания самостоятельно добавляет на его страницы коммерческую рекламу.</span></p><p class="c17"><span class="c10">4.Выводы</span></p><p class="c5 c24"><span class="c7"></span></p><p class="c5"><span class="c7">В процессе работы и исследования, мною создан сайт языком разметки гипертекста HTML. Практическая значимость данной работы состоит в том, что некоторые части данной работы можно использовать для уроков информатики и для внеклассной работы.</span></p><p class="c5"><span class="c7">Я считаю, что технология создания сайтов HTML доступна для освоения и, если человек будет иметь навык работы в ней, то ему будет легче освоить другие технологии и создавать сайты более высокого уровня.</span></p><p class="c5"><span class="c7">Многие люди в наше время не интересуются событиями и подвигами героев Великой Отечественной войны. Я создал сайт на тему героев ВОВ, для того чтобы люди помнили о том, какое страшное время пережили их родные и интересовались историей событий тех дней.</span></p><hr style="page-break-before:always;display:none;"><p class="c17"><span class="c10">5.Информационные источники</span><span class="c33">: </span></p><ol class="c8 lst-kix_list_14-0 start" start="1"><li class="c47"><span class="c7">Википедия – свободная энциклопедия </span><span class="c38"><a class="c39" href="https://www.google.com/url?q=https://ru.wikipedia.org&sa=D&ust=1559814787000000">https://ru.wikipedia.org</a></span></li><li class="c11"><span class="c7">Высшая Инженерная Школа СПбГПУ. Академия Информатики для Школьников: Учебное пособие по курсу: Информационный дизайн.</span></li><li class="c11"><span class="c7">Горбачевич К.С., Хабло Е.П. Почему так названы? О происхождении названий улиц, площадей, островов, рек и мостов Санкт-Петербурга. — СПб.: Норинт, 2002. — 353 с.</span></li><li class="c11"><span class="c7">Информатика и ИКТ: учебник для 9 класса: 2ч. /Л.Л. Босова, А.Ю. Босова. – М.:Бином. Лаборатория знаний, 2012. – 79с.: ил.</span></li></ol><p class="c3"><span class="c7"></span></p><p class="c3"><span class="c7"></span></p><p class="c3"><span class="c7"></span></p><div><p class="c24 c42"><span class="c7"></span></p><p class="c3 c40"><span class="c7"></span></p></div></div></div><br> </div> <div class="links-container"> <ul class="links inline"><li class="comment-add first last"></li> </ul> </div> <div class="share_buttons clearfix">Поделиться:<div class="share42init" data-url="nsportal.ru/ap/library/nauchno-tekhnicheskoe-tvorchestvo/2019/06/06/tehnologiya-sozdaniya-sayta-html" data-title="Технология создания сайта HTML "Увековечение памяти героев войны в названии улиц Кировского района Санкт-Петербурга"" data-path="/sites/all/themes/acquia_marina/_img/" data-icons-file="share-icons.png"></div></div> <div class="clearfix"></div><a href="/ap/blog/literaturnoe-tvorchestvo/2023/10/21/podarok"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2023/10/21/0podarok_paustovskiy.jpg"></div><p>Подарок</p></div></a><a href="/ap/blog/literaturnoe-tvorchestvo/2017/12/20/rozhdestvenskie-podarki-ot-metelitsy"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2017/12/20/f3.jpg"></div><p>Рождественские подарки от Метелицы</p></div></a><a href="/ap/blog/hudozhestvenno-prikladnoe-tvorchestvo/2020/04/03/kak-narisovat-limon-akvarelyu"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2020/04/03/kak_narisovat_limon_akvarelyu.jpg"></div><p>Как нарисовать лимон акварелью</p></div></a><a href="/ap/blog/literaturnoe-tvorchestvo/2021/12/10/lisa-i-volk"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2021/12/10/lisa_i_volk1.jpg"></div><p>Лиса и волк</p></div></a><a href="/ap/blog/literaturnoe-tvorchestvo/2022/04/21/vesennie-chudesa"><div class="adv-blok"><div class="img"><img src="/sites/ap.nsportal.ru/files/2022/04/21/vesennie_chudesa.jpg"></div><p>Весенние чудеса</p></div></a> <div class="clearfix"> </div> <div id="promo-card"></div><div id="banner_ap"></div> </div> </div> </div> </div> </div>  </div>  </div>  </div>  </div>  </div>  </div>  </div> </div> </div> <div id="user_relationships_popup_form" class="user_relationships_ui_popup_form"></div><script type="text/javascript" src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> <script type="text/javascript" src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script> </body> </html>