17.10.2015

Поки немає

Всім привіт!
Продовжуємо вивчати основи HTML.
У цьому уроці я розповім і на прикладах покажу, як зробити фон з кольору або картинки в HTML-сторінці.
Все досить просто!
Почнемо з кольору!
Я думаю, ви не пропустили, там, де я розповідав, як міняти колір тексту і в кінці статті давав коди різних кольорів і відтінків. Чому я нагадав вам про цей урок? Та тому, що там є таблиця з готовими кодами кольорів, беріть їх і практикуйте відразу в цьому уроці.
Отже, як зробити колірний фон в HTML ...

Колірний фон в HTML

Колір фону в HTML-документі за замовчуванням білий. Як же поставити колір за бажанням?
У цьому нам допоможе атрибут «bgcolor». Щоб зафарбувати задній фон, пропишіть цей атрибут до тегу «body»:

Або так:

Ось повний HTML-код:

Текст сторінки буде зелений, а фон чорним.

Результат буде ось таким:

Якщо ви хочете зробити фон з картинки, тоді до тегу «body» пропишіть атрибут «baсkground»:

Залийте будь-яку картинку туди, де лежить ваша веб-сторінка (на прикладі у мене сторінка має назву «fon» з розширенням «.gif»):

Ось повний HTML-код:

Результат буде ось таким:

Якщо фонова картинка розміщена в папці images або в якійсь іншій папці, це буде виглядати так:

Ось повний HTML-код:

Текст сторінки на красивому фоні.

На сьогодні це все! Я думаю, урок був нескладний і ви все зрозуміли. Якщо є питання, пишіть в коментарях.
Чекаю вас на наступних уроках.

Попередній запис
Наступний запис

Доброго часу доби всім бажаючим дізнатися і засвоїти щось нове! Ви коли-небудь звертали увагу на зовнішній вигляд , При розробці яких творці полінувалися оформити фон сторінок? І я звертав. Це виглядає убого. Часто через відсутність звичних нам поділів між різними видами інформації вона змішується і просто відпадає бажання далі що-небудь дивитися на такому веб-ресурсі.

Щоб такого лиха не сталося з я вирішив написати статтю на тему: «Як зробити фон сторінки в html». Прочитавши публікацію, ви дізнаєтеся, за допомогою яких інструментів можна задавати фонове оформлення, як зробити фон фіксованим або змінним і багато іншого, що допоможе зробити привабливим ваш сайт. А тепер почнемо!

Основні інструменти для завдання фону веб-сторінок

Для установки фонового зображення розробниками веб-мов був передбачений атрибут background. Він є як в, так і в css.

У мові розмітки - це атрибут тега body, а в стильових таблицях - універсальне властивість, Яке дозволяє задати до 5 характеристик заднього плану одночасно. Background - досить гнучкий елемент, який можна використовувати для завдання фону у вигляді одного кольору, кольоровий картинки або навіть анімації.

Так, для установки фонового зображення через одиницю html досить написати такий код: ...

і замість слів «адреса файлу» вставити шлях до картинки.

Однак зауважте! Якщо у вигляді фону ви хочете бачити однотонне полотно, заданий значенням з палітри кольорів, то це робиться за допомогою атрибута bgcolor.

наприклад, ...

, Ми задали чорний фон для нашого сайту.

Кольори в css і html задаються або англійським словом (наприклад, red), або спеціальним кодом, який складається з знака # і шести символів після нього (наприклад, # FFDAB9).

При наборі другого варіанту в спеціалізованих програмних продуктах для розробників, палітра автоматично з'явиться перед вами. Якщо ж ви тільки почали вивчати дані веб-мови, то код кольору можна підглянути в інтернеті.

Background як властивість в каскадних стильових таблицях

Він задається або в окремому файлі з css стилями, або в елементі

На цій ноті можна підсумувати нашу роботу. Вступайте до лав моїх вірних передплатників, задавайте питання, якщо щось незрозуміло, і не скупіться посиланням на мій блог, а діліться нею з друзями. Бажаю приємного навчання. Бувай!

З повагою, Роман Чуєшов

У налаштуванні будь-якого сайту, крім функціоналу, дуже важливо оформлення. Саме це задає власний стиль і дизайн тієї чи іншої компанії або персони, для якої створюється сайт. Налаштувати колір фону і його зображення не складе труднощів, слідуючи інструкціям в даній статті.

Відкрийте свій HTML файл за коштами блокнота або будь-якого іншого текстового редактора, До якого ви звикли. Для прикладу візьмемо примітивну сторінку сайту з мінімумом тексту. Відкрити свій файл ви можете за допомогою будь-якого браузера.

Для початку змініть колір вашого фону, так як люди з повільним інтернет з'єднанням не відразу зможуть побачити фонове зображення сайту. Деяка кількість часу, поки картинка завантажується, вони зможуть бачити лише колір вашого сайту.
Впишіть в тег параметр bgcolor \u003d "*****", де ***** - це шифр кольору. Дізнатися кольору для HTML ви можете в будь-якому графічному редакторі, Вибравши опцію "для веб" або на сайті https://colorscheme.ru/color-names

Вам досить вибрати колір в палітрі кола і призначити його інтенсивність в рамках квадрата. Праворуч ви побачите два коду для html. Скопіюйте їх і вставте в блокнот.

Підібравши колір і вставивши його в код, подивіться, чи все правильно ви зробили, переглянувши вийшла веб сторінку з браузера.

Тепер ви можете приступати до вставки фонового зображення. Помістіть бажану картинку в папку з кодом для більшої зручності. Задайте йому ім'я латинськими буквами.

Тепер дізнайтеся розташування файлу, клікнувши по ньому правою кнопкою миші, вибравши рядок "Відкрити за допомогою" і клікнувши на будь-який браузер, встановлений на вашому комп'ютері.

Скопіюйте адресу з пошукового рядка вашого браузера.

Тепер в тезі впишіть рядок:

• style \u003d "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 ви готові до створення свого першого сайту.

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

Фон для сайту або окремого блоку

Оскільки для здійснення цієї мети нам потрібен css-файл, його потрібно створити і підключити до html. Про це написано в цій статті. Після цього можна приступати до роботи. По-перше, вам потрібно визначитися з тим, чого ви хочете задати фон. Якщо всієї сторінці в цілому, то зробити це можна так:

Body (
Background-color: white;
}

Тобто ми звертаємося до тегу body, який представляє всю нашу сторінку. Для завдання кольору фону використовується властивість background-color. Але що, якщо вам потрібно задати в якості фону малюнок, а не суцільний колір? Тоді варто написати так:

Body (
Background-image: url (шлях до рісунку.расшіреніе малюнка)
}

Для наочності я пропоную розглянути всі докладніше на прикладі. Для цього я буду використовувати таку картинку:

Наприклад, background-image: url (comp.png). У цьому прикладі ми задали фонову картинку з ім'ям comp (саме так я її назвав) формату png, Яка лежить в тій же папці, що і css-файл.
В html створю довільний блок з конкретними розмірами, щоб на ньому демонструвати роботу css-властивостей.

І ось для нього стилі:

#ct (
Background-image: url (comp.png);
width: 600px;
height: 400px;
}

Ось що у нас вийшло:

Чому так? Справа в тому, що за замовчуванням браузер повторює картинку стільки раз, щоб повністю заповнити блок. Іноді так і потрібно, наприклад, при використанні безшовних орнаментів, але в нашому випадку повинна бути одна картинка. На щастя, цим можна дуже легко управляти.

повторення фону

Якщо у вас картинка в якості фону, то за замовчуванням вона буде повторюватися по горизонталі і вертикалі, щоб заповнити весь простір сторінки. Щоб це прибрати, використовується властивість background-repeat і його значення no-repeat (не повторювати). Також є такі значення:

• Repeat-x - повторювати тільки по горизонталі
• Repeat-y - тільки по вертикалі

Допишемо в властивості нашому графічного фону:

Background-repeat: no-repeat;

позиція

Властивість background-position визначає місце, де буде знаходитися картинка. Тут задається два значення - по горизонталі і вертикалі. Приклади: background-position: right bottom - позиція в правому нижньому кутку, top-left - в нижньому верхньому (і так за замовчуванням), 250px 500px - зміщення від лівого верхнього кута вправо на 250 пікселів і вниз на 500.

Давайте краще подивимося на прикладах:

Background-position: top right;

Картинка переміститися в верхній правий край. Я дав блоку також жовтий фон, щоб було видно його краю.

background-position: 50% 50%;

Зображення з'явилося рівно по центру в своєму блоці. Так-так, таке теж можливо завдяки процентної записи позиції.

background-position: 70% 20%;

Фон зміщений на 70% по горизонталі, і на 20 по вертикалі.

Дозволяється також в пікселях задавати від'ємне значення позиції. Це допустимо робити, наприклад, коли ви використовуєте велику картинку-спрайт і потрібно поставити в блок потрібну частину цього спрайту.

закріплення фону

Ще мені дуже подобається одна властивість, яке називається background-attachment. У нього є всього два значення і перше стоїть за умовчанням (scroll). Це означає, що при прокручуванні сторінки фон теж буде прокручуватися, а якщо ви використовуєте картинку без повторень, то в кінці кінців вона закінчитися і далі піде просто суцільний колір.

Щоб цього не сталося, прописується background-attachment: fixed і тепер наш фон надійно зафіксований на місці. Це можна порівняти з тим, як блоку визначити фіксоване позиціонування і він не буде зникати зі сторінки при її прокручуванні.

Скорочена запис всього цього добра

Ми з вами розібрали багато властивостей, які дозволяють зробити фон, але якщо їх все застосовувати, то виходить громіздка запис. Є дуже елегантне рішення. Властивість background дозволяє через пробіл записати потрібні налаштування в такому порядку:
Background: колір зображення повторення закріплення позиція;
І тепер все можна записати так:

Background: yellow url (comp.png) no-repeat 20% 100px;

Якщо якась властивість визначати не потрібно, то воно просто опускається (в нашому випадку ми не записали background-attachment).

багато фонів

А що робити, якщо вам потрібно кілька фонових картинок? Буває, що ж поробиш. Сьогодні css підтримує таку можливість. Давайте і ми спробуємо. Візьмемо таку іконку

Я назвав її laptop.

І ось код для вставки МультіФон:

Background: url (comp.png) no-repeat 20% 100px,
url (laptop.png) no-repeat 50% 50%;
background-color: yellow;

Як бачите, досить всього лише поставити кому після першого зображення і прописати настройки для другого. Суцільний колір в цьому випадку краще поставити окремо.

Таким же чином можна записати ще скільки завгодно картинок, але не перестарайтеся - занадто багато графіки це не дуже добре.

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

Задати фоновий колір і / або картинку для сторінки або окремого її елемента досить просто. Головне знати, де і як це можна зробити, а також мати код кольору і / або фонову картинку. Не виключено, що з цієї статті Ви дізнаєтесь багато нового, але створював я її спеціально для новачків. Тому все буде максимально коротко і детально одночасно. Головне, що Ви отримаєте не тільки загальне уявлення і готові приклади, але і розуміння того, як зробити фон в HTML.

Щоб задати фон в HTML використовуйте проміжний DOCTYPE

А почну я з того, що в HTML5 немає можливості поставити. Цю можливість було вирішено винести в CSS. Тому, якщо Ви плануєте використовувати нижче викладене, і хочете отримати валідний (правильний) код, Вам потрібно зупинитися на перехідному типі документа. Для цього ваша веб-сторінка повинна починатися з наступного рядка:

Transitional// EN "" http://www.w3.org/TR/html4/loose.dtd "\u003e

Якщо з цим розібралися, давайте перейдемо до розуміння того, як створюється фон. І перше, що тут потрібно відзначити - це відмінність між фоновим кольором і фоновою картинкою. На початку йде фоновий колір, Який заливає все доступне простір сторінки або її елемента. Поверх нього накладається повторюється фонова картинка. Візуально це можна зобразити таким чином:

Фон HTML-документа і його елементів

Друге, що Вам потрібно знати - це відмінність між тілом документа і елементом документа. тіло документа позначається в HTML-коді веб-сторінки тегом BODY, який включає в себе весь зміст веб-сторінки. Очевидно, що фон тіла документа не може бути прозорим. Якщо фон тіла документа не заданий, використовується значення за замовчуванням, заданий в настройках браузера.

елементи сторінки знаходяться всередині тега BODY. Примітно, що задати колір і / або фонову картинку засобами HTML можна далеко не для всіх елементів документа. Наприклад, фонову картинку можна вказати тільки для таблиць. За замовчуванням, вони зазвичай мають прозорий фон.

Атрибут bgcolor для створення фонового кольору

Для того щоб задати фоновий колір документа або його елементів використовується атрибут bgcolor, наприклад:

В даному випадку ми задаємо фоновий колір для сторінки в цілому. А ось приклад того, як задати фоновий колір для таблиці, в тезі TABLE:

Текст з фоном

Примітно, що фоновий колір в таблиці можна вказати і для рядків в тезі TR і для їх осередків в тезі TD.

Як дізнатися код кольору?

Ви, напевно, вже помітили, що колір в HTML задається спеціальним кодом, Наприклад: # ec008c. Для того щоб дізнатися код потрібного Вам кольору Ви можете використовувати один з графічних редакторів. Наприклад, в Photoshop можна використовувати « Eyedropper Tool»(Піпетка) для отримання кольору з точки на зображенні. Потім, потрібно клікнути отриманий колір на панелі інструментів і у вікні, « Color Picker»(Вибір кольору) скопіювати код кольору.

Звертаю Вашу увагу на те, що цей код буде без знака решітки (#) на початку, це знак потрібно буде додати вручну.

Також Ви можете використовувати численні онлайн сервіси, Наприклад:

• і т.д.

Їх принцип роботи ще простіше - клікаєте потрібний колір і отримуєте його код.

Атрибут background для створення фонової картинки

Також як у випадку з фоновим кольором, так і у випадку з фоновою картинкою, Вам потрібно використовувати спеціальний атрибут, а саме background, наприклад:

В даному випадку ми задаємо фонову картинку для сторінки в цілому. Примітно, що через обмеження розмірів картинки, вона буде повторюватися, наприклад:

Як ви бачите, при повторенні, помітний перехід між картинками. Тому найчастіше використовуються спеціальні картинки, де цей момент врахований.

А ось приклад того, як задати фонову картинку для таблиці, в тезі TABLE:

Текст з фоном

Примітно, що фонову картинку можна задати тільки для таблиці в цілому та / або її окремого осередку. Для рядка це не вийде.

Абсолютний і відносний шлях до фонової зображенні

Окремо варто приділити увагу адресою фонової картинки. В даному випадку використовується відносний шлях до картинки, тобто адреса вказана щодо місця знаходження файлу картинки до файлу веб-сторінки. Такий варіант не можна назвати особливо вдалим. Найкраще використовувати абсолютний шлях до картинки, тобто повний її URL-адресу, Наприклад:

В такому випадку у Вас не виникне супутніх проблем. Детальніше про це Ви можете почитати.

Підведемо підсумки

Використання атрибутів bgcolor і background морально застаріло, тому для валідності HTML-коду Вам доведеться використовувати перехідною DOCTYPE. Для завдання фонового кольору в HTML використовує спеціальні коди, які Ви можете дізнатися в графічному редакторі або використовуючи спеціальні онлайн сервіси. Фонова картинка дублюється в межах відведеної їй області і лягає поверх фонового кольору. Для вказівки фонової картинки краще використовувати повний її URL-адресу. На цьому у мене все. Дякуємо за увагу. Успіхів!

о 22:37

змінити повідомлення