Главная » 2013 » Апрель » 29 » Html-коды. Самые часто используемые html-теги
02:54
Html-коды. Самые часто используемые html-теги

 
Если даже вы пользуетесь блогом или сайтом на cms вам нужно знать часто используемые 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>

Таблицы

Таблицы более сложный элемент чем эти html-теги, им можно посвятить целый пост, здесь просто покажу пример кода самой простой таблицы:

<table>
<tr>
<td>
Содержание
</td>
</tr>
</table>

Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так:

<table><tr><td>Содержание</td></tr></table>

 

Информация для новичков:

Перед тем как  ознакомиться с содержимым, прочтите статью

 "Сайтостроение". Создание сайтов для начинающих

или нужны хотя бы базовые знания HTML!

 
 
 


HTML - Оформление текста:

Перечёркнутый текст: ТЕКСТ
<s> ваш текст </s>


Подчёркнутый текст: ТЕКСТ
<u> ваш текст </u>


Полужирный текст: ТЕКСТ
<b> ваш текст </b>


Полужирный крупный: ТЕКСТ
<big> ваш текст </big>


Курсивный текст: ТЕКСТ
<i> ваш текст </i>


Маленький текст: текст
<small> ваш текст </small>


Неразрывный пробел:
&nbsp;


Центрирование:

текст (картинка) по центру

 


<center>ваш текст (картинка) </center>

Выравнивание текста по правому краю поста:
<div align=right> ваш текст </div>

Выравнивание текста по всей ширине поста:
<div align=justify> ваш текст </div>

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>

Бегущая строка (рекомендую Бегущая строка):
Также бегущая, как олень, строка:
<marquee> ваша бегущая строка</marquee>
Вместо текста можно вставить картинку:

Код этой картинки:
<marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

Сноска вверху: ТЕКСТсноска
<sup>ваша сноска</sup>


 

Сноска внизу: ТЕКСТсноска
<sub>ваша сноска</sub>


 

Линия:

_____________________________________________

ее код: <hr>
Ударение:
Cтавим после нужной буквы:
&#769;


«Закрепитель» (фиксирует текст так, как и расположите его в поле поста):

Я
 Пешу
 Лесинкой!!!

<pre>ваш текст</pre>


 

РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2
<font size="-2"> уменьшенный текст </font>
Увеличить текст на 1 пункт: текст
<font size="+1"> увеличить текст на 1 пункт </font>

Увеличить текст на 2 пункта: текст

<font size="+2"> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size="+3"> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size="+4"> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст
<font color="red"> красный текст </font>
ЖЕЛТЫЙ: желтый текст
<font color="yellow"> желтый текст </font>
ФИОЛЕТОВЫЙ: фиолетовый текст
<font color="purple"> фиолетовый текст </font>
ЗЕЛЕНЫЙ: зеленый текст
<font color="lime"> зеленый текст </font>
СИНИЙ: синий текст
<font color="navy"> синий текст </font>
ФУКСИЯ: фуксия текст
<font color="fuchsia"> фуксия текст </font>

Таблица «базовых» цветов (вводим «Имя» или «Код»):

 

Имя

Код

Имя

Код

Имя

Код

Имя

Код

aqua

#00FFFF

green

#008000

navy

#000080

silver

#C0C0C0

black

#000000

gray

#808080

olive

#808000

teal

#008080

blue

#0000FF

lime

#00FF00

purple

#800080

white

#FFFFFF

fuchsia

#FF00FF

maroon

#800000

red

#FF0000

yellow

#FFFF00


 

Выбери цвет и скопируй его код:

Код для вставки виджета себе здесь

ВИД ШРИФТА:

Шрифт этого текста «Monotype Corsiva»
<font face="Monotype Corsiva"> текст </font>


Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
Шрифт этого текста «Monotype Corsiva»

 

код этого текста:
<font face="Monotype Corsiva" size="+2" color="fuchsia"> текст </font>

Оформление ссылок
(рекомендую спец. страницу Ссылки):

Как вставить ссылку на веб-страницу:
<a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>


Как сделать, чтобы картинка была ссылкой на веб-страницу:
<a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a>


Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
<a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a> 


 

Спец. теги ЖЖ:

Элементарный жж-кат (с "Read more”):
<lj-cut> ТЕКСТ </lj-cut>


Для тегов ЖЖ отдельная страница:
htmlka.com/livejournal


На нее также можно зайти, кликнув на Livejournal вверху справа в сайдбаре.


 

Публикация картинок:


Раздел о публикации картинок перемещен на страницу:
htmlka.com/pictures
Она же доступна в сайдбаре сбоку в разделе Страницы: Изображения.


 

Окошечко для вставки кода, типа:
ВАШ КОД
получаем так:
<textarea rows="2" cols="60"> ВАШ КОД </textarea>
где rows и cols определяют площадь окна

Можно сделать покрасивше:

<textarea>ВАШ КОД</textarea>

<textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;">КОДЫ </textarea>

Некоторые спецсимволы:

Спецсимвол

Вид в браузере

&lt;

<

&gt;

>

&amp;

&

&quot;

"

&reg;

®

&trade;

™

&copy;

©

&hearts;

♥

&times;

×

&asymp;

≈

&bull;

•

&deg;

°
(градус)

много символов

Если вы видите это: ★, ☠, ☭ — есть смысл посмотреть «Прочие» спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов.

Он-лайн аудио-плееры

Вставить файл mp3 в блог:
- читайте Вставка Медиа-файлов
 
Источник, автор: htmlka.com

Материал скопирован и доступен всем пользователям.
ПОРТАЛ НЕ НЕСЕТ ОТВЕТСТВЕННОСТИ ЗА ССЫЛКИ И ИСТОЧНИК МАТЕРИАЛА.
«WebDirect» © Все права защищены
Просмотров: 23893 | Добавил: WebDirect | Теги: Сайтостроение-HTML-коды | Рейтинг: 5.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]