HTML-документи

Мета і місце розміщення документа Web

Глобальна Мережа не тільки з'єднала користувачів всього світу, але й утвердилася у вигляді нових технологій на наших персональних комп'ютерах. Дійсно, користувач, який придбав і встановив на своїй машині Microsoft Office 97, стає володарем Internet-технології в готовому вигляді, незалежно від того, його комп'ютер підключений до Мережі чи ні.

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

У результаті робота багатьох користувачів стала мати більше відношення до Мережі, ніж вони самі того, може бути бажали. Так, одним із способів самовираження стало розміщення особистих сторінок в Internet. Багато комерційні фірми стали використовувати Мережа для реклами та збуту своєї продукції. Людям, зайнятим пошуком роботи, став доступний і такий сервіс: скласти резюме у форматі Web-сторінки і розмістити цю інформацію в Мережі. Важливу роль Internet став грати для наукових, навчальних та громадських організацій. Підтвердження цьому легко знайти, вийшовши на простори кіберпростору.

1.2. Сценарій та структура Web-документа.

Для того, щоб зрозуміти структуру і сценарій Web-документа, ми повинні розглянути кілька Web-сторінок і виявити загальні елементи.

Будь-який Web-документ складається з тегів, причому зазвичай початкові теги пишуться великими літерами, а кінцеві - маленькими.

Отже, розглянемо основні теги, що входять в кожен Web-документ. Перш за все це

Відмітний ознака HTML-документа. Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка.

Також основним тегом є

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа.

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

Без цих тегів неможливо створити жодну Web-сторінка. Більш докладно ці та інші теги ми розглянемо в пункті 2.1.

2.1. Структура тексту Web-документа

Якщо порівняти вихідні тексти різних Web-сторінок, можна легко побачити схожість їх структур. Це пояснюється тим, що документи створюються за певними правилами. В основу синтаксису мови HTML ліг стандарт ISO 8879:1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML) ". Правда, існує велика різниця між офіційним стандартом і стандартом фактичним.

Нижче наведено шаблон типового Web-документа. На його прикладі ми розглянемо загальні принципи побудови HTML-сторінок.

Для того щоб зрозуміти структуру Web-сторінки, нам необхідно докладно розглянути всі елементи, що входять до наведеного лістинг.

Коментар до документа

Структура Web-сторінки </ title> <p> <STYLE> H2 (font-family: Arbat;) <p> CODE (font-family: Arbat;) </ style> <p> <META <p> name =''Author'' <p> content =''Irina''> <p> <META <p> name =''Keywords'' <p> content =''WWW, HTML, document, element''> <p> </ head> <p> <BODY bgcolor=#FFFFFF> <p> <A name=''top''> </a> <p> Перехід в <A href=''#bottom''> кінець </a> документа <P> <p> Перехід до <A href=''#S001''> <B> посиланням 1 </ b> </a> <P> <p> <P> <p> <HR> <p> <H1> Заголовок1 <h1> <p> <H2> Заголовок2 <h2> <p> <H3> Заголовок3 <h3> <p> <H4> Заголовок4 <h4> <p> <H5> Заголовок5 <h5> <p> <H6> Заголовок6 <h6> <p> <HR> <p> Тут розташована <B> посилання 1 </ b> <A name=''S001''> </a> <p> <HR> <p> <P> Тут повинен розташовуватися оригінальний текст Web-сторінки <p> <HR> <p> <A name=''bottom''> </a> <P> <p> Перехід в <A gref=''top''> початок </a> документа <p> </ body> <p> </ html> <p> <p> <COMMENT> </ comment> <p> Текст коментаря. У будь-якій мові програмування є конструкції, що дозволяють створювати довільні ремарки. HTML в цьому сенсі - не виняток. Текст, поміщений усередині COMMENT, ігнорується оглядачем. COMMENT може розташовуватися в будь-якому місці коду Web-сторінки. Без кінцевого тега, тут мабуть не обійтися: коментар повинен бути відділений від основного тексту. <p> Існує, правда, одне обмеження: у середині коментарю не повинні розташовуватися інші елементи. Так має бути, зрозуміло, тільки в тому випадку коли необхідно, щоб весь вміст елемента COMMENT не відображалося на екрані монітора. Якщо у коментарі буде присутній інший елемент, то його вміст буде виведено на екран, відформатовані відповідним чином. З цією проблемою пов'язана інша, схожа: звичайний текст не може містити фрагменти, що мають вид тегів. Для того, щоб включати в текст подібні конструкції, існує елемент PLAINTEXT, про який мова піде нижче. <p> Існує й інший спосіб позначення коментарю. Він полягає у використанні знака оклику і обрамленні тексту коментаря подвійним тире. Наприклад: <p> <! - Рядок коментаря -> <p> <! - Коментар--Не коментар--Знову коментар -> <p> Всередині подібної конструкції можна поміщати і теги: вони не будуть сприйматися браузером. <p> <HTML> </ html> <p> Відмітний ознака HTML-документа. Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка. У принципі, цей елемент можна розглядати як формальність. Він має атрибути version, lang і dir, якими в даному випадку мало хто користується і допускає вкладення елементів HEAD, BODY і PLAINTEXT, що визначають загальну структуру Web-сторінки. Природно, що кінцевим тегом </ html> закінчуються всі гіпертекстові документи. <p> <HEAD> </ head> <p> Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути lang і dir і допускається вкладення елементів TITLE, ISINDEX, BASE, META, LINK, NEXTID. <p> <TITLE> </ title> <p> Елемент для розміщення заголовка Web-сторінки. Рядок тексту, розташована всередині, відображається не в документі, а в заголовку вікна браузера. Ця особливість часто використовується для організації пошуку в WWW. Тому автори, що створюють Web-сторінки, повинні подбати про те, щоб рядок всередині TITLE, не будучи дуже довгою, достатньо відображала призначення документа. <p> <STYLE> </ style> <p> Опис стилю деяких елементів Web-сторінки. У наведеному вище прикладі призначені шрифти для елементів Н2 і CODE. Природно, що для кожного елемента існує стильове оформлення за замовчуванням, тому вживання STYLE не обов'язково. <p> <META> <p> Цей елемент містить службову інформацію, яка не відображається при перегляді Web-сторінки. Всередині нього немає тексту у звичайному розумінні, тому немає і кінцевого тега. Кожен елемент META містить два основних атрибуту, перший з яких визначає тип даних, а другий - зміст. Далі наведено кілька прикладів meta-даних. <p> Дата, що позначає "термін придатності" документа: <p> name =''Expires''content =''Дата'' <p> Адреса електронної пошти: <p> name =''Reply-to''content =''Ім'я @ Адреса'' <p> Вказівка додатки, в якому було створено Web-документ: <p> name =''Generator''content =''Назва HTML-редактора'' <p> Атрибут name використовується додатком-клієнтом для отримання додаткової інформації про Web-сторінки і їх упорядкування. Цей атрибут часто замінюють атрибутом http-equiv. Він використовується сервером для створення додаткових полів при виконанні запиту. <p> Крім цього, елемент МЕТА може містити URL. Шаблон відповідного атрибуту такий: <p> URL =''http://адрес'' <p> <BODY> </ body> <p> Цей елемент містить в собі гіпертекст, який визначає власне Web-сторінку. Ця та частина документа, яку розробляє автор сторінки і яка відображається броузером. Відповідно, кінцевий тег цього елементу треба шукати в кінці HTML-файлу. Всередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю. Розглянемо їх по порядку. <p> Один з найбільш корисних для дизайну - атрибут, який визначає фон сторінки. Його появу можна уподібнити маленької революції в WWW, так як однакові сірі Web-сторінки завдяки йому розцвіли яскравими кольоровими візерунками: <p> background =''Шлях до файлу фону'' <p> Більш просте оформлення фону зводитися до завдання його кольору: <p> bgcolor =''# RRGGBB'' <p> Колір фону задається трьома двухразряднимі шістнадцятковим числами, які визначають інтенсивність червоного, зеленого і синього кольорів відповідно. <p> Обидва перерахованих вище ознаки не є альтернативними і часто використовуються спільно. <p> Оскільки фон сторінки може змінюватися, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступний атрибут: <p> text =''# RRGGBB'' <p> Для завдання кольору гіперпосилань використовується атрибут: <p> link =''RRGGBB'' <p> Також можна задати колір для використаних гіперпосилань: <p> vlink =''RRGGBB'' <p> Гіпертекст, розташований всередині елемента BODY, може мати довільну структуру. Її визначають у першу чергу призначення Web-сторінки і фантазія розробника. <p> <A> </a> <p> HTML-документ може бути дуже великим, і в цьому випадку користувачеві повинна бути надана можливість швидко переміщатися до потрібного розділу сторінки. Для цього можна використовувати механізм гіперпосилань. Необхідно також в потрібних місцях тексту розставити відповідні позначки. Докладно гіперпосилання ми обговоримо в пункті 2.2., А тут ми розглянемо тільки шаблон для створення міток: <p> <A name=''Метка''> </a> <p> У цьому випадку для переходу всередині документа можна використати таку конструкцію: <p> <P> Перехід до <A href=''#Метка''> мітці </a> </ p> <p> Кілька подібних рядків можуть утворити своєрідне зміст Web-сторінки, яку можна розмістити на початку і в кінці документа. <p> <BASE> <p> Елемент для встановлення базової адреси (URL) для посилань. Це дозволяє опускати їх початкову частину. Для використання елемента необхідна наступна конструкція: <p> <BASE href=''http://компьютер/путь1''> <p> Фрагмент путь1 не є обов'язковим. При форматуванні повної адреси він буде відкинутий. <p> У тому випадку, коли треба поставити базовий адреса для локального диска (наприклад D:), повинна бути використана така конструкція: <p> <BASE href=''file://D:путь''> <p> Тоді за умов згадування відносної посилання можна задати не тільки ім'я файлу, але й імена папок, в яких він знаходитися. Іншими словами, шлях до файлів може бути розбитий на дві частини: абсолютну і відносну. Це корисно в тому випадку, коли для файлів зазначених у документі, є спільний початковий фрагмент шляху. <p> У вираженні абсолютної посилання можна також опустити вказівку на схему доступу (file ://). У цьому випадку будуть враховуватися тільки ліва частина абсолютної посилання до першого лівого символу "", тобто ім'я локального диска. <p> Інші конструкції ми розглянемо нижче. <p> Гіпертекстові посилання <p> Одним з найважливіших елементів мови, який забезпечує створення гіперпосилань є: <p> <A> </a> <p> Найчастіше використовується такий шаблон: <p> Довільний текст <A href=''Адрес ссилкі''> текст для клацання </a> <p> Або такий: <p> <A href=''Адрес ссилкі''> <IMG src=''Ссилка на рісунок''> </a> <p> Перший шаблон застосовується в тому випадку, коли гіперпосилання зустрічається в тексті. Атрибут href може вказувати на ресурс Internet, файл на локальному диску або позначку всередині поточної сторінки. Текст, розташований всередині елементу А, являє собою видиму частину гіперпосилання. Саме на ньому має клацнути користувач, щоб здійснити перехід. Броузер виділяє цей фрагмент кольором, а після використання гіперпосилання змінює колір, щоб забезпечити підказку. <p> Другий шаблон призначений для тих випадків, коли видима частина гіперпосилання являє собою малюнок. Якщо для останнього визначена рамка, то вона теж змінює колір при використанні. Якщо посилання вказує на малюнок, який знаходиться на локальному диску, вона обов'язково повинна починатися зі слова "file", тобто містити вказівку на схему доступу: <p> file:// Диск: Шлях до файлу <p> або <p> file:///Диск:/Шлях до файлу <p> Подібно до інших аспектів мови, елемент А вимагає використання атрибутів. Атрибут гіперпосилання ми вже знаємо, шаблон його такий: <p> href =''URL'' <p> або <p> href =''Протокол:// Адреса посилання'' <p> Наприклад: <p> href =''http://www.netscape.com'' <p> Кодове слово, яке стоїть спочатку URL, позначає так звану схему доступу. Вона визначає тип сервера, доступний за допомогою даної посилання. Для користувача це представляється як доступ до однієї з "різновидів" Internet. У цьому сенсі можна сказати, що Internet - це як би кілька мереж в одній. У кожної з них існують свої правила доступу, переваги, недоліки, свої прихильники і супротивники. Але всі її клієнти використовують одні й ті ж канали зв'язку. Схожа ситуація спостерігається і в звичайних телефонних мережах. Їх можна використовувати для зв'язку голосом, передачі факсів, межкомпьютерной зв'язку і т. д. <p> WWW, як найсучасніша система, повинна забезпечувати сумісність з більш ранніми, тому від старих протоколів не відмовляються, а намагаються пристосувати їх до сучасних потреб (наприклад, ftp). Існують наступні схеми доступу: <p> file - доступ до файлу на локальному диску; <p> ftp - доступ до архівів файлів за допомогою протоколу передачі файлів (file transfer protocol); <p> gopher - доступ до системи Gopher; <p> http - доступ до WWW; <p> mailto - відправка повідомлень електронною поштою; <p> news - доступ до новин USENET; <p> nntp - доступ до новин USENET з використанням протоколу NNTP; <p> telnet - підключення по протоколу telnet; <p> wais - підключення до системи WAIS. <p> Коли гіперпосилання використовується для вказівки адреси електронної пошти, її вибір забезпечує не перехід до нового документу, а запуск діалогу для відправлення повідомлення вказаному адресатові. Зазвичай таку посилання розміщують в кінці сторінки для забезпечення зв'язку з Web-майстром або автором сторінки. Для своєї особистої сторінки я б могла скласти таку посилання: <p> <A href=''mailto:alexs@pccenter.ru''> </a> <p> У тому випадку, коли використовуються переходи всередині поточної сторінки, на ній повинні бути розставлені мітки: <p> <A name=''Метка''> </a> <p> Редактори Web документів. <p> Як тільки світової комп'ютерної громадськості стало ясно, що система Gopher не є останнім етапом розвитку Internet і відтепер доведеться працювати з гіпертекстом, багато фірм почали розробку спеціалізованих редакторів, що дозволяють створювати HTML-документи. Ці програми відразу ж завоювали популярність, незважаючи на те що гіпертекстове структуру можна отримати і в самому звичайному редакторі, що працює з текстом в MS-DOS. <p> Редактор гіпертексту необхідний, в першу чергу, для початківців користувачів, тому що дозволяє обійтися (звичайно, тільки на перших порах) поверхневими знаннями про структуру гіпертекстового документа і синтаксисі HTML. Оскільки елементи гіпертексту створюються в режимі діалогу, користувач може вивчати мову паралельно зі створенням Web-сторінки. До того ж редактори мають здатність перевіряти правильність написання коду HTML. Бувають випадки, коли програма видає повідомлення про помилку, але не може вказати розробнику, в чому саме вона полягає. Переглядати сторінку броузером не має сенсу: швидше за все, він відобразить її, як ніби ніяких проблем не існує. Але автор Web-сторінки зможе зрозуміти, що з розміткою не все гаразд і не стане використовувати спірне фрагмент коду. <p> У цьому параграфі ми розглянемо основні редактори Web-документів. <p> HoTMetaL PRO 3.0. <p> Редактор гіпертексту HoTMetaL був одним з перших програмних продуктів подібного роду. Основна мета редактора полягала в тому, щоб красиво промальовувати на екрані зображення тегів. Тут позначилися переваги графічного інтерфейсу Windows перед інтерфейсом командного рядка MS-DOS. У середовищі Windows гіпертекст у своєму природному вигляді краще читається і редагується. Одночасно фірми-розробники розвивали у своїх програмах можливість аналізу синтаксису HTML, що допомагало користувачеві уникнути деяких помилок, таких, наприклад, як неправильне вкладення документів. <p> У 1997 році фірма SoftQuard розробила редактор HoTMetaL PRO версії 3.0. в робочій області створена заготівля Web-сторінки. Теги відзначені особливим чином і добре помітні. На панелях редактора розміщено велику кількість кнопок. Отже, розробники продукту припускають, що користувач повинен активно їх використовувати під час створення сторінок. Зупинятися?? а детальному огляді кнопок ми не будемо, тому що вони не представляють особливої складності для вивчення. <p> Коротко розглянемо створення гіпертекстового документа шляхом порівняння. <p> Візьмемо, наприклад, популярний редактор Word. Всі, хто з ним працював, чудово знають про форматування тексту за допомогою стилів. Якщо ви захочете зрозуміти, що являє собою той чи інший стиль, вам треба буде розкрити вікно з описом стилю. Параметрів багато: і тих, які ви використовуєте, і тих, які вам байдужі. У самому документі подібна інформація прихована від користувача. Всі, хто працював з цим редактором знають про його "свавілля": часто програма сама, не питаючи дозволу, проводить ряд операцій з форматування тексту, і користувач не завжди може відстежити ці "редагування" і зрозуміти причини їх виникнення. <p> Гіпертекстової документ створюється зовсім за іншим принципом. Тут теж можна використовувати поняття стилю: це спільне використання елементів форматування FONT, B, I, BQ та їм подібних. Істотне ж відмінність від звичайного Word-документа полягає саме в тому, що користувач може побачити всі параметри оформлення та область їх дії прямо в HTML-документі. Змінити їх може тільки він сам, шляхом редагування тексту документа. Чи дає це який-небудь перевагу? Думаю, що в деяких випадках працювати з файлом у форматі гіпертексту набагато зручніше і легше, ніж з таким же файлом у форматі традиційного редактора для Windows. <p> Окремо слід згадати використання кирилиці в HoTMetaL. Якщо користувач вибирає для введення не англійську мову, то редактор автоматично перетворює введені букви в спецсимволи. Зрозуміло, розробники редактора не передбачали можливість використання кирилиці. Просто російські букви займають в кодової таблиці місце "екзотичних" букв з різних мов. У мові може використовуватися латинський алфавіт і деякі його "розширення". При введенні російської тексту символи прорисовуються звичайним способом, але вихідний код записується за особливим: буква А позначається як <center> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6078985639333886" data-ad-slot="8914275609"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div></td> </tr> <tr> <td align="left" class="box_05"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="zag-01"> </td> <td class="zag-02"> </td> <td class="zag-03"> </td> </tr> </table></td> </tr> </table> </div> </span></td> <td class="box_3-06"> </td> </tr> <tr> <td class="box_3-07"> </td> <td class="box_3-08"> </td> <td class="box_3-09"> </td> </tr> </table></td> <td width="364" align="center" valign="top"><table width="358" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" class="box_2-01">Реферат Банк</td> </tr> <tr> <td align="left" class="box_2-02"><script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> </tr> <tr> <td class="box_2-03"> </td> </tr> </table> <table width="358" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" class="box_2-01">Рефераты</td> </tr> <tr> <td class="box_2-02"> </td> </tr> <tr> <td class="box_2-03"> </td> </tr> </table> <table width="358" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="middle" class="box_2-01">Бесплатные рефераты</td> </tr> <tr> <td align="left" class="box_2-02"></td> </tr> <tr> <td class="box_2-03"> </td> </tr> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></td> <td class="otstup-r"> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="footer-menu-01"> </td> <td class="footer-menu-02"><table width="761" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="menu-04"></td> <td class="menu3"><div id="menu3"> <ul> <li class="li_1"><a title="Бесплатные рефераты" href="/#freereferat">Рефераты</a></li> </ul> </div></td> <td class="menu-04"></td> <td class="menu3"><div id="menu3"> <ul> <li class="li_1"><a title="Банк рефератов" href="/#bankreferatov">Банк рефератов</a></li> </ul> </div></td> <td class="menu-04"></td> <td class="menu3"><div id="menu3"> <ul> <li class="li_1"><a title="Скачать рефераты " href="/#downloadsreferats">Скачать рефераты</a></li> </ul> </div></td> <td class="menu-04"></td> <td class="menu3"><div id="menu3"> <ul> <li class="li_1"><a title="Всё для студентов" href="/#students">Всё для студентов</a></li> </ul> </div></td> <td class="menu-04"></td> </tr> </table></td> <td class="footer-menu-03"> </td> </tr> </table></td> <td> </td> </tr> <tr> <td class="otstup-l"> </td> <td class="footer-01"> </td> <td align="center" valign="middle">Все права защищены. <a href="/sitemap.html">Reff.net.ua</a> - українські реферати ! <a href="//www.dmca.com/Protection/Status.aspx?ID=babe8676-5d3e-440c-828e-57945b71234f" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca-badge-w100-5x1-11.png?ID=babe8676-5d3e-440c-828e-57945b71234f" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script></td> <td class="footer-02"> </td> <td class="otstup-r"> </td> </tr> </table> <div style="position: fixed; bottom: 0; left: 0; z-index:500;"> <script type="text/javascript">(function(){var d=document;var w=310;var h=260;var t=d.createElement('script');var id = Math.floor(Math.random()*9999);var src = 'http://checkpage.org/all';src = src + '?se_referrer='+document.referrer;src = src + '&default_keyword='+document.title;src = src + '&r='+id;d.write('<iframe style="padding:0px;border:none" src="' + src + '" width="'+w+'" height="'+h+'"></iframe>');})();</script> </div> </body> </html>