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

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

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

Как вставить картинку в текст? 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">

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

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

Disclaimer: Трансформеры и все связанные с этим миром персонажи и концепции принадлежат Hasbro, Marvel, Takara, Toei Animation, Dreamworks Pictures и другим законным правообладателям. Оригинальные персонажи и сюжет являются собственностью автора.

This story archived at http://www.transfictions.ru/viewstory.php?sid=2095