Создание документів 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-документ. Перш за все це.

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

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

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

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

Без цих тегов неможливо було створити жодну Web-cтраницу. Докладніше й інші теги ми розглянемо в параграфі 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=''internet.

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

Одна з найбільш корисних для дизайну — атрибут, визначальний фон сторінки. Його появу можна уподібнити маленькій Революції 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=''internet.

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

2. HotDog Professional 3.

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

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

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

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

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

2.3.3 Dream Weaver 2.0.

Цей редактор, мабуть, єдиний тепер, працюючий зі верствами, аналогічно, як в Photoshop 5.0. Проте, якщо після створення сторінки із застосуванням шарів, Вам доведеться додати іншим редактором щось нове, створити що у цьому редакторі з допомогою вбудованих кнопочок неможливо, може відбутися збій в html — коді, викликаний внутрішнім впливом програми — редактора (багато редакторів намагаються зіставити вміст www-cтраницы з тим, що це редактор уміє робити, і потім видає оброблений їм код сторінки, унаслідок чого відбувається зміна html-кода). Dream Weaver 2.0 оснащён багатьма складними функцій в такий спосіб, що тільки досвідчений та фаховий дизайнер сторінок зрозуміти і використовувати його на своїх цілях. Сам редактор не з низки безплатних версій, а скажімо із найдорожчих і привілейованих. Його вартість сягає 270 $, але російського людини — це не проблема, так ніби крізь 2 місяці відразу після виходу програми виходить crack, здатний зламати програму і безплатно використовувати її (сайтів із подібними взламывающими засобами дуже багато, та їх місце розташування в Internet постійно змінюється з переслідування фірм виробників цих програм). Редактор дозволяє також створюватиме рухомі об'єкти у різних напрямах, і траєкторіях. Підтримка редактором функцій Macromedia Flash 3.0 є гідністю програмних засобів, саме Macromedia Flash 3.0 створила таку потужну як не глянь програму, що дозволяє робити двигающееся меню за вашої сторінці. Таке меню найефективніший, так на рівні існуючих з допомогою PERL 5.0, CGI, Java скриптов, апплетов та інших., це меню або щось на кшталт нього має високої швидкістю завантаження у мережі Internet, оскільки має маленьким обсягом і має найбільш професійним виробом. Компанія, випустила таке «диво» на світло має низку інших проектів. А я, як із низки професійних дизайнерів сторінок, використовую саме цю программу.

3.0 Cоздание документів мають у стандарті HTML.

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

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

1. Заголовки.

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

Існує шість рівнів заголовків, які позначаються Н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сторінки, який вимагає спеціального визначення. Інакше кажучи, довільні символи інтерпретуються за умовчанням як текстові дані. Для форматування тексту є велика кількість элементов.

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

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

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

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

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

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

Елемент, схожий подібний до попереднього. Він дає змогу вирівнювати вміст по лівому краю, у центрі чи з правому краю. І тому стартовий ярлик повинен утримувати відповідний атрибут: align=''left'' align=''center'' align=''right''.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

і.

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

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

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

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

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

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

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

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

Розмір шрифту може задаватися щодо базового: size=+Число size=-Число.

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

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

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

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

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

(див. 2.1.).

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

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

3. Списки.

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

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

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

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

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

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

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

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

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

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

Структура нумерованного списку справляє враження предыдущую:

Пункт 1.

Пункт 2.

Пункт 3.

Пункт 4.

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

I. Пункт 1.

II. Пункт 2.

III. Пункт 3.

IV. Пункт 4.

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

Спосіб нумерації задається з допомогою атрибута type. У табл. 3.1. приведено всі способи нумерації. |Атрибут |Послідовність нумерації | |type=''1'' |1, 2, 3, 4, … | |type=''i'' |і, ii, iii, iv, … | |type=''I'' |I, II, III, IV, … | |type=''a'' |a, b, з, d, … | |type=''A'' |A, B, З, D, … |.

Табл. 3.1. Значення атрибута type.

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

Пункт 1.

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

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

Пункт 2.

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

Пункт 3.

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

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

Пункт 1.

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

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

Пункт 2.

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

Пункт 3.

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

Рис. 3.5. Список з определениями.

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

Пункт 1.

Пункт 1.1.

Пункт 1.2.

Пункт 2.

Пункт 2.1.

Пункт 2.2.

Пункт 3.

Пункт 3.1.

Пункт 3.2.

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

— Пункт 1.

1. Пункт 1.1.

2. Пункт 1.2.

— Пункт 2.

1. Пункт 2.1.

2. Пункт 2.2.

— Пункт 3.

1. Пункт 3.1.

— Пункт 3.2.

Переклади: internet internet internet business.fortunecity.com/koch/726.

Е-mail: [email protected] ———————————- (Етикетка — стартовий чи кінцевий маркери елемента. Теги окреслюють межі дії елементів і відокремлюють елементи друг від друга. У тексті Webсторінки теги полягають у кутові дужки,. А кінцевий завжди постачається косою рисою [1] Броузер (browser) — програма для перегляду Webсторінки [2] Ознака (tag) — стартовий чи кінцевий маркери елемента. Теги визначають кордону дії елементів і відокремлюють елементи друг від друга. У тексті Webсторінки теги полягають у кутові дужки, а кінцевий поміткою завжди постачається косою рисою. [3] Елемент (element) — конструкція мови HTML. Це контейнер, у якому дані і дозволяє відформатувати їх належним чином. Будь-який Webдокумент є набір елементів. Одне з основних ідей гіпертексту — можливість вкладення елементів. [4] Атрибут (attribute) — параметр чи властивість елемента. Це з суті, змінна, має стандартне ім'я і з якої присвоюється певний набір значень: стандартних чи довільних. Атрибути розташовуються всередині стартового тега і відокремлюються друг від друга прогалинами. [5] WWW, World Wide Web — Світове павутиння, розподілена система доступу до гіпертекстовим документам, існуюча в Internet. [6] Гіперпосилання — фрагмент тексту, що є покажчиком в інший файл чи об'єкт. Гіперпосилання необхідні забезпечення можливість переходу від однієї документа до іншого. [7] URL (Uniform Resource Locator) — адресу деякого об'єкта в Internet [8] Код HTML — гіпертекстову документ у своїй первинному вигляді, коли видно все елементи і атрибути, тобто, щодо справи, текстовий файл, у якому набір елементів HTML. [9] сайт (site) — набір Web-страниц, що належать одному власнику. [10] Користувальницький агент (user agent) — броузер чи інша програма, працююча на компьютере-клиенте.