- Автор темы
- #1
Всем, привет!
Так как я WEB-Developer на фрилансе, решил записать для вас уроки по созданию сайта с нуля.
В этом курсе, я вам объясню всю базу WEB-разработок, а также мы напишем сайт на тематику САМП для проекта Florida RP(первое, что пришло на ум)
Для начало нам надо создать папку с проектом, где будут находиться все наши файлы, создаем папку, и внутрь папки создаем файл "index.html", потом создаем папку "source", и в ней еще 3 папки: "css", "js" и "img". Теперь, давайте начнем писать наш сайт, открываем файл "index.html" и пишем следующее:
Это база нашего сайта, теперь, как и в любом другом сайте, нам нужно написать "Навигационное меню", это меню в самом верху сайта, с логотипом и ссылками, надеюсь вы поняли, о чем я. Для это в теге <body> пишем:
Сохраняем и открываем файл, да на чистом HTML это выглядит - УЖАСНО!!! Так давайте же чуть поправим стиль, создаем в "source/css/" файл "style.css"
В этом файле мы будем стилиризировать наш сайт, открываем его и пишем:
Сохраняем, уже более-менее, но все равно - не то, дело в том, что мы используем стандарт шрифты, давайте подключим новые, есть 2 способа подключения шрифтов: 1 - мы скачиваем сами шрифты, и закидываем их в папку "fonts", 2 - который я буду использовать, это с помощью google fonts подключу их, так как для урока это сойдет, для этого в google fonts ищем шрифты, с боку будет кнопка, нажимаем и там код для подключения, я же подключу свои шрифты, в "index.html" в теге "head" после мета-информации пишем следующее:
Все, шрифты мы подключили, теперь в css файле приписываем их тегам:
в #logofirst{} пишем - font-family: 'Vina Sans', cursive;
в #logosecond{} пишем - font-family: 'Dancing Script', cursive;
в .header .navbar a{} пишем - font-family: 'Roboto Mono', monospace;
Сохраняем, обновляем страницу и видим, что все слетело, да, это так, у разных шрифтом - разный размер, а следовательно нам придется изменять значение "font-size" "left" и "top", со всеми изменениями у вас должно получится так:
И на конец урока, давайте сделаем нормальный фон, так как у меня сайт для Florida Role Play, я нашем img в интернете, закинул в папку "img", вы можете поставить свою, для этого в css файле полностью удаляем body{}, и в "index.html" пишем следующее:
Вместо "back.png" пишите название вашей картинки, на сегодня это все, завтра будем делать анимации при курсоре и тд
Если, что не понятно или у вас возникли проблемы - vk.com/ebaniysamper, отвечаю ВСЕМ!
Так как я WEB-Developer на фрилансе, решил записать для вас уроки по созданию сайта с нуля.
В этом курсе, я вам объясню всю базу WEB-разработок, а также мы напишем сайт на тематику САМП для проекта Florida RP(первое, что пришло на ум)
Для начало нам надо создать папку с проектом, где будут находиться все наши файлы, создаем папку, и внутрь папки создаем файл "index.html", потом создаем папку "source", и в ней еще 3 папки: "css", "js" и "img". Теперь, давайте начнем писать наш сайт, открываем файл "index.html" и пишем следующее:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Florida Role Play - Главная</title> // вместо Florida Role Play - пишите свое название
</head>
<body>
</body>
</html>
Это база нашего сайта, теперь, как и в любом другом сайте, нам нужно написать "Навигационное меню", это меню в самом верху сайта, с логотипом и ссылками, надеюсь вы поняли, о чем я. Для это в теге <body> пишем:
<header class="header">
<span id="logofirst">Florida</span>
<span id="logosecond">Role Play</span>
<div class="navbar">
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="//ссылку на форум с http://">Форум</a></li>
<li><a href="//ссылку на группу вк с http://">Новости</a></li>
<li><a href="donate.html">Магазин</a></li>
</ul>
</div>
</header>
Сохраняем и открываем файл, да на чистом HTML это выглядит - УЖАСНО!!! Так давайте же чуть поправим стиль, создаем в "source/css/" файл "style.css"
В этом файле мы будем стилиризировать наш сайт, открываем его и пишем:
body{
background-color: blue;
}
#logofirst{
color: yellow;
font-size: 40px;
position: absolute;
top: 30px;края
left: 60px;
}
#logosecond{
color: white;
font-size: 30px;
position: absolute;
top: 55px;
left: 60px;
}
.header .navbar{
margin: 0;
padding: 0;
list-style-type: none;
width: 550px;
text-align: center;
position: absolute;
top: 10%;
right: 45px;
}
.header .navbar li{
display: inline;
}
.header .navbar a{
color: #fff;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
font-size: 19px;
}
Сохраняем, уже более-менее, но все равно - не то, дело в том, что мы используем стандарт шрифты, давайте подключим новые, есть 2 способа подключения шрифтов: 1 - мы скачиваем сами шрифты, и закидываем их в папку "fonts", 2 - который я буду использовать, это с помощью google fonts подключу их, так как для урока это сойдет, для этого в google fonts ищем шрифты, с боку будет кнопка, нажимаем и там код для подключения, я же подключу свои шрифты, в "index.html" в теге "head" после мета-информации пишем следующее:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto+Mono&family=Russo+One&family=Vina+Sans&display=swap" rel="stylesheet">
Все, шрифты мы подключили, теперь в css файле приписываем их тегам:
в #logofirst{} пишем - font-family: 'Vina Sans', cursive;
в #logosecond{} пишем - font-family: 'Dancing Script', cursive;
в .header .navbar a{} пишем - font-family: 'Roboto Mono', monospace;
Сохраняем, обновляем страницу и видим, что все слетело, да, это так, у разных шрифтом - разный размер, а следовательно нам придется изменять значение "font-size" "left" и "top", со всеми изменениями у вас должно получится так:
body{
background-color: blue;
}
#logofirst{
color: yellow;
font-size: 60px;
position: absolute;
top: 17px;
left: 40px;
font-family: 'Vina Sans', cursive;
}
#logosecond{
color: white;
font-size: 45px;
position: absolute;
top: 54px;
left: 70px;
font-family: 'Dancing Script', cursive;
}
.header .navbar{
margin: 0;
padding: 0;
list-style-type: none;
width: 550px;
text-align: center;
position: absolute;
top: 7%;
right: 45px;
}
.header .navbar li{
display: inline;
}
.header .navbar a{
color: #fff;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
font-size: 19px;
font-family: 'Roboto Mono', monospace;
}
И на конец урока, давайте сделаем нормальный фон, так как у меня сайт для Florida Role Play, я нашем img в интернете, закинул в папку "img", вы можете поставить свою, для этого в css файле полностью удаляем body{}, и в "index.html" пишем следующее:
<style type="text/css">
body {
background: #000 url(source/img/back.png);
color: #fff;
background-attachment: fixed;
background-repeat: repeat-x;
background-size: 100%;
}
</style>
Вместо "back.png" пишите название вашей картинки, на сегодня это все, завтра будем делать анимации при курсоре и тд
Если, что не понятно или у вас возникли проблемы - vk.com/ebaniysamper, отвечаю ВСЕМ!