Урок 1: Основы HTML – Ваш первый шаг к господству в интернете (Теперь с Caddy сервером!)

Урок 1

Урок 1: Основы HTML – Ваш первый шаг к господству в интернете (Теперь с Caddy сервером!)

Добро пожаловать, начинающий повелитель интернета! Сегодня мы погрузимся в удивительный мир HTML — тот самый секретный соус, на котором держится каждый сайт. Вы создадите свою первую веб-страницу (да, это реально!), и, если хотите почувствовать себя настоящим мастером, мы покажем, как разместить её локально с помощью Caddy. Но не волнуйтесь, Caddy не обязателен для изучения HTML, он здесь просто для того, чтобы добавить вам ещё больше крутизны. Готовы? Поехали!

Шаг 1: Что такое HTML?

HTML (Hypertext Markup Language) — это основа каждого веб-сайта. Это язык, который рассказывает браузерам, как отображать контент вроде текста, изображений и ссылок. Представьте, что это рецепт для вашего сайта: вы добавляете ингредиенты (контент), а HTML показывает браузеру, как это всё правильно “приготовить”.

Теперь, когда вы знаете, что такое HTML, давайте начнем кодить и создадим свою первую веб-страницу!

Шаг 2: Пишем HTML (Выбираем любимый текстовый редактор)

Прежде чем начать писать код, нужно выбрать место, где вы будете писать свой HTML. Можно открыть VIM (если чувствуете себя терминальным ниндзя), или воспользоваться VS Code, если предпочитаете современное, удобное окружение. По сути, подойдёт любой текстовый редактор — даже Notepad, если вам хочется немного поностальгировать (но для удобства лучше выбрать что-то с подсветкой синтаксиса, это спасёт вам нервы).

Вот базовая структура HTML-документа:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Смотрите, я уже кодю и раздаю свою веб-страницу как профи!</p>
</body>
</html>

Что здесь происходит?

  • <!DOCTYPE html>: Это говорит браузеру, что документ написан на HTML5.
  • <html>: Это как уютная обёртка для всего вашего кода. Всё идёт внутрь неё.
  • <head>: Здесь хранится вся техническая информация (например, заголовок страницы — скучно, но важно).
  • <title>: Это то, что будет отображаться на вкладке браузера.
  • <body>: Здесь находится весь видимый контент — текст, изображения и так далее.

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

Шаг 3: Устанавливаем Caddy (Потому что вы крут!)

Почему именно Caddy?

Вам не нужен Caddy для изучения HTML, но это крутой способ увидеть вашу веб-страницу на локальной сети. Представьте, что это последний штрих, который добавляет вам +10 к харизме. К тому же его невероятно просто настроить.

Установка Caddy на Ubuntu

  1. Обновите систему:
sudo apt update && sudo apt upgrade -y
  1. Установите Caddy:

Запустите эту простую команду:

sudo apt install caddy
  1. Проверьте, работает ли:
caddy version

Если вы видите номер версии — поздравляю, всё работает!

Установка Caddy на Arch Linux

  1. Обновите систему:
sudo pacman -Syu
  1. Установите Caddy:
sudo pacman -S caddy
  1. Проверьте установку:
caddy version

Всё! Теперь Caddy установлен на Arch Linux. Давайте теперь использовать его для раздачи вашей веб-страницы.

Шаг 4: Запускаем вашу первую HTML-страницу через Caddy

  1. Создайте директорию для вашего HTML-файла:
mkdir ~/my-website
cd ~/my-website
  1. Создайте свой первый HTML-файл:

Сохраните следующий код как index.html в папке ~/my-website:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница на Caddy</title>
</head>
<body>
    <h1>Добро пожаловать на мою первую страницу</h1>
    <p>Эта страница раздаётся через Caddy. Как вам такое?</p>
</body>
</html>
  1. Запустите Caddy:

Перейдите в папку с сайтом и выполните:

caddy file-server --listen :8080

Теперь Caddy раздаёт вашу страницу на порту 8080. Давайте проверим!

  1. Откройте свою страницу:

Откройте браузер и перейдите по адресу http://localhost:8080. Вы увидите свою первую веб-страницу. Отличная работа!

Шаг 5: Ваше задание — Создайте и разместите свою веб-страницу

Теперь пришло ваше время блистать. Создайте свою веб-страницу и разместите её через Caddy. Включите:

  • Жирный заголовок с вашим именем.
  • Параграф, в котором вы расскажете, почему учите HTML (чтобы стать повелителем Интернета, конечно же).
  • Ссылку на ваш любимый вебсайт (потому что почему бы и нет?).

Вот пример для начала:

<!DOCTYPE html>
<html>
<head>
    <title>Добро пожаловать на мой супер-сайт</title>
</head>
<body>
    <h1>Привет, я [Ваше имя]</h1>
    <p>Я учу HTML, чтобы создать что-то великое (или хотя бы не сломать свой сайт).</p>
    <a href="https://www.example.com">Загляните на мой любимый сайт!</a>
</body>
</html>

Снова запустите сервер Caddy:

caddy file-server --listen :8080

Перейдите по адресу http://localhost:8080 и наслаждайтесь результатом. Вы только что создали и запустили свою первую веб-страницу!

Итоги:

  • Вы освоили основы HTML и создали свою первую веб-страницу.
  • Вы установили и использовали Caddy для локального размещения своей страницы (потому что зачем не показывать, на что вы способны?).
  • Помните, Caddy здесь только для фана — это не обязательно для изучения HTML. Он просто добавляет немного стиля.

В следующем уроке мы изучим ещё больше возможностей для того, чтобы сделать ваши страницы интереснее, от форматирования текста до списков. А пока наслаждайтесь своей локально запущенной страницей!

HTML  Начинающие  Веб-дизайн  Caddy  Ubuntu  ArchLinux 

Смотрите также