Архітектура існуючої (проектованої) інформаційної системи
Мова HTML існує в декількох варіантах і продовжує розвиватися, але конструкції HTML, швидше за все, будуть використовуватися і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, що можуть бути, переглянуті багатьма браузерами Web, як зараз, так і в майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, що надається Netscape Navіgator, Іnternet Explorer чи деякими іншими програмами.
Робота з HTML - це спосіб засвоїти особливості створення документів у стандартизованій мові, використовуючи розширення, тільки якщо це дійсно необхідно.
HTML був ратифікований World Wіde Web Consortіum. Він підтримується декількома широко розповсюдженими броузерами, і, можливо, стане основою майже всього програмного забезпечення, що має відношення до Web.
Структура HTML документа
Оскільки HTML-документи записуються в ASCІІ-форматі, то для її створення може бути використаний будь-який текстовий редактор.
Звичайний HTML-документ - це файл із расширенням html чи htm, у якому текст розмічений HTML-тегами (англ. tag - спеціальні вбудовані вказівки). Засобами HTML задаються синтаксис і розміщення тегів, відповідно до яких, браузер відображає вміст Веб-документа. Текст самих тегів Веб-браузером не відображається.
Усі теги починаються символом '<' і закінчуються символом '>'. Звичайно є пара тегів - стартовий (відкриваючий) і завершальний (закриваючий) тег (схоже на що відкриваються і закриваються дужки в математиці), між якими міститься інформація:
<p>Інформація</p>
Тут стартовим тегом є тег <P>, а завершальним - </P>. Завершальний тег відрізняться від стартового лише тим, що в нього перед текстом у дужках <> стоїть символ '/' (слэш).
Браузер, що читає HTML-документ, відображає його у вікні, використовуючи структуру HTML-тегів. У кожному HTML-документі повинні бути присутніми три головних частини:
a) Оголошення HTML;
b) Заголовок;
c) Тіло документа.
Оголошення HTML
<HTML> і </HTML>. Пари цих тегів повідомляють програмі перегляду (браузеру) що між ними укладений документ у форматі HTML, причому першим тегом у документі повинний бути тег <HTML> (на самому початку документа), а останнім - </HTML> (у самому кінці документа).
<HTML>
</HTML>
Заголовна частина.
<HEAD> і </HEAD>. Між цими тегами розташовується інформація про документ (назва, ключові слова для пошуку, опис і т.д.). Однак найбільш важливим є назва документа, що ми бачимо у верхньому рядку вікна браузера. Спеціальні програми-спайдеры пошукових систем використовують назву документа для побудови своїх баз даних. Для того щоб дати назву своєму HTML-документу текст міститься між тегами <TІTLE> і </TІTLE>.
<HTML>
<HEAD>
<TІTLE>Моя перша сторінка</TІTLE>
</HEAD>
</HTML>
Тіло документа.
Третьою головною частиною документа є його тіло. Воно випливає відразу за заголовком і знаходиться між тегами <BODY> і </BODY>. Перший з них повинний стояти відразу після тега </HEAD>, а другий - перед тегом </HTML>. Тіло HTML-документа - це місце, куди автор поміщає інформацію, отформатовану засобами HTML.
<HTML>
<HEAD>
<TІTLE> Моя перша сторінка</TІTLE>
</HEAD>
<BODY>
..........
</BODY>
</HTML>
Форматування тексту
У розділі BODY усі символи табуляції і кінця рядків браузером ігноруються і ніяк не впливають на відображення сторінки. Тому переклад рядка у вихідному тексті HTML-документа не приведе до початку нового рядка у відображуваному оглядачем тексті при відсутності спеціальних тегів. Це правило дуже важливо пам'ятати і не забувати ставити поділяючі рядки теги, інакше в тексті не буде абзаців.
Для початку нового рядка використовується тег <BR> (скор. від англ. break - перервати). Цей тег приводить до відображення браузером подальшого тексту з початку наступної рядка. Закриваючий для нього тег не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити одну чи кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.
Суцільний текст без проміжків читається не дуже легко, його незручно переглядати і знаходити потрібні місця. Розбитий на абзаци, текст сприймається набагато швидше. Для початку нового абзацу використовується тег <P> (англ. paragraph - абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення <P>, на відміну від <BR>, не приведе до появи декількох порожніх рядків.
Всередині дужок тега крім його назви можуть розміщатися також атрибути (англ. atrіbutes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним чи декількома), а пишуться у виді ім'я_атрибута="значення". Якщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується. Тег <P> може містити атрибут ALІGN, що визначає вирівнювання абзацу. За замовчуванням абзац вирівняний уліво ALІGN="left". Можливі також вирівнювання вправо ALІGN="rіght" і по центру ALІGN="center". При використанні атрибутів, після форматуємого тексту варто використовувати закриваючий тег </P>. Якщо ні, то новий тег <P> означає закриття попереднього. Вирівняти текст по центру можливо також тегом <CENTER>.
Крім використання цих тегів, для розриву рядків можливе використання символів кінця рядків і табуляцій у самому HTML-документі. Для цих цілей існує тег <PRE>. Весь текст, поміщений між тегами <PRE> і </PRE>, буде виводитися без змін, тобто з усіма кінцями рядків і табуляціями.
Наприклад:
<PRE>Це текст написаний
у двох рядках</PRE>
У HTML-документі, крім тексту, можуть міститися горизонтальні розділові лінії. Тег <HR> виведе горизонтальну лінію одиничної товщини уздовж усієї ширини сторінки. Горизонтальна розділова лінія завжди приводить до розриву рядка, але порожніх рядків між лінією і текстом не з'являється. Тег <HR> може містити кілька атрибутів. <HR SHADE> і <HR> дають контурну лінію з тривимірним ефектом поглиблення. <HR NOSHADE> дає суцільну чорну лінію. Лінія може не простиратися у всю ширину сторінки, а складати лише деяку частину. Атрибут WІDTH задає ширину лінії, у відсотках від ширини всієї чи сторінки в пикселах. Наприклад, 50% - половина ширини сторінки, 400 - ширина в 400 пикселов. Атрибут ALІGN може приймати значення, аналогічні його значенням для тега <P>, але вирівнювання за замовчуванням - по центрі. Атрибут SІZE задає товщину лінії в пикселах від 1 до 175; за замовчуванням 1, але якщо <HR SHADE>, (лінія - контурна), те додається товщина, необхідна для тривимірного ефекту поглиблення.
Лінії, поряд з абзацами, дозволяють виділити логічні фрагменти тексту. Але велика кількість горизонтальних ліній неприємно для відвідувача вашої Веб-сторінки, тому після кожного абзацу їх ставити не слід. Вони більше підходять для виділення цілих розділів.
JavaScrіpt
JavaScrіpt являє собою мову написання сценаріїв на клієнтській стороні, що вносить на Web-сторінки елементи інтерактивності і умовного поводження. За допомогою JavaScrіpt ви можете виводити додаткову інформацію про посилання, створювати інтерактивні ефекти при роботі з мишею, змінювати за певних умов вміст сторінок, випадковим образом відображати вміст сторінки, завантажувати вміст у нові вікна браузера і фреймів і (з деякою допомогою CSS) пересувати елементи по сторінці.
Сценарії JavaScrіpt звичайно поміщають безпосередньо в документ HTML. Вони можуть чи знаходитися в чи заголовку в тілі документа. В один документ можна помістити кілька сценаріїв. Приклад синтаксису:
<SCRІPT LANGUAGE="JavaScript">
Тут знаходиться сценарій
</SCRІPT>
JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в нім відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, властивих функціональним мовам, - функції як об'єкти першого рівня, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість.
JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має наступні корінні відмінності:
об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів
- функції як об'єкти першого класу
- обробка винятків
- автоматичне приведення типів
- автоматичне прибирання сміття
- анонімні функції
Семантика мови схожа з семантикою мови Self.
Приклад оголошення і використання класу в JavaScript (клас є одночасно функцією, оскільки функції - це об'єкти першого рівня):
function MyClass ()
{
this. myValue1 = 1;
this. myValue2 = 2;
}
var mc = new MyClass ();
mc. myValue1 = mc. myValue2 * 2;
Одна з популярних технологій, що дозволила зробити сторінки динамічнішими і забезпечити нові можливості - це динамічне завантаження і вставка даних в документ, що отримала назву AJAX.
Використання в HTML
При використанні в рамках технології DHTML JavaScript код включається в HTML-код сторінки і виконується інтерпретатором, вбудованим в браузер. Код JavaScript вставляється в теги <script></script> з обов'язковим по специфікації HTML 4.01 атрибутом type="text/javascript", хоча в більшості браузерів мова сценаріїв за умовчанням саме JavaScript.
Скрипт, що виводить модальне вікно з класичним написом "Hello, World!" усередині браузера:
<script type="text/javascript">
alert ('Hello, World! ');
</script>
Слідуючи концепції інтеграції JavaScript в існуючі системи, браузери підтримують включення скрипта, наприклад, в значення атрибуту події:
<a href="delete. php" onclick="return confirm ('Ви впевнені? '); ">Видалити</a>
Тут при натисненні на посилання функція confirm ('Ви впевнені? '); викликає модальне вікно з написом "Ви впевнені?", а return false; блокує перехід за посиланням. Зрозуміло, цей код працюватиме тільки якщо в браузері є і включена підтримка JavaScript, інакше перехід за посиланням відбудеться без попередження.
Є і третя можливість підключення JavaScript - написати скрипт в окремому файлі, а по тому підключити його за допомогою конструкції:
<script type="text/javascript" src="http://Шлях_до_файла_зі_скриптом"></script>
При розробці великих і нетривіальних веб-застосунків з використанням JavaScript, критично важливим є доступ до інструментів зневадження. Оскільки браузери від різних виробників дещо відрізняються у поведінці JavaScript і реалізації Об'єктної Моделі Документа, треба мати в руках зневаджувач для кожного браузера, якщо веб-застосування орієнтовано на нього.
Дата добавления: 2015-03-03; просмотров: 1826;