Введение в html. Основы написания контента на сайт с хтмл-разметкой. Как сделать список, как сделать текст жирным, как вставить ссылки и картинку в html.

Абзац

Обычно, абзац состоящий из одного или нескольких предложений помещают во внутрь парного тега <p> .. </p>:

<p>Lorem Ipsum is Lird.</p>

Lorem Ipsum is Lird.

Выделение текста

Ниже представлено четыре способа обработки текста с помощью html тегов:

<strong>Жирный</strong>

Жирный

<em>Курсив</em>

Курсив

<u>Подчёркнутый</u>

Подчёркнутый

<s>Зачёркнутый</s>

Зачёркнутый

Цвет текста

В HTML слова или предложения выделять цветом лучше через стили. Чтобы выделить текст цветом с помощью стиля можете использовать следующую конструкцию:

<span style="color:red;">Красный</span><span style="color:#001100;">Зеленый</span><span style="color:#001;">Синий</span>

Красный Зеленый Синий

Ссылка

Это наиболее распространенный тег в HTML документах:

<a href="http://ecoolgino.ru/">Ссылочка</a>

Сайт ecoolgino.ru Если добавить атрибут rel="_blank", то ссылка откроется в новом окне:

<a href="http://ecoolgino.ru/" rel="_blank" title="Текст при наведении">Ссылочка</a>

Ссылочка

Списки

Пронумерованный список:

<ol><li>Первый пункт</li><li>Второй пункт</li><li>Третий пункт</li></ol>

1. Первый пункт
2. Второй пункт
3. Третий пункт

Список без нумерации:

<ul><li>Первый пункт</li><li>Второй пункт</li><li>Третий пункт</li></ul>

Заголовки

При работе с контентом сайта используются заголовки разного уровня с 1 по 6, где 1 самый большой уровень, а 6 самый маленький:

<h1>Заголовок h1</h1><h2>Заголовок h2</h2><h3>Заголовок h3</h3><h4>Заголовок h4</h4><h5>Заголовок h5</h5><h6>Заголовок h6</h6> 

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Из моей практики заголовки первого уровня используются для названия сайта или страница, заголовок второго - для названия страницы или темы, заголовок третьего уровня - для названия подтемы. Остальные заголовки не использую.

Изображения

Для того чтобы вставить картинку в текст, следует использовать тег <img />, следует обратить внимание на то что данный тег не парный у него нет закрывающего тега.

<img src="http://lird.ru/image.jpg" />

Для этого тега обязательно нужно использовать атрибут alt="Описание картинки", этот текст будет показан в том случае если картинка каким-то образом будет не доступна, также этот текст помогает яндексу и гуглу понять что изображено на картинке. Атрибут title="Текст при наведении мышью", используется для вывода текста при наведении мыши на картинку, этот атрибут не обязателен

<img src="http://lird.ru/image.jpg" alt="HTML" title=":)"/>

Если вы хотите выровнять текст справа от картинки, то используйте атрибут align="left", если слева то атрибут align с параметром right

Разделительные знаки

Одиночный тег <br /> используется для перехода на следующую строку. Тег <hr /> добавляет горизонтальную линию

<p>Lorem Ipsum is Lird. <br />Iplusium of nextegeno to olimpact.</p><hr />Fedora la surpim is soet.

Lorem Ipsum is Lird.
Iplusium of nextegeno to olimpact.

Fedora la surpim is soet. В HTML обычно пробелы проглатываются, но если вам нужно срочно поставить несколько пробелов подряд, то используйте следующий код &nbsp; Вот таблица некоторых знаков и символов в HTML