Графика и трафик
Требования к красоте и выразительности оформления Web-страниц находятся в постоянном противоречии с техническими возможностями современного Web-хостинга. Поэтому проектировщик сайта должен стать посредником между дизайнером и пользователем и строго выдерживать равновесие между визуальной привлекательностью и разумной скоростью доставки информации в Сети. Чтобы успешно решать эту проблему, необходимо знать все используемые в Интернете графические форматы, понимать различия между ними, области применения и особенности использования.
Чтобы разобраться с большим количеством форматов и протоколов, принятых в Интернете, и построить собственную страницу, необходимо отобрать то, что является самым подходящим для ваших конкретных целей. Некоторые форматы могут быть специфичны только для одного браузера, а другие потребуют специального внешнего модуля. Мы выбрали из всего многообразия форматов только те, которые наиболее часто используются авторами популярных сайтов и принимаются пользователями.
GIF и JPEG - это два наиболее популярных графических формата, которые давно стали фактическими стандартами для использования на WWW. Оба достаточно универсальны, читаются большинством браузеров и не требуют специального программного обеспечения (или дополнительных модулей). GIF и JPEG - растровые форматы изображения, что, соответственно, определяет фиксированный формат (разрешение) при отображении таких картинок на экране. При попытке масштабирования (предусмотренного в некоторых браузерах) растровые (пиксельные) изображения значительно теряют в качестве. Для 8-разрядного (256-цветового) формата GIF, кроме того, серьезной проблемой является выбор цветовой палитры.
Векторные графические форматы значительно более привлекательны для использования в Сети. В отличие от точечных рисунков векторная графика основана на математическом (геометрическом) представлении данных. Такие изображения значительно меньше по объему хранения/передачи, легко масштабируются и практически не теряют в качестве при любых преобразованиях. К сожалению, векторные форматы еще малоупотребимы в Интернете, но стандарты уже сформированы и должны заинтересовать проектировщиков.
Несколько векторных стандартов было предложено сравнительно недавно, а форматы PGML и VML в настоящее время рассматриваются консорциумом W3C (World Wide Web Consortium). Однако фирма Macromedia, продвигающая VML, давно открыла свой векторный формат Shockwave Flash другим разработчикам и реализовала дополнительные модули для просмотра графики в этом формате для популярных браузеров.
Однако не для всех применений новые средства - обязательно лучшие. Самыми распространенными изображениями, публикуемыми в Интернете, до сих пор являются цифровые фотографии, рисунки и отсканированные картинки, которые весьма трудоемко, да и вряд ли целесообразно переводить в векторный формат.
Поэтому выбор формата в конечном счете зависит от ваших задач, и то, какие изображения больше соответствуют вашей целевой аудитории, решать только вам.
GIF - формат для дизайна
Фирма CompuServe первоначально предназначала свой формат GIF для интерактивных приложений в условиях ограниченных возможностей стандартной графики на персональном компьютере. Это был изначально 4-, а затем и 8-разрядный растровый формат с заданием цветовой палитры, который поддерживал максимум 256 цветов. Одно из существенных преимуществ формата - то, что изображения могут быть индексированы к определенной палитре (набору цветов), в то время как JPEG-изображения не могут «привязываться» к палитре и их «правильное» отображение не всегда возможно. Это свойство особенно важно для тех разработчиков, которые используют индексацию палитры, чтобы оптимизировать передачу изображений для всех без исключения платформ (будь то PC, Mac, Web-TV или другие), независимо от того, с какой глубиной цвета работает та или иная система. Добиться подобной универсальности позволяет ограниченная палитра в 216 цветов, которая включает все общие цвета, используемые как в Windows, так и, например, в MacOS. Проектирование сайта в универсальной палитре гарантирует непротиворечивое, кроссплатформное и не зависящее от используемого оборудования отображение. Кроме того, GIF-формат использует схему сжатия без потерь (с простым алгоритмом кодирования повторов: последовательность байтов одного цвета заменяется на слово из двух байтов, один из которых содержит образец закраски, а второй определяет количество повторений), так что графические данные в этом формате не теряют информации в процессе сжатия и восстановления.
Однако именно из-за таких встроенных цветовых ограничений формат GIF может применяться только для тех изображений, которые имеют ограниченное количество цветов, - типа черно-белых схем или же тех, что содержат большие области одного цвета, - типа мультипликационных кадров или цифровых рисунков с однотонной заливкой. Конечно, вы можете сохранить любое изображение в формате GIF, применив так называемое сглаживание цветовых тонов (dithering) и получить, таким образом, достаточно приличное качество, но в этом случае вы рискуете «нарваться» на значительное увеличение размера файла после применения вышеописанной компрессии с запоминанием повторов (в вырожденном случае, когда в изображении не присутствует ни одного смежного повтора, вы получите увеличение файла ровно в два раза по сравнению с некомпрессированным оригиналом).
Таким образом, основные преимущества GIF-формата - это использование сжатия без потерь и экономное сохранение сплошных областей цвета с четкой границей и строгими цветовыми переходами. Формат JPEG отличается от описываемого тем, что в зависимости от уровня сжатия сплошные области там разрушаются и резкие переходы цветов сглаживаются или размываются.
Основной критерий выбора формата GIF: если вы сами нарисовали в графическом пакете типа Photoshop или Painter картинку, которая имеет большие области одного цвета, или обработали существующее изображение и хотите сохранить высокую контрастность (необходимую, например, при отображении текста), то производите сохранение именно в этом формате (прежде всего это касается черно-белых или бедных цветом рисунков).
Для фотографий, видеокадров или других полноцветных изображений с использованием гладких цветовых переходов (градиентов) используйте формат JPEG.
Важно не забывать еще и то, что если вы пытаетесь сохранять изображения с непрерывным тоном в формате GIF, то вам, вероятно, придется отбросить так много информации в процессе подготовки изображения (при преобразовании его к фиксированной палитре), а применяемый в GIF метод компрессии окажется настолько неэффективным, что вы проиграете еще и материально (и по трудозатратам, и по объему файла).
Кроме всего прочего в формате GIF предусмотрено так называемое чересстрочное появление (Interlaced), которое помогает пользователям с медленными каналами в самом начале приема оценить содержание картинки (эффект похож на постепенную прорисовку нерезкой картинки) и время, необходимое на ее полную передачу, и в результате принять решение, стоит ли продолжать прием или лучше от него отказаться. Впрочем, в отличие от прогрессивного JPEG здесь эффект, скорее, психологический, нежели реальный (см. рис.).
Также следует помнить об одном важном преимуществе GIF-формата, без которого в некоторых случаях невозможно обойтись даже при всех его недостатках, - это поддержка прозрачности (расширение GIF89a), которая дает возможность отображать силуэт с непрямоугольными контурами на уже существующем фоне. Прозрачность в формате GIF реализована примитивно - один цвет (обычно фоновый) назначается прозрачным. Это преимущество часто используется при создании кнопок и пиктограмм при оформлении страницы (JPEG не предлагает никакой поддержки прозрачности).
В заключение можно сказать следующее: GIF - наилучший выбор для достижения эффективного компромисса между существующим оборудованием и программным обеспечением, а возможность индексирования 8-разрядного GIF-изображения до 216 универсальных цветов имеет существенное значение, когда ваши изображения предназначаются для показа на разнообразных браузерах и неизвестных платформах.
JPEG - формат для фотографий и видеокадров
Формат JPEG получил свое название от аббревиатуры Joint Photographic Experts Group сommittee (объединенного комитета экспертов по фотографии), который и создал этот стандарт в конце 80-х - начале 90-х годов. Формат JPEG основан на алгоритме сжатия с потерями (дискретном косинусоидальном преобразовании), средствами которого ваше изображение разбивается на области (обычно это квадраты 8Ѕ8 пикселов), внутри которых распределение цветов заменяется на математическую функцию и хранятся только коэффициенты этой функции, позволяющие восстановить ее вид. Естественно, вы столкнетесь с некоторой потерей качества (в зависимости от сложности функции, применяемой для замены изображения) и после восстановления получите уже не реальную картинку, а ее математический «суррогат». Однако в зависимости от качества вашего оригинала и степени сжатия потеря качества может быть совершенно незаметна зрителю. Но главное преимущество JPEG-формата по сравнению с GIF заключается в том, что, в то время как GIF - только 8-разрядный (256-цветный), JPEG - 24-разрядный и может отображать до 16,7 млн. цветовых оттенков.
По этой причине полноцветный JPEG, естественно, воспроизводит значительно большее количество видеоинформации, чем GIF. Этот формат лучше всего подходит для изображений реальной жизни - отсканированных картинок или цифровых фотографий, а также оцифрованных видеокадров или отрендеренных сцен трехмерной компьютерной графики.
Другое преимущество JPEG заключается в следующем: в отличие от GIF он позволяет самостоятельно задавать степень сжатия, применяемого к исходному изображению, что дает возможность выдерживать необходимое равновесие между размером и качеством.
Коэффициенты сжатия изменяются для JPEG в широких пределах - в зависимости от используемой программы редактирования изображения, однако на Web-страницах обычно применяются соотношения 10:1 или 20:1 (выраженное в пропорции по объему по отношению к исходному изображению), что обычно обеспечивает приемлемое качество. Тем не менее сжимать изображение можно и до экстремальных значений 100:1 (естественно, со значительной потерей качества).
Итак, работая с фотографией в JPEG-формате, вы имеете возможность сохранить 24-разрядное изображение с 16,7 млн. цветовых оттенков, и, несмотря на потерю качества при сжатии, оно все же значительно больше соответствует оригиналу, нежели 256-цветное GIF-представление. При этом неизбежные потери качества сильно зависят от размера, качества и типа исходного изображения.
Кроме того, JPEG позволяет определять так называемое прогрессивное отображение, то есть такое, когда при загрузке на экране сразу появляется «грубое» представление картинки, которое, по мере получения дополнительной информации, постепенно улучшается (при этом вы можете получить необходимое представление о сути подаваемого материала еще до завершения загрузки и прервать процесс на любом этапе, что значительно экономит время просмотра сетевого контента).
Эти средства вы можете использовать по желанию, и подобное поэтапное проявление может стать хорошим подспорьем в борьбе с загруженностью каналов. Единственная проблема с прогрессивным JPEG (в отличие от чересстрочного GIF) состоит в том, что старые версии браузеров могут его не поддерживать.
PNG - универсальная растровая новинка
Представитель следующего поколения растровых форматов, PNG, взял лучшие свойства и от JPEG, и от GIF и добавил свой, уникальный подход к подаче изображения, который дает возможность встроить в один файл различные версии того же самого изображения для низкого, среднего и высокого разрешений.
Формат PNG (Portable Network Graphics) - относительно новый растровый графический формат, который был одобрен как стандарт консорциумом W3C и должен постепенно заменить оба «устаревших» формата: как GIF, так и JPEG. PNG предлагает и цветовую индексацию (до 256 цветов), и поддержку как 24-, так и 48-разрядного цвета (True-Color), и работу с каналом прозрачности (альфа-каналом), к тому же он значительно более эффективен, чем традиционные форматы хранения растровых изображений.
Алгоритм сжатия для полноцветной картинки превосходит JPEG по качеству, а при поддержке ограниченной индексированной палитры (до 256 цветов) новый формат осуществляет компрессию без потерь на 10-30% лучше, чем та, которая реализована в GIF-формате, что делает его оптимальным для использования в любых случаях. К сожалению, новый формат не позволяет жертвовать качеством изображения в обмен на более высокую степень сжатия, как в формате JPEG.
Поддержка прозрачности в формате PNG в отличие от GIF - полноценная, то есть вы можете строить и полупрозрачные изображения или границы, поэтому проблема «чистых» границ, так трудно решаемая при использовании прозрачности в GIF-файле, здесь легко преодолима.
Однако, несмотря на все усовершенствования, предлагаемые в PNG, новый формат «заживет» только после того, как к нему обратятся проектировщики Web-сайтов и производители программного обеспечения как для визуализации изображений в новом формате, так и для подготовки их для публикации. А пока довольно трудно найти PNG-изображения где-нибудь в Интернете, несмотря на недавнее включение поддержки этого формата как в Netscape Navigator, так и в Microsoft Internet Explorer.
И хотя их последние версии и поддерживают PNG, они делают это весьма ограниченным способом. В настоящее время единственным решением для пользователей, которые хотят видеть полноценный PNG-файл, является самостоятельная установка внешнего модуля (подобного PNG Live).
Видимо, разработчики медлят, дожидаясь полного перехода пользователей к новым форматам. Что ж, здоровый консерватизм никогда не помешает, но все же мы настоятельно рекомендуем вам постепенно переходить к PNG, заменяя им, по крайней мере, все существующие применения GIF-формата.
Векторное представление
И JPEG, и GIF, и PNG - растровые форматы, основанные на дискретном (пиксельном, или точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Векторная графика обеспечивает значительные преимущества по сравнению с растром, особенно когда речь идет о схемах, тексте и промышленной графике (а экономичность форматов имеет огромное значение для Интернета).
Итак, первое преимущество - это значительно меньший размер векторных изображений по сравнению с точечными рисунками, потому что описывается не каждый отдельный пиксел изображения, а вся фигура целиком (например, для задания окружности необходимо передать 3-4 числа: радиус, координаты центра и, может быть, тип или толщину линии и ее атрибуты). Математические формулы, которые описывают векторное представление, занимают намного меньше места, чем индивидуальные пикселы и их атрибуты.
Другое немаловажное преимущество векторного представления - способность практически неограниченного масштабирования изображения (или детализации его частей) без каких-либо потерь в разрешающей способности или ясности изображения. Для адаптации векторного представления к той или другой палитре, платформе, оборудованию или особенностям дизайна не требуется никаких усилий; а согласование схемы сжатия и качества отображения проходит без каких-либо проблем.
Однако не всякое растровое изображение можно перевести в векторную форму (например, плохо поддаются векторизации фотографии, отсканированные картинки или растровые рисунки). Но специально подготовленные векторные рисунки (типа штриховой графики, пиктограмм, технических иллюстраций, карт, информационной графики и других, являющихся исторически векторными) просто глупо переводить в растровую форму для публикации в Интернете, что повсеместно происходит сегодня.
Проблемы с отображением векторной графики во всемирной Сети возникли оттого, что не было никакого другого способа отображения, кроме растрового, а появившийся было встраиваемый модуль для показа файлов в PDF-формате не обеспечивал должной гибкости работы и требовал хранения всего контента в одной форме - PDF.
Для обеспечения возможности органично встраивать векторную графику в традиционный HTML-формат без какого бы то ни было дополнительного программного обеспечения в настоящее время на рассмотрении комитета по стандартам W3C находятся два новых векторных стандарта: PGML (Precision Graphics Mark-up Language) и VML (Vector Mark-up Language). PGML поддерживается фирмами Adobe Systems, IBM, Netscape и Sun Microsystems, а VML - Microsoft, Hewlett-Packard, Autodesk, Macromedia и Visio. Оба стандарта основаны на расширениях языка разметки XML, пропагандируемого для применения в сети как преемника HTML и рекомендованного W3C к использованию в будущем.
Но в настоящее время ни один из браузеров не поддерживает никаких стандартов векторной графики, хотя дополнительные модули (Plug-ins) уже имеются. Среди наиболее популярных способов показа статических векторных изображений на Web сегодня можно выделить принадлежащий фирме Macromedia формат SWF (Shockwave Flash) и недооцененный пока формат Xara Flare.
Flare - хорошее решение, допускающее включение векторных изображений, которые позволяют практически неограниченно увеличивать уровень детализации страницы, при этом их размеры сравнимы с Shockwave Flash. Нельзя сказать, что применение дополнительных модулей для просмотра изображений так уж неудобно, но когда вы будете использовать подобные средства на ваших страницах, не забудьте предупредить об этом пользователя и дать ему возможность загрузить соответствующий модуль, прежде чем он перейдет к той странице, которая будет включать эти элементы. В ближайшей перспективе это, конечно, замедлит процесс просмотра для новых пользователей, но постепенно вы приобретете все больше приверженцев, пока соответствующие средства наконец не будут включены в очередную версию браузера и дополнительный модуль новичкам уже не понадобится.
Анимация, интерактивность и взаимодействие
Вообще говоря, и GIF-изображения можно оформить в виде специального стека в одном файле, и полученный «фильм» (flipbook) воспроизвести можно, создав простую растровую анимацию. И Netscape и Microsoft обеспечили поддержку «оживляемого» GIF-формата, начиная еще с третьих версий своих браузеров, так что их присутствия на Web теперь трудно избежать. Многочисленные GIF-аниматоры, позволяющие формировать подобные GIF-стеки, широко распространены (причем как коммерческие, так и общедоступные). Однако «оживление» GIF-формата может привести к неуправляемым размерам файлов, ибо каждый «уровень» такого стека - это индивидуальное GIF-изображение, так что типичные 15 кадров в секунду для компьютерной анимации могут «наплодить» несчетное число килобайтов.
В комбинации с Java или JavaScript можно создавать и интерактивную анимацию, которая будет реагировать на пользователя.
А теперь рассмотрим другие решения для Web-анимации и интерактивного взаимодействия с пользователем, причем основную роль здесь продолжает играть фирма Macromedia, давно вышедшая на рынок со своими программами Shockwave и Flash и непрерывно улучшающая свои изделия, повышая их эффективность в соответствии с запросами пользователей и проектировщиков.
Первоначально созданный как формат для Macromedia Director, Shockwave - это семейство протоколов, нацеленных прежде всего на производство интерактивного и графического содержания, создаваемого специально для использования в сети Интернет. А Shockwave Flash - это вообще уникальный инструмент и один из самых лучших способов для создания анимации и публикации ее на Web-странице. Shockwave Flash образует совсем маленькие файлы (так как использует преимущественно векторный формат представления) и по сравнению с другими форматами наиболее удобен с точки зрения подготовки.
При публикации такой анимации на ваших страницах не забудьте уведомить об этом пользователя, чтобы он заранее запасся дополнительным модулем и приготовился к томительному ожиданию загрузки. Однако последние версии - и Netscape Navigator, и Internet Explorer имеют модули просмотра для Flash-анимаций даже в базовой поставке. Фирма Netscape подтвердила, что последующие версии Navigator будут иметь такую поддержку для Flash даже на уровне кода.
Окончательное решение за вами
Итак, изменяется отношение к представлению Web-контента, появляются новые форматы данных и поддерживающие их средства разработки. Однако старые форматы (для представления графики - это GIF и JPEG) все еще достаточно популярны. Они поддерживаются практически всеми браузерами, и большинство разработчиков имеют большой опыт работы именно с ними. Важно использовать правильный формат для конкретных целей, чтобы гарантировать равновесие между качеством изображения и размерами файлов. Например, одно изображение в формате GIF может занимать больший объем и давать более низкий качественный результат, чем в формате JPEG, а для другого все будет наоборот.
Однако при представлении растровых изображений более предпочтительным становится PNG, а если вы пойдете еще дальше и попытаетесь использовать векторное изображение, то уже сегодня к вашим услугам - формат Shockwave Flash фирмы Macromedia.
Формат SWF (Shockwave Flash) - это не общеупотребительный, а внутренний векторный формат программы Flash фирмы Macromedia (см. «Уроки Macromedia Flash» на CD-ROM), поэтому для того, чтобы получить собственное изображение или анимацию, вам придется приобрести соответствующий мультимедийный пакет от фирмы Macromedia, а пользователю необходимо будет поставить дополнительный модуль для визуализации результата. Таким образом, для того чтобы просто поместить векторный рисунок на вашу Web-страницу, вам придется преодолеть целый ряд неудобств.
Тем не менее на подходе и другие векторные форматы, которые в скором времени станут стандартными.
КомпьютерПресс 5"1999
Как говорилось, HTML на сегодняшний день является основой для написания любой веб страницы во Всемирной паутине. При использовании CSS создание кода на языке HTML коренным образом меняется. Можно попрощаться с перепрофилированием неуклюжих HTML тегов просто для того, чтобы добиться тех или иных визуальных эффектов. О некоторых HTML тегов или атрибутах, таких как, например, устаревший тег …
Главная
Закажите сайт и займитесь бизнесом!
Данную фразу можно услышать и увидеть на многих сайтах, а это ведь не зря!
Сайт — это лицо компании. И он является самым современным и эффективным каналом коммуникации с потенциальным потребителем. Только возможности интернет сайта позволяют в полной мере использовать все способы донесения информационного сообщения до пользователя. Текст, аудио и видео информация могут быть поданы в рамках одного сайта для ознакомления потребителя с ними.
С помощью программного обеспечения сайта можно принимать платежи, разговаривать по телефону, вести базы данных, отправлять и получать факсы, обмениваться SMS сообщениями и совершать многие другие действия. Современный интернет сайт – это информационный центр не только любой компании, но и любого пользователя интернета.
И это беспроигрышный способ эффективного и вместе с тем простого и наглядного донесения своих идей или разработок до широчайшей аудитории. И на сегодняшний день Web-документы, написанные на языке гипертекстовой разметки HTML, продолжают оставаться основной формой представления данных в Web среде.
Важнейшими достоинствами HTML являются:
- простота, позволяющая изучить HTML в кротчайшие сроки.
- возможность создания собственных Web страниц
- и HTML работает абсолютно одинаково на всех существующих сегодня платформах, покупать дополнительного оборудования не надо. И достаточно воспользоваться любым доступным текстовым редактором, например Блокнот.
В этом сайте, я постаралась детально описать весь процесс создания собственного Web сайта, а именно публикации готового проекта в Internet с целью предоставления доступа к нему всем пользователям.
Надеюсь многим мои статьи будут очень полезны, ведь сама я не программист, но меня очень вдохновляет эта работа.
Цвета в таблице
Как построить на странице таблицу
Списки в списках
Списки определений
Нумерованный список
Маркированный список
Как создать на странице список
Существует три основных типа списков: маркированные, нумерованные и списки определений. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Наиболее часто используется ненумерованный, или маркированный список. Маркированный список задается тегами , а пункты списка между этими тегами - с помощью тега
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы.
Нумерованный список задается с помощью тегов . Как и в маркированном списке, каждый пункт задается тегом
- ключевое слово TAPE.
- . Тег
- задает отдельный элемент, то есть определяемый термин, а тег
- - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Задается список определений так же, как и другие списки. Единственное отличие - для каждого элемента требуется два тега.
Одно из замечательных свойств списков - это возможность вкладывать их друг в друга. Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов HTML. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега . Вкладывать друг в друга можно даже различные типы списков.
Воспроизведите все вышеперечисленные списки
У списков есть один недостаток - они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам.
Для задания таблиц используется целый ряд тегов. Теги
и
обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация. В таблице приведено полное описание тегов таблиц.Теги HTML для построения таблиц:
Теги Описание
и Эти теги охватывают таблицу. Тег
сообщает браузерам, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER.
и Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги
и .и Теги отображают текст заголовками строки или столбца немного более крупным полужирным шрифтом.и Теги определяют каждую строку таблицы. Тег необязателен, но он делает Ваш HTML-код более полным и понятным.и Эта пара тегов отделяет текст каждой ячейки таблицы.Создайте файл, в котором постройте таблицу из пяти строк и пяти столбцов.
Существует ряд тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег
следующим образов:
Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:
BORDERCOLOR Изменят цвет сетки таблицы
BORDERCOLORDARK/ Используется для изменения сетки с
BORDERCOLORLIGHT дополнительным эффектом трехмерности
Измените цвет сетки таблицы с эффектом трехмерности .
Урок 12-13. Использование графики
Рисунки и графика очень важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст.
Чтобы поместить изображение на Web-странице, нужно знать, как применять тег
. Введите тег
и ключевое слово SRC= для указания, какую графику загрузить.
Вводя этот тег, обратите внимание, что файл должен находиться в той же папке, что и Ваш HTML-файл.
В этом уроке рассматривается, как украсить веб-страницу путем добавления к ней графических изображений. Мы познакомимся с самыми распространенными форматами изображений, узнаем с помощью какого тега осуществляется добавление картинок на страницу, разберемся с альтернативными надписями и выравниванием текста и графики. Также ознакомимся с основными атрибутами изображений и научимся настраивать ширину и высоту картинки. Далее несколько слов об использовании изображений в качестве ссылок и о том, что такое миниатюры изображений. В заключение приведены несколько общих советов по использованию графики на веб-странице.
Добавление изображений на веб-страницу
Если на веб-странице не будет ничего, кроме текстовой информации, она, возможно, и покажется кому-то интересной, благодаря представленным на ней сведениям, однако вряд ли у кого то повернется язык назвать ее привлекательной. Добавлять изображения на веб-страницу очень легко. Для добавления же графики, которая сможет придать странице профессиональный вид, требуются некоторые знания. Чему, собственно и посвящен сегодняшний урок.Двумя наиболее часто применяемыми в Интернете графическими форматами являются GIF и JPEG. Формат, разработанный группой JPEG (Joint Photographic Experts Group — Объединенная группа экспертов по машинной обработке фотографических изображений) и получивший ее название, используется, как правило, для сохранения изображений с плавными цветовыми переходами, таких, например, как фотоснимки.
Практически все другие графические элементы сохраняются в формате GIF (Graphics Interchange Format) — формат обмена графическими данными. В настоящее время появился еще один новый графический формат, приобретающий все большую популярность: PNG (Portable Network Graphics — переносимая сетевая графика). Ожидается, что со временем он заменит собой формат GIF. Однако не спешите пересохранять все свои графические файлы в этом формате, пока еще он поддерживается далеко не всеми браузерами.
Все изображения добавляются на веб-страницу с помощью одного и того же тега, называемого тегом источника изображения
. Наверное, сейчас уже вы сами можете определить, что данная запись состоит из собственно тега , его атрибута (scr) и значения данного атрибута (место расположения). Однако, поскольку применение атрибута scr является обязательным, удобнее говорить об этой записи как об одном общем теге. Вероятно, вы обратили также внимание, что для тега источника изображения не предусмотрен соответствующий закрывающий тeг. Это отдельный самодостаточный тeг, и потому не забывайте добавлять в его конце закрывающую косую черту:
.
#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Первые изображения е> Этот рисунок добавлен на мою первую веб-страницу.р>
Добавление альтернативных надписей
Путешествуя по Интернету, вы, наверное, не раз замечали различные надписи, отображаемые при наведении указателя мыши на какой-нибудь графический элемент веб-страницы. Эти надписи обычно сообщают какую-то дополнительную информацию о самом изображении или о той области страницы, которую оно занимает.
На примере представленного далее НТМL кода показано, как атрибут alt добавляется внутрь тега
. Подобно атрибуту src, атрибут alt сообщает веб-браузеру некоторую дополнительную информацию об изображении, и его также всегда можно использовать вместе с тeгом
.
Атрибут alt определяет для добавленного на веб-страницу графического элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению. Атрибут alt имеет еще одно очень важное назначение. Многие посетители интернета, использующие каналы доступа с низкой скоростью передачи данных, могут давать указание своим браузерам не загружать и не отображать графическую информацию. Это позволяет им ускорить загрузку веб-страниц на свои компьютеры.
Кроме того, помните, что не все браузеры способны отображать в своих окнах графику. Например, браузер Lynx вообще не поддерживает такой возможности. Таким образом, атрибут alt позволяет веб-дизайнеру быть уверенным в том, что, если посетитель его веб-страницы не увидит на своем экране изображения, он по крайней мере сможет ознакомиться с добавленной к этому изображению текстовой информацией.
Хотя атрибут alt можно определять для каждого тега
, следите за тем, чтобы не назначить некоторым графическим элементам несоответствующие им текстовые сообщения. Например, не имеет смысла добавлять альтернативные текстовые надписи к различным элементам внешнего оформления веб-страницы. Чтобы избежать подобных ошибок, можете присваивать атрибуту alt таких элементов пустое значение (alt=» »). Если не задавать значения никаких других атрибутов, браузер воспроизведет изображение в егo исходном размере, выровняв верхний край изображения с верхним краем расположенной рядом текстовой строки. Вы можете изменить оба эти параметра, воспользовавшись тегами стилевых таблиц.
Атрибуты изображения
Для тегапредусмотрены атрибуты, позволяющие изменять размер изображения. Некоторые из этих атрибутов перечислены ниже.
height — Указывается в пикселях или процентах — Определяет высоту изображения
width — Указывается в пикселях или процентах — Определяет ширину изображения.Настройка высоты и ширины изображения
Размеры размещаемого на веб-странице изображения могyт быть заданы с помощью атрибутов height и width. 3начения этих атрибутов задаются либо как фиксированные количества пикселей, либо в процентном выражении относительно размеров страницы. Взгляните на представленный далее код HTML. В первом тегe размеры исходного изображения, которое вы уже видели на предыдущих рисунках этого урока, устанавливаются равными 60 пикселям по вертикали и 60 пикселям по горизонтали. Во втором тегe ширина того же изображения устанавливается равной 6% от ширины страницы, а высота — 10% относительно высоты страницы. На рисунке показано, как оба эти изображения выглядят в окне браузера.
Воспроизводя изображение в своем окне, браузер одинаково хорошо справляется с обработкой значений, заданных как в пикселях, так и в процентах, Помните, однако, о том, что на компьютерах посетителей вашей веб-страницы может быть задано экранное разрешение, отличное от того, которое установлено для вашего монитора. Что из этого следует? Например для монитора задано разрешение 800х600. В предыдущем примере для добавляемого на веб-страницу рисунка была задана ширина на уровне 6% от ширины страницы, которая при таком разрешении составит 48 пикселей. Если просматривать то же изображение на мониторе с разрешением 1024х800, указанным 6% от ширины страницы будет соответствовать уже ширина, равная 61 пикселю.
Изменяя размеры изображения, не забудьте задать оба значения соответствующие его высоте и ширине. Если изменить только одно из этих значений, на экране само изображение окажется растянутым по вертикали или горизонтали. Альтернативный вариант состоит в настройке размеров изображения средствами графического редактора.
Вы можете создать иллюзию более быстрой загрузки изображения. Независимо от того, изменены размеры изображения или нет, вceгда указывайте значения атрибутов height и width, так как они сообщат браузеру важные сведения о том, сколько места должно быть выделено на странице для размещения данного рисунка. В таком случае браузер сможет обозначить требуемое для изображения пространство и продолжить построение других элементов страницы, не прекращая загрузки самого изображения. Таким способом создается впечатление, будто страница загружается быстрее, поскольку ее посетителям не придется ждать полной загрузки изображения, чтобы увидеть наконец другую представленную на странице информацию.
Если действительно необходимо, чтобы изображение занимало точно определенное пространство по ширине страницы, используйте процентные значения. В таком случае на экране любого монитора изображение будет занимать ту же часть страницы, что и на вашем экране. Если необходимо, чтобы постоянным оставалось разрешение самого рисунка (его размер в пикселях), используйте значения, выраженные в пикселях.
Выравнивание текста и графики
Атрибут align тегапозволяет выравнивать изображение по правому (значение right) или левому (значение left) краю текстовой строки. Примеры использования этого атрибута показаны на рисунке.
Этот же атрибут может при меняться и для выравнивания изображения по вертикали (опять-таки относительно текстовой строки). Он может принимать три других значения top, bottom и center. Если атрибуту align присвоено значение top, верхний край изображения выравнивается по верхнему краю любого окружающего его текста. Если атрибуту align присвоено значение bottom, нижний край изображения выравнивается по нижнему краю окружающего его текста. Если же атрибуту align присвоено значение center, центр изображения выравнивается по центру текстовой строки.
Использование изображений в качестве ссылок
а>
Изображения хороши не только для оформления веб-страницы. Их с успехом можно использовать в качестве гиперссылок на другие документы. В HTML данная задача решается просто, поскольку изображения превращаются в гиперссылки точно тем же способом, что и надписи. Для этого необходимо также применить тeг, заключив в него элемент веб-страницы, который должен стать ссылкой на другой документ. Таким образом, если переход по гиперссылке должен осуществляться после щелчка на каком то изображении, в тeг необходимо заключить тeг данного изображения.В данном случае, после того, как посетитель веб-страницы наведет указатель мыши на это изображение, рядом с курсором отобразится текстовое сообщение «Это мой автопортрет!». После щелчка на изображении будет открыт документ DOС2.htm, на который указывает гиперссылка.
Миниатюры изображений
а>
Другим распространенным способом применения имеющейся в HTML возможности создания гиперссылок является использование одних изображений для перехода к другим. Для чего это необходимо? Дело в том, что довольно часто размер изображений, которые вы хотите опубликовать на веб-странице, слишком велик, и нет никакой уверенности, что у посетителей хватит терпения дожидаться окончания их загрузки. В таких случаях создают уменьшенную копию исходного изображения, называемую миниатюрой, с загрузкой которой браузер справится гораздо быстрее. Если посетитель заинтересуется изображением и захочет загрузить его полноценную копию, ему достаточно будет щелкнуть на данной миниатюре. Вот как выглядят соответствующие коды HTML.Как видите, щелчок на изображении миниатюра.jpg сопровождается открытием файла другого изображения (изображение.jpg). Текстовая строка, заданная как значение атрибута alt, сообщает посетителю, как открыть основное изображение.
Секреты успешного использования изображений
Изображения интересны и привлекательны, несут в себе массу наглядной информации и их очень просто добавлять на веб-страницы, однако все же следует придерживаться некоторых перечисленных далее правил, если вы действительно хотите создать сайт, который станет популярным среди пользователей Интернета.Чем больше размеры файла изображения, тем больше времени потребуется для его загрузки на компьютер пользователя. Поскольку большинство посетителей Интернета для доступа к сети по-прежнему используют каналы связи с низкой пропускной способностью, размеры загружаемых файлов все еще имеют для них принципиальное значение. Обязательно учитывайте данное обстоятельство и старайтесь размещать на своих веб-страницах изображения как можно меньших размеров.
Важное значение имеют не только размеры файла отдельного изображения, но и общий размер файла всего HTML документа. Чем больше изображений будет добавлено на веб-страницу, пусть даже малых размеров, тем большим будет размер файла финального документа. Выполните предварительный просмотр своей страницы в разных браузерах и оцените, какое время потребуется каждому браузеру на ее загрузку.
Поскольку атрибут alt имеет столь важное значение (ведь его рекомендуется определять для каждого тега
, будьте внимательны при его использовании. Следите за тем, чтобы содержание текстового сообщения всегда соответствовало самому изображению, иначе посетители вашей страницы могут быть введены в заблуждение. Это же замечание применимо и в обратном направлении: следите за тем, чтобы изображения соответствовали представленной на веб-странице текстовой информации. Фотоснимок самолета будет уместен на сайте, посвященном авиаперевозкам, и совершенно лишним на сайте, рассказывающем о дикой природе.
В интернете вы можете найти множество интересных изображений и с легкостью сохранить их на своем компьютере. Однако многие из этих изображений защищены авторскими правами. Если вы нашли какое то понравившееся вам изображение на коммерческом сайте, посмотрите, нет ли там же каких то сообщений об авторских правах и доступно ли это изображение для свободного использования.
Если представленное на веб-странице изображение не защищено авторскими правами, вы можете скопировать его в память cвoeгo компьютера. Для этогo достаточно просто щелкнуть на этом изображении правой кнопкой мыши и выбрать в открывшемся меню команду Сохранить изображение как. Сохранив изображение на своем компьютере, вы можете использовать его далее подобно любому другому рисунку.
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу . У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге img и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег img . Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег «img», стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
1. Формат JPEG (Joint Photographic Experts Group ). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
2. Формат GIF (Graphics Interchange Format ). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
3. Формат PNG (Portable Network Graphics ). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
- GIF используется в основном для анимации;
- PNG — формат для всего остального (иконки, кнопки и др.).
JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег img . Браузер помещает изображение в том месте веб-страницы, где встретит тег img.
Код вставки картинки в html страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .
Приведу еще несколько примеров указания адреса файла с изображением:
этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег img является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега «Р» — абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега «img».
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:
В обоих атрибутах указывается размер в пикселях . Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег AUDIO . Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут autoplay . Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls , браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости.
TAPE=1 – Стандартная нумерация(1,2,3,4,5, …)
TAPE=A – Прописные буквы(A, B, C, D, …)
TAPE=a – Срочные буквы(a, b, c, d, …)
TAPE=I – Римские цифры(I, II, III, IV, …)
TAPE=i – Строчные римские цифры(i, ii, iii, iv, …)
Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег