Створення Web-документа

[ виправити ] текст може містити помилки, будь ласка перевіряйте перш ніж використовувати.

скачати

Реферат

СТВОРЕННЯ WEB-ДОКУМЕНТА

Зміст

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

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

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

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

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

2.3 Редактори Web-документів

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

3.1 Заголовки

3.2 Форматування, зміна стилів

3.3 Списки

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

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

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

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

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

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

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

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

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

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

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

Також основним тегом є <HEAD> </ head>

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

<BODY> </ Body>

Цей елемент містить в собі гіпертекст, який визначає власне 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-сторінки, нам необхідно детально розглянути всі елементи, що входять до наведеного лістинг.

<COMMENT> Коментар до документа </ comment> <HTML> <HEAD> <TITLE> Структура Web-сторінки </ title> <STYLE> H2 {font-family: Arbat;} CODE {font-family: Arbat;} </ style> <META name=''Author'' content=''Irina''> <META name=''Keywords'' content=''WWW, HTML, document, element''> </ head> <BODY bgcolor = # FFFFFF> <A name=''top''> </ a> Перехід в <A href=''#bottom''> кінець </ a> документа <P> Перехід до <A href =''# S001 ' '> <B> посиланням 1 </ b> </ a> <P> <P> <HR> <H1> Заголовок1 <h1> <H2> заголовок2 <h2> <H3> Заголовок3 <h3> <H4> Заголовок4 < h4> <H5> Заголовок5 <h5> <H6> Заголовок6 <h6> <HR> Тут розташована <B> посилання 1 </ b> <A name=''S001''> </ a> <HR> <P> Тут повинен розташовуватися оригінальний текст Web-сторінки <HR> <A name=''bottom''> </ a> <P> Перехід в <A gref=''top''> початок </ a> документа </ body> </ html>

<COMMENT> </ Comment>

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

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

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

<! - Рядок коментаря -> <! - Коментар--Не коментар--Знову коментар ->

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

<HTML> </ Html>

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

<HEAD> </ Head>

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

<TITLE> </ Title>

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

<STYLE> </ Style>

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

<META>

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

Дата, що позначає "термін придатності" документа:

name =''Expires''content =''Дата''

Адреса електронної пошти:

name =''Reply-to''content =''Ім'я @ Адреса''

Вказівка ​​програми, в якому був створений Web-документ:

name =''Generator''content =''Назва HTML-редактора''

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

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

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

<BODY> </ Body>

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

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

background =''Шлях до файлу фону''

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

bgcolor =''# RRGGBB''

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

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

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

text =''# RRGGBB''

Для завдання кольору гіперпосилань використовується атрибут:

link =''RRGGBB''

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

vlink =''RRGGBB''

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

<A> </ A>

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

<A Name=''Метка''> </ a> У цьому випадку для переходу всередині документа можна використовувати наступну конструкцію:

<P> Перехід до <A href=''#Метка''> мітці </ a> </ p>

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

<BASE>

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

<BASE Href=''http: //компьютер/путь1''> Частковий шлях 1 не є обов'язковим. При форматуванні повної адреси він буде відкинутий.

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

<BASE Href=''file: //D: \ шлях \''>

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

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

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

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

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

<A> </ A>

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

Довільний текст <A href=''Адрес ссилкі''> текст для клацання </ a>

Або такий:

<A Href=''Адрес ссилкі''> <IMG src=''Ссилка на рісунок''> </ a>

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

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

file: / / Диск: \ Шлях до файлу або

file: / / / Диск: / Шлях до файлу

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

href =''URL''

або

href =''Протокол: / / Адреса посилання''

Наприклад:

href =''http://www. netscape. com''

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

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

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

<A href =''mailto: alexs @ pccenter. ru''></ a>

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

<A Name=''Метка''> </ a>

2.3 Редактори Web-документів

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

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

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

  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. Якщо користувач вибирає для введення не англійську мову, то редактор автоматично перетворює введені літери в спецсимволи. Зрозуміло, розробники редактора не передбачали можливість використання кирилиці. Просто російські букви займають в кодової таблиці місце "екзотичних" букв з різних мов. У мові може використовуватися латинський алфавіт і деякі його "розширення". При введенні російського тексту символи прорисовуються звичайним чином, але вихідний код записується по особливому: буква А позначається як À літера Б - як Á і т.д. Для броузерів до встановлених російськими шрифтами це не має значення: кирилиця в будь-якому випадку буде відтворено вірно. Якщо ви використовуєте HoTMetaL в роботі, але створюєте документи з кирилицею, набирайте російський текст в іншій програмі, наприклад, в режимі перегляду джерела в броузері.

HotDog Professional 3

Редактор гіпертексту HotDog створений фірмою Sausage Software. Від інших його вигідно відрізняє велика кількість інструментів, підпрограм і сервісних можливостей. Такий інструмент можна рекомендувати тим користувачам, які багато і серйозно працюють зі своїми Web-сторінками. Версія 3 редактора розроблена в 1996 році і призначена для роботи в середовищі Windows 95.

Вікно редактора розділені на дві області. Зліва розташована панель так званого "менеджера ресурсів" (resource manager). Він виконує в редакторі ті ж функції, що і Провідник в Windows 95, тобто організовує наочний доступ до папок і файлів. Вкладка Pages дозволяє побачити документи, відкриті в редакторі. Вкладка Files забезпечує перегляд папок на дискеті. Користувач може застосовувати технологію Drag and Drop, тобто перетягувати файли за допомогою миші. Вкладка Faves служить для перегляду обраних джерел інформації. Вкладка WWW забезпечує перегляд сайтів і наочне уявлення їх структури. Якщо менеджер ресурсів займає надто багато місця на екрані, його можна відключити за допомогою меню View.

У правій частині вікна редактора розміщуються вікна з HTML-документами. Кожне з них містить кілька вкладок. Вкладка HTML дозволяє вивести документ у режимі вихідного коду. Вкладка Rover забезпечує перегляд документа за допомогою вбудованого браузера.

Основне вікно редактора містить кілька вкладок. Кожна з них дозволяє виконувати певний тип операцій редагування. Зміна вкладки означає лише зміну набору інструментів; вікно документа при цьому залишається незмінним. Багато кнопки присутні на кількох вкладках.

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

Netscape Editor

Netscape Editor створений як складова частина броузера Netscape Navigator Gold 3.0. Тому в програмі в меню File існують дві команди: Open File in Browser (відкрити файл у броузері) і Open File in Editor (відкрити файл у редакторі). Користувачеві не потрібно замислюватися в якому режимі відкритий документ. Обидва вони легко переключаються за допомогою кнопок, виведених на панель інструментів.

У Netscape Editor гіпертекстовий документ представлений в тому ж форматі, що і в броузері. Тобто код HTML не видно повністю. Під час редагування документа користувач повинен виділяти фрагменти або вибирати окремі об'єкти для того, щоб до них можна було застосувати форматування. Оформлення у більшості випадків полягає у створенні нових елементів або зміні атрибутів вже існуючих. Клацнувши правою кнопкою на об'єкті і вибравши з контекстного меню Properties, можна перейти до вікна властивостей елемента (об'єкта) та змінити їх, заповнюючи відповідні поля. Недоліком редактора є автоматичне (під час збереження) перетворення кирилиці в спецсимволи. Редактор досить терпимо ставиться до паралельного редагування відкритого документа. Якщо в останній внесені зміни за допомогою іншої програми, то Netscape Editor фіксує цей факт і пропонує завантажити файл заново, щоб побачити поточні зміни.

Microsoft Word 97

Послідовність фірми Microsoft у впровадженні засобів роботи з Internet в офісні додатки створює зручності, в першу чергу, для російських користувачів. На відміну від англомовних гіпертекстових редакторів, русифіковані програми не перетворять кирилицю в спецсимволи. Програми MS Office 97 можуть використовуватися для генерації Web-сторінок. Джерелами інформації служать файли у форматі цих програм. Природно, що на вигляд сторінок впливає спеціалізація кожного додатку. MS Word 97, будучи текстовим редактором, забезпечує створення гіпертекстових документів традиційного формату і загального призначення.

Основним інструментом для створення HTML-документів в Word 97 є майстер Web-сторінок. Він запускається під час створення нового файлу. Користувачеві пропонується вибрати тему Web-сторінки. На другому кроці пропонується вибрати стиль оформлення сторінки. На цьому робота майстра закінчується, і користувачу надається можливість заповнити документ корисною інформацією.

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

Редактор забезпечує частковий доступ до редагування Web-сторінки. Користувач може змінювати текст, але не може редагувати гіперпосилання. Крім того, редактор забезпечує вставку додаткової інформації, наприклад дати створення сторінки. При цьому всі редагування відбувається в рамках мови HTML 3.2.

Отриманий документ зберігається звичайним чином, і йому присвоюється розширення html. Іноді у створеному таким способом документі виникає проблема зі шрифтом. У цьому випадку можна перевести документ у режим перегляду коду командою Вид-> Джерело HTML. Необхідно переконатися, що всередині елемента META присутня опція, що задає "нашу" кодову сторінку:

charset = windows-1251

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

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

В Word 97 не передбачені спеціальні інструмент для форматування Web-сторінок, але можна використовувати ті, що призначені для звичайного редагування. Багато кнопки дозволяють створювати адекватні ефекти в гіпертексті. Це, в першу чергу, інструменти, що дозволяють форматувати текст: виділення напівжирним курсивом і, зміна розміру і кольору літер, створення ефекту підкреслення і т.п. Вдається створювати і абзацні відступи таким же способом, як це робиться в Netscape Editor. Тільки в даному випадку використовується елемент DIR.

Під час редагування HTML-файлу стає доступною кнопка Перегляд Web-сторінки. Вона дозволяє підключити броузер (призначений для перегляду гіпертекстових файлів за замовчуванням), щоб побачити документ повністю відформатованим.

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

У параграфі 2.1. ми розглянули на прикладі як створюються елементи сторінки (титул, параграфи), посилання на інші документи, адреси. Але цих знань недостатньо, щоб створити документ середнього рівня.

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

3.1 Заголовки

У прикладі для заголовка використовуються теги <H1> </ h1>.

Існує шість рівнів заголовків, які позначаються Н1 ... Н6. Тема рівня 1 самий великий, а рівень 6 забезпечує найменший заголовок. Представлення про відносних розмірах заголовків в них дає рис. 3.1. Для заголовків можна використовувати атрибут, що задає вирівнювання вліво, по центру або праворуч:

align =''left''align =''center''align =''right''

Заголовок 1

Заголовок 2

Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

Рис. 3.1.

Заголовки, що створюються за допомогою елементів Н1 ... Н2 Елемент FONT може з успіхом замінювати елементи заголовка Н1 ... Н6. Для останніх, наприклад, не передбачена можливість вказівки кольору букв. Щоб заголовок, створений на основі елемента FONT, добре виглядав, цей елемент необхідно комбінувати з іншими: CENTER, B, I, P і т.д. (Див. 3.2.)

3.2 Форматування тексту і зміна стилів

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

<P> </ P>

Елемент абзацу (paragraph) - один з найкорисніших. Він дозволяє використовувати тільки початковий тег, так як наступний елемент Р позначає кінець попереднього і початок наступного абзацу. Кінцевий тег зручно використовувати в тих випадках, коли за змістом необхідно позначити кінець абзацу. Разом з елементом Р можна використовувати атрибут вирівнювання align (див. 3.1.)

<BR>

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

<NOBR> </ Nobr>

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

<PRE> </ Pre>

Елемент для позначення тексту, що відформатував заздалегідь (preformatted). Мається на увазі, що текст буде виведений в тому вигляді, в якому він був підготовлений користувачем. Наприклад, враховуються символи кінця рядка, що з'явилося при наборі тексту у редакторі. У всіх інших випадках броузер ігнорує ці символи. Цей елемент зручно використовувати для демонстрації лістингів програм або для виведення текстових документів, переформатування яких може призвести до спотворення їх сенсу.

<BLOCKQUOTE> </ Blockquote>

Позначення цитати. Цей елемент вимагає наявність кінцевого тега. Текст не зазнає ніяких змін, але абзац розташовується з відступом. До лапок цей елемент теж не має ніякого відношення: якщо в цитаті використовуються лапки, то вони повинні бути проставлені явним чином. В даний час використовують і інше написання цього елемента: BQ.

<CENTER> </ Center>

Елемент використовується для центрування тексту, а точніше, будь-якого вмісту. Не є загальновживаним.

<DIV> </ Div>

Елемент, схожий на попередній. Він дозволяє вирівнювати вміст по лівому краю, по центру або по правому краю. Для цього стартовий тег повинен містити відповідний атрибут:

align =''left''align =''center''align =''right''

<B> </ B>

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

<BIG> </ Big>

Збільшений розмір шрифту

<SMALL> </ Small>

Зменшений розмір шрифту

<I> </ I>

Виділення тексту курсивом

<EM> </ Em> і <DFN> </ dfn>

Елементи, що означають виразність фрагмента тексту і визначення чого-небудь. Обидва елементи аналогічні за своєю дією елементу I, тобто, в більшості випадків, дозволяють виділити текст курсивом.

Вони можуть стати в нагоді тільки для того, щоб одноманітно виділити однакові за призначенням (або змістом) фрагменти тексту, що знаходяться в різних частинах документа або навіть на різних сторінках. Розробник в цьому випадку не може точно знати, який саме шрифт буде використаний: це визначається кожним браузером по-своєму. Але він може бути точно впевнений, що всі фрагменти тексту будуть відформатовані однакові. У мові можна знайти ще кілька елементів, яким можна дати таку ж характеристику.

<TT> </ Tt>

Елемент, що позначає текст телетайпу. Його особливість полягає у використанні Шрифт фіксованої ширини.

<STRIKE> </ Strike>

Елемент, що створює перекреслене зображення тексту. В даний час його замінюють на більш простим: <S> </ S>

<U> </ U>

Підкреслена накреслення тексту.

<STRONG> </ Strong>

Елемент, що відповідає за виділення тексту. Зазвичай його застосування рівносильно використання елемента для виділення напівжирним.

<SUB> </ Sub>

Елемент, що створює ефект нижнього індексу.

<SUP> </ Sup>

Елемент, що створює ефект верхнього індексу.

Дія двох останніх елементів ілюструє рис. 3.2. Обидва ці елементи забезпечує зменшення розміру шрифту. Тому їх можна використовувати і для форматування абзацу повністю, якщо необхідно, щоб він був виведений дрібним шрифтом.

Звичайний текст і елемент SUB

Звичайний текст і елемент SUP

Рис. 3.2. Використання елементів SUB і SUP

<PLAINTEXT> </ Plaintext>

Цей елемент призначений для створення тексту з конструкціями HTML, які повинні сприйматися саме як текст. Всі теги, укладені в PLAINTEXT, сприймаються броузером тільки як довільні символи. Елемент зручно використовувати для обговорення питань, пов'язаних з використанням HTML.

<CODE> </ Code>, <SAMP> </ samp> і <VAR> </ var>

Елементи, призначені для виведення фрагментів програм. CODE використовується для форматування тексту програми. SAMP передбачається задіяти при ілюстрації прикладів виведення даних на екран. VAR був створений для виділення змінних. Як правило, всі ці елементи забезпечують виведення інформації з використанням Шрифт фіксованої ширини.

<KBD> </ Kbd>

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

<CITE> </ Cite>

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

<ADDRESS> </ Address>

Подібно елементу CITE, даний елемент відрізняється тільки передбаченим змістом. Він також забезпечує форматування курсивом. У деяких довідкових посібниках можна зустріти, що даний елемент підтримує атрибут align. Легко переконатися, що це не так.

Взагалі, до подібних елементів треба ставитися з певною часткою недовіри. Я маю на увазі ті з них, які призначені для розміщення певної інформації, а не для створення ефектів форматування. Ми вже розглянули елементи ADDRESS, CITE, CODE, KBD, SAMP, VAR. Справа в тому, що вони не відносяться до основного напряму вдосконалення HTML і користувацьких агентів. Тому броузери інтерпретують їх по-різному і не в обов'язковому порядку, але інша справа, якщо стиль для всіх цих елементів визначено в самій Web-сторінці.

<BASEFONT>

Елемент, що визначає базовий (основний розмір шрифту). Усередині елемента необхідно вказати атрибут:

size = Базовий розмір шрифту

Величина атрибута може лежати в межах від 1 до 7. За замовчуванням використовується величина 3. Установка, виконувана цим елементом, має значення для елемента FONT (див. нижче), який дозволяє задавати відносний розмір шрифту.

<FONT> </ Font>

Визначення типу, розміру та кольору шрифту. Всі ці характеристики визначаються за допомогою відповідних атрибутів. Наприклад, абсолютний розмір шрифту задається за допомогою size (розмір):

size = Абсолютний розмір шрифту

Розмір шрифту може задаватися щодо базового:

size = + Число size =- Число

При призначенні величини для size необхідно враховувати величину базового розміру. Обидві вони в сумі повинні відповідати одному з абсолютних розмірів. Так для базового розміру, рівного 3, відносний розмір може перебувати в межах від -2 до +4. Якщо величина виходить за допустиму межу, то використовується або шрифт розміру 7, або шрифт розміру 1.

Для елемента FONT можна використовувати атрибут кольору:

color =''колір''

Атрибут face (вид) не входить в специфікацію HTML 3.2., Але у мене не піднімається рука виключити його з розгляду, настільки він природний і корисний. Він дозволяє задавати тип шрифта: face =''Назва шрифту''Правда, є одна проблема. Web-сторінки переглядають безліч людей, і немає гарантії, що у кожного з них виявиться потрібний шрифт. Якщо в системі не встановлений шрифт точно з такою ж назвою, то броузер використовує свій стандартний. Він має два призначених за замовчуванням шрифту: один пропорційний, інший моноширинний.

За опис стилю деяких елементів Web-сторінки відповідає

<STYLE> </ Style> (див. 2.1.)

На рис. 3.1. видно як зміниться вигляд заголовка розміру 2 після такого перевизначення. Природно, що для кожного елемента існує стильове оформлення за замовчуванням, тому вживання STYLE необов'язково.

Цікаво, як синтаксис в HTML відображає історію розвитку обчислювальної техніки. Наприклад, старий, а тепер майже забутий елемент BLINK нагадує про ті часи, коли використовувалися дисплеї, що мали тільки текстовий режим. При такому стані речей мерехтіння тексту (BLINK) було, мабуть, єдиним доступним візуальним ефектом. На противагу цьому, елемент STYLE, введений зовсім недавно, викликає асоціації з програмами для Windows, так як у них вперше з'явилося стильове оформлення тексту, яке тепер неймовірно популярно і без нього вже немислима робота в таких додатках, як Word або Excel.

3.3 Списки

Списки (list) були додані в HTML, безперечно, під впливом успіху текстових редакторів. Список відрізняється від звичайного тексту, перш за все тим, що користувачеві не треба думати про нумерацію його пунктів: це завдання бере на себе програма. Якщо список додається новими пунктами або коротшає, нумерації коригується автоматично. У разі ненумерованих списків програма ставить перед кожним пунктом маркери: кружальця, прямокутники, ромби або інші зображення. У результаті список приймає легкий для читання, "фірмовий вигляд". Теги для створення списків можна умовно розділити на дві групи: одні визначають загальний вигляд списку (і дозволяють використовувати атрибути), а інші ставлять його внутрішню структуру. Існує кілька різновидів списків.

<UL> <LI> </ Ul>

Найпростіший ненумерований список (unordered list). Його шаблон наведено нижче:

<UL> <LI> Пункт 1 списку <LI> Пункт 2 списку <LI> Пункт 3 списку </ ul> <UL>

Елемент UL є своєрідним обрамленням списку. Він дозволяє відокремлювати один список від іншого. Елемент LI означає кожен з пунктів. Вид ненумерованого списку зображений на рис. 3.3.

Пункт 1 списку

Пункт 2 списку

Пункт 3 списку

Рис. 3.3. Ненумерований список.

<OL> <LI> </ Ol> Структура нумерованого списку схожа на попередню:

<OL Type=''I''> <LI> Пункт 1 <LI> Пункт 2 <LI> Пункт 3 <LI> Пункт 4 </ ol>

Нумерований список використовує інший зовнішній тег: OL. У цьому випадку кожен пункт нумерується елементом впорядкованої послідовності: арабськими або римськими числами, буквами латинського алфавіту. На рис. 3.4. показаний приклад списку, відповідного наведеному вище лістингу.

I. Пункт 1 II. Пункт 2 III. Пункт 3 Пункт 4

Рис. 3.4. Нумерований список.

Спосіб нумерації задається за допомогою атрибута type.

У табл. 3.1. приведені всі способи нумерації.

Табл. 3.1.

Атрибут

Послідовність нумерації

type =''1''

1,2,3,4, ...

type =''i''

i, ii, iii, iv, ...

type =''I''

I, II, III, IV, ...

type =''a''

a, b, c, d, ...

type =''A''

A, B, C, D, ...

Значення атрибута type Списки з визначеннями (definition lists) створюються за допомогою тегів трьох видів:

<DL> <DT> Пункт 1 <DD> Визначення пункту 1 <DD> Інше визначення пункту 1 <DT> Пункт 2 <DD> Визначення пункту 2 <DT> Пункт 3 <DD> Визначення пункту 3 </ dl>

Наочне уявлення ос писку з визначеннями дає рис. 3.5. Кожен пункт списку може бути доповнений одним або кількома блоками тексту за допомогою тега (тегів) DD. Кожен блок автоматично розміщується з нового рядка. Термін "визначення" носить умовний характер. Абзаци, розміщені в списку, можуть бути визначеннями, доповненнями, роз'ясненнями пунктів. По суті, пункт являє собою заголовок, а визначення - довільний текст під заголовком.

Пункт

1 Визначення пункту

Інше визначення пункту

Пункт

2 Визначення пункту

Пункт

3 Визначення пункту

Рис. 3.5. Список із визначеннями

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

<UL> <LI> Пункт 1 <OL> <LI> Пункт 1.1

<LI> Пункт 1.2

</ Ol> <LI> Пункт 2 <OL> <LI> Пункт 2.1

<LI> Пункт 2.2

</ Ol> <LI> Пункт 3 <OL> <LI> Пункт 3.1

<LI> Пункт 3.2

</ Ol> </ ul>

У ньому нумеровані списки розміщені всередині пунктів ненумерованого списку. Рис 3.6. дає уявлення про те, як виглядає така конструкція.

- Пункт 1

  1. Пункт 1.1

  2. Пункт 1.2

- Пункт 2

  1. Пункт 2.1

  2. Пункт 2.2

- Пункт 3

  1. Пункт 3.1

  2. Пункт 3.2

Рис. 3.6.

Додати в блог або на сайт

Цей текст може містити помилки.

Програмування, комп'ютери, інформатика і кібернетика | Реферат
111.3кб. | скачати


Схожі роботи:
Web-Дизайн і програми для створення web-сторінок
Табличний редактор Excel Створення документа
Створення та оформлення документа засобами MS Word
Створення WEB
Створення web-сторінки
Створення Web-сайту
Створення простої web сторінки
Створення простої web-сторінки
Принципи створення Web-сторінок
© Усі права захищені
написати до нас