Содержание

Тег полужирный шрифт. Основные HTML теги форматирования текста — выделение текста жирным и курсивом; параметры размера, цвета и шрифта; абзац и теги заголовков

Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.

Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются . Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.

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

Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку
) и контейнерные (парными). Так вот, все теги форматирования текста являются парными . Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так: Выделенный фрагмент

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги

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

Рассмотрим для начала выделение текста жирным . Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах

и в уже обработанном браузером виде:

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

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

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег

если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

и .

Теги выделения текста чертой —

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

Еще два схожих по назначению тега — и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

Тег и атрибуты — параметры шрифта текста

Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:

  • face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
  • size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
  • color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

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

Этот текст имеет размер 6px

Этот текст красного цвета
Этот текст имеет шрифт Arial
Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

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

А теперь поговорим про тег выделения абзаца

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

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!

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

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

Обычный текст.

Жирный текст.

Жирный текст strong.

Обычный текст.

Жирный текст.

Жирный текст strong.

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

Пример жирного текста.

Пример текста с жирным словом.

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов

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

Жирный текст на CSS


Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

Обычный текст с жирным выделением по центру.

strong { font-weight: bold; }

Тут хотелось отметить один небольшой нюанс, который мне рассказали на — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Приветствую, Друзья.

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

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

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

Выделение текста жирным начертанием.

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

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

Пример кода:

жирный текст

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

Но бывает, так что нам нужно не просто выделить текст, а сделать на нем акцент. Для этого мы можем использовать тег логической разметки . Мало того, что текст, выделенный, этим тегом имеет больший вес для поисковых систем. Но и по идее он должен отличаться от тега в речевых браузерах, например интонацией. Однако не могу ни подтвердить, ни опровергнуть данную информацию, так ли это?

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

Пример кода:

Результат:

Все довольно просто, не правда ли?

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

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

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

Пример кода:

текст курсивом

Результат:

текст курсивом

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

Пример кода:

текст, на котором мы сделали акцент

Результат:

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

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

Но добавить недостаточно. Также необходимо указать параметр style , что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color . Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти .

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

текст, который нужно выделить цветом

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

Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…

Приветствую вас, любителей разобрать что-то новенькое и пополнить свой сундук знаний новой информацией! После прочтения статьи вы узнаете, как сделать жирный текст в html, какие еще существуют виды начертаний и какие элементы за это отвечают. А в результате ваш сайт сможет похвастаться читабельным текстом с верно выделенными ключевыми моментами.

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

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

Возможности начертания в html

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

Для начала разберемся с жирным начертанием текстовых элементов.

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

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

А предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.

Теперь рассмотрим такие теги, как и .

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов и ?». Вопрос правильный. И вы правы!

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

Инструменты видоизменения шрифтов в css

Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.

– это универсальный параметр, который дополняет шрифт некими деталями. Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).

Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).

А вот и пример

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

Видоизменение текста

Пишем текстовый контент самого абзаца, который мигает .

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

Теперь вы сможете отредактировать текстовое наполнение по всем правилам. Подписывайтесь на обновления моего блога и приглашайте друзей. Пока-пока!

С уважением, Роман Чуешов

Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

— заголовок раздела первого уровня, а
— заголовок раздела шестого уровня. От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h2 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 — очень маленьким.

Заглавия

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

.

В качестве заголовка текста используем первое предложение — Для этого довольно ограничить его тегами

.

Воткните в текст файла other.html теги

так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:

Просмотрим приобретенный итог.

Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл — Сохранить (File — Save).

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

Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки . Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h3, h4 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

Когда вы закончите опыты, опять восстановите в файле other.html теги

.

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

Выравнивание заголовков

По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге

Добавьте в тег

В предстоящем мы не будем припоминать для вас о необходимости перед просмотром сохранять файл с начальным кодом и обновлять изображение в браузере.

Как в HTML сделать текст выделенным (жирным)

Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги .

Воткните в файле other.html открывающий и закрывающий теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:

Как в HTML сделать текст курсивом

Курсивное начертание устанавливается при помощи тегов .

Воткните в начальный код HTML тег и так, чтоб отредактированный элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

Элементы разметки могут быть вложенными, как в данной структуре, где элемент вложен в элемент . Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: . Соблюдение вложенности — очень принципиальная часть общей культуры написания HTML кода.

Как в HTML сделать текст подчеркнутым

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

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

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

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

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

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

Используя заместо тегов теги вида , просмотрите как меняется размер шрифта текста при различных значениях атрибута size — от 1 до 7.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо — (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.

Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

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

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

По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

. Вы сможете также выровнять абзац по правому краю странички при помощи тегов либо по левому — при помощи тегов .

Воткните теги

ограничив ими обозначенный абзац.

Направьте внимание, что для центрирования абзаца мы использовали теги

, в отличие от атрибута align=»center», который применен нами в тегах .

Внимание ! На 2010 год теги , , , числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.

=

=

=

=

=

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

Коды выделения

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

— применяется для определения слова. Текст выводится курсивом по умолчанию.

— для выделения слов и усиления. Текст отображается курсивом по умолчанию.

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

— для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.

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

— служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший .

— для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

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

Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей — при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей — это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела,

Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…

Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру,.

Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так:. Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.

Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины — это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:

style=»font-size: 200%»

style=»font-size: 16pt»

style=»font-size: 100px»

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

Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»

Этот атрибут мы применим в тегах р>, которые позволяют представить текст в виде отдельного абзаца.

Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги

, , , и вставив теги и р> с атрибутом style так, чтоб этот элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производимр>

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

Другие варианты выравнивания и использования стилей

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

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

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

HTML. Разметка текста шрифтами:ИнфоБлог


 Если в тексте есть фрагмент, который должен быть выделен полужирным шрифтом, то его на веб-страничках помечают вот такой парой значков: <В> и </В> (В — от слова bold — полужирный). Первое В в угловых скобках обознача­ет начало полужирного фрагмента, второе, с косой чертой, обозначает его конец. Сами эти <В> и </В> в браузере не показываются, зато весь текст между ними бу­дет полужирным.
Знаки разметки подобные <В> называются тегами (от слова tag — бирка, метка, ярлык). Теги можно писать в верхнем и нижнем регистре.

Точно так же и курсивное начертание (italic) выделяется тегами <I> и </I>. Первый тег открывает фрагмент с курсивным начертанием, а второй закрывает.

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


  •  Такую пару иногда называют контейнером. Все что находится между <В> и </В> или между <I> и </I> заключено в контейнер.

 Когда нужно получить полужирный курсив, ставятся подряд оба тега: сна­чала два открывающих <В><I>, потом — текст, а потом два закрывающих </I> </В>.

Есть также подчеркнутое (underline) начертание — тег <U>, перечеркнутое (strike) — <S>, надстрочное (оно же верхний индекс, superscript), — <SUP>, под­строчное (нижний индекс, subscript) — <SUB>. К шрифтовым выделениям отно­сится также тег <ТТ>, который задает, что текст должен быть оформлен моноши­ринным шрифтом (вроде Courier). Каждому из перечисленных тегов тоже соответствует свой закрывающий тег с косой чертой.

  • Вообще, большинство тегов в языке HTML — парные: открывающий и закрываю­щий (с косой чертой). Если по ходу дела будут встречаться непарные теги, об этом будет сказано дополнительно. Далее упоминание о закрывающихся тегах делаться не будут. А вы о них не забывайте!

 Всякий работавший с текстовым редактором тут же спросит: а как задать гарнитуру шрифта? Ответ будет неожиданный: а, скорее всего, никак!

Все упирается опять-таки в стандартизацию. Вы уверены, что ваш Arial, Courier, Times или Tahoma имеются» на всех миллионах компьютеров в сети?

А что они есть хотя бы на половине? А что ваш русифицированный Anal русифи­цирован и у того, кто будет вашу страничку пытаться прочесть?

То есть указать гарнитуру вы можете, но лучше все же от этого воздержаться!

У-у-у. обиженно скажет любитель текстовых процессоров. Плохо как!.. Ну, ладно, а как задать кегль шрифта?

Опять никак! Вы не можете в HTML написать, что такой-то текст будет по­казан 12-м кеглем, — а такой-то 32-м. И опять виновато отсутствие единого стан­дарта. Представьте себе, что вы подготовили страничку текста к печати на стан­дартном листе формата А4, а кто-то захочет напечатать ее на вдвое меньшем или вдвое большем листе. Что получится? красивая будет страничка? Но в Сети все то же самое! У одних экраны 14 дюймов с разрешением 640×480 точек, а у дру­гих 21 дюйм с разрешением 1600×1200 или выше. Можно ли задавать одинако­вый абсолютный размер шрифта и для тех, и для других? То, что на одном экра­не будет слишком мелко, на другом просто не поместится.

Поэтому в HTML принято задавать размеры шрифта в неких условных единицах — от 1 (самый мелкий) до 7 (самый крупный). Размеченный таким об­разом текст будет отображаться примерно одинаково на разных компьютерах.

Есть и другой способ задания размера шрифта. Вместо, «1» или «2» пишется «-1» или «+2». То есть некий шрифт для вашего браузера по умолчанию принят за базовый,    «-1» — на единицу меньше базы, а «+2» — на две единицы больше. Тоже вполне возможное решение.

Как же разметить текст по размеру? Тегом FONT (шрифт) с параметром (или как часто говорят «с атрибутом») SIZE (размер):

<FONT SIZE=»1″> — самый мелкий шрифт,

<FONT SIZE=»7″> — самый крупный,

<FONT SIZE=»+0″> — шрифт базового размера,

<FONT SIZE=»-2″> — на две единицы меньше базового,

<FONT SIZE=»+3″> — на три единицы больше базового.

В принципе можно не вводить вообще никакого размера, и тогда весь шрифт будет одинаковым — по высоте как базовый.

Разметка шрифта по размеру может сочетаться с разметкой начертаний. Например, так:

Это <В> полужирный <FONT SIZE=»+2″> увеличенный</ FONT> </ В> Шрифт Результат будет примерно такой: Это полужирный увеличенный шрифт.

Теперь обещанные, хоть и не очень рекомендуемые, теги разметки гарниту­рами. Это тот же FONT, но с параметром FAGE (что в данном контексте означает «гарнитура шрифта»):

<FОNT FACE=»TAHОMA»> — текст будет отображаться на экране шрифтом Tahoma;

<FONT FACE=»HELVETICA, ARIAL, COURIER»> — текст будет отображаться шрифтом Helvetica, если такого нет, то Arial, а если нет и этого, то Courier. Не факт, что у всех пользователей есть хотя бы второй указанный вами шрифт, третий, пятый. Но много хуже, если, скажем, Arial есть, но он не русский — прочесть такую страничку посетителю вашей странички ну никак не удастся! Разве что за­лезть внутрь, в ее код, и все эти font face поубирать;

<FОNT FACE=»TAHOMA» SIZE=»+2″> — шрифт Tahoma, увеличенный на 2 единицы. Как видите, в теге FONT может быть не один, а несколько атрибутов, отделяе­мых пробелами.

Цвета шрифта обозначаются в том же теге FONT параметром COLOR:

<FONT COLOR=#ff0000> — чистый красный;

<FONT COLOR=#00ff00> — чистый зеленый;

<FONT COLOR=#0000ff> — чистый синий;

<FONT COLOR=#ffffff> — чистый белый.

Здесь первые две цифры задают яркость красного цвета, вторые две — зеленого, третьи — синего (система RGB — red, green, blue). Чем больше число, тем выше яркость цвета.

Если кто не понимает, что за число такое «ff», поясняем: в шестнадцатеричной системе счисления цифры идут так: 1,2,3,4,5,6,7,8,9, а, b, с, d, е, f. Здесь f — это 15. Понять всё это можно на простом примере. В десятичной системе число 99 это 9 х 10 + 9 (девять десяток плюс девять). А в шестнадцатеричной число ff — это 15×16 + 15 = 255 (пятнадцать «шестнадцатой» плюс пятнадцать). 1

Вот применяется такая неудобная для простого человека система счисле­ния, что тут поделаешь! Все умники-программисты напридумали, нам назло. Кстати, переводить из шестнадцатеричной формы в десятичную и обратно очень легко с помощью стандартного виндоузовского калькулятора: переключи­те его из простого режима в инженерный (меню Вид), введите десятичное число, а потом вместо переключателя Dec (десятичный, слово декада этого же корня) поставьте точку в Hex (шестнадцатеричный), и число переведется. И вместо, на­пример, 127 вы увидите 7F. Для обратного перевода нужно поступить наоборот: ввести в режиме Hex какое-нибудь 6F, а потом переключить в Dec и прочесть со­ответственное 111.

Итак, если ff0000 — это максимальная яркость красного, то, снижая число, вы будете снижать и яркость красного цвета. Например, 7f0000 — примерно по­ловина яркости, а 010000 — почти черный. Наоборот, ffffff — максимальная яр­кость всех трех цветов, то есть белый. Тогда понятно, что 000000 — минимальная яркость, то есть черный. Все, что лежит в интервале от 000000 до ffffff, — это от­тенки, можете их подбирать по вкусу.

Кроме числовой записи цвета можно задавать названия цветов и словами, правда, английскими:

<FONT COLOR-«RED»> — красный,

«FONT COLOR -«GREEN»> — зеленый,

<FONT COLOR -«BLUE»> — синий.

 Еще несколько распространенных цветов: cyan — зеленовато-голубой (00ffff), magenta — пурпурный (ff00ff), yellow — желтый (ffff00), gray — серый (808080), black — черный. Кроме того, к названию цвета можно добавлять приставки dark (темный) й light (светлый), иногда также medium (средний): darkred, light- yellow, mediumblue.

Все три параметра шрифтового оформления (размер, гарнитура и цвет) мо­гут содержаться в одном теге, через пробел:

<FONT SIZE=»2″ FACE=»ARIAL» COLOR=»BLACK»>

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

Этот текст базового размера, <FONT SIZE=»+2″> этот увеличенный,

<FONT COLOR=#ff0000>этот еще и красный, <В><I> а этот полужирный курсив</I></В>, этот нормального начертания,</FONT> этот опять не красный</FONT>, а этот опять базового размера.

Код прописан в Блокноте

<HTML>

 <HEAD>

  <TITLE> Web-страница </TITLE>

 </HEAD>

 <BODY>

Этот текст базового размера,  <FONT SIZE=»+2″> этот увеличенный <br>

<FONT COLOR=#ff0000>этот еще и красный, <B><I> а этот <br>

полужирный курсив</I></В> этот нормального<br>

начертания, </FONT> этот опять не красный</FONT>

а этот<br> опять базового размера.

  </BODY>

</HTML>

Результат такой разметки показан в браузере

 <HTML>

 <HEAD>
        <TITLE> Астрид Линдгрен </TITLE>
 </HEAD>
 
 <BODY>
<HR>
<Font color=aylumen size=+2 face=Arial>
<h2 align=center> Пеппи Длинный чулок </h2>
        <HR>
        <Font color=blue size=+2 >
        <P>
        Дети вошли на кухню, и Пеппи запела
><P>Скорей сковородку на печь!<BR>Блины мы будем печь<BR>Мука, 
и соль, и масло есть.<BR>Мы скоро будем есть! <P> Пеппи взяла из корзины три 
яйца и, подбросив их над головой, разбила одно за другим.
</PRE>
 </BODY>
</HTML>

<HTML>

 <HEAD>

        <TITLE> Моя страничка </TITLE>

 </HEAD>

 <BODY>

<h2> Привет! Это моя личная домашняя страничка! </h2>

        <HR color=red size=10 width=»50%»>

 <h3 align=center> Мой город </h3>

Я живу в <Font color=red face=»Comic Sans MS» size=+5>Пинске </Font>

<h5 align=center> Мои увлечения </h5>

<Font color=blue face=»Arial» size=+2>

<B> Музыка-гитара </B>,

<U> Спорт-футбол </U>,

<I> Люблю рисовать </I>,

 </Font>

<H5> Мои друзья </H5>

<U> Мои друзья </U> учатся со мной в <I> одном классе </I>

 </BODY>

</HTML>

<HTML>
 <HEAD>
        <TITLE> Web-страница1 </TITLE>
 </HEAD>
 
 <BODY>
<h2 arial black=center> <U> <I> КАКУЮ СОБАКУ ВЫБРАТЬ </I> </U> </h2>
        <HR color=#ffff00>
 <BLOCKQUOTE> 
 <Font color=green face="Arial" size=+1>
 <B>
        Собака верный помощник. Однако, если вам нужен,<BR> например, 
только страж, купите лучше систему <BR> сигнализации
<B>
</BLOCKQUOTE>
 </Font>
 
 
 <Font color=red face="Courier New" size=+1>
 <B>  Первейшая функция собаки в доме - быть другом, и нет друга более <BR>   
верного. Прежде, чем завести собаку, важно убедиться, что вы <BR> 
сможете обеспечить  ей необходимые условия.<B></PRE>
 
 <HR color=blue size=3>
  
<PRE>
<Font color=green face="Monotype Corsiva" size=+2>
                       Выбор подходящей породы - очень личное дело пример
                       Но есть много руководст, помогающих в этом. 
 
</Font>
</PRE>
 
  </BODY>
</HTML
 

Литература:А.Левин. Самоучитель полезных программ.Питер. 2008

В чем разница между и , и ?

<i>, <b>, <em>И <strong>теги , традиционно репрезентативные. Но они получили новое семантическое значение в HTML5 .

<i>и <b>был использован для стиля шрифта в HTML4. <i>был использован для курсива и <b>жирным шрифтом. В HTML5 <i>тег имеет новое семантическое значение « альтернативный голос или настроение », а <b>тег имеет стилистическое смещение .

Примеры использования <i>тега — таксономическое обозначение, технический термин, идиоматическая фраза с другого языка, транслитерация, мысль, названия кораблей в западных текстах. Такие как —

<p><i>I hope this works</i>, he thought.</p>

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

Следующий пример абзаца стилистически смещен от абзацев, следующих за ним.

<p><b>The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>и <strong>имел значение акцент и сильный акцент в HTML4. Но в HTML5 <em>означает подчеркнутый акцент и <strong>означает сильную важность .

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

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

В том же примере мы можем использовать <strong>тег следующим образом.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

придать важность дате события.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:

<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc2.

<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.

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

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>

<p><b><i>Жирный курсив.</i></b></p>

<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>

<p>Подчеркнутый параграф текста.</p>

<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H2SO4 — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

<тег>…</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>

<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый.</span>
</p>
</body>
</html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.

Я вам настоятельно не рекомендую применять какие-либо экзотические шрифты, так как их может не быть на компьютере человека, который зайдет к вам на сайт и тогда вместо букв он увидит разные непонятные символы или квадратики. Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif.
 </p>

 <p>
    Это Comic Sans MS или любой cursive.
 </p>

 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>

 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY.
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Посмотреть результат → Посмотреть ответ

В чем разница между и , и ?

Теги i, b, em и strong традиционно являются репрезентативными. Но они получили новое семантическое значение в html5 .

i и b использовались для стиля шрифта в html4. меня использовали курсивом, а b — жирным. В html5. Тег i имеет новое семантическое значение « альтернативный голос или настроение », а тег b имеет стилистическое смещение .

Примеры использования тега i : таксономическое обозначение, технический термин, идиоматическая фраза с другого языка, транслитерация, мысль, названия кораблей в западных текстах. Такие как —

<p><i>I hope this works</i>, he thought.</p>

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

Следующий пример абзаца стилистически смещен от абзацев, следующих за ним.

<p><b>The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

em и strong имели значение акцента и сильного акцента в html4. Но в html5 em означает подчеркнутый акцент, а сильный означает сильную важность .

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

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

В этом же примере мы можем использовать сильный тег следующим образом.

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

придать важность дате события.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Автор: adnan2nd Размещён: 18.04.2017 04:01

Какой тег выделяет курсив. HTML текст, размер шрифта, форматирование текста. или изучаем теги, форматирующие HTML текст

Списки, созданные через тег ul , называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег

, а пункты таких списков также создаются через теги li .

Давайте сделаем упорядоченный список, используя тег ol :

Это заголовок тайтл
  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

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

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место — и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).

Блок . Ссылки

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

Это заголовок тайтл Ссылка на сайт phphtml.net.

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

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

Блок . Картинки

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

Как это работает, посмотрим на следующем примере:

Это заголовок тайтл

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

Обратите внимание на то, что тег не требует закрывающего тега.

Блок . Ссылки в виде картинок

Ссылкой может быть не только текст, но и картинка — для этого достаточно тег вложить в тег , как это сделано в следующем примере. Нажмите на картинку — и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку — нажмите кнопку «назад» в браузере):

Это заголовок тайтл

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

Блок . Разрыв строки

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

Давайте убедимся в этом на следующем примере:

Это заголовок тайтл

Это первый абзац.

Это второй абзац.

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

Это первый абзац.

Это второй абзац.

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

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

Давайте посмотрим на его работу на следующем примере:

Это заголовок тайтл

Это первая строка текста,
а это вторая.

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

Это первая строка текста,
а это вторая.

Блок . Комментарии HTML

Практически во всех языках программирования есть такое понятие как «комментарии».

Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

— заголовок раздела первого уровня, а
— заголовок раздела шестого уровня. От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h2 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 — очень маленьким.

Заглавия

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

.

В качестве заголовка текста используем первое предложение — Для этого довольно ограничить его тегами

.

Воткните в текст файла other.html теги

так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:

Просмотрим приобретенный итог.

Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл — Сохранить (File — Save).

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

Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки . Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h3, h4 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

Когда вы закончите опыты, опять восстановите в файле other.html теги

.

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

Выравнивание заголовков

По умолчанию заголовок выравнивается по левому краю странички. Но его можно также выровнять по правому краю либо центрировать. Для правостороннего выравнивания в теге

Добавьте в тег

В предстоящем мы не будем припоминать для вас о необходимости перед просмотром сохранять файл с начальным кодом и обновлять изображение в браузере.

Как в HTML сделать текст выделенным (жирным)

Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги .

Воткните в файле other.html открывающий и закрывающий теги так, чтоб они ограничили текст Тут вы узнаете… Этот элемент должен принять последующий вид:

Как в HTML сделать текст курсивом

Курсивное начертание устанавливается при помощи тегов .

Воткните в начальный код HTML тег и так, чтоб отредактированный элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

Элементы разметки могут быть вложенными, как в данной структуре, где элемент вложен в элемент . Современные браузеры способны верно обрабатывать вложенные теги. Потому для вас нужно смотреть за тем, чтоб не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. К примеру, такая запись будет неверной: . Соблюдение вложенности — очень принципиальная часть общей культуры написания HTML кода.

Как в HTML сделать текст подчеркнутым

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

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

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

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

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим

При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

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

Используя заместо тегов теги вида , просмотрите как меняется размер шрифта текста при различных значениях атрибута size — от 1 до 7.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо — (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.

Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

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

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

По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

. Вы сможете также выровнять абзац по правому краю странички при помощи тегов либо по левому — при помощи тегов .

Воткните теги

ограничив ими обозначенный абзац.

Направьте внимание, что для центрирования абзаца мы использовали теги

, в отличие от атрибута align=»center», который применен нами в тегах .

Внимание ! На 2010 год теги , , , числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.

=

=

=

=

=

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

Коды выделения

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

— применяется для определения слова. Текст выводится курсивом по умолчанию.

— для выделения слов и усиления. Текст отображается курсивом по умолчанию.

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

— для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.

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

— служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший .

— для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

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

Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей — при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей — это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела,

Поглядим, как при помощи языка каскадных таблиц стилей указать стиль текстового куска, который начинается словами Тут Вы узнаете…

Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру,.

Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так:. Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.

Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины — это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:

style=»font-size: 200%»

style=»font-size: 16pt»

style=»font-size: 100px»

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

Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»

Этот атрибут мы применим в тегах р>, которые позволяют представить текст в виде отдельного абзаца.

Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги

, , , и вставив теги и р> с атрибутом style так, чтоб этот элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производимр>

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

Другие варианты выравнивания и использования стилей

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

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

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

Тег в HTML используется для выделения фрагмента текста курсивом.

HTML тег относится к тегам физического форматирования. Изменение начертания шрифта с помощью тега носит стилистический характер.

Сделать HTML текст курсивом можно также с помощью тега . При этом текст будет считаться, выделенным логически (по смыслу), «подчеркнутым».

Спецификация HTML5 рекомендует отдавать приоритет тегам логического форматирования: важные фрагменты текста — тег , акцентирование внимания — тег , подзаголовки — теги , подсветка текста — тег . Выделять текст курсивом с помощью тега следует только если характер выделения не соответствует ни одному тегу логического форматирования.

Все виды выделения текста описаны в статье: .

Синтаксис

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

Отображение в браузере

Пример использования

в HTML коде
Тег курсива в HTML

Простой текст, который может быть расположен на любом сайте. А вот текст выделенный курсивом{

Как выделить полужирным шрифтом в ворде. Как сделать жирный шрифт в HTML

Жирными буквами текст в Microsoft Word можно написать несколькими способами.

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

Для этого необходимо либо перед написанием текста нажать на соответствующую клавишу для жирного текста, либо выделить уже написанный текст и нажать на клавишу для оформления текста. На верхней панели инструментов, нажать на кнопку с буквой «Ж». Правой клавиши мыши нажать на «лист» в Microsoft Word.

В выпадающем меню выбрать кнопку с буквой «Ж». Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги. Ну этот вопрос не должен заставить долго мучаться. Вам нужно открыть документ Ворд и обратить внимание на верхнюю панель. Там вы сможете сразу же увидеть значок с буквой «ж». Так вот нажав на данный значок, вы и получите жирный шрифт.

Кстати жирным шрифтом можно сделать уже напечатанный текст, выделив его и нажав на «ж». Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda. Понять, активирована эта кнопка или нет, можно легко: Также можно выделить жирным шрифтом какой — то текст можно потом, после написания ядом этого выделяете нужный текст и жмете на ту же кнопку — «Ж».

Сделать жирный шрифт в Microsoft Word очень просто. В начале нужно написать текст, затем его выделить и нажать кнопку Ж на верхней панели. Рядом также есть буквы К — курсив и Ч — подчеркивание чертой.

И еще, можно сразу нажать на букву Ж и тогда печать сразу пойдет жирным шрифтом, не потребуется выделения текста. Главное запомнить расположение буквы Ж на панели и тогда печать жирного текста не составит труда. После этого начинайте печатать — текст будет жирным. Если уже набрали текст и его нужно сделать жирным, то просто выделяем нужные слова или фрагмент текста, после чего жмем по этому же значку — готово! Самый очевидный способ — это выделить нужную часть текста и нажать сверху кнопку Ж.

Она есть в верхнем меню во всех версиях Ворда, даже в онлайновой. Я лично пользуюсь клавиатурной командой. В текстовом редакторе «Microsoft Word» по простому в Ворде писать слова жирным шрифтом можно таким образом — напанели инструментов нажать на черную букву Ж и писать слова — они сразу будут выделяться.

Если вы у нас впервые: Как в Ворде писать слова жирными буквами? Расположение кнопки «жирный текст» для Microsoft Word Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги: Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda: Для того, чтобы написать в Ворде жирными буквами, нужно: Или в верхней части экрана нажать на закладку «Главное» и нажать на «Ж».

Выделение текста полужирным шрифтом — Word

Выделить строку, и нажать букву Ж-т. Можно просто сначала нажать Ж, и писать. Можно ли и как определить название шрифта — на сайте, в тексте, программе? Как настроить размер шрифта в Rambler-почте? Как на БВ увеличить шрифт? Какой нужен шрифт в Ворде для высоты строки 0. Как сделать жирный шрифт, чтобы выделить фрагмент текста на БВ? Как увеличить шрифт в Google Chrome?

Как увеличить шрифт в Опере? Как увеличить шрифт в Интернет Эксплойере? Как увеличить шрифт в Мозилле? Задайте его нашему сообществу, у нас наверняка найдется ответ! Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей! Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги.

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

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

Все параметры форматирования, имеющие отношение к шрифту, расположены в диалоговом окне Шрифт. Чтобы вызвать это окно, надо выполнить одно из ниже описанных действий:

1. На вкладке главная внизу группы Шрифт, нажать на стрелку, направленную вниз.

2. Воспользоваться комбинацией клавиш CTRL и D

3. В контекстном меню выбрать пункт Шрифт.

В диалоговом окне Шрифт есть две вкладки, именуемые Шрифт и Интервал. Теперь рассмотрим доступные параметры.

На вкладке Шрифт, изображенной ниже на рисунке, можно выбрать начертание шрифта, (обычный шрифт, полужирный, курсив или полужирный курсив), цвет текста, размер и цвет символов.

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

Здесь же выбирается масштаб, при котором символы расширяются или сужаются (если масштаб составляет более 100 процентов, то текст документа растягивается, и наоборот, сужается, если масштаб меньше, чем 100 процентов).

Смотрите также:

Вам понравился материал?
Поделитeсь.

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

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

Обычный текст.

Жирный текст.

Жирный текст strong.

Обычный текст.

Жирный текст.

Жирный текст strong.

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

Пример жирного текста.

Пример текста с жирным словом.

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов

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

Жирный текст на CSS


Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

Обычный текст с жирным выделением по центру.

strong { font-weight: bold; }

Тут хотелось отметить один небольшой нюанс, который мне рассказали на — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

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

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: .

Обычный текст выделенный важный фрагмент текста. Обычный текст.

Жирный текст с помощью тега b

Обычный текст текст жирным шрифтом. Обычный текст.

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

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

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

Свойство CSS внутри атрибута style:

Текст жирным шрифтом.

Текст жирным шрифтом.

Текст обычным шрифтом.

Текст жирным шрифтом.

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

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

HTML-цитат Элементы


В этой главе мы рассмотрим

, , , <адрес> , , и HTML-элементов.


Пример

Вот цитата с сайта WWF:

Уже почти 60 лет WWF защищает будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах и поддерживается более чем одним миллионом членов в Соединенных Штатах и почти пять миллионов во всем мире.
Попробуй сам »

HTML

для предложений

Элемент HTML

определяет раздел, который цитируется из другого источника.

Браузеры обычно делают отступ

элементов.

Пример

Вот цитата с веб-сайта WWF:



Вот уже 50 лет WWF защищает будущее природы.
В мире ведущая природоохранная организация,
WWF работает в 100 странах мира и является при поддержке
1,2 миллиона членов в США и
человек, близких к 5 миллионов во всем мире.

Попробуй сам »

HTML

для коротких предложений

Тег HTML определяет короткую цитату.

Браузеры обычно заключают кавычки в кавычки.

Пример

Цель WWF: Построить будущее, в котором люди будут жить в гармонии с природа.

Попробуй сам »

HTML

для сокращений

Тег HTML определяет аббревиатуру или акроним, например «HTML», «CSS», «Мистер», «Доктор», «Как можно скорее», «Банкомат».

Маркировка сокращений может дать полезную информацию браузерам, перевод системы и поисковые системы.

Совет: Используйте глобальный атрибут заголовка для показать описание для аббревиатура / акроним при наведении указателя мыши на элемент.

Пример

ВОЗ была основана в 1948г.

Попробуй сам »

HTML

<адрес> для контактной информации

Тег HTML

определяет контактную информацию автора / владельца документа. или статья.

Контактная информация может быть адресом электронной почты, URL, физическим адресом, телефоном. номер, идентификатор в социальных сетях и т. д.

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

Пример

<адрес>
Написано Джоном Доу.

Посетите нас по адресу:

Example.com

Box 564, Диснейленд

USA

Попробуй сам »

HTML

для названия работы

Тег HTML определяет заголовок творческая работа (эл.грамм. книга, стихотворение, песня, фильм, картина, скульптура и т. д.).

Примечание: Имя человека не является названием произведения.

Текст в элементе обычно отображается курсивом .

Пример

Крик Эдварда Мунка. Написана в 1893 году.

Попробуй сам »

HTML

для двунаправленного обхода

BDO означает двунаправленное переключение.

Тег HTML используется для переопределения текущее направление текста:

Пример

Этот текст будет написан справа налево

Попробуй сам »

Упражнения HTML


HTML-цитаты и элементы цитирования

Тег Описание
Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию автора / владельца документа
Определяет направление текста
Определяет раздел, цитируемый из другого источника
Определяет название произведения
Определяет короткую встроенную цитату


css — Как сделать текст в HTML жирным?

Может ли кто-нибудь сказать мне, что я делаю не так? »

«полужирный» никогда не был элементом HTML («b» — наиболее близкое соответствие).

HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и элементами навигации для пользователей, которые не могут видеть предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, слабовидящие пользователи, использующие собственные цвета и шрифты, фанатичных пользователей, использующих текстовые браузеры, пользователей голосовых браузеров с голосовым управлением, таких как Opera для Windows). Таким образом, правильный способ выделить текст полужирным шрифтом зависит от , почему вы хотите выделить полужирным шрифтом.Например:

  • Хотите отличать заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите им жирный стиль в вашем CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

  • Хотите выделить подписи для полей формы жирным шрифтом? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («label {font-weight: bold;»}).

  • Хотите выделить заголовок для группы связанных полей в форме, например группы вариантов выбора радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).

  • Хотите отличить заголовок таблицы от подписи к ней? Используйте элемент «caption» и предложите для него полужирный стиль в вашем CSS («caption {font-weight: bold;}»).

  • Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите ему полужирный стиль в своем CSS («th {font-weight: bold;}»).

  • Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент «cite» с классом («cite) и предложите жирный стиль для него в вашем CSS (» .movie-title {font-weight: bold;} «).

  • Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите для него жирный стиль в вашем CSS («dfn {font-weight: bold;}»).

  • Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите для него полужирный стиль в вашем CSS («code {font-weight: bold;}»).

  • Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите ему полужирный стиль в своем CSS («var {font-weight: bold;}»).

  • Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите для него полужирный стиль в своем CSS («ins {font-weight: bold;}»).

  • Хотите немного выделить текст («Я люблю котят!»)? Используйте элемент «em» и предложите для него жирный стиль в вашем CSS (например,грамм. «em {font-weight: bold;}»).

  • Хотите сильно выделить какой-нибудь текст, возможно, для предупреждения (« Остерегайтесь собаки! »)? Используйте «сильный» элемент и предложите для него жирный стиль в вашем CSS (например, «strong {font-weight: bold;}»).

… Вы поняли (надеюсь).

Не удается найти элемент HTML с правильной семантикой для выражения / почему / вы хотите выделить этот конкретный текст жирным шрифтом? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование различения этого текста (« Позвольте мне начать эту новостную статью с предложения, которое резюмирует его.) и предложите для него полужирный стиль в своем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, существует ли микроформат (microformats. org) или обычное соглашение о том, что вы хотите выразить.

HTML полужирный

Скопируйте / вставьте коды для создания полужирного текста в HTML.

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

CSS Bold:

font-weight Свойство

CSS предоставляет свойство font-weight , чтобы сделать текст жирным.

Вот пример:

Пример текста полужирным шрифтом CSS

… и теперь весь абзац выделен жирным шрифтом.

Вы также можете указать «коэффициент жирности» (вместо того, чтобы просто указывать полужирным шрифтом ). Другими словами, вы можете применять разные уровни жирности к разному тексту.Кроме того, вы даже можете указать, что текст , а не должен быть полужирным. Чтобы узнать больше об этом, прочтите о свойстве font-weight .

HTML полужирный:

Тег

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

Вот пример создания полужирного шрифта HTML с использованием тега :

Пример текста жирным шрифтом HTML

… и теперь весь абзац выделен полужирным шрифтом.

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

Итак, какой тег HTML Bold мне следует использовать?

Спецификация HTML включает несколько тегов для выделенного жирным шрифтом / выделенного / выделенного текста. Каждый тег имеет свое особое значение.

В следующей таблице перечислены рассматриваемые теги HTML:

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

,

,

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

Вот что в спецификации HTML говорится о полужирном шрифте HTML и другом выделенном / выделенном тексте:

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

до
, акцент на ударение должен использовать элемент , важность должна быть обозначена элементом , а текст отмечен или выделен следует использовать элемент

Объединение полужирного шрифта CSS и полужирного шрифта HTML

На самом деле, сочетание CSS и HTML часто является лучшим способом выделить текст в HTML-документах полужирным шрифтом.

Вы должны использовать HTML для определения , означающего размеченного текста, а затем использовать CSS, чтобы определить способ, которым текст выглядит .

Как указано в спецификации HTML:

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

Как сделать полужирный текст HTML

Чтобы сделать текст полужирным в HTML, вы можете использовать тег , тег или font-weight в CSS.


При разработке веб-страницы вы можете выделить определенный фрагмент текста.

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

В HTML есть встроенные функции, которые позволяют кодировщикам выделять определенный текст.В этом руководстве мы разберем три наиболее распространенных способа придать тексту более насыщенный текст в HTML : тег , тег и каскадные таблицы стилей (CSS ) параметр.

HTML

Тег

Найдите свой учебный лагерь