Картинки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Проверьте ещё раз правильность написания кода, особенно указание на папку с фотками, название картинки, и особенно правильно укажите расширение (.png, .jpg и т.д.) Если у вас старая версия браузера, то попробуйте удалить его и установить свежую версию. Рекомендую Chrome.

  2. Миша говорит:

    У меня проблеми с фотографиями : они не читаются, что делать?

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

    Поздравляю.

    Тех. поддержка Бегет меня уже 5 лет радует.

    Желаю дальнейших успехов.

  4. Михаил говорит:

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

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

    Да нет — всё правильно понял, только код — один css. HTML нет. И тега img картинки нет. У WordPress есть такая заморочка. Он не передаёт теги html визуально. Если он видит тег, то и воспринимает его как тег, а не как символ.

    Если надо передать html в комментах, то вместо угловых скобок пишутся спецсимволы. Вместо < пишется &lt;, а вместо > пишется &gt;

    Вот тогда весь код будет отображён на странице так, как надо.

    Да, html у тебя большой, затрахаешься спецсимволы писать. Поэтому скинь-ка мне его вот на эту почту tatsek@mail.ru Там всё отобразится как есть. Или в скайп webdeb1.

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

    Если что, то вот тут https://starper55plys.ru/wordpress/kak-sdelat-snimok-ekrana-skrinshyot/ — как сделать скрин.

    На досуге посмотрю.

  6. Михаил говорит:

    stariс говорит:
    2018-03-14 в 22:46
    Мне бы код страницы посмотреть.

    Здравствуйте!
    я прислал код, вы хотели посмотреть его
    или может я не так понял ?

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

    ???

  8. Михаил говорит:

    Канцтовары, игрушки, сувениры

    body {
    background-color: #F4F4F4;
    }
    .header1 {
    background-color: #0C4009;
    font-size: 34px;
    padding: 15px;
    color: white;
    text-align: center;
    font-family: serif;
    font-weight: bold;
    }
    .header2 {
    font-size: 18px;
    background-color: #B7B9C8;
    color: blue;
    padding: 5px;
    }

    .vatcap {
    color: #004700;
    padding: 10px;
    font-style: normal;

    }
    .email {
    color: #1E1E1E;
    padding: 10px;
    font-size: 18px;
    font-style: italic;
    }

    .vagno {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;

    }
    .vagno1 {
    color: red;
    font-size: 22px;
    font-style: normal;
    /*text-decoration: underline;*/
    }
    .vagno2 {
    font-style: normal;
    color: #141289;
    padding: 10px;
    }
    .site {
    background-color: white;
    color: #A43DDF;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    }

    p {
    color: white;
    background-color: #DC5E5C;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    }
    .pp {
    font-style: italic;
    color: black;
    font-weight: bold;
    }
    .container {
    width: 900px;
    margin: 0 auto;
    display: block;
    font-weight: bold;
    text-align: center;
    }

    .block1 {
    float: left;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    border-radius: 15px;
    margin: 10px;
    padding-top: 5px;
    font-size: 17px;
    background-color: white;
    box-shadow: 8px 8px 5px #C1C1C1;
    }
    img {
    width: 90%;
    }
    .footer {
    font-size: 20px;
    background-color: white;
    color: #0C4009;
    clear: both;
    padding: 20px;
    font-style: italic;
    font-weight: bold;
    }

    Канцтовары, развивающие игры, сувениры
    пн-пт 8.30-19.00, сб. 09.00-15.00Тел. и Ватцап 8(918) !!! !! !!
    email:
    Важно ! Все интересующие вопросы лучше задавать в Ватцапе или писать на почту.
    !!! Сайт находится в разработке !!!

    Альбомы, папки для рисования, черчения
    Бумага для оргтехники белая, цветная
    Бумага для заметок
    Бумага для флипчарта
    Бумага миллиметровая
    Бумага копировальная
    Блокноты, записные, алфавитные книги
    Бланки, товарные чеки, журналы учета, кассовые книги
    Для творчества, цветная, белая бумага и картон
    Грамоты, дипломы, благодарственные письма
    Ежедневники, планинги
    Тетради школьные, общие, предметные, на кольцах
    Термолента, ценники, ролики для факса
    Папки, портфели пластиковые, тканевые, бумажные
    Планшеты
    Клейкая лента канцелярская, упаковочная, малярная, двусторонние
    Краски акварельные, акриловые, художественные, Гуашь
    Кисти
    Удостоверения, корочки, трудовые, обложки
    Пластилин, доски для моделирования
    Карандаши чернографитные, цветные, восковые
    Ручки шариковые, гелевые, цветные, наборы
    Расскраски Развивающие игры Наклейки, Пазлы
    Ластики, точилки
    Конверты бумажные, полиэтиленовые, Открытки
    Пеналы пластиковые, тканевые
    Калькуляторы, Батарейки, Лазерные указкиДиски CD/DVD
    Канцелярские наборы, степлеры, дыраколы, ножницы
    Клей карандаш, ПВА, силикатный, специализированный
    Карты географические, глобусы
    Кнопки, булавки, скрепки, зажимы, скобы
    Корректоры кисточкой, ручкой, ленточный
    Лотки для бумаг
    Лупы, бэйджи, смачиватели, тубусы, брелки
    Линейки, Циркули, готовальни
    Маркеры, текстовыделители
    Мелки белые, цветные
    Магнитно-маркерные доски
    Фломастеры
    Файлы
    Фотоальбомы, фоторамки. Альбомы для монет, визитницы
    Штампы, штемпельная продукция. Датеры

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

    Мне бы код страницы посмотреть.

  10. Михаил говорит:

    У меня такой, не хватает походу lang=»ru»

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

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

    Ну тогда по Мозилле даже не знаю что и сказать. Раз в других браузерах всё ОК, так может и перейти на Chrome, он же удобнее.

    Если уж так критично, попробуй снести 59.0 и установить 58.02. Потом сам обновится. И посмотреть что там с картинками будет.
    Скорее всего что-то в твоём браузере глюкануло. Да и Notepad++ последнее время такие обновления выдаёт, что хоть стой, хоть падай. Я уж подумываю снести его на хр…., найти софт 6.2.1, установить и запретить обновляться. Может он что-то с лисом не скантачил.

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

    Насчёт странички. Что это за страничка? Вообще-то каркас страницы вот тут: https://starper55plys.ru/html/karkas-stranitsy/

  12. Михаил говорит:

    Здравствуйте!
    Версия Мазиллы 59.0 и вроде никаких запретов не стоит, а картинку в Блоке показывать не хочет.
    И еще подскажите, проверил фаил своей странички и вот такое пишет, что это ?

    Предупреждение : Этот документ, как представляется, написан на русском языке. Рассмотрите возможность добавления lang=»ru»(или варианта) к html стартовому тегу.
    Из строки 1 , столбец 16 ; к строке 2 , столбец 6
    TYPE html>↩↩ <

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

    Если версия Мозилла ниже 23, то нажмите на три чёрточки справа сверху, перейдите «Настройки» → «Содержимое», установите галочку «Автоматически загружать изображения» и нажмите «OK».

    А лучше установить новую версию, там такой проблемы нет вообще.

  14. Михаил говорит:

    Здравствуйте!
    У меня такая проблема, я в вставил изображение, но при открытии в браузере Мозилла она не отображается, а в Хроме и IE все хорошо, какая может быть причина?

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

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

  16. Алексей говорит:

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

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

    Браузер видит тег img и отображает рамочку или alt, но вот самой картинки по указанному адресу нет, значит ошибка в адресе. Такое бывает даже из-за раскладки клавиатуры, при написании названия картинки.

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

  18. Ольга говорит:

    Здравствуйте Сергей Юрьевич!Подскажите,что я делаю не так:когда вставляю картинку ,то при просмотре вижу либо пустую рамочку с иконкой разорванной картинки,а при наличие …alt=»328″> (фото с ком-па),даже при указании полного адреса выходит вместо картинки просто 328…

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

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

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

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

    Спасибо.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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