Урок 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 все робиться дуже просто .
Урок 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="прімер: [email protected]">
</ 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 та ін ) але вони підходять більше для роботи , а не для навчання , і можуть тільки нашкодити ...
Які ще будуть поради ?
При навчанні , приділяйте більше часу практиці . Працюйте з прикладами , просто візьміть і наберіть вручну (а не копіювати -вставити ! ) Текст такий же , як у прикладі і подивіться на свій результат ! Так і цікавіше буде , і толку набагато більше ...\