Html как красиво оформить текст в: Красивое оформление статьи на HTML

Красивое оформление статьи на HTML

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

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

Шрифты

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

• Roboto
• Open Sans

Шрифт Roboto легко можно использовать на странице, в единственном экземпляре, за счет богатой его жирности и вариантов начертания.

Для заголовков, параграфов и списков, можно применять от самого тонкого до самого толстого. На Google Fonts cтавите галочки у нужных вариантов.

и вставляете в HTML страницу.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">

Здесь используется только один Roboto, но остается впечатление, что это разные шрифты, но хорошо сочетающиеся.

Заголовки

Не делайте заголовки ЗАГЛАВНЫМИ БУКВАМИ, а делайте прописными. Заглавные буквы тяжело читаются и страшно раздражают. Для выделения заголовка, достаточно прибавить жирности и увеличить размер шрифта.

Цвет текста

На 100% работает правило: На белом/светлом фоне — серый/черный цвет шрифта, а на черном/темном фоне — белый/светлый.

Межстрочное расстояние

Не оставляйте межстрочное расстояние у текста (line-height) дефолтным, всегда увеличивайте. Такой текст становится легким, воздушным и очень легко читается.

Пример оформленной статьи на HTML

HTML+CSS код

Делим текст на параграфы по смыслу с максимум 10-ю строками.

<p>
   ..
<p>
    ..
</p>


Важную информацию оборачиваем тегом blockquote, вместо него можно использовать теги <p> или </div>.

<blockquote>
    ..
</blockquote>


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

blockquote {
    margin: 20px 0;
    padding-left: 20px;
    border-left: 5px solid #ee6e73;
    font-style: italic;
    line-height: 26px;
    font-weight: 400;
    font-size: 18px;
}


Изображение

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

img {
    width: 100%;
}


Отступы

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

.section {
    padding: 2% 8%;
    ;margin: 0 auto;
}


Маркированные списки

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

ul>
    li> библиотека</li>
    li> вебинарами</li>
    li> лекция</li>
/ul>

li {
     font-style: italic;
     line-height: 20px;
     font-weight: 400;
     font-size: 18px;
     list-style: square;
}

Итоги

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

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

• Создано 19.06.2019 10:55:57
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,

то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Визуальное оформление текста в HTML | Nejalko.

ru

Доброго времени суток, друзья!

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

Начнем, пожалуй с

наиболее распространенных тегов форматирования текста в html:

• Тег полужирного начертания текста — <strong></strong>

Парные теги, придают <strong>такой</strong> эффект, пропишите теги <strong> в коде нашей странички index.html к какому-либо слову, предложению, абзацу или букве и посмотрите на результат. Естественно, теги работают на ту часть, которая располагается между открывающей и закрывающей частью:

Обратите внимание, если Вы пишите тег <strong> после тега <p>, то закрывать тег </strong> обязательно перед тегом </p>.

Иными словами, должна соблюдаться вложенность тегов, если Вы ложите коробку в коробку, то она же не вылазит из стены второй коробки, так и в html, тег внутри тега должен быть целостным:

<p><storng></strong></p> — это правильный синтаксис языка html;
<strong><p></strong></p> — НЕ ПРАВИЛЬНЫЙ вариант.

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

• Тег курсивного начертания —
  <em></em>

Также парные теги, с их помощью текст приобретает наклонное начертание, называемое курсивом. Выглядит в html-документе это <em>таким</em> образом. На тег курсива действуют те же правила, что и на тег полужирного начертания, кроме того, эти теги можно использовать совместно и тогда получится <em><strong>вот такой эффект</strong></em> полужирное курсивное начертание. Опять же, не забывайте про вложенность тегов и закрывайте их правильно. Можно использовать вплоть до отдельной буквы.

• Тег подчеркивания текста — <u></u>

Еще одна разновидность тегов оформления текста, позволяет подчеркнуть текст тонкой линией по нижней границе букв. Выглядит это <u>следующим образом</u>. Также может быть комбинирован с предыдущими тегами в любом сочетании: полужирный-подчеркнутый, курсив-подчеркнутый или все вместе; и использоваться хоть для одной буквы из предложения, только эффект будет не так заметен.

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

• Тег перечеркивания текста — <s></s>

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

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

• Тег создания нижнего индекса — <sub></sub>

Надеюсь, Вы еще не забыли из школьного курса, как выглядят химические формулы? Так вот, теги нижнего индекса отвечают за создание эффекта подстрочного текста, как циферки в химических формулах. К примеру, формула одного хорошо известного некоторым личностям вещества C₂H₅OH (кто отгадал формулу, тому желаю дальше формулы и не продвигаться).

В html — коде данная формула выглядит так C<sub>2</sub>H<sub>5</sub>OH. Можно попробовать так и с буквами, например, экономические и бухгалтерские формулы часто имеют нижний индекс из букв, вот двухфакторная модель оценки вероятности банкротства:

Z₁= -0,39-1,07*К_тл+5,79*К_кзк — в качестве нижнего индекса и буквы, и цифры

_{* Теги  могут использоваться для создания сносок и поправок}

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

• Тег создания верхнего индекса — <sup></sup>

Данные теги могут использоваться для создания собственной таблицы умножения, почему бы нет?

2*2=2²=4

2*4=2³=8

И тому подобное, принцип понятен, в коде выглядит также, как тег <sub>, вся разница в визуальном эффекте и 1 разной букве:

2*2=2<sup>2</sup>=4.

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

Тег форматирования шрифта —

<font></font>

Мы изучим данный тег, так сказать, для порядка, потому что использование в работе его весьма неудобно. После изучение курса HTML, обязательно выделите время на изучение базового курса по CSS, вот именно в CSS все атрибуты данного тега и будут находиться, даже более того, что можно сделать в html, но сейчас, в качестве ознакомления, доступные атрибуты тега <font> мы разберем. Слово «font» в переводе с английского означает «Шрифт», так что все справедливо. Применяется данный тег к любой части текстового контента для придания различных эффектов:

1. 1.<font size=""></font> — задаем размер шрифта текста, находящегося между этими тегами. Размер шрифта устанавливается в абсолютном значении и может колебаться от 1 до 7. В коде это будет выглядеть так:

<font size="5">Привет всем</font>, кому не спится!

А также тем, <font size="2">кому спится</font>

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

1. 2. <font color=""></font> — задает цвет тексту, заключенному в данных тегах. Цвет может быть прописан, как один из 16 базовых цветов на английском языке, либо в 6-значном значении RGB с «#» перед кодом цвета. Давайте посмотрим пример:

Слово «красный» будет красным, слово «синий» — синим, а слово «небо» — зеленого цвета.

Теперь посмотрим на код этого «цветопредставления»:

— слово "<font color="red;">красный</font>" будет красным;
— слово "<font color="blue;">синий</font>" — синим;
— а слово "<font color="green;">небо</font>" — зеленого цвета.

Обратите внимание, кавычки перед <font> и после </font> не имеют отношения к тегам, просто в них находятся слова «красный, синий, небо». Да, не спрашивайте меня, почему «небо» зеленым цветом.

1. 3. <font face=""></font> — задает семейство шрифта для текста внутри данных тегов. Сразу совет: использовать в работе лучше всего общепринятые шрифты, так как они обязательно будут у других пользователей и они увидят Ваш сайт именно таким, каким Вы его задумали. Если использовать редкий шрифт, то браузер читателя, у которого нет такого шрифта будет пытаться подставить другой подходящий шрифт и этим почти 100% нарушит верстку сайта, его дизайн или расположение текстового контента.

Рекомендую использовать такие шрифты: Tahoma, Verdana, Times New Roman, Georgia, Arial, Courier. Они по умолчанию должны быть в операционной системе у любого пользователя, так что с ними все будет хорошо.

Давайте посмотрим на работу атрибута «face» тега <font>:

1. <font face="Arial">Семейство шрифтов Arial;</font>
2. <font face="Tahoma">Семейство шрифтов Tahoma;</font>
3. <font face="Verdana">Семейство шрифтов Verdana;</font>
4. <font face="Times New Roman">Семейство шрифтов Times New Roman;</font>
5. <font face="Georgia">Семейство шрифтов Georgia;</font>

Разница на глаз, иногда, слабо заметна, но когда Вы будете работать с большим объемом текста, наподобие данного урока, заметно будет точно.

Все 3 атрибута тега <font> можно комбинировать в одной записи, для этого не нужно каждый раз открывать новый тег <font>, вот, как это выглядит в коде:

<font face="Arial" color="violet" size="4">Семейство шрифтов Arial;</font>

Если перевести на русский, то все становится понятно, мы задали: <шрифт семейства "Arial" цвета "фиолетовый" размера "4"> к сожалению, русских команд язык html не понимает, вот и пишем на английском.

Не забывайте прописывать все изучаемые по ходу уроков теги в код нашей страницы index.html, сохранять изменения и просматривать результаты — практика очень полезна, на нее приходится 50% успеха в веб-программировании.

Тег разделительной полосы

<hr>

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

Вот так выглядит разделительная полоса красного цвета прописанная мной в коде нашей первой html-страницы «index.html»:

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

Разберем, что в коде написано кроме самого тега разделительной полосы <hr>, то есть разберем атрибуты разделительной полосы в html:

1. Атрибут SIZE="" отвечает за размер полосы по высоте, за толщину разделительной полосы, единицы измерения толщины — пиксели. В нашем примере размер равен 3 пикселям.
2. Атрибут COLOR="" уже знакомый нам атрибут, отвечает за цвет разделительной полосы, в данном случае, красный. Цвет можно задавать английским названием или в RGB-диапазоне (красный обозначается #FF0000).
3. Атрибут WIDTH="" задает ширину разделительной полосы, ее длину по горизонтали. В примере мы использовали относительное значение «53%», а это значит, что сужение самой html-страницы повлечет уменьшение разделительной полосы, так как размер в процентах отсчитывается от общей ширины страницы. Ширину полосы можно задать в абсолютных единицах, то есть в пикселях, например, так: width="770px", тогда полоса останется шириной 770 пикселей в любом случае.
4. Атрибут ALIGN="" отвечает за выравнивание разделительной полосы по горизонтали, в примере указано выравнивание по левому краю, может быть по центру — align="center" и по правому краю — align="right".
5. Атрибут NOSHADE данный атрибут не является обязательным и не имеет числового значения. Если его дописать, то разделительная полоса станет темной, без объема и тени.

Выравнивание текста в параграфе

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

В html-коде это выглядит следующим образом:

<p align="center">Текст параграфа выравнивается по центру. </p>

<p align="right">Параграф выравнивается по правому краю.</p>

<p align="left">Параграф выравнивается по левому краю (автоматическое выравнивание также по левому краю.</p>

<p align="justify">Данный параграф получит параметр выравнивания «по ширине», но это не всегда смотрится к месту, чаще даже мешает, так как обычно появляется неестественный отступ между словами, хотя края таких праграфов смотрятся ровно и аккуратно.</p>

Таким образом, параметр выравнивания параграфа имеет 4 возможных значения:

• align="left";
• align="center";
• align="right";
• align="justify".

Попробуйте использовать выравнивание на нашей странице index. html и обязательно проследите за результатом.

Параметр «align» можно использовать не только для параграфа, но и для заголовков, помните такие теги? В коде это будет выглядеть следующим образом:

<h5 align="right">Заголовок с выравниванием по правому краю</h5>

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

В следующем уроке мы познакомимся с еще одним элементом текста в языке html, а именно со списками в html.

Успехов в изучении html, друзья!

Поделиться в соцсетях

Базовое форматирование | Форматирование текста HTML, абзацы и разрывы строк

Путь // www.yourhtmlsource.com → Мой первый сайт → ОСНОВНОЕ ФОРМАТИРОВАНИЕ

---

Росс Шеннон

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

Вы хотите отформатировать .

Навигация по страницам:
Форматирование текста | Отметить вопросы | Пропуск строк | Атрибуты | Заголовки · Итак, давайте посмотрим на них! | Линии | Комментарии | Разнесены | Первая проверка

Эта страница последний раз обновлялась 21 августа 2012 г.

---

Примечание:

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

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

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

Привет, меня зовут Росс и я блестящий . Да, верно, я гениальный !

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

гениально

Вот и все. Просто окружите нужный текст этими тегами.

Надеюсь, скоро будет еще интереснее, а? Хорошо, хотите выучить курсив ? Это так же просто. Код для этого i . Таким же образом:

превосходный материал становится превосходным материалом .

Подчеркивание тоже смехотворно просто — просто используйте

Просто подчеркните меня подчеркиванием, мааан

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

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

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

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

   Этот текст будет иметь отступ

Вопросы по тегам

Должны ли теги быть написаны ЗАГЛАВНЫМИ БУКВАМИ?
Нет, не знают. Вы можете использовать или . Я предпочитаю делать все строчными, потому что это выглядит намного аккуратнее, когда вы читаете и редактируете свой код, и подходит для версии HTML, в которой я кодирую, но это не меняет того, как они работают. Тебе решать.

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

Следует отметить, однако, что порядок, в котором вы размещаете их в . Если вы начнете с b , вы закончите с b . В приведенном выше примере был последним открытым тегом, поэтому это 9-й тег.0010 первый один закрытый. Это то, что вы должны помнить, потому что важность синтаксиса вашего тега становится критической позже. Этот стиль открытия и закрытия называется LIFO — «последний пришел, первый ушел».

Такое размещение тегов друг в друге называется вложением .

Пропуск строк

Вы, наверное, уже заметили, что при отображении в браузере ваша страница кажется лишенной всех абзацев и тому подобного. Ваш браузер игнорирует любые возвраты и отступы. Ну так что ты делаешь? Вы используете
, что означает «строка BR eak». Это известно как «пустой элемент» — тег, которому не нужен закрывающий тег — просто введите его, и текст начнется с новой строки.

Или как насчет пропуска строки и создания абзацев? Для этого используйте

, что означает « P aragraph». Есть два способа использования p . Вы можете просто поместить его в конец абзаца, чтобы пропустить строку и перейти к следующей; или можно поставить

в начале абзаца и

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

Добро пожаловать на мою страницу.

Надеюсь, вам понравится.

Атрибуты

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

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

Очень важно Затронутый текст

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

Таким образом, чтобы добавить значение center к тегу p , структура будет следующей:

Centered Text

Сравните это с примером выше, чтобы увидеть Что к чему. p — тег, align — атрибут, center — значение атрибута.

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

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

, потому что все равно весь текст выравнивается по левому краю. Это известно как по умолчанию .

Заголовки

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

до

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

Итак, давайте их посмотрим!

О, это моя реплика. Хорошо: вот примеры:

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

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

2 3

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

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

до

).

sourcetip: Заголовки принимают цвет и шрифт окружающего текста, поэтому вы можете изменить цвет заголовков, скажем, обернув цвет шрифта вокруг тега h . Прочтите этот учебник по шрифту и цвету, чтобы узнать больше.

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

Строки

Некоторые другие очень простые вещи используют линии поперек страницы. Чтобы сделать их, используйте

---

, что означает « H orizontal R ule».
Просто поместите это в любом месте на вашей странице (конечный тег не нужен), и текст остановится, и появится большой

---

, а затем ваш текст продолжится. Красиво, а?

Ими также можно управлять с помощью атрибутов . Они могут быть выровнены по левому и правому краям, как p выше. У них также есть два других атрибута, которые относятся к размеру строки.

---

ширина ="100"> создаст

---

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

---

, что создаст линию шириной на 80% от доступной ширины экрана.

Чтобы сделать линии более сильными,

---

size ="4" noshade> создаст большой, мускулистый

---

Вы видели, что noshade бит? Это особый атрибут, уникальный для hr , и ему не нужно значение. Он останавливает hr с двумя оттенками серого.

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

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

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

Spaced Out

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

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

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

Первая проверка

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

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

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

А теперь; мы связываем!

Форматированный текст Html –

спросил 9 лет, 2 месяца назад

Изменено 9 лет, 2 месяца назад

Просмотрено 44к раз

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

 +-001 Это строка 00:12:04
  002 ----------------------------------
- 003 Пока все выглядит хорошо ------
 

Текст «предварительно отформатирован» и содержит много пробелов и тире, каждая строка имеет одинаковую длину (все символы имеют одинаковую ширину).

Есть ли способ отобразить текст в html без потери формата?

• HTML
• текст
• формат

1

Оберните текст внутри тега

 .  
 
 JSFiddle 
 
 <пред>
+-001 Это линия 00:12:04
  002 ----------------------------------
- 003 Пока все выглядит хорошо ------

0

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

• На всякий случай при форматировании поместите тег

    в начало первой строки и тег  

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

Пример (где я добавил строку, содержащую выражение 1 + 1 < 3):

 
+-001 Это строка 00:12:04
  002 ----------------------------------
- 003 Пока все выглядит хорошо ------
- 004 Просто как 1 + 1 < 3 ------

Вы можете избежать экранирования < и и , используя xmp вместо до , но xmp был объявлен устаревшим, устаревшим и т.

No related posts.