Основы html

Другие свойства

У DOM-элементов есть дополнительные свойства, в частности, зависящие от класса:

– значение для , и (, …).
– адрес ссылки «href» для ().
– значение атрибута «id» для всех элементов ().
…и многие другие…

Например:

Большинство стандартных HTML-атрибутов имеют соответствующее DOM-свойство, и мы можем получить к нему доступ.

Если мы хотим узнать полный список поддерживаемых свойств для данного класса, можно найти их в спецификации. Например, класс описывается здесь: .

Если же нам нужно быстро что-либо узнать или нас интересует специфика определённого браузера – мы всегда можем вывести элемент в консоль, используя , и прочитать все свойства. Или исследовать «свойства DOM» во вкладке Elements браузерных инструментов разработчика.

Тег: nodeName и tagName

Получив DOM-узел, мы можем узнать имя его тега из свойств и :

Например:

Есть ли какая-то разница между и ?

Да, она отражена в названиях свойств, но не очевидна.

Свойство есть только у элементов .
Свойство определено для любых узлов :
- для элементов оно равно .
- для остальных типов узлов (текст, комментарий и т.д.) оно содержит строку с типом узла.

Другими словами, свойство есть только у узлов-элементов (поскольку они происходят от класса ), а может что-то сказать о других типах узлов.

Например, сравним и на примере объекта и узла-комментария:

Если мы имеем дело только с элементами, то можно использовать или , нет разницы.

Имена тегов (кроме XHTML) всегда пишутся в верхнем регистре

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

В HTML-режиме значения всегда записаны в верхнем регистре. Будет выведено вне зависимости от того, как записан тег в HTML или .

В XML-режиме регистр сохраняется «как есть». В настоящее время XML-режим применяется редко.

Что такое HTML?[править]

Термин HTML (HyperText Markup Language) означает «язык разметки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

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

Что Вам понадобится для освоения HTML?править

Для освоения HTML по этому Самоучителю Вам понадобятся две вещи:

Любой браузер, то есть, программа, пригодная для просмотра HTML-файлов.
Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

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

Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload («перезагрузить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.

Необходимое отступление о редакторах HTMLправить

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

Редакторы типа «что видишь, то и получишь» (Namo WebEditor 2006, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

Создание форм и кнопок

<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.

<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.

<label> — оформляет пометку для поля, созданного тегом <input>.

<textarea></textarea> — создаёт большие поля для ввода текста.

nodeValue/data: содержимое текстового узла

Свойство есть только у узлов-элементов.

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

Прочитаем содержимое текстового узла и комментария:

Мы можем представить, для чего нам может понадобиться читать или изменять текстовый узел, но комментарии?

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

…Затем JavaScript может прочитать это из свойства и обработать инструкции.

Классы DOM-узлов

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

Каждый DOM-узел принадлежит соответствующему встроенному классу.

Корнем иерархии является , от него наследует и остальные DOM-узлы.

На рисунке ниже изображены основные классы:

Существуют следующие классы:

– это корневой «абстрактный» класс для всего.

Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
– также является «абстрактным» классом, и служит основой для DOM-узлов.

Он обеспечивает базовую функциональность: , , и т.д. (это геттеры). Объекты класса никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал ).
, по историческим причинам часто наследуется (хотя последняя спецификация этого не навязывает) – это документ в целом.

Глобальный объект принадлежит именно к этому классу. Он служит точкой входа в DOM.
– «абстрактный» класс. Вот, кем он наследуется:
- – класс, соответствующий тексту внутри элементов. Например, в .
- – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
– это базовый класс для DOM-элементов.

Он обеспечивает навигацию на уровне элементов: , .
А также и методы поиска элементов: , .

Браузер поддерживает не только HTML, но также XML и SVG. Таким образом, класс служит основой для более специфичных классов: , (они нам здесь не нужны) и .
И наконец, является базовым классом для всех остальных HTML-элементов. Мы будем работать с ним большую часть времени.

От него наследуются конкретные элементы:
- – класс для тега ,
- – класс для тега ,
- – класс для тега ,
- …и т.д.

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

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

Рассмотрим DOM-объект для тега . Он принадлежит классу .

Он получает свойства и методы из (в порядке наследования):

– этот класс предоставляет специфичные для элементов формы свойства,
– предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
– предоставляет типовые методы элемента,
– предоставляет общие свойства DOM-узлов,
– обеспечивает поддержку событий (поговорим о них дальше),
…и, наконец, он наследует от , поэтому доступны также методы «обычного объекта», такие как .

Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство . Оно ссылается на конструктор класса, и в свойстве содержится его имя:

…Или мы можем просто привести его к :

Проверить наследование можно также при помощи :

Как видно, DOM-узлы – это обычные JavaScript объекты. Для наследования они используют классы, основанные на прототипах.

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

Большинство браузеров поддерживают в инструментах разработчика две команды: и . Они выводят свои аргументы в консоль. Для JavaScript-объектов эти команды обычно выводят одно и то же.

Но для DOM-элементов они работают по-разному:

выводит элемент в виде DOM-дерева.
выводит элемент в виде DOM-объекта, что удобно для анализа его свойств.

Попробуйте сами на . Вы увидите разницу во всех современных браузерах (кроме Firefox, где и выводят одно и то же – элемент в виде DOM-объекта).

Спецификация IDL

В спецификации для описания классов DOM используется не JavaScript, а специальный язык Interface description language (IDL), с которым достаточно легко разобраться.

В IDL все свойства представлены с указанием их типов. Например, , и т.д.

Небольшой отрывок IDL с комментариями:

Элементы в HTML

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

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

И тут у нас хорошая новость для вас. С первых дней работы с HTML вам точно не нужно заучивать всю сотню тегов. Более того, примерно 50-60 % тегов многими даже самыми продвинутыми верстальщиками не используются.

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

<!DOCTYPE> — тег, который определяет тип документа. Он необходим для того, чтобы браузер понимал, как интерпретировать текущую веб-страницу. Этот тег одиночный и указывается он всегда в самом начале HTML-документа.
<html> — является главным тегом всей страницы, потому что включает в себя всё её содержимое. Пишется этот тег, как правило, сразу после <!DOCTYPE>. Тег <html> парный и закрывающий тег </html> ставится в самом конце HTML-документа.
<head> — тег, который служит своего рода хранилищем для других head-элементов и помогает браузеру при работе с данными. Напрямую его содержимое не отображается на веб-странице. Этот тег и его содержимое очень важны для SEO-оптимизации. Внутри этого тега могут содержаться другие теги: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.
<meta> — это один из тегов, который размещается внутри <head>. Он определяет метатеги, предназначенные для хранения информации для браузера и поисковой системы. Метаданные не отображаются на странице и используются для описания страницы, ключевых слов, автора документа.
<title> — заголовок документа, который отображается не на странице, а во вкладке браузера. Это обязательный элемент HTML-документа, он может встречаться только один раз во всем документе и содержится внутри <head>.
<body> — «Body» с английского означает «тело». И в HTML этот тег используется как раз в этом значении. То есть этот тег определяет всё тело документа, хранит весь его контент и отображает на странице. <body> — парный тег, но использование закрывающего </body> не обязательно, хотя считается хорошим тоном.

Среди всего остального множества тегов можно составить HTML-шпаргалку и условно поделить все теги на группы.

§ 5. Перенос строки и горизонтальная черта

Если нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег . Например, html-код

1. Первая строка. 2. Вторая строка.

в браузере будет выглядеть так:

1. Первая строка. 2. Вторая строка.

У нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег несколько раз подряд.

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

size — толщина полосы;
width — ширина полосы;
align — выравнивание;
color — цвет полосы;
noshade — атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

Например, html-код:

align=»center» size=»5″ width=»50%» color=»#3399ff»>

в браузере примет вид

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

Правила и порядок написания тегов

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

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются (что такое RSS лента и новостная рассылка).

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

или вот так:

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (что такое браузер и какой них самый лучший), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Теги HTML-документа[править]

Как устроен HTML-документправить

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

<html> 
     <head> 
          <title> 
               Пример 1 
          </title>
     </head> 
     <body> 
          <H1> 
               Привет! 
          </H1> 
          <P> 
               Это простейший пример HTML-документа. 
          </P> 
          <P> 
               Этот *.html-файл может быть 
			   одновременно открыт и в Notepad, и в браузере. 
			   Сохранив изменения в Notepad, просто нажмите
			    кнопку Reload ('перезагрузить') в браузере,
				 чтобы увидеть эти изменения реализованными 
				 в HTML-документе. 
          </P> 
     </body> 
</html>

Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.

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

<html> 
<head> 
<title>Пример 1</title> 
</head> 
<body> 
<H1>Привет!</H1> 
<P>Это простейший пример HTML-документа.</P> 
<P>Этот *.html-файл может быть одновременно открыт
 и в Notepad, и в браузере. 
Сохранив изменения в Notepad, просто нажмите кнопку
 Reload ('перезагрузить') в браузере, чтобы увидеть
 эти изменения реализованными в HTML-документе.</P> 
</body> 
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается «тэг»).

Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением «/».

Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.

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

Обязательные тегиправить

<html> ... </html>

Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.

<head> ... </head>

Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<meta>

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

<title> ... </title>

Всё, что находится между тегами <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> ... </body>

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

<H1> ... </H1> — <H6> ... </H6>

Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> ... </P>

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

<P>

</P>

воспринимается как один абзац.
Теги

<Hi>

<P>

могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим всё, что мы знаем, с помощью примера 2:

<html> 
<head> 
<title>Пример 2</title> 
</head> 
<body> 
<H1 ALIGN=CENTER>Привет!</H1> 
<H2>Это чуть более сложный пример
 HTML-документа</H2> 
<P>Теперь мы знаем, что абзац можно выравнивать
 не только влево, </P> 
<P ALIGN=CENTER>но и по центру</P> 
<P ALIGN=RIGHT>или по правому краю.</P> 
</body> 
</html>

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

Теги выделения текста чертой — , и

Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег или подчеркивание

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

Еще два схожих по назначению тега — <s> и <strike>. Оба выполняют функцию ~~зачеркивания~~ текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

§ 8. Создание списков в HTML

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

В нумерованном списке маркеры (значения атрибута type) такие:

1 — нумерация арабскими цифрами (по умолчанию);
A — большими латинскими буквами по алфавиту;
a — маленькими латинскими буквами;
I — большими римскими цифрами;
i — маленькими римскими цифрами.

Например, HTML-код

Первый элемент.Второй элемент.Третий элемент.

браузер покажет так:

Первый элемент.
Второй элемент.
Третий элемент.

В маркированном списке значения атрибута type такие:

disc — закрашенный кружок (по-умолчанию);
circle — незакрашенный кружок;
square — закрашенный квадратик.

Например, HTML-код

Первый элемент.Второй элемент.Третий элемент.

в браузере выглядит так:

Первый элемент.
Второй элемент.
Третий элемент.

Как и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:

Первый элемент. Второй элемент. Третий элемент. Четвёртый элемент. Пятый элемент.

браузер покажет так:

Первый элемент.
- Второй элемент.
- Третий элемент.
- Четвёртый элемент.
Пятый элемент.

Виды хтмл тегов

Все хтмл теги подразделяются на два вида:

Одиночные
Парные

Парные имеют открывающий и закрывающий тег.

Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.

К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца.

Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.

Обратите внимание!

К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда

В данном примере конец абзаца.

Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.

Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным.

Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.

Наглядный пример выделения

Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.

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

Встраивание элементов

<img></img> — вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

<img src=»name» align=?> — выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

<img src=»name» border=?> — позволяет настроить в пикселях толщину рамки вокруг изображения.
<picture></picture> — контейнер для расположения элемента <img> без <source>, который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

<audio></audio> — вставка звукового контента.

<video></video> — вставка видео (поддерживается Ogg, WebM и MP4).
<source></source> — указывает местоположение файла для <video>, <audio> и <picture>
<track> — формирует субтитры для <video> и <audio>.

<hr size=?> — устанавливает высоту линии.

<hr width=?> — устанавливает ширину линии.

<hr noshade> — убирает тень у линии.

<hr color=?> — задаёт цвет линии.
<script></script> — определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
<noscript></noscript> — ограничивает фрагмент документа, в котором скрипт не выполняется.

Форматирование и работа с текстом

<p> — текстовый абзац. Блочный парный тег, пишется всегда с новой строки.
<br> — тег, используемый для разрыва строки в том месте, где он стоит.
<wbr> — тег, также отвечающий за разрыв строки, но в том месте, где это может стать необходимо браузеру.
<blockquote> — текст, выделенный этим тегом, представляет собой отдельный выделенный блок с отступами. Как правило, используется для выделения длинных цитат в HTML-документе.
<q> — тег, используемый для выделения кратких цитат в тексте. По умолчанию содержание тега заключается в кавычки.
<b> — задаёт шрифту жирное начертание. Возможно использование вместе с другими тегами, задающими параметры тексту.
<i> — курсивное написание содержащегося внутри текста.
<small> — уменьшает шрифт на 1 единицу. Текст в HTML имеет размер от 1 до 7, по умолчанию шрифту задается размер 3. А с помощью тега <small> текст уменьшится до 2. Допускается неоднократное использование этого тега, но размером меньше 1 текст не может быть.
<u> — тег, который делает шрифт подчеркнутым.
<s> — зачеркнутый шрифт.
<sub> — подстрочное написание шрифта.
<sup> — надстрочное написание шрифта.
<bdo> — задаёт тексту направление написания. Используется в случае, когда текст пишется на иврите и т.д.
<ol> — создание упорядоченного нумерованного списка. Элементы списка должны начинаться с тега <li>. Обязательно использование закрывающего тега.
<ul> — тоже список, только маркированный. Требования к элементам и закрытию тега как и у <ol>.
<a> — этот тег делает из текста гиперссылку. Обязательно использование закрывающего тега.

Что такое html теги

HTML тег — это специальный код (элемент или команда), который указывает браузеру, как интерпретировать документ для пользователя.

Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.

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

Парный html тег с атрибутом

Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.

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

Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.

Например, выделение текста жирным:

Ниже мы еще к этому вернемся.

Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.

Однако стандарт подразумевает писать их в нижнем регистре.

У тега могут быть атрибуты.

Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.

К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.

Встраиваемые элементы HTML

Добавлением и управлением аудиозаписей на веб-странице занимается тег <audio>. Путь к файлу прописывается через тег <source>. Это парный тег, который обязательно должен быть закрыт. И ещё внутри <audio> можно написать текст, который будет выводиться в случае, если видео не может быть открыто в каком-то браузере.

Суть добавления и управления видеозаписями такая же, как и с тегом <audio>. Только осуществляется это через тег <video>.

К аудио и видео в HTML можно добавлять субтитры с помощью тега <track>.

Для отображения изображений формата JPEG, PNG, GIF на веб-странице используется тег <img>.

В первые несколько месяцев работы этой шпаргалки по HTML вам вполне будет достаточно. А со временем вы сами будете дополнять её часто используемыми тегами и большую часть из них волей-неволей запомните наизусть.

Тег и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать CSS (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег <font>. Для него существует всего три атрибута:

face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

Так выглядит текст в теге <font> с использованием каждого атрибута: