Всего 8 упражнений и плоский живот у вас в кармане Один из лучш...
Анимированные НОВОГОДНИЕ ЕЛОЧКИ - (0)Анимированные НОВОГОДНИЕ ЕЛОЧКИ Анимированные НОВОГОДНИЕ ЕЛОЧКИ! Большая подборка самых красивы...
клипарт « декор новогодний» png - (0)клипарт « декор новогодний» png
новогодние элементы в png - (0)новогодние элементы в png [more=далее==>]
цветочные багеты рамки - (0)цветочные багеты рамки
Оформление постов. Теги. Ответы на вопросы. |
Находясь на таком сайте, как ЛиРу, надо время от времени напоминать о кодах html. Без них здесь нельзя и шагу ступить - т.е. и строчки нормальной не написать. Кстати, интересно: самое популярное сообщение на лиру, набравшее более 10 тысяч цитат, посвящено именно этим кодам или по-другому - тегам. Тег - это элемент разметки гипертекста, иначе - дескриптор. Например, слово "тег" выше заключен между начальным тегом [b] и конечным тегом [/b] и предписывает отображать его жирным шрифтом. Вот она Таблица основных тегов HTML
Писать про абсолютно все теги, которые можно использовать - бессмысленно: не хватит места, времени и желания. И, главное, мало кому нужно абсолютно всё.
Что ж, поехали. Пост написан LexIncorp. Процитирован уже более 1000 раз, так что цитировать и ссылаться не запрещено:).
Кат.
(Прячем текст, как это сделано с большей частью сообщения)
текст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 пикселей), а также с отбивкой сверху и снизу.
Списки.
|
|
Для конструирования списков сначала определяется их тип: нумерованный(тег 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.
Параметры:
(конечно же необязательно
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.
Рубрики: | Обучениеработа в дневничке |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |