<metakeywords>Информатика, класс, урок, на тему, 10 класс, Вставка изображений в веб-страницу.</metakeywords><br>
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Вставка изображений в веб-страницу.</metakeywords><br>
-
'''Тема: Вставка изображений в веб-страницу. '''
+
==Тема==
+
*'''Вставка изображений в веб-страницу. '''
-
'''Цель: '''Научить вставлять графические изображения в html-документ. Рассказать о дополнительных параметрах обработки картинок посредством языка HTML.<br>
+
==Цель==
+
*Научить вставлять графические изображения в html-документ. Рассказать о дополнительных параметрах обработки картинок посредством языка HTML.
+
+
==Ход урока==
Графика всегда преобладала над другими видами представления информации. Она же не будет исключением и в сфере веб-программирования.
Графика всегда преобладала над другими видами представления информации. Она же не будет исключением и в сфере веб-программирования.
Строка 12:
Строка 16:
С помощью какой же команды можно поместить графический элемент на html-страницу?
С помощью какой же команды можно поместить графический элемент на html-страницу?
-
-
<br>
Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого элемента, не требующий закрывающей части:
Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого элемента, не требующий закрывающей части:
Строка 25:
Строка 27:
В нашем примере картинка лежит в том же папке, где и сама веб-страница.
В нашем примере картинка лежит в том же папке, где и сама веб-страница.
-
<br>
-
[[Image:Imggg1.jpg]]
+
[[Image:Imggg1.jpg|500px|Вставка изображений в веб-страницу]]
-
<br>
1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней будет выглядеть так:
1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней будет выглядеть так:
-
''<img src="papka/image.jpg"> ''
+
'''<img src="papka/image.jpg"> '''
2. Если картинка лежит еще на уровень выше, а сама страница находится в поддиректории, то ссылка будет другой:
2. Если картинка лежит еще на уровень выше, а сама страница находится в поддиректории, то ссылка будет другой:
-
''<img src="../image.jpg"> ''
+
'''<img src="../image.jpg"> '''
3. Если картинка размещена на другом сайте, то путь прописывается полностью, вот так:
3. Если картинка размещена на другом сайте, то путь прописывается полностью, вот так:
-
''<img src="http: // www. sait. com. ua / images/image.jpg"> ''
+
'''<img src="http: // www. sait. com. ua / images/image.jpg"> '''
+
{{#ev:youtube|f9FKTetfvKA}}
{{#ev:youtube|f9FKTetfvKA}}
-
<br>
На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.
На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.
-
Также важно знать, что ''<u>IMAGE.jpg, image.JPG, image.jpg и IMAGE.JPG</u>''<u></u>– это разные имена файлов и регистр имен всегда нужно учитывать.
+
Также важно знать, что '''IMAGE.jpg, image.JPG, image.jpg и IMAGE.JPG''' – это разные имена файлов и регистр имен всегда нужно учитывать.
-
<br>
+
'''Вместе с текстом картинка на веб-странице выглядит так:'''
-
<u>Вместе с текстом картинка на веб-странице выглядит так:</u>
-
<br>
+
[[Image:Imggg2.jpg|500px|Вставка изображений в веб-страницу]]
-
[[Image:Imggg2.jpg]]
-
-
<br>
-
-
<br>
После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?
После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?
Строка 69:
Строка 63:
Атрибут «align» есть и у картинок:
Атрибут «align» есть и у картинок:
-
''<img src="image.jpg" align="left">''
+
'''<img src="image.jpg" align="left">'''
В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать '''ее справа.'''
В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать '''ее справа.'''
-
<br>
-
[[Image:Imggg3.jpg]]
+
[[Image:Imggg3.jpg|500px|Вставка изображений в веб-страницу]]
-
<br>
Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать'''"Right": '''
Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать'''"Right": '''
-
''<img src="image.jpg" align="right">''
+
'''<img src="image.jpg" align="right">'''
-
<br> [[Image:Imggg4.jpg]]
-
<br>
+
[[Image:Imggg4.jpg|500px|Вставка изображений в веб-страницу]]
-
<br> Но это еще не все параметры. <u>Текст может располагаться:</u>
+
+
Но это еще не все параметры. <u>Текст может располагаться:</u>
[[Image:Imggg6.jpg|500px|Вставка изображений в веб-страницу]]
+
'''ALT''' - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).
'''ALT''' - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).
Строка 119:
Строка 109:
А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.
А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.
-
''<img src="image.jpg" alt="гонщик">''
+
'''<img src="image.jpg" alt="гонщик">'''
-
<br> [[Image:Alttt.jpg]]
-
<br>
+
[[Image:Alttt.jpg|500px|Вставка изображений в веб-страницу]]
+
'''BORDER''' – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">
'''BORDER''' – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">
-
[[Image:Imggg5.jpg]]
+
+
[[Image:Imggg5.jpg|500px|Вставка изображений в веб-страницу]]
+
'''WIDTH''' - ширина самой картинки в пикселях. Если ширину не задавать, то она будет равна реальной ширине картинки.
'''WIDTH''' - ширина самой картинки в пикселях. Если ширину не задавать, то она будет равна реальной ширине картинки.
Строка 133:
Строка 125:
'''HEIGHT''' - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.
'''HEIGHT''' - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.
-
<br>
{{#ev:youtube|FajRB8rmk-8}}
{{#ev:youtube|FajRB8rmk-8}}
-
<br> '''Вопросы:'''
-
1. Какой элемент отвечает за вставку графики в веб-страницу?
+
==Вопросы==
-
2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.
+
''1. Какой элемент отвечает за вставку графики в веб-страницу? ''
-
3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон?
+
''2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.''
-
4. Атрибуты, отвечающие за расстояние между текстом и картинкой.
+
''3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон? ''
-
5. Какая команда задает картинке рамку?
+
''4. Атрибуты, отвечающие за расстояние между текстом и картинкой. ''
-
<br> ''Список использованных источников: ''
+
''5. Какая команда задает картинке рамку? ''
-
1. Урок на тему: «Графика в HTML», Залюбовская М. Н., г. Воронеж.
-
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
+
==Список использованных источников==
-
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
+
''1. Урок на тему: «Графика в HTML», Залюбовская М. Н., г. Воронеж. ''
-
<br>
+
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
+
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г. ''
+
+
+
----
+
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
Кроме параметра «ALIGN» для тэга < img > имеется еще несколько атрибутов:
VSPACE - определяет расстояние между текстом и рисунком по вертикали, задающееся в пикселях.
Например: <img src="image.jpg" vspace="20">, где 20 – это 20 использованных пикселей экрана монитора.
HSPACE - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается тоже в пикселях.
Например: <img src="image.jpg" hspace="30">.
ALT - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).
Описание картинкам задавать нужно (особенно, если они являются кнопками), потому что есть пользователи, которые бродят по Сети с отключенной графикой.
А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.
<img src="image.jpg" alt="гонщик">
BORDER – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">
WIDTH - ширина самой картинки в пикселях. Если ширину не задавать, то она будет равна реальной ширине картинки.
HEIGHT - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.
Вопросы
1. Какой элемент отвечает за вставку графики в веб-страницу?
2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.
3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон?
4. Атрибуты, отвечающие за расстояние между текстом и картинкой.
5. Какая команда задает картинке рамку?
Список использованных источников
1. Урок на тему: «Графика в HTML», Залюбовская М. Н., г. Воронеж.
2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.
3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.
Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.
Над уроком работали
Залюбовская М. Н.
Соловьев М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
