/

Html 5 не проверяется на правильность синтаксиса. Язык разметки HTML, синтаксис

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

Пусть есть текст:

Запишем этот текст по-другому, вставив указания о том, как надо отображать текст. Указания выделим угловыми скобками.

В языке HTML указания называются тегами. Браузер выполняет указания-теги, то есть, не показывая их, производит изменения текста. Поэтому на экране мы увидим следующее:

«Мама мыла раму, а котик играл с клубком. Мальчик забрал у котика клубок».

Тег – команда в угловых скобках. Имя тега – первое, что пишется после открывающей угловой скобки, без пробелов перед ним! Существуют теги одиночные и теги контейнеры. Одиночные теги – некоторая команда браузеру, выполняемая в том месте, где указана, например, команда «нарисовать линию»:

Теги контейнеры состоят из открывающего тега и закрывающего, и их указание относится ко всему тексту, расположенному между ними, говорят: «вложенному в контейнер». Закрывающий тег имеет то же имя, что и открывающий, но перед именем ставится символ «слэш»: «/»:

Мама мыла раму.

.

У тега могут быть атрибуты. Атрибут дополняет и поясняет тег. Порядок атрибутов не важен. Например, у тега HR есть атрибут WIDTH, обозначающий ширину линии, SIZE – толщину линии, ALIGN – расположение (выравнивание) и COLOR – цвет. Значения атрибутов конкретизируют заданную характеристику. Синтаксическое правило звучит следующим образом: после имени тега может следовать, по крайней мере, один пробел, затем, через пробелы, могут следовать тройки: атрибут, символ «=», значение. Значение рекомендуется заключать в кавычки, хотя стандарт HTML позволяет значения, состоящие только из латинских букв и цифр, не заключать в кавычки.

Изображение на экране будет примерно следующим.

_____________________________________

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

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

Обозначает абзац.

Мама мыла раму.

Дочка играла с мячиком.

Некоторые атрибуты не имеют значений, точнее, они имеют единственное значение, и потому достаточно просто указать или не указать в теге этот атрибут. Например, у тега FRAME есть атрибут NORESIZE, указывающий на то, что пользователю не позволено изменять размер данного фрейма.

Теги (элементы) в HTML могут быть вложены друг в друга аналогично циклам или условным операторам в языках программирования. Пересечения тегов без вложенности запрещены.

Пример ошибочной записи:

пример блока

с вложенным абзацем

Пример правильной записи:

пример блока

С вложенным абзацем

Кроме тегов и простого текста в HTML-коде могут встретиться так называемые символьные объекты или Escape последовательности: именованные и нумерованные сущности. Они нужны для представления в документе символов, запрещенных синтаксически или физически, а также символов, которые невозможно ввести с клавиатуры. Например,

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

Очень важное замечание! Цель браузера – показать клиенту вашу страницу. Обычная реакция браузера на ошибку – попытка исправить ошибку, а если не удалось, то пропустить не понятные для него слова или теги. Это и хорошо и плохо. Так как, с одной стороны, в результате браузер постарается показать пользователю максимум текста, но, с другой стороны, в этот текст может попасть часть с тегами и скриптами или не попасть собственно текст, если его браузер воспримет, например, как комментарий. Разработчику сайта такое поведение браузера очень мешает. Будьте готовы к тому, что сначала браузер будет старательно исправлять ваши ошибки, но через некоторое время он запутается, и у вас перестанут работать ранее работавшие фрагменты. Поэтому совет: не делайте ошибок, а лучше используйте современные редакторы, осведомленные о html-правилах, и указывающие вам на ошибки.

Дата создания: 2012-03-04 00:50:20
Последний раз редактировалось: 2012-10-25 07:15:35

Современную жизнь практически невозможно представить без интернета. Чтобы мы делали без всевозможных Одноклассников, Вконтактов и Живых Журналов? Даже страшно представить, как оскуднела бы наша жизнь, если б ОН вдруг пропал! Как бы мы жили без смешных картинок, дурацких видео, мегабайтов африканского спама? Нет, друзья, я отказываюсь жить в таком ужасном мире!

Что такое интернет? (Internet)

Интернет - это все компьютеры (вычислительные устройства) в мире, соединённые между собой.

Синоним понятия Интернет - веб. Слово веб - калька с английского web (паутина). А web в свою очередь - часть понятия World Wide Web (всемирная глобальная паутина). Огромную долю интернета занимают всевозможные сайты.

Что такое сайты (Site)

Сайт (site) - это некоторое количество текстовых файлов в формате html. Т.е. это обычные файлы, которые хранятся на каком-то компьютере.

И тут мы подходим к нашей теме: а что же это за формат такой - HTML, и зачем он нужен?

Что такое HTML?

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

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

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

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

Использование HTML - синтаксис языка разметки

HTML-текст состоит из тегов, в которые помещают информацию.

Тег состоит из двух частей: открывающий тег и закрывающий тег. И в открывающем, и в закрывающем тегах записывается имя тега. Но в закрывающем перед именем ставится косая черта / - чтобы отличить закрывающий, от открыающего. Вот несколько примеров:

Содержимое тега

Содержимое тега Содержимое тега Содержимое тега

Слово tag переводится как - этикетка, ярлык. Т.е. тег как бы приявязывается к содержимому - размечает его.

У каждого тега своё значение. Какие значения имеют теги, которые мы видели выше? p - абзац. a - ссылка. div - блок. span - кусочек текста. Мы ещё рассмотрим значения этих тегов в следующих уроках.

Одиночные теги

Некоторые теги не имеют закрывающей пары. А это значит, что у таких тегов нет содержимого. Например, тег br - разрывает строку:

Простой текст,
на примере
которого показан разрыв
строк.

Там где находится тег br браузер сделает разрыв строки. В результате конечный пользователь вышеприведённое предложение вот в таком виде:

Простой текст,
на примере
которого показан разрыв
строк.

Ещё теги, которые не имеют закрывающей пары: hr (горизонтальная черта) и img (картинка).

Иерархия тегов

Теги можно встраивать друг в друга.

Ещё один абзац.

Здесь div содержит два абзаца, а первый абзац в свою очередь содержит ссылку.

При создании иерархии тегов главное, чтобы они не пересекались:

Так нельзя!!!

Здесь сначала должен закрыться тег p, потом div.

Атрибуты тегов

Атрибуты позволяют указать дополнительную информацию. Атрибуты записываются через пробел после имени отрывающего текста:

Содержимое тега

Вот так это будет выглядеть на готовой странице:

Ещё один пример атрибута - src у img. Этот атрибут позволяет указать путь к картинке, которая должна загрузиться:

Значения атрибутов можно записывать как в вдойных кавычках, так и в одинарных:

Оба варианта правильные.

Вот в общем-то и всё. Теперь мы готовы приступить к созданию HTML-документов.

Синтаксис HTML

В этой статье мы рассмотрим синтаксис HTML и как правильно записывать код языка HTML.

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

При написании HTML-кода в блокноте, желательно придерживаться одного стиля. Схема стандартного HTML-документа, выглядит следующим образом:

Название страницы Заголовок статьи

Абзац статьи

Каждый HTML-документ должен начинаться со строки , она означает что код в документе будет написан на языке HTML. Затем идёт сам HTML-код .

Между тегами располагаются два основных блока, первый блок — это голова HTML-документа , который начинается и заканчивается тегами , второй блок — это тело HTML-документа , который начинается и заканчивается тегами .

В голове HTML-документа содержится различная служебная информация, которую пользователь не видит (кроме тега title ), там находятся следующие теги:
— название HTML-страницы,
— мета-теги, в них содержится служебная информация о странице,
— тег ссылающийся на внешние файлы, например .css , .ico и т.д.,
— теги могут содержать JavaScript-код или ссылаться на внешний файл .js

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

— таблица,
— форма ввода данных,
и т.д.

Правила написания HTML-кода

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

  • Блочные теги которые находятся внутри других тегов, лучше размещать на одну строку ниже и на один пробел (табуляцию, как вам удобней) правее от тега в котором он размещен. Например таким образом расположены заголовок h1 и абзац p , по отношению к тегу body , в схеме HTML-документа расположенной в начале этой статьи.
  • Закрывающий и открывающий теги одного элемента, могут находится либо на одном уровне, как например теги , либо закрывающий тег может находится в конце текста, как например закрывающие теги элементов title , h1 и p .
  • Равнозначные между собой элементы тоже можно размещать на одном уровне, в схеме HTML-документа что расположена выше, равнозначными по отношению друг к другу, являются head и body , h1 и p .
  • На самом деле, весь HTML-код можно записать в одну строку и браузер всё равно правильно покажет HTML-страницу. Правила синтаксиса языка HTML, где теги нужно записывать друг под другом и левее, существуют лишь для того, чтобы вебмастеру было удобнее создавать и изменять в дальнейшем код HTML-страницы.

Вот еще некоторые моменты, которые нужно учитывать при создании кода:

  • Сколько бы вы не поставили пробелов в текстовом редакторе , браузер покажет их как один пробел.
  • Переносы строк и табуляции в текстовом редакторе, не распознаются браузером.
  • Если вам нужно перенести строку, которая должна быть видна на HTML-странице , то используйте тег
    .
  • Если вам нужна табуляция (например для создания "красной" строки), которая должна быть видна на HTML-странице, то используйте либо несколько спецсимволов неразрывного пробела либо CSS-свойство text-indent .

    • HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста ):

    • язык означает, что он может быть прочитан как человеком, так и компьютером;
    • разметка означает, что написанный вами код помечается с помощью ключевых слов;
    • гипертекст означает, что он использует HTTP как часть Интернета.

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

    Ниже приведён пример абзаца в HTML:

    Сегодня я изучаю синтаксис HTML на сайте сайт

    То, что вы видите в угловых скобках < и > называется тегами HTML. Они определяют, где что-то начинается и где оно заканчивается.

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

    Каждый из тегов несёт определённый смысл . В нашем случае обозначает абзац текста.

    Как правило, они идут парами:

    • открывающий тег определяет начало абзаца;
    • закрывающий тег

      определяет его конец.

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

    При объединении открывающего, закрывающего тегов и всего между ними, вы получите элемент HTML .

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

    Группы тегов

    Все теги делятся на 2 типа, строчные и блочные.

    Блочные элементы, вроде:

    Поделиться