Чтобы добавить изображение на веб-страницу, понадобится HTML, а чтобы картинку сделать фоном веб-страницы, необходимы HTML и CSS. HTML (язык гипертекстовой разметки) является стандартизированным языком разметки документов, который указывает браузеру, что отображать на веб-странице. CSS (каскадные таблицы стилей) — это язык описания внешнего вида документа, который используется для изменения внешнего вида и макета веб-страницы. Вам понадобится изображение, которое вы установите в качестве фона веб-страницы.
-
1Создайте папку для хранения HTML-файла и фонового изображения. Присвойте папке имя, по которому ее легко будет найти.
- Имя папки может быть любым, но лучше, если оно будет состоять из одного короткого слова.
-
2Скопируйте фоновое изображение в созданную папку.
- Если вы не очень заботитесь о том, как ваш сайт будет открываться на старых устройствах или на устройствах с медленным интернет-соединением, используйте изображение с более высоким разрешением. В качестве фона также подойдет изображение с простым повторяющимися узором, потому что на нем будет хорошо виден текст.
- Если у вас нет изображения, бесплатно скачайте его в интернете и скопируйте в созданную папку.
-
3Создайте HTML-файл. Откройте текстовый редактор, а затем создайте новый файл. Сохраните его как index.html.
- Можно использовать любой текстовый редактор, например, Блокнот в Windows или TextEdit в Mac OS X.
- Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, скачайте редактор Atom, который поддерживает Windows, macOS и Linux.
- Если вы используете TextEdit, перед тем, как начать писать HTML-код, откройте меню «Формат» и выберите «Конвертировать в простой текст». В этом случае HTML-файл будет правильно загружаться в веб-браузере.
- Мощные текстовые редакторы, такие как Microsoft Word, не очень хорошо подходят для написания HTML-кода, потому что они добавляют невидимые символы и форматирование, которые могут воспрепятствовать правильному отображению содержимого HTML-файла в веб-браузере.
Реклама
-
1Скопируйте и вставьте стандартный HTML-код. Выделите и скопируйте приведенный ниже HTML-код, а затем вставьте его в открытый файл index.html.
<html> <head> <title>Заголовок страницыtitle> <style> body { background-image: url(" "); } style> head> <body> body> html>
-
2Добавьте URL-адрес фонового изображения. В файле index.html найдите строку background-image: url(» «);. Поставьте курсор внутри скобок, а затем введите имя файла фонового изображения. Обязательно укажите расширение файла фонового изображения.Реклама
- Указанная строка должна выглядеть как-то так:
background-image: url(«background.png»);
- Если ввести просто имя файла (без его URL-адреса или пути к нему), веб-браузер будет искать картинку в папке с HTML-файлом. Если изображение находится в другой папке, введите полный путь к файлу.
-
1Откройте HTML-файл в веб-браузере. Щелкните правой кнопкой мыши по файлу index.html и откройте его в выбранном веб-браузере.
- Если нужная картинка не открылась в браузере, в окне текстового редактора проверьте, правильно ли введено имя файла с изображением.
- Если в веб-браузере отобразился HTML-код, а не фоновая картинка, файл index.html был сохранен как документ в формате RTF. В этом случае отредактируйте HTML-файл в другом текстовом редакторе.
-
2Внесите изменения в HTML-файл. В окне текстового редактора поставьте курсор между тегами и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.Реклама
-
1Запомните, какие бывают теги в HTML и CSS. HTML-код состоит из открывающих и закрывающих тегов. Например, тег является открывающим, а — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
-
2Запомните тег DOCTYPE. Качественный HTML-код должен начинаться с . Этот тег сообщает веб-браузеру, что HTML-файл является HTML-файлом.
-
3Внесите изменения в HTML-файл. В окне текстового редактора поставьте курсор между тегами и введите «Привет, мир!». Обновите страницу в браузере, чтобы введенный текст отобразился на фоне картинки.
-
4Запомните, какие бывают теги в HTML и CSS. HTML-код состоит из открывающих и закрывающих тегов. Например, тег является открывающим, а — закрывающим. На каждый открывающий тег должен приходиться соответствующий закрывающий тег, чтобы веб-страница загружалась правильно.
-
5Запомните тег
. Он содержит текст, который отображается в строке заголовка окна браузера, а также текст, отображаемый на вкладке браузера. -
6Запомните тег