Шпаргалка HTML

<hr> - Линия:

<br/> - Перенос по строке вниз;

title="ТЕКСТ" - всплывающая подсказка;

&nbsp; &nbsp; &nbsp; &nbsp; - пробел;

<u>Ваш текст</u> -  Подчеркнутый;

<s>Ваш текст</s> - Перечеркнутый;

<b>Ваш текст</b> - Полужирный;

<big>Ваш текст</big> - Полужирный крупный;

<i>Ваш текст</i> - Курсив;

<tt>шрифт "пишущая машинка"</tt> - шрифт "пишущая машинка"

<blockquote>цитата</blockquote> - цитата

Таблица:<table border=0 widht=52%> -

таблица (начало)

<tr> - строка (начало);

</tr> - конец строки;

Между символами <td> и </td> заключается отдельная ячейка таблицы;

</table> - конец таблицы.

Подробнее о таблицах здесь

Убрать под кат:

<cut text="Читать далее/ смотреть все картинки/и т.п."> Ваш текст, который нужно убрать под кат </cut>

Выравнивание текста:

<div align=right> ваш текст </div> - выравнивание по правому краю;

<div align=justify> ваш текст </div> - выравнивание по всей ширине текста;

<center>ваш текст, картинка</center> - центрирование.

Списки HTML 

Нумерованный список
<ol type=1><li>первый элемент</li>

<li>второй элемент</li>

.....

<li>N - элемент</li>

</ol>

  1. первый элемент
  2. второй элемент
  3. ......
  4. N - элемент
Маркированный список
<ul type=disc>

<li>первый элемент</li>

<li>второй элемент</li>

.....

<li>N - элемент</li>

</ul>

  • первый элемент
  • второй элемент
  • ......
  • N - элемент


Окошко для вставки кода:

1.

<textarea rows="2" cols="40"> ВАШ КОД </textarea> , где cols - ширина окошка в px, а rows - число строк в окне.

ВАШ КОД

2.

<input type='text' size='15' value='Ваш код'>

Изменяем шрифт, размер и цвет текста:

<span style="font-family:Monotype Corsiva;color:fuchsia;font-size:25px">Ваш текст</span> , где font-family - шрифт, color - цвет, font-size - размер.

     подробнее читать здесь

Оформление ссылок:

<a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>

<a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a> - кликабельная картинка,

<a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a> - ссылка откроется в новом окне.

     подробнее читать здесь

Кнопка с выпадающим списком:

  копируем код из окошка

НАЗВАНИЕ
НАЗВАНИЕ
НАЗВАНИЕ
НАЗВАНИЕ
НАЗВАНИЕ

Копируем код и вставляем в новую запись в формат HTML, вместо слова ССЫЛКА пишем необходимый URL адрес (ссылку, по которой нужно перейти)

Вместо слова НАЗВАНИЕ пишем описание этой ссылки (например: главная страница)

Вместо фразы НАДПИСЬ НА КНОПКЕ пишем слово, которое будет написано на кнопке, при нажатии на которую, мы перейдём на нужную страницу (например, Перейти)

Уроки HTMLВ помощь блоггеруКак сделать бродилкуКак вставлять готовые коды''Помощь блоггеру'' от Джулии

Пишем на картинке:

  копируем код из окошка

ВАШ ТЕКСТ

     подробнее читать здесь

Обтекание картинки текстом:

<img src="http:…" align=left hspace=20 vspace=20> , где align=left – картинка слева, текст справа

                                                                                      align=right -
картинка справа, текст слева

                                                                                      hspace=20 -
расстояние между текстом и картинкой 20 пикселей по горизонтали

                                                                                      vspace=20
- расстояние между текстом и картинкой 20 пикселей по вертикали

..

Ваш текст 1

Ваш текст 2


Ваш текст 1
Ваш текст 2

Основной текст

         Подробнее читайте здесь

Вставка флэш:

, где "ссылка-на-файл" - адрес файла,

width=450 height=300 - размеры флэш (можно менять)

Оцените статью
Добавить комментарий

  1. Елена

    Спасибо зо отличную шпаргалку!

    Ответить
  2. ольга ц

    супер!!!!!!!!!!!!!!!!!!!!!!

    Ответить
  3. Аноним

    Очень рада, что вам понравилось. Пользуйтесь.

    Ответить
  4. ольга ц

    поделилась вашей кнопочкой в Twitter
    , в жж, в своём блоге и на 2-х своих сайтах. Спасибо вам!

    Ответить
  5. Аноним

    И Вам спасибо) Вскоре я собираюсь подправить шпаргалку, добавить в нее еще немного кодов.

    Ответить
  6. tatka-Татьяна

    Спасибочки,пригодится.

    Ответить
  7. Анонимный

    ВАУ, у меня получается....

    Ответить
  8. Аноним

    рада за вас;)

    Ответить
  9. Анастасия

    Хорошая шпаргалка! Дай бог, чтобы стала еще лучше!

    Ответить
  10. Аноним

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

    Ответить
  11. ольга ц

    создала новый сайт, обязательно поставлю на вас ссылку. С НАСТУПАЮЩИМ НОВЫМ ГОДОМ! ЗДОРОВЬЯ ! УДАЧИ!!!!!!!

    Ответить
  12. Аноним

    Спасибо! С Новым годом! Счастья, здоровья, удачи, благополучия!

    Ответить
  13. света

    Как здорово! Действительно ШПОРГАДКА!

    Ответить
  14. Анонимный

    Подскажите пожалуйста, как сделать, чтобы на моем сайте пользователи могли отвечать друг другу на вопросы. Я не давно создала сайт, но не знаю, как это осуществить....

    Ответить
  15. Аноним

    Уточните, пожалуйста, вопрос. Вы хотите сделать сайт по типу "вопрос-ответ"? Можете дать ссылку на подобный сайт. Если же речь идет об обычном сайте, то пользователе могут общаться в комментариях или заведите для этого форум.

    Ответить
  16. Анастасия

    Очень удобная шпаргалка, часто пользуюсь, вот опять попробовала кое - что применить в своем блоге: все получается и все понятно. Спасибо!

    Ответить
  17. Аноним

    Очень хорошо, что все подходит, потому что не все коды работают в разных блогах. А когда я решусь сделать всем по шпаргалке не известно. Почти все эти коды работают на Я.ru, blogspot, Li.ru, ЖЖ.
    Mail.ru и привет.ru не поддерживают вставку флэш-роликов.
    В блогах mail.ru цвет текста меняется с помощью тега font. Кнопку с выпадающим списком не сделаешь на привет.ru. Существуют и другие нюансы. Не хватает времени все описать.

    Ответить
  18. Каролина

    Замечательно, спсибо возьму себе кнопочку

    Ответить
  19. Sashik

    Спасибо большое!!!

    Ответить
  20. Рустам

    Отличная информация! будем применять.

    Ответить
  21. Наталия Маджик (Веста)

    Спасибо большое!!
    Скажите, а как в блоггере сдалать две вещи:
    1. Как вставить все вот эти кнопки для социальных сетей? Можно сделать пост об этом?
    2.Как сделать так, чтобы в комментах можно было бы посетителям писать друг другу *чтобы отвечала не только я, но и они друг другу?) Или это невозможно?
    3-И можно ли вот так сделать комменты, как у вас: в рамке с прокруткой? Можно ли в комменты на блоггере как-то вставить самйлы?

    Ответить
  22. Аноним

    1. про кнопки я уже писала в записи кнопки социальных закладок
    2. ни на одном блогспоте я такого не видела(
    3. Пишите большой комментарий, как вы написали мне и прокрутка сама появится 😉
    4. Про смайлы - вставляйте их как изображения, по умолчанию в блоггере они не установлены. Я бы посоветовала вам пользоваться программой для публикации записей в блог Microsoft Live, подробнее здесь Очень удобню для публикаций именно на блогспот, ЖЖ и wordpress. Здесь вы найдете и смайлы, и таблицы, и форматирование и многое другое

    Ответить
  23. Анонимный

    спасибо взяла кнопочку

    Ответить
  24. ольга ц

    стала вашим постоянным читателем. очень полезный, просто отличный блог!!!!! спасибо!!

    Ответить
  25. Аноним

    Спасибо за отзыв, мне очень приятно, что вам нравится мой блог.

    Ответить
  26. Наталья Алексеевна

    Спасибо, отличная информация!

    Ответить
  27. Таноя

    Я прошу прощения, но я нашла у вас небольшую неточность.

    Раздел "Окошко для вставки кода", пункт 1.

    У вас написано: "... где cols - ширина окошка в px...", но величина "cols" измеряется в знаках, а не пикселях.

    Ещё раз простите за вторжение.

    Ответить
  28. Анонимный

    спасибо

    Ответить
  29. Владимир

    Шикарный пост !!!!!

    Ответить
  30. Андреевич

    Спасибо большое... Себе установлю...

    Ответить
  31. Андреевич

    Спасибо...

    Ответить
  32. Екатерина Сахарова

    Спасибо, вне очень необходимо, но нужно время для применения в работе.

    Ответить
  33. РУБИ

    СПАСИБО

    Ответить
  34. Анонимный

    Отличная сборка тегов!!!!!!!!

    Ответить
  35. L.I.S.

    Спасибо! Вы умничка! Очень нужный,полезный,отличный блог!

    Ответить
  36. Анонимный

    спасибо!

    Ответить
  37. татуа

    Классно...

    Ответить
  38. Андреевич

    Просто замечательно...

    Ответить
  39. Андреевич

    Очень полезно и интересно..

    Ответить
  40. Андреевич

    Спасибо за классную вещь...

    Ответить
  41. Анонимный

    Я в восторге! Ведь получается! Благодарю!

    Ответить
  42. Анонимный

    Просто прекрасно! Взял шпаргалку.

    Ответить
  43. Carunars

    Спасибо!

    Ответить
  44. Andrey Mirlyan

    Спасибо большое нужная инфа.

    Ответить
  45. Анонимный

    Очень нужная и полезная информация!

    Ответить
  46. Валентина

    Большое спасибо вам! Очень интересно и нужная информация! Хочу добавить себе такую шпаргалку, это возможно?

    Ответить
  47. Аноним

    Валентина, если честно, то я не заинтересована в распространении своего контента. Буду рада лишний раз виеть вас у себя в гостях. Можете взять краткую шпаргалку, в ней вы найдете самые распространенные теги html.

    Ответить
  48. Асиля

    пару штучек закинула себе на блог))

    Ответить
  49. Виктор Молочков

    Отличный учебник,большой труд.Огромное Вам спасибо.Буду посещать.

    Ответить
  50. Другая

    у меня не получилось вставить кнопку на главную страницу блога. Вернее я ее вставила куда-то в середину HTML но не вижу ее. Что делать?

    Ответить
  51. Аноним

    Другая, опишите подробнее вашу проблему.

    Ответить
  52. Другая

    Я скопировала html код кнопки по Вашим инструкциям, но не нашла куда его вставить в HTML на основной странице блога.В некоторые иеста вставлять не получалось, система "ругалась" . Вставила куда попало, вроде приняло, но на странице кнопки нет. Потом я все удалила. Тех сло, до или после которых рекомендуют вставлять код кнопки не нашла

    Ответить
  53. Другая

    написала, ответа нет

    Ответить
  54. Аноним

    Другая, код не принимает система, так как вы вставляете его не в те места html, нарушая код. Не нужно редактировать код, в blogger-e специально разработана удобная вкладка "Дизайн". Вставьте свой код в новый Элемент страницы, гаджет HTML / Javascript. Переместите элемент при помощи мыщки в нужное место шаблона, сохраните изменения.

    P.S. В интернете я не круглосуточно. У меня, как у всех, есть работа и семья.

    Ответить
  55. Lidia Dodonova

    Спасибо,Mycrib! Вы разместили очень нужный и полезный материал! Очень хорошее дело!

    Ответить
  56. Анонимный

    Здравстуйте.Вы не могли бы еще написать html код всего вашего сайта?хочу Сделать подобный , но не могу найти еще кодов , для отдельных вещей.была бы книга или еще чего.Ну если что в саму шпору киньте...

    Ответить
  57. Аноним

    Вам шаблон что ли нужен? Не мудрите, сейчас сделать сайт или блог очень просто. Мой, например, на платформе blogger.com. И никаких html кодов не нужно. Зарегистрируйтесь, заведите блог, при желании можете прикрутить домен.

    Ответить
  58. Анонимный

    Спасибо!!Желаю творческих успехов!!!

    Ответить
  59. Анонимный

    Может не в тему, подскажите пожалуйста как добавить в динамический шаблон счетчик, например mail.ru, баннер и т.д. Сколько не ковыряюсь , ничего невыходит, просто на сайте не появляется и все, хотя вроде и правильно код добавляю, а может и нет :).....

    Ответить
  60. Аноним

    Не получится добавить ни счетчик, ни баннер (если это не google adsense), ни сторонний скрипт, ни другую примочку в блог, если вы используете динамический шаблон. Эта новинка еще не до конца доработана. Поддерживаются лишь некоторые гаджеты:
    1. Google Friend Connect (присоединиться к сайту)

    2. Архив блога

    3. Профиль автора

    4. Ярлыки

    5. Форма подписки

    6. Опрос

    7. Кнопка +1

    8. Значок Google

    9. Переводчик

    10. Блог list

    11. Список ссылок

    12. Список

    13. Показ слайдов

    14. Изображение

    Внимание! Не поддерживается гаджет HTML / JavaScript, с помощью которого возожно вставить статистику посещений.

    Ответить
  61. Borod

    Спасибо за ответ 🙂

    Ответить
  62. Ольга Ватутина

    Здравствуйте, Mycrib! Спасибо за шпаргалку HTML, Всего Вам хорошего!
    С уважением, О.В.

    Ответить
  63. Лариса

    HTML - серьёзная вещь, сложная. Но уроки ваши замечательные. Прочитала внимательно несколько раз, даже конспект сделала.)))
    Спасибо за доступный материал.

    Ответить
  64. Максим

    спасибо за статью, узнал для себя много нового!

    Ответить
  65. Шитикова Лидия Васильевна

    Огромное спасибо за кнопочки! Никогда не думала, что смогу это сделать. Но, благодаря Вам, - смогла!!! СПАСИБО!!!!!!!

    Ответить
  66. Лариса

    Поставила кнопочку на боковую панель. Теперь без проблем попадаю на ваш замечательный блог.

    Ответить
  67. Шитикова Лидия Васильевна

    Кнопка с выпадающим списком. А нельзя ли сделать так, чтобы ссылка открывалась в новом окне? Спасибо.

    Ответить
  68. Анонимный

    А почему нет смайлов?

    Ответить
  69. Аноним

    Евгений, а что - должны быть?

    Ответить
  70. Анонимный

    Их вставлять нужно самим

    Ответить
  71. Лидия Васильевна

    Ну как всё же можно выпадающий список открыть в новой вкладке? Или это невозможно? Простите, что я так настойчиво, но это важно) Спасибо.

    Ответить
  72. Аноним

    Лидия, нужно просто добавить атрибут target="_blank" к коду. А вот и сам код:

    <form action="http://freiman.info/files/link.php&quot; method="GET" target="_blank">

    <input name="h" type="hidden" value="_self">
    <select id="links" name="links"><option value="ССЫЛКА">НАЗВАНИЕ</option><option value="ССЫЛКА">НАЗВАНИЕ</option><option value="ССЫЛКА">НАЗВАНИЕ</option><option value="ССЫЛКА">НАЗВАНИЕ</option><option value="ССЫЛКА">НАЗВАНИЕ</option></select> <input type="submit" value="НАДПИСЬ НА КНОПКЕ"></form&gt

    Ответить
  73. Аноним

    Евгений, а вот вам шаргалка по смайлам:

    <img src="http://s107.ucoz.net/sm/2/wink.gif&quot; alt="">   😉
    <img src="http://s107.ucoz.net/sm/2/wacko.gif&quot; alt="">   %)
    <img src="http://s107.ucoz.net/sm/2/tongue.gif&quot; alt="">   :p
    <img src="http://s107.ucoz.net/sm/2/surprised.gif&quot; alt="">   😮
    <img src="http://s107.ucoz.net/sm/2/smile.gif&quot; alt="">   🙂
    <img src="http://s107.ucoz.net/sm/2/sad.gif&quot; alt="">   🙁
    <img src="http://s107.ucoz.net/sm/2/happy.gif&quot; alt="">   ^_^
    <img src="http://s107.ucoz.net/sm/2/cry.gif&quot; alt="">   :'(
    <img src="http://s107.ucoz.net/sm/2/cool.gif&quot; alt="">   B)
    <img src="http://s107.ucoz.net/sm/2/zorro.gif&quot; alt="">   :zorro:
    <img src="http://s107.ucoz.net/sm/2/yes.gif&quot; alt="">   кивание
    <img src="http://s107.ucoz.net/sm/2/yahoo.gif&quot; alt="">   ура
    <img src="http://s107.ucoz.net/sm/2/whistling.gif&quot; alt="">   пение
    <img src="http://s107.ucoz.net/sm/2/uhm.gif&quot; alt="">   вопрос
    <img src="http://s107.ucoz.net/sm/2/victory.gif&quot; alt="">   ухмылка

    Ответить
  74. Лидия Васильевна

    Спасибо, пойду исправлять)

    Ответить
  75. loyd

    Статья полезная 100%, хорошо что с примерами.Автор респект!)

    Ответить
  76. Роза Аэль

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

    Ответить
  77. Mycrib

    Роза, смотрите комментарий выше

    Ответить
  78. Роза Аэль

    Mycrib, больше спасибо, что направили! Но у меня не выходит, когда сохраняю код, атрибут target="_blank" у меня почему-то стирается т.т
    А делаю я все это в дневниках Я.ру Возможно там такая функция не поддерживается, хотя просто ссылки работают т_т

    Ответить
  79. Mycrib

    Роза, тестировала код именно на дневнике я.ру, и все работает. Даже не знаю, где у вас ошибка, напомню, что код вставляют в режиме html. Может, стоит попробовать вставить код в другом браузере..

    Ответить
  80. Роза Аэль

    Правда? Сейчас попробую. И, конечно, я вставляю код в HTML режиме.
    Я попробовала и через мазиллу и через хром и через оперу, так... стоп у меня есть идея...
    И правда! о_о
    Теперь сообщаю для тех, кто сталкивается с той же ошибкой, мало ли х) Не переходите в режим "с оформлением" сразу сохраняйте в HTML режиме иначе ничего не выйдет! Спасибо, что провозились со мной! *О*

    Ответить
  81. Mycrib

    Роза, я рада, что все получилось. И спасибо за совет другим читателям)

    Ответить
  82. Анонимный

    Хорошая шпаргалка. 🙂 Но та, что вы предлагаете для чужих блогов — плохая. 🙂 Я рипнул эту, вставил себе на комп и теперь всё всегда под рукой! 😀

    Ответить
  83. Аноним

    Могли бы и подписаться, ловить киберпреступника я не собираюсь 😀

    Ответить