Сегодня разберем что необходимо сделать, что бы создать вашу первую страницу.
Для того что бы создать страницу вам необходимо скачать, установить и настроить любой компилятор кода. На данном канале, ранее, я уже рассказал какой компилятор использую. Это Visual Studio Code. На его примере покажу как сделать первый шаг.
Когда VS Code у вас запущен и настроен необходимо создать папку в любом удобном для вас месте. В данной папке создать два файла.
Первый файл необходимо назвать "index.html"
Второй файл "style.css"
Далее, заходите в VS Code, нажимаете "File" -> "Open Folder" и выбираете вашу папку.
Нажимаем на index.html и вписываем данный код... (в конце статьи есть весь написанный код, можно скопировать и вставить в ваш компилятор)
И делаем аналогичные действия с style.css
Как только все выполните можно проверить, нажать на "Go Live" (справа снизу) У вас должно появиться пустое окно вашей страницы.
Грубо говоря, ваша страница создана. Но она совершенно пустая. Давайте добавим в нее некоторую информацию.
Внутри <body> напишем <div class="p">Это моя первая страница</div>. После чего нажимаете сочетание Ctrl + S (сохранить изменения) переходим на нашу страницу и видим следующее сообщение.
<div> это блочный элемент. В HTML любой элемент открываться с помощью <...> и закрывается </...>. class это атрибут, который присваивает имя объекту, что бы в будущем мы могли к нему обратиться.
Теперь попробуем придать данному тексту стиль.
Для этого перейдем в style.css и напишем
.p{
font-size: 50px;
color: blue;
}
Сохраняем и проверяем, должно получиться..
Сейчас вы сможете самостоятельно поэксперементировать. Дописать новые предложения, поиграться с цветами и размерами.
HTML КОД:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width'>
<title>Тест</title>
<link rel='stylesheet' href='style.css' />
</head>
<body>
<div class="p">Это моя первая страница</div>
</body>
</html>
CSS КОД:
* {
padding: 0;
margin: 0;
border: 0;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 400;
}
.p{
font-size: 50px; /*размер текста*/
color: blue; /*цвет текста*/
}
На этом все, если остались вопросы или есть что дополнить пишите в комментарии.
Всего доброго!