Общая структура документа html

Общая структура документа html

HTML — расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

  • Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
  • Как следует из названия, HTML — это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.

Содержание

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Теги для создания HTML-документа

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия

Основные понятия

HTML (HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

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

Читайте также:  Как убрать скролл на сайте

Основными компонентами HTML являются:

  • Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.
  • Атрибут (или аргумент ). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
  • Значение . Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right , а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

Теги представляют собой зарезервированные последовательности символов, начинающиеся с (знака меньше) и заканчивающиеся > (знаком больше).
Закрытие тега отличается от открытия только наличием символа ‘/’.

Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом , и мы хотим применить его к словам "Это мой текст".
HTML-последовательность кодов и собственно текста будет выглядеть так:

Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида , но не .
Действие вложенных тагов объединяется.Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив.

HTML- программа должна начинаться тегом и заканчиваться тегом

HTML- программы состоят из двух основных частей: заголовка и тела. Заголовок ограничивается парой тегов и , а тело — парой тегов и

Учим структуру HTML

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

Дабы не огорчать себя растратой бесценного времени, давайте посмотрим пример ниже и запомним расположение открывающих и закрывающих тегов html, head, body и того, что в них располагается

Читайте также:  Отключается вай фай на телефоне iphone
Важно понять и соблюдать базовую структуру html-документа. Нужно будет выучить последовательно базовых тегов, таких как html, head, body. Если её нарушить, то и Ваш html-документ будет отображаться некорректно.

html — с него начинается и заканчивается html-документ. Исключение может составить так называемая — спецификация. О ней я расскажу ниже.
head — в голове документа содержатся данные о сайте или странице: заголовок, ключевые слова, описание, автор и тд
body — мы же пока конкретнее остановимся на ТЕЛЕ документа. Именно между открывающим и закрывающим тегами body будем вставлять текст, ссылки, изображение и многое другое.

Ещё раз смотрим код выше, анализируем и читаем дальше.

Спецификация документа HTML

Скажу сразу, текст сложный, но нужно представлять уже в самом начале, что это такое. Если пропустите данный раздел, то ничего страшного не случится, но позже всё равно лучше к нему вернуться.

И всё же.
html-документ в идеале должен состоять не только из базовых тегов (html, head,body). Почти все web-страницы начинаются со сторки вида:

Это так называемая спецификация html документа.

А уже позже прописываются остальные теги: html, head,body и их содержимое.

Спецификация помогает браузеру определить, как правильно интерпретировать Ваш html-документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии XHTML 1.0.

Проще говоря, если Вы не укажете спецификацию или укажете её старую версию, то некоторые элементы у Вас будут отображены некорректно или не отображены вовсе.

Тег DOCTYPE cогласно спецификациям HTML и XHTML (что означает Объявление типа документа) сообщает валидатору, какую именно версию (X)HTML вы используете на своей странице. Данный тег всегда должен располагаться на Первой строчке каждой вашей старницы! Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.

Читайте также:  Изображение есть звук шипит

Из истории спецификации.
Решение задачи создания спецификаций HTML взяла на себя организация, называемая World Wide Web Consortium (сокращенно — W3C), владельцем которой является создатель HTML — Бернерс-Ли. В задачи W3C входит составление спецификации, отражающей современный уровень развития возможностей языка с учетом разнообразных предложений компаний-разработчиков браузеров. Официальные сведения о спецификации HTML всегда можно получить с Web-сайта Консорциума W3C по адресу http://www.w3.org/TR/ .

Базовые теги HTML

После спецификации документ продолжает открывающий тег html. Закрывающий тег также должен Обязательно прописываться в Конце html-документа.

Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

Тег body обозначает Тело страницы. То, что вписать после открывающего и перед закрывающыим тегами body и будет Содержимым Вашей страницы

Пример кода html-документа

Итоговая страница с комментариями по каждому тегу. Обязательно к внимательному просмотру.

Ссылка на основную публикацию
Ноутбук отключается при отключении зарядки
Доброго времени! Работаешь себе с документом, работаешь (проходит час-два) . и тут ноутбук внезапно отключается, и большая часть работы обнуляется...
Неисправности системы обратного осмоса
Перестал работать фильтр обратного осмоса? Или после сборки пошло что-то не так? В данной статье мы детально рассмотрим основные причины,...
Неисправности стационарного телефона для списания
Вы здесь Приведем примеры типовых неисправностей сотовых телефонов и возможные пути решения данных дефектов: Не включается - причиной данной неисправности...
Ноутбук перезагружается при выключении
Описание проблемы: Во время выключения компьютера система делает перезагрузку. Возможные причины: Системная ошибка; Повреждённый драйвер видеокарты; Работа вирусной программы; Недостаточная...
Adblock detector