при помощи какого тега интегрируется графика

Размещение графики на Web-странице

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №8

Тема работы: Размещение графики на Web-странице.

Цель работы: Научиться внедрять в html-документ графические изображения.

Существует два способа использования графики в HTML-документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда «inline image». Синтаксис тега:

Элементы синтаксиса тега:

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

Этот необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. тег ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

Этот необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

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

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

С версии HTML 2.0 у тега появились дополнительные параметры:

Этот параметр позволяет автору определить ширину рамки вокруг рисунка.

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

То же самое, что и VSPACE, но только по горизонтали.

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

Размещение графики на Web-странице.

Тег является одиночным, т. е. закрывающий тег не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Перед выполнением упражнения поместите файл schedule. jpg в ту же папку, которая будет использована для хранения создаваемой Web-страницы.

Внесите изменения в файл schedule. html (если файл утрачен, создайте новый):

занятий на вторник

Самостоятельно внесите изменения в файл schedule. html, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:

Надпись «картинка» выводится на экран при подведении указателя мыши к изображению.

Задает рамку вокруг изображения толщиной 3 пикселя.

Выравнивает изображение относительно текста по верхней границе текста.

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

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

Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей.

Добавляет левое и правое пустые поля шириной 8 пикселей.

Фоновое отображение графики на Web-странице

Поместите файл back. jpg в ту же папку, что и schedule. html. Внесите изменения в файл schedule. html:

занятий на вторник

На экране вы увидите:

В действительности же графический файл back. jpg выглядит так:

Графические элементы возможно применять в качестве различного вида «украшений». Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики.
Во-первых, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты ( ).

Вот так он выглядит в окне браузера:

Хотя тег и поддается настройке, графический разделитель вместо часто выглядит лучше:

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

от пример встроенной в текст буквицы, она добавлена в начало параграфа. Для экономии места приводится текст только того места странички где вставлена буквица. На всякий случай в качестве альтернативного текста дается буква «В», чтобы пользователю с отключенной графикой не приходилось строить догадки относительно первой буквы.

Язык HTML позволяет создавать маркированные и нумерованные списки.

Пример маркированного списка:

В терминах языка HTML это выглядит так:

Пример нумерованного списка:

В терминах языка HTML это выглядит так:

Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое — когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.

Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker. gif ).. Этот файл нужно поместить рядом с уже созданным файлом schedule. html. Теперь введем в тег

Ваш список должен выглядеть так:

Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.

Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.

Чтобы создать кнопку, поместите в Ваш html-документ следующий код:

В браузере она должна выглядеть так: ЭТO KHОПKА

Теперь при нажатии указателем мыши на созданную кнопку браузер перейдет на страницу www. *****:

Источник

При помощи какого тега интегрируется графика

Включение графики в web-страницу

ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, напримерpicture. GIF. Иллюстрация с расширением в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице.

С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом можно использовать и другие параметры атрибута:

ТОР — изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные броузеры интерпретируют данное значение атрибута ALIGN по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator.

BOTTOM — изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки.

MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки.

BASELINE — изображение выравнивается по условной «базовой линии». Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки таблицы. Именно с использованием значения ALIGN=»baseline» удается добиться оптимального выравнивания иллюстраций для броузеров всех типов.

В качестве параметров атрибутов WIDTH и HEIGHT указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах. Некоторые web-мастеры используют данные атрибуты для масштабирования иллюстраций. Подобный подход вполне допустим, однако далеко не все броузеры выполняют процедуру масштабирования корректно, поэтому рекомендуется указывать реальные геометрические размеры картинки, масштабируя изображение при помощи любого графического редактора.

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

И наконец, атрибут ALT содержит некий альтернативный текст, который отображается вместо картинки в броузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей «подсказки», если пользователь несколько секунд подержит наведенный на изображение курсор мыши.

Вот пример применения тега :

Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже:

Помимо описанных атрибутов тега в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу.

Однако аккуратно «разрезать» изображение при помощи традиционных графических редакторов, причем так, чтобы готовая «мозаика» правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита — фрагментатор графики ShoeString Picture Dicer (рис. 5.8). Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, «склеивающей» изображение в единое целое.

Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода изображений можно задать в меню Output Format.

Рие. 5.8. Интерфейс программы Picture Dicer

После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения.Левой кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой — горизонтальные границы (линии с синими стрелками). Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image. Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории.

Источник

HTML5. Работа с мультимедиа

Вряд ли бы Интернет стал столь популярным, если бы содержал лишь текстовую информацию, пусть и прекрасным образом структурированную и оформленную. Поэтому рассмотрим способы и возможности «оживить» веб-страницу при помощи графики, видео и звука, средствами HTML5.

Работа с графикой

Современными веб-браузерами поддерживаются не все существующие графические форматы, поэтому не всякое изображение может быть размещено в рамках веб-страницы.

Различают форматы растровых и векторных изображений. Растровые изображения хранятся в файлах с расширениями jpg, gif, bmp, tiff, png, psd. Векторные – swf, cdr, max, ai.

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

Добавление графики на веб-страницу

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

К числу необязательных атрибутов img > относятся:

img > является встроенным тегом, т.е. он не может использоваться вне блока. Пример:

Основы работы с видео и звуком

Помимо этого, использование audio > и video > позволяет организовать управление из веб-сценариев.

Вставка аудио и видеороликов

Базовый код для вставки аудио предельно прост:

Или, для обеспечения универсального воспроизведения различными браузерами:

Источник

Почему стоит использовать тег

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

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

Выбор между тегами picture и img может показаться мелким решением, но сделав правильный выбор, вы сможете повысить и удобство для пользователя, и производительность.

Почему тега img недостаточно для современных веб-приложений?

Как все мы знаем, тег Img в течение длительного периода времени был одним из фундаментальных элементов HTML, и никто не сомневался в его простоте и применимости.

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

Все эти вопросы можно сгруппировать в две большие категории:

Смена разрешения при помощи атрибутов srcset и sizes

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

Допустим, вы используете простой тег Img для изображений высокого разрешения. В таком случае при запуске приложения одно и то же изображение будет использоваться на каждом устройстве, что приведёт к проблемам с производительностью в устройствах с низким разрешением экрана, например, в мобильных телефонах.

Это может привести к более долгой загрузке изображений и частичной загрузке изображений сверху вниз.

Проблема загрузки изображения сверху вниз

Атрибут srcset может принимать несколько изображений с соответствующей шириной в пикселях, а браузер использует эти значения для выбора между указанными изображениями. В показанном выше примере есть три версии одного и того же изображения в трёх разных размерах.

Атрибут sizes задаёт пространство, которое изображение будет занимать на экране. В показанном выше примере изображение займёт до 1200px, если минимальная ширина экрана равна 1280px.

Тем не менее, рекомендуется не использовать тег Picture только для смены разрешения, потому что ту же задачу можно решить с помощью новой версии тега Img (имеющей поддержку большего количества браузеров).

Ориентация графики при помощи атрибута media

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

Мы можем решить эту проблему, создав различные версии изображения для разных размеров экрана. Эти разные версии могут быть альбомными, портретными или любыми другими изменёнными версиями того же изображения.

Затем можно использовать атрибут media для задания различных условий среды, в которых будут использоваться эти источники. Также можно использовать атрибуты srcset и sizes аналогично тому, о чём мы говорили в предыдущем разделе.

Если экран находится в альбомной ориентации, то браузер будет отображать изображения из первого набора, а если в портретной, то из второго набора. Кроме того, можно использовать атрибут media с параметрами max-width и min-width :

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

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

Ситуация с тегом picture стала ещё интереснее, когда разработчики Chrome объявили о том, что «во вкладке Rendering инструментов DevTools появится две новые эмуляции для эмулирования частично поддерживаемых типов изображений».

Начиная с Chrome 88 и далее можно использовать Chrome DevTools для проверки совместимости браузера с типами изображений.

Использование Chrome DevTools для эмулирования совместимости изображений

В заключение

Среди прочих достоинств тега picture способность работать с частично поддерживаемыми типами изображений и поддержка Chrome DevTools.

Однако оба эти элемента имеют свои плюсы и минусы. Поэтому нам нужно обдумывать и выбирать наиболее подходящий к нашим требованиям элемент.

На правах рекламы

Эпичные серверы — это VDS для размещения сайтов от маленького интернет-магазина на Opencart до серьёзных проектов с огромной аудиторией. Создавайте собственные конфигурации серверов в пару кликов!

Источник

Теги для работы с графикой в HTML-документах

Параметр ALT=»» в качестве значения содержит надпись, рассказывающую о содержании изображения для тех посетителей, браузеры которых не поддерживают графику или работают в режиме отключенной графики. Эта же надпись появляется при наведении указателя мышки на изображение.

Параметры WIDTH=»» HEIGHT=»» в качестве значений имеют размеры изображения по ширине и высоте в пикселях. Эти параметры желательно указывать в коде страницы, чтобы браузер заранее оставлял место для изображения, тогда, при загрузке, страница будет меньше «дергаться». Кроме того, эти параметры можно употреблять для регулирования размеров рисунка в окне браузера.

Параметр BORDER=»» прорисовывает рамку вокруг изображения. В качестве значения указывается цифра, указывающая ширину рамки в пикселях.

Бегущая строка

Синтаксис тега: текст

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различныз тегов:

— для вставки фонового звука;

— для вставки видео в формате AVI;

— для вставки звуковых и видеофайлов.

При решении вставить звук и/или видео в HTML-документ следует учитывать, что соответствующие файлы имеют довольно большой объем. Наиболее популярными в веб сейчас являются файлы звуковых форматов MP3, WMA, AIFF, AU, RealAudio (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.

Источник