Шпаргалка HTML

Обновлено: 11 февраля 2021Опубликовано
<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 - размеры флэш (можно менять)

Posted in HTMLПомеченные
Опубликовано Иванова Наталья

83 ответа к «Шпаргалка HTML»

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

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

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

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

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

    Ответить

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

    Ответить

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

    Ответить

  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, с помощью которого возожно вставить статистику посещений.

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

  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="">   ухмылка

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

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

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован.