Найти в Дзене
Советы от гуру
7 подписчиков

Как Создать Свой Первый Сайт: Простое Руководство для Новичков

1
2 мин
Сегодня создать сайт проще, чем когда-либо. Не нужно быть экспертом, чтобы создать свой первый сайт. В этой статье мы рассмотрим основы: от структуры HTML до базового дизайна с CSS. К концу вы сможете создать простой, но функциональный сайт и опубликовать его в интернете. Для создания сайта вам понадобится текстовый редактор и браузер для просмотра изменений. Можно использовать: HTML (HyperText Markup Language) — это язык разметки, который создает структуру веб-страницы. Давайте создадим базовый HTML-файл. <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мой Первый Сайт</title> </head> <body> <h1>Добро пожаловать на мой сайт!</h1> <p>Это мой первый сайт, и он пока простой, но я учусь!</p> </body> </html> CSS (Cascading Style Sheets) отвечает за оформление сайта: цвета, шрифты, размеры и расположение элементов. Теперь добавим стиль в style.css: body { font-family: Arial, sans-serif; background-color: #f0f0f0; c
Оглавление

Введение

Сегодня создать сайт проще, чем когда-либо. Не нужно быть экспертом, чтобы создать свой первый сайт. В этой статье мы рассмотрим основы: от структуры HTML до базового дизайна с CSS. К концу вы сможете создать простой, но функциональный сайт и опубликовать его в интернете.

Шаг 1: Подготовка Рабочей Среды

Для создания сайта вам понадобится текстовый редактор и браузер для просмотра изменений. Можно использовать:

  • Текстовый редактор: VS Code, Atom, Sublime Text.
  • Браузер: Google Chrome, Firefox, Edge.

Шаг 2: Основы HTML

HTML (HyperText Markup Language) — это язык разметки, который создает структуру веб-страницы. Давайте создадим базовый HTML-файл.

  1. Создайте новую папку для проекта и в ней новый файл, назовите его index.html.
  2. Откройте index.html в текстовом редакторе и добавьте базовую структуру HTML:
  3. <!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Мой Первый Сайт</title>

</head>

<body>

<h1>Добро пожаловать на мой сайт!</h1>

<p>Это мой первый сайт, и он пока простой, но я учусь!</p>

</body>

</html>

  • <html> — главный тег, который обозначает начало HTML-документа.
  • <head> — содержит метаданные, такие как заголовок страницы и кодировку.
  • <body> — основная часть страницы, где мы размещаем видимый текст и элементы.

Шаг 3: Добавление Стилей с CSS

CSS (Cascading Style Sheets) отвечает за оформление сайта: цвета, шрифты, размеры и расположение элементов.

  1. Создайте файл style.css в той же папке, что и index.html.
  2. Свяжите файл стилей с HTML, добавив ссылку на CSS в <head>:
  3. <link rel="stylesheet" href="style.css">

Теперь добавим стиль в style.css:

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

color: #333;

margin: 0;

padding: 0;

}

h1 {

color: #2c3e50;

text-align: center;

margin-top: 50px;

}

p {

text-align: center;

font-size: 18px;

}

  • body — стиль для всей страницы, задающий фон и цвет текста.
  • h1 и p — стиль для заголовка и абзаца, выравнивающий текст по центру и задающий цвет.

Шаг 4: Добавление Изображений и Ссылок

Добавим изображение и ссылку, чтобы сайт выглядел интереснее.

  1. Вставьте изображение в HTML:
  2. <img src="мой_фото.jpg" alt="Фото" style="display: block; margin: 20px auto; width: 200px;">
  • src указывает путь к изображению (можно использовать локальный файл или URL).
  • Добавьте ссылку на другой сайт:
  • <p>Посетите <a href="https://example.com" target="_blank">мой блог</a> для большего контента!</p>
  1. href — адрес ссылки, а target="_blank" открывает её в новой вкладке.

Шаг 5: Опубликуйте Сайт на GitHub Pages

GitHub Pages — это простой способ опубликовать статический сайт.

  1. Зарегистрируйтесь на GitHub и создайте новый репозиторий.
  2. Загрузите свои файлы (index.html и style.css) в этот репозиторий.
  3. Перейдите в Settings репозитория, прокрутите до GitHub Pages и выберите ветку для публикации (main или master).
  4. GitHub предоставит ссылку на ваш сайт. Теперь он доступен онлайн!

Заключение

Поздравляем, вы создали и опубликовали свой первый сайт! Этот простой сайт можно улучшить, добавив больше стилей, секций и интерактивности с помощью JavaScript. Сайт на GitHub Pages — это отличный способ продемонстрировать свои навыки и делиться контентом.

Теперь у вас есть все инструменты, чтобы экспериментировать с дизайном, добавлять новые страницы и делать ваш сайт ещё лучше!