Санкт- Петербургский Государственное Бюджетное Профессиональное Образовательное Учреждение
«Колледж «Красносельский»
План – конспект урока учебной практики
производственного обучения по профессии «Оператор информационных систем и ресурсов»
Выполнил мастер производственного обучения: В.О. Бойцев
Санкт- Петербург 2024г.
ПМ.02: «Работа в системе управления контентом»
Количество обучающихся: 25 человек
Время : 7 академических часов ( 315 минут)
Тема урока: «Работа с основными элементами веб-страницы».
Цель урока: Отработать профессиональные навыки работы с основными элементами веб-страницы, их функциями, и структурой, а также развить навыков создания простых веб-страниц с использованием HTML.
Задачи:
1. Повторить основные компоненты веб-страницы (заголовок, текст, изображения, ссылки и т.д.).
2. Научить использовать базовые теги HTML для создания веб-страницы.
3. Развить навыки работы с текстовыми редакторами для написания кода.
4. Способствовать развитию критического мышления через анализ различных веб-страниц
Тип урока: комбинированный.
Методы обучения:
-групповая форма работы;
-дидактические: беседа, объяснение;
-методы развития самостоятельности и творческого подхода – решение производственно-технологических задач.
- наглядно-демонстрационные: показ трудовых приемов и операций.
Оборудование: компьютеры с операционной системой Windows 10 и установленными текстовыми редакторами кода.
сетевая папка для выдачи материалов
Межпредметные связи:
Информатика (основы программирования, и веб-дизайна),
искусство (дизайн и эстетика веб-страниц),
литература (работа с текстом);
Ход урока
Введение (30 минут)
• Приветствие учащихся.
• Объяснение темы и целей урока.
• Краткий обзор структуры веб-страницы: заголовок, тело, элементы (текст, изображения, ссылки).
• Обсуждение важности веб-дизайна и его влияния на восприятие информации.
2. Основная часть (1 час 30 минут)
• Лекция (40 минут):
• Что такое HTML и его роль в создании веб-страниц.
• Основные теги HTML:
• , , , <body>, <h1> - <h6>, <p>, <a>, <img></span><span class="c2">.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Примеры использования тегов на практике.</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c0"> • Демонстрация (20 минут):</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c9"> • </span><span class="c2">Показать пример простой веб-страницы в текстовом редакторе (например, Notepad или Visual Studio Code).</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Объяснить структуру кода.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Введение в CSS (30 минут):</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Основы CSS: что это такое и зачем нужно.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Примеры базовых стилей: изменение цвета текста, фона, шрифтов и т.д.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Демонстрация применения CSS к HTML-документу.</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c0">3. Практическая работа (2 часа)</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c9">• </span><span class="c2">Учащиеся создают свою простую веб-страницу, используя изученные теги и стили.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> • Задание: создать страницу с заголовком, параграфом текста, изображением и ссылкой. Стилизовать страницу с помощью CSS.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2"> </span></p><p class="c4"><span class="c11">• Учитель помогает и отвечает на вопросы во время выполнения задания.</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c0">4. Презентация работ (1 час)</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c9">• </span><span class="c2">Учащиеся представляют свои веб-страницы друг другу.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Обсуждение: что понравилось, какие трудности возникли.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c11">• Оценка работ по критериям: структура, оформление, оригинальность</span><span class="c0">.</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c0">5. Заключение (30 минут)</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c9">• </span><span class="c2">Подведение итогов урока.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Ответы на вопросы учащихся.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Домашнее задание: изучить дополнительные теги HTML и CSS, создать более сложную веб-страницу с использованием новых знаний.</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c0">6. Рефлексия (30 минут)</span></p><p class="c4 c5"><span class="c0"></span></p><p class="c4"><span class="c9">• </span><span class="c2">Учащиеся делятся своими впечатлениями о занятии.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Обсуждение, что нового они узнали и как могут применить эти знания в будущем.</span></p><p class="c4 c5"><span class="c2"></span></p><p class="c4"><span class="c2">• Обратная связь от учителя о процессе обучения.</span></p></div></div></div></div></div><br><div class="block marina-gradient-rounded-corners marina-title-rounded-green"><div class="inner clearfix"><div class="inner-wrapper"><div class="inner-inner"><h2 class="title block-title">По теме: методические разработки, презентации и конспекты</h2><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2013/10/22/picture-322407-1382412603.jpg"><h6><a href="/npo-spo/estestvennye-nauki/library/2013/11/02/metodicheskaya-razrabotka-prakticheskogo-zanyatiya-2">Методическая разработка практического занятия для студента "Основные понятия дискретной математики. Элементы теории вероятности"</a></h6><p class="search-excerpt">Методическая разработка практического занятия для студента "Основные понятия дискретной математики. Элементы теории вероятности"...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2015/03/11/picture-599857-1426066064.jpg"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2015/03/13/metodicheskoe-posobie-po-3">Методическое пособие по выполнению практического занятия №2 "Работа с основными командами операционной системы" по дисциплине "Операционные системы и среды" для специальности 230113 Компьютерные системы и комплексы</a></h6><p class="search-excerpt">Методическое пособие создано для реализации основной профессиональной образовательной программы в соответствии с ФГОС по специальности СПО 230113 Компьютерные системы и комплексы (базовой подгото...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2015/03/11/picture-599857-1426066064.jpg"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2015/03/13/metodicheskoe-posobie-po-11">Методическое пособие по выполнению практического занятия №2 "Работа с основными командами в операционной системе (на примере MS-DOS)" по дисциплине "Операционные системы" для специальности 230115 Программирование в компьютерных системах</a></h6><p class="search-excerpt">Методическое пособие создано для реализации основной профессиональной образовательной программы в соответствии с ФГОС по специальности СПО 230113 Компьютерные системы и комплексы (базовой подгото...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2025/10/13/picture-1579472-1760356627.jpg"><h6><a href="/npo-spo/kultura-i-iskusstvo/library/2025/10/13/rabota-kontsertmeystera-v-horeograficheskom-klasse">Работа концертмейстера в хореографическом классе. Работа над основными элементами народного танца</a></h6><p class="search-excerpt">Тема урока: Работа над основными элементами народного танца.Цель урока: Показ работы концертмейстера на уроке народного танца.Задачи:...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2024/06/10/picture-1429372-1718028359.jpg"><h6><a href="/npo-spo/vosproizvodstvo-i-pererabotka-lesnykh-resursov/library/2026/06/01/metodicheskaya-razrabotka">Методическая разработка открытого теоретического занятия на тему: "Основные элементы и обозначение метрической резьбы".</a></h6><p class="search-excerpt">Цель методической разработки - методическое описание видов деятельности преподавателя и обучающихся при использовании традиционных и современных развивающих технологий на теоретическом занятии по учеб...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2024/06/10/picture-1429372-1718028359.jpg"><h6><a href="/npo-spo/vosproizvodstvo-i-pererabotka-lesnykh-resursov/library/2026/06/08/metodicheskaya-razrabotka">Методическая разработка открытого занятия по профессии 18466 Слесарь механосборочных работ 3-го разряда на тему: "Основные элементы и обозначение метрической резьбы"</a></h6><p class="search-excerpt">Методическая разработка включает в себя:-введение, в котором отражена актуальность выбранной темы занятия;-краткие структурные элементы занятия, технологии, методы и формы обучения, где дано методичес...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2024/06/10/picture-1429372-1718028359.jpg"><h6><a href="/npo-spo/vosproizvodstvo-i-pererabotka-lesnykh-resursov/library/2026/06/08/metodicheskaya-0">Методическая разработка открытого занятия по профессии 18466 Слесарь механосборочных работ 3-го разряда на тему: "Основные элементы и обозначение метрической резьбы"</a></h6><p class="search-excerpt">Методическая разработка включает в себя:-введение, в котором отражена актуальность выбранной темы занятия;-краткие структурные элементы занятия, технологии, методы и формы обучения, где дано методичес...</p></div></div></div></div></div><br><div id="poisk-materialov" data-1="All"></div>
<ul class="links inline"><li class="flag-like first last"><span><span class='like-tooltip flag-like'><a href='#'>Мне нравится</a><span class='flag-throbber'> </span></span></span></li>
</ul> <div class="share_buttons clearfix">Поделиться:<div class="ya-share2" data-services="vkontakte,odnoklassniki,telegram,moimir" data-url="https://nsportal.ru/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2026/07/08/pm-02-rabota-v-sisteme-upravleniya" data-title="пм.02 "работа в системе управления контентом" тема занятия: «работа с основными элементами веб-страницы»" data-image="https://nsportal.ru/sites/default/files/pictures/2026/01/16/picture-1590178-1768553423.jpg"></div></div>
<div class="add-new-comment-button my-button-large"></div></div>
</div>
</div>
</div>
</div>
</div> </div><!-- /content-inner -->
</div><!-- /content -->
</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 src="/sites/default/files/advagg_js/js__S3bm1c7u9YzJnRE6QrV-HsLzADKLeupchfbrYg22kRU__S91yqV9ubUDMxzCK2GLBYdp1SFL3v48MFVTVZ3OSXjc__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__hxOxF7aEdhvlSyCfiIODtjKmufwiFkLnYBgfAc3JU2U__Zvl8DJBWOfPQpMnqpLsqpzRLZD7C0PqUDMlY8RRkYVw__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script src="/sites/default/files/advagg_js/js__c1zZbhXAByh0V-pY3W2l6b4e6e6URcR4okOH_epIox4__oVrjkf1Udl7K9Xgwtl5J3lSmv-cR7ynKeNmPgrmULSU__xK8RrS6Elbeb-uFsk6sQnqBT0LQWi9ruFM_5ORYTRxs.js" defer="defer"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
</body>
</html>
<!-- Page cached by Boost @ 2026-07-09 00:05:57, expires @ 2026-10-29 00:05:57, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2026/07/08/pm-02-rabota-v-sisteme-upravleniya_ -->
otkrytyy_urok_1.docx