Работаем с изображениями HTML

Урок 7: Работаем с изображениями

Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Пара слов о форматах:

GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений.
JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).
PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.

В каком формате брать изображения - дело Ваше, однако старайтесь добиться максимального качества при минимальном размере .

Вставить изображение на страницу очень просто. Вот пример если оно лежит в той же папке что и страница.

<img src="pchela.jpg">

В результате мы увидим:

Что нам понадобилось: элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь (примерно так как при созданиии ссылок).

Вот еще несколько примеров с комментариями:


<img src="images/pchela.jpg">

<img src="http://www.zvirec.com/pchela.jpg">

<img src="http://www.zvirec.com/images/pchela.jpg">

Вот еще очень необходимые атрибуты:

ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.

HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.

Вы уже знаете о суперспособностях современного учителя?

Тратить минимум сил на подготовку и проведение уроков.

Быстро и объективно проверять знания учащихся.

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

Избавить себя от подбора заданий и их проверки после уроков.

Наладить дисциплину на своих уроках.

Получить возможность работать творчески.

=> ПОЛУЧИТЬ СУПЕРСПОСОБНОСТИ УЧИТЕЛЯ <=

Просмотр содержимого документа
«Работаем с изображениями HTML »

Урок 7: Работаем с изображениями

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Вставить изображение на страницу очень просто. Вот пример если оно лежит в той же папке что и страница.

В результате мы увидим:

Вот еще несколько примеров с комментариями:

Вот еще очень необходимые атрибуты:

Ладно, лучше все смотреть на примерах:

Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.

Вот результат браузере:

А есть ещё атрибуты, которые нам необходимы?

Вот еще пара полезных атрибутов - ALT и TITLE .
ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. Смотрите пример:

В результате увидим:

Как видите, я поменял название файла, и браузер не смог его найти, поэтому показал текст, который указан в атрибуте ALT .

TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title . Ну вот например:

Попробуйте навести указатель на изображение:

А как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

Пчела мая!!! "border="0"

Вот результат:

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

Ну вот впринципе и все с изображениями, как видите ничего сложного нет.

Видеоуроки по информатике 6 класс (к...

Информатика 9 класс ФГОС

Электронная тетрадь по информатике 8...

Информатика 10 класс ФГОС

Информационная безопасность

Информатика 11 класс ФГОС

Электронная тетрадь по информатике 6...

Информатика 2 класс ФГОС

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 9 класс.
Урок соответствует ФГОС

Скачать
Работаем с изображениями HTML

Автор: Керімбердин Н?рлан Б?дес?лы

Дата: 06.01.2015

Номер свидетельства: 150543

Похожие файлы

Презентация к уроку язык гипертекстовой разметки HTML

object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(97) "Презентация к уроку язык гипертекстовой разметки HTML "
    ["seo_title"] => string(62) "priezientatsiia-k-uroku-iazyk-ghipiertiekstovoi-razmietki-html"
    ["file_id"] => string(6) "101311"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1402413420"
  }
}

Создание и редактирование изображений

object(ArrayObject)#874 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(72) "Создание и редактирование изображений "
    ["seo_title"] => string(42) "sozdaniie-i-riedaktirovaniie-izobrazhienii"
    ["file_id"] => string(6) "109618"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1404823507"
  }
}

Тема. Цвет. Основы цветоведения. Фантазийное изображение сказочного царства в сближенной цветовой гамме. «Изумрудный город», «Царство Снежной королевы».

object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(282) "Тема. Цвет. Основы цветоведения. Фантазийное изображение сказочного царства в сближенной цветовой гамме. «Изумрудный город», «Царство Снежной королевы»."
    ["seo_title"] => string(168) "tiema-tsviet-osnovy-tsvietoviedieniia-fantaziinoie-izobrazhieniie-skazochnogho-tsarstva-v-sblizhiennoi-tsvietovoi-ghammie-izumrudnyi-ghorod-tsarstvo-sniezhnoi-korolievy"
    ["file_id"] => string(6) "253529"
    ["category_seo"] => string(3) "izo"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1447604775"
  }
}

Обобщающая практическая работа по созданию веб-страниц "Обобщение по HTML"

object(ArrayObject)#874 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(134) "Обобщающая практическая работа по созданию веб-страниц "Обобщение по HTML" "
    ["seo_title"] => string(91) "obobshchaiushchaia-praktichieskaia-rabota-po-sozdaniiu-vieb-stranits-obobshchieniie-po-html"
    ["file_id"] => string(6) "102225"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(7) "prochee"
    ["date"] => string(10) "1402488556"
  }
}

Программа элективного курса "Язык разметки гипертекста HTML"

object(ArrayObject)#852 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(109) "Программа элективного курса "Язык разметки гипертекста HTML" "
    ["seo_title"] => string(66) "proghramma-eliektivnogho-kursa-iazyk-razmietki-ghipiertieksta-html"
    ["file_id"] => string(6) "118169"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1413050673"
  }
}

Работаем с изображениями HTML

Просмотр содержимого документа «Работаем с изображениями HTML »

Похожие файлы

Полезное для учителя

Просмотр содержимого документа
«Работаем с изображениями HTML »