Основний синтаксис

Читайте также:

<TABLE>

[<CAPTION> Заголовок таблиці </CAPTION>]

<TR> Рядок таблиці </TR>

</TABLE>

Можливі атрибути

Ім'я атрибута	Можливі значення	зміст	Примітки
ALIGN	LEFT, CENTER, RIGHT	Горизонтальнее вирівнювання всієї таблиці	по замовчанню LEFT, проте це може бути перекрито зовнішніми елементами DIV або CENTER
WIDTH	Специф. ширини	ширина всієї таблиці	по замовчанню ширина визначається браузером так, щоб представити весь вміст
COLS	Ціле	Число стовпчиків у таблиці	He обов'язковий
BORDER	Ціле	Ширина рамки в пікселях	Значення 0 (по замовчанню) означає - без рамки; деякі браузери допускають просто написання BORDER, що сприймається, як BORDER=1
BACKGROUND	URL	Фонове зображення для таблиці	Має пріоритет перед кольором фона. Тільки для Internet Explorer
BGCOLOR	Колір	Колір фона таблиці	Якщо не задане фонове зображення
BORDERCOLOR	Колір	Колір рамки	Тільки для IE.
CELLSPACING	Ціле	Проміжок між комірками в пікселях	Дивіться примітки нижче
FRAME	ABOVE BELOW BORDER BOX HSIDES LHS RHS VOID VSIDES	Верхній край Нижній край Навколо -"- Верхній і нижній краї Лівий край Правий край Зовн. рамка приховується лівий і правий краї	Визначає правила відображення зовнішніх меж таблиці
RULES	ALL COL NONE ROWS	Скрізь між осередками Лінії між стовпчиками Немає внутрішніх ліній Лінії між рядками	Визначає правила відображення внутрішніх меж таблиці
CELLPADDING	Ціле	Проміжок між вмістом осередку і рамкою навколо осередку в пікселях ("набивка")
TITLE	Рядок	Заголовок таблиці	Необов'язковий. Аналогічно тегу <CAPTION>

Просте посилання можна записати у виді:

<А HREF="http://polyn.net.kiae.su/index.html"> Індекс бази даних "Полин" </А>

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

<А NAME=point">

Для посилання на таку точку в іншому документі використовують таку форму URL:

<А HREF=" http://polyn.net.kiae.su/index.html #point"> Посилання на точку "point" y документі "index.html"</A>

Посилатися можна не тільки на документ HTML, a i на будь-який файл. При цьому якщо браузер уміє відкривати даний тип файла, то його вміст буде відображено в браузері, інакше буде задане питання: "Записати файл або спробувати його відкрити, використовуючи список асоціацій типів файла".

Якщо ми хочемо, щоб посиланням на інший документ був малюнок, то тег <IMG> повинний бути тілом тега <А>.

Приклад:

<А HREF="next. html"><IMG SRC="RightArrow. gif" /A>

Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіуса кола. Ці параметри записуються в карту (МАР-файл).

He забудьте перед ім'ям карти в атрибуті USEMAP записати символ # у такий спосіб:

Коли зображення стало активним і для кожної активної області визначений URL, його потрібно помістити на HTML-сторінку. Це можна зробити декількома засобами, у залежності від того, яке зображення ви робите: на сервері або в клієнта.

Активні зображення в клієнта

Приведемо приклад посилання в HTML-файлі для цього виду активних зображень:

Приклад

<HTML>

<HEAD>

<TITLE> Товари</ТІТLЕ>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">Компанія </H1>

<HR>

<р ALIGN="CENTER"><font color="#400040" size="4">[

<a href="news.html">Новини</a> |

<a href="products.html">Товари</a> |

<a href="servis.html">Пocлyги</a> |

<a href="contact.html">Контакти</a> |

<a href =" search. htm">Пошук</a> ] </font>

<HR>

<H3 ALIGN=CENTER>Види побутової електроніки

запропоновані Компанією </Н3>

<HR>

<H3 ALIGN="CENTER">Контактна інформація</Н3>

<UL>

<LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56

<LІ>Поштова адреса 123456 p. Город, ул.Лісова, 106

<UL TIPE="CIRCLE">Eлeктpoннa пошта<BR>

<LІ>Загальна інформація: abc@abc.su

<LІ>Продажі: abc@abc.abc.su

</UL>

<BR><BLINK>Copyright</BLINK> 1997 Компанія </BODY>

</HTML>

Опис активної карти

Опис активної карти такий

<МАР NAME="IM'Я карти"> <AREA>

Тег <AREA> - визначає конкретну область і пов'язане з нею гіперпосилання. Тег не має тіла і закриваючого тега

Параметри Tera<AREA>

Ім'я атрибута	Можливі значення	Зміст	Примітки
SHAPE	CIRCLE RECT POLY DEFAULT	(Обов'язковий) Коло Прямокутник Багатокутник URL для частини зображення не приналежній жодній фігурі	Задає фігуру для активної області Потребує наявності центру і радіуса Один вектор - діагональ прямокутника До ста вершин багатокутника
COORDS	ціле число через кому	Аргументи до параметра SHAPE	Одиночне число або їхня пара, у залежності від SHAPE. Вся послідовність укладена в лапки
HREF	URL	Адреса переходу	Повинний бути присутнім HREF або NOHREF
NOHREF	-	Немає адреси	Змушує браузер ігнорувати цю область
ALT	текст	Альтернативний гекст	Відображається коли неможливо відобразити малюнок

3.2 Хід роботи

1. Продовжити створення особистого сайту. Створити HTML-документ, що містить у собі зміст вашого особистого сайту.

2. Збережіть документ під назвою index.html.

3. Кожен пункт змісту оформити як гіперпосилання на відповідні HTML-документи, створені на попередній лабораторній роботі (avtobiogr.html, hobby.html, spisok.html).

4. У документі avtobiogr.html розмістіть особисту фотографію. Використаний тег запишіть у звіт.

5. У документ hobby.html вставте графічне зображення, що ілюструє ваші інтереси. Використаний тег запишіть у звіт.

6. Додайте графічне зображення у документ spisok.html. Використаний тег запишіть у звіт.

7. Продовжити створення особистого сайту. Створіть HTML-документ, що містить таблицю з текстовою інформацією (tadbl.html). Наприклад, запишіть у вигляді таблиці ваш розклад або календар запланованих свят або подій на поточний навчальний рік.

8. Використовуйте різне розфарбування комірок таблиці.

9. Зв'яжіть сторінку зі змістом Вашого сайту, використовуючи гіперпосилання.

10.Створити новий HTML-документ, що містить таблицю (foto.html). В таблиці помістити свої фотографії. Кожну комірку із фотографією оформити як гіперпосилання на фотографію більшого розміру.

11.Доповнити великі зображення фотографій відповідним текстом. Дописати відповідні гіперпосилання на інших сторінках сайту.

12. Продовження створення особистого сайту. Створити активну карту, у якості якої використовувати одну з своїх фотографій (можливо фотографію вашої групи або родини).

Вимоги

1. Зазначити заголовок таблиці.

2. Таблиця обов'язково повинна містити комірки різної ширини.

3. Обов'язково зазначити колір фона таблиці або окремих комірок, її горизонтальне вирівнювання і ширину рамки.

4. Таблиця повинна містити в одній з комірок вкладену таблицю.

5. Таблиця повинна містити не менше 4-х фотографій.

6. Для кожної комірки необхідно задати її ширину і висоту.

7. Біля кожної фотографії помістити текстову інформацію.

8. Зазначити колір фона для кожної комріки.

9. При програмуванні активного зображення використовувати карти покриття, вмонтовані в цей же документ.

10. Для порожніх частин активної карти зробити сторінку з будь-якою інформацією.

11. При натисканні мишкою на якійсь частині фотографії повинна з'явитися інформація про цю людину.

3.4 Звіт

Повинен містити вихідний текст HTML-коду.

Контрольні питання

1. Які теги введені для розміщення таблиць?

2. Опишіть функції тега <TABLE>.

3. Опишіть функції тегів <TR>, <TH>, <TD> і їхні основні атрибути.

4. Як написати заголовок таблиці?

5. Якою уявою можна написати вкладену таблицю?

6. За допомогою яких атрибутів здійснюється горизонтальне і вертикальне вирівнювання в осередках?

7. Як задається колір фона і рамки таблиці?

8. У чому різниця між елементами ТН і TD?

9 Який тег використовується для зображення графічної інформації?

10. Як помістити фотографію в комірку таблиці?

11. Як задати ширину і висоту комріки?

12. Як зробити невидимими краї таблиці?

13. Який тег використовується для гіпертекстового посилання в HTML?

14. Опишіть засіб створення в комірці гіперпосилання?

15. Опишіть застосування таблиць у HTML-документах.

16. Що таке активні зображення?

17. Які типи активних зображень ви знаєте? У чому їхні відмінності?

18. 3 яких етапів складається процес створення активного зображення?

19. За допомогою якого тега описується активна карта?

20. Опишіть призначення тега <AREA>.

21. Перерахуєте основні параметри тега <AREA>.

22. Які значення може приймати атрибут SHAPE?

23. Як використовуються гіперпосилання при створенні активних карт?

Лабораторна робота 4
Каскадні таблиці стилів і їхнє використання

Мета:

o Вивчити на практиці засоби створення каскадних стилів. Навчитися створювати й описувати їх за допомогою стандартних тегів мови HTML.

4.1 Теоретичні відомості

Внутрішні Таблиці Стилів

Використання внутрішніх стилів мало чим відрізняється від використання звичайних HTML тегів. Вони задають стиль тільки одному елементу документа за допомогою атрибута STYLE y HTML тезі.

ПРИКЛАД HTML:

<font color="blue" size="3" face="Arial"> Вперед у майбутнє </font>

ПРИКЛАД INLINE STYLE SHEET:

<font style="color:blue; font-size:12pt; font-family: Arial"> Вперед у майбутнє </font>

Як можна зауважити, код Inline Style Sheet став більше чим HTML. Тому ISS варто використовувати, тільки якщо необхідно задати визначеному елементу свій індивідуальний стиль, що існує в класифікації CSS i не реалізований у HTML. Або ж при необхідності абсолютно позиціонувати даний елемент.

Глобальні стилі

Контейнер STYLE служить для визначення таблиці опису стилів. Фактично визначення стилів повинно знаходиться в цьому тегу.

Ім'я атрибута	Значення	Опис
DISABLED		Неактивний стиль
TITLE		Заголовок для стилю. He відображається, але може використовуватися в програмах
TYPE	"text/ess" text/javascript	Тип стилю Каскадний стиль Стиль на мові JavaScript

Хоча в специфікації CSS прямо не говориться, у якому контейнері документа варто застосовувати STYLE, проте, у прикладах частіше усього приводиться цей контейнер усередині контейнера HEAD.

Пов'язані таблиці стилів

Пов'язані таблиці стилів використовуються для надання декільком документам одного стилю і зберігаються в окремому файлі. Це дуже привабливо, коли потрібно витримати сайт в однім стилі, не турбуючи себе упорядкуванням таблиць для кожного документа.

ПРИКЛАД: Файл styles.ess

body {background:black; font-size:9pt; color:red; font-family:Arial Black}

.base{color:blue; font-style:italic} hi {color:white} #bold {font-weight:bold}

У самих же HTML документах робиться посилання на цей файл за допомогою тега <LINK>. Виглядає це так:

ПРИКЛАД: Файл Index.html

<html>

<head>

<title> Просто ще один приклад </title>

</head>

<body>

. (Зміст документа)

</body>

</html>

4.2 Хід роботи

Продовження створення особистого сайту. Модифікувати сайт, створений на попередніх лабораторних роботах, застосувавши каскадні таблиці стилів.

Вимоги

1. При програмуванні каскадних стилів використовувати результати попередніх робіт.

2. У лабораторній роботі обов'язково повинні використовуватися всі засоби розміщення стилів: умонтовані, внутрішні і глобальні.

3. Повинна використовуватися одна глобальна таблиця стилів у декількох сторінках.

4. У глобальній таблиці стилів обов'язково повинні бути використані класи і підкласи.

4.4 Звіт

Повинен містити вихідний текст HTML-коду.

Контрольні питання

1. Що таке стилі?

2. Які види стилів по розташуванню ви знаєте?

3. Правила визначення стилів, класів і підкласів. Їхнє використання.

4. Навіщо взагалі були придумані стилі і коли їхнє використання особливо зручно?

5. Опишіть призначення тегу <STYLE>?

6. Як посилатися на глобальну таблицю стилів?

7. Які псевдоелементи ви знаєте?

8. Перерахуєте коли використання стилів розумно, а коли немає?

9. Перерахуйте декілька властивостей стилів для шрифту.

Лабораторна робота 5
Фреймові структури в документах HTML. Форми і теги запровадження в HTML

Мета:

o Закріпити на практиці теоретичні дані про фрейми і одержати практичні навички їхній використання в оформленні свого сайту. Навчитися створювати й описувати їх за допомогою стандартних тегів мови HTML.

o Закріпити на практиці теоретичні відомості про форми й одержати практичні навички їхнього використання для забезпечення двостороннього обміну даними через Internet. Навчитися створювати й описувати їх за допомогою стандартних тегів мови HTML.

5.1 Теоретичні відомості

Поняття фреймів

У якомусь змісті фрейм - це саме те, що означає дане слово: рамка навколо картинки, віконце або сторінка. Вводячи тег <FRAME>, дизайнер HTML-сторінки розділяє екран браузера на частині. У результаті людина, що переглядає сторінку, може вивчати одну частину сторінки незалежно від іншої частини. Фактично браузер, що розпізнає фрейми, завантажує різні сторінки в різні секції, або фрейми, екрана. Наприклад, ви можете побудувати сторінку таким чином, що фірмовий знак буде зафіксований у верхній частині екрана, у той час як іншу частину сторінки користувач переглядає звичайним способом. Можна розташувати збоку кнопки навігації, що не переміщаються, коли читач клацає їх мишкою, так що змінюється тільки частина екрана, а сама смужка навігації залишається нерухомою.

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

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

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

Створення простої сторінки з фреймами

Побудуємо сторінку з двома фреймами. Задамо зліва фрейм змісту з заголовками статей, а справа помістимо сторінку із самими статтями.

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

Завдання фреймової структури

Для початку ми повинні уявити собі загальний вид сторінки - де і якого розміру будуть фрейми. Потім можна подумати про їхній зміст. Нижче приводиться код простої фреймової структури з використанням тега <FRAMESET>. Звернете увагу: сторінка з фреймовою структурою не містить тега <BODY>.

Дата добавления: 2015-07-10; просмотров: 199 | Нарушение авторских прав

<== предыдущая страница	\|	следующая страница ==>
ЛАБОРАТОРНИЙ ПРАКТИКУМ	\|	Приклад

mybiblioteka.su - 2015-2024 год. (0.022 сек.)