Теги физического форматирования HTML текста
Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Тег отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги , или . Пример:
Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:
Пример подчеркивания текста.
Теги и отображают текст, перечеркнутый горизонтальной линией. Отмененный тег. Вместо него следует использовать тег . Например:
Пример зачеркнутого текста.
В настоящее время тег поддерживается не всеми браузерами, поэтому пока рекомендуется использовать в сочетании с тегом . А именно, внутрь тега-контейнера можно вложить пару тегов
Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например, . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Тег выводит текст шрифтом меньшего размера. Поскольку в HTML нет тега, противоположного по действию тегу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег отображает мигающий текст. Этот тег не входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные разработчики крайне редко прибегают к использованию этого тега, поскольку наличие на странице мигающих символов раздражает многих пользователей.
Тег-контейнер является аналогом тега уровня блока . Может использоваться в тех случаях, когда требуется отметить фрагмент текста для задания его свойств, и при этом не удается использовать никакой другой структурный тег форматирования.
Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.
Рис. 1.3. Использование вложенных тегов форматирования текста
Теги форматирования могут быть вложенными друг в друга. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере. На рис. 1.3 показан пример использования вложения элемента курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:
А здесь текст полужирный и курсивный
Тег указывает параметры шрифта. Он относится к тегам физического форматирования уровня текста.
Назначение параметров шрифта непосредственно в тексте документа нарушает основную идею разделения содержательной части документа и описания формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а также тег отнесены к отмененным. Их дальнейшее применение не рекомендуется.
Несмотря на эти грозные предупреждения, видимо, для самых простых документов физическое форматирование можно считать допустимым. Кроме того, начинать обучение основам форматирования проще всего именно с правил непосредственного указания форматов элементов. До стилевого оформления начинающий разработчик должен еще дорасти.
Тег относится к последовательным элементам, поэтому не может включать в себя элементы уровня блока, например, или .
Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.
Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Это весьма полезное свойство, так как в разных системах могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным качеством является задание предпочтения использования шрифтов. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т. д.
Приведем пример использования параметра FACE:
Текст, записанный шрифтом по умолчанию.
Пример задания названия шрифта.
Для разметки заголовков используются теги , , , , и . Эти теги требуют соответствующего закрывающего тега. Как правило, чем выше уровень заголовка, тем больше информации для читателя содержит этот раздел. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги . относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него осуществляется вставка пустой строки.
Содержимое заголовков оказывают сильное влияние на поисковые результаты, по этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.
Теги заголовков могут задаваться с атрибутом горизонтального выравнивания align, который может принимать следующие значения:
- right – позиционирование заголовка по правой границе документа;
- left – позиционирование заголовка по левой границе документа;
- center – позиционирование заголовка по центру документа.
По умолчанию заголовки выравниваются по левому краю страницы.
Горизонтальные линии.
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы.
Тег
позволяет провести горизонтальную линию в окне браузера. Этот тег не является контейнером, поэтому не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Тег
может иметь следующие атрибуты:
- align – выравнивание линии, может принимать значения left, center, right;
- color – указывает цвет линии;
- noshade – рисует линию без трехмерных эффектов;
- size – устанавливает толщину линии в пикселях;
- width – устанавливает длину линии, указывается в пикселях или процентах от ширины окна браузера.
Использование предварительно отформатированного текста.
В HTML-документах для разбивки текста по абзацам и обеспечения при-нудительного перевода строки следует пользоваться специальными тегами. Однако бывают случаи, когда в HTML-документ необходимо включить текст, уже имеющий форматирование, выполненное традиционным способом при помощи символов перевода строки, необходимого количества пробелов, символов табуляции и т. д. Для решения таких задач предусмотрен специальный тег-контейнер , определяющий предварительно форматированный (преформатированный) текст.
Текст, размеченный тегом , будет отображаться в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения всегда будет использоваться моноширинный шрифт.
Текст внутри контейнера может содержать элементы форматирования уровня текста, кроме следующих: , , , и . Недопустимо внутри преформатированного текста задавать элементы форматирования уровня блока, например, теги заголовков. Тег абзаца по логике вещей также не должен встречаться внутри преформатированного текста, однако если встречается, то будет реализовывать переход на новую строку (без образования пустой).
HTML форматирование текста
Вид текста на экране зависит от того, какие HTML теги были использованы для его форматирования. Теги форматирования делятся на две категории: теги физической разметки, которые отвечают за стилевое оформление (жирное начертание, курсив, шрифт и т.д.) текста, и теги логической разметки, которые несут смысловую нагрузку (например, дают понять поисковым системам по каким словам необходимо ранжировать веб-страницу).
Рассмотрим подробно теги форматирования и объясним нюансы их применения.
Теги —
Теги — используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от до . используется для обозначения самого важного, а наименее важного заголовков.
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Заголовок первого уровня h1> h2>Заголовок второго уровня h2> h3>Заголовок третьего уровня h3> h4>Заголовок четвертого уровня h4> h5>Заголовок пятого уровня h5> h6>Заголовок шестого уровня h6> body> html>Результат
Теги и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мы использовали тег <strong>, чтобы выделить strong> этот важный фрагмент текста strong>. p> body> html>Результат
Теги и
Пример
html> html> body> p>Это обычный абзац p> p>Важный фрагмент текста выделяется em>курсивным начертанием em> p> body> html>Результат
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>Результат
Как вы заметили, все пробелы и переносы строк сохранены в браузере.
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Изучайте язык гипертекстовой разметки HTML на сайте mark>W3Docs.com mark>. p> body> html>Результат
Тег
Пример
html> html> head> title>Использование тега SMALL title> head> body> p>Процентная ставка всего 10%* p> small>* - в день small> / body> html>Результат
Тег и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мой любимый цвет del>зеленый del> ins>синий ins>! p> body> html>Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>s>Я учусь в школе s> p> p>Я учусь в институте. p> body> html>Результат
Содержимое обоих тегов браузеры отображают как перечеркнутый текст. Несмотря на внешнюю схожесть, теги не могут заменять друг друга.
Тег и
Тег используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Ее любимые цветы del>фиалки del> ins>подснежники ins>․ p> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> head> body> p>Здесь мы использовали u>элемент <u> u>. p> body> html>Результат
Теги и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Формула воды -Hsub>2 sub>O, а формула спирта - Csub>2 sub>Hsub>5 sub>ОН p> p>E = mcsup>2 sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. p> body> html>Результат
Тег
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>dfn>HTML dfn> (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML p> body> html>Результат
Теги
,
и
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Это первый абзац p> p>Это второй абзац p> body> html>Результат
Пример
html> html> head> title>Заголовок документа title> head> body> h1>Пример использования тега <br> h1> p> Внутри абзаца мы можем вставить тег <br />, br /> чтобы перенести часть текста на другую строку в случае необходимости. p> body> html>Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Футбол h1> p>Командный вид спорта, в котором целью является забить мяч в ворота соперника. p> hr> h1>Баскетбол h1> p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника. p> body> html>