2 | Актуализа ция знаний | Презентация по теме урока | Цель этапа: мотивация изучения учащимися новой темы, постановка цели урока Древнегреческий философ Аристотель сказал: «Ум заключается не только в знании, но и в умении прилагать знание на деле». Пусть эти слова, сказанные в 4 веке до нашей эры, станут девизом нашего сегодняшнего урока -Для того, чтобы узнать тему урока, предлагаю отгадать кроссворд, который нам и подскажет ее (слайд2). Вопросы: - Параллельные беседы в Интернете или целый мир виртуального общения.
- Всемирная система компьютерных сетей или глобальная сеть.
- Один из российских поисковых указателей в сети Интернет.
- Электронная почта.
- Какое слово мы получили после того как отгадали кроссворд? -Хорошо. Сегодня мы с вами познакомимся с языком гипертекстовой разметки документов HTML. - И так тема урока «Создание Web – страницы» (слайд 3). -Сегодня мы познакомимся с понятиями «гипертекст», «HTML»,узнаем особенности языка HTML и будем пробовать создавать свои веб- страницы. -У кого-нибудь есть вопросы по предстоящей работе? Тема «Создание Web-страницы» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя интернета. |
Смотрят на экран. Отвечают на вопросы.
Предполагаемые ответы: - (chat)
- (Internet)
- (rambler)
- (e-mail)
Выделены цветом буквы по горизонтали H T M L Формулируют тему урока, цель и задачи урока.
Внимательно слушают преподавателя, записывают дату и тему урока в тетрадь
| 4 |
3
4.
| Объяснение нового материала
Первичное закрепление полученных знаний
| Техноло гия WWW
Презентация «Структу ра Web-страницы» | Цель этапа: формировать знания учащихся по теме «Основы языка HTML». Как вы понимаете что такое HTML? HTML Hyper Text Markup Language – язык разметки гипертекста представляющий собой простой набор команд, описывающих структуру документа. HTML страница - это обычный текстовый файл имеющий расширение .html или .htm. (слайд 4). Гипертекст- система взаимосвязанных текстов. Запишем определение: гипертекст- это текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и прочее (слайд 5). Из чего состоит Web-сайт? -Запишем: (слайд 5)Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация и т.п. должны быть записаны в виде отдельных файлов. Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах. Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот. Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-страницы можно разделить на две группы(слайд 6) - статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;
- динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).
Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста). Для создания HTML страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Таким редактором, например, являются Notepad (Блокнот), входящий в стандартные средства Windows. Итак, давайте рассмотрим основные элементы из которых состоит любая HTML страница. Для начала необходимо дать определение тега. (слайд 7)HTML Тег: Это специальное указание того как нужно отображать элемент (текст, картинка и т.п.) на странице. Можно рассматривать тег как команду содержащую название и параметры. Тег выглядит следующим образом: <ТЕГ>элемент страницы (слайд8) Тэгов много, и они разные. Существуют обязательные и необязательные тэги, парные и одиночные (пояснения на примере) . Запишем замечание: если есть открывающий тэг, то должен быть и закрывающий (такая пара тэгов называется контейнером). Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы сайта.(рисунок и текст на распечатках) Структура Web-страницы.
(слайд 9,10,11) Рассмотрим структуру HTML(раздает карточки с теоретическим материалом)
Мой первый шаг
Здравствуйте, это моя первая страница.
Добро пожаловать! :)
-небо
Этот тэг должен открывать документ.
- земля
- голова документа
- тело документа
Все тэги, расположенные между , это что-то вроде служебной информации. Например - заголовок. <br>Все тэги, расположенные между <body> </body> - непосредственное содержание документа, в котором можно менять цвет текста, фона, как делать текст крупнее-мельче, вставлять картинки, таблицы и многое другое<br><тэг> </тэг> - не просто тэг, это </span><span class="c16 c27 c29">контейнер</span><span class="c16 c27"> - тэг, который может содержать внутри себя другие тэги (и текст). </span></p><p class="c37"><span class="c16 c27">Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY> <br><HTML><br><HEAD><br><ТITLE>Компьютер</ТITLE> <br></HEAD><br><BODY><br>Компьютер и ПО<br></BODY><br></HTML></span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 276.00px; height: 163.27px;"><img alt="http://inform72-enb.narod.ru/inet26.gif" src="https://lh4.googleusercontent.com/f0r9_gEFCe-_-ooSxWoRLD0bjjmvcPPTo873mF6KyF-0VA-WNb2LqEpJzcUKCgEjsmbPhx_haGYjBTr9dWA9ScmQFyei_A7uNj16SLn6AHMdoX-vzq_IsnhtfY1Y8tD7aU3WrwBwGdSRC0GXnQ" style="width: 276.00px; height: 163.27px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c37"><span class="c16 c27">(слайд 12)Обратите внимание: <br></span><span class="c16 c27 c29">(под запись)</span><span class="c16 c27"><br><тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> <br>Только такая очередность закрывающих тэгов верна(</span><span class="c16 c27 c29">подзапись как замечание</span><span class="c16 c27">) (слайд 13) тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д. </span></p><p class="c10"><span class="c16 c27">-Верна ли очередность тэгов в данном примере?<br></span><span class="c13 c11"><B><FONT COLOR=red>Доброе утро! </B></FONT></span></p><p class="c10"><span class="c13 c11">-А как нужно расставить тэги, чтобы верна их последовательность?</span></p><p class="c20"><span class="c13 c11">(Слайд 13) (Показывает как выглядит страница сайта в IE и как выглядит этаже страница в редакторе)</span></p><p class="c10"><span class="c11 c27">(Слайд 14)</span><span class="c11 c21"> Теги и атрибуты</span><span class="c13 c11"> </span></p><p class="c10"><span class="c11 c27">Некоторые </span><span class="c11 c21">теги</span><span class="c11 c27"> имеют </span><span class="c11 c21">атрибуты</span><span class="c13 c11">, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)</span></p><p class="c10"><span class="c11 c21"><body bgcolor = “red”> </span></p><p class="c10"><span class="c13 c11">(Слайд 15) Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “). Тег со всеми атрибутами желательно располагать на одной строке. </span></p><p class="c10"><span class="c11 c27">(Слайд 16) </span><span class="c12 c38 c35">Параметры тега <body></span></p><p class="c17"><span class="c11 c21">Bgcolo</span><span class="c13 c11">r – изменяет цвет фона. </span></p><p class="c17"><span class="c13 c11">Цвет задается словом или кодом RGB </span></p><p class="c17"><span class="c11 c27"> </span><span class="c11 c21"><body bgcolor = “red”></span></p><p class="c17"><span class="c11 c21"> <body bgcolor = “#FF0000”></span></p><p class="c17"><span class="c11 c21">Text</span><span class="c13 c11"> – задает цвет текста. </span></p><p class="c17"><span class="c11 c27"> </span><span class="c11 c21"><body bgcolor = “red” text=“blue”> </span></p><p class="c17"><span class="c11 c21">Background</span><span class="c13 c11"> – помещает в качестве фона изображение из файла с картинкой.</span></p><p class="c17"><span class="c11 c27"> </span><span class="c0"><body background = “dog.gif”></span></p><p class="c17"><span class="c16 c27">Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.</span></p><p class="c17"><span class="c16 c27">Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.</span></p><p class="c17 c32"><span class="c13 c22"></span></p><p class="c17"><span class="c13 c11">Прежде чем приступить к практической работе, давайте с вами заполним таблицу</span></p><a id="t.73a4ffb739687a20f5b8f6a5ee0210bd7a453a52"></a><a id="t.1"></a><table class="c98"><tbody><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c53"><span class="c16 c27">Вопрос</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c53"><span class="c16 c27">Ответ</span></p><p class="c15"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c71"><span class="c13 c11">Что такое тег?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c25"><span class="c13 c11"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Какие бывают теги?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Что такое парный тег?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Что такое атрибут?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Какое должно быть имя главной страницы?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Как должны располагаться файлы проекта?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr><tr class="c61"><td class="c57" colspan="1" rowspan="1"><p class="c20"><span class="c16 c27">Какие программы нужны, чтобы создать weв-страницу?</span></p></td><td class="c50" colspan="1" rowspan="1"><p class="c20 c32"><span class="c13 c22"></span></p></td></tr></tbody></table><p class="c20 c32"><span class="c13 c11"></span></p></td><td class="c34" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11">Внимательно слушают преподавателя, отвечают на его вопросы, по ходу делают записи в тетради</span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c6"><span class="c13 c11"></span></p><p class="c25"><span class="c13 c11"></span></p><p class="c71"><span class="c13 c11">Работа студентов с карточками.</span></p><p class="c6"><span class="c13 c11"></span></p></td><td class="c75" colspan="1" rowspan="1"><p class="c53"><span class="c13 c11">10</span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c15"><span class="c13 c11"></span></p><p class="c4"><span class="c13 c11"></span></p><p class="c4"><span class="c13 c11"></span></p><p class="c37"><span class="c13 c11">3</span></p></td></tr><tr class="c44"><td class="c28" colspan="1" rowspan="1"><p class="c19"><span class="c11 c13">5</span></p></td><td class="c39" colspan="1" rowspan="1"><p class="c37"><span class="c0">Практическая работа</span></p></td><td class="c59" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11">Создание простейшей Web-страницы</span></p></td><td class="c14" colspan="1" rowspan="1"><p class="c20"><span class="c16">Проведение практической </span><span class="c11 c21">Создание Web-страницы </span><span class="c13 c11">в текстовом редакторе Блокнот.</span></p><p class="c10"><span class="c11 c21">Цель этапа: </span><span class="c13 c11">учить применять полученные знания на практике.</span></p><p class="c10"><span class="c13 c11">-Теперь я вам предлагаю самим попробовать создать страничку сайта, используя тэги которые уже вам известны: создайте Web – страницу, задайте цвет фона и напишите приветствующие слова на ней.</span></p><p class="c10"><span class="c11 c27">-Давайте приступим к созданию </span><span class="c16 c27">Web-страницы.</span></p><p class="c10"><span class="c16 c27">Создание Web-страницы можно разбить на несколько этапов.(</span><span class="c16 c27 c29">этапы на распечатках</span><span class="c13 c11">)</span></p><p class="c10"><span class="c11">1. С помощью текстового редактора Блокнот создаем текстовый файл, содержащий команды языка </span><span class="c11 c21">HTML</span><span class="c11">. Здесь можно использовать </span><span class="c11 c21">Блокнот</span><span class="c11">. Обратите внимание, что файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение </span><span class="c11 c21">*.htm</span><span class="c11"> или </span><span class="c11 c21">*.html</span><span class="c11">. Русские буквы должны быть набраны в кодировке </span><span class="c11 c29">Windows</span><span class="c13 c11">. </span></p><p class="c10"><span class="c13 c11">Все странички сайта сохраняются в одной специально созданной папке.</span></p><p class="c10"><span class="c13 c11">2. Открыть файл в браузере. Для этого можно использовать два способа </span></p><ul class="c52 lst-kix_list_8-0 start"><li class="c8 c74"><span class="c11">Открыть браузер, выбрать пункт меню </span><span class="c11 c21">Файл-Открыть</span><span class="c13 c11"> и найти файл на диске. </span></li><li class="c8 c74"><span class="c11">Найти файл в </span><span class="c11 c21">Проводнике</span><span class="c11"> (или через </span><span class="c11 c21">Мой компьютер</span><span class="c13 c11">) и «открыть» его, щелкнув дважды по значку. При этом запускается браузер, установленный по умолчанию. </span></li></ul><p class="c10"><span class="c11">3.Чтобы внести изменения в страницу, можно выбрать команду </span><span class="c11 c21">Просмотр источника</span><span class="c11"> (или </span><span class="c11 c21">Просмотр в виде HTML</span><span class="c11">) из меню </span><span class="c11 c21">Вид</span><span class="c11"> или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в </span><span class="c11 c21">Блокноте</span><span class="c11"> или </span><span class="c11 c21">WordPad-е</span><span class="c11"> (для браузера </span><span class="c11 c21">Opera</span><span class="c11">). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на </span><span class="c11 c21">F5</span><span class="c13 c11"> или кнопку обновления). </span></p><p class="c20 c32"><span class="c13 c11"></span></p></td><td class="c34" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11">Выполняют практическую работу</span></p></td><td class="c81" colspan="1" rowspan="1"><p class="c53"><span class="c13 c11">20</span></p></td></tr><tr class="c44"><td class="c28" colspan="1" rowspan="1"><p class="c19"><span class="c13 c11">6</span></p></td><td class="c39" colspan="1" rowspan="1"><p class="c37"><span class="c0">Закрепление пройденного материала</span></p></td><td class="c59" colspan="1" rowspan="1"><p class="c4"><span class="c13 c11"></span></p></td><td class="c14" colspan="1" rowspan="1"><p class="c20"><span class="c16 c21">Цель этапа:</span><span class="c13 c11"> закрепить полученные знания.</span></p><p class="c20"><span class="c13 c11">А теперь закрепим знания, полученные на уроке (используется ЭОР Создание простейшей Web-страницы)</span></p><p class="c20 c30"><span class="c0"></span></p></td><td class="c34" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11"> Студенты работают с модулем</span></p></td><td class="c18" colspan="1" rowspan="1"><p class="c53"><span class="c13 c11">3</span></p></td></tr><tr class="c95"><td class="c28" colspan="1" rowspan="1"><p class="c19"><span class="c13 c11">7</span></p></td><td class="c39" colspan="1" rowspan="1"><p class="c37"><span class="c0">Рефлексия</span></p></td><td class="c59" colspan="1" rowspan="1"><p class="c20 c30"><span class="c13 c11"></span></p></td><td class="c14" colspan="1" rowspan="1"><p class="c10"><span class="c11 c21">Цель этапа: </span><span class="c13 c11">подвести итоги урока.</span></p><p class="c20"><span class="c13 c11">Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе?</span></p><p class="c20"><span class="c16">Учащимся раздаются таблицы для индивидуальной рефлексии</span><span class="c13 c41">:</span></p><a id="t.bed0e99f19dcdbea2be09e85bdf8b45a174817a0"></a><a id="t.2"></a><table class="c76"><tbody><tr class="c61"><td class="c7" colspan="1" rowspan="1"><p class="c10"><span class="c0">Я</span></p></td><td class="c70" colspan="1" rowspan="1"><p class="c20 c84"><span class="c0">Сейчас</span></p></td><td class="c46" colspan="1" rowspan="1"><p class="c20 c84"><span class="c0">Хочу в будущем</span></p></td></tr><tr class="c61"><td class="c7" colspan="1" rowspan="1"><p class="c20"><span class="c0">Знаю (знать)</span></p></td><td class="c70" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td><td class="c46" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td></tr><tr class="c61"><td class="c7" colspan="1" rowspan="1"><p class="c20"><span class="c0">Умею (уметь)</span></p></td><td class="c70" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td><td class="c46" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td></tr><tr class="c61"><td class="c7" colspan="1" rowspan="1"><p class="c20"><span class="c0">Использую (использовать)</span></p></td><td class="c70" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td><td class="c46" colspan="1" rowspan="1"><p class="c10 c32"><span class="c13 c11"></span></p></td></tr></tbody></table><p class="c20 c32"><span class="c13 c35 c80"></span></p></td><td class="c34" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11">Говорят, что нового узнали на уроке; высказываются о трудностях, возникших по ходу работы.</span></p></td><td class="c18" colspan="1" rowspan="1"><p class="c53"><span class="c13 c11">1</span></p></td></tr><tr class="c44"><td class="c28" colspan="1" rowspan="1"><p class="c19"><span class="c13 c11">8</span></p></td><td class="c39" colspan="1" rowspan="1"><p class="c37"><span class="c0">Оценочное суждение, домашнее задание</span></p></td><td class="c59" colspan="1" rowspan="1"><p class="c20 c30"><span class="c13 c11"></span></p></td><td class="c14" colspan="1" rowspan="1"><p class="c20"><span class="c12 c38 c35">Выставление оценок, задание на дом.</span></p><p class="c10"><span class="c16 c27">Учащиеся в классе делятся на четыре-пять групп (примерно по 3 ученика в каждой), дают название своей команды, выбирают тему проектного задания; Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер; </span><span class="c13 c16 c60">Перед каждой группой ставится задача – согласно полученному заданию необходимо определить функции веб- страницы, спроектировать карту веб-страницы, разработать внешний вид страниц, создать Web-страницу, используя выбранные инструментальные средства.</span></p><p class="c53 c83"><span class="c0">Паспорт проекта</span></p><a id="t.657e5e855b9307b6477582f952d381e636c333ca"></a><a id="t.3"></a><table class="c97"><tbody><tr class="c73"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c24 c27">Тема вашего проекта</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c92"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Срок реализации</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c69"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Авторы проекта</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c85"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Цель вашей веб-страницы (для чего?)</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c90"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Идеи вашей веб страницы (чем интересена?)</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c86"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Структура вашей веб- страницы (Разделы Ваших страниц)</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c92"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Этапы проекта</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr><tr class="c91"><td class="c49" colspan="1" rowspan="1"><p class="c53"><span class="c13 c24">Ожидаемый результат</span></p></td><td class="c33" colspan="1" rowspan="1"><p class="c1"><span class="c13 c24"></span></p></td></tr></tbody></table><p class="c20 c32"><span class="c13 c11"></span></p></td><td class="c34" colspan="1" rowspan="1"><p class="c37"><span class="c13 c11">Слушают преподавателя, записывают домашнее задание</span></p></td><td class="c18" colspan="1" rowspan="1"><p class="c53"><span class="c13 c11">1</span></p></td></tr></tbody></table><p class="c54 c32"><span class="c47 c35"></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/02/21/picture-207996-1361440790.jpg"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2013/02/25/konspekt-uroka-po-distsipline">Конспект урока по дисциплине «Информационные технологии в профессиональной деятельности» Тема: «Защита файлов и управление доступом к ним»</a></h6><p class="search-excerpt">Студенты знакомятся с понятием «защита информации»; что является правом собственности, и на какие категории делится; основные виды преступлений связанные с вмешательством в работу компьютера, меры нап...</p></div><div class="others"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2014/10/23/plan-otkrytogo-uroka-konspekt-test">План открытого урока, конспект,тест и презентация по предмету "Основы информационных технологий" по профессии 09.01.03 Мастер по обработке цифровой информации</a></h6><p class="search-excerpt">План открытого урока, конспект, тест и презентация по предмету "Основы информационных технологий"....</p></div><div class="others"><h6><a href="/npo-spo/obrazovanie-i-pedagogika/library/2016/01/22/konspekt-zanyatiya-po-morskomu-delu-na-temu">Конспект занятия по морскому делу на тему: «Применение информационных технологий в объединении «Юнги»»</a></h6><p class="search-excerpt">Конспект занятия по морскому делу на тему: «Применение информационных технологий в объединении «Юнги»»...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2019/05/11/picture-472331-1557559894.jpg"><h6><a href="/npo-spo/obrazovanie-i-pedagogika/library/2019/05/11/plan-konspekt-zanyatiya-ispolzovanie">План конспект занятия "Использование нетрадиционных технологий физического воспитания на уроках хореографии "</a></h6><p class="search-excerpt">План -конспект с подробным описанием этапов занятия по хореографии...</p></div><div class="others"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2019/10/15/metodicheskaya-razrabotka">МЕТОДИЧЕСКАЯ РАЗРАБОТКА УЧЕБНОГО ЗАНЯТИЯ по дисциплине «Информационные технологии в профессиональной деятельности» Тема: «Применение геоинформационных систем (ГИС)-технологий в сельском хозяйстве»</a></h6><p class="search-excerpt">Данная работа является методической разработкой занятия с использованием интерактивных технологий. Тема «Применение геоинформационных систем (ГИС)-технологий в сельском хозяйстве» - одна и...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2020/01/15/picture-1181850-1579074522.jpg"><h6><a href="/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2020/01/16/razrabotka-opornyh-konspektov-po">Разработка опорных конспектов по разделу «Информационные технологии» </a></h6><p class="search-excerpt">Эффективность работы и достижение поставленных целей во многом определяется согласованной деятельностью педагога и обучающихся, что в свою очередь зависит от подготовки их к занятиям. Перед педагогами...</p></div><div class="others"><img class="lazyload" data-src="/sites/default/files/pictures/2021/06/22/picture-1335413-1624344353.jpg"><h6><a href="/npo-spo/obrazovanie-i-pedagogika/library/2021/12/18/konspekt-zanyatiya-s-ispolzovaniem-tehnologii">Конспект занятия с использованием технологии ТРИЗ во 2 младшей группе</a></h6><p class="search-excerpt">Конспект занятия с использованием технологии ТРИЗ во 2 младшей группеТема: «В гости к солнышку»...</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/2016/02/24/konspekt-zanyatiya-po" data-title="конспект занятия по информационным технологиям" ></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 @ 2024-10-30 03:35:40, expires @ 2025-02-19 03:35:40, lifetime 3 месяца 3 недели -->
<!-- cache/normal/nsportal.ru/npo-spo/informatika-i-vychislitelnaya-tekhnika/library/2016/02/24/konspekt-zanyatiya-po_ -->
|
tehnologicheskaya_karta_moego_uroka.docx