1. Начинаем строить сайт.
Первый урок построения сайта на HTML с использованием CSS

На первом уроке подготовим необходимые папки и файлы которые нам потребуются в дальнейшем для создания своего сайта.
Предварительно мы уже ознакомились с программой Notepad++ на вступительном уроке. Кто пропустил смотрим тут
Мы создали файл index.html в папке "Сайт" создадим теперь в этой папке еще папки "css" и папку "images" как понятно из названий папок в одной мы будем сохранять файлы стилей .css а в другой картинки которые потребуются при написании сайта.
Создали? Тогда поехали дальше. В папке "css" нужно создать свой первый файл стилей, откроем Notepad++ и создадим новый документ, И вставим вот такой код
body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ }
Теперь сохраним его как Cascading Style Sheets .css
В коде зеленым цветом выделены коментарии, Если код заключить в такие тэги /* */ то браузер будет игнорировать, так можно коментировать код, чтоб и самому не запутаться
Теперь у нас есть файл стилей, сейчас он пока не работает, для того чтоб браузер видел этот файл и сопоставил его с нашим сайтом, нужно подключить его в нашем главном файле index.html
Откроем в notepad++ наш файл index.html и добавим строчку кода между тегами <head>
<link rel="stylesheet" href="style.css" type="text/css"/>
У вас должно получиться вот так
<!-- это комментарии. их не видно при отображении файла в браузере--> <html> <!-- тег html обозначает открытие файла html--> <head> <!-- head обозначает открытие головной части документа--> <link rel="stylesheet" href="css/style.css" type="text/css"/> <!-- подключаем файл стилей <!-- title обозначает название документа. Отображается вверху браузера --> <title> Название Вашей первой странички </title> <!-- закрываем тег title иначе у нас всё последующее будет считаться заголовком--> </head> <!-- тег head также нужно закрыть--> <body> <!-- наконец открываем тело нашего документа. Здесь будет всё его содержание--> <!--начиная отсюда вставляем любые текст, заголовки, ссылки и тп--> <h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка. Есть ещё h2, h3 и так до h6. самого маленького заголовка--> Это моя первая web-страничка! </body> <!--тело также следует закрыть, после него уже не вставляем текст и тп--> </html> <!-- закрывающий тег html обозначает закрытие файла html-->
В атрибуте href указывается путь к css файлу,
Теперь запустите файл index.html и видим что надписи немного изменились, файл стилей работает В дальнейшем мы будем дополнять файл стилей, указывать браузеру какой фон странички, расположение элементов странички и многое другое.
На этом урок закончу продолжение следует
Если есть вопросы, пишите в коментариях или в контактах сообщением. Можно в группе в "VK"