План урока Организационный момент (2 мин)
Скачать 73.5 Kb.
|
| Оборудование: кабинет информатики, оснащенный современной компьютерной техникой, проектором, локальная сеть, выход в Интернет. Цели урока:
Задачи урока:
План урока
Ход урока 1. Организационный момент. Сегодня у нас с вами 3-й урок по теме «Разработка Web-сайтов с использованием языка разметки гипертекста HTML». На первом уроке мы с вами выяснили, что такое Web-страницы и Web-сайты, разобрали структуру HTML-документа. На сайте «Моим ученикам» я вам давала ссылки на материал в интернете. (Открыть страничку). У кого нет дома интернета, была возможность позаниматься здесь, но таких у нас в классе мало. На предыдущем уроке мы с вами начали изучать теги форматирования текста. И надеюсь, что в этом вам помогли справочники, на которые я вам дала ссылки в материале данного урока. Кроме того на сайте были предоставлены тесты для тренировки. Сейчас я предлагаю вам всем вместе повторить этот материал, а потом мы проведем тестирование на оценку. Кроме того вы получите сегодня на уроке по оценке за практическую работу. И будут оценки у тех, кто примет активное участие в исследовании нового материала. И средняя арифметическая пойдет в журнал. 2. Повторение пройденного материала Итак, повторяем теги, которые мы должны были усвоить к сегодняшнему уроку: Тест на сайте (1 вариант) 3. Тестирование. Презентация Переходим к индивидуальному тестированию. Вопросы вы будете видеть на экране, а в бланк, который я вам раздала, вписывать ответы. Проходит тестирование. Теперь я предлагаю вам взять в руки ручки с красным стержнем, которые у вас приготовлены, и проверить свои ответы по правильным ответам, которые вы видите сейчас на экране. И поставить себе соответствующие оценки по предложенной вам градации.
Переходим к изучению нового материала. Запишем в тетрадях число и тему урока: «Вставка изображений в Веб-страницы». Школьный сайт Вы уже пробовали вставлять изображения на свои веб-странички на школьном сайте. Но делали вы это, используя автоматический способ, не вникая, какие при этом используются теги. Вы получали загружаемый рисунок в виде кода, который используется только в системе Юкоз и его нельзя использовать в других системах создания сайтов. Кроме того этот код не дает нам возможности изменять параметры рисунков. Например, нам нужно увеличить размеры данной фотографии. А открыв редактор, мы видим только код, с которым ничего нельзя сделать. Если мы откроем страницу HTML-кодов (универсальных, подходящих для всех систем создания сайтов), то тоже увидим там код Юкоз. Что же делать? (Нужно перейти к коду HTML). У каждого рисунка, даже самого маленького, есть в Интернете свой адрес (и даже не обязательно именно на этом сайте). Дело в том любой файл, текстовый, графический или видео, загружаются на отдельную веб-страницу. А на самом сайте мы имеем только ссылки на эти файлы. Как можно узнать адрес файла, например, рисунка? Нажимаем на рисунок правой кнопкой, чтобы открылось меню, выбираем открыть изображение или сразу сам адрес. Но откроем страницу данного файла, чтобы посмотреть в каком виде он загружен в Интернет. Здесь мы тоже можем скопировать его адрес. А сейчас я вам покажу второй способ публикации рисунков на сайтах Юкоз, полуавтоматический. Жмем на кнопку «Изображение», помещаем здесь адрес рисунка и жмем на кнопку «Вставить». Мы видим изображение в том виде, как мы его загрузили. Теперь посмотрим страницу HTML-тегов. Вот код старого рисунка. А теперь попробуйте найти здесь HTML-код нового рисунка (между тегами переноса строки). Кто сможет выписать его на доске (остальные в тетради). Давайте разберемся, из чего он состоит. (тег Создадим ниже копию этого рисунка и немного с ним поэкспериментируем в полуавтоматическом режиме. Для начала изменим его размеры: ширину поставим 600 пикселей, а высоту 450. Посмотрим какие изменения произошли с тегом. (добавились атрибуты высоты и ширины). Выпишем их на доску. Значения опять пишутся после знака = и в кавычках. Можно указать только ширину, тогда высота изменится пропорционально и наоборот. Запишем в тетради: width и height – атрибуты ширины и высоты рисунка, значения – это размеры в пикселях. Продолжим эксперименты и первый рисунок выровняем влево, а второй вправо. Опять посмотрим, что изменилось в тегах. (появились атрибуты align, в первом случае со значением left, во втором со значением right). Давайте запишем: ALIGN – атрибут выравнивания. Значения: left – слева от текста, right – справа, bottom – по нижней границе строки, top – по верхнему краю, middle – по середине. hspace и vspace – атрибуты, задающие расстояние до текста в пикселах. Это тоже можно сделать в нашем полуавтоматическом режиме, делая отступ вверх, вниз, вправо, влево. Какой параметр остался нами нерассмотренным? (Граница). Попробуем установить и его. Какой атрибут появился? style С каким значением? border: 2px outset rgb(0, 100, 0);. (размер границы, стиль, цвет) Мы с вами рассмотрели все атрибуты тега вставки рисунка. Но осталось выяснить один момент: а как же наши рисунки помещаются на отдельную страницу в Интернете. Для этого есть специальные файловые менеджеры. Допустим, мы хотим вставить на нашу страничку еще одно изображения. Для этого опять жмем на кнопку «Изображение», и, щёлкая по пиктограмме «папка», попадаем в файловый менеджер. Здесь я специально для вас создала папку и поместила сюда несколько рисунков. Просмотреть их можно, нажимая на глаз. Если данные изображения вас не устраивают, вы можете загрузить свои. Но учтите, что на Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов — GIF, JPG и PNG. И теперь задание: вам нужно будет вставить на свои странички изображения, задав для них параметры, которые считаете нужными. Разрешаю вам воспользоваться полуавтоматическим режимом, чтобы съэкономить время на уроке. Но на дом вам будет дано задание создать страничку с изображениями в блокноте, как мы это с вами уже делали. Вот там вам придется набирать данные теги вручную. Можно так же оставить те рисунки, которые вы вносили автоматически, но вписать для них теги. Итак, задание понятно? Еще мне хотелось бы внести небольшой элемент соревновательности между девочками и мальчиками вашего класса. Поэтому вы можете помогать друг дружке в своих группах. Я же на этот раз не буду ходить от компьютера к компьютеру, как это делаю обычно. Потому что пока вы работаете, немного пообщаюсь с нашими гостями. Уважаемые гости, в день открытых дверей мы бы хотели распахнуть перед вами двери и нашего школьного сайта. Давайте вместе с вами заглянем в каждую из них. Итак, первая дверь ведет на страничку директора школы, здесь вы можете посмотреть документацию нашей школы. Вторая дверь ведет в учительскую, где вы можете поближе познакомиться с каждым из учителей. Войдем, например, на страничку Мишаленковой Татьяны Петровны. Здесь кроме фотографий, описания опыта учителя, ее заслуг, грамот, дипломов, имеются ссылки на ее методическую копилку. Каждый материал можно посмотреть подробнее (фауна – презентация) и скачать. Третья дверка распахивает дверь ведущую к нашему с вами, дорогие родители, сотрудничеству и взаимопониманию. Здесь представлены школьные традиции по работе с семьей (открыть спорт). За четвертой дверкой можно посмотреть на работу ученического самоуправления, все ее направления. Например, войдя в комнату школьного пресс-центра, можно скачать и посмотреть выпуски видеогазет. За 4-й дверью наш виртуальный школьный музей, в котором на сегодняшний день 2 раздела: история школы, с фотографиями и ссылками на странички директоров школы, ветеранов и медалистов. И наконец, последняя дверь выпускает нас из стен школы, потому что этот раздел посвящен нашим выпускникам. (11 класс, Аня Горюшина). Остальной материал можно посмотреть в меню сайта. Это информация о пользователях и материалах сайта, последних опубликованных на сайте и имеющих наибольшую популярность. А школьные новости можно почитать в другой рубрике. Здесь вы можете отставить свои комментарии к увиденному и услышанному сегодня. В следующем разделе мы собираем заметки из газет, в которых когда-либо писалось о нашем поселке, о школе, детском доме, клубе, людях поселка. В разделе «Календарь мероприятий» можно посмотреть фотографии и почитать сценарии к проводимым в нашей школе мероприятиям. В разделе творческих работ размещены методические материалы учителей, о которых говорилось ранее, а так же проектно-исследовательские работы учеников школы. В портфолио учеников представлены страницы классов и индивидуальные портфолио. Доказательство наших побед представлено в виде грамот и ссылок на материалы конкурсов. (Россия, Русь…). В каталоге сайтов кроме педагогических сайтов и по предметам организована рубрика сайтов «Для всей семьи». Так же имеются фотоальбомы мероприятий, форум, в котором мы начали создавать темы для обсуждения в разделах Поделимся опытом, Ученики! Вам слово! И Встреча выпускников. Есть гостевая книга, раздел вопросов и ответов, тестов и даже развивающие компьютерные игры. Остается добавить, что наш сайт, участвуя в Российском рейтинге школьных сайтов, занимает первое место по району и 3 место по области из 122-х школ, включая и городские школы. А теперь давайте посмотрим, как наши ученики справились с заданием. Оценку мы будем ставить сообща, учитывая следующие критерии: наличие HTML-кодов, количество используемых атрибутов и конечно само творчество в оформлении веб-страниц. Выставляются оценки 4. Итоги урока. Ребята вы проделали большую работу. А впереди еще изучение таких тем, как создание гиперссылок и списков. После чего каждый из вас выполнит проект – создаст небольшой сайт на любую интересующую вас тему. Домашнее задание на сайте «Моим ученикам» http://www.intuit.ru/department/internet/htmlintro/class/free/1/ Давайте обсудим, что вам у нас получилось, что пока не очень… |
Добавить документ в свой блог или на сайт
Похожие:
 | План урока: Организационный момент 2 мин. Повторение 2 мин. Вопросы... Дегтярёва Людмила Владимировна, учитель изобразительного искусства гкс(К)оу «Шадринская школа-интернат №11 I, V видов» | | План лекции. Организационный момент. Проверка присутствия студентов... Организационный момент. Проверка присутствия студентов на лекции. Сосредоточение внимания студентов (5 – 10 мин.) |
| План лекции Организационный момент. Проверка присутствия студентов... Организационный момент. Проверка присутствия студентов на лекции. Сосредоточение внимания студентов (5 – 10 мин.) | | Задачи урока: Образовательная обобщить учебный материал по теме "Аппаратные... Организационный момент (3 мин) |
| План урока Цели урока Организационный момент приветствие и объяснение целей урока/ Good morning, children. I’m glad to see. I hope you are fine and feel... |  | «Умножение и деление положительных и отрицательных чисел» Устный работа – 3 мин. IV. Опрос по правилам – 3 мин. V. Актуализация знаний – 3 мин. VI. Письменный счёт – 7 мин. VII. Упрощение... |
| Урок с игровыми моментами, с использованием компьютерных технологий.... «… у каждого человека есть свои звезды. Одним – тем кто странствует, они указывают путь. Для других это просто маленькие огоньки.... | | План урока I. Организационный момент Учитель: Здравствуйте, ребята. Садитесь. Дежурный, доложите об отсутствующих. (Доклад дежурного). Спасибо |
| Программа по формированию навыков безопасного поведения на дорогах... Организационный момент (приветствие учителя, выявление отсутствующих учащихся). – 1 мин | | План урока: I организационный момент Цели: 1 обучающая: сформировать понятие о деепричастии на конструктивном уровне; выявить синтаксические, морфологические и словообразовательные... |
| Музыкальное путешествие по Франции (по Европе) Организационный момент (2 мин.). Вход в класс под детскую песню на французском языке «Les Betises» Отхлопывают сильную долю | | План урока: Организационный момент ... |
| Программа по формированию навыков безопасного поведения на дорогах... Организационный момент (учитель и ученики приветствуют друг друга, учитель отмечает отсутствующих, сообщает тему и цели урока, раздает... | | Урока Организационный момент Соответственно здоровая еда-это Healthy Food. Выписываем данные термины в тетрадь. Как вы думаете, какая еда относится к здоровому... |
| Программа по формированию навыков безопасного поведения на дорогах... Организационный момент Установочная беседа: тема урока, его цель, план. Лексика классного обихода | | План урока Организационный момент Основная часть урока игра. Итог... ... |
