Первый HTML-документ
Free PreviewЧтобы создать первый полноценный HTML-документ можно воспользоваться средой разработки (например VS Code) или обычным текстовым редактором, например, блокнот.
Первым делом создадим файл с расширением .html, например, index.html. Если вы попытаетесь открыть такой файл, то скорее всего, на вашем компьютере откроется браузер - программа, которую современные люди используют практически каждый день. Строго говоря, браузер как раз и предназначен для просмотра и отображения HTML-документов.
Для того чтобы увидеть в браузере гипертекст давайте добавим в наш файл текст из прошлого урока:
<h1>Мой первый HTML-документ</h1> <p>Это первый абзац</p> <p>Это второй абзац</p>html
И попробуем открыть файл index.html еще раз. В результате вы должны увидеть примерно такую картинку
Обратите внимание
Чтобы изменения внутри файла отображались в браузере необходимо сохранять файл перед окрытием. Это можно сделать явно через панель инструментов или сочетание клавишь или настроить автосохранение внутри вашего редактора.
Также не забывайте обновлять страницу в браузере чтобы подтянуть изменения. В качестве альтернативы можно открывать HTML-документ с помощь встроенного в среду разработки сервера и тогда изменения в файлах будут подтягиваться автоматически.
Инструкции для браузера
Вы можете видеть, что наш текст уже отображается с учетом добавленных тегов, например, первое предложение завернутое в тег <h1> отображается крупным жирным шрифтом. Однако наш текст все еще не является полноценным HTML-документом. Чтобы он им стал, нам необходимо добавить несколько дополнительных тегов, которые задают правильную структуру документа и помогают браузеру правильно интепретировать документ.
Первым делом давайте добавим на первой строке нашего документа - <!DOCTYPE html>. Эта строка - инструкция для браузера о том, что перед ним обычный HTML-документ. На самом деле, сегодня единственный стандартный доктайп для современного HTML, однако, браузеры могут работать в режиме совместимости и распознавать документы старого формата. Если интересно узнать об этой инструкции поподробнее можно воспользоваться вот этой статьей на сайте doka.guide.
Далее по стандарту мы должны расположить тег <html>. Во-первых, это парный тег, а во вторых он является контейнером для всего содержимого HTML-документа.
Внутри тега <html> обычно располагаются теги <head> и <body>. давайте поговорим о них чуть подробнее.
Новый тег <head>
Элемент <head> содержит основную информацию о документе: метаданные (например, заголовок окна или кодировку), ссылки на скрипты и таблицы стилей. Мы рассмотрим использование <head> чуть подробнее на последующих уроках, а сегодня мы будем использовать его только для того, чтобы добавить заголовок нашей страницы.
Для это внутри тега <head> добавим еще один парный тег <title> и внутри него напишем название для нашего первого документа. В итоге должна получиться такая структура документа:
<!DOCTYPE html> <html> <head> <title>Заголовок моей первой страницы</title> </head> </html>html
Текст, указанный внутри тега <title> будет отображаться браузером на вкладке страницы.
Основное содержимое документа - тег <body>
После закрывающего тега </head> в документ обычно добавляют тег <body>. Он также является парным и служит контейнером для всего видимого содержимого страницы. По спецификации <body> является необязательным, и браузер сам может понять что и как выводить на странице по типу тега. Однако, на практике лучше использовать <head> и <body>, так как от места вывода тега может зависеть его работа.
Давайте поместим наш исходный текст внутрь <body> и теперь мы получим полноценный HTML-документ.
<!DOCTYPE html> <html> <head> <title>Заголовок моей первой страницы</title> </head> <body> <h1>Мой первый HTML-документ</h1> <p>Это первый абзац</p> <p>Это второй абзац</p> </body> </html>html
Поздравляю, ваш первый HTML-документ готов.
Бонус - секрет для быстрого старта
В течении курса нам придется несколько раз создавать новые HTML-документы. Создавать базовую структуру документа руками - довольно утомительно. К счастью, во всех средах разработки давно существует шорткат (сочетание клавиш) для этой цели. Все что нужно, это создать файл с раширением html И внутри поставить восклицательный знак и нажать клавишу Tab.
Родительские и дочерние теги.
Вы могли обратить внимание, что в процессе создания документа у нас выстраивается древовидная структура. HTML-документ можно представить в виде перевернутого дерева. В основании находится элемент html. Внутри него расположено два элемента <head> и <body>. Внутри каждого из них - свои элементы. Элемент html принято называть родительским по отношению к <head> и <body>, а <head> и <body> - дочерние элементы или потомки. Они в свою очередь являются родителями для других дочерних элементов.