Самые часто используемые 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> При наведении курсора, внизу страницы будет отображаться короткая ссылка, хотя переход будет по длинной. Мета-тег для роботов.
Вставьте код между тегами <head>
Игнорировать эту страницу <meta name="robots" content "none">
Не индексировать эту страницу в поисковых системах <meta name="robots" content "noindex, follow">
Не индексировать ссылки на этой странице <meta name="robots" content "index, nofollow">
Игнорировать эту страницу только роботу Google <meta name="Googlebot" content="nofollow">
Перенаправление на другую страницу
<meta http-equiv="refresh" content="15; url=http://7lincs.at.ua/">
content - время, в секундах, через которое произойдёт переход url - адрес, на который произойдёт переход
Смотрите также: "Скрипты"
gt; — это заголовки.>
|