Урок информатики по теме: «Вставка изображений в Web-страницы
Гиперссылки на Web-страницах
Составитель: Слепцова Юлия Михайловна, МАОУ – лицей № 2, г. Альметьевск, учитель математики и информатики
Урок посвящен закреплению и изучению новых html – тэгов. А именно тэгов, используемых для вставки изображений и гиперссылок в Web-страницы. Данная тема изучается в курсе информатики 8 класса.
Цели урока:
- рассмотреть задачи из материала ГИА по теме «Интернет»;
- закрепить навыки создания документов HTML: структуру создания web-страницы;
- научить использовать рисунок для оформления web-страницы;
- развитие познавательного интереса, логического мышления;
- развитие координации и внимания при работе с клавиатурой и мышью;
- воспитать аккуратность и грамотность при выполнении заданий, а также трудолюбие и желание довести работу до конца.
Ход урока
I. Организационный момент.
II. Актуализация опорных знаний учащихся
▪ Рассмотрим задачи из материала ГИА по теме «Интернет», для этого вспомним, что включает в себя адрес файла на сервере файлового архива (адрес файла включает в себя способ доступа к файлу и имя сервера Интернета, на котором находится файл).
Например:
.jpg)
Адрес файла запишется следующим образом: http://html.ru/net.txt, т.е. 6231547.
Второй пример:
.jpg)
Адрес файла запишется следующим образом: 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 – страницу про свою семью. Вставить рисунок и гиперссылку. Например,
.jpg)
<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 классе
Конспект урока информатики в 4 классе
Оценка достижений учащихся на уроках информатики
Конспект открытого урока по информатике в 9 классе
Конспект урока информатики в 3 классе
