- •2.1.Введення.
- •1.1 Введення
- •1.2.Урок 1: Структура web-документа. Вставка коментар.
- •1.3. Урок 2: Створюємо свою першу сторінку.
- •1.4. Урок 3: Робота з текстом.
- •1.5. Урок 4: Робота з силками.
- •1.6. Урок 5: Робота з зображенням.
- •1.7. Урок 6: Колір фону і тексту
- •1.8. Урок 7: Робота з таблицями.
- •1.9. Урок 8: Робота з формами.
- •2.1.Введення.
- •2.2. Урок 1:Принцип роботи css.
- •2.3. Урок 2: Колір і фон.
- •2.4. Урок 3: Шрифти.
- •2.5. Урок 4: Робота з текстом.
- •2.6. Урок 6:Робота з списками.
- •2.7.Урок 6:Робота з рамками.
- •2.8. Урок 7: Поля (margin) і відступи (padding).
- •2.9. Урок 8: Шари в css.
1.7. Урок 6: Колір фону і тексту
Ми вже знаємо як змінювати колір тексту , але для цього нам потрібно було укладати його в теги font , а це не завжди зручно. Іноді , краще задати колір тексту для всього документа . Також , можна задати і фонове зображення .
Ось необхідні атрибути :
BACKGROUND - визначає зображення для " заливки " фону. Значення задається у вигляді повного URL або імені файлу з картинкою у форматі GIF або JPG .
BGCOLOR - визначає колір фону документа .
TEXT - визначає колір тексту в документі.
Всі вони прописуються для елемента BODY . Значення квітів задаються або RGB - значенням в шістнадцятковій системі , або одним з 16 базових кольорів.
Приклад1 :
<! - Задаємо фоновий колір і колір тексту - >
<body bgcolor="#FFF8D2" text="red">
<p> Цей текст буде червоний , тому що ми змінили колір тексту в тезі БОДИ і тепер весь текст на сторінці за замовчуванням буде червоний </ p >
<font color ="green">
<p> У цьому абзаці текст буде зелений , бо ми уклали його в теги font і надали соответсвующий колір </ p >
</ font >
<p> Тепер текст знову буде червоний </ p >
</ body >
Приклад 2:
<! - Задаємо фонове зображення і колір тексту ->
<body background="fon.jpg" text="red">
<p> Цей текст буде червоний, тому що ми змінили колір тексту в тезі БОДІ і тепер весь текст на сторінці за замовчуванням буде червоний </ p>
<p> Тепер тут теж червоне і тільки <font color ="green"> ці слова зелені </ font>
</ p>
<p> Тут як ви зрозуміли текст теж червоний </ p>
</ body>.
1.8. Урок 7: Робота з таблицями.
Html таблиці - корисна штука . Зазвичай їх використовують не тільки для відображення таблиць як таких , а й для створення невидимого каркаса сторінки , що допомагає розташувати текст і зображення належним чином. Раніше всі сайти мали табличну структуру , зараз все більшої популярності набуває структура на дівах (за допомогою <div> і CSS). Ось класичний приклад табличній структури:
Шапка сайту ( логотип і все таке)
посилання 1
посилання 2
посилання 3
посилання 4
посилання 5
основний зміст
Реклама і все таке
блок копірайту
Давайте розбиратися як побудувати найпростішу таблицю . Для цього нам знадобляться як мінімум три елементи .
TABLE - Елемент для створення html таблиці. Обов'язково повинен мати початковий і кінцевий теги . Типово html таблиця друкується без рамки , а розмітка здійснюється автоматично залежно від обсягу міститься в ній інформації . Відразу скажу , що тут є атрибут BORDER який задає товщину рамки таблиці в пікселах .
TR ( Table Row ) - Створює новий ряд таблиці. Закриває тег обов'язковий.
TD ( Table Data ) - Починає і закінчує кожну клітинку ряду html таблиці. Обов'язковий закриває тег .
Давайте спробуємо створити таблицю з двох рядів і двох стовпців:
<table border="1">
<tr>
<td> ряд 1 ячейка1 </ td > <td> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 1 </ td > <td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Ось як це буде виглядати в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
Розібралися ? Тобто таблиця починається з <table> , потім йде <tr> , який вказує на початок нового ряду . В ряду вставлені два осередки : <td> ряд 1 ячейка1 </ td > і <td> Ряд1 ячейка2 </ td > . Ряд закривається </ tr > , і відразу починається новий ряд <tr> . У новому ряду також два осередки. Таблиця закривається </ table > . Все досить логічно
А як можна об'єднати комірки ?
Для цього існують дані атрибути .
COLSPAN - визначає кількість стовпців , на які простирається дана клітинка. За замовчуванням має значення 1.
ROWSPAN - визначає кількість рядів , на які простирається дана клітинка. За замовчуванням має значення 1.
Приклад 1:
<table border="1">
<tr>
<td colspan="2"> ряд 1 осередок 1 +2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 1 </ td > <td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Отримаємо в браузері :
ряд 1 осередок 1 +2
ряд 2 осередок 1 ряд 2 осередок 2
Приклад 2:
<table border="1">
<tr>
<td rowspan="2"> Осередок 1 , ряд 1 +2 </ td >
<td> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Отримаємо в браузері :
Осередок 1 , ряд 1 +2 Ряд1 ячейка2
ряд 2 осередок 2
Нічого складного немає . Придивіться уважно до трьох прикладів і все стане ясно.
Ось ще корисні атрибути:
CELLPADDING - визначає відстань (у пікселах ) між рамкою кожного осередку html таблиці і міститься в ній матеріалом.
CELLSPACING - визначає відстань (у пікселах ) між кордонами сусідніх комірок таблиці html .
WIDTH - визначає ширину таблиці html . Ширина задається або в пікселах , або у відсотковому відношенні до ширини вікна браузера. Типово цей атрибут визначається автоматично залежно від обсягу що міститься в таблиці матеріалу.
HEIGHT - визначає висоту таблиці. Висота задається або в пікселах , або у відсотковому відношенні до висоті вікна браузера. Типово цей атрибут визначається автоматично залежно від обсягу міститься в html таблиці матеріалу.
Приклад 1:
<table border="1" cellpadding="10">
<tr>
<td> ряд 1 ячейка1 </ td > <td> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 1 </ td > <td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Результат в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
Приклад 2:
<table border="1" cellspacing="10">
<tr>
<td> ряд 1 ячейка1 </ td > <td> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 1 </ td > <td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Результат в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
Приклад 3:
<table border="1" width="400" height="100">
<tr>
<td> ряд 1 ячейка1 </ td > <td> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<td> ряд 2 осередок 1 </ td > <td> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Результат в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
І нарешті останні чотири атрибуту :
ALIGN - визначає спосіб горизонтального вирівнювання html таблиці або вмісту комірок. Можливі значення : left , center , right . Значення за замовчуванням - left .
VALIGN - повинен визначати спосіб вертикального вирівнювання таблиці або вмісту комірок таблиці. Можливі значення : top , bottom , middle . ( Притиснути до верху , притиснути до низу , і встановити посередині) .
BGCOLOR - визначає колір фону комірок таблиці. Задається або RGB - значенням в шістнадцятковій системі , або одним з 16 базових кольорів.
BACKGROUND - дозволяє заповнити фон таблиці малюнком. Як значення необхідно вказати URL малюнка.
Примітка: можна хоч кожній клітинці таблиці задати свій колір фону або фоновий малюнок. Але: якщо ви задаєте фоновий колір (або малюнок) в базовому елементі TABLE то у всіх осередках буде цей фон (малюнок) , і якщо ви захочете в якійсь комірці поміняти , пропишіть соответсвующий атрибут саме для цього осередку .
Наведу приклад:
<! - Задаємо ширину , висоту , рамку , вирівнювання по центру і фоновий колір всієї таблиці ->
<table width="400" height="100" border="1" align="center" bgcolor="#FFF8D2">
<tr>
<! - Цей осередок залишаємо за замовчуванням ->
<td> ряд 1 ячейка1 </ td >
<! - Вміст горизонтально вирівнюємо по центру , вертикально - притискаємо до верху ->
<td align="center" valign="top"> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<! - Вміст горизонтально вирівнюємо по центру , вертикально - притискаємо до низу - >
<td align="center" valign="bottom"> ряд 2 осередок 1 </ td >
<! - Вміст горизонтально вирівнюємо по правому краю , вертикально - посередині , і міняємо фоновий колір ->
<td align="right" valign="middle" bgcolor="#33FF99"> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Результат в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
Ще один приклад:
<! - Задаємо ширину , висоту , рамку , фоновий колір всієї таблиці , вирівнювання залишаємо за замовчуванням ( по лівому краю) ->
<table width="400" height="100" border="1" bgcolor="#FFF8D2">
<tr>
<! - Горизонтальне - по центру , вертикально за замовчуванням ( по центру) ->
<td align="center"> ряд 1 ячейка1 </ td >
<! - Горизонтальне - по центру , вертикально за замовчуванням ( по центру) і робимо фоновий малюнок - >
<td align="center" background="pchela.jpg"> Ряд1 ячейка2 </ td >
</ tr >
<tr>
<! - Горизонтальне - по центру , вертикально за замовчуванням ( по центру) ->
<td align="center"> ряд 2 осередок 1 </ td >
<! - Горизонтальне - по центру , вертикально за замовчуванням ( по центру) і міняємо фоновий колір ->
<td align="center" bgcolor="#33FF99"> ряд 2 осередок 2 </ td >
</ tr >
</ table >
Результат в браузері :
ряд 1 ячейка1 Ряд1 ячейка2
ряд 2 осередок 1 ряд 2 осередок 2
Якщо картинка менше ніж осередок , то вона буде дублюватися , як показано в прикладі. Якщо більше - то буде відображатися та частина яка влізе :).
НУ ось впринципі і все за таблицями . Якщо не вийшло запам'ятати не турбуйтеся. З практикою всі запам'ятається (як кажуть головне знати , де підглянути !) . У програмі Adobe Dreamweaver все робиться дуже просто .