Этот урок для тех кто на каком-либо сайте увидел красивую картинку и решил её сохранить, но увы... Админ заблокировал правую кнопку мышки, да ещё и выскакивает обидное сообщение, типа не воруйте или ещё чего!
Способ первый: самый простой и безобидный
На нужную картинку нужно просто навести мышку и кликнув правой кнопкой, выбрать "Сохранить объект как...". И всё! Лёгкий и простой способ который действует почти всегда.
Способ второй: кликни и скопируй
У каждой картинки есть адрес, поэтому, если правая кнопка не заблокирована, кликните ею по картинке и в Свойствах посмотрите адрес. Введите этот адресок в адрес и картинка перед вами. Всё просто и легко!!! Про защищённыe картинки читайте ниже...
Способ третий: наведи и сохрани
При наведение мышкой на левый верхний угол появляются четыре иконки. Нам нужна первая, а именно, сохранить картинку. У этого способа есть недостатки, ведь эти четыре волшебных иконки появляются только при наведение на большие картинки и не срабатывают на анимации.
Способ четвёртый: да поможет нам скиншот =)
Делаем скиншот страницы (Print Screen SysRq) и в открываем нужную картинку в Paint"e. Удаляем всё лишнее, подрезаем и картинка ваша. Этот способ довольно лёгкий, но сохранить таким методом анимашки невозможно...
Способ пятый: HTML - это сила!
Что бы использовать этот способ, нужно хоть капельку знать HTML. Блокнот с кодом можно открыть кликнув в строке браузера на "Вид", а затем "Просмотр HTML-кода". После того как откроется блокнот, там вы ищете примерное местоположения адреса картинки. Часто появляется что-то типа "teddy/teddy2.gif". Такое в адресную строку не вставишь, но это разрешимо. Пишите адрес сайта на пример, http://tritroichki.narod.ru и добавляете адресок который вы надыбали в коде. Должно получиться вот что: http://tritroichki.narod.ru/teddy/teddy2.gif . Копируем эту ссылку, вставляем в адресную строку страницы и нажимаем "Переход". Если вам повезёт, то адрес может быть даже полным. Тогда просто копируйте его в адресную строку и жмите Enter. Всё, картинка перед вами!
Способ шестой: окно во весь экран и правая кнопка заблокирована
Наверняка вы встречали сайту у которых нет верхней менюшки, да ещё и правая кнопка заблокирована? Сайт на котором лежит "недоступная" картинка оказался таким? Нет проблем. Делаем вот что: нужно вернуться на предыдущую страницу, пусть она будет называться "Страничка 1". Наводите на ссылку "Странички 2" (а именно там лежит "недоступная" картинка) где вы только что были и записываете где-нибудь или запоминаете адрес. Адрес должен появиться в строке статуса браузера, то есть, внизу. Вписываете этот адресок в адресную строку жмёте Enter. Появилась страница с картинкой, только вот с верхней менюшкой. Далее действуйте одним из предыдущих способов.
Способ седьмой: злобное сообщение при клике правой кнопкой
Этот способ для тех ко не хочет копаться в HTML сайта и если при клики правой кнопкой мышки, выскакивает сообщение предупреждающее что воровать нехорошо, вас за это накажут и т.д. и т.п. Значит так, кликаете правой кнопкой мышки, выскакивает сообщение, а вы вместо того что бы нажать на красный крестик, жмите Esc на клавиатуре. Окошко исчезает. После чередующихся кликах правой кнопкой и нажатием Esc (кликаете правой кнопкой мышки, жмёте Esc, кликаете правой кнопкой мышки, жмёте Esc...), скрипт защиты не выдержит и взломается. То есть, появится привычное окно, где и можно выбрать "Сохранить как...". Этот способ работает только когда выскакивает злобное предупреждающее сообщение.
Этот урок был написан не для того что бы "одалживать" картинки (но и для этого тоже...), а для того что бы наивные админы у которых всё ещё стоит такая "защита" одумались. Ведь зачем выкладывать картинки и тут же из защищать, что бы никто не спёр!? А совсем плохо когда выскакивает нехорошее сообщение: посетитель обидится и уйдёт....
Тест по информатике и ИКТ на тему «Язык разметки гипертекста HTML »
1. Web-страница (документ HTML) представляет собой:
a. Текстовый файл с расширением txt или doc
b. Текстовый файл с расширением htm или html
c. Двоичный файл с расширением com или exe
d. Графический файл с расширением gif или jpg
2. Для просмотра Web-страниц в Интернете используются программы:
a. MicroSoft Word или Word Pad
b. MicroSoft Access или MicroSoft Works
c. Internet Explorer или Opera (Google Chrome)
d. HTMLPad или Front Page
3. Тег - это:
a. Специальная команда, записанная в угловых скобках < >
b. Текст, в котором используются спецсимволы
c. Указатель на другой файл или объект
d. Фрагмент программы, включённой в состав Web-страницы
4. Тег - это:
a. Идентификатор заголовка окна просмотра
b. Идентификатор заголовка документа HTML
c. Идентификатор перевода строки
d. Идентификатор HTML-команд документа для просмотра страницы
5. Для вставки изображения в документ HTML используется команда:
6. Гиперссылка задается тегом:
c. текст
7. Гиперссылки на Web - странице могут обеспечить переход...
a. только в пределах данной web – страницы
b. только на web - страницы данного сервера
c. на любую web - страницу данного региона
d. на любую web - страницу любого сервера Интернет
8. Гипертекст - это:
a. Текст очень большого размера
b. Текст, в котором используется шрифт большого размера
c. Структурированный текст, где возможны переходы по выделенным меткам
d. Текст, в который вставлены объекты с большим объемом информации
9. Каким тегом определяется абзац текста?
a.
10. Какие теги из перечисленных ниже определяют элементы-контейнеры?
a.
b.
a. 5
11. Запишите атрибут, обязательный для тега: _______________
12. Значение какого адреса может принять параметр HREF тега ?__
a. IP адрес
b. Закладки (якорь с указанным именем)
c. электронной почты (с префиксом mailto:)
d. имя файла
13. Для чего служат в HTML символы TITLE> :
а) для выделения абзаца
б) для создания заголовка
в) для выделения глав
г) для выделения заголовка
14. Установите соответствия
1. Тег с которого начинается любой программный кодHTML- документа.
а)
б ) ?>
в )
2. Тег для разделения текста на абзацы.
г )
д ) ?>
4. Тег для выделения заголовка и указания его выравнивания.
е)
5. Рисунок в HTML задается …
ж)
6. Как в HTML задается положение рисунка?
з)
15. Выберете верный ответ:
Как сохраняются изображения, вставляемые на страницу?
а) переводятся в двоичную форму и помещаются в HTML код
б) записываются в архив и прилагаются к HTML файлу
в) изображения не сохраняются, а при просмотре используются из библиотеки пользователя
г) сохраняются как отдельные файлы, а в HTML код вставляется только ссылка на них
16. Какие форматы графических файлов можно использовать для вставки на WEB –страницу?
а ) BMP, GIF
б ) GIF, JPG
в) TIFF
г) все вышеперечисленные
Ответы к тесту :
src=”имя файла
a,c
1г
2з
4б
5а
6е
Использование сопутствующих изображений в тексте значительно улучшает восприятие предоставляемой вами информации читателями. В HTML для вставки изображений на страницу существует соответствующий тег . И сегодня мы подробно рассмотрим то, как использовать этот тег, какие атрибуты он поддерживает, и ответим на несколько частых вопросов, которыми задаются начинающие вебмастера.
Вставка изображения (картинки) на страницу в HTML
Как уже говорилось ранее, для вставки изображений на страницу используют тег . Краткая его форма выглядит следующим образом:
в HTML, и так:
в XHTML. Из примера видно, что для последнего добавляется слеш (косая черта) в конце.
Все это, так сказать, быстрая вставка изображения, не содержащая в себе никаких атрибутов, за исключением ссылки на файл.
Этот тег (), в отличие, например, от ссылки, не закрывается и пишется в той форме, что я привел выше. Рекомендуемым атрибутом является «alt »:
который показывается в момент, пока изображение не загрузилось полностью или имеет битую (несуществующую) ссылку.
А теперь есть смысл рассказать обо всех атрибутах, которые поддерживает тег .
Список существующих атрибутов тега в HTML
Все атрибуты у изображений прописываются через пробел. А вот собственно и сам их перечень.
src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG) , PNG , GIF , BMP , ICO , APNG , SVG и . Пример использования с абсолютным адресом изображения:
Пример использования с относительным адресом изображения:
alt – содержит текст – подсказку у не появившегося/отсутствующего изображения. Пример использования:
align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). Допустимые значения: top , bottom , middle , left и right . Пример использования:
border – задает ширину границы (рамки) вокруг изображения. Допустимые значения: px , %
Атрибут не поддерживается в HTML5.
height – задает высоту изображения. Допустимые значения: px , % и другие величины. Пример использования:
width – задает ширину изображения. Допустимые значения: px , % и другие величины. Пример использования:
hspace – задает горизонтальный (слева и справа) отступ у изображения. Допустимые значения: px , % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
vspace – задает вертикальный (сверху и снизу) отступ у изображения. Допустимые значения: px , % и другие величины. Пример использования:
Атрибут не поддерживается в HTML5.
longdesc – содержит адрес до расширенного описания изображения. Допустимые значения: TXT-файл . Адрес, как и у атрибута src, может быть абсолютным или относительным. Пример использования:
crossorigin – атрибут, позволяющий осуществить вставку изображения с другого сайта через кросс-доменный запроса (CORS). Допустимые значения: anonymous (анонимный запрос без передачи учетных данных) и use-credentials (запрос с передачей учетных данных). Пример использования:
Атрибут поддерживается только в HTML5.
srcset – задает список файлов, которые будут отображаться в зависимости от ширины или плотности экрана. Допустимые значения: Nw (где N – любое целое положительное число) и Kx (где K – положительное десятичное число). Пример использования:
Атрибут не поддерживается в браузерах Android и Internet Explorer.
sizes – задает размер для изображений, указанных в атрибуте srcset. Допустимые значения: Nex , Nrem , Nem , Nvmin , Nch , Nvh , Nvw , Nvmax , Nin , Nq , Nmm , Npc , Ncm , Npt и Npx , где N – положительное число. Пример использования:
Принцип действия примера такой: если разрешение экрана меньше 600 px, то задаем ширину изображений, равную 300 px, и наоборот, если больше 600 px – фиксируем ширину изображений на 600 px.
Атрибут, как и srcset, не поддерживается в браузерах Android и Internet Explorer.
usemap – связывает изображение с картой, которая задается с помощью тега . Допустимые значения: #name (где name – значение атрибута name карты) и #id (где id – значение атрибута id карты). Пример использования:
Нельзя создавать связь, если карта (
ismap – связывает изображение с некоторой областью серверной карты. При нажатии на такую картинку, считываются координаты нажатия от левого верхнего угла и посылаются запросом на указанный в ссылке адрес. Для работы атрибута, изображение должно быть обернуто в ссылку (). Пример использования:
в HTML, и так:
Помимо этого,
По желанию, большая часть персональных атрибутов
Как вставить изображение (картинку) в таблицу?
Неважно, куда именно вы хотите вставить изображение на сайте, будь это таблица или, например, блок div, во всех случаях вставка осуществляется все по тому же принципу:
Наш логотип: |
Все просто.
Как сделать изображение (картинку) ссылкой в HTML?
Для того чтобы сделать вашу картинку кликабельной, добавив ей функцию перехода к другой странице вашего (и не только) сайта, оберните ее в тег :
Остались вопросы? Не стесняйтесь и задавайте их в комментариях под данной статьей.
Это проще простого, скажете вы. Наводите мышку на изображение на сайте и нажимаете правую кнопку мыши. Останется выбрать опцию "Сохранить изображение как" или аналогичную Название опции зависит от используемого браузера. Но некоторые сайты усложняют задачу. Может оказаться, что вы не найдете опции по сохранению изображения. Или вместо фотографии вы сохраните невидимую для вас картинку-заглушку. В любом случае, сохранить картинку не получится. Но это так называемая защита от дурака. Обойти ее очень просто.
Первый способ
Нужно сохранить веб-страницу полностью (в Opere - html-файл с изображениями). Мы получим html-файл и папку с аналогичным названием. Так вот в этой папке среди кучи файлов и будут искомые изображения (расширение файлов обычно такое: .jpg, .gif, .png). Можно сразу отсортировать файлы по размеру (картинки и фотографии обычно занимают больше 50 Кб).
Второй способ
Переходим в режим "Исходный код" (Ctrl+U), где ищем адрес, где хранится нужное нам изображение. Чтобы было быстрее, запустите поиск (Ctrl+F) и в поисковое поле введите jpg (если изображение в этом формате). Как найдете адрес, можно сразу щелкнуть по этому адресу для загрузки изображения (потом его будет легко сохранить) или сначала скопировать адрес фотографии, а потом открыть в отдельном окне.
Третий способ
При открытии веб-страницы все его элементы автоматически сохраняются в кэше. Там можно найти и очень старые изображения. Для Firefox кэш находится по следующему адресу: \Documents and Settings\_профиль_пользователя_\Local Settings\Application Data\Mozilla\Firefox\Profiles\_профиль_\Cache... Там же сохраняются и флеш-ролики (формат swf).
Четвертый способ - самый удобный
Три способа, описанных выше, рабочие, но имеют 2 больших недостатка: 1 - все надо делать вручную и 2 - сохраняется только по 1 картинке за раз. Если вы захотите сохранить хотя бы десяток-другой картинок, то, делая это вручную, потратите огромное количество времени и сил, это будет очень нудный и долгий процесс.
Чтобы избежать нудной ручной работы есть специальный онлайн сервис, который в автоматическом режиме