Ми зробили кілька статей-уроків по CSS 3, а саме:  Як зробити градієнтний background (фон) за допомогою 1px малюнка і з допомогою тільки CSS 3 та Як зробити заокруглені краї за допомогою css але, взявши до уваги критику друзів, вирішили дещо змінити підхід. Інтернет стрімко развиваеться, число сайтів росте в геометричній прогресії, все більше людей хочуть навчитися створювати сайти і стати веб майстрами. Але в кожній справі потрібен системний підхід, почавши створювати уроки CSS 3 та HTML5, ми забігли трохи вперед, забувши про ту частину людей, які тільки почали вивчати СSS та  HTML. Тому сьогодні у нас буде Урок № 1 | З чого почати?

Уроки CSS 3 та HTML 5 з нуля

Урок №1

Для початку вивчення CSS 3 та HTML5, потрібно зробити наступне:

1) Створити нову папку, і перейменувати її, наприклад, на Test (назва значення не має).

2) Створити в папці Test нову папку і перейменувати її в Images

3) Створити в папці Test нову папку і перейменувати її в CSS

3) Створити два нових текстових документи: звичайні . txt текстові файли.

4) Перейменувати перший текстовий документ в index.html

5) Перейменувати другий текстовий документ в styles.css

6) Перемістити styles.css в папку CSS

Тепер у нас є все, що потрібно для початку навчання CSS 3 та HTML5, крім редактора. Особисто я використовував різні редактори, але зупинився на Dreamweaver CS5.5. Але так як це платна програма, рекомендую ще відмінний безкоштовний редактор Notepad + +.

Отже, почнемо. У нас є index.html – це головна сторінка, у нас є папка CSS, з файлом styles.css, в цьому файлі будуть стилі css. Для початку, нам потрібно створити початкову структуру в index.html. Для цього відкриваємо його редактором (цей файл можна відкрити будь-яким текстовим редактором, починаючи з блокнота, але спеціальні редактори підсвічують теги, що істотно полегшує роботу) наберіть у свій index.html мій код, можна без коментарів, вони для розуміння. Код ви знайдете  нижче. Коментарі задаються в ось такому символі <! — Коментарі — > (без пропусків) писати їх не обов’язково, це як підказки.

<!doctype html> <!--Тег DOCTYPE (что означает "объявление типа документа")- указываетть браузеру, 
как правильно отображать документ и по какой схеме -->         
<head>
<meta charset="UTF-8"><!--Кодировка сайта-->
<title>Уроки от WCDT</title><!--Название сайта, заголовок который отображаеться в овкладке в браузере-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/><!--Эта строчка подключает стиль-->
</head>
<body>
<h1>Это моя первая html страница</h1>
</body>
</html>

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

створюємо index.html і підключаємо style.css

Так як ми не просто створили html сторінку, а ще й підключили до неї стиль, давайте що-небудь в ньому напишемо. Отже, відкрийте файл styles.css і скопіюйте туди два стилі, які наведені нижче, коментарі підказки в комплекті, зверніть увагу щоCSS коментарі задаються інакше ніж в html, ось так / * коментар * /

body {background:#090;text-align:center;} /* тут задано цвет фона body, и выравнивание текста по центру*/
body h1 {color:#CC0000;} /*цвет фона body */

І так з цього Ви уроку ви навчилися створювати html сторінку в новому стандарті HTML 5, підключати до неї стиль. Також в папці Test створена необхідна структура, яка стане Вам нагоді для подальшого освоєння CSS 3 та HTML5. Кожному новачкові важливо запам’ятати, що CSS стиль писати потрібно тільки в styles.css, не варто прописувати стилі в index.html. Ну що, на цьому урок № 1 по вивчення CSS 3 та HTML5, можна вважати завершеним!