HTML Тэги | Форматирование текста | Вставка картинок и ссылок | ЖЖ тэги | CSS

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

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

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

Знак сноски^{^сверху} или индекс_{_снизу} от текста 

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

<font style="font-size:16pt;">Шрифт размером 16 пикселей</font>


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

<font size="3">Шрифт 3-го размера</font>

<font size="+1">Шрифт на 1 размер больше обычного</font>

<h2>

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

</h2>

<font style="font-family:Comic Sans Ms;">Шрифт Comic Sans Ms</font>
<font style="font-family:Monotype Corsiva;">Шрифт Monotype Corsiva</font>

<font style="font-family:Tahoma; font-size:15pt;">Tahoma, 15 пикселей</font>                                                                                                                              <font color="#0000ff">Синий текст</font>

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

<font color="red">Красный текст</font>

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

<div style="background-color:#eeeeff;">голубой фон</div>

<div style="background-color:lightgray; color:#0000ff;">синий текст, серый фон</div>

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

 

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

Оформить отступы абзацев, легко:

<blockquote>
Процитированый в отдельном блоке текст
у которого будет
небольшой отступ слева.
</blockquote>

<p style="text-indent: 40px">

</p> 
 

<pre>Преформатированый текст    сохраняет отступы слева и   между  словами             и устанавливает те что вы укажите пробелами.             NB! тэг не делает переноса строки автоматом!</pre>

<center>отцентрированый текст</center>

<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;">

Лорем ипсум долор сит амет, консектетур адиписицинг элит, сед до эиусмод темпор инцидидунт ут лаборе эт долоре магна аликуа. Ут эним ад миним вениам,кьюс ноструд эксерцитатьён ульламко лаборис ниси ут аликуип экс эа коммодо консекуат. Дьюс ауте ируре долор ин репрехендерит ин волуптате велит эссе киллум долоре эу фугиат нулла париатур. эксцептеур синт оккаекат купидатат нон пройдент, сунт ин кульпа куй оффициа десерунт моллит аним ид эст лаборум.

</div > 

Если надо HTML-код вставить, показать кому-то, то то же самое можно сделать

<textarea cols="80" rows="5">

</textarea>

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

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

  ---

  
  

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

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

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

  <a href="http://www.fotki.com">Линк на сайт куда можно залить фотки!</a>
  
  Открыть ссылку в новом окне:
  <a href="http://www.fotki.com" target="_blank">Линк на сайт куда можно залить фотки!</a>
  
  Всплывающая подсказка при наведении курсора на ссылку:
  <a href="http://www.fotki.com" title="Сайт куда можно залить фотки!">Залить фотки</a>
  
  Картинка-ссылка (баннер):
  <a href="http://www.fotki.com" title="Сайт куда можно залить фотки!"><img src=http://images.fotki.com/pixel.gif></a>
  
  Кнопка-ссылка (форма):  --- <form action="http://alex-inside.ru/" target="_blank"><input type=submit value="Зайти на http://www.soft-am.ru/"></form>
  
  (Аттрибут target="_blank" — открывает ссылку в новом окне. Если это не нужно, удалите этот атрибут.)                                                                                                                                                                                                      

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

  <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg">
  <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" width="200px"> — ограничение по ширине
  <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" height="500px"> — ограничение по высоте
  
  » Изображение со всплывающим текстом при наведении на него курсора:
  <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" title="Этот текст появится при навелении курсора на картинку!" alt="А этот при её отсутсвии">
  
  » Изображаение придвинутое влево, текст обтекает картинку справа и имеет горизонтальный отступ от неё в 6 пикселей:
  <img src="http://img241.echo.cx/img241/5329/northpolesun5pw.jpg" align=left style="margin:0 1em 1em 0">текст
  
  
  <div style="background: url(http://images18.fotki.com/v331/photos/4/442291/3055927/copyright-vi.gif) no-repeat top left;">
  Пишем текст поверх картинки. 
  Старайтесь это никогда не использовать, 
  потому что данный способ часто затрудняет
  читаемость текста, в зависимости от картинки.
  </div>
  
  
  » Картинка с прокруткой (скроллящаяся):
  
  
  
  <div style="overflow: scroll; width:400px;"><img src="http://images28.fotki.com/v976/photos/4/442291/3055927/jagala-vi.jpg"></div>
  (Отображаемую ширину указываем внешнему div-контейнеру в атрибуте width в пикселях. Для вертикальной прокрутки, указываем высоту height. Ширина и высота должна быть меньше чем у картинки.)                                                                                                                                                                                                                                                                       

  Поддержка

  Если вы не нашли что искали, то ищите ответы в интернете, например в yandex.ru или google.com. Если всё же хотите чтобы тут что-то добавилось — пишите в комментарии.