Портянка Готовых Тегов и Стилей
- Без тегов и стилей сайт не построишь. Но чтобы Раскрутка Сайтов была эффективной, лучше послушать мудрые советы. Кликните по верхней ссылке, чтобы попасть на форум поисковой оптимизации и узнать что-то новенькое!
Честно говоря, я в html-верстке соображаю не очень. Для меня, как законченного гуманитария, все эти br и css не являются самыми близкими друзьями. У меня с тегами чисто деловые, официальные отношения. Понятно, что контент-менеджеру и копирайтеру без знаний основ html работать нельзя. Но старые добрые буквы и абзацы мне всегда будут ближе и милее :).
Так что в случае каких-либо затруднений с размещением на сайте, я всегда лезу в Гугл и ищу простые решения. Типа, вставил готовые теги и полный порядок! Когда я смотрю на работу нашего html-верстальщика, который программирует быстрее, чем говорит, у меня это всегда вызывает дрожь восхищения.
Поняв, что рожденный ползать летать не сможет :), я оставил свои попытки переплюнуть Билла Гейтса. И пользуюсь теперь одной офигенной заготовочкой , которую нарыл на форуме gamedev.ru. Выбрал все, на мой взгляд интересные, скомпоновал и теперь выкладываю на своем блоге. Возможно, эта заготовка стилей и тегов пригодится и другим блоггерам. Итак, встречайте — набор основных тегов тегов и стилей на каждый день! 🙂
Теги шрифтов
[b]...[/b] |
Жирный
текст |
или ..., ... |
[i]...[/i] |
курсив |
или ... |
...
|
Надчеркнутый |
Черта над текстом |
[u]...[/u] |
Подчеркнутый |
или ... |
[s]...[/s] |
Зачеркнутый |
или |
[u] |
Не то
написал |
можно объединять |
... |
Моноширинный |
Стиль пишущей машинки |
... |
43=64 |
Надстрочный |
... |
Н2SO4 |
Подстрочный |
... |
Мелкий |
Мелкий шрифт |
[offtop]...[/offtop] |
Вне темы
|
Оффтоп |
|
Заголовок
размера 1 |
Заголовок статьи |
|
Заголовок
размера 4 |
от |
|
Шрифт
размером 1 пункт |
Размер шрифта в п.(1 - 4) |
|
Шрифт размером 15 пиксел |
Размер шрифта в пикселах |
|
Курсив |
normal (обычный) italic (курсив) oblique (наклонный) |
|
Текст стилем |
bold (жирный) bolder (жирнее) lighter (тоньше) |
|
Текстшрифтом размера xx-large |
xx-small x-small small (мелкий) medium (средний) large (крупный) x-large (крупнее) xx-large (Крупный) larger(крупнее) smaller (мельче). |
|
Текст написан шрифтом Times New Roman |
Задает шрифт |
|
Выделение
текста цветом |
16-тиричные константы цвета |
|
Цвет
задан константой |
Константы цвета |
|
Цвет задан
моделью rgb |
Соотношения |
Еще стили и теги под шрифты
...
|
Текст с тенью |
Не работает в IE |
...
|
Мигающий текст |
Не работает в IE |
... ... |
Цветной!
Цветной! |
Не работает в IE |
...
|
Текст под углом |
90 гр. Работает только в IE |
... |
Вычурный |
size="+1", size="-1" размера шрифта |
...
|
Неправильно |
Синий текст зачеркнут красным |
...
|
Важно |
Синий текст подчеркнут красным |
...
|
Текст подчеркнутый |
Красный пунктир |
...
|
Текст,
подчеркнутый точками |
Зеленое подчеркивание. |
...
|
Обратите
внимание |
Двойная черта. |
...
|
Спойлерный текст |
Проявление текста при его выделении. |
|
|
Невидимый текст. |
|
| Можно |
При наведении курсора. Не работает в IE. |
|
... ... |
В некотором
царстве… |
Буквица. |
Линии, абзацы…
|
|
Перевод строки |
|
|
|
|
Горизонтальная линия |
|
|
|
Цветная горизонтальная линия |
|
|
|
Цветная прерывистая горизонтальная линия |
|
|
|
Цветная прерывистая горизонтальная линия |
... |
текст |
Предварительно отформатированный текст. |
|
абзац |
Поддерживаются стили абзаца |
|
стиль абзаца |
Заданный стиль применяется для всего абзаца |
[p align=left] |
выравнивание абзаца
по левому краю |
форматирование текста |
[p align=right] |
выравнивание абзаца
по правому краю |
форматирование текста |
[p align=center] |
выравнивание абзаца
по центру |
форматирование текста |
|
|
отступ |
Жестко заданный отступ красной строки |
|
|
|
Работают отрицательные значения |
|
текст |
Увеличенное межбуквенное расстояние |
...
|
Уменьшенное
межстрочное расстояние |
Уменьшенное межстрочное расстояние |
|
Расстояние между словами |
Увеличенное расстояние между словами |
|
Расстояние между словами |
Уменьшенное расстояние между словами |
|
блок
|
Поддерживаются стили |
|
стиль блока |
Заданный стиль применяется для всего блока |
==...==, ===...=== |
Разбивка на главы |
С автоматической генерацией содержания |
Всякие рамочки
>... |
>Как в Фидо |
Не работают другие теги внутри цитаты. |
||
[quote]...[/quote] |
Через тег quote
|
Поддерживаются теги и вложенное цитирование. |
||
[quote]...[quote]...[/quote][/quote] |
цитируемый текст
|
цитирование цитирования. |
||
... |
|
Поддерживаются теги и вложенное цитирование. |
||
|
Текст сообщения
|
Выделение цветом фона. |
||
|
|
Выделение цветом фона с помощью таблицы. |
||
...
|
Цветной текст с цветным фоном |
Заготовка |
||
|
обводка сообщения рамкой
|
Типы рамок: dotted, outset, dashed, solid, inset, ridge, groove, dooble. |
||
|
с параметрами
|
|
||
...
|
Синий текст
в красной рамке |
Заготовка. |
||
...
|
Что-то написано |
Заготовка. |
||
...
|
Пунктирная рамка |
Заготовка. |
||
...
|
Текст в
двойной рамке |
Заготовка. |
||
...
|
Цветной текст
в двойной цветной рамке |
Заготовка. |
||
|
Тут пишем текст
|
Заготовка. |
||
...
|
В цветной
3D-рамке |
Вот в заключении и опробую свои заготовки на постовых. Попробую заключить этот вкусный постовой в рамочку:
Как видите. все получилось! 🙂
Работа для авторов и вебмастеров на бирже фриланса KworkУмеешь писать и хочешь зарабатывать on-line? Регистрируйся на Copylancer, пиши на
Интересненько, особенно для чайников вроде меня. Сейчас просто в закладки Мазиллы поставлю этот пост, чтобы всегда под рукой были линии, абзацы, рамочки…
Мне всегда хотелось освоить эту премудрость, но времени не хватает катастрофически. А тут такая шпаргалка! Спасибо!!!
Татьяна, а я не пожалел времени и скомпоновал все это на своем блоге. Честно говоря, чтобы самому не лазить по этим закладкам :). Вечно я их забываю!
Мда… И вправду не хило! Даже меня как верстальщика с серьезным стажем такая подборочка впечатлила 🙂 Ну, а если все же появится желание таки выучить далеко не такое большое количество тегов html, то однозначно посоветую вам htmlbook.ru. Не только теги выучить можно, но и верстать с нуля научиться. Один из самых полезных ресурсов на эту тему в Рунете вообще, по сути заменяет любую современную книгу по html/css/js
Хех, спасибо за наводочку, дружище! И кстати за все развернутые комменты. Пойду таперича и у тебя полазаю хорошенько 🙂
О, это просто супер! Спасибо огромное за такую подборочку!
Пожалуйста! приятно, что труд был не напрасен! 🙂
Мигающий текст — это что-то новое!
По правде, найти такое, как вы говорите, простое решение, несложной проблемы — способны далеко не все блоггеры 🙂
Супер! Многих тегов не знал и не догадывался об их существовании. Буду время от времени забегать на эту страничку. Отличнейшая шпаргалка!
Это всё, конечно, хорошо, и главное, очень похвально, что Вы не поленились и собрали всё в одном месте. Но единственное: стили всё же лучше через css делать.
Adiko, полностью согласен. Если хорошо знаешь css :). Я выложил специально для себя и таких же олухов 🙂
Тег это для просто жирного выделения. Важные участки лучше выделять с помощью
Писать стили в самих тегах тоже не рекомендую, это превратит ваш html документ в помойку, в которой потом тяжело будет разобраться.
Лучше добавлять class=»имя» или id=»имя», а стили записать в отдельном файле.
Тогда правка будет занимать секунды для всего документа.
Это также относиться для div и span.
Автор порезало все html теги.
Вначале были b и strong
Кладезь! Все в одном.
Получайте свое дофоллоу 🙂
Ага очень удобно, когда сразу все здесь. В закладки поставлю)))
Спасибо, очень пригодилось +100500… ))))))