Остання корекція: 01.01.2003	/0 1 2 3 4 5
Вперше опубліковано: 01.01.2003
Сторінку відкрито: 803	Коментарiв: 0ДодатиЧитатиДопомога
ПОЧИТАТИІнформ. технологіїWeb ...Швидкі пальчики

Швидкі пальчики 03

Інше в підрозділі :

 Швидкі пальчики 01[2003-01-01]  Швидкі пальчики 02[2003-01-01]  Швидкі пальчики 04[2003-01-01]  Швидкі пальчики 05[2003-01-01]  Швидкі пальчики 06[2003-01-01]

На жаль, знову все наосліп, бо не маю ні ваших побажань, ані критики. Тому сьогодні розповім про те, що називається “додатковими можливостями форматування”.

Веб-сторінки деколи нагадують ресторанні меню – хоча навряд чи вам вдасться замовити декілька “страв” одразу, доводиться їх споживати по черзі і нескінченно тиснути багатостраждальні BACK i NEXT . Але наразі це сувора правда життя, і традиційна система “меню” притаманна кожному сайту (ви можете сказати – та й кожній програмі, але я вас запевняю, що є програми без меню, принаймні, з однією я знайома - може тепер хтось, заінтригований таким дивним твердженням, напише мені зацікавленого листа).

Але яке відношення мають меню до списків і таблиць? А таке, що вертикальні меню легше створювати за допомогою списків, а горизонтальні – за допомогою таблиць. І тому відразу перейдемо до суті справи.

Отже, списки бувають нумеровані і ненумеровані. А насамперед усе-таки бувають списки означень, які виглядають ось так:

<dl>
<dt> щось №1 <dd> розшифровка для чогось №1
<dt> щось №2 <dd> розшифровка для чогось №2
…………………………………………………………….
<dt> щось №n <dd> розшифровка для чогось №n
</dl>

і наразі ми ще не знайшли застосування цьому тегові (спробуйте – результат не надто симпатичний). Ми його використаємо потім – та ще й як використаємо!…

Тепер про ненумеровані списки. Одразу наведемо приклад:

<ul>
<li> яблучка
<li> бананчики
<li> апельсинчики
</ul>

Ну, як воно виглядає? Маркер не подобається? Міняємо маркер за допомогою параметра type, що може дорівнювати disc (по замовчуванню), square, circle. Відстані між елементами списку завеликі? Тоді додамо параметр compact. Ось маємо приклад (дивіться на малюнку результат):

<ul type=disc compact>
<li> <i>disc</i>
<li type=square> <b>square</b>
<li type=circle> <tt>circle</tt>
</ul>

А тепер про нумеровані списки. Вибір маркерів тут, очевидно, багатший. З нього і почнемо: type=1,a,A,i,I. Розшифруємо:
1 – звичайнісінькі ріднесенькі арабські цифри (1,2,3,4…..)
a – латинські у нижньому регістрі (a,b,c,d,e….)
A – ті ж латинські, тільки вже великі (A,B,C,D,E…..)
i – маленькі, а I – великі римські цифри.

Аналогічно тут працюватиме параметр compact, а початкове значення послідовності маркерів задається за допомогою параметра start = ціле_число (наприклад, start=21). А ось і приклад (дивіться на малюнок):

<ol type=a start=6 compact>
<li> Тутечки перший елемент списку
<li> А тутечки – другий
<li value=8> А тут ми перескочили через один елемент
<li> Просто наступний елемент
<li type=A> Переходимо до наступного елементу вже у верхньому регістрі…
<li> … і закінчуємо.
</ol>

Було б нецікаво, якщо б не можна було вкладати списки один в одного, комбінуючи при цьому їх типи. Ну, наприклад, так:

<ul>
<li> Дерева
<ul>
<li> Берізка
<li> Дуб
<li> Смерічка
</ul>
<li> Кущі
<ul>
<li> Жасмин
<li> Шипшина
<li> Агрус
</ul>
</ul>

А якщо жоден маркер не відповідає стилістиці нашої сторінки? Тоді намалюємо свій маркер і використаємо його для форматування списку за допомогою такої от конструкції:

<dl>
<dd> <img src=”marker.gif”> 1-й елемент
<dd> <img src=”marker.gif”> 2-й елемент
<dd> <img src=”marker.gif”> 3-й елемент
</dl>

Ось і для списку визначень знайшлося використання (дивіться наступний малюнок).

Намалюємо тепер 3 кнопки з написами ДОДОМУ, ПРО МЕНЕ, ЛІНКИ, а потім зробимо із них вертикальне меню. Клікаючи на пунктах меню, ми потрапляємо на відповідні цим написам сторінки (яких ми можемо ще не мати - але насолоду від появи долоньки на кожній кнопочці ми отримаємо і без цього). Код виглядатиме так :

<dl>
<dd><a href=”home.html”> <img src=”homemarker.gif” border=”0”></a>
<dd><ahref= ”aboutme.html”> <img src=”aboutmemarker.gif” border=”0”></a>
<dd><a href=”links.html”> <img src=”linksmarker.gif” border=”0”></a>
</dl>

В даному випадку всі файлики знаходяться в одній директоріїї, в іншому випадку необхідно прописувати абсолютний (повний) шлях до кожного з них в такому стилі: src=”/images/homemarker.gif” (якщо всі картинки знаходяться в каталозі images), а також не забувати про текст в alt. Виставляємо border=”0” для того, щоб навколо кнопочок не вилазила непотрібна нам рамка.

Результати знову ж є проілюстровані певним чином на відповідному малюнку. (Ілюстрування відбувалося в браузері Netscape – цікаво, що вийшло у вас за допомогою Internet Explorer-a… Гадаю, майже таке саме).

Про списки це все – тепер перед розглядом такої важливої теми, як таблиці (а ви, мабуть, й не підозрюєте, наскільки вона важлива) для перепочинку звернемося до інших тегів для того ж “додаткового форматування”.

Ви вже помітили, що браузер ділить стрічки так, як йому заманеться, враховуючи розміри свого активного вікна, і ніколи не зробить зайвого пробілу там, де вам би дійсно хотілося його мати. Але якщо ви розмістите текст між тегами <pre></pre>, що йменується “тегом авторського редагування”, то ви збережете всі пробіли і переноси в тому вигляді, в якому ви це написали в HTML-коді. Зауважу, що в межах цього тегу треба уникати інших методів форматування тексту, інакше глюки вам гарантовані.

Щоб виділити текст в окремий блок, скористайтесь тегом <blockquote> з парним закриваючим. Якщо ви хочете, щоб у фрагменті тексту не відображалися пробіли (наприклад, треба вималювати довжелезний URL), то скористайтесь тегом <nobr></nobr> і помістіть в нього саме цей URL. Якщо навпаки, з певних причин в ділянці тексту вам треба відобразити всі пробіли, то тут допоможе тег <wbr></wbr>.

І ще один нюанс – мене ось тут запитують (накінець-то!): тег <P> - парний чи непарний? Правду кажучи, він парний, але, оскільки його роль лише в ініціюванні абзацу (а це ініціювання, до речі, не гарантує відступу) та вирівнюванні за допомогою того ж ALIGN=LEFT,CENTER,RIGHT, то закриваючий тег майже завжди опускають. Ось тому він теоретично парний, але… практично непарний.

Ще можна розмістити текст у декілька стовпчиків – це тег <multicol> (парний) з такими параметрами:
cols=число_стовпчиків
gutter=”ширина проміжків між стовпчиками”
width=”ширина стовпчика”

В цьому випадку бажано, щоб увесь текст помістився на одному екрані, інакше для читки треба буде увесь час совати бічний повзунок, а це не дуже зручно.

(До речі, відступи абзаців елегантніше робити шляхом вставки на початок стрічки, з якої починається абзац, прозорого GIF-a розміром 1 на 1 піксел, а не безконечним рядком &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;…Хоча і так можна – за допомогою так званого “спеціального символу”. Найпоширеніші з них – це вже згаданий “нерозривний пробіл” - &nbsp; а також: < - &lt; > - &gt; & - &amp; “- &quot; X - &times; знак цента - &cent; знак фунта стерлінгів - &pound; знак йєни - &yen; знак © - &copy; знак ® - &reg; знак  ° - &deg;1/4 виглядатиме як &frac14; аналогічно 1/2 як &frac12; і так далі. Не забуваємо ставити ; в кінці. )

Тепер берімося за таблиці. Працюємо в тому ж стилі: спочатку урочиста частина (тег і його параметри) і концерт (приклади). Отже, таблиці використовуються для відображення “матричних” структур. Нехай нам треба відобразити елементи, які на сторінці повинні мати таке розміщення:

A11 A12 A13
A21 A22 A32
Відповідний код (поки що без параметрів) виглядатиме так:
<table>
<tr>
<td>A11 </td> <td>A12 </td><td>A13 </td> </tr>
<tr>
<td>A21 </td> <td>A22 </td><td>A32 </td>
</tr>
</table>

По замовчуванню таблиця створюється без рамочки, яка врегульовується параметром (атрибутом) BORDER. Після задання цього параметру таблиця матиме опуклий (барельєфний) вигляд із трошки скісною зовнішньою облямівкою. Рамка утворюється лише навколо заповнених клітинок таблиці, тому для створення ілюзії заповнення знову ж застосуємо &nbsp;. Якщо не вказаний параметр WIDTH, то розміри таблиці автоматично встановлює браузер (як правило, у відповідності до розмірів вмісту клітиночок).

Тепер перейдемося по всіх параметрах детальніше: ALIGN=LEFT, CENTER, RIGHT - горизонтальне вирівнювання усієї таблиці (по замовчуванню LEFT, однак це може перекриватись зовнішнім впливом форматування DIV або CENTER, які, взагалі кажучи, майже завжди мають вищий пріоритет, ніж інші теги)
WIDTH=ширина всієї таблиці в пікселах або процентах від ширини вікна
HEIGHT=висота таблиці
BORDER=ширина рамки в пікселах (просто BORDER означає BORDER=”1”)
CELLSPACING=проміжок між клітинками в пікселах. Це означає, що кожна клітинка матиме свою власну рамочку, яка відділятиметься від інших, якщо ми задамо параметр CELLSPACING. Також цей параметр визначатиме відстань між табличною рамкою та рамками клітинок, що знаходяться найдалі від центру.
CELLPADDING=проміжок між вмістом клітинки і рамкою клітинки в пікселах. Звичайно, атрибут BORDER (із значенням, що відмінне від нуля) встановлює CELLSPACING=1.

Колір фону клітинок задається класичним bgcolor=”колір”. Якщо ви ще не заплутались, то розглянемо приклад. Я довго не мордувалась, а узяла його із якоїсь інтернетівської книжки (джерело якої вже згубилося в букмарках):

<TABLE>
<CAPTION>Areas of the Nordic countries, in sq km</CAPTION>
<TR><TH>Country</TH> <TH>Total area</TH> <TH>Land area</TH>
<TR><TH>Denmark</TH> <TD ALIGN=RIGHT> 43, 070 </TD><TD ALIGN=RIGHT> 42, 370</TR>
<TR><TH>Finland</TH> <TD ALIGN=RIGHT>337, 030 </TD><TD ALIGN=RIGHT>305, 470</TR>
<TR><TH>Iceland</TH> <TD ALIGN=RIGHT>103, 000 </TD><TD ALIGN=RIGHT>100, 250</TR>
<TR><TH>Norway</TH> <TD ALIGN=RIGHT>324, 220 </TD><TD ALIGN=RIGHT>307, 860</TR>
<TR><TH>Sweden</TH> <TD ALIGN=RIGHT>449, 964 </TD><TD ALIGN=RIGHT>410, 928</TR>
</TABLE>

Як бачите, тег <CAPTION></CAPTION> задає назву (титулку) таблиці. До речі, він також може мати тип вирівнювання ALIGN=TOP або BOTTOM. А ось іще один простенький приклад:

<TABLE ALIGN=CENTER WIDTH=”80%” BORDER=1 CELLSPACING=10 CELLPADDING=3><CAPTION>The Nordic countries</CAPTION>
<TR>
<TD>Denmark</TD><TD>Finland </TD><TD>Iceland </TD><TD>Norway </TD>
<TD>Sweden </TD>
</TR> </TABLE>

Пропоную тепер перейти до більш цікавих прикладів, як ото таблиці не тільки з заданими базовими параметрами, а також із заголовками стовпчиків (теги <th></th>,наприклад: <tr><th>Заголовок 1-го стовпчика</th><th> Заголовок 1-го стовпчика </th></tr>) і іншими надмірностями. Слід відзначити, що HTML не стоїть на місці, і тепер ми можемо також задавати ширину кожної клітинки (<td width=ширина в пікселах>) і її висоту (<td height=висота в пікселах>), її горизонтальне та вертикальне вирівнювання (відповідно <td align=left або center або right> та <td valign=top або middle або bottom> ), вимагати того, щоб вміст клітинки відображався в одній стрічці (шляхом зазначення в тезі одного слова NOWRAP), а також робити стовпчики або рядки, що перекриваються (це задається параметрами colspan для перекриття стовпчиків або rowspan для перекриття рядків). Розглянемо приклад саме з перекриттям стовпчиків:

<table border>
<caption>Приклад</caption>
<tr><td colspan=2> Стовпчики перекриваються </td> <td>Стовпчик без перекриття</td></tr>
<tr><td>Перший стовпчик</td><td>Другий стовпчик</td><td>Третій стовпчик</td></tr></table>

Параметр rowspan застосовується аналогічно:

<table border>
<caption>Приклад</caption>
<tr><td rowspan=2> Рядочки перекриваються </td><td>Перший
рядочок</td><td>Другий стовпчик</td><td>Третій стовпчик</td></tr> </tr>
<tr><td>Другий рядочок</td><td>Другий стовпчик</td><td>Третій
стовпчик</td></tr></table>

Обидва приклади проілюстровані на малюнках.

Для тих, кому й цих параметрів не вистачає, остання версія HTML приготувала багато інших, наприклад, можливість задати в якості фону малюнок, змінити колір незатемненої частини об’ємної рамки, кількість записів, що виводяться браузером за один раз, багато варіантів замальовки зовнішньої рамки та відображення граничних ліній, а також теги <tbody> - тіло таблиці (утворюється єдиний блок, що відділяється горизонтальними лініями від верхніх і нижніх колонтитулів, які формуються відповідно тегами <thead> і <tfoot>) та <colgroup>, що робить стовпчики (з рамкою чи без) всередині одинарної клітинки. При цьому прихильники Нітскейпу можуть відпочивати – надмірності погано впливають на його роботу, і тому усі зусилля створити щось оригінальне можуть бути легко зведені нанівець простим завантаженням сторінки в його симпатичний графічний інтерфейс…

Ну що? Потужний інструмент? Тепер можна все і вся поставити на потрібні місця. Сторінку викладаємо, як мозаїку або вітраж, клеєм до якого є тег <table>. Велику картинку ріжемо на менші (є для цього багато різних утиліток) – і збираємо докупи в комбінації з текстом. Так робимо градієнт по полю сторінки, так комбінуємо текст і зображення, ставимо меню і віконечка на визначені нашим задумом області вікна.

Старіші браузери не можуть вкласти одну таблицю в іншу щоб не заплутатись в них і не заплутати глядача. Краще використовувати об’єднання стовпчиків або рядочків. Якщо до і після таблиці є звичайний текст, то для того, щоб відділити його від таблиці, краще зробити розбивку за допомогою тега <P>. І, накінець, врахуйте, що вирівнювання по замовчуванню для вмісту клітинок не робиться, оскільки атрибут ALIGN в елементі TABLE визначає вирівнювання усієї таблиці і не впливатиме на нього.

Тепер невеличка HTML-головоломка: як зробити дійсно тоненьку рамку? Пробуємо так:

<TABLE><TABLE BGCOLOR=”gray” WIDTH=70 BORDER=1> <TR><TD> <P>Рамка </P></TD></TR></TABLE>

Загруба рамка? А нам треба тільки товщиною в один піксел – наступна спроба:

<TABLE> <TABLE BGCOLOR=”gray” CELLSPACING=0 WIDTH=70 BORDER=1> <TR> <TD> <P>Рамка </P></TD> </TR> </TABLE>

Краще, але не набагато. Хочеться, щоб не було цієї опуклої тіні. А якщо так:

<TABLE BGCOLOR=black CELLSPACING=0 CELLPADDING=1 BORDER=0 WIDTH=80> <TR><TD><TABLE BGCOLOR=”gray” CELLSPACING=0 BORDER=0 WIDTH=79> <TR><TD><P>Рамка</P></TD></TR></TABLE></TR></TD></TABLE>

Тепер добре (дивіться малюнок). А в чому причина – читайте інтернетівські розсилки. Останній приклад – з однієї з них, а саме http://webg.agava.ru (а може, і не з неї – розсилок так багато! Як, ви ще не підписалися?!…).

 "Я - ти, і я - не ти"

[2006-08-29] Ти квітнеш, я - всихаю Ти плачеш, я - не знаю Ти гарна, я - нікчемний Ти світла, а я - темний Ти любиш, я - страждаю Знаходиш, я - втрачаю Я вірю, ти - не знаєш Отримую - втрачаєш Я не можу, ти - зробила Я поставив, ти - накрила Я зберіг, а ти - згубила Я не пив, а ти - палила ...

 "Пам'ятаю..."

[2006-06-07] Я досі відчуваю присмак твоїх губ. Цілунок перший ріже мою пам"ять. Забувся лише сердця твого-мого стук. Тепер - не розумію ким для тебе став я. Закинутою іграшкою, хлопцем чи рабом ... Вчорашнім днем, слізьми, коханням, пустотою? Можливо вигадав тебе я сам цілком ... Та мрію полишитися ...

 А хто ж тоді я ...

[2005-04-04] Проминув рік ... я знову тут і пишу продовження. Нажаль. Але життя й повинно складатися з різних переживань, подій ... Отже ... я звільнився з компанії. Пишу технічну книгу, точніше по операційній системі FreeBSD, пишеться важко - перша моя робота такого ро ...

 "Блакитний погляд, марення очей ?"

[2005-10-07] Бажаю погляд твій відчути, Відчути дотик твоїх рук. Я мрію голос твій почути, І твого серця швидкий стук. Принести радість на обличчя Подарувати блиск очей. Я мрію просто, просто зблизька Неначе в маренні ночей Втонути в них. Хапати погляд, Як кисень той від самоти. Мені так тепло ...

 ПОРТФОЛІО

[0000-00-00] ...

Ідея проекту, програмування, HTML, CSS, дизайн, редагування та переклад текстів - Дідок Олександр.
Велика подяка Українській Банерній Мережі за показ банерів,
всім, хто приймає участь у розвитку сайту та його наповненні матеріалами!
©Дідок Олександр Олександрович. 1997-2007