Как вставить фон картинку в html: Как добавить фоновый рисунок на веб-страницу?

Как установить фон для сайта?

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

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

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

Он отображается в списке поисковика Гугл на первом месте поэтому в работе рекомендую именно его. Также вы можете найти большое количество других сайтов если наберете в поисковике примерно такие словосочетания «background image patterns», «download background image for site» и так далее.

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

В этой статье я выбрал тему и называется она tweed. Скачать вы можете ее здесь.

Вот как она выглядит в небольшом варианте на сайте

Далее нам нужно создать небольшой документ с расширением html. Делать его мы будем с помощью очень хорошей программы для работы с веб документами – NOTEPAD++

В начале создаем новый документ в программе

И обязательно перед его редактированием сохраняем под именем, например index.html и создаем папку на компьютере, например можно создать папку «My site» и уже в нее помещать наш индексный файл (index.html).Лучше создавать папку на английском языке, чтобы не было путаницы у браузера и некорректного отображения сайта.

Помимо этого в главной папке «my site» вам нужно создать еще две подпапки, в одно мы будем помещать все наши картинки и называться она будет «images», а другой дадим название «CSS» (каскадные таблицы стилей) и поместим туда файл style.css

Теперь можно производить работу в нашем документе. Следующим шагом нам нужно вставить заготовку html кода, так называемый, основной каркас с которого все начинается. Его скачать вы можете прямо тут. Далее скопируем все из этого файла и перенесем в файл нашей программы. В итоге должно получиться что-то вроде следующего

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

В теге title можете поменять название документа, например можете сделать «Моя первая веб страница». И убедитесь что ваша страница сохранена в кодировке 
UTF-8

В противном случае если будет стоять другая кодировка, например windows-1251, то текст документа в браузере будет отображаться иероглифами. Поменять кодировку вы можете в разделе «Кодировки – Кодировать в Utf-8 (без BOM)» на панели инструментов программы.

И не забываем каждое наше действие сохранять.

Теперь приступим к созданию фона в нашем документе. Сразу скажу, что все наши действия над оформлением веб страницы будут происходить при помощи каскадных таблиц стилей, называемых CSS, т.е каркас мы будем делать в html, а приводить его к красивому стилю и виду будем с помощью CSS.

Таким образом вы приучите себя к правильному порядку действий. Не стоит прямо в html документе заниматься стилями, лучше вынесите их в отдельный документ.

Для этого в нашей программе Notepad++ создадим еще один файл и назовем его Style.css и сохраним его в новой папке css, которая будет находиться в общей папке «My site»

Отлично! Чтобы наш браузер правильно отобразил страницу нам необходимо подключить таблицу стилей в наш html документ. Вот как это делается

Прямо целиком вводим всю строку над тегом title. Этой строкой мы подключаем нашу таблицу стилей.
Теперь мы для нашего тега body определим фоновую картинку через таблицу стилей. Для этого мы в документе style.css создаем следующую структуру (прямо также берете и пишите в коде программы)

Здесь немного поясню. У атрибута background есть много значений, одно из которых background-repeat, которое отвечает как раз за то, чтобы растянуть нашу фоновую картинку для веб документа.

BACKGROUND-REPEAT:

REPEAT //(растиражировать по горизонтали и вертикали)

REPEAT-X // (растянуть только по горизонтали)

REPEAT-Y //(растянуть только вертикали)

NO-REPEAT //(не повторять фоновую картинку)

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

Также специально для вас сделал подборку сайтов где вы можете скачать красивый фон для сайта

BRUSHEASY.COM

[urlspan]COLOURLOVERS.COM[/urlspan]

[urlspan]DESIGNMOO.COM[/urlspan]

WEBDESIGNLEDGER.COM

[urlspan]DINPATTERN.COM[/urlspan]

В конце этой статьи я привел небольшой авторский видеоурок, чтобы вы смогли проделать эти действия вместе со мной. Если есть вопросы задавайте их, с удовольствием на них отвечу. Всем хорошего дня и удачи!

Как добавить фоновое изображение в HTML-емейл — Stripo.email

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

Просто выбирая фото и добавляя фоновые изображения в HTML-емейл, вы задаете тон всего сообщения.

Все, что нам нужно сделать, чтобы создать эффективную и продающую емейл-кампанию, — чтобы этот тон был жизнерадостным.

Посмотрите наше короткое видео с основной информацией о типах фона и о том, как добавить их в Stripo.

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

Я искала в сети хоть какие-то подробности о фоновых изображениях для HTML-емейлов, но все, что я нашла, — как добавить фон в исходящий емейл в Gmail или Outlook и как вносить изменения в коды HTML.

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

Почему тема статьи называется “Как добавить фоновое изображение в HTML-емейл»? Дело в том, что в других редакторах вам нужно иметь навыки работы с кодом HTML, чтобы вставить фон в полосу или применить его для всего сообщения. Но только не в Stripo. Мы упростили этот процесс для вашего удобства — и больше не нужно вносить никаких изменений в HTML-код.

Что нужно знать, прежде чем добавлять фоновое изображение в ваш HTML-емейл

Проверьте отображение ваших емейлов

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

Именно поэтому перед отправкой емейлов очень важно тестировать их отображение с помощью Litmus  или любого аналогичного сервиса. Они протестируют ваш шаблон для более чем 70 приложений и устройств, предоставят вам скриншоты.

В этом примере мы видим, что фон в виде белой рамки не отображается в Outlook 2003, равно как в Outlook 2016 и Windows 10 Mail, но отображается в версии 2007 года.

Что делать, если изображение не отображается:

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

Примечание: фоновый цвет емейла по умолчанию белый.

Разновидности фоновых изображений

Фоновые изображения для полос

Очень немногие конструкторы шаблонов позволяют встраивать фоновые изображения в отдельные блоки. Stripo.email — один из них.

Мне нравится этот пример за простое, но изысканное изображение.

Просто посмотрите, как легко добавить фоновое изображение в емейл с помощью Stripo:

1. мы вставили блоки: дополнительное изображение, текст, можно также добавить “кнопку” или таймер обратного отсчета поверх фона;

2. выбрали цвет фона для всей полосы;

3. применили “фоновое изображение” для блока.

Примечание: отцентрируйте его с помощью кнопки “Центрирование”, используйте опцию “Повторить”, если ширина или высота изображения слишком малы, чтобы заполнить всю полосу.

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

Это важно: добавленное изображение можно отредактировать в нашем встроенном фоторедакторе.

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

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

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

Как это сделать в Stripo:

1. загрузите изображение, которое вы выбрали, либо используйте любую картинку из нашего встроенного банка изображений;

2. включите все опции.

Цвет фона в качестве альтернативы фоновому изображению

Хорошая новость: установить соответствующий цвет в качестве фона намного проще. И он почти всегда корректно отображается в любых емейл-клиентах и на всех устройствах. Но будьте осторожны с Microsoft Outlook. Вам все равно нужно проверить отображение с помощью Litmus.

Здесь вы можете использовать все богатство воображения.

Например, компания Outline всегда помещает новости на цветной фон. Кроме того, применяются контрастные цвета шрифта, но не черный текст.

Применять ли разные цвета для отдельных блоков или всего емейла? Решать вам.

Корпорация Samsung помещает большую часть своих емейлов на черный фон и применяет контрастную кнопку CTA. Выглядит очень классно.

Фоновое изображение для всего емейла

Когда мы используем одно фоновое изображение для всего емейла? Всегда, когда хотим. Потому что емейлы с фоновыми изображениями выглядит более завершенными. В качестве фона используйте тематическое изображение. Если мы говорим о еде, добавьте фото овощей и фруктов; если о футболе, то почему бы не использовать футбольное поле или мяч?

Чем отличается изображение баннера от фонового изображения емейла? Баннер — это то, что клиенты видят как основное изображение вашего сообщения, обычно с текстом поверх него. А фоновое изображение они видят только на десктопных устройствах. На большинстве мобильных девайсов эти изображения вообще не отображаются.

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

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

Вы можете размещать поверх них баннеры, образцы вашей продукции, контактную информацию, рамки, футеры, хедеры и т.д.

Как установить фоновое изображение в шаблоне емейла с помощью редактора Stripo.email:

1. на панели инструментов выберите “Внешний вид”;

2. нажмите “Общие”;

3. включите опцию “Фоновое изображение”;

4. загрузите понравившееся изображение;

5. включите “Повтор” и “Центрировать”.

Примечание: поскольку некоторые емейл-клиенты не отображают фоновое изображение, вы можете установить цвет фона по умолчанию.

Правила, которые следует соблюдать

При добавлении фоновых изображений в емейл-рассылку важно соблюдать простые правила:

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

• обратитесь за помощью к дизайнерам, фотографам или найдите сайт с широким выбором изображений. Не нарушайте авторские права;

• добавляйте только одно изображение как фон для всего емейла;

• выбирайте только подходящие, но контрастные цвета шрифтов для текста;

• включайте опцию “Адаптивное изображение”. Это поможет корректно отображать изображения на мобильных и десктопных устройствах.

Раньше нам нужно было разбираться в HTML-коде, чтобы добавить фоновое изображение в шаблон емейла. Сейчас в редакторе Stripo.email нам вообще не нужно вносить никаких изменений в код. Нам даже не нужно знать, что это вообще такое. ?

Система упростила весь процесс и облегчила нашу работу.

Краткие итоги

• теперь упоминание “HTML” связано скорее с качеством ваших емейлов, чем с использованием его для создания писем;

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

• изображения должны иметь бесшовную структуру. Вы можете найти множество таких картинок в интернете;

• вставляйте разделители, чтобы отделить блоки вашего емейла;

• устанавливайте цвет фона, как альтернативу (fallback), если картинка на загрузится у получателя, например, в Microsoft Outlook;

• тестируйте сообщения перед отправкой.

Используйте наши адаптивные HTML-шаблоны, добавляйте фон и радуйте клиентов красивыми рассылками.

Желаю вам всего наилучшего и успешных рассылок!

Как вставлять картинки и производить их позиционирование в HTML

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

Материалы по теме:

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

Основные форматы изображений, которые используются при создании web страниц это JPG, GIF и PNG. Для работы с изображениями и подготовки их к публикации в интернет можно пользоваться графическим редактором Photoshop. В нем есть средства при помощи, которых очень легко можно пережать изображение и уменьшить его размер, но при этом сохранить качество.Это очень важно для изображений, публикуемых в интернете.

Если вам нужны различные графические элементы то можете зайти в раздел Графика для сайтов, там вы найдете уроки посвященные созданию web графики.

Ну а теперь о том как вставить картинку в html документ. Для вставки изображений используется тег <img>. Этот тег не имеет закрывающего тега. Вставка изображений при помощи его осуществляется следующим образом:

 <img src= "адрес изображения">

В кавычках необходимо указать путь к этому изображению.

Если изображение лежит в той же папке что и страница, в которую оно вставляется, то это будет выглядеть так:

Если же изображение лежит, например, в папке images то путь к нему будет выглядеть так:

<img src= "images/foto.jpg">

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

 <img src= "http://webmastermix.ru/images/creation-site/lessons-HTML/images-in-html.jpg">

Для того чтобы вы лучше поняли как это работает я предлагаю вам в какую либо папку на вашем компьютере сохранить изображение которое вы видите слева. И создать в той же папке html документ, содержащий код расположенный ниже. Если вы не знаете, как создать html файл тогда смотрите урок Основы HTML.

 
<html>
<head>
<title>Моя первая страница </title>
</head>
<body>
<img src= "foto.jpg">
Этот текст я написал специально для того чтобы вы могли видеть как располагается изображение на странице относительно текста. Далее мы разберем различные атрибуты при помощи, которых вы сможете по-разному позиционировать изображение.
</body>
</html>

После того как вы откроете созданную страницу в браузере то увидите что картинка располагается не совсем красиво. Поэтому далее мы разберем, каким образом можно позиционировать изображение. Здесь нам на помощь приходит уже знакомый вам по уроку Параграфы и выравнивание текста в HTML атрибут align=»».

Существуют следующие значения этого атрибута:

 <img src= "foto.jpg" align="left">

В этом случае картинка будет прижата к левому краю, а текст будет обтекать ее справа.

 <img src= "foto.jpg" align="right" >

Картинка будет прижата к правому краю, а текст будет обтекать ее слева.

 <img src= "foto.jpg" align="bottom">

В этом случае текст будет располагаться в низу картинки. Так он располагается по умолчанию, если атрибут align не прописан.

 <img src= "foto.jpg" align="middle">

Текст будет располагаться по середине картинки. Это позиционирование хорошо использовать, если нужно маленькое изображение позиционировать по центру строки текста, например кнопку.

 <img src= "foto.jpg" align="top">

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

Следующий атрибут, определяющий положение изображения называется vspace=»». Он определяет расстояние между текстом и изображением по вертикали. В кавычках указывается любое необходимое значение в пикселях.

Например:

 <img src= "foto.jpg" align="left" vspace="10">

Расстояние между текстом и изображением по горизонтали определяется атрибутом hspace=»».

Например:

 <img src= "foto.jpg" align="left" vspace="10" hspace="20">

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

 <img src= "foto.jpg" align="left">

Следующий атрибут очень важен в плане поисковой оптимизации вашей страницы. Это атрибут alt=»» где в кавычках указывается описание картинки. Поисковые системы обращают внимание на то, что написано между кавычек. Это описание будет отображаться, если подержать курсор над картинкой несколько секунд. Для нашей картинки можно прописать так:

 <img src= "foto.jpg" align="left" alt=”Фотография девушки”>

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

 <img src= "foto.jpg" align=”left” alt=”Фотография девушки” border="2">

Как вы уже наверняка заметили все атрибуты можно использовать как по отдельности, так и вместе. Окончательный код нашей картинки будет следующий:

 <img src= "foto.jpg" align="left" vspace="10" hspace="20" alt="Фотография девушки" border="2">

Кроме этого изображение можно не просто вставлять на страницу но и использовать его в качестве фона для страницы. Для того чтобы определить картинку в качестве фона для нашей страницы в открывающем теге <body> необходимо прописать атрибут background=»» где в кавычках указать адрес картинки подобно тому как мы это рассматривали выше.

К примеру зададим фон для вашей картинки. Для этого сохраните изображение фона, которое вы видите с лева, в ту папку где лежит ваша ранее созданная страница. Затем в теге <body> пропишите следующее:

 <body background="fon.gif">

Полный код страницы будет следующий:

 
<html>
<head>
<title>Моя первая страница</title>
</head>
<body background="fon.gif">
<img src= "foto.jpg" align="left" vspace="10" hspace="20" alt="Фотография девушки" border="2">
Этот текст я написал специально для того чтобы вы могли видеть как располагается изображение на странице относительно текста. Далее мы разберем различные атрибуты при помощи, которых вы сможете по-разному позиционировать изображение.
</body>
</html>

Таким образом, мы расположили наше первое изображение слева, тест его обтекает справа, задали отступы между изображением и текстом в 10 пикселей, указали его высоту и ширину, а в качестве фона задали еще одно изображение.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 13 Январь 2010

Просмотров: 57512

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img>. Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt:

<img src="image.jpg" alt="Альтернативный текст">

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

<img src="image.jpg" alt="Альтернативный текст">

Единицами измерения по умолчанию служат пиксели, и в html-коде для ширины и высоты изображения их указывать не нужно.

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

то путь будет состоять из названия изображения и его расширения:

<img src="car.jpg" alt="">

Если картинку перенести в папку img:

то путь к ней будет начинаться с названия папки, в которой она находится:

<img src="img/car.jpg" alt="">

Если файл index.html поместить в папку files:

то путь к изображению будет начинаться с конструкции ../:

<img src="../img/car.jpg" alt="">

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

<img src="../../img/car.jpg" alt="">

и т.д.

Всплывающая подсказка

В этом уроке познакомимся с еще одним очень полезным атрибутом, который можно применять практически ко всем тегам – это атрибут title, он служит для отображения всплывающей подсказки. Например:

<img src="car.jpg" alt="Альтернативный текст" title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка:

Видео к уроку

Узнаем как без проблем вставить картинку в HTML

Для создания веб-страниц и даже целых сайтов, как известно, используется специальный язык разметки HTML (Hypertext Markup Language), но без фотографий и различных изображений каждый сайт представлял бы собой просто структурированный и скучный текст. Именно поэтому для добавления изображений на сайт используется специальный код, который предельно прост в использовании и позволяет как вставить картинку в HTML в конкретное место на странице, так и использовать ее в качестве фона.

С чего начать?

Для того чтобы написать код, нужно определиться, в какой программе это сделать. Сейчас их существует огромное количество, одной из самых известных является NotePad++. Она обладает рядом функций, очень полезных при написании кода, позволяет выявлять ошибки и не запутаться в тегах. Однако если у вас нет возможности прибегнуть к помощи специализированных программ, можете воспользоваться простым блокнотом, код от этого не изменится.

Какой тег нам понадобится

Определившись с программой для написания кода, нужно понять, что в ней писать, как вставить картинку в HTML в блокноте или любой другой программе. Начать следует с тега <img / >. Именно этот тег объявляет картинку в HTML-документе, он одиночный и не требует закрытия.

А что дальше?

Мы объявили в коде, что собираемся использовать изображение, но мы его еще не указали. Так как вставить картинку в HTML? Для этого нам понадобится атрибут src, который используется с нашим тегом. Этот атрибут задает местонахождение нашей картинки вне зависимости от того, находится ли она на каком-то сайте либо на нашем компьютере.

• Если изображение будет располагаться на стороннем сайте, то наш код будет выглядеть следующим образом:

<img src="//coder-booster.ru/images/main-logo.png" />

• В случае же нахождения картинки в той же папке, что и наш HTML-файл, код будет выглядеть так:

<img src="название картинки.jpg" />

Альтернативный текст

У тега <img /> есть еще один атрибут — alt. Используют его для того, чтобы в браузере было видно описание картинки, если по какой-либо причине само изображение не может быть загружено. Его наличие желательно также для того, чтобы слабовидящие люди могли знать, что за изображение присутствует на сайте, ведь текст, находящийся в значении этого атрибута, озвучивается программами чтения с экрана. Итоговый код с атрибутами src и alt будет выглядеть так:

<img src="название картинки.jpg" alt="описание картинки" />

Всплывающие подсказки

Помимо прочего, у тега <img /> есть еще один атрибут title. Благодаря этому атрибуту при наведении курсора мыши на изображение альтернативный текст будет отображен во всплывающей подсказке. Однако эта функция поддерживается только браузером Internet Explorer, чтобы такие подсказки всплывали в других браузерах, потребуются специальные плагины. Всплывающие подсказки используются вместе с атрибутом alt, они не обязательны, но при их использовании код будет выглядеть следующим образом:

<img src="название картинки.jpg"   alt="описание картинки" title="всплывающее описание"  />

Размер изображения

С тем, как вставить картинку в текст с HTML, мы разобрались. Но что если мы хотим сделать изображение чуть больше или меньше? Для этого в HTML предусмотрены специальные атрибуты: width (ширина) и height (высота). Значения данных атрибутов могут быть как в процентах, так и в пикселях. Если задать ширину в пикселях, а высоту в процентах, то код примет следующий вид:

<img src="название картинки.jpg" />

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

Картинка в качестве фона

А что если мы хотим использовать изображение не в тексте, а вставить картинку на фон в HTML, как это сделать? Для этого нам понадобится тег <body>, без которого не обходится ни один HTML-документ. Именно в него заключено все видимое содержимое документа, а его атрибуты могут задавать размер, цвет шрифта и в том числе задний фон. Вставить картинку в HTML как изображение фона очень просто, для этого нам нужно будет использовать атрибут background. Выглядеть этот код будет следующим образом:

<body background="изображение для фона.jpg">  ...  </body>

При формировании фона веб-страницы лучше использовать такие изображения, с помощью которых можно достигнуть интересных зрительных эффектов, но которые не мешали бы нормально воспринимать текст. Однако стоит иметь в виду, что, возможно, вам придется поменять размер и цвет вашего шрифта, чтобы облегчить его прочтение.

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

Иногда необходимо, чтобы картинка была рядом с текстом, который огибал бы ее тем или иным способом. Но если вставить картинку просто внутрь строки, то графически это будет выглядеть некрасиво, текст будет разбит неаккуратно. Так как вставить картинку в HTML, чтобы изображение органически вписывалось в дизайн страницы? Для этого нам необходим атрибут align тега <img />. Этот атрибут может принимать два значения: left и right.

При использовании значения left изображение будет размещено слева от текста, а при использовании атрибута right, соответственно, справа. Выглядеть этот код будет так:

<img src="название картинки.jpg" align="left" />    или    <img src="название картинки.jpg" align="right" />  

Если же нам будет необходимо, чтобы текст был расположен между двумя изображениями, код будет выглядеть следующим образом:

<img src="первая картинка.jpg" align="left" />    <img src="вторая картинка.jpg" align="right" />  

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

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

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

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

В прошлом видеоуроке, Вы узнали, что такое списки и линии. А в этом мы рассмотрим изображения: их форматирование и атрибуты.

Как вставить изображение в HTML?

Перейдем в папку нашего сайта. Я для вас подготовил изображение info-line.png. Сначала создадим папку с именем img. Открываем ее, и переносим туда наше изображение. Картинка имеет формат png. Это можно увидеть либо внизу, либо при наведении курсора, либо в свойствах.

Перейдем в код. Давайте вставим изображение в текст. Делается это с помощью тега <img>. В кавычках указывается путь до изображения. В нашем случае: img/info-line.png. Хочу отметить, что вводить путь нужно в соответствии с регистром, то есть, если у вас изображение прописано с большой буквы «I», то так его нужно и вводить, иначе могут возникнуть неполадки.

 <img src="img/info-line.png">
 

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

 <img src="http://info-line.net/img/info-line.png">
 

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

Атрибуты тега <img>

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

 <img src="img/info-line.png" align="left">
 

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

 <img src="img/info-line.png" align="left" alt="Info-line">
 

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

 <img src="img/info-line.png" align="left" alt="Info-line" >
 

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

 <img src="img/info-line.png" align="left" alt="Info-line" border="2" >
 

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

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

 <img src="img/info-line.png" align="left" alt="Info-line" border="2" hspace="2" vspace="5">
 

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

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

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

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

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

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

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

 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
 

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

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

Как вставить картинку и текст в отдельный блок

В этой статье рассмотрим, как в отдельный блок вставить текст и картинки, и разместить их, при помощи CSS

Для примера используем созданную в предыдущих статьях заготовку каркаса с шапкой сайта.

Возьмём html код блока content.


<div></div>

Вставим в блок content два абзаца текста.


<div
  <p>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.</p>

  <p>Если вам что-то будет непонятно,
спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

Есть два абзаца. Теперь посмотрим, как в блок content вставить изображения.

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

Если сайт на виртуальном хостинге, то изображения нужно загружать на него, в соответствующую папку images.

Размещать будем три картинки. Одну по центру в начале статьи, другую в первом абзаце слева, и третью во втором абзаце справа.

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


<div>
  <img src="images/i10.png">
    <p><img src="images/i11.jpg">Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
    <p><img src="images/11.jpg">Если вам что-то будет непонятно, спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

Получилось вот так.

Теперь, свойствами CSS, распределим изображения по местам.

.center{ /*Звёздочка*/
margin: 0 0 10px 330px; /*Внешние отступы*/
}
.left{ /*Чёртик слева*/
float: left; /*Обтекание справа*/
margin: 10px 10px 10px 10px;
}
.right{ /*Чёртик справа*/
float: right; /*Обтекание слева*/
margin: 10px 10px 10px 10px;
}

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

Я бы здесь добавил ещё красную строку.


p{
  text-indent: 30px;
}

На следующей странице мы рассмотрим относительное позиционирование, и будет ещё интереснее. И совсем не сложно.

Перемена

Учитель музыки Сашеньке:
— Предупреждаю, если ты не будешь вести себя как следует, я скажу твоими родителям, что у тебя есть талант.

Как сделать шапку сайта < < < В раздел > > > Абсолютное позиционирование (position:absolute)
 

изображений в формате HTML — Изучите веб-разработку

Вначале Интернет был просто текстом, и это было действительно довольно скучно. К счастью, вскоре появилась возможность встраивать изображения (и другие более интересные типы контента) внутрь веб-страниц. Можно рассмотреть и другие типы мультимедиа, но логично начать с скромного элемента , который используется для встраивания простого изображения на веб-страницу. В этой статье мы подробно рассмотрим, как его использовать, включая основы, аннотирование с помощью подписей с использованием

  

  

  
 Тираннозавр на выставке в музее Манчестерского университета.