Компьютеры Windows Интернет
Развернуть
Главная ›

Синтаксис html5. Язык разметки HTML, синтаксис. Пишем стиль CSS

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

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

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

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

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

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

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

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

.

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

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

_____________________________________

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

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

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

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

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

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

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

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

пример блока

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

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

пример блока

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

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

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

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

Синтаксис языка HTML

Рис. 1.6. Отображение простой HTML-страницы в web-браузере

Основные правила языка HTML

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

Элементы могут включать текст и подэлементы (как, например, элемент html содержит подэлементы head и body в приведенном выше примере). Элементы должны быть правильно вложены друг в друга.

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

Правильно данный фрагмент должен иметь следующий вид:

Это полужирный и наклонный текст

В XHTML, если элемент не включает текст и подэлементы (пустой элемент), все равно должен иметь открывающийся и закрывающийся тэги. Например, элемент br не имеет содержания и вызывает разрыв строки (продолжение текста начинается с новой строки). Однако в соответствии с правилами он должен записываться следующим образом:

или сокращенно
. Точно так же должен записываться и элемент – вывод горизонтальной линии.

Открывающие тэги элементов могут иметь атрибуты, которые уточняют поведение элемента и задают дополнительные значения. Практически у каждого тэга имеется большое число необязательных параметров. Далее будут рассматриваться только основные атрибуты тэгов.

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

имя_атрибута="значение"

Например:

Основы Hypertext Markup Language"

В данном примере элемент div (раздел HTML-страницы, позволяющий разделять документы на логические блоки) имеет атрибут id, для которого задано значение mySection. Элемент div содержит элемент h1 (заголовок первого, или самого важного, уровня), который, в свою очередь, содержит некоторый текст. Значения атрибутов должны быть помещены в одиночные или двойные кавычки.

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

У всех элементов можно задавать атрибуты id и class, значения которых используются для идентификации конкретных элементов (id) или группы элементов (class). Эти атрибуты активно используются в скриптах документа и описаниях CSS стилей документа.

Имеется две основные категории элементов в HTML: блочные и строковые

  • Блочные элементы обычно информируют о структуре документа. Такие элементы начинаются с новой строки, отрываясь от того, что было перед этим. Примерами блочных элементов являются параграфы , пункты списка, заголовки и таблицы, контейнеры div.
  • Строковые элементы содержатся внутри структурных элементов блочного уровня и охватывают только части текста документа, а не целые области. Строковый элемент не приводит к появлению в документе новой строки, т. к. они являются элементами, которые появляются в параграфе текста. Примерами строковых элементов являются ссылки, выделенные слова или фразы, контейнеры span.

Дата создания: 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-элементы делятся на пять типов:

  • пустые элементы — , ,
    , , , , , , , , , , , , ;
  • элементы с неформатированным текстом — , ;
  • элементы, выводящие неформатированный текст — , ;
  • элементы из другого пространства имён — MathML и SVG;
  • обычные элементы — все остальные элементы.

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

Полный список HTML-элементов Таблица 1. HTML-элементы Тег Описание
Используется для добавления комментариев.
Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
Создаёт гипертекстовые ссылки.
Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title .
Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега .
Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
Загружает звуковой контент на веб-страницу.
Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста.
Выделяет текст как цитату, применяется для описания больших цитат.
Представляет тело документа (содержимое, не относящееся к метаданным документа).

Перенос текста на новую строку.
Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
Добавляет подпись к таблице. Вставляется сразу после тега .
Используется для указания источника цитирования. Отображается курсивом.
Представляет фрагмент программного кода, отображается шрифтом семейства monospace .
Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
Элемент используется для связывания значения атрибута value , которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
Элемент-контейнер для выпадающего списка элемента . Варианты значений помещаются в элементы .
Используется для описания термина из тега .
Помечает текст как удаленный, перечёркивая его.
Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег .
Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
Тег-контейнер, внутри которого находятся термин и его описание.
Используется для задания термина.
Выделяет важные фрагменты текста, отображая их курсивом.
Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
Группирует связанные элементы в форме, рисуя рамку вокруг них.
Заголовок/подпись для элемента .
Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
Определяет завершающую область (нижний колонтитул) документа или раздела.
Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action .
Создают заголовки шести уровней для связанных с ними разделов.
Элемент-контейнер для метаданных HTML-документа, таких как , , , , .
Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
Горизонтальная линия для тематического разделения параграфов.
Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
Встраивает изображения в HTML-документ с помощью атрибута src , значением которого является адрес встраиваемого изображения.
Создает многофункциональные поля формы, в которые пользователь может вводить данные.
Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию.
Индикатор измерения в заданном диапазоне.
Раздел документа, содержащий навигационные ссылки по сайту.
Определяет секцию, не поддерживающую сценарий (скрипт).
Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег .
Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
Контейнер с заголовком для группы элементов .
Определяет вариант/опцию для выбора в раскрывающемся списке , или .
Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

Параграфы в тексте.
Определяет параметры для плагинов, встраиваемых с помощью элемента .
Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
Индикатор выполнения задачи любого рода.
Определяет краткую цитату.
Контейнер для Восточно-Азиатских символов и их расшифровки.
Определяет вложенный в него текст как базовый компонент аннотации.
Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом.
Отмечает вложенный в него текст как дополнительную аннотацию.
Выводит альтернативный текст в случае если браузер не поддерживает элемент .
Отображает текст, не являющийся актуальным, перечеркнутым.
Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src .
Определяет логическую область (раздел) страницы, обычно с заголовком.
Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в .
Отображает текст шрифтом меньшего размера.
Указывает местоположение и тип альтернативных медиаресурсов для элементов , , .
Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
Расставляет акценты в тексте, выделяя полужирным.
Подключает встраиваемые таблицы стилей.
Задает подстрочное написание символов, например, индекса элемента в химических формулах.
Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
Задает надстрочное написание символов.
Тег для создания таблицы.
Определяет тело таблицы.
Создает ячейку таблицы.
Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
Создает большие поля для ввода текста.
Определяет нижний колонтитул таблицы.
Создает заголовок ячейки таблицы.
Определяет заголовок таблицы.
Определяет дату/время.
Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
Создает строку таблицы.
Добавляет субтитры для элементов и .
Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
Создает маркированный список.
Выделяет переменные из программ, отображая их курсивом.
Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
Указывает браузеру возможное место разрыва длинной строки.
Таблица-шпаргалка с тегами

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Группы тегов

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

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