-Рубрики

 -Цитатник

Научите свою дочь этому! - (0)

Научите свою дочь этому! 50 вещей, которым нужно научить свою дочь Американка Gina Majors &...

С благодарностью к Богу. Текстовая рамочка от R-Оксаны. - (0)

С благодарностью к Богу. Текстовая рамочка от R-Оксаны Рамочка религиозная. Пока горят пред о...

Три зимних рамочки от Beauti_Flash - (0)

Три зимних рамочки от Beauti_Flash Бордюрные рамочки для текста № 104. Зима Понравился пост,...

Японское творческое вязание - Кейко Окамото. - (0)

Японское творческое вязание спицами - Кейко Окамото. Кейко Окамото "Японские узоры Кейко Окамото" ...

Яркие ирладские кружевные мотивы. - (0)

Яркие ирладские кружевные мотивы. Красивейшие мотивы для ирландского кружева ...

 -Приложения

  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Photoshop online Photoshop onlineДля того чтоб отредактировать картинку совсем не обязательно иметь фотошоп на комьпьютере. Это можно сделать с помощью приложения online photoshop =)
  • Перейти к приложению Скачать музыку с LiveInternet.ru Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
  • Перейти к приложению Создание аватар Создание аватарСервис для создания аватар в режиме онлайн. Позволяет вырезать из большой фотографии свою мордочку и сделать из неё аватару :) Есть возможность сразу же установить аватару в качестве своей основной.

 -Помощь новичкам

Всего опекалось новичков: 51
Проверено анкет за неделю: 0
За неделю набрано баллов: 0 (88217 место)
За все время набрано баллов: 122 (6923 место)

 -

Радио в блоге
[Этот ролик находится на заблокированном домене]

Добавить плеер в свой журнал
© Накукрыскин

 -Метки

cлова и музыка shaman photoshop shaman авторская песня анимации анимация анимированные фоны библиотеки вебдизайн вера видео-клипы волшебная текстовая рамочка всё для блога всё для дома вторую жизнь вещам вышивка вяжем детям вязание вязание для детей вязание для женщин вязание крючком вязание на спицах вязание спицами вязаные воротники вязаные шапки гитара города десерт дети детские сайты дизайн достопримечательности досуг живопись жития святых журналы по вязанию закуски здоровье земля зима игровой онлайн портал игровые автоматы бесплатно без регистрации игровые автоматы онлайн игры онлайн интересное интернет для детей интерьер ирландское кружево искусство история руси кайма камни картинки киево печерская лавра клипарт книги коллекции консервирование космос красивая рамочка для текста красивые песни красивые стихи красота креатив кружево крылатые выражения кулинария кулинарные рамочки кулинарные рецепты лекарственные растения лица любовь люди мода моделирование одежды мой дневник молитвы музыка музыка mp3 музыкальная открытка музыкальные архивы народная медицина наука не проходите мимо новости новый год о жизни осенняя текстовая рамочка открытки отношения оформление дневника песни о любви печём пироги плtйкасты платье плейкасты плэйкасты поёт shaman позитив полезные мелочи полезные советы православие православная вера православная христианская вера психология путешествия пэчворк развлечения рамки рамки для текста рамочка рамочка для текста рамочка кулинарная рамочка осенняя рамочка цветочная рамочки рамочки для текста редакторы релакс религии религия рецепты народной медицины россия рукоделие салаты своими руками семья слово смотреть on-line спорт стиль стихи про осень страны схемы тайны языка текстовая рамочка текстовая рамочка от beautiflash текстовые рамочки темы узоры узоры спицами украина уроки фотошоп уроки шитья фоны фотоальбомы фотошоп футажи футажи gif цветы цитаты человек шаман шитьё школа школа шитья шьём детям шьём платье шьём сами это интересно

 -Фотоальбом

Посмотреть все фотографии серии Весенняя палитра
Весенняя палитра
01:03 13.05.2015
Фотографий: 21

 -Я - фотограф

Замок коварства и любви

Любовь бывает порой коварна… Из уст – в уста передавалась известная и живущая по сей день история одной большой любви, граничащая с безумием… Такое порой случается и в наше время, поэтому  история, давным-давно ставшая легендой, актуальна  и сейчас, как среди молодёжи, так и среди видавших виды местных жителей КавМинВод…  Кто знает как было дело?.. Однако, реальность нынешних дней - созерцание воочию тех мест, где родилась легенда, позволяет предположить, что так всё и случилось…    Отправляясь в небольшое путешествие сюда, каждый раз вглядываешься в необычного вида природный ландшафт затерявшихся здесь среди холмов и скал…  Дорога к Замку...Дорога к Замку...Пологие части склонов густо поросли лесным орешником…  Причудливые пласты скал из древних крепких ещё плит нависают отовсюду вдоль  дороги и это напоминает какое-то древнее разрушенное временем грандиозное строение, похожее на стены замка. ...Воображение мгновенно дорисовывает, придумывает… , как и во многих других местах Кавказских Минеральных Вод, природа дарит нам приятный  нарзанный источник.. . Преклоняешься в душе перед такой её щедростью и величием…За источником ущелье поворачивает влево, где открывается вид на замок, созданный природой.

 -Поиск по дневнику

Поиск сообщений в Tanyusha100

 -Подписка по e-mail

 

 -Сообщества

Участник сообществ (Всего в списке: 57) Моя_дача Неизвестная_Планета Лорелея Креативные_идеи ПОИСК_ПРАВДЫ УРОКИ_ФОТОШОПА Народные_советы Домашняя_Мастерская Темы_и_схемы опекАй про_искусство ПАРФЮМЕРИЯ_И_КОСМЕТИКА Рецепты_домохозяек полезные_игрушки Live_Memory Hand_made_TOYS Заработок_в_интеренете Младшие_школьники Заработок_в_инете Аудиокниги вязалочки мир_красивых_поделок_и_изделий Нумерология Я-Женщина _В_И_Н_Т_А_Ж_ дарить_подарки_клёво БУДЬ_ЗДОРОВ Царство_Кулинарии Это_волшебное_ПЛАТЬЕ Радуга_женственности Вяжем_спицами_и_крючком Обречены_на_Счастье Секреты_здоровья История_и_культура Усы_лапы_и_хвост ЛиРу Уголок_психолога СТИХОТВОРЕНИЯ Bellydance Camelot_Club Geo_club hand_made Котомания our_home УпрЯЯЯмые_ПОХУДЕЙКИ союз_хендмейдеров_Украины Лучшее_Для_Цитатника Я_-_МАСТЕРИЦА ИСКУССТВОбезГРАНИЦ Моя_кулинарная_книга Сообщество_Творческих_Людей Женская_тема Комфортариум Вкусно_Быстро_Недорого Creative_Designs Только_для_женщин Телепроект_Дом-2
Читатель сообществ (Всего в списке: 13) СкАзОчНыЙ_мИр_КаРтИНоК Наши_схемы Ссылочки_малятам Темы_и_схемы_для_Вас Evernote_Ru Kowaii_tochka_ru Live__ART КАПЕЛЬКИ_ЖИЗНИ samaya_news Celebrity_Style Up_Build Madame_Frames О_Самом_Интересном

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 04.04.2012
Записей:
Комментариев:
Написано: 22374


Основные теги HTML для оформления постов на ЛиРу.

Среда, 26 Декабря 2012 г. 03:26 + в цитатник
Цитата сообщения Дом_советов

Основные теги HTML для оформления постов на ЛиРу.

Оформление постов. Теги. Ответы на вопросы.
Находясь на таком сайте, как ЛиРу, надо время от времени напоминать о кодах html. Без них здесь нельзя и шагу ступить - т.е. и строчки нормальной не написать. Кстати, интересно: самое популярное сообщение на лиру, набравшее более 10 тысяч цитат, посвящено именно этим кодам или по-другому - тегам. Тег - это элемент разметки гипертекста, иначе - дескриптор. Например, слово "тег" выше заключен между начальным тегом [b] и конечным тегом [/b] и предписывает отображать его жирным шрифтом. Вот она Таблица основных тегов HTML


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

Что ж, поехали. Пост написан LexIncorp. Процитирован уже более 1000 раз, так что цитировать и ссылаться не запрещено:).

Оглавление
Прячем текст под кат
Начертание текста
Размер шрифта
Цвет текста
Гарнитура шрифта
Цитаты
Списки
Форматирование
Бегущая строка
Вставка изображений
Ссылки, баннеры
Рамки для текста
Форма для кода

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

К чему это я? К тому, что первым делом надо закрывать тот тег, который открыли последним (исключение составляет тег ката).

И еще: не бойтесь экспериментировать. Html не может убить ваш компьютер и стереть информацию)

К оглавлению.

Кат.

(Прячем текст, как это сделано с большей частью сообщения)


текст1 далее текст2

Даже если текста 2 нет, закрывающий тег лучше ставить.

К оглавлению.

Начертание текста.


Ваш текст

Ваш текст

Как видите, результат не отличается, но только внешне. А так, это две разных логических структуры.
b (bold) - визуальное выделение текста, Strong - логическое выделение.

Логическое выделение нужно для того, чтобы указывать машинам (поисковым системам), что является главным
в тексте. Собственно, принцип расставления strong и em (о котором на абзац ниже) схож с разбиением текста на абзацы при написании работ.
То есть, каждый сам решает, что следует выделить. Использовать оба тега сразу конечно же не надо.


Ваш текст

Ваш текст

Как видите, результат снова не отличается. Но как и в случае с b/strong, i (italic) - визуальное выделение, em (emphasis) - логическое.

Также для обозначения терминов, которые первый раз используются в тексте можно использовать тег <dfn>Ваш текст</dfn>


Ваш текст

Ваш текст

u (underline) - подчекрнутый, s (strike) - зачеркнутый текст. Можно использовать и <strike>Ваш текст</strike>
Иногда для наглядности версий текста используют тег <del>Ваш текст</del> для обозначения текста, который был удален. Отображается перечернкутым.
Для добавленного текста используется <ins>Ваш текст</ins>. Отображается подчеркнутым.


UML

UML

abbr (аббревиатура) - сокращенное написание слова или группы слов. acronym (акроним) - устоявшееся сокращение, которое применяется как самостоятельное слово. Но это не запрещает использовать acronym (но не abbr) для описания расшифровки термина.


Ваш текст | обычный текст

Ваш текст | обычный текст

sub(subscript) и sup(superscript) - верхний и нижний индекс.
Можно использовать для написания формул (sub) и для обозначения сносок (sup).

К оглавлению.

Размер шрифта.


Ваш текст | обычный размер

Ваш текст | обычный размер

big - увеличивает размер шрифта на 1 пункт относительно размера текста документа по умолчанию, small - уменьшает на единицу.


Ваш текст | обычный размер

Ваш текст | обычный размер

Параметр size отвечает за размер шрифта. Значение может быть как относительным (сколько-то пунктов), так и абсолютным.
Допустимый диапазон: от 1 до 7. По умолчанию размер равен 3. Одинаковые размеры разных шрифтов визуально могут отличаться.


Ваш текст | обычный размер

Ваш текст | обычный размер

Как видим, 4 в данном случае эквивалентно +1, а 2 - -1. Как я уже говорил, это связано со стандартным размером равным 3.

К оглавлению.

Цвет текста.


Ваш текст

Ваш текст

Цвет текста можно задать двумя способами: по названию, либо по шестнадцатеричному коду.

Стандартные цвета: black, white, red, green, blue, yellow, magenta, cyan, purple, lime, maroon, auqa, navy, fuchsia.
Вот некоторые коды распространенных цветов.

#000000     #993300     #333300     #003300     #003366     #000080     #333399     #333333    
#800000   #FF6600   #808000   #008000   #008080   #0000FF   #666699   #808080  
#FF0000   #FF9900   #99CC00   #339966   #33CCCC   #3366FF   #800080   #969696  
#FF00FF   #FFCC00   #FFFF00   #00FF00   #00FFFF   #00CCFF   #993366   #C0C0C0  
#FF99CC   #FFCC99   #FFFF99   #CCFFCC   #CCFFFF   #99CCFF   #CC99FF   #FFFFFF   
#9999FF   #993366   #FFFFCC   #CCFFFF   #660066   #FF8080   #0066CC   #CCCCFF  
#000080   #FF00FF   #FFFF00   #00FFFF   #800080   #800000   #008080   #0000FF  

К оглавлению.

Гарнитура шрифта.


Ваш текст

Ваш текст

Некоторые часто используемые шрифты: Arial, Comic Sans MS, Courier New, Georgia, Tahoma, Times New Roman, Verdana.
Как видите, в параметре face можно указать несколько шрифтов через запятую.
Если первый шрифт не найдет браузером, будет использован следующий из списка.


Цитаты.


Ваш текст

Ваш текст

Ваш текст

cite используется для логического выделения цитат. Текст браузером внутри тега выделяется курсивом.
q выделяет текст кавычками. Все браузеры (кроме некоторых версий IE) подставляют кавычки корректно.
blockquote: текст отображается как выровненный блок с отступами слева и справа (около 40 пикселей), а также с отбивкой сверху и снизу.

К оглавлению.

Списки.

  • пункт 1
  • пункт 2

  1. пункт 1
  2. пункт 2

Для конструирования списков сначала определяется их тип: нумерованный(тег ol) или маркированный(тег ul), а потом описываются элементы (тег li).
Вложенные списки имеют место быть, но на лиру не поддерживаются. Но есть небольшая хитрость)

К оглавлению.

Форматирование.
span и div
.
тег span можно использовать внутри других тегов для задания элементам стилей, отличных от общего.
тег div является блочным элементом и предназначен для выделения фрагмента с целью изменения вида содержимого.


Текст1Текст2

Текст1
Текст2

Для задания отступов используется свойство css style и некоторые его параметры:
margin - отступы блока относительно остальных элементов. padding - отступы внутри блока для текста, чтобы он не прилипал к границам
Так как CSS для написания постов изучать смысла нет, можно ограничиться заданием отдельных границ:
margin-top, margin-right, margin-bottom, margin-left и padding-top, padding-right, padding-bottom, padding-left
Как раз левое поле и задано в приведенном коде. Значение - в пикселах.


Новая строка
 

Горизонтальная линия

Когда вы работаете в расширенном редакторе, по нажатию Enter происходит не переход на новую строку, а в новый абзац. В связи с этим возникают
проблемы с, например, картинками в тексте. Выравнивание действует только внутри абзаца. Поэтому, следует делать переходы на новые строки,
а не создавать абзацы. Новая строка в расширенном редакторе - Shift+Enter или же просто <br> в коде.


Ваш текст


Ваш текст

p - задание абзацев, pre - блок предварительно форматированного текста.
Внутри pre запрещено использование изображение и тегов для изменения шрифта.
Важным свойстров абзаца (p) является выравнивание - align. <p align="left | center | right | justify">...</p> - соответсвенно используем 1 из параметров.
justify - выравнивание по ширине.

  текст внутри обоих этих тегов можно выравнять. Делается это при помощи свойства CSS - text-align.
Также есть параметр text-indent, задающий отсуп первой строки текста в блоке.


Ваш текст


Ваш текст

Теги h1 .. h6.
задают заголовки 6 разных уровней (1 - самый большой). Являются блочными элементами. Есть свойство align.

К оглавлению.

Бегущая строка - marquee.

а я бегу 1 раз вниз и 1 раз вверх
(вы могли не видеть, как она пробежала лишь 1 раз)

Параметры:
(конечно же необязательно
behavior - Задает тип движения содержимого контейнера. Значения: behavior="alternate | scroll | slide"
alternate - содержимое перемещается между правым и левым краем элемента.
scroll - перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.
slide - содержимое перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.
bgcolor - Цвет фона. Подробнее о цветах было выше.
direction - Указывает направление движения содержимого контейнера. Значения: direction="down | left | right | up"
height и width - высота и ширина области прокрутки.
hspace и vspace - горизонтальные и вертикальные поля вокруг содержимого.
loop - задает, сколько раз будет прокручиваться содержимое (натуральное число). -1 - бесконечное повторение.
scrollamount - скорость движения содержимого (в пикселах).
scrolldelay - величина задержки в миллисекундах между движениями.
truespeed - отменяет встроенный ограничитель скорости при низких значениях параметра scrolldelay.

К оглавлению.

Вставка изображений.

текст, который виден без картинки
Естесвенно основной частью является <img src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">
Собственно, чтобы показать картинку нам хватит и этого кода.

src (source) - адрес, где расположено изображение.
height и width - размеры показываемого изображения. Никто не запрещает растянуть или уменьшить изображение. В оригинальном размере картинку всегда можно увидеть, нажав "открыть изображение". Ну и пользователю она будет загружаться вся, т.е. сделав кодом из картинки 1000*800 маленькую 100*80 вы ничего не улучшите - грузиться она будет так же долго и съест столько же трафика.
alt (alternative) - альтернативный текст изображения, который виден при просмотре без отображения картинок (когда экономят трафик).
title - текст, видимый при наведении мышкой на картинку.
align - знакомый нам параметр выравнивания. Как я уже говорил в разделе про абзацы и строки, выравнивание будет действовать только внутри абзаца. Представьте, что каждый абзац - это строка в таблице. Ну так вот если вставить картинку в первую строку, та станет высотой не меньше картинки, но не залезет на вторую. Поэтому следите за тем, куда вставляете их)
hspace и vspace - задают отступ от изображения до окружающего контента
border - толщина рамки вокруг изображения.

К оглавлению.

Ссылки.

анкор

href - адрес, куда нужно перейти
title - текст, появляющийся в качестве подсказки при наведении на ссылку
target - параметр отвечающий за то, где открывать ссылку - в том же окне или новом.
Если target не задан, то открывается в том же окне (эквивалент _self). Из возможных значений нас интересует еще и _blank - открытие в новом окне/вкладке.
анкор - анкором называют текстовую часть ссылки.

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

К оглавлению.

Рамки для обрамления текста.


Ваш текст

Для задания вида рамки используется атрибут border, который задается для стиля блока div.

Сначала задается толщина рамки, затем тип, потом цвет. Таблица цветов и стандартные имена уже приводились.
Возможные типы рамок:

dotted
dashed
solid
double
groove
ridge
inset
outset

И конечно же никто не запрещает использовать в стиле div другие атрибуты.
Например, padding и margin, речь о которых шла выше.

К оглавлению.

Форма для текста.
Они-то и использовались везде)


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

Наверх

 

Рубрики:  оформление дневника,/мой дневник, всё для блога,
оформление дневника,/полезные советы,
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку