КОЛЬОРИ ФОНУ І ТЕКСТУ, ЗАЛИВКА ФОНУ ЗОБРАЖЕННЯМ, ЗОБРАЖЕННЯ
КОЛЬОРИ ФОНУ І ТЕКСТУ, ЗАЛИВКА ФОНУ ЗОБРАЖЕННЯМ, ЗОБРАЖЕННЯ
КОЛЬОРИ ФОНУ І ТЕКСТУ, ЗАЛИВКА ФОНУ ЗОБРАЖЕННЯМ
КОЛЬОРИ ФОНУ І ТЕКСТУ, ЗАЛИВКА ФОНУ ЗОБРАЖЕННЯМ
Кольори фону і тексту на веб-сторінках можна задавати кількома способами.
Спосіб 1: вказати назву кольору англійською мовою.
Спосіб 2: вказати HEX-код.
Подивитись основні кольори можна за адресою:
Кольори можна вказувати як атрибут тегів - це застарілий варіант. Сучасний варіант - вказувати у описі стилів.
Застарілий варіант.
Колір фону веб-сторінки - атрибут bgcolor тега body.
Приклад 1:
<body bgcolor="DarkGreen">
Приклад 2:
<body bgcolor="#FF1493">
Колір тексту вказується атрибутом color парного тега <font></font>. Цей парний тег обрамлює текст, колір якого потрібно змінити.
Приклад 1:
<font color="red"><p>Текст червоного кольору</p></font>
Приклад 2.
<font color="#9ACD32"><h1>Текст жовто-зеленого YellowGreen</h1></font>
Сучасний варіант.
Колір записується у спеціальному розділі внутрішніх стилів між тегами <style></style>, розділ знаходить у "голові" сторінки між тегами <head></head>.
Також, код між тегами <style></style> можна винести у окремий файл стилів (тип файлу css)
Приклад:
<style>
body
{
background-color:"DarkGreen";
}
p
{
color:"red";
}
h1
{
color:"#9ACD32";
}
</style>
Завдання (самостійно обрати - застарілий чи сучасний варіант).
Створити файл index1.html (базовий html-код), створити у ньому заголовок 1 рівня і абзац з текстом, вказати:
1) колір фону "DarkOliveGreen"
2) колір заголовка 1 рівня "#FFD700"
3) колір тексту "#F0E68C"
Фон на веб-сторінці можна зробити за допомогою зображення, яке буде повторюватись на екрані.
Скачати файл, розархівувати у робочу папку.
Щоб зайти інші зображення для фонів:
https://pixabay.com/ pattern
http://google.com/ бесшовный фон
Фон як зображення, яке повторюється - вказується двома способами:
застарілий спосіб - як атрибут тега <body>
<body background="images/1.png">
Завдання.
Для файла index1.html вказати фонове зображення 7-1.jpg
сучасний спосіб - у розділі <style></style>
Приклад.
<style>
body
{
background-image: url(images/1.png);
}
</style>
Завдання.
Для файла index1.html вказати фонове зображення 5.jpg
Якщо потрібно зробити фон у вигляді одного великого зображення, використовують код:
<style>
body
{
background-image: url(images/1.png);
background-repeat:no-repeat;
background-size:100%;
}
</style>
Якщо потрібно, щоб фонове зображення повторювалось по вертикалі, вказують код
<style>
body
{
background-image: url(images/1.png);
background-repeat:repeat-y;
background-size:100%;
}
</style>
Якщо потрібно, щоб фонове зображення повторювалось по горизонталі, вказують код
<style>
body
{
background-image: url(images/1.png);
background-repeat:repeat-x;
background-size:100%;
}
</style>
Можна зробити фон за допомогою фонового зображення, шириною 1px і висотою 1000px. Зображення перед цим готується у графічному редакторі - створюється градієнтна заливка від одного до другого кольору.
При цьому, якщо підібрати певний основний колір фону сторінки, можна отримати цікаві візуальні ефекти.
Примітка:
кольорів може бути більше, ніж два;
ширина - не обов'язково 1px, можна й більше на кілька px;
висота - за бажанням.
Вказуть код:
<style>
body
{
background-color: #0C08C6;
background-image: url(images/2fon-blue1px.jpg);
background-repeat:repeat-x;
}
</style>
або
<style>
body
{
background-color: white;
background-image: url(images/2fon-blue1px.jpg);
background-repeat:repeat-x;
}
</style>
Якщо потрібно, щоб фонове зображення було зафіксоване і не прокручувалось разом з вмістом сторінки, вказують код:
<style>
body
{
background-image: url(images/1.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100%;
}
</style>
Відпочинок:
ЗОБРАЖЕННЯ
Тег для вставки зображення
<img src=″папка/назва зображення">
Замість папка вказують назву папки на комп'ютері або сайті, де знаходиться файл зображення.
Якщо зображення знаходить у тій же папці, де і файл, у якому воно вставляється, то папка/ не пишеться!
назва зображення - назва файлу зображення із обов'язковим вказуванням типу.
У HTML використовують 3 основні типи зображень:
jpg (jpeg) - фотографії
png - невеликі зображення, для яких потрібна хороша якість; важливо: зображення можуть мати прозорий фон
gif - зображення можуть мати прозорий фон і можуть бути анімованими.
Назва файлу-зображення від типу файлу відділяється крапкою.
Наприклад:
fon.jpg
Тоді тег для вставки цього зображення вигляда так:
ящо зображення у тій же папці, де і html-файл
<img src=″fon.jpg">
якщо зображення у папці images
<img src=″images/fon.jpg">
Якщо у провіднику не видно типу файлу, потрібно
1) натиснути на ім'я файлу лівою кнопкою миші ОДИН раз;
2) натиснути праву кнопку миші і обрати пункт меню Свойства/Властивості;
3) у верхній частині вікна, яке відкриється, під назвою файлу знайти надпис:
Тип файла (.jpg)
Див. рисунок:
Завдання 1.
1) Створити html-файл, скопіювати у нього базовий код з файлу базовий html-код , зберегти під іменем index-im0.html
2) Скачати і розархівувати архів - файл
3) Після тегу <body> написати код для вставки зображення dragons.jpg:
<img src=″images/dragons.jpg">
4) Зберегти файл і подивитись у Хром результат.
Практика.
1) Знайти за допомогою пошуку Гугл зображення на тему Літо, зберегти якесь зображення у папку images
2) Написати код для вставки збереженого зображення.
3) Зберегти файл і подивитись у Хром результат.
Атрибути тегу зображення:
align - вирівнювання відносно рядка тексту і відносно вікна броузера
top – по верхньому краю рядка
middle – по центральній лініє рядка
bottom – по нижньому краю рядка
left – по лівому краю вікна броузера
right – по правому краю вікна броузера
Приклад:
<img src=″fon.jpg" align="center">
Практика.
1) Знайти і зберегти у папку images ТРИ зображення на тему Море.
2) Написати код для вставки збережених зображень. Кожне зображення розміщувати всередині абзацу (між тегами <p></p>)
3) Написати назву кожного зображення.
4) Для першого зображення вказати вирівнювання top
5) Для другого зображення вказати вирівнювання middle
6) Для третього зображення вказати вирівнювання right
7) Зберегти файл і подивитись у Хром результат.
alt - назва зображення
Приклад:
<img src=″fon.jpg" alt="Квітка і природа">
border - рамка, вказується ширина рамки у пікселях, за замовчуванням рамка чорна
Приклад:
<img src=″fon.jpg" align="center" border="5">
width - ширина зображення (у px або %)
Приклад:
<img src=″fon.jpg" align="center" width="500px">
<img src=″fon.jpg" align="center" width="70%">
height - висота зображення (у px або %)
Приклад:
<img src=″fon.jpg" align="center" height="200px">
Завдання 1.
Для зображення dragons.jpg із Завдання 1 вказати розміри:
1) тільки ширину 700px
<img src=″images/dragons.jpg" width="700px">
2) тільки висоту 2000px
<img src=″images/dragons.jpg" height="2000px">
3) ширину 400 px і висоту 700px
<img src=″images/dragons.jpg" width="400px" height="700px">
Щоб текст плавно обтікав зображення зліва або справа, потрібно написати код з використанням стилів і властивості float. Можливі значення float:
float:right; - зображення зміщується вліво, текст обтікає його справа
float:left; - зображення зміщується вправо, текст обтікає його зліва
Приклад:
перший варіант - вбудований стиль
<img src=″fon.jpg" style="float:left;">
другий варіант - внутрішній стиль, пишеться між тегами <style></style> у голові файла
img
{
float:left;
}
Практика. Створення сторінки "Про автора"
1. Створити папку для власного сайту. Дати папці ім'я, наприклад, Мій сайт.
2. Визначити тему сайту (хобі, музика, кіно, комп'ютерні ігри, літній відпочинок, автомобілі)
3. У папці Мій сайт створити підпапку images
4. Знайти у гугл зображення відповідно до теми сайту і зберегти його у папку images
5. Запустити Notepad++, створити новий файл, зберегти його у папці Мій сайт під іменем index.html
7. Вказати назву сторінки сайту між тегами <title>Тема сайту - про автора</title>
Підібрати фон сторінки.
Підібрати фон сторінки.
8. Вказати назву сторінки як заголовок 1 рівня, вирівняти його по центру.
9. Створити новий абзац, вставити у нього тег для тематичного зображення з папки image , вирівняти вміст абзацу по центру
10. Написати як заголовок 2 рівня текст і вирівняти його по центру:
Автор: ім'я або нікнейм автора
11. Написати як заголовок 3 рівня і вирівняти по центру:
Літній табір: It-Scouts Camp II 02-13.07.18
12. Написати з нового абзацу і вирівняти текст по центру:
Інтереси: ... написати про свої інтереси.
13. Зберегти результуючий файл і продивитись його у Хром.
Відпочинок:
