Як додати фонове зображення в html: 13 кроків

Щоб додати зображення на веб-сторінку, знадобиться HTML, а щоб картинку зробити фоном веб-сторінки, необхідні HTML і CSS. HTML (мова гіпертекстової розмітки) є стандартизованим мовою розмітки документів, який вказує браузеру, що відображати на веб-сторінці. CSS (каскадні таблиці стилів) - це мова опису зовнішнього вигляду документа, який використовується для зміни зовнішнього вигляду і макета веб-сторінки. Вам знадобиться зображення, яке ви встановите в якості фону веб-сторінки.

кроки

Частина 1 з 5:

Як створити папку і файл

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 з 5:

Як написати HTML-код

1. Скопіюйте та вставте стандартний HTML-код. Виділіть і скопіюйте наведений нижче HTML-код, а потім вставте його у відкритий файл index.html.

заголовок сторінки {Background-image: url ( "") -}

2. Додайте URL-адресу фонового зображення. У файлі index.html знайдіть рядок background-image: url ( "")-. Поставте курсор всередині дужок, а потім введіть ім`я файлу фонового зображення. Обов`язково вкажіть розширення файлу фонового зображення.

background-image: url ( "background.jpg ")-

Якщо ввести просто ім`я файлу (без його URL-адреси або шляху до нього), веб-браузер буде шукати картинку в папці з HTML-файлом. Якщо зображення знаходиться в іншій папці, введіть повний шлях до файлу.

Збережіть HTML-файл. 2627945 6 1

Частина 3 з 5:

Як переглянути HTML-файл

1. Відкрийте HTML-файл у веб-браузері. Клацніть правою кнопкою миші по файлу index.html і відкрийте його в обраному веб-браузері.

Якщо потрібна картинка не була відкрита в браузері, у вікні текстового редактора перевірте, чи правильно введено ім`я файлу із зображенням.
Якщо в веб-браузері відобразився HTML-код, а не фонова картинка, файл index.html був збережений як документ у форматі RTF. В цьому випадку змініть HTML-файл в іншому текстовому редакторі.

2. Внесіть зміни в HTML-файл. У вікні текстового редактора поставте курсор між тегами і введіть «Привіт, світ!». Оновлення сторінку в браузері, щоб введений текст відобразився на тлі картинки.

Частина 4 з 5:

Як зрозуміти HTML-код

1. Запам`ятайте, які бувають теги в HTML і CSS. HTML-код складається з відкривають і закривають тегів. Наприклад, тег є відкриває, а - закриває. На кожен відкриває тег має припадати відповідний закриваючий тег, щоб веб-сторінка завантажувалася правильно.

2. Запам`ятайте тег DOCTYPE. Якісний HTML-код повинен починатися з . Цей тег повідомляє веб-браузеру, що HTML-файл є HTML-файлом.

3. Внесіть зміни в HTML-файл. У вікні текстового редактора поставте курсор між тегами і введіть «Привіт, світ!». Оновлення сторінку в браузері, щоб введений текст відобразився на тлі картинки.

4. Запам`ятайте, які бувають теги в HTML і CSS. HTML-код складається з відкривають і закривають тегів. Наприклад, тег є відкриває, а - закриває. На кожен відкриває тег має припадати відповідний закриваючий тег, щоб веб-сторінка завантажувалася правильно.

5. Запам`ятайте тег . Він містить текст, який відображається в рядку заголовка вікна браузера, а також текст, який відображається на вкладці браузера.

6. Запам`ятайте тег Він вказує на вміст CSS. Все, що знаходиться між тегами

7. Запам`ятайте тег . Будь-який текст, розташований між тегами , буде відображатися так, як введений (якщо це не код HTML або CSS).

8. Внесіть зміни в HTML-файл. У вікні текстового редактора поставте курсор між тегами і введіть «Привіт, світ!». Оновлення сторінку в браузері, щоб введений текст відобразився на тлі картинки.

Частина 5 з 5:

Як зрозуміти CSS-код

1. Усвідомте CSS-код. У файлі index.html код CSS, розташований між тегами

2. Перегляньте код CSS.

body {Background-image: url ( "background.jpg ") -}

4. Запам`ятайте частини коду CSS. Стилі CSS складаються з двох частин: селектора і оголошення.

body

background-image: url ( "background.jpg ")

Селектором може бути будь-який тег HTML.

Оголошення завжди полягають у фігурні дужки {}.

5. Запам`ятайте, що таке оголошення CSS. Оголошення CSS складається з двох частин: властивості і значення. Контент в фігурних дужках
background-image є властивістю, а url ( "background.jpg ") є значенням.

Властивість описує предмет (в нашому прикладі це фоновий малюнок), а значення - стиль предмета (в нашому прикладі це файл з картинкою).

Властивість і значення завжди розділяються двокрапкою (:).

CSS-оголошення завжди закінчуються крапкою з комою (-).