Ищу мужа. Найду, убью (anna343434) wrote,
Ищу мужа. Найду, убью
anna343434

HTML, ЖЖ Тэги | Как форматировать текст, вставить картинку или ссылку

Оригинал взят у alex_inside в HTML, ЖЖ Тэги | Как форматировать текст, вставить картинку или ссылку


HTMLДля тех, кто забывает или не знает как пользоваться тэгами форматирования текста в своих постах, я написал эту напоминалку.
Всё это — простейшие тэги, но, думаю, вы найдёте для себя что-то новое :D Пост частенько обновляется для вашего удобства.посетители



Обновление: 4 февраля. Пролайкайте пост в фейсбуке! :) → Обновление: 16 апреля. Что нового? На заметку: Как правильно оформлять посты и блоги. Советы.
чтобы не искать:

HTML Тэги. Форматирование шрифта.

<b>Полужирный текст
Выделение текста курсивом
Подчёркнутый текст
Зачёркнутый текст
Маленький шрифт
Большой шрифт

Знак сноски<sup>сверху</sup> или индекс<sub>снизу</sub> от текста

<acronym title="Всплывающая подсказка">Текст со всплывающей подсказкой</acronym>

Шрифт размером 16 пикселей


Предопределённые размеры шрифта (могут быть от 1-го до 7-го):

Шрифт 3-го размера

Шрифт на 1 размер больше обычного

Заголовок 2-го размера



Шрифт Comic Sans Ms
Шрифт Monotype Corsiva

Tahoma, 15 пикселей</font>
Карманная Памятка и Навигация HTML и ЖЖ Тэги — Как оформлять текст и посты? Полезные линки — список разных сайтов посвящённх ЖЖ функциональности. Мой ЖЖ-Дизайн — советы и исходные коды для Дизайна вашего ЖЖ стиля S1 Generator и не только!. Сайты предоставляющие хостинг картинок — Куда выложить фотки? <br><br>&copy; <a href=http://alex-inside.livejournal.com/216475.html>via</a> <lj user=alex_inside><br>
<font color="#0000ff">Синий текст

Цифра 0000ff означает синий цвет в RGB палитре.
Также можно пользоваться стандартными словесными обозначениями цветов вот так:

red">Красный текст

У фона тоже можно менять цвет, вот так:

#eeeeff;">голубой фон

lightgray; color:#0000ff;">синий текст, серый фон

Обратите внимание на синтаксис. Аттрибут style использует синтаксис CSS.


Вот некоторые предопределённые цвета:
Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff
В шестнадцатиричном коде указывающем интенсивность красного, зелёного и синего (RRGGBB):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
Выбрать подходящие цвета:
<br><br>&copy; <a href=http://alex-inside.livejournal.com/216475.html>via</a> <lj user=alex_inside><br><br>

HTML Тэги. Форматирование параграфов.

Оформить отступы абзацев, легко:
<blockquote> Процитированый в отдельном блоке текст у которого будет небольшой отступ слева. </blockquote>
<p style="text-indent: 40px">
<div style="float:right; margin:8px; padding:6px; border:1px solid #bbbbbb; width:400px;"> Я врезаный, обтекающий другим текстом, текст с правого краю с выравниванием слева, с серой рамкой и отступом от рамки снаружи в 8 пикселей </div>
1. Этот блок вставлен в текст слева перед (!) словом «Привет!» 2. Если блок внутри lj-raw, то переносы строк нужно указывать тэгом <br>
Привет! В этом абзаце первое предложение будет с красной строки, т.е. с отступом. Прямо как в книгопечати. Правда, в интернете это редкая практика. Абзацы должны разделяться просто пустым промежутком.
</p>
<div style="width:300px;">Опачки! Этот абзац будет написан с фиксированой шириной в 300 пикселей. Узенько так типа. А если добавить style="width:300px; float:right;" тогда он ещё и будет висеть справа. Смотрите пример чуть ниже.</div>
<pre>Преформатированый текст
    сохраняет отступы слева и   между  словами
             и устанавливает те что вы укажите пробелами.
             NB! тэг не делает переноса строки автоматом!
</pre>
<center>отцентрированый текст</center>
<div align=right> текст с правого краю в две строчки с выравниванием справа </div>
<div style="float:right;"> текст с правого краю в две строчки с выравниванием слева </div><br clear=all>

<marquee>бегущая влево строка</marquee><marquee direction="right">бегущая вправо строка</marquee><marquee behavior="alternate">бегущая от края к краю строка</marquee><marquee direction="up" scrollamount="1" scrolldelay="0" height="32"> скролящийся вверх текст с полезной информацией или ещё какой-то ерундой</marquee><marquee direction="down" scrollamount="1" scrolldelay="0" height="32"> или ещё какой-то ерундой информацией текст с полезной скролящийся вниз</marquee>» Как вместо ката сделать вертикальную перемотку большого текста?<div style="overflow:auto; height:80px; width:500px; padding:8px; border:1px solid #ccc;">
Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним ад миним вениам, кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат alex_inside нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.
</div >Если надо HTML-код вставить, показать кому-то, то то же самое можно сделать<textarea cols="80" rows="5">
  • Как сделать записи в 2 столбика? Ответ можно найти в комментариях тут.
  • Как делать оглавление в виде ссылок на текст страницы? (↓ Проскроллить на ответ ниже)

    Специальные тэги HTML теги

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

    HTML Тэги. Форматирование списков.

  • Один из пунктов несортированого списка
  • Другой такой пункт Добавляем тэг ol по краям и список становится сортированым автоматически:

HTML Спец. Символы.

Код Символ Для набора на клавиатуре нажмите*
« « ALT+0171
» » ALT+0187
ALT+0151
© © ALT+0169
® ® ALT+0174
ALT+0153
/ /
< <
> >
ALT+0160 — неразрывный пробел**
HTML entities:
* - Зажмите кнопку ALT; наберите код; отпустите ALT. Работает в винде.** - Вставьте вподряд несколько таких пробелов чтобы они не сливались в один:       — теперь слева отступ в семь пробелов!Кстати, чтобы HTML код был как обычный текст, перед тем как писать, откройте Windows Notepad,вставьте ваш HTML-код, выберите автозамену (Ctrl+H) и замените все < на < (и по желанию все > на >)Получится полужирный или полужирный вместо полужирныйА чтобы ссылка на какую-то страницу не была активной, например http://alex-inside.ru , нужно писать http://alex-inside.ru

HTML Тэги LiveJournal.com ЖЖ теги ЖЖ тэги.

howto_href="http://alex-inside.livejournal.com/216475.html?HTML_and_LJ_tags#advcut" style='display:none'> этот текст будет только снаружи этот текст будет только внутри
тэги. Чтобы добавить традиционный кат, нужно добавить тэг <lj-cut> после слова «снаружи».Кстати, если вы просто не хотите чтобы внутри поста была видна мини-превью вашей фотографии, есть скрипт «Zoom Cut: Улучшенное превью для фоток под ЖЖ-катом» (тут описание).

HTML Тэги. Ссылки. Линки.

<input ... >
Демо-Оглавление (Нажмите на название, чтобы проскроллить вниз к главе:) ↓ href="#vstuplenie">Вступление — (тут мы ставим ссылку # на якорь «vstuplenie») ↓ Интересная главаЗаключение и ссылки
name="vstuplenie"> Наше клёвое вступление. — (тут якорь «vstuplenie» перед нужным текстом) Текст интересной главы.Перейти в оглавление  — (тут ссылка является одновременно и якорем)

HTML Тэги. Картинки.

no-repeat top left;"> Пишем текст поверх картинки. Старайтесь это никогда не использовать, потому что данный способ часто затрудняет читаемость текста, в зависимости от картинки.
>

FAQ: Коротенький список часто задаваемых вопросов

    1. Один из пунктов несортированого списка
    2. Другой такой пункт
  1. Общество ЖЖ-Юзер alex_inside alex_inside ЖЖ-Юзер Алекс Инсайд alex_insidetitle="Алекс Инсайд"> (для других сайтов) В ЖЖ возможна короткая запись: ФДуЧ штЫшву» ЖЖ кат! Этот текст увидят в френдленте. А этот текст будет под катом Этот текст увидят в френдленте. text="Загляни под кат, чувак!">Этот текст будет под катомЭтот текст не будет автоматически форматироваться А это уже новая строка. Вот так нужно вставлять видео, flash, разные онлайн плееры и так далее: тут код на object и/или embed » Новое: Двойной ЖЖ кат! С помощью такого ката можно показывать одно снаружи и другое внутри: Обратите внимание: переносы строки не будут работать, нужно использовать тэг или убрать все Линк на сайт куда можно залить фотки! Открыть ссылку в новом окне: target="_blank">Линк на сайт куда можно залить фотки! Всплывающая подсказка при наведении курсора на ссылку: title="Сайт куда можно залить фотки!">Залить фотки Картинка-ссылка (баннер): Кнопка-ссылка (форма): action="http://alex-inside.ru/" target="_blank">value="Зайти на alex-inside.ru"> (Аттрибут target="_blank" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.) Новое! » ← ссылка на этот параграф. Как сделать ссылку на текст на странице, типа оглавления? Если нужно дать ссылку на другой сайт, то # идёт в конце строки линка URL. Например, ссылка на якорь bio, в моём юзеринфо: http://alex-inside.livejournal.com/profile#bio Кстати, вы находитесь на странице напичканой этими якорями (») width="200px"> — ограничение по ширине height="500px"> — ограничение по высоте » Изображение со всплывающим текстом при наведении на него курсора:title="Этот текст появится при навелении курсора на картинку!" alt="А этот при её отсутсвии"> » Изображаение придвинутое влево, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей: align=left style="margin:0 1em 1em 0">текст » Картинка с прокруткой (скроллящаяся): (Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)




Tags: коды_жж, оформление_жж, теги
Subscribe
promo anna343434 february 17, 2016 23:41 14
Buy for 10 tokens
Очень трогательный малыш йорка. И очень хорошенький. Теперь он уже большой и красивенький. Но нашла это видео и захотелось поделиться.
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 9 comments