«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


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

Группу тегов HTML, предназначенных для работы с текстом можно разделить на две основные подгруппы: теги физического форматирования и теги логического форматирования текста.

Теги физического форматирования физически воздействуют на текст - отвечают за выделение, размещение, оформление текста, которое необходимо для его корректного и одинакового отображения в браузерах.

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

- К тегам физического форматирования относятся следующие теги: Basefont Big Blockquote Br Font H1...H6 Nobr P Pre Small Strike Sub Sup U Wbr

- Эти теги относятся к группе логического форматирования: Abbr Acronym Code Em Kbd Q Samp Strong



Параграфы в HTML - Перенос текста

Важнейшим тегом физического форматирования текста является тег <p>, который предназначен для разбивки текста на параграфы.

Каждый тег <p> создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.

Атрибут align тега <p> позволяет позиционировать абзац по горизонтали, размещая его слева (align="left"), справа (align="right"), располагая по центру (align="center") или выравнивая по ширине (align="justify") окна браузера или родительского элемента.

Текст после тега <br> также начинается с новой строки. Но тег <br> осуществляет лишь перенос строк - он не образует промежутка между ними и его можно использовать внутри тега <p>.

Тег <nobr> наоборот запрещает перенос строк. Если длина строки превысит ширину окна браузера, то появится горизонтальная полоса прокрутки. В свою очередь тег <wbr> разрешает перенос строки внутри тега <nobr>.

Фрагмент кода
<p align="center"> Текст разбит на параграфы. </p>
<p> При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег <br> используется для переноса строки. </p>
Результат

Текст разбит на параграфы.

При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.

Заголовки в HTML. Размер текста

Заголовки в HTML представлены шестью тегами <h1>...<h6>. Каждый из них обозначает заголовок определенного уровня (веса или значимости).

Тегом <h1> выделяют наиболее значимые части документа (тема страницы или статьи), а текст заключенный в него - самый крупный.

Тегами <h2> и <h3> можно выделить подтемы, крупные разделы - как правило их немного на страницы. Текст в таких заголовках уже не такой крупный, как в заголовках высшего уровня.

И так далее, по значимости и иерархии, при помощи тегов <h1>...<h6>, выделяют заголовки различных уровней.

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

Теги <h1>...<h6>, как и тег <p> имеют атрибут align, позволяющий выравнивать заголовок по горизонтали.

Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!

Фрагмент кода
<h1> Заголовок 1-го уровня </h1>
<h2 align=
"center"> Заголовок 2-го уровня </h2>
<h3 align=
"right"> Заголовок 3-го уровня </h3>
<h4 align=
"center"> Заголовок 4-го уровня </h4>
<h5 align=
"right"> Заголовок 5-го уровня </h5>
<h6>
Заголовок 6-го уровня - мелкий шрифт! </h6>
Результат

Заголовок 1-го уровня

Заголовок 2-го уровня

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня
Заголовок 6-го уровня - мелкий шрифт!

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

Размер текста продолжение...

Теги <big> и <small> тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.

В HTML размер шрифта задается в условных единицах от 1 до 7. По умолчанию текст имеет средний размер шрифта, относящийся к 3 условной единице.

Теги <sup> и <sub> предназначены для отображения текста в виде верхнего и нижнего индекса соответственно. При этом размер шрифта уменьшается на единицу.

И наконец рассмотрим тег <font>. Он предназначен не только для изменения размера текста, но и для задания таких его характеристик как цвет и указания семейства шрифтов.

Атрибут size тега <font> задает размер шрифта в условных единицах от 1 до 7, атрибут color предназначен для задания цвета (Цвет можно задать двумя способами (подробнее здесь...)), и атрибут face определяет семейство шрифтов (подробнее здесь...).

Фрагмент кода
<p> <big> Увеличение </big> и <small> уменьшение </small> текущего размера шрифта на одну условную единицу.</p>

<p>
Индекс <sup> верхний....... </sup> и Индекс <sub> нижний....... </sub> в HTML.</p>

<p>
Изменим характеристики текущего шрифта <font color="red" size="+2" face="Arial, Helvetica, sans-serif"> при помощи тега font </font></p>
Результат

Увеличение и уменьшение текущего размера шрифта на одну условную единицу.

Индексверхний....... и Индекснижний....... в HTML.

Изменим характеристики текущего шрифта при помощи тега font

Тег <basefont> предназначен для задания тех же свойств текста, что и тег <font>. Отличие в том, что тег <basefont> может располагаться как в теле, так и в голове документа. При этом он определяет свойства текста для всего документа, за исключением текста, расположенного в теге <font>.

Тег <basefont> поддерживается только браузером Internet Explorer. Его использование не рекомендовано. Впрочем как не рекомендуется и применение тега <font>!

Изучайте CSS и работайте со стилями!

Гарнитура шрифта

По начертанию шрифт может отличаться постановкой - прямой или курсив, и насыщенностью (плотностью) - светлый и жирный.

По умолчанию в браузере Вы видите светлый текст прямой постановки. Тег <em> позволяет отобразить текст курсивом, а тег <strong> сделать его жирным.

Фрагмент кода
Изменим начертание шрифта: <em> его постановку</em> и <strong> насыщенность!</strong>
Результат

Изменим начертание шрифта: его постановку и насыщенность!

Моноширинный шрифт

Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.

Шрифты этого семейства отличаются тем, что все буквы имеют одинаковую ширину.

В HTML несколько тегов отображают текст моноширинным шрифтом.

Один из них - тег физического форматирования текста <pre> - кроме этого, отображает текст в браузере со всеми пробелами между словами (по умолчанию браузеры воспринимают несколько пробелов, следующих друг за другом, как один).

Остальные теги HTML, отображающие текст моноширинным шрифтом, относятся к тегам логического форматирования текста. Другое их назначение в том, что они предоставляют разного рода информацию, для поисковых систем и других программ, о заключенном в них тексте:

- тег <code> - отображает текст, который является программным кодом;

- тег <kbd> - обозначает текст, который набирают на клавиатуре или для названия клавиш;

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

Фрагмент кода
<p> Програмный код: <code> FOR i=1 TO 20 </code> </p>
<p>
Названия клавиш: <kbd> Alt+F1 </kbd> </p>
<p>
Результат скрипта: <samp> Hello, PHP! </samp> </p>
<p>
Все пробелы между словами: <pre>Один Два  Три   - Попробуйте сами!</pre> </p>
Результат

Цитаты в HTML. Подчеркивание и перечеркивание текста

Тег <u> предназначен для подчеркивания текста, а тег <strike> для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.

В каких случаях Вы будете использовать эти теги - решать Вам!

Фрагмент кода
<p> <u> Подчеркнутый </u> и <strike> перечеркнутый </strike> текст - Все!</p>
Результат

Подчеркнутый и перечеркнутый текст - Все!

Оформление цитат

Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.

Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.

В HTLM для этой цели существует специальный тег - <blockquote>. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей).

Фрагмент кода
<p> Как сказал Г. Ламене:  <blockquote> Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества. </blockquote> </p>
Результат

Как сказал Г. Ламене:

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

Несколько логических тегов

Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги <abbr>, <acronym> и <q>.

Теги <abbr> и <acronym> похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.

Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.

Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title).

Тег <q> применяется для заключения текста в кавычки. Этот тег можно использовать при оформлении цитат или при употреблении слов и выражений, которые имеют переносный смысл.

Фрагмент кода
<p> <abbr title="HyperText Markup Language"> HTML </abbr> - это аббревиатура - произносится побуквенно. </p>
<p> <acronym title=
"Научно-исследовательский институт"> НИИ </acronym> - это акроним. Акроним применяется как самостоятельное слово. </p>
<p> Близнецы похожи <q> как две капли воды </q>. </p>
Результат

HTML - это аббревиатура - произносится побуквенно.

НИИ - это акроним. Акроним применяется как самостоятельное слово.

Близнецы похожи как две капли воды .

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

HTML по шагам

Все теги HTML
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта