Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
PNG – Portable Network GraphicsСодержание книги
Поиск на нашем сайте В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества. Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм черезстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения. Кроме того, в PNG реализован эффективный механизм контроля целостности файла, позволяющего обнаружить ошибки при передаче по сети. Хотя PNG и поддерживает прозрачность, такие изображения некорректно отображаются в некоторых версиях MS Internet Explorer, поэтому если вы хотите, чтобы во всех браузерах рисунок с прозрачным фоном отображался корректно, лучше использовать формат GIF. Изображения в HTML Размещение изображений Для размещения изображений в HTML используется тег <img> с использованием обязательного атрибута src (от source – источник), который указывает URL-адрес загружаемого файла с изображением. Синтаксис определения изображения: <img src="url">URL указывает на то место, где хранится изображение. В следующем примере на Web-странице выводится изображение логотипа интернет университета информационных технологий, расположенное в каталоге "img" на сервере "www.intuit.ru" (URL: http://www.intuit.ru/img/logo.gif). <html><body> <img src="http://www.intuit.ru/img/logo.gif"> </body></html>Пример выполнения данного HTML-кода Браузер размещает изображение там, где в документе появляется тег <img>. Если разместить тег <img> между двумя параграфами, то браузер покажет первый параграф, затем изображение, а затем второй параграф. <html><body> <p>Первый параграф</p><img src="http://www.intuit.ru/img/logo.gif"><P>Второй параграф</p> </body></html>Пример выполнения данного HTML-кода Если же разместить тег <img> внутри параграфа, то изображение будет отображено в одной строке с текстом. <html><body> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif">размещено прямо внутри параграфа</p> </body></html>Пример выполнения данного HTML-кода Формат изображения, его расположение и ряд других параметров задается при помощи атрибутов тега <img>. Выравнивание изображений Для выравнивания изображений используется атрибут align.
Следующий пример показывает различные варианты выравнивания изображений в тексте. <html><body> <p>Изображение выравнено по верху <img src="http://www.intuit.ru/img/logo.gif" align="top">при помощи align="top"</p> <p>Значение "middle" атрибута align<img src="http://www.intuit.ru/img/logo.gif" align="middle">центрирует изображение по вертикали</p> <p>Выравнивание изображения по нижнему краю <img src="http://www.intuit.ru/img/logo.gif" align="bottom">(align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).</p> <p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif" align="left">смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.</p> <p><img src="http://www.intuit.ru/img/logo.gif" align="right">Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.</p> </body></html>Пример выполнения данного HTML-кода Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях. <html><body> <p><img src="logo.gif" align="left">В данном варианте используются установленные по умолчанию значения hspace и vspace. Изображение выравнено по левому краю при помощи align="left".</p> <p><img src="logo.gif" align="left" hspace="20" vspace="20">В данном варианте значения hspace и vspace установлены равными 20. Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще. В данном случае изображение сместилось вправо вниз.</p> <p>Примечание: Для лучшего понимания работы атрибутов hspace и vspace в данном примере уменьшите размер окна Вашего браузера.</p> </body></html>Пример выполнения данного HTML-кода Обрамление изображения Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях. <html><body> <p><img src="logo.gif" align="left">Изображение без рамки (по умолчанию для простых графических изображений).</p> <p><img src="logo.gif" align="left" border="5">В данном варианте толщина рамки установлена в 5 пикселей.</p> </body></html>Пример выполнения данного HTML-кода По умолчанию для простых изображений толщина рамки устанавливается равной нулю (отображаются без рамки). В противоположность этому для изображений, являющихся гиперссылками, по умолчанию устанавливается рамка толщиной 2 пикселя. <html><body> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left"></a>Несмотря на то, что значение border не задано, изображение-гиперссылка выводится обрамленным рамкой шириной 2 пикселя (значение по умолчанию)</p> <p><a href="http://www.intuit.ru"><img src="logo.gif" align="left" border="0"></a>В данном варианте рамка вокруг гиперссылки убрана благодаря принудительному присвоению параметру border нулевой толщины.</p> </body></html>Пример выполнения данного HTML-кода В последнее время атрибут border при разработке Web-сайтов в подавляющем большинстве случаев используется именно для отмены рамки вокруг изображения-гиперссылки.
|
||
|
|
Последнее изменение этой страницы: 2021-03-10; просмотров: 148; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.21 (0.006 с.) |
