Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Текст в html

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами <span>...</span>.

Для обрамления элементов блочного типа используется пара <div>...</div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример

<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="utf-8">
</head>
<body>
    <div>Первый блок текста</div>
    <div>Второй блок текста</div>
</body>
</html>

Основные теги форматирования текста

<p>...</p>	Абзац.
<h1>...</h1>	Заголовок первого уровня.
<h2>...</h2>	Заголовок второго уровня.
...
<h6>...</h6>	Заголовок шестого уровня.
<br>	Переход на новую строку.
<q>...</q>	Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr>	Горизонтальная разделительная линия.
<pre>...</pre>	Текст фиксированной ширины с сохранением всех пробелов и переносов.

Пример

<!DOCTYPE html>
<html>
<head>
    <title>Заголовки и абзацы</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Заголовок<br>первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <h4>Заголовок четвертого уровня</h4>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
    <hr>
    <p>Тест абзаца</p>
</body>
</html>

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

Выделение в тексте

<b>...</b>	Полужирный шрифт.
<i>...</i>	Курсив.
<ins>...</ins>	Подчеркнутый текст.
<del>...</del>	Перечеркнутый текст.
<sup>...</sup>	Надстрочный текст.
<sub>...</sub>	Подстрочный текст.

Пример

<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
<ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

РЕЗУЛЬТАТ:

Текст может быть полужирным. Текст может быть курсивом.
Текст можно подчеркнуть. ~~Текст можно зачеркнуть.~~
Текст может быть ^{надстрочным}. Текст может быть _{подстрочным}.

Цитаты, переменные, адреса

<address>... </address>	Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
<blockquote>... </blockquote>	Выделение цитат. Блочный элемент.
<cite>...</cite>	Выделение цитат. Обычно отображается курсивом.
<code>...</code>	Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
<em>...</em>	Выделение важных фрагментов текста. Обычно отображается курсивом.
<kbd>...</kbd>	Вывод текста шрифтом фиксированной ширины.
<samp>...</samp>	Вывод текста шрифтом фиксированной ширины.
<strong>...</strong>	Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
<var>...</var>	Используется для отметки имен переменных. Обычно отображается курсивом.

Читать дальше: HTML списки

.
Прокомментировать/Отблагодарить