Если изображение находится на каком-либо другом сервере, то вводится оно следующим образом: http://доменное_имя_сайта/ папка_с_изображением/изображение. Например, можно прописать:

Вернем все, как было. Давайте сохраним и посмотрим нашу страницу в браузере. Обновляем. Наше изображение вставлено.

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

Давайте теперь разберем атрибуты, которые относятся к тегу . Начнем с атрибута align. Знакомый нам атрибут. Поставим значение left. Здесь align может принимать также значения top (вверху), bottom (внизу) и middle (по центру). Но мы оставим left. Атрибут align означает здесь не только то, что наше изображение будет прибито гвоздями к левой части экрана, но и то, что текст, который обтекает данное изображение, будет обтекать его с правой стороны.

Далее идет атрибут alt, который задает альтернативный текст для изображения. То есть, если наше изображение не будет загружено, или у пользователя в браузере будет отключен показ изображений, то вместо изображения будет появляться указанный в этом атрибуте текст. Введем, например “info-line”.

Наше изображение было слишком большое. Давайте сделаем его меньше с помощью атрибутов width и height (ширина и высота). Например, по 150 пикселей.

Зададим рамку с помощью атрибута border, например 2 пикселя.

Сохраняем страничку и проверяем. На нашей странице с левого края появилась картинка размерами 150×150 пикселей с рамкой в 2 пикселя. Единственное, что нам здесь не нравится (во всяком случае, мне) – это то, что наше изображение так плохо обтекает текст, что нам это заметно.

Давайте сделаем отступ от изображения по горизонтали. Перейдем в код и добавим еще несколько атрибутов: hspase (горизонтальный отступ изображения от другого контента) и vspace (вертикальный отступ). Укажем, например, hspace – 2 пикселя, а vspace – 5 пикселей.

Сохраним, проверим в браузере. Обновляем страницу – отступ удался.

Давайте теперь сделаем так, чтобы после слова «нужно» обтекание текстом нашего изображения завершалось. Переходим в код, находим слово «нужно» с помощью комбинации клавиш «Ctrl+F». Видим тег переноса. Этот тег имеет атрибут clear, который непосредственно относится к тексту. Атрибут имеет три значения: all, left и right. Что они означают? Они завершают обтекание текста. Но значения left и right применяются тогда, когда в атрибуте align заданы значения left или right. Таким образом, у нас задано значение атрибута align – left, и мы применяем left к атрибуту clear. Наш текст будет отображен слева.

Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по пути успеха.

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

Как сделать изображение фоном?

Перейдем в код и поговорим о том, как задать фон странички с помощью изображений (ведь вы уже знаете, как задать фон обычными цветами?).

Ищем тег. Прописываем атрибут background. В кавычках указываем путь до изображения. Давайте перейдем на рабочий стол. Я подготовил еще одно изображение для этого видеоурока. Называется оно bg.png. Его также нужно перенести в папку img. Оно имеет такое же расширение – png.

Давайте сохраним и проверим в браузере. Обновляем страницу. Как видим, фон у нас задан.

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

Похожее видео

• Обзор HTML 5. Что нового?
• Что такое валидность и XHTML? В чем отличия XHTML и HTML?
• Что такое якорь в HTML? Спецсимволы. Редакторы.

Подпишись на info-line:

Получать новые уроки на e-mail:

11 комментариев на “Как вставить изображение? Как сделать изображение фоном?”

Александр 17 апреля 2012 в 19:29 #

Неполучается вставить разные изображения, первое появляется, а второе просто как картинка «изображение», bottom, middle и top тоже не работают.

       
Добро пожаловать на мой сайт!
 
Текст
 
Альпинизм, спорт или отдых?
 
Альпинизм — вид спорта и активного отдыха. Спортивная сущность альпинизма состоит в преодолении препятствий, создаваемых природой (высота, рельеф, погода), на пути к вершине. В спортивных соревнованиях по альпинизму объектом состязания являются высота вершины, техническая сложность пройденного маршрута, его характер и протяжённость. 
Зародившись в Альпах, альпинизм именно здесь впервые стал развиваться как вид спорта. Чисто спортивные восхождения на вершины начали совершаться в Альпах ещё в начале XIX в. Особенно широкий размах развитие спортивного альпинизма получило в XX веке. 
К началу XX века все вершины Альп были покорены, и восходители стали искать новые, более сложные маршруты восхождений. Чем сложнее был маршрут, тем более спортивным считалось восхождение. Так постепенно появился, вырос и утвердился «стенной» альпинизм, то есть прохождение маршрутов по отвесным стенам гор. 
Сильнейшими альпинистами в этой области были представители альпийских государств: итальянцы, немцы, австрийцы, французы, а также англичане. Во второй половине ХХ века были пройдены такие стены в Альпах, которые до этого долгое время считались абсолютно неприступными. Это свидетельствовало о том, что спортивный класс альпинистов, безусловно, вырос. Большое значение для роста спортивного мастерства сыграло общее развитие снаряжения и техники преодоления скальных и ледовых участков. Появились более легкие и прочные верёвки из синтетических волокон, облегченные кошки, ледорубы, шлямбуры и закладки, дюралевые лесенки, усовершенствованные кухни, новые продукты, лёгкая, тёплая одежда и обувь — все это, существенно повлияло на качественный рост альпинизма.
 
 
  

Олег Зубцов 17 апреля 2012 в 20:48 #

Значения bottom , middle и top не работают, потому что для них используется атрибут valign , а не align . И если мне не изменяет память, то они работают только в таблицах. Но возможна память мне изменяет �� На счет изображений — скорее всего проблема в том, что 2-ое изображение у вас не находится в той папке, которую вы указали или называется по другому, или имеет другое расширение. Проверьте это! P.S. Чтобы вставлять в комментариях код правильно, не забывайте в атрибут lang=»» значение языка, например html или css .

Онлайн-справочник по самым часто задаваемым вопросам из темы «Как сделать?» на форуме QSP.su

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

Изображение можно использовать как фоновый рисунок в окне основного описания. Поверх этого рисунка будет отображаться весь текст и элементы html-разметки, которые мы выводим в это окно. Чтобы вставить изображение фоном в окно основного описания, необходимо прописать путь к этому изображению в переменную `$backimage`. Например, файл вашей картинки называется «солнечный_день.jpg» и лежит в папке с игрой, тогда поставить её фоном можно так:

$backimage = «солнечный_день.jpg»

Или же вы создали в папке с игрой ещё одну папку и назвали её «background», а уже в неё поместили файл изображения. Тогда поставить её фоном можно так:

$backimage = «background/солнечный_день.jpg»

Чтобы заменить фон на другой, нужно в переменной `$backimage` прописать путь к другой картинке. Чтобы совсем убрать фон, нужно переменной `$backimage` присвоить пустое значение:

view «путь к файлу картинки/картинка.jpg»
Чтобы закрыть окно предпросмотра, нужно сообщить оператору `view` пустую строку:
usehtml = 1

Изображения в html выводятся с помощью тега ``. В атрибуте `src` этого тега прописывается путь к файлу картинки. Например, мы хотим вывести изображение в окне основного описания:

* pl «»

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

pl «»

Мы можем вывести изображение в названии действия:

act » открыть дверь» :
goto «комната»
end

Или в названии предмета:

addobj » Отвёртка»

Плеер qSpider имеет больше возможностей для работы с элементами оформления, в том числе и с изображениями.

Aleks Versus’HowDo-F.A.Q.’2021- 2022

Aleks Versus’Game Adventure Making’Really Unimaginable Stories’2013- 2022

Как вставить картинку в материал, чтобы текст был поверх нее?

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

Может стоит установить другой редактор, в котором больше возможностей, если да, то какой?

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

Администратор
12 года 5 дн. назад #2253 от Wedal

ailos, нужно просто подучить html и CSS. В редакторе откройте исходный код, создайте DIV-контейнер c шириной и высотой, равными ширине и высоте вашего изображения-фона, затем через CSS или тег STYLE добавьте background(вашу картинку) к этому контейнеру. После этого вы увидите его в редакторе и сможете писать поверх картинки что захотите.

Спасибо сказали: ailos

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

ailos / Автор темы \
12 года 3 дн. назад #2271 от ailos

Спасибо большое Wedal. А есть ли редактор вместо Редактор — TinyMCE который это сам делает?
«нужно просто подучить html и CSS» — это то надо, вот и изучаем по мере необходимости, вот только не всегда понятно где искать и не всегда есть ответы по конкретному вопросу, а изучать полностью html и css нет времени. Благо есть ваш форум)))

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

Администратор
12 года 2 дн. назад #2283 от Wedal

ailos, не знаю насчет «сам делает». Мне проще и быстрее сделать так, как я описал. А вообще, лично я пользуюсь только редактором JCE. У него очень хороший функционал и настраиваемость.

Спасибо сказали: ailos

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

ailos / Автор темы \
12 года 2 дн. назад — 12 года 2 дн. назад #2286 от ailos

У меня в редакторе выдает бэграунд и текст плохо виден, на самом сайт сверху накладывается одноцветный тон, а редактор его не вставляет((( Стили можно самому создавать? Чтобы в одном стиле потом весь сайт заполнять. Именно в стиле как в Word, шрифт, размер и цвет. JCE может стили с CSS шаблона применять. Я их применил для эксперимента, потом замучился удалять, только через html удалилось. Мучаюсь, что шрифты одинаковые были. Тем более если выводятся на страницу тексты с разных статей.

Последнее редактирование: 12 года 2 дн. назад от ailos .

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