Створення документів HTML

Інформатика, програмування

Ліцей № 23

Реферат

по інформатиці на тему:

«Створення документів HTML"

Виконав: Стародворскій С. А.

11 «Б» клас

Калінінград 1999

Зміст

1. Підготовка до створення Web документа.

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

2. Мова гіпертекстової розмітки.

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

2. Гіпертекстові посилання

3. Редактори Web документів

3. Створення документів в стандарті HTML

1. Заголовки

2. Оформлення, зміна стилів

3. Списки

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

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

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

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

Важливу роль Internet став грати для наукових, навчальних та громадськихорганізацій. Підтвердження цьому легко знайти, вийшовши на просторикіберпростору.

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

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

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

Отже, розглянемо основні теги, що входять в кожен 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-сторінки

H2 (font-family: Arbat;)

CODE (font-family: Arbat;)

Перехід у кінець документа

Перехід до посилання 1

Заголовок1

Заголовок2

Заголовок3

Заголовок4

Заголовок5

Заголовок6

Тут розташована посилання 1

Тут повинен розташовуватися оригінальний текст Web-сторінки

Перехід на початок документа

Текст коментаря. У будь-якій мові програмування є конструкції,дозволяють створювати довільні ремарки. HTML в цьому сенсі - невиняток. Текст, поміщений усередині COMMENT, ігнорується броузером [1].
COMMENT може розташовуватися в будь-якому місці коду Web-сторінки. Без кінцевоготега [2], тут мабуть не обійтися: коментар повинен бути відділений відосновного тексту.

Існує, правда, одне обмеження: у середині коментарю не повиннірозташовуватися інші елементи [3]. Так має бути, зрозуміло, тільки в томувипадку коли необхідно, щоб весь вміст елемента COMMENT НЕпоказати його на екрані монітора. Якщо у коментарі буде присутняінший елемент, то його вміст буде виведено на екран,відформатовані відповідним чином. З цією проблемою пов'язана інша,схожа: звичайний текст не може містити фрагменти, що мають вид тегів. Длятого, щоб включати в текст подібні конструкції, існує елемент
PLAINTEXT, про який мова піде нижче.

Існує й інший спосіб позначення коментарю. Він полягає ввикористання знака оклику і обрамленні тексту коментаряподвійним тире. Наприклад:

Всередині подібної конструкції можна поміщати і теги: вони не будутьсприйматися браузером.

Відмітний ознака HTML-документа. Одним із принципів мови єбагаторівневе вкладення елементів. HTML є самим зовнішнім, так якміж його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка. Упринципі, цей елемент можна розглядати як формальність. Він маєатрибути [4] version, lang і dir, якими в даному випадку мало хтокористується і допускає вкладення елементів HEAD, BODY і PLAINTEXT,визначають загальну структуру Web-сторінки. Природно, що кінцевим тегом закінчуються всі гіпертекстові документи.

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так самояк і HTML, HEAD служить тільки для формування загальної структури документа.
Цей елемент може мати атрибути lang і dir і допускається вкладенняелементів TITLE, ISINDEX, BASE, META, LINK, NEXTID.

Елемент для розміщення заголовка Web-сторінки. Рядок тексту,розташована всередині, відображається не в документі, а в заголовку вікнаброузера. Ця особливість часто використовується для організації пошуку в
WWW [5]. Тому автори, що створюють Web-сторінки, повинні подбати про те,щоб рядок всередині TITLE, не будучи дуже довгою, достатньо відображалапризначення документа.

Опис стилю деяких елементів Web-сторінки. У наведеному вищеприкладі призначені шрифти для елементів Н2 і CODE. Природно, що длякожного елемента існує стильове оформлення за замовчуванням, томувживання STYLE не обов'язково.

Цей елемент містить службову інформацію, яка не відображається приперегляді Web-сторінки. Всередині нього немає тексту у звичайному розумінні, томунемає і кінцевого тега. Кожен елемент META містить два основних атрибуту,перший з яких визначає тип даних, а друга - зміст. ДаліОсь кілька прикладів meta-даних.

Дата, що позначає «термін придатності» документа: name =''Expires''content =''Дата''

Адреса електронної пошти: name = ''Reply-to''content =''Назва Адреса @''

Вказівка додатки, в якому було створено Web-документ: name =''Generator''content =''Назва HTML-редактора ' '

Атрибут name використовується додатком-клієнтом для одержаннядодаткової інформації про Web-сторінки і їх упорядкування. Цей атрибутчасто замінюють атрибутом http-equiv. Він використовується сервером для створеннядодаткових полів при виконанні запиту.

Крім цього, елемент МЕТА може містити URL. Шаблон відповідногоатрибута такий:

URL =''http://адрес''

Один з найбільш корисних для дизайну - атрибут, який визначає фонсторінки. Його появу можна уподібнити маленької революції в WWW, тому щооднакові сірі Web-сторінки завдяки йому розцвіли яскравими кольоровимивізерунками: background =''Шлях до файлу фону''

Більш просте оформлення фону зводитися до завдання його кольору: bgcolor =''# RRGGBB''

Колір фону задається трьома двухразряднимі шістнадцятковим числами,які визначають інтенсивність червоного, зеленого і синього кольоріввідповідно.

Обидва перерахованих вище ознаки не є альтернативними і частовикористовуються спільно.

Оскільки фон сторінки може змінюватися, необхідно мати можливістьпідбирати відповідний колір тексту. Для цього є наступний атрибут: text =''# RRGGBB''

Для завдання кольору гіперпосилань [6] використовується атрибут: link =''RRGGBB''

Також можна задати колір для використаних гіперпосилань: vlink =''RRGGBB''

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

HTML-документ може бути дуже великим, і в цьому випадку користувачевіповинна бути надана можливість швидко переміщатися до потрібного розділусторінки. Для цього можна використовувати механізм гіперпосилань. Необхіднотакож в потрібних місцях тексту розставити відповідні позначки. Докладногіперпосилання ми обговоримо в пункті 2.2., а тут ми розглянемо тількишаблон для створення міток:

У цьому випадку для переходу всередині документа можна використовуватинаступну конструкцію:

Перехід до мітки

Кілька подібних рядків можуть утворити своєрідне зміст Web -сторінки, яку можна розмістити на початку і в кінці документа.

Елемент для встановлення базової адреси (URL) для посилань. Це дозволяєопускати їх початкову частину. Для використання елемента необхіднанаступна конструкція:

Фрагмент путь1 не є обов'язковим. При форматуванні повногоадреси він буде відкинутий.

У тому випадку, коли треба поставити базовий адреса для локального диска
(наприклад D:), повинна бути використана така конструкція:

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

У вираженні абсолютної посилання можна також опустити вказівку на схемудоступу (file ://). У цьому випадку будуть враховуватися тільки ліва частинаабсолютної посилання до першого лівого символу «», тобто ім'я локальногодиска.

Інші конструкції ми розглянемо нижче.

2.2. Гіпертекстові посилання

Одним з найважливіших елементів мови, який забезпечує створеннягіперпосилань є:

Найчастіше використовується такий шаблон:

Довільний текст текст для клацання

Або такий:

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

Другий шаблон призначений для тих випадків, коли видима частинагіперпосилання являє собою малюнок. Якщо для останнього визначенарамка, то вона теж змінює колір при використанні. Якщо посилання вказує намалюнок, який знаходиться на локальному диску, вона обов'язково повиннапочинатися зі слова "file", тобто містити вказівку на схему доступу: file:// Диск: Шлях до файлу або file:///Диск:/Шлях до файлу

Подібно до інших аспектів мови, елемент А вимагає використанняатрибутів. Атрибут гіперпосилання ми вже знаємо, шаблон його такий: href =''URL''або href =''Протокол:// Адреса посилання''

Наприклад: href =''http://www.netscape . com''

Кодове слово, яке стоїть спочатку URL [7], позначає так звану схемудоступу. Вона визначає тип сервера, доступний за допомогою даної посилання.
Для користувача це представляється як доступ до однієї з «різновидів»
Internet. У цьому сенсі можна сказати, що Internet - це як би кількамереж в одній. У кожної з них існують свої правила доступу,переваги, недоліки, свої прихильники і супротивники. Але всі її клієнтивикористовують одні й ті ж канали зв'язку. Схожа ситуація спостерігається і взвичайних телефонних мережах. Їх можна використовувати для зв'язку голосом, передачіфаксів, межкомпьютерной зв'язку і т. д.

WWW, як найсучасніша система, повинна забезпечувати сумісність збільш ранніми, тому від старих протоколів не відмовляються, а прагнутьпристосувати їх до сучасних потреб (наприклад, ftp). Існують наступнісхеми доступу: file - доступ до файлу на локальному диску; ftp - доступ до архівів файлів за допомогою протоколу передачі файлів
(file transfer protocol); gopher - доступ до системи Gopher; http - доступ до WWW; mailto - відправка повідомлень електронною поштою; news - доступ до новин USENET; nntp - доступ до новин USENET з використанням протоколу NNTP; telnet - підключення за протоколом telnet; wais - підключення до системи WAIS.

Коли гіперпосилання використовується для вказівки адреси електронної пошти,її вибір забезпечує не перехід до нового документу, а запуск діалогу длявідправки повідомлення вказаному адресатові. Зазвичай таку посилання розміщують вНаприкінці сторінки для забезпечення зв'язку з Web-майстром або автором сторінки.
Для своєї особистої сторінки я б могла скласти таку посилання:

У тому випадку, коли використовуються переходи всередині поточної сторінки, наній повинні бути розставлені мітки:

3. Редактори Web документів.

Як тільки світової комп'ютерної громадськості стало ясно, що истема
Gopher не є останнім етапом розвитку Internet і відтепер доведетьсяпрацювати з гіпертекстом, багато фірм почали розробку спеціалізованихредакторів, що дозволяють створювати HTML-документи. Ці програми відразу жзавоювали популярність, незважаючи на те що гіпертекстове структуру можнаотримати і в самому звичайному редакторі, що працює з текстом в MS-DOS.

Редактор гіпертексту необхідний, в першу чергу, для початківцівкористувачів, тому що дозволяє обійтися (звичайно, тільки на перших порах)поверхневими знаннями про структуру гіпертекстового документа і синтаксисі
HTML. Оскільки елементи гіпертексту створюються в режимі діалогу,користувач може вивчати мову паралельно зі створенням Web-сторінки.
До того ж редактори мають здатність перевіряти правильність написаннякоду HTML [8]. Бувають випадки, коли програма видає повідомлення про помилку, алене може вказати розробнику, в чому саме вона полягає. Переглядатисторінку броузером не має сенсу: швидше за все, він відобразить її, якніби ніяких проблем не існує. Але автор Web-сторінки зможе зрозуміти,що з розміткою не все гаразд і не стане використовувати спірне фрагменткоду.

У цьому параграфі ми розглянемо основні редактори Web-документів.

2.3.1. HoTMetaL PRO 3.0.

Редактор гіпертексту HoTMetaL був одним з перших програмних продуктівподібного роду. Основна мета редактора полягала в тому, щоб красивопромальовувати на екрані зображення тегів. Тут позначилися перевагиграфічного інтерфейсу Windows перед інтерфейсом командного рядка MS-DOS.
У середовищі Windows гіпертекст у своєму природному вигляді краще читається іредагується. Одночасно фірми-розробники розвивали у своїх програмахможливість аналізу синтаксису HTML, що допомагало користувачеві уникнутидеяких помилок, таких, наприклад, як неправильне вкладення документів.

У 1997 році фірма SoftQuard розробила редактор HoTMetaL PRO версії
3.0. в робочій області створена заготівля Web-сторінки. Теги відзначені особливимчином і добре помітні. На панелях редактора розміщено велику кількістькнопок. Отже, розробники продукту припускають, що пользовательповинен активно їх використовувати під час створення сторінок. Зупинятисяу детальному огляді кнопок ми не будемо, тому що вони не представляють особливоїскладності для вивчення.

Коротко розглянемо створення гіпертекстового документа шляхом порівняння.

Візьмемо, наприклад, популярний редактор Word. Усі, хто з ним працював,прекрасно знають про форматування тексту за допомогою стилів. Якщо ви захочетезрозуміти, що являє собою той чи інший стиль, вам треба буде розкритивікно з описом стиля. Параметрів багато: і тих, які ви використовуєте, ітих, які вам байдужі. У самому документі подібна інформація прихованавід користувача. Всі, хто працював з цим редактором знають про його
«Свавілля»: часто програма сама, не питаючи дозволу, проводить рядоперацій щодо форматування тексту, і користувач не завжди може відстежитиці «редагування» і зрозуміти причини їх виникнення.

Гіпертекстової документ створюється зовсім за іншим принципом. Туттеж можна використовувати поняття стилю: це спільне використанняелементів форматування FONT, B, I, BQ та їм подібних. Істотне жвідміну від звичайного Word-документа полягає саме в тому, що користувачможе побачити всі параметри оформлення та область їх дії прямо в HTML -документі. Змінити їх може тільки він сам, шляхом редагування текстудокумента. Чи дає це який-небудь перевагу? Думаю, що в деякихвипадках працювати з файлом у форматі гіпертексту набагато зручніше і легше,ніж з таким же файлом у форматі традиційного редактора для Windows.

Окремо слід згадати використання кирилиці в HoTMetaL. Якщокористувач вибирає для введення не англійську мову, то редакторавтоматично перетворює введені букви в спецсимволи. Зрозуміло,розробники редактора не передбачали можливість використаннякириллице. Просто російські букви займають в кодової таблиці місце
«Екзотичних» літер з різних мов. У мові може використовуватисялатинський алфавіт і деякі його «розширення». При введенні російської текстусимволи прорисовуються звичайним способом, але вихідний код записується поособливому: буква А позначається як