Продолжим знакомство с элементами HTML.
Вот мы и добрались до картинок, или изображений, которые должны будут украсить Ваш сайт, придать ему сочность и привлекательность, а так же добавить приятной для восприятия информации.
По большому счёту, это и есть главная цель сайта – представить так, и такую информацию, которая привлечёт, заинтересует, и удержит посетителей. Изображения окажут огромную помощь в достижении этой цели.
Для того, чтобы разместить картинку на сайте, её нужно откуда то взять. Мест где водятся картинки довольно таки много. Это флешка фотоаппарата, рисунок из графического редактора, различные интернет ресурсы.
Я предлагаю, не мудрствуя, зайти в Яндекс. Картинки, там всегда есть огромное количество изображений по любой тематике, и всех размеров.
Скопируем то, которое нам больше придётся по душе, и вставим в директорию нашего сайта в папку «images»(С>site>www>images).
Наверное лучше будет скопировать несколько изображений. Делается это так: по выбранной картинке нужно щёлкнуть правой клавишей, в открывшемся меню выбрать «Сохранить как».
Затем, в открывшемся поисковом окне, вновь найти созданную папку «images», открыть её, и щёлкнуть «Сохранить». И, как я уже сказал, можно набрать туда сразу ещё несколько изображений, пригодятся.
Как только изображение найдено и сохранено, идём в редактор, и выбираем местечко, где будем её размещать. И вот тут мы познакомимся с новым видом тегов — одиночные теги. Да, есть ещё и такие.
Тег для изображений называется “img”. У него есть обязательный атрибут “src”, в значении которого указывается место, где хранится файл картинки.
Следующие атрибуты “width”(ширина) и “height”(высота), укажут в своих значениях, сколько места на экране мы для этой картинки выделили.
Дело в том, что размер картинки может быть в пол экрана, и если нам этого не нужно, то необходимо задать ей размер в пикселях, который нас устроит.
Ещё один атрибут – “alt”. В его значении нужно прописать название картинки, и тогда, если в настройках браузера отключены картинки, то вместо изображения, появится его название.
Затем ещё один, уже знакомый, атрибут “align” (выравнивание). Если мы в его значении напишем “left”(лево), а с левой стороны у нас располагается текст, то этот атрибут обеспечит обтекание картинки этим текстом.
И ещё два нужных атрибута – это “hspace”(горизонталь) и “vspace”(вертикаль). В их значениях будет указан отступ от картинки, обтекающего её текста.
Вот такой получился код. Не терпится глянуть, что же покажет браузер.
Вот, всё что было заказано в коде, выполнено. Обязательно самостоятельно разместите картинки в разных местах страницы, и по две штуки на странице.
Перемена
Клиенты и персонал куррортной гостницы стоят на ушах после известия, что туда на медовый месяц прибывает пара — жених 90 лет и невеста 25.
Когда они прибыли, старичок представлял из себя такое жалкое зрелище, что все стали опасаться, что первая брачная ночь его убьет. Однако, следующим утром невеста медленно вышла из номера и, судорожно вцепившись в перила спустилась, на первый этаж. Портье, увидев ее в таком виде, спросил, что произошло.
Дама:
— Он говорил, что копит уже 70 лет. Я думала, он о деньгах…
Атрибуты и их значения < < < В раздел > > > Ссылки в HTML.
Проверьте ещё раз правильность написания кода, особенно указание на папку с фотками, название картинки, и особенно правильно укажите расширение (.png, .jpg и т.д.) Если у вас старая версия браузера, то попробуйте удалить его и установить свежую версию. Рекомендую Chrome.
У меня проблеми с фотографиями : они не читаются, что делать?
Поздравляю.
Тех. поддержка Бегет меня уже 5 лет радует.
Желаю дальнейших успехов.
Сделал на конец то свою первую страничку в интернете, вроде такая мелочь, но сижу сегодня и целый день ее открываю. Изображения кстати нормально стали отображаться во всех браузерах. Сайт заливал через упомянутый вами Beget, и скажу, что тех поддержка там меня прямо порадывала, быстро отвечали на мои кучу и наверно по их мнению тупых вопросов 🙂 .
Да нет — всё правильно понял, только код — один css. HTML нет. И тега img картинки нет. У WordPress есть такая заморочка. Он не передаёт теги html визуально. Если он видит тег, то и воспринимает его как тег, а не как символ.
Если надо передать html в комментах, то вместо угловых скобок пишутся спецсимволы. Вместо < пишется <, а вместо > пишется >
Вот тогда весь код будет отображён на странице так, как надо.
Да, html у тебя большой, затрахаешься спецсимволы писать. Поэтому скинь-ка мне его вот на эту почту tatsek@mail.ru Там всё отобразится как есть. Или в скайп webdeb1.
И ещё скинь скрин. картинки или картинок, что там. Только вырежь её точно в том размере, что и у тебя, до пикселя.
Если что, то вот тут https://starper55plys.ru/wordpress/kak-sdelat-snimok-ekrana-skrinshyot/ — как сделать скрин.
На досуге посмотрю.
stariс говорит:
2018-03-14 в 22:46
Мне бы код страницы посмотреть.
Здравствуйте!
я прислал код, вы хотели посмотреть его
или может я не так понял ?
???
Канцтовары, игрушки, сувениры
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
Канцелярские наборы, степлеры, дыраколы, ножницы
Клей карандаш, ПВА, силикатный, специализированный
Карты географические, глобусы
Кнопки, булавки, скрепки, зажимы, скобы
Корректоры кисточкой, ручкой, ленточный
Лотки для бумаг
Лупы, бэйджи, смачиватели, тубусы, брелки
Линейки, Циркули, готовальни
Маркеры, текстовыделители
Мелки белые, цветные
Магнитно-маркерные доски
Фломастеры
Файлы
Фотоальбомы, фоторамки. Альбомы для монет, визитницы
Штампы, штемпельная продукция. Датеры
Мне бы код страницы посмотреть.
У меня такой, не хватает походу lang=»ru»
А на счет картинки, которая не изображается в Блоке именно в Браузере мазилла я переживаю только об одном, что может оно не будет и у других пользователей так же не показывать, когда я страничку залью в интернет.
И кстати, когда я в Денвере пробывал открывать, то также не отображало Картинки.
Ну тогда по Мозилле даже не знаю что и сказать. Раз в других браузерах всё ОК, так может и перейти на Chrome, он же удобнее.
Если уж так критично, попробуй снести 59.0 и установить 58.02. Потом сам обновится. И посмотреть что там с картинками будет.
Скорее всего что-то в твоём браузере глюкануло. Да и Notepad++ последнее время такие обновления выдаёт, что хоть стой, хоть падай. Я уж подумываю снести его на хр…., найти софт 6.2.1, установить и запретить обновляться. Может он что-то с лисом не скантачил.
У меня нормально открывает, но я уже месяца три как отказываю в обновлениях редактора.
Насчёт странички. Что это за страничка? Вообще-то каркас страницы вот тут: https://starper55plys.ru/html/karkas-stranitsy/
Здравствуйте!
Версия Мазиллы 59.0 и вроде никаких запретов не стоит, а картинку в Блоке показывать не хочет.
И еще подскажите, проверил фаил своей странички и вот такое пишет, что это ?
Предупреждение : Этот документ, как представляется, написан на русском языке. Рассмотрите возможность добавления lang=»ru»(или варианта) к html стартовому тегу.
Из строки 1 , столбец 16 ; к строке 2 , столбец 6
TYPE html>↩↩ <
Если версия Мозилла ниже 23, то нажмите на три чёрточки справа сверху, перейдите «Настройки» → «Содержимое», установите галочку «Автоматически загружать изображения» и нажмите «OK».
А лучше установить новую версию, там такой проблемы нет вообще.
Здравствуйте!
У меня такая проблема, я в вставил изображение, но при открытии в браузере Мозилла она не отображается, а в Хроме и IE все хорошо, какая может быть причина?
Не видя кода и не зная точно как, в каком расширении и куда вы сохронили картинку, я не смогу вам ответить. Совет: Введите в поисковую строку текст, который у вас в кавычках, и гугл выдаст вам вам ресурсы с подобными вопросами и ответами на них.
Добрый день!Нашел в сети картинку,сохранил все как вы пишите.Прописал в теге.Картинка не открывается.Пишет»Некоторые изображения были заблокировагы,чтобы помочь предотвратить идентификацию вашего компьютера отправителем.Чтобы посмотреть изображения,откройте этот элемент».
Браузер видит тег img и отображает рамочку или alt, но вот самой картинки по указанному адресу нет, значит ошибка в адресе. Такое бывает даже из-за раскладки клавиатуры, при написании названия картинки.
Например слово Сруб. Букву С можно написать и в английской и в русскоязычной раскладке. И если написать С в английской, а руб в русской раскладках, то браузер не увидит картинку.
Здравствуйте Сергей Юрьевич!Подскажите,что я делаю не так:когда вставляю картинку ,то при просмотре вижу либо пустую рамочку с иконкой разорванной картинки,а при наличие …alt=»328″> (фото с ком-па),даже при указании полного адреса выходит вместо картинки просто 328…
Спасибо Алёна. Благодаря Вам я перечитал этот пост и к своему стыду нашёл сразу 2 орфографические ошибки. Эт три года статья висела с ошибками!!! Бли-и-ин.
Что-же касается пути к картинке, то обратите внимание, что в моём примере site находится на диске С, т е. не на Денвере, а просто в библиотеке Документы компьютера. В этом случае достаточно просто images. Вот тут у меня про директории https://starper55plys.ru/html/direktoria-sayta/
Но я понял свою недоработку, и обязательно уточню насчёт пути к картинке находящейся на Денвере.
Спасибо.
Здравствуйте! Извиняюсь за придирчивость. Но сама попала впросак из-за одной неточности в данной статье. Когда прописывала местоположение картинки написала как у Вас images/aaa.jpg. И не могла понять, почему картинку не отображает. А когда подумала писидела, то поняла,что нужно полный адрес писать. И вписала полностью адрес картинки: «Z:/home/site/www/images/aaa.jpg»
Я думаю, не мешало бы внести эту поправочку в статью. Советую только с целью: помочь Вам донести до таких чайников как я, как добавлять картинку))) Спасибо Вам за всё! Учусь по Вашему материалу, и всё получается! Вы настоящий учитель! Умеете грамотно объяснить без лишней воды и простым языком.
Пожалуйста. Если что, спрашивайте не стесняйтесь. По возможности помогу.
ура, удалось. только после пересохранения в пэйнте)
а вообще, огромное вам спасибо за ваш ресурс!
добрый день, у меня возникла проблема со вставкой картинки. пустое поле показывает, когда я вставляю в код место хранения файла в директории. пробовал уж и так и сяк , но ни в какую. со вставкой картинок из инета проблем не возникало, только когда с компа( не пойму в чем беда….
В файле всё нормально, но браузер не может найти изображение. Файл видит, а картинку, значит, нет.
Посмотрите ещё раз папку images. Файл картинки должен иметь такой вид
http://trueimages.ru/img/16/a1/07388145.png
Вообще-то в XP возможно и по другому. Но где-то там — мельчайшая ошибка.
Хорошо. Теперь можете скриншоты делать.
Ваш файл у меня открылся нормально. Я только свои картинки подставил, но с вашими размерами и расширением jpeg
http://trueimages.ru/img/29/17/10e78145.png
Сейчас расскажу. В дальнейшем Вам это будет просто необходимо. Без скриншота, ни один сайт не делается.
Скриншет — это снимок с экрана. Например Вам нужно сфотографировать то, что есть на экране в данный момент.
1. Нажмите клавишу «Prt Sc Sys Rq».
2. На всех Виндах, по умолчанию, есть редактор Paint. Найдите его в меню «Пуск» и откройте.
3. Щёлкните по иконке «Вставить», в левом верхнем углу панели редактора, и в нём появится снимок с экрана.
4. Нажмите «Файл» > «Сохранить как…», и сохраните снимок, например в документах.
5. Откройте в браузере сервис Trueimages.
6. В сервисе — сначала «Выбрать», выберете Ваш снимок, потом «Загрузить». Как только загрузите, справа появятся ссылки.
Выбираете «Прямая ссылка», и вставляете её в комментарии.
Кстати, при помощи скриншёта, делаются все картинки для сайта. Т. е. на экране открывается катинка, делается снимок, затем обрезается (Выделить > Обрезать), сохраняется, и вставляется на сайт.
Так картинка становится оригинальной, и очищается от возможных вкраплений.
хорошо. просто замечательно. не знаю, как его, скриншёт, делают. подскажите, пожалуйста. и потом его просто вставить в комментарии?
Щелкните по ссылочке, и Вы увидите то, что увидел я.
http://trueimages.ru/img/4e/66/b70b6145.png
Лучше использовать спецсимволы, или скриншёт, как я это только что сделал.
здравствуйте
вот, посмотрите :
Виолетта, Ваш код до меня не дошёл, только пустое поле. Если Вы пишите код в комментариях, то нужно использовать спецсимволы, вместо угловых скобок.
< — открывающая скобка.
> — закрывающая скобка.
В противном случае, браузер код не отразит, так как будет искать тег.
Можно заключить код в тег <code></code>, он указан под полем для комментариев, только тогда, код отобразится без угловых скобок/
А Вы можете скинуть мне скриншёт с тем что у Вас написано в Notepad++. Если ещё не умеете, то скажите, я объясню.
Здравствуйте, написала все как в примере, перепроверила, код написан правильно, но картинки все равно не загружаются, только белое поле. Также не получается поместить их в центре, выравнивание не работает. Расширение и названия проверяла, все сходится, не знаю в чем проблема.
Вот код:
здравствуйте.
с картинкой — проблема. пробел полный. такой, вот, белый квадрат с маленькой зелёной иконкой внутри. и кэш — чистый. и пробовала кроме jpg разные другие варианты. и проверила всё тщательно. ну что может мешать?
Всё ясно — это кеш браузера. Придётся снова почистить.
здравствуйте.
всё перепроверила. и картинку другую, и третью.. внесла. но выходит тоже самое — белый квадрат с надписью самой первой картинки, не меняется. потом вообще убрала и заново, но новая картинка, т.е белый квадрат вышел ,почему-то, снова с надписью самой первой картинки.
Так-так. Я только могу предположить, что у Вас там не срослось. Раз квадрат открывается, значит браузер видит тег img, а вот картинку найти не может. Скорее всего ошибка в адресе. Картинки бывают в расширениях png, и jpeg. Обычно ошибка бывает в этом. Наведите курсор на картинку, откроется окошко, где в первой строчке будет тип картинки, и сравните соответствует ли он указанному в адресе. Если нет, то просто перепишите, и всё.
Тоже самое может быть, если название картинки написано русскими буквами, или пропущена точка.
добрый вечер.
слава Богу, всё обсолютно прояснилось, и начала идти «в ногу» с Вашими уроками. только, вот, тут с картинкой… браузер отображает белый квадрат заданного мной размера и название картинки. подскажите, а как теперь?