-Рубрики

 -Фотоальбом

Посмотреть все фотографии серии Личное
Личное
01:24 24.01.2012
Фотографий: 37
Посмотреть все фотографии серии Детство
Детство
11:38 03.04.2008
Фотографий: 8
Посмотреть все фотографии серии Softool 2007
Softool 2007
20:53 05.10.2007
Фотографий: 6

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

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

 -Статистика

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


Изучаем HTML, о котором все забыли. Теги. Оформление постов. Ответы на вопросы.

Четверг, 12 Февраля 2009 г. 09:11 + в цитатник

Самое популярное сообщение на лиру, которое набрало больше 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: Всё самое интересное и полезное

Рубрики:  Полезные ссылки, сервисы, статьи


Процитировано 2122 раз
Понравилось: 105 пользователям

ALEXRUS   обратиться по имени Четверг, 12 Февраля 2009 г. 09:16 (ссылка)
я HTML никогда не забывал )
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 09:17ссылка
ALEXRUS, это хорошо:)
а некоторые забыли. хотя у нас даже в школе было.
надеюсь, что хоть что-то из написанного мной будет ясно людям :D
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 09:49ссылка
_LexIncorp_, когда я учился в школе, нам HTML не преподавали. Я его сам изучал.
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 09:53ссылка
ALEXRUS, ну у людей старше меня и тебя и младше лет 30 проблем с ним тоже нет.
К сожалению, они есть у многих дневниководов.
_LexIncorp_   обратиться по имени Четверг, 12 Февраля 2009 г. 09:18 (ссылка)
большое спасибо Valez за возвращение name и возможности создания навигации нормальной)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 09:46ссылка
Все! Прочитал верхний коммент :)
BraveDefender   обратиться по имени Четверг, 12 Февраля 2009 г. 09:45 (ссылка)
В чем секрет: почему у меня гиперссылки по странице не работают? ("наверх", "к оглавлению" и т.д - не в твоем посте, а свои)
Ответить С цитатой В цитатник
веронесса   обратиться по имени Четверг, 12 Февраля 2009 г. 10:00 (ссылка)
Спасибо!Будем учиться!
Ответить С цитатой В цитатник
galkapogonina   обратиться по имени Четверг, 12 Февраля 2009 г. 10:16 (ссылка)
_LexIncorp_, Большое спасибо!
Ответить С цитатой В цитатник
Tayanya_ZSH   обратиться по имени Четверг, 12 Февраля 2009 г. 10:18 (ссылка)
a ya nemoqla video postavit svoy dnev,skolka raz pitalsya ujos
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 10:22ссылка
скачайте бесплатную версию Any Video Converter и пусть она преобразует ваше видео в flv формат. Его уже и заливайте в блог.
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 16:17ссылка
_LexIncorp_, мне, кстати,больше нравится Тотал Видео Конвертер. Он не так сильно уродует исходный файл, сохраняет качество видео.
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 17:18ссылка
под лиру в ави я кодирую Any Video.
а так у меня стоит Media Coder.
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 08:24ссылка
Я так же самостоятельно до такого вывода дошёл путём множества экспериментов, но умней оказался один из ваших блоговых товарищей додумавшийся mp4 в flv переименовать.. Отличия в качестве понятны (в 2раза при тех же размерах) То же и вконтакте прокатило..А почему не знаю--авишку с теми же кодеками h264 не принимает
Марина_Копьева   обратиться по имени Четверг, 12 Февраля 2009 г. 10:33 (ссылка)
Спасибо!!! Для меня очень своевременная и нужная информация!

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
Linda53   обратиться по имени Четверг, 12 Февраля 2009 г. 10:50 (ссылка)
Я думаю .что многим все же надо побольше знать HTML в полном объеме с хорошими примерами. Эту тему надо развивать, ведь есть люди которые недавно пришли на Лиру и не знают язык HTML.Вот и возьмите на себя обязанность владеть и понимать этот язык.Будем Вас посещать.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 10:52ссылка
ну немалую часть базовых понятий я рассказал.
надеюсь, что часть усвоится.
Алиса_Кензер   обратиться по имени Четверг, 12 Февраля 2009 г. 11:23 (ссылка)
БОЛЬШОЕ СПАСИБО. Я этого не изучала. Головная боль. Возьму себе, постараюсь применить на практике.
Ответить С цитатой В цитатник
virena2008   обратиться по имени Спасибо за заботу об отстающих Четверг, 12 Февраля 2009 г. 12:01 (ссылка)
С каждым повтором результат понимания возрастает.
Ответить С цитатой В цитатник
Pexy   обратиться по имени Четверг, 12 Февраля 2009 г. 12:16 (ссылка)
ниасилил...
возьму в цитаты, потом читану, спасибо))))
Ответить С цитатой В цитатник
Котена_Ойка   обратиться по имени Четверг, 12 Февраля 2009 г. 12:23 (ссылка)
Спасибо большое!!!)))
Ответить С цитатой В цитатник
Ирина-Солнце   обратиться по имени Четверг, 12 Февраля 2009 г. 12:28 (ссылка)
Спасибо от очередного чайника. Многое стало понятнее.
Ответить С цитатой В цитатник
bogulnik   обратиться по имени Четверг, 12 Февраля 2009 г. 12:38 (ссылка)
Спасибо за полезность .
Ответить С цитатой В цитатник
Regina_Jung   обратиться по имени Четверг, 12 Февраля 2009 г. 14:06 (ссылка)
От ,,чайника,,огромное спасибо! Так вовремя... и так полно!
Ответить С цитатой В цитатник
АлинаТ   обратиться по имени Четверг, 12 Февраля 2009 г. 15:10 (ссылка)
Это все для меня ново. буду разбираться, спасибо!
Ответить С цитатой В цитатник
борисюлька   обратиться по имени Четверг, 12 Февраля 2009 г. 15:52 (ссылка)
Спасибо,возьму себе,буду разбираться!
Ответить С цитатой В цитатник
Lesha_my   обратиться по имени Четверг, 12 Февраля 2009 г. 16:20 (ссылка)
Отличная информация ! Спасибо. Кстати, у меян по этой теме есть пару учебников типа "ХТМЛ для чайников", если надо их можно для юзеров положить куда-нибудь на бесплатную скачку, тип Вебфайла.
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 17:43ссылка
я думаю, что в сети достаточно подобных учебников. только читать их мало кто захочет.
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 22:06ссылка
Исходное сообщение _LexIncorp_
я думаю, что в сети достаточно подобных учебников. только читать их мало кто захочет.

Как ни забавно, но книгу Николая Чувахина по ХТМЛ, по которому я этот язык учил в 90-х, сейчас охотно читает мой 15-и летний сын
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 22:18ссылка
я не про конкретно предлагаемый вами)
я про любой из представленных. людям лениво обычно
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 08:45ссылка
в 90-х годах Фигурнов как писал! Всё по делу и никакого бреда
А нынешние книги я не могу читать..Длиннющее введение и очень мало примеров
Перейти к дневнику

Пятница, 13 Февраля 2009 г. 08:54ссылка
Исходное сообщение Ironcast
в 90-х годах Фигурнов как писал! Всё по делу и никакого бреда
А нынешние книги я не могу читать..Длиннющее введение и очень мало примеров

Для меня он - классик жанра ! Одна небольшая книга, переиздание каждый год и добавление того, что новое появилось за год. Причем все по сути и по делу, ничего лишнего, язык прост и доступен чайнику. По первому изданию Фигурнова я изучал персоналку в 1988-89 годах, пересев на нее с большой машины. 286 ХТ...
Фраза дня - "Фигурнов - Лев Толстой нашего компьютерного века"....
Еленуш18   обратиться по имени Четверг, 12 Февраля 2009 г. 17:42 (ссылка)
СПАСИБО!
Ответить С цитатой В цитатник
kshushlin   обратиться по имени Четверг, 12 Февраля 2009 г. 19:41 (ссылка)
Спасибо.
Ответить С цитатой В цитатник
igor_Korn   обратиться по имени Четверг, 12 Февраля 2009 г. 19:54 (ссылка)
Это кстати... а то, тут помню, тут не помню... :)
Ответить С цитатой В цитатник
Василиса2603   обратиться по имени Четверг, 12 Февраля 2009 г. 20:01 (ссылка)
вот класс! спасибо)))
Ответить С цитатой В цитатник
vera_nadezda   обратиться по имени Четверг, 12 Февраля 2009 г. 20:06 (ссылка)
_LexIncorp_, спасибо, очень толково.
Ответить С цитатой В цитатник
Перейти к дневнику
Ikarus   обратиться по имени Четверг, 12 Февраля 2009 г. 20:43 (ссылка)
В колонках играет - Shiva In Exile - Floating

_LexIncorp_, чош его все так любят то?

______________________________________
А ты знаешь чо будет если тыкнуть сюда? А я знаю =)) Лучше не тыкай! НЕ ТЫКАЙ говорю!
Loreleya


Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 20:49ссылка
Ikarus283, я не видел еще на лиру пособий по тому, как им пользоваться, а не просто брать коды.
Ikarus   обратиться по имени Четверг, 12 Февраля 2009 г. 21:02 (ссылка)
В колонках играет - Shiva In Exile - Nomad

Исходное сообщение _LexIncorp_:
Ikarus283, я не видел еще на лиру пособий по тому, как им пользоваться, а не просто брать коды.


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

______________________________________
А ты знаешь чо будет если тыкнуть сюда? А я знаю =)) Лучше не тыкай! НЕ ТЫКАЙ говорю!
Loreleya


Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 21:10ссылка
то, что написано у меня - непонятно?
учебники есть не у всех. а уж тем более мало кто их открывает.
кстати, там есть всё, что я написал?:)
Варфоломей_С   обратиться по имени Четверг, 12 Февраля 2009 г. 21:08 (ссылка)
Спасибо, очень толково!
Ответить С цитатой В цитатник
Marina_Margo   обратиться по имени Четверг, 12 Февраля 2009 г. 21:16 (ссылка)
Благодарю за полезную информацию. :-)
Ответить С цитатой В цитатник
Пудициция   обратиться по имени Четверг, 12 Февраля 2009 г. 21:29 (ссылка)
А у меня баннеры не отображаются в самом сообщении, только в комментах. Не подскажите в чём секрет?
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 21:31ссылка
а что вместо них видно? код? значит вы пишите его в расширенном редакторе, а не в простом или же не нажав "источник" в расширенном.
Перейти к дневнику

Четверг, 12 Февраля 2009 г. 21:34ссылка
Спасибо. Всё понятно.
Комментировать К дневнику Страницы: [1] 2 3 4 5 6 7 [Новые]
 

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

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

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

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