Теги, или Как сделать свой текст красивым. Автор(ы) Rina27

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

И вот тут-то нам на помощь и придут теги 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 >.

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

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

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

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

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

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

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

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

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

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

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

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

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

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