Пример 3

Форматирование шрифта

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

Физические стили

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

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

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

От английского emphasis — акцент.

.

От английского strong emphasis — сильный акцент.

Рекомендуется использовать для фрагментов исходных текстов.

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

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

От английского variable — переменная. Рекомендуется использовать для написания имен переменных.

Пример

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

Шрифтовое выделение фрагментов текста

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

Кроме того, существует ряд логических стилей:

EM - от английского emphasis - акцент
STRONG - от английского strong emphasis - сильный акцент
CODE - для фрагментов исходных текстов
SAMP - от английского sample - образец
KBD - от английского keyboard - клавиатура
VAR - от английского variable - переменная

Источник

Стилизация стихотворения с помощью CSS3-селекторов

Селекторы стандарта CSS3 имеют поистине безграничные возможности для выделения HTML-элементов без создания дополнительной разметки (которая практически всегда применялась в предыдущих версиях CSS).

В этой статье я собираюсь менее чем за 5 минут выполнить стилизацию популярного детского стихотворения “Мерцай, звездочка, мерцай!”, используя CSS3-селекторы.

Кодируем стихотворение

Разметка

В будущей разметке имеются три основных элемента:

• заголовок;
• подзаголовок с информацией об авторе;
• само стихотворение, собственно.

 Twinkle Twinkle Little Star by Jane Taylor, 1806 Twinkle, twinkle, little star, /> How I wonder what you are! /> Up above the world so high, /> Like a diamond in the sky! When the blazing sun is gone, /> When he nothing shines upon, /> Then you show your little light, /> Twinkle, twinkle, all the night. Then the traveller in the dark, /> Thanks you for your tiny spark, /> He could not see which way to go, /> If you did not twinkle so. In the dark blue sky you keep, /> And often through my curtains peep, /> For you never shut your eye, /> Till the sun is in the sky. As your bright and tiny spark, /> Lights the traveller in the dark,— /> Though I know not what you are, /> Twinkle, twinkle, little star. 

Стилизация заголовков

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

body  background: #fff; color: #111; font: 14px Baskerville, "Palatino Linotype", "Times New Roman", Times, serif; text-align: center; > div, h1, h2, p  margin: 0; padding: 0; >

#poem  margin: auto; padding: 20px 0; text-align: left; width: 390px; >

Заголовки стихотворения также разместим по центру страницы и уберем полужирное начертание, присвоенное им по умолчанию:

h1, h2  font-weight: normal; text-align: center; >

Источник

Как выложить стихи на сайт

Стихотворения отличаются от прозаических произведений наличием частых переводов строк. Выкладывая стихи на сайт, следует оставлять одиночный интервал между строками и двойной - между строфами, например, четверостишиями.

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

При размещении стихов на сайте удобно пользоваться HTML-тегом

. Поместите его перед фрагментом текста, а после него расположите закрывающий тег

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

Я написал стихи вчера,
Хочу их миру показать.
Вместо гусиного пера
Решил клавиатуру взять.

Я рад успеху неспроста.
Сижу, гляжу - не оторву
Глаз от экрана. Красота!
Сейчас друзей всех позову.

Если вас устроит необходимость редактирования текста самого стихотворения с целью помещения тегов в каждую строку, оформите его так:

И вот друзья ко мне пришли.

И говорят: «Какой позор!

Тебе, поэт, не стыдно ли

Глядеть с улыбкой в монитор?»

Тогда я на F5 нажал -

На комментарии взглянуть,

И с удивленьем прочитал

Короткий комментарий: «ЖУТЬ!»

Здесь тег

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

Если на сайте используется система управления содержимым (CMS) MediaWiki или подобная, для размещения стихотворений используйте тег . Закрытие его является обязательным. Действует он аналогично тегу в языке HTML, но не влияет на вид шрифта. Например:

Я два часа потом сидел,
Уныло опустив глаза,
И на стихи свои глядел,
А по щеке текла слеза.

Стихи читатель освистал,
Стихи не приняли друзья.
А я грустил и размышлял:
Ужель и вправду бездарь я?

• Куда я могу послать свои стихи
• Куда отправить свои стихи
• Где можно разместить стихи собственного сочинения
• Где можно опубликовать свои стихи
• Как продать свои стихи
• Как издать книгу стихов
• Как продать стихи в интернете
• Как выпустить сборник стихов
• Как опубликовать своё сообщение
• Как издать сборник стихов
• Как опубликовать свои стихи в газете
• Какие сайты платят за размещение на них рассказов, повестей, романов
• Как продать стихотворение
• Как вступить в союз писателей
• Как издать свои произведения
• Чем особенны современные стихи
• Как продать слова для песни
• Как выложить в интернет книгу
• Как опубликовать свое произведение в журнале
• Куда послать песню собственного сочинения
• Как попасть в Союз писателей РФ
• Как опубликовать в интернете статью
• Как выложить информацию в интернет
• Как заработать денег на стихах

Источник

HTML Тег

Вставить
разрыв строки
в текс,
используя
элемент br.

Определение и использование

Тег
вставляет один разрыв строки.

Тег
полезен для написания адресов или стихов.

Тег
- пустой тег, который означает, что у него нет конечного тега.

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

Поддержка браузеров

Глобальные атрибуты

События атрибутов

Еще примеры

Пример

Использование тега
в стихотворении:

Не бойтесь величия.

Некоторые рождаются великими,

некоторые достигают величия,

а другим навязываются великими.

Связные страницы

Настройки CSS по умолчанию

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник