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

Вот эти три языка:

  1. HTML
  2. CSS
  3. JavaScript
  • Все они имеют разные цели и функции, которые объединены для создания единого веб-сайта. Думайте о веб-сайте как о человеческом теле, HTML будет его скелетом, CSS будет его внешними функциями, а JavaScript будет всей внутренней функциональностью!

HTML-элементы:

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

В этом разделе мы узнаем об основах HTML. Элементы, которые мы рассмотрим:

Основной шаблон HTML.Это базовый HTML-документ.

<!DOCTYPE html> means that document type is html. After that is the html tag with lang attribute in it showing that the language is English. 
<head> tag is used to give information about the web page.It contains many meta elements showing which character set to use and what should be the content width.
<title> tag is used to show the title of the page ( usually the one written on the opened tab button)
</> indicates the closing of a tag.
<body> represents the body of the web page.
<!-- This is a basic html structure -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

Текст (отображение текста на веб-странице):

in the <body> tag you can see different elements used such as <p> representing a paragraph and <h1> representing a heading with 1 being the a bigger font and 6 being the smallest.Although keep in mind that its not a matter of size (size can always be changed using css) , headings are used according to the importance of the content.It is preferred that we use only one <h1> heading so that search engines can easily figure out what the content is about !
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This is a web page</p>
    <h1>This is a html document</h1>
    <h3>This is a beginners guide </h3>
</body>
</html>

Примечание. Если вы совсем новичок и не знаете, как вывести результат, все, что вам нужно сделать, это открыть html-документ с помощью веб-браузера.

Объекты. Некоторые символы зарезервированы в HTML, поэтому для их отображения нам необходимо использовать специальную запись. Предположим, мы хотим отобразить на веб-странице фразу Я люблю ‹html›. Когда мы пишем это в теге ‹p› редактор путает его с элементом ‹html›, который является другим тегом. Итак, чтобы решить эту проблему, мы используем html-объекты.

The & sign is used , lt stands for less than.
&gt; means greater than.
There are many other entites we can use.You can look up for them if you want to, but we rarely use them.

Гиперссылки. Почти все веб-страницы в Интернете содержат ссылки на другие страницы. Чтобы добавить эти ссылки на нашу веб-страницу, мы используем элемент привязки или ‹a href="» › . Каждый элемент привязки должен иметь атрибут href или гипертекстовой ссылки.

What this code does is it creates a word named google and when you click on it , the google search page is opened. target="_blank" attribute means the page will open in a new tab. If we don't use this attribute the page will open in the current tab.
</head>
<body>
    <a href="https://www.google.com" target="_blank">Google</a>
</body>
</html>

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

Встраивание изображений. Элемент ‹img› используется для добавления или ссылки на изображения на нашем веб-сайте. Он включает в себя атрибут src или source и alt или альтернативу (текст, который будет отображаться, если изображения недоступны).

</head>
<body>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo">
</body>
</html>