Выбранный для просмотра документ €¢â®à.doc
Скачать материал "Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс"
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Урок Федоренко.docx
Тема урока: Вставка графических объектов в html - документ
Предмет: Информатика и ИКТ
Класс: группа 1 курс
Ключевые слова: информатика, HTML, язык разметки гипертекста, задания на компьютере, создание web-страниц, урок по html
Оборудование: компьютерный класс, ОС Windows, программа Блокнот, задания к уроку в электронном виде (см. приложение).
Тип урока: комбинированный.
Формы работы: фронтальная, коллективная, индивидуальная на компьютере.
Аннотация: Данный урок предполагается использовать на интерактивных досках с программным обеспечением elite Panaboard, ресурсы урока предназначены для помощи в изучении темы «Язык разметки гипертекста».
Цель урока:
· Закрепить навыки работы при создании HTML-документа: научить вставлять изображения в web-страницу;
Задачи:
1. Формирование представления о работе в web-среде;
2. Развивать познавательный интерес и логическое мышление у учащихся.
3. Воспитывать аккуратность четкость выполнения действий, а также усидчивость и трудолюбие.
Ход урока:
1. Повторение (разминка):
1.1 повторение тегов (установить соответствие между тегами и действием)
<b> - полужирное начертание шрифта
<font> - установка шрифта
<p> - начало нового абзаца
<br> - переход на новую строку
<table> - начало таблицы
<tr>- начало строки
<td> - начало столбца
1.2 Отобрать парные теги , расположив их в три столбика
Парные: <html>, <body>, <title>, <head>, <h1...h6>
Одиночные : <hr> <br>
Могут быть одиночными или парными <tr>, <td>
1.3 Вставить необходимые теги в шаблон html-документа:
 |
2. Объяснение нового материала. Вставка изображений в html-документ.
На сайт можно ставить изображения в формате jpg, gif и png.
Для небольших изображений, не имеющих большого количества цветов, можно использовать формат gif.
Для больших же картинок требующих качественного отображения можно использовать png.
Для вставки изображения в HTML используется одиночный тэг <img>
img - это от английского слова image - изображение, картинка.
<img srс="xxx.jpg"> , где xxx.jpg - название файла изображения.
При этом, картинка должна храниться в какой-то специальной папке, например foto.
Если картинка находится в папке foto , то html код будет такой:
<img srс="foto/xxx.jpg">
Если на другом сайте в папке image то будет так:
<img srс="http://www.site.ru/image/xxx.jpg>.
Важно! Чтобы картинка появилась на вашей странице, правильно указывайте путь к ней, а ещё лучше – размещайте картинки в той же папке, что и ваша страничка.
Существуют атрибуты для этого тэга.
align - выравнивание по горизонтали
Имеет значения left и right
height (высота) и width (ширина) - размер изображения в пикселях
border - рамка вокруг изображения
<img srс=" foto/xxx.jpg " border="1"> - Создаёт рамку толщиной 1 пиксель
alt - для того, чтобы при наведении на картинку появлялась подсказка, т.е. краткое описание изображения или так называемый альтернативный текст
<img src=”foto/xxx.jpg” height=”100” width=”100” alt=”моя картинка”>
3. Закрепление материала. Рассмотрим пример создания web-странички, на которой находятся картинки с альтернативными текстом.
Нам необходимо создать html-документ Олимпиада, на котором в таблице 3х2 нужно расположить три изображения с альтернативными надписями и такими же подписями во второй строке.
|
ОЛИМПИЙСКАЯ СИМВОЛИКА
|
||
|
|
|
|
|
Зажжение олимпийского огня
|
Олимпийский флаг |
Талисманы олимпиады 2014 |
Рекомендации к выполнению задания.
1. Создайте свою папку в папке Мои документы.
2. Картинки находятся в папке foto, находящейся в сетевой папке Prepod. Откройте папку Prepod.
3. Необходимо загрузить папку foto в свою папку.
4. При вставке картинки, измените её размер с помощью атрибутов тега <img>.
5. Cохраните html-файл в своей папке с именем Олимпиада.
Исходный html-код
<html>
<head>
<title>Олимпиада</title>
</head>
<body>
<center><h1><i> ОЛИМПИЙСКАЯ СИМВОЛИКА </i></h1>
<center><table>
<tr>
<td><img alt="Зажжение олимпийского огня" src=1.jpg widht="300" height="200">
<td><img alt="Олимпийский флаг" src=2.jpg widht="300" height="200">
<td><img alt="Талисманы олимпиады 2014" src=3.jpg widht="300" height="200">
<tr>
<td><center><i><font face="Arial" size=3 color="red">Зажжение<br> олимпийского огня
<td><center><i><font face="Arial" size=3 color="red">Олимпийский <br>флаг
<td><center><i><font face="Arial" size=3 color="red">Талисманы <br>олимпиады 2014
</table> </font></i>
</body>
</html>
|
Указом Президента РФ от 30 января 1998 года было решено «В целях повышения социальной значимости материнства установить праздник ДЕНЬ МАТЕРИ и отмечать его в последнее воскресенье ноября»
|
|
|
Мама - это значит нежность, Это ласка, доброта, Мама - это безмятежность, Это радость, красота Мама - это зелень лета, Это снег, осенний лист, Мама - это лучик света, Мама - это значит ЖИЗНЬ! |
|
|
|
С годами, став взрослее, в чувствах строже. Вдруг сердцем начинаешь понимать: Нет человека ближе и дороже. Чем женщина, которой имя - Мать. |
4. Домашнее задание. В преддверии международного Дня матери, создайте дома страничку следующего вида.
Используемые источники:
1. Информатика и ИКТ, Н.Д.Угринович, Бином, 2010г.
2. www.html.ru
6. http://images.yandex.ru/yandsearch?p=3&text=%D1%84%D0%BE%D1%82%D0%BE%20%D0%BE%D0%BB%D0%B8%D0%BC%D0%BF%D0%B8%D0%B9%D1%81%D0%BA%D0%BE%D0%B9%20%20%D1%82%D0%B0%D0%BB%D0%B8%D1%81%D0%BC%D0%B0%D0%BD%202014&pos=97&uinfo=sw-1312-sh-645-fw-1087-fh-448-pd-1&rpt=simage&img_url=http%3A%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F2%2F71%2F304%2F71304392_835553_400_300_source.jpg
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ ‚ ¦®!.txt
Скачать материал "Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс"
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
, , , Одиночные : Могут быть одиночными или парными 1.3. Вставить необходимые теги в шаблон html-документа: Объяснение нового материала. Вставка изображений в html-документ. На сайт можно ставить изображения в формате jpg, gif и png. Для небольших изображений, не имеющих большого количества цветов, можно использовать формат gif. Для больших же картинок требующих качественного отображения можно использовать png. Для вставки изображения в HTML используется одиночный тэг img - это от английского слова image - изображение, картинка. , где xxx.jpg - название файла изображения. При этом, картинка должна храниться в какой-то специальной папке, например foto. Если картинка находится в папке foto , то html код будет такой: Если на другом сайте в папке image то будет так:. Важно! Чтобы картинка появилась на вашей странице, правильно указывайте путь к ней, а ещё лучше – размещайте картинки в той же папке, что и ваша страничка. Существуют атрибуты для этого тэга.align - выравнивание по горизонтали Имеет значения left и right height (высота) и width (ширина) - размер изображения в пикселях border - рамка вокруг изображенияborder="1" - Создаёт рамку толщиной 1 пиксельalt - для того, чтобы при наведении на картинку появлялась подсказка, т.е. краткое описание изображения или так называемый альтернативный текстalt=”моя картинка” Закрепление материала. Рассмотрим пример создания web-странички, на которой находятся картинки с альтернативными текстом. Нам необходимо создать html-документ Олимпиада, на котором в таблице 3х2 нужно расположить три изображения с альтернативными надписями и такими же подписями во второй строке. Рекомендации к выполнению задания. Создайте свою папку в папке Мои документы. Картинки находятся в папке foto, находящейся в сетевой папке Prepod. Откройте папку Prepod. Необходимо загрузить папку foto в свою папку. При вставке картинки, измените её размер с помощью атрибутов тега . Cохраните html-файл в своей папке с именем Олимпиада. Исходный html-код Олимпиада ОЛИМПИЙСКАЯ СИМВОЛИКА Зажжение олимпийского огня Олимпийский флаг Талисманы олимпиады 2014
6 656 267 материалов в базе
Настоящий материал опубликован пользователем Пицель Татьяна Федоровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
600 ч.
Мини-курс
5 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.