|
|
| (49 проміжних версій 12 користувачів не показані) |
| Рядок 2: |
Рядок 2: |
| | | | |
| | Документ HTML 4.01 складається з трьох частин: | | Документ HTML 4.01 складається з трьох частин: |
| | + | |
| | 1.Декларація типу документа (англ. Document type declaration, Doctype), на самому початку документа, в якій визначається тип документа (DTD). | | 1.Декларація типу документа (англ. Document type declaration, Doctype), на самому початку документа, в якій визначається тип документа (DTD). |
| | + | |
| | 2.Шапка документа (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері; | | 2.Шапка документа (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері; |
| | + | |
| | 3.Тіло документа (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа. | | 3.Тіло документа (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа. |
| | | | |
| | Нижче наведено приклад загальної структури HTML документа: | | Нижче наведено приклад загальної структури HTML документа: |
| | | | |
| − | <!doctype HTML public "-//W3C//DTD HTML 4.01//EN" | + | <!doctype HTML public "-//W3C//DTD HTML 4.01//EN" |
| − | "http://www.w3.org/TR/html4/strict.dtd">
| + | |
| − | <html> | + | <html> |
| | <head> | | <head> |
| | <title>Мій перший HTML-документ</title> | | <title>Мій перший HTML-документ</title> |
| Рядок 17: |
Рядок 20: |
| | Hello world! | | Hello world! |
| | </body> | | </body> |
| − | </html> | + | </html> |
| − | | + | |
| − | Елементи HTML
| + | |
| − | | + | |
| − | Елементи являють собою базові компоненти розмітки HTML. Кожен елемент має дві основні властивості: атрибути та зміст (контент). Існують певні настанови щодо кожного атрибута та контента елемента, які треба виконувати задля того, щоб HTML-документ був визнаний валідним.
| + | |
| − | | + | |
| − | У елемента є початковий тег, який має вигляд <element-name>, та кінцевий тег, який має вигляд </element-name>. Атрибути елемента записуються в початковому тегу одразу після назви елемента, контент елемента записується між його двома тегами. Наприклад: <element-name element-attribute="attribute-value">контент елемента</element-name>.
| + | |
| − | | + | |
| − | Деякі елементи, наприклад br, не містять контенту, тож і не мають кінцевого тега. Елемент може не мати початкового та кінцевого тега (наприклад, елемент head), проте він завжди буде представлений в документі.
| + | |
| − | | + | |
| − | Нижче зазначені деякі типи елементів розмітки HTML.
| + | |
| − | | + | |
| − | Елементи структурної розмітки застосовуються задля опису семантики тексту, іншими словами ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати Каскадні таблиці стилів (CSS).
| + | |
| − | | + | |
| − | Наприклад:
| + | |
| − | Фрагмент HTML-розмітки документа
| + | |
| − | Відтворення в браузері
| + | |
| − | | + | |
| − | <h1>Давньогрецькі боги</h1>
| + | |
| − | <p>
| + | |
| − | <strong>Посейдон</strong> — володар світових вод,
| + | |
| − | Океану, в латинян йому відповідав <em>Нептун</em>, у
| + | |
| − | слов'ян — <em>Цар Моря, Цар Морський, Водяник</em>.
| + | |
| − | </p>
| + | |
| − | | + | |
| − | Елементи візуальної розмітки застосовуються задля опису візуальних ефектів тексту, не зазначаючи при цьому функції тексту свого контенту. Остання чинна специфікація HTML 4.01 визначає більшість з цих елементів такими, що не рекомендується застосовувати у розмітці.
| + | |
| − | | + | |
| − | Наприклад:
| + | |
| − | Фрагмент HTML-розмітки документа
| + | |
| − | Відтворення в браузері
| + | |
| − | | + | |
| − | <font size="5">Давньогрецькі боги</font>
| + | |
| − | <br />
| + | |
| − | <b>Посейдон</b> — володар світових вод, Океану,
| + | |
| − | в латинян йому відповідав <i>Нептун</i>, у слов'ян —
| + | |
| − | <i>Цар Моря, Цар Морський, Водяник</i>.
| + | |
| − | | + | |
| − | | + | |
| − | Більшість з атрибутів елементу являє собою пару «назва-значення», розділених між собою знаком рівняння, та записаних у початковому тегу одразу після назви елемента. Значення атрибуту може бути окреслено лапками (подвійними або одиничними), також, якщо значення атрибуту складається з певних символів, його можна не виділяти лапками зліва. Проте, не виділення значення атрибутів в лапки вважається небезпечним кодом. На відміну від атрибутів виду «назва-значення», є певні атрибути, що впливають на елемент, назва яких лише з'явилась в початковому тегу (наприклад, атрибут ismap елементу img).
| + | |
| − | | + | |
| − | Більшість елементів можуть мати будь-який з загальних атрибутів:
| + | |
| − | | + | |
| − | Атрибут id впроваджує унікальний ідентифікатор елементу по всьому документу. Доданий до URL документу, він впроваджує глобальний унікальний ідентифікатор елементу.
| + | |
| − | Це може використовуватися:
| + | |
| − | 1.таблицями стилів для впровадження презентаційних властивостей;
| + | |
| − | 2.браузерами для фокусування уваги на певному елементі;
| + | |
| − | 3.скриптами для виконання дій над елементом.
| + | |
| − | | + | |
| − | Атрибут title використовується для додавання пояснювального тексту для елементу. В більшості браузерів значення цього атрибуту можна побачити як виникаючу підказку, при наведені курсора на елемент.
| + | |
| − | | + | |
| − | Атрибут class впроваджує засіб об'єднання схожих елементів у класи.
| + | |
| − | | + | |
| − | Це може використовуватися для:
| + | |
| − | 1.відтворення візуальних ефектів. Для презентаційної розмітки, наприклад, документ може містити class="notation", який визначає всі елементи, у яких клас визначений як "notation", підпорядкованими головному тексту документу. Такі елементи можна зібрати докупи і показати як виноски внизу сторінки, замість того, щоб показувати їх на тому місці, де вони з'являються в самому HTML коді документу;
| + | |
| − | 2.структурного поділу тексту. Для семантичної розмітки, наприклад, класи використовуються у створенні мікроформатів.
| + | |
| − | | + | |
| − | Типи даних HTML
| + | |
| − | | + | |
| − | Оскільки HTML є похідною мовою від SGML, усі типи даних HTML будуються на основі базових типів даних SGML (наприклад, PCDATA, CDATA, NAME, ID, NUMBER).
| + | |
| − | | + | |
| − | У кожного елемента є дві властивості — атрибути і контент, які мають певні значення. Усі можливі значення цих двох властивостей прописуються відповідно до визначених у DTD типів даних. Нижче наведено кілька типів даних HTML:
| + | |
| − | % Color — колір sRGB записаний у шістнадцятирічному вигляді, або одне з 16-ти службових слів;
| + | |
| − | % ContentType — тип змісту/носія;
| + | |
| − | % Charset — таблиця кодування символів;
| + | |
| − | % Character — мнемоніка або окремий символ із UCS;
| + | |
| − | % Length — nn розмір в пікселях, nn% — у відсотках;
| + | |
| − | % URI — Універсальний ідентифікатор ресурсу;
| + | |
| − | % Datetime — дата та час;
| + | |
| − | % Script — скрипт;
| + | |
| − | % StyleSheet — дані таблиць стилів;
| + | |
| − | % Text — текстові строки.
| + | |
| − | | + | |
| − | Список мнемонік HTML
| + | |
| − | | + | |
| − | Існують такі випадки, коли в документі потрібно використати якийсь символ, якого немає в обраній для документу кодовій таблиці. Для таких випадків можливо замінити символ на еквівалентне йому SGML-посилання на символ (мнемоніку).
| + | |
| − | | + | |
| − | Розрізняють мнемоніки двох видів:
| + | |
| − | Цифрові мнемоніки (десяткові або 16-кові)
| + | |
| − | | + | |
| − | Визначають кодову позицію символу із таблиці кодів UCS.
| + | |
| − | | + | |
| − | Наприклад:
| + | |
| − | Мнемоніка
| + | |
| − | Символ
| + | |
| − | | + | |
| − | å å
| + | |
| − | å å
| + | |
| − | å å
| + | |
| − | æ æ
| + | |
| − | | + | |
| − | Мнемоніки із певних сполучень символів
| + | |
| − | | + | |
| − | Такі мнемоніки використовують псевдоніми замість кодів символів. Проте в HTML не визначені псевдоніми для кожного символа із UCS.
| + | |
| − | | + | |
| − | Наприклад:
| + | |
| − | Мнемоніка
| + | |
| − | Символ
| + | |
| − | | + | |
| − | < <
| + | |
| − | & &
| + | |
| − | " "
| + | |
| − | | + | |
| − | HTML 4.01 підтримує три різні набори мнемонік:
| + | |
| − | Мнемоніки для символів ISO 8859-1 (Latin-1)
| + | |
| − | Символи, математичні символи та грецькі літери
| + | |
| − | Мнемоніки для символів розмітки та інтернаціоналізації
| + | |
Розмітка в HTML складається з чотирьох основних компонентів: елементів (та їхніх атрибутів), базових типів даних, символьних мнемонік та декларації типу документа.
1.Декларація типу документа (англ. Document type declaration, Doctype), на самому початку документа, в якій визначається тип документа (DTD).
2.Шапка документа (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері;
3.Тіло документа (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа.
