Тема 9. Проектування та верстка веб-сторінок
Урок 21. Мова гіпертекстової розмітки. Каскадні таблиці стилів. Проектування та верстка веб-сторінок. Адаптивна верстка. Кросбраузерність.
Урок 20. Основні тренди у веб-дизайні. Види сайтів та цільова аудиторія. Інформаційна структура сайту. Інструменти веб-розробника.
Урок 22. Графіка для веб-середовища. Анімаційні ефекти. Мультимедіа на веб-сторінках.
Урок 23. Об’єктна модель документа. Веб-програмування та інтерактивні сторінки.
Урок 24. Хостинг сайту. Веб-сервер та база даних. Взаємодія клієнт-сервер. Валідація та збереження даних форм.
Урок 25. Об’єктна модель документа. Веб-програмування та інтерактивні сторінки. Хостинг сайту. Веб-сервер та база даних. Взаємодія клієнт-сервер. Валідація та збереження даних форм.
Основні поняття мови HTML.
Гіпертекст – це текст, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»); читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активізувавши посилання. Такі посилання створюються за допомогою спеціальних кодів, що задають форматування тексту. Ці коди визначені у мові розмітки НТМL.
HTML (англ. HyperText Markup Language — мова розмітки гіпертекстових документів) — основана на SGML – текстова мова розмітки, призначена для розмітки документів, які містять текст, зображення, гіперпосилання, тощо. Процес розміщення в текст кодів НТМL називають розміткою.
Документи створені мовою HTML називають HTML-документи. Вони нагадують звичайні текстові файли за винятком того, що деякі символи в них (так звані теги (tag)) інтерпретуються як мітки.
Тег (від англ. tag - "ярлик, етикетка, бірка; розмічувати, маркувати") - це символ розмітки мови HTML, який подається в кутових дужках <>. Тег ще називають дескриптором. Використання дескрипторів дає змогу форматувати HTML-документи.
За допомогою дескрипторів у HTML-документі можна форматувати такі елементи: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Кожен елемент має свою унікальну назву, яка записується латинськими літерами і не чутлива до їх регістру. В загальному вигляді елемент має три складові:
· теги (початковий та кінцевий);
· атрибути;
· зміст (контент).
Тег — це назва елементу, записана у кутових дужках (< >). Атрибути задають технічну інформацію про елемент. Зміст елементу — це вся необхідна текстова та графічна інформація документу, яка буде відтворюватися браузером на екрані.
Багато хто вважає, що елементи — це і є теги (наприклад, "тег p"). Проте варто пам'ятати, що елемент — це здебільшого дві складові (теги і зміст), а тег — це складова елемента. Наприклад, елемент head завжди представлений в документі, навіть якщо обидва тега, <head> та </head>, відсутні в розмітці.
Перегляд HTML-документу здійснюється за допомогою веб-оглядача (наприклад, Internet Explorer, Google Chrome, Opera та ін.).
Мова HTML набула на сьогодні певних розширень. На її основі було створено нові мови розмітки. Наприклад, поєднання статичної мови розмітки HTML, вбудованої скриптової мови JavaScript (сценарії виконуються на стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктної моделі документа) утворило нову концепцію створення веб-сайту, що розглядає HTML-документ як об'єктну структуру та дістала назву DHTML (Dynamic HTML). Ця концепція може бути використана для створення додатків в браузері: наприклад для навігації або для додання інтерактивності формам. Також DHTML може бути використаний для динамічного перетягування елементів по екрану і може служити як інструмент для створення заснованих на браузері відео-ігор.
XHTML (англ. Extensible Hypertext Markup Language — розширювана мова розмітки гіпертексту) — мова розмітки, що базується на основі XML та повторює і розширює можливості мови HTML. Головна відмінність XHTML від HTML полягає в опрацюванні документа. Документи XHTML опрацьовуються своїм модулем, під час виконання якого помилки, що допущені розробником не виправляються.
Історія розвитку HTML.
У 1980 році фізик Тім Бернерс-Лі запропонував систему ENQUIRE, яка мала полегшити сумісне використання документів.
У 1989 році Бернерс-Лі запропонував впровадити на базі Internet гіпертекстову систему документів.
Вже наприкінці 1990 року він розробив мову HTML і створив веб-оглядач та серверне програмне забезпечення для запропонованої ним системи гіпертекстових документів.
Наприкінці 1991 року Тім Бернерс-Лі опублікував в мережі Інтернет перший загальнодоступний опис мови HTML, відомий як документ «HTML теги» (HTML Tags). В ньому були описані 20 елементів найпершої схеми розмітки HTML-документів. 13 з яких до цих пір використовуються у мові HTML.
Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року її офіційно визнали такою, опублікувавши першу специфікацію HTML: "Hypertext Markup Language (HTML)", авторами якої були Тім Бернерс-Лі та Ден Конолі.
В 1993 році Дейв Раджетт запропонував стандартизувати розмітку для визначення таблиць та інтерактивних форм.
На початку 1994 року створено робочу групу HTML (HTML Working Group), яка займалась проблемами стандартизації мови розмітки HTML.
В 1995 році робоча група HTML завершила роботу над першою специфікацією «HTML 2.0», що мала бути використана як базовий стандарт для подальших вдосконалень HTML. Версія 2.0 окреслювала чіткі відмінності між новим виданням специфікації та попередніми проектами.
З 1996 року специфікації HTML затверджувались консорціумом W3C, враховуючи доповнення до розмітки, що впроваджувалися компаніями-розробниками веб-оглядачів.
У 2000 році HTML стала міжнародним стандартом (ISO/IEC 15445:2000).
Остання специфікація HTML, опублікована W3C наприкінці 1999 року, має назву «HTML 4.01 Recommendation».
Версії мови HTML
Тім Бернерс-Лі представив HTML в дослідницькому центрі CERN в Женеві в 1989 році.
HTML (без номера версії, 3 листопада 1992): найперша версія, орієнтована лише на текст.
HTML (без номера версії, 30 квітня 1993): до тексту додаються атрибути, які визначають курсивне або жирне написання літер, та зображення.
HTML+ (листопад 1993): заплановані доповнення, які потрапили до наступних версій, але ніколи не були відокремлені як HTML+.
HTML 2.0 (листопад 1995): визначена стандартом RFC 1866 версія з підтримкою форм. Статус цього стандарту вже «історичний», також визнані застарілими попередні версії.
HTML 3.0: версія, яка не зазнала поширення, оскільки разом із випуском браузера Netscape Navigator версії 3, цей стандарт вже був застарілим.
HTML 3.2 (14 січня 1997): в цій версії були додані численні можливості, такі як таблиці, обтікання текстом зображень, інтеграція аплетів.
HTML 4.0 (18 грудня 1997): в цій версії були додані таблиці стилів, скрипти та фрейми. Також, відбулось розділення на Strict (суворе дотримання стандартів), Frameset (з підтримкою фреймів), Transitional (перехідний). 24 квітня 1998 було випущено виправлену версію цього стандарту.
HTML 4.01 (24 грудня 1999): заміна версії HTML 4.0, містить численні дрібні виправлення.
HTML 5 (5 квітня 2008): HTML 5 має новий словник побудований на основі HTML 4.01 та XHTML 1.0. Також перероблена і розширена пов'язана з HTML специфікація DOM.
XHTML 1.0 (26 січня 2000): висловлення стандарту HTML 4.01 засобами XML. 1 серпня 2002 було випущено оновлену редакцію стандарту.
XHTML 1.1 (31 травня 2001): після того, як XHTML буде розділено на модулі, стандарт XHTML 1.1 визначатиме сувору версію, в якій не буде запроваджених HTML 4 можливостей Frameset та Transitional.
XHTML 2.0 (в розробці): ця версія вже не базується на HTML 4.01 і додає деякі нові теги. Буде завершено розділення між представленням та вмістом.
Розмітка HTML-документа
Розмітка документів – це опис різних фрагментів документа та їх взаємного розташування. Розмітка здійснюється за допомогою дескрипторів (тегів) мови HTML.
Переглянути розмітку будь-якого HTML-документа можна, якщо відкрити його у простому текстовому редакторі, типу Блокнот. Або, якщо документ відкрити у веб-оглядачі, наприклад, Internet Explorer, обрати команду Вид-В виде HTML. Якщо веб-оглядач Опера, то достатньо клацнути правою кнопкою миші на документі та обрати команду «Исходный код».
Для вивчення розмітки мови HTML потрібні дві речі:
· будь-який веб-оглядач, тобто, програма, придатна для перегляду HTML-файлів;
· будь-який редактор текстових файлів, наприклад Блокнот (Notepad).
Свої перші HTML-файли можна розробляти на локальному диску. При цьому комп`ютер може і не мати доступу до мережі Інтернет. Під час роботи, html-документ може бути одночасно відкритий і в Блокноті, і у веб-оглядачі. Збергіаючи зміни в Блокноті, потрібно натиснути кнопку оновлення сторінки, наприклад F5 чи Ctrl+R, щоб побачити ці зміни в HTML-документі.
Як почати:
1. Відкрити програму Блокнот.
2. Відкрити вікно збереження документа.
3. Вибрати тип файла «Все файлы».
4. Ввести ім’я файла із зазначенням його розширення – html (наприклад, text.html, example.html, memory.html).
5. Ввести структуру документа та зберегти.
6. Закрити документ у програмі Блокнот.
7. Відкрити документ у веб-оглядачі.
Наступного разу, коли потрібно здійснити оновлення HTML-документу, цей файл потрібно відкривати за допомогою програми Блокнот.
Загальна структура
HTML-документ складається з трьох основних елементів:
Декларація типу документу – (англ. Document type declaration, Doctype), на початку документа, в якій визначається тип документа (DTD).
Шапка документа (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткові відомості про документ, які не відтворюються безпосередньо у веб-оглядачі; наприклад, теги title визначають заголовок документа.
Тіло документа (може знаходитися в елементах body), в якому містяться основні відомості документа, його зміст.
Для того, щоб веб-оглядач розпізнавав ці елементи, назва кожного елементу має обмежуватись кутовими дужками <>. Елемент, обмежений кутовими дужками і є дескриптором.
Дескриптори можуть бути двох видів: початковий та кінцевий. Наприклад, для позначення типу документа, одного дескриптора <html> не достатньо, потрібен ще й кінцевий – </html>, який позначається так само, але перед ключовим словом додається знак «слеш».
Отже, для визначення типу документу потрібно вказати два дескриптори:
<html> </html>
Деякі дескриптори, наприклад <br>, не містять змісту, тому не мають кінцевого дескриптора. Розмітка може не мати початкового та кінцевого дескриптора (наприклад, дескриптор <head>), проте він завжди буде представлений в документі.
Всередині дескрипторів можна додавати інші дескриптори. Дескриптор <html></html> є основним та містить в собі всі інші дескриптори. Тому на початку HTML-документа завжди стоїть початковий дескриптор <html>, а в кінці всього документу кінцевий – </html>.
Розглянемо використання дескрипторів на прикладі загальної структури HTML документа:
<html>
<head>
<title>Мій перший HTML-документ</title>
</head>
<body>
Вчимось розмічувати HTML-документ!
</body>
</html>
ЕЛЕМЕНТИ HTML-ДОКУМЕНТА
Елементи являють собою базові компоненти розмітки мови HTML. Кожен елемент має три складові: теги (початковий і кінцевий), атрибути та зміст (контент). Існують певні настанови щодо кожного дескриптора, атрибута та змісту елемента, які треба виконувати для того, щоб HTML-документ правильно відображався у веб-оглядачі.
Атрибути записуються в початковому дескрипторі одразу після його назви, зміст записується між початковим та кінцевим дескрипторами. Наприклад:
<ПОЧАТКОВИЙ ДЕСКРИПТОР АТРИБУТ="значення">зміст елементу</КІНЦЕВИЙ ДЕСКРИПТОР>
Більшість з атрибутів являє собою пару «назва-значення», розділених між собою знаком «рівно», та записаних у початковому тегу одразу після назви елемента. Значення атрибуту може бути вказано в лапках (подвійними або одиничними), також, якщо значення атрибуту складається з певних символів, його можна не виділяти лапками зліва. Проте, не виділення значення атрибутів в лапки вважається небезпечним кодом. На відміну від атрибутів виду «назва-значення», є певні атрибути, що впливають на елемент, якщо з’явилась тільки назва атрибуту (без значення) в початковому дескрипторі (наприклад, атрибут border дескриптора <table>).
Більшість елементів можуть мати будь-який з загальних атрибутів:
Атрибут id впроваджує унікальний ідентифікатор елементу по всьому документу. Доданий до URL документу, він впроваджує глобальний унікальний ідентифікатор елементу.
Це може використовуватися:
· таблицями стилів для впровадження презентаційних властивостей;
· браузерами для фокусування уваги на певному елементі;
· скриптами для виконання дій над елементом.
Елементи структурної розмітки застосовуються задля опису семантики тексту, іншими словами ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати Каскадні таблиці стилів (CSS).
Елементи візуальної розмітки застосовуються задля опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контенту. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці.
Елементи розмітки гіпертексту застосовуються задля з'єднання частин документу з іншими документами.
Базові типи даних
Оскільки HTML є похідною мовою від SGML, усі типи даних HTML ґрунтуються на базових типах даних SGML (наприклад, PCDATA, CDATA, NAME, ID, NUMBER).
Кожен елемент має дві властивості — атрибути і вміст, які мають певні значення. Всі можливі значення цих двох властивостей прописуються відповідно до визначених у DTD типів даних. Нижче наведено кілька типів даних HTML:
· Color — колір sRGB, записаний у шістнадцятковому вигляді, або одне з шістнадцяти службових слів;
· ContentType — тип умісту/носія;
· Charset — таблиця кодування символів;
· Character — мнемоніка або окремий символ із UCS;
· Length — nn розмір в пікселях, nn% — у відсотках;
· URI — Універсальний ідентифікатор ресурсу;
· Datetime — дата та час;
· Script — скрипт;
· StyleSheet — дані таблиць стилів;
· Text — текстові рядки.
Мнемоніки
Існують такі випадки, коли в документі потрібно використати якийсь символ, якого немає в обраній для документу кодовій таблиці. Для таких випадків можливо замінити символ на еквівалентне йому SGML-посилання на символ (мнемоніку).
Розрізняють мнемоніки двох видів:
· Цифрові мнемоніки (десяткові або 16-кові)
Визначають кодову позицію символу із таблиці кодів UCS.
· Мнемоніки із певних сполучень символів
Такі мнемоніки використовують псевдоніми замість кодів символів. Проте в HTML не визначені псевдоніми для кожного символа із UCS.
HTML 4.01 підтримує три різні набори мнемонік:
· Мнемоніки для символів ISO 8859-1 (Latin-1)
· Символи, математичні символи та грецькі літери
· Мнемоніки для символів розмітки та інтернаціоналізації
Валідація
Так само як і кожна мова, будь-яка комп'ютерна мова має свою власну граматику, словник і синтаксис. І кожен документ, написаний цією мовою, має дотримуватися цих правил. HTML використовує машинно-зчитуючу граматику, яка називається DTD, механізм, успадкований від SGML.
Проте, так само як і тексти природної мови можуть містити граматичні помилки, документи, що використовують мови розмітки можуть не дотримуватись визначеної граматики. Процес перевірки документа на дотримання визначених мовою правил називають валідацією, а інструмент, який здійснює перевірку — валідатором. Документ, що пройшов цей процес без помилок називають валідним.
Згідно з цією концепцією, «валідація HTML розмітки» визначається як процес перевірки веб-документа за правилами граматики (визначеними в DTD), на які він посилається із елементу doctype.
Один із важливих принципів програмування: «Будьте консервативні в тому, що ви робите; будьте ліберальним в тому, що ви приймаєте».[11]
Браузери дотримуються другої частини цього принципу: вони приймають веб-документи такими, які вони є, та намагаються відтворити їх на екрані, навіть якщо вони не використовують стандартний HTML. Зазвичай це означає, що браузер спробує «здогадатися» про те, що автор документу мав на увазі. Проблема полягає в тому, що різні браузери (або навіть різні версії одного браузера) зроблять різні припущення щодо одних і тих же не стандартних конструкцій, і навіть гірше: якщо HTML-код дуже відрізняється від стандарту, браузер безнадійно заплутається і безладно відтворить сторінку на екрані, або навіть аварійно закриється.
Саме тому, дотримуватися першої частини принципу належить авторам документа, шляхом перевірки своїх документів на дотримання стандарту. Найкращий інструмент для цього — валідатор HTML розмітки.
Завдання до уроку
№ 1. Відповідно до обраної вами теми підготуйте текстовий матеріал, об'ємом не менше трьох сторінок формату А4.
Перенесіть цю інформацію в HTML документ використавши наприклад, наступні теги для форматування:
Форматування тексту мовою HTML виконують з використанням спеціальних тегів:
<h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h6>…</h6> — відображення заголовків відповідно 1, 2, 3, 4, 5 і 6 рівнів — перелічено у порядку зменшення розміру шрифту.
<p>…</p> — створення нового абзацу без відступу у першому рядку, між абзацами буде порожній рядок;
<pre>…</pre> — відображення тексту у повній відповідності до форматування, здійсненого за допомогою текстового редактора (пропуски, невідтворювані символи кінця рядка);
<nobr>…</nobr> — заборона перенесення слів, яку можна подавити тегом <wbr>;
<center>…</center> — центрування;
<br> — обривання рядка без пропуску рядка;
<hr> — проведення горизонтальної лінії.
Теги форматування символів (дескриптори стилів) завжди є парними:
<b>…</b> — жирне написання;
<i>…</i> — курсив;
<u>…</u> — підкреслення;
<strike>…</strike> — перекреслення;
<tt>…</tt> — стала ширина літер;
<sub>…</sub> — нижній індекс;
<sup>…</sup> — верхній індекс;
<big>…</big> — збільшити шрифт;
<small>…</small> — зменшити шрифт;
<em>…</em> — логічний наголос
<cite>…</cite> — цитування
<code>…</code> — текст коду
<samp>…</samp> — результат виконання програми
<strong>…</strong> — виділення
<dfn>…</dfn> — текст означення (залежно від браузера);
<var>…</var> — назва змінної або параметра
<kbd>…</kbd> — назва клавіші
<xmp>…</xmp> —текст-зразок
У поданому вище переліку перші 7 контейнерів (до порожнього рядка) називають фізичними, а наступні — логічними.
Повний перелік тегів можна знайти в низу сторінки в матеріалах до курсу
Матеріали до курсу
Перелік тегів можна подивитися за наступними посиланнями: