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

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

Как добавить фоновое изображение в HTML Загрузить PDF Информация об авторе

Источники

Загрузить PDF X

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а). Количество просмотров этой статьи: 69 552.

В этой статье: Как создать папку и файл Как написать HTML-код Как просмотреть HTML-файл Как понять HTML-код Как понять CSS-код Показать еще 2... Показать меньше... Дополнительные статьи Источники

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

Часть 1 Часть 1 из 5: Как создать папку и файл Загрузить PDF
  1. 1 Присвойте папке имя, по которому ее легко будет найти.
    • Имя папки может быть любым, но лучше, если оно будет состоять из одного короткого слова.
  2. 2
    • Если вы не очень заботитесь о том, как ваш сайт будет открываться на старых устройствах или на устройствах с медленным интернет-соединением, используйте изображение с более высоким разрешением. В качестве фона также подойдет изображение с простым повторяющимися узором, потому что на нем будет хорошо виден текст.
    • Если у вас нет изображения, бесплатно скачайте его в интернете и скопируйте в созданную папку.
  3. 3 Откройте текстовый редактор, а затем создайте новый файл. Сохраните его как 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. 1 Выделите и скопируйте приведенный ниже HTML-код, а затем вставьте его в открытый файл index.html. <!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> <style> body { background-image: url(" "); } </style> </head> <body> </body> </html>
  2. 2 В файле index.html найдите строку background-image: url(" ");. Поставьте курсор внутри скобок, а затем введите имя файла фонового изображения. Обязательно укажите расширение файла фонового изображения. Реклама
    Указанная строка должна выглядеть как-то так: background-image: url("background.png");
    Если ввести просто имя файла (без его URL-адреса или пути к нему), веб-браузер будет искать картинку в папке с HTML-файлом. Если изображение находится в другой папке, введите полный путь к файлу. [3] X Источник информации
  • Сохраните HTML-файл.
    • Часть 3 Часть 3 из 5: Как просмотреть HTML-файл Загрузить PDF
    1. 1 Щелкните правой кнопкой мыши по файлу index.html и откройте его в выбранном веб-браузере.
      • Если нужная картинка не открылась в браузере, в окне текстового редактора проверьте, правильно ли введено имя файла с изображением.
      • Если в веб-браузере отобразился HTML-код, а не фоновая картинка, файл index.html был сохранен как документ в формате RTF. В этом случае отредактируйте HTML-файл в другом текстовом редакторе.
    2. 2 В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки. Реклама
    Часть 4 Часть 4 из 5: Как понять HTML-код Загрузить PDF
    1. 1 HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
    2. 2 Качественный HTML-код должен начинаться с <!DOCTYPE html>. Этот тег сообщает веб-браузеру, что HTML-файл является HTML-файлом.
    3. 3 В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
    4. 4 HTML-код состоит из открывающих и закрывающих тегов. Например, тег <body> является открывающим, а </body> — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
    5. 5 Он содержит текст, который отображается в строке заголовка окна браузера, а также текст, отображаемый на вкладке браузера.
    6. 6 Он указывает на содержимое CSS. Все, что находится между тегами <style>, является CSS-кодом.
    7. 7 Любой текст, расположенный между тегами <body>, будет отображаться так, как введен (если это не код HTML или CSS).
    8. 8 В окне текстового редактора поставьте курсор между тегами <body> </body> и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки. Реклама
    Часть 5 Часть 5 из 5: Как понять CSS-код Загрузить PDF
    1. 1 В файле index.html код CSS, расположенный между тегами <style>, указывает веб-браузеру на фоновое изображение с определенным именем, которое находится между тегами <body>.
    2. 2
      3. 3 body { background-image: url("background.png"); }
    3. 4 Стили CSS состоят из двух частей: селектора и объявления.[4] X Источник информации
        В нашем примере body – это селектор, а background-image: url ("background.png") — это объявление.
        Селектором может быть любой тег HTML.
        Объявления всегда заключаются в фигурные скобки {}.
    4. 5 Объявление CSS состоит из двух частей: свойства и значения. Контент в фигурных скобках background-image является свойством, а url("background.png") является значением.[5] X Источник информации
        Свойство описывает предмет (в нашем примере это фоновый рисунок), а значение — стиль предмета (в нашем примере это файл с картинкой).
        Свойство и значение всегда разделяются двоеточием (:).
        CSS-объявления всегда заканчиваются точкой с запятой (;).
      Реклама

    Дополнительные статьи

    Каксоздать простую веб страницу в Блокноте Каксоздать простую веб страницу с помощью HTML Какзадать цвет фона в HTML Каксоздать ссылку Какначать wiki–сайт Каксоздать ссылку на электронную почту в HTML Какбесплатно разместить свой сайт в Интернете Какзадать ширину и высоту картинки с помощью HTML Какиспользовать теги цвета шрифта в HTML Каксоздать веб–хостинг дома Каксделать сайт в Word Каксоздать ссылку для оплаты через PayPal Каквставить изображение в HTML Каксоздать веб—сайт с использованием сайтов Google Реклама

    Источники

    1. ↑ http://www.w3schools.com/html/html_intro.asp
    2. ↑ http://www.w3schools.com/css/css_intro.asp
    3. ↑ http://www.w3schools.com/html/html_images.asp
    4. ↑ http://www.w3schools.com/css/css_syntax.asp
    5. ↑ http://www.w3schools.com/css/css_background.asp

    Об этой статье

    wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а). Количество просмотров этой статьи: 69 552. Категории: Веб–дизайн и разработка сайтов На других языках Английский Испанский Итальянский Португальский Немецкий Индонезийский Французский Нидерландский Тайский Арабский Корейский Вьетнамский Японский Хинди Китайский Турецкий Персидский
    • Печать
    Эту страницу просматривали 69 552 раза.

    Была ли эта статья полезной?

    Да Нет Реклама Куки помогают сделать WikiHow лучше. Продолжая использовать наш сайт, вы соглашаетесь с нашими куки правилами. Дополнительные статьиКаксоздать простую веб страницу в БлокнотеКаксоздать простую веб страницу с помощью HTMLКакзадать цвет фона в HTMLКаксоздать ссылку Избранные статьиТест: кто я: солдат, поэт или король?Тест: какое я животное?Каков мой ментальный возраст? ТестНравлюсь ли я ему? ТестАктуальные статьиКакзаменить сливной клапанКакполучить заряд адреналинаКакбыстро потерять голосНа какое животное я похож(а)? ТестКакестественно улыбатьсяКаксжимать большие файлыИзбранные статьиТест: какой я покемон?Тест: нравлюсь ли я объекту моей симпатии?Каков ваш стоп-сигнал? ТестУвлечен(а) ли я? ТестИзбранные статьиТест: угадайте мой возраст: сколько мне лет?Тест: я интроверт или экстраверт?Кто моя вторая половинка? ТестТест: каков мой язык любви?Избранные статьиКакой тип мужчины мне подходит? ТестВлюблен(а) ли я? ТестКакого цвета моя аура? ТестДействительно ли он мне нравится? ТестИзбранные статьиТест: какие девушки мне нравятся?Тест: какая эстетика мне близка?Тест: какой у меня знак зодиака?Нравлюсь ли я ей? Тест
    📎📎📎📎📎📎📎📎📎📎