Введение в HTML
HTML означает язык разметки гипертекста, и документы, использующие этот язык, создают веб-страницы. Каждый веб-сайт использует это, поэтому важно понимать, как это работает.
В этой обучающей статье вы узнаете все, что вам нужно знать о HTML .
Что такое декларация <! DOCTYPE>?
Объявление <! DOCTYPE> – это первая строка кода в каждом файле HTML . Он сообщает веб-браузерам, какая версия HTML находится в конкретном файле.
Каждая версия HTML уникальна и имеет собственный набор правил. HTML 5 – последняя версия языка. Это рекомендуемая версия для разработчиков, а также самая простая для объявления версия. Чтобы объявить документ HTML 5 , просто добавьте элемент HTML в объявление <! DOCTYPE> .
Вы можете увидеть пример ниже:
<!DOCTYPE html>Что такое тег <head>?
В каждом HTML- документе за объявлением <! DOCTYPE> следует тег <html> . Этот тег определяет корень документа и включает теги <head> и <body> .
Тег <head> является первым разделом и содержит теги <title> и <meta> . Однако в некоторых случаях, когда разработчик решает использовать внутренний CSS, тег <style> также помещается в тег <head> .
В документе HTML есть только один тег <title> . Тег <title> содержит заголовок веб-страницы, и эта информация отображается в области вкладок веб-браузера.
Вы можете увидеть пример тега заголовка ниже:
<title>An Introduction to HTML</title>HTML- файл с указанным выше тегом <title> будет отображаться как «Введение в HTML» в области вкладок браузеров.
Тег <meta> описывает содержимое веб-страницы и обычно имеет имя и атрибут содержимого. Три наиболее популярных типа тегов <meta> – это описание, ключевое слово и область просмотра.
Ниже приводится описание примера тега <meta> :
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
Атрибут содержимого тега description <meta> содержит описание вашей веб-страницы. Это данные, отображаемые в результатах поисковой системы, которые говорят потенциальному посетителю, чего ожидать от веб-сайта.
Ниже приведен пример тега <meta> ключевых слов:
<meta name="keywords" content="HTML, web development, etc">
Тег <meta> ключевых слов содержит слова или фразы, имеющие отношение к вашему веб-сайту. Каждое новое слово или фраза, назначенные атрибуту содержимого ключевого слова, разделяются запятой, как вы можете видеть в примере выше.
Ниже приведен пример тега <meta> окна просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Тег <meta> окна просмотра помогает создавать адаптивные дизайны, делая вашу веб-страницу адаптируемой к различным типам устройств.
Что такое тег <body>?
Тег <body> – это второй основной раздел в корневом теге <html> . Тег <body> содержит каждый элемент, отображаемый на веб-странице.
Элементы с тегом <body> классифицируются как встроенные или блочные. Если вы хотите увидеть полную шпаргалку по основам HTML , мы составили ее, чтобы вам было проще все понять.
Что такое блочные элементы?
Блочные элементы всегда начинаются с новой строки и занимают всю ширину линии, на которой они находятся.
Некоторые элементы блока, которые вы будете использовать, включают:
- Теги заголовка
- Тег <p>
- Тег <div>
- Тег <ol>
- Тег <ul>
- Тег <li>
Блочные элементы используются для разделения текста на веб-сайте в последовательном, удобоваримом формате.
Что такое заголовочные теги?
Существует шесть различных типов тегов заголовков: <h1> , <h2> , <h3> , <h4> , <h5> и <h6> . Тег <h1> создает самый большой заголовок, <h6> создает самый маленький заголовок, а все остальные заголовки занимают позицию между ними (в зависимости от его числового значения).
Теги заголовков используются в заголовках на веб-странице. Использование определенного тега заголовка зависит от положения заголовка на веб-странице. Например, тег <h1> используется в первом заголовке веб-страницы, а веб-страница использует только один элемент h1 (хотя у нее может быть несколько элементов h2, h3 и h4).
Вы можете увидеть пример тега <h1> в действии ниже:
<h1> Learning the Basics of HTML </h1>
Что такое тег <p>?
<p> – это еще один блочный элемент, который используется в теле веб-страницы и создает абзацы. Ниже приведен пример использования этого тега:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Что такое тег <div>?
Тег <div> представляет собой разделение. Он используется для создания контейнеров для групп других элементов HTML для стилизации или функциональных целей.
Например, если вы работаете с сеткой, вам придется поместить все элементы сетки в контейнер. Тег <div> – это то, что вам нужно использовать для создания контейнера.
Что такое теги <ol> и <ul>?
Теги <ol> и <ul> используются для создания списков в HTML . Тег <ol> создает упорядоченные списки, а тег <ul> создает неупорядоченные списки. Однако оба тега используют тег <li> , который создает элементы списка.
Использование тега <ol>
В упорядоченном списке по умолчанию используются числа. Однако тег <ol> имеет атрибут типа, который можно использовать для явного указания элемента, который вы хотите использовать для упорядочивания списка. Вы можете заказать список с римскими цифрами в верхнем или нижнем регистре, буквами верхнего или нижнего регистра или цифрами.
Вы можете увидеть пример ниже:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Приведенный выше код создает упорядоченный список с использованием строчных букв.
Использование тега <ul>
Тег <ul> также имеет атрибут типа, который принимает одно из нескольких значений: диск, круг или квадрат. Однако диск по умолчанию является индикатором нового элемента в неупорядоченном списке.
Ниже приведен пример того, что неупорядоченный список хотел бы в виде кода:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Что такое встроенные элементы?
Встроенный элемент не начинается с новой строки. Он начинается со следующей доступной позиции, которая может находиться или не находиться на новой строке, и использует только необходимую ширину. Некоторые встроенные элементы, которые вы, скорее всего, будете использовать, включают:
- Тег <span>
- Тег <a>
- Тег <img>
- Тег <label>
- Тег <button>
Мы обсудим каждый из них более подробно ниже.
Что такое тег <span>?
Тег <span> используется для встроенного стиля. Например, если вы хотите изменить стиль определенного слова или фразы в абзаце, вы можете использовать тег <span> .
Ниже приведен пример этого тега:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Использование тега <span> в приведенном выше примере гарантирует, что два слова в теге <span> теперь могут иметь уникальный стиль.
Что такое тег <a>?
Тег <a> используется для создания ссылок на веб-странице. Тег <a> позволяет разработчику ссылаться на другой веб-сайт (внешняя ссылка) или на другую веб-страницу на том же веб-сайте (внутренняя ссылка). Тег <a> имеет два важных атрибута – href и target.
Атрибут href важен, поскольку он хранит значение местоположения ссылки. Атрибут target необходим, потому что он позволяет пользователю открывать ссылку в новой вкладке. Без атрибута target ссылка откроется на текущей вкладке, а если это внешняя ссылка, она уведет трафик с вашего сайта.
См. Ниже пример тега <a> в действии:
<a href="http://google.com" target="_blank">Click this link to Google</a>Изучение HTML необходимо программистам
Изучение HTML имеет решающее значение для всех программистов и должно стать основой вашей учебы. К счастью, это тоже не так уж сложно.
Прочитав это руководство, у вас должно быть все необходимое для лучшего форматирования веб-сайтов.