2. HYPERTEXT MARKUP LANGUAGE
(мова розмітки гіпертексту)
Концепція HTML включає в себе різні способи
оформлення гіпертекстових документів, дизайн,
гіпертекстові редактори, браузери і багато іншого.
HTML як основа створення Web-Сторінок має пряме
відношення і до нового напрямку образотворчого
мистецтва -Web-дизайн.
3. Багато хто називає HTML мовою
програмування. Це не є правильно, так як у
традиційному розумінні HTML є мовою
розмітки електронних документів, лише
вказує програмам перегляду HTML-сторінок
(браузерам) форму подання описаної у
документі інформації.
4. БРАУЗЕР
Спеціальні програми для перегляду веб-сайтів
(електронних документів, створених за
правилами мови розмітки HTML),називаються
браузерами.
Основна функція браузера полягає в
інтерпретації коду HTML та висновку візуального
результату на екрані монітора користувача.
Сьогодні існує велика кількість
найрізноманітніших браузерів
5. Найпершим браузером з графічним
інтерфейсом є Mosaic від фірми
NCSA.
Більш розвиненим був другий
браузер-Netscape Navigator.
7. СПЕЦІАЛЬНІ ТЕРМІНИ
• Елемент (element) - Конструкція мови HTML. Це
контейнер, містить дані і дозволяє відформатувати
їх певним чином. Будь-яка
• Web-сторінкає набір елементів. Одна з основних
ідей гіпертексту- Можливість вкладення елементів.
• Тег (tag) - Початковий або кінцевий маркери
елемента. Теги визначають межі дії елементів та
відокремлюють елементи один від одного. У тексті
Web-сторінки теги полягають у кутові дужки, а
кінцевий тег завжди постачається косою межею.
8. Атрибут(attribute) - Параметр або властивість
елемента.Це змінна яка має стандартне ім'я і якій
може присвоюватися певний набір значень. Атрибути
розташовуються всередині початкового тега і
відокремлюються один від одного пробілами.
• Гіперпосилання — фрагмент тексту, який є
вказівником на іншийфайл абооб'єкт. Гіперпосилання
необхідні для того, щоб забезпечитиможливість
переходувід одного документа до іншого.
• Фрейм (frame) - Цей термін має два значення. Перше
– область документа зі своїми смугами прокручування.
Друге значення – одиночне зображення вскладному
(анімаційному) графічному файлі (за аналогією з
кадром фільму). Замість терміна «фрейм» у спеціальній
літературі та локалізованих програмних продуктах іноді
можна зустріти термін "кадр" або "рамка".
9. Аплет (applet) - програма, що передається на
комп'ютер клієнта у вигляді окремого файлу та
запускається при перегляді Web-Сторінки.
• Скрипт або сценарій (script) - програма,
включена до складу Web-сторінки для розширення
її можливостей. Браузер Internet Explorer в певних
ситуаціях виводить повідомлення: ? Дозволити
виконання сценаріїв на сторінці?≫ У цьому
випадку маються на увазі скрипти.
10. Розширення (extension) – елемент, що не
входить до специфікації мови,але
використовується, забезпечуючи можливість
створення нового цікавого ефекту
форматування.
•Програмний код або просто код - аналог поняття
≪текст програми≫.
• Код HTML - гіпертекстовий документ у своєму
первісному вигляді,коли видновсі елементи та
атрибути.
11. Код http вказує на те, що програма має працювати із
системою гіпертекстових документів та
використовувати відповідний протокол (HyperText
Transfer Protocol).
12. HTML-ФАЙЛ АБО HTML-
СТОРІНКА
-документ, створений у вигляді гіпертексту
на основі мови HTML. Такі файли мають, як
правило, розширення htm або html. У
гіпертекстових редакторах та браузерах ці файли
мають загальна назва ≪документ≫.
HTML є основною мовою для створення
документів у WWW.
13. ОСОБЛИВОСТІ ГІПЕРТЕКСТУ
Спосіб створення гіпертексту забезпечує його
абсолютну платформну незалежність.
Однією з основних особливостей HTML є принцип,
яким не тільки допускається вкладення одних
елементів в інші, а й декларується необхідність такого
вкладення. Це відрізняє HTML від багатьох іншихмов.
14. Якщо розглянути вихідні тексти різних
Web-Сторінок, то можна
легкопобачитисхожість їх структур. Це
пояснюється тим, що документи
створюються за певними правилами.
У основу синтаксису мови HTML ліг
стандарт ISO 8879:1986
≪Information processing. Text and office
systems. Standard GeneralizedMarkup
Language(SGML)≫.
15. МОВА HTML Є НАБІР СПЕЦІАЛЬНИХ
ПРАВИЛ.
Кожному правилу відповідає своя назву,
властивість і значення. Наприклад, щоб
задати правило жирного зображення
звичайного тексту, необхідно
використовувати наступну HTML-
конструкцію:
<В>Звичайний текст</В>
16. Як видно з прикладу, текст, який має
відображатись жирнимзображенням,
відокремлений групами символів <в> та
</в>.
Такігрупиприйнято називатитегами.
Теги бувають одинарними та парними. У
випадку з нашим прикладом тег є парним,
тобто він закриває HTML-конструкцію
разом із символом "/" (прямий слеш).
Іноді теги, які необхідно закривати парним
тегом, називаютьтегами-контейнерами.
17. УСІ ЕЛЕМЕНТИ МОВИМОЖНА
УМОВНОПОДІЛИТИ НА ТРИ ГРУПИ.
Допершою відносяться елементи, які створюють
структуру гіпертекстового документа
Додругій групі можна віднести елементи, що
створюють ефекти форматування. Їх використання
диктується конкретними вимогами до документа,
фантазією.розробника.
Дотретій групі відносяться елементи, які дозволяють
керувати програмними засобами, встановленими та
працюючими на комп'ютері-клієнті.
18. Структура будь-якого тега має на увазі
вказівку самого тега, його параметрата
значення цього параметра.
При цьому найменування параметра та
йогозначенняможе писатися як малими,
так і великими літерами.
Значення параметру ставиться в лапки.
19. Параметри та їх значення можуть або взагалі
відсутні у якогось певного тега:
<TABLE WIDTH="100%" BORDER>
У наведеному прикладі для тега побудови
таблиці <TABLE> один параметр (WIDTH)
вказаний зі значенням, інший (BORDER)
такого не містить.
21. РОЗДІЛHTML
Розділ HTML описується тегом-
контейнером <HTML> </HTML> і дає
браузеру інформацію про те, що
документрозроблений зза допомогою мови
розмітки HTML.
Сьогодні більшість браузерів здатне
розпізнати HTML-документ і без
зазначення цього тега, проте, пропускати
розділ HTML розробникам не
рекомендується.
22. <HTML></HTML>
- Цей елемент є самим зовнішнім, оскільки між
його початковим та кінцевим тегом повинна
знаходитися вся Web-Сторінка.
Він припускає вкладення елементів HEAD,
BODY та інших, що визначають загальну
структуру Web-Сторінки.
Кінцевим тегом </html> закінчуються всі
подібні документи.
23. РОЗДІЛHEAD
Розділ HEAD виконує функцію робочого
заголовкаHTML-документу тає, по суті, "бійцем
невидимого фронту" - теги, вказані всередині
цього розділу, надзвичайно важливі і можуть
сильно впливати на зовнішній вид документа,
але самі залишаються непомітними оку
користувача.
Даному розділу зіставлено парний тег
<HEAD> </HEAD>.
Розглянемо теги HTML, які вказуються усередині
розділу HEAD.
24. <HEAD></HEAD>
Область заголовка Web-Сторінки. Іншими
словами, її перша частина. Так само
якпопереднійелемент, HEAD служить лише
формування загальноїструктури документа.
Цей елемент може мати атрибути lang і dir,
повинен включати елемент TITLE і допускає
вкладення елементів BASE, МЕТА, LINK,
OBJECT, SCRIPT, STYLE.
25. НАЗВА ДОКУМЕНТУ<TITLE>
Парний тег <TITLEX/TITLE> призначений для
вказівки імені створеному електронному
документа. Слід пам'ятати, що під
назвоюдокумента вданому випадку мається на
увазі не файлове найменування, авізуальний
заголовок HTML-сторінки.
Вказівка конструкції <TITLE></TITLE> є
обов'язковою
Цей рядок часто використовується для пошуку в
WWW. Тому автори повинні подбати про те, щоб
цей рядок, не будучи надто довгим, досить точно
відображав призначення документа.
26. <TITLE></TITLE>
Пошукові системи, зіткнувшись з
безіменною сторінкою, занесуть її в свої
бази даних під заголовком Untitled, що
зробить HTML-документ безликимі
схожим на мільйони інших електронних
документів, розміщенихв інтернеті.
27. ЗВ'ЯЗОК МІЖ ДОКУМЕНТАМИ<LINK>
Часто буває так, що кілька різних документів
структурно або функціонально взаємопов'язані між
собою. У цьому випадку використовується тег <LINK>,
який є парним, отже не вимагає вказівкизакриваєтега:
<LINK REL="stylesheet“ HREF="styles/main.сss" >
Наведений приклад показує відношення між HTML-
документом, врозділі HEAD якого вказана дана
кодова конструкція, тазовнішнім файломшаблон
стилівmain.ess.
28. Елементи<STYLE>і<SCRIPT>
До структури розділу документа HEAD також
можуть входити теги-контейнери
<STYLE></STYLE> І <SCRIPT></SCRIPT>.
Перший парний тег описує стильові шаблони
документа, другий - містить код сценаріїв
(скриптів), що виконуються.
29. <STYLE></STYLE>
Опис стилю деяких елементів Web-Сторінки.
Для кожного елемента існує стильове
оформлення за умовчанням, тому вживання
елемента STYLE не обов'язково, але бажано.
30. <МЕТА>
Цей елемент містить службову інформацію,
яка не відображається при перегляді Web-
Сторінки. Усередині нього немає тексту у
звичайному розумінні,тому ніта кінцевого тега.
Кожен елемент МЕТА містить два основні
атрибути, першийу тому числі визначає тип
даних, а другий — зміст.
31. ОСЬ КІЛЬКА ПРИКЛАДІВ
META-ДАНИХ:
• Дата, що означає «термін придатності»
документа:
name="Expires" content=«Дата"
• Адреса електронної пошти:
name="Reply-to" content="Ім'я@Адреса"
Ім'я автора Web-сторінки:
name="Author" content="Ім'я автора"
32. Набір ключових слів для пошуку:
name="Keywords"content="cnoBo1,слово2,словоЗ. . "
• Короткий опис змісту Web-сторінки:
name="Description"content="Змістсторінки"
• Опис типу та характеристик Web-сторінки:
name="Content-Type"content="Опис сторінки"
• Вказує програму, в якій було створено Web-сторінка:
name="Generator" content=«Назва HTML-редактора"
33. <BODY> </BODY>
Цей елемент містить гіпертекст, який визначає
власне Web-сторінку. Розділ BODY є одним із
найважливіших компонентів будь-якого HTML-
документа, тому що в ньому розташовується змістовна
частина, якавиводитьсябраузером на екран монітора
користувача.
Кінцевий тег цього елемента треба шукати наприкінці
HTML-файлу.
Усередині елемента BODY можна використовувати всі
елементи, призначені для дизайну Web-Сторінки.
34. Розділ описується парним тегом
<BODY></BODY>, всередині якого
розміщується більшість існуючих тегів
HTML.Гіпертекст, розташований
усередині елемента BODY, може мати
довільну структуру.
Тег <BODY> має ряд параметрів, які
умовно можна розділити на чотири
основні групи (параметри фону, меж
документа, тексту та гіперпосилань).
35. Параметр Функція
BGCOLOR Визначення кольору фону
BACKGROUND Вказівка фонового малюнка
BGPROPERTIES Зміна властивостей фону
(наприклад, фіксування фонового малюнка)
TOPMARGIN, BOTTOMMARGIN Визначення розміру
відступів
LEFTMARGIN, RIGHTMARGIN,
MARGINWIDTH, MARGINHEIGHT
TEXT Визначення кольору основного тексту
LINK, ALINK, VLINK Визначення кольору
гіперпосилань
36. Один із найкорисніших для дизайну атрибут, що
визначає тлосторінки:
background=«Шлях до файлу
фону"
Простіше оформлення фону зводиться до його
завдання кольору:
bgcolor="#RRGGBB"
Колір фону задається трьома дворозрядними
шістнадцятковими числами, які визначають
інтенсивність червоного, зеленого та синього
кольорів відповідно.
37. ПАРАМЕТРИ ФОНУ
Параметрами фону документа є BGCOLOR,
BACKGROUND та BGPROPERTIES.
BGCOLOR встановлює колір фону, значення якого
може бутивведено всимвольному еквіваленті, у
шістнадцятковому коді або у форматі колірний моделі
RGB (Red, Green, Blue).
Будь-якезначення RGB може бути перетворено на
шістнадцятковийформат (від 00 до FF з приставкою #
(читається "дієз")).
Деяким значеннямзгаданихмоделей відповідає
символьна назва кольору.
Таким чином, одині той самий колір можна вказати
трьома можливими способами.
38. ТРИ ВАРІАНТИ ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ
(БІЛОГО):
<BODY BGCOLOR="white">
<BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="255,255,255">
39. Параметр BACKGROUND дозволяє накладати
на тло документаграфічнезображення:
<BODY BACKGROUND="images/bg.gif">
Порядз графічним зображеннямфону
рекомендуєтьсявикористовувати і параметри
кольору на той випадок, якщомалюнок
незавантажиться (тоді браузер відобразить
колір).
40. ПАРАМЕТРИ МЕЖ ДОКУМЕНТА
Параметри меж HTML-документа створюють
відступи заданого розмірувід верхнього,
нижнього, лівого та правого країв документа.
Цим відступам відповідають параметри
TOPMARGIN, BOTTOMMARGIN, LEFT-
MARGINіRIGHTMARGIN.
Значення для них задаються у пікселах:
<BODY TOPMARGIN="5" BOTTOMMARGIN="5"
LEFTMARGIN="10" RIGHTMARGIM="10">
41. ПАРАМЕТРИ ТЕКСТУ
З параметрів тексту документа реально
застосовується лише один – TEXT.
Він визначає колір основного тексту на сторінці
(значення параметраможе бути введено
аналогічно кольору тла документа):
<BODY TEXT="black">
42. ПАРАМЕТРИ ГІПЕРПОСИЛАНЬ
Параметри гіперпосилань (зв'язків із внутрішніми
або зовнішнімидокументами) визначають колір
активних (ALINK), не відвіданих (LINK) та
відвіданих (VLINK) посилань:
<BODY LINK="#OOOOFF" ALINK="#OOOOFF"
VLINK="blue">
43. Для завдання кольори тексту є
наступний атрибут:
text="#RRGGBB"
Для завдання кольори тексту
гіперпосилань використовується
атрибут:
link="#RRGGBB"
Точно так само можна поставити колір
для переглянутих гіперпосилань:
vlink="#RRGGBB"
Можна також вказати зміну кольори для останньої
обраної користувачем гіперпосилання:
alink="#RRGGBB"
44. <!-- КОМЕНТАР — >
У будь-якій мові програмування є конструкції, що
дозволяютьстворювати довільніремарки.
Текст,введений усерединіцього елемента,
ігноруєтьсябраузер.Ці елементи
можутьрозташовуватисяу будь-якому місці Web-
Сторінки.
Коментарповинен бути відокремлений від
основноготексту кутових дужок.
Ознакою коментаря служить знак оклику, а текст
коментаря повинен обрамлятися подвійними
дефісом. Наприклад:
<!-- Початок виведення таблиці -->
45. <H1/H6>
Елемент заголовка. Існує шість рівнів
заголовків, якіпозначаються Н1...Н6.
Заголовокрівня 1 найбільший, а рівень 6
забезпечуєнайменший заголовок.
Длязаголовків можна використовувати атрибут,
що задає вирівнювання ліворуч, центром або
праворуч:
align="left"
align="center"
align="right"
46. ЗАГОЛОВКИ, СТВОРЮВАНІ З ДОПОМОГОЮ
ЕЛЕМЕНТІВ Н1...Н6.
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Шрифт другого заголовка перевизначено
47. <HR>
Горизонтальна лінія (horizontal rule) - дуже часто
використовуваний елемент.
По-перше, тому що за його допомогою дуже
зручно ділити сторінку на частини.
По-друге, тому що вибір подібних елементів
оформлення у автора сторінки дуже невеликий.
Справді, у HTML практично відсутні схожі
конструкції тільки для горизонтальної лінії
чомусь було зробленовиняток.
48. Елемент немає кінцевого тега, але
допускає ряд атрибутів для
вирівнювання ліворуч, центром,
праворуч, шириною:
align="left"
align="center"
align="right"
align="justify"
49. Можна задавати товщину лінії:
Size=товщинау пікселах
Можна керувати довжиною лінії:
width=довжина у пікселах
width=довжина у відсотках
Можна вибрати колір:
соlог="колір"
50. ПРАВИЛА СИНТАКСИСУ
При використанні кожного елемента важливо
знати, які елементи можуть розташовуватися
всередині нього і всередині яких елементів може
бути він сам. Так, взаємне розташування
елементів HTML, HEAD, TITLE та BODY має
бути стандартним на будь-який сторінці.
Якщо ж сторінка представляє собою документ
планування кадрів, замість елемента BODY
використовується елемент FRAMESET.
51. Існують групи елементів, які використовуються
разом. До них відносяться елементи для
створення таблиць, списків, кадрів.
Таблиці та фрейми часто використовуються для
того, щоб розмістити деталі сторінки (малюнки,
текст тощо) у певному порядку. Наприклад,
маючи малюнок всередині осередки таблиці,
можна досягти певного його становища.
52. У наведеному нижче прикладі є два абзаци
(перший у зеленій рамці) та таблиця:
<Р style="border: Зрх solid green">Текст абзацу
1</р>
<TABLE>. . . </table>
<Р>Текст абзацу 2</р>
Таблиця у разі — незалежний елемент. Її
можна, наприклад, вирівнювати незалежно
від решти тексту.
53. Браузери побудовані таким чином, що вони
«стараються» не реагуватина помилки розмітки
гіпертексту. Якщо сторінка може бути відображена,
вона виводиться на екран без будь-яких
попереджуючихповідомлень.
Програма інтерпретує помилково розставлені теги
певнимчином і формує зображення, дотримуючись
логіки, закладеної у неї розробниками. При цьому
вигляд сторінки може і відповідати задуму автора. І
тільки e випадку дуже серйозних помилок чи явних
протиріч браузер виводить повідомлення про
неможливості відобразити сторінку. Непрямою
ознакою помилкирозмітки можеслужить поява на
сторінці фрагментів коду HTML.
54. Кориснаінформація одного елемента повинна
перебувати або між початковим та кінцевим тегамі
даного елемента, або між початковим тегом даного
та початковим тегом наступного елемента.
Будь-який довільний текст, введений на сторінку,
сприймається браузером як підлягає висновку на
екран і, отже, форматування відповідно до
оточуючими цей текст елементів. При цьому не
враховується розбиття тексту на рядки,отриманеу
текстовому редакторі.
55. Дуже важливим правилом, яке не
має винятків, є розміщення
атрибутів елемента всередині
початкового тегу.
57. Код можна написати у блокноті.
Тепер збережіть код під будь-яким
ім'ям, не забувши привласнити файл
розширення html. Відкрийте файл у
браузері.
Побачите там текст:
Це мій перший HTML-документ!
