Доброго времени суток, друзья! Сегодня у нас очередная статья, посвященная одной из категорий моего сайта «HTML-путеводитель для новичков ». Наверное, нужно было начинать заполнять эту категорию с написания статьи, что такое HTML или же с этого поста, в котором будет подробно изъяснено, что такое теги html. Но так уж сложилось, что в ней я уже опубликовал несколько полезных материалов, к примеру, о том, как сделать линию средствами HTML или же, как сделать рамку . Ну да ладно, надеюсь, моя оплошность не вынудила вас искать информацию среди других источников.
Для того чтобы разобраться с тегами давайте для начала вспомним что такое HTML? И так HTML – это англоязычная аббревиатура, расшифровывающаяся как - язык разметки гипертекста . Это стандартный язык, интерпретирующийся всеми современными браузерами, отвечающий за структуру и содержание страницы. Именно с помощью HTML можно указать, как будет выглядеть текст, рисунок или анимация, отображающаяся на интернет странице, а также задать ей местоположение, размер и т.п. Представленный язык разметки включает в себя теги html, являющиеся его основой.
Теги – определенная именованная метка состоящая из символов латинского алфавита, заключенная в угловые скобки (к примеру ). Тег – основной элемент HTML документа. Их заполнение должно осуществляться в нижнем регистре, то есть вместо < TITLE > должно быть < title > .
Виды тегов htmlСуществует два типа тегов – одиночные и парные (контейнеры). Последние являются более распространенными. Все что включено между открывающимся и закрывающимся тегом называют содержимым контейнера. Как можно заметить внутри закрывающегося тега обязательно нужно ставить слеш, т.е. косую черту «/», находящуюся сразу же после первой угловой скобки. Действие тегов распространяется на заключенную между ними информацию.
Одиночные теги
(метки
) как можно догадаться состоят из одного html элемента – открывающегося тега (например
).
В независимости от вида каждый тег состоит из следующих элементов:
Открывающаяся угловая скобка (< ).
Имя тега (p , body , br ).
Закрывающаяся угловая скобка (> ).
Для расширения возможностей используемого тега используются различные атрибуты и значения атрибутов, разделяющиеся между собой с помощью пробела. В свою очередь атрибуты можно условно разделить на обязательные и необязательные.
Основные теги htmlСтандартизированный язык разметки гипертекста включает в себя предостаточно используемых HTML-тегов. Давайте остановимся на самых важных из них.
Основные парные теги html- < html > - сообщает браузеру о том, что перед ним находится HTML документ.
- < head > - содержит описание интернет-страницы и является некой емкостью для всех заголовочных элементов html-документа, цель которых - помогать браузерам и поисковым системам в работе с данными.
- < body > - определяет видимую часть документа.
- - отвечает за отображение и название документа.
- < table >, < tbody >, < thead >, < td >, < th > и < tr > - теги, относящиеся к созданию таблиц.
-
- закрытие данного тега сообщает браузерам о том, что текст отображается с новой строки, то есть с нового абзаца.
- - задает заголовок (h1 …h6 ).
-
- тег устанавливающий перевод строки в том месте, где он находится.
- , , - каждый из тегов по отдельности выделяющий текст жирным, подчеркнутым или курсивом.
- ,
- , - эффект для текста имитирующий стиль печатной машинки.
- - еще один HTML-тег выделяющий текст жирным. В отличии от тега воспринимается поисковыми механизмами как особо выделенный.
- - тег, используемый для создания бегущей строки.
- - тег, который используется для форматирования текста, но работающий исключительно при использовании специальных атрибутов.
- - весьма распространенный тег, отвечающий за создание гиперссылки.
- - цитирование.
- - выводит в HTML документе примеры кода.
- - отвечает за отображение текста заключенного в скобки.
- - создает отступы с обеих сторон текста.
Основные одиночные теги- - тег содержащий метаинформацию, предназначенную для поисковых механизмов. Внутри него при помощи соответственных атрибутов можно прописать ключевые слова, управление процессом индексации, имя автора, кодировку документа и т.п.
-
- тег, отвечающий за отображение графических элементов (картинки). Используется вместе с обязательным атрибутом
- - указывает на таблицу стилей CSS. Данный тег задается в теге < head > . HTML документ может состоять из энного количества тегов , задающих странице стилистику в независимости от расположения ее содержимого.
- < hr > - добавляет горизонтальную линию.
Нажав сочетание клавиш Ctrl + U можно заметить, что весь HTML-документ построен на использовании HTML тегов и атрибутов. Совсем не обязательно запоминать все существующие HTML теги. Для внесения корректировок на сайт достаточно запомнить те, что приведены выше.
Надеюсь, статья оказалась для вас полезной, и теперь вы знаете, какие существуют виды тегов и что это вообще такое.
Спасибо за внимание и до скорого на страницах Stimylrosta.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.
Парные и одиночные теги HTMLСинтаксис HTML элементов, состоящих из парных тегов:
Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/ " в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.
Синтаксис HTML элементов, состоящих из одиночных тегов:
Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:
HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:
Это очень
интересноЗдесь элемент выходит за пределы элемента
Пример с правильной вложенностью:
Это очень интересно
Здесь элемент правильно вложен - он находится полностью в элементе
Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
Заголовок Мой первый заголовок
Мой первый абзац
Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:
ЗаголовокМой первый заголовок
Мой первый абзац
Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
| Тег для создания таблицы. | ||
| Определяет тело таблицы. | ||
| Создает ячейку таблицы. | ||
| Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом. | ||
| Создает большие поля для ввода текста. | ||
| Определяет нижний колонтитул таблицы. | ||
| Создает заголовок ячейки таблицы. | ||
| Определяет заголовок таблицы. | ||
| Определяет дату/время. | ||
| Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. | ||
| Создает строку таблицы. | ||
| Добавляет субтитры для элементов и . | ||
| Выделяет отрывок текста подчёркиванием, без дополнительного акцента. | ||
| |
Создает маркированный список. | |
| Выделяет переменные из программ, отображая их курсивом. | ||
| Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg. | ||
| Указывает браузеру возможное место разрыва длинной строки. |
- начало тела документа, парный тег - все что следует в этом теге будет выведено на экран. - начало абзаца (начинается всегда с новой строки), парный тег - может содержать параметр выравнивания. Напимер:
- все строки абзаца прижать к левому краю (используется по умолчанию).
- все строки абзаца прижать к правому краю.
- все строки абзаца отцентрировать по странице.
- все строки абзаца выравнять по ширине страницы. - закрывающий тег конец абзаца, может отсутствовать, если далее начинается новый абзац или будет новый тег, который произведет перенос строки.- полужирный шрифт, парный тег. ТЕКСТ ПОЛУЖИРНЫЙ ТЕКСТ - закрывающий тег конец полужирного шрифта. - наклонный шрифт (курсив), парный тег. ТЕКСТ НАКЛОННЫЙ ТЕКСТ - закрывающий тег конец наклонного шрифта. - подчеркнутый шрифт, парный тег. ТЕКСТ ПОДЧЕРКНЫТЫЙ ТЕКСТ - закрывающий тег конец подчеркнутого шрифта. - моноширинный шрифт (шрифт печатной машинки), парный тег. ТЕКСТ МОНОШИРИННЫЙ ТЕКСТ - закрывающий тег конец моноширинного шрифта. - сильно выделенный шрифт, парный тег. ТЕКСТ СИЛЬНО ВЫДЕЛЕННЫЙ ТЕКСТ - закрывающий тег конец сильно выделенного шрифта. - выделенный шрифт, парный тег. ТЕКСТ ВЫДЕЛЕННЫЙ ТЕКСТ - закрывающий тег конец выделенного шрифта. - предварительно отформатированный текст (шрифт печатной машинки), парный тег. Начинается всегда с новой строки и выводится на экран в том виде в котором набран (количество "пробелов" то, которое вы набрали). ТЕКСТ МОНОШИРИННЫЙ ТЕКСТ - закрывающий тег конец предварительно отформатированного текста.
- горизонтальная линия, непарная команда - вставка горизонтальной линии, при этом до и после линии происходит переход на новую строку. Может содержать параметры. Например:
- горизонтальная линия толщиной 1 (используется по умолчанию).
- размер шрифта 1 (максимальный), парный тег. При этом до и после ТЕКСТА происходит перенос строки. - закрывающий тег конец шрифта размер 1.
- вырывнивание текста по центру страницы, паный тег. - закрывающий тег конец вырввния по центру.
по центру
- начало нумерованного списка, парный тег.
Уроки
- задание названия нумерованного списка
- закрывающий тег конец нумерованного списка.
- начало списка терминов и определений, парный тег.
Определения
- задание названия списка терминов и определений
- закрывающий тег конец списка терминов и определений.
Примечание. |
.JPG)
