Авторизация
Подписчики
0
Создаем index.html и подключаем style.css (Урок №1)
Описание
Создаем index.html и подключаем style.css (Урок №1)
Интернет стремительно развиваеться, число сайтов растет в геометрической прогрессии, все болльше людей хотят научиться создавать сайты, и стать веб мастерами. Но в каждом деле нужен системный подход, начав создавать уроки CSS 3 и HTML5, мы забежали немножко вперед, забыв про ту часть людей которые только, только начали изучать SS 3 и HTML5. Поэтому сегодня у нас будет Урок №1| С чего начать?
Уроки CSS 3 и HTML 5 с нуля
Урок №1| С чего начать?
Для начала изучения CSS 3 и HTML5, нужно сделать следующее:
1) Создать новую папку, и переименовать ее например на Test, название значения не имеет.
2) Создать в паке Test »новая папка» и переименовать ее в Images
3) Создать в паке Test »новая папка» и переименовать ее в CSS
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> <!--Тег 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 и подключаем style.css
Так как мы не просто создали 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, можно считать завершенным!
Рекомендуемые комментарии
Комментариев нет