Русская рыба 2.0

Категория: 
Участвую в конкурсе: 

Русская рыба 2.0 (версия 0.42)

H1 - Заголовок 1-го уровня, самый главный заголовок текущей страницы или статьи

Эта страница является расширенной русскоязычной версией текстовой рыбы «Sed scelerisque sagittis lorem»

H2 - Заголовок 2-го уровня. Все заголовки в примерах следует делать в несколько строк, чтобы правильно подобрать междустрочный интервал.

Помните, что заголовки тоже бывают ссылками и их можно по особенному оформлять.

H3 - Заголовок 3-го уровня. При подборе шрифтов для заголовков рекомендуется использовать один - два шрифта. Не более!

Если заголовок является ссылкой помните о изменении внешнего вида при наведении курсора: A:hover и после посещения A:visited ссылки.

H4 - Заголовок 4-го уровня. Помните о новых, незаезженных шрифтах добавленных в Vista.

Текс можно и нужно оформлять по максимуму. Можно сделать все буквы ЗАГЛАВНЫМИ, можно менять интервалы между словами и даже буквами.

H5 - Заголовок 5-го уровня. Помните что в css можно настраивать расстояние между словами и даже буквами. Используйте это, и ваши сайты будут выглядеть лучше.

Для визуальной настройки таблицы стилей можно использовать Firebug или визуальный css редактор Stylizer :)

H6 - самый маленький заголовок. Помните о том что все буквы можно преобразовать в заглавные или строчные.

 Наиболее популярные HTML теги:

 Ссылка

Помните о том, что неопытный пользователь должен по одному виду (не наводя курсор мыши) безошибочно отличать ссылки от прочего текста. У правильных ссылок внешний вид меняется при наведении курсора мыши A:hover { описание класса } и после посещения A:visited { описание класса } ссылки. Посещенные ссылки желательно делать более блеклыми, чем не посещенные.

  AJAX и JavaScript ссылки

Неплохие фото в подписи

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

 Акроним, аббревиатура - При наведении на них курсор должен принимать форму вопроса. Помните о том, что IE до 8-й версии не понимает аббревиатур.

Тег <cite> - Классическая цитата. Этот тег можно использовать для создания врезок.

Врезки это блок с короткой фразой иллюстрирующей основные (самые яркие) мысли текста. Для примера откройте любой бумажный журнал. Там этих врезок - охрененное огромное количество. Врезки можно и нужно использовать для поисковой оптимизации, помещая туда SEO - фразы.

Улучшить дизайн сайта за 30 мин. - реально! (пример цитаты)

Тег <blockquote> - длинная цитата. Этот тег активно используется в форумах, блогах и любых других обсуждениях.

Тег <Q> короткая цитата в тексте обычно заключенная в кавычки (с кавычками проблемы в IE).

Тег <PRE> определяет блок предварительно форматированного текста. Например стихов:

Красивые красные штуки
Придумал себе дизайнер
А чтоб они краше были
Покрасил, их жёлтым и синим

Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Код можно автоматически раскрашивать через модули для CMS или яваскрипт. Пользуйтесь этим.

Код программы

function checkParent (src, dest) {while (src != null) {if (src.tagName == dest) return src src = src.parentElement} return null}

Списки стоит активно использовать не только для перечисления чего - либо, но и в качестве выразительного средства типографики, облегчающего чтение с экрана и разбивающего монотонность текста.

  • Маркированный список: Пункт 01
  • Помните, что вид макреров можно менять через css
    • Вложенный список: В качестве маркеров можно использовать картинки если задать их через css
      • Еще один вложенный список
      • Пункт 02
      • Пункт 03
    • Пункт 01
    • Пункт 02
    • Пункт 03
  • Пункт 01
  • Пункт 02

 

  1. Нумерованный список: Пункт 01
  2. Помните, что для нумерации можно использовать не только арабские цифры
  3. Пункт 03
    • Вложенный маркированный список: Подпункт 03-01
    • Подпункт 03-02
      1. Опять вложенный нумерованный список: Подпункт 3-го уровня
      2. Подпункт 3-го уровня
    • Подпункт 03-03
    • Подпункт 03-04
  4. Пункт 04
  5. Пункт 05

 

Тег <u> - подчеркнутый текст.

Это чисто презентационный элемент, который все и всегда путают со ссылками и пытаются нажать. Подчеркнутый текст - ЗЛО! Использующие его будут гореть в аду :( А мы просто заменим подчеркивание чем-то еще (или отключим его нафиг).

Теги Тег <b>: старожирный текст Тег <strong>: жирный текст.  Помните о том что жирность текста тоже можно настраивать.

Тег <em>: курсивТег <i>: наклонный текст. Иногда для наклонного текста можно использовать другой, более симпатичный шрифт.

Тег <strike>: зачеркнуто Тег <del>:текст, который удален

Эти теги хорошо использовать для обозначения старых цен и неправильных ошибочных высказываний.

Тег <big>: как бы, большой текст

Тег <small>: как бы, маленький текст. Помните о том что этот тег тоже можно переопределить (поменять шрифт, размер, цвет и т.д.) через css

Отдельные классы оформления для:

Адреса компании оформляются css классом .address  или HTML тегом <address>:

Наш адрес: Ул. Жуковская 123
Дом № 65 квартира 48.

Основной телефон фирмы оформляем css классом  .phone

Наш телефон: 214-22-13

Стандартные цены на услуги частенько встречаются на многих сайтах, мы оформим их через css класс .price

Наши цены от 243р.

Оформление таблиц

Т.к. таблицы все еще активно используются для верстки, для таблицы которая должна выглядеть именно таблицей с ячейками и границами (к примеру прайс - лист) был введен отдельный класс  .table

Заголовок таблицы тег <caption>
Заголовок <thead> <th> 05 Верх таблицы тег <thead> thead td
tfoot th 500 Низ таблицы тег <tfoot> tfoot td
tbody <th>   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td

Подпись к фотографии

Для вдохновения в работе:

10 способов оформления текста

 http://www.dserg.com/10-text-decoration-2007-04-23.html

 

Post new comment

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

Comments

Аватар пользователя admin
admin
пт, 09/10/2020 - 21:37
#92

#91 афафафапрр

Аватар пользователя admin
admin
пн, 28/09/2020 - 16:01
#90

#14 Тестирую комментарии

Аватар пользователя admin45
admin45
вт, 21/10/2014 - 14:17
#87

#9 Нихрена себе это что за чудо!!!

Аватар пользователя admin434
admin434
вс, 21/09/2014 - 13:55
#86

#1.1.1.1 ммямямям

Аватар пользователя hfhfврврв1
hfhfврврв1
вт, 01/07/2014 - 22:04
#77

пыпф afa hhhh порпор

------- comment titled:'пыпф afa hhhh порпор' was added on вт,
01/07/2014 - 22:11 -------

пыпф afa hhhh порпор

------- comment titled:'пыпф afa hhhh порпор' was added on вт,
01/07/2014 - 22:12 -------

пыпф afa hhhh порпор

------- comment titled:'пыпф afa hhhh порпор' was added on вт,
01/07/2014 - 22:12 -------

пыпф afa hhhh порпор

------- Комментарий titled:'пыпф afa hhhh порпор' был
добавлен вт, 01/07/2014 - 22:18 -------

пыпф afa hhhh порпор

------- Комментарий titled:'1йфя' был добавлен вт,
01/07/2014 - 22:24 -------

1йфя

------- Комментарий titled:'1йфя' был добавлен вт,
01/07/2014 - 22:25 -------

1йфя

Аватар пользователя Нито
Нито
пт, 20/06/2014 - 21:04
#69

фадаофа falfjafфадфаоф ф

Аватар пользователя проходящий мимо
проходящий мимо
пт, 20/06/2014 - 08:25
#68

#2 ужин км по лом по от р

Аватар пользователя admin
admin
пт, 20/06/2014 - 01:13
#67

gaggggggggggggggggggggggggggggggggr rrrrrrrrrrrrrrrrrrr

Аватар пользователя admin
admin
пт, 20/06/2014 - 01:13
#66

gaggggggggggggggggggggggggggggggggr rrrrrrrrrrrrrrrrrrr

Аватар пользователя admin
admin
пт, 20/06/2014 - 01:13
#65

gaggggggggggggggggggggggggggggggggr rrrrrrrrrrrrrrrrrrr

Аватар пользователя admin
admin
пт, 20/06/2014 - 01:13
#64

ggggggggggg ааааааааааааа wwwwwwwwwwwwww

Аватар пользователя проходящий мимо
проходящий мимо
пт, 20/06/2014 - 01:05
#62

Ном по лом по дос под вид для того и пою

Аватар пользователя проходящий мимо
проходящий мимо
пт, 20/06/2014 - 01:05
#61

Ном по лом по дос под вид для того и пою

Аватар пользователя gsgsgr556
gsgsgr556
чт, 19/06/2014 - 17:48
#60

Его отвлекаю этот период он в

Аватар пользователя 30 мин работы для флешера
30 мин работы д...
чт, 19/06/2014 - 17:47
#59

Англ о андроид о до Им по жизни ти СНГ от творог люби и

Аватар пользователя Владимир Ситников
Владимир Ситников
пн, 02/06/2014 - 15:36
#55

hkhkhjkhhkjhkhk bnmbmnb

Аватар пользователя Владимир Ситников
Владимир Ситников
пн, 02/06/2014 - 14:55
#47

ljljpiuoiuoij
kmkm

Аватар пользователя Владимир Ситников
Владимир Ситников
пн, 02/06/2014 - 14:52
#45

лошг8г98-09ш

Аватар пользователя Владимир Ситников
Владимир Ситников
пн, 02/06/2014 - 14:51
#44

ljlljljljlky98y98u

Аватар пользователя Владимир Ситников
Владимир Ситников
пн, 02/06/2014 - 14:36
#41

bgxvxv
bx
bx
bx
b

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:39
#33

@#0 @#0 #1.1

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:38
#32

@#0 #1.1

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:35
#31

#1.1

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:33
#30

#9 аофжа фафжаф

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:32
#29

#12 #5

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:20
#27

#1.2 #3.1.1 [quote=admin reply=77/5]<p>Тестовый коммент 2 и еще один коммент</p>[/quote]

Аватар пользователя николай
николай
пн, 02/06/2014 - 12:14
#26

[quote=admin reply=77/5]<p>Тестовый коммент 2 и еще один коммент</p>[/quote]

Аватар пользователя проходящий мимо
проходящий мимо
пн, 02/06/2014 - 12:02
#24

#1.1.1

Аватар пользователя анонимчкик я
анонимчкик я
чт, 29/05/2014 - 01:26
#11

Тест анонимчика

Аватар пользователя Это мое имя
Это мое имя
чт, 29/05/2014 - 01:24
#8.1.1

Тестирую вывод имени пользователя...

Аватар пользователя анонимчик это я
анонимчик это я
чт, 29/05/2014 - 01:23
#8.1

И что теперь? Где кто?

Аватар пользователя admin
admin
ср, 30/10/2013 - 21:31
#5.1

Тестовый комментарий в кноце

Аватар пользователя admin
admin
ср, 30/10/2013 - 21:00
#7

Тестовый аякс коммент 2

Аватар пользователя Аноним
Аноним
пн, 29/07/2013 - 22:17
#6

Тестовый комментарий от анонима!!!

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:42
#5

Тестовый аякс коммент

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:32
#4

Аякс коммент старая версия и теперь новая!!!

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:19
#3

Добаляю коммент на аяксе

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:19
#1.1.1.3

Ответ на тестовый комментарий на аяксе 2-го уровня.

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:05
#1.1.1.1.2.1

Комментарий 3-го уровня Комментарий 3-го уровня Комментарий 3-го уровня Комментарий 3-го уровня

Аватар пользователя admin
admin
пн, 29/07/2013 - 15:04
#1.1.1.1.2

Комментарий 2-го уровня Комментарий 2-го уровня Комментарий 2-го уровня

Аватар пользователя admin
admin
ср, 12/06/2013 - 12:03
#1.1.1.1

Тестовый коммент 2 и еще один коммент

Аватар пользователя admin
admin
вс, 14/04/2013 - 18:37
#1.1

Русская рыба 2.0 (версия 0.4)

H1 - Заголовок 1-го уровня, самый главный заголовок текущей страницы или статьи

Эта страница является расширенной русскоязычной версией текстовой рыбы «Sed scelerisque sagittis lorem»

H2 - Заголовок 2-го уровня. Все заголовки в примерах следует делать в несколько строк, чтобы правильно подобрать междустрочный интервал.

Помните, что заголовки тоже бывают ссылками и их можно по особенному оформлять.

H3 - Заголовок 3-го уровня. При подборе шрифтов для заголовков рекомендуется использовать один - два шрифта. Не более!

Если заголовок является ссылкой помните о изменении внешнего вида при наведении курсора: A:hover и после посещения A:visited ссылки.

H4 - Заголовок 4-го уровня. Помните о новых, незаезженных шрифтах добавленных в Vista.

Текс можно и нужно оформлять по максимуму. Можно сделать все буквы ЗАГЛАВНЫМИ, можно менять интервалы между словами и даже буквами.

H5 - Заголовок 5-го уровня. Помните что в css можно настраивать расстояние между словами и даже буквами. Используйте это, и ваши сайты будут выглядеть лучше.

Для визуальной настройки таблицы стилей можно использовать Firebug или визуальный css редактор Stylizer :)

H6 - самый маленький заголовок. Помните о том что все буквы можно преобразовать в заглавные или строчные.

 Наиболее популярные HTML теги:

 Ссылка

Помните о том, что неопытный пользователь должен по одному виду (не наводя курсор мыши) безошибочно отличать ссылки от прочего текста. У правильных ссылок внешний вид меняется при наведении курсора мыши A:hover { описание класса } и после посещения A:visited { описание класса } ссылки. Посещенные ссылки желательно делать более блеклыми, чем не посещенные.

Аватар пользователя admin
admin
вс, 14/04/2013 - 18:35
#1

Русская рыба 2.0 (версия 0.4)

H1 - Заголовок 1-го уровня, самый главный заголовок текущей страницы или статьи

Эта страница является расширенной русскоязычной версией текстовой рыбы «Sed scelerisque sagittis lorem»

H2 - Заголовок 2-го уровня. Все заголовки в примерах следует делать в несколько строк, чтобы правильно подобрать междустрочный интервал.

Помните, что заголовки тоже бывают ссылками и их можно по особенному оформлять.

H3 - Заголовок 3-го уровня. При подборе шрифтов для заголовков рекомендуется использовать один - два шрифта. Не более!

Если заголовок является ссылкой помните о изменении внешнего вида при наведении курсора: A:hover и после посещения A:visited ссылки.

H4 - Заголовок 4-го уровня. Помните о новых, незаезженных шрифтах добавленных в Vista.

Текс можно и нужно оформлять по максимуму. Можно сделать все буквы ЗАГЛАВНЫМИ, можно менять интервалы между словами и даже буквами.

H5 - Заголовок 5-го уровня. Помните что в css можно настраивать расстояние между словами и даже буквами. Используйте это, и ваши сайты будут выглядеть лучше.

Для визуальной настройки таблицы стилей можно использовать Firebug или визуальный css редактор Stylizer :)

H6 - самый маленький заголовок. Помните о том что все буквы можно преобразовать в заглавные или строчные.

 Наиболее популярные HTML теги:

 Ссылка

Помните о том, что неопытный пользователь должен по одному виду (не наводя курсор мыши) безошибочно отличать ссылки от прочего текста. У правильных ссылок внешний вид меняется при наведении курсора мыши A:hover { описание класса } и после посещения A:visited { описание класса } ссылки. Посещенные ссылки желательно делать более блеклыми, чем не посещенные.

  AJAX и JavaScript ссылки

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

 Акроним, аббревиатура - При наведении на них курсор должен принимать форму вопроса. Помните о том, что IE до 8-й версии не понимает аббревиатур.

Тег <cite> - Классическая цитата. Этот тег можно использовать для создания врезок.

Врезки это блок с короткой фразой иллюстрирующей основные (самые яркие) мысли текста. Для примера откройте любой бумажный журнал. Там этих врезок - охрененное огромное количество. Врезки можно и нужно использовать для поисковой оптимизации, помещая туда SEO - фразы.

Улучшить дизайн сайта за 30 мин. - реально! (пример цитаты)

Тег <blockquote> - длинная цитата. Этот тег активно используется в форумах, блогах и любых других обсуждениях.

Тег <Q> короткая цитата в тексте обычно заключенная в кавычки (с кавычками проблемы в IE).

Тег <PRE> определяет блок предварительно форматированного текста. Например стихов:

Красивые красные штуки
Придумал себе дизайнер
А чтоб они краше были
Покрасил, их жёлтым и синим

Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Код можно автоматически раскрашивать через модули для CMS или яваскрипт. Пользуйтесь этим.

Код программы

function checkParent (src, dest) {
while (src != null) {
if (src.tagName == dest) return src
src = src.parentElement
}
return null
}

Списки стоит активно использовать не только для перечисления чего - либо, но и в качестве выразительного средства типографики, облегчающего чтение с экрана и разбивающего монотонность текста.

  • Маркированный список: Пункт 01
  • Помните, что вид макреров можно менять через css
    • Вложенный список: В качестве маркеров можно использовать картинки если задать их через css
      • Еще один вложенный список
      • Пункт 02
      • Пункт 03
    • Пункт 01
    • Пункт 02
    • Пункт 03
  • Пункт 01
  • Пункт 02

 

  1. Нумерованный список: Пункт 01
  2. Помните, что для нумерации можно использовать не только арабские цифры
  3. Пункт 03
    • Вложенный маркированный список: Подпункт 03-01
    • Подпункт 03-02
      1. Опять вложенный нумерованный список: Подпункт 3-го уровня
      2. Подпункт 3-го уровня
    • Подпункт 03-03
    • Подпункт 03-04
  4. Пункт 04
  5. Пункт 05

 

Тег <u> - подчеркнутый текст.

Это чисто презентационный элемент, который все и всегда путают со ссылками и пытаются нажать. Подчеркнутый текст - ЗЛО! Использующие его будут гореть в аду :( А мы просто заменим подчеркивание чем-то еще (или отключим его нафиг).

Теги Тег <b>: старожирный текст Тег <strong>: жирный текст.  Помните о том что жирность текста тоже можно настраивать.

Тег <em>: курсивТег <i>: наклонный текст. Иногда для наклонного текста можно использовать другой, более симпатичный шрифт.

Тег <strike>: зачеркнуто Тег <del>:текст, который удален

Эти теги хорошо использовать для обозначения старых цен и неправильных ошибочных высказываний.

Тег <big>: как бы, большой текст

Тег <small>: как бы, маленький текст. Помните о том что этот тег тоже можно переопределить (поменять шрифт, размер, цвет и т.д.) через css

Отдельные классы оформления для:

Адреса компании оформляются css классом .address  или HTML тегом <address>:

Наш адрес: Ул. Жуковская 123
Дом № 65 квартира 48.

Основной телефон фирмы оформляем css классом  .phone

Наш телефон: 214-22-13

Стандартные цены на услуги частенько встречаются на многих сайтах, мы оформим их через css класс .price

Наши цены от 243р.

Оформление таблиц

Т.к. таблицы все еще активно используются для верстки, для таблицы которая должна выглядеть именно таблицей с ячейками и границами (к примеру прайс - лист) был введен отдельный класс  .table

Заголовок таблицы тег <caption>
Заголовок <thead> <th> 05 Верх таблицы тег <thead> thead td
tfoot th 500 Низ таблицы тег <tfoot> tfoot td
tbody <th>   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td

Для вдохновения в работе:

10 способов оформления текста

 http://www.dserg.com/10-text-decoration-2007-04-23.html