Содержание

Акцентирование (выделение) текста в HTML — Разметка текста — codebra

Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег <b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов

<i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Код HTML

<b>Жирный текст</b>

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Код HTML

<u>Подчеркнутый текст</u>

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

<strike>Зачеркнутый текст</strike>

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же выгодно использовать всегда стили CSS. Далее пример:

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений:

font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900. Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style. Далее пример:

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span>

Код CSS

.u {
text-decoration: underline;
}

Выделяем текст. Жирный шрифт. HTML-пособие для начинающих

Один из наиболее простых способов выделить в тексте слово или фразу – использовать другое начертание букв. Так можно подчеркнуть слово или фразу, используя жирный шрифт. HTML-разметка страницы с легкостью позволяет выделять слова с помощью различного начертания – курсивного, подчеркнутого, жирного.

жирный шрифт html

Жирный шрифт как способ выделить главное

Наиболее ярко и броско выглядят слова, выделенные с помощью жирного шрифта. Такие слова и фразы сразу бросаются в глаза. Итак, для того чтобы научиться быстро выделять в тексте нужные места, следует запомнить специальный HTML-код. Жирный шрифт выставляется с помощью парного тэга <b> </b>.

Перед словом или фразой, предложением, которые должны быть выделены, ставится открывающий тэг <b>. После последней буквы в тексте, который следует выделить, ставится закрывающий тэг </b>. Все, что оказывается между этими двумя тэгами, при отображении в браузере имеет жирное начертание.

Другие варианты выделения

html код жирный шрифт

Итак, мы выяснили, что можно выделить текст с помощью другого начертания. Определились, что наиболее просто и в то же время эффективно использовать жирный шрифт HTML. Теперь поговорим о других вариантах выделения.

Так, можно выделить текст курсивом с помощью парного тэга <i> </i>, подчеркнуть его с помощью <u> </u>. Это наиболее простые способы выделения текста.

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать <s> </s>. Сделать текст моноширным поможет парный тэг <tt> </tt>. Если вам нужно создать верхний индекс, используйте <sup> </sup>, нижний — <sub> </sub>.

При этом, как и ранее, нужный вам текст должен находиться между открывающим и закрывающим тэгом. Как видите, нет ничего сложного, главное – запомнить данные коды или записать их.

Использование нескольких шрифтов

Если вы хотите сделать текст более выразительным, вы можете использовать не только жирный шрифт. HTML-разметка позволяет одновременно выделять слово с помощью нескольких начертаний. Так, можно одновременно сделать слово жирным, перечеркнутым и курсивным.

тег жирный шрифт html

При этом надо помнить одно – все тэги должны закрываться последовательно. Например, правильная запись может быть такой:

  • <i><u><b> выделенный текст </b></u></i>.

Если же вы закроете тэги в другом порядке, то текст будет выделен неправильно. Пример ошибочной записи:

  • <i><u><b> выделенный текст </u></b></i>.

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

Кстати, тут можно отметить, что три варианта начертания – жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

Как видите, использовать можно не только курсивный или жирный шрифт. HTML-разметка позволяет выделять слова так же легко, как и обычный Word.

Выводы

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

Для того чтобы изменить начертание шрифта, следует использовать любой известный вам тег. Жирный шрифт HTML-страницы — наиболее яркий и заметный, а потому используется наиболее часто для выделения.

Урок 3. Заголовки и форматирование текста

Заголовки в HTML


Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького:
h2
— самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
<html>
   <head>
   <title>html заголовки</title>
   </head>
<body>

   <h2>Заголовок 1</h2>
   <h3>Заголовок 2</h3>
   <h4>Заголовок 3</h4>
   <h5>Заголовок 4</h5>

</body>
</html>


Демонстрация Скачать исходники
Вышеуказанный код отобразит следующее
Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде
Занимательно
, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту!

Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.

Форматирование текста в HTML


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

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.

<html>
   <head>
   <title>html параграфы</title>
   </head>
<body>

<p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>

</body>
</html>


Демонстрация Скачать исходники

У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине

Атрибут align есть и у заголовков (тег
h
), и у параграфов (тег p).

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

<html>
   <head>
   <title>html выравнивание параграфов</title>
   </head>
<body>

<p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</body>
</html>


Демонстрация Скачать исходники
В браузере отобразится следующее

Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.

<html>
   <head>
   <title>центрирование в html</title>
   </head>
<body>

<center>Текст по центру</center>

</body>
</html>

Как выделить текст полужирным в html?


strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.

Рассмотрим пример кода выделения текста жирным

<html>
   <head>
   <title>html выделение жирным</title>
   </head>
<body>

<p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю, 
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p>

</body>
</html>


Демонстрация Скачать исходники
В браузере отобразится следующее

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?


i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд.

Рассмотрим пример кода c выделением текста курсивом

<html>
   <head>
   <title>Допустим страница о машинах</title>
   </head>
<body>

<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году. 
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.
<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>

</body>
</html>


Демонстрация Скачать исходники
В браузере отобразится так

Как выделить текст подчёркиванием в html?


u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?


Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
<html>
   <head>
   <title>Перечёркнутый текст в html</title>
   </head>
<body>

Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>

</body>
</html>


Демонстрация Скачать исходники

Как выделить текст в верхнем и нижнем индексах в html?


sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
<html>
   <head>
   <title>индексы в html</title>
   </head>
<body>

<p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>
<p>H<sub>2</sub>O - химическая формула воды.</p>

</body>
</html>


Демонстрация Скачать исходники
В браузере отобразится следующее

Тег font в html


Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.

size — активные значения от 1 до 7. Шрифт по молчанию равен 3.

color — цвет текста. Если не задать параметр, то текст будет чёрным.

<html>
   <head>
   <title>Тег font в html</title>
   </head>
<body>

<font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>

</body>
</html>


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

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE


Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup
<html>
   <head>
   <title>Тег pre в html</title>
   </head>
<body>

<pre>Как захотели ввести текст
              так он и                отобразился!     =)</pre>

</body>
</html>


Демонстрация Скачать исходники
В браузере будет так

Другие теги для форматирования текста


Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
   <head>
   <title>Тег abbr в html</title>
   </head>
<body>

<abbr title="Hypertext Markup Language">HTML</abbr> 

</body>
</html>


Демонстрация Скачать исходники
В браузере будет выглядеть так

Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>
   <head>
   <title>Тег acronym в html</title>
   </head>
<body>

<acronym title="Hypertext Markup Language">HTML</acronym> 

</body>
</html>

Горизонтальная черта в html или тег hr


Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.

У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии

<html>
   <head>
   <title>Тег font в html</title>
   </head>
<body>

Обычная линия
<hr>

Линия по центру длиной 50% от ширины блока, толщина линии 2
<hr align="center" size=2 width=50%>

Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">

</body>
</html>


Демонстрация Скачать исходники
В браузере

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

Выделение текста: жирным, курсивом, подчеркнутым и зачеркнутым стилями

          Продолжаем. В данной статье рассмотрим стили текста html: жирный, курсив, подчеркнутый, зачеркнутый. Текст не может всегда быть однообразным. Его слова, фразы необходимо,  в некоторых случаях, как-то выделять. Для этого существует определенный ряд тегов. Теги стиля выделения: <b> и <strong>; <i> и <em>; тег <u>; а также <s> и <strike>.

Выделение жирным:
По типографскому стандарту в печати различают четыре вида насыщенности шрифта: светлое выделение, нормальное, полужирное и жирное. В системе HTML  можно установить только нормальное и жирное начертание и делают это с помощью двух тегов <b> или <strong>. Оба тега закрывающиеся.

                                                       

Сейчас открываем наш файл index_3.html в Блокноте. У кого его нет скачиваем здесь в формате index_3.rar. Вписываем указанные теги в первые строчки стихотворения, как показано на картинке Screen 1. Как всегда «Сохраняем». Полученный файл

                                                             
                                                                                                              Screen 1

 «Открываем» в браузере. Что мы видим? На Screen 2 показано, что все три строчки выделены жирным, в каких бы вариантах

                                                           
                                                                                                              Screen 2

 не были вставлены теги. Кроме того мы открывали этот файл в Opera и Firefox. Результат тот же. Текст в них отражается нормально. Можете проверить сами. Не будем вдаваться в подробности и забивать себе голову лишним: почему?, что? и как?

           Внимание! Еще раз повторяем, что наш курс «упрощенный», для начинающих. Он дает только «основные» навыки и понятия html построения. Но это не значит, что он неправильный. Наоборот, с его помощью, Вы сможете создавать свои первые веб-странички, переходя от простого к сложному. Все делается для того, чтобы проще и быстрее можно было понять и изучить наш «Основной курс».    

Выделение курсивом:
Курсивный шрифт представляет собой наклон в правую сторону отдельных букв, слов или целых предложений. Для некоторых шрифтов это полная переделка под новый стиль, имитирующий рукописный. Происходит при помощи двух закрывающихся тегов <i> или <em>.

                                  

Вставляем,   как  в предыдущем  примере,   в разных вариантах теги курсива в наш файл.    1. Заключаем фамилию автора в тег <i>.
2. Делаем курсивом две нижние строчки стихотворения, Screen 3. Смотрим что получилось, Screen 4.

                                                                                                    
                                                                   Screen 3.

                                 
                                                                   Screen 4.

На картинке видно, две последние строчки и фамилия автора выделены курсивом. Проверяем в других интернет-обозревателях. Все в порядке. Теги работают везде нормально. Что и требовалось доказать.

Подчеркнуть и зачеркнуть текст:
Здесь все делаем как в предыдущих разделах. Подчеркиваем зоголовок стихотворения используя тег <u>. Зачеркиваем оставшиеся строчки стиха тегами <s> и <strike>. Смотрим Screen 5 и Screen 6.

                                  
                                                                    Screen 5.

                                 
                                                                    Screen 6.

       Все выше изложенные теги  прошли проверку на интернет-обозревателях Uran, Opera, Mozilla, Yanex, Google Crome. Ни каких искажений показа на экране не отмечено. Дополнительные сведения об отдельных тегах, тем кому потребуются более точная информация, можно получить в «Cправочнике  html».
         Выделять  жирным, курсивом, подчеркивать и зачеркивать можно не только фразы, но и отдельные слова, а также отдельные буквы и цифры.
          На последок переименуем Копию index_3.html, в файл index_4.html и Сохраним. 
 

Изучаем курсивный, жирный, подчеркнутый и зачеркнутый текст

Урок 8. Жирный и курсивный текст
Здравствуй, уважаемый читатель.

Это восьмой урок изучения html, в котором мы поговорим о изменении вида текста. Из данного урока вы узнаете как сделать шрифт жирным, курсивным и подчеркнутым. Этот урок небольшой и очень легкий, но и нужный.


Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы

Теория и практика

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <title>Главная</title>
</head>
<body>
    <p>Меню</p>
    <ul>	
        <li><a href="example.html" title="Главная">Главная</a></li>
        <li><a href="banan.html" title="Польза банана">Банан</a></li>
        <li><a href="apple.html" title="Польза яблока">Яблоко</a></li>
        <li><a href="persik.html" title="Польза персика">Персик</a></li>
    </ul>
 
	<p>Nullam <strong>eget aliquet</strong> sapien, <b>vitae vulputate</b> diam. <ins>Vivamus at arcu</ins> urna. Sed eget <em>neque et</em> sapien <i>auctor</i> adipiscing. <del>Aenean tincidunt</del> metus at facilisis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</body>
</html>

Как это выглядит в браузере:

Жирный, курсивный, зачеркнутый и подчеркнутый текст в браузере

Сейчас о каждом теге по порядку:

1. За выделение жирным шрифтом отвечают теги <b></b> и <strong></strong>. Дело в том что тег <b></b> является устаревшим, а вместо него рекомендуется использовать тег <strong></strong>.

2. Чтобы выделить текст курсивом отвечают теги <i></i> и <em></em>. Но тег <i></i> также устарел как и тег <b>, поэтому вместо него используйте тег <em></em>.

3. Чтобы подчеркнуть текст, его необходимо взять в тег <ins></ins>.

4. Чтобы зачеркнуть текст, его необходимо взять в тег <del></del>.

Итак. Еще раз посмотрим, но только в виде таблицы:

Также данные теги можно комбинировать Но важно чтобы тег открывался и закрывался правильно. Далее в примере написано правильно! Нельзя допускать такого: <em><strong>eget aliquet</em></strong>. То есть тег сначала должен открываться, потом закрываться. А если хотите еще в один тег взять — необходимо брать все теги внутри в эту конструкцию. Например:

<em><strong>eget aliquet</strong></em>

Как это будет выглядеть в браузере:

Курсивный и жирный текст в браузере

Сегодня мы рассмотрели как можно выделить текст на странице. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.

Больше практикуйтесь!

Теги форматирования текста в HTML

Форматирование текста в html

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.

Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно «обойти», используя каскадные таблицы стилей (css).

Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют.

Итак, начнем.

Форматирование текста в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока

Возьмем из высланного Вам архива файл «Лис и лошадь.doc» и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.

Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.

Готово?

Верю, что да.

Теперь вернемся в word, скопируем весь наш текст из файла «сказка.doc» и вставим его между тегами <body> </body> нашей заготовки.

Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).

Мы видим, что текст идет без заголовков, без абзацев, без отступов.

Вот теперь и займемся непосредственным форматированием текста в языке HTML.

Для выделения заголовков используются теги <h2>текст</h2>, <h3>текст</h3> и т.д. до <H6>текcт</H6>.

Цифры после буквы H в теге применяются от 1 до 6.

1 – самый крупный заголовок, 6 – самый маленький заголовок.

Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <h2><h2>.

<h2>Лис и лошадь</h2> <h2>Лис и кошка</h2>

<h2>Лис и лошадь</h2>

<h2>Лис и кошка</h2>

У тега <h2> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

Давайте выровняем заголовок по центру. Для этого пропишем:

Аналогично и второй заголовок.

Сохраняем и смотрим в браузер.

Заголовки стали по центру.

Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.

А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).

Самостоятельно попробуйте разные значения тега <H>текст</H>. И разные значения align. Выберите любой Вам понравившейся.

Теперь разобьем наш текст на абзацы.

Тег, который это делает — <p>текст абзаца</p>.

Для этого находим начало абзацев и ставим там тег <p>, а в конце абзаца закрываем его </p>.

Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку «обновить» и смотрим, что получилось.

У тега <p> есть параметр align с такими же значениями, что и у тегов <H>left, right, center. Его работа абсолютно такая же как и у тега <H>.

На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

Текст можно сделать жирным. При помощи тега <b>или <strong> (кстати, это закрывающиеся теги. Рекомендуется <strong>).

Курсив — <i> или <em>, подчеркнутый <u>, моноширинный <tt> или <kbd>.

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

<b> любой текст из сказки</b> <i>…………………………..</i> <u>………………………….</u> <kbd>……………………..</kbd>

<b> любой текст из сказки</b>

<i>…………………………..</i>

<u>………………………….</u>

<kbd>……………………..</kbd>

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег <font>, его параметры:

fаce=»arial» – указывает названия шрифта.

size=»3″ — размер (значения от 1 до 7).

Форматирование текста в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

color=»******» – цвет шрифта.

****** — определенный код шрифта (например, 000000 – это черный).

Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:

<font face=»arial» size=»6″ color=»red’> фрагмент текста сказки </font>

<font face=»arial» size=»6″ color=»red’> фрагмент текста сказки </font>

Еще один немаловажный тег <br> применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.

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

Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.

Итак, теги:

<sub> — подиндексы (H2O)

<sup> — надиндекс (45)

<big> — увеличивает шрифт на 1

<small> — уменьшает шрифт на 1

<address> — сведения об авторе и последнем обновлении страницы (отображаются курсивом)

<cite> — цитаты, отображаются курсивом

<code> — программный код отображается моноширинным шрифтом

<em> — выделенный текст отображается курсивом

<strong> — выделенный текст отображается жирным шрифтом, рекомендуется вместо <b>

<hr> — горизонтальная линия. У этого тэга есть такие параметры, как:

align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов

width=»число» — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана

size»число» — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99, a параметр width=1, то получим вертикальную линию, только с ограниченной высотой)

color=»цвет» -цвет линии

noshade — отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

<hr color=»red» >

<hr color=»red» >

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.

Тег <marquee> – контейнер бегающей строки с параметрами:

align=»middle(top, bottom)»— выравнивает контейнер относительно окружающего текста.

top — по верхнему тексту, bottom- по нижнему, middle- по середине.

behavior=»scroll(slide, alternate)»scroll — текст прокручивается, slide — скольжение, alternate — текст «плавает» со стороны в сторону.

bgcolor =»цвет» — фоновый цвет для контейнера.

direction=»left(right)» — задает направление движения текста.

height=»число» — высота контейнера.

hspace=»число» — расстояние от контейнера до текста по горизонтали.

vspace=»число» — расстояние от контейнера до текста по вертикали.

loop=»число» — количество повторений.

width=»число» — ширина контейнера.

scrollmount=»число» — скорость движения текста.

scrolldelay=»число» — время задержки между циклами.

Например, в нашей сказке это может выглядеть так:

<marquee align=»top» behavior=»scroll» bgcolor=»blue» direction=»left»> Как можете? </marquee>

<marquee align=»top» behavior=»scroll» bgcolor=»blue»

direction=»left»> Как можете? </marquee>

Как можете?

Вот, пожалуй, и все что я хотел вам рассказать о тегах форматирования текста в HTML. Предлагаю самостоятельно сделать упражнение:

Фоновый цвет страницы сделать черным, цвет текста белым, цвета заголовков красным, внизу сделать подпись курсивом синего цвета. Можете поэкспериментировать с цветами и подобрать свой вариант. Файл с названиями цветов, которые вы можете использовать, находится в высланном вам архиве.

В следующем уроке мы научимся делать ссылки, рассмотрим, какие они бывают, поработаем над вставкой картинок в нашу html страницу, и сделаем картинку ссылкой на любой web-ресурс.

Форматирование текста в html

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Форматирование текста в html

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Выделяем важные слова или оформляем текст html страницы! : WEBCodius

Здравствуйте, уважаемые читатели блога. В прошлой статье я рассмотрел блочные теги для структурирования текста.

А сегодня мы рассмотрим оформление текста html-страницы, т.е. рассмотрим теги, которые помогут выделить важные фрагменты текста, чтобы привлекать к ним внимание посетителей. А также научимся вставлять на страницу специальные символы.

Выделение фрагментов текста. Теги strong и em.

Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег STRONG. Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег «b». Хоть теги «strong» и «b» похожи по своему действию, но они не являются эквивалентными.

Тег b является тегом физической разметки и просто устанавливает полужирное начертание текста. А strong является тегом логической разметки и отмечает важность выделенного текста. Тег «strong» имеет более важное значение при поисковой оптимизации сайта и его содержимое имеет больший вес для поисковиков.

Для курсивного выделения фрагментов текста применяются теги «i» и «em». Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.

При разработке web-сайтов для выделения текста чаще применяются теги «strong» и «em», чем теги «b» и «i». Пример использования тегов «strong», «b»,
«em» и «i» для оформления текстов:

код для выделения текста курсивом

И выглядит это так:

так выглядит курсивный текст

Применим теги «strong» и «em»; на нашей страничке из предыдущих статей:

используем теги strong и em

Результат:

результат отображения кода выше

Кроме элементов strong, b, em и i в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:

  • abbr — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
  • acronym — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
  • cite — небольшая цитата, отображается курсивом;
  • code — фрагмент исходного кода программы, отображается моноширинным шрифтом;
  • del— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
  • dfn — обозначает новый термин в документе, отображается курсивом;
  • ins — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
  • kbd — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
  • q — используется для выделения цитат, содержимое автоматически помещается в кавычки;
  • samp — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
  • tt — фактически тоже самое что и «samp», только является тегом физической разметки, а «samp» — логической. отображается моноширинным шрифтом;
  • var — выделение имени переменной в исходном коде программы, отображается курсивом.

И вот так они отображаются в браузере:

оформление текста html

Разрыв строк

Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег «p», выделяющий абзац.

Давайте поместим на нашу web-страницу сведения об авторских правах:

строчка об авторских правах

Сайт об автомобилях.

Результат:

перевод строки

И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег br. Этот тег устанавливает перенос строки, но в отличие от тега «p», не устанавливает отступ перед строкой. Применим тег «br» на нашей страничке:

пример переноса строки

Так гораздо лучше:

перевод строки - тег br

Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег «br».

Вставка специальных символов. Литералы.

Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы:

спец символы

Для вставки специальных символов в HTML используются литералы. Литерал — это последовательность символов, которая начинается с символа & и заканчивается символом ;, а между ними помещается последовательность букв — код символа. Так для вставки этих символов используются соответственно следующие литералы:

коды литералов

Вставим на нашу страницу в блок об авторских правах символ копирайта:

пример использования кода копирайта

Теперь страничка выглядит совсем круто:

Литерал

Ниже привожу названия наиболее часто используемых символов:

коды часто используемых символов на сайтах

Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел».

Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег nobr. Тег «nobr» уведомляет браузер о том, что отображать текст следует без переносов.

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

И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.

HTML также позволяет вставлять любой символ, поддерживаемый кодировкой Unicode. Для этого используется литерал со следующей структурой:

структура построения кода

Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск — Все Программы — Стандартные — Служебные — Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».

таблица символов

Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt + код символа». Берете это код символа и вставляете в литерал.

Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала «copy» вставляем:

вставляем код

И убеждаемся, что на странице отображается все правильно.

На сегодня у меня все. Как всегда подведу итоги:

  • мы рассмотрели теги для оформления текста html страницы. Наиболее важные из них тег «strong» — жирное выделение текста и тег «em» — курсивное начертание;

  • для разрыва строк без отступов применяем тег «br»;

  • и для вставки специальных символов используем литералы вида:

    пример записи символов

В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))

python — установите выделенный текст жирным шрифтом с помощью тегов

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

css — альтернатива тегу HTML Bold

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

.

как выделить слова в абзаце жирным шрифтом в HTML / CSS?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

сделать текст на html-странице полужирным с помощью javascript

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.