Урок 1 | Создание структуру файлов
Введение
Доброго времени суток дорогие читатели этого блога. Мы начинаем создание нашего первого сайта. Для первого сайта я возьму простой и легкий шаблон. Мы не будем использовать всякие фреймворки и CMS, код будет написан своими ручками.
В этом уроке мы ознакомимся с шаблоном, создадим структуру сайта, раскидаем все по папкам для удобства, чтобы не путаться потом в дальнейшем в файлах. Для урока я взял шаблон в свободном доступе ссылка на шаблон.
Создание каталога сайта
Давайте создадим папку в которой и будет находиться наш сайт, назовем ее как вам будет угодно. В моем случае это «First-site». Далее в этой папке создаем следующе папки:
- css
- image
- font
- js
И создадим первый и главный файл для создания сайта: index.html. В нем и будет весть наш html код, но нам ещё в обязательном порядке нужны стили, так как сайт без стилей не будет выглядеть красочным и презентабельным. В папке css добавьте файл: main.css. В ней будут прописаны стили для сайта. На этом все, далее будем добавлять и обновлять по мере написания. А вот как сейчас у Вас должно выглядеть файловая структура:
Подключение стилей
Давайте откроем наш проект в редакторе. Я использую Sublime Text. Откройте index.html и напишите данный код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Это стандартная структура HTML. Давайте в head подключим следующий код:
<link rel="stylesheet" href="css/main.css">
Давайте проверим подключение. Напишите в body: Hello Word. Откройте main.css и пропишите следующие стили:
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
Если вы сделали все тоже самое что и я, то должно получится также как на скриншоте:
Конечный код должен выглядеть следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Document</title>
</head>
<body>
Hello Word
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
