HTML. Смысловое выделение текста

Цель работы: приобрести навыки применения дескрипторов < I> (italic), < B> (bold), < U> и < STRIKE>, приобрести умение выделения текста шрифтом «жирным» и «курсив» в документе WEB.

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

В спецификации HTML для этой цели применяются дескрипторы < I> (italic), < B> (bold), < U> и < STRIKE>. Дескриптор < В> позволяет обозначить отрывок текста полужирным (bold) шрифтом, а < I> дает возможность отобразить текст курсивом (italic). Дескриптор < U> употребляется с целью подчеркивания текста. Будьте внимательны при использовании признака подчеркивания, поскольку читатели Вашей

Рис. 7-1. Смысловое выделение фрагиентов текста.

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

Хотя дескрипторы < U> и < STRIKE> все еще поддерживаются всеми популярными Web-броузерами, в
настоящее время более предпочтительным считается применение листов стилей.

Ход работы:

1. Ознакомьтесь с данной инструкцией, вызовите броузер WEB щелчком «мыши» по иконке, откройте в нем «пустую» страницу. Откройте ее в виде HTML.

2. Наберите в открывшемся блокноте пример показанный на рисунке п. 2, сохраните изменения в меню файл→ сохранить и обновите страницу.

3. Затем в меню “файл→ открыть” откройте файл созданный в лабораторной работе № 6 (набранный ранее в шаблоне созданном в лабораторной работе № 6 «Калоев HTML»).

4. Внесите в него ниже приведенные изменения (см. текст ниже), в графическом редакторе Блокнот (см. п. 5).

5. В новом документе, применены согласно спецификации HTML, также описательный элемент < BR>, и дескрипторы - < I> (italic), < B> (bold), < U> и < STRIKE>.

В итоге, документ HTML выглядит следующим образом:

< html>

< TITLE> Моя первая проба сил в HTML< /TITLE> <! -- тег названия страницы-->

< head> < I> < B> ПРОБА - ШАБЛОН< /B> < /I> < /head> <! -- тег заголовков-->

< body>

< Hl> < CENTER> < B> < FONT FACE=”Arial, Times New Roman Cyr”> МОЯ ПОЭТИЧЕСКАЯ СТРАНИЧКА< /B> < /CENTER> < /Hl>

< P> < ALIGN=" left" > < U> & #169; 2005-09-08 Калоев Николай< /U> < /P>

< P> Я люблю стихи, в том числе и собственного сочинения.

Можете прочесть, вот одно из последних. < /P>

< P> < STRIKE> Э-э-э-э... < /STRIKE> < /P>

< P> Эти удались, особенно финал: < /P>

< PRE>

Мораль сей басни такова

Хоть стой, хоть ляг, хоть встань.

Как сплетнику нужна молва

И как певцу - слова,

И как огню нужны дрова,

Как к чаю сладкая халва,

Как к пиву мелкая плотва

Так нужен WEB-дизайн!

< /PRE>

< /body>

< /html>

6. Сохраните набранный текст под тем же именем и расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы» под названием включающей Вашу фамилию, например: Калоев HTML. Лаб. 7).

7. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранный абзац «Проба сил в HTML» (см. рис. 7-2).

8. Проанализируйте набранный код фрагмента программы, поэкспериментируйте, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу).

9. Оформить лабораторную работу в письменном виде (преподавателю сдавать лабораторную работу и в письменном и в электронном виде).

Рис. 7-2. Внешний вид страницы с над- и подстрочными индексами.

Задачи для самостоятельного решения.

Предлагается самостоятельно изменить дескриптор < font>, чтобы посмотреть, как изменяется шрифт написания заголовка. Заголовок «Моя поэтическая страница» напишите подчеркнутым шрифтом.

Измените в контейнере < HEAD > название заголовка, измените шрифт поочередно на курсив, жирный и подчеркнутый.

Измените шрифт в атрибуте FACE=” “, на шрифт “ARIAL BLACK”, чтобы посмотреть каково изменение написания шрифта.

Контрольные вопросы.

1. Какие тэги вы применили в выше приведенном фрагменте?

2. Почему в HTML применяются дескрипторы отдельного смыслового форматирования текста?

3. В HTML 3.2 можно опустить специальные дескрипторы форматирования и закрывающие тэги?

4. В каком порядке располагаются дескрипторы HTML и атрибуты?

5. Чем отличаются атрибуты от дескрипторов?