Для создания своего первого сайта следуйте этой инструкции и используйте предоставленный код для создания своего сайта
1. Создайте новый файл с расширением .html.
Открываем любой текстовый редактор (например, большинство компьютеров имеет Блокнот)
Добавьте следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Название вашего сайта</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок вашего сайта</h1>
<p>Привет, мир! Это мой первый сайт.</p>
</body>
</html>
Обязательно сохраните его, нажав сочетание клавиш Ctrl + S
2. Создайте новый файл с расширением .css. (по аналогии с пунктом 1).
Откройте его в текстовом редакторе и добавьте следующий код:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
p {
font-family: verdana;
font-size: 20px;
}
Обязательно сохраните его, нажав сочетание клавиш Ctrl + S
3. Сохраните файлы в одной и той же папке на вашем компьютере. Назовите файл HTML любым именем, но с расширением .html. Назовите файл CSS style.css.
4. Откройте файл HTML в любом браузере. Вы должны увидеть заголовок вашего сайта и приветственное сообщение на светло-голубом фоне.
Теперь, когда вы создали свой первый сайт, можете изменять его, добавлять новые элементы и стили, пока не будете удовлетворены результатом.
Варианты, с помощью которых можно добавить больше разнообразных элементов на ваш сайт:
Добавьте гифку и варианты выбора смешно или нет
Вот пример кода:
Изображение
Чтобы добавить изображение на ваш сайт, используйте тег <img>. Вот пример кода:
<img src="image.jpg" alt="Описание изображения">
Кнопка
Чтобы добавить кнопку на ваш сайт, вам нужно использовать тег <button>. Вот пример кода:
<button>Нажми меня</button>
💡 Идея! Добавьте гифку и варианты выбора смешно или нет
Вот пример кода:
<!DOCTYPE html>
<html>
<head>
<title>Простой код на HTML со смешной гифкой и двумя кнопками выбора</title>
</head>
<body>
<img src="smeshnaya-gifka.gif" alt="Смешная гифка">
<button type="button">Смешно</button>
<button type="button">Не смешно</button>
</body>
</html>
Ссылка
Чтобы добавить ссылку на ваш сайт, используйте тег <a>. Вот пример кода
<a href="<https://www.example.com>">Нажми меня</a>
Список
Чтобы добавить список на ваш сайт, используйте тег <ul> для создания ненумерованного списка или тег <ol> для создания нумерованного списка. Вот пример кода:
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>
А если вам понравился процесс вёрстки, то мы точно можем подсказать где можно развиваться дальше — приходите на наш курс по Front-end разработке! Подробнее о курсе можно почитать на нашем сайте: https://myitschool.by/kursy-it/front-end-razrabotka/