KNOWLEDGE HYPERMARKET


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

Текущая версия на 19:27, 2 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Вставка изображений в веб-страницу.


Содержание

Тема

  • Вставка изображений в веб-страницу.

Цель

  • Научить вставлять графические изображения в html-документ. Рассказать о дополнительных параметрах обработки картинок посредством языка HTML.

Ход урока

Графика всегда преобладала над другими видами представления информации. Она же не будет исключением и в сфере веб-программирования.

Включение картинок в веб-страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта.

С помощью какой же команды можно поместить графический элемент на html-страницу?

Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого элемента, не требующий закрывающей части:

<img src="image.jpg">

Где «image.jpg» - это собственно вставляемая картинки с ее именем и расширением.

Вся информация, расположенная между кавычками является ссылкой (путь к картинке).

В нашем примере картинка лежит в том же папке, где и сама веб-страница.


Вставка изображений в веб-страницу


1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней будет выглядеть так:

<img src="papka/image.jpg">

2. Если картинка лежит еще на уровень выше, а сама страница находится в поддиректории, то ссылка будет другой:

<img src="../image.jpg">

3. Если картинка размещена на другом сайте, то путь прописывается полностью, вот так:

<img src="http: // www. sait. com. ua / images/image.jpg">



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

Также важно знать, что IMAGE.jpg, image.JPG, image.jpg и IMAGE.JPG – это разные имена файлов и регистр имен всегда нужно учитывать.

Вместе с текстом картинка на веб-странице выглядит так:


Вставка изображений в веб-страницу


После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?

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

Атрибут «align» есть и у картинок:

<img src="image.jpg" align="left">

В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.


Вставка изображений в веб-страницу


Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать"Right":

<img src="image.jpg" align="right">


Вставка изображений в веб-страницу


Но это еще не все параметры. Текст может располагаться:

  • внизу картинки - <img src="image.jpg" align="bottom">
  • посередине - <img src="image.jpg" align="middle">
  • вверху - <img src="image.jpg" align="top">



Кроме параметра «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 г.




Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.




Над уроком работали

Залюбовская М. Н.

Соловьев М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Информатика > Информатика 10 класс