Здрастуйте, шановні читачі блогу сайт. Сьогодні я хотів би поговорити про те, навіщо вам може знадобитися при вашій роботі з сайтом знання мови HTML (читайте про те, що це таке), основи роботи з таблицями каскадних стилів CSS (вступну статтю за темою ви знайдете), а також розуміння хоча б основ і принципів, побудови програм мовою PHP та логіки роботи з базами даних MySQL.

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

Навіщо може знадобитися під час роботи над сайтом знання мов (розмітки, стилів, серверного програмування)

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

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

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

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

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

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

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

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

У якому редакторі краще правити чи вносити зміни до коду

Нічого складного в цьому немає, адже, по суті, це навіть не мова програмування, а гіпертекстова розмітка, щось схоже на синтаксис у російській мові. Що хотілося б одразу порадити, спираючись на власний досвід? Спробуйте писати теги самостійно в блокноті, типу Notepad++(читайте мій), а не в програмах, типу Дрімв'ювер. Чому?

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

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

Хоча це моя особиста думка (ІМХО) і вам вирішувати, що зручніше. Наприклад, Євген Попов, за курсами якого я вивчав всю цю справу, зважаючи на все, прихильник Дримв'євера. Важливо в принципі одне – щоб ви правили код у тому редакторі, який здатний зберігати всі внесені зміни та який може, за бажанням, повернути все як було(Взад).

В цьому випадку, як би ви не напортачили, все буде можна виправити. І, звичайно ж, дуже зручне підсвічування синтаксису мови, якою ви пишете або редагуєте код. Notepad++ - це безперечно мій вибір! Про його можливості я розповів у наведеній вище статті.

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

У той час, як теги веб-сторінок в сучасній CMS не записані в одному або декількох файлах, як було раніше, а генерується (інтерпретується) з PHP. І саме вже згенерований таким чином Html код підсовується браузеру для того, щоб він, у свою чергу, інтерпретував його в зручну для нас форму інтернет-сторінки. Хитро, чи не так?

Тому правка тегів у будь-якій CMSне є таким вже тривіальним завданням, навіть якщо ви повністю освоїлися з мовою гіпертекстової розмітки. Адже теги вам доведеться правити в PHP файлах і, отже, потрібно буде знати хоча б його базові поняття та синтаксис.

Але не хвилюйтеся, щоб правити дизайн великих знань у PHP від ​​вас не потрібно. Теги там лежать, як би сказати, на поверхні і не складає значних труднощів їх ідентифікувати і поправити при необхідності.

Які інструменти ви зможете використати

Проблема виникає, як правило, в іншому. Як знайти файл з розширенням PHP, в якому формується потрібний фрагмент тегів? Ось питання. Так, звичайно, якщо у вас є досвід у роботі з даними двигунів, то ви, я думаю, співорієнтуєтесь. Але якщо ви новачок і не знаєте який із сотень ПХП файлів за що відповідає?

Тут вам допоможе чудовий плагін для не менш чудового браузера, а так само згаданий вище Notepad++, і невідомий багатьом. Ця зв'язка програм допоможе вам згорнути гори і дозволить заощадити масу часу.

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

Ну ось, цілі намічені, завдання поставлено, залишилося лише їх виконувати. Потім дозвольте відклонятися.

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

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

Красиві російські шрифти для сайту та комп'ютера в онлайн сервісі Google Font - де завантажити Адаптивний (чуйний) дизайн - оптимізація сайту для перегляду на мобільних пристроях
Gif, Png або Jpg - формати растрової графіки для Інтернету, їх плюси та мінуси при використанні на сайті

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

Посилання (href) має писатися в одиночному тегу link. Вміст link HTML5 повинен виглядати наступним чином: href=”style.css” rel=”stylesheet”. Не забувайте, що сам тег link розташовується між парними ключовими тегами head.

Після значення href вказується ім'я того файлу css, який повинен бути прикріплений до документа (це не обов'язково style). Якщо файл зі стилями знаходиться в іншій папці, обов'язково через слеш (/) необхідно вказати шлях до нього.

Синтаксис CSS

Якщо з посиланням все гаразд, а CSS все одно не працює, потрібно перевірити синтаксис у коді.

По-перше, перевірте селектор. Селектор повинен збігатися з тим, що у вас написано у html-файлі. Тобто, якщо в html обрано class=”container”, то CSS на місці селектора прописується «.container». Зверніть увагу на точку перед назвою. Крапка ставиться лише перед класами. Якщо ви прописуєте стиль для заголовків h1, то ніякої точки не потрібно.

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

Браузер

Якщо браузер, на якому ви перевіряєте свій css-код, вже застарів, він не в змозі коректно відображати мову CSS3. Тому якщо код не працює, оновіть свій браузер до останньої версії.

Використовуйте для тестування різні браузери: Opera, Google Chrome, Firefox. Не рекомендується покладатися на Internet Explorer, оскільки його розробка для Microsoft не є головним завданням, що призводить до його «неспроможності» стосовно CSS3.

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

успадкування

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

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

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

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

Можливо, батьківський елемент містить властивість, яка не дає працювати іншій властивості у дочірньому елементі. Докладніше про успадкування можна почитати в будь-якому довіднику CSS.

Що таке цей CSS

CSS можна назвати формальною мовою опису візуального вигляду документа. Повністю CSS звучить як Cascading Style Sheets, що російській людині зрозуміліше Каскадні таблиці стилів, тобто КТС. КТС ясна річ ніхто не використовує, а прийнято використовувати CSS. Мова CSS з'явилася 17 грудня 1996 року.

Навіщо потрібні стилі CSS в окремому файлі

Щоб прописати стилі в html, потрібно всередині .. прописати ваші правила у тезі

усередині якого пишуться правила. Він сам прописується теж у

— Якщо ви вирішили вказати стиль прямо всередині вмісту , слід використовувати параметр style=»…»

Правильні правила для CSS і як коментувати в CSS

Тут, звичайно, можна написати величезну кількість теорії, але у нас тут не довідник. Я покажу все на прикладі, головне пам'ятати, що є селектори, властивості і значення. Селектор, це до чого застосовуватимуться правила, властивість - це вид правил, які будемо використовувати, а значення, воно і є значення. (Властивість + значення = правило)

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

Щоб закоментувати будь-який текст у CSS, потрібно взяти текст у такі лапки. /* текст */ і все 🙂

Як обіцяв, наочні приклади CSS :

p (
font-family: Verdana;
background: white;
color: red;
}

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

• Tutorial

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

1. W3C Validator

Рекомендується перевіряти HTML та CSS сайти через сервіс validator.w3.org. Цей сервіс просканує код і відобразить помилки, наприклад:

• не закрито тег;
• не рекомендовані символи у посиланнях;
• використовується нерекомендований тег;
• не вказано обов'язковий атрибут;
• та інше.

2. Верстка у форматі UTF-8

При верстці сторінки, треба переконатися, що кодування файлу встановлено в UTF-8 (без BOM). Кожен текстовий редактор встановлює кодування по-своєму.

Файл у форматі UTF-8 дозволяє використовувати нестандартні символи (наприклад, символи різних мов, валютний знак та інші).

Також потрібно повідомити браузерам, що сторінка відкривається у кодуванні UTF-8. Це робиться через тег нижче:

3. Однакові id у кількох елементів

Значення атрибуту id у HTML-коді не повинно повторюватися.

4. Спрайти

Декілька маленьких картинок рекомендується з'єднувати в один файл (такий файл називається спрайт). Це зменшить кількість запитів на сайт та покращить швидкість завантаження сторінки.

Наразі також популярно замість спрайтів використовувати шрифти з іконками. Тобто. замість букв виводяться іконки шестерні, смайлика та інших іконок. Як приклад можна навести іконки glyphicons, які використовуються у Twitter Bootstrap.

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

5. Багато селекторів

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

/* не рекомендується, велика вкладеність */ .page .item .title a() /* можна скоротити */ .page .item a()
Браузери читають CSS праворуч наліво. Тобто. у коді вище, спочатку будуть обрані всі посилання, що є на сторінці, а потім будуть обрані посилання, які знаходяться всередині елемента.item.

6. Стилі в HTML

HTML призначений висновку інформації (текст, картинки). Оформлення контенту (змінити розмір, колір, шрифт) відбувається у CSS.

Помилка коду

Помилка коду

7. Неправильна назва класів

Багато верстальників, коли треба зробити текст зеленим кольором, прикріплюють до нього клас.green.

Текст повідомлення

Неправильно, т.к. При зміні дизайну багато кольорів можуть змінитися, наприклад, текст повідомлення може виводитися синім кольором замість зеленого. Тоді доведеться шукати всі теги, які мають клас.green і замінювати його на.blue.

Текст повідомлення

Текст повідомлення

8. Пікселі у дробових значеннях

Деякі браузери дозволяють вказувати пікселі в дрібних значеннях, наприклад «1.5px». Але це неправильно, т.к. піксель це неподільна одиниця. Замість "1.5px" краще використовувати "1.5em".

P ( /* неправильно */ letter-spacing: 1.5px; /* правильно */ letter-spacing: .005em; )

9. Використання класів замість id

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

#modal a (color: blue;) / * колір нижче не вдасться перевизначити, т.к. #modal має більшу вагу, ніж у класів */.
Не рекомендується використовувати!important, т.к. його вага вища, ніж у атрибута id, і його також буде складно перевизначити.

10. Меню

Меню має бути оформлене як список.

Головна Новини Про компанію

• Головна
• Новини
• Про компанію

11. Пропущений alt у картинок

У тегах треба зазначати атрибут alt (можна порожній).

12. Теги

На сторінці має бути лише один заголовок у тезі

. В основному, в цьому мітці знаходиться назва сторінки.

13. Транскрипція

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

/* неправильно */ .tovar () .stranica () .zapros () /* правильно */ .product () .page () .query ()

14. Clearfix

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

Класс.clearfix треба вказувати в батьківському тезі, а не ставити поряд.

15. HTML - мова програмування

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

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

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

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

Розділ подання сайту від його вмісту.

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

Збільшення швидкості завантаження сайту.

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

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

Сумісність CSS із сучасними браузерами.

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

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

Одним із найстаріших сервісів у мережі Інтернет є форуми. Ці майданчики для спілкування з'явилися одними з перших і відтоді залишаються практично незмінному вигляді. Але незважаючи на свій солідний вік вони, як і раніше, справляються зі своїми функціями. Тут люди спілкуються, ставлять запитання та отримують відповіді.