Создание HTML-документа
Рассмотрим, что такое HTML-документ, как его создать, что такое веб-страница, что такое веб-сайт и какие инструменты используют для веб-разработки (в данном случае для написания HTML-кода).
Начнём с инструментов, которыми будем пользоваться. Для написания и работы с HTML-кодом, а также для просмотра того, что у нас получилось в результате, нам понадобятся всего две вещи: текстовой редактор и браузер (желательно несколько разных).
Редактор кода
HTML-код можно писать и в обычном текстовом документе, однако это менее удобно, чем использование специальных редакторов для написания кода. Редакторы кода существенно упрощают написание кода. Эти инструменты предоставляют функции подсветки синтаксиса, автодополнения кода и другие полезные возможности, которые упрощают процесс разработки.
Ниже представлены редакторы, которые заслуживают вашего внимания и могут пригодиться начинающим (и не только):
- Notepad++. Бесплатный, простой, универсальный. Это очень быстрый и функциональный текстовой редактор, который прекрасно подходит для редактирования кода.
- Sublime Text. Условно бесплатный, простой, универсальный. Этот редактор похож на Notepad++, но обладает бо́льшим функционалом по умолчанию.
- Visual Studio Code (VS Code). Бесплатный, простой, универсальный. Один из лучших редакторов, лёгкий, быстрый и с большим функционалом. Кроме того, базовую функциональность можно дополнить при помощи плагинов.
Существует и множество других хороших редакторов. Попробуйте разные и выберите для себя тот, который вам больше понравится. Выбор редактора, как и любого другого инструмента, сугубо индивидуален и зависит от ваших личных предпочтений.
Что такое HTML-документ?
HTML-документ — это обычный текстовой файл с расширением .html, содержащий код, написанный на языке HTML. HTML-документ также называют HTML-файлом.
Чтобы из обычного текстового файла (с расширением .txt) сделать HTML-документ, нужно изменить расширение файла с .txt на .html.
Как изменить расширение файла?
Рассмотрим, как сменить расширение файла в операционной системе Windows 10 и выше.
По умолчанию расширения файлов в Windows не видны, поэтому, для начала, сделаем так, чтобы у всех файлов стали видны их расширения. Открываем любую папку → сверху выбираем вкладку Вид → ставим галочку на Расширения имен файлов.
Теперь мы можем легко изменить расширение файла: кликаем правой кнопкой мыши на текстовом файле → выбираем в меню пункт Переименовать и меняем расширение с .txt на .html. Таким же образом сменить расширение файлу можно сразу при создании текстового документа.
В Linux‑дистрибутивах всё гораздо проще. Здесь расширения файлов отображаются всегда.
Что такое веб-страница?
Веб-страница — это HTML-документ, который отображается в окне браузера. Для краткости обычно говорят просто страница
.
Для примера создадим HTML-файл и затем откроем его в браузере.
1) Создаём текстовой документ и сразу меняем ему расширение на .html. В этом случае, при открытии файла в редакторе кода, HTML-код будет сразу с подсветкой (как в примере кода ниже).
2) Открываем созданный HTML-файл в редакторе кода и вставляем туда следующий код:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Привет, Мир!</h1>
</body>
</html>Сохраняем изменения в файле.
3) Теперь откроем этот HTML-файл в браузере. Открыть HTML-файл в браузере очень легко: нужно просто кликнуть по нему два раза левой кнопкой мыши. В результате в окне браузера откроется страница с таким содержимым:
Результат
Привет, Мир!
Итак, осталось рассмотреть, что называют веб-сайтом.
Веб-сайт — это коллекция веб-страниц (одна или более), объединённых под одним именем (доменом). Для краткости обычно говорят просто сайт
.