Создаем index.html и подключаем style.css (Урок №1)

Опубликовано: 24.08.2018

Мы сделали несколько статей-уроков по CSS 3, а именно Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3 и Как сделать скругленные углы с помощью css , но взяв во внимание критику друзей, решили несколько изменить подход. Интернет стремительно развиваеться, число сайтов растет в геометрической прогрессии, все болльше людей хотят научиться создавать сайты, и стать веб мастерами. Но в каждом деле нужен системный подход, начав создавать уроки CSS 3 и HTML5, мы забежали немножко вперед, забыв про ту часть людей которые только, только начали изучать SS 3 и HTML5. Поэтому сегодня у нас будет Урок №1| С чего начать?

Урок №1| С чего начать?

Для начала изучения CSS 3 и HTML5, нужно сделать следующее:

1) Создать новую папку, и переименовать ее например на Test, название значения не имеет.

2) Создать в паке Test «новая папка» и переименовать ее в Images

3) Создать в паке Test «новая папка» и переименовать ее в CSS

Создание сводной таблицы в Excel

3) Создать два новых текстовых документа, это обычные фаилы блокнота, с расширение «.txt».У вас должно получиться два файла: «Новый текстовый документ.txt» и «Новый текстовый документ(2)».txt

4) Переименовать Новый текстовый документ.txt в index.html

5) Переименовать Новый текстовый документ(2).txt в 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>  <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 страницу, даже круче, фактически вы создали сайт, состоящий из одной страницы, и его хоть сейчас можно разместить в интернете.

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

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

И так из этого Вы урока вы научились создавать html страницу в новом стандарте HTML 5, подключать к ней стиль. Также в папке Demo создана необхомая структура которая пригодиться Вам для дальнейшего освоения CSS 3 и HTML5. Каждому, новичку важно запомнить, что CSS стиль писать нужно только в styles.css, не стоит прописывать стиле в index.html. Ну что ж, на этом Урок №1 по изучения CSS 3 и HTML5, можно считать завершенным!