Что такое HTML и зачем это нужно. Что такое HTML Что такое html страница

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

Как использовался HTML до появления CSS

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

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

. Метод верстки веб-документов с использованием данного тега стал настолько популярным, что даже получил отдельное название – табличная верстка. Раньше только с помощью такого способа можно было точно расположить элементы на странице.

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

Для чего нужен HTML сейчас

Сегодня, благодаря существованию CSS, есть возможность отделить дизайн страницы от ее содержимого, а также ускорить процесс работы и в разы сократить размер HTML-документа. Тем, кто уже очень давно занимается созданием сайтов, предстоит избавиться от старых привычек и научиться воспринимать HTML только как язык разметки, предназначенный для структурирования и упорядочивания данных. Новичкам будет легче осваивать новые принципы создания веб-страниц в связи с отсутствием взглядов на HTML как на инструмент придания страницам привлекательного вида. За это теперь отвечает CSS.

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

Вот некоторые HTML-теги, которые можно (и нужно) смело заменять стилями CSS:

• «украшающие», выравнивающие атрибуты к тегам (color , bgcolor , align и т. д.);
• тег

(при использовании для макетирования веб-страницы);

тег .

HTML-теги для структурирования

Для структурирования страниц используйте следующие теги:

H1-H6 (heading) Теги h1-h6 предназначены для обозначения заголовков. С помощью этих тегов очень удобно разделять текст. Для лучшего понимания представьте себе книгу, в которой есть главы и подглавы. Название главы книги – это h1 , подглавы – h2 , части подглав – h3 и т. д. Расставлять теги заголовков лучше последовательно. P (paragraph) Тег

Служит для обозначения абзацев текста. OL, UL (ordered list, unordered list) Теги ,

– удобный инструмент для обозначения перечней (навигационные ссылки, пункты в тексте, последовательный список и т. д.). DL (definition list) Тег в связке с тегами , используется при создании списка определений, где – название определения (definition term), – описание определения (definition description). DIV (division) DIV – блочный элемент, который может использоваться для выделения фрагмента документа, а также для логического объединения нескольких элементов. С помощью CSS можно придать блоку необходимый вид и позиционирование, но сам по себе никак не меняет внешний вид документа. SPAN (span) Тег по своей роли похож на . Но – это блочный элемент, а – строчный. Например, если вам нужно поменять стиль одного слова внутри тега

Вы «заворачиваете» это слово в тег , добавляете атрибут id или class с именем селектора, после чего в CSS назначаете ему необходимый стиль. Семантические теги HTML5 Чтобы более грамотно структурировать HTML-документ, используйте новые теги, которые помогают лучше описать содержимое. К примеру, как отличить шапку сайта, навигационное меню и футер от другого содержимого, если все они обозначены тегами ? На помощь приходят такие теги HTML5, как , , и другие. Они не влияют на внешний вид, но помогают ориентироваться браузерам, а также поисковым роботам, зашедшим на сайт.
Скриншоты с примерами использования структурирующих тегов и CSS

Элемент

HTML существует не в одной версии, а в нескольких (HTML 4.01, HTML5, XHTML 1.0 и другие), поэтому для правильной интерпретации веб-страницы браузеру необходимо знать, какую из версий языка вы используете. Рекомендуется указывать doctype в самом начале страницы (первая строка кода). Если проигнорировать doctype либо допустить ошибку, браузер откроет веб-страницу в так называемом режиме совместимости, что может привести к некорректному отображению содержимого, в том числе и стилей. Наиболее простым вариантом описания типа документа является doctype для HTML5 (подходит для любого браузера и работает, даже если теги HTML5 не были использованы):

Выводы

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

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

За дизайн веб-страниц отвечает CSS.

Важно пользоваться структурирующими тегами, такими как ,

, , , а также новыми тегами HTML5 для большей семантичности документа.

Пора забыть о теге и других украшающих атрибутах, а также об использовании тега

для макетирования документа.

Для корректного отображения веб-страницы браузерами необходимо использовать элемент в первой строке кода.

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

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

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

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

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

HTML-документ

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

Заголовок документа Заголовок

Здесь содержание документа...

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

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

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

В приведенном выше примере используются следующие теги для создания HTML-документа:

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

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

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

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

Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа

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

Декларация

Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:

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

И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент.

Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы».

Как работает HTML-код?HTML-код представляет собой набор коротких тегов, с содержащимися в них элементами страницы. Весь этот код хранится в файле с расширением.html или.htm. При открытии такого файла в браузере код интерпретируется им, а в окне программы выдается страница в готовом виде. Зная язык разметки HTML, создать собственную страницу может практически любой человек.Какие бывают теги?Теги представляют собой отдельные конструкции внутри HTML-кода. Это обычный текст заключенный внутрь угловых скобок «». Теги вы можете увидеть в HTML-коде практически любой страницы. Сами по себе теги на страницах не отображаются, на них выводится конкретный элемент, который закодирован с помощью тегов. Например, если на странице присутствует картинка, значит ее HTML код содержит в себе тег img.Ограничения HTMLНесмотря на то что HTML код позволяет построить довольно качественную гипертекстовую страницу, он имеет свои ограничения. Страницы, содержащие исключительно такой код являются статичными, т.е. в них отсутствует динамика, специальные эффекты и другие возможности. Но они могут быть привнесены с помощью других языков, например Java Script. Подавляющее большинство современных сайтов создаются с использованием дополнительных языков, которые делают их более живыми и интерактивными.

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

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

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

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

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

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

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

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

Рис. 1. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,

, , и т.д.

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

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

1.2.2. Элемент

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

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url: