Урок информатики "Создание таблиц, вставка и оформление рисунков на Web- страницах"

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

Цели урока:

Образовательная:

Сформулировать основные принципы добавления графических изображений и таблиц в WEB-страницы; познакомить учеников с тегом вставки картинок, таблиц; продемонстрировать использования этих тегов на конкретных примерах, применить полученные знания на практике.

Развивающая:

Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

Воспитательная:

Воспитывать аккуратность, внимательность, вежливость.

Оборудование, использованная литература и средства наглядности:

учебник Н. Угринович «Информатика и ИКТ» 8 кл., мультимедийная система, интерактивная доска, компьютеры, презентация Microsoft PowerPoint.

Ход урока

1. Организационный момент.

Здравствуйте! Прошу всех садиться. Меня зовут Оксана Владимировна. Дежурный назовите тех, кто сегодня отсутствует.

2. Актуализация опорных знаний.

Ребята, ответьте мне на следующие вопросы:

- Как можно изменить шрифт в вашем сайте?

тег … - изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 color - цвет текста, face - название шрифта

- Как задать название документа, которое выводится в строке заголовка в программе-браузере? (Тег

содержит слова, которые появляются в стоке заголовка браузера)

- Как установить цвет фона документа?( Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB

- Как поместить в качестве фона изображение? (Background – помещает в качестве фона изображение из файла с картинкой

3. Сообщение темы.

Все это вы уже изучали ранее, а сегодня мы будем учиться правильно оформлять рисунки на Web- страницах и создавать таблицы (слайд № 1)

4. Изучение нового материала.

Сейчас внимательно меня слушайте, основные моменты, которые я выделю, пожалуйста, законспектируйте себе в тетрадь.

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные –.GIF,.JPEG. Для фотографий лучше использовать формат JPEG

для рисунков и пиктограмм – GIF (Слайд 2).

(слайд 3)

Атрибуты:

1. Src - обязательный, значение- адрес изображения

Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:

2. alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны.

Alt= “Собака“ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.

3. align – выравнивание. Положение изображения лучше всегда указывать явно. (слайд 4)

Значения:

left, right – по левому или по правому краю.

top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.

middle – середина изображения выравнивается с серединой строки.

bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.

4. border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения (слайд 5)

border= толщина рамки в пикселях

border=0 – убрать рамку

5. height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну.

width = “100%” height= 20 – полоса на все окно шириной 20 пикселей.

Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width.

6. hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.

Центрирование изображения (слайд 6)

Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела или новой строки.

Обтекание изображения текстом (слайд 7)

Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением, ð текст обтекает изображение.

Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом. (слайд 8)

Вот HTML-код этой станицы (слайд 9)

Весь материал – смотрите документ.

Тема урока: «Создание таблиц, вставка и оформление рисунков на Web- страницах».

Конспект урока по информатике

Класс: 8 «а»

Учитель информатики: Чигарева Татьяна Александровна

Тема: Создание таблиц, вставка и оформление рисунков на Web- страницах

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

Цели урока:

• Образовательная:

• Сформулировать основные принципы добавления графических изображений и таблиц в WEB-страницы; познакомить учеников с тегом вставки картинок, таблиц; продемонстрировать использования этих тегов на конкретных примерах, применить полученные знания на практике.

• Развивающая:

• Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

• Воспитательная:

• Воспитывать аккуратность, внимательность, вежливость.

Оборудование, использованная литература и средства наглядности:

учебник Н. Угринович «Информатика и ИКТ» 8 кл., мультимедийная система, интерактивная доска, компьютеры, презентация Microsoft PowerPoint.

План урока:

Ход урока:

1. Организационный момент.

Здравствуйте! Прошу всех садиться. Меня зовут Оксана Владимировна. Дежурный назовите тех, кто сегодня отсутствует.

2. Актуализация опорных знаний.

Ребята, ответьте мне на следующие вопросы:

- Как можно изменить шрифт в вашем сайте?

тег font … font- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 color - цвет текста, face - название шрифта

- Как задать название документа, которое выводится в строке заголовка в программе-браузере? (Тег Title…Title содержит слова, которые появляются в стоке заголовка браузера)