-–убрики

 -÷итатник

 овры - клипарт на прозрачном фоне - (0)

 липарт -  расивые ковры  овры старинные персидские ручной работы и современные //img-f...

 липарт на прозрачном фоне - Ѕаннеры и разговорники - (0)

 липарт на прозрачном фоне - Ѕаннеры и разговорники  липарт на прозрачном фоне - Ѕаннеры и ра...

—вадебный клипарт PNG - (1)

—вадебный клипарт PNG

 исти "ѕузырьки" - (1)

ѕузырьки "ѕузырьки" јрхив объемом 1,07 ћб можно скачать http://www.unibytes.com/OnYyAJt8y...

 липарт на прозрачном фоне Ђ1 сент€бр€ї (школьный) - (2)

//img-fotki.yandex.ru/get/9474/20573769.5d/0_94d41_d73a12f3_L.png http://img-fotki.yandex....

 - нопки рейтинга Ђяндекс.блогиї

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

 

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 25.01.2009
«аписей:
 омментариев:
Ќаписано: 66207


»зучаем HTML, о котором все забыли. “еги. ќформление постов. ќтветы на вопросы.

¬оскресенье, 06 —ент€бр€ 2009 г. 11:26 + в цитатник
÷итата сообщени€ _LexIncorp_ »зучаем HTML, о котором все забыли. “еги. ќформление постов. ќтветы на вопросы.



—амое попул€рное сообщение на лиру, которое набрало больше 10 тыс€ч цитат, посв€щено кодам html. ¬сЄ в нем хорошо, да вот только объ€снений мало. ј ведь с сопроводительной информацией объем можно было бы уменьшить, рассказав какие параметры за что отвечают.
ѕисать про абсолютно все теги, которые можно использовать - бессмысленно: не хватит места, времени и желани€. », главное, мало кому нужно абсолютно всЄ.
Ќу что же, поехали. ѕост написан LexIncorp. ÷итировать и ссылатьс€ не запрещено.


Ќе отрица€ возможности возникновени€ вопросов, предлагаю следующее. Ѕлаго, нововведени€ лиру это позвол€ют.
¬ы оставл€ете вопрос в комментарии, ставите галочку "ќпубликовать комментарий и ссылку в моем дневнике", ваш вопрос дублируетс€ у вас в блоге. ” мен€ по€вл€етс€ врем€, € иду к вам и отвечаю у вас на поставленный вопрос по теме поста.
ƒл€ чего это? „тобы не загромождать комментарии тут и чтобы ответы на ваши вопросы были у вас).


ќглавление
ѕр€чем текст под кат
Ќачертание текста
–азмер шрифта
÷вет текста
√арнитура шрифта
÷итаты
—писки
‘орматирование
Ѕегуща€ строка
¬ставка изображений
—сылки, баннеры
–амки дл€ текста
‘орма дл€ кода

ѕрежде чем начать изучение материала, кое-что по€сню. „тобы зайти с улицы в комнату, сначала надо зайти в квартиру, а потом уже в комнату. “акже, чтобы выйти на улицу из комнаты, сначала мы выходим из нее, потом из квартиры.
  чему это €?   тому, что первым делом надо закрывать тот тег, который открыли последним. (исключение составл€ет тег ката).
» еще: не бойтесь экспереминтировать. 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.

Ќаверх

Lexincorp.ru: ¬сЄ самое интересное и полезное

–убрики:  ƒл€ дневника
ћетки:  
ѕонравилось: 6 пользовател€м



DiZa-74   обратитьс€ по имени ѕонедельник, 07 —ент€бр€ 2009 г. 06:36 (ссылка)
—пасибо, очень нужна€ информаци€!
ќтветить — цитатой ¬ цитатник
—ветлана53   обратитьс€ по имени ¬оскресенье, 14 ‘еврал€ 2010 г. 08:03 (ссылка)
—пасибо!!!
ќтветить — цитатой ¬ цитатник
maltuhskina   обратитьс€ по имени ¬оскресенье, 23 —ент€бр€ 2012 г. 00:08 (ссылка)
ќтветить — цитатой ¬ цитатник
ѕерейти к дневнику

¬оскресенье, 23 —ент€бр€ 2012 г. 09:03ссылка
maltuhskina, рада что понравилось!
 омментировать   дневнику —траницы: [1] [Ќовые]
 

ƒобавить комментарий:
“екст комментари€: смайлики

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

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

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