Конспект урока по информатике и ИКТ
«Вставка изображений в веб-страницы»
- Здравствуйте, ребята. Надеюсь, отведённое нам время мы проведем с пользой, интересно и продуктивно. Предлагаю вам повернуться друг к другу лицом и улыбнуться.
Учитель. А теперь, ребята, обратите внимание на экран. Здесь две веб-страницы. (Приложение 1)
1) Чем отличаются эти веб-страницы?
2) Которая из страниц интереснее?
3) Почему? (она более информативная, реалистичная, много изображений,…)
4) что нужно сделать чтобы создать такую страницу? (вставить изображения)
- Итак, какая тема сегодняшнего урока? («Вставка изображений в веб-страницы»)
Учитель. Для изучения темы нужно повторить некоторые понятия:
(ученик читает вопрос и отвечает)
1. Как называются ключевые слова при создании web-страниц?
а) операторы;
б) гипертексты;
в) тэги.
2. Какой помощью чего просматривается web-страница?
а) драйвер;
б) текстовый процессор;
в) браузер.
3. С помощью какой программы можно редактировать web-страницу?
а) Блокнот;
б) Paint;
в) Microsoft-PowerPoin.
- Учитель. Молодцы
- вы знаете понятия и уже умеете создавать простые веб-страницы.
Вы сказали, чтобы веб-страница была оригинальной, интересной нужно вставить изображения. Какую цель ставим перед уроком?
-Цель - научиться вставлять изображения в веб-страницы.
Для этого в языке HTML используется тег IMG с атрибутом SRC, который указывает на место хранения файла.
Возможны три способа записи тэга:
1. Файл хранится в той же папке, что и веб-страница. Тогда в атрибуте можно указать только имя файла и его расширение: IMG SRC=”kazan.jpg”. Возможны и другие расширения графических файлов.
Попытаемся расшрифовать эту запись: открывающая угловая скобка, тэг, атрибут, знак равенства, имя файла, расширение, закрывающая угловая скобка.
Очень важно правильно писать название файла и его расширение. Поняли?
2. Файл хранится в другой папке данного компьютера. Тогда необходимо указать путь к файлу. Например: IMG SRC=”C:\Photo\Sait\kazan.jpg” Снова расшрифуем запись: тэг, атрибут, диск, папка, папка, имя файла, расширение. Запомнили?
3. Если файл находится в глобальной сети, то необходимо указывать Интернет-адрес того файла: IMG SRC=”http://www.baltasi.ru/kazan.jpg” . Поняли?
А. Все 3 способа с тегом IMG я раздал вам в виде карточек, их изучите дома.
(Физкультминутка).
Учитель. А теперь закрепим изученное. Перед вами листочки бумаги, на которых написаны составные части тэга IMG. (Приложение 2). Тэг разделен на 11 частей. Возьмите листы и выйдите ко мне. Ваша задача - расположиться в правильной последовательности, чтобы получился правильный тэг. Попрошу тебя посмотреть. (IMG SRC=”C:\IMAGE\class.bmp”). Какой из трех путей вставки изображения вы повторили только что? Что нужно сделать, чтобы появился первый способ?
Учитель. Что мы делали?
- запомнили способ вставки изображения на веб страницу.
Учитель. Молодцы! А теперь садимся за компьютеры.
Учитель. А где вам пригодиться вставка изображений в веб-страницы?
(при создании сайтов).
Учитель. А еще практическое умение вставлять изображения вам пригодится при составлении резюме. Скоро вы окончите школу, вуз, даже во время каникул вы начнете искать работу. От вас будут требовать резюме. Слово «резюме» с французского языка переводится как «краткое изложение». Составные части резюме (прочитай ХХ): возраст, профессия, учебное заведение, которое вы закончили, место предыдущей работы и другие данные. Резюме может быть представлено как в письменной форме, так и в электронной, которую потом можно будет разместить в сети Интернет нас сайтах по поиску работы. Посмотрите на веб-страницу в которой я нашел интересный материал. Туристическая компания предлагает конкурс на работу зарплатой 100 000 долларов за полгода. Работа состоит в том, надо путешествовать по Австралии и разместить на сайт фотографии и вести блог. Чтобы получить эту работу необходимо загрузить свое резюме. А теперь представим, что нам нужна эта работа и попробуем самостоятельно заполнить веб-резюме.
Ребята, задания практической работы перед вами, начнем работу по заданному алгоритму.
На рабочем столе открыть папку «Резюме», с помощью Блокнота открыть файл index.htm.
В первый контейнер введите ваше имя и фамилию.
Открыть файл «Информация» и скопировать оттуда подходящие вам 3 качества во второй контейнер файла index.htm
Выбрать понравившуюся вам геометрическую фигуру (Приложение 3) и в контейнер IMG SRC=” вписать имя и расширение этого изображения.
С помощью браузера Internet Explorer открыть файл index.htm, убедиться в правильности выполненной работы, закрыть браузер.
Открыть электронную почту, прикрепить файл index.htm и выбранное изображение и отправить по адресу *******@mail.ru
Учитель. Итак, рассмотрим ваши работы. Я открою работу Вадима. Вадим, расскажи про свое резюме.
Вадим выбрал квадрат.
- Все работы я просмотрю и на электронной почте вы увидите свои оценки.
- Кто из вас задумался: для чего вместо фотографий я вставил изображение геометрической фигуры?
- Выбрав фигуру, вы прошли психогеометрическое тестирование, в котором отображаются подходящие вам качества. Вам интересно узнать про себя?
Тогда встали и подошли к той фигуре, которую вставили в веб-странице.
Кто выбрал треугольник, у кого из вас самые светлые волосы - прочитайте о себе.
Кто из прямоугольников самый близкий к потолку – прочитай о себе.
Среди выбравших квадрат, у кого самый высокий каблук – прочти ваши качества.
Из выбравших круг, у кого самые светлые глаза прочитай, какие вы замечательные люди.
Среди выбравших зигзаг, у кого самая большая обувь, прочитайте о себе.
Учитель. На уроке мы говорили о вставке изображений в веб-страницы. Какие проблемы могут возникнуть при вставки изображений
1. Картинка не отображается. В качестве домашнего задания, я предлагаю тем из вас, кто выбрал Треугольник и Зигзаг выяснить причины проблемы.
2. Картинка открывается на полный экран. У кого Квадрат или Круг – домашнее задание – как уменьшить изображение ?
3. Изображение двигается – анимация. Ребята с Прямоугольниками – вам задание – как вставить анимацию в веб-страницу.
Учитель. Ответы на этот вопрос вы найдете, прочитав Параграф 3.7.4.
Учитель. Ребята, приглашаю вас к себе в круг. Давайте обобщим урок. Что я сегодня узнал – я, например, узнал, что вы - замечательные ребята, которые умеют помогать, сотрудничать, поддержать. А что узнали вы?
-
-
-
Спасибо, ребята, за активное участие на уроке. Мне было очень приятно работать с вами! Удачи вам и успехов!
Огромное вам спасибо!