IMG width как использовать атрибут


Оглавление (нажмите, чтобы открыть):

IMG width: как использовать атрибут

Несмотря на то, что HTML — это язык разметки текста , редкий сайт обходится без картинок, а на некоторых их даже слишком много!

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

Анатомия IMG

Начнем с формального описания этой зловредной конструкции.

Тег IMG одиночный, парного тега IMG > не существует, следовательно, вся информация об источнике изображения, представлении, расположении и чувствительности картинки на экране задается атрибутами. В полном списке атрибутов я насчитал более 50 наименований! Чтобы справиться с такой оравой, условно разделяю их на 5 групп:

  • обязательные
  • полезные
  • дополнительные
  • стилевые
  • событийные

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

  • IE — работает в браузере Microsoft
  • NN — работает в браузере Netscape

Цифра, сопровождающая пометку, означает версию браузера.

Обязательные атрибуты


атрибут описание
Значение этого атрибута — URL (адрес) файла-изображения. Например, запись указывает браузеру, что файл следует искать в текущем каталоге (то есть, там, где расположена страничка, содержащая этот IMG ).

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

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

В NN-3 и NN-4 alt -текст не записывается на экран, если картинки нет в каталоге.

В NN-6 alt -текст не показывается при наезде на картинку мышиным курсором. Подсказка появляется, если она задана атрибутом title . Если картинки в каталоге нет, записывает на экран, рисуя при этом рамку изображения только на время загрузки изображения.

Пример Атрибут задает толщину прямоугольной рамки, которая окружает изображение. Чаще всего используют нулевое значение: border=0 .

Полезные атрибуты


атрибут описание
Атрибут управляет выравниванием изображения. Список ключевых слов приводится ниже.

1) Выравнивание по вертикали относительно текста.

top Верх картинки выровнен относительно верха текущей строки.
texttop Практически то же, что top, но работает не во всех браузерах.
middle Центр картинки выровнен относительно базовой линии строки (линия, на которой стоят буквы, опуская хвостики за нее вниз). В выравнивание происходит относительно середины текста текущей строки.
absmiddle Центр картинки выровнен относительно середины текста текущей строки. Работает, как описано только в В работает подобно значению middle .
bottom Низ картинки выровнен по базовой линии строки.
baseline Практически то же, что bottom , но работает не во всех браузерах.
absbottom Низ картинки выровнен по нижнему краю самого глубокого символа (хвостика). Работает, как описано только в и В работает подобно значению bottom .

2) Перемещение изображения к текущему левому или правому краю.

left Картинка выравнивается по левому краю, а текст обтекает картинку справа.
right Картинка выравнивается по правому краю, а текст обтекает картинку слева.

Пример Эти атрибуты определяют свободное пространство слева и справа ( hspace ), над и под ( vspace ) картинкой.

Пример Снабжает тег примечаниями. Работает в и Если в IMG одновременно заданы alt и title , то браузеры и в качестве выпадающей подсказки используют значение атрибута title , а если картинка не загружена, то на ее место пишут на экран содержимое alt (при этом не рисует рамку для картинки).

Дополнительные атрибуты


атрибутописание
Значение этого атрибута — URL (адрес) файла-изображения, которое загружается на страницу в первую очередь. Обычно это изображение существенно меньше по килобайтному размеру основной картинки и представляет собой вариант основной картинки с меньшим разрешением или черно-белую копию. После того, как основное изображение загружено, оно заменяет на экране картинку, заданную атрибутом lowsrc . При этом размеры, заданные атрибутами height и width , относятся к обоим картинкам одновременно. Работает только в NN. Не рекомендуется к использованию. Для больших изображений лучше применять чересстрочную развертку.
Атрибут задает язык текста alt и title . Примеры ключевых слов для lang :

  • fr — французский
  • de — немецкий
  • it — итальянский
  • nl — голландский
  • el — греческий
  • es — испанский
  • pt — португальский
  • ar — арабский
  • he — иврит
  • ru — русский
  • zh — китайский
  • ja — японский
  • hi — хинди
  • ur — урду
  • sa — санскрит

Информация о языке может быть полезна:

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

Задает направление вывода текста для атрибутов alt и title. Возможные ключи:

  • ltr — слева направо (по умолчанию)
  • rtl — справа налево

Задание значения rtl не означает, что браузер будет “переворачивать” надпись, но он будет знать, что текст написан справа налево (например на иврите). В при использовании ключа rtl не заметно никаких внешних проявлений. В текст с атрибутом dir=rtl выравнивается по умолчанию по правому краю.

ПримерНазначение уникального имени тегу. Может быть использован:

  • как метка стилевого CSS-определения
  • как метка якоря гипертекстовой ссылки
  • как имя тега в скриптах

Пример (хорошо работает в и плохо в ).Назначение имени тегу. Может быть использован в скриптах. Атрибуты id и name имеют одну и ту же область имен.Атрибут задает язык скрипта, если скрипт используется в теге. Возможные значения этого атрибута:

  • javascript — JavaScript (по умолчанию)
  • jscript — JavaScript
  • vbscript — VBScript (только IE)
  • vbs — VBScript (только IE)


ПримерЭти атрибуты используются в IE для показа видео в формате AVI. Атрибут dynsrc заменяет src . Он указывает адрес Атрибут loop задает число циклов воспроизведения видеофайла (ключевое слово infinite или значение -1 заставляет производить показ бесконечно). Атрибут start имеет два ключевых значения:

  • fileopen — воспроизводить файл сразу после загрузки
  • mouseover — воспроизводить файл после того, как мышиный курсор будет расположен над областью просмотра

Присутствие атрибута controls (у него нет значений) приводит к появлению под изображением кнопок управления.

Рекомендации. Не указаны атрибуты w >

Читайте также:

  1. III. .Методические рекомендации по расчетам внешнеторговых цен
  2. III. Методическое обоснование и рекомендации по организации работы по формированию физиологичесого и речевого дыхания у дошкольников с речевой патологией.
  3. VI. Методические рекомендации преподавателю по подготовке и проведению занятия
  4. Аудиторские рекомендации по налоговым декларациям.
  5. Возможные рекомендации по энергосбережению
  6. Возможные рекомендации по энергосбережению
  7. Возможные рекомендации по энергосбережению
  8. Возможные рекомендации по энергосбережению
  9. Гигиенические требования и методические рекомендации к проведению артикуляционной гимнастики.
  10. Давая рекомендации, основанные на полученных результатах, психолог не имеет морального права слагать с себя ответственность за последствия их внедрения в общественную практику.
  11. И рекомендации по электромагнитной совместимости
  12. Исходные рекомендации Совета Европы и ВАДА по компоновке профилактических программ.

Не указаны атрибуты width и height в теге IMG

Рекомендации по выбору цветов для ссылок

Цвет ссылок

Атрибуты link, alink, vlink задают цвета ссылок на странице.

q link— задаёт цвет неотработанных ссылок (пользователь еще не щёлкал по ним);

q alink— задает цвет активных ссылок (цвет ссылки во время загрузки документа);

q vlink— задает цвет отработанных ссылок (пользователь «ходил» по этим ссылкам).

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

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

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

Цвет ссылки, сразу после щелчка, должен быть ещё более активным, чем цвет неотработанной ссылки. Внимание! Я (ссылка) приступила к работе.

В большинстве браузеров цвета ссылок по умолчанию такие:

синий — цвет неотработанной ссылки;
красный — цвет активной ссылки;
пурпурный — цвет отработанной ссылки.

И эти цвета выбраны, конечно, не случайно.

BODYв «чёрном костюме, белой рубашке и строгом галстуке» выглядит так:

Эта запись эквивалентна следующей:

Штрафной балл: 0.1–0.5

За каждую обнаруженную погрешность (один неверный тег IMG) назначается штраф 0.1.

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

Буквальное повторение одной и той же ошибки (одного и того же кода) считать одной погрешностью.

Атрибуты heightи widthзадают размеры прямоугольника, в который браузер выводит картинку. Эти размеры нужно обязательно указывать.

«Зачем?» — думает начинающий дизайнер. — «Неужели браузер такой глупый, что не может прочитать размеры в самом картиночном файле?».

Может. Но только тогда, когда файл уже загружен в компьютер.

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

Вместо картинок на странице рисуются прямоугольники, которые замещаются пришедшими по сети картинками. Если атрибуты heightи widthзаданы, браузер рисует прямоугольники указанных размеров, если нет, то «почтовые марки» — небольшие прямоугольные области.

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

«Удар» по глазам пользователя (рис 7.35):

Рис 7.35. «Удар» по глазам пользователя


Плавный переход (рис 7.36):

Рис 7.36. Плавный переход

Ещё одна неприятность подстерегает пользователя, если картинки, закодированные без атрибутов heightи width,погружены в таблицу. Так как браузер не знает нужных размеров, то рисовать таблицу до прихода картинок он вообще не станет, и пользователь засыпает у чистого экрана.

Вывод прост: нужно всегда записывать атрибуты height, widthи указывать в них реальные размеры картинки:

border=0 alt=Незнайка>

| следующая лекция ==>
Цвет фона и текста | Рекомендации. Неверные значения атрибутов width, height

Дата добавления: 2014-01-14 ; Просмотров: 305 ; Нарушение авторских прав? ;

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

HTML Изображения

Изображение может улучшить дизайн и внешний вид веб-страницы.

Пример

Пример

Пример

HTML Синтаксис изображений

В HTML, изображения определяются тегом .

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

Атрибут src задает URL-адрес (веб-адрес) изображения:

Атрибут alt

Атрибут alt содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src , тогда изображение используется для чтения с экрана).

Значение атрибута alt , должно описывать изображение:

Пример

Если браузер не может найти изображение, он будет отображать значение атрибута alt :

Пример

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.

Размер изображения — ширина и высота

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

Пример

Кроме того, вы можете использовать атрибуты width и height :

Пример

Атрибуты width и height всегда определяют ширину и высоту изображение в пикселях.

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

Ширины и высота, или стили?

Все атрибуты width , height и style являются действительными в HTML5.

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

Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)


Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Про то, какие именно форматы растровой графики (Gif, Png, Jpg) и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта, мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше.

Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображений, посмотрим как задать обтекание фотографии текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять их размер и задавать выравнивание (по центру, влево и вправо).

Использование тега Img и его атрибутов Src, W >

Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом, к которым относятся всего лишь четыре элемента языка гипертекстовой разметки, одни из которых мы уже упомянули, а три остальных — Iframe (современный вариант использования фреймов), Object и Embed (для вставки видео и другого медиа контента).

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

Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src.

Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.

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

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

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

На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).

Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). Сжать фото можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, онлайн фотошопе Пикслр.

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

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

Т.е. Src может содержать, например, следующие записи:

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

И тут следует обратить внимание, что картинка, которую вы вставляете в Html код, может лежать абсолютно на любом сервере. Т.е. вы можете, допустим, скопировать путь до нее на моем блоге и вставить этот путь в атрибут Src тэга Img на своем сайте. Все будет прекрасно работать, правда, если я не запрещу подобные действия в .htaccess на своем сервере, но это уже отдельная песня (погуглите на тему «Защита от хотлинков»).

Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.

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

Как вставить картинку с ссылкой, назначение Alt и Title в Img?

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

В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:

Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt.

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

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

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

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

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

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

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

Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить ранжирование вашего сайта, а так в сервисах поиска по изображениям (картинкам) Яндекса или Google. Однако с этим нужно быть осторожным, ибо довольно легко можно попасть под фильтр за спам от Яндекса или Гугла.

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.


Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах (параграфах P, заголовках H1-H6 и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:

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

Возможно еще одно значение этого атрибута align=»middle»:

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

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится плавающим элементом (аналог Float в CSS) и текст начинает ее обтекать.

Например, при align=»left» мы получим такой результат:

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания. Данную проблему совсем легко решить с помощью CSS свойств padding или margin, но и в чистом Html существует свое решение.

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в пикселах, например:

Background — как сделать фон для сайта в чистом Html

Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, фон для сайта в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в современной верстке с использованием свойств CSS , фоновые картинки (background image) являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.

Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и тегов таблицы Table, показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).

Например, добавив в Body атрибут Background следующего вида:

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

Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor, в качестве значения которого вы может вставить код цвета, например, так:

То получим следующий цвет фона заданный через bgcolor:

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

Как вставить изображение в HTML, тег img и его атрибуты

Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня перейдем к более интересной теме, а именно вставка изображений. Для того, чтобы наш браузер быстро загружал и открывал страницу с картинкой нам нужно ОПТИМИЗИРОВАННОЕ изображение (о том для чего и как оптимизировать изображения читайте тут). Для того, что бы скачать такое заранее оптимизированное изображение перейдите по ссылке и сохраните эту картинку, нажав правой клавишей мыши и выбрав «Сохранить картинку как».

Тег и расположение папки с изображениями

Для хранения изображений мы в нашей папке HTML создадим еще одну папку «Images», и поместим картинку туда.

Давайте попробуем вставить нашу картинку с изображением между заголовком и первым абзацем. Для этого в коде пропишем наш тег . Это сокращение от английского слова image – изображение и это одинарный тег.

Сам тег браузеру ничего особо не говорит. Поэтому мы должны обязательно указать атрибуты для тега. Самый главный из атрибутов – это атрибут src – источник. Мы должны указать источник нашей картинки. В нашем случае картинка находится внутри папки images относительно папки HTML. Т.е. нам необходимо указать, что наша картинка alarm.jpg находится в папке images. И вот как это выглядит.

При таком указании атрибута для тега , браузер при встрече с данным кодом, зайдет в папку images и возьмет файл – картинку alarm.jpg.

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

Атрибуты ширины width и высоты height

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

Чтобы узнать размер картинки, нажмите по ней правой кнопкой мыши и выберите пункт меню «Свойства». Далее перейдите на вкладку «Подробно».

Как видно, ширина у картинки 307 пикселей, а высота – 450 пикселей. Давайте пропишем размеры в коде:

Атрибут alt для альтернативной подписи

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


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

Давайте проверим отображение:

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

Атрибут align для выравнивания изображения

Данный атрибут применим для нашего тега . Для этой картинки мы можем указать выравнивание по правому краю (right), тогда картинка уйдет в правую часть экрана, и текст ее будет обтекать слева. Или мы можем указать выравнивание по левому краю (left) – тогда картинка уйдет в левую часть экрана, и текст будет обтекать ее справа. Давайте пропишем выравнивание по левому краю для нашего тега .

Теперь давайте проверим, что получилось в браузере.

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

Атрибут title для всплывающей подсказки

И наконец также один из самых важных атрибутов — «title» — он делает подсказку для изображения при наведении на него мышкой.

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Помоги проекту — подпишись на наш Яндекс.Дзен канал!

Адаптивные изображения на сайте: создание с помощью атрибута srcset

Дата публикации: 2015-11-24

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

Если вы слышали про адаптивный веб-дизайн (RWD), то, скорее всего, вы знаете про тонкости, с которыми приходится сталкиваться (и то как Bootstrapрешает их!). Важной составляющей адаптивного сайта являются адаптивные изображения. В этой статье мы узнаем, что такое адаптивные изображения на сайте. Рассмотрим создание адаптивных изображений с помощью атрибута srcset.

Что такое адаптивные изображения?

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

Когда вы хотите, чтобы изображение отлично отображалось на экранах разных физических размеров. К примеру, вам надо показать одно и то же изображение на 13.5 дюймовом экране ноутбука и на 5 дюймовом экрана смартфона (окно браузера на весь экран).

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Адаптивные блоки поддерживаются в большинстве современных браузеров, в том числе в Microsoft Edge (начиная с Windows Insider Build 10547). Поддержку свойства srcset в различных браузерах можно посмотреть здесь.

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

Существует масса способов сделать изображения адаптивными. Один из старых способов – с помощью скрипта (не рекомендуется). Но с ним связаны некоторые проблемы. Первая проблема – если изображение загружается через скрипт, но сам скрипт расположен ниже загружаемого изображения, то можно получить два изображения. Вторая проблема – если в разметке не прописано изображение, и оно загружается только через JS, то есть шанс, что изображение вообще не загрузится, если в браузере отключен JS.

Отсюда вытекает то, что нам нужен лучший способ для создания адаптивных изображений. И к счастью, он существует! В этом методе используются атрибуты: srcset, sizes, picture

Атрибут srcset

Перед тем, как я объясню принцип работы атрибута srcset, важно понять несколько терминов:

Соотношение логических и физических пикселей на устройстве

Соотношение логических и физических пикселей это количество пикселей экрана устройства на один пиксель CSS. Тут есть еще два ключевых термина:

Плотность пикселей устройства (число физических пикселей на дюйм): У устройств с большим разрешением будет большая плотность пикселей, а следовательно, на одном уровне масштабирования у такого устройства будет большее соотношение логических пикселей к физическим. К примеру, у смартфона Lumia 950 большее разрешение, чем у бюджетной Lumia 630. Значит, у первой люмии соотношение логических пикселей к физическим выше.

Уровень масштабирования браузера: На одном и том же устройства больший уровень масштабирования означает большее количество физических пикселей на один пиксель CSS, а следовательно, и большее соотношение логических и физических пикселей. К примеру, рассмотрим такую фигуру:

Если приблизить картинку в браузере (Ctrl + Plus), число CSS пикселей для блока DIV не изменится, а вот количество физических пикселей увеличится. Т.е. увеличится число физических пикселей на один CSS пиксель. Если вы хотите отобразить изображение или его часть с помощью метода соотношения логических и физических пикселей, вам понадобится атрибут srcset:

Урок #15: Изучаем изображения в HTML самостоятельно


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

Синтаксис изображений в HTML

Здесь все достаточно просто. Все изображения, картинки в HTML отображаются с помощью одинарного тега img >

Сам по себе он пустой и внутри него содержатся только атрибуты, определяющие картинку и путь до нее, который определен атрибутом src (source — источник картинки).

Атрибут картинки ALT у изображений

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

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

Если браузер пользователя не сможет найти картинку, он возьмет ее описание и покажет:

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

Кроме этого в изображениях html зачастую используются также и эти атрибуты width (ширина) и height (высота), которые задают размеры картинки в пикселях.

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

Использовать атрибуты width и height или все-таки стили CSS?

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

Немного поясню пример выше. В стилях, которые мы применили ко всем изображениям в документе мы задали размер изображения тегу img равное 100%, т.е наша картинка растягивается на всю ширину экрана. При этом, как вы успели заметить, размеры картинки были заданы атрибуты внутри нее в теле веб документа, а именно: width = «128» height = «128»

При этом браузер взял за основу правило, которое задавалось внутри парных тегов style:

А вот уже следующая картинка не подверглась этим изменениям. А почему, спросите вы? А потому что по принципу приоритета внутри картинки в теле веб документа мы задали отдельный стиль: style = «width:128px;height:128px;» Таким образом, стили, которые заключены между парными тегами style на картинку «не подействуют», потому что внутри нее заданы свои стили. Думаю, что понятно объяснил.

Изображения, хранящиеся в других директориях/папках

Если путь не задан, то браузер будет искать наше изображение в той же папке, где находится наш веб документ. Однако принято хранить все картинки и медиафайлы в специальной папке с названием или images или img.

Чтобы браузер правильно и корректно отобразил вашу картинку до нее нужно указать правильный путь (т.е src).

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

Изображения на стороннем сервере

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

Анимированные изображения

Благодаря HTML вы можете добавлять анимированные картинки или gif анимацию.

Изображения в HTML как ссылка на документ

В предыдущем уроке мы рассказывали про текстовые ссылки и вскользь упомянули о том, что изображения можно также задавать ссылкой на любой другой веб документ. Для этого нашу картинку с тегом img нужно поместить внутри тега a > img src = «url here» / > / a >

Примечание: Для того, чтобы не появлялась граница (рамка) вокруг изображения, когда оно будет являться ссылкой, просто добавьте в стилях значение border : 0 ; для браузеров IE 9 (и ранние версии).

Обтекание изображения

Используя в CSS свойство float , можно добиться обтекание картинки текстом справа или слева:

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

Image Maps или карта изображения

Есть такой тег в html и называется он map > . Его миссия в интернете, а конкретно для картинок — выделить нужную область изображения по координатам. Карта изображения — это некоторая выделенная интерактивная область. В примере ниже мы выделили область компьютера, чашки с кофе и телефоном:

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

Атрибут name тега map > связан с атрибутом usemap img > и создает связь между изображением и картой. Внутри него содержится несколько тегов area , которые определяют области, на которые можно навести курсом мышки и покликать.

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


Фоновое изображение

При создании сайтов очень часто картинка может быть использована как фон (подложка). Чтобы сделать фоновое изображение вам необходимо прописать в стилях CSS следующее свойство под названием background — image :

Его мы задаем для элемента body

Получим такой результат:

Немного поясню, наша картинка в заданном размере просто замостила всю площадь веб-страницы.

А теперь еще один пример: зададим фоновое изображение для тега p (параграф)

Вот, что получим:

Элемент

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

Элемент picture > содержит внутри себя несколько элементов source > , каждый из которых ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое наилучшим образом соответствует текущему виду и / или устройству.

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

Браузер будет использовать первый элемент source > с соответствующими значениями атрибутов и игнорировать следующие элементы source > .

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

По умолчанию у нас отображается обычная картинка в теге img

А теперь начнем уменьшать наш размер экрана до планшетного состояния и получим первую картинку:

Затем продолжаем уменьшать размер экрана до мобильного формата и уже получаем другое изображение:

Примечание. Всегда указывайте элемент img > в качестве последнего дочернего элемента picture > . Элемент img > используется браузерами, которые не поддерживают элемент picture > , или если ни один из тегов source > не был сопоставлен.

Читатели HTML экрана

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

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

[Перевод] HTML5 Адаптивные изображения

Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением. Для решения этой проблемы было создано множество хаков.

Я был расстроен тем фактом что до сих пор нет спецификации адаптивных изображений. В ноябре 2011-го я предложил тег picture. Данный элемент использует механизм тега video в паре с Media Queries:

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

Тем не менее, в январе, редактор HTML5, Ян Хиксон (Ian Hickson), написал:

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

Позже Эдвард О’Коннор (Edward O’Connor) из Apple предложил другой метод, использовать атрибут srcset для элемента img. Это дополняет аналогичное предложение нового CSS свойства image-set, которое уже добавлено в WebKit:

srcset=»foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x»
alt=»decent alt text for foo.»>

Значения «2х» и «6.5х» сообщают браузеру относительное разрешение; foo-hires.jpg в 2 раза больше оригинального изображения, а foo-superduperhires.jpg в 6.5 раз. Через пару дней это предложение было добавлено в спецификацию.

Между предложенным элементом picture и атрибутом srcset есть два основных различия. Самым очевидным является то, что атрибут srcset используется в элементе img, который изначально предназначен для изображений. И это замечательно.

Второе различие в том, что использование атрибута srcset не предусматривает Media Queries. Хотя с помощью Media Queries возможно устанавливать параметры для любого разрешения, ориентации устройтсва, dpi, глубины цвета и соотношения сторон. С другой стороны, задавать Media Queries для каждого варианта изображения может привести к увеличению кода в несколько раз.

Почему я предлагаю коэффициент масштабирования, а не Media Queries? Media Queries работают за счет данных User Agent’а, мы же обсуждаем взаимоотношения между разными вариантами изображений. Так же, User Agent должен иметь возможность свободно выбирать вариант изображения которое лучше всего подходит для текущего состояния, учитывая не только параметры заданные с помощью Media Queries, но и размеры заданные элементу img с помощью CSS, а может даже и текущую величину масштабирования страницы.

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

Предложенный атрибут srcset имеет два недостатка. Первый очень субъективный, но многие со мной согласятся: спецификация, какой она является сейчас имеет ужасный синтаксис:

srcset=»face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h»>


Конечно же это может быть и должно быть исправлено. Дело не только в эстетике кода. Если синтаксис слишком запутан, то он будет использоваться не верно.

Вторая проблем состоит в том, что разработчики не желают лишится возможности управления процессом. Это вопрос потери доносимого смысла визуального контента (читайте абзац «Do I care about art direction?») и многие убеждены что Apple не подумали об этом. Хотя сторонники srcset придерживаются противоположного мнения.

HTML :: Вставка изображений в документ

Тег и его атрибут src

Для того, чтобы вставить изображение в документ используется элемент ‘img’ (от англ. image – рисунок, изображение), формирующийся одиночным тегом , и его атрибут src , который в качестве значения принимает полный или относительный адресный путь к файлу изображения. Браузерами ‘img’ отображается, как строчный элемент.

Атрибут alt тега

Для случаев, когда загрузка изображений в браузере отключена либо не завершилась, предусмотрен атрибут alt (от англ. alternative), который устанавливает альтернативный текст изображения. При загрузке страницы сперва отображается альтернативный текст, а уже потом, в случае успешной загрузки, само изображение. Следует практически всегда задавать атрибут alt , так как грамотно составленное содержание атрибута (т.е. его значение), кроме всего, позволяет еще и продвинуть страницу в поисковых системах.

Атрибуты width и height тега

В отличие от многих других элементов разметки для элемента ‘img’ в HTML 5 сохранились атрибуты height и width , которые задают, соответственно, высоту и ширину изображения. Кстати, если указать размеры изображения меньше, чем они есть на самом деле, то размер самого файла при этом меньше не станет. Так что это никак не повлияет на скорость загрузки изображения.

Рассмотрим вставку изображений в документ на примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

Пример №1. Использование элемента ‘img’

Рис. №2. Отображение страницы с использованием элемента ‘img’ браузером

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

Ширина/высота изображения как атрибут или CSS?

Какой «правильный» семантический способ указать высоту и ширину изображения? В CSS.

CSS кажется правильным местом для размещения визуальной информации. С другой стороны, немногие утверждают, что образ «src» не должен указываться как атрибут, а высота/ширина как бы привязаны к данным двоичного изображения, так как это «src».

(Да, я понимаю с технической точки зрения, это не имеет значения.)

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

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

Я думаю, это зависит от того, как вы используете этот атрибут. Если вы создаете несколько изображений в списке или таблице, чтобы они правильно раскладывались, тогда установите ширину/высоту в свой CSS, чтобы избежать необходимости добавлять еще один набор тегов к каждому изображению в списке. Используйте что-то вроде

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

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

Основная полезная причина — предотвращение эффекта «поп». Когда браузер загружает страницу, иногда более крупные аспекты, такие как img, занимают больше времени для загрузки, и если вы не указали w и h в HTML, браузер временно разрушит эту область, думая, что ее нет. Затем, когда он, наконец, загружает все, попадает в нужное место.

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

Я бы сказал, CSS.

HTML о содержании,
CSS — это презентация.

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

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

Следует ли указывать в html или css наилучшие оценки по индивидуальным обстоятельствам. Большое количество изображений такого же размера, вероятно, лучше всего будет использоваться с css, одним изображением с html. Тем не менее, если вы указываете другие стили для изображения (цвет рамки, стиль или радиус, float и т.д.), Было бы целесообразно добавить ширину и высоту к css.

Если вы укажете в html, вы можете использовать только пиксели. Если вы хотите указать в процентах от опроса, вам нужно будет использовать css.

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

Я бы сказал HTML.

Атрибуты width и height используются, чтобы остановить загрузку страницы и разрастаться разрозненным образом.

Если вы когда-либо читали блок текста на странице только для того, чтобы его оттолкнули вниз, благодаря позднему загрузочному изображению выше, вы знаете, как это расстраивает! Добавление идентификатора к каждому изображению только для указания его ширины и высоты было бы смехотворным и почти таким же грязным, как и добавление двух атрибутов width/height.

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

Мастер Йода рекомендует:  Как стать хакером гайд по основам для новичков

Добавить комментарий