Конкурсы

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

Урок информатики по теме: «Вставка изображений в Web-страницы

Гиперссылки на Web-страницах

Составитель: Слепцова Юлия Михайловна, МАОУ – лицей № 2, г. Альметьевск, учитель математики и информатики

Урок посвящен закреплению и изучению новых html – тэгов. А именно тэгов, используемых для вставки изображений и гиперссылок в Web-страницы. Данная тема изучается в курсе информатики 8 класса.

Цели урока:

- рассмотреть задачи из материала ГИА по теме «Интернет»;

- закрепить навыки создания документов HTML: структуру создания web-страницы;

- научить использовать рисунок для оформления web-страницы;

- развитие познавательного интереса, логического мышления;

- развитие координации и внимания при работе с клавиатурой и мышью;

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

Ход урока

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

II. Актуализация опорных знаний учащихся

▪ Рассмотрим задачи из материала ГИА по теме «Интернет»,  для этого вспомним, что включает в себя адрес файла  на сервере файлового архива (адрес файла включает в себя способ доступа к файлу и имя сервера Интернета, на котором находится файл).

Например:

Адрес файла запишется следующим образом: http://html.ru/net.txt, т.е. 6231547.

Второй пример:

Адрес файла запишется следующим образом: http://com.ru/htm.txt, т.е. ЖГБДАЕВ.

На прошлом уроке мы научились создавать  web-страницы с использованием HTML-тэгов. Давайте повторим.

▪ Что такое HTML? (HTML – язык гипертекстовой разметки Web-страниц – является компьютерным языком программирования для разработки Web-страниц. HTML – коллекция управляющих символов -дескрипторов для добавления, форматирования элементов Web-страницы);

▪ Вспомни теги! (учащиеся по порядку называют теги, и объясняют их значение):

(<HTML> - начало страницы

<HEAD> -оформление заголовка страницы

<TITLE>…</TITLE>

</HEAD

<BODY> - текст и основная часть страницы

</BODY>

</HTML>

Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен

обязательно содержать хотя бы один из атрибутов:

COLOR=”шестнадцатеричный код цвета”, 

FACE=гарнитура шрифта, 

SIZE размер от 1 до 7. 

<P> ваш текст </P> - создание абзаца

ALIGN=“left” – выравнивание текста по левой стороне

ALIGN=“right” – выравнивание текста по правой стороне

ALIGN=“center” – выравнивание теста по центру

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

Итак, мы повторили структуру создания web-страницы и правила сохранения HTML документа. Это будет нам необходимо при изучении новой темы на занятии. Сегодня мы научимся вставлять рисунки и гиперссылки  в web-страницы.

Для вставки рисунка в web – страницу используется тег <img>, с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. Если графический файл находится на локальном компьютере в той же папке, что и файл  web-страницы, то в качестве значения атрибута src достаточно указать только имя файла. Например:

<img SRC=’Мой файл.jpg’ > </img>

Если файл находится в другой папке на данном  локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:

<img SRC=’C:Мои рисунки\Мой файл.jpg' > </img>

 Следующий атрибут тега <img> - align (выравнивание). Мы уже с ним знакомы. Какие значения он может принимать? Правильно:(left, right, top, middle, bottom).

Например: <img SRC=’C:Мои рисунки\Мой файл.jpg'  ALIGN=‘right’> </img>

Часто рисунки вставлены в рамки, язык HTML тоже позволяет нам сделать обводку, с помощью атрибута border. Этот атрибут может принимать значения от 0 до 10. Чем больше значение, тем толще обводка рисунка. 

А теперь рассмотрим размещение гиперссылок в web-страницу. Гиперссылки, размещенные на web-странице, позволяют загружать в браузер другие web-страницы, хранящиеся на локальном компьютере или в интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.

Гиперссылка создается с помощью тэга <A> и его атрибута Href, указывающего, в каком файле хранится загружаемая web-страница:

<A HREF=‘адрес’>гиперссылка </A>

Указателем ссылки может быть текст или рисунок.

 IV.  Закрепление нового материала

Создать html – страницу про свою семью. Вставить рисунок и гиперссылку. Например, 

<html>

<head>

<body bgcolor="blue">

<title> Моя семья </title>

</head>

<FONT COLOR="white" Faсe="Arial"size=16>

<P  ALIGN="center">Семья Ивановых</P>

</FONT>

<FONT COLOR="white"size=6>

<p>Моя семья очень дружная. Она состоит из четырех человек: папа, мама, сестра Марина и я - Карина. Я очень люблю свою семью </p>

<img SRC="foto.jpg" align=left > </img>

<A href="Karina.html"><FONT COLOR="white"size=6> Карина</FONT></A>

</FONT>

</body>

</html>

Вторая страница:

<html>

<head>

<body bgcolor="blue">

<title> Страница Карины </title>

</head>

<FONT COLOR="white" Faсe="Arial"size=16>

<P  ALIGN="center">Карина</P>

</FONT>

<FONT COLOR="white"size=6>

<p>Иванова Карина Александровна родилась 18 июля 1999 года </p>

</FONT>

</body>

</html>

V.  Подведение итога

- сегодня мы с вами научились вставлять изображения и гиперссылки в web-страницу; 

- полученные сегодня знания пригодятся нам при создании своего сайта.

VI. Домашнее задание

п.3.7.4, 3.7.5 читать, ответить на вопросы

Рекомендуем посмотреть:

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

Конспект открытого урока по информатике в 9 классе

Оценка достижений учащихся на уроках информатики

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

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

Наталья Сергеевна Протопопова # 21 октября 2013 в 21:30 +2
Спасибо за конспект.Задания соответствуют уровню 8 класса.Готовый конспект для проведения урока по любому учебнику.
Надежда Андреевна Худайкулова # 30 января 2014 в 14:53 +1
Хороший урок. Задания и на подготовку к экзамену и по теме урока. Практическая работа поможет детям закрепить навыки по созданию собственных страниц. Спасибо.
Татьяна Геннадиевна Гузева # 6 февраля 2014 в 12:09 +1
Спасибо. В нашей школе эта тема изучается в 10 классе, но Ваш конспект вполне можно адаптировать под этот возраст. Мне нравится этот сайт.   :)
Александр Николаевич Мартынов # 20 мая 2014 в 10:06 +1
Спасибо за материал. Отличные примеры при актуализации знаний, хорошее практическое задание.
Людмила Сергеевна Уфимская # 2 июня 2014 в 15:31 +1
Актуальный материал. В настоящее время тема компьютерных сетей является самой востребованной в связи с распространением сети Интернет. Большинство компьютеров оснащены подключением к сети. Интернет применяется как для учебы, так и для работы повсеместно. Мы изучаем тему в 9 классе. Я думаю, что задания подойдут и для учеников моего возраста.
Елена Александровна Иваненко # 1 сентября 2014 в 20:12 +1
вставка изображений-это очень интересно выполнять ученикам на уроке.очень хорошо и интересно изложен материал,спасибо
Оксана Александровна Кужелева # 30 октября 2014 в 22:56 +1
Хороший урок. Задания и на подготовку к экзамену и по теме урока. Практическая работа поможет детям закрепить навыки по созданию собственных страниц. Спасибо
Оксана Александровна Кужелева # 30 октября 2014 в 23:07 +1
вставка изображений-это очень интересно выполнять ученикам на уроке.очень хорошо и интересно изложен материал, большое спасибо.
Елена Викторовна Журавлева # 7 ноября 2014 в 18:30 +1
Хороший практический урок. Прослеживаются все основные этапы урока. Практическая работа направлена на отработку навыков применения основного набора тегов. Спасибо.
Марат Калимканович Сагумбаев # 20 ноября 2014 в 12:14 +1
Спасибо автору!Очень актуальный материал!
Надежда Анатольевна Ващенко # 7 декабря 2014 в 13:07 +1
Спасибо, Юлия Михайловна. Удивительно, что Вам удалось гармонично связать задания ГИА с материалом не входящим в экзамен. Чаще всего эти задачи не получается связать, или притягиваем их друг к другу за уши.
Митюшкина Марина Викторовна # 29 марта 2015 в 16:28 +1
Разработка очень актуальна. Задания изложены верно и доступно. Я думаю учащимся будет интересно в итоге посмотреть на свое творение на уроке.
Александр Сергеевич Левченко # 8 апреля 2015 в 11:51 +2
Хотелось бы оставить небольшой совет:
учите детей уже со школьных лет работать с денвером или на хостингах. Современное образовательное положение требует "обучения в ситуациях", т.е. мы даём знания, умения,навыки и показываем как их реализовать.

Я, обучаясь в школе, знал язык разметки HTML, мог делать HTML-страницы, но не имел представления что с ними делать дальше. И по сути, на моём компьютере они были абсолютно бесполезным материалом. А если бы мне показали как загрузить эту страницу на бесплатный хостинг, я был бы переполнен эмоциями и этот приём мотивировал бы меня развивать свои знания в данной области.
Даша Павлушкина # 5 мая 2015 в 05:50 +1
просто класссс !!!!!!!!
Екатерина Владимировна Лейман # 16 мая 2015 в 06:29 +1
Познакомилась с конспектом урока. Спасибо.Материал очень полезен, очень понравилось, что вы включили задания из ГИА.

Полностью согласна с предыдущим комментарием Александра Сергеевича. В этом году вела факультатив по сайтостроению, с детьми выложили получившиеся сайты в интернет, так их одноклассники пришли узнавать, будет ли такие занятия в следующем году. Отличная мотивация и повышение интереса к предмету!!!!
Марина Николаевна Обабко # 18 мая 2015 в 11:18 0
Вообще дети с темой "WEB-сайт" хорошо работают, а с таким конспектом полезным их интерес будет более высоким...спасибо за полезную информацию по теме...
Екатерина Викторовна Соловьёва # 22 мая 2015 в 15:21 0
Здравствуйте, Юлия Михайловна. Отличная тема "Создание и разработка WEB-сайтов" и тем более вставка изображений. Дети всегда с удовольствием работают на уроках. Хорошая идея параллельно изучать практику с решением задач, входящих в курс ГИА.
Наталия Леонидовна Никитенко # 28 июня 2015 в 17:45 0
Здравствуйте, Юлия Михайловна! Подготовка к ОГЭ (ГИА) - вещь нужная. Но считаю, что нет необходимости из этого делать что-то особенное, просто повторение изученного ранее (для учеников), так как не все сдают этот экзамен. И еще хотелось сказать по поводу целей урока, по-моему их многовато, можно было бы часть их оформить в виде задач (вот эту, например "- развитие координации и внимания при работе с клавиатурой и мышью").
Мне понравилась выбранное для детей задание - страничка о своей семье.
Анастасия Юрьевна Кузнецова # 23 сентября 2015 в 16:46 0
Здравствуйте, Юлия Михайловна! Данную тему изучаем в 10 классе. Не увидела этапов рефлексии и валеологии. Задания интересные. Форма разнообразная.
Елена Валерьевна Флягина # 8 февраля 2016 в 16:16 0
Цель урока должна быть одна, а задач - несколько. Интересно, что на уроке успевается рассмотреть и решение задач из ГИА, и объяснение нового материала, и сделать практику на компьютере.
Елена Владимировна Прядкина # 12 августа 2016 в 20:00 0
Здравствуйте! Большое спасибо за интересную разработку. Хотелось бы порекомендовать для "сильных" учащихся в качестве дифференцированных заданий рассмотреть различные варианты вставки картинки ( слева от текста, внутри текста, справа от текста и т.д.
Дарья Сергеевна Куценко # 10 сентября 2016 в 14:43 0
Хорошая разработка урока. Хорошо продуманная контрольная практическая работа. Актуальная тема материала для практической работы. Спасибо. Обязательно использую Ваш материал на своих уроках.
Ольга Алексеевна Иванилова # 12 декабря 2016 в 21:51 0
Хороший урок. Понравилась практическая часть. С удовольствием буду использовать в своей работе. Спасибо.
Елена Александровна Рабцевич # 4 января 2017 в 21:50 0
Юлия Михайловна, спасибо Вам за разработку. Полезная и хорошая информация для работы. Буду элементы применять на своих уроках. Творческих успехов Вам!
Максим Евгеньевич Докукин # 25 октября 2018 в 12:02 0
Спасибо За разработку! Мне тоже очень понравился урок