Тег img - пустой, он содержит атрибуты и у него нет закрывающего тега.
Для отображения изображения на странице используется атрибут src
. Src
появилось от source, что означает Источник. Значением атрибута src является url-адрес
изображения.
Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html
, в которой содержится index.html
с указанным выше кодом и само изображение с названием image.jpg
.
В таком случае при открытии index.html
в браузере Вы увидите данное изображение. Если же оно у Вас где-либо в другом месте (на папку выше или ниже), то вместо этого у Вас отобразится либо белое поле, либо небольшой прямоугольник с красным крестиком (не удалось загрузить изображение).
Изображения не всегда находятся в той же директории (папке), что и сам файл, поэтому прописывание путей конкретнее будет описано чуть позже.
Атрибуты тега img
Помимо src у тега img есть и другие атрибуты, которые отвечают за размеры отображаемого изображения, подпись к нему и прочее. 
src
- адрес изображения
width
- ширина изображения
height
- высота изображения
title
- подпись, которая высвечивается при наведении на изображение
alt
- альтернативный текст. Нужен для поискового робота и индексации изображений
border
- толщина границы изображения. 0 - нет границы, 1 - самая тонкая граница и тд
Адрес вставленного изображения (примеры)
Как правило, изображения хранятся не в той же папке, что и сам html-файл . Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес 
Если файл лежит на папку выше, то так
Можно также вставить изображение вообще с другого сайта, при этом не загружая его к себе в папку. Для этого у Вас должно быть стабильное подключение к интернету и примерно следующий код, в котором в адресе Вы прописываете адрес изображения в интернете:
Фоновое изображение в HTML
В качестве фонового изображения могут выступать файлы с расширениями gif , jpg , jpeg и png . В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background , в котором прописываем путь к изображению
Практически каждый популярный сайт имеет приятный внешний вид. В дизайне сайта важной частью является фон, который также называют background, который каждый из нас может создать или изменить. В этом материале я расскажу как поставить фон на сайт.
Делаем новый фон для сайтов
Для выполнения поставленной задачи, Вы можете воспользоваться одним из 4-ех способов:
- 1. Фон с одного цвета
- 2. Фон с текстуры
- 3. Фон с помощью градиента
- 4. Фон с большого изображения
Создаем фон с помощью одного цвета
Чтобы создать или изменить задний фон сайта, который состоит из одного цвета, необходимо перейти в файл style.css , в котором отыскать значение - body (оно отвечает за основное тело сайта). Теперь Вам необходимо прописать функцию background-color если ее не было и указать код цвета. В том случае, когда Вам необходимо создать задний фон для сайта белого цвета, то придется прописать следующий код:
background-color: #83C5E9 ; (синий фон, как на примере)
Вы сможете найти полный перечень цветов на сайте - (STM). Для изменения цвета, просто изменяйте значение после двоеточия и наслаждайтесь своими трудами.
Создание фона при помощи текстуры
Данный метод особенно популярен в последнее время, так как позволяет сделать красивый background для сайта. Текстуры могут быть простыми, но очень красивыми, именно поэтому их часто используют. Для того чтобы подключить любую текстуру, ее необходимо загрузить в папку image на хостинг, где установлен Ваш сайт. После этого следует прописать следующий код:
background-color: #537759;
background-image: url(images/pattern.png);
В этом коде есть знакомый нам параметр для поддержания цвета (он зеленый) и элемент, который отвечает за подключение текстуру зеленого цвета.
Делаем фон с помощью градиента
Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y ). Такая возможность позволяет нам создать любой простой фон для сайта своими руками. Для этого необходимо создать градиент шириной в 1 мегапиксель (см. картинку ниже), сохранить его как изображение и загрузить на хостинг. После этого можно прописывать необходимый код, а именно:
background-color: #83C5E9;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
В этом наборе, в порядке очереди идет функция, отвечающая за цвет фона, который мы используем для перестраховки. После этого параметр, который отвечает за подключение градиента и наконец, функция, которая отвечает за повторение градиента по оси X.
Используем большую картинку для фона сайта
Этот метод второй по популярности, так как позволяет использовать различные картинки для создания фона. Для реализации этого метода Вам необходимо лишь загрузить большое изображение в папку с картинками сайта и прописать следующий код:
background-color: #000000;
background-image: url(images/название картинки.jpg);
background-position: center top;
background-repeat: no-repeat;
Если с первыми двумя параметрами все понятно, то последние два необходимо осветить. Третья функция позволяет закрепить изображение по центру сайта, а последний параметр блокирует его повторение по всей структуре страницы.
Изменяем фон на сайтах ucoz
Те способы создания фона для сайта могут быть использованы на разных системах управления сайтами, но не на сайтах - ucoz. Для того чтобы изменить фон для сайта ucoz, необходимо перейти в панель управления сайтом, зайти в «Управлением дизайном» , а потом в «Редактирование шаблонов» .
Теперь необходимо открыть Таблицу стилей (CSS), найти строчку «body» и параметр «background» . После этого нужно скопировать ссылку, вставить ее в интернет - браузер и вы получите доступ к картинке, которая была фоном.
Для использования нового фона, необходимо просто загрузить его в Файловый менеджер. При этом проследите, чтобы название новой картинки для фона было тем же, что и до изменения. Сохраните свои работы и перейдите на сайт, для просмотра проведенной работы.
Изменяем фон для сайта на HTML
Если вы хотите фон на html сайте сделать за счет изображения, то просто в коде впишите строчку:
А если хотите сделать фон сайта при помощи цвета, то строчка должна выглядеть вот так:
На этом наш рассказ завершается. Теперь вы знаете как сделать фон для сайта. Удачных проектов!
26.11.2016 04.02.2018
Этот урок расскажет о том, как в фотографии убрать фон и вставить новый в фотошопе . Я опишу довольно простой, верный и быстрый способ замены изображения.
Часто на фото нас не устраивает фон на котором мы находимся и появляется соблазн вставить что-нибудь интересное. Сделать это можно просто, используя фотошоп. Главное выполнить замену фона нужно качественно и аккуратно, чтобы новый фон гармонично вписывался в фотографию. Поэтому необходимо тщательно подобрать фон который вы хотите вставить, чтобы он максимально подходил в композицию и был схож по цветам, чтобы потом не пришлось делать большую цвето-корректировку.
План выполнения урока
- Открыть в фотошопе фотографии на которой будет замена фона и открыть фотографию нового фона
- Вырезать старый фон на фото
- Скопировать новый фон и вставить в фото
- Подкорректировать цвета, уровни
Посмотрите на результат работы после замены фона. Фотография до и после.
Подготовка к выполнению
Если вы хотите потренироваться на этих же фотографиях, скачайте их:
Вы также можете использовать свои фотографии или найти другие в интернете.
Шаг 1
Откройте в фотошопе фотографии. Перейдите к фото на котором будем заменять фон.
.jpg)
Шаг 2
Создаем копию слоя.
Так как слой с фотографией по умолчанию находится по замком от редактирования, необходимо сделать его копию. Выделить слой и нажмите CTRL+J на клавиатуре, чтобы получилась копия. Старый слой можно скрыть, нажав на иконку глазика.
Пусть старый слой будет на всякий случай резервом, чтобы в случае ошибки была возможность вернутся к нему.
Шаг 3
Теперь нам необходимо выделить людей, а именно влюбленную парочку на фотографии.
Мы же будем использовать инструмент Быстрое выделение .
Принцип его действия прост. Вы как кистью показывается где выделять и фотошоп создает выделение.
Начните выделять людей. Для удобства можно увеличить масштаб (зажмите ALT на клавиатуре и прокрутите колесиком мыши).
Если у вас более сложная фотография и не получается выделить, то примените все знания из .
Совет: Чтобы выделение объектов получалось более ровным — необходимо менять размер кисти в процессе работы.
В конце концов вы полностью должны выделить парочку.
Шаг 4
Теперь избавляемся от старого фона. Для этого инвертируйте выделение которое у вас получилось, нажав SHIFT+CTRL+I (или меню Выделение — Инверсия ). После этого выделится все, что вокруг людей или фон. Нажмите Del (Delete ) на клавиатуре чтобы фон удалился.
Сейчас люди получились на прозрачном фоне.
Шаг 5
Вставляем новый фон. Откройте изображение с новым фоном. Выделите всю область изображения, можно нажать CTRL+A и скопируйте, нажав CTRL+C .
Перейдите на фотографию.
Создайте новый слой под фото. SHIFT+CTRL+N или просто щелкните по иконке создания слоя.
Теперь когда новый слой создан, нажмите CTRL+V чтобы вставить изображение нового фона.
Фоновое изображение вставилось, но оно может быть слишком большое по отношению к фотографии.
Поэтому нажмите CTRL+T чтобы корректировать масштаб и уменьшите изображение до нужных размером.
В итоге получится примерно так:
Шаг 6
Все отлично, но нужно немного подкорректировать глубину цвета людей, так сказать, подогнать немного к новому фону.
Для этого выберите слой с людьми и нажмите CTRL+L чтобы вызвать функцию Уровни .
Затемните немного изображение.
Теперь фотография с новым фоном выглядит реалистичнее:
На этом наши манипуляции по вставке нового фона закончены. Как видите ничего сложного в этом нет и фотошоп вам поможет это сделать за 5-10 минут при усердной работе.
Если у вас появятся проблемы, то задавайте вопросы в комментариях, мы поможем в каждом индивидуальном случае.
В этой записи я расскажу, как обычно устанавливают фон на сайт с применением HTML кода.
Также покажу отличный зарубежный сервис по подбору бесшовных фонов.
Сейчас настройки сайта делаются легче и удобнее через CMS консоли, таких как WordPress.
Бывает необходимо менять шаблоны продающих сайтов, в этом и поможет данная статья.
Если вы не знаете, что такое ХТМЛ , то это обобщенно можно назвать языком сайтов или набором правил по которым генерируются сайты.
Например вы видите картинку на сайте, когда в HTML коде страницы это может выглядеть так:
Установка сплошного цвета на фон страницы.
Для того, чтобы установить фон в виде сплошного цвета , нужно в тег добавить атрибут bgcolor.
< html >
< head >
< title >Заголовок страницы.
< body bgcolor = "#ffcc00" >
Вы можете данный код вставить в текстовый файл и сохранить с расширением.html. Далее открыть любым браузером и увидите результат.
Как вы наверное догадались, цвет фона появляется за счет кода цвета в атрибуте bgcolor= «значение» , который можно подобрать перейдя по этой ссылке.
Установка картинки на фон HTML страницы.
Для того, чтобы установить на фон изображение , можно использовать атрибут background в теге .
< html >
< head >
< title >Заголовок страницы.
< body background = "http://сайт/images/mlmsecret.jpg" >Привет. Этом моя первая страница.
Вы можете заметить, что атрибут background равен пути файла, который используется в качестве фона.
Чтобы быстро сменить фон или любую картинку на странице, достаточно указать новый путь до вашего файла используя текстовый редактор.
Чтобы узнать прежний путь, необходимо на странице с картинкой, нажать по картинке правой кнопкой и кликнуть по «Копировать URL картинки.» таким образом вы увидите название картинки/фона. Затем вы можете просто заменить прежнюю картинку своей, используя то же название файла.
Это были простейшие основы по настройке фона в html , теперь самое интересное. 🙂
В настройке любого сайта, помимо функционала, очень важно оформление. Именно это задаёт собственный стиль и дизайн той или иной компании либо персоны, для которой создаётся сайт. Настроить цвет фона и его изображение не составит труда, следуя инструкциям в данной статье.
Откройте свой HTML файл по средствам блокнота либо любого другого текстового редактора, к которому вы привыкли. Для примера возьмём примитивную страницу сайта с минимумом текста. Открыть свой файл вы можете с помощью любого браузера.
Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета. Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names
- style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”
Обратите внимание, что у пользователей, имеющих большее разрешение экрана, ваше изображение будет дублироваться вниз и вправо. Выглядеть это будет не хорошо, если картинка не однотонная. Для исправления этого параметра существуют специальные команды.
- background-repeat : “Значение “. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
- background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll “, то изображение будет прокручиваться вместе с сайтом. “fixed ” – при прокрутке фон остаётся неизменным;
- background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain ” – заполняет страницу изображением по длинной стороне и “cover ” – заполняет страницу изображением по ширине.
Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.
