1. Начинаем строить сайт.

Уроки Сент. 23, 2019 0 2723 Добавить в список чтения

Первый урок построения сайта на 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"