Дорогу вебу!
Привет всем!
Сегодня настал момент для вашей первой странички на HTML. Вы же знаете, как её создать?
Тогда распишем по шагам и для любого варианта.
С чего начать
Любая HTML-страница начинается с HTML файла (да ну?) - просто файла с расширением .html.
В нём и пишется разметка для нашей будущей страницы.
Как его создать, спрашиваете? Надо что-то скачивать? А на телефоне?
Владельцам компьютеров довольно повезло, ведь редактировать HTML и проверять результат будет намного проще. Обо всём по порядку.
Создай текстовый файл
На рабочем столе нажми [ПКМ (правая кнопка мыши)]> Создать > Текстовый файл.
Важно поменять его расширение на .html:
(если расширение файла не видно - прочитай эту статью (opens in a new tab))
Открой файл в редакторе
Теперь открой файл в любом текстовом редакторе.
Если нажать [ПКМ] по файлу и затем на "Изменить в Блокноте", то с HTML можно работать прям в старом добром Блокноте.
Напиши разметку и проверь её
Напиши какую-нибудь простую разметку страницы. Например ту, что приведена в первой лекции:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- это необязательно -->
<title>...</title>
</head>
<body>
<h1>Привет, HTML!</h1>
</body>
</html>А теперь просто открой HTML-файл (не в блокноте). В браузере должна появиться страница с тем, что ты написал.
Мои поздравления
Начало положено - выполняй лабораторную и переходи к шагам ниже.
Как сдать лабораторную
- Делай скриншоты кода и отображения странички.
- Запомни, куда ты сохранил файл.
- Когда ты сам будешь доволен результатом - опубликуй страничку.
Как опубликовать результат (бонус для гениев)
Если тебе нечем заняться и тебе резко захотелось выставить напоказ свой результат - читай далее.
Пользоваться мы будем GitHub Pages. Так вышло, что половина группы уже зарегистрирована на GitHub ¯_(ツ)_/¯.
Создай новый репозиторий
Предположим, что ты уже зашёл на GitHub в браузере.
Перейди на сам сайт GitHub (opens in a new tab), нажми на:
- плюсик, а затем "New repository", если ты на компьютере
- свой аватар справа сверху, затем "Your repositories" и затем "New", если ты с телефона
Назови репозиторий как тебе нравится. Главное оставь его публичным и добавь файл README (как на скриншоте).
Включи GitHub Pages
Сначала перейди в настройки репозитория:
Перейди на вкладку "Pages":
И в выпадающем списке под "Build and deployment", "Branch" выбери main (у меня тут написано master, но это не важно).
Жми на "Save" и всё готово.
Добавь файл страницы
Теперь вернись на вкладку "Code". Нажми на "+" или "..." рядом с зелёной кнопкой "<> Code v", затем на "Upload files".
Нажав на "Or choose your files", выбери файл страницы. После, нажми на "Commit changes".
Важно, чтобы файл страницы назывался index.html. Ничего страшного, если ты его так не назвал. Я сам забылся и оставил его как страница.html.
Сейчас мы будем это исправлять. Нажми на файл страницы, затем:
- на карандаш, если ты на компьютере
- на нижние "..." > "Edit in place", если ты с телефона
Поменяй название файла на index.html, затем жми "Commit changes".
Проверь результат
Снова вернись на вкладку "Code". Внизу страницы будет раздел "Deployments". Нажми на его название.
Под текстом "Active deployments" должно появиться ссылка на страничку. Нажимай и проверяй!
© Egor Bron.
Треугольник - хороший повод задуматься. Просто задуматься.