Урок информатики по теме: «Вставка изображений
в Web-страницы
Гиперссылки
на Web-страницах.
Цель
урока:
-
научить вставлять графические изображения и гиперссылки в html-документ.
Задачи
урока:
- закрепить навыки создания документов HTML: структуру создания
web-страницы;
-
научить использовать рисунок для оформления web-страницы;
-
развитие у учащихся внимания и навыков самостоятельной работы;
-умение
организовывать учебное сотрудничество и совместную деятельность со
сверстниками.
-
воспитать аккуратность и грамотность при выполнении заданий, а также
трудолюбие
и желание довести работу до конца.
Ход
урока
- Организационный момент.
Приветствие, проверка
готовности к занятию.
- Актуализация опорных знаний учащихся.
На предыдущем занятии мы
научились создавать web-страницы с использованием HTML-тэгов, работать с
текстом, используя различные способы начертания текста, выравнивая его по
левому и правому краю.
Давайте вспомним как мы хорошо
запомнили усвоили структуру web-страницы и служебные слова, необходимые для
создания web-страницы.
Выполнение теста.
ТЕСТ
|
1)
Какие тэги должны присутствовать в HTML – документе обязательно?
А.<HTML></HTML>
Б.<P></P>
В.<HR> Г.<H6></H6>
2).
Внутрь какого контейнера помещается код веб-страницы?
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE > Г.<HEAD></
HEAD >
3).
Какой тэг задает заголовок веб-страницы?
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE > Г.<HEAD></
HEAD >
4). В
какой тэг помещается название веб - страницы?
|
|
А.<HTML></HTML>
Б.<BODY></
BODY В.<TITLE><
/TITLE > Г.<HEAD></ HEAD >
5) В
какой тэг помещается то, что мы видим в окне браузера?
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE > Г.<HEAD></
HEAD >
|
Взаимопроверка (работа в парах).
Оцените,
поставьте отметку
Ответы:
(а, а, г, в, б)
Давайте
повторим теги, которые мы будем использовать сегодня в нашей работе. (учащиеся
по порядку называют теги, и объясняют их значение):
(<HTML>
- начало страницы
<HEAD>
-оформление заголовка страницы
<TITLE>…</TITLE>
</HEAD
<BODY>
- текст и основная часть страницы
</BODY>
</HTML>
Парный
тег <FONT> позволяет управлять параметрами шрифта. Он должен
обязательно
содержать хотя бы один из атрибутов:
COLOR=”шестнадцатеричный
код цвета”,
FACE=гарнитура
шрифта,
SIZE
размер от 1 до 7.
<P>
ваш текст </P> - создание абзаца
ALIGN=“left”
– выравнивание текста по левой стороне
ALIGN=“right”
– выравнивание текста по правой стороне
ALIGN=“center”
– выравнивание теста по центру
- Изучение нового материала.
Графика всегда преобладала
над другими видами представления информации.
На данном уроке мы научимся размещать
в web-странице рисунки и гиперссылки.
Все картинки, фотографии,
иллюстрации, схемы и графики вставляются в документ при помощи такого
элемента, не требующий закрывающей части: <img
src="image.jpg"> .
В случаи, если картинка расположена
в папке, лежащей в вашей основной папке, то путь путь к ней будет выглядеть
так: <img src="papka/image.jpg">
.
Если же картинка размещена на другом сайте, то путь нужно
прописывать полностью, вот таким образом: <img src="http:
// www. sait.
com. ua
/ images/image.jpg">.
Для своего же удобства картинку лучше класть в одну папку с web-страницей.
Также важно учитывать регистр имен.
Атрибут «align», который отвечает за выравнивание
текста есть и у картинок:
<img src="image.jpg" align="left">
В таком случае картинка будет прижата к левому краю экрана, а
текст будет обтекать ее справа.
Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать"Right":
<img src="image.jpg"
align="right">
Для размещения изображения также используются атрибуты:
Width=ширина
изображения в пикселях;
Height=
высота изображения в пикселях;
Border=ширина
рамки изображения в пикселях;
Hspase=горизонтальный
отступ в пикселях от изображения до текстовой или
графической информации web-страницы
Vspase-=вертикальный
отступ
Примеры:
Рассмотрим размещение
гиперссылок.
Гиперссылки позволяют
загружать в браузере другие web-страницы, которые хранятся на локальном
компьютере или в Интернете. Гиперссылка состоит из адреса и указателя ссылки.
Создается с помощью тега <A> и его атрибута Href, который указывает, в
каком файле хранится загружаемая web-страница.
Пример:
<A HREF='адрес'>
гиперссылка</A>
Указателем ссылки может быть
текст или рисунок.
- Закрепление нового материала.
Обучающиеся самостоятельно
выполняют работу.
1. Открыть в папке «8 класс» папку «Времена года»
2. Скопировать картинки в папку “Времена года”.
3. Открыть файл «zima.html» с помощью блокнота.
4. Выравнить стихотворение по левому краю страницы.
5. Создайте панель навигации по сайту, используя команду [<A HREF="имя.html">
Заголовок</A>]  
6. Поместите рисунок, выравнивая его по правому краю документа,
используя команду <IMG SRC="имя.jpg"
ALT="Название картинки" ALIGN="right">.
7. Просмотрите страницу в браузере.
8.
Выполнить команды “4-7” для файлов “vesna.html”,
“leto.html” и
“osen.html”.
- Подведение итога.
-
сегодня мы с вами научились вставлять изображения и гиперссылки в
web-страницу;
-
полученные сегодня знания пригодятся нам при создании своего сайта.
- Домашнее задание.
п.3.7.4,
3.7.5 читать, ответить на вопросы
Приложение 1
ТЕСТ
|
1)
Какие тэги должны присутствовать в HTML – документе обязательно?
А.<HTML></HTML>
Б.<P></P>
В.<HR>
2).
Внутрь какого контейнера помещается код веб-страницы?
|
Г.<H6></H6>
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE >
3).
Какой тэг задает заголовок веб-страницы?
|
Г.<HEAD></
HEAD >
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE >
4). В
какой тэг помещается название веб - страницы?
|
Г.<HEAD></
HEAD >
|
|
А.<HTML></HTML>
Б.<BODY></
BODY В.<TITLE><
/TITLE >
5) В
какой тэг помещается то, что мы видим в окне браузера?
|
Г.<HEAD></
HEAD >
|
|
А.<HTML></HTML>
Б.<BODY></
BODY > В.<TITLE>< /TITLE >
|
Г.<HEAD></
HEAD >
|
Приложение 2
СОЗДАЁМ ПРОСТУЮ HTML СТРАНИЦУ
Чтобы создать простую HTML
страницу, без специальных программ, создайте документ txt, при помощи блокнота
или WordPad, в котором напишите:
<html> <head>
<title>Документ</title> </head>
<body> Текст </body> </html>
Закройте документ и измените
окончание файла txt на htm или html, согласитесь с вопросом об изменении
расширения файла. Иконка файла 'блокнот' должна измениться на иконку файла
'Интернет'. Теперь откройте полученный документ, обычным двойным кликом, вместо
тегов вы увидите надпись 'Текст'.
Это необходимый и минимальный набор
тегов для создания HTML файла. Теперь можно, открыв этот файл, при помощи
блокнота, напечатать туда нужный текст или скопировать текст из другого
документа.
Рассмотрим используемые здесь теги.
<html> </html> - открывающий и
закрывающий теги, которые определяют, что всё, что находится между ними это
HTML документ. Всё, что находится за пределами этих тегов, должно
игнорироваться браузером. Но это не всегда так, браузеры научились отображать
даже ту информацию, которая находится за пределами тела документа,
интерпретируя это просто как ошибку при написании кода и автоматически
исправляя её. Будьте внимательны.
<title>Документ</title>
- служебные теги и название документа, которое отображается при его
открытии.
<head></head> - служебные теги,
предназначенные для размещения между ними информационных тегов и тегов для
поисковых роботов.
<body></body> - тело документа, между
этими тегами размещается весь основной текст, графика и анимация.
<html> <head>
<title>Документ</title> </head>
<body> Текст </body> </html>
Как видно из этой строки между
парными тегами могут находиться и другие парные теги. Рассмотрим эту же строку
в несколько ином виде, который общепринят для написания HTML файлов.
<html>
<head>
<title>Документ</title>
</head>
<body>
Текст, картинки,
ссылки, анимация.
</body>
</html>
Между тегами <body>
</body> могут находиться также и другие вложенные, парные и не парные
теги, отвечающие за форматирование текста и картинок или отображающие ссылки.
В завершение этого раздела
необходимо сказать, что если вы создаете первую или единственную страницу
своего сайта, так называемый сайт визитку, то чтобы этот файл открывался
автоматически и по умолчанию, ему необходимо присвоить имя index.html.
Это имя интерпретируется браузером
всегда, как первая и главная страница сайта. Остальные страницы сайта должны
иметь названия на латинице или быть пронумерованы, например sait.html,
ait01.html, 002.html.
Ниже и далее перечислены теги,
используемые в HTML документах, без приведения конкретных примеров.
ТЕГИ
ФОРМАТИРОВАНИЯ ТЕКСТА
При помощи тегов форматирования
текста, можно также и изменять уже имеющийся текст. Текст можно сделать жирным,
наклонным, продчеркнутым, изменять размер и ширину букв, изменять цвет всего
предложения, слова и даже отдельной буквы. Текст который форматируется должен
находиться между парными тегами. Необходимо соблюдать порядок вложенности
парных тегов. Начните с простых конструкций.
Переход на
следующую строку
<br>
Выравнивание
абзаца
<p
align="left">абзац
выровнен по левому краю...</p>
<p
align="right">абзац
выровнен по правому краю...</p>
<p
align="center">абзац
выровнен по центру...</p>
<p
align="justify">абзац
выровнен по ширине...</p>
Размеры шрифта
<p><font size="1">Шрифт 1</font></p>
самый маленький
<p><font
size="2">Шрифт 2</font></p>
<p><font
size="3">Шрифт 3</font></p>
<p><font
size="4">Шрифт 4</font></p>
<p><font
size="5">Шрифт 5</font></p>
<p><font
size="6">Шрифт 6</font></p>
<p><font
size="7">Шрифт 7</font></p> самый большой
Вид шрифта
<p><strong>Жирный текст</strong></p>
<p><em>Курсив</em></p>
<p><u>Подчеркнутый
текст</u></p>
<p><strike>Зачеркнутый текст</strike></p>
<center>Центрирование</center>
<p><strong><em>Жирный курсив</em></strong></p>
<p>Верхний <sup>индекс</sup></p>
<p>Нижний <sub>индекс</sub></p>
<pre></pre> Очень полезный тег. На странице HTML текст выглядит точно так,
как его напечатали в теле страницы при помощи блокнота.
Цвет шрифта
<p><font
color="#ff0000">Красный
цвет</font></p>
Основные цвета и
их кодировка.
000000 - черный, FFFFFF - белый,
FF0000 - красный, 00FF00 - зелёный, 0000FF - синий, FF00FF - фоилетовый,
FFFF00 - жёлтый, 00FFFF - голубой.
Заголовки.
Заголовки, это особо
отформатированные слова, на которые поисковые машины обращают особое внимание,
особенно на заголовки уровня 1, который должен располагаться в самом верху
страницы. Но не увлекайтесь заголовками так как при большом избытке их на
странице поисковый робот начинает их просто игнорировать.
<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>
ГРАФИКА
Вставка
картинок, фотографий, анимации.
alt - описание картинки,
которое появляется при наведении на неё курсора, обязательно делайте подписи к
картинкам, поисковые системы очень не любят картинки без подписей, а картинки с
подписями обязательно проиндексируют и картинку да и страницу заодно.
<p><center><img
src="tigr.jpg" alt="Это изображение тигра"></center></p>
Фон страницы.
Картинка 'img src' и фон страницы
'background' . Фон страницы задает общий цвет для всего документа, можно
использовать как стандартные цвета, так и картинки, графику, фотографии. Причем
фон, позволяет размещать поверх него и графику и текст, а рисунки и фотографии
такой возможности не предоставляют.
<body
background="fon.jpg"><p><img src="teacher.jpg"
border="1"></p></body>
Изменение размера картинки <img
src="img/tigr.jpg" width="100" height="82">
Горизонтальная черта длинна 50 и
толщина 5 <hr align="left" width="50"
size="5" noshade>
ТЕКСТОВАЯ ССЫЛКА
Текстовые ссылки используются для
переходов между страницами сайта, внутри текста на одной странице, а также и на
другие сайты.
Атрибуты цвета ссылок link,
vlink, alink, задают цвет шрифта гиперссылок.
Атрибут link - служит для выделения
гиперссылок, которые еще не посещались.
Атрибут vlink - уже посещенные ссылки.
Атрибут alink - выделяет активную
гиперссылку.
<a
rel="nofollow ugc" target="_blank" href="index.html">Ссылка на главную страницу сайта</a>
<a
rel="nofollow ugc" target="_blank" href="001.html">Ссылка на 001 страницу сайта</a>
<a
rel="nofollow ugc" target="_blank" href="http://www.toren.chat.ru">Ссылка на другой сайт</a>
ГРАФИЧЕСКАЯ
ССЫЛКА
Графической ссылкой может быть
рисунок, фотография, анимация, и даже часть рисунка.
<a
rel="nofollow ugc" target="_blank" href="011.html"><img src="rita500x80.gif"
width="500" height="80" border="0" />
Здесь ссылкой является анимация,
которая ведёт на другую страницу сайта 011.html
Задание
1. Открыть в папке «8 класс» папку «Времена года»
2. Скопировать картинки в папку “Времена года”.
3. Открыть файл «zima.html» с помощью блокнота.
4. Выравнить стихотворение по левому краю страницы.
5. Создайте панель навигации по сайту, используя команду [<A HREF="имя.html">
Заголовок</A>]  
6. Поместите рисунок, выравнивая его по правому краю документа,
используя команду <IMG SRC="имя.jpg"
ALT="Название картинки" ALIGN="right">.
7. Просмотрите страницу в браузере.
8. Выполнить команды “4-7” для файлов “vesna.html”,
“leto.html” и
“osen.html”.
1. Открыть в папке «8 класс» папку «Времена года»
2. Скопировать картинки в папку “Времена года”.
3. Открыть файл «zima.html» с помощью блокнота.
4. Выравнить стихотворение по левому краю страницы.
5. Создайте панель навигации по сайту, используя команду [<A HREF="имя.html">
Заголовок</A>]  
6. Поместите рисунок, выравнивая его по правому краю документа,
используя команду <IMG SRC="имя.jpg"
ALT="Название картинки" ALIGN="right">.
7. Просмотрите страницу в браузере.
8. Выполнить команды “4-7” для файлов “vesna.html”,
“leto.html” и
“osen.html”.
1. Открыть в папке «8 класс» папку «Времена года»
2. Скопировать картинки в папку “Времена года”.
3. Открыть файл «zima.html» с помощью блокнота.
4. Выравнить стихотворение по левому краю страницы.
5. Создайте панель навигации по сайту, используя команду [<A HREF="имя.html">
Заголовок</A>]  
6. Поместите рисунок, выравнивая его по правому краю документа,
используя команду <IMG SRC="имя.jpg"
ALT="Название картинки" ALIGN="right">.
7. Просмотрите страницу в браузере.
8. Выполнить команды “4-7” для файлов “vesna.html”,
“leto.html” и
“osen.html”.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.