Язык HTML предназначен в первую очередь для структурной разметки, т. е. для обозначения каждого элемента в соответствии с его местом и ролью в структуре документа. Например, тэг <p>…<⁄p> обозначает, что элемент является просто абзацем обычного текста, тэг <ul>…<⁄ul> — что элемент является перечнем, тэг <blockquote>…<⁄blockquote> — что элемент является цитатой и т. д.
В HTML есть также тэги, управляющие внешним видом отдельных элементов: например, тэг <i>…<⁄i> выделяет текст курсивом, тэг <font>…<⁄font> изменяет различные параметры шрифта, а тэг <br ⁄> вставляет перевод строки. Все такие тэги не относятся к структурной разметке, и применять их не рекомендуется. Все, что касается оформления веб-страницы, ее внешнего вида, можно и нужно делать с помощью CSS.
Если даже вы пользуетесь блогом или сайтом на cms вам нужно знать часто используемые html-коды (html-теги) наизусть. Например для форматирания текста используются особые теги, для вставки изображений и других объектов другие теги, и не всегда все теги присутствуют в визуальном редакторе.
Самые основные html-коды
Html-код самого простого сайта (веб-страницы):
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”>
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY>
Текст страницы
</BODY>
</HTML>
В коде сайтf регистр букв значения не имеет, можно использовать как “HTML, BODY…” так и “html, body…”
Здесь теги <!DOCTYPE…> и <HTML> служат для того чтобы код опознался как html.
<HEAD> - говорит о том что начинается “голова” страницы - заголовок и техническая информация.
<TITLE>Название страницы</TITLE> - название страницы вводится так. Что написано между этими двумя тегами то и будет отображено в заголовке браузера.
</HEAD> - “голова” страницы закончилась.
Как вы видели, теги бывают открывающие <тег> и закрывающие </тег>. Есть теги, которые не нужно закрывать. Некоторые теги даже не закрытыми не вызывают ошибок, но всегда закрывайте если они должны закрываться.
<BODY>Текст страницы</BODY> - Здесь все основные материалы - текст, картинки, ссылки и т.д.
</HTML> - документ закончился. Как правило, это самый последний тег.
Теги форматирования текста
<h1>-<h6> - это заголовки.
Чем меньше цифра, тем больше будет текст в заголовке, можно настроить размер каждого вида заголовка. Считается что теги <h1>, <h2> самые “любимые” теги поисковиками, через эти теги поисковики определяют “про что страница”. Теги <h1>-<h6> обязательно должны закрываться.
Примеры:
<h2>Тег заголовка второго уровня</h2>
Заголовок второго уровня
<h4>Заголовок четвертого уровня</h4>
Заголовок четвертого уровня
Еще для форматирования текста часто служат теги - <b>, <strong>, <em>, <i>, <u>.
<b>Текст выделится жирным</b>
<strong>Текст выделится жирным (логическое выделение)<strong> - тег аналог <b>
<em>Наклонный текст</em> - аналог<i></i>
<u>Подчеркнутый текст</u>
<strike>Перечеркнутый текст</strike>
<big>Увеличенный</big> и <small>уменьшенный</small> текст по сравнению с текущим.
<sup>Верхний индекс</sup> - X2
<sub>Нижний индекс</sub> - X2
<tt>Моноширинный текст</tt> - как печатная машинка
Все эти теги двусторонние, то есть должны закрываться. Теги могут использоваться в сочетании. Например:
<b><i><u>Жирный, наклонный и подчеркнутый текст</u></i></b>
Запомните правило: “Теги закрываются в таком порядке, в каком открывались, выше вы видите - biu - uib. Если поменять порядок возможно ничего не измениться, но при сложном форматировании текста у вас будут проблемы.
Перевод строки и текстовые блоки
Теги заголовков (<h1>-</h6>) переводят после себя строку (”жмут enter”), если иное не прописано в таблицах стилей. Когда вы пишите текст в “голом html” ваши переводы строки учитываться не будут, текст будет идти подряд до заголовков либо специальных тегов.
<br> - переводит строку. Закрывающий тег не нужен. Если вам нужен большой разрыв между строками можете использовать несколько таких тегов, например, <br><br><br><br><br> - пять переводов строки.
<hr> - горизонтальная линия:
Во многих тегах могут использоваться специальные атрибуты, например, в теге <hr> можно указать ее толщину:
<hr size=”1″>:
Для форматирования текста также используются двусторонние теги <p>, <div>, <pre>.
<p>Текст</p> - Параграф
<div></div> - По умолчанию также параграф, но создан для сложного форматирования места нахождения контента на странице, используется для верстки через таблицы стилей.
<pre></pre> - отформатированный шрифт. Между этими тегами текст выведится так как напечатам (с пробелами, переводами строки).
Вставка объектов.
Чтобы вставить картинку нужно создать код:
<img src=”http://site.ru/image.png“>
Где http://site.ru/image.png адрес картинки.
Чтобы вставить ссылку:
<a href=”http://site.ru/“>Перейти на Site.ru</a>
Где http://site.ru/ - сайт, на который ведет ссылка, Перейти на Site.ru - название ссылки.
У ссылки есть несколько атрибутов, например target=”_blank” - заставит ссылку открыться в новом окне.
Вместо текста ссылки можно вставить картинку, тогда код такой:
<a href=”http://site.ru/” target=”_blank”><img src=”http://site.ru/image.png” border=”0″></a>
В коде ссылки я вставил атрибут target=”_blank” - ссылка откроется в новом окне, а в коде картинки border=”0″ - у картинки не будет обрамления.
Списки
Списки создаются следующими html- кодами:
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>
Таблицы
Таблицы более сложный элемент чем эти html-теги, им можно посвятить целый пост, здесь просто покажу пример кода самой простой таблицы:
<table>
<tr>
<td>
Содержание
</td>
</tr>
</table>
Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так:
<table><tr><td>Содержание</td></tr></table>
|
