Ми вже знаємо як змінювати колір тексту, але для цього нам потрібно було укладати його в теги 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 все робиться дуже просто.
Урок 8: Робота з формами.
Html форми - це напевно сама складна частина мови html. Так що наберіться терпіння і давайте потихеньку починати.
Що таке html форми? Ось дивіться, нижче наведена html форма замовлення навчає диска. По закінченні навчання, ви теж зможете зробити таку.
Введіть ПІБ:
Введіть пароль:
Який диск ви хочете отримати?
CD
DVD
Які навчальні курси ви хочете бачити на диску?
Курси по Фотошопу
Курси з Adobe Dreamweaver
Курси по PHP
Виберіть спосіб доставки:
Введіть адресу для доставки:
Тут все працює, крім відправки даних, можете поклацати:)
Ну як бачили таке? ось-ось, зараз скрізь таке, так що давайте розберемося:
html форма - це всього лише каркас, створений за допомогою мови html, тобто ми можемо вказати браузеру де у нас буде якесь поле і що написано на тій чи іншій кнопці. Але для того, щоб при натисканні на кнопку ваш коментар додався в гостьову книгу або дані замовлення полетіли в офіс - потрібна інша технологія - програма, скрипт, який прив'язується до форми. Зазвичай такі програми робляться на php. Але не турбуйтеся завчасно, я дам Вам найпростіший обробник для тренування, а більш складні можна знайти в інтернеті або самому написати.
Давайте розглянемо всі елементи форми з прикладу вище по-порядку
Будь-які елементи форми перебувають ніби в тілі форми. Тобто у будь-якої форми є каркас, а вже всередині нього вставляються різні елементи форми, і пишеться html код.
Приклад 1:
<form>
<! - Сюди вставляють різні елементи ->
</ form >
Як бачите тут два базових тега: відкриває <form> і обов'язковий закриває тег </ form >.
Але в цьому вище, як би голий каркас, тобто без атрибутів. А тепер розглянемо більш реальний каркас html форми:
Приклад 2:
<form name="forma zakaza" method="post" action="obrabotchik.php">
<! - Сюди вставляють різні елементи ->
</ form >
атрибути:
NAME - визначає ім'я форми, унікальне для даного документа. Використовується тільки, якщо в документі присутні кілька форм.
ACTION - обов'язковий атрибут. Вказує шлях до скрипту (або програмі) сервера, обслуговуючому дану форму.
METHOD - визначає спосіб відправки вмісту html форми. Можливі значення GET (за замовчуванням) і POST.
Пару слів про методи передачі:
Метод GET використовується для передачі різних змінних, або дуже коротких повідомлень. Інформація передається в явному вигляді через рядок браузера, тобто її можна перехопити. Наприклад якщо ви бачите в рядку набору браузера щось на зразок http://adress.com/lessons.php?rub=28 це означає що передається значення змінної rub рівне 28. У html формах зазвичай не використовується.
Метод POST створений спеціально для передачі текстових повідомлень. Майже завжди застосовується у формах. Передає інформацію в прихованому вигляді.
Поки все зрозуміло? тоді давайте почнемо розбирати елементи форми:
<form name="primer1" method="post" action="obrabotchik.php">
Введіть ПІБ: <br>
<input type="text" name="fio" size="30">
<br>
Введіть пароль: <br>
<input type="password" name ="pass">
</ form >
В результаті отримаємо:
Введіть ПІБ:
Введіть пароль:
Що ми бачимо у вихідному коді? а ми бачимо наступне:
Елемент INPUT - створює поле html форми (кнопку, поле введення, чекбокс і т.п.), Елемент не має кінцевого тега.
Основні атрибути:
TYPE - визначає тип поля для введення даних. За замовчуванням - це " text ". У даному прикладі ще використовується тип " password " який вказує на те, щоб інформація показувалася зірочками.
NAME - визначає ім'я, використовуване при передачі змісту даної html форми на сервер. Якщо Ви збираєтеся куди-небудь передавати інформацію з форми, то обов'язково вводите ім'я.
SIZE - визначає розмір поля в символах. За замовчуванням має значення рівне 24. Тобто якщо цей атрибут не писати те довжина дорівнюватиме 24 символу.
Є ще й такий корисний атрибут як MAXLENGTH, який визначає максимальну кількість символів, які можна ввести в текстовому полі. Воно може бути більше, ніж кількість символів, зазначених в атрибуті SIZE. За замовчуванням кількість символів не обмежена.
Ну от наприклад:
<form name="primer2" method="post" action="obrabotchik.php">
Введіть пароль (максимум шість символів): <br>
<input type="password" name ="pass" maxlength="6">
</ form >
результат:
Введіть пароль (максимум шість символів):
Ну як працює? А ви спробуйте ввести більше шести символів:)
Ще є атрибут VALUE який определеятся що буде за замовчуванням написано в полі для введення.
Дивіться приклад:
<form name="primer3" method="post" action="obrabotchik.php">
Введіть свій e - mail: <br>
<input type="text" name="e-mail" size="35" value="прімер: admin@zvirec.com">
</ form >
результат:
Введіть свій е - mail:
Тепер розглянемо наступний елемент форми:
<form name="primer4" method="post" action="obrabotchik.php">
<p> Який диск ви хочете отримати? </ p >
<p>
<input name="disc" type="radio" value="cd" checked>
CD <br>
<input name="disc" type="radio" value="dvd">
DVD </ p > < / form >
результат:
Який диск ви хочете отримати?
CD
DVD
Даний тип елементів html форми називається радіопереключатель (перемикає: або одне значення, або інше - два одночасно бути не може). Тому атрибут type має значення type = " radio ". Раз ми вибераем між CD і DVD то радіопереключателя у нас два, тому два рази користуємося елементом INPUT. Як бачите у них однакове ім'я - name = " disc " і різні значення value. Чому це так? давайте подумаємо логічно:
Нас цікавить який диск хоче отримати клієнт, CD або DVD. Тому у нас однакове значення імені name = " disc " і різні значення (value = " cd " і value = " dvd "). Тобто якщо ми вибираємо перший варіант, то змінна disc прийме значення cd а якщо другий -то dvd. Логічно? по іншому і бути не може...
Якщо ви хочете зробити, щоб за замовчуванням у Вас радіопереключатель був встановлений на якомусь варіанті, то просто допишіть атрибут - прапор checked (включений).
Примітка: у радіопереключателе обов'язково повинен бути присутнім атрибут value інакше нічого працювати не буде.
Останній елемент у цьому уроці:
<form name="primer5" method="post" action="obrabotchik.php">
<p> Які навчальні курси ви хочете бачити на диску? </ p >
<input type="checkbox" name="fotoshop" value="yes" checked>
Курси по Фотошопу <br>
<input type="checkbox" name="dreamweaver" value="yes">
Курси з Adobe Dreamweaver <br>
<input type="checkbox" name="php" value="yes"> Курси по PHP
</ form >
результат:
Які навчальні курси ви хочете видить на диску?
Курси по Фотошопу
Курси з Adobe Dreamweaver
Курси по PHP
Даний тип елементів html форми називається checkbox і відрізняється від радіопереключателя тим, що тут можна вибрати декілька варіантів. Як бачите type = " checkbox " означає що тип елемента - Чекбокс, атрибут name потрібен для того, щоб обробник міг ідентифікувати дане поле і нарешті value - визначає той параметр, який буде відправлено при поставленої галочці.
У даному елементі, атрибут value не є обов'язковим, на відміну від радіопереключателя. Якщо ми його не поставимо, то при поставленої галочці, як значення змінної в обробник полетить текст який написаний поряд з галочкою.
Інші елементи форми ми розберемо в наступному уроці. Поки поексперементіруйте і придумайте свої форми.
Розділ 2. Вивчення СSS
Введення.
CSS (Каскадні таблиці стилів) - це вражаючий винахід людства, який значно полегшує та автоматизує створення веб -сайтів. Використовуючи цю чудову технологію, можна керувати зовнішнім виглядом величезної кількості сторінок, з однієї таблички стилів, також створювати красиві менюшки, робити різні ефекти і т.д.
Каскадні таблиці стилів відкривають абсолютно нові можливості у веб- дизайні. Зробити якісний дизайн без їх використання дуже проблематично.
Але найважливіше те, що використовуючи CSS ви заощаджуєте собі силу-силенну часу. Адже за допомогою одного маленького файлу стилів, ви можете керувати дизайном сотні, тисячі і навіть мільйони сторінок, і це дуже захоплює...
Це не довідник, тут все написано швидше розмовною мовою:) Цей підручник допоможе Вам з вивченням таблиць стилів.
Тільки врахуйте, що вивчати CSS без знання HTML практично неможливо, і тому якщо ви ще не знайомі з ним, прочитайте для початку підручник html.
Приклади в підручнику побудовані таким чином: я показую тільки код таблиці стилів, а сам вихідний код html файлу не показую. Це робиться тому, що інакше обьем підручника буде занадто величезний. Так що якщо вам потрібно, дивіться вихідний html код просто натиснувши на прикладі правою кнопкою миші і вибравши пункт - Перегляд html - коду.
Що знадобиться нам для навчання?
Для навчання нам знадобляться браузер (в якому ви переглядаєте веб -сторінки) і звичайний блокнот (можна знайти тут: Пуск- програми - стандартні - блокнот). Є звичайно й більш автоматизовані програми (Dreamweaver, FrontPage та ін) але вони підходять більше для роботи, а не для навчання, і можуть тільки нашкодити...
Які ще будуть поради?
При навчанні, приділяйте більше часу практиці. Працюйте з прикладами, просто візьміть і наберіть вручну (а не копіювати -вставити!) Текст такий же, як у прикладі і подивіться на свій результат! Так і цікавіше буде, і толку набагато більше...\
