Как добавить фоновое изображение в HTML

Чтобы добавить изображение на веб-страницу, понадобится HTML, а чтобы картинку сделать фоном веб-страницы, необходимы HTML и CSS. HTML (язык гипертекстовой разметки) является стандартизированным языком разметки документов, который указывает браузеру, что отображать на веб-странице.^{[1]XИсточник информации} CSS (каскадные таблицы стилей) — это язык описания внешнего вида документа, который используется для изменения внешнего вида и макета веб-страницы.^{[2]XИсточник информации} Вам понадобится изображение, которое вы установите в качестве фона веб-страницы.

Часть 1

Часть 1 из 5:

Как создать папку и файл

Загрузить PDF

1
Создайте папку для хранения HTML-файла и фонового изображения. Присвойте папке имя, по которому ее легко будет найти.
- Имя папки может быть любым, но лучше, если оно будет состоять из одного короткого слова.
2
Скопируйте фоновое изображение в созданную папку.
- Если вы не очень заботитесь о том, как ваш сайт будет открываться на старых устройствах или на устройствах с медленным интернет-соединением, используйте изображение с более высоким разрешением. В качестве фона также подойдет изображение с простым повторяющимися узором, потому что на нем будет хорошо виден текст.
- Если у вас нет изображения, бесплатно скачайте его в интернете и скопируйте в созданную папку.
3
Создайте HTML-файл. Откройте текстовый редактор, а затем создайте новый файл. Сохраните его как index.html.
- Можно использовать любой текстовый редактор, например, Блокнот в Windows или TextEdit в Mac OS X.
- Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, скачайте редактор Atom, который поддерживает Windows, macOS и Linux.
- Если вы используете TextEdit, перед тем, как начать писать HTML-код, откройте меню «Формат» и выберите «Конвертировать в простой текст». В этом случае HTML-файл будет правильно загружаться в веб-браузере.
- Мощные текстовые редакторы, такие как Microsoft Word, не очень хорошо подходят для написания HTML-кода, потому что они добавляют невидимые символы и форматирование, которые могут воспрепятствовать правильному отображению содержимого HTML-файла в веб-браузере.
Реклама

Часть 2

Часть 2 из 5:

Как написать HTML-код

Загрузить PDF

1
Скопируйте и вставьте стандартный HTML-код. Выделите и скопируйте приведенный ниже HTML-код, а затем вставьте его в открытый файл index.html.
```
<!DOCTYPE html><html><head><title>Заголовок страницы</title><style>body {background-image: url(" ");} </style></head><body></body></html>
```
В файле index.html найдите строку background-image: url(" ");. Поставьте курсор внутри скобок, а затем введите имя файла фонового изображения. Обязательно укажите расширение файла фонового изображения.
Реклама

background-image: url("background.png");

^{[3]XИсточник информации}

Сохраните HTML-файл.

Часть 3

Часть 3 из 5:

Как просмотреть HTML-файл

Загрузить PDF

1
Откройте HTML-файл в веб-браузере. Щелкните правой кнопкой мыши по файлу index.html и откройте его в выбранном веб-браузере.
- Если нужная картинка не открылась в браузере, в окне текстового редактора проверьте, правильно ли введено имя файла с изображением.
- Если в веб-браузере отобразился HTML-код, а не фоновая картинка, файл index.html был сохранен как документ в формате RTF. В этом случае отредактируйте HTML-файл в другом текстовом редакторе.
В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
Реклама

Часть 4

Часть 4 из 5:

Как понять HTML-код

Загрузить PDF

HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
Качественный HTML-код должен начинаться с <!DOCTYPE html>. Этот тег сообщает веб-браузеру, что HTML-файл является HTML-файлом.
В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
Он содержит текст, который отображается в строке заголовка окна браузера, а также текст, отображаемый на вкладке браузера.
Он указывает на содержимое CSS. Все, что находится между тегами <style>, является CSS-кодом.
Любой текст, расположенный между тегами <body>, будет отображаться так, как введен (если это не код HTML или CSS).
В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
Реклама

Часть 5

Часть 5 из 5:

Как понять CSS-код

Загрузить PDF

В файле index.html код CSS, расположенный между тегами <style>, указывает веб-браузеру на фоновое изображение с определенным именем, которое находится между тегами <body>.

3

body {background-image: url("background.png");}

4
Запомните части кода CSS. Стили CSS состоят из двух частей: селектора и объявления.^{[4]XИсточник информации}
5
Запомните, что такое объявление CSS. Объявление CSS состоит из двух частей: свойства и значения. Контент в фигурных скобках
background-image является свойством, а url("background.png") является значением.^{[5]XИсточник информации}
Реклама