Создаём свою первую HTML-страницу
Если очень сильно упростить, то сайт — это документ, который вам отправляет другой компьютер (сервер). Его открывает ваш браузер и переводит код в картинки, текст, видео и другие блоки.
Чтобы попробовать сделать сайт вместе со мной, скачайте редакторы для написания кода: Visual Studio Code или Atom (оба бесплатные).
Для начала, нужно создать html-документ. Откройте программу для написания кода и выберите в меню «Создать новый файл». Если вас спросят имя файла, укажите «index.html». Если не спросят, сохраните пустой файл. Теперь программа точно поинтересуется как назвать файл.
Q: Может ли файл называться не index.html, а например stranica.html?
A: Вообще да, но главную страницу сайта принято называть именно index.html.
Итак, у нас есть пустой файл index.html и уже сейчас можно открыть его с помощью браузера, однако страница будет пустой. Давайте наполним её.
Сначала нужно указать браузеру на каком языке будет написан дальнейший код. Это поможет ему правильно интерпретировать написанное нами.
<!DOCTYPE html>
Дальше открываем и закрываем тег <html>. Именно внутри них будет содержаться весь код страницы.
<!DOCTYPE html> <html> </html>
Q: Почему !DOCTYPE html был одним тэгом, а html два и один из них с /?
A: В HTML есть одинарные и парные тэги. Большинство тэгов парные: их нужно открыть (<html>) и закрыть (тот же </html>, только со слэшем).
Добавляем пару тегов: <head> и <body>. В тэге <head> будет содержаться в основном мета-информация, то есть та, что нужна браузеру и не видна пользователю. В тэге <body> мы будем прописывать структуру страницы.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Если сейчас сохранить страницу и открыть её, мы всё ещё увидим пустой экран. Ничего, сейчас заполним его. Давайте пропишем заголовок страницы — это текст, который отобразится во вкладке браузера. Разместим его между тэгами <head>.
<!DOCTYPE html> <html> <head> <title>Моя Автобиография</title> </head> <body> </body> </html>
Наконец, добавим в <body> текст с помощью тэга <p>.
<!DOCTYPE html> <html> <head> <title>Моя Автобиография</title> </head> <body> <p>Всем привет! Сегодня я расскажу вам немного о себе.</p> </body> </html>
Сохраним и откроем страницу!
Класс! Вы создали свою первую html-страницу. Уже сейчас её можно разместить на хостинге и приглашать друзей. В следующий раз мы сделаем страницу чуть красивее с помощью CSS.
Итог
- Мы создали страницу и наполнили её мета-информацией и текстом.
Домашнее задание
- Сделайте страницу about.html и разместите на ней текст о себе.
Вы можете использовать несколько тегов<p>, чтобы делить текст на абзацы.