Polytech-soft.com

ПК журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Физическое форматирование html

Основы разработки веб – приложений. HTML – язык разметки гипертекста

Форматирование текста

Логическое и физическое форматирование

Для форматирования текста HTML-документов предусмотрена целая группа тэгов, которую можно условно разделить на тэги логического и физического форматирования.

Тэги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов, такие, например, как программный код (тэг ), цитата (тэг ), аббревиатура (тэг ABBR > ) И Т. П.

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

Фрагменты с логическим форматированием браузеры отображают на экране определенным образом, заданным по умолчанию. Вид отображения никак не связан со структурным типом фрагмента (т. е. именем тэга логического форматирования), но может быть легко переопределен.

Тэги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера.

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

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

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

Тэги логического форматирования текста

Тэг ABBR > отмечает свой текст как аббревиатуру ( ABBReviation ).

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

Тэг ACRONYM > . Так же, как и тэг ABBR > , используется для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,т. е. произносимые слова, состоящие из аббревиатур. Тэг ACRONYM > возможно в будущем станет использоваться для невизуального отображения элементов, например при речевом синтезе.

Данный тэг удобно использовать в сочетании с параметром TITLE , в качестве значения которого можно указать полную версию аббревиатуры. Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом ACRONYM > , будут выдавать полное наименование в виде появляющейся подсказки.

Тег H1. H6

HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег

представляет собой наиболее важный заголовок первого уровня, а тег


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

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

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

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

Тэг отмечает свой текст как небольшой фрагмент программного кода.Как правило, отображается моноширинным шрифтом. Этот тэг не следует путать с тэгом

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

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

Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD , определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой пояс ( Time Zone ).

Тэги физического форматирования текста

Заключенные между этими тег имеет свойства жирного текста. Имеет атрибут title — позывает текст в виде всплывающей подсказки.

Данный тег увеличивает размер отображения текста.Имеет атрибут title — позывает текст в виде всплывающей подсказки.

Служит для выбора шрифта для текста. Атрибуты:

  • size — размер текста от 1 до 7
  • color — цвет текста

Данный тег вставляет в страницу горизонтальную линию. Атрибуты:

  • size — высота и толщина линии
  • width — ширина линии
  • noshade — создание линии без тени
  • color — меняет цвет линии

Данный тег позволяет сделать текст наклонным

Теги физического форматирования HTML текста

Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.

Читать еще:  Задачи по html и css

Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:

Это полужирный шрифт.

Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

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

Тег отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги , или . Пример:

Это моноширинный шрифт.

Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:

Пример подчеркивания текста.

Теги и отображают текст, перечеркнутый горизонтальной линией. Отмененный тег. Вместо него следует использовать тег . Например:

Пример зачеркнутого текста.

В настоящее время тег поддерживается не всеми браузерами, поэтому пока рекомендуется использовать в сочетании с тегом . А именно, внутрь тега-контейнера можно вложить пару тегов

Тег выводит текст шрифтом большего (чем непомеченная часть текста) размера. Вместо данного элемента лучше использовать или теги заголовков, например,

. Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:

Шрифт большего размера.

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

Шрифт меньшего размера.

Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:

Пример шрифта для нижнего индекса.

Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:

Пример шрифта для верхнего индекса.

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

Тег-контейнер является аналогом тега уровня блока

Браузер Microsoft Internet Explorer дополнительно разрешает использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Описание параметров можно найти во второй части книги.

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

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

Это полужирный шрифт.

А здесь текст полужирный и курсивный

Тег указывает параметры шрифта. Он относится к тегам физического форматирования уровня текста.

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

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

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

Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных параметров: POINT-SIZE и WEIGHT, описание которых опускаем.

    Параметр FACE служит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст (если такой шрифт имеется на компьютере). Значением данного параметра служит название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию.

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

    Приведем пример использования параметра FACE:

    Текст, записанный шрифтом по умолчанию.

    Пример задания названия шрифта.

    На рис. 1.4 показано отображение примера браузером Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana, при его отсутствии будет использован шрифт Arial и т. д.

    Рис. 1.4. Отображение примера браузером Netscape

    Этот параметр служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой программы просмотра. Принято считать, что размер «нормального» шрифта соответствует значению 3.

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

    Читать еще:  Задания по html 9 класс

    Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). Последний способ часто используется в сочетании с заданием базового размера шрифта с помощью тега .

    При указании размеров шрифтов записи типа «2» и «+2» (в отличие от большинства языков программирования, в которых унарный знак «+» можно опускать) дают принципиально разный результат.

    Приведем пример, в котором использованы различные способы назначения размеров шрифтов. Отображение примера показано на рис. 1.6.

    Рис. 1.5. Окно настройки параметров шрифтов браузера Netscape

    Рис. 1.6. Назначение размеров шрифтов

    Назначение размеров шрифтов

    Шрифт размера 1

    Шрифт размера 2

    Шрифт размера 3

    Шрифт размера 4

    Шрифт размера 5

    Шрифт размера 6

    Шрифт размера 7

    Этот параметр устанавливает цвет шрифта, который может задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример документа с разноцветным текстом.

    Выбор цвета шрифта

    Текст зеленого цвета

    Текст красного цвета

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

    Тег может появляться также и в разделе документа.

    Заметим, что для тега не существует закрывающего тега.

    В качестве параметров могут использоваться точно такие же параметры, что и для тега , а именно: FACE, SIZE и COLOR. Назначение и правила записи параметров аналогичны.

    Браузер Netscape не допускает применение параметра FACE тега .

    HTML Физическое форматирование

    Физическое форматирование документа (визуальное)
    позволяет создавать различные виды выделения части текста по
    смысловому признаку. Например, можно подчеркнуть часть текста
    с помощью тега U > или же сделать
    наклонное начертание с помощью тега I >.
    По возможности стоит отдавать предпочтение тегам

    логического форматирования документа.

    Перейдем к описанию тегов физического форматирования документа.

    Часто для удобства документ разделяют заголовками разделов с
    помощью тегов Hn > и /Hn >,
    где n может принимать значение от 1 до 6:

    Заголовок 1


    Заголовок 2


    Заголовок 3


    Заголовок 4


    Заголовок 5

    Заголовок 6

    Параграф располагается между тегами P >
    и /P >. Выравнивание задается свойством
    ALIGN . Перевод строки осуществляется с помощью тега
    BR >.

    P ALIGN =» left «>
    Выравнивание по левому краю /P >

    P ALIGN =» center «>

    Выравнивание по центру /P >

    P ALIGN =» right «>
    Выравнивание по правому краю /P >

    P ALIGN =» justify «>
    Выравнивание по ширине страницы.
    Для параграфов, содержащих большое количество текста, этот вариант выравнивания
    выглядит гораздо лучше, не правда ли? /P >

    Текст после BR >
    переходит на новую строчку.

    Начерание текста определяется следующими тэгами:

    B >Жирный /B >

    I >Курсив/наклонный /I >

    U > Подчеркнутый /U >

    STRIKE > Перечеркнутый /STRIKE >

    SUP > Верхний индекс /SUP >

    SUB >Нижний индекс /SUB >

    Шрифт для фрагмента текста можно задать с помощью тега
    FONT > (закрывающий тег
    /FONT > обязателен).
    Свойство SIZE определяет размер текста,
    значения размера от 1 (мелкий) до 6 (крупный), по умолчанию

    SIZE =3.
    Свойство FACE задает имя шрифта.
    Можно задавать несколько имен шрифтов через запятую.
    Если у пользователя не окажется первого шрифта, то браузер будет подставлять второй
    и т.д. Свойство COLOR задает цвет текста.
    Можно использовать как имена цветов (red, blue, green) так и номер в виде
    #RRGGBB, где RR — концентрация красного, GG — зеленого, BB — синего.
    Выделение текста цветовым фоном достигается использованием свойства
    style =» backgroud-color: цвет «.
    Продемонстрируем применение тега FONT > на примерах:

    FONT SIZE =»1″> Размер 1 /FONT >

    FONT SIZE =»2″> Размер 2 /FONT >

    FONT SIZE =»3″> Размер 3 /FONT >

    FONT SIZE =»4″> Размер 4 /FONT >

    FONT SIZE =»5″> Размер 5 /FONT >

    FONT SIZE =»6″> Размер 6 /FONT >

    FONT FACE =» Times New Roman «> Times New Roman /FONT >

    FONT FACE =» Arial «> Arial /FONT >

    FONT FACE =» System «> System /FONT >

    FONT FACE =» Verdana «> Verdana /FONT >

    FONT FACE =» Courier «> Courier /FONT >

    >FONT FACE =» Comic Sans MS «> Comic Sans MS /FONT >

    FONT COLOR =» red «> Красный /FONT >

    FONT COLOR =» green «> Зеленый /FONT >

    FONT COLOR =» #0000FF «> Синий /FONT >

    FONT STYLE =» background-color: pink «> Текст на розовом фоне /FONT > Текст на обычном фоне.

    HTML Форматирование

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

    Что такое семантика?

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

    1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем «легче» документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
    2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
    3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.
    Читать еще:  Html обработка событий

    Жирный текст

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

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

    HTML-код с тегами и :

    Пример: важный и жирный текст

    Курсивный текст

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

    Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.

    HTML-код с тегами и :

    Пример: акцент и курсив

    Теги и

    Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

    HTML-код с тегами и :

    Пример: уменьшенный и увеличенный шрифт

    Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб — разработчики должны использовать CSS свойства.

    HTML тег

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

    HTML тег

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

    HTML тег .

    HTML тег

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

    HTML тег

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

    Перевод строк и горизонтальные линии

    Тег
    (перевод строк)

    Как вы уже видели раньше, тег

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

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

    Тег (горизонтальная линия)

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

    Пример: перевод строк и горизонтальные линии

    Эти строки отделены друг от друга с помощью абзаца (p):

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

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

    Эти строки отделены друг от друга с помощью тега br:
    Наша Таня громко плачет
    Уронила в речку мячик

    Ссылка на основную публикацию
    Adblock
    detector