Завдання №5. Створення таблиць.

Тепер трохи докладніше розглянемо оформлен­ня. Основним засобом дизайну— таблиця. Це основа основ Web‒майстерності. Чому саме вона? При оформленні електронного документа виникає бажання розмісти­ти кожен з його елементів на відповідному місці. Таблиця — єдиний спосіб наведення абсолютного порядку на сторінці. Як же її створити? У найпро­стішому випадку це має такий вигляд:

<ТАВLЕ>

<ТR>

<TD>

Текст

</ТАВLЕ>

Цей фрагмент НТМL ‒коду описує таблицю невизначених розмірів з одним рядком <ТR> і одним стовпцем <ТD>. Її межі не будуть видимі, але їх мож­на візуалізувати, надавши тегу <ТАВLЕ> відповід­них параметрів:

<ТАВLЕR ВОRDЕR="1">.

Таблиця з одним рядком і двома колонками за­дається в такий спосіб:

<ТАВLЕ ВОRDЕR=="1">

<ТR>

<ТD>

Текст 1 (стовпчик перший)

<TD>

Текст 1 (стовпчик другий)

</ТАВLЕ>

Взагалі ж, відкриваючим тегам <ТD> і <ТR> відпо­відають необов'язкові закриваючі теги </ТD> і </ ТR>, але на практиці вони використовуються рідко.

НТМL‒код більш складної сторінки буде мати приблизно такий вигляд:

<ТАВLЕ WIDТН="100%"ВОRDЕR="1"ВGСОLOR= "LIMЕ">

<ТR>

<ТD WIТН=30%>Перший рядок (стовпчик пер­ший)

<ТD WITH=70%>Перший рядок (стовпчик дру­гий)

<ТR ВGСОLОR="GRЕЕN">

<ТD>Другий рядок (стовпчик перший)

<ТD>ВGCОLOR="Yеllоw">Другий рядок (сто­впчик другий)

<ТR>

<ТD>Третій рядок (стовпчик перший)

<ТD>Четвертий рядок (стовпчик другий)

</ТАВLЕ>

Вставте цей код в одну зі сторінок — іпdех, html чи qroup, html — природно, у межах дії пари тегів <ВОDY>...</ВОDY>.

Хотілося б звернути вашу увагу на те, що рядок <ТАВLЕ WIDTН="100%"ВОRDЕR="1" ВОСОLОR= "LIМЕ"> можна записати і так: <ТАВІЕ WIDТН=100% ВОRDЕR=1 ВGСОLОR=LIМЕ>, тобто лапки тут і в де­яких інших випадках не є обов'язковими. Але не лінуйтеся їх ставити, це знадобиться вам надалі. Цей рядок означає приблизно наступне: таблиця (ТАВLЕ) займає весь лист (WIТН="100%"), а товщина роз­межувальних ліній дорівнює 1 (ВОRDЕR="1"). Колір тіла комірок таблиці яскраво‒зелений (LIМЕ).

Будь‒який колір у НТМL задається або назвою (геd, blие, qгееn, qгеу, уеllоw, blасk...), або набо­ром шістнадцяткових значень складових у колірній моделі RGВ (у форматі #RRGGВВ). Наприклад, #FFОООО=Rеd, #ООООFF=Вluе, #000000=Вlасk, #FFFFFF=Whitе. Зауважимо, що не всі кольори бу­дуть відображатися правильно в усіх броузерах.

Тегу <ТАВLЕ> за допомогою параметра ВGСОLОR можна задати колір тiла для всіх комірок, у <ТR> — для рядка, а у <ТD> — для окремої комірки.

Тег <ТD WIDTН=30%> чи <ТD WIDТН=70%> задає розмір комірки у відсотках від ширини таблиці. Зу­стрівши це визначення на самому початку таблиці, броузер буде дотримуватися його і далі, таким чи­ном, у наступних рядках цей параметр для окремих комірок можна не вказувати.

Якщо ви хочете розмістити заголовок таблиці в одній великій комірці — використовуйте параметр СОLSРАN для об'єднання двох сусідніх комірок по горизонталі, а RОWSРАN — по вертикалі.

Наприклад:

<ТАВLЕ ВОRDЕR"1"> <ТR><ТD СОLSРАN=2> . . . <ТR><ТD>. . . <ТD>. . .<ТR><ТD> . . . <ТD> .

</TABLЕ>

У першому рядку ми одержимо одну велику ко­мірку, рівну за розміром двом у наступному рядку.

А от приклад застосування параметра ROWSPAN:

<ТАВLЕ ВОRDЕR="1">

<ТR><ТD RОWSРАN=3> Комірка на 3 рядка <ТD> ...

<ТR> <ТО> ...

<ТR> <ТО> ...

</ТАВLЕ>

Не бійтеся експериментувати. Річ у тім, що броузер, використовуючи досить складний алго­ритм відображення таблиць, може розрахувати розмір кожної комірки і спробує, наприклад, роз­ширити стовпчик, якщо в ньому не міститься інформація.

Слід зазначити, що значення параметра WIDТН можна задавати не тільки у відсотках, а й у пікселях. Так, вираження WIТН="400" визначає шири­ну комірки в чотириста пікселів.

Для вирівнювання тексту й інших об'єктів усере­дині комірки використовують параметри АLIGN і VALING, наприклад: <ТD ALIGN="СЕNТЕR" VАLIGN= "ТОР">.

У цьому випадку вміст комірки буде відцентро­ваний по горизонталі (ALIGN="СЕNТЕR") і зміще­ний до його верхньої межі (VАLIGN= "ТОР"). Параметр горизонтального вирівнювання може прийма­ти значення СЕNТЕR, LEFT і RIGHT, а вертикально­го—ТОР, ВОТТОМ і СЕNТЕR. От і всі початкові відо­мості про таблиці.

Було б неправильно не згадати про основні засоби оформлення тексту великого обсягу.

Теги <Р>...</Р> позначають, відповідно, поча­ток і кінець абзацу. Основний параметр, застосо­вуваний у першому з них, той самий — ALIGN. Він може приймати значення СЕNТЕR, RIGHТ, LEFТ і JUSTIFY. Останнє дозволяє вирівняти текст абзацу за шириною.

Зазначимо також, що рядок <Р ALIGN= "СЕNТЕR">...</Р> рівнозначний <СЕNТЕR>... </СЕNТЕR>.

Чи існують інструменти, що полегшують створен­ня НТМL‒файлів? Звичайно, існують. Такими функ­ціями володіє навіть Word. Але більшість професіоналів охоче підпишеться під фразою: "Від­сутність інструмента—кращий інструмент!" І це лег­ко довести.

Спробуйте створити документ у Word і ввести в нього ту саму фразу "Музика — без кордонів", до­давши тире для виразності. Тепер збережіть доку­мент у форматі НТМL. Відкривши знову створений файл у Блокноті Windows, щоб переглянути вихід­ний текст НТМL, ми побачимо приблизно наступне:

<НТМL>

<НЕАD>

<МЕТА НТТР‒EQUITV‒"Сопtепt‒Туре"

СОNТЕNТ="tехt/html;

сhагsеt=windows‒12 51">

<КЕТА NАМЕ="Gепегаtог"

СОNТЕNТ="Місгоsoft Word 97 ">

<ТІТLЕ>іпdехw</ТІТLЕ>

<МЕТА NАМЕ="Versіоп"

СОNТЕNТ="8.0.3б12">

<МЕТА NАМЕ="Dаtе"СОNТЕNТ="3/4/97 ">

<МЕТА NАМЕ="Теmрlаtе"

СОNТЕNТ="С:\Ргоqгаm Fіlеs\Місгоsoft Оffiсе\ Office\НТМl.DОТ">

</HEAD>

<ВОDY ВGСОLОR="#ffffff">

<FОNТ FАСЕ="Тіmеs Nеw Rоmаn"

СОLOR="#000000"><P>Музика </FОNТхFОNТ СОLOR"#000000">‒ </РОМТ>

<FОМT FАСЕ="Тіmеs Nеw Rоmаn"

СОLОR‒"#0 0 0 0 0 0">без кордонів</Р></ FОNТ>

</ВОDY>

</НТМL>

Порівняйте цей текст із нашим першим прикла­дом з п'яти рядків. Ви здивовані? Але ж реалізують вони ту саму ідею. Та код НТМL, автоматично ство­рений Word, працює гірше, тому що прив'язаний до конкретного шрифта. Тепер зрозуміло, чому Web‒майстри, що поважають себе, працюють у зви­чайних текстових редакторах.

На закінчення порекомендуємо вам кілька корис­них джерел для самостійного вивчення НТМL:

— http://www.troitsk.ги/WWW/bооkгиs/wquide/— вступний курс World Wide Web;

— http://geocstses.соm/SіlісопVаІІеу/Lаkеs/ 4122/ — посібник зі створення персональної Web‒сторінки;

— http://gепеsіs.гісог.ги/Dос/ — документація для розроблювачів Web‒вузлів. Крім того, корисними будуть різноманітні книги з Web‒дизайну і мови НТМL.

Таким чином, якщо ви виявите кмітливість і на­полегливість, можливо, сам Борис Гребенщиков приїде потиснути вашу чесну руку. До речі, нехай вас не бентежить, що інформація, перш ніж з'явить­ся в Мережі, має бути розміщена на сервері, підклю­ченому до неї цілодобово. Подібними серверами в нашій країні володіють переважно провайдери Інтернет чи великі фірми, але за кордоном їх кількість обчислюється вже навіть не десятками, а сотнями тисяч. Більше того, на багатьох із них ви можете розмістити свою сторінку зовсім безкоштовно. Але це тема окремої розмови.

Рубрика “Цікаво”

МОНСТРИ

Двадцятичотирьохлітнього програміста знайшли мертвим перед увімкненим екраном комп’ютера. Швидка допомога констатувала ‒ кроовилив у мозок. Коли один із друзів загиблого глянув на монітор, то тільки зусиллям волі примусив себе відвести погляд: виникло відчуття, що його затягує всередину екрана, голову ніби стягнули міцні обручі,а у вухах виник монотонний шум. Хоча на моніторі ,на перший погляд, нічого не було, крім синього віконця Norton Commander. Після ретельного тестування комп’ютера було з’ясовано, що його заражено вірусом, об’єм якого 666 байтів ! Ця містична історія, як кажуть, сталася на початку 90‒х років у Воронежі .Вона добре відома тим , хто професійно займається комп’ютерами. З приводу того, був це дійсно факт убивства за допомогою екрана монітора чи ні, думки розходяться. Але те, що практично відразу після появи персональних ЕОМ розпочалися експерименти з психофізичного впливу на операторів, відомо. Наведемо деякі випадки.