Теги, или Как сделать свой текст красивым. by Rina27
Summary: Несколько статей о том, как сделать свой текст красивым и отвечающим авторскому замыслу.
Categories: Journalism Characters: Нет
Жанр: Публицистика
Размер: Миди
Источник: Мой фанфик
Направленность: Джен
Предупреждения: Нет
Challenges: Нет
Series: Нет
Chapters: 4 Completed: Нет Word count: 1441 Read: 2371 Published: 19.12.13 Updated: 18.05.15

1. Простые текстовые теги. by Rina27

2. Разбивка на абзацы и выравнивание. by Rina27

3. Как вставить картинку в текст? by Rina27

4. Маркированный и нумерованный списки. by Rina27

Простые текстовые теги. by Rina27
Author's Notes:
В примерах теги "разорваны" при помощи пробела, чтобы они не исполнялись.
При использовании тегов для форматирования ваших текстов эти пробелы нужно убирать.
Мы все привыкли в ворде форматировать текст, делая его разным. В фанфиках это позволяет разграничивать какие-то действия, например, обозначать курсивом переговоры по радио или воспоминания героя о каких-либо событиях прошлого. Зачеркнутый текст позволяет передавать какие-то комичные моменты, связанные с созвучием слов (икебана – икебаба). Но все это сохраняется в тексте только до тех пор, пока он в файле на компьютере. Как только мы переносим его на сайт, все эти красивости сразу же исчезают.

И вот тут-то нам на помощь и придут теги html, которые и «подскажут» браузеру, как нужно отображать текст на сайте.
Теги – парные элементы, хотя есть и исключения. Есть открывающие теги, которые записываются так: < а>.
И есть закрывающие теги, которые выглядят так: < /a>
Начнем с самых простых тегов.

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

2. Текст курсивом.
Для того, чтобы текст отображался курсивом, можно использовать либо тег < i> либо тег < em>. Эффект будет одинаковый.
< i>Этот текст написан курсивом при помощи тега < i>.< /i>
< em>Этот текст написан курсивом при помощи тега < em>.< /em>
Этот текст написан курсивом при помощи тега < i>.
Этот текст написан курсивом при помощи тега < em>.

3. Подчеркнутый текст.
Для того, чтобы текст отображался подчеркнутым, нужно использовать тег < u>.
< u>Этот текст подчеркнут при помощи тега < u>.< /u>
Этот текст подчеркнут при помощи тега < u>.

4. Зачеркнутый текст.
Для того, чтобы текст отображался зачеркнутым, нужно использовать тег < strike>.
< strike >Этот текст зачеркнут при помощи тега < strike >.< / strike >
Этот текст зачеркнут при помощи тега < strike >.

5. Использование нескольких тегов.
Все эти теги можно использовать вместе и получать различные эффекты: полужирный курсив, подчеркнутый курсив, полужирный зачеркнутый курсив. Самое главное при этом – соблюдать последовательность открывающих и закрывающих тегов. То есть, должно быть четко – i b /b/i, но не bi /b/i.
< i>< b>Этот текст стал полужирным курсивом при помощи тегов < b> и < i>.< /b>< /i>
Этот текст стал полужирным курсивом при помощи тегов < b> и < i>.

6. Выделение отдельных слов в предложении.
Здесь сохраняется та же последовательность – открывающий и закрывающий тег, но расположены они уже не в начале и конце предложения, а вокруг того слова, которое нужно выделить.
Это < strike >слово< / strike > зачеркнуто при помощи тега < strike >.
Это слово зачеркнуто при помощи тега < strike >.

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




В следующей главе поговорим про красные строки и выравнивание абзацев.
Разбивка на абзацы и выравнивание. by Rina27

Разбить текст на абзацы можно с помощью тега < p>. Но иногда возникает нужда не просто разделить текст, но еще и сами эти абзацы сдвигать вправо (например, если это эпиграф к фанфику), или влево, или по центру. В этом случае нам может помочь тег < div align=" ">.

7. Разбивка на абзацы с помощью тега < p> .

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

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

< p>Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.< /p> < p>Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.< /p>

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

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


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

8. Разбивка на абзацы с помощью тега < p> и образование красной строки .

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

< p style="text-indent: 25px;"> Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.< /p>

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


Величину отступа красной строки можно менять здесь: ="text-indent: 25px;". Достаточно поставить любое число вместо 25px и вид абзаца изменится.

А. ="text-indent: 15px;"

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

Б. ="text-indent: 45px;"

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

9. Редактирование абзацев с помощью тега < div align=" ">.

Этот тег дает уже куда больше возможностей для форматирования абзацев, чем предыдущий и может применяться даже без разбивки текста на абзацы с помощью тега < p>. Правда, в этом случае текст будет сплошной, без пробелов между предполагаемыми абзацами.
Имеет атрибут align, который может иметь значения: left, right, center, justify, который выравнивает текст соответственно по левому краю, по правому краю, по центру и по обоим краям документа.

< div align="left">Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.< /div>
< div align="right">Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.< /div>
< div align="center">Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.< /div>
< div align="justify">Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.< /div>
Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.

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

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

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

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

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

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

< div align="center">Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.< /div> Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.
***
Маленькая когтистая лапа появилась из-за края стола, пошарила по доступной поверхности и натолкнулась на стилус. Три секунды возни – и стилус уже на полу. Еще секунда и котенок-кассетник несется галопом из кабинета Миража в гостиную. В гостиной топот усилился, равно как и визг – близнецы заметили своего приятеля и начали носиться за ним, стараясь отобрать стилус.
Мираж покачал головой и вернулся к своим цифрам. Но ненадолго. Где-то через полджоора из гостиной донесся самый настоящий рев. Мелкая скотинка обладала поразительно громким голосом, который использовала при всякой возможности. Особенно умиляли ее концерты под дверями спальни взрослых. Спрингер уже пообещал прибить однажды чисто случайно надоедливую кассету. Пока котеныша спасало только его обостренное чутье на опасность.

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

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

Есть несколько вариантов размещения картинки в тексте.

10. Картинка в начале или в любом другом месте фанфика.
В этом случае используется код такого вида: < * img src="ССЫЛКА НА КАРТИНКУ">
Текст располагается ниже ссылки, если нужно, чтобы картинка была в начале, в самом тексте или же после текста.
Для того, чтобы картинка располагалась по центру, что весьма красиво, используется тег < * center>< / center>

Примеры.
А) Картинка вверху текста.
< * center>< * img src="ССЫЛКА НА КАРТИНКУ">

— Ты проспорил мне!
— С чего ты взял, что я вообще с тобой спорил?
— С того, что ты кивнул и ушел молча, когда я тебя спросил, споришь ли ты!






— Ты проспорил мне!
— С чего ты взял, что я вообще с тобой спорил?
— С того, что ты кивнул и ушел молча, когда я тебя спросил, споришь ли ты!



Б) Картинка в тексте.
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
< * center>< * img src="ССЫЛКА НА КАРТИНКУ">
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


В) Картинка после текста.
Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
< * center>< * img src="ССЫЛКА НА КАРТИНКУ">



Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст



11. Картинка располагается прямо в тексте, справа или слева.
Для этого используется код такого вида: < * img src="ССЫЛКА НА КАРТИНКУ" style="float: left; margin-right: 20px;">
В нем теги < center> не используются.
style="float: left; - показывает, где будет располагаться картинка – справа или слева. В данном случае, картинка будет располагаться слева.
margin-right: 20px;" – этот элемент кода показывает, на какое расстояние от картинки будет «отодвинут» текст. При значении 0px текст будет пристыкован к картинке вплотную.

Примеры.
А) Картинка слева от текста, отступ текста от картинки – 0 пикселей.
< * img src="ССЫЛКА НА КАРТИНКУ" style="float: left; margin-right: 0px;"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст






Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст








Б) Картинка слева от текста, отступ текста от картинки – 20 пикселей.
< * img src="ССЫЛКА НА КАРТИНКУ" style="float: left; margin-right: 20px;"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст




Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст








В) Картинка справа от текста, отступ текста от картинки 20 пикселей.
< * img src="ССЫЛКА НА КАРТИНКУ" style="float: right; margin-left: 20px;"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст


Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст









12. Уменьшение размера картинки.

Бывает так, что размер нужной картинки таков, что она занимает больше пространства, чем бы хотелось. Бороться с подобным явлением нужно опять же с помощью кода. Для этого в стандартный код для вставки рисунка добавляем следующие элементы: width="000px;" height="000px;"
Код теперь будет выглядеть так: < * img width="000px;" height="000px;" src="ССЫЛКА НА КАРТИНКУ">
По традиции, первой указывается ширина картинки (width), а второй – высота (height). Оба параметра нужно указывать только в том случае, если точно знаете, каких размеров должна быть картинка в тексте. В случае, если эти цифры неизвестны, лучше указать один какой-то параметр. Второй подстроится автоматически. Но в этом случае придется поэкспериментировать в предварительном просмотре, добиваясь нужных результатов.

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

А) Задание параметров ширины и высоты картинки.
< * center>< * img width="200px;" height="200px;" src="http://cs317819.vk.me/v317819049/8aa5/Roi6STjD2oY.jpg">






Б) Задание только ширины картинки.
< * center>< * img width="150px;" src="http://cs317819.vk.me/v317819049/8aa5/Roi6STjD2oY.jpg">





В) Задание только высоты картинки.
< * center>< * img height="100px;" src="http://cs317819.vk.me/v317819049/8aa5/Roi6STjD2oY.jpg">






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



Я надеюсь, что данная статья была для вас полезной и понятной. И фанфиков с красиво оформленными иллюстрациями на сайте станет больше.
Маркированный и нумерованный списки. by Rina27
Иногда при написании статей требуется создать список. Конечно, если список небольшой, его можно создать вручную, но если список большой, то возможны ошибки в нумерации. Списки, создаваемые с помощью тегов, помогут избежать путаницы в нумерации, да и выглядят они более аккуратно.

За создание списка отвечают теги ul, ol, li. Закрывающий тег обязателен.

Тэгом ul отмечается начало/окончание всего маркированного списка.
Тэгом ol отмечается начало/окончание всего нумерованного списка.
Тэгом li отмечается начало/конец отдельного элемента списка.

Теги для маркированного списка.

Обычный маркированный список.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
< ul>< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>< /ul>
Маркированный список с квадратами.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
  • /ul>
< ul style="list-style: square;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>< /ul>
Маркированный список с кружками.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка
< ul style="list-style: circle;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< i>пункт списка< /li>
< /ul>
Цветной маркированный список.
Пример
Код
  • пункт списка
  • пункт списка
  • пункт списка

< ul style="list-style: square; font-size: 18px; color: #1cac78;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ul>
Маркированный список с выносом маркера за текст.
Пример
Код
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
< ul style="list-style: square outside;">
< li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul>
Маркированный список с маркером в тексте.
Пример
Код
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
< ul style="list-style: square inside;">< li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul>
Многоуровневый маркированный список.
Пример
Код
  • Пункт 1.
  • Пункт 2.
    • Подпункт 2.1.
    • Подпункт 2.2.
      • Подпункт 2.2.1.
      • Подпункт 2.2.2.
    • Подпункт 2.3.
  • Пункт 3.
< ul>
< li>Пункт 1.< /li>
< li>Пункт 2.
< ul>
< li>Подпункт 2.1.< /li>
< li>Подпункт 2.2.
< ul>
< li>Подпункт 2.2.1.< /li>
< li>Подпункт 2.2.2.< /li>
< /ul>
< /li>
< li>Подпункт 2.3.< /li>
< /ul>
< /li>
< li>Пункт 3.< /li>< /ul>


Теги для нумерованного списка.

Обычный нумерованный список.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с нужного числа.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol start="8">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Цветной нумерованный список.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
< ol style="color: #1cac78;">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с римскими цифрами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="I">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с римскими цифрами с нужного числа.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="I" start="8">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с маленькими римскими цифрами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="i">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с буквами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="А">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Нумерованный список с маленькими буквами.
Пример
Код
  1. пункт списка
  2. пункт списка
  3. пункт списка
  4. пункт списка
< ol type="а">
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
Многоуровневый нумерованный список.
Пример
Код
  1. Пункт 1.
  2. Пункт 2.
    1. Подпункт 2.1.
    2. Подпункт 2.2.
    3. Подпункт 2.3.
      1. Подпункт 2.3.1.
      2. Подпункт 2.3.2.
      3. Подпункт 2.3.3.
    4. Подпункт 2.4.
  3. Пункт 3
  4. Пункт 4
< ol>
< li>Пункт 1.< /li>
< li>Пункт 2.
< ol>< li>Подпункт 2.1.< /li>
< li>Подпункт 2.2.< /li>
< li>Подпункт 2.3.
< ol>
< li>Подпункт 2.3.1.< /li>
< li>Подпункт 2.3.2.< /li>
< li>Подпункт 2.3.3.< /li>
< /ol>< /li>
< li>Подпункт 2.4.< /li>
< /ol>< /li>
< li>Пункт 3< /li>
< li>Пункт 4< /li>
< /ol>
Нумерованный список с обратным порядком чисел.
Пример
Код
  1. Декабрь
  2. Ноябрь
  3. Октябрь
  4. Сентябрь
  5. Август
  6. Июль
  7. Июнь
  8. Май
  9. Апрель
  10. Март
  11. Февраль
  12. Январь
< ol reversed>
< li>Декабрь< /li>
< li>Ноябрь< /li>
< li>Октябрь< /li>
< li>Сентябрь< /li>
< li>Август< /li>
< li>Июль< /li>
< li>Июнь< /li>
< li>Май< /li>
< li>Апрель< /li>
< li>Март< /li>
< li>Февраль< /li>
< li>Январь< /li>
< /ol>


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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  1. пункт списка

  2. пункт списка

  3. пункт списка

  4. пункт списка


It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
< ol>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>

то надо код списка выстроить в одну строку. Естественно, после заполнения его, чтобы не запутаться.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  1. Калина
  2. Малина
  3. Клубника
  4. Ежевика
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.< ol>< li>Калина< /li>< li>Малина< /li>< li>Клубника< /li>< li>Ежевика< /li>< /ol>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>
This story archived at http://www.transfictions.ru/viewstory.php?sid=2095