Рабочие листы
к вашим урокам
Скачать
1 слайд
HTML: Картинки, форматы изображений
В создании презентации использованы контент сайта puzzleweb.ru
2 слайд
картинки
Картинки являются важной и неотъемлемой частью большинства веб-сайтов, они делают их визуально более привлекательными и запоминающимися. Графические элементы дизайна могут стать основой бренда вашего сайта и визуальной индивидуальности, отличающей ваш сайт от миллионов других в интернете.
Изображения могут не только украшать страницы, но и нести какую-либо информацию. Фотографии, иллюстрации, логотипы, иконки, карты, диаграммы и графики иногда могут нести в себе больше информации, чем текст, таким образом совместное использование текста и картинок делает веб-страницу более визуально привлекательной и намного более информативной.
3 слайд
Как и все остальное, что находится в памяти компьютера, цифровые изображения представлены в виде единиц и нулей (в виде двоичного кода), собранных в виртуальный файл. Компьютер считывает этот массив цифр (каждая цифра это двоичный бит) и переводит каждый набор битов в сигнал, который может быть передан на устройство отображения, которое превращает этот сигнал в крошечную цветную точку (пиксель). Файл также содержит закодированные инструкции о том, как эти пиксели должны быть расположены (это похоже на собирание мозайки, требующей собрать из маленьких частей целое изображение). Отдельные пиксели можно увидеть если внимательно присмотреться к монитору, также вы можете посмотреть на изображение, расположенное ниже, показывающее пиксели на увеличенной картинке. Каждый квадратик на которой является пикселем:
4 слайд
Картинки для сайтов обычно сжимаются для уменьшения веса файла, что ускоряет его загрузку. Сжатия файла можно добиться двумя способами: уменьшением количества цветов или уменьшением размера. Цель сжатия изображений - добиться наименьшего веса файла без особого ущерба для качества.
5 слайд
Форматы изображений
Вы можете сохранять цифровые изображения, используя три общих формата: JPEG, GIF и PNG. Каждый из них имеет различные способы сжатия, свои достоинства и недостатки. Большинство браузеров имеют встроенное программное обеспечение, которое будет интерпретировать и отображать файлы этих форматов.
6 слайд
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 является еще одним обязательным атрибутом, он предоставляет альтернативный текст, отображаемый когда изображение недоступно. Это может произойти к примеру из-за того, что неверно указано расширение изображения, неправильно прописан путь и т.д.
<html>
<body>
<p>
<img src="slon.jpg" alt="На картинке нарисован слон" width="200" height="50">
</p>
</body>
</html>
10 слайд
Текст атрибута alt должен быть значимой заменой картинки, поэтому вы должны попытаться описать, что изображено на картинке. Хорошо написанный альтернативный текст может информировать пользователя, что отсутствующее изображение это логотип, фотография, иллюстрация, портрет, пейзаж, эскиз, карта, диаграмма и так далее.
Картинки, которые не относятся к основному содержимому страницы, а имеют чисто декоративный характер, тоже должны иметь атрибут alt, но вместо описания их декоративных свойств его значение можно оставить пустым (alt="").
Примечание: если вам нужно добавить всплывающую подсказку с дополнительным описанием к картинке, то вы можете воспользоваться глобальным атрибутом title:
11 слайд
<html>
<body>
<p>
Это смайлик:<img src="smile.jpg" width="144" height="50"
title="улыбающийся смайлик">, он улыбается.
</p>
</body>
</html>
12 слайд
HTML: Изменение размера картинки
Если для изображения не указаны размеры, то браузер будет отображать его в естественном размере, но он не сможет определить размер до тех пор, пока изображение загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width и height, в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.
13 слайд
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, то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.
Рабочие листы
к вашим урокам
Скачать
6 663 765 материалов в базе
Настоящий материал опубликован пользователем Шайхетдинов Вадим Шамситдинович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
4 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.