Для створення електронних навчальних програм найчастіше використовується мова гіпертекстової розмітки документів (HTML).

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

Крім того, HTML дозволяє легко організовувати посилання на інші об'єкти або фрагменти тексту самого документа.

Великою перевагою HTML є те, що більшість сучасних інструментальних засобів (такі, як, текстові та графічні редактори, мови візуального програмування, Internet Explorer...) підтримують роботу та збереження документів у HTML форматі.

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

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

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

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

Першу версію HTML було розроблено на початку 90-х років Тімом Бенерс-Лі для популярного в минулому броузера Mosaic. Але в ті часи ні для броузера, ні для мови ще не знайшлося гідного застосування. 1993 року з'явився HTML+, і ця версія також залишилася практично непоміченою. Початок широкому використанню гіпертексту дала версія 2.0, яка з'явилася червні 1994 року.

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

У версії 3.0 HTML, яка з'явилася через рік, була реалізована можливість промальовування математичних символів (знаків інтеграла, нескінченності, дробу, дужок і т. д.) за допомогою елементів мови. Під цю версію розроблялися й броузери (Arena). Але цей проект виявився тупиковим і не набув подальшого поширення.

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

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

Поряд із офіційними специфікаціями мови, які розроблялися організацією W3C (W3 Консорціум), компанії-виробники броузерів створювали власні елементи (розширення).

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

Але броузери підтримували кадри, і багато книг, присвячених HTML, містили описи кадрів без згадки про те, що це нестандартні елементи. І це було правильно, тому що фрейми стали стандартом де-факто. У версію мови 4 вони вже були включені на повній основі.

І навпаки, елементи APPLET та SCRIPT, необхідні для розширення HTMLіншими програмними кодами, у версії 3.2 не зіграли тієї ролі, яку були покликані зіграти.

Це пояснювалося тим, що броузери різних версій по-різному інтерпретували програми на мовами Java, JavaScript, Visual Basic VBScript В результаті не вдавалося отримати досить надійно працюючий код, і ці мови використовувалися любителями HTML в основному для експериментів.

Офіційна специфікація HTML 4 (Dynamic HTML) з'явилася 1997 року. У цей час вже було очевидно, що розвиток гіпертексту буде здійснюватися за рахунок скрипт-програмування. Це виявилося набагато ефективнішим, ніж вводити в мову нові елементи.

Броузери (Netscape Navigator 4, Microsoft Internet Explorer 4 та ін.), що з'явилися в той час, вже досить надійно інтерпретували програмний код (був досягнутий певний рівень стандартизації). Проте проблеми розробників ще залишилися. Як приклад можна відзначити, що багато скриптів починаються з визначення версії броузера, щоб потім використовувати той чи інший фрагмент коду.

Вочевидь, що у програміста лягає обов'язок тестування сторінок усім популярних нині броузерах. Крім того, актуальною залишається проблема використання старих чи не дуже популярних програм. Лідерами "броузеробудування" по праву вважаються компанії Microsoft і Netscape, але існують ще й інші фірми.

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

Анатомія Web-сторінки

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

Приклад (шаблон) Web-сторінки

<Т1Т1Е>Структура Web-сторінки

Якщо розглянути вихідні тексти різних Web-сторінок, можна легко побачити схожість їх структур. Це тим, що документи створюються за певними правилами.

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

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

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

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

Синтаксис HTML.

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

У принципі цей елемент можна розглядати як формальність. Він має атрибути version, lang і d i r , якими в даному випадку рідко користуються, і допускає вкладення елементів HEAD, BODY, FRAMESET та інших, що визначають загальну структуру Web-сторінки. Звичайно що кінцевим тегомзакінчуються усі подібні документи.

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само, як попередній елемент, HEAD служить для формування загальної структури документа. Цей елемент може мати атрибути lang та d i r, повинен включати елемент TITLE і допускає вкладення елементів BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.

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

Опис стилю деяких елементів веб-сторінки. У файлі Strukt.htm призначено шрифти для елементів Н2 та CODE.

Звичайно, для кожного елемента існує стильове оформлення за умовчанням, тому вживання елемента STYLE не обов'язково, але бажано.

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

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

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

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

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

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

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

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

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

bgcolor="#ff/?GGSS"

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

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

text="#/?/?GGB5"

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

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

vlink="#/?/?GGflS"

Можна також вказати зміну кольору для останнього вибраного користувачем гіперпосилання:

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

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

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

Елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання вліво, по центру, праворуч, шириною:

Можна задавати товщину лінії:

51ге = товщина в пікселах

Можна керувати довжиною лінії:

fiitifn-довжина у пікселах

width=/^twa у відсотках/год

Можна вибрати колір:

со1ог="колір"

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

<А name=" метка ">Довільний текст

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

<Р>Перехід до<А href=" Пметка ">мітці

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

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

Фрагмент адреси пут // не є обов'язковим.

При формуванні повної адреси його буде відкинуто.

Так, якщо у тексті документа зустрінеться відносне посилання

<А ef =" путь2/имя документа, htm" ">Видимий текст посилання,

то вона буде відповідати URL

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

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

Правила синтаксису

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

Так, взаємне розташування елементів HTML, HEAD, TITLE та BODY має бути стандартним на будь-якій сторінці, щоправда, у тих випадках, коли не використовуються фрейми. Якщо ж сторінка є документом планування кадрів, то замість елемента BODY використовується елемент FRAMESET .

Існують групи елементів, які використовуються разом. До них відносяться елементи для створення таблиць, списків, кадрів.

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

Таблиці та кадри часто використовуються для того, щоб розмістити деталі сторінки (малюнки, текст тощо) у певному порядку.

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

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

Багато елементів, які використовуються для форматування тексту, допускають найрізноманітніші варіанти вкладення. І самі вони обов'язково повинні розташовуватись усередині певних елементів.

Тут треба керуватися здоровим глуздом: кожен елемент виконує задану функцію і має певну сферу дії.

У наведеному нижче прикладі є два абзаци (перший у зеленій рамці) та таблиця:

<Р style="border: Зрх solid дгееп">Текст абзацу 1

. . .

<Р>Текст абзацу 2

Таблиця у разі -- незалежний елемент. Її можна, наприклад, вирівнювати незалежно від решти тексту.

Можна використовувати інший код:

<Р style="border: Зрх solid дгееп">Текст абзацу 1

. . .

<Р>Текст абзацу 2

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

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

<Н1>Заголовок 1<Н2>Заголовок 2Заголовок 3

Слід зазначити, що броузери побудовані таким чином, що вони намагаються реагувати на помилки розмітки гіпертексту. Якщо сторінку можна відобразити, вона відображається без будь-яких попереджувальних повідомлень.

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

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

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

Деякі елементи немає кінцевого тега. Очевидно, що елементу BR, що означає кінець рядка, не потрібен кінцевий тег. Деякі елементи можуть бути використані з кінцевим тегом або без нього. Найяскравішим прикладом є елемент абзацу Р.

Він може мати кінцевий тег, але якщо цей тег не заданий, ознакою закінчення дії елемента служить наступний елемент, який може логічно визначити кінець поточного абзацу: інший елемент Р, елемент малюнка IMG, елемент списку UL, елемент таблиці TABLE і т.д.

Таким чином, корисна інформація одного елемента повинна бути або між початковим і кінцевим тегами даного елемента, або між початковим тегом даного та початковим тегом наступного елемента.

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

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

Тому Web-сторінки треба компонувати в такий спосіб, щоб їхній вигляд кардинально не змінювався для різних режимів роздільної здатності монітора, розміру екрана, розміру вікна броузера, а також для повноекранного або віконного режимів.

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

Мова гіпертекстової розмітки (HTML)

World Wide Web, або, щось саме Всесвітня павутина, WWW становить основну компоненту глобальної комп'ютерної мережі Інтернет. Зародившись ще 60-ті рр., Інтернет тривалий час використовувалася лише вузьким колом фахівців обмінюватись інформацією електронною поштою. Мережа керувалася операційною системою UNIX - для наукових цілей це підходило, але досить складний текстовий інтерфейс UNIX"a суттєво обмежував масштаби застосування мережевих технологій. це мова – HTML (HyperText Markup Language – мова розмітки гіпертексту).

Автором мови HTML є Тім Бернерс-Лі, випускник Оксфордського університету, який працював тоді за контрактом у Женеві, в Європейській лабораторії фізики елементарних частинок (CERN, Conseil Europeen pour la Recherche Nucleaire) консультантом з програмного забезпечення. CERN - досить велика організація, і тому, щоб краще орієнтуватися в її структурі, не зберігати в пам'яті даних про велику кількість проектів, посадових осіб тощо, Тім Бернерс-Лі розробив для свого особистого користування програму Enquire, на основі якої через кілька років для лабораторії було створено свого роду інформаційний простір. Програма Enquire дозволяла здійснювати з так званий " нелінійний " пошук документів - тобто. переходити від одного документа до іншого без звернення до змісту або довідника.

Мова HTML становить основу технології гіпертексту. Гіпертекстовий документ містить звані гіперпосилання.

Мова розмітки документів - це набір спеціальних інструкцій, які називаються тегами, призначених для формування в документах будь-якої структури та визначення відносин між різними елементами цієї структури. Теги мови, або, як їх іноді називають, дескриптори, що управляють, в таких документах якимось чином кодуються, виділяються щодо основного вмісту документа і служать як інструкції для програми, що робить показ вмісту документа на стороні клієнта. У перших системах для позначення цих команд використовувалися символи “<” и “>”, всередині яких містилися назви інструкцій та їх параметри. Наразі такий спосіб позначення тегів є стандартним.

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

Мова HTML не є мовою програмування; це засіб опису структури документа, його стилю та зв'язків його з іншими документами. Для перегляду Web-документів використовуються спеціальні програми - так звані браузери (англ. to browse - 1) пастись, обскубувати пагони; 2) читати, займатися безладно, уривками.) Взагалі-то, можливості браузерів набагато ширші, але поки що обмежимося їх визначенням як засобом перегляду web-документів. Саме браузерам Інтернет завдячує своєю популярністю.

Internet Engineering Task Force) опублікував чернетку пропозиції за стандартом HTML

Структура документа HTML

Документ HTML 4 складається з трьох частин:

• рядок, що містить інформацію про версію HTML,
• оголошує розділ header/"шапка" (обмежений елементом HEAD),
• тіло, що містить власне сам документ.

Тіло може бути в елементах BODY або FRAMESET . Пробільні символи(прогалини, символи нового рядка, символи табуляції та коментарі) можуть з'являтися до або після цього розділу.

Hello world!

Документ починається з елемента типудокумента, або doctype. Він описує, який тип HTML буде використаний - щоб клієнтська програма користувача могла визначити, як інтерпретувати документ, і вирішити, чи слід він тим правилам, яким збирався слідувати за своєю заявою.

Після цього можна бачити тег елемента html , що відкриває . Це оболонка довкола всього документа. Закриваючий тег html є останнім об'єктом у будь-якому документі HTML.

Всередині елемента html є елемент head. Він містить інформацію про документ (метадан). Всередині head знаходиться елемент title, який визначає заголовок "Simple page" в панелі меню.

Після елемента head слід елемент body , який є оболонкою, що містить реальний вміст сторінки - у разі лише елемент заголовка першого рівня (h1 ), який містить текст " Hello world!" .

Елементи часто містять інші елементи. Тіло документа завжди міститиме безліч вкладених один в одного елементів.

Розділи сторінки створюють загальну структуру документа і можуть містити підрозділи. Вони можуть містити заголовки , параграфи, списки тощо. Параграфи можуть містити елементи, які створюють посилання інші елементи, цитати, виділення тощо.

Синтаксис елементів HTML

Базовий елемент HTML складається з двох тегів навколо блоку тексту. Існують елементи, які є оболонкою для тексту, і майже кожному разі елементи можуть містити поделементи (як html містить head і body у прикладі вище).

Елементи можуть також мати атрибути, які можуть модифікувати поведінку елемента та вводити додаткове значення .

У цьому прикладі елемент div (розділ сторінки, спосіб розбиття документів на логічні блоки) має доданий атрибут id для якого задано значення masthead. Елемент div містить елемент h1 (заголовок першого або найважливішого рівня), який у свою чергу містить деякий текст. Частина цього тексту упакована в елемент abbr(який використовується для визначення розширення скорочень), який має атрибут title, значення якого задано як Hypertext Markup Language.

Багато атрибутів HTML є спільними для всіх елементів, але деякі є специфічними для даного елемента або елементів. Усі вони мають форму:

ключове_слово="значення"

Значення має бути поміщене в одиночні або подвійні лапки (у деяких ситуаціях лапки можуть бути відсутніми, але це не надто добре з точки зору передбачуваності, розуміння).

Атрибути та їх можливі значення визначаються переважно специфікаціями HTML (http://www.w3.org/TR/html401/index/attributes.html), тому - не можна створювати свої власні атрибути. Єдиними реальними винятками є атрибути id і class , значення яких повністю призначені для додавання в документи вашого власного значення і семантики.

Елемент всередині іншого елемента називають "нащадком"цього елемента. У прикладі вище abbrє нащадком h1, який у свою чергу є нащадком div. І навпаки, div є "предком" елемента h1.

Елементи блочного рівня та рядкові елементи

Є дві основні категорії елементів у HTML , які відповідають типам контенту та структурі, яку представляють ці елементи - елементи блокового рівня та рядкові елементи.

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

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

Заголовок

Заголовок HTML-документа є необов'язковим елементом розмітки. Спочатку існування заголовка визначалося необхідністю іменування вікна браузер. Це досягалося за рахунок елемента розмітки TITLE :

... ...

Ще однією функцією заголовка HTML-документа є управління HTTP-обміном через елемент розмітки META. При сучасній практиці розміщення веб-вузлів компаній на серверах провайдерів адміністратори цих вузлів можуть не мати можливості керувати програмою-сервером. У цьому випадку для управління обміном залишається лише одна можливість – через заголовок HTML-документа.

Заголовок HTML-документа також призначений для опису пошукового образу документа, необхідного для індексування документа роботами пошукових систем. Елемент META дозволяє зберігати списки ключових слів та описи документа, які будуть використовуватися для складання індексу пошукової системи та з'являтися як опис документа у разі видачі посилання на нього під час пошуку за ключовими словами.

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

• TITLE (назва документа);
• BASE (база URL);
• ISINDEX (пошуковий шаблон);
• META (метаінформація);
• LINK (загальні посилання);
• STYLE (описувачі стилів);
• SCRIPT (сценарії).

Найчастіше застосовуються елементи TITLE, SCRIPT, STYLE. Використання елемента META говорить про поінформованість автора про правила індексування документів у пошукових системах та можливості управління HTTP-обміном даними. BASE та ISINDEX останнім часом практично не застосовуються. LINK вказують лише при використанні зовнішніх щодо даного документа описувачів таблиць стилів.

Елемент розмітки HEAD містить заголовок HTML-документа. Даний елемент розміткине є обов'язковим. За наявності тега початку елемента розміткибажано використовувати і тег кінця елемента розмітки. За замовчуванням елемент HEAD закривається, якщо зустрічається або тег початку контейнера BODY або тег початку контейнера FRAMESET .

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

Елемент розмітки TITLE служить для іменування документа в World Wide Web. При виборі тексту для вмісту контейнера TITLE слід враховувати, що він відображається системним шрифтом, так як заголовок вікна браузера.

Синтаксис контейнера TITLE у загальному вигляді виглядає так:

Заголовок не є обов'язковим контейнером документа. Його можна опустити. Роботи багатьох пошукових систем використовують зміст елементу TITLE для створення пошукового документа. Слова з TITLE потрапляють до індексу пошукової системи. З цих міркувань елемент TITLE завжди рекомендується використовувати на сторінках веб-сайту.

Елемент розмітки BASE служить визначення базового URL для гіпертекстових посилань документа, заданих у неповної (часткової) формі. Крім того, BASE дозволяє визначити цільове вікно завантаження документа за промовчанням при виборі гіпертекстового посилання поточного документа. Найчастіше BASE зустрічається на сторінках вузлів, які мають "дзеркала". Частина документів основного сервера з різних причин на "дзеркальний" сервер не переноситься. У цьому випадку документ із примусово заданою базовою URL завжди буде посилатися на основний сервер.

Тег початку контейнера містить один обов'язковий атрибут HREF і може містити один необов'язковий атрибут TARGET. Синтаксис контейнера BASE у загальному вигляді виглядає так:

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

Елемент розмітки META

META містить керуючу інформацію, яку браузер використовує для правильного відображення та обробки змісту тіла документа, наприклад, за допомогою атрибуту Content-type можна задати перекодування документа на стороні клієнта.

За допомогою META також можна задати й інші оператори. Наприклад, заборонити кешування документа. Для заборони кешування достатньо вставити в заголовок META – тег виду:

У новій версії протоколу HTTP (HTTP 1.1) керування кешуванням здійснюється через оператор Cache-Control. Для отримання такого ж результату, як у випадку з Pragma, у заголовку HTML-документа достатньо вказати:

Забороняється зберігати документ після пересилання.

Hyper Text Markup Language (HTML) - мова розмітки гіпертексту - призначена для написання гіпертекстових документів, що публікуються в World Wide Web.

Гіпертекстовий документ - це текстовий файл, що має спеціальні теги, які називаються тегами, які згодом розпізнаються браузером і використовуються ним для відображення вмісту файлу на екрані комп'ютера.

За допомогою цих позначок можна виділяти заголовки документа, змінювати колір, розмір і зображення букв, вставляти графічні зображення і таблиці. Але основною перевагою гіпертексту перед звичайним текстом є можливість додавання до вмісту документа гіперпосилань – спеціальних конструкцій мови HTML, які дозволяють клацанням миші перейти до перегляду іншого документа.

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

Графічна та звукова інформація, що включається до HTML-документу, зберігається в окремих файлах. Програми перегляду HTML-документів ( браузери) інтерпретують прапори розмітки і мають текст і графіку на екрані відповідним чином. Для файлів, що містять HTML-документи прийнято розширення .htmабо .html.

Найчастіше теги використовуються парами. Пара складається з відкритого<имя_тега>і закриваєтегів. Дія будь-якого парного тега починається з того місця, де зустрівся тег, що відкриває, і закінчується при зустрічі відповідного закриває тега. Часто пару, що складається з тегів, що відкриває і закриває, називають контейнером, а частина тексту, облямовану тегом, що відкриває і закриває, - елементом.

Послідовність символів, складова текст може складатися з пробілів, табуляцій, символів переходу на новий рядок, символів повернення каретки, букв, розділових знаків, цифр, і спеціальних символів (наприклад #, +, $, @), за винятком наступних чотирьох символів, що мають у HTML спеціальний зміст: (більше), & (амперсанд) і "(подвійна лапка). Якщо необхідно включити до тексту якийсь із цих символів, то слід закодувати його особливою послідовністю символів.

Структура HTML-документа

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

HTML-документ складається з двох частин: заголовок (head) та тіла (body), розташованих у наступному порядку:

Заголовок документа Тіло документа

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

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

Текст HTML розділяється на абзаци за допомогою тега<р>. Він розміщується на початку кожного абзацу, і програма перегляду, зустрічаючи його, відокремлює абзаци один від одного порожнім рядком. Використання тега, що закриваєнеобов'язково.

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

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

При використанні логічного форматуваннятексту браузером виділяються різні частини тексту відповідно до структури документа. Щоб відобразити назву, використовується один із тегів заголовка. Заголовки у типовому документі поділяються за рівнями. Мова HTML дозволяє задати шість рівнів заголовків: h1 (заголовок першого рівня), h2, h3, h4, h5 та h6. Заголовок першого рівня зазвичай має більший розмір і насиченість порівняно з заголовком другого рівня. Приклад використання тегів заголовків:

l. Назва глави

l.l. Назва розділу

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

Тег вставляє зображення в документ, якби воно було одним великим символом. Приклад застосування тега:

Для створення гіпертекстового посиланнявикористовується пара тегів<а>... . Фрагмент тексту, зображення або інший об'єкт, розташований між цими тегами, відображається у вікні браузера як гіпертекстове посилання. Активація такого об'єкта призводить до завантаження у вікно браузера нового документа або відображення іншої частини поточної Web-сторінки. Гіпертекстове посилання формується за допомогою виразу:

Href тут є обов'язковим атрибутом, значення якого є URL-адреса запитуваного ресурсу. Лапки у заданні значення атрибуту href не є обов'язковими. Якщо задається посилання на документ на іншому сервері, то вид гіперпосилання такий:

<а href = "http://www.school.donetsk.ua/11.jpg">Світлина 11-А

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

3. Мова гіпертекстів HTML

Гіпертексти повинні починатися зі слова та закінчуватися словом. Слова у кутових дужках у мові HTML називаються тегами, а програмуванні - дескрипторами. Багато тегів HTML парні - і, і т.д.

Парні теги виділяють деякий фрагмент гіпертексту - "назва", "тіло" і т. д. Перший тег починає фрагмент, а другий - завершує його. У дескрипторах, що закривають, перед ім'ям ставиться знак дробу / .

Загальна структура гіпертекстів, записаних у мові HTML:

гіпертекст::= назва тіло

назва::= титул

титул::= назва

тіло::= текст

Відповідно до правил HTML гіпертексти повинні мати «назву» і «тіло». Як публікації гіпертексти можуть і повинні містити відомості про авторів та власників авторських прав (сайтів).

У назві гіпертексту має міститися «назва», яке браузерами відображається на верхньому рядку екрана ЕОМ. Назва має висловлювати головну ідею публікації (сторінки). Гіпертекст без назви – це як стаття без назви.

«Тіло» гіпертексту має містити тексти, таблиці, фотографії та ілюстрації. Відмінність електронних гіпертекстів від звичайних паперових текстів – включення гіперпосилань, натискання на які викликає завантаження нових гіпертекстів.

Приклад гіпертексту та результат його відображення браузером на екрані ЕОМ:

Гіпертекст: Результат:

Результат роботи браузера - завантаження та виведення на екран ЕОМ гіпертексту, що зберігається на сайті за адресою, вказаною у вікні браузера. Якщо гіпертекст занадто великий, то браузер виводить кнопки протяжки гіпертексту праворуч або знизу екрана.

Розміри екранів ЕОМ мають наступний діапазон. Мінімальний розмір екрану – 640 х 480 пікселів. Далі стандартні розміри екранів – 800 х 600, 1024 х 768 та 1280 х 1024 пікселів. Тому на різних екранах гіпертексти можуть виглядати по-різному.

Загальна структура гіпертекстів та їх відображення на екрані ЕОМ:

Гіпертекст: Результат:

Текстова частина може складатися з рядків та абзаців із заголовками та без заголовків, зі списками, таблицями та меню.

тіло::- текст

текст::= заголовок (текст) |

список (текст) |

таблиця (текст) |

Заголовки в гіпертекстах оформляються у такому вигляді:

заголовок::=

назва

заголовок::=

назва

заголовок::=

назва

де теги H2, ..., h6 задають розмір заголовків по відношенню до основного тексту.

Абзаци в гіпертекстах починаються з дескриптора

гіпертекст

|

Перехід на новий рядок та абзаци вказується дескриптором . Кінець абзацу р> не є обов'язковим, але необхідний при використанні параметрів у дескрипторі абзацу.

Основний параметр абзаців – align – вирівнювання текстів на екрані ЕОМ. Вирівнювання текстів здійснюється браузерами автоматично відповідно до розмірів екрана ЕОМ:

align=center- по центру екрана:

align = left - до лівого краю;

align = right - до правого краю;

align = justify - на весь екран.

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

Для оформлення гіпертекстів мова розмітки HTML має багатий спектр шрифтів, стилів та ресурсів. Найбільш простий засіб оформлення – виділення слів з метою привернення уваги читачів сайтів до окремих частин текстів.

Для виділення слів у гіпертекстах можна використовувати жирний шрифт або підкреслення за допомогою наступних тегів:

Великі символи

жирний шрифт

курсив i>

підкреслення

перекреслення

маленькі символи

Шрифтове виділення у гіпертекстах задається тегом : шрифти:: = текст font>

Параметри шрифтів - їх розмір та тип. Розміри шрифту визначаються параметром size = розмір.

Розмір вказується явно від 1 до 6 або у формі збільшення +1, +2 або зменшенні - 1, - 2.

Тип шрифту визначається параметром

face = шрифт

Тут шрифт - один із стандартних шрифтів: "Times", "Courier" і т.д.

Колір шрифту визначається параметром со1ог = колір, де колір - колір виділеного фрагмента гіпертексту. Наприклад – виділення тексту червоним кольором:

текст font >

Стандартні назви кольорів у мові НТМL:

red - червоний, green - зелений, blue – синій, black-чорний,

white - білий, gold - золотий, yellow-жовтий і т.д.

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

Єдиний стиль оформлення – це важлива властивість будь-якої публікації в книгах, журналах та на сайтах. Надалі найкраще дотримуватися прийнятого зразка та стилю оформлення на весь період створення та супроводу сайту.

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

Загальна форма зовнішніх гіперпосилань:

де "адреса" - це адреса гіпертексту всередині сайту або на іншому сервері мережі Інтернет.

Приклади зовнішніх гіперпосилань:

а)адреса сайту в Інтернет:

http://bак2.naгоd.гu

б) адреса сторінки на сайті:

http://bак2.naгоd.гu/inrogl.html.

в) адресу сторінки в папці сайту;

http://bак2.naгоd.гu/tests/test2.html.

тести 2 а>

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

Графічні файли зазвичай розміщуються на сайтах та окремій папці з ім'ям image. Завантаження ілюстрацій на екрани користувацьких ЕОМ проводиться браузерами за допомогою операторів :

Загальна форма операторів завантаження графічних ілюстрацій:

Розташування ілюстрацій на екрані ЕОМ визначається параметрами вирівнювання: align=left- по лівому краю, align=right - по правому краю екрана. Текст при цьому обтікає ілюстрації відповідно праворуч або сліпу.

Ілюстрації можуть бути притиснуті до верхнього або нижнього краю екрана, що задається параметрами: align = top - до верхнього краю, align = bottom - до нижнього краю екрана або вирівняні по середині екрана - align = middle.

Для розташування ілюстрації на екрані ЕОМ в операторі завантаження можуть бути вказані їх ширина і висота:

висота: = height = "висота"

ширина: = width = "довжина"

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

Розміри ілюстрацій зазвичай вибирають так, щоб вони були помітні цілком навіть на екранах ЕОМ з мінімальним розміром. Якщо кран ЕОМ більше, то ілюстрації займатимуть лише його.

Гіпертекстові списки – це переліки з нумерацією чи виділенням елементів списків. Усі елементи починаються тэгами

. Нумеровані списки розпочинаються тегом

і закінчуються тегом

. Ненумеровані списки обмежуються тегами.

Гіпертекстові списки – зручний засіб для організації змісту у складних сайтах та великих гіпертекстів. Елементами в таких списках є адреси відповідних розділів сайтів (розділів, параграфів розділів електронних книг та бібліотек).

Висновок

HTML – це мова розмітки гіпертекстів (hypertext markup language).

Усі файли повинні бути гіпертекстами, записаними у форматі HTML і мають ідентифікатори виду.html.

Мова HTML - це мова розмітки гіпертекстів, що зберігаються на Web-серверах та відображаються браузерами на екранах ЕОМ. Мова HTML визначає правила опису гіпертекстів та відображення їх браузерами на екранах комп'ютерів.

На розробку мови гіпертекстової розмітки істотно вплинули два фактори: дослідження в галузі інтерфейсів гіпертекстових систем і бажання забезпечити простий і швидкий спосіб створення гіпертекстової бази даних, розподіленої в мережі.

Основні правила вкладання елементів:

Елементи не повинні перетинатись;

Блокові елементи можуть містити вкладені блокові та текстові елементи;

Текстові елементи можуть мати вкладені текстові елементи;

Текстові елементи не можуть містити вкладені блокові елементи.

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

Список литературы

«Економічна інформатика» / Под. ред. П.В. Конюховського та Д.М. Колесова, СПб: Пітер, 2000, 560с.

Каймін В.А., «Інформатика», учеб.4-е вид. М.: 2003-285с.

«Інформатика», базовий курс, 2-ге видання / Под. ред. С.В. Симоновича, СПб.: 2003, 640с.