Каждая веб-страница имеет общую структуру основных кодов 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=»https://mehelps.ru/http://site.ru/image.png«>
http://site.ru/image.png — это адрес картинки.
Чтобы вставить ссылку:
<a href=»https://mehelps.ru/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>
Это основная структура станицы сайта. Зная азы, можно переходить и к более сложному.
Статья была полезной?