p align="center">1.3. Таблиці та списки Таблиці Таблиці є важливим засобом для створення сторінок. До появи в мові HTML засобів для створення таблиць, не можна було навіть розмістити будь-який текст у колонках, не кажучи вже про створення якої-небудь таблиці. Але після появи таких можливостей Web- дизайнери почали використовувати її в повній мірі й досягають досить складних ефектів. Створюється таблиця за допомогою такої конструкції: <TABLE > <CAPTION>Заголовок</CAPTION> <TR > <TD > ... </TD> .... </TR> </TABLE> Властивості тегу <TABLE>. Тег TABLE починає опис таблиці і може мати наступні параметри: BORDER - визначає товщину рамки таблиці. Якщо вказано нульове значення, то рамка не відображається. Якщо цей параметр не вказаний, його значення вважається нульовим(рамка не відображається). WIDTH, HEIGHT - вказують розміри таблиці, якщо вони повинні бути чітко заданими. ALIGN - визначає, як повинна бути вирівняна таблиця: справа (RIGHT), зліва (LEFT) або по центру (CENTER) сторінки. CELLSPACING - число точок між окремими ячейками в таблиці. CELLPADDING - число точок між рамкою і змістом ячейки. За допомогою тегу <TR >...</TR> оформлюються рядки таблиці. Він може мати наступні параметри: ALIGN - використовується для задання способу горизонтального форматування даних в середині ячейок: вони можуть вирівнюватися по правій (RIGHT), по лівій (LEFT) межах або по центру (CENTER). VALIGN - використовується для задання вертикального форматування даних в середині ячейок: вони можуть вирівнюватися по верхній (TOP), нижній (BOTTOM) межам, по центру (MIDDLE) або мати загаль-ну базову лінію (BASELINE). Конкретні ячейки задаються за допомогою тегу <TD >...</TD>, де параметри можуть бути наступними: WIDTH - задає ширину ячейки. COLSPAN - визначає, скільки колонок таблиці ячейка буде перекривати. ROWSPAN - визначає, скільки рядків таблиці ячейка буде перекривати. NOWRAP - якщо цей параметр вказаний, то зміст ячейок не буде переноситися, для того щоб влізти в ширину ячейки. BGCOLOR - параметр, який підтримується сучасними браузерами: вказує колір фону ячейки у вигляді RGB-триплету або символьного іме-ні. Ще один тег для для оформлення ячейок таблиць- тег <TH>...</TH> - потрібен для задання ячейок-заголовків. Він в усьому співпадає з тегом <TD>, але на відміну від нього, зміст виділяється жирним шрифтом і розміщується по центру. Якщо потрібно задати заголомок УСІЄЇ таблиці, то використовуєть-ся тег <CAPTION >...</CAPTION>. Він має бути в середині тегу <TABLE>, але поза описом ячейок. У нього є лише один параметр: ALIGN - вказує положення заголовку: він може бути в верхній (TOP) або нижній (BOTTOM) частині таблиці. Списки Списки в HTML бувают двох видів: впорядковані (пронумеровані)і невпорядковані (непронумеровані). Відрізняються вони лише способом оформлення. Перед пунктами невпорядкованих списків звичайно ставлять символи-булети(bullets), наприклад, точки, ромбики і т.п., в той час, як пунктам впорядкованих списків передують їх номера. Впорядкований (пронумерований) список. В HTML список складається з тегу-контейнеру списку, який визначає його тип і стандартних тегів <LI>, що передують кожному пункту списку. Коли броузер зустрічає тег впорядкованого списку, він послідовно нумерує пункти списку: 1, 2, 3 і т. д. Впорядкований список відкривається тегом <OL>, а кожен його пункт починається стандартним тегом <LI>. Для створення заголовку списку використовується спеціальний тег <LH>. Список закриваєтся тегом </OL>. Відкриваючий і зачиняючий теги забезпечують переведення рядка до і після списку, відділяючи таким чином список від решти тексту, тому тут немає необхідності використовувати теги абзацу <P>. Впорядковані списки дозволяють вкладення одне в одного. Атрибути тегу <OL>. Вони дозволяють встановлювати вид маркерів елементів списку, а також задавати початковий маркер списку. Наприклад: -- TYPE=А - встановлює маркер у вигляді прописних літер; -- TYPE=а -- встановлює маркер у вигляді малих прописних літер; -- TYPE=I - маркер у вигляді великих римських цифр; -- TYPE=i -- маркер у вигляді маленьких римських цифр; -- TYPE=1 -- маркер у вигляді арабських цифр; Невпорядкований (маркирований) список. Це список, у якому відношення між пунктами невизначені. Маркирований список замість буквенної або числової нумерації передбачає використання різних символів, які називаються маркерами. Список розміщується всередині контейнера <UL>. Браузер створює автоматичний доступ для вкладених списків. Можна встановити вид маркерів в невпорядкованих списках за допомогою атрибута TYPE, який може набувати трьох значень: DISC, SQURE, CIRCLE. Тег <UL> має атрибут COMPACT, який дозволяє виводити список в більш компактному вигляді. Меню Список, який визначається <MENU> виводиться більшістю браузерів тими ж шрифтами і в тому ж стилі, що і невпорядкований список. Як і попередні типи списків, список-меню автоматично відокремлюється від решти тексту кодами переведення рядка. Список типу <DIR> Елемент типу DIR схожий на елемент MENU і використовується для ідентифікації певної частини документу. Список контейнера, що по-чинається тегом <DIR>, виводиться броузером аналогічно невпорядко-ваним спискам. Довжина кожного пункту цього типу списків обмежена 24 символами. Список потребує зачиняючого тегу </DIR>. Список визначень. Це особливий вид списків HTML. Вони подають текст у вигляді словникової статті, що складається з певного терміну та абзацу, який розкриває його значення. Елемент списку визначень DL є контейнером і забезпечує відокремлення списку від іншого тексту порожніми рядками. Всередині контейнеру тегом <DТ> помічається термін, що визнача-ється, а тегом <DD> -- абзац з його визначенням. Теги <DT> и <DD> не є контейнерами. Текст після тегу <DT> повинен міститися в одному ряд-ку. Якщо ця вимога не виконана або якщо рядок виходить за межі вікна браузера, то відбувається переведення рядку , але без відступу. Текст, що стоїть за тегом <DD> виводиться окремим абзацем з відступом вниз на один або два рядки відносно цього терміну. 1.4.Посилання та робота з ними Посилання складається з двох частин. Перша з них - це те, що ми бачимо WEB-сторінці; вона називається вказівник (anchor). Друга частина, яка дає інструкцію браузеру -- адресна частина посилання (URL - адресою). Вказівники бувають 2 типів -- текстові та графічні. Текстовий вказівник--це слово або слова, що підкреслені прямою лінією. Колір вказівника може регулюватися автором або настройками програми перегляду. Текстові вказівники можуть бути безпосередньо частинами тексту, наприклад: <A HREF=“vero.html”> Привіт </A> або бути списком посилань, з яких потрібно зробити вибір. Графічні не підкреслюються і не виділяються кольором, проте навколо них можна зробити рамку. Багато авторів HTHL-документів використовують графічні вказівники у вигляді кнопок, характерних для Windows. Такі кнопки можна досить часто побачити на початкових сторінках Web-сайтів. Вони слугують свого роду змістом сайту і ведуть до різних сторінок, наприклад: <HREF=“whatsnew.htm”> <IMG SRC=”whatsnew.gif” BORDER=0> </A>. Використання зображення у якості посилання. Для використання зображення в якості посилання на інший документ, достаточньо включити ім'я файлу зображення в тег <A>: <A HREF=“whatsnew.htm”><IMG SRC=”image.gif”></A> Тег BASE Вказує базову адресу даного документа (URL), який стане відправною точкою для розрахунку відносних адрес всередині документу. Елемент не має кінцевого тегу. Обов'язкова наявність хоча б одного з параметрів. Параметри: HREF - визначає базову адресу (URL) даного документу. TARGET - визначає ім'я фрейму, яке буде використовуватися в гіперпосиланнях по замовчуванню. Пример: <HEAD> <!-- Нехай браузер думає, що знаходиться за адресою : --> <BASE HREF="http://www.igf.ru/other/index.html"> <TITLE>Руководство по эксплуатации</TITLE> </HEAD> ... <!-- А тепер створемо відносне посилання на документ --> <!-- http://www.igf.ru/list.html --> <A HREF="../list.html">Список</A> ... Створення посилань на документи і файли Потрібно повідомити браузеру, який елемент сторінки є вказівником, і вказати адресу документа, на який робите посилання. Обидві дії виконуються за допомогою тегу <A>. Тег <A> має єдиний атрибут HREF, в якому розміщується URL - адреса. Тег є контейнером, тобто потребує </A>. Атрибут HREF вказує на абсолютну адресу сторінки. Вказівником можуть бути слова, які браузер виділяє підкресленням та кольором. Текст поза контейнером </A> не є вказівником і не буде підкресленим. Коли читач клікає мишкою на цих словах, браузер загружає його сторінку. Тег LINK Елемент LINK описує взаємозв'язок документу з іншими документами на сайті, вказуючи його місце в ієрархічній структурі сайту. Елемент не має кінцевого тегу. В заголовку може міститися декілька елементів LINK. Параметри: HREF-- визначає URL об'єкту. REL--визначає тип взаємозв'язку даного документу з об'єктом, який визначений параметром HREF. Можливі значення: Stylesheet-- вказує на файл, який містить таблицю стилів (CSS) для даного документу. Браузер загрузить css-файл з вказаної в параметрі HREF адреси та застосує його до даного документу; home - вказує на головну сторінку вашого сайту; toc, contents--вказують на файл, який містить зміст даного документу; index - вказує на файл, який містить інформацію для індексного пошуку в даному документі; glossary--вказує на файл, який містить перелік термінів,що відносяться до даного документу; copyright--вказує на сторінку сайту, де говориться про його авторів, авторських правах і т.д.; up, parent--вказує на "батьківську" сторінку (документ, що стоїть на сходинку вище у ієрархічній структурі вашого сайту); child-- вказує на "дочірню" сторінку (документ, що стоїть на сходинку нище у ієрархічній структурі вашого сайту); next - вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника); previous--вказує на попередню сторінку в послідовності документів; last, end-- вказує на останню сторінку в послідовності документів; first-- вказує на першу сторінку в послідовності документів; help - вказує на сторінку з підказкою. TYPE - визначає MIME-тип для об'єкту, вказаного в параметрі HREF. Приклад: <HEAD> <TITLE>Елемент DIV</TITLE> <LINK REL="HOME" TITLE="HTML-довідник" HREF="index.html"> <LINK REL="UP" TITLE="Текстові блоки" HREF="textblocks.html"> <LINK REL="PREVIOUS" TITLE="Елемент P" HREF="p.html"> <LINK REL="NEXT" TITLE="Елемент ADDRESS" HREF="address.html"> </HEAD> Додаткові відомості про тег А. 1)Елемент A не може бути вкаледеним сам у себе, тобто неможливі конструкції: <A HREF="link1.html"> Перший лінк <A HREF="link2.html">Другий лінк</A> Продовжуємо перший лінк </A> 2) За допомогою елементу BASE можна вказати значення TARGET для всех гіперпосилань в даному документі. Р.2.Створення Web-документу Як приклад створення Web-документу наведемо наступний алгоритм. Перша сторінка--“Енциклопедія.html” має наступну структуру: <HTML> <HEAD> <TITLE>Welcome</TITLE> </HEAD> <BODY > <bgsound src="Бетховен - К Элизе.rmi" loop=infinite volume=-700> <a href="Збірник афоризмів.html"><img src="abcdone4.gif" align="left" hspase="50" border="30%" width="75%"></a> </BODY> </HTML> При натисненні лівої кнопки миші на анімації перейдемо до головної сторінки сайту-“Збірник афоризмів.html”: <HTML> <HEAD> <TITLE> Енциклопедія афоризмів на всі випадки життя</TITLE> </HEAD> <BODY bgcolor="aliceblue"> <bgsound src="endless.mid" loop=infinite volume=-300> <P> <font color="fuchsia" > <h2 align="center" ><img src="erth.gif" vspase="4" hspase="4">Вас вітає найкраща збірка афоризмів на всі випадки життя </h2> </font> <table border="0" width="100%" > <tr> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%" > <A href="Любов.html"><h4>Любов</h4></A></td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> </td> </tr> <tr> <td align="middle" width="20%"height="10%"> </td> <td align="middle" width="20%"height="10%"> <A href="Чоловіки.html"> <h4>Чоловіки</h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Діти та батьки.html"><h4><font color="blue">Діти та батьки</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Дівчата.html"><h4>Дівчата</h4></A></td> <td align="middle" width="20%" height="10%"></td> </tr> <tr> <td align="middle" width="20%"height="10%"> <A href="Шлюб.html" ><h4>Шлюб</h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Виховання дітей.html" ><h4><font color="blue">Виховання дітей</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Дружба.html"><h4><font color="deepskyblue">Дружба</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Добро і зло.html"><h4><font color="blue">Добро і зло</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Підлітки.html"><h4>Підлітки</h4></A></td> </tr> <tr> <td align="middle" width="20%"height="10%"> <A href="Жінки.html"><h4><font color="blue">Жінки</font></h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Жіноча інтуїція.html" ><h4><font color="deepskyblue">Жіноча інтуїція</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Фемінізм.html"><h4><font color="green">Фемінізм</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Леді.html"><h4><font color="deepskyblue">Леді</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Джентельмени.html"><h4><font color="blue">Джентельмени</font></h4></A></td> </tr> <tr> <td align="middle" width="20%"height="10%"> <A href="Одруження.html" ><h4><font color="deepskyblue">Одруження</font> </h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Весілля.html" ><h4><font color="green">Весілля</font></h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Розлучення.html" ><h4><font color="gold">Розлучення</font> </h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Ревнощі.html" ><h4><font color="green">Ревнощі</font></h4></A></td> <td align="middle" width="20%"height="10%"> <A href="Зрада.html" ><h4><font color="deepskyblue">Зрада в коханні</font></h4></A></td> </tr> <tr> <td align="middle" width="20%" height="10%"> <A href="Влада.html"><h4><font color="green">Влада</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Заздрість.html" ><h4><font color="gold">Заздрість</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Кар'єра.html"><h4><font color="orange">Кар'єра</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Людина.html"><h4><font color="gold">Людина</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Політика.html"><h4><font color="green">Політика</font></h4></A></td> </tr> <tr> <td align="middle" width="20%" height="10%"> <A href="Знання.html"><h4><font color="gold">Знання</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Освіта.html" ><h4><font color="orange">Освіта</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Учні та вчителі.html"><h4><font color="red">Учні та вчителі</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Школа.html"><h4><font color="orange">Школа</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Математика.html"><h4><font color="gold">Математика</font></h4></A></td></tr> <tr> <td align="middle" width="20%" height="10%"> <A href="Життя.html"><h4><font color="orange">Життя</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Смерть.html" ><h4><font color="red">Смерть</font></h4></A></td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> <A href="Плітки.html"><h4><font color="red">Плітки</font></h4></A></td> <td align="middle" width="20%" height="10%"> <A href="Дієта.html"><h4><font color="orange">Дієта</font></h4></A></td> </tr> <tr> <td align="middle" width="20%" height="10%"> <A href="Мовчання.html"><h4><font color="red">Мовчання</font></h4></A></td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> </td> <td align="middle" width="20%" height="10%"> <A href="Реклама.html"><h4><font color="red">Реклама</font></h4></A></td> </tr> </table> </BODY> </HTML> При виборі кожної категорії афоризмів, ми отримаємо перехід на нову сторінку з афоризмами певної характеристики. Зауважимо, що при відкритті кожної сторінки Web-сайту звучить мелодія, яка займає досить мало місця, оскільки збережена з розширенням .mid. Висновки Таким чином, ми вивчили можливості мови HTML для створення Web-сторінок, дізналися, які HTML- та графічні редактори краще використовувати у Web-дизайні, які переваги та недоліки тих чи інших програмних пакетів. Отже, зрозумівши принцип побудови Web-сторінки, вивчивши можливості поєднання в ній різних видів інформації, ми можемо стверджувати, що Web-сторінки, з їх потенціалом можуть використовуватися для різних цілей. Web-сторінка - це обличчя тієї фірми, того закладу, людини, яка розмістила її в WWW. Саме тому сьогодні Web-дизайну приділяється така велика увага, оскільки від нього безпосередньо залежить популярність того чи іншого інформаційного ресурсу Сітки. Недарма нині професія Web-дизайнера є однією з економічно найвигідніших професій. Людина, яка створює Web-сторінку, поєднує свої знання і навики зі своїм творчим потенціалом. Для того, щоб створити Web-сторінку, яка б радувала людей, потрібно поєднувати в собі якості художника та програміста. Підводячи підсумок усьому, що сказано вище, хочеться відмітити, що HTML став тим форматом передачі інформації, який найбільш повно і якісно задовольняє запити сучасного суспільства. Безсумнівним фактом є і те, що майбутнє саме за HTML. Література 1) Рамський Ю.С., Іваськін І.С., Ніколаєнко О.Ю. Вивчення Web-програмування в школі. Навчальний посібник. Тернопіль:Навчальна книга-Богдан,- 2004.- 200с. 2) Гаевский А.Ю., Романовский В.А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML.-К.: А.С.К.,-2002.- 472с. 3) Гончаров А. Самоучитель HTML.Питер.-1999.-239с. 4) Будилов В.А. Практические занятия по HTML. Краткий курс. Санкт-Петербург: Наука и техника,-2001.-256с. 5) Смит Бад, Бибек Артур. Создание Web-страниц для «чайников».:Пер. с англ. :Уч. Пос.М.: Издательский дом «Вильямс»,-2001.-256с. 6) www.webschool.narod.ru
Страницы: 1, 2, 3
|