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

Загальна правильна структура HTML документа

Насамперед, без довгих передмов – загальна структура будь-якого HTML документа має бути такою:

/*Вказує тип поточного документа DTD*/ /*Показує початок документа*/ /*Показує початок заголовка (шапки)*/ Test/*Показує заголовок*/ /*Показує початок заголовка*/ /*Показує початок основної частини документа (тіло) */ /*Змістовна частина документа*/ /*Показує кінець основної частини документа*/ /*Показує кінець документа*/

Якщо усунути пояснення, які я показував після кожного тега, то проста структура HTML документа виглядає так

Test

Тип поточного документа DTD

Тип поточного документа ( Document Type Definition, DTD) необхідний, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже мова HTML існує у кількох версіях.

Крім цього, є інші мови розмітки відмінні від HTML, наприклад XHTML.

Примітка: XHTML це Extensible HyperText Markup Language, що перекладаємо як розширену мову розмітки гіпертексту.

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

Поняття тега в HTML

Ви звернули увагу, що вся структура HTML документа задається певними тегами – деякими словами, укладеними у кутові дужки.

Слово, укладене у кутові дужки HTML документа, називається тегом. Кожен тег має власний сенс, визначений правилами розмітки.

• Тег означає заголовок html документа. У тегах head зберігається інформація для браузерів та пошукових систем. У тому числі у вигляді мета-тегів;
• Тег означає основний зміст HTML документа. Саме текст, зображення, скрипти Java Script тощо;
• Тег [p] це блоковий елемент, який завжди починається з нового рядка. Він означає абзац основного змісту HTML документа.

Важливо! Усі теги html розмітки мають бути парними. Тобто, що відкриває тег, повинен бути закритий тегом, що закриває, з косою рисою.

Теги заголовків та підзаголовків h1-h6

Для покращення структурування тексту документа, а також покращення SEO веб-сторінок існують додаткові теги основного змісту. Вони називаються теги заголовків та підзаголовків від h1 до h6, всього 6 штук.

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

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

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

Приклад розвиненої структури HTML документа

Наведу академічний приклад більш розвиненої структури HTML документа:

Test Основний заголовок Основний заголовок Перший підзаголовок Основний заголовок Другий підзаголовок Перший другорядний підзаголовок

Структура HTML 5

У версії HTML 5 має бути така структура документа:

Це декларація, яка показує, що цей документ в HTML5 ;

це кореневий елемент HTML сторінки;

Елемент, з мета-тегами про документ;

Цей елемент визначає заголовок документа;

Цей елемент містить видимий вміст сторінки;

Елемент визначає великий заголовок

Елемент визначає абзац.

Працюють у html5 теги h2 - h6

Усі теги подвійні. Початковий тег називається тегом, що відкриває, а кінцевий тег - що закриває тегом.

HTML розмітка на сайті WordPress

Незважаючи на те, що скрипт WordPress написаний на PHP, всі файли сайту, а вірніше всі файли робочого шаблону сайту, мають html розмітку. Дивимося приклад, на файлі header.php шаблону Twenty Seventeen:

Ви можете бачити, якщо всі функції WordPress розміщені в класичній HTML розмітці. Є тип документа:

Парні теги

Відкриваючий тег.

Закриваючий тег можна знайти у файлі footer.php.

Як подивитися HTML код сторінки сайту WordPress

Те, що ви пишете в редакторі сайту, створюючи статті або сторінки, це лише частина HTML сторінки сайту. Це навіть не все тіло сторінки.

Щоб переглянути HTML код сторінки сайту WordPress, а це потрібно дуже часто, потрібно:

відкрити сторінку в браузері;

Перейти до англійської шрифт клавіатури;

Натиснути на такі кнопки:

• Chrome: Ctrl+U
• Opera: Ctrl+U
• Mozilla: Ctrl+U

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

Висновок

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

Кожен HTML-документ має починатися тегом< HTML >і закінчуватися тегом. Ці теги позначають, що рядки, що знаходяться між ними, представляють єдиний HTML-документ. Крім того, можна помітити, що файл HTML загалом є елементом мови HTML.

Також у HTML-документі повинні бути присутні елементи HEAD (інформація про документ) та BODY (тіло документа).

Розділ документа HEAD

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

Розділ заголовка починається тегом< HEAD >і слід відразу за тегом. Між елементами HEAD, що відкривають і закривають тегами, розташовуються інші елементи заголовка.

Назва документа title

Для того, щоб дати назву HTML-документу, призначений тег< TITLE >. Ця назва буде виведена у заголовок вікна броузера. Назва записується між тегами і являє собою рядок тексту. Довжина цього рядка може бути будь-якою, але рекомендується робити її не більше 60 символів. Елемент TITLE повинен бути лише у розділі HEAD.

Розділ документа BODY

У цьому розділі документа міститься та інформація, яка відображається у вікні броузера. Розділ BODY має починатися тегом< BODY >і завершуватися тегом , між якими розташовуються елементи HTML, у тому числі складається зміст документа.

Специфікація елемента BODY

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

TEXT="колір тексту"

BGCOLOR="колір фону"

BACKGROUND="адреса фонового малюнка"

Атрибут TEXT задає колір шрифту для всього документа у форматі RGB або символьної нотації. За замовчуванням (якщо цей атрибут не вказано) використовуються налаштування броузера.

Атрибут BGCOLOR задає колір фону вікна броузера документа у форматі RGB або символьної нотації. За промовчанням використовуються налаштування броузера.

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

Атрибути LINK, VLINK та ALINK задають кольори гіперпосилань у форматі RGB або символьної нотації. За промовчанням використовуються налаштування броузера. Невідвідане гіперпосилання – гіперпосилання, яке ще не використовувалося для переходу до іншого документа. Відвідане гіперпосилання – гіперпосилання, яке вже використовувалося для переходу до іншого документа. Активне гіперпосилання – гіперпосилання на документ, до якого зараз відбувається перехід.

Поради щодо використання атрибутів тега BODY

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

 Вибирайте колір тексту так, щоб він "працював" разом із кольором фону або основними кольорами зображення. Наприклад, червоне на зеленому може викликати серйозні проблеми у значної кількості людей.

 В елементі BODY можна встановити як BGCOLOR, так і BACKGROUND. У цьому випадку броузер надає перевагу BACKGROUND, але якщо зображення фону неможливо завантажити, буде використано BGCOLOR. Тому намагайтеся задавати колір тла схожим на колір тла, щоб не порушився колірний баланс документа.

HTML – це мова тегів.

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

А тегом горизонтальної лінії – .

Існує два типи тегів: контейнери та одиночні теги.

Контейнер.Це дескрипторна пара, що складається з початкового (або відкриває) і кінцевого (або закриває) тегів. Початковий тег має вигляд , де TAG це ім'я реального HTML - тега. Кінцевий тег має вигляд. Контейнери призначені для зберігання певної інформації, наприклад тексту або інших HTML-тегів. Тому між початковим та кінцевим тегами укладено вміст контейнера. Наприклад, елемент, що є відформатованим текстом, полягає між тегами І .

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

Елемент HTML - документа- це початковий та кінцевий теги контейнера разом із ув'язненим між ними вмістом. Елемент може бути зображення, фрагмент тексту, форма, таблиця, список, посилання, текстове поле, кнопка і навіть заголовок документа або його основна частина (тіло).

Зауваження: Мова HTML не чутлива до регістру. Теги можуть набиратися як великими, і малими літерами, тобто. команда еквівалентна команді чи . Не всі теги підтримуються браузерами. Якщо браузер не підтримує тег, його просто ігнорує.

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

Заголовок документа не є обов'язковим елементом, проте добре складений заголовок може бути корисним. Завданням заголовка документа є надання інформації для програми, що інтерпретує документ. Елементи, що знаходяться всередині розділу HEAD (крім назви документа, що записується в розділі TITLE ), не видно на екрані. Елементи, що містяться всередині розділу HEAD документа, потрібні для того, щоб:

Дати документу назву

Визначити відносини між кількома документами

Дати вказівку браузеру створити форму для пошуку

Визначити метод надсилання спеціальних повідомлень певному браузеру або іншій програмі перегляду

Розділ HEAD відкривається тегом. Зазвичай цей тег слід відразу за тегом. Закриваючий тег показує кінець цього розділу. Між згаданими тегами розміщуються інші теги розділу заголовка документа.

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

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

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

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

Перш ніж розпочати наповнення документа змістом, є сенс виготовити його “каркас”. HTML – документ повинен містити деякі обов'язкові елементи, без яких він не буде правильно інтерпретований. Приклад найпростішого шаблону наведено у лістингу.

This is an example document


Enter body text here

Шаблон відкривається тегом

, який, як ми знаємо, необхідний кожного HTML - документа. Наступним йде тег, що починає заголовок документа. Заголовок містить елемент TITLE , який вводить назву документа, у разі “This is an example document”. Заголовок закривається тегом. Далі йде тег, після якого міститься текст (тіло) документа. Тег означає кінець тіла, а тег – кінець всього документа. BODY може містити велику кількість атрибутів. Усі вони важливі, оскільки визначають загальний вигляд документа. Ці атрибути наведені у таблиці.

	Призначення
ALINK	визначає колір посилання, активного в даний момент
BACKGROUND	вказує на URL - адресу зображення, яке використовується як фонове
BGCOLOR	визначає колір тла документа
BGPROPERTIES	якщо встановлено значення FIXED , фонове зображення не прокручується
LEFTMARGIN	Встановлює межу лівого поля у пікселах
LINK	Визначає колір ще не переглянутого посилання
TEXT	Визначає колір тексту
TOPMARGIN	Встановлює межу верхнього поля у пікселах
VLINK	Визначає колір вже переглянутого посилання

Розглянемо ці атрибути докладніше.

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

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

HTML кольори визначаються цифрами у шістнадцятковому коді. Колірна система базується на трьох основних кольорах - червоному, синьому та зеленому. Для кожного кольору задається шістнадцяткове значення в межах від 00 до FF, що відповідає діапазону 0-255 у десятковому обчисленні. Потім ці значення поєднуються в одне число, перед яким ставиться символ #. Для простоти в HTML 3.2 визначено 16 стандартних кольорів, які разом з їх шістнадцятковими кодами наведені в таблиці нижче.

Колір	Код
Black (чорний)	#000000
Магооп (темно-бордовий)	#800000
Green (зелений)	#008000
Olive (оливковий)	#808000
Navy (темно-синій)	#000080
Purple (фіолетовий)	#800080
Teal (чирок)	#008080
Gray (сірий)	#808080
Silver (срібний)	#С0С0С0
Red (червоний)	#FF0000
Lime (вапно)	#00FF00
Yellow (жовтий)	#FFFF00
Blue (синій)	#0000FF
Fuchsia (фуксія)	#FF00FF
Aqua (аква)	#00FFFF
White (білий)	#FFFFFF

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

Атрибут VLINK використовується для показу вже переглянутих посилань. Як правило, їх фарбують темнішим відтінком того ж кольору, що і не

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

Одним із популярних способів прикрасити HTML - сторінку є розміщення на ній фонової графіки, видимої під основним текстом (атрибут

BACKGROUND). Такий прийом допомагає підкреслити цілісність документа. навпаки, поділити його на логічні частини.

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

Атрибути

LEFTMARGIN та TOPMARGIN служать для встановлення відстані між лівим та верхнім краями тексту та відповідними краями вікна браузера. Розташування інших країв тексту не регулюється. Це зроблено для того, щоб забезпечити можливість перегляду сторінки будь-яким браузером. Неможливо заздалегідь знати розмір вікна у програми читача документа. LEFTMARGIN встановлює відстань між лівим краєм вікна браузера, що вимірюється у пікселах. Найчастіше цей атрибут застосовується, коли автор хоче мати ліворуч поле, вільне від тексту, яке відрізняється візерунком або кольором від решти фонового зображення. TOPMARGIN служить для встановлення відстані між верхнім краєм тексту та верхнім краєм вікна браузера. Він зазвичай використовується, якщо верхня частина фонового зображення має велике значення і бажано залишити відкритим. HTML - документи можна включати коментарі, які не буде видно читачеві. Вони повинні починатися тегом. Все, що міститься всередині цих тегів, при перегляді сторінки залишається невидимим. ADDRESS одна із найважливіших елементів HTML. Він служить для ідентифікації автора документа та (за бажанням) для вказівки адреси автора. Сюди ж зазвичай містяться відомості про авторські права. Цей елемент знаходиться або на початку, або в самому кінці документа. ADDRESS складається з тексту, розміщеного між тегами і . Текст, укладений між цими тегами, зазвичай показується у вікні браузера курсивом.

Структура HTML-документа. Розпочинаємо роботу.

З чого починається HTML

Щоб текстовий файл перетворився на HTML-файл, поміняти його розширення з ".txt" на ".html" недостатньо. Треба дотриматися "правило першого рядка":

Кожен HTML-документ, що відповідає специфікації HTML будь-якої версії, повинен починатися з рядка декларації версії HTML !DOCTYPE , який зазвичай має такий вигляд:

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

Приклад найкоротшого HTML-документа:

З чого починається робота

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

Потім між тегами слід розмістити заголовок і тіло документа. От і все! Початок покладено – ви отримали чудову заготівлю. Ось як має виглядати ваш базовий HTML-файл перед початком роботи:

Розжувати?

Якщо наведений вище приклад пояснити схематично, вийде таке:

Зі схеми видно, що документ складається з двох основних блоків - "заголовка" та "тіла документа". Заголовок визначається за допомогою елемента HEAD, а тіло – елементом BODY.

Заголовок містить "технічну" інформацію про документ, хоча найчастіше використовується лише для позначення його назви (див. елемент TITLE).

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

(HTML 1.0) – Comment ()

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

Примітки:

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

Заголовок html-документа

Створюється за допомогою елемента HEADміж тегами якого розміщуються елементи, що містять технічну інформацію про документ. Заголовок зазвичай знаходиться до тіла документа (див. структуру HTML-документа).

Елементи, які стосуються заголовка документа:

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

(HTML 1.0) – Head

Визначає початок та кінець заголовка документа. Контейнер для елементів, що містять технічну інформацію про документ. ( TITLE,BASE,STYLE,LINK,META).

(HTML 2.0) – Title

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

(HTML 3.2) – Base URL

Вказує базову адресу поточного документа (URL), яка стане відправною точкою для розрахунку відносних адрес усередині документа. Елемент немає кінцевого тега. Обов'язково є присутність хоча б одного з атрибутів.

Атрибути:

HREF – визначає базову адресу (URL) поточного документа.

TARGET – визначає ім'я кадру, яке використовуватиметься у гіперпосиланнях за умовчанням. Це може стати вам у нагоді, якщо ви хочете відкривати всі посилання документа в іншому кадрі.

(HTML 3.2) – Style

Використовується для вставки таблиці стилів (CSS – Cascade Style Sheet).

Атрибути:

TYPE – обов'язковий атрибут. Визначає MIME-тип блоку стилів, що вставляється. Як правило, значенням цього атрибуту є "text/css".

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

(HTML 2.0) – Link

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

Атрибути:

HREF – визначає URL об'єкта.

REL визначає тип взаємозв'язку поточного документа з об'єктом, визначеним атрибутом HREF. Можливі значення:

stylesheet – вказує на файл, що містить таблицю стилів (CSS) для поточного документа. Браузер завантажить css-файл із вказаної в атрибуті HREF адреси та застосує його до поточного документа (див. також елемент STYLE) home – вказує на головну сторінку вашого сайту toc, contents – вказують на файл, що містить зміст цього документа. index – вказує на файл, що містить інформацію для індексного пошуку за поточним документом. glossary – вказує на файл, що містить перелік термінів, що належать до поточного документа. copyright – вказує на сторінку сайту, в якій йдеться про його творців, авторські права тощо. up, parent – ​​вказує на батьківську сторінку (документ, що стоїть на сходинку вище в ієрархічній структурі вашого сайту). child – вказує на "дочірню" сторінку (документ, що стоїть на сходинку нижче в ієрархічній структурі вашого сайту). next – вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації чи словника). previous – вказує на попередню сторінку у послідовності документів. last, end – вказує на останню сторінку у послідовності документів. first – вказує першу сторінку в послідовності документів. help – вказує на сторінку з підказкою (напр. по навігації на вашому сайті).

TYPE – визначає MIME-тип для об'єкта, вказаного в атрибуті HREF.

Примітки:

(HTML 2.0) – Meta

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

Атрибути:

NAME – визначає ім'я мета-запису. Існує безліч зумовлених імен, деякі з яких ви можете побачити у наведеному нижче прикладі.

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

CONTENT – надає значення мета-запису, визначеного в атрибуті NAME (або HTTP-EQUIV).

Фрейми (frames) використовуються для розбивки вікна браузера на кілька областей, кожна з яких є окремим HTML-документом (фрейм). Як правило, фрейми використовуються для полегшення навігації сайтом, створення навігаційного меню. Тим не менш, більшість розробників уникають використання фреймів, до чого, повірте, мають досить вагомі підстави. Намагайтеся використовувати кадри лише тоді, коли це дійсно потрібно.

Елементи для створення кадрів та роботи з ними:

Примітки:

FRAMESET

(HTML 4.0) – Frame Set

Визначає кадрову (віконну) структуру документа: розміри та розташування кадрів на сторінці. Створюється замістьтіла документа (тобто елемент BODYу документі не використовується). Відкриває та закриває список кадрів, які визначаються за допомогою елемента FRAME. Між початковим та кінцевим тегами крім елементів FRAME та NOFRAMESможуть бути інші елементи FRAMESET . Тобто елемент FRAMESET підтримує вкладені конструкції кадрів.

Атрибути:

ROWS – визначає кількість та розміри горизонтальних кадрів (фреймів-рядків) у вікні браузера. Як значення задається список розмірів кадрів через кому. Способи завдання розмірів:

У відсотках від висоти робочої області вікна браузера. Наприклад: "30%, 30%, 40%"; у вигляді знака "*" (зірочка), що говорить про те, що кадр займає весь вільний простір вікна браузера, незайняте іншими кадрами з явно вказаними розмірами. Наприклад, зірочка в записі "25%, 25%, *" рівносильна 50%; у пікселах. Наприклад: "75, *";

Усі три способи можна поєднувати. Наприклад, "25%,40,*" розіб'є екран на три горизонтальні кадри, перший з яких буде висотою в чверть вікна браузера, другий - в 40 пікселів, а третій займе всю площу, що залишилася.

COLS – визначає кількість та розміри вертикальних фреймів (фреймів-стовпців) у вікні браузера. Як значення задається список розмірів кадрів через кому. Розміри задаються так само, як у попередньому атрибуті ROWS.

BORDER – визначає ширину рамок кадрів у пікселах. Цей атрибут діє лише у браузерах Netscape;

FRAMEBORDER – визначає наявність рамок у кадрів, що містяться всередині FRAMESET. Можливі значення:

Yes – відображати рамки; No або 0 – не відображати рамки;

Браузери Netscape не підтримують цей атрибут повною мірою і для глобального визначення ширини рамок використовують атрибут BORDER.

FRAMESPACING – визначає відстань (так звану "сіру область") між кадрами у пікселах. Цей атрибут необхідний для створення кадрів без рамок.

Примітка:

(HTML 4.0) – Frame Визначає кадр і його властивості всередині структури FRAMESET. (Див. елемент FRAMESET) Атрибути:

SRC – обов'язковий атрибут. Вказує адресу (URL) HTML-файлу, що відображається у цьому кадрі.

NAME – визначає ім'я даного кадру, яке надалі використовуватиметься для посилання на нього з інших документів за допомогою атрибуту TARGET (див. елемент A). Як значення потрібно вказати будь-яке ім'я без пробілів із використанням латинських символів та цифр. Ім'я не повинно починатися з цифр та спеціальних символів.

MARGINWIDTH – визначає ширину (у пікселах) лівого та правого полів кадру. Якщо атрибут не вказано, браузер самостійно визначить оптимальний розмір відступу.

MARGINHEIGHT – визначає ширину (у пікселах) верхнього та нижнього полів кадру. Якщо атрибут не вказано, браузер самостійно визначить оптимальний розмір відступу.

SCROLLING – визначає наявність лінійок прокручування вмісту кадру. Можливі значення:

yes – відображати лінійки прокручування. no – не відображати лінійки прокручування. auto – відображати лінійки прокручування за потреби (якщо документ, вказаний в атрибуті SRC, не вміщується у кадрі).

NORESIZE – не дозволяє змінювати розмір кадру. Цей атрибут є прапором і не вимагає вказівки.

FRAMEBORDER – визначає наявність рамок у кадру. Можливі значення:

yes – відображати рамки; no або 0 – не відображати рамки;

Браузери Netscape не підтримують цей атрибут повною мірою і для глобального визначення ширини рамок використовують атрибут BORDER елемента FRAMESET.

Приклад (файл index.html):
	... Ваш браузер не підтримує фрейми ...

В результаті вікно браузера розділиться на три кадри, як показано нижче. Причому frame1.html матиме ширину 265 пікселів, а frame2.html – висоту 165 пікселів.

NOFRAMES

(HTML 4.0) - No Frames

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

Приклад:
	Ваш браузер не підтримує фрейми. Звичайно, так?

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

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

Вивчаючи основи мови HTML, ми звертатимемося до CSS стилям. Отже, ми вивчатимемо і CSS. Але це трохи згодом. Також ми будемо звертатися за допомогою до JavaScript.

Сьогоднішній вступний урок ми почнемо з вивчення структури HTML документа та основних тегів HTML.

Поїхали…

Кожен HTML документ починається з рядка:

XHTML

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

Тег дуже різноманітний, і від його модифікації залежить те, як відображатиметься вміст на Вашій сторінці.

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

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

А поки що рухаємося нижче по сторінці.

До речі, чому я почав розглядати HTML документ з верхньої частини сторінки?

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

Напевно, не зовсім зрозуміле слово тег?

Взагалі, тег – це інструкція, яка говорить браузеру, що в цьому місці документа потрібно зробити.

За допомогою тегів ми створюємо наші сторінки. Всі теги укладені в так звані куточки ( ). І закриває (з косою межею). Наприклад, жирний текст. Вказує, що текст між тегом strong, що відкриває і закриває, буде виділений жирним.

Що таке тег, сподіваюся, зрозуміло.

Пропоную набрати щось своїми руками.

Отже, почнемо.

Запустити блокнот або wordpad в OC WINOWS. Наберемо такі рядки:

XHTML

Заголовок вікна браузера

Заголовок вікна браузера

Збережемо файл під якимось ім'ям, наприклад start.html. Тепер розберемося, що написали.

Між тегами розташовується інформація, що не відображається на сторінці.

Наприклад, тег , до речі, він закриває тега не вимагає, може вказувати кодування (charset=windows-1251) або відомості про автора (name="author" content="П.І.Б.") , або слова для пошукової машини, тег змусить браузер автоматично за 30 секунд перейти на сайт mysite.ru (приклад).

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

Також у тезі можуть розташовуватись скрипти javascript або vbscript, укладені в теги. .

І стилі, укладені у теги…. .

На цьому з тегом, мабуть, ми закінчимо.

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

bgcolor — встановлює колір тла документа. ( )

background - вказує на URL-адресу зображення - фону документа.

text — Встановлює колір тексту документа.

link - встановлює колір гіперпосилань.

vlink= — встановлює колір гіперпосилань, на яких ви вже побували, використовуючи значення.

alink= - встановлює колір гіперпосилань при натисканні.

bgproperties=fixed — фонове зображення не прокручуватиметься. Тобто. текст буде рухатись при натисканні PageDown, а фон – ні.
Цей параметр підтримується лише Internet Explorer.

Ці параметри можна об'єднувати, наприклад, на цій сторінці використовується:

XHTML

Давайте та наберемо цей рядок у нашому попередньому прикладі.

XHTML