Россия, Троицк
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 04.09.2025 11:33
Кузьменко Наталья Александровна
Учитель информатики
7 лет
8 755
5 254 
Местоположение
Специализация
Создание учебного пособия История Передвижничества
Категория:
Информатика
13.11.2024 12:03
Просмотр содержимого документа
«Создание учебного пособия История Передвижничества»
МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ ОБЩЕОРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
«СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА №3»
ГОРОДА ТРОИЦКА ЧЕЛЯБИНСКОЙ ОБЛАСТИ
Конкурс исследовательских и проектных работ обучающихся 9-11 классов
Отборочного этапа Всероссийского конкурса исследовательских работ
«Юность. Наука. Культура»
Национальной образовательной программы
«Интеллектуально-творческий потенциал России»
Направление: программные продукты для образования, науки, техники, экономики, искусства, созданные на основе стандартных пакетов прикладных программ
Тема: «Создание учебного пособия История Передвижничества»
Кравцова Анастасия
МБОУ «СОШ №3» г. Троицка
11 класс
Научный руководитель:
Кузьменко Наталья Александровна,
учитель информатики
МБОУ «СОШ №3»
г. Троицк, 2022/2023 учебный год
Содержание
1. Введение 3
2. Основная часть 4
2.1. Понятие HTML 4
2.2. История развития 5
2.3. Основы HTML 6
3. Практическая часть 7
3.1. Выбор темы 7
3.2. Разработка структуры 8
3.3. Создание 9
3.4. Оформление 10
4. Заключение 11
Литература 12
Приложения 13
Сайт, или веб-сайт, также веб-узел, — одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователями как единое целое. Но как же создаются сайты? Процесс создания сайтов, вне зависимости от сложности проекта и выбора исполнителя, практически в 99% случаев идет по одной стандартной схеме. Веб-разработкой называется процесс создания веб-сайта или веб-приложения. Основными этапами процесса являются веб-дизайн, вёрстка страниц, программирование на стороне клиента и сервера, а также конфигурирование веб-сервера.
Актуальность: информативное содержание сайта
Цель: создание своего сайта с помощью HTML
Задачи:
Ознакомиться с понятием и историей HTML
Узнать основы HTML
Найти материал для сайта и разработать его дизайн
Создать сайт
HTML (HyperText Markup Language) - язык разметки гипертекста – предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-браузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках JavaScript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать "вручную" текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и "читаемым" при просмотре браузерами разных фирм.
Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.
К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.
HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Путем определения небольшого набора структурных и семантических элементов, получались достаточно простые и в тоже время красиво оформленные документы. HTML успешно справился с проблемами SGML.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html.
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением). Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: …. Между начальным и закрывающим тегами находится содержимое элемента — контент.
Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент input type="button" value="Кнопка" создаст кнопку с текстом Кнопка внутри.
Элементы могут вкладываться друг в друга, например, piТекстip. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной: piТекстpi.
HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение". Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id. Множественные значения class записываются через пробел, div class="nav top". Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа. При этом элемент является корневым элементом.
HTML-документ состоит из двух разделов — заголовка — содержимое элемента head и содержательной части — содержимое body.
Html является корневым элементом документа. Все остальные элементы содержатся внутри .... Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Непосредственно перед созданием сайта, каждый сталкивается с выбором его тематики. Но для начала следует определиться, для каких целей вообще делается сайт – заработок денег или что-то другое.
Если возникло желание поделиться с другими людьми мыслями, обучить их чему-то новому или просто продемонстрировать свои таланты, выкладывая на сайте свои работы, так например, художники создают сайты, чтобы показать свои рисунки широкой общественности и дать так называемый мастер-класс, в этих случаях тема сайта становится более чем очевидной.
Перед созданием своего сайта, мне также пришлось задуматься над выбором темы. Выбор пал на создание такого сайта, который будет содержать информацию, которая может понадобиться определённой группе людей. Я выбрала тему “История передвижничества”. Сайт, который будет содержать в себе информацию о событиях, произошедших в истории Академии Художеств в 19 веке. На экзамена, проводившемся в академии, Советом Академии была выбрана одна тема для всех, художникам это не понравилось, и они подали прошение о том, чтобы им позволили самим выбирать тему, но последовал отказ. Вследствие чего художники покинули Академию образовали собственное сообщество передвижников. На сайте будут размещены биографии и картины художников, история этого события, и информация о выставках сообщества “Товарищества передвижных художественных выставок”. Данная информация может пригодится тем, кто интересуется сферой искусства, кто хочет узнать о художниках того времени и их работах.
Разработка структуры сайта включает все, что касается его содержимого и информационной стратегии, определяющей, как должна быть организована информация, чтобы пользователи сайта могли найти ее легко и быстро. Создается ли сайт для новой компании или перепроектируется имеющийся, — это неважно: логическая структура необходима любому веб-сайту.
Без хорошего, информативного содержания никакой сайт не станет неотразимым. Контент и структура сайта взаимозависимы: нельзя создать одно, не продумав другое. Разбивка и классификация страниц напрямую определяются содержимым сайта, а способ, которым организован контент, определяет процесс структурирования.
При разработке сайта нельзя забывать основное - сеть создана для предоставления информации, а также быстрого и легкого ее поиска. Независимо от конкретной задачи пользователям необходимо, чтобы они были ясно и просто направлены к разыскиваемым данным.
Структурирование любого сайта - прямо с нуля или при редизайне - включает рассмотрение трех точек зрения: контента, сайта и страницы. Контент, или содержимое — это то, что дает жизнь сайту. Усовершенствование структуры как с точки зрения сайта (схематизация сайта), так и с точки зрения страницы (структурирование) позволяют информационному дизайнеру представить организованное содержимое таким способом, который будет логически понятен пользователю. Структурирование сайта на бумаге перед началом визуального проектирования - очень важный этап правильной адресации к целевой аудитории. Эффективный информационный дизайн незаметен для пользователя. Однако если он плохо продуман, пользователи сразу почувствуют неудобство и даже раздражение.
Что же касается моего сайта, то он поделён на 4 области. За них отвечают такие фреймы, как “content”, “menu”, “top”, и “footer”.
Content: основная часть сайта, где будет появляться вся информация, которую каждый может прочитать и посмотреть.
Top: верхушка сайта, где расположено его название
Footer: нижняя часть сайта, которая содержит авторское право.
Menu: эта часть содержит несколько пунктов, таких как:
История товарищества передвижников
Биографии художников – передвижников
Известные картины художников – передвижников
Выставки передвижников
После выбора темы сайта и плана, как он будет выглядеть, следующий этап – его создание. Сайт в основном состоит из нескольких элементов, таких как “site”,“coneсt”, “menu”, “content”, “top”, “footer”.
Файл “site” (Приложение 1)
Он объединяет все вышеперечисленные файлы и позволяет открыть сам сайт. Он, как и все файлы, содержит основные теги, такие как:
html…html внутри этого тега располагается вся разметка страницы
head…head в нём пишется заголовок страницы, при помощи тега title…title
body…body в этом теге содержится весь остальной контент
Фрейм “conect” (Приложение 3)
В отличии от файла “site”, этот объединяет в себе “menu” и “content”.
В данных файлах тег заменяет собой элемент . Сайт делится на несколько областей, поэтому на каждой из них загружается самостоятельная веб-страница, определяемая с помощью тега в файле “site”.
Фрейм “menu” (Приложение 2)
Меню сайта — это, безусловно, один из самых важных его элементов, т.к. без него любой сайт - просто "свалка" информации, в которой сможет сориентироваться и что-то там найти разве что сам создатель этого сайта. Да и то - не факт! Поскольку, со временем просто-напросто забывается, где и что ты сделал. Вот поэтому, грамотно сделанное меню навигации столь важно абсолютно для любого веб-ресурса.
В нём прописываются ссылки на документы. Чаще всего меню создается на основе не упорядоченных списков Фрейм “content” Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице. Фрейм “top” Обычно это большая полоса вверху страницы, с крупным заголовком или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице Фрейм “footer” Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для (SEO Search Engine Optimization) поисковой оптимизации, предоставляя ссылки для быстрого доступа к популярному контенту. 3.4. Оформление Дизайн сайта — это оформление контента, совокупность всех графических элементов на веб-странице. Раньше под веб-дизайном понимали исключительно визуальное оформление, но теперь на первый план вышло удобство пользователя, поэтому к задачам веб-дизайнера прибавились аналитика и грамотное структурирование информации на сайте. Основная задача дизайна — познакомить пользователя со страницей. Он облегчает взаимодействие пользователя с веб-страницей, а значит положительно влияет на конверсию и поведенческие факторы. Продуманный дизайн создает нужное впечатление о компании. На первый взгляд, все просто — оформить контент и основные элементы, и блоки на сайте. Однако многое зависит от типа сайта, количества контента и задач клиента. Чтобы создать хороший дизайн, приступая к созданию макетов, надо четко понимать, какая у сайта будет структура, какой контент будет размещен и что в результате должно получиться. Концепция сайта — первый шаг в создании веб-дизайна. На этом этапе мы определяем, каким будет сайт, чем он будет отличаться от конкурентов, в чем его цель. Для придания наиболее лучшего вида сайту используются различные атрибуты: Для оформления текста: , , , , align …center, left, right, ,, width, . Для изменения цвета фона и текста: body bgcolor="код цвета" text="код цвета" В процессе моей работы над проектом я узнала историю HTML, его основные понятия и структуру, научилась использовать нужные элементы и узнала их значения. Я освоила базовые и нужные для создания сайтов элементы HTML, разработала сайт и дизайн для него. Я считаю, что данный продукт поможет людям, заинтересованным в сфере искусства, узнать много нового о времени передвижничества, привлечёт внимание тех, кто просто этим интересуется и тех, кому это понадобиться для учёбы и написания различных работ. https://html5book.ru/osnovy-html/ https://timeweb.com/ru/community/articles/chto-takoe-html https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure https://muzei-mira.com/article/2125-kto-takie-peredvizhniki-i-pochemu-ih-tak-nazyvayut-.html Приложение 1 Приложение 2 Приложение 3
Свидетельство об участии
БЕСПЛАТНО!
. В каждый пункт вкладывается гиперссылка a. Можно создавать меню и на основе блоков , таблиц
или списков определений . Но традиционной является конструкция
. Целью гиперссылки будет соответствующая страница сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки - только абсолютный.
Приложения 
Вебинар для учителей
Полезное для учителя
