?

Log in

No account? Create an account

Previous Entry | Next Entry

Справочник Web-дизайнера: язык HTML


Новый дизайн справочника!   Читайте, изучайте и копируйте этот справочник, и у вас никогда не будет проблем с написанием постов на языке HTML.

      Обнаружил проблему в ЖЖ — многие пользователи не умеют правильно оформить и украсить своё сообщение. Это необходимо, чтобы акцентировать внимание на какой-то своей фразе или выделить чужую цитату, дать ссылку на другое сообщение или вставить спецсимвол. Освоить основы языка разметки текста HTML (на нём построен ЖЖ) можно за пару часов. Сделать это не сложно, можно конечно обложиться учебниками и заняться серьёзным изучением HTML, но мы люди занятые и поэтому предлагаю более простой способ, особенно удобный для владельцев смартфонов, коммуникаторов и телефонов.
      В текстовом редакторе создаёте файл и копируете в его начало (шапку) основные тэги с их кратким описанием, выложенные мной ниже. В дальнейшем, для отправки сообщения в ЖЖ открываете этот файл и набираете текст сообщения, после с помощью функций копировать и вставить из "шапки" проставляете нужные тэги HTML, оформленный текст копируете в окно браузера и отправляете в ЖЖ. Выделяемая фраза или текст должны находиться между тэгами (вместо 3 точек ...). В некоторых тэгах, для быстроты, я копирую только закрывающий тэг (с косой чертой, например </b>), ставлю его в начало выделяемой фразы, удаляя косую черту, и потом копирую его в конец фразы.
      Вот основные тэги, клик на разделы и на [+] после тэга перемещает к пояснительному тексту из краткого описания основ HTML (при полностью открытом тексте учебного пособия). Переменные значения (выделенные мной серым цветом) вы можете менять на свой вкус в рамках определенных категорий — цифры на цифры, цвет на цвет, текст на текст и так далее. Переменные значения надо обрамлять кавычками, хотя все браузеры определяют переменные и без них, но лучше не надеяться на «русское авось».

Разграничение документа
01. <h2 align="center">...</h2>   — создать заголовок[+]
02. <p>   — новый параграф[+]
03. <br>   — перевод строки (enter)[+]
04. <hr>   — горизонтальная линия[+]

Выделение текста
05. <b>...</b>   — жирный шрифт[+]
06. <i>...</i>   — наклонный шрифт
07. <u>...</u>   — текст подчёркнут
08. <s>...</s>   — зачёркнутый текст
09. <font size="5" color="grey">...</font>   — изменение цвета и размера шрифта.[+]

Оформление цитат
10. <code>...</code>   — цитирование программного кода[+]
11. <pre>...</pre>   — текстовая вставка в HTML, сохраняет все пробелы и отступы[+]
12. <blockquote>...</blockquote>   — цитирование текста[+]

Ссылки и изображения
13. <a href="http://www...com">Название ссылки</a>   — ссылка на другой сайт.[+]
14. <img src="http://..." alt="Название картинки">   — включение в текст изображения.[+]

Спецсимволы
15. &#8470;    — знак номера
16. &quot;    — двойная кавычка "
17. &nbsp;    — пробел (spase)
18. &copy;    — знак copyright ©
19. &reg;    — знак зарегистрированной торговой марки ®
20. &laquo;    — левая двойная угловая скобка «
21. &raquo;    — правая двойная угловая скобка »
22. &mdash;    — длинное тире [+]

Теги только для LiveJournal
23. <lj-cut text="Читать дальше">...</lj-cut>   — скрыть фрагмент записи под произвольной фразой указаной в поле text=
24. <lj user="korbn041">   — дать ссылку на пользователя или сообщество, выглядит так korbn041
25. <lj-raw>...</lj-raw>   — запретить форматирование выделенного текста средствами ЖЖ
26. <lj-poll>   — создание опроса в ЖЖ, применяется только в совокупногости с другими тегами, подробности Здесь
27. <lj-repost>...<lj-repost button="Разместить у себя в журнале" />   — публикация кнопки «Перепостить» , выглядит так:

28. <lj-like />   — с помощью этого тега, вы можете вставить в свою запись кнопки «Я рекомендую» из Facebook, «Твитнуть» из Твиттера, «+1» от Google, «Понравилось» из Вконтакте и «+10 жетонов» от LiveJournal, подробности в Справке LiveJournal,    выглядит так:


P.S. Добавил ещё несколько тегов. Ссылка на данную запись: http://korbn041.livejournal.com/1967.html , если хотите сослаться на конкретный тег укажите его номер.

Оглавление


1. Введение

2. Разграничение документа
      • Заголовки
      • 
Абзацы
      • Прерывание строки
      • Горизонтальная линия
      • Списки

3. Выделение текста
      • Модернизация шрифта
      • 
Цвет и размер шрифта
      • 
Константы цвета

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

5. Ссылки и изображения
      • Вставить ссылку
      • 
Вставить изображение

6. Спецсимволы


Введение

      HTML (HyperText Markup Language) — язык гипертекстовой разметки документов. Файл HTML может быть создан и отредактирован в любом текстовом редакторе. Все действия по разметке текста в HTML выполняют тэги, которые бывают одиночные или парные (открывающие и закрывающие). Все тэги заключены между символами <...>, а у закрывающего тэга добавляется косая черта </...>. Форматируемый текст должен находиться между открывающим и закрывающим тэгами. Внутри тэга (между <...>) через пробел от его названия могут добавляться атрибуты, которые дают дополнительные возможности по использованию тэга.
Примечание: HTML не чувствителен к регистру и ему безразлично строчными или заглавными буквами набраны тэги:
<code> равносильно <CODE>

Разграничение документа

      Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы: Главы, параграфы, пункты, абзацы. Для их разделения и упорядочения используются различные тэги, о которых и пойдёт разговор в этом параграфе.

   <h1>...</h1>       Заголовки          Каждый раздел и сам документ может иметь заголовок, используемый для идентификации при поиске.
Он отделяется от остального текста пустыми строками, создаётся тэгом <Hx> и парным ему </Hx>, где Hx может быть от H1 до H6.
Тэгу <H1> соответствует самый большой заголовок, тэгу <H6> - самый маленький.
Атрибуты:
align=   — позиционирует заголовок, имеет значения (center, left, right).
title=   — всплывающая подсказка.
  пример кода:   выглядит так:
<h4 align="center">1. Введение</h>

1. Введение

<h5 align="left">Глава 1</h5>
Глава 1


   <P>       Абзацы          Для создания нового параграфа или абзаца используется тэг <P> и необязательный парный ему </P>.
Текст начинающийся тегом <P> отделяется от предыдущего текста пустой строкой.
Атрибуты:
align=   — выравнивает параграф относительно одной из сторон документа left, right, center или justify - выравнивание по ширине.
title=   — всплывающая подсказка.

   <BR>       Прерывание строки          Тэг <BR> переводит на новую строку, не начиная нового абзаца.
Не требует парного закрывающего тэга и соответствует действию «ENTER» при наборе обычного текста.

   <HR>       Горизонтальная линия          Тэг <HR> добавляет в HTML документ горизонтальную линию, закрывающий тэг не требуется.
Перед и после линии создаётся пустая строка.
Атрибуты:
size=   — устанавливает толщину линии.
width=   — устанавливает длинну линии в пикселах или процентах.
color=   — определяет цвет линии.
  пример кода:   выглядит так:
<hr size="4pt" color="green">
<hr width="50%" color="blue">


   Списки          HTML поддерживает ненумерованные<UL>, нумерованные списки <OL>, списки определений<DL> и вложенные списки.
   <UL>...</UL>       Ненумерованный список          Тэг <UL> и обязательный парный ему </UL> служат для создания ненумерованного списка.
Между этих тегов, ставится тэг <LI> обозначающий элемент списка, и открывающий новую строку.
Атрибуты:
type=   — определяет символы выделения элемента списка, может принимать значения:
      disk,   закрашенный кружок (по умолчанию)
      circle,   незакрашенный кружок
      square,   квадратик
title=   — всплывающая подсказка
  пример кода:   выглядит так:
<UL type="circle" title="Ненумерованный список">
<LI> вода
<LI> земля
<LI> ветер
<LI> огонь
</UL>
  • вода
  • земля
  • ветер
  • огонь


   <OL>...</OL>       Нумерованный список          Нумерованный список определяется тэгами <OL> и обязательным парным ему </OL>.
Между этих тегов, ставится тэг <LI> обозначающий элемент списка, и открывающий новую строку.
Браузер автоматически нумерует элементы такого списка.
Атрибуты:
type=   — определяет символы нумерации элементов списка, может принимать значения:
     A,   заглавные буквы
     a,   строчные буквы
     I,   заглавные римские цифры
     i,   строчные римские цифры
     1,   арабские цифры (по умолчанию)
start=   — начало отчёта при использовании арабских цифр.
title=   — всплывающая подсказка
  пример кода:   выглядит так:
<OL>
<LI> вода
<LI> земля
<LI> ветер
<LI> огонь
</OL>
  1. вода
  2. земля
  3. ветер
  4. огонь


   <DL> <DT> <DD>       Список определений          Список определений задаётся тэгом <DL> и необязательным парным ему </DL>.
Внутри список состоит из двух частей: определения <DT> и описания <DD>, которое располагается на новой строке.
Атрибуты:
title=   — всплывающая подсказка
  пример кода:   выглядит так:
<DL>
<DT> Браузер
<DD> — программа для просмотра гипертекста в интернете
Браузер
— программа для просмотра гипертекста в интернете


   Вложенные списки          Списки могут быть многоступенчатыми, встроенными один в другой, желательно ограничиться тремя уровнями вложенных списков.
  пример кода:   выглядит так:
<UL>
<LI> Производители компьютеров:
      <OL>
      <LI> Apple
      <LI> Dell
      <LI> Sony
      </OL>
<LI> Производители телефонов:
      <OL>
      <LI> Apple
      <LI> Motorola
      <LI> Sony Ericsson
      </OL>
</UL>
  • Производители компьютеров:
    1. Apple
    2. Dell
    3. Sony
  • Производители телефонов:
    1. Apple
    2. Motorola
    3. Sony Ericsson


Выделение текста

   Модернизация шрифта          Способы выделения текста с помощью внесения изменений в исходный шрифт.
Допустимы следующие изменения:
  Теги  Вид изменения   Пример действия до - после
  <b>...</b>   жирный шрифт   Жизнь - Жизнь
  <i>...</i>   наклонный шрифт   Жизнь - Жизнь
  <u>...</u>   подчёркнутый текст   Жизнь - Жизнь
  <s>...</s>   зачёркнутый текст   Жизнь - Жизнь
  <tt>...</tt>   шрифт печатной машинки   Жизнь - Жизнь
  <big>...</big>   большой текст   Жизнь - Жизнь
  <small>...</small>   маленький текст   Жизнь - Жизнь
  <sub>...</sub>   приспущенный текст   Жизнь - Жизнь
  <sup>...</sup>   приподнятый текст   Жизнь - Жизнь
  <center>...</center>   центрованный текст   Жизнь
<marquee>...</marquee>   движущийся текст Жизнь


   <font>...</font>       Цвет и размер шрифта          Тэг <font> и обязательный парный ему </font> определяет размер и цвет выводимого шрифта.
Атрибуты:
size=   — размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт (по умолчанию равен 3)
color=   — устанавливает цвет текста, используя константы цвета (green, red и т.д.), либо используя значение цвета в виде #RRGGBB.
Пример кода: <font size="4" color="green">Жизнь</font> Результат: Жизнь

   Константы цвета   

red firebrick darkred brown coral chocolate sienna
yellow sandybrown green limegreen seagreen darkgreen teal
blue cyan royalblue skyblue darkblue purple indigo
beige azure gold khaki palegreen mistyrose moccasin
grey darkgray lightgrey silver burlywood white black


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


   <CODE>...</CODE>       Цитирование кода          Тэг <CODE> и обязательный парный ему </CODE> выделяют текст как фрагмент программного кода, отображая моноширинным шрифтом.
Атрибут:
title=   — всплывающая подсказка.

   <PRE>...</PRE>       Текстовая вставка         Тэг <PRE> и обязательный парный ему </PRE> обрамляют форматированный обычный текст, получается как бы текстовая вставка в HTML, отображается моношириным шрифтом. С помощью этих тегов удобно цитировать стихи и другой предварительно отформатированный текст.
  пример кода:   выглядит так:
     <PRE>
     На недельку, до второго,
     я уеду в   Комарово...
     (просто песня)
     </PRE> 
	
     На недельку, до второго,
     я уеду в   Комарово...
     (просто песня) 
	

   <BLOCKQUOTE>...</BLOCKQUOTE>       Длинная цитата         Тэг <BLOCKQUOTE> и обязательный парный закрывающий тэг </BLOCKQUOTE> служат для выделения в документе длинных цитат, c отступами с обеих сторон текста и отделённых от остального текста пустыми строками.
  пример кода:   выглядит так:
     <BLOCKQUOTE>
     На недельку, до второго,
     я уеду в   Комарово...
     (просто песня)
     </BLOCKQUOTE> 
	
На недельку, до второго, я уеду в Комарово... (просто песня)

Ссылки и изображения


      Язык HTML имеет возможность связываться с другими документами, разделами текущего документа и графическими файлами. Браузер выделяет цветом и подчеркиванием ключевые слова, являющиеся ссылками.
   <a>...</a>       Вставить ссылку          Тэг <a> и обязательный парный ему </a> создают ссылку, которая позволяет осуществлять мгновенный переход к другому сайту, странице интернета или разделу внутри вашего документа. Описывается ссылка следующим образом:
<a href="http://...адрес или... #имя раздела">...название ссылки</a>.
Атрибуты:
href=   — указывает интернет адрес местонахождения (URL) внешнего документа, или имя элемента (раздела) внутри текущего документа (перед таким именем надо ставить символ "#", на который будет осуществлён переход.
name=   — определяет имя элемента (раздела) внутри текущего документа для возможности создания ссылки на этот элемент (раздел).
title=   — всплывающая подсказка.
  пример кода:   выглядит так:
<a href="http://korbn041.livejournal.com">Ярослав Корбн</a> Ярослав Корбн
Задаём имя раздела в заголовке, чтобы дать потом на него ссылку:
<h4><a name= "раздел-1">Раздел-1.</a></h4>
Тоже самое, но в абзаце:
<p><a name= "раздел-1">Раздел-1.</a>

Раздел-1.


Даём ссылку на раздел, внутри текущего документа:

<a href="#раздел-1">Раздел1</a>
Раздел-1.



   <img>       Вставить изображение          Для отображения графических файлов применяется тег <img>. Последние версии HTML поддерживают форматы файлов GIF, JPG, JPEG, PNG, чтобы включить их в ваш документ надо описать ссылку на их интернет адрес местонахождения (URL):
<img scr="http://...(адрес изображения)">
Атрибуты:
src=   — Обязательный атрибут, указывающий URL графического файла.
align=   — Позиционирует изображение относительно одной из сторон документа. Может иметь следующие значения:
left — выравнивание по левому краю.
right — выравнивание по правому краю.
center — выравнивание по центру.
bottom — выравнивание по нижнему краю.
top — выравнивание по верхнему краю.
middle — выравнивание по середине.
alt   — Показывает ваш текст на месте изображения при отключённой графике в браузере.
border   — Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве ссылки рекомендуется установить border=0.
width   — Длинна, задаётся в пикселях или в процентах, для LJ оптимально "640" (для одного большого изображения вряд).
height   — Высота, задаётся в пикселях или в процентах, для LJ оптимально "480" (для одного большого изображения вряд).
lowsrc   — Адрес изображения с более низким разрешением. Это позволяет отображать более низкий образец тогда, когда более высокий загружается.
vspace   — Определяет отступ картинки (в пикселах) по вертикали от других объектов документа, необходим при обтекании изображения текстом.
hspace   — Определяет отступ картинки (в пикселах) по горизонтали от других объектов документа, необходим при обтекании изображения текстом.
Примеры:
Спутник на орбитальной позиции
<img src="http://pics.livejournal.com/korbn041/pic/00007hyf" alt="Спутник на орбитальной позиции" height="80" width="80" border="0"/>
Hubble.jpg Это пример использования изображения в качестве ссылки, в данном случае на это же изображение без ограничения размеров. Ссылка может быть на любой адрес, для перехода по ссылке кликнете на фото.
<a href="http://pics.livejournal.com/korbn041/pic/0001y04t"><img src="http://pics.livejournal.com/korbn041/pic/0001y04t" align="left" height="80" width="80" border="0" hspace="10" vspace="10" alt="Hubble.jpg"></a>
Пример как расположить 2 фото вряд с помощью тега <TABLE>, подробности читайте в описании этого тега:
<TABLE>
<TR>
	<TD><img src="http://pics.livejournal.com/korbn041/pic/00007hyf" height="100" width="100"></TD>
	<TD><img src="http://pics.livejournal.com/korbn041/pic/0001y04t" height="100" width="100"></TD>
</TR>
</TABLE>

Спецсимволы

      В HTML предопределено большое количество спецсимволов. Это математические символы, буквы алфавитов некоторых европейских языков и другие символы. Чтобы вставить определенный символ в разметку HTML, нужно вставить определенный код, которые начинаются с символа &, за ним следует название символа (или его числовой код) и завершается код точкой с запятой ";".   Статья в Википедии с таблицей спецсимволов.
Вот наиболее часто используемые спецсимволы:
Символ Назначение Код
<   угловая скобка влево   &lt;
>   угловая скобка вправо   &gt;
&   амперсанд   &amp;
"   двойная кавычка   &quot;
(spase)   неразрывный пробел   &nbsp;
©   знак copyright   &copy;
®   знак зарегистрированной торговой марки   &reg;
«   левая двойная угловая скобка   &laquo;
»   правая двойная угловая скобка   &raquo;
  длинное тире   &mdash;
§   знак параграфа   &sect;
  знак номера   &#8470;
±   плюс-минус   &plusmn;
  двойная стрелка вправо   &rArr;
  оператор звёздочка   &lowast;
  бесконечность   &infin;
́   знака ударения (ставится непосредственно после
   буквы, над которой должен изображаться
)
  &#769;
Примечание: Специальные символы чувствительны к регистру, поэтому нельзя использовать &MDASH; вместо &mdash;.


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








Comments

( 12 comments — Leave a comment )
2009_da
Dec. 11th, 2010 08:31 am (UTC)
Спасибо , полезно
А не знаете , как сделать кнопку перепоста в ЖЖ , копирующую и видеоролики
(обычная кнопка видео не копирует) ?
А также как сделать , чтоб кнопка перепоста не до первого cut , а весь пост копировала ?
korbn041
Dec. 11th, 2010 09:38 pm (UTC)
Пожалуйста, рад, что моя информация оказалась Вам полезной. По поводу некорректной работы тегов, перепост и вставки видео, надо обращаться в администрацию ЖЖ, это не доработки их программного обеспечения. Кстати, совсем забыл про теги работы с видео, надо будет добавить. Ещё есть справочная служба ЖЖ можете там посмотреть, может тоже что-то полезное найдёте: http://www.livejournal.com/support/faq.bml
arbuzov
Jun. 1st, 2013 04:33 pm (UTC)
шрифт
а подскажите, очень любопытно, как изменить шрифт именно заголовков в ЖЖ?
Yaroslav Korbn
Jun. 2nd, 2013 07:32 am (UTC)
Re: шрифт
Изменение стандартного заголовка ЖЖ (цвет, размер, шрифт) возможно только с помощью правки HTML кода шаблона.
Как это сделать можно прочитать в сообществе journals_covers, там же можно найти готовые шаблоны или заказать дизайн шаблона на ваш вкус.
Более подробно написать не могу, сейчас интернет только "телефонный".

Edited at 2013-06-02 07:37 am (UTC)
arbuzov
Dec. 30th, 2013 02:00 pm (UTC)
Re: шрифт
все равно спасибо, извините за поздний ответ!
pingback_bot
Jan. 10th, 2011 08:29 pm (UTC)
Спецсимволы
User baalexxx referenced to your post from Спецсимволы saying: [...] http://korbn041.livejournal.com/1967.html [...]
korbn041
Jan. 13th, 2011 10:55 am (UTC)
Re: Спецсимволы
Спасибо baalexxx за ссылку на мой пост. В пособии по изучению HTML описал только основные теги, чтобы не пугать новичков и девушек обилием цифр и букв, поэтому спецсимволы представлены только те, которыми сам пользуюсь. Желающие продолжить обучение, без труда найдут в интернете более подробные учебники HTML.
Как появится возможность, постараюсь дополнить справочник новыми разделами.

Edited at 2011-03-08 11:32 am (UTC)
aet2003
Dec. 17th, 2011 06:07 am (UTC)
тест
(no subject) - marceloliduc - Jan. 31st, 2012 03:59 pm (UTC) - Expand
vedomiy22
Aug. 4th, 2014 10:58 am (UTC)
Зашёл через поиск в Google
Благодарю, очень помогает!
sweden_info
Feb. 10th, 2015 10:17 am (UTC)
Как создать кнопку (не важно с каким техтом)?
bez_truda
Aug. 20th, 2015 10:03 am (UTC)
А как (в подобной этому посту инструкции) сделать, чтобы тэги отображались как текст, а не выполнялись как код. Попробовала code - не помогает
( 12 comments — Leave a comment )