HTML-Первые шаги. Работа с текстом.

  • Автор темы Автор темы Valli03
  • Дата начала Дата начала
Привет. Сегодня рассмотрим особенности текста,чтобы потом работать с текстом.
Начнем с особенностей текста.
Первая особенность это игнорирование большого кол-ва пробелов,т.е. на странице вместо 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>


Элемент <е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>&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>


Элемент <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>

Индексы.
Индексы создаются с помощью элементов <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>

Цитаты
Цитаты создаются с помощью элементов <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>
Результат: https://ibb.co/ZcFdMmL


Всем спасибо, что заглянули сюда.
 
Нажмите для раскрытия...
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху Снизу