|
Форматирование текста в HTMLУказую господам сенаторам, чтобы речь держать не по-писаному,
а своими словами, дабы дурь была видна каждого! Пётр Первый. ![]() В настоящее время, текст в HTML является основным способом подачи информации. Подавляющее большинство сайтов в Интернете состоят именно из текстового контента. Это означает, что создать свой сайт можно при умении, как минимум, читать, а как максимум — писать (в каждой шутке есть доля правды). Если ты в предыдущем уроке последовал моим советам и поэкспериментировал с цветом текста, фона и т. д., то уже должен знать, что простой, неотформатированный текст можно добавить в html-страницу, просто поместив его между тегами < BODY> и < /BODY>. Но такой текст не всегда удовлетворяет задумке создателя сайта и возникает необходимость какую-то часть текста как-то выделить или применить форматирование текста для подчеркивания его смыслового наполнения. Самое главное тут — соблюдать меру и следить за тем, чтобы всё было уместно и по делу. Даже стихами заговорил. Ну что же, рассмотрим наиболее часто используемые теги для форматирования текста в HTML и их атрибуты. Содержание:
§ 1. ТеорияЗдесь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в текстовых редакторах. Допустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в браузере, а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь. В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и теги в HTML, только «заточенные» под использование в текстовых редакторах. Но, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим. § 2. Сами теги для форматированияПредварительно отформатированный текст можно вставить в html-страницу с помощью тегов < pre> и < /pre>. Браузер покажет текст, заключенный между этими тегами в том виде, в каком он был в текстовом редакторе. Я, если честно, ни разу не использовал этот тег на практике, поэтому что-то ещё про него сказать не могу. Самыми популярными тегами для форматирования текста являются:
Все эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий 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> имеет следующие атрибуты:
Например, html-код: < hr align="center" size="5" width="50%" color="#3399ff"> в браузере примет вид Ширину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана). § 6. ЗаголовкиДля задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
Заголовки выделяются полужирным шрифтом и отделяются от остального текста пустой строкой. Самый крупный заголовок < H1>< /H1> (им выделено название этого урока), а самый маленький < H6>< /H6>. Теги заголовков имеют атрибуты:
Например, код HTML: < h4 align="center" title="Всплывающая подсказка. Чтобы увидеть, наведи мышь на заголовок.">Заголовок 4 уровня< /h4> в браузере будет выглядеть так: Заголовок 4 уровня§ 7. Работа со шрифтамиДля форматирования непосредственно шрифтов, в HTML есть тег < FONT>< /FONT>. У этого тега существуют следующие атрибуты:
§ 8. Создание списков в HTMLВ HTML списки создаются с помощью тегов < OL>< /OL> и < UL>< /UL>. В первом случае создается упорядоченный (нумерованный), во втором неупорядоченный (маркированный) списки. Каждый элемент списка выделяется тегом < LI>< /LI>. Браузер отображает элементы списка с новой строки в виде столбца с отступом и маркерами. Вид маркера определяется атрибутом type. В нумерованном списке маркеры (значения атрибута type) такие:
Например, HTML-код < ol type="a"> < li>Первый элемент.< /li> < li>Второй элемент.< /li> < li>Третий элемент.< /li> < /ol> браузер покажет так:
В маркированном списке значения атрибута type такие:
Например, 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> браузер покажет так:
§ 9. ЗаключениеРассказ о том, что нужно для форматирования текста в HTML, был бы не полным без упоминания о спецсимволах. Спецсимволы — это символы, которых либо нет на клавиатуре, либо те, которые браузер принимает за управляющий символ и преобразует в код. Полный список этих символов ты найдешь здесь Спецсимволы HTML. Кроме того, самые главные знания для форматирования текста — это правила грамматики русского языка. Грамотно написанный текст уже наполовину отформатирован. Ну и напоследок, для закрепления всего вышеизложенного, в качестве самостоятельной работы, изучи вот этот HTML-код: < font color="#FF0000" size="+3">< strong> Н< /strong>< /font> и попробуй сам понять, что означают эти теги и их атрибуты, а также, где на этой странице мог бы использоваться этот код HTML. На этом рассказ о тегах HTML для форматирования текста объявляется законченным. Раздел получился довольно большим. Не пытайся выучить все новые теги и атрибуты наизусть, всё равно не получится. Они сами постепенно запомнятся во время работы над созданием сайта. В следующем разделе поговорим о том, как вставить картинку в html-страницу. ⇓ Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим. Поделиться ссылкой на эту страницу в:
|
|
Написание и форматирование текста — работа копирайтером на самых популярных биржах. | Надежный и качественный хостинг покупают заранее. |