logo

Основные коды 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>

 Как правило, теги закрываются в таком порядке, в каком открывались. Если поменять порядок возможно ничего не измениться, но при сложном форматировании текста у вас будут проблемы.

 Перевод строки и текстовые блоки

 Теги заголовков (<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 обновлено: Апрель 10, 2017 автором: admin

Оставить комментарий

▲Вверх