Меню Сайта
Календарь
Наш опрос
Облако
Информер
Block title
Реклама::
Главная » 2012 » Февраль » 20 » учебник HTML кодов
0.07.06 AM
учебник HTML кодов

Оглавление

Просто нажмите на нужную тему и увидите полное сообщение
* Что можно на ЛиРу, что может ЛиРу? и * Памятка начинающему блоггеру
* КАК пользоваться ЛиРу? и * Что такое регистрация? и * Что такое авторизация?
* FAQ - Ответы на самые часто задаваемые вопросы
* Об аватарах в дневнике и * О рубриках (разделах) дневника и * О спецкодах
* Правила пользования сервисом дневников
* Что такое дневник? и * Что такое сообщение в дневнике?
Как добавить: * сообщение в дневник? и * картинку (фото), видео и музыку в сообщение?
* Оформление постов. Теги. Ответы на вопросы. и * Как сортировать посты дневника по рубрикам?
* Что такое сообщество? и * Список всех сообществ ЛиРу.
* Голосование и * Комментарии и * Эпиграф дневника и * ВСЁ о схемах на ЛиРу
* Как пользоваться настройками дневника?
* Как пользоваться разделом "Почтовые уведомления"?
* Как пользоваться спецкодами (ВВ-кодами) на ЛиРу?
* Что такое расширенный редактор? и * Как им пользоваться?
* ЛиРу - работа с простым редактором и * ЛиРу - работа в расширенном редакторе
* Программы для ведения дневников LiveInternet без захода в интернет
* Добавление записей в дневник через e-mail
* Краткий словарь начинающего лирушника и * Словарь блоггера
* Он-Лайн Генератор цветов и цветовых схем. и * Удобная палитра цвета
* Таблица 140 базовых цветов BgColor. и * Коды цвета для текстов и * Цветовая палитра на ЛиРу
* Коды оформления блога (тексты) и * Полезные штучки для блога
* Оформляем текст и картинки и * Шпаргалка цветных текстов
* Генератор ШрИфТы ОнЛаЙн и * Как сделать "радужный" текст?
* Сделать текст с прокруткой во флейме?
* Как сделать таблицы?
* Как вставить музыку в свое сообщение? и * Как вставить музыку в свой текст? Самый легкий способ!
* Как скачать музыку с ЛиРу? и * Более 50 сайтов, где можно скачать музыку бесплатно
* Как вставить в свой дневник видео с YouTube? и * 10 секретов Youtube
* Всё о видеороликах в интернете. и * Секреты встроенного проигрывателя YouTube
* Как вставить много картинок в сообщение? и * Как сделать пост с множеством картинок?
* Как делать великолепные фотоподборки? и * 99 сайтов фотографии
* Отличный сервис (замена фотошопу) и * Фотоэффекты без фотошопа
* Фотопосты с коллажами за 5 минут! и * Интересный сайт (надписи на фото)
* Супер-эффекты за секунду и * Генератор картинок (эффект воды)
* Как сделать фотоприкол ? и * Веселящие ссылки (смешные обработки фото).
* Поиграем в креатив:)
* Как сделать слайд-шоу?
* Как сделать кнопку-указатель для блога?
* Как сделать рамочку для текста самому? и * Рамочки для текстов
* Рамочки-1 и * Рамочки-2 и * Рамочки-3
* Рамочки с букетами-1 и * Рамочки с букетами-2 и * Рамочки с розочками-1 и * Рамочки с розочками-2 и * Рамочки с золотыми кружевами-1 и * Рамочки с золотыми кружевами-2
* Рамки для текстов в одной коробочке:) и * Блестяшки, фоны, рамочки для дневника
* Как сделать флэш-часы для блога? и * Часики под ваш блог. Бонус - часики-рыбки
* Суперчасики для блога и * Суперчасики для блога, часть 2
* Часики-натюрморты для дневника и * Часики-натюрморты-2
* Суперчасики с кодами! и * Часики-медальоны. Капельки.
* Музыкальные цветы-открытки и * Кнопка-плеер
* Поисковая машинка по бесплатным файлам mp3.
* Музыка из различных рекламных роликов (ссылки).
* О симпатиях и антипатиях
* О звёздах за количество написанных постов
* Скриншот, ссылка, симпатии...
* Как создать отдельный домен для дневника на Лиру?
* Как сменить Пароль или Почту? и * Как удалить дневник?
* Как узнать возможности вашего компьютера?
* Как узнать информацию о человеке, зная его IP ?
* 5000 аватарок!!! и * Анимированные аватары из советских мультиков (250 шт.)
* Как сделать анимированные аватары? и * Куколки, феи - идеальный аватар
* Аватары. [300 шт.] и * Авики: Девушки и Цветы. + Отличные схемы.
* Мои дизайны (аватары,эпиграф,схемы) и * Оригинальные схемы
* Цветочные схемы-1 и * Цветочные схемы-2 и * Схемы на черном фоне и "зелёные" схемы
* Осень! Новые схемы, аватары и * Красивые весенне-цветочные схемы
* 200 красивейших фонов (цветы, листья, шишки) и * 100 потрясающих цветочных фонов!
* Рисованные цветы (фоны) и * 95 шикарных абстрактных фонов
* Бесшовные фоны для дизайна дневников.
* Фоны на прозрачной основе. и * Шёлковые фоны и * Прозрачные бриллиантовые фоны
* Большие фоны-заставки
* Как писать тексты на цветных фонах?
* Фотошоп онлайн: 13 лучших фоторедакторов и * Бродилка по урокам фотошопа
* 33 полезные кнопочки и * Необычные поисковики и * 330 ссылок на бесплатные электронные библиотеки
* Интернет для детей. Энциклопедия ссылок. и * ВСЁ о вязании (ссылки и видеоуроки).
* Смайлики и * Говорящие смайлики)) и * Очередная порция забавных смайликов
* Смайлики "с добрым утром", о любви и подарках. и * Смайлики: праздники, подарки, день рождения.
* Красивые благодарности (смайлики "спасибо"). и * Смайлики-анимешки.
* Смайлики: собачки, щенки. и * Весёлый зоопарк (смайлики животных).
* Очень клевые смайлики с кодами!
* 130 любимых мультяшек (рисунки животных).
* Картинки-комментарии и * Картинки-комментарии с кодами и * Надписи-комментарии
* "Добро пожаловать" c кодом
* 120 разделителей для текстов с цветами и * Ваши любимые линеечки-разделители (155 шт.)
* Разделители - самая большая коллекция! Часть 1 и * Часть 2
* Разделители: золотые, серебряные, цветные и * Разделители: цветные и разноцветные.
* Осенние разделители. Большая коллекция!
* Эпиграфы для блога и * Эпиграфы [60 шт.] и аватары [100 шт.]
* Часики и украшения и * Часики-календарики с девушками
* Украшения для дневника и * Календари для вашего дневника
* Гиф-анимации для текстов и * Прикольные АНИМАШКИ (с кодом)
* Обои: цветы на деревьях и на воде.
* Новогодние рамки и разделители. и * Красивые новогодние постики (разделители текстов).
* Новогодние бесшовные фоны. и * Зимне-новогодние бесшовные фоны.
* Зимне-новогодние обои и фоны. Часть 1 * * Часть 2 * * Часть 3 * * Часть 4

15 самых популярных уроков, не вошедших в оглавление

Вначале - кратко о спецкодах и HTML-кодах. Спецкоды – слова, заключенные в квадратные или угловые скобки, которые помогают менять вид текста и делают много полезных вещей. Спецкоды в угловых скобках <> называются HTML- кодами. Их можно вводить "от руки" только в простом редакторе, в расширенном редакторе вместо них нужно пользоваться кнопками над текстом (как в Word). Если всё же хотите использовать и в расширенном - нажимайте кнопку Источник в левом верхнем углу.

Коды заключенные в квадратные скобки - не являются универсальными, они называются BB-кодами, так как происходят из форумов. Их можно использовать и в простом и в расширенном редакторе. Если в BB-коде используется ссылка (код FLASH, например), то надо следить, чтобы расширенный редактор не "подчеркнул" ее, а у простого редактора убрать внизу галочку "Автоматическое распознавание ссылок", иначе код может не сработать правильно. Для удобства использования некоторых BB-кодов в простом редакторе можно активизировать панель спец-кодов.


[size=+2]Теги, применяемые на ЛиРу[/size]
Тег - это элемент языка разметки гипертекста (например в HTML), применяется в основном для задания того, как будет отображаться текст.
* Дополнительные спецсимволы HTML (редко используемые буквы и знаки)
[size=+1]1. Как выделить текст?[/size]

Полужирный текст
Выделение текста курсивом
Подчёркнутый текст
Зачёркнутый текст
Текст, имитирующий стиль печатной машинки
Выделение цитат курсивом
Создание нового параграфа
Горизонтальная разделительная линия (половинка) _________________________
Горизонтальная разделительная линия (полная) _________________________________________________________________________________________
Перенос строки (если двойная - абзац)

Заголовок

(h1 .. h6 - возможные заголовки. Чем больше число, тем меньше заголовок)

[size=+1]2. Как изменить размер текста?[/size]

маленький текст маленький текст
Уменьшить текст текст - 2
Увеличить текст+1: текст + 1
Увеличить текст+2: текст + 2
Увеличить текст+3: текст + 3

[size=+1]3. Как разместить текст (картинку) на странице и делать отступы?[/size]

Текст с выравниванием с левого края
Текст с выравниванием с правого края
текст с правого краю
в две строчки с выравниванием слева


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

Текст будет по центру

Выравнивание картинки к одной из сторон документа. Вместо "name" - адрес картинки, вместо "?" - значения: left, right, center, bottom, top, middle.
Текст для цитат - отделен пустой строкой и отступ слева в 8 пробелов

Предложение с отступом в абзаце. Как в книжках.


Как сделать, чтобы текст «обтекал» картинку?
Например, картинка слева, текст справа: добавляем в код картинки: align=left hspace=20
Код картинки примет вид:
Помни: align=left – картинка слева, текст справа
align=right - картинка справа, текст слева
hspace=20 - расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 - расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):


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

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

[size=+1]4. Как окрасить текст в разные цвета?[/size]

КРАСНЫЙ: красный текст
Ало-КРАСНЫЙ: ало-красный текст
ЖЕЛТЫЙ: желтый текст
ФИОЛЕТОВЫЙ: фиолетовый текст
ЗЕЛЕНЫЙ: зеленый текст
Светло-ЗЕЛЕНЫЙ: светло-зеленый текст
КОРИЧНЕВЫЙ: коричневый текст
Ярко-КОРИЧНЕВЫЙ: ярко-коричневый текст
ГОЛУБОЙ: голубой текст
Светло-ГОЛУБОЙ: светло-голубой текст
СИНИЙ: синий текст
ФУКСИЯ: фуксия текст
ОРАНЖЕВЫЙ: оранжевый текст

Также: black,white,rose,violet,vinous,gold,silver,bronze,platinum и т.д. (черный, белый, розовый, фиолетовый, бордовый, золотой, серебряный, бронзовый, платиновый).

* Коды цвета для текстов
* Посмотреть сочетаемость цветов
* Таблица "безопасных" цветов
* Все цвета Интернета

Вид шрифта:
Шрифт этого текста "Monotype Corsiva"

Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
Шрифт этого текста "Monotype Corsiva"
код этого текста:


[size=+1]5. Как сделать бегущую строку?[/size]

Бегущая влево строка бегущая влево
Бегущая вправо строкабегущая вправо
Бегущая от края к краю строкабегущая от края к краю

[size=+1]6. Как сделать бегущую картинку?[/size]

 (123x73, 4Kb) (123x73, 12Kb) (123x73, 4Kb)

<marquee><img src="адрес картинки"></marquee> - Просто вставьте между кавычками ссылку вашей картинки (http:// и т.д.)


[size=+1]7. Как сделать скользящий (со скроллом) текст?[/size]

Скользящий вверх текст
Скролящийся вверх
текст с полезной
информацией,
картинкой или ещё с чем-нибудь
Скользящий вниз текст
картинкой или ещё чем-нибудь
информацией,
текст с полезной
Скролящийся вниз


[size=+1]8. Как сделать списки и сноски?[/size]

Список c жирная точка спереди 
Список сформируется автоматически, если добавить
  1. Первый пункт текста
  2. Второй пункт текста
Сноска сверху
ТЕКСТ сноска
Сноска снизу
ТЕКСТ сноска

[size=+1]9. Как сохранить текст таким, как вы написали?[/size]

"Закрепитель": текст остается таким, каким вы его пишете  
Однажды 
в студеную зимнюю пору
я из лесу вышел...

[size=+1]10. Как сделать всплывающую подсказку?[/size]

Текст со всплывающей подсказкой 
Текст со всплывающей подсказкой - наведите мышкой на это предложение, подсказка всплывет

[size=+1]11. Как дать ссылку на свой дневник или любой адрес?[/size]

Если хотите дать ссылку на свой дневник (например, на наше сообщество), то пишете:
и получится так:Только для женщин

Точно также можно дать ссылку на фото, картинку или видео.
Чтобы картинка была ссылкой на веб-страницу (см. баннер "Только для мужчин" ниже, в п.15):


[size=+1]12. Как скрыть часть текста (убрать под кат) ?[/size]

Если у вас большой пост или много фоток в посте, лучше убрать часть его под кат, потому что людям это неудобно смотреть. Если написать [*more] - и вставить такой тег в сообщение, то на этом месте оно оборвется и появится ссылка "Читать далее", которая будет вести на комментарии к сообщению и полному тексту записи. Очень нужно ставить такой тег перед видео, флеш-роликами, большими картинками или серией картинок, экономя трафик и ускоряя загрузку страницы своего дневника.

[*more=Нажмите, чтобы увидеть картинки] - так можно заменить текст "Читать далее" на свой. После more= можно писать что угодно, например, [*more=смотри полностью] или [*more=фотки тут].

[*/more] - а вот так надо обозначать окончание скрываемой части страницы и продолжить текст.

[size=+1]13. Как сделать простые рамки?[/size]

Текст в такой рамке

Текст в такой рамке

Если хотите цветную рамку, добавьте в код картинки:
- задана красная рамка толщиной 5 пикселей.

Ваш текст в такой рамке (UPD)
только убираете звездочки. Width - ширина рамки, height - её высота. Background-color - цвет подложки в рамке.

То же самое, но в цвете:



[size=+1]14. Как поставить картинку в эпиграф дневника?[/size]

1. Выкладываете вашу картинку фото) в свой дневник (черновик);
2. Копируете её адрес (URL).
3. Прописываете в эпиграфе (настройки дневника) адрес вот так: [*img]Адрес картинки[/img].
или так: <*img src="адрес картинки" />, где "адрес картинки" - полный адрес (http:// и т.д.)">

[size=+1]15. Как сделать баннер?[/size]

Слева - пример готового баннера.   Вот код этого баннера, будем благодарны, если установите у себя в дневнике (например, в приложении "Всегда по рукой", как у нас в блоге):
Баннеры - это небольшие картинки, которые обычно рекламируют какой-либо веб-сайт. Небольшие баннеры - кнопки сайта, также часто используют для обмена с дружескими сайтами. Можно нарезать заготовки для баннеров из разных красивых картинок, а затем нанести на них вашу информацию.

Для создания баннера необходимо:
  • 1. <*a href="адрес ссылки">Имя ссылки<*/a>, вместо "адрес ссылки" - прописать адрес дневника, на который ссылаетесь (http:// и т.д.)

  • 2. <*img src="адрес картинки">, вместо "адрес картинки" - прописать её адрес в интернете (http:// и т.д.)

  • 3. Объединить два первых пункта:<*a href="адрес ссылки"><*img src="адрес картинки"><*/a>

Не забудьте, что перед публикацией символ "*" (звёздочка) надо везде удалить!

В интернете много разных готовых баннеров. К примеру, можно посмотреть и выбрать Здесь


Чтобы ваш баннер заработал - необходимо:

1. Изменить Текстовый редактор с простого на расширенный.
2. В панели редактора нажать кнопку "Источник" вставить код баннера, затем снова нажать на кнопку "Источник".
3. Отредактировать баннер и сохранить настройки.

Как сделать окошечко для баннеров (Html-кодов)?

Чтобы ваш Html-код не переводился в картинку, нужно поместить его в специальное окошечко UPD (см. выше - п.13). Также такое окошко удобно использовать для размещения длинных текстов. чтобы читатель мог сам прокручивать во флейме.

Вот это окошко:
<*textarea>ВАШ ТЕКСТ (который будет будет в окошечке) </textarea>
Код этой цветной кнопки:
Учебник регулярно обновляется (дата обновления указана красным в начале поста). Для тех, кто установил кнопочку "Учебник Li.Ru" - свежая версия всегда под рукой!
P.S. Если возникнут вопросы и пожелания - пишите здесь в комментариях или ко мне в личку.
Просмотров: 1479 | Добавил: Рома
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Онлайн
Радио
Статистика
Время
кнопка
шаблоны для ucoz ucoz шаблоны, ucoz шаблоны, cs шаблон и скрип


Сделать бесплатный сайт с uCoz