Навигация
Категории
Лучший обменник
Навигация
Категории
Поиск
Лучший обменник

Урок 1 | Создание структуру файлов

Доброго времени суток дорогие читатели этого блога. Мы начинаем создание нашего первого сайта. Для первого сайта я возьму простой и легкий шаблон. Мы не будем использовать всякие фреймворки и CMS
Опубликованно
11 Февраля 2023 в 20:52
Просмотров
124
На чтение
14

Введение

Доброго времени суток дорогие читатели этого блога. Мы начинаем создание нашего первого сайта. Для первого сайта я возьму простой и легкий шаблон. Мы не будем использовать всякие фреймворки и 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;
}
В закладки
Дмитрий(Администратор)
Веб - разработчик
Рассылка
Подпишись на новости! И узнавай самый первый о новых публикациях нашего сайта!


Рекомендации