Главная страница
Навигация по странице:

  • Форматы графических файлов.

  • Формат GIF

  • Особенности: Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры; Файл в формате GIF

  • Область применения

  • Формат JPEG

  • JPEG

  • Особенности

  • Формат PNG

  • Область применения: Текст, логотипы, иллюстрации с четкими краями. Формат PNG-24 PNG-24

  • PNG-8

  • PNG-24

  • практ з. Прак зад № 2 2 зад. Задание 2


    Скачать 30.14 Kb.
    НазваниеЗадание 2
    Анкорпракт з
    Дата04.04.2022
    Размер30.14 Kb.
    Формат файлаdocx
    Имя файлаПрак зад № 2 2 зад.docx
    ТипДокументы
    #439658

    Задание 2:



    HTML, он же Hyper Text Markup Languageязык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представления, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используется CSS (Cascading Style Sheets) - документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользователем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.

    Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживаться некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.

    1. Форматы графических файлов.



    Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им положительную службу, фактически определив их как стандарт веб-изображений. Есть еще формат - PNG, который также поддерживается браузерами при добавлении изображений и популярен тем, что так же, как и формат gif поддерживает прозрачность изображения.

    • Формат GIF


    GIF (Graphics Interchange Format) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
    Особенности:

    • Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры;

    • Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении;

    • Поддерживает покадровую смену изображений, что делает формат популярным для создания баннеров и простой анимации;

    • Использует свободный от потерь метод сжатия.


    Область применения:
    Текст, логотипы, иллюстрации с четкими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.


    • Формат JPEG


    JPEG (Joint Photographic Experts Group) — популярный формат графических файлов, широко применяемый при создании сайтов и для хранения изображений. JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает данные. Метод сжатия может внести искажения в рисунок, особенно содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность. Когда вы сохраняете фотографию в этом формате, прозрачные пиксели заполняются определенным цветом.
    Особенности:

    • Количество цветов в изображении — около 16 миллионов, что вполне достаточно для сохранения фотографического качества изображения;

    • Основная характеристика формата — качество, позволяющее управлять конечным размером файла;

    • Поддерживает технологию, так называемый прогрессивный JPEG, в котором версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.


    Область применения:

    Используется преимущественно для фотографий. Не очень подходит для рисунков содержащих прозрачные участки, мелкие детали или текст.

    • Формат PNG



    Формат PNG-8.

    PNG-8 (Portable Network Graphics) — формат по своему действию аналогичен GIF. Использует улучшенный формат сжатия данных.

    Особенности:

    • Использует 8-битную палитру (256 цветов) в изображении, за что и получил в своем названии цифру восемь. При этом можно выбирать, сколько цветов будет сохраняться в файле — от 2 до 256;

    • В отличие от GIF, не отображает анимацию ни в каком виде.


    PNG-24__PNG-24'>Область применения:

    Текст, логотипы, иллюстрации с четкими краями.
    Формат PNG-24

    PNG-24 — формат, аналогичный PNG-8, но использующий 24-битную палитру цвета Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF и формату PNG-8, сохраняет детали изображения, как, например, в линейных рисунках, логотипах, или иллюстрациях.

    Особенности:

    • Использует примерно 16,7 млн. цветов в файле, из-за чего этот формат применяется для полноцветных изображений;

    • Поддерживает многоуровневую прозрачность, это позволяет создавать плавный переход от прозрачной области изображения к цветной, так называемый градиент;

    • Из-за того, что используемый алгоритм сжатия сохраняет все цвета и пикселы в изображении неизменными, если сравнивать с другими форматами, то у PNG-24 конечный объем графического файла получается наибольшим.

    Область применения:

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

    1. Адресация в HTML


    Существуют два способа задания URL-адреса: абсолютный и относительный.

    При относительной адресации путь указывается от того каталога, в котором хранится исходный файл.

    Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта (жесткого диска).
    Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках.

    Итак, пусть у нас есть изображение (foto.jpg), которое где-то лежит на Вашем жёстком диске.

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





    Тег не парный, не требует закрывающего тега!
    foto.jpg - это имя файла Вашего изображения. В данном случае, так как файл рисунка лежит рядом с html-документом, путь к нему мы не указываем.

    Теперь рассмотрим ряд примеров, где путь указывается:

     - такая запись подразумевает, что в Вашей папке, где расположен html-документ, есть папка pics, в которой находится нужный графический файл foto.jpg;

     - значит, рядом с документом расположена папка pics, в ней еще одна папка – jpg, и уже в ней - нужный нам графический файл foto.jpg;

     - изображение размещено на уровень выше от документа (в нашем случае - просто в папке Мир Интернет);

     - соответственно, на два уровня выше (в нашем случае - просто на Рабочем столе), таким образом, сколько поставите ../, на столько уровней и подниметесь.

    При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы.

    То есть, если перед адресом добавляется упоминание протокола http (http://), то речь идет об абсолютной ссылке.

    Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.

    Например, можно указывая место фотографии, ссылаться на тот или иной интернет ресурс - 

    Атрибуты тега .

    Поговорим о расположении изображений относительно текста.

    Уже знакомый нам атрибут align - выравнивание применим и к данному тегу:

    - изображение слева от текста;
    - изображение справа от текста;
    - текст выше изображения;
    - текст ниже изображения;
    - изображение посередине текста.


    Поговорим немного о пикселах. Пиксел - это элементарная неделимая единица изображения. Каждый пиксел имеет свои координаты, например, самый верхний левый пиксел на мониторе имеет координаты x=1, y=1, а самый нижний правый - в зависимости от разрешения монитора (например, x=800, y=600 - будет соответственно при разрешении 800 на 600 точек). Все расстояния в графических изображениях измеряются пикселами, то есть картинка длинной 800 пикселов и шириной в 600 пикселов при указанном разрешении заполнит весь экран.


    Теперь продолжим знакомиться с атрибутами тега .

    vspace - задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей: ;

    hspace - расстояние по горизонтали соответственно ;

    width - ширина непосредственно самого изображения ;

    height - высота изображения . Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений;

    border - бордюр, рамка вокруг изображения и её толщина в пикселях ;

    bordercolor - это цвет рамки изображения ;

    alt - это описание изображения. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании. Затем зарезервированное пустое поле заменяется картинкой. Если навести курсор на рисунок и подержать его там несколько секунд, выскочит соответствующая надпись. это моя фотка!!!;

    title - не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используйте также атрибут title: это моя фотка!!!.

    Изображение можно сделать фоном страницы, для этого используем атрибут background открывающего тега .
    Вот так:




    Полезные советы: Используя графику, будьте осторожны - не стоит размещать на своей странице слишком объемные изображения. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того, как она загрузиться.
    Помните, что есть пользователи, которые в своём браузере отключают загрузку рисунков, а посему обязательно подписывайте всю графику (атрибуты alt и title), чтобы человек с отключенной графикой мог ориентироваться на Вашей странице.
    Используя картинку в качестве фона документа дублируйте ее заливкой фона каким-либо подходящим для фона страницы цветом (атрибут bgcolor тега ), например, вот так:

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


    написать администратору сайта