www.ABC-Color.com
Онлайн раскраски на разные темы
Справка

Самоучитель HTML5

Создание веб страницы.
Статья написана практично коротко, не отвлекаясь на разные специфики и историю.

Теги для текста в HTML 5

С помощью тега мы создаем дизайн текста и рассказываем поисковым машинам о смысле и значения текста.

Про теги

Особенности прописи тегов совместимых с XHTML в HTML 5, рассматривать не будем, работа над спецификациею XHTML прекращена в пользу HTML 5. Зачем путаться!

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

Теги имеют свои стилевые особенности прописанные по умолчанию. Если они вам не подойдут их можно изменить через стили CSS. Но об этом поже.

Теги помогают определить важность текста, для поисковых программ.

<p> - Пример открытого тега
</p> - Пример закрытого тега

<p> </p> Параграф

В основном вставляем текст в параграф.

Закрывающий тег для параграфа не обязателен, интернет браузер может сам определить где кончается текст. Иногда может возникнуть проблема с разметкой если после незакрытого параграфа идет другое не текстовое содержания, тогда лучше закрыть тег. Закрывающий тег не займет много байт информации. В основном его не пишут когда создается громоздкий код, что бы уменьшить вес файла или для удобства при наборе и вставке текста.

<!DOCTYPE HTML>
<meta charset="utf-8">
<p>Я создаю интернет страницу, а это мой текст.</p>

Можем указать на каком языке написан текст.

<!DOCTYPE HTML>
<meta charset="utf-8">
<p lang="ru">Я создаю интернет страницу, а это мой текст.</p>
<p lang="en">I am creating a web page, and this is my text.</p>

Тег параграф по умолчанию имеет отступы сверху и снизу.

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Параграф</title>
<p>Каждый текст состоит из параграфов. Который может состоять с одного и более предложений и по умолчанию параграфы имеют отступы один от одного, больше чем отступы между рядами текста.
<p>По умолчанию нет отступа с лева в первом предложении параграфа, его можно создать в стилях CSS.
<p>Слова переносятся целиком.</p>

Смотреть пример.

Параграф file: ///D:/... Каждый текст состоит из параграфов. Который может состоять с одного и более предложений и по умолчанию параграфы имеют отступы один от одного, больше чем отступы между рядами текста. По умолчанию нет отступа с лева в первом предложении параграфа, его можно создать в стилях CSS. Слова переносятся целиком.

<h1> </h1> ... <h6> </h6> Заголовок.

Заголовок идет в несколько уровней. Первый самый важный, второй менее важный и так до шестого уровня.

По умолчанию, начинается с новой строки слева, и имеет отступ сверху и снизу.

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Веб страницы</title>
<h1>Веб страницы HTML 5</h1>
<h2>Статья про HTML</h2>
<h3>Раздел теги</h3>
<h4>Тег для заголовка</h4>
<p>С каждым уровнем заголовок уменьшается.

Смотреть пример.

Веб страницы file: ///D:/... Веб страницы HTML 5 Статья про HTML Раздел теги Тег для заголовка С каждым уровнем заголовок уменьшается.

На одной интернет странице может быть множество заголовков, как первого уровня, так и других уровней.

Пишите заголовки так, чтобы можно было правильно передать их иерархию.

Не используйте заголовки, как стиль для обычного текста.

Заголовки в первую очередь индексируются и имеют большой вес при выдачи результатов поиска.

Пишите обязательно закрывающий тег, и согласно иерархии, а иначе весь текст станет заголовком.

<br> Перенос строки.

Перенос строки совершается автоматически, исходя с ширины контейнера в котором текст.
Но часто нужно, чтобы строка перенеслась до своего окончания и не имела отступов как у параграфа, для этого используют специальный тег.

Закрывающего тега нет.

<!DOCTYPE HTML><html lang="ru"><head><meta charset="utf-8"><title>Текст</title></head>
<body>
<h1>Текст</h1>
<p>Простой текст состоит с слов которые собраны в предложения, а из предложений складываться параграфы, которые начинаются с абзаца и имеют отступы от другой группы текста.</p>
<h2>Состав текста</h2>
<p>Основные элементы текста:<br> Буквы, цифры и знаки препинания;<br> Слова с союзами собранные в предложения;<br> Параграфы.</p>
</body>
</html>

Смотреть пример.

Текст file: ///D:/... Текст Простой текст состоит с слов которые собраны в предложения, а из предложений складываться параграфы, которые начинаются с абзаца и имеют отступы от другой группы текста. Состав текста Основные элементы текста: Буквы, цифры и знаки препинания; Слова с союзами собранные в предложения; Параграфы.

Аббревиатура

<abbr> </abbr> - тег указывает, что написанные буквы являются аббревиатурою.

С помощью добавления всплывающей подсказки можем расшифровать аббревиатуру, для этого вставляем в открывающийся тег элемент title.

<abbr title="Расшифровка аббревиатуры">Аббревиатура</abbr>

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

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Аббревиатура</title>
<p>Веб страница сделана в соответствии стандартам <abbr title="Консорциум Всемирной паутины">W3C</abbr>.

Смотреть пример.

Аббревиатура file: ///D:/... Веб страница сделана в соответствии стандартам W3C Консорциум Всемирной паутины

<wbr> &shy; Разделение слов.

<wbr> - тег указывает, как разделить слово при переносе в другой рядок.

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Кислоты</title>
<h1>Метил<wbr>пропенил<wbr>ендигидрок<wbr>сицинна<wbr>менила<wbr>криловая кислота</h1>

Смотреть пример.

Кислоты file: ///D:/... Метилпропенил ендигидро ксициннаменила криловая кислота

В браузере при переносе текста не добавляется символ дефиса. При необходимости ставить дефис используйте мнемонический символ мягкого переноса.

&shy; - мнемонический символ мягкого переноса.

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Кислоты</title>
<h1>Метил&shy;пропенил&shy;ендигидрок&shy;сицинна&shy;менила&shy;криловая кислота</h1>

Смотреть пример.

Кислоты file: ///D:/... Метилпропенил- ендигидро- ксициннаменила- криловая кислота

Правописание тегов

Теги могут писаться маленькими и заглавными буквами.

<h1>Текст</h1>
<H1>Текст</H1>

В содержание тега можно вставлять другие теги.

<p><b>Текст с тегами<b> записывается: <br>
для хорошей индексации;<br>
для стилевого оформления</p>

Нельзя записанный тег в тегу, закрывать поза тегом.

<h1>Правильно сложенный <p>текст </h1>должен иметь заглавие.</p>