Теория html – Структура HTML-документа — Курс «Знакомство с HTML и CSS» — HTML Academy

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

23

HTML разработал Тим Бернерс-Ли (Tim Berners-Lee) в 90 -х годах прошлого столетия на основе работ Теда Нельсона (Ted Nelson), которому принадлежит концепция гипертекста. HTML разработан с учетом того, что информацию из сети могут использовать различные устройства: персональные компьютеры с экранами, обладающими различным разрешением и количеством цветов, сотовые телефоны, устройства для речевого ввода-вывода, компьютеры с высокой и низкой пропускной способностью и т.д.

Язык HTML(Hyper Text Markup Language) — это язык разметки гипертекста. Разметка заключается в том, что в обычный текст добавляются специальные командыHTML, описывающие, как должен выглядеть данный текст.Гипертекст– это расширенный текст, содержащий дополнительные элементы. Главный из них – это гипертекстовая ссылка (гиперссылка), щелчок на которой позволяет перейти к другому документу или к другому фрагменту того же документа. Вставляемые объекты (рисунки, видеоролики и т.д.) также рассматриваются как элементы гипертекста.HTML-документ – это файл с расширением

htm илиhtml.

В документе HTMLобычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например<html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами (tags).

Тэги могут быть парными и непарными. Любой тэг начинается с левой угловой скобки <, после которой следует имя тэга, и правой угловой скобки >, например <html>. Парный тэг состоит изоткрывающего (стартового) тэга изакрывающего, у которого перед именем отображается символ "/" (слэш), например </html>. Кроме этого, большинство тэгов могут иметь необязательныеатрибуты, значение которых задается "по умолчанию" или явно. Атрибут тэга состоит из имени, знака равенства и значения, которое задается строкой символов. Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить. Может случиться так, что браузер не понимает данный тэг; в этом случае он его пропускает, но сообщение об ошибке не выдается.

В языке HTML не делают различия между большими и малыми буквами, так, что тэги <HEAD>, <head> и <Head> эквивалентны.

Все тэги делятся на две категории:

  1. структурные тэги;

  2. тэги разметки.

Рассмотрим пример простого HTML-документа:

<html>

<head>

<title>

Пример1

</title>

</head>

<body>

<h1> Всем привет!

</h1>

<p>

Я студент группы МГ-21 Петров П.П.

</p>

</body>

</

html>

Для удобства просмотра документа здесь введены дополнительные отступы и пробелы, которые при просмотре документа браузером будут проигнорированы.

При просмотре в браузере мы увидим на экране следующий текст:

Всем привет!

Я студент группы МГ-21 Петров П.П.

  1. Структурные тэги

Они описывают общие свойства документа, например, его название или используемую кодировку символов.

<html>...</html>- тэги, являющиеся признаком начала и конца документа

<head>...</head> - эта пара тэгов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования документа сюда включается служебная информация.

<title>...</title> - все, что находится между тэгами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тэгом <title>, отображается в заголовке окна браузера и печатается в верхнем углу каждой страницы при выводе документа на принтер.

Рекомендуется давать название, не превышающее 64 символа.

<body>...</body> - эта пара тэгов указывает на начало и конец тела HTML-документа; все то, что заключено между этими тэгами, определяет информацию, отображаемую в окне браузера.

Комментарии

Файл HTML может содержать комментарии, поясняющие написанный HTML-код. Комментарии начинаются с последовательности <!-- и завершаются последовательностью-->. Комментарии игнорируются браузером и не влияют на представление документа на экране.

Например: <--! этот текст является комментарием-->

Учебник HTML



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

Язык HTML добавляет разметку в обычный текст. Гипертекст содержит различные ссылки благодаря которым веб-страницы связываются между собой. С помощью HTML каждый может создавать как статические так и динимические сайты. HTML является языком, описывающим структуру и семантику содержимого веб-документа. Содержимое веб-страницы размечается с помощью тегов, представляющих HTML-элементы. Примерами таких элементов являются <html>, <img>, <div> и так далее. Эти элементы формируют строительные блоки для любого веб-сайта.

HTML был изобретён в 1991 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и изначально предназначался для обмена документами между учёными различных университетов. Своим изобретением Тим Бёрнс-Ли заложил основы современной сети Internet.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - почти каждый год выходит новая версия HTML. Версия "HTML 2.0" была первым стандартом HTML спецификации, которая была опубликована в 1995 году. HTML 4.01 является основной версией HTML, которая была опубликована в конце 1999 года, и широко используется в настоящее время. Сегодня наиболее популярной становится версия HTML-5, которая является расширением HTML 4.01, и опубликована в 2012 году.

HTML-документ или веб-страница — это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в угловые скобки <имя тэга>). Веб-страницу можно набрать как в обычном текстовом редакторе (Блокнот, WordPad, Word и т.д.), так и в специализированном, с подсветкой кода (Notepad++, Sublime Text идр.). Документы HTML хранятся в виде файлов с расширением .htm или .html.


Онлайн-примеры в каждом уроке

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

Пример HTML:

Попробуй сам
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title> </head>
  <body>
    <h2>Это заголовок</h2>
    <p>Это параграф.</p>
  </body>
</html>
Кликни по кнопке "Попробуй сам" и посмотри как это работает.

Онлайн-примеры HTML

В учебнике HTML для вас подготовлено более 100 онлайн-примеров, благодаря которым вы легко освоите язык разметки. Лучше один раз увидеть, чем сто раз услышать! Теория плюс практика — залог вашего успеха в освоении HTML.

С помощью онлайн-редактора вы сможете редактировать и анализировать каждый пример в учебнике HTML.

Перейти к онлайн- примерам HTML


Справочник HTML

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

Перейти к справочнику HTML





Please enable JavaScript to view the comments powered by Disqus.

Что такое HTML и с чего начать изучение HTML?