Веб-разработка

Разрыв текста

Способ переноса текста на следующую строку.

Читать
Когда ты добавляешь текст на свой сайт, очень часто бывает удобно разбить его на несколько строк, тег <br>предназначен как раз для этого! Он разобьёт текст и выведет его части на разных строках.

Первая строка. <br> Вторая строка.

Добавление параграфа

Способ добавления частей текста параграфом.

Читать
В HTML есть способ не разделять текст по строкам а сразу добавлять его целыми параграфами.
Стартовый тег для параграфа выглядит так: <p>. После стартового тега нужно ввести текст и закончить вывод тегом </p>

<p>
     Всем привет!
</p>

Добавление заголовков

Способ выделения важного текста.

Читать
Заголовки («headers») служат для вывода важной информации. <h1&gt используется для наиболее значимых заголовков, например, названий статей, <h2> — для чуть менее важных (названия пунктов статей), и так далее.
Добавляя заголовки, используя теги <h1>, <h2> и <h3>, не забывай ставить закрывающий тег, например, </h1>.

<h1>Важный заголовок</h1>
<h2>Заголовок</h2>
<h3>Маленький заголовок</h3>

Добавление изображений

Способ добавлять на страницу изображения и настраивать их размер.

Читать
Тег <img> используется для добавления на страницу изображения.
У тега <img> есть обязательный атрибут src, в котором указывается адрес (URL) изображения.
Чтобы добавить атрибут в тег, напиши его между < и >. После src напиши знак равно (=) и окружающие значение кавычки «.

<img src="ссылка">

Почти не отличается от создания переменной! Только эта переменная задаётся внутри тега.
Существуют различные атрибуты кроме атрибута src. Чтобы задать размер изображения () ты можешь использовать атрибуты height(высота) и width(ширина). height и width измеряются в «пикселях» или px. Таким образом, если установить ширину изображения в 50 вместо 200 пикселей, ширина уменьшится и станет 25% от исходного значения, а не 50%.
Если изменять только ширину (width) или высоту (height), размер изображения будет изменяться пропорционально. То есть, ты поменяешь ширину изображения, высота изменится автоматически, чтобы изображение сохраняло исходные пропорции.
Если менять и ширину (width) и высоту (height) изображение примет размеры в соответствии с заданными значениями.

<img src="ссылка" width="200" height="150">

Блочные тэги

Добавление текста или изображений отдельными блоками

Читать
Теги <div> служат для организации информации на веб-сайте. Они используются для группировки определённых элементов, объединяя различные части контента в блоки.
Это помогает выделить каждый кусок контента в отдельный редактируемый блок.

<h1> Мой дневник </h1>
<div>
    <h2>День первый</h2>
    <p>Сегодня все было хорошо!</p>
</div>

Добавление списков

Способы создания упорядоченных и неупорядоченных списков.

Читать
Во время создания страницы мы часто сталкиваемся с необходимостью перечисления чего либо. В таком случае очень удобно оформлять текст в виде списков.
Тег <ul> используется для списков, элементы которых не стоят в определенной последовательности, а просто перечисляются. Такие списки называются неупорядоченными.

Чтобы компьютер различал каждый элемент списка, выделяй их парным тегом <li> вплоть до закрывающего тега </ul>.

<h2>Список покупок</h2>
<ul>
    <li>Хлееб</li>
    <li>Молоко</li>
    <li>Сахар</li>
    <li>Яблоки</li>
</ul>

Для создания упорядоченных списков, в которых каждый элемент пронумерован по порядку, используется тэг <ol>. При этом для обозначения элементов, как и в предыдущем случае, используется <li>.

<h2>Победители соревнований</h2>
<ol>
    <li>Михаил</li>
    <li>Анастасия</li>
    <li>Степан</li>
</ol>

Внедрение CSS

Использование CSS для изменения внешнего вида страниц.

Читать
Каскадные листы стилей или CSS служат для форматирования различных частей веб-сайта.
Чтобы добавить особые правила оформления, используй парный тег <stule>.
При изменение стилей ты можешь выбрать тег, внешний вид которого хочешь изменить, а после написать настройки внешнего вида.
Заметь: тег <stule> отличается от прочих HTML-тегов своим содержимым!
Пример использования с описанием команд:

<style>
    h1 /* Это выбор элемента */ { /* Используй { } для правил CSS */
        color: red; /* Сначала идёт название атрибута, затем его значение. */
        /* Обрати внимание на двоеточие между именем и значением. А также на точку с запятой в конце!  */
    }

    p {
        text-align:center; /*Выравнивание текста: left-по левому краю, right-по правому краю, center-по центру*/
        color: maroon;  /*Выбо цвета текста*/
        background-color:green; /*Выбор цвета фона*/
    }

    img { /*Настройка размеров изображения*/
        width: 100px; 
        height: 200px;
    }
</style>

Атрибут class используется для упрощения стилизации элементов. Присоедините атрибут к элементу, добавив его внутрь открывающего тэга. Далее внутри <stule> ты можешь написать название класса с точкой перед ним, и все правила написанные далее будут применены не для всех тегов страницы, а только для тех, которые содержат данный класс.
Точка «.» перед именем класса сообщает CSS коду, что нужно редактировать только элементы с классом.

<style>
    /* Это устанавливает для всех элементов с классом "neat" синий цвет - color: blue. */
    .neat {
        color: blue;
    }
</style>

<!-- Этот <div> Элемент имеет класс "neat"  -->
<div class="neat">
    <p>Hello, world!</p>
</div>