Очень актуальным становится вопрос правильного представления информации в удобном для восприятия виде. Все большая доля информации предоставляется всемирной сетью Интернет. Многие школьники хотят создать свой сайт, но не у каждого хватает терпения и сил на это. Изучая на уроках информатики технологию создания сайтов в текстовом процессоре с помощью гиперссылок, организуя переходы между разными документами, мне стало интересно, какие еще существуют технологии создания сайтов.
Существует несколько способов создания сайтов.
Во-первых, можно документ, подготовленный в текстовом процессоре (Microsoft Word), сохранить как Web-страницу (в формате HTML).
Во-вторых, сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который будет размещаться на страницах сайта, размечают специальными метками, называемыми тегами. Теги содержат указания о том, как должен выглядеть текст. Чтобы отличить теги от текста, их заключают в угловые скобки.
В-третьих, можно воспользоваться специальным программным обеспечением – визуальными HTML-редакторами (Adobe Dreamweaver, Nvu) или конструкторами сайтов (uCoz, Сайткрафт).
В 2015 году празднуется 70-летие Победы в Великой Отечественной войне. Во имя высшей справедливости, во имя гордого будущего России нельзя допустить, чтобы Великая Отечественная война стала для потомков «неизвестной войной».
Меня заинтересовало, когда и в связи с чем улицы нашего района стали носить имена героев Великой Отечественной войны. Я решил изучить эту тему, выбрав несколько улиц района для исследования.
Вложение | Размер |
---|---|
![]() | 625.96 КБ |
![]() | 92 КБ |
ПРАВИТЕЛЬСТВО САНКТ-ПЕТЕРБУРГА КОМИТЕТ ПО ОБРАЗОВАНИЮ Государственное бюджетное общеобразовательное учреждение средняя общеобразовательная школа № 249 имени М.В. Маневича Кировского района Санкт-Петербурга Технология создания сайта HTML «Увековечение памяти героев войны в названии улиц Кировского района Санкт-Петербурга» Секция: информатика Выполнил: Волков Анатолий, 8 класс Руководитель: Песковатскова Оксана Михайловна, учитель информатики первой категории Санкт-Петербург 2014-2015 учебный год |
Оглавление
1. Введение
Актуальность: в современном мире лавинообразно возрастают информационные потоки. Очень актуальным становится вопрос правильного представления информации в удобном для восприятия виде. Все большая доля информации предоставляется всемирной сетью Интернет. Многие школьники хотят создать свой сайт, но не у каждого хватает терпения и сил на это. Изучая на уроках информатики технологию создания сайтов в текстовом процессоре с помощью гиперссылок, организуя переходы между разными документами, мне стало интересно, какие еще существуют технологии создания сайтов. Я настолько увлекся этим вопросом, что записался на курсы для школьников по информационному дизайну, где мы стали изучать HTML – язык разметки гипертекста. Но чтобы хорошо освоить технологию HTML, нужно много времени и старания.
Гипотеза: я предполагаю, что освоить технологию HTML возможно каждому, кто интересуется сайтостроением.
Объект исследования: технология создания сайта HTML.
Предмет исследования: названия улиц Кировского района Санкт-Петербурга, которые носят имя героев Великой Отечественной войны.
Цель работы: создание сайта по увековечению памяти героев Великой Отечественной войны.
Задачи: изучить и практически освоить способ создания сайта на основе технологии HTML.
Метод исследования: теоретический и практический.
Актуальность выбора темы сайта: в 2015 году празднуется 70-летие Победы в Великой Отечественной войне. Во имя высшей справедливости, во имя гордого будущего России нельзя допустить, чтобы Великая Отечественная война стала для потомков «неизвестной войной».
Меня заинтересовало, когда и в связи с чем улицы нашего района стали носить имена героев Великой Отечественной войны. Я решил изучить эту тему, выбрав несколько улиц района для исследования, выбрав несколько улиц района для исследования: проспект Маршала Жукова, улица Генерала Симоняка, улица Лени Голикова, улица Зины Портновой, улица Партизана Германа – улица, на которой я живу. И я не мог не осветить историю своей улицы, хоть она территориально относится к Красносельскому району.
2.Технологии создания сайта
Существует несколько способов создания сайтов.
Во-первых, можно документ, подготовленный в текстовом процессоре (Microsoft Word), сохранить как Web-страницу (в формате HTML).
Во-вторых, сайт можно создать, воспользовавшись языком разметки гипертекста 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
В этот раздел помещается служебная информация для браузера. Теги, расположенные внутри тега-контейнера , на странице не отображаются.
Исключением является тег
Правильно и грамотно составленный HEAD может быть весьма полезен как пользователю, так и владельцу сайта.
Раздел BODY
В теге-контейнере располагаются элементы WEB-страницы. Заголовки, текстовые параграфы, изображения, ссылки, таблицы и пр. – всё это и есть объекты/элементы. Все теги, определяющие содержимое WEB-страницы, находятся в разделе BODY.
WEB-страницы можно создавать в простом текстовом редакторе «Блокнот». Для этого необходимо открыть эту программу, сохранить файл, указав имя латинским буквами без пробела и расширение html (например, index.html).
В редакторе код документа набирается вручную, а в браузере он отображается.
3.4. Оформление сайта
Основная задача информационного дизайна – помогать пользователю воспринимать и усваивать информацию с минимальными затратами.
Любой сайт загружается с главной (домашней) страницы (home page), которая, прежде всего, должна давать ответ на вопрос: «О чем этот сайт?».
Для этого на главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, а также главное меню – ссылки на основные разделы сайта. Также на главной странице могут быть размещены имя автора сайта и его контактная информация.
Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это заголовок сайта, расположенный в самом верху страницы и главное меню, чаще размещенное в левой части страницы. Причем количество пунктов меню, их названия и порядок неизменны на всех страницах сайта.
Желательно, чтобы страницы сайта были выполнены в едином стиле.
При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:
Известно, что текстовая информация воспринимается человеком лучше, если она визуализирована – организована в виде списков, таблиц, диаграмм, снабжена иллюстрациями (фотографиями, рисунками, схемами).
Для описания ряда объектов, обладающих одинаковыми наборами свойств, наиболее часто используют таблицы. Главную страницу сайта я решил оформить в виде таблицы, для этого использовал следующие теги.
Тег <table> определяет таблицу на веб-странице. Этот тег служит контейнером для всех элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек. Внутри тега-контейнера <table> расположен обязательный тег строки <tr>, который содержит теги ячеек <td>.
Таблица должна содержать хотя бы одну строку с ячейкой.
Структура строения таблицы
11 12 21 22
3.5. CSS – каскадные таблицы стилей
Внешний вид элементов страницы задается стилевыми описаниями CSS.
CSS (Cascading Style Sheets) - Каскадные таблицы стилей – это набор правил, описывающих представление разных элементов HTML – страницы.
Каскадные таблицы стилей – это мощный механизм, позволяющий описывать правила оформления HTML – документа и отделять их от HTML – разметки. Использование стилей очень удобно при оформлении текста, ссылок, изображений и других элементов Веб-страницы. В стиле можно указать цвет объекта, шрифт, размер, положение объекта на странице, его отступы. Стиль задается по определенным правилам и может быть применен к различным элементам страницы.
Стандарт CSS определяет всего три способа задания стиля для элементов:
- параметр тэга
- внутренняя или внедренная таблица стилей
- внешний файл стилевых описаний
Стиль, созданный во внешнем файле для тега, автоматически переопределяет внешний вид объекта на всех HTML-страницах, где подключен файл стилевых описаний.
3.6. Размещение сайта в Интернете
Перед размещением сайта в сети Интернет следует провести его тестирование, т. е. убедиться в том, что он правильно отображается разными браузерами: тексты хорошо читаются на выбранном фоне, рисунки расположены на своих местах, гиперссылки обеспечивают правильные переходы.
Хостинг – услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
Частные лица для своих сайтов могут воспользоваться бесплатным хостингом, возможности которого ограничены по сравнению платными вариантами (небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня), но их вполне достаточно для домашних страниц пользователей.
Главным недостатком бесплатных хостингов является то, что при размещении вашего сайта компания самостоятельно добавляет на его страницы коммерческую рекламу.
4.Выводы
В процессе работы и исследования, мною создан сайт языком разметки гипертекста HTML. Практическая значимость данной работы состоит в том, что некоторые части данной работы можно использовать для уроков информатики и для внеклассной работы.
Я считаю, что технология создания сайтов HTML доступна для освоения и, если человек будет иметь навык работы в ней, то ему будет легче освоить другие технологии и создавать сайты более высокого уровня.
Многие люди в наше время не интересуются событиями и подвигами героев Великой Отечественной войны. Я создал сайт на тему героев ВОВ, для того чтобы люди помнили о том, какое страшное время пережили их родные и интересовались историей событий тех дней.
5.Информационные источники:
Туманность "Пузырь" в созвездии Кассиопея
Сказка "12 месяцев". История и современность
В.А. Сухомлинский. Самое красивое и самое уродливое
Космический телескоп Хаббл изучает загадочную "тень летучей мыши"
Городецкая роспись