Курсовая на тему Створення Web документів Використання мови HTML
Работа добавлена на сайт bukvasha.net: 2014-11-28Поможем написать учебную работу
Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
от 25%
Подписываем
договор
Міністерство освіти і науки України
Національний педагогічний університет імені М.П.Драгоманова
Фізико-математичний факультет
Кафедра основ інформатики та обчислювальної техніки
Курсова робота з інформатики на тему:
"Створення Web-документів. Використання мови HTML"
Автор: студентка 41МІ групи
фізико-математичного факультету
Бондар Наталія Петрівна
Науковий керівник: професор
Морзе Наталія Вікторівна
Робота захищена "___"________2004року
Оцінка _______________
Комісія: 1.
2.
3.
Київ-2004
План
I. Вступ.
II. Основна частина.
1. Основи Web-програмування. Використання мови HTML.
1.1. Базові елементи HTML.
1.2. Форматування тексту.
1.3. Таблиці та списки.
1.4. Посилання та робота з ними.
2. Створення Web-документу.
III. Висновки.
IV.Література.
Вступ
Internet має кілька служб, зокрема, електронну пошту, телеконференференції (дискусійні групи), передавання файлів тощо. Більшість документів із різноманітною інформацією з різних галузей знань мають гіпертекстовий формат. Службу Інтернет, яка управляє передаванням таких документів, називають World Wide Web (Web, WWW). Цим же термином або простором Web називають обширну сукупність Web-документів, між якими існують гіпертекстові зв'язки.
Поняття «гіпертекст» має досить давню історію. Воно виникло на стику філософії та комп'ютерних технологій ще у середині XX ст. Теоретичною основою гіпертексту стали сформульовані В.Бушем (1945 р.) принципи нелінійного письма, які він докладно висвітлив у роботі «Як ми могли б мислити». У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали «гіпертекст».У гіпертексті є посилання на інші сторінки або документи. В більшості броузерів(програм для завантаження та перегляду Web- документів) ці посилання підкреслюються або виділяються іншим кольором. Якщо клацнути лівою кнопкою миші на гіперпосиланні, то програма перегляду гіпертексту завантажить документ, на який вказує посилання. Таким чином, сторінка набуває властивості інтерактивності. У деякому розумінні, завдяки гіпертексту, інформація у WWW організована за тим самим принципом, що і в людському мозку.
Окремі документи, які складають простір Web, називають Web-сторінками. Web- сторінки зберігаються на жорстких дисках Web-серверів. Web-сервери — це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web-сторінок; це програмне забезпечення також називається Web-сервером.
Групу сторінок, присвячену певній темі та розміщену в певному каталозі Web-сервера, називають Web- вузлом або Web-сайтом. Один фізичний Web- сервер може містити кілька Web-сайтів.
Web-сторінки мають вигляд звичайних текстових документів, в які введено вказівки форматування. Принцип роботи браузера полягає в інтерпретації цих вказівок. При відображенні таких документів браузером самі вказівки не відображаються, проте впливають на спосіб відображення решти частини документу. Згадані вказівки називаються дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розмітки гіпертексту-HTML( Hyper Text Markup Language).
Документи, розмічені за допомогою цієї мови, називаються HTML- документами. HTML- документи мають розширення .html або .htm. Інколи процес розробки Web- документів засобами мови HTML називають Web- програмуванням. Проте слід розуміти, що HTML не є мовою програмування у звичайному розумінні, а є мовою розмітки(опису). Термін Web- програмування мовою HTML має історичне походження.
Мова HTML розроблена спеціально для Web. Її популярність забезпечують зокрема такі властивості:
—документ, створений за допомогою деякої програми, наприклад текстового редактора, часто важко(а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною;
—HTML — це відкритий стандарт;
— HTML не є власністю якої-небудь фірми;
— можливість використання гіпертексту;
— HTML підтримує мультимедіа.
Гіпертекстовий зв'язок між сотнями мільйонів документів, які зберігаються на серверах Інтернету, є основою існування логічного простору World Wide Web. Проте такий зв'язок не міг би існувати, якщо б кожен документ у цьому просторі не мав своєї унікальної адреси. Адреса будь-якого ресурсу в мережі повинна записуватись відповідно до певного стандарту. Саме таким стандартом є URL (Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат:
протокол://доменне і'мя//каталог/файл
Р.1. Основи Web-програмування. Використання мови HTML
1.1.Базові елементи HTML
Елемент HTML
Для позначення меж HTML-документу використовується подвійний тег < HTML >. Початковий тег < HTML >, у якого відсутні атрибути, розміщується на початку HTML-файлу, а кінцевий тег < /HTML > є останнім тегом коду і позначає закінчення всього документу. Таким чином, елемент HTML є найзовнішнім і не входить до складу інших елементів, тобто з елементом HTML не пов'язаний жоден з об'єктів, які відображаються у вікні браузера.
До складу контейнеру HTML входять два структурні елементи: HEAD (елемент заголовку) та BODY (основна частина або тіло документу). Таким чином, документ HTML має вигляд:
< HTML >
···
<! -- Тут розміщуються елементи заголовку і основної частини документу -- >
···
< /HTML >
Заголовок документу(елемент HEAD)
Заголовок HTML-документу визначається елементом HEAD. Тег <HEAD> не має атрибутів. Елемент HEAD розміщується одразу після тегу < HTML >, перед основною частиною Web-сторінки:
< HTML >
<HEAD>
<! -- Тут розміщується заголовок документу -- >
</HEAD>
···
< /HTML >
Елемент HEAD (як і елемент HTML) не відображається при перегляді Web-сторінки, він надає браузеру загальну інформацію про HTML-файл.
Назва документу(елемент TITLE)
До заголовку документу входить обов'язковий елемент, який представлений контейнером <TITLE>. Все, що знаходиться між парою тегів <TITLE> і </TITLE>, інтерпретується браузером як назва Web-сторінки.
Якщо в документі є гіперпосилання, то назва документу, на який вказано посилання, буде з'являтися у вигляді плаваючої підказки при на-веденні на посилання вказівника миші.
Елемент TITLE по відношенню до елемента HEAD є дочірнім,тобто вкладеним у контейнер <HEAD>:
< HTML >
<HEAD>
<TITLE >Назва Web-сторінки</TITLE>
···
</HEAD>
···
< /HTML >
Тіло документу(елемент BODY)
Елемент BODY є наступним компонентом Web- сторінки. Парні теги <BODY> і </BODY> вказують на початок і кінець тіла документа. Весь зміст документа міститься в елементі BODY.
Початкові і кінцеві теги елементу BODY є необов'язковими в структурі HTML-документа. Проте контейнер BODY необхідний для того, щоб задати властивості всієї сторінки. Наявність в HTML-документі елементу BODY є формальною ознакою того, що даний документ має звичайну структуру.
Тег <BODY> розміщується безпосередньо після елементу HEAD, а кінцевий тег </BODY> є передостаннім тегом документу:
< HTML >
<HEAD>
<TITLE >Назва Web-сторінки</TITLE>
</HEAD>
<BODY>
<!- - Зміст документу -->
···
</BODY>
< /HTML >
Початковий тег <BODY> може доповнюватися декількома атрибутами, які визначають зовнішній вигляд документу в цілому.
1.2.Форматування тексту
Вирівнювання тексту та горизонтальна лінія
Для того, щоб вставити розрив рядка, необхідно скористатися тегом <BR> . Якщо потрібно зробити так, щоб в певному місці текст НЕ МІГ бути розірваним, необхідно написати тег <NOBR>. Для розбиття тексту на параграфи використовується тег <P>ТЕКСТ</P>
Тег <P> має один параметр ALIGN, який вказує на спосіб вирівнювання тексту в параграфі: текст може бути вирівнений по правій (RIGHT), лівій (LEFT) межах або по центру (CENTER). Якщо параметр пропущено, то текст вирівнюється по лівому краю. Щоб розмістити параграф по центру можна також використовувати тег <CENTER>…</CENTER>
Ще одним способом розбиття тексту на частини можна назвати горизонтальну лінію. Вона є елементом мови HTML і вставляється в текст за допомогою тегу <HR>, де параметри можуть бути наступними:
WIDTH – задає ширину лінії
SIZE – задає товщину лінії
NOSHADE – лінія не матиме тіні.
Коментар.
Коментар міститься між послідовностями < !-- текст коментаря -- >
Заголовок.
Для їх створення використовуються теги <Н1>...</H1>,...,
<H6>...</H6>. Розмір 1 відповідає найбільшому шрифту, а розмір 6—
найменшому.
Шрифти
Основні шрифти, які використовуються в HTML можна подати за допомогою наступної таблиці:
Іншим засобом логічного виділення можна вважати тег <STRONG> ...</STRONG>. Зміст тегу звичайно відображається жирним шрифтом. Змінити розмір і колір шрифтів можна за допомогою тегу <FONT >...</FONT>. Параметри тегу можуть бути наступними:
SIZE=``value або value'' – задає абсолютний або відносний розмір шрифту. Відносний розмір задається по відношенню до базового розміру. Діапазон можливих значень від 1 до 7.
SIZE - задает размір шрифта.
COLOR – вказує колір для тексту.
Наведемо тепер таблицю з деякими назвами і кодами кольорів.
Під кодом розуміємо RGB- код. Будь-який колір в цьому випадку відображається як комбінація червоного (R), зеленого (G) та синього (B) кольорів, взятих в певних пропорціях.
Значення RGB- коду
Національний педагогічний університет імені М.П.Драгоманова
Фізико-математичний факультет
Кафедра основ інформатики та обчислювальної техніки
Курсова робота з інформатики на тему:
"Створення Web-документів. Використання мови HTML"
Автор: студентка 41МІ групи
фізико-математичного факультету
Бондар Наталія Петрівна
Науковий керівник: професор
Морзе Наталія Вікторівна
Робота захищена "___"________2004року
Оцінка _______________
Комісія: 1.
2.
3.
Київ-2004
План
I. Вступ.
II. Основна частина.
1. Основи Web-програмування. Використання мови HTML.
1.1. Базові елементи HTML.
1.2. Форматування тексту.
1.3. Таблиці та списки.
1.4. Посилання та робота з ними.
2. Створення Web-документу.
III. Висновки.
IV.Література.
Вступ
Internet має кілька служб, зокрема, електронну пошту, телеконференференції (дискусійні групи), передавання файлів тощо. Більшість документів із різноманітною інформацією з різних галузей знань мають гіпертекстовий формат. Службу Інтернет, яка управляє передаванням таких документів, називають World Wide Web (Web, WWW). Цим же термином або простором Web називають обширну сукупність Web-документів, між якими існують гіпертекстові зв'язки.
Поняття «гіпертекст» має досить давню історію. Воно виникло на стику філософії та комп'ютерних технологій ще у середині XX ст. Теоретичною основою гіпертексту стали сформульовані В.Бушем (1945 р.) принципи нелінійного письма, які він докладно висвітлив у роботі «Як ми могли б мислити». У 60-х роках Т.Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали «гіпертекст».У гіпертексті є посилання на інші сторінки або документи. В більшості броузерів(програм для завантаження та перегляду Web- документів) ці посилання підкреслюються або виділяються іншим кольором. Якщо клацнути лівою кнопкою миші на гіперпосиланні, то програма перегляду гіпертексту завантажить документ, на який вказує посилання. Таким чином, сторінка набуває властивості інтерактивності. У деякому розумінні, завдяки гіпертексту, інформація у WWW організована за тим самим принципом, що і в людському мозку.
Окремі документи, які складають простір Web, називають Web-сторінками. Web- сторінки зберігаються на жорстких дисках Web-серверів. Web-сервери — це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web-сторінок; це програмне забезпечення також називається Web-сервером.
Групу сторінок, присвячену певній темі та розміщену в певному каталозі Web-сервера, називають Web- вузлом або Web-сайтом. Один фізичний Web- сервер може містити кілька Web-сайтів.
Web-сторінки мають вигляд звичайних текстових документів, в які введено вказівки форматування. Принцип роботи браузера полягає в інтерпретації цих вказівок. При відображенні таких документів браузером самі вказівки не відображаються, проте впливають на спосіб відображення решти частини документу. Згадані вказівки називаються дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розмітки гіпертексту-HTML( Hyper Text Markup Language).
Документи, розмічені за допомогою цієї мови, називаються HTML- документами. HTML- документи мають розширення .html або .htm. Інколи процес розробки Web- документів засобами мови HTML називають Web- програмуванням. Проте слід розуміти, що HTML не є мовою програмування у звичайному розумінні, а є мовою розмітки(опису). Термін Web- програмування мовою HTML має історичне походження.
Мова HTML розроблена спеціально для Web. Її популярність забезпечують зокрема такі властивості:
—документ, створений за допомогою деякої програми, наприклад текстового редактора, часто важко(а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною;
—HTML — це відкритий стандарт;
— HTML не є власністю якої-небудь фірми;
— можливість використання гіпертексту;
— HTML підтримує мультимедіа.
Гіпертекстовий зв'язок між сотнями мільйонів документів, які зберігаються на серверах Інтернету, є основою існування логічного простору World Wide Web. Проте такий зв'язок не міг би існувати, якщо б кожен документ у цьому просторі не мав своєї унікальної адреси. Адреса будь-якого ресурсу в мережі повинна записуватись відповідно до певного стандарту. Саме таким стандартом є URL (Uniform Resourse Locator, уніфікований вказівник ресурсів), згідно з яким адреса найчастіше має такий формат:
протокол://доменне і'мя//каталог/файл
Р.1. Основи Web-програмування. Використання мови HTML
1.1.Базові елементи HTML
Елемент HTML
Для позначення меж HTML-документу використовується подвійний тег < HTML >. Початковий тег < HTML >, у якого відсутні атрибути, розміщується на початку HTML-файлу, а кінцевий тег < /HTML > є останнім тегом коду і позначає закінчення всього документу. Таким чином, елемент HTML є найзовнішнім і не входить до складу інших елементів, тобто з елементом HTML не пов'язаний жоден з об'єктів, які відображаються у вікні браузера.
До складу контейнеру HTML входять два структурні елементи: HEAD (елемент заголовку) та BODY (основна частина або тіло документу). Таким чином, документ HTML має вигляд:
< HTML >
···
<! -- Тут розміщуються елементи заголовку і основної частини документу -- >
···
< /HTML >
Заголовок документу(елемент HEAD)
Заголовок HTML-документу визначається елементом HEAD. Тег <HEAD> не має атрибутів. Елемент HEAD розміщується одразу після тегу < HTML >, перед основною частиною Web-сторінки:
< HTML >
<HEAD>
<! -- Тут розміщується заголовок документу -- >
</HEAD>
···
< /HTML >
Елемент HEAD (як і елемент HTML) не відображається при перегляді Web-сторінки, він надає браузеру загальну інформацію про HTML-файл.
Назва документу(елемент TITLE)
До заголовку документу входить обов'язковий елемент, який представлений контейнером <TITLE>. Все, що знаходиться між парою тегів <TITLE> і </TITLE>, інтерпретується браузером як назва Web-сторінки.
Якщо в документі є гіперпосилання, то назва документу, на який вказано посилання, буде з'являтися у вигляді плаваючої підказки при на-веденні на посилання вказівника миші.
Елемент TITLE по відношенню до елемента HEAD є дочірнім,тобто вкладеним у контейнер <HEAD>:
< HTML >
<HEAD>
<TITLE >Назва Web-сторінки</TITLE>
···
</HEAD>
···
< /HTML >
Тіло документу(елемент BODY)
Елемент BODY є наступним компонентом Web- сторінки. Парні теги <BODY> і </BODY> вказують на початок і кінець тіла документа. Весь зміст документа міститься в елементі BODY.
Початкові і кінцеві теги елементу BODY є необов'язковими в структурі HTML-документа. Проте контейнер BODY необхідний для того, щоб задати властивості всієї сторінки. Наявність в HTML-документі елементу BODY є формальною ознакою того, що даний документ має звичайну структуру.
Тег <BODY> розміщується безпосередньо після елементу HEAD, а кінцевий тег </BODY> є передостаннім тегом документу:
< HTML >
<HEAD>
<TITLE >Назва Web-сторінки</TITLE>
</HEAD>
<BODY>
<!- - Зміст документу -->
···
</BODY>
< /HTML >
Початковий тег <BODY> може доповнюватися декількома атрибутами, які визначають зовнішній вигляд документу в цілому.
1.2.Форматування тексту
Вирівнювання тексту та горизонтальна лінія
Для того, щоб вставити розрив рядка, необхідно скористатися тегом <BR> . Якщо потрібно зробити так, щоб в певному місці текст НЕ МІГ бути розірваним, необхідно написати тег <NOBR>. Для розбиття тексту на параграфи використовується тег <P>ТЕКСТ</P>
Тег <P> має один параметр ALIGN, який вказує на спосіб вирівнювання тексту в параграфі: текст може бути вирівнений по правій (RIGHT), лівій (LEFT) межах або по центру (CENTER). Якщо параметр пропущено, то текст вирівнюється по лівому краю. Щоб розмістити параграф по центру можна також використовувати тег <CENTER>…</CENTER>
Ще одним способом розбиття тексту на частини можна назвати горизонтальну лінію. Вона є елементом мови HTML і вставляється в текст за допомогою тегу <HR>, де параметри можуть бути наступними:
WIDTH – задає ширину лінії
SIZE – задає товщину лінії
NOSHADE – лінія не матиме тіні.
Коментар.
Коментар міститься між послідовностями < !-- текст коментаря -- >
Заголовок.
Для їх створення використовуються теги <Н1>...</H1>,...,
<H6>...</H6>. Розмір 1 відповідає найбільшому шрифту, а розмір 6—
найменшому.
Шрифти
Основні шрифти, які використовуються в HTML можна подати за допомогою наступної таблиці:
| Тег | Відповідний тегу шрифт |
| <TT> | Телеграфний курсив |
| <I> | Курсив |
| <b> | Жирний шрифт |
| <big> | Великий шрифт |
| <small> | Маленький шрифт |
| <STRIKE> або <S> | Перекреслений шрифт |
| <u> | Підкреслений шрифт |
SIZE=``value або value'' – задає абсолютний або відносний розмір шрифту. Відносний розмір задається по відношенню до базового розміру. Діапазон можливих значень від 1 до 7.
SIZE - задает размір шрифта.
COLOR – вказує колір для тексту.
Наведемо тепер таблицю з деякими назвами і кодами кольорів.
| Українська назва | Англійська назва | Код |
| Аквамарин | Aqua | #00FFFF |
| Білий | White | #FFFFFF |
| Жовтий | Yellow | #FFFF00 |
| Зелений | Green | #008000 |
| Золотий | Gold | #FFD700 |
| Індіго | Indigo | #4B0080 |
| Каштановий | Maroon | #800000 |
| Червоний | Red | #FF0000 |
| Оливковий | Olive | #808000 |
| Помаранчевий | Orange | #FFA500 |
| Пурпуровий | Purple | #800080 |
| Світло-зелений | Lime | #00FF00 |
| Сріблястий | Silver | #C0C0C0 |
| Сірий | Gray | #808080 |
| Сизий | Teal | #008080 |
| Синій | Blue | #0000FF |
| Ультрамарин | Navy | #000080 |
| Фіолетовий | Violet | #EE80EE |
| Фуксиновий | Fuchsia | #FF00FF |
| Чорний | Black | #000000 |
Значення RGB- коду
| Колір як рядковий літерал | Червоний | Зелений | Синій | |
| aliceblue | F0 | F8 | FF | |
| antlquewhite | FA | EB | 07 | |
| aqua | 00 | FF | FF | |
| aquamarine | 7F | FF | D4 | |
| azure | F0 | FF | FF | |
| beige | F5 | F5 | DC | |
| bisque | FF | E4 | C4 | |
| black | 00 | 00 | 00 | |
| blanchedalmond | FF | EB | CD | |
| blue | 00 | 00 | FF | |
| btueviolet | 8A | 2B | E2 | |
| brown | A5 | 2A | 2A | |
| burlywood | DE | B8 | 87 | |
| cadetbluc | 5F | 9E | A0 | |
| chartreuse | 7F | FF | 00 | |
| chocolate | 02 | 69 | 1E | |
| coral | FF | 7F | 50 | |
| cornflowecblue | 64 | 95 | ED | |
| cornsilk | FF | F8 | DC | |
| crimson | DC | 14 | 3C | |
| cyan | 00 | FF | FF | |
| darkblue | 00 | 00 | 88 | |
| darkcyan | 00 | 8B | 8B | |
| darkgoldenrod | B8 | 86 | 0B | |
| darkgray | A9 | A9 | A9 | |
| darkgreen | 00 | 64 | 00 | |
| darkkhaki | B0 | 87 | 6B | |
| darkmagenta | 8B | 00 | 8B | |
| darkofivegreen | 55 | 6B | 2F | |
| darkorange | FF | 8C | 00 | |
| darkorchid | 99 | 32 | CC | |
| darkred | 8B | 00 | 00 | |
| darksalmon | E9 | 96 | 7A | |
| darkseagreen | 8F | BC | 8F | |
| darkslateblue | 48 | 3D | 8B | |
| darkslategray | 2F | 4F | 4F | |
| darkturquolse | 00 | CE | D1 | |
| darkviolet | 94 | 00 | D3 | |
| deeppink | FF | 14 | 93 | |
| deepskyblue | 00 | BF | FF | |
| dimgray | 69 | 69 | 69 | |
| dodgerblue | 1E | 90 | FF | |
| firebrick | B2 | 220 | 22 | |
| floralwhite | FF | FA | F0 | |
| forestgreen | 22 | 8B | 22 | |
| fuchsia | FF | 00 | FF | |
| gainsboro | DC | DC | DC | |
| ghostwhite | F8 | F8 | FF | |
| gold | FF | D7 | 00 | |
| goldenrod | DA | A5 | 20 | |
| gray | 80 | 80 | 80 | |
| green | 00 | 80 | 00 | |
| greenyeflow | AD | FF | 2F | |
| honeydew | F0 | FF | F0 | |
| hotpink | FF | 69 | B4 | |
| indianred | CD | 5C | 5C | |
| indigo | 4B | 00 | 82 | |
| ivory | FF | FF | F0 | |
| khaki | F0 | E6 | 8C | |
| lavender | E6 | E6 | FA | |
| lavenderblush | FF | F0 | F5 | |
| lawngreen | 7C | FC | 00 | |
| lemonchiffon | FF | FA | CD | |
| lightblue | AD | D8 | E6 | |
| lightcoral | F0 | 80 | 80 | |
| lightcyan | E0 | FF | FF | |
| lightgoldenrodyellow | FA | FA | D2 | |
| lightgreen | 90 | EE | 90 | |
| lightgrey | D3 | D3 | D3 | |
| lightpink | FF | B6 | C1 | |
| lightsalmon | FF | A0 | 7A | |
| lightseagreen | 20 | B2 | AA | |
| lightskyblue | 87 | CE | FA | |
| lightslategray | 77 | 88 | 99 | |
| lightsteelblue | B0 | C4 | DE | |
| lightyellow | FF | FF | E0 | |
| lime | 00 | FF | 00 | |
| limegreen | 32 | CD | 32 | |
| linen | FA | F0 | E6 | |
| magenta | FF | 00 | FF | |
| maroon | 80 | 00 | 00 | |
| mediumaquamarine | 66 | CD | AA | |
| mediumblue | 00 | 00 | CD | |
| mediumorchid | BA | 55 | D3 | |
| mediumpurple | 93 | 70 | DB | |
| mediumseagreen | 3C | B3 | 71 | |
| mediumslateblue | 7B | 68 | EE | |
| mediumspringgreen | 00 | FA | 9A | |
| mediumturquoise | 48 | D1 | CC | |
| mediumvioletred | C7 | 15 | 85 | |
| midnightblue | 19 | 19 | 70 | |
| mintcream | F5 | FF | FA | |
| mistyrose | FF | E4 | E1 | |
| moccasin | FF | E4 | B5 | |
| navajowhite | FF | DE | AD | |
| navy | 00 | 00 | 80 | |
| oldlace | FD | F5 | E6 | |
| olive | 80 | 80 | 00 | |
| olivedrab | 6B | 8E | 23 | |
| orange | FF | A5 | 00 | |
| orangered | FF | 45 | 00 | |
| orchid | DA | 70 | D6 | |
| palegoldenrod | EE | E8 | AA | |
| palegreen | 98 | FB | 98 | |
| paleturquoise | AF | EE | EE | |
| palevioletred | DB | 70 | 93 | |
| papayawhip | FF | EF | D5 | |
| peachpuff | FF | DA | B9 | |
| peru | CD | 85 | 3F | |
| pink | FF | C0 | CB | |
| plum | DD | A0 | DD | |
| powderblue | B0 | E0 | E6 | |
| purple | 80 | 00 | 80 | |
| red | FF | 00 | 00 | |
| rosybrown | BC | 8F | 8F | |
| royalblue | 41 | 69 | E1 | |
| saddlebrown | 8B | 45 | 13 | |
| salmon | FA | 80 | 72 | |
| sandybrown | F4 | A4 | 60 | |
| seagreen | 2E | 8B | 57 | |
| seashell | FF | F5 | EE | |
| sienna | A0 | 52 | 2D | |
| silver | C0 | C0 | C0 | |
| skyblue | 87 | CE | EB | |
| slateblue | 6A | 5A | CD | |
| slategray | 70 | 80 | 90 | |
| snow | FF | FA | FA | |
| sprlnggreen | 00 | FF | 7F | |
| steelblue | 46 | 82 | B4 | |
| tan | 02 | 84 | 8C | |
| teal | 00 | 80 | 80 | |
| thistle | D8 | BF | D8 | |
| tomato | FF | 63 | 47 | |
| turquoise | 40 | E0 | D0 | |
| violet | EE | 82 | EE | |
| wheat | F5 | DE | B3 | |
| white | FF | FF | FF | |
| whitesmoke | F5 | F5 | F5 | |
| yellow | FF | FF0 | 00 | |
| yellowgreen | 9A | CD | 32 | |
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 – вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника);
divvious—вказує на попередню сторінку в послідовності документів;
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 "Збірник афоризмів.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 "Любов.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 "Чоловіки.html"> <h4>Чоловіки</h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Діти та батьки.html"><h4><font color="blue">Діти та батьки</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дівчата.html"><h4>Дівчата</h4></A></td>
<td align="middle" width="20%" height="10%"></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Шлюб.html" ><h4>Шлюб</h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Виховання дітей.html" ><h4><font color="blue">Виховання дітей</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дружба.html"><h4><font color="deepskyblue">Дружба</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Добро і зло.html"><h4><font color="blue">Добро і зло</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Підлітки.html"><h4>Підлітки</h4></A></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Жінки.html"><h4><font color="blue">Жінки</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Жіноча інтуїція.html" ><h4><font color="deepskyblue">Жіноча інтуїція</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Фемінізм.html"><h4><font color="green">Фемінізм</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Леді.html"><h4><font color="deepskyblue">Леді</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Джентельмени.html"><h4><font color="blue">Джентельмени</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Одруження.html" ><h4><font color="deepskyblue">Одруження</font> </h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Весілля.html" ><h4><font color="green">Весілля</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Розлучення.html" ><h4><font color="gold">Розлучення</font> </h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Ревнощі.html" ><h4><font color="green">Ревнощі</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Зрада.html" ><h4><font color="deepskyblue">Зрада в коханні</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Влада.html"><h4><font color="green">Влада</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Заздрість.html" ><h4><font color="gold">Заздрість</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Кар'єра.html"><h4><font color="orange">Кар'єра</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Людина.html"><h4><font color="gold">Людина</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Політика.html"><h4><font color="green">Політика</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Знання.html"><h4><font color="gold">Знання</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Освіта.html" ><h4><font color="orange">Освіта</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Учні та вчителі.html"><h4><font color="red">Учні та вчителі</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Школа.html"><h4><font color="orange">Школа</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Математика.html"><h4><font color="gold">Математика</font></h4></A></td></tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Життя.html"><h4><font color="orange">Життя</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Смерть.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 "Плітки.html"><h4><font color="red">Плітки</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дієта.html"><h4><font color="orange">Дієта</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Мовчання.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 "Реклама.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
Таблиці
Таблиці є важливим засобом для створення сторінок. До появи в мові 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 – вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника);
divvious—вказує на попередню сторінку в послідовності документів;
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 "Збірник афоризмів.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 "Любов.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 "Чоловіки.html"> <h4>Чоловіки</h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Діти та батьки.html"><h4><font color="blue">Діти та батьки</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дівчата.html"><h4>Дівчата</h4></A></td>
<td align="middle" width="20%" height="10%"></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Шлюб.html" ><h4>Шлюб</h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Виховання дітей.html" ><h4><font color="blue">Виховання дітей</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дружба.html"><h4><font color="deepskyblue">Дружба</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Добро і зло.html"><h4><font color="blue">Добро і зло</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Підлітки.html"><h4>Підлітки</h4></A></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Жінки.html"><h4><font color="blue">Жінки</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Жіноча інтуїція.html" ><h4><font color="deepskyblue">Жіноча інтуїція</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Фемінізм.html"><h4><font color="green">Фемінізм</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Леді.html"><h4><font color="deepskyblue">Леді</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Джентельмени.html"><h4><font color="blue">Джентельмени</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%"height="10%">
<A "Одруження.html" ><h4><font color="deepskyblue">Одруження</font> </h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Весілля.html" ><h4><font color="green">Весілля</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Розлучення.html" ><h4><font color="gold">Розлучення</font> </h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Ревнощі.html" ><h4><font color="green">Ревнощі</font></h4></A></td>
<td align="middle" width="20%"height="10%">
<A "Зрада.html" ><h4><font color="deepskyblue">Зрада в коханні</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Влада.html"><h4><font color="green">Влада</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Заздрість.html" ><h4><font color="gold">Заздрість</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Кар'єра.html"><h4><font color="orange">Кар'єра</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Людина.html"><h4><font color="gold">Людина</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Політика.html"><h4><font color="green">Політика</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Знання.html"><h4><font color="gold">Знання</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Освіта.html" ><h4><font color="orange">Освіта</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Учні та вчителі.html"><h4><font color="red">Учні та вчителі</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Школа.html"><h4><font color="orange">Школа</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Математика.html"><h4><font color="gold">Математика</font></h4></A></td></tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Життя.html"><h4><font color="orange">Життя</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Смерть.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 "Плітки.html"><h4><font color="red">Плітки</font></h4></A></td>
<td align="middle" width="20%" height="10%">
<A "Дієта.html"><h4><font color="orange">Дієта</font></h4></A></td>
</tr>
<tr>
<td align="middle" width="20%" height="10%">
<A "Мовчання.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 "Реклама.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
