Как сделать текст в хтмл


Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл



Указую господам сенаторам, чтобы речь держать не по-писаному,
а своими словами, дабы дурь была видна каждого!
Пётр Первый.

html текст

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

    Если ты последовал моим советам и поэкспериментировал с цветом текста, фона и т. д., то уже должен знать, что простой, неотформатированный текст можно добавить в html-страницу, просто поместив его между тегами < BODY> и < /BODY>.

    Но такой текст не всегда удовлетворяет задумке создателя сайта и возникает необходимость какую-то часть текста как-то выделить или применить форматирование текста для подчеркивания его смыслового наполнения. Самое главное тут — соблюдать меру и следить за тем, чтобы всё было уместно и по делу. Даже стихами заговорил.

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


Содержание:

§ 1. Теория

    Здесь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в .

    Допустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в , а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь.

    В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и , только «заточенные» под использование в текстовых редакторах.

    Но, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим.

§ 2. Сами теги для форматирования

    Предварительно отформатированный текст можно вставить в html-страницу с помощью тегов < pre> и < /pre>. Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу.

    Самыми популярными тегами для форматирования текста являются:

  • < B>< /B> — используется для выделения текста полужирным.

    Примечание. Во многих последних (по времени выпуска) вместо него рекомендуется использовать тег < strong>< /strong>. Я не знаю, почему это так, но для «жирного» выделения использую рекомендуемый тег strong.



  • < I>< /I> — используется для получения курсивного текста. Вместо этого тега рекомендуется использовать тег < em>< /em>.

  • < U>< /U> — позволит подчеркнуть текст. Тут главное, чтобы пользователь не перепутал подчёркнутый текст с ссылкой.

  • < STRIKE>< /STRIKE> — делает текст перечёркнутым.

  • < SUB>< /SUB> — предназначен для выделения подстрочного текста (нижний индекс). Этот тег может быть полезен, например, для записи химических формул. Вот этот код

    H< sub>2< /sub>O

    даст нам вот такую формулу

    H2O.


  • < SUP>< /SUP> — нужен для выделения надстрочного текста (верхнего индекса). Например, для записи возведения в степень: пишем

    (a+b)< sup>2< /sup>,

    получаем

    (a+b)2.


    Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:

< strong>H< sub>2< /sub>O< /strong> — это < strong>< em>формула воды.< /em>< /strong>

при просмотре в браузере будет выглядеть так:

H2O — это формула воды.

§ 3. Абзацы

    В HTML абзацы создаются с помощью тега < P>. Использование этого тега приводит к вставке одной пустой строки и размещению находящегося за ним видимого элемента html-страницы в следующей строке. Например, если мы напишем:

< p>Это первый абзац.< /p> < p>Это второй абзац.< /p>

    То выглядеть это будет так:

Это первый абзац.

Это второй абзац.

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

§ 4. Выравнивание текста

    Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

< p align="center">Текст по центру< /p>

выровняет текст по центру:

Текст по центру

    А этот код:

< p align="right">Выравнивание текста по правому краю< /p>

выровняет текст по правому краю

Выравнивание текста по правому краю

    Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:

< p>По умолчанию текст выравнивается по левому краю< /p>

выровнит текст по левому краю

По умолчанию текст выравнивается по левому краю

§ 5. Перенос строки и горизонтальная черта

    Если нужно обеспечить переход на новую строку без вставки пустой строки (это происходит, когда ты в текстовом редакторе нажимаешь Enter), то используется тег < BR>. Например, html-код

1. Первая строка. < br> 2. Вторая строка.

в браузере будет выглядеть так:

1. Первая строка.
2. Вторая строка.

    У < BR> нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег < BR> несколько раз подряд.

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

  • size — толщина полосы;

  • width — ширина полосы;

  • align — выравнивание;

  • color — цвет полосы;

  • noshade — атрибут, не имеющий значений. Если указан, то создается сплошная чёрная полоса без тени.

    Например, html-код:

< hr align="center" size="5" width="50%" color="#3399ff">

в браузере примет вид

    Ширину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана).

§ 6. Заголовки

    Для задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:

  • < H1>< /H1> — заголовок первого уровня

  • < H2>< /H2> — заголовок второго уровня

  • < H3>< /H3> — заголовок третьего уровня

  • < H4>< /H4> — заголовок четвёртого уровня

  • < H5>< /H5> — заголовок пятого уровня

  • < H6>< /H6> — заголовок шестого уровня

    Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1> (им выделено название этого урока), а самый маленький < H6>< /H6>. Теги заголовков имеют атрибуты:

  • align — выравнивание текста заголовка на странице (значения те же, что и для выравнивания обычного текста);

  • title — всплывающая подсказка, которая появляется при наведении мыши на заголовок.

    Например, код HTML:

< h4 align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня< /h4>

в браузере будет выглядеть так:

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

§ 7. Работа со шрифтами

    Для форматирования непосредственно шрифтов, в HTML есть тег < FONT>< /FONT>. У этого тега существуют следующие атрибуты:

  • color — цвет текста шрифта;

  • face — гарнитура шрифта;

  • size — размер текста шрифта. Может быть задан абсолютным (от 1 до 6) либо относительным значением (от +1 до +6 и от -1 до -6). По-умолчанию, размер текста 3. Если указать < font size="+1">< /font>, то текст, размещённый между тегами < font> и < /font>, будет отображаться увеличенным на 1 по сравнению с другим текстом. Аналогично и с -1.

§ 8. Создание списков в HTML

    В HTML списки создаются с помощью тегов < OL>< /OL> и < UL>< /UL>. В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом < LI>< /LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type.

    В нумерованном списке маркеры (значения атрибута type) такие:

  • 1 — нумерация арабскими цифрами (по умолчанию);

  • A — большими латинскими буквами по алфавиту;

  • a — маленькими латинскими буквами;

  • I — большими римскими цифрами;

  • i — маленькими римскими цифрами.

    Например, HTML-код

< ol type="a">
< li>Первый элемент.< /li>
< li>Второй элемент.< /li>
< li>Третий элемент.< /li>
< /ol>

браузер покажет так:

  1. Первый элемент.
  2. Второй элемент.
  3. Третий элемент.

    В маркированном списке значения атрибута type такие:

  • disc — закрашенный кружок (по-умолчанию);

  • circle — незакрашенный кружок;

  • square — закрашенный квадратик.

    Например, HTML-код

< ul type="square">
< li>Первый элемент.< /li>
< li>Второй элемент.< /li>
< li>Третий элемент.< /li>
< /ul>

в браузере выглядит так:

  • Первый элемент.
  • Второй элемент.
  • Третий элемент.

    Как и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:

< ol type="a">
 < li>Первый элемент.< /li>
 < li>
  < ul type="square">
   < li>Второй элемент.< /li>
   < li>Третий элемент.< /li>
   < li>Четвёртый элемент.< /li>
  < /ul>
 < /li>
 < li>Пятый элемент.< /li>
< /ol>

браузер покажет так:

  1. Первый элемент.
    • Второй элемент.
    • Третий элемент.
    • Четвёртый элемент.
  2. Пятый элемент.

§ 9. Заключение

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

    Ну и напоследок, для закрепления всего вышеизложенного, в качестве самостоятельной работы, изучи вот этот HTML-код:

< font color="#FF0000" size="+3">< strong>&nbsp;Н< /strong>< /font>

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

    На этом рассказ о тегах HTML для форматирования текста объявляется законченным. Раздел получился довольно большим. Не пытайся выучить все новые теги и атрибуты наизусть, всё равно не получится. Они сами постепенно запомнятся во время работы над созданием сайта.

    В следующем разделе поговорим о том, как вставить картинку в html-страницу.

   


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

    С уважением, (, , , , , ).


Источник: http://www.seoded.ru/beginner/html/text.html


Как сделать текст в хтмл фото


Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл

Как сделать текст в хтмл

Далее: