Главная / Информатика / Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс

Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс

Название документа Автор.doc

Автор: Федоренко Елена Дмитриевна

Должность: мастер производственного обучения

Категория: высшая

Образовательное учреждение: ГБОУ НПО Профессиональное училище № 71 Краснодарского края

E-mail: doyva@rambler.ru


Тема урока: Вставка графических объектов в html - документ

Предмет: Информатика и ИКТ

Класс: группа 1 курс.

Ключевые слова: информатика, HTML, язык разметки гипертекста, задания на компьютере, создание web-страниц, урок по html

Оборудование: компьютерный класс, ОС Windows, программа Блокнот, задания к уроку в электронном виде (см. приложение).

Тип урока: комбинированный.

Формы работы: фронтальная, коллективная, индивидуальная на компьютере.

Аннотация: Данный урок предполагается использовать на интерактивных досках с программным обеспечением elite Panaboard, ресурсы урока предназначены для помощи в изучении темы «Язык разметки гипертекста».


Название документа Урок Федоренко.docx

, , ,

Одиночные : <hr> <br>

Могут быть одиночными или парными , <td>



    1. Вставить необходимые теги в шаблон html-документа:



<____>

Документ <____>

Текст

<____>

html>


Документ

Текст



  1. Объяснение нового материала. Вставка изображений в html-документ.

На сайт можно ставить изображения в формате jpg, gif и png.

Для небольших изображений, не имеющих большого количества цветов, можно использовать формат gif.

Для больших же картинок требующих качественного отображения можно использовать png.

Для вставки изображения в HTML используется одиночный тэг

img - это от английского слова image - изображение, картинка.

, где xxx.jpg - название файла изображения.

При этом, картинка должна храниться в какой-то специальной папке, например foto.

Если картинка находится в папке foto , то html код будет такой:

<img srс="foto/xxx.jpg">

Если на другом сайте в папке image то будет так:

с="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.jpgheight=”100” width=”100” alt=”моя картинка”>



  1. Закрепление материала. Рассмотрим пример создания web-странички, на которой находятся картинки с альтернативными текстом.

Нам необходимо создать html-документ Олимпиада, на котором в таблице 3х2 нужно расположить три изображения с альтернативными надписями и такими же подписями во второй строке.



ОЛИМПИЙСКАЯ СИМВОЛИКА


hello_html_m94e8e12.png












hello_html_9a592bb.png

hello_html_m6465fad0.jpg

Зажжение

олимпийского огня


Олимпийский флаг

Талисманы олимпиады 2014



Рекомендации к выполнению задания.

  1. Создайте свою папку в папке Мои документы.

  2. Картинки находятся в папке foto, находящейся в сетевой папке Prepod. Откройте папку Prepod.

  3. Необходимо загрузить папку foto в свою папку.

  4. При вставке картинки, измените её размер с помощью атрибутов тега <img>.

  5. Cохраните html-файл в своей папке с именем Олимпиада.





Исходный html-код

Олимпиада

<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">

Зажжение
олимпийского огня

Олимпийский
флаг

Талисманы
олимпиады 2014

Урок информатики и ИКТ «Вставка графических объектов в HTML - документ» 1 курс
  • Информатика
Описание:
,  , ,
Одиночные :


Могут быть одиночными или парными 

1.3. Вставить необходимые   теги  в шаблон   html-документа:

fedo1.jpg
  1. Объяснение  нового  материала. Вставка  изображений   в 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 - для того, чтобы при наведении на картинку появлялась подсказка, т.е. краткое описание изображения или так называемый альтернативный  текст
xxx.jpg%E2%80%9Dalt=”моя картинка”>

  1. Закрепление  материала.  Рассмотрим  пример  создания  web-странички, на которой  находятся  картинки  с альтернативными  текстом.

Нам необходимо создать html-документ Олимпиада, на котором в таблице 3х2  нужно расположить три изображения   с альтернативными надписями и такими же подписями во второй строке.

fedo2.jpg




Рекомендации  к  выполнению  задания.

  • Создайте свою папку в папке Мои документы.
  • Картинки  находятся  в  папке foto, находящейся  в сетевой  папке  Prepod. Откройте  папку Prepod.
  • Необходимо  загрузить  папку foto  в свою  папку.
  • При вставке картинки, измените  её  размер  с  помощью атрибутов тега  .
  • Cохраните html-файл  в своей  папке с именем Олимпиада.

Исходный  html-код


Олимпиада


ОЛИМПИЙСКАЯ   СИМВОЛИКА


1.jpg%C2%A0
2.jpg%C2%A0
3.jpg
Зажжение
олимпийского огня
Олимпийский
флаг
Талисманы
олимпиады 2014

Автор Федоренко Елена Дмитриевна
Дата добавления 26.10.2013
Раздел Информатика
Подраздел
Просмотров 2134
Номер материала 606
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓