Елемент
(Від англ. body- Тіло) призначений для зберігання вмісту веб-сторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в документі, слід розміщувати саме всередині контейнера . До такої інформації відноситься текст, зображення, теги, скрипти JavaScript і т.д.також застосовується для визначення кольорів посилань та тексту на веб-сторінці. Подібна практика в HTML засуджується і замість вказівки колірної схеми рекомендується використовувати стилі, застосовуючи їх до селектора body .Часто
використовується для розміщення обробника подій, наприклад onload , яке виконується після того, як документ завершив завантаження в поточне вікно або кадр.Відкриваючий та закриваючий теги
на веб-сторінці не є обов'язковими, проте хорошим стилем вважається їх використання, щоб визначити початок та кінець HTML-документа.Синтаксис
...Закриваючий тег
Чи не обов'язковий.
Атрибути
приклад
Ще Аристотель у своїй «Політиці» говорив, що музика, впливаючи на людину, доставляє «свого роду очищення, тобто полегшення, пов'язане з насолодою».
Результат поточного прикладу показано на рис. 1. При використанні події onload елемента
виконується скрипт, написаний мовою JavaScript, у разі він виводить повідомлення, що документ завантажено.Мал. 1. Спливне вікно у документі
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
- Candidate Recommendation ( Можлива рекомендація) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
- Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
- Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
- Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
- Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
Окремо стоїть живий стандарт HTML (Living) - він не дотримується традиційної нумерації версій, оскільки перебуває у постійній розробці та оновлюється регулярно.
Тег (парний) призначений для зберігання вмісту веб-сторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити у документі, слід розташовувати саме усередині контейнера BODY. До такої інформації належать текст, зображення, теги, скрипти JavaScript тощо.
Тег також застосовується для визначення кольорів посилань та тексту на веб-сторінці. Подібна практика в HTML 4 засуджується і замість вказівки колірної схеми рекомендується використовувати стилі, застосовуючи їх до селектора . Проте більшість параметрів досі підтримуються різними браузерами.
Часто тег використовується для розміщення обробника подій, наприклад, onLoad, яке виконується після того, як документ завершив завантаження у поточне вікно або кадр.
Відкриваючий та закриваючий теги BODY на веб-сторінці не є обов'язковими, проте хорошим стилем вважається їх використання, щоб визначити початок та кінець HTML-документу.
Синтаксис
...
Закриваючий тег
Обов'язковий.
Параметри
alink – встановлює колір активного посилання.
background - задає фоновий рисунок на веб-сторінці.
bgcolor - колір веб-сторінки фону.
bgproperties - визначає, прокручувати фон разом із текстом чи ні.
bottommargin – відступ від нижнього краю вікна браузера до контенту.
leftmargin - відступ горизонталі від краю вікна браузера до контенту.
link – колір посилань.
scroll - встановлює, відображати смуги прокручування чи ні.
text – колір тексту в документі.
topmargin – відступ від верхнього краю вікна браузера до контенту.
vlink – колір відвіданих посилань.
Приклад 1. Використання тега BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
У wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Опис параметрів тега BODY
Параметр ALINK
Опис
Встановлює колір активного посилання. Поточний колір посилання змінюється на активний, коли посилання натискають курсором миші або виділяють її за допомогою клавіатури.
Синтаксис
Аргументи
Значення кольору можна встановити двома способами.
1. За його назвою
Браузери підтримують деякі кольори за їхньою назвою.
2. За шістнадцятковим значенням
Для завдання кольорів використовуються числа у шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Цифри від 10 до 15 замінені латинськими літерами. Числа більше 15 у шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ ґрат #, наприклад #666999. Кожен із трьох кольорів – червоний, зелений та синій – може приймати значення від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середні - зелену, а два останні - синю.
Значення за замовчуванням
Збігається із кольором посилання.
...
Параметр BACKGROUND
Опис
Визначає зображення, яке використовуватиметься як фоновий малюнок. На відміну від звичайних зображень, для фону не встановлюються ширина та висота, і він завжди відображається у натуральну величину з масштабом 100%. Якщо малюнок за розміром менший за вікно браузера, то картинка повторюється по горизонталі вправо і вниз, шикуючись, як мозаїка. Тому на місці стику фонових картинок можуть виникнути видимі перепади, помітні для відвідувачів сайту. Під час вибору фонового малюнка переконайтеся, що забезпечений достатній контраст між ним та текстом веб-сторінки. Як фон дозволяється використовувати анімовані зображення у форматі GIF, але вони відволікають увагу читачів.
Синтаксис
Аргументи
Будь-яка допустима адреса зображення - можна використовувати відносний або абсолютний шлях.
Значення за замовчуванням
Ні.
Приклад 3. Встановлення фонового малюнка на веб-сторінці
...
Параметр BGCOLOR
Опис
Встановлює колір веб-сторінки фону. Можна використовувати цей параметр спільно з background, підібравши колір тла, близький до фонового малюнка.
Синтаксис
Аргументи
Див. параметр ALINK.
Значення за замовчуванням
Залежить від браузера та його версії, але зазвичай використовується білий колір тла.
Приклад 4. Налаштування кольору фону веб-сторінки
...
Параметр BGPROPERTIES
Опис
За промовчанням фоновий малюнок прокручується разом із вмістом веб-сторінки. Використовуючи параметр bgproperties можна зафіксувати фон одному місці і, таким чином, змусити прокручуватися лише контент. Така якість веб-сторінки рідко застосовується для сайтів, тому для користувачів може здатися дивною та незвичною.
Синтаксис
Аргументи
Існує лише один параметр fixed, який фіксує тло. Якщо потрібно видалити цю можливість, видаліть параметр bgproperties у тега BODY або встановіть у нього порожнє значення - "".
Значення за замовчуванням
Ні.
Приклад 5. Фіксування фону
...
Примітка
- Не всі браузери підтримують цей параметр, наприклад Netscape його ігнорує.
- Помічено, що при установці фонового малюнка на веб-сторінці через стилі параметр bgproperies перестає працювати.
Параметр LEFTMARGIN
Опис
Визначає відступ від лівого та правого краю вікна браузера до вмісту веб-сторінки.
Синтаксис
Аргументи
Ціле позитивне число, яке встановлює відступ у пікселях.
Значення за замовчуванням
10 пікселів для Windows та 8 пікселів для Macintosh.
Приклад 6. Зміна відступу зліва
...
Примітка
- Браузер Netscape не розуміє параметр leftmargin, для встановлення відступів у ньому використовуються параметри marginwidth – відступи по горизонталі та marginheight – відступи по вертикалі.
- Для завдання відступів від правого, нижнього та верхнього краю застосовуються, відповідно, параметри rightmargin, bottommargin і topmargin.
Параметр LINK
Опис
Встановлює колір не відвіданих посилань.
Синтаксис
Аргументи
Див. параметр ALINK.
Значення за замовчуванням
#0000FF
Приклад 7. Встановлення кольору посилань
...
Параметр SCROLL
Опис
Параметр scroll управляє присутністю смуг прокручування у вікні браузера, коли вміст веб-сторінки перевищує розмір поточного вікна. Цей параметр працює лише у браузері Internet Explorer.
Синтаксис
Аргументи
yes - відображає смуги прокручування.
no – забороняє показ смуг прокручування у вікні.
Значення за замовчуванням
yes
Приклад 8. Приховування смуги прокручування
...
Параметр TEXT
Опис
Встановлює колір тексту, який використовується на веб-сторінці за промовчанням. Кольори окремих елементів можна легко змінювати за допомогою стилів.
Синтаксис
Аргументи
Див. параметр ALINK.
Значення за замовчуванням
#000000
Приклад 9. Зміна кольору тексту
...
Параметр VLINK
Опис
Визначає колір відвідуваних посилань, тобто таких посилань, на які користувач вже «натискав».
Синтаксис
Аргументи
Див. параметр ALINK.
Значення за замовчуванням
# 551a8b (Navigator 4); # 800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Приклад 10. Встановлення кольору відвіданих посилань
...
Колір тексту
Колір фону
Фонове зображення
Колір посилань
Відступи навколо контенту
Вправа
Як Вам вже відомо, між тегом, що відкриває та закриваючим тегом міститься тіло сторінки або сам вміст сторінки. Його ще називають словом контент(Від англ. content – вміст). Параметри тега визначають властивості контенту загалом. У цьому уроці ми розглянемо деякі з них.
Колір тексту
Колір тексту всього документа визначається параметром text. Йому надається або назва кольору, або шістнадцяткове значення кольору, як і параметру colorтега (Див. Урок 2. Форматування тесту):
абоВ результаті використання цього прикладу, весь текст на сторінці буде червоним.
Параметр textне є обов'язковим. Якщо його опустити, текст на сторінці за промовчанням буде чорним. Ви, напевно, вже встигли переконатися, виконуючи попередні вправи. :)
Колір фону
Колір фону сторінки визначається параметром bgcolor. Він приймає значення або назву кольору, або шістнадцяткове значення кольору, як і параметр text.
абоВ результаті використання цього прикладу фон сторінки буде червоним.
Параметр bgcolorне є обов'язковим. Якщо його опустити, фон сторінки за замовчуванням буде білим. У чому Ви теж переконалися, виконуючи попередні вправи. :)
Фонове зображення
За допомогою параметра backgroundможна зробити, щоб у сторінки було не однотонне тло, а тлом було б зображення. Для цього параметра backgroundтреба присвоїти шлях до зображення, яке Ви хочете зробити фоновим, так само як параметром srcтега
(Див. Урок 5. Зображення):
У такий спосіб можна, наприклад, замостити фон сторінки якимось візерунком. Але не варто зловживати цією можливістю і робити фоном великі зображення, щоб не обтяжувати сторінку.
Наприклад, ну нас є такий фрагмент візерунка:
Якщо ми зробимо його фоновим зображенням, вийде сторінка з таким тлом:
Параметр backgroundтакож не є обов'язковим. Якщо його опустити, фон сторінки за замовчуванням буде білим.
Колір посилань
Для завдання кольору посилань існують 3 параметри тега body:
Цим параметрам присвоюється назва кольору або його шістнадцяткове значення аналогічно до інших параметрів, що відповідають за колір чогось.
Ось як це буде виглядати на сторінці (щоб побачити всі стани посилання, запам'ятайте, якою вона була спочатку, натисніть і, не відпускаючи, подивіться, якою вона стала, і, нарешті, відпустіть, поверніться на цю сторінку, і подивіться, якого вона кольору ):
Ці параметри не є обов'язковими. Якщо їх опустити, то кольори посилань набудуть значення за замовчуванням (синій, червоний, фіолетовий відповідно).
Відступи навколо контенту
Якщо Ви бажаєте, щоб вміст сторінки відступав від країв вікна браузера на певну величину, на цей випадок у тега bodyє 4 параметри:
leftmargin- Відступ від лівого краю;
rightmargin- Відступ від правого краю;
topmargin- Відступ від верхнього краю;
bottommargin- Відступ від нижнього краю.
Ці параметри набувають значення в пікселах. Вони не обов'язкові, і можна використовувати як всі одразу так і окремо. Наприклад, можна зробити відступи тільки ліворуч і праворуч, або тільки зверху та знизу тощо:
абоЗдрастуйте, хлопці!
Сьогодні вирішив торкнутися теми, яка ніколи не перестане бути актуальною серед молодих творців сайтів.
Завжди існує потреба налаштовувати сайти після їх створення. Частина установок виконується через редагування файлів встановленого шаблону теми оформлення. Наприклад, потрібно вставити код, який виводить також записи. Але куди його вставити?
Дуже часто новачки ставлять такі запитання. Також їх хвилюють і інші подібні моменти, вирішення яких по суті є таким самим. До того ж, у своїх майбутніх статтях я часто вдаватимуся до вставки кодів у різні місця шаблону. Тому цей матеріал до речі, як ніколи.
У цій статті я покажу, як вам дуже просто визначити місце у шаблоні WordPress, куди вам необхідно вставити будь-який код. Також розгляну інші важливі моменти, які можуть турбувати вас на початковому етапі.
Давайте почнемо з верху і розглянемо файли, які вам може доведеться редагувати, якщо ви захочете вставляти коди ручками, а не за допомогою плагінів, адже існує і такий варіант. Його я не вітаю, але все ж таки для самих ледарів я опишу такі плагіни в наступних статтях.
На самому початку даю відео-урок, тому що без нього буде складно зрозуміти матеріал, викладений у текстовому форматі нижче.
Тепер поясню все докладно у текстовому форматі.
Файли, які відповідають за виведення кожного типу сторінок
Якщо ви читали багато статей на інших блогах про реалізацію якихось функцій за допомогою кодів (скриптів), то впевнений на всі 100%, що бачили фрази на кшталт:
- Вставляєте цей код у файл, який відповідає за виведення головної сторінки;
- Вставляєте цей код у файл, який відповідає за виведення записів та інші.
Файлів, які можуть знадобитися вставляти коди, багато. Але що це за файли? Все дуже просто.
- Висновок головної сторінки – index.php;
- Виведення записів – файл single.php;
- Виведення сторінок - файл page.php;
- Виведення архівів та рубрик - archive.php;
- Виведення підвалу – footer.php;
- Виведення сторінки пошуку – search.php;
- Висновок сайдбару – sidebar.php;
- Файл стилів – style.css;
- Файл виведення сторінки 404 – 404.php.
Тепер, коли вам будуть говорити, що потрібно вставити код у такий файл, ви знатимете, куди необхідно дивитися.
Залишилося лише відповісти на питання, як визначити потрібне місце в кожному з файлів?
Визначаємо місце вставки коду
Спочатку пройдемося тими місцями, які визначати не потрібно. Вони у всіх будуть однакові незалежно від шаблону.
Перше місце, ідентичне всім шаблонів - область у файлі Header.php. Це відкриває та закриває теги
.Між цими тегами завжди розміщують якісь скрипти, які мають працювати на всіх сторінках сайту. Тобто розмістили між даними тегами скрипт, наприклад, соціальних кнопок і вони працюють на всіх сторінках сайту, де ми зробимо їхній висновок.
Дані теги розміщені у верхній частині файлу Header.php.
Вміст, що знаходиться між ними, у всіх відрізнятиметься, оскільки все залежить від шаблону.
Якщо вам кажуть, що потрібно вставити цей код між тегоми head, що відкриває і закриває, то копіюєте код, шукайте подібну область у своєму файлі шаблону і просто вставляєте його між цими тегами.
Друге місце, яке також ідентичне всім шаблонів, знаходиться у файлі, що відповідає за виведення підвалу - footer.php.
Скрипти можна підключати не тільки, вставивши їх між тегами
у файлі Header.php. Можна також підвантажити їх через файл footer.php, тим самим прискоривши завантаження сторінки сайту.Справа в тому, що коли сторінка починається завантажуватися, вона вантажиться зверху вниз. Якщо всі скрипти будуть розташовані вгорі сторінки, відображення її вмісту сповільниться, тому що знадобиться час на завантаження скриптів.
Наше завдання – показати вміст сторінки, якнайшвидше, як відвідувачам, так і пошуковим системам. У цьому випадку доцільно зробити завантаження скриптів в самому кінці сторінки, щоб спочатку показати вміст, а потім завантажити і все інше.
Щоб реалізувати такий варіант, необхідно відкрити файл footer.php і вставити скрипт перед тегом body, що закривається. Знаходиться він наприкінці вмісту файлу, оскільки він відповідає за закінчення області сторінки.
Як бачимо, всі скрипти я вивів саме в цій галузі, перед закриваючим тегом(Виділив синьою рамкою). До речі, вивів їх через завантаження з файлів, а не розміщенням самих скриптів в даній області. Після цього я значно прискорив роботу блогу. Як це зробити буде окрема стаття. Чекайте!
Сподіваюся, що коли вам будуть говорити вставити код у ці області, ви без проблем все зробите.
Перейдемо до більш складного питання і постараємося навчитися визначати місця в інших файлах шаблону, в які вставляються різні інші коди. Як правило, до таких кодів належать:
- Виведення подібних записів;
- Виведення форми передплати;
- Виведення соціальних кнопок тощо.
Всі ці речі вставляють після основної частини контенту, тобто після закінчення статті. У кожного різний код шаблону і тому універсальної відповіді на запитання "Де у мене закінчується код виведення статті?"просто ні.
Але можна легко визначити кінець коду, після якого потрібно продати необхідну вам функцію. Частково цей метод я вже показував у статті про вибір WordPress шаблону (). Використовував тоді стандартний функціонал інтернет браузера.
Щоб краще зрозуміти всю суть даного методу, рекомендую подивитися відео на початку цього посту. У ньому я показав, як усе відбувається у реальному часі. Ну а зараз постараюся описати якомога зрозуміліше.
Покажу на прикладі браузера Google Chrome. В інших браузерах дана функція також є, то може трохи інакше називатися.
- Google Chrome – перегляд коду елемента;
- Firefox – дослідити елемент;
- Opera – проінспектувати елемент.
Принцип у 3х браузерах аналогічний. Тепер покажу, як визначається місце виведення будь-якої області у будь-якому шаблоні.
Переходимо до перегляду коду елемента (Google Chrome). Тиснемо правою кнопкою миші по порожній області сторінки.
Після цього внизу сторінки з'являється панель, в якій відображається весь вихідний код сторінки, який ми можемо редагувати та дивитися, як змінюватиметься структура та зовнішній вигляд шаблону в реальному часі. Але зміни дані не зберігаються. Для цього потрібно редагувати файли шаблону.
Ось як виглядає ця панель.
Стрілкою я показав на лупу (збільшувальне скло), натиснувши на яку ми можемо перевіряти структуру шаблону та визначити з яких блоків складається наш шаблон. Цю функцію називаю інспектором.
Після натискання на інспектор ми можемо водити мишкою по нашій сторінці і бачитимемо, що всі елементи, на які ми наводимо, починають підсвічуватися кольоровим фоном. Наприклад покажу скріншот зі статті про вибір шаблону. Там я навів заголовок запису.
Якщо нам необхідно вставити код після виведення нашої статті, то не важко здогадатися, що потрібно проінспектувати область нашого шаблону і знайти блок, в якому міститься весь вміст статті. Можна шукати як кінець блоку, так і початок. Тобто можна перевіряти шаблон і знизу і зверху.
Але тут одне зауваження . Нам потрібно шукати непросто рядки статті, саме блоки, у яких перебуває сам контент, оскільки у файлах шаблону статей немає. Там є лише код, що виводить контент, і поміщений він у блоки. Саме після блокового тегу, що закриває
