Урок 6 HTML КартинкиКартинки, хотя лучше изображения, это то, без чего просто нельзя было бы себе представить формат Html. Они намного улучшают оформление сухого текста и позволяют каждому создать нечто единственное и не похожее ни на что другое.
Форматы изображений
Изображения в интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPG.
Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований.
Формат JPG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое можеть иметь 7 уровней качества (от очень плохого до наилучшего).
Тег <img>
Этот тег вставляет в документ изображение. Источник изображения указывается в атрибуте src. Закрывающая скобка запрещена.
<html>
<p><img src="prob.gif">
<p><img src="../banner.gif">
<p><img src="http://www.rambler.ru/dronban.jpg">
</html>
Кроме атрибута src существуют еще несколько атрибутов:
alt
Этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Этот текст также выскакивает в всплывающей подсказке. Как правило в тексте указывается краткое описание изображения или ссылки, а также иногда содержит в себе название файла с его размером.
Пример:
<img src="pic1.gif" alt="Рисунок 1 - Пример вращения твердого тела.">
<img src="b.jpg" alt="b.jpg (1340 байт)">
Большинство атрибутов в html не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.
lowsrc
Источник изображения низкого качества или размера, для быстрой предварительной загрузки.
align
Задает выравнивание изображения относительно текущей строки :
align=top Выравнивает верхний край изображения по верхнему краю текущей строки.
align=middle Выравнивает центр изображения по базовой линии текущей строки.
align=bottom Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки.
align=left Выравнивает изображение по левому полю.
align=right Выравнивает изображение по правому полю.
width и height
Эти атрибуты задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место.
border
Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна
2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.
vspace
Используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным.
Совет : В названиях файлов изображений используйте только прописные бувкы алфавита. Связано это в тем, что большинство хостирующих огранизаций используют Unix-системы, а в таких ситемах имена prob.gif и Prob.GIF различны. Несоблюдения такого простого правила часто приодит к тому, что из странички вызывается файл с именем p1.gif, а на самом деле там лежит что-нибудь вроде P1.Gif. Кстати это же относится и к названиям самих страниц. Старайтесь также не использовать длинных названий типа this_is_my_house_image1.gif, когда можно воспользоваться простым именем pic1.gif или p1.gif.
Изображения на страничках имеют очень большое значение для современного интернета, т.к. без них немыслим хороший дизайн и оформление. Но хотелось бы чтобы были разумные рамки в их использовании, потому что каждое изображение увеличивает и размер страницы и время полной загрузки. Любое более менее крупное изображение занимает на порядок больше места, чем та же самая страница, которая его использует.
Уделяйте больше внимания текстовому содержанию сайта, т.к. информации изображения несут в себе мало, а посетители ходят именно за ней
