Привет всем, добро пожаловать в очередную статью. В этой статье мы узнаем об основах HTML, которые необходимо знать, чтобы правильно понимать HTML. В этой статье мы рассмотрим такие темы, как doctype, заголовки, параграфы, списки и т.д.
Допустим, если вы хотите создать дом, что вы сделаете в первую очередь? Начнете ли вы собирать краски? Нет, вы не начинаете собирать краски, когда начинаете строить свой дом, вместо этого вы собираете кирпичи, растворы и т.д., чтобы создать прочный фундамент. HTML выполняет ту же работу, создавая структуру вашего сайта.
Что такое HTML?
HTML расшифровывается как Hyper Text Markup Language, и это язык, который используется для создания структуры и дизайна веб-сайтов. Термин гипертекст относится к возможности просматривать относительный или соответствующий контент. HTML — это язык разметки, теги используются в HTML для определения общей структуры веб-сайта.
История HTML?
HTML был впервые изобретен Тимом Бернерсом-Ли в 1993 году, хотя язык не получил широкого распространения до 1999 года, когда HTML 4.01 стал официальным стандартом для веб-разработки. В 2012 году язык был обновлен до HTML5, который предложил расширенные возможности.
В HTML-документе мы часто видим декларацию <!DOCTYPE HTML> перед тегом. Технически <!DOCTYPE HTML> не является ни тегом, ни элементом, это просто указание браузеру о типе документа. Самый распространенный пример, который вы можете увидеть, следующий —
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
This is the content of the document.
</body>
</html>
Структура элемента HTML или тегов?
Основной элемент HTML состоит из трех частей —
- Открывающий тег — В открывающем теге вы называете элемент, который хотите написать, и заключаете его в угловые скобки. Открывающий тег — это очень важный тег в HTML.
- Закрывающий тег — он также похож на открывающий тег, но в этом случае вы просто добавляете прямую косую черту перед именем элемента и заключаете его в угловые скобки. В некоторых элементах закрывающий тег не нужен, и они известны как самозакрывающиеся теги.
Содержание — Между тегами можно написать любое содержимое, предназначенное для отображения. Оно может включать текст, изображения или любой другой материал.
В HTML существует множество других тегов или элементов, таких как атрибуты, инлайн-элементы, блок-элементы, заголовки, параграфы, списки.
Атрибуты
Элементы могут иметь определенные атрибуты, которые помогают определить их еще больше. Наиболее распространенные атрибуты, о которых вы наверняка слышали, — это Class и ID, которые также могут помочь в создании стиля, когда вы будете добавлять CSS на свой сайт. Вы можете использовать эти Class и ID для добавления различных стилей. Вы даже можете использовать эти атрибуты через Javascript для выполнения некоторых логических операций.
Блок-элементы и инлайн-элементы
В HTML существует много элементов на уровне строк и много элементов на уровне блоков, от элементов на уровне блоков я хочу сказать, что элементы начинаются с новой строки и занимают всю ширину страницы. Выше я привел примеры элементов заголовка h1 и абзаца p. Эти элементы являются элементами блочного уровня, тогда как элементы inline — это элементы, которые занимают столько ширины, сколько им нужно, и часто используются внутри других элементов. Некоторые примеры элементов inline — br, span, strong и em.
Заголовки, параграфы и списки
Заголовки
Заголовки, или заголовки, или текст заголовка — это часто используемый элемент в HTML. Заголовки нумеруются по размеру от h1 до h6, где h1 — самый большой заголовок, а h6 — самый маленький.
<h1>I am Heading</h1>
<h2>I am Heading</h2>
<h3>I am Heading</h3>
<h4>I am Heading</h4>
<h5>I am Heading</h5>
<h6>I am Heading</h6>
Абзацы
это также очень часто используемый элемент в HTML. Элемент Paragraph используется для написания абзацев.
<p>I am a paragraph</p>
Списки
Списки HTML также могут помочь упорядочить содержимое, создавая маркированные или нумерованные списки. Существует несколько типов списков — например, тег ul создает неупорядоченный или маркированный список, а тег ol — упорядоченный или нумерованный список. Каждый элемент списка заключен в теги li.
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
Вот и все для сегодняшней статьи, есть еще несколько тем для рассмотрения в этой статье, но не волнуйтесь, заходите на мою страницу со статьями, я скоро выложу вторую часть этой статьи. Спасибо за прочтение и если вы получили какие-либо знания из этой статьи, дайте мне несколько ценных комментариев.