Урок 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 та ін ) але вони підходять більше для роботи , а не для навчання , і можуть тільки нашкодити ...

Які ще будуть поради ?

При навчанні , приділяйте більше часу практиці . Працюйте з прикладами , просто візьміть і наберіть вручну (а не копіювати -вставити ! ) Текст такий же , як у прикладі і подивіться на свій результат ! Так і цікавіше буде , і толку набагато більше ...\

Наши рекомендации