HTML Информация Гайд HTML-Первые шаги.Работа с текстом.

Unnecess4ry

Unnecess4ry

Известный
Автор темы
875
482
Привет.Сегодня рассмотрим особенности текста,чтобы потом работать с текстом.
Начнем с особенностей текста.
Первая особенность это игнорирование большого кол-ва пробелов,т.е. на странице вместо 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>
Результат:
Переносы
Браузер часто переносит текст в тех местах где есть дефим или пробел.
Чтобы указать браузеру после какого слова(пример) переносить текст используем &shy; или элемент <wbr>.А если мы хотим,чтобы в определенных местах браузер не делал пернносы,используем &nbsp; .
Спецальные символы.
Знак ,,меньше"&lt;
Знак ,,больше"&gt;
Двойная кавычка&qout;
Амперсанд&amp;
[TBODY] [/TBODY]
Как мы видим,перед специальными символами ставится амперсанд(&) и заканчиваются точкой запятой(;)
Эти спец-символы позволяют вводить html код на веб-страницу.Пример:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Угловые скобки</title>
</head>
<body>
  <p>&lt;meta charset=&quot;utf-8&quot;&gt;</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>
Если мы всунем этот код в браузер,то увидем ,что между абзацами есть пустые места,чтобы их не было,ставим тэг <br> в конце,где будет перенос .
Пример:
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>
Результат: https://ibb.co/3Tkjc9w

Элемент <е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>
Результат:https://ibb.co/RpLbmxH
Элемент <mark>
Данный элемент нужен для того,чтобы выделить ссылки,важные слова,слова для поисковиков.
Пример:
HTML: 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>mark</title>
 </head>
 <body>
  <p>Если вы не желаете создавать свой интерфейс,
  то можете сказать браузеру вывести встроенные
  элементы управления. Для этого просто включите
  атрибут <i>controls</i> в тег <b>&lt;video&gt;</b>.</p>
  <pre>&lt;video src="ex.mp4" width="320" height="240"
  <mark>controls</mark>&gt;&lt;/video&gt;</pre>
 </body>
</html>
Результат:https://ibb.co/QFn8cTC

Элемент <b>
Тупо для того,чтобы триггерить глаза,важность в счет не берётся.
Пример:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>b</title>
</head>
<body>
  <p>Плазма вращает вихревой <b>эксимер</b> как
   при нагреве, так и при охлаждении.</p>
</body>
</html>
Результат:https://ibb.co/PQyrPsH
Элемент <i>
Данный элемент создает курсивы Используется,чтобы выделить текст,который по каким-то причинам отличается от основного.
Пример:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>i</title>
</head>
<body>
  <p>Акцентуация, как справедливо считает <i>Фридрих Энгельс</i>,
   противоречиво выбирает закон.</p>
</body>
</html>
Результат:https://ibb.co/q9sK5nF

Заголовки
Заголовки создаются тэгом <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>
Результат в браузере:https://ibb.co/n6gf9jD
Элемент <q>.
Данный элемент используется для того,чтобы цитату вставить прямо в предложение.Такие цитаты автоматический выделяются кавычеами(вид кавычек зависит от браузера)
Пример :
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Цитата</title>
</head>
<body>
  <p>Как говорила Бабочкина Куколка
    из сказки «Алиса в Стране Чудес»:
  <q>Главное – не забывать главного</q>.</p>
</body>
</html>
Результат:https://ibb.co/ZcFdMmL


Всем спасибо,что заглянули сюда.
 
Последнее редактирование модератором:
  • Нравится
Реакции: k0shaK
Войдите или зарегистрируйтесь для ответа.

Похожие темы

  1. Unnecess4ry
    HTML Информация Гайд HTML-Первые шаги.Значения атрибутов.
      • Нравится
    Ответы
    10
    Просмотры
    2K
    Web-разработка
    Unnecess4ry
    Unnecess4ry
  2. Unnecess4ry
    HTML Информация Гайд HTML -Первые шаги.Коментарии,Структура,Атрибуты.
      • Нравится
    Ответы
    2
    Просмотры
    1K
    Web-разработка
    Unnecess4ry
    Unnecess4ry
  3. Unnecess4ry
    HTML Информация Гайд HTML-Первые шаги.Ссылки.
      • Нравится
    Ответы
    39
    Просмотры
    5K
    Web-разработка
    Unnecess4ry
    Unnecess4ry
  4. Unnecess4ry
    HTML Информация Гайд Html-Первые шаги.Изображение
      • Нравится
    Ответы
    17
    Просмотры
    4K
    Web-разработка
    D3.Pheonix
    D3.Pheonix
  5. Unnecess4ry
    HTML Информация Гайд Первые шаги- Html.
      • Нравится
    Ответы
    11
    Просмотры
    2K
    Web-разработка
    Unnecess4ry
    Unnecess4ry
Сверху Снизу