Який тег визначає тип документа? Директиви коментарів і Doctype в Html коді, а також поняття блокових та малих елементів (тегів). Неконвертовані символи в URL

перелік

Перевірити правильність вкладення тегів у поточному елементі та наявність обов'язкових елементів.

Повідомлення виникає через попередню помилку на сторінці.

Виправте попередні помилки.

У коді не вставлено тег.

Заголовок

Додати контейнер .

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

Використовуйте вкладені теги.

Зазначений тег не входить до специфікації HTML.

текст без переносів

текст без переносів

Видаліть тег або замініть його відповідним еквівалентом.

Тег не розпізнаний і не входить до специфікації HTML.

Правильно:

Невірно:

Текст

Видаліть невідомий тег.

Контейнер порожній або містить лише пробіл.

Видаліть тег або додайте до контейнера текст.

У тезі, що закриває відсутня слеш.

Рішення

Змініть порядок тегів або видаліть один із тегів, що відкривають або закривають.

... anchor "..." already defined

Значення атрибута name у різних тегів збігаються між собою. Значення name має бути унікальним.

Рішення

Виберіть інше ім'я або змініть попередні імена таким чином, щоб вони не співпадали.

is probably intended as

Тег повторюється двічі в коді HTML, тоді як подібний тег не повинен утримувати сам себе.

Привіт світ!

Привіт світ!

Рішення

Видаліть один із тегів.

lacks "..." attribute

Потрібний обов'язковий атрибут тега, який, проте, відсутній.

Основи HTML містять основні правила мови HTML, опис структури HTML-сторінки, відносини у структурі HTML-документа між HTML-елементами.

HTML-документ - це звичайний текстовий документ, що може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad++, Visual Studio Code і т.п.). HTML-документ має розширення.html.

HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриває) і кінцевим (закриває) тегом (за рідкісним винятком).

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

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

Теги можуть вкладатися один в одного, наприклад,

Текст

. При вкладенні слід дотримуватися порядку їх закриття (принцип «матрьошки»), наприклад, наступний запис буде неправильним:

Текст

.

HTML-елементи можуть мати атрибути (глобальні, які застосовуються для всіх HTML-елементів, та власні). Атрибути прописуються у тезі елемента і містять ім'я і значення, що вказуються у форматі ім'я атрибута="значення" . Атрибути дозволяють змінювати властивості та поведінку елемента, для якого вони задано.

Кожному елементу можна надати кілька значень class і лише одне значення id . Множинні значення class записуються через пропуск, . Значення class та id повинні складатися лише з літер, цифр, дефісів та нижніх підкреслень і повинні починатися лише з літер чи цифр.

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

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

HTML-документ і двох розділів - заголовка — між тегами … і змістовної частини — між тегами … .

Структура веб-сторінки 1. Структура HTML-документа

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

DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML (наприклад, html), але й відповідний файл DTD в Інтернеті.

...

Елементи, що знаходяться всередині тега, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). У цьому елемент є кореневим елементом.

Мал. 1. Найпростіша структура веб-сторінки

Щоб розібратися у взаємодії елементів веб-сторінки, необхідно розглянути так звані споріднені відносини між елементами. Відносини між множинними вкладеними елементами поділяються на батьківські, дочірні та сестринські.

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

, , і т.д.

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

Є нащадком одночасно для і.

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

Є батьківським лише для .

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

І є дочірніми стосовно .

Сестринський елемент - елемент, що має загальний батьківський елемент із аналізованим, так звані елементи одного рівня. На малюнку 1 і елементи одного рівня, так само як і елементи , і

Є між собою сестринськими.

1.1. Елемент 1.2. Елемент

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

1.2.1. Елемент

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

1.2.2. Елемент

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

Опис вмісту сторінки та ключові слова одночасно можна вказувати кількома мовами, наприклад, російською та англійською:

За допомогою тега можна заборонити або дозволити індексацію веб-сторінки пошуковими машинами:

Для автоматичного перезавантаження сторінки через проміжок часу потрібно скористатися значенням refresh:

Сторінку буде перезавантажено через 30 секунд. Щоб перекинути відвідувача на іншу сторінку, потрібно вказати URL-адресу у параметрі url:

Для коментування вам необхідно зареєструватися.

Здрастуйте, шановні читачі блогу сайт. Я хочу продовжити розповідати про основи роботи з Html із самого початку, послідовно та нічого не опускаючи. Сьогодні ми поговоримо про спеціальний тег (декларацію) Doctype, дізнаємося як правильно оформлювати коментарі в ХТМЛ коді, як прописувати заголовок веб документа Title і постараємося розібратися у відмінностях блокових та малих елементів.

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

Першим елементом мови розмітки, яку ви зустрінете у будь-якому правильному Web документі (сторінці сайту), буде спеціальна директива Doctype. Вона починається з кутової дужки і проставленого відразу ж за нею знака оклику

Сам по собі елемент Doctype служить для оголошення типу даного документа і допомагає браузеру зрозуміти, яку версію Html або XHTML (за класифікацією валідатора W3C) йому слід спиратися при розборі коду завантажуваної веб сторінки.

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

Але давайте на цьому зупинимося трохи докладніше. Зараз ми з вами спостерігаємо якийсь дуалізм або два типи документів у мережі — як робили раніше до виділення CSS з лона мови ХТМЛ і як роблять зараз за прийнятими сучасними стандартами.

Природно, що після прийняття нових стандартів у мережі інтернет залишалося все одно безліч документів, створених за старими принципами чистого ХТМЛ (без CSS) і браузери мали з ними якось працювати. Корпорація Майкрософт у свій час запропонувала використовувати цю директиву Doctype з нової мови розмітки XML.

Виглядати вона може по-різному (читайте про це нижче), але найпростіше використовувати такий варіант (трохи нижче за текстом поясню чому):

Таким чином, браузер розумітиме, за якими саме стандартами йому розбирати код документа. Якщо ця декларація має місце, то браузер перетворюється на режим роботи з стандартам (standarts mode). Якщо ж її браузер не знайде на самому початку документа (або вона не відповідатиме правильному варіанту написання), тоді браузер включить хитрий режим вивертів (quirks mode).

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

Щоправда, поняття старого браузера дуже розпливчасте. Все той же лідер за швидкістю роботи і швидкістю западання в серця користувачів Google Chrome з'явився тільки в 2008 році.

Почнемо зі стандарту мови гіпертекстової розмітки 4.01 (ХТМЛ 5 поки що тільки розробляється). Для цього випадку існує три варіанти Doctype: строгий, перехідний та за допомогою фреймів:

Найчастіше використовують другий варіант (Transitional), т.к. він допускає більше вольностей у написанні коду документа, ну, а варіант з кадрами вам навряд чи стане в нагоді, через неактуальність їх використання на сьогоднішній день.

Власне, є такі ж три варіанти Doctype для XHTML - строгий, перехідний і за допомогою кадрів:

Але давайте подивимося, звідки беруться ці варіанти правильного написання декларації. Пам'ятайте, ми у першій статті розглядали таблицю допустимих :

І окрему таблицю можливих:

Як ви можете бачити, в обох цих таблицях є стовпець «Depr», в якому буквою «D» позначені застарілі та не рекомендовані до застосування теги та атрибути мови ХТМЛ. Це ми вже з вами розглянули. Але зверніть увагу, що навпроти кожної літери D в сусідньому правому стовпці DTD стоїть або буква L (Loose DTD), або буква F (Frameset DTD).

Т.о. всі теги та атрибути, які не позначені літерами «D» (не рекомендовані) входять до суворої декорації Doctype (тільки рекомендовані елементи і нічого більше). Якщо ж ви все-таки допускатимете використання не рекомендованих тегів та атрибутів мови Html (вони позначені літерою «D»), то потрібно буде оголошувати для таких документів перехідну декларацію.

Деякі елементи та атрибути, позначені в стовпці DTD літерою F (наприклад, FRAME, FRAMESET), будуть входити до декларації Doctype для кадрових структур. Вона базується на основі перехідної, до якої додаються теги та атрибути для створення , про які ви можете прочитати за наведеним посиланням.

А тепер спробуємо розібратися, а з яких частин складається декларація Doctype?

Спочатку йде назва - "Doctype". Тут, гадаю, все зрозуміло. Далі йде "Html" - кореневий елемент цієї мови розмітки. Потім йде вказівка ​​— публічна дана декларація або системна. Усі варіанти Doctype є публічними, що означає слово «PUBLIC».

А далі йдуть два ідентифікатори документа. Перший називається публічним ідентифікатором («-//W3C//DTD HTML 4.01//EN»). Мінус означає те, що ця декларація не зареєстрована в стандарті ISO. Потім слідує назва консорціуму, її назва та мова, якою вона написана. У другому ідентифікаторі вказується шлях до файлу суворого варіанта.

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

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

Тому, щоб не мудрувати лукаво, в Html 5 написання Doctype виглядатиме вже ось так:

І все. Залишили лише «Html». І незважаючи на те, що ХТМЛ 5 ще не повністю впроваджений, цей варіант підтримується всіма сучасними браузерами і ви можете сміливо користуватися ним. Про як, а ви кажете...

У службовій області Web документа (між тегами Head) обов'язково має бути прописаний заголовок цього самого документа (веб сторінки), укладений елементи Title (див. на наведеному малюнку).

Переоцінити значущість ув'язненої у ньому інформації дуже складно (не перебільшую). Коли ви підбиратимете ключові слова в Яндекс Wordstat (використовуючи для цього ), то після складання семантичного ядра вам обов'язково потрібно буде згадати вибрані ключові слова в заголовку Title.

Про те, наскільки важливими є слова укладені в Тайтлі для майбутнього успішного просування проекту, ви можете дізнатися зі статті , а про те, як прописати потрібні вам слова в Title для Joomla і WordPress, ви дізнаєтеся зі статті .

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

Особливо актуальні коментарі в Html були за часів панування табличної верстки (читайте про ), бо тоді, порівняно з сучасною блоковою версткою (тут описано на прикладі), дуже просто було заплутатися, що і в якому осередку таблиці виводиться:

Напевно, з наведеного вище прикладу ви вже зрозуміли, що всі коментарі в мові Html починаються так само, як і будь-які інші елементи - з кутової дужки, але відразу ж після неї, при формуванні коментаря, потрібно буде поставити знак оклику (при описі Doctype я згадував, що коментарі теж є деклараціями, які обов'язково починаються з

Весь текст коментаря, який буде між цими подвійними дефісами, розглядатиметься браузерами як службова інформація і ніяк оброблятися не буде. Коректність його написання можна наочно оцінити під час використання описаного :

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

Все досить просто і гадаю, що з ними у вас проблем не виникне. Хоча є одна тонкість у роботі з багаторядковими коментарями у ХТМЛ. Всередину одного коментаря не можна поміщати інший, інакше частина закоментованої інформації може відображатися браузером на веб-сторінці. Давайте для прикладу розглянемо таку конструкцію:

продовження зовнішнього коменту-->

Отже, браузер при розборі коду веб сторінки виявить символи, що відкривають декларації коментаря і почне пошук закривають. Знайде його після слів «Вкладений комент», а ось решта (у нашому випадку це продовження зовнішнього коменту->) буде оброблено браузером і виведено на веб-сторінці.

В принципі, якщо ви користуєтеся при написанні Html коду редактором з підсвічуванням, то відразу ж помітите негаразд зі зміни кольору вашого коментаря:

Усі теги, які можна використовувати всередині елементів Body (те, що відображається на веб-сторінці та список яких ви можете знайти у валідаторе W3C), можна розділити на дві групи: малі та блокові теги.

Блокові елементи використовуються для побудови структури Web документа, а малі використовуються для оформлення шматків тексту (рядків). Причому, завжди потрібно дотримуватися одного непорушного правила - не укладати всередину малих блокових тегів.

Найяскравішими і показовими представниками малих і блокових тегів є, відповідно, Div (блоковий елемент - звідси і походить назва блокової верстки) і Span (рядковий). Ці теги мови гіпертекстової розмітки парними, тобто. у них є тег, що відкриває і закриває.

Взагалі, теги Div та Span не мають абсолютно ніякого призначення та сенсу в чистому Html без використання таблиць каскадних стилів CSS. Вони є контейнерами, що дозволяють змінювати властивості укладених елементів через CSS.

Якщо ви пропишите у вихідному коді сторінки поспіль кілька елементів Div, то на веб-сторінці кожен з них, швидше за все, спробує зайняти весь доступний йому простір по ширині, і тому розташовані такі контейнери будуть один під одним. Контейнери Div за нормальних умов поруч один з одним не стоятимуть, якщо примусово не змусити їх робити це.

Наприклад, такий Html код буде відображатися в трьох блоках розташованих один під одним:

У браузері Firefox поряд з дуже корисним я ще використовую плагін, який дуже допомагає при. Серед іншого він може показувати блокові елементи, обводячи їх рамочкою. Саме цей плагін developer створив сині рамочки навколо контейнерів Div на скріншоті.

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

Вміст Span тут також був підсвічений за допомогою плагіна Web developer. Т.к. елементи Span є малими, то не слід всередині них укладати блокові теги, наприклад, ті ж Div контейнери.

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Що таке мова гіпертекстової розмітки Html і як переглянути список усіх тегів у валідаторе W3C
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, перенесення рядка Br та абзацу P за стандартом Html 4.01
Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
Списки в Html коді - теги UL, OL, LI та DL
Як вставити в HTML посилання та картинку (фото) - теги IMG та A
Пробільні символи та форматування ними коду в Html, а також спецсимволи нерозривної пробілу та інші мнемоніки
Як задаються кольори в Html і CSS коді, підбір RGB відтінків у таблицях, видачі Яндекса та інших програмах Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми списків, що випадають, і текстового поля
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а також зробити картинку посиланням у Html коді
Iframe та Frame - що це таке і як краще використовувати фрейми в Html

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

Як я вже писав раніше, зовнішній вигляд сайту створює , або шаблон.

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

Але перш ніж починати, бажано пройти і, або хоча б мати під рукою довідкову літературу інакше, багато про що я розповім тут, буде просто не зрозуміло.

Можна звичайно скористатися моїми, але краще все-таки навчитися.

Крім вищепереліченого Вам необхідно прочитати пост і виконати дані в ньому рекомендації. Вони дуже прості.

Почнемо з редагування стандартної теми Twenty Ten. Ця тема стоїть за замовчуванням на збиранні WordPress, і саме її можна побачити відразу після встановлення двигуна.

На цьому ресурсі, до речі, також стоїть ця тема, лише трохи підправлена. Точніше перероблена вщент.

Створювати свій web дизайн ми будемо за допомогою інструмента Веб-інспектор.

Цей необхідний для розробника інструмент за замовчуванням є у всіх сучасних браузерах та викликається клавішею F12.

Також викликати його можна, якщо клацнути правою клавішею миші по сторінці, і вибрати "Перегляд коду елемента" або "Дослідити елемент"

Дизайн мого сайту вже кілька разів змінився, і Ви бачите давній варіант, але суті це не змінює.

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

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

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

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

Як бачимо, блок меню в таблиці стилів, позначений селектором #access і йому задані наступні значення:

ширина - 940 px
відступ зліва - 0 px

Ідемо нижче

фоновий колір - жовтий (спочатку був чорний)
видимість елемента - видимий
напливання зліва - напевно щоб не відштовхувати заголовок
відступ зверху - 80 px, та розміщення по центру
відступ знизу - 30 px
рамка - товщина, суцільна, жовта (спочатку чорна)

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

Для того, щоб все це зробити, необхідно пройти в Консоль - Зовнішній вигляд - Редактор, і знайти файл style.css

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

Ось у цьому файлі нам потрібно знайти селектор #access. Спочатку він з'явиться в розділі "=Structure", але він знаходиться в групі з іншими селекторами, для яких задані однакові властивості і значення.

Не будемо поки що виводити з цієї групи #access, так як ширина, задана в цій групі, мене, наприклад, влаштовувала. Опускаємось далі до розділу «Menu». Ось тут наш блок представлений у всій красі.

Саме тут можна посунути його вгору і вниз, змінивши значення у властивості margin, змінити колір, а якщо у властивості display замість block поставити none, то зробити невидимим.

Не забуваймо після кожної маніпуляції оновлювати файл!

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

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

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

Тепер, переміщуючи курсор по рядках у лівому полі, у правому полі дивимося, як дізнатися той чи інший елемент у файлі style. css і прикидаємо, які значення нам хотілося б змінити.

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

Якщо комусь захочеться взагалі прибрати це меню зі сторінок сайту, для цього потрібно пройти Зовнішній вигляд > Редактор, і відкрити для редагування файл header.php .

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

Можна зробити його просто невидимим. Для цього у файлі style.css в селектор #access додається властивість display:none .

Тепер подивимося, як замінити картинку в шапці сайту. Допустимо, всі запропоновані в темі зображення Вас не влаштували, і Ви вирішили встановити щось зовсім своє. Де взяти картинку для шапки, можна подивитися на сторінці, і коли вона буде знайдена, або зроблена, помістити в папку images теми.

Потім йдемо у файл style.css , і дивимося, що необхідно зробити, щоб не необхідна картинка зникла, а необхідна виникла.

Знаходимо розділ "=Header", в якому зібрано все, що пов'язане з шапкою сайту, і знаходимо там селектор зображення. Потім змінюємо значення display:block на значення display:none і картинка зникає з екрана.

Потім піднімаємося до розділу = Structure, і в селекторі #wrapper , робимо наступний запис. Властивість background: є за замовчуванням, це фон сторінки, тому додаємо властивості тільки для картинки.

У значенні властивості background-image , поміщаємо адресу нової знайденої або зробленої нами картинки, завантаженої попередньо в папку images теми оформлення.

Якщо сайт знаходиться на хостингу, то ця папка знаходиться в: ім'я_сайту > public_html > wp-content> > themes > images.
Якщо сайт ще на локальному хостингу, то шлях до цієї папки: Z > home > ім'я_сайту > www > wp-content> > themes > images.

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

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

У цьому випадку шапка матиме хоча б тло.

Робиться це так. Заходимо Консоль - Записи - Додати запис, перемикаємо редактор в режим HTML, і через завантажувач зображень (Додати медіафайл), завантажуємо потрібну картинку.

У редакторі з'являється код цієї картинки. Його потрібно скопіювати, а "Запис" видалити.

Потім заходимо у "Зовнішній вигляд - редактор", і відкриваємо для редагування файл header.php, в якому знаходимо рядок

Відразу після цього рядка і вставляємо скопійований код зображення. У коді є клас вирівнювання class="aligncenter" , і в залежності від необхідності aligncenter можна замінити на alignleft, або alignright .

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

Якщо ж після збереження та перегляду, зображення потрібно буде ще трохи, кудись посунути, то повертаємося в редактор, і в код картинки, в тег img , вставляємо атрибут style з властивістю margin :

style="margin:0 0 0 0;"

Де замість нулів вставляємо необхідні розміри відступів і таким чином зрушуємо картинку в потрібному напрямку.

Колір полів можна змінити, спустившись трохи вниз, до розділу "=Global Elements", у селекторі тега "body". У мене поля були зроблені з розмноженої картинки. Я її надалі прибрав та залишив однотонні, але як це зробити (зображення на полях), можете подивитися.

Якщо ж змінювати тільки колір, достатньо змінити значення у властивості background

Розмір, вигляд і колір шрифту сайту змінюється тут

А розмір, колір, зовнішній вигляд заголовка, та опис сайту в шапці - тут. Тут можна підправити розміщення заголовка і описи, при зміні картинки шапки.

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

Готові HTML шаблони російською