- 874
- 483
Привет.Сегодня рассмотрим особенности текста,чтобы потом работать с текстом.
Начнем с особенностей текста.
Первая особенность это игнорирование большого кол-ва пробелов,т.е. на странице вместо 1000 пробелов будет отображться только 1 пробел.
Пример
Результат:
Так же,мы можем сделать так,чтобы большое кол-во пробелов не игнорировались.
Делается это с помощью элемента <prе>
Пример:
Результат:
Переносы
Браузер часто переносит текст в тех местах где есть дефим или пробел.
Чтобы указать браузеру после какого слова(пример) переносить текст используем ­ или элемент <wbr>.А если мы хотим,чтобы в определенных местах браузер не делал пернносы,используем .
Спецальные символы.
[TBODY]
[/TBODY]Как мы видим,перед специальными символами ставится амперсанд(&) и заканчиваются точкой запятой(;)
Эти спец-символы позволяют вводить html код на веб-страницу.Пример:
Результаты всех частей с кодом можно увидеть тут
Работа с текстом.
И так начнем .
Абзацы.
Абзац -один из самых главных частей работы с текстом.Абзацы добавляются с помощью тэга <р> (от слова paragraph) Пример:
Таким образом можно сделать очень много абзацов.
Пример:
Если мы всунем этот код в браузер,то увидем ,что между абзацами есть пустые места,чтобы их не было,ставим тэг <br> в конце,где будет перенос .
Пример:
Выделение текста.
Выделение текста в html существует для того,чтобы привлечь внимание на определённые детали и подробности.
Ввделение текста осуществляется с помощью данных элементов:
<strong> , <em> , <mark> , <b> , <i>.
Начнем с элемента <strong>.
Данный элемент используется для того,чтобы привлечь внимание к важным деталям текста.Пример с применением элемента <strong>
Результат: https://ibb.co/3Tkjc9w
Элемент <еm>
Данный элемент используется длятого,чтобы показать тот часть текста,который имеет особое значение .
Пример с применением элемента <em>:
Результат:https://ibb.co/RpLbmxH
Элемент <mark>
Данный элемент нужен для того,чтобы выделить ссылки,важные слова,слова для поисковиков.
Пример:
Результат:https://ibb.co/QFn8cTC
Элемент <b>
Тупо для того,чтобы триггерить глаза,важность в счет не берётся.
Пример:
Результат:https://ibb.co/PQyrPsH
Элемент <i>
Данный элемент создает курсивы Используется,чтобы выделить текст,который по каким-то причинам отличается от основного.
Пример:
Результат:https://ibb.co/q9sK5nF
Заголовки
Заголовки создаются тэгом <hN>(N=1-6)
<h1> элемент создает заголовок,который самый большой по размеру .<h6> самый маленький размер заголовка.
Пример:
Закинув в браузер,мы увидем это:
https://ibb.co/FhfJ1hT
Индексы.
Индексы создаются с помощью элементов <sup> и <sub>
<sup>
Данный элемент записывает символы в верхний индекс.<sup> от слова SuperScript
<sub>
Данный элемент записывает символы в
нижний индекс. <sub> от слова SubScript.
Примеры:
Результат в браузере:
https://ibb.co/nRfMZ7y
https://ibb.co/Pms26Lz
Цитаты
Цитаты создаются с помощью элементов <blockquote> и <q>.
Рассмотрим по отдельности.
Элемент <blockquote>.
Данный элемент используется для больших цитат,которые состоят из нескольких предложений. Когда мы используем данный элемент,в браузере цитате показывается по середине,делаются отступы с левой и правой стороны размером в 40 пикселей .
Внутри <blockquote> можно использовать другие элементы.Пример:
Результат в браузере:https://ibb.co/n6gf9jD
Элемент <q>.
Данный элемент используется для того,чтобы цитату вставить прямо в предложение.Такие цитаты автоматический выделяются кавычеами(вид кавычек зависит от браузера)
Пример :
Результат:https://ibb.co/ZcFdMmL
Всем спасибо,что заглянули сюда.
Начнем с особенностей текста.
Первая особенность это игнорирование большого кол-ва пробелов,т.е. на странице вместо 1000 пробелов будет отображться только 1 пробел.
Пример
HTML:
<!Doctype Html>
<HTMl>
<head>
<meta charset=utf-8>
<head>
<body>
<p> Взлом Жопы активирован! </p>
</body>
</html>Так же,мы можем сделать так,чтобы большое кол-во пробелов не игнорировались.
Делается это с помощью элемента <prе>
Пример:
HTML:
<!Doctype Html>
<HTMl>
<head>
<meta charset=utf-8>
<head>
<body>
<pre> Взлом Жопы произошел успешно ! </pre>
</body>
</html>Переносы
Браузер часто переносит текст в тех местах где есть дефим или пробел.
Чтобы указать браузеру после какого слова(пример) переносить текст используем ­ или элемент <wbr>.А если мы хотим,чтобы в определенных местах браузер не делал пернносы,используем .
Спецальные символы.
| Знак ,,меньше" | < |
| Знак ,,больше" | > |
| Двойная кавычка | &qout; |
| Амперсанд | & |
Эти спец-символы позволяют вводить html код на веб-страницу.Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Угловые скобки</title>
</head>
<body>
<p><meta charset="utf-8"></p>
</body>
</html>Результаты всех частей с кодом можно увидеть тут
Работа с текстом.
И так начнем .
Абзацы.
Абзац -один из самых главных частей работы с текстом.Абзацы добавляются с помощью тэга <р> (от слова paragraph) Пример:
HTML:
<p>Первый абзац</p>
<p>Второй абзац</p>Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Абзацы</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других — уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век...</p>
<p>Во всём — его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других — уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век...<br>
Во всём — его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>Выделение текста.
Выделение текста в html существует для того,чтобы привлечь внимание на определённые детали и подробности.
Ввделение текста осуществляется с помощью данных элементов:
<strong> , <em> , <mark> , <b> , <i>.
Начнем с элемента <strong>.
Данный элемент используется для того,чтобы привлечь внимание к важным деталям текста.Пример с применением элемента <strong>
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>strong</title>
</head>
<body>
<p>Уравнение возмущенного движения <strong>влияет</strong>
на составляющие гироскопического момента
<strong>больше</strong>,
чем жидкий экваториальный момент.</p>
</body>
</html>Элемент <еm>
Данный элемент используется длятого,чтобы показать тот часть текста,который имеет особое значение .
Пример с применением элемента <em>:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>em</title>
</head>
<body>
<p>Уравнение возмущенного движения <strong>влияет</strong>
на составляющие <em>гироскопического момента</em>
<strong>больше</strong>, чем жидкий
<em>экваториальный момент</em>.</p>
</body>
</html>Элемент <mark>
Данный элемент нужен для того,чтобы выделить ссылки,важные слова,слова для поисковиков.
Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mark</title>
</head>
<body>
<p>Если вы не желаете создавать свой интерфейс,
то можете сказать браузеру вывести встроенные
элементы управления. Для этого просто включите
атрибут <i>controls</i> в тег <b><video></b>.</p>
<pre><video src="ex.mp4" width="320" height="240"
<mark>controls</mark>></video></pre>
</body>
</html>Элемент <b>
Тупо для того,чтобы триггерить глаза,важность в счет не берётся.
Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>b</title>
</head>
<body>
<p>Плазма вращает вихревой <b>эксимер</b> как
при нагреве, так и при охлаждении.</p>
</body>
</html>Элемент <i>
Данный элемент создает курсивы Используется,чтобы выделить текст,который по каким-то причинам отличается от основного.
Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>i</title>
</head>
<body>
<p>Акцентуация, как справедливо считает <i>Фридрих Энгельс</i>,
противоречиво выбирает закон.</p>
</body>
</html>Заголовки
Заголовки создаются тэгом <hN>(N=1-6)
<h1> элемент создает заголовок,который самый большой по размеру .<h6> самый маленький размер заголовка.
Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки в тексте</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>https://ibb.co/FhfJ1hT
Индексы.
Индексы создаются с помощью элементов <sup> и <sub>
<sup>
Данный элемент записывает символы в верхний индекс.<sup> от слова SuperScript
<sub>
Данный элемент записывает символы в
нижний индекс. <sub> от слова SubScript.
Примеры:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нижний индекс</title>
</head>
<body>
<p>Формула серной кислоты: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Верхний индекс</title>
</head>
<body>
<p>ax<sup>2</sup> + bx + c</p>
</body>
</html>https://ibb.co/nRfMZ7y
https://ibb.co/Pms26Lz
Цитаты
Цитаты создаются с помощью элементов <blockquote> и <q>.
Рассмотрим по отдельности.
Элемент <blockquote>.
Данный элемент используется для больших цитат,которые состоят из нескольких предложений. Когда мы используем данный элемент,в браузере цитате показывается по середине,делаются отступы с левой и правой стороны размером в 40 пикселей .
Внутри <blockquote> можно использовать другие элементы.Пример:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цитата</title>
</head>
<body>
<p>Алиса в Стране Чудес.</p>
<blockquote>
<p>– Зачем мне всякие безумные, полоумные да сдвинутые?
– возмутилась Алиса. – Что я, ненормальная?</p>
<p>– Конечно! – воскликнул Кот. – Как и мы все.
Иначе ты сюда бы не попала!</p>
</blockquote>
<p>Льюис Кэрролл</p>
</body>
</html>Элемент <q>.
Данный элемент используется для того,чтобы цитату вставить прямо в предложение.Такие цитаты автоматический выделяются кавычеами(вид кавычек зависит от браузера)
Пример :
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цитата</title>
</head>
<body>
<p>Как говорила Бабочкина Куколка
из сказки «Алиса в Стране Чудес»:
<q>Главное – не забывать главного</q>.</p>
</body>
</html>Всем спасибо,что заглянули сюда.
Последнее редактирование модератором:
