Графика в html: Графика в HTML

Графика в HTML

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

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

Использование графики на HTML страницах.

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

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

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

Простота — есть гениальность.

Придерживайтесь этого правила и ваши страницы будут притягивать внимание.

Но простота и примитивность – совершенно разные понятия. Найдите баланс. Экспериментируйте для получения своей, уникальной формулы дизайнерского успеха…

Добавление изображений к html странице.

Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.

<p><center><img src=»../img/cat.gif» alt=»Это кот «></center></p>

Форматирование изображений.

Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img> – allign. Пример его работы вы можете видеть ниже:

Значение	Вид
Rigth Hspace=10px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Left Hspace=3px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Top Hspace=10px Vspace=5px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Middle Hspace=1px Vspace=12px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
Bottom Hspace=10px Vspace=10px	бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла

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

Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.

Аттрибуты height и width позволяют задать размер изображения по ширине и высоте. Задать размер можно как в пиксельной, так и в процентной величине. По умолчанию браузер устанавливает изображению его реальные размеры, но я вам настоятельно рекомендую всегда использовать эти атрибуты и задавать размер изображения вручную. Связанно это с тем, что при невозможности загрузить изображения браузер установит ему случайные размеры и получится пустой квадрат со случайным размером, который почти наверняка искаверкает общий каркас сайта, что приведет к неправильному отображению последнего. Если же атрибуты размера установлены, то даже при невозможности загрузки изображения каркас сайта не будет нарушен.

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

Использование фона в HTML.

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

Я текст на красном фоне

<body bgcolor=»red»>
<p align=»center»>
я текст на красном фоне
</p>
</body>

Я текст на фоне маленького кота

<body background=
«. ./img/cat_mini.gif»>
<p align=»center»>
я текст на фоне маленького кота
</p></body>

я текст на фоне кота побольше

<body background=
«../img/cat.gif»>
<p align=»center»>
я текст на фоне кота побольше
</p></body>

Из примеров хорошо видно, как браузер тиражирует изображение.

Горизонтальная линия.

Для построения горизонтальной линии используется тег <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.

<hr align=»center» color=»#666666″ width=»400″>

---

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

---

Графическое оформление позволит сделать ваш сайт уникальным и привлекательным. При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, а соответственно и скорости загрузки картинок. Для небольших изображений рекомендую использовать формат .gif, для крупных — .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых, поэтому рекомендую по возможности отказаться от их использования.

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

Использование графики в HTML

О г л а в л е н и е Использование графики в HTML Возможность использования графики в HTML трудно переоценить. Правильно подобранная и размещенная на Web-странице графика делает её визуально привлекательной и, что самое главное, передаёт одну из основных идей документа.     Для того чтобы вставить в Web-страницу изображение, необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования можно создать простое изображение и сохранить его в нужном формате. Самыми распространенными графическими форматами в Web являются GIF,JPG и JPEG. Теперь рассмотрим как вставить изображение в Web-страницу. Для того чтобы вставить изображение в Web-страничку существует тег НТМL, который заставляет браузер выводить изображение,им является тег&ltIMG&gt с обязательным атрибутом SRC (SouRCe, источник). Имя источника представляет собой имя выводимого графического файла. Замыкающего тега не требуется. Пример вставки изображения: &ltIMG SRC=»image.gif» ALT=»листья»&gt Применение графического файла вместо текстовой ссылки. Любой графический файл можно сделать гиперссылкой , если он поддерживается Обозревателем. Для этого вместо названия ссылки нужно вставить графический элемент ,а чтобы при наведении на изображение всплывала подсказка куда приведет эта ссылка, вставляем необязательый атрибут alt и в значении указываем название инфармационного ресурса.(Параметр ALT должен быть только у рисунка): Пример: &ltA href=»URL»&gt&ltimg border=»5″ src=»volk.jpg» ALT=»Использование графики в HTML»&gt&lt/A&gt При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой. Тег изображения &ltIMG&gt имеет один обязательный атрибут и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT. Атрибут SRC Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения. Атрибут ALT Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику. В некоторых случаях при недостаточной пропускной способности линий связи пользователи отключают отображение графики. Наличие названий вместо картинок облегчает восприятие Web-страниц в таком режиме. Атрибут АLIGN Определяет положение изображения относительно окружающего его текста. Возможные значения атрибута ALIGN ALIGN=»top» выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста. ALIGN=»middle» выравнивает центр изображения по базовой линии строки окружающего текста. ALIGN=»bottom» выравнивает нижний край изображения по базовой линии строки окружающего текста.    Кроме основных значений атрибута ALIGN=»значение»- существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее. ALIGN=»left» определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа. ALIGN=»right»определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева. ALIGN=»textop» выравнивает верх изображения по верхнему краю самого высокого текстового символа в строке окружающего текста. Действие этого аргумента в большинстве случаев не всегда, подобно действию аргумента ALIGN=»top». ALIGN=»baseline» выравнивает нижний край изображения по базисной линии строки окружающего текста, то есть производит такое же действие, как и ALIGN=»bottom». ALIGN=»absbottom» выравнивает нижний край изображения по нижнему краю строки окружающего текста. Атрибут USEMAP Если присутствуют атрибут USEMAP и тег &ltMAP&gt, изображение становится чувствительной картой, или «графическим меню». Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет гипертекстовый переход к информационному ресурсу, установленному для этой области. Более подробно эта тема будет рассматриваться в разделе &laquoНавигационные карты&raquo. Атрибут BORDER Численное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=O в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой. Атрибут НSРАСЕ Численное значение этого атрибута задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом. Атрибут VSPACE Численное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.   Атрибуты WIDTH и HEIGHT Оба атрибута задают Численные значения размеров изображения по горизонтали и по вертикали соответственно. Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу. Пока загружается графика, пользователь может начать читать текст. Определить размер изображения нетрудно, для этого достаточно воспользоваться любой программой просмотра графических файлов, например ACDSee или графическим редактором Corel PhotoPaint или Adobe Photoshop. Откройте файл в графическом редакторе и определите размер картинки в пикселах. В теге изображения следует указать ширину и высоту картинки. &ltIMG SRC=»» ALT=»изображение» HSPACE=»10″ VSPACE=»10″ BORDER=»2″ &gt Форматы графических файлов Самыми распространенными графическими форматами в Web являются GIF,JPG и JPEG. — наиболее подходящие форматы для обмена изображениями между системами. Данные форматы поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web. Однако для больших изображений фотографического качества больше подходит формат JPEG. Формат JPEG отличается от других графических форматов прежде всего тем, что он использует метод сжатия «с потерями». JPEG частично идентифицирует и удаляет ту информацию, которая несущественна для восприятия изображения. В результате JPEG может достигать высокого уровня сжатия без заметных потерь в качестве изображения. Метод сжатия «с потерями» имеет много реализаций. JPEG достигает существенного сжатия за счет отбрасывания той графической информации, которая обычно не проявляется в реальных изображениях. Однако при сжатии с помощью JPEG изображений с четкими контурами линии начинают заметно «дрожать». Так, например, если изображение содержит какие-либо подписи, подобный эффект может возникнуть вокруг символов. Этот эффект можно свести к минимуму, задав очень высокие значения параметра качества, однако при этом нельзя достичь приемлемых показателей сжатия. Так как JPEG предполагает сжатие с потерями, при создании файлов необходимо быть внимательным. Большинство программ, создающих такие файлы, позволяют задавать значение параметра качества изображения. Обычно оно варьирует от нуля до ста. Нижние значения позволяют при сжатии JPEG отбрасывать больше информации, в результате чего получаются файлы меньшего размера. В свою очередь, высокие значения ограничивают количество информации, которой можно пренебречь во время сжатия. Одна из наиболее распространенных ошибок заключается в интерпретации значения параметра качества от нуля до ста как процента сохраняемых данных. Чтобы развеять это заблуждение, некоторые современные программные продукты JPEG просто используют шкалу «лучшее сжатие» — «лучшее качество». Хитрость заключается в том, чтобы при наименьшей величине параметра качества получить изображение без видимого его ухудшения. Лучше начинать со средних значений и внимательно оценивать результат. Если вы отмечаете некоторое ухудшение, попробуйте увеличить значение параметра, если нет — попытайтесь его уменьшить. При просмотре изображения обращайте внимание на следующие моменты: четкость очертаний и углов, например вокруг текста, или контур детали изображения, выделяющейся на общем фоне. Часто бывает заметно, что контур «смазан» или линия «дрожит». Сжатие JPEG использует мозаику размером восемь на восемь пикселов. Если задаются слишком низкие значения качества, ее границы могут стать заметны. Если у вас уже есть изображения в GIF или другом восьмиразрядном формате, возможно, вы захотите попробовать конвертировать их в JPEG. Несмотря на то, что иногда это все же приводит к уменьшению необходимого для хранения файлов пространства, в большинстве случаев игра не стоит свеч. Если вы все же хотите попытаться, сначала выясните, сколько цветов использует изображение GIF. Если в нем только 64 цвета, то конверсия вряд ли себя оправдает, так как изображение с такой бедной цветовой палитрой не имеет тех плавных цветовых переходов, которые хорошо сжимает JPEG. В результате вы просто ухудшите качество изображения, не освободив места. Активные изображения Активные изображения (image map), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение — это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов. Есть два метода формирования активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу. Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. Из соображений безопасности многие системные администраторы не записывают сценарии в каталог сgi-bin. Поэтому более подробно мы рассмотрим создание активных изображений у клиента. Создание активного изображения. Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit. Определить карту легко. Нужно открыть в МарEdit HTML-файл, содержащий изображение, на котором требуется создать активные области, после чего выбранное изображение будет загружено в рабочее окно. Затем следует выбрать тип активной области (квадрат, треугольник и круг), щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически производит запись в HTML-файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области и определить для каждой из них URL. Важно оставлять между областями немного места, чтобы при чтении быть уверенным, что активизируется правильная ссылка. Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тегов . Вам придется самим задать тег изображения с атрибутом USЕМАР и поместить его после тега МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ «#» следующим образом:   &ltIMG SRC=»mytemar.jpg» USЕМАР=»#mytemap»&gt Активные изображения у клиента работают независимо от программного обеспечения сервера и не перестанут функционировать, даже если файлы будут перенесены на другой сервер. Таким изображениям требуются только две вещи: браузер, поддерживающий HTML 3.0, и информация о карте, записанная в HTML-файле. Приведем пример активных изображений. &ltIMG SRC=»mytemar.jpg»ALT=»Изображения»USEMAP=»#imap»&gt &ltMAP NAME=»imap»&gt &ltAREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»URL»&gt &ltAREA SHAPE=»rect» COORDS=»100,0,200,100″ HREF=»URL»&gt &ltAREA SHAPE=»default» nohref&gt &lt/MAP&gt Изображения в миниатюре Часто для иллюстрации какой-то темы требуются изображения большого размера, загружаться они будут достаточно долго. В том месте, где требуется разместить большой рисунок, можно поместить маленькую его копию и сделать ссылку на полномасштабное изображение. Те посетители, которым это действительно интересно, смогут посмотреть изображение полностью, а все остальные пролистнут страницу, не задерживаясь. Такая методика особенно хороша для обложек книг, фотографий, рекламных листков, которые не все читатели захотят изучить в деталях. Далее мы рассмотрим что такое навигационные карты.

Графика в html-документах

В HTML-документах возможно использование растровой и векторной графики. Программы просмотра отображают три формата растровой графики

GIF (Graphics Interchange Format) – формат (быстрого) обмена изображениями. Используется для графики с “небольшим” количеством цветов. Этот формат допускает создание рисунков и анимационных изображений с прозрачным фоном;

JPEG (Joint Photographic Experts Group) – используется для отображений фотографий;

PNG (Portable Network Graphics) – альтернатива GIF и два формата векторной графики – технологии Shockwave и Flash компании Makromedia.

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

Фоновое изображение. Рисунок может использоваться в качестве фона Web–страницы. Для решения этой задачи используется параметр background оператора BODY. Слева по тексту приводится пример фонового рисунка. Необходимо отметить, что размер фонового рисунка значительно меньше окна программы просмотра. Поэтому фоновый рисунок будет повторяться по вертикали и по горизонтали до заполнения всего окна программы просмотра. Значение параметра background равно адресу фонового изображения. Адрес фонового рисунка указывает либо относительное местоположение рисунка (то есть путь доступа к рисунку относительно расположения исходного HTML-файла), либо его полный URI-адрес. Здесь и далее предполагается, что все рисунки размещены в папке Images, которая хранится в одной папке с исходным HTML-файлом.

Оператор BODY имеет еще один параметр, используемый для задания фонового рисунка bgproperties. Этот параметр может иметь единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается неподвижным относительно экрана.

Графические иллюстрации. Элемент <IMG>. Элемент <IMG> используется для отображения графических файлов внутри текста или таблиц. Для этого оператора можно задавать ряд параметров, определяющих адрес файла с изображением, выравнивание текста, расположенного возле изображения и так далее.

Синтаксис элемента: одиночный тэг с двумя обязательными атрибутами — src и alt

<img src=»URI» alt=»альтернативный текст»>

Собственные атрибуты элемента <IMG>

Наименование атрибутов	Описание атрибутов
SRC	Адрес URI-файла с графическим изображением.
ALT	Текстовая строка, которая отображается вместо графического файла, если броузер не может показать изображение или графическая система броузера отключена намеренно.
ALIGN	Выравнивание текста относительно изображения: left – по левой границе; right – по правой границе; top – по верхней границе; middle – по центру изображения; bottom – по нижней границе. Есть и еще ряд более “тонких” значений атрибута.
HEIGHT	Высота изображения в пикселях (рекомендуемый).
WIDTH	Ширина изображения в пикселях (рекомендуемый).
BORDER	Ширина рамки вокруг изображения (только NN).
HSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по горизонтали.
VSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по вертикали.
USEMAP	Адрес URI-файла, содержащего карту изображения (сегментированная графика).
ISMAP	Признак сегментированной графики.

Кроме перечисленных индивидуальных параметров, оператор <IMG>, также как и другие операторы, имеет ряд общих параметров и параметры для обработчиков событий.

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

Фоновые и сегментированные графические изображения масштабирования не допускают.

Пример 2.9. Использование графики в HTML-документах

<HTML>

<HEAD>

<TITLE>Проектирование WEB-сайта</TITLE>

</HEAD>

<BODY background=»Images/Fon_Tile.gif»>

<DIV><P><big><h3>Графика в HTML-документах</h3>

<P><IMG align=top hspace=10 src=»Images/Leti_tm2.gif»>Это главный

корпус Ленинградского<br>Электротехнического института

<P align=left>Графическое изображение можно<IMG align=bottom height=40

src=»Images/Cdrom.gif» width=160> включать непосредственно в

текст.</big></P></DIV>

<IMG align=left width=30% height=10% alt=»Здесь отображается РИСУНОК» src=hj>

<DIV><P>

<IMG align=bottom src=»Images/vv_pr.gif» vspace=20>

<IMG align=bottom src=»Images/vv.gif» vspace=20>Есть несколько

способоввыравнивания текста относительно изображения

<P>Просто текст</P></DIV>

</BODY>

</HTML>

Результат выполнения примера 2. 9 (рис.2.9)

Рис.2.9. Просмотр примера “Графика в HTML-документах”

В рассматриваемом примере:

• в качестве фона документа (<BODY background=»Images/Fon_Tile.gif»>) рассматривается рисунок, который хранится в файле с именем Fon_Tile.gif в папке Images. Вид рисунка приводился в тексте параграфа;

• рассматриваются различные способы выравнивания текста относительно рисунка;

• при отображении рисунка Images/Cdrom.gif показывается возможность использования параметров height и width;

• в строке <IMG align=left width=30% height=10% alt=»Здесь отображается РИСУНОК» src=hj> в параметре src задан несуществующий файл. Поэтому броузер высвечивает текст, заданный в параметре alt — «Здесь отображается РИСУНОК».

Замечание. Для отображения строки текста, указанного в качестве значения параметра alt, необходимо выделить место в окне броузера;

• в нижней части Web – страницы приведены два же рисунка, отличающихся одним параметром — прозрачностью фона рисунка. Первый рисунок, загружаемый оператором <IMG align=bottom src=»Images/vv_pr.gif» vspace=20>, использует исходный рисунок с прозрачным фоном. Второй, загружаемый оператором <IMG align=bottom src=»Images/vv.gif» vspace=20>, использует тот же самый исходный рисунок, но с непрозрачным фоном.

Замечание. При работе с графикой возникают проблемы с размещением и фиксацией рисунков в строго определенных местах окна программы просмотра. Решение этой задачи достигается за счет разметки окна программы просмотра либо в виде таблицы с невидимыми границами, либо за счет использования так называемого “плавающего” фрейма, который рассматривается далее.

Сегментированная графика. Элементы <MAP> и <AREA>.

Сегментированная графика или графическая карта (imagemap) представляется обычным изображением с выделенными чувствительными (активными) областями. Активные области изображения являются ссылками на адресуемые элементы гипертекста.

Графическая карта может быть создана в любом графическом редакторе, который позволяет сохранять изображения в формате GIF, JPG (JPEG) или PNG. Алгоритм создания графической карты:

• выбирается или рисуется изображение, которое сохраняется в виде файла с расширением gif, jpg (jpeg) или png;

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

• выполняется описание выделенных чувствительных областей с помощью операторов <MAP> и <AREA>.

Синтаксис описания:

<MAP name=»my_map»>

<AREA параметры>

<AREA параметры>

. . . . . . . . . . . . . . . . . . .

<AREA параметры>

</MAP>

Параметр name оператора <MAP> используется при установке графической карты в HTML-документ. Этот параметр используется также в элементе <input> и объекте <object>.

Собственные параметры оператора <AREA>

Наименование атрибута	Описание атрибута
shape	Задает форму чувствительной области. Может принимать значения: default-точка; rect-прямоугольник; circle-окружность; poly – многоугольник.
coords	Через запятую задаются координаты соответствующих фигур: default – координаты x и y; rect-координаты x и y верхнего левого и нижнего правого углов; circle-координаты x и y центра окружности и величину радиуса; poly-координаты x и y всех вершин многоугольника.
href	Задает URI документа, который должен быть загружен, после щелчка пользователя левой клавишей мыши на чувствительной области карты.
nohref	Задает области нечувствительные к щелчку мыши.
alt	Альтернативный текст, который отображается программой просмотра или “всплывает” как подсказка.
tabindex	Задает порядок перехода по ссылкам при помощи клавиши Tab при работе с клавиатурой.
accesskey	Назначает “горячие” клавиши для быстрого доступа к элементам. Для Windows, например, accesskey=»d» переводит фокус ввода на заданную область при нажатии Alt+D.

Кроме перечисленных, оператор AREA имеет общие атрибуты и атрибуты для установки обработчиков событий.

Пример 2.10. Организация графической карты

<HTML>

<HEAD><TITLE>Крепость</TITLE></HEAD>

<BODY>

<h3 align=»center»>Орешек. Общий план</h3><BR>

<MAP name=»Крепость Орешек»>

<IMG src=»Крепость.gif» usemap=»#Крепость Орешек»>

<AREA href=»флаг.htm » shape=rect coords=»266, 32, 291, 54″>

<AREA href=»головин.htm » shape=rect coords=»245, 155, 382, 255″>

<AREA href=»мемориал.htm » shape=rect coords=»338, 77, 381, 91″>

<AREA href=»новтюрьма.htm » shape=rect coords=»387, 55, 466, 76″>

<AREA href=»нарволя.htm » shape=rect coords=»239, 40, 257, 55″>

<AREA href=»государева.htm » shape=rect coords=»136, 83, 183, 152″>

<AREA href=»4корпус.htm » shape=rect coords=»265, 96, 430, 132″>

<AREA href=»сттюрьма.htm » shape=rect coords=»294, 54, 319, 71″>

<AREA href=»местоказни.htm » shape=rect coords=»324, 54, 337, 64″>

</MAP>

<UL><LI><A href=»флаг.htm»>Флажная башня</A>

<LI><A href=»головин.htm»>Башня Головина</A>

<LI><A href=»мемориал. htm»>Мемориальный комплекс</A>

<LI><A href=»новтюрьма.htm»>Новая(народовольческая) тюрьма</A>

<LI><A href=»нарволя.htm»>Памятник народовольцам</A>

<LI><A href=»государева.htm»>Государева башня</A>

<LI><A href=»4корпус.htm»>Четвертый тюремный корпус</A>

<LI><A href=»сттюрьма.htm»>Старая тюрьма</A>

<LI><A href=»местоказни.htm»>Место казни народовольцев</A>

<HR>

</UL>

</BODY>

</HTML>

Результат просмотра графической карты (рис.2.10).

Рис.2.10. Просмотр графической карты

Строка <IMG src=»Крепость.gif» usemap=»#Крепость Орешек»> отображает изображение, хранимое в файле Крепость с расширением gif.

Строки, ограниченные операторами <MAP> и </MAP>, дают описание графической карты с именем Крепость Орешек.

Строки с оператором <AREA> описывают отдельно каждую чувствительную область и содержат адрес href документа, который будет отображаться в окне программы просмотра при выполнении ссылки.

Графическая карта (см. рис.2.10) ничем не отличается от обычного изоражения. Различие проявляется при попадании указателя мыши на активную область. Указатель мыши в этом случае меняет вид.

Графика в HTML

Здесь может быть ваша реклама…

1000
участников

5500 читателей

                                                      

       Тэг <img> позволяет WEB — вводить в HTML-документ ссылки на графические и иные типы данных. Применение этого  тэга способствует улучшению внешнего вида документов и их функциональности.

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

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

<img src=»./pic/Rolls.png»> Rolls </img>

<img src=»./pic/Rolls.png» />

alt
  Необязательный атрибут, который задает текст. В случае, когда WEB-браузер не поддерживает изображение графики или в его настройках отключена загрузка изображений, при наведении на картинку взамен  нее браузером будет отображен текст. Если же данного параметра нет, то там, где должен быть  рисунок значительное количество браузеров выводит «иконку», иными словами, пиктограмму. Активизировав ее, можно увидеть изображение.

. Например:

<img src=»./pic/Rolls.png» alt=» Rolls » />

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

pixels

percent

ширина изображения в пикселях от его истинной (исходной) ширины.

ширина изображения в процентах от ширины родительского элемента или экрана

height=200

height=80%

Значения                                     Описание                                           Пример

<img src=». /pic/Rolls.png» alt=»Размер изображения 180х120 пикселей» />

width

  Этот необязательный атрибут указывает на ширину рисунка. Если width отсутствует, то применяется

оригинальная его ширина. Этот атрибут разрешает выбирать масштаб: сужать или расширять

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

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

рисунок может быть отображен некорректно.

<img src=»./pic/Rolls.png» alt=»Размер изображения 180х120 пикселей» />

pixels

percent

ширина изображения в пикселях от его истинной (исходной) ширины.

ширина изображения в процентах от ширины родительского элемента или экрана

width=100

width=50%

Значения                                     Описание                                           Пример

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

left           рисунок будет слева относительно всех других элементов

right     рисунок будет справа относительно всех других элементов

top     элементы выравниваются по верхнему краю изображения

middle элементы будут выровнены по центру изображения

bottom элементы выравниваются по нижнему краю изображения

<img src=»./pic/Rolls.png» border=»1″ />          <img src=»./pic/Rolls.png» border=»0″ />

border
  Этот атрибут определяет размер ширины рамки возле рисунка, в пикселях. Если установлен 0, то рамка не изображается. К примеру:

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

<img src=»./pic/Rolls.png» vspace=20 />

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

<img src=»./pic/Rolls.png» hspace=20 />

usemap
  Сообщает веб-браузеру о том, что установленное изображение — это карта ссылок и разрешает совершать пользователям какие-либо действия. Для этого необходимо щелкнуть мышкой на определенном месте рисунка. Эта возможность является непосредственным расширением HTML. Об этом разговор пойдет далее.

---

Бесплатно создаем сайт

Escape-
последовательности

---

Развитие и монетизация сайта

Полезная литература

Информация

---

Все о CSS
Самый простой курс

®

Твитнуть

  Copyright © 2012               Все права защищены. Любое — полное или частичное копирование материалов запрещено, при перепечатки ссылка на источник обязательна.

Мои услуги: быстро, качественно, не дорого. Подробнее…

---

Что такое SVG-графика и как её использовать — Журнал «Код»

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

Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами HTML.

Что такое и зачем нужно SVG

SVG расшифровывается как scalable vector graphics, «масштабируемая векторная графика». Это значит, перед нами векторное изображение, которое можно масштабировать без потери качества.

SVG — это не единственный формат векторной графики, есть много других. Но именно SVG используют на веб-страницах и в HTML-коде. Его инструкции оптимизированы для веб-разработки, и отрисовка происходит прямо в браузере. И, самое главное, все команды SVG представлены в виде текста и координат, а не в виде отдельных файлов. Это значит, что SVG-изображение можно зашить прямо в код веб-страницы, что иногда бывает незаменимо.

SVG используется в вебе для отрисовки:

• геометрических фигур и линий,
• логотипов,
• элементов интерфейса на странице,
• простых картинок и иллюстраций.

Как использовать SVG на странице

Обычно когда хотят что-то нарисовать в HTML, то используют холст с тегом <canvas> и рисуют на нём. Но плюс SVG-графики в том, что для неё не нужен отдельный холст — можно рисовать что угодно в любом месте страницы с помощью тега <svg>..</svg>. Все объекты, которые нам нужно нарисовать, задаются между этими тегами.

Например, мы можем поставить на странице любой заголовок, а потом прямо поверх него нарисовать пару зелёных кругов и красную линию:

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

Линия

Линия — самый простой элемент SVG-графики. Чтобы нарисовать линию, нам нужно знать:

• начальные и конечные координаты,
• толщину линии,
• и её цвет.

Для линии используется тег <line/>:

<line 
      x1=»50″ y1=»30″ ← начальные координаты линии
      x2=»250″ y2=»0″  ← конечные координаты
      stroke-width=»3″ ← толщина линии
      stroke=»red» ← цвет
/> 

Соберём всё вместе:

<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/> 

Теперь обернём эту команду в тег <svg>, поставим на страницу и посмотрим на результат:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
</head>
<body>
	<svg>
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
	</svg>
</body>
</html>

Круг

Для круга используется команда <circle/>, в которой нам нужно указать:

• центр круга,
• радиус,
• цвет заливки,
• толщину контура,
• цвет контура.

Чтобы нарисовать зелёный круг с жирной фиолетовой обводкой, зададим такие параметры:

<circle 
      cx=»25″ cy=»25″ ← центр круга
      r=»20″  ← радиус
      fill=»green» ← цвет заливки
      stroke-width=»5″  ← толщина контура
      stroke=»rgb(150,110,200)» ← цвет контура
/>

Соберём вместе, добавим второй круг и тоже положим это внутрь тега <svg>:

<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>

Прямоугольник

С прямоугольниками тоже всё просто — указываем размеры, цвет заливки, а также цвет и толщину контура:

<rect 
      width=»30″ ← ширина
      height=»20″  ← высота
      fill=»orange» ← цвет прямоугольника
      stroke-width=»1″ ← толщина контура
      stroke=»rgb(0,0,0) ← цвет контура
«/>

<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>

Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (0,0). Если прямоугольник нужен в другом месте, используют многоугольник.

Многоугольник

Многоугольник — это фигура, которая получается так:

1. Мы задаём любое количество точек по координатам.
2. Через эти точки по порядку проходят линии, причём последняя точка соединяется с первой.
3. То, что получилось внутри границ линий, закрашивается выбранным цветом.

Например, вот что нужно, чтобы нарисовать синий треугольник:

<polygon 
      points=» ← начались координаты вершин треугольника
      100,140 ← координаты первой точки
      250,118  ← координаты второй точки
      170,60 » ← координаты третьей точки
      fill=»blue» ← цвет фигуры
      stroke-width=»1″ ← ширина обводки
      stroke=»rgb(0,0,0) ← цвет обводки
«/>

<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
<!-- сразу добавим ещё одну фигуру -->
<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>

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

Продвинутый уровень

Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега <svg> тег <h2>:

<h2>Привет, это журнал Код!</h2>

Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:

1. Добавить стиль к svg-тегу.
2. В этом стиле прописать абсолютное позиционирование и установить значение z-index = -1, чтобы слои с рисунками оказались ниже всех и не мешали остальным.
3. Также в этот стиль нужно добавить свойство display: block — оно управляет тем, как располагается содержимое всего блока. Подробно про это свойство мы рассказывали в подборке полезных CSS-команд — почитайте, если интересно, как управлять внешним видом страницы.

Добавим это в стили и соберём полную страницу:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
	<style type="text/css">
		svg{
			position:absolute;
			z-index:-1;
			display: block;}
	</style>
</head>
<body>
	<svg>
		<!-- круги -->
		<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
		<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>
		<!-- линия -->
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
		<!-- прямоугольник -->
		<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>
		<!-- многоугольники -->
		<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
		<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>
	</svg>
	<h2>Привет, это журнал Код!</h2>
</body>
</html>

Внешние SVG-файлы

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

Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах. 

Зачем программистам сразу два монитора (а то и три)

Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег <img src="..."> — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться. 

Что дальше

Мы разобрали только самые основы SVG-графики. Дальше будем делать красивую SVG-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.

Текст:

Михаил Полянин

Редактура:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика, 5-е изд.

Роббинс Дженнифер

Артикул	2676
ISBN	978-5-9775-4050-6
Количество страниц	956
Формат издания	165 x 233 мм
Печать	черно-белая +44 цв. вклейки
Серия	Внесерийные книги

2406 ₽
2045 ₽

# CSS# CSS3# HTML# Java/JavaScript# JavaScript# O’Reilly# SVG# фронтенд

• Описание
• Детали
• Отзывы (0)

Описание

Книга поможет освоить веб-дизайн,  не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

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

В пятом издании  добавлен материал об использовании CSS Flexbox и Grid для создания сложных и гибких макетов страниц, тонкостях адаптивного веб-дизайна для отображения веб-страниц на экранах любых устройств, о работе  с командной строкой, Git и другими инструментами веб-дизайнера, а также применении  SVG-изображений

В отличие от всех других книг, которые предназначены для начинающих, эта книга поможет вам быстро освоиться с излагаемым материалом. Дженнифер объяснит каждый ваш шаг, включая некоторые весьма продвинутые концепции.
Джен Симмонс (@jensimmons), Mozilla и рабочая группа W3C CSS

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

Вы хотите заняться веб-дизайном, не имея опыта? Это дружественное руководство даст вам превосходные возможности для старта! Вы узнаете, как устроены и работают веб-страницы, и начнете постепенно создавать свой собственный сайт. По завершении чтения книги вы сможете создать простой сайт с многоколоночными страницами.

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

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

Вы научитесь:

• Создавать веб-страницы, содержащие текст, ссылки, изображения, таблицы и формы
• Использовать таблицы стилей (CSS) для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации
• Писать скрипты на языке JavaScript и узнаете почему он столь важен в веб-дизайне
• Создавать и оптимизировать веб-изображения, сократив до минимума время их загрузки

Новое в пятом издании

• Использование CSS Flexbox и Grid для создания сложных и гибких макетов страниц
• Тонкости адаптивного веб-дизайна, благодаря которому веб-страницы великолепно выглядят на экранах любых устройств
• Описание работы с командной строкой, Git и другими инструментами, входящими в набор инструментов современного веб-дизайнера
• Применение SVG-изображений

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

Дженнифер Роббинс уже более 25-ти лет занимается веб-дизайном. Еще в 1993-м году она разработала первый коммерческий сайт — Global Network Navigator (GNN), принадлежащий издательству O’Reilly. И практически столько же лет она пишет книги о веб-дизайне. В частности, ее перу принадлежат популярные книги «HTML5, CSS3 и JavaScript. Исчерпывающее руководство» и «HTML5. Карманный справочник».

Детали

Артикул	2676
ISBN	978-5-9775-4050-6
Количество страниц	956
Серия	Внесерийные книги
Переплет	Мягкая обложка
Печать	черно-белая +44 цв. вклейки
Год	2021
Габариты, мм	233 × 165 × 52
Вес, кг	0.915

Дополнительные файлы скачать: Зеркало1Дополнительные файлы скачать (Chrome): Зеркало2

• ✓ Новинки на 2 недели раньше магазинов
• ✓ Цены от издательства ниже до 30%
• ✓ Акции и скидки только для подписчиков
• ✓ Важные новости БХВ

ПОЛЕЗНАЯ РАССЫЛКА КНИЖНЫХ НОВОСТЕЙ

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

Рекомендуем также

•  Дронов Владимир Александрович

  HTML и CSS. 25 уроков для начинающих

  963 ₽
  819 ₽
•  Дронов Владимир Александрович, Прохоренок Николай Анатольевич

  HTML, JavScript, PHP и mySQL. Джентльменский набор Web-мастера, 5 изд.

  1458 ₽
  1239 ₽
•  Дронов Владимир Александрович

  JavaScript. 20 уроков для начинающих

  894 ₽
  760 ₽
•  Яблонски Джон

  Законы UX-дизайна

  646 ₽
  549 ₽

Графика — W3C

Сеть — это больше, чем текст и информация, это также является средством выражения художественного творчества, визуализации данных и оптимизация подачи информации для разных аудиторий с различные потребности и ожидания. Использование графики на веб-сайтах повышает опыт для пользователей, и у W3C есть несколько различных и взаимодополняющих технологии, которые работают вместе с HTML и сценариями, чтобы предоставить создателям веб-страниц и веб-приложений инструменты, необходимые им для обеспечить наилучшее представление своего содержания. Узнайте больше ниже о:

Этот вводной текст является шаблонным для бета-версии сайта w3.org. Мы намерены предложить сообществу разработать этот шаблон и помогите предоставить полезный контент и ссылки. Более полный пример см. страница для HTML и CSS.

Что такое графика?

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

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

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

Для чего используется графика?

Графика используется для всего: от улучшения внешнего вида веб-страниц до служить уровнем представления и взаимодействия с пользователем для полноценного веб-сайта. Приложения.

Различные варианты использования графики требуют разных решений, поэтому доступно несколько различных технологий. Фотографии лучше всего представлены с PNG, интерактивные штриховые рисунки, визуализация данных и даже пользовательские интерфейсы. нужна мощь SVG и Canvas API. CSS существует для улучшения других форматов. как HTML или SVG. WebCGM удовлетворяет потребности в технической иллюстрации и документации во многих отраслях.

Что такое PNG?

Переносимая сетевая графика (PNG) — это статический файл формат для переносимого, хорошо сжатого хранения и обмена без потерь растровые изображения (битмапы). Он имеет богатый контроль цвета с индексированным цветом, оттенки серого, поддержка истинного цвета и прозрачность альфа-канала. PNG это разработан для Интернета, с возможностями потоковой передачи и прогрессивного рендеринга. Это поддерживается повсеместно в веб-браузерах, графических инструментах разработки, изображениях наборы инструментов и другие части творческой цепочки инструментов. Файлы PNG имеют файл расширение «.PNG» или «.png» и должно быть развернуто с использованием типа носителя «изображение/png». Изображения PNG можно использовать с HTML, CSS, SVG, Canvas API и WebCGM.

Что такое SVG?

Масштабируемая векторная графика (SVG) похожа на HTML для графики. Это язык разметки для описания всех аспектов изображение или веб-приложение, от геометрии фигур до стиля текста и формы, к анимации, к мультимедийным презентациям, включая видео и аудио. Он полностью интерактивен и включает в себя DOM с поддержкой сценариев, а также декларативная анимация (через спецификацию SMIL). Он поддерживает широкий спектр визуальные функции, такие как градиенты, непрозрачность, фильтры, отсечение и маскирование.

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

Что такое CSS?

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

Что такое Canvas API?

Canvas API — это технология написания сценариев на стороне клиента, позволяющая создание или изменение растровых изображений (bitmaps). Он использует векторную программные методы для создания форм, градиентов и других графических эффектов, и поскольку у него нет DOM, он может работать очень быстро. Специальные скриптеры могут разрабатывать игры или даже полнофункциональные приложения, используя Canvas API, отдельно или интегрированный в HTML или SVG. Он изначально поддерживается в большинстве современных браузеров. (с библиотеками сценариев, поддерживающими все основные браузеры), и даже на некоторые мобильные устройства.

Что такое WebCGM?

Метафайл компьютерной веб-графики (WebCGM) это веб-профиль CGM, стандарта ISO для векторных и составных изображений. Определение векторного/растрового изображения. CGM имеет большое количество поклонников в технической сфере. иллюстрация, интерактивная электронная документация, геофизические данные визуализация, среди других областей применения, и широко используется в областях автомобильной, авиационной и оборонной промышленности. WebCGM имеет многие из тех же графических функций, что и SVG.

Примеры

В качестве простого примера файла изображения SVG, вот круг с градиентом чтобы придать ему трехмерный вид:

Подробнее

Для получения дополнительной информации об использовании открытой веб-графики см. графику W3C учебники.

Недавняя пресса

13 июня
TechWire Азия

« Предоставление живого видео таким, каким оно должно быть — в реальном времени »

31 мая
Новости Центрального Техаса сейчас

“ После Firefox Chrome поддерживает новый стандарт входа без пароля ”

20 апреля
Точка сайта

« Превратить статическое меню CSS3/HTML5 в динамическое с помощью PHP/MYSQL »

13 апреля
Ле Фигаро

« L’organisme, который контролирует веб-объявления о смерти à venir des mots de passe »

Что такое HTML-графика? (с изображением)

`;

Евгений П.

Дата последнего изменения: 08 сентября 2022 г.

В языке гипертекстовой разметки (HTML) существует несколько способов отображения и создания графики в HTML-документе. Наиболее широко используемый тип HTML-графики — это изображения, которые размещаются непосредственно на HTML-странице, называемые встроенными изображениями, хотя существуют и другие методы, такие как использование языка сценариев или скомпилированное веб-приложение, которые можно использовать для достижения тех же результатов. Для динамически генерируемой графики для диаграмм или графиков можно использовать масштабируемую векторную графику (SVG). Также есть некоторые базовые HTML-графики, которые поддерживаются спецификацией языка и не требуют внешних файлов, таких как горизонтальные линии и маркеры в списке. Более сложная HTML-графика может быть достигнута за счет использования языка сценариев, каскадных таблиц стилей (CSS) и элемента холста HTML, что дает встроенную возможность для некоторых эффектов, которые ранее были возможны только с помощью внешних объектов и подключаемых модулей.

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

Масштабируемая векторная графика — это более сложный стиль HTML-графики. Изображение SVG рисуется путем определения форм, путей и весов линий и рисуется на лету, когда пользователь просматривает документ. Это делает SVG хорошим выбором для отображения динамических данных, таких как диаграммы или графики, но делает его очень непрактичным для использования в других типах графики, таких как создание фотореалистичных изображений. Для простой HTML-графики и в ситуациях, когда внешний файл изображения не может быть загружен, SVG может быть приемлемым вариантом.

С развитием стандарта языка HTML версии 5 (HTML5) стало возможным создавать динамическую HTML-графику на базовом языке HTML. Это делается путем рисования непосредственно на специальной поверхности, известной как холст в документе HTML. Используя JavaScript® и CSS, этот метод позволяет создавать анимации или игры, которые могут реагировать на действия пользователя или настраивать графику в зависимости от настроек веб-браузера или других данных. Однако создание графики HTML5 может быть сложной процедурой, которая может привести к созданию длинных блоков кода сценария, которые могут выполняться очень медленно на некоторых компьютерах или устройствах.

ГРАФИКА: HTML и графика

Метки высоты и ширины Все исходные теги графики вашей страницы (даже маленькие кнопки или значки) должны включать теги HEIGHT и WIDTH . Эти теги сообщают браузеру, сколько места должно быть отведено графике на странице, и дают указание браузеру отобразить вашу веб-страницу еще до того, как графические файлы начнут загружаться. Хотя это не ускоряет загрузку (это может сделать только более быстрое соединение для передачи данных), это позволяет пользователю быстрее увидеть макет страницы. Сначала заполнятся текстовые блоки, а затем в отведенные места «зальются» графические файлы. Это означает, что пользователь может начать читать вашу страницу во время загрузки графики. Цветные фоны Цвета веб-фона предлагают «нулевую пропускную способность», что означает изменение внешнего вида ваших страниц без добавления графики. Они также позволяют повысить удобочитаемость ваших страниц, настроить цвет фона в соответствии с изображением переднего плана и сигнализировать о широком изменении контекста от одной части вашего сайта к другой. A List Apart использует фоновые цвета как простой способ оживить визуальный эффект своих страниц с низкой пропускной способностью: www. alistapart.com Выбор цвета фона очень прост в WYSIWYG (что видишь, то и получаешь) графических программах компоновки веб-страниц. К сожалению, выбор цвета без одного из этих редакторов веб-страниц — процедура, доступная только пропеллерхедам. Цвет указан в теге в шестнадцатеричном коде, в котором шесть элементов задают значения красного, зеленого и синего, которые смешиваются для создания цвета. В теге перед шестнадцатеричным кодом всегда стоит знак «#»: (#RRGGBB). Поскольку весь этот бизнес теперь визуально обрабатывается новым поколением WYSIWYG-редакторов страниц и графических редакторов, таких как Adobe Photoshop, мы не будем углубляться в секреты шестнадцатеричного выбора цвета RGB. Цвета фона и разборчивость Интернет изобилует страницами, читаемость которых незначительна из-за неудачно выбранных комбинаций цвета фона и цвета текста. Текст, который трудно прочитать, является помехой для зрячего читателя, а определенные цветовые комбинации делают страницы нечитаемыми для дальтоников (10% мужчин частично дальтоники). Разборчивость шрифта на экране компьютера уже нарушена из-за низкого разрешения экрана. Типичный экран компьютера Macintosh или Windows отображает текст с разрешением от 72 до 80 точек на дюйм (около 5 200 точек на квадратный дюйм), что почти в 300 раз меньше, чем разрешение типичной журнальной страницы (1 440 000 точек на квадратный дюйм). Черный текст на белом (или очень слегка тонированный () фон обеспечивает наилучшую общую контрастность и разборчивость шрифта. Черный фон значительно хуже читается, чем белый фон, даже если для максимальной контрастности используется белый шрифт. Цветной фон может работать как альтернатива простому серому браузеру по умолчанию, если цвета сохранены в очень приглушенных тонах и с низкой общей цветовой насыщенностью (пастельные, светло-серые и светло-земляные тона работают лучше всего). Фоновые узоры В начале 1995 года Netscape Navigator версии 1.1 предоставил авторам веб-страниц возможность использовать небольшие мозаичные изображения в формате GIF или JPEG (или одно большое изображение) для формирования фонового узора позади веб-страницы. Эта функция вызывает споры в дискуссиях о веб-дизайне, потому что страницы с большими фоновыми изображениями загружаются дольше, а фоновые узоры, как правило, затрудняют чтение страниц, если они не тщательно разработаны. Чтобы изображение можно было использовать в качестве фоновой текстуры, оно должно быть в формате GIF или JPEG небольшого размера, в идеале размером не более 100 x 100 пикселей. По нашему опыту, фоновые рисунки JPEG загружаются немного быстрее, чем эквивалентная графика GIF. Типичная графика, используемая для фоновых рисунков, представляет собой однородные текстуры: Изображение будет повторяться как по горизонтали, так и по вертикали, чтобы заполнить окно браузера. То, как вы можете использовать фоновую графику, полностью зависит от ваших целей для вашего веб-сайта, скорости доступа, типичной для вашей целевой аудитории, и от того, соответствует ли графический фон эстетическим целям вашего веб-сайта. Глупо использовать большие или визуально сложные фоновые текстуры на любой странице, к которой часто обращаются занятые люди, ищущие информацию, связанную с работой длительное время загрузки, любительская эстетика и плохая читаемость просто раздражают ваших пользователей. Тем не менее, в руках опытного графического дизайнера, который создает веб-страницы, предназначенные для графического воздействия, возможность использования фоновых текстур открывает множество интересных возможностей визуального дизайна. Это особенно актуально для университетов и коммерческих организаций, где быстрый доступ к сети является обычным явлением, а пропускная способность не является препятствием для многих пользователей, использующих модемы. www.dartmouth.edu/~ac Карты изображений Карты изображений предлагают способ определения нескольких «живых» областей ссылок в графическом изображении на веб-странице. Карты изображений стали стандартной функцией большинства профессионально разработанных веб-сайтов, поскольку они предлагают эффективное сочетание визуальной привлекательности и, при правильном использовании, функциональности, позволяющей эффективно использовать пространство. Карты изображений особенно эффективны, когда они включены в графические заставки среднего размера в верхней части домашних страниц или в графические изображения или логотипы, характерные для ваших страниц. Например, Palm использует на своей домашней странице меню карт изображений с эффективным использованием пространства. Графика — это больше, чем меню; это помогает определить характерный «внешний вид» страниц на веб-сайте Palm: www.palm.com Карты изображений — единственный способ включить несколько ссылок в графическую иллюстрацию, как в этом анатомическом примере: Карты изображений также являются идеальным способом преодоления вертикальных, ориентированных на списки, графически негибких норм обычных веб-страниц, созданных с помощью стандартных тегов HTML. Карты изображений позволяют отказаться от макета HTML-страницы и встраивать ссылки в большие изображения, как это делается в программах для создания компакт-дисков. Имейте в виду, однако, что такие конструкции подходят только для аудитории с высокой пропускной способностью доступа к Интернету или локальной интрасети.

Справочное руководство по HTML: Глава 2

Справочное руководство по HTML: Глава 2 [предыдущая] [следующая] [наверх] [внизу] (1 из 1)

---

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

Некоторые браузеры могут читать самые разные типы файлов изображений, но некоторые могут читать только некоторые из них. Самый читаемый формат файлов .GIF. Существует множество условно-бесплатных продуктов, которые создавать .GIF или переводить один тип изображения (например, .BMP) в .GIF. Файлы изображений JPEG обычно лучше подходят для фотографических изображения или изображения с большим количеством деталей. GIF-изображения могут быть лучше для изображений с большими просторами сплошного цвета.

Чтобы включить изображение в документ HTML, используйте тег .

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

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

Элементы

Тег изображения имеет несколько атрибутов, управляющих графика. Первый – это СРК. Это определяет источник для графики — Файл изображения .GIF.

Вы можете контролировать расположение изображения относительно текста строки, в которой он появляется, с помощью атрибута ALIGN. Вы можете установить ВЫРАВНИВАНИЕ на одно из девяти различных значений: ВЛЕВО, ВПРАВО, ВЕРХ, АБСМИДДЛ, ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE или BOTTOM. Если вы не укажете выравнивание, по умолчанию это НИЗ.

Три способа выравнивания изображений.

Некоторые браузеры не могут отображать изображения. Вы можете включить текстовая строка, описывающая изображение с помощью атрибута ALT.

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