400093
столько раз учителя, ученики и родители
посетили официальный сайт ООО «Инфоурок»
за прошедшие 24 часа
Добавить материал и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015

Скидка 0%

112 курсов профессиональной переподготовки от 3540 руб.

268 курсов повышения квалификации от 840 руб.

МОСКОВСКИЕ ДОКУМЕНТЫ ДЛЯ АТТЕСТАЦИИ

Лицензия на осуществление образовательной деятельности №038767 выдана 26 сентября 2017 г. Департаменотом образования города Москвы

Инфоурок Информатика ПрезентацииУрок 9. HTML картинки, форматы изображений

Урок 9. HTML картинки, форматы изображений

библиотека
материалов
HTML: Картинки, форматы изображений В создании презентации использованы конте...
картинки Картинки являются важной и неотъемлемой частью большинства веб-сайто...
Как и все остальное, что находится в памяти компьютера, цифровые изображения...
Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет...
Форматы изображений Вы можете сохранять цифровые изображения, используя три о...
HTML: Как вставить картинку Текстовое содержимое веб-страницы является частью...
Элемент  относится к элементам, вставляющим контент, то есть сам элемент не...
    Это смайлик:, он улыбается.
Альтернативный текст и всплывающая подсказка Атрибут alt является еще одним о...
Текст атрибута alt должен быть значимой заменой картинки, поэтому вы должны...
    Это смайлик:, он улыбается.
HTML: Изменение размера картинки Если для изображения не указаны размеры, то...
HTML: Изменение размера картинки Если атрибуты width и height содержат значен...
Вы можете сделать изображение больше или меньше, изменяя значения атрибутов...

Описание презентации по отдельным слайдам:

1 слайд HTML: Картинки, форматы изображений В создании презентации использованы конте
Описание слайда:

HTML: Картинки, форматы изображений В создании презентации использованы контент сайта puzzleweb.ru

2 слайд картинки Картинки являются важной и неотъемлемой частью большинства веб-сайто
Описание слайда:

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

3 слайд Как и все остальное, что находится в памяти компьютера, цифровые изображения
Описание слайда:

Как и все остальное, что находится в памяти компьютера, цифровые изображения представлены в виде единиц и нулей (в виде двоичного кода), собранных в виртуальный файл. Компьютер считывает этот массив цифр (каждая цифра это двоичный бит) и переводит каждый набор битов в сигнал, который может быть передан на устройство отображения, которое превращает этот сигнал в крошечную цветную точку (пиксель). Файл также содержит закодированные инструкции о том, как эти пиксели должны быть расположены (это похоже на собирание мозайки, требующей собрать из маленьких частей целое изображение). Отдельные пиксели можно увидеть если внимательно присмотреться к монитору, также вы можете посмотреть на изображение, расположенное ниже, показывающее пиксели на увеличенной картинке. Каждый квадратик на которой является пикселем:

4 слайд Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет
Описание слайда:

Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет его загрузку. Сжатия файла можно добиться двумя способами: уменьшением количества цветов или уменьшением размера. Цель сжатия изображений - добиться наименьшего веса файла без особого ущерба для качества.

5 слайд Форматы изображений Вы можете сохранять цифровые изображения, используя три о
Описание слайда:

Форматы изображений Вы можете сохранять цифровые изображения, используя три общих формата: JPEG, GIF и PNG. Каждый из них имеет различные способы сжатия, свои достоинства и недостатки. Большинство браузеров имеют встроенное программное обеспечение, которое будет интерпретировать и отображать файлы этих форматов.

6 слайд HTML: Как вставить картинку Текстовое содержимое веб-страницы является частью
Описание слайда:

HTML: Как вставить картинку Текстовое содержимое веб-страницы является частью HTML-документа, окруженной тегами, определяющими смысл и цель каждой части текста. Изображения, с другой стороны, являются внешними файлами и фактически не являются частью веб-страницы. Изображения на страницу встраиваются с помощью тега <img>. Отображение веб-страницы, которая включает в себя изображения, представляет собой двухэтапный процесс: сначала браузер загружает разметку, а затем загружает внешние изображения. Везде, где в коде HTML-документа расположен тег <img>, браузер запрашивает с веб-сервера файл, на который ссылается тег, и отображает его на месте тега.

7 слайд Элемент  относится к элементам, вставляющим контент, то есть сам элемент не
Описание слайда:

Элемент <img> относится к элементам, вставляющим контент, то есть сам элемент не добавляется непосредственно на веб-страницу, браузер создаёт пространство требуемого размера, в котором отображается изображение, на которое он ссылается. Тег <img> является одиночным тегом, не имеющим содержимого, он имеет обязательный атрибут src, указывающий путь (относительный или абсолютный) к графическому файлу. Браузеры обрабатывают картинки, как строчные элементы, поэтому они будут располагаться на одной строке с текстом или другими строчными элементами (включая другие картинки):

8 слайд     Это смайлик:, он улыбается.
Описание слайда:

<html> <body> <p> Это смайлик:<img src="smile.jpg" width="144" height="50">, он улыбается. </p> </body> </html>

9 слайд Альтернативный текст и всплывающая подсказка Атрибут alt является еще одним о
Описание слайда:

Альтернативный текст и всплывающая подсказка Атрибут alt является еще одним обязательным атрибутом, он предоставляет альтернативный текст, отображаемый когда изображение недоступно. Это может произойти к примеру из-за того, что неверно указано расширение изображения, неправильно прописан путь и т.д. <html> <body> <p> <img src="slon.jpg" alt="На картинке нарисован слон" width="200" height="50"> </p> </body> </html>

10 слайд Текст атрибута alt должен быть значимой заменой картинки, поэтому вы должны
Описание слайда:

Текст атрибута alt должен быть значимой заменой картинки, поэтому вы должны попытаться описать, что изображено на картинке. Хорошо написанный альтернативный текст может информировать пользователя, что отсутствующее изображение это логотип, фотография, иллюстрация, портрет, пейзаж, эскиз, карта, диаграмма и так далее. Картинки, которые не относятся к основному содержимому страницы, а имеют чисто декоративный характер, тоже должны иметь атрибут alt, но вместо описания их декоративных свойств его значение можно оставить пустым (alt=""). Примечание: если вам нужно добавить всплывающую подсказку с дополнительным описанием к картинке, то вы можете воспользоваться глобальным атрибутом title:

11 слайд     Это смайлик:, он улыбается.
Описание слайда:

<html> <body> <p> Это смайлик:<img src="smile.jpg" width="144" height="50" title="улыбающийся смайлик">, он улыбается. </p> </body> </html>

12 слайд HTML: Изменение размера картинки Если для изображения не указаны размеры, то
Описание слайда:

HTML: Изменение размера картинки Если для изображения не указаны размеры, то браузер будет отображать его в естественном размере, но он не сможет определить размер до тех пор, пока изображение загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width и height, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.

13 слайд HTML: Изменение размера картинки Если атрибуты width и height содержат значен
Описание слайда:

HTML: Изменение размера картинки Если атрибуты width и height содержат значения не соответствующие натуральному размеру картинки, браузер будет масштабировать картинку под эти размеры. Однако обычно следует избегать изменения размеров картинки таким образом. Когда браузер масштабирует картинку в большую или меньшую сторону от ее натурального размера, то картинка может отображаться менее четко или более резко. В идеале в атрибутах width и height должны быть указаны натуральные размеры, а для увеличения или уменьшения картинок лучше воспользоваться графическим редактором.

14 слайд
Описание слайда:

<html> <body> <p> <img src="1.png" width="40" height="40"> <img src="1.png" width="80" height="80"> <img src="1.png" width="120" height="120"> </p>

15 слайд Вы можете сделать изображение больше или меньше, изменяя значения атрибутов
Описание слайда:

<p> Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и height. Но при очень большом увеличении качество картинки может стать хуже. </p> </body> </html> Если вы решили изменить размер картинки с помощью атрибутов width и height, то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.

Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Учитель математики и информатики
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Общая информация
ВНИМАНИЮ УЧИТЕЛЕЙ: хотите организовать и вести кружок по ментальной арифметике в своей школе? Спрос на данную методику постоянно растёт, а Вам для её освоения достаточно будет пройти один курс повышения квалификации (72 часа) прямо в Вашем личном кабинете на сайте "Инфоурок".

Пройдя курс Вы получите:
- Удостоверение о повышении квалификации;
- Подробный план уроков (150 стр.);
- Задачник для обучающихся (83 стр.);
- Вводную тетрадь «Знакомство со счетами и правилами»;
- БЕСПЛАТНЫЙ доступ к CRM-системе, Личному кабинету для проведения занятий;
- Возможность дополнительного источника дохода (до 60.000 руб. в месяц)!

Пройдите дистанционный курс «Ментальная арифметика» на проекте "Инфоурок"!

Подать заявку

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.