На прошлом уроке я кратко представил Вам, как создать простую HTML страницу в пару действий. Дальше - больше! После прочтения этой статьи Вы сможете выводить на экран простые записи в разных местах, разного размера и назначения. Но для начала немного теории...
! Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли. Точные даты разработок неизвестны до сих пор.
! Чтобы удобно было изменять HTML страницу, откройте инструменты разработчика и нажмите "Edit as HTML", если у Вас Yandex или Chrome. В других браузерах изменить HTML страницу можно по-другому, например, с помощью блокнота, как описано в первом уроке.
! Если во время изменения Вы случайно нажмёте на любое место, помимо появившейся панели для изменения HTML элементов, то браузер автоматически закроет напечатанное и закроет все незакрытые теги.
Главные теги
После тега <html>, о котором мы говорили на прошлом уроке, должен следовать тег <head> (могут и другие, но о них я расскажу потом). Этот тег отвечает за то, как будет работать и отображаться контент страницы. Он содержит невизуальные элементы HTML страницы, например, код CSS отвечающий за оформление HTML документа (уроки по каскадным таблицам стилей CSS скоро появятся на канале) или скрипты, отвечающие за функционал или работу с сервером и другие (уроки по программированию на языке Java Script тоже скоро появятся на канале).
Следом за закрытием тега </head> идёт тег, содержащий в себе отображающийся на экране контент - <body>. С ним мы и будем сегодня работать. Любые записи внутри этого тега, кроме других тегов, комментариев и специальных команд, будут отображаться на странице, но для удобства, принято писать текст, который должен отображаться на экране, внутри других тегов. Один из таких тегов мы рассмотрим немного позже.
! Как Вы могли заметить - теги, о которых было сказано ранее, при переводе с английского означают "голова" (тег head) и "тело" (тег body), поэтому удобно различать, что должно быть в "голове", а что в "теле".
! Теги <head> и <body> являются обязательными, но на сегодняшний момент все браузеры новых версий сами вставляют эти обязательные теги, если не обнаружат их в документе HTML, поэтому на прошлом уроке, когда Вы открывали свою HTML страницу, эти теги появились в коде Вашей страницы.
Второстепенные теги
<title>
Первый второстепенный тег - это тег, отвечающий за название страницы. При дальнейшем сохранении страницы с браузера (кнопки "ctrl" + "S") название файла будет таким же как и название документа. Тег <title>...</title> используется лишь в названии страницы (вместо многоточия, естественно, само название).
<h1>, <h2>, <h3>, <h4>, <h5> и <h6>
Эти теги служат для отображения на странице заголовков. Первым и самым крупным заголовком является тег <h1>...</h1>. Далее по-убыванию теги <h2>, <h3> и так далее до <h6>.
На картинке вы можете увидеть примеры использования вышеуказанных тегов.
Практика
Попробуйте самостоятельно создать страницу с тегами <title> и <h1>. Если возникнут трудности - обратитесь к предыдущему уроку! И не забывайте сохранять страницы нажав на "Ctrl" + "S" (если Вы используете Chrome или Yandex) или с помощью панели настроек страницы!