Таблиці та списки

33937

знаков

таблицы

изображений

Створення Web-документів. Використання мови HTML

1.3. Таблиці та списки

Таблиці

Таблиці є важливим засобом для створення сторінок. До появи в мові HTML засобів для створення таблиць, не можна було навіть розмістити будь-який текст у колонках, не кажучи вже про створення якої-небудь таблиці. Але після появи таких можливостей Web- дизайнери почали використовувати її в повній мірі й досягають досить складних ефектів.

Створюється таблиця за допомогою такої конструкції:

<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>:

Тег BASE

Вказує базову адресу даного документа (URL), який стане відправною точкою для розрахунку відносних адрес всередині документу. Елемент не має кінцевого тегу. Обов'язкова наявність хоча б одного з параметрів. Параметри:

HREF – визначає базову адресу (URL) даного документу. TARGET – визначає ім'я фрейму, яке буде використовуватися в гіперпосиланнях по замовчуванню. Пример:

<HEAD>

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

<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—вказує на файл, який містить перелік термінів,що відносяться до даного документу;

up, parent—вказує на "батьківську" сторінку (документ, що стоїть на сходинку вище у ієрархічній структурі вашого сайту);

child-- вказує на "дочірню" сторінку (документ, що стоїть на сходинку нище у ієрархічній структурі вашого сайту);

next – вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника);

previous—вказує на попередню сторінку в послідовності документів;

last, end-- вказує на останню сторінку в послідовності документів;

first-- вказує на першу сторінку в послідовності документів;

help – вказує на сторінку з підказкою.

TYPE - визначає MIME-тип для об'єкту, вказаного в параметрі HREF.

Приклад:

<HEAD>

<TITLE>Елемент DIV</TITLE>

</HEAD>

Додаткові відомості про тег А.

1)Елемент A не може бути вкаледеним сам у себе, тобто неможливі конструкції:

Перший лінк

<A HREF="link2.html">Другий лінк</A>

Продовжуємо перший лінк

</A>

2) За допомогою елементу BASE можна вказати значення TARGET для всех гіперпосилань в даному документі.

Р.2.Створення Web-документу

Як приклад створення Web-документу наведемо наступний алгоритм.

Перша сторінка—“Енциклопедія.html” має наступну структуру:

<HTML>

<HEAD>

<TITLE>Welcome</TITLE>

</HEAD>

<BODY >

</BODY>

</HTML>

При натисненні лівої кнопки миші на анімації перейдемо до головної сторінки сайту-“Збірник афоризмів.html”:

<HTML>

<HEAD>

<TITLE> Енциклопедія афоризмів на всі випадки життя</TITLE>

</HEAD>

<P>

<h2 align="center" ><img src="erth.gif" vspase="4" hspase="4">Вас вітає найкраща збірка афоризмів на всі випадки життя </h2>

</font>

<tr>

<A href="Любов.html"><h4>Любов</h4></A></td>

</tr>

<tr>

<A href="Чоловіки.html"> <h4>Чоловіки</h4></A></td>

<A href="Діти та батьки.html"><h4><font color="blue">Діти та батьки</font></h4></A></td>

<A href="Дівчата.html"><h4>Дівчата</h4></A></td>

</tr>

<tr>

<A href="Виховання дітей.html" ><h4><font color="blue">Виховання дітей</font></h4></A></td>

<A href="Дружба.html"><h4><font color="deepskyblue">Дружба</font></h4></A></td>

<A href="Добро і зло.html"><h4><font color="blue">Добро і зло</font></h4></A></td>

<A href="Підлітки.html"><h4>Підлітки</h4></A></td>

</tr>

<tr>

<A href="Жінки.html"><h4><font color="blue">Жінки</font></h4></A></td>

<A href="Жіноча інтуїція.html" ><h4><font color="deepskyblue">Жіноча інтуїція</font></h4></A></td>

<A href="Фемінізм.html"><h4><font color="green">Фемінізм</font></h4></A></td>

<A href="Джентельмени.html"><h4><font color="blue">Джентельмени</font></h4></A></td>

</tr>

<tr>

<A href="Одруження.html" ><h4><font color="deepskyblue">Одруження</font> </h4></A></td>

<A href="Весілля.html" ><h4><font color="green">Весілля</font></h4></A></td>

<A href="Розлучення.html" ><h4><font color="gold">Розлучення</font> </h4></A></td>

<A href="Ревнощі.html" ><h4><font color="green">Ревнощі</font></h4></A></td>

<A href="Зрада.html" ><h4><font color="deepskyblue">Зрада в коханні</font></h4></A></td>

</tr>

<tr>

<A href="Влада.html"><h4><font color="green">Влада</font></h4></A></td>

<A href="Заздрість.html" ><h4><font color="gold">Заздрість</font></h4></A></td>

<A href="Людина.html"><h4><font color="gold">Людина</font></h4></A></td>

<A href="Політика.html"><h4><font color="green">Політика</font></h4></A></td>

</tr>

<tr>

<A href="Знання.html"><h4><font color="gold">Знання</font></h4></A></td>

<A href="Освіта.html" ><h4><font color="orange">Освіта</font></h4></A></td>

<A href="Учні та вчителі.html"><h4><font color="red">Учні та вчителі</font></h4></A></td>

<A href="Школа.html"><h4><font color="orange">Школа</font></h4></A></td>

<A href="Математика.html"><h4><font color="gold">Математика</font></h4></A></td></tr>

<tr>

<A href="Життя.html"><h4><font color="orange">Життя</font></h4></A></td>

<A href="Смерть.html" ><h4><font color="red">Смерть</font></h4></A></td>

<A href="Плітки.html"><h4><font color="red">Плітки</font></h4></A></td>

<A href="Дієта.html"><h4><font color="orange">Дієта</font></h4></A></td>

</tr>

<tr>

<A href="Мовчання.html"><h4><font color="red">Мовчання</font></h4></A></td>

<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

Створення Web-документів. Використання мови HTML

Раздел: Информатика, программирование
Количество знаков с пробелами: 33937
Количество таблиц: 3
Количество изображений: 0

Скачать

... -узла необхідно залишити ім'я і місце знаходження вузла. Потім необхідно підтвердити вибір шаблона натисненням кнопки Ок. В робочому вікні FrontPage2003 з'явиться представлення Папки, яке показує файлову структуру створеного Web-вузла. В ньому знаходиться один файл Index. htm для відображення домашньої сторінки і дві пусті папки для збереження файлів, створених в процесі створення Web-вузла. 4. ...

Скачать

... в даній роботі, була опробована й досліджена в реальних умовах моєї професійної діяльності й показала свою працездатність і ефективність. 3. Розробка системи керування та актуалізації інформації web-сайту національного оператора Енергоринка 3.1 Вибір інструментарію для створення web-сайту та системи керування Перед тим, як безпосередньо перейти до створення Web-сайту Національного ...

Скачать

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

Скачать

... та початкові домени різних країн. Послідовність доменів розділяють крапкою. Наприклад, univer.Lviv.ua – кореневий рівень – ua (Україна), проміжковий рівень – Lviv, нижній рівень- univer.Адреса користувача мережі Internet складається з двох чатин: його власного індетифікатора та доменного імені його комп’ютера, які розділяються знаком @. Наприклад, pavlo@letz..lviv.ua, де pavlo- власний індетифі ...

Главная Новости Рефераты Статьи Вузы

О проекте Соглашение

Наверх

Войти на сайт

Навигация

Похожие работы

0 комментариев

Разделы

Инфо

Следите за новостями