HTML і CSS для власників сайтів. Верстка не для програмістів

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


Зміст



Введення в HTML

Основа будь-якого сайту – це HTML код. Щоб подивитися, як він виглядає, відкрийте браузер Chrome (тут і далі ми будемо дивитися все в ньому), натисніть правою кнопкою миші по сторінці і в контекстному меню виберіть пункт «Перегляд коду сторінки» (View Page Source).

1

Все це все таке – це і є HTML код. Якщо почати в нього вдивлятися, то буде видно, що все незрозуміле знаходиться в трикутних дужках <>, іноді зі слешем </так>.

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

Це виглядає приблизно так:
<объект1>
<объект2> ... </объект2>
<объект3>
<объект4> ... </объект4>
</объект3>
</объект1>


Знаки табуляції тут тільки для прикладу, вкладеність об'єктів залежить тільки від «відкриття» і «закриття» тега.

Тег, який був відкритий раніше, повинен закриватися пізніше. І навпаки: якщо тег відкритий пізніше, то повинен закритися раніше. Не повинно бути перетинів відкриття та закриття тегів.

Так правильно:
<a> <b> ... </b> </a>


Так помилка:
<a> <b> ... </a> </b>


Тег <a> повинен закриватися пізніше, так як відкрився раніше, вийшло перетин.


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

<head></head> – це службові теги позначають початок сторінки. Вони, зазвичай, не відображають жодної інформації у браузері. Вони використовуються для того, щоб всередині за допомогою інших тегів вказати SEO параметри (keywords, description), заголовок сторінки (title), Favicon, підключити файли CSS і т. п. Якщо потрібно відредагувати зазначені параметри, то шукати їх потрібно саме в частині <head>.

<body></body> – теги, які повинні бути відразу після тега < head>. В них міститься вся інформація, яка повинна відображатися в браузері. Закриваючий тег </body> повинен бути після всього змісту сторінки.

<img src='URL'> – цей тег додає картинку на сторінку. В лапках, замість URL потрібно вказати посилання на картинку, яку потрібно показати на сторінці. Зверніть увагу, що цього тегу НЕ потрібен закриваючий тег.
Так правильно:
<img src='http://digistr.ru/images/logo.png'>

Так помилка:
<img src='http://digistr.ru/images/logo.png'></img>


<a href='URL'> – тег для посилання. Текст (або картинку), який ви хочете зробити посиланням, потрібно розмістити після відкриваючого тега <a> і перед закриваючим </a>.
Наприклад:
<a href='http://digistr.ru/'>Digistr.ua</a>

У браузері відкриється текст «Digistr.ru», який буде посиланням на сторінку «http://digistr.ru/».

<h1></h1> – тег заголовка H1. Коли сайт знаходиться в просуванні, потрібно, щоб він був на сторінці, причому в одиничному екземплярі. Це найголовніший заголовок сторінки. Інші заголовки можуть знаходиться в тегах від h2 до h6. Чим більше номер, тим, стандартно, менше заголовок.

<p> – це текстовий тег для створення абзацу тексту. Кожен абзац розміщується між тегами <p></p>.

<br> – тег переносу рядка. В HTML коді переноси рядків ігноруються. Щоб розділити текст на абзаци використовується тег <p></p>, а для звичайного переносу рядка – тег <br>, якому не потрібен закриваючий тег.
Правильно:
Рядок 1<br>
Рядок 2.

Помилка:
Рядок 1<br></b>
Рядок 2.


<div></div> – тег блоків. Зазвичай вони використовуються для логічного поділу всієї сторінки на більш дрібні частини. Наприклад, сторінку можна логічно поділити на наступні частини: шапка, навігація, основний зміст і підвал. Кожна така секція знаходиться між своїм відкриваючим і закриваючим тегом <div></div>.

Практично всі теги (крім body, head і, бажано, h1) можна використовувати в будь-яких кількостях на сторінці. З цих тегів і створюється структура сторінки.

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

a, b, br, button, div, em, embed, form, h1-h6, i, img, input, label, ul або ol c li, p, select, small, span, strong, table, tr, td, textarea, u. Всього близько 30 штук.


Тепер, коли ви будете бачити в коді сторінки такі теги, ви будете знати, що кожен з них робить.

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

Перейдемо тепер до оформлення.

 

Введення в CSS
CSS код, зазвичай, розміщений в окремих .css файли. Вони підключаються в теге <head> з допомогою тега <link>.
<link href="styles.css" rel="stylesheet">

В параметрі href указывайтся шлях до файлу зі стилями.

CSS конструкції мають наступний вигляд:
Название_объекта_для_оформления {
Параметр_оформления1 : значення параметра ;
Параметр_оформления2 : значення параметра ;
}


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

Тоді CSS код для такого оформлення буде наступним:
p { color: red;}


Якщо ми хочемо зробити заголовок <h1> червоним, тоді такий код:
h1 {color: red;}


Так ми вказуємо тег і його оформлення. Тут ми використовували параметр оформлення — color, який дозволяє редагувати колір елемента. Як вказувати колір, дивіться тут. Найчастіше використовується шістнадцятковий код за ґрати. Для червоного кольору це буде так:
h1 {color:#FF0000;}



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

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

Класи зазначаються так:
<p class='green-text'> ... </p>
<p> ... </p>
<p class='green-text'> ... </p>


Так у нас є можливість вказати окреме оформлення для тегів <p>, у яких вказано клас green-text.

Для цього в CSS потрібно вказати, який об'єкт ми оформляємо через точку.
.green-text {
color: green;
}


Для ідентифікаторів решітка використовується в CSS і параметр id для тега
HTML:
<img id='logo' src='...'>

CSS:
#logo {
width: 100px;
}


А ось так буде неправильно:
<p id='green-text'> ... </p>
<p> ... </p>
<p id='green-text'> ... </p>


Бо id повинен бути один на сторінці, а тут два «green-text». Ось так правильно, так як різних ID може бути багато на сторінку:
<p id='green-text1'> ... </p>
<p> ... </p>
<p id='green-text2'> ... </p>

але логічно некоректно, так як для однотипних об'єктів, яких кілька, краще використовувати class.

ID найчастіше використовується для визначення унікальних частин сторінки, наприклад у такому вигляді:
<div id= "header'> Шапка сайту </div>
<div id='content'> Зміст сторінки </div>
<div id= "footer'> Підвал </div>



Спадкування і перевизначення стилів CSS
Порядок запису стилів .css файлі може бути довільним. Для кожного об'єкта стилі застосовуються в порядку їх зазначення.
Приклад:
h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px;}


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

Але у другому блоці можна перевизначити стилі першого блоку. Наприклад:
h1 {color: red;}
h2 {color: green;}
h1 {font-size: 32px; color: yellow;}


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

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


Вкладеність тегів і об'єктів в CSS, селектори
Часто необхідно вказати стилі тегам, які знаходяться в певній частині сторінки. Наприклад, для телефонів в шапці сайту, які знаходяться в тегах <p>, потрібно вказати більший розмір шрифту.

Саме для цього сторінка, зазвичай, ділиться на різні логічні частини в HTML.
Наприклад, у нас є такий код:
<div id= "header'>
<div class='phone'>
<p>+1 (234) 56-78-910</p>
</div>
</div>
<div id='content'>
<p>Абзац 1</p>
<p>Абзац 2</p>
</div>
<div id= "footer'>
<p class='copyright'> 2016, Ваша компанія</p>
</div>


Якщо ми, як і раніше, вкажемо такий спосіб:
p {font-size: 32px;}


То у нас всі елементи будуть шрифтом 32px. Але нам потрібно, щоб телефон був такого розміру.

Для цього в CSS ми можемо використовувати вказівку тегів з урахуванням вкладеності. Наприклад:
#header .phone p {font-size: 32px;}


Таким чином, розмір шрифту зміниться тільки в тег <p>, який знаходиться в класі .phone, який, у свою чергу знаходиться в елементі з id рівним header. І навпаки, CSS буде шукати спочатку елемент #header, в ньому повинен бути елемент .phone, а далі елемент p. Параметри об'єктів зазначаються через пробіл.
Розгорнутий приклад:
#header .phone p {font-size: 32px;}
#content p {color: silver;}
#footer .copyright {font-size: 10px;}


Тут телефон розміром 32px, абзаци у змісті сторінки будуть сірого кольору, а копірайт буде шрифтом 10px.

Такі послідовності тегів, класів та ідентифікаторів називаються селекторами. Від слова select – вибрати. Вони вибирають елементи на сторінці і вказують їм стилі. Детальніше про них тут.

Крім цього, в стилях можна вказати через кому кілька селекторів, щоб вказати їм однакові стилі.
Наприклад:
#content p, #footer .copyright {color: silver;}
#footer .copyright {font-size: 10px;}

У цьому випадку копірайт буде сірого кольору (успадковується з правила вище) і розміром шрифту в 10px.


Популярні CSS параметри
margin, border, padding – зовнішні відступи від об'єкта, межа об'єкта і відступи всередині об'єкта, відповідно.
Виглядає це приблизно так.
2
Тут чорною рамкою і оформленням border виділено сам об'єкт, margin – це відступ навколо нього, а padding – всередині нього.
HTML:
<div id= "header'>
<div id='logo'> <img src='...' > </div>
</div>

CSS:
#header {
background: #F8CB9C;
padding: 1px;
}
#logo {
margin: 10px;
padding: 20px 30px;
background: #C1CD89;
border: 3px solid black;
}
#logo img {
border: 1px dashed black;
}



Тут зелений відступ створений за рахунок padding в елементі #logo. Весь елемент залито зеленим кольором, але його зміст починається не від краю за рахунок padding, вийшла рамка для наочності. У цього ж елемента #logo вказаний margin за 10px зі всіх сторін, і розтягнув зовнішній блок, вийшов другий відступ з-за margin. У самого ж елемента #logo чорна рамка в 3px створюється параметр border.
 
display – спосіб відображення елемента. Найбільш популярні значення:
  • none – не відображати елемент. Використовується, коли потрібно що-то «сховати/відключити» на сторінці.
  • block – елемент буде розтягнутий на всю ширину елемента, який він вкладений. Якщо елемент знаходиться в тег <body>, то він розтягнеться на всю сторінку. Таким чином, всі інші елементи після нього будуть відображатися з нового рядка.
  • inline-block – елемент буде такого розміру, який вимагається для вмісту цього елемента в рядок можна буде розташувати кілька таких елементів (залежить від розміру рядка та елементів). Крім цього, до такого об'єкту можна застосувати властивості margin і padding, аналогічно типу block.
  • inline – відображати елемент як рядковий. Рядкові елементи не мають відступів. Наприклад, слова в реченні можна вважати малими елементами. Вони мають розмір рівний свого вмісту, переносяться по рядках і слідують один за одним. Верхні margin і padding до таких елементів застосувати не можна.
 

position – позиціонування елемента. Має такі популярні варіанти:
  • absolute – абсолютна. Відлік позиції починається з початку сторінки, або щодо об'єкта, на який він укладений, якщо у нього властивість position одно relative. Найчастіше використовується в зв'язці саме з relative зовнішнім об'єктом. Наприклад,
    HTML:
    <div class='product-photo'>
    <span class='label-sale'>Розпродаж!</span>
    <img src='product-photo.jpg'>
    </div>
    

    CSS:
    .product-photo {
    position: relative;
    }
    .label-sale {
    position: absolute;
    top: 0px;
    right: 0px;
    }
    

    Елемент .label-sale буде позиціонуватися щодо .product-photo, так як у нього позиціонування relative. Top – вказує, щоб відлік вівся зверху. 0 означає, що елемент буде в самому верху. Аналонично «right: 0px» – праворуч. Так робляться підпису новинок, розпродажів і іншого в списках товарів. Кожен label-sale знаходиться праворуч угорі саме у свого товару.
    Для звіту знизу використовується параметр bottom, зліва – left. Найчастіше, використовується bottom або top, right або left. Тобто вказується лише один спосіб відліку по горизонталі і вертикалі (ліворуч або праворуч і зверху або знизу, відповідно).
  • relative – відносне. Позиціонування елемента щодо того, де він розташований в даний момент. Використовується, коли елемент потрібно трохи «посунути».
  • fixed – фіксоване. Незалежно від прокручування вікна браузера, елемент буде знаходиться на зазначеній позиції. Використовується, зазвичай, для закріпленої на верхній або нижній плашки сайту, для віджетів консультантів, які завжди знаходяться на одній позиції.
 

Інші параметри можна вивчити тут. Зазвичай, вони просто оформляють який-небудь тег. Найбільш популярні параметри:
background, border, clear, color display, float, font-family, font-size, font-style, font-weight, height, left, margin, overflow, padding, position, right, text-align, text-decoration, top, width.



Як швидко редагувати стилі
У браузері Chrome клікніть на будь-який елемент сторінки правою кнопкою миші, в меню виберіть «Просмотрет код» або «Інспектувати елемент».
Внизу відкриється панель, де буде видно HTML-код сторінки. У ньому буде підсвічена рядок з елементом, за яким кликали (1).

4

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

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

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

5

Тут ми переписали властивість color, додали background і margin-top (який замінив верхнє опис). Це змінило вигляд кнопки і підняв її вгору за рахунок зменшення зовнішнього верхнього відступу.

Тепер скопіюйте цей блок CSS код і вставте його в кінець свого .css файлу, або замініть на нього існуючий блок з даними селектором. У нашому випадку це блок «.tp-static .btn.btn-border.btn-warning». Його потрібно знайти .css файлі і замінити на код браузера. Так наші зміни збережуться сторінці.

 

Популярні завдання

Погратися зі шрифтами
Щоб замінити шрифт для всіх елементів, які потрібно знайти .css файлах всі властивості font й font-family. У стилях, зазвичай, через кому перераховується кілька шрифтів. Якщо перший не встановлений на комп'ютері, в якому відкривається сайт, то використовується другий. Потрібно замінити вказані назви шрифтів на свої. Якщо назва шрифту з пропуском, то його потрібно вказувати в лапках.
Наприклад, було, CSS:
body, input, textarea, select {font-family: Arial, Verdana, Tahoma;}
.title { font-family: Verdana, Tahoma;}

Стало, CSS:
body, input, textarea, select {font-family: 'Open Sans', sans-serif;}
.title { font-family: 'Open Sans', sans-serif;}


Тепер всі шрифти будуть Open Sans. Це нестандартний шрифт (не у всіх встановлений на комп'ютері). Його та інші шрифти можна знайти на fonts.google.com. Справа в фільтрі потрібно вибрати Languages=Cyrillic для текстів без спецсимволов (для заголовків, наприклад) або Cyrillic Extended для шрифтів, які використовуються для довільних текстів (1). У списку знайдених шрифтів виберіть потрібний і натисніть на плюсик, який стане минусиком (2). Внизу з'явиться панель з вибраним шрифтом (3).

6

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

Після вибору шрифту, на вкладці Embed скопіюйте код <link> (1) і додайте його у <head> свого сайту перед файлом стилів, в якому він використовується (2).

7

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


Це трохи посунути
Ключове слово тут «трохи». На 1-2 см, рідко більше. Це робиться з допомогою CSS параметрів margin, padding або position.

Наприклад, потрібно трохи посунути логотип і зробити його трохи менше.

HTML-код такої, припустимо:
<div id='logo'><a href='/'><img src='logo.png' ></a></div>


Головне – це визначити селектор і вказати йому потрібні стилі. У нашому випадку це «#logo img». Ієрархія читається справа наліво: картинка img, яка знаходиться в елементі #logo. Навпаки (зліва направо) – у блоці #logo повинна бути картіка img, от її й треба рухати.
Спосіб 1. Через margin рухаємо вправо і вниз.
#logo img {
margin-top: 10px; /* Відступ зверху рухає вниз */
margin-left: 20px; /* Відступ зліва рухає вправо */
width: 100px; /* Вказуємо потрібне значення параметру «трохи менше» */
}


Спосіб 2. Через padding теж рухаємо вправо і вниз.
Тільки padding – це внутрішній відступ, тому нам потрібно робити цей відступ для елемента, в якому знаходиться картинка. Тобто всередині блоку #logo повинен бути відступ. Значить наш селектор вже «#logo».
#logo {
padding-top: 10px; /* Верхній відступ в елементі зрушить все вниз */
padding-left: 20px; /* Відступ зліва рухає все вправо */
}

В даному випадку нам знадобиться ще окремий блок стилів для зміни розміру логотипу:
#logo img {
width: 100px;
}

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

Спосіб 3. Через position.
Нам знадобиться position з значнием relative, так як потрібно посунути логотип трохи щодо його поточного положення.
#logo img {
position: relative;
top: 10px;
left: 20px;
width: 100px;
}



Це поміняти місцями, тут додати
Тут знадобиться переміщення HTML коду на сторінці і, можливо, коригування стилів. Наприклад, у нас є такий код.
<div id= "header'>
<div class='header-left'>
Логотип
</div>
<div class='header-center'>
<div class='phone'>Телефон</div>
</div>
<div class='header-right'>
Пошук
</div>
</div>

Код CSS такий для нашої задачі.
.header-center .phone {
font-size: 24px;
}


Наше завдання – перенести телефон в правий блок, а пошук – центр. Для цього, потрібно поміняти вміст блоків місцями. Вийде так.
<div id= "header'>
<div class='header-left'>
Логотип
</div>
<div class='header-center'>
Пошук
</div>
<div class='header-right'>
<div class='phone'>Телефон</div>
</div>
</div>


Але при відкритті сторінки ми побачимо, що стиль телефону змінився. Він вже не буде 24 розміром шрифту. Це пов'язано з тим, що телефон знаходиться в блоці «.header-center». Тому, нам потрібно виправити стилі відповідно до нової версткою, щоб селектор знаходив телефон в новому блоці. Для стилів телефону .header-center в CSS замінити на .header-right.
.header-right .phone {
font-size: 24px;
}


Якби початкові стилі мали такий вигляд:
.phone {
font-size: 24px;
}

Тобто без прив'язки до зовнішнього блоку (.header-center), який змінився (на .header-left), тоді правки в стилях не потрібні.

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


Це перефарбувати
Для перефарбовування потрібно просто визначити селектор елемента і задати йому нові стилі.
Припустимо, у нас є такий код.
<div id= "header'>
<div class='phone'>
+1 (234) 56-78-910
<a class='callback' href='#'>Замовити дзвінок</a>
</div>
</div>

Нам потрібно зробити телефон червоним, а посилання замовлення дзвінка – синій. При наведенні посилання має бути зеленою.
#header .phone {
color: #FF0000;
}

/* Окремо потрібно вказати колір і посилання */
#header .phone a.callback {
color: #0000FF;
}
#header .phone a.callback:hover {
color: #00FF00;
}

Тут через двокрапку вказується так званий псевдоклас: hover. Він додається елементу при наведенні на нього курсору. Детальніше про такі класи тут.


відкинути
Аналогічно перефарбовуванню, потрібно визначити селектор і приховати цей елемент через параметр display, наприклад:
#header .cart {
display: none;
}



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


1. Коли блоки сильно змістилися
Швидше за все, десь бракує закриваючих тегів. Або навпаки, закриваючий тег занадто рано з'явився. Важливо дотримуватися такі правила верстки. 1. Кожному відкриває тег повинен бути закриває. 2. Теги не повинні перетинатися. Кожне з цих правил було докладно описано вище.
Щоб уникнути таких зміщень, рекомендується форматувати код з відступами. Кожен новий блок починати з нового рядка і додатковим відступом. Наприклад:
<div>
<p>
<a>...</a>
</p>
</div>
<div>
<ul>
<li>...</li>
</ul>
</div>

Так видно, що всі теги зазначені коректно і рівно. А помилки, зазвичай, виникають в таких ситуаціях.
<div>
<p>
<a>...</a>
</p>
<div>
<ul>
<li>...</li>
</ul>
</div>

Тут не закритий перший тег div.
<div>
<p>
<a>...</a>
</p>
<div>
<ul>
<li>...</li>
</ul>
</div>
</div>

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

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


2. Коли оформлення не таке, як очікується
У цьому випадку некоректно вказано селектор. Якщо блок був перенесений з іншого блоку, то переконаєтеся, що в селекторі не вказано старий блок. Як було вище в прикладі .header-center .phone .headre-left .phone. Оскільки стилі успадковуються, то потрібно переконатися, що всі селектори, які раніше застосовувалися до елементу, застосовуються і при новій структурі блоків. Для цього використовуйте інструмент «Інспектувати елемент», який показує в правій частині всі застосовувані стилі елемента.

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

 
Висновок
Сподіваємося, дана інструкція допоможе вам вносити правки в існуючий дизайн сайту самостійно,
або говорити з помічниками на одній мові.
Можливо, ця інструкція стане відправною точкою в вивчення HTML і CSS з сайту Htmlbook.

Легкості в редагуванні своїх сайтів!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.