Картинки

Продолжим знакомство с элементами HTML.

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

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

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

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

Скопируем то, которое нам больше придётся по душе, и вставим в директорию нашего сайта в папку «images»(С>site>www>images).

Наверное лучше будет скопировать несколько изображений. Делается это так: по выбранной картинке нужно щёлкнуть правой клавишей, в открывшемся меню выбрать «Сохранить как». З

Затем, в открывшемся поисковом окне, вновь найти созданную папку «images», открыть её, и щёлкнуть «Сохранить». И, как я уже сказал, можно набрать туда сразу ещё несколько изображений, пригодятся.

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

Тег для изображений называется “img”. У него есть обязательный атрибут “src”, в значении которого указывается место, где хранится файл картинки.

Следующие атрибуты “width”(ширина) и “height”(высота), укажут в своих значениях, сколько места на экране мы для этой картинки выделили.

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

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

Затем ещё один, уже знакомый, атрибут “align” (выравнивание). Если мы в его значении напишем “left”(лево), а с левой стороны у нас располагается текст, то этот атрибут обеспечит обтекание картинки этим текстом.

И ещё два нужных атрибута – это “hspace”(горизонталь) и “vspace”(вертикаль). В их значениях будет указан отступ от картинки, обтекающего её текста.

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

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

Результат применения тегов и атрибутов изображения

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

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

Клиенты и персонал куррортной гостницы стоят на ушах после известия, что туда на медовый месяц прибывает пара — жених 90 лет и невеста 25.
Когда они прибыли, старичок представлял из себя такое жалкое зрелище, что все стали опасаться, что первая брачная ночь его убьет. Однако, следующим утром невеста медленно вышла из номера и, судорожно вцепившись в перила спустилась, на первый этаж. Портье, увидев ее в таком виде, спросил, что произошло.
Дама:
— Он говорил, что копит уже 70 лет. Я думала, он о деньгах…

Атрибуты и их значения < < < В раздел > > > Ссылки в HTML.

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

19 комментариев на «Картинки»

  1. stariс говорит:

    Спасибо Алёна. Благодаря Вам я перечитал этот пост и к своему стыду нашёл сразу 2 орфографические ошибки. Эт три года статья висела с ошибками!!! Бли-и-ин.

    Что-же касается пути к картинке, то обратите внимание, что в моём примере site находится на диске С, т е. не на Денвере, а просто в библиотеке Документы компьютера. В этом случае достаточно просто images. Вот тут у меня про директории https://starper55plys.ru/html/direktoria-sayta/

    Но я понял свою недоработку, и обязательно уточню насчёт пути к картинке находящейся на Денвере.

    Спасибо.

  2. Алёна говорит:

    Здравствуйте! Извиняюсь за придирчивость. Но сама попала впросак из-за одной неточности в данной статье. Когда прописывала местоположение картинки написала как у Вас images/aaa.jpg. И не могла понять, почему картинку не отображает. А когда подумала писидела, то поняла,что нужно полный адрес писать. И вписала полностью адрес картинки: «Z:/home/site/www/images/aaa.jpg»
    Я думаю, не мешало бы внести эту поправочку в статью. Советую только с целью: помочь Вам донести до таких чайников как я, как добавлять картинку))) Спасибо Вам за всё! Учусь по Вашему материалу, и всё получается! Вы настоящий учитель! Умеете грамотно объяснить без лишней воды и простым языком.

  3. stariс говорит:

    Пожалуйста. Если что, спрашивайте не стесняйтесь. По возможности помогу.

  4. Сергей говорит:

    ура, удалось. только после пересохранения в пэйнте)
    а вообще, огромное вам спасибо за ваш ресурс!

  5. Сергей говорит:

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

  6. stariс говорит:

    В файле всё нормально, но браузер не может найти изображение. Файл видит, а картинку, значит, нет.
    Посмотрите ещё раз папку images. Файл картинки должен иметь такой вид
    http://trueimages.ru/img/16/a1/07388145.png
    Вообще-то в XP возможно и по другому. Но где-то там — мельчайшая ошибка.

  7. stariс говорит:

    Хорошо. Теперь можете скриншоты делать.
    Ваш файл у меня открылся нормально. Я только свои картинки подставил, но с вашими размерами и расширением jpeg
    http://trueimages.ru/img/29/17/10e78145.png

  8. stariс говорит:

    Сейчас расскажу. В дальнейшем Вам это будет просто необходимо. Без скриншота, ни один сайт не делается.
    Скриншет — это снимок с экрана. Например Вам нужно сфотографировать то, что есть на экране в данный момент.
    1. Нажмите клавишу «Prt Sc Sys Rq».
    2. На всех Виндах, по умолчанию, есть редактор Paint. Найдите его в меню «Пуск» и откройте.
    3. Щёлкните по иконке «Вставить», в левом верхнем углу панели редактора, и в нём появится снимок с экрана.
    4. Нажмите «Файл» > «Сохранить как…», и сохраните снимок, например в документах.
    5. Откройте в браузере сервис Trueimages.
    6. В сервисе — сначала «Выбрать», выберете Ваш снимок, потом «Загрузить». Как только загрузите, справа появятся ссылки.
    Выбираете «Прямая ссылка», и вставляете её в комментарии.
    Кстати, при помощи скриншёта, делаются все картинки для сайта. Т. е. на экране открывается катинка, делается снимок, затем обрезается (Выделить > Обрезать), сохраняется, и вставляется на сайт.
    Так картинка становится оригинальной, и очищается от возможных вкраплений.

  9. Марина говорит:

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

  10. stariс говорит:

    Щелкните по ссылочке, и Вы увидите то, что увидел я.
    http://trueimages.ru/img/4e/66/b70b6145.png
    Лучше использовать спецсимволы, или скриншёт, как я это только что сделал.

  11. Марина говорит:

    здравствуйте
    вот, посмотрите :

  12. stariс говорит:

    Виолетта, Ваш код до меня не дошёл, только пустое поле. Если Вы пишите код в комментариях, то нужно использовать спецсимволы, вместо угловых скобок.
    < — открывающая скобка.
    > — закрывающая скобка.

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

  13. stariс говорит:

    А Вы можете скинуть мне скриншёт с тем что у Вас написано в Notepad++. Если ещё не умеете, то скажите, я объясню.

  14. Виолетта говорит:

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

  15. Марина говорит:

    здравствуйте.
    с картинкой — проблема. пробел полный. такой, вот, белый квадрат с маленькой зелёной иконкой внутри. и кэш — чистый. и пробовала кроме jpg разные другие варианты. и проверила всё тщательно. ну что может мешать?

  16. stariс говорит:

    Всё ясно — это кеш браузера. Придётся снова почистить.

  17. Марина говорит:

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

  18. stariс говорит:

    Так-так. Я только могу предположить, что у Вас там не срослось. Раз квадрат открывается, значит браузер видит тег img, а вот картинку найти не может. Скорее всего ошибка в адресе. Картинки бывают в расширениях png, и jpeg. Обычно ошибка бывает в этом. Наведите курсор на картинку, откроется окошко, где в первой строчке будет тип картинки, и сравните соответствует ли он указанному в адресе. Если нет, то просто перепишите, и всё.
    Тоже самое может быть, если название картинки написано русскими буквами, или пропущена точка.

  19. Марина говорит:

    добрый вечер.
    слава Богу, всё обсолютно прояснилось, и начала идти «в ногу» с Вашими уроками. только, вот, тут с картинкой… браузер отображает белый квадрат заданного мной размера и название картинки. подскажите, а как теперь?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *