Онлайн верстка html писем: Конструкторы писем: 18 классных сервисов для создания email

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

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

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

 дает вам ограниченное форматирование
управление с помощью «предварительно отформатированного» текста, и мы посмотрим
вот эти простые механизмы.
 
  HTML-таблицы предлагают более точные
управление позиционированием, которое рассматривается в Главе 13, «Таблицы».
 

 
 В идеале, конечно, презентация должна управляться с помощью стиля
листы.
 
  
 10.7.1. Предварительно отформатированный текст 
  
 Предварительно отформатированный (
) текст уникален тем, что он отображается
точно так же, как он напечатан в исходном коде HTML, включая все
возврат строки и несколько пробелов (во всем другом тексте HTML,
возвращает, а последовательные пробелы просто игнорируются). Предварительно отформатированный текст
всегда отображается моноширинным шрифтом, что позволяет столбцам
символы, чтобы выстроиться правильно.
 
 
 Тот же блок исходного текста был закодирован как
  текст и как телетайп
(), еще один метод указания
моноширинный шрифт. Разница очевидна, как показано на Рис. 10-13 и Рис. 10-14.
 
  
 Рис. 10-13. Предварительно отформатированный текст 
 
 Рис. 10-14. Текст телетайпа 
  
 Тег 
 — единственный HTML-тег, который позволяет
вы знаете  точно  как будет выстраиваться ваш текст, когда
отображается в браузере.  По этой причине он был принят на раннем этапе в качестве
любимый чит для управления выравниванием на веб-страницах. Обратная сторона
заключается в том, что весь текст будет отображаться в Courier.
 
 
 Обратите внимание, что 
 является блочным элементом, что означает
что ему всегда предшествует и за ним следует разрыв строки (некоторые
браузеры также добавляют дополнительное пространство над и под блоком). Для этого
причине невозможно установить текст внутри абзаца как
предварительно отформатирован. Если вам нужно несколько пробелов в предложении,
использовать неразрывные пробелы
( ) вместо этого.
 

  
  
 10.7.2. Предотвращение разрывов строк 
  

Текст и
графика, которая появляется в "без перерыва"
() теги всегда отображаются на одной строке,
и не завернуты в окно браузера. Если строка из
символы или элементы внутри тегов 
очень долго, он продолжается за пределами окна браузера, и пользователи должны прокручивать
горизонтально вправо, чтобы увидеть его, как показано на рис.
   10-15.
 
  
 Рисунок 10-15. Неразрывный текст 
  
 Тег  можно использовать для скрепления
ряд графических элементов, таких как кнопки панели инструментов, поэтому они всегда
отображать как единое целое.
 
 
 Добавление 
 в
Текст с тегом  приводит к разрыву строки.
 
 
 Тег разрыва слова (
) является
эзотерический маленький ярлык, который можно использовать в сочетании с неразрывным
ярлык.  используется для обозначения потенциального
точка разрыва слова внутри тега 
содержание. Когда «неразрывный» сегмент выходит за пределы
окно браузера, тег  говорит об этом
именно там, где разрешено разрывать линию, как показано на рис. 10-16. Он не позволяет длинам строк полностью
из рук.
 
  
 Рисунок 10-16. Использование тега 
 в тексте    
 Следует отметить, что как , так и
 не являются частью HTML 4.01
спецификации, но широко поддерживаются популярными браузерами.
 

  
 10.7.3. Центрирование текстовых элементов 
  
 Есть
два метода центрирования текста
элементы горизонтально на странице: выравнивание
атрибут и
Тег <центр>.  Имейте в виду, что
Тег 
 и выравнивание
атрибут объявлен устаревшим в соответствии со спецификацией HTML 4.01 в
в пользу элементов управления таблицами стилей (хотя браузеры по-прежнему будут
временно поддерживать следующие теги).
 
  
 10.7.3.1. Атрибут align 
  
 Одним из способов центрирования элементов является использование тегов блочного уровня.
выровнять
 атрибут с установленным значением
в центр. Атрибут выравнивания
можно добавить к тегу абзаца (
), любой
 тег заголовка (

через 
), или разделение страницы
(
<дел>). Не забудьте закрыть теги на
конец элемента.
 
 
 На рис. 10-17 каждый элемент расположен по центру
индивидуально, используя align=center.
 
  
 Рис. 10-17. Центрирующий текст 
 
 В качестве альтернативы вы можете заключить все три элемента в
Тег 
 с align=center.
К сожалению, атрибут align в
Тег 
 распознается только Интернетом
Explorer версии 3.0 и выше, а также Navigator версии 4.0 и выше,
так что это не универсальное решение.  Следующий код создает
тот же эффект показан на рисунке 10-17:
 
 
 
  
 
 
Выбор лучших продуктов
 
Хорошая еда приносит больше, чем непосредственное удовольствие. Это ключ к твоему
здоровье и жизнеспособность семьи, влияя на то, как молодые люди растут,
то, как вы себя чувствуете сейчас, и крепкое здоровье в последующие годы.
Есть простые советы, которые помогут вам спланировать интересные блюда.
и разнообразны.
  
  
 10.7.3.2. Тег 
 Расширение HTML, тег
 чрезвычайно прост в использовании (и по этой причине он используется
обычно) -- просто поместите и теги вокруг разделов страницы
вы хотели бы быть в центре, как показано в следующем коде. Этот
работает так же, как
, но
лучше поддерживается. Тег имеет
объявлен устаревшим в спецификации HTML 4.01.
 Вы можете разместить всю свою страницу в
теги
 или применить его только к определенным
абзацы. Тег может быть только
применяется к блочным элементам, так как центрировать текст нелогично
в потоке текста, выровненного по левому краю.
  <ЦЕНТР> 
 
Выбор лучших продуктов
 
Хорошая еда приносит больше, чем непосредственное удовольствие. Это ключ к твоему
здоровье и жизнеспособность семьи, влияя на то, как молодые люди растут,
то, как вы себя чувствуете сейчас, и крепкое здоровье в последующие годы.
Есть простые советы, которые помогут вам спланировать интересные блюда.
и разнообразны.
    
 10.7.4. Выравнивание по правому и левому краю 
 Выравнивание
Атрибут также используется для указания левого
выравнивание и выравнивание по правому краю, установив для него значение
влево или вправо соответственно.
Выравнивание остается в силе до тех пор, пока браузер не встретит другое
инструкция по выравниванию в исходниках. Вы можете разорвать строки с помощью 
 внутри выровненного абзаца без
потеря выравнивания. На рис. 10-18 показаны эффекты
установки атрибута влево или
верно. Элементы страницы по умолчанию выравниваются по левому краю.
на языках с письмом слева направо.
 Рисунок 10-18. Выравнивание по левому и правому краю 
 СОВЕТ 
 Текст, выровненный с переопределением атрибута align
любой центрирующий набор с тегом
.
 10.7.5. Создание отступов с помощью HTML 
 К сожалению
 , нет специальной функции для
создание текста с отступом в HTML, поэтому это стало обычным явлением в Интернете
дизайнерам обходиться существующими тегами, которые имеют побочный эффект
создание отступа. В этом разделе рассматриваются наиболее популярные
«читы» для отступа текста, используя только форматирование текста
теги.
 Имейте в виду, однако, что это плохая HTML-форма для произвольной маркировки
элементы только для их функций отображения (таких как отступы).
рекомендуемый метод — использовать таблицы стилей для указания отступов полей
(это также гораздо более точный метод). Вы также можете достичь
отступы с помощью таблиц (см. главу 13, «Таблицы»). Некоторые дизайнеры
поместите прозрачную графику в текст, чтобы создать пустое пространство, но
это настоятельно не рекомендуется.
 Следующие методы представлены в духе предоставления
подробный обзор текущих HTML-решений, а также потому, что вы также можете
увидеть их, созданные с помощью инструментов разработки WYSIWYG. Их включение не
означает одобрение «старых способов».
 10.7.5.1. 
 Элемент blockquote предназначен для
используется для длинных цитат, но уже давно является фаворитом для
добавление пробелов вдоль левого и правого полей блока
текст. Браузеры обычно добавляют примерно 40 пикселей пространства между
поле браузера (, а не  граница окна) и
левый и правый края элемента цитаты, как показано на рис. 10-19.
 Рис. 10-19. Выделение текста с помощью 
 Есть несколько вещей, которые вы должны знать при использовании блок-кавычек. Некоторый
ранние браузеры отображали материал цитаты курсивом, что делало его
трудно читать с экрана. Кроме того, если вы планируете размещать выровненные
изображения в цитате, имейте в виду, что браузеры несовместимы
в том, как они отображают изображения в блок-кавычках. Некоторые согласовывают
графика с отступом на полях цитаты; другие выравнивают изображение
с обычными полями текста абзаца. Это хорошая идея
протестировать в разных браузерах.
 10.7.5.2. Создание отступов с элементами списка 
 Некоторые веб-авторы (и инструменты разработки WYSIWYG) используют преимущества
автоматический отступ, который происходит, когда вы указываете текст как
список. Два следующих метода являются синтаксически неправильными и
следует избегать, но в крайнем случае их можно использовать для создания
отступ от левого края окна браузера. Любой подход
дает результат, показанный на рисунке 10-20.
 Рис. 10-20. Текст с отступом 
  A
 без позиций 
 Пометка текстового элемента как ненумерованного списка устанавливает текст в
левый отступ. Пока вы не добавите элементы списка
(
) в списке маркеры не отображаются.
 <УЛ>
Успешная жарка во фритюре во многом зависит от правильного
температура масла. ...
 
  А
 без срока 
 Определение (
) в списке определений
(
) также устанавливается со стандартным левым
отступ. Можно исключить термин из списка. я
просмотренные списки определений, установленные в списках определений, для создания более глубоких
уровни
 из
отступ (это некрасиво, но работает).
 

Успешная жарка во фритюре во многом зависит от правильной температуры масла. ...

 
 10.6. Списки
 10. 8. Ссылки на сущности персонажей
 Copyright © 2002 O'Reilly & Associates. Все права защищены.