Самые часто используемые html-теги.Здесь приведены наиболее часто используемые html-коды (html-теги). Для форматирания текста, для вставки изображений и других объектов. Не всегда все теги присутствуют в визуальном редакторе.
Самые основные html-кодыHtml-код самого простого сайта (веб-страницы):
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»>
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY>
Текст страницы
</BODY>
</HTML>
В коде сайта регистр букв значения не имеет, можно использовать как «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>
ТаблицыПример кода самой простой таблицы:
<table><tr><td>Содержание</td></tr></table>
Сокращение ссылки <b><a href='http://1ps.ru/' onClick="this.href='http://go.1ps.ru/pr/p.php?506131'">сокращение ссылки</a></b>
