При создании любого документа, например в обычном блокноте, в Word и т.д. часто приходится выделять какую-либо часть текста полужирным шрифтом, курсивом, изменять размер или цвет шрифта, выравнивать текст по центру или по краю и т.д. и т.п. В любом, даже самом простом текстовом редакторе для этого предостаточно встроенных инструментов. Нам всего лишь на всего необходимо выделить нужный для форматирования участок документа и применить к нему то или иное свойство.
Например, чтобы выделить часть текста курсивом, необходимо выделить данный участок документа и нажать кнопочку «Курсив». На языке HTML все то же самое. Просто к нужному участку документа мы задаем то или иное свойство (тег, а также атрибут с определенным значением). Например для того чтобы нам сделать в HTML документе часть текста курсив, необходимо заключить данный участок тега в парные теги:
<i> Текст который должен быть «Курсивом»</i>
Комбинация символов <i> указывает, что текст надо выделить начиная с этого места, его еще называют открывающий тег. А </i> отмечает конец выделенного фрагмента, его еще называют закрывающий тег.
Все теги принято обособлять (выделять) знаками < и >.
С помощью тегов описывается вся структура html документа. Т.е. все что будет находиться на странице (текст, картинки, ссылки, видео, заголовки и т.д. и т.п.). Т.е. с его помощью мы просто накидываем состав страницы. А уже как эти элементы будут выглядеть и где именно будут располагаться описывает язык CSS.
Как было сказано выше теги выделяются угловыми скобками < и >, между которыми указывается имя тега. Теги бывают парными, т.е. есть открывающий тег (<i>), он ставиться в начале фрагмента и есть закрывающий тег (</i>), он ставится в конце фрагмента. Т.е. как вы видите закрывающий тег отличается от открывающего наличием косой черты - /.
Есть также одинарные теги, которые не имеют закрывающего тега – например тег обозначающий перенос строки <br>. Если мы в html редакторе напишем так
Результат мы получим одинаковый
Если же мы хотим получить реальный перенос строк, давайте воспользуемся одинарным тегом <br> и посмотрим результат
Вот теперь другое дело.
Большинство тегов имеют параметры или как их еще называют атрибуты, у всех атрибутов есть определенные значения. Атрибуты указывают в открывающем теге после его имени через пробел в следующем формате:
название атрибута = «значение атрибута»
Если атрибуту необходимо задать несколько параметров, они указываются через пробел
название атрибута один = «значение атрибута один» название атрибута два = «значение атрибута два»
Если у одного атрибута несколько значений они перечисляются через ;, т.е.
название атрибута = «значение атрибута один; значение атрибута два»
Так же необходимо упомянуть о том , что теги могут вкладываться друг в друга, например
<p><b>Текст будет отмечен как жирный</b></p>
Главное, при вложении тегов друг в друга это необходимость соблюдать последовательность их закрытия. Например если бы мы сделали наш пример вот так, то это бы привело нас к ошибке
Так же необходимо сразу такое понятие как элемент. К нему мы будем обращаться постоянно в ходе работы с HTML. Элемент это открывающий и закрывающий тег со всеми атрибутами и содержимым расположенным между открывающим и закрывающим тегом.
Теги бывают блочными и строчными. Блочные теги стремятся занять всю ширину родительского контейнера или всю ширину экрана.
Примером блочного тега является тег <p> - абзац или параграф.
Строчный тег же напротив не стремиться занять всю ширину родительского контейнера. Они располагаются друг за другом и всегда внутри блочных тегов.
Примером строчного тега является тег <a> с помощью которого мы можем создавать ссылки
Важно так же знать, что в HTML названия тегов и атрибутов можно записывать в любом регистре, а в языке XHTML только в нижнем регистре. Поэтому рекомендуется всегда записывать теги и атрибуты в нижнем регистре.
Просматривать HTML документы можно с помощью Web-браузеров. Последние отображают документы с форматированием выполненным на языке html. Результатом интерпретации созданного вами html документа в окне Web-браузера называется Web-страница. Т.е. мы в любом текстовом редакторе (например блокнот) или специализированном редакторе (усовершенствованный блокнот, например NotePad++, Atom, Sublime Text, VSCode и др.) пишем код на языке html. Далее мы сохраняем наш документ в формате:
Имя документа.html
Имя документа задаем на латинском языке, маленькими буквами. Можно использовать в имени цифры, но они не могут быть в качестве первого символа в имени. Если имя состоит из нескольких слов, разделяем их знаком нижнего подчеркивания. Документы сохраняем с расширением html (htm).
После этого запускаем сохраненный вами документ в любом удобном для вас браузере.
В отличие от HTML-документа, который содержит только текст на языке HTML. Web-страница может содержать и графику и видео и звуковое сопровождение. Так же Web-страница может быть результатом интерпретации одновременно нескольких html документов.