Какие теги определяют структуру html страницы. Правила языка HTML

Для Windows 27.05.2019
Для Windows

При создании сайта первое, что нужно представлять — это то, как формируется веб-страница. Это, своего рода, «фундамент» в сайтостроении. Поэтому прежде чем, углубляться в изучение более сложных технологий создания сайтов, рекомендуется иметь хотя бы базовые сведения о HTML. В данном уроке мы познакомимся с HTML , разберем структуру документа HTML и на практических примерах закрепим полученные знания.

Что такое HTML?

HTML расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.

Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

Теперь давайте разберемся как же браузер понимает, что и каким образом отображать на веб-странице? Это очень просто. Язык разметки гипертекста HTML имеет встроенные команды, их называют тегами. Именно по ним браузер и ориентируются.

Структура документа HTML

Любой HTML документ (веб-станица) должен иметь определенную структуру. Это позволит избежать возможных проблем при открытии страниц в браузерах. В качестве примера давайте рассмотрим страницу, которая содержит следующих HTML код:

Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа:

Парные теги ,

Открывающий тег .

Закрывающий тег можно найти в файле footer.php .

Как посмотреть HTML код страницы сайта WordPress

То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело (body) страницы.

Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:

Открыть страницу в браузере;

Перейти в английский шрифт клавиатуры;

Нажать следующие кнопки:

  • Chrome: Ctrl+U
  • Opera: Ctrl+U
  • Mozilla: Ctrl+U

Может быть, вы пока не знаете, зачем это нужно. Поверьте, это будет нужно не раз, для анализа своего сайта и возможно сайтов конкурентов.

Вывод

В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд большая разница. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.

Сегодня нам предстоит узнать структуру построения документа HTML, хотя мы с ней уже встречались в статье " ". Вспомним теги прописанные в ней:
, , , .
Все эти теги парные, закрывающиеся контейнера, которые создают конструкцию HTML документа. Именно они составляют основу html кода. Ещё их называют «Обязательные теги », но не потому что, если их не вписать, получится ошибка в коде. Нет. Ничего не случится. Код документа будет работать. Но, обязательные теги нужны для того, чтобы видеть саму структуру html страницы, чтобы понимать, что где находится и что куда вставлять.
Для наглядности рассмотрим приведенный ниже рисунок, Screen 1. С правой


Screen 1.

стороны изображен человечек с надписями названий тег. Такое отображение предлагается, для более простого понимания схемы строения кода html. С левой стороны показан этот же прожект, но более схематично.
Обратим внимание на тег - расположен по краям рисунка, выделен красным цветом. HTML-тег является началом и концом HTML-документа. Он открывает его (верхняя часть) и закрывает (нижняя часть). В документе данный тег не обязателен, но хороший стиль диктует непременное их использование. Тег должен всегда стоять в документе первым и последним. Смотрим на картинке, человечек полностью помещен в этот тег. Весь код html-странички пишется внутри тега-:
Весь код html-странички
Тег - не обязательный закрывающийся, это значит, что вторую его часть (закрывающую) можно не прописывать, ошибкой это не будет. Однако это будет не корректный код. Переводится с англ. как «голова» и на сленге веб-программистов называется «голова» . Размещается внутри верхней части тега-. Внутри контейнера тега размещаются мета теги, которые предназначены для хранения информации браузера и поисковых систем, а также управленческих функций. Поэтому и «голова».
Внутри «головы», обязательно между тегами расположен мета-тег , который определяет заголовок документа и отображается в заголовке и вкладке браузера. Смотрим Screen 2,


Screen 2.

где показан на примере браузера Mozilla Firefox. Обязательный закрывающийся тег, не имеет атрибутов. Синтаксис расположения тега виден на Screen 3. Как правильно оптимизировать , можно узнать перейдя по ссылке.



Рекомендуем почитать

Наверх