- Форматирование текста
- Тег <pre>
- Теги для отображения кода
- Тег <address>
- Аббревиатуры
- Направление текста
- Цитаты
- Удаленный и вставленный текст
В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.
Форматирование текста
Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:
<html> <body> <p><b>Текст</b></p> <p><strong>Текст</strong></p> <p><em>Текст</em></p> <p><i>Текст</i></p> <p><small>Текст</small></p> <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p> </body> </html>
Попробовать »
Тег <pre>
Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:
<html> <body> <pre> Он сохраняет авторское форматирование текста (оставляет без изменений) и делает шрифт моноширинным </pre> </body> </html>
Попробовать »
Теги для отображения кода
Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:
<html> <body> <p><code>Программный код</code> <br> <kbd>Ввод с клавиатуры</kbd> <br> <samp>Образец кода</samp> <br> <var>Выделение переменной</var> </p> <p> Эти теги обычно используются для того, чтобы показать на странице программный код </p> </body> </html>
Попробовать »
Тег <address>
Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.
Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:
<html> <body> <p>Вы можете найти меня на моем сайте</p> <address> <a href="www.puzzleweb.ru">Мой сайт для связи</a> </address> </body> </html>
Попробовать »
Аббревиатуры
Пример демонстрирует, как можно написать аббревиатуру или сокращение:
<html> <body> <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br> Атрибут title нужен для всплывающей подсказки, она появляется при наведении курсора на аббревиатуру. </p> </body> </html>
Попробовать »
Направление текста
Пример демонстрирует, как можно изменить направление текста:
<html> <body> <p> Тег bdo определяет направление текста - слева направо и наоборот.<br><br> <bdo dir="rtl"> Это наш текст </bdo> </p> </body> </html>
Попробовать »
Цитаты
В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.
В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:
<html> <body> <p>Длинная цитата:</p> <blockquote> Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата. Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата. </blockquote> <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b> <br><br> Короткая цитата: <q>Это короткая цитата.</q><br> <b>Короткие цитаты заключаются в двойные кавычки.</b> </p> </body> </html>
Попробовать »
Удаленный и вставленный текст
Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):
<html> <body> <p> Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а содержимое тега ins - <ins>подчеркнутым</ins> </p> </body> </html>
Попробовать »
Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.
puzzleweb.ru
Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами <BODY> и </BODY>).
Однако, просто вставить текст на страницу бывает мало, надо его правильно разместить согласно цветовой схеме сайта и смысловой нагрузке (абзацы, отступы и т.д.). Но тут главное не переборщить, делать все правильно и в меру, чтобы наши будущие посетители чувствовали себя комфортно.
Я постараюсь написать самое главное, покажу какие теги используются для форматирования текста и их атрибуты, чтобы достигнуть максимального результата.
С чего начинать форматирование в HTML
Для начала, я хотел бы вам рассказать о том, что такое вообще текст и как представляется. Я не буду вам рассказывать много непонятных терминов и понятий. Скажу, как взаимосвязаны форматирование текста в htmlи его редактирование в текстовых редакторах.
И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.
Однако не пугайся, перенести твой красиво оформленный текст из текстового редактора в html можно. В общем, дальше я постараюсь подробно расписать, как это сделать.
Теги форматирования в HTML
Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов <pre> и </pre>. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел 🙂
Дальше я постараюсь рассказать и показать самые популярные теги HTML для форматирования текста:
- <B></B> (или <strong></strong>) — тег, для выделения текста жирным
- <I></I> (или <em></em>) — тег, для получения курсивного текста
- <U></U> — тег, для подчеркнивания текста (кстати, перечекрнутые слова часто путают с ссылками)
- <STRIKE></STRIKE> — тег, для
зачеркиваниятекста - <SUB></SUB> — тег, для выделения подстрочного текста, или попросту говоря — нижний индекс. Очень помогает, например, для форматирования химических элементов
- <SUP></SUP> — тег, для выделения надстрочного текста, или попросту говоря — верхний индекс (10 м2)
Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:
10 м<sup>2</sup> — это <strong><em>площадь</em> мой комнаты.</strong>
результат будет выглядеть следующим образом:
10 м2 — это площадь мой комнаты.
Для выделения обзаца, или располодить текст блоком, используют тег <P>. Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:
<p>Создаем свой абзац.</p> <p>Создаем второй абзац.</p>
Данный код на html-странице будет выглядеть следующим образом:
Создаем свой абзац.
Создаем второй абзац.
Кстати, закрывать абзац тегом </p> необязательно, если хотите начать следующий абзац, просто напишите снова <p>.
В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге <p>. Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:
<p align="center">Текст по центру</p>
расположит наш текст по центру, на выходе получится следующее:
Текст по центру
Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:
<p>Выравнивание текста по левому краю (по умолчанию)</p>
на html-странице это будет выглядеть вот так:выровнит текст по левому краю
Выравнивание текста по левому краю (по умолчанию)
Парой встает возможно без отступа абзаца сделать простой переход на новую строку, и можно это сделать тегом <BR>. html-код в данном случае будет следующим:
Наша первая строка. <br> Наша вторая строка.
на странице будет следующий вид:
Наша первая строка.
Наша вторая строка.
У <br> отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать <br> подряд.
Существует еще тег <HR>, благодаря которому тоже можно разделить текст. При помощи него создается полоса, и в котором тоже есть свои атрибуты:
- width — ширина полосы;
- align — выравнивание;
- size — толщина полосы;
- color — цвет полосы;
- noshade — атрибут без значений для создания черной полосы без тени.
html-код на примере будет следующим (попробуй сами на примере узнать что получится):
<hr align="center" size="3" width="300" color="red">
Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.
Далее очень важные теги для форматирования, а также и для продвижения сайтов — теги заголовки. Всего их 6:
<H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6>
Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это <H1></H1>, ну а самый маленький <H6></H6>. У данные тегов заголовков есть атрибуты:
- align — выравнивание заголовка;
- title — всплывающая подсказка заголовка (когда наведешь курсор на него).
Приведу просто пример HTML-кода заголовков:
<h4 align="center" title="Заголовок 4 размера">Заголовок 4 размера</h6>
на странице мы увидем следующее:
Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег <FONT></FONT>. У данного тега имеются следующие атрибуты:
- color — цвет шрифта;
- face — гарнитура шрифта;
- size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать <font size="+1"></font>, то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот — при -1 уменьшенным на 1.
Создать список в HTML можно используя теги <OL></OL> (список с нумерацией) и <UL></UL> (список с маркировкой). Элементы в списке должны выделяться <LI></LI>. Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге <OL></OL>:
- 1 — нумерация арабскими цифрами (по умолчанию);
- A — большими латинскими буквами по алфавиту;
- a — маленькими латинскими буквами;
- I — большими римскими цифрами;
- i — маленькими римскими цифрами.
Приведу HTML-код для примера:
Тег <UL> имеет атрибут type вот с такими значениями:
- disc — закрашенный кружок (по умолчанию);
- circle — незакрашенный кружок;
- square — закрашенный квадратик.
HTML-код тега <UL> на примере:
Показав основные теги для форматирования текста на html-странице нельзя забыть и о спецсимволах. Спецсимволы — это символы, которых, как показывает практика, нет на клавиатуре, но которые браузер преобразует в код, принимая за управляющий. Полный список я привел на отдельной странице Спецсимволы HTML. Кстате, для форматирования текста очень важно знать правила грамматики русского языка, ведь грамотно написанный текст уже наполовину отформатирован.
Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:
<font color="green" size="-2"><U> B</U></font>
Пожалуй, я закончил данный материал о HTML тегах для форматирования текста. Я постарался упомянуть самое основное что тебе следует знать. Постарайся запомнить данные уроки, они тебе еще не раз пригодятся. Далее я расскажу тебе, как вставить картинку в html-страницу и какие атрибуты можно при этом использовать.
| ← Атрибуты тега BODY | Теги HTML для вставки изображений → |
Дата публикации: 15 мая, 2012
1seo.by
От автора: пишете вы статью на своем блоге и надо как-то оформить ее, чтобы привлечь внимание посетителей. В этом вам помогут html теги для текста, а также нужные свойства в css.
Выделение текста с помощью html-тегов
Эта статья не претендует на полноценный справочник по html-тегам, но если вам интересна тема, то предлагаю разобраться в значении большинства необходимых нам тегов для выделения текста.
Чаще всего текст на страничке выделяют жирным шрифтом или курсивом. Для этого есть специальные теги <strong> и <b> (выделяют жирным), а также <em> и <i> (курсивом). Все они парные, то есть нужные слова нужно поместить между открывающим и закрывающим тегом. Казалось бы, зачем придумали два тега для одного и того же действия?
На самом деле в html они выполняют не только оформительскую роль, но и смысловую. Так, тег b просто выделяет тег жирным, не придавая ему большего смысла, а вот strong помимо простого выделения еще и придает словам особую важность. Поэтому этим тегом не стоит выделять полтекста, а использовать разумно.
В CSS также есть свойства, которые обладают таким же эффектом, что и перечисленные теги. Например, свойство font-weight: bold делает текст жирным, а font-style: italic – курсивным.
Подчеркивание и зачеркивание текста
Для подчеркивания и зачеркивания тоже есть свои теги. <ins> подчеркивает слова, а <del> — зачеркивает их. Чтобы добиться такого же эффекта через css, применяют свойство text-decoration. У него есть несколько значений:
И еще, для этого свойства через пробел можно прописать несколько значений. По сути, можно даже дать ему все три вида подчеркиваний, только не вижу смысла в этом.
В HTML 5 ввели еще один тег — mark, который позволяет просто выделить текст. По умолчанию он выделяется желтым цветом, хотя через css вы можете легко переназначить это и создать свое выделение, которое соответствует дизайну вашего сайта.
Вывод текста в верхнем и нижнем индексе
Немного разобрались, но что если вам надо написать формулу или что-то другое, где нужно вывести некоторые цифры или буквы в верхнем или нижнем индексе. Конечно, html предоставляет нам для этого нужные средства. Тег sub отображает шрифт в виде нижнего индекса, а sup — в виде верхнего. Также это можно сделать через css. Для этого нужному тексту надо прописать:
Font-size: размер шрифта, чуть меньший, чем у обычного текста
Как оформить текст с помощью CSS?
Если вам нужно оформить шрифт с помощью css, то к нему нужно как-то обратиться с помощью селектора. Одно дело, если вам надо выделить целый абзац или ссылку, тогда селектор у вас есть, но что, если оформить нужно одно слово где-то в середине статьи? Для этого существует замечательный парный тег span, который никак не влияет на внешний вид своего содержимого и не придает ему никакого смысла.
Соответственно, нужный вам для оформления фрагмент заключаем в span, привязываем к нему произвольный стилевой класс и пишем стили без каких-либо проблем!
Вывод текста с сохранением пробелов.
В html существует тег pre, который позволяет вывести информацию так, как написано в текстовом редакторе. Это может пригодиться, если вы пишете стих или нужно поставить несколько пробелов. Нор через css тоже можно управлять форматированием текста. Для этого существует свойство white-space. Его значения:
Выравнивание текста
Мы уже рассмотрели некоторые html теги для текста, но еще стоит упомянуть выравнивание. Оно задается не тегами, а через css-свойство text-align:
Цвет и фон текста
Опять же, это уже невозможно задать с помощью html-тегов, зато можно через css. Мы опять же приходим к выводу, что использовать теги для редактирования текста html не очень удобно. Для цвета самого текста есть свойство color, которое имеет много значений. Цвет можно задавать как с помощью ключевых слов (orange, black, red), так и с явным указанием цветового режима: color: rgb(130, 100, 12). Фон задается абсолютно также, но только с помощью свойства background.
Размер и шрифт текста
Свойство Font-size задает размер шрифта, а font-family позволяет выбрать сам шрифт или его семейство. Например:
Если название шрифта состоит из нескольких слов, то нужно заключать его в кавычки.
Тени для текста
К тексту также можно применить тень, которая задается свойством text-shadow:
где:
Таким образом, можно сделать достаточно красивые буквы. Тени обычно применяют к заголовкам. В статье нет необходимости это делать, так как тень зачастую ухудшает читаемость. Можно выделять тенью подзаголовки и т.д.
Как видите, теги для работы с текстом в html есть, и их достаточно немало. Самыми популярными являются те, которые выделяют текст жирным шрифтом. Стоит отметить, что CSS предлагает гораздо больше возможностей для оформления шрифтов. С его помощью можно и задать тени (даже множественные), и задать размер, начертание и т.д. В CSS можно повернуть текст, задать межбуквенный интервал и реализовать интересные эффекты при наведении. Применение к словам некоторых свойств можете посмотреть на этом скриншоте:
Хотите и дальше изучать html и css? Тогда подписывайтесь на наш блог, потому что здесь вы найдете все для сайтостроения.
webformyself.com
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Строчные элементы обрамляются тегами <span>…</span>.
Для обрамления элементов блочного типа используется пара <div>…</div>.
Браузеры обрамляют div-блоки разрывами строки.
Блок <div> не может располагаться внутри блока <span>.
Пример
<!DOCTYPE html> <html> <head> <title>Блоки</title> <meta charset="Windows-1251"> </head> <body> <div>Первый блок текста</div> <div>Второй блок текста.</div> </body> </html>Основные теги форматирования текста
| <p>…</p> | Абзац. |
| <h1>…</h1> | Заголовок первого уровня. |
| <h2>…</h2> | Заголовок второго уровня. |
| … | |
| <h6>…</h6> | Заголовок шестого уровня. |
| <br> | Переход на новую строку. |
| <q>…</q> | Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes. |
| <hr> | Горизонтальная разделительная линия. |
| <pre>…</pre> | Текст фиксированной ширины с сохранением всех пробелов и переносов. |
Пример
<!DOCTYPE html> <html> <head> <title>Заголовки и абзацы</title> <meta charset="Windows-1251"> </head> <body> <h1>Заголовок<br>первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <h4>Заголовок четвертого уровня</h4> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6> <hr> <p>Тест абзаца</p> </body> </html>Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Выделение в тексте
| <b>…</b> | Полужирный шрифт. |
| <i>…</i> | Курсив. |
| <ins>…</ins> | Подчеркнутый текст. |
| <del>…</del> | Перечеркнутый текст. |
| <sup>…</sup> | Надстрочный текст. |
| <sub>…</sub> | Подстрочный текст. |
Пример
<b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br> <ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br> Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.
htmlweb.ru
Теги для HTML текста
- Содержание:
- 1. Теги заголовков: <h1...h6>
- 2. Теги для форматирования текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>
- 3. Теги для ввода «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
- 4. Теги для оформления цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
- 5. Абзацы, средства переноса текста: <p>, <br>, <hr>
1. Теги заголовков
Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h1>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не допускается вложение других тегов в теги <h1>...<h6>.
1.1. Тег <h1>
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h1> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. Тег <h2>
Им обозначаются подзаголовки тега <h1>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. Тег <h3>
Показывает подзаголовки тега <h2>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Теги <h4>, <h5>, <h6>
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех тегов доступны глобальные атрибуты.
2. Теги для форматирования текста
2.1. Тег <b>
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для тега доступны глобальные атрибуты.
2.2. Тег <em>
Отображает шрифт курсивом, придавая тексту значимость.
Для тега доступны глобальные атрибуты.
2.3. Тег <i>
Отображает шрифт курсивом.
Для тега доступны глобальные атрибуты.
2.4. Тег <small>
Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для тега доступны глобальные атрибуты.
2.5. Тег <strong>
Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
Для тега доступны глобальные атрибуты.
2.6. Тег <sub>
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
Для тега доступны глобальные атрибуты.
2.7. Тег <sup>
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
Для тега доступны глобальные атрибуты.
2.8. Тег <ins>
Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: cite, datetime.
2.9. Тег <del>
Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: cite, datetime.
3. Теги для ввода «компьютерного» текста
3.1. Тег <code>
Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
Для тега доступны глобальные атрибуты.
3.2. Тег <kbd>
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
Для тега доступны глобальные атрибуты.
3.3. Тег <samp>
Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
Для тега доступны глобальные атрибуты.
3.4. Тег <var>
Выделяет имена переменных, отображая курсивом.
Для тега доступны глобальные атрибуты.
3.5. Тег <pre>
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Для тега доступны глобальные атрибуты.
4. Теги для оформления цитат и определений
4.1. Тег <abbr>
Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
Для тега доступны глобальные атрибуты.
4.2. Тег <bdo>
Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально.
Для тега доступен атрибут dir.
4.3. Тег <blockquote>
Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.
4.4. Тег <q>
Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.
4.5. Тег <cite>
Применяется для выделения цитат, названий произведений, сносок на другие документы.
Для тега доступны глобальные атрибуты.
4.6. Тег <dfn>
Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.
5. Абзацы, средства переноса текста
5.1. Тег <p>
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
Для тега доступны глобальные атрибуты.
5.2. Тег <br>
Переносит текст на следующую строку, создавая разрыв строки.
Для тега доступны глобальные атрибуты.
html5book.ru
Показать html код на странице как текст. Тег <pre>
Показать html код на странице как текст, подсветить его помогают теги <pre>.
В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.
Перейдите в HTML РЕЖИМ и добавьте открывающий и закрывающий тег <pre>. В моей теме уже автоматически знаки < > преобразовались в спецсимволы < и >.
СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.
При отображении СОХРАНЯЮТСЯ все пробелы. В моем шаблоне получился следующий результат (у вас отображение может быть другим). «>
Как вывести html код на странице поста как текст. Тег <code>
Тег <code> также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы НЕ УЧИТЫВАЮТСЯ, поэтому для создания переносов используйте <p> или <br>.
Делайте все аналогично вставке тега <pre>. «>
Отобразить html код на странице как текст. Тег<xmp>
Если вы предлагаете читателям коды нечасто, можете использовать такую конструкцию.
<div style="overflow: auto; height: 80px; width: 450px; padding: 8px; border: 1px solid #ccc;"> <xmp> ВСТАВИТЬ СЮДА ВАШ КОД </xmp> </div>
Она помогает отобразить коды или скрипты в виде текста, заключенного в рамочку, С УЧЕТОМ форматирования и всех переносов.
«>
Отображение кода получится в симпатичной рамочке. Ее ширину редактируйте, изменяя параметр width, высоту — height.
Но дело в том, что КОДЫ с использованием тега <xmp> считаются НЕВАЛИДНЫМИ. Поэтому в учебнике HTML предлагают использовать этот тег только в таком виде.
Плагины для выведения кода на страницу поста
Большинство блогеров для красивого и неизменного отображения html кодов на странице поста применяют плагины для WordPress. Опять таки, плагинов множество, но у меня корректно заработал лишь один.
Привожу список, а вы подбираете плагин, работающий с вашим шаблоном.
1. сладкая парочка — WP-Syntax – выделяет код рамочкой, дает возможность подсветить синтаксис. Плюс wp-syntax button – выводит кнопку в админпанель блога, предоставляет возможность вставить html код или скрипт в специальное окно. Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.
2. Syntax Highlighter Compress- в админпанель выводится дополнительная кнопка. Нажимаете ее, открывается окно, куда можно ввести код и выбрать язык программирования. Так же работают и другие плагины.
3. Better WordPress Syntax
4. wp-highlight.js
5. SyntaxHighlighter
6. Auto SyntaxHighlighter (его использую я). И многие другие плагины.
Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.
Итак, из статьи вы узнали, как можно вывести html код на странице поста, используя теги или плагины. А какой способ используете вы, чтобы внести тэги html в обычный текст?
Метки: плагины WordPress
Разные технические моменты
ПОХОЖИЕ СТАТЬИ:
moi-start.ru
Заголовки
Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.
В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов <h1> — <h6>. При этом <h1> это заголовок первого уровня, он самый большой.
Пример создания заголовков:
<h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> <h4>Заголовок четвёртого уровня</h4> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6> |
Заголовки никак не зависят друг от друга. Вы можете добавить заголовок любого уровня везде, где это нужно.
Новички иногда не могут разобраться с вопросом — сколько заголовков первого уровня может быть на странице. В интернете я не раз встречал на эту тему неполную и недостоверную информацию. Поэтому я решил подробно рассмотреть этот вопрос.
На работу страницы количество тэгов <h1> никак не влияет. Можно их добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах, то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому, чтобы не ставить больше одного тэга <h1> на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг <h1> только для одного заголовка.
Абзац
Тэг <p> создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.
Предлагаю не создавать для абзаца новую страницу, а добавить его в ту, которую Вы создали для заголовков.
<p>Абзац текста</p> |
Тэг <br>
Тэг <br> это не совсем текстовый тэг. Он производит перевод строки. Если он находится внутри текста, то последующий текст переходит на новую строку. А если он находится между блоками, то он добавляет пустую строку.
Пример перевода строки:
<p>Начало текста<br>новая строка</p> |
Тэг <span>
Тэг <span> это строчный тэг для вставки текста. Обычно он используется тогда, когда нужно выделить часть текста определённым образом.
Для примера решим следующую задачу: Выделить часть текста красным цветом. Нужная часть текста будет находиться внутри тэга <span>. Чтобы она была красной, мы зададим тэгу атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.
<p>Начало текста <span style="color: red">красный текст</span> продолжение текста</p> |
Тэг <pre>
Тэг <pre> используется для особых видов текста, в которых важно сохранить форматирование. Текст внутри этого тэга отображается на странице именно так, как он выглядит в коде страницы. В нём сохраняются все пробелы и переносы строки. Текст отображается моноширинным шрифтом, но это можно изменить с помощью стилей.
<pre>текст текст после пробелов следующая строка следующая строка</pre> |
Выделение текста
В HTML есть тэги для выделения текста. Тэги <b> и <strong> создают жирный шрифт. Хотя эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги <i> и <em> выделяют текст курсивом. Существует тэг <u>, который делает текст подчёркнутым, но использование его нежелательно.
Пример выделения текста:
<b>Жирный шрифт</b> <strong>Жирный шрифт</strong> <i>Курсивный шрифт</i> <em>Курсивный шрифт</em> |
Текст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов или стилей.
Другие тэги
Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие тэги, которые добавляют контент на страницу. Есть даже такой способ, как вставить текст в HTML страницу: он может находиться вообще вне каких-либо тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите CSS, Вы сможете определять внешний вид текста.
basecourse.ru
Спасибо, но к сожалению видимо по незнанию я не смогла применить PHP скрипт. А вот как это можно сделать с помщью скриптов JS?
Мне кажется нужно смотреть выше и решать проблему глобальнее. Зачем обязательно тхт?
Это во первых, а во вторых, если используется php то можно написать echo file_get_contents('myfile.txt');
Если нет то думаю придется использовать JS и подгружать все через скрипты, к сожалению не могу посоветовать другого варианта кроме как jQuery ajax. Но мне кажется это самый простой выход
Можно через PHP + CSS
Пример:<!--Тут сами стили--> <style type="text/css"> .textblock { /*Тут уже вставляешь все что нужно, разберешься*/ color: red; } </style> <?php //путь к файлу $filename='text.txt'; //Загружаем файл $file=file_get_contents($filename); //Выводим блок со стилем + сам текст echo '<div class="textblock">'.$file.'</div>'; ?>
Отличный скрипт, спасибо, однако я вставила его в свой HTML, выложила на сервер и в
результате — ничего (видимо я плохо знаю РНР) Даже не знаю, на что еще можно подумать…
каким образом открыть файл в JS?
Никаким образом открыть файл в js невозможно. Можно получить веб страницу целиком от сервера (document.location.href = …) или что-то (текст, XML, …) от скрипта — обработчика XMLHTTPRequest — запроса (это так называемый Аякс).
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
<div id="some_id"> <?php echo file_get_contents('myfile.txt') ?> </div>и используя стили для #some_id — разместите и украсьте Ваш текстовый файл как угодно.
Если в txt файле несколько страниц и Вам нужно вывести одну случайную — замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя — то тогда уже добро пожаловать в Аякс. Подробнее — по запросу. И так пост здоровенный получился.
Удачи!
Спасибо, в Вашем ответе сразу же масса ценной для меня информации, но пока — ничего не получилось. Файл txt простейший всего лишь из одной строки.
itforums.ru