HTML

Язык гипертекстовой разметки

HTML

Любая страница в интернете состоит из множества тегов. С их помощью мы объявляем заголовки, параграфы, ссылки, картинки и другие элементы.

CSS

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

Js

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

PHP

PHP позволяет соединить все страницы в единое целое и предоставить сайту функции, без которых эти страницы не будут работать как единое целое: авторизоваться на сайте, добавить товары в корзину и сделать заказ.

Строение HTML документа

              
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3.   <head>
    4. 
                
  4.    <meta charset="utf-8">
    5. 
                
  5.    <title>Моя тестовая страница</title>
    6. 
                
  6.   </head>
    7. 
                
  7.   <body>
    8. 
                
  8.    <p>Тут находятся все элементы отображаемые на странице</p>
    9. 
                
  9.    <p>My cat is very grumpy</p>
    10. 
                
  10.   </body>
    11. 
                
  11. </html>
    12.

Рассмотрим данный пример HTML кода

пример кода
  1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключенного в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к ошибкам отображения элементов.
  3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Примеры

Начнем с элементов, которые могут быть использованны в теге <body>

<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4>

<h5>Заголовок</h5>
<h6>Заголовок</h6>

Теги заголовков

Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h1>–<h6>

<p>Новый абзац</p>

<em>Курсивный шрифт</em>
<b>Жирный шрифт</b>

Выделение <mark>текста</mark>

<del>Перечеркнутый текст</del>

<ins>Подчеркнутый текст</ins>

Текст<sub>подстрочный текст</sub>

Текст<sup>надстрочный текст</sup>

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

<p> - Данный тег определяет абзац текста.
<em> - Отображает шрифт курсивом.
<b>- Задаёт полужирное начертания шрифта
<mark> - Применяется для выделения фрагментов текста желтым цветом в справочных целях.
<del> - Перечёркивает текст. Используется для выделения текста, удаленного из документа.
<ins> - Выделяет текст в документе, подчёркивая его.
<sub> - Используется для создания нижних индексов.
<sup> - Используется для создания степеней.

<a href="ссылка на сайт">Текст ссылки</a>

<img src="путь_до_картинки.png" alt="текст" >

картинка
    <ol>
  1. <li>1 элемент списка</li>
  2. <li>2 элемент списка</li>
    3. </ol>

<table>

<tr><th>Имя</th> <th>Фамилия</th> <th>Возраст</th>
<tr><td>Иван</td> <td>Иванов</td> <td>35</td>
<tr><td>Петр</th> <td>Львович</td> <td>42</td>
<tr><td>Оля</td> <td>Смирнова</td> <td>64</td>

</table>

Ссылки, таблицы, списки, изображения

<a> - Тег для создания ссылок в документе.
Атрибут href указывает документ, на который будет вести данная ссылка.
<img> - С помощью данного тега можно вставить картинку. Атрибут src (источник), указывает путь к нашему файлу изображения. Атрибут alt (альтернатива) указывает текст для пользователей, у которых не прогрузилось изображение.
<ol> - Представляют собой нумерованный или <ul> маркированный список. Элементом такого списка является тег <li>
Тег <table> служит контейнером для элементов, которые определяют содержимое таблицы.
Число строк, ячеек и заголовок таблицы задают с помощью тегов <tr><td> и <th>.