HTML разметка для чайников

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

ХТМЛ разметка для чайников

Основы разметки хтмал или что такое тег

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

<p align="right">Текст параграфа, выровненный по правому краю.</p>.

В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.

Следует отметить, что в хтмл, теги бывают двух видов: блочными и строковыми. Блочные теги создают блочный элемент, зачастую имеющий отступы и ниже следующие элементы идут уже «с новой строки». Строчные теги предназначены для разметки фрагмента кода и не создают переноса строки.

Как говорится: в любом правиле есть исключения – это же верно и для тегов. Существуют теги, которые не имеют закрывающего тега и предназначены они для создания меток и элементов хтмл документа, например:

<img alt="альтернативный текст" src="path/to/imagefile.jpg" border="0">

В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src. Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.

Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:

HTML тег

Краткий справочник по хтмл тегам

И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?

Как сделать ссылку? Для этого вам нужно использовать строковый тег A, который размечает содержащийся в нём текст как ссылку – активный элемент веб-страницы при клике на который пользователь может перейти на другую веб-страницу, адрес которой указан в атрибуте href.

Примертекст, со <a href="http://www.wmascat.ru/">ссылкой</a> на другую веб страницу.
Результаттекст, со ссылкой на другую веб страницу.

Как выделить текст жирным? Для этого вам нужно использовать строковый тег B, который устанавливает для содержащегося в нём текста жирное начертание шрифта.

Примертекст, выделенный <b>жирным</b> шрифтом.
ЦСС аналогтекст, выделенный <span style="font-weight:bold">жирным</span> шрифтом.
Результаттекст, выделенный жирным шрифтом.

Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I, который устанавливает для содержащегося в нём текста курсивное начертание шрифта.

Примертекст, выделенный <i>курсивом</i>, т.е. с наклоном.
ЦСС аналогтекст, выделенный <span style="font-style:italic">курсивом</span>, т.е. с наклоном.
Результаттекст, выделенный курсивом, т.е. с наклоном.

Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U, который добавляет подчеркивание для содержащегося в нём текста.

Примертекст, с добавлением <u>подчеркивания</u>.
ЦСС аналогтекст, с добавлением <span style="text-decoration:underline">подчеркивания</span>.
Результаттекст, с добавлением подчеркивания.

Как зачеркнуть текст? Для этого вам нужно использовать строковой тег S, который отображает текст как перечеркнутый.

Примертекст, содержащий <s>зачеркнутое</s> слово.
ЦСС аналогтекст, содержащий <span style="text-decoration:line-through">зачеркнутое</span> слово.
Результаттекст, содержащий зачеркнутое слово.

Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE, который обычно отображается браузером моноширинным шрифтом, например Courier New.

Примертекст, выделенный как <code>программный код</code>.
ЦСС аналогтекст, выделенный как <span style="font-family: 'Courier New', Courier, monospace">программный код</span>.
Результаттекст, выделенный как программный код.

Как оформить код в тексте? Для этого вам нужно использовать блочный тег PRE, который определяет блок программного кода, обычно отображается браузером моноширинным шрифтом. В отличие от строкового тега CODE, тег PRE сохраняет пробелы и переносы строк.

Пример<pre>форматированный текст
  и ещё один   форматированный текст</pre>
Результатформатированный текст
  и ещё один   форматированный текст

Как сделать текст больше? Для этого вам нужно использовать строковой тег BIG, который увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Примертекст, выделенный <big>большим</big> шрифтом.
ЦСС аналогтекст, выделенный <span style="font-size:larger">большим</span> шрифтом.
Результаттекст, выделенный большим шрифтом.

Как сделать текст меньше? Для этого вам нужно использовать строковой тег SMALL, который уменьшает размер шрифта на единицу по сравнению с обычным текстом.

Примертекст, выделенный <small>маленьким</small> шрифтом.
ЦСС аналогтекст, выделенный <span style="font-size:small">маленьким</span> шрифтом.
Результаттекст, выделенный маленьким шрифтом.

Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT. Атрибут face здесь задаёт гарнитуру (название) шрифта, color – цвет шрифта, а size – его размер в условных единицах (от -7 до 7).

Примертекст, выделенный другим <font face="Arial" color="#008000" size="5">шрифтом и цветом</font>.
ЦСС аналогтекст, выделенный другим <span style="font-family: Arial, Helvetica, sans-serif; font-size:24px; color:#008000">шрифтом, цветом и размером</span>.
Результаттекст, выделенный другим шрифтом, цветом и размером.

Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького), что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.

Пример<h1>Заголовок</h1>
Результат:

Заголовок

Как сделать подстрочный шрифт? Для этого вам нужно использовать строковой тег SUB, который отображает шрифт в виде нижнего индекса, т.е. текст будет располагаться ниже базовой линии остальных символов строки и уменьшенного размера.

Примертекст, выделенный шрифтом в <sub>нижнем</sub> индексе.
ЦСС аналогтекст, выделенный шрифтом в <span style="vertical-align:sub">нижнем</span> индексе.
Результаттекст, выделенный шрифтом в нижнем индексе.

Как сделать надстрочный шрифт? Для этого вам нужно использовать строковой тег SUP, который отображает шрифт в виде верхнего индекса, т.е. текст будет располагаться выше базовой линии остальных символов строки и уменьшенного размера.

Примертекст, выделенный шрифтом в <sup>верхнем</sup> индексе.

ЦСС аналогтекст, выделенный шрифтом в <span style="vertical-align:super">верхнем</span> индексе.
Результаттекст, выделенный шрифтом в верхнем индексе.

Как вставить цитату в текст? Для этого вам нужно использовать строчный тег Q, который используется для выделения в тексте цитат, которые автоматически отображаются браузером в кавычках.

Примертекст, содержащий: <q>цитату</q>.
ЦСС аналогтекст, содержащий: <span style="quotes: '\00ab' '\00bb'">цитату</span>.
Результаттекст, содержащий: цитату.

Как оформить цитату в тексте? Для этого вам нужно использовать блочный тег BLOCKQUOTE, который предназначен для выделения длинных цитат в хтмл документе. Обычно такой текст отображается с отступами в 40 пикселей слева и справа, а также отбивкой сверху и снизу.

Пример<blockquote>Цитата</blockquote>
Результат

Цитата

Как сделать перенос строки в тексте? Для этого вам нужно использовать блочный тег BR, который устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца p, использование тега br не добавляет пустой отступ перед строкой.

Пример<br>

Как выделить фрагмент? Строковый тег SPAN не производит какого-либо преобразования со своим содержанием, что позволяет использовать его для задания цсс стилей заданной области. В данном случае указано цсс свойство text-decoration, которое добавляет оформление для текста, например: line-through – зачеркивание.

Примертекст, выделенный <span style="text-decoration:line-through">спаном</span>.
Результаттекст, выделенный спаном.

Как сделать слой в хтмл? Для этого вам нужно использовать блочный тег DIV, который создаёт слой без отступов.

Пример<div align="right">Блок.</div>
ЦСС аналог<span style="display:block;text-align:right">Блок.</div>
Результат
Блок.

Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR, который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size – размер, а noshade – отключает трехмерный эффект.

Пример<hr color="#008000" size="1" noshade>
Результат

Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL) и маркированный (UL). В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL. По умолчанию, в качестве маркера окружность (закрашенный кружочек), которая отображается в начале первой строки элемента списка, заданного тегом LI.

Пример<ul>
  <li>Элемент списка 1.</li>
  <li>Элемент списка 2.</li>
</ul>
Результат
  • Элемент списка 1.
  • Элемент списка 2.

Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/3tUuon

Максим
Максим комментирует...

Костя, у тебя получился не столько справочник, сколько FAQ по HTML для чайников.

Константин Кирилюк
Константин Кирилюк комментирует...

@Максим да, решил переквалифицировать статью в этот формат. Честно говоря, рассчитывал на низкочастотники, но думаю более узкопрофильные статьи перекроют результат. Если верить GA, в основном, идёт трафика по самой теме статьи, т.е. ХТМЛ разметка для чайников.

Вика
Вика комментирует...

Максим, а я пойду сейчас и поделюсь статьёй. FAQ по HTML для чайников. Когда впервые открываешь справочник, тот на который сослался Костя, реакция - мне не разобраться. А вот в этой статье по полочкам и понятно будет, кто в этом на самом деле хочет начать разбираться.Спасибо Константину. htmlbook.ru у меня уже давно в закладках.