Главная » Delphi » Основы основ HTML

0

Небольшую справку в формате HTML можно сделать, конечно, в любом HTML-редакторе. Способ этот не является оптимальным по одной только причине: практически любой редактор создает HTML-код. намного превышающий по объему необходимый и достаточный. Рекордсменом в этом смысле является, конечно, MS Word и, к счастью почти забытый, MS FrontPage, но и остальные немногим лучше. Я покажу сейчас, как можно превратить вручную с помощью всего нескольких тегов HTML любой текст в красивую и удобную справку. При создании HTML-странички таким образом удобно использовать текстовые редакторы, которые имеют подсветку синтаксиса HTML. Некоторые из них (Edit Plus) позволяют при этом и одновременно просматривать вид готовой странички в параллельном окне (обычно используя точно такой же WebBrowser, как и у нас в программе Trace), но это необязательно — проверять результат можно и через стандартный браузер.

Идеологически HTML-теги есть не что иное, как упомянутые в главе 8 Shift- коды. Теги пишутся в угловых скобках. Встречая такой тег, браузер интерпретирует все, что встречается после него, определенным образом, пока не встретит либо отменяющий (закрывающий тег), либо — в отдельных случаях — другой такой же. Теги могут иметь параметры (атрибуты) и неограниченно вкладываться друг в друга. Закрывающие теги такие же, как открывающие, но с добавлением знака "прямой слеш" впереди, и всегда без атрибутов.

Вот основное, что нам нужно уметь для того, чтобы создавать красивые тексты:

1.     Выделять элементы текста полужирным и курсивом.

2.      Устанавливать абзац, перевод строки и абзацный отступ.

3.      Устанавливать атрибуты шрифта (цвет, размер и начертание).

4.     Создавать гиперссылки как локальные (в пределах страницы), так и глобальные (между страницами).

5.      Формировать некоторые свойства страницы: заголовок и цвет фона.

6.      Загружать на страницу рисунки.

По большому счету— это все. Стандартные теги <html></html>, которыми обычно обрамляется HTML-страничка, здесь не требуются (но если вы делаете ее для выкладки в Сеть, то нужно их поставить). Заголовочной части (<headx/head>, в ней обычно располагается служебная информация) у нас также не будет (но опять же для расположения в Сети в ней нужно, по крайней мере, явно установить кодировку страницы). Могут понадобиться таблицы (а с их помощью можно сделать верстку почти любой сложности), но создавать их вручную уже, на мой взгляд, нецелесообразно— тут проще воспользоваться редактором типа Dreamweaver.

Начнем с самого начала по списку. Выделение элементов текста — самое простое, что можно предпринять. Полужирным отметится все, что заключено между тегами <вх/в>, а курсивом — между тегами <ix/i> (теги можно писать и маленькими буквами, это неважно). Упомянутая ранее возможность вкладывать теги друг в друга на практике означает, что они действуют независимо: так, конструкция <в>жирный<1> жирный курсив</в> курсив</1> в браузере отразится так: жирный жирный курсив курсив.

Элементы абзаца. Обычных знаков перевода строки (символы 10+13 для Windows) для браузера не существует — точнее, он заменяет их пробелами.

Поэтому о разделении текста на абзацы нужно специально позаботиться. Отметим, что в отличие от чистого текста., где существуют только переводы строк, в HTML перевод строки и начало нового абзаца — разные вещи. На самом деле это разные вещи и в MS Word, просто не все об этом знают, думая, что там, наоборот, существуют одни абзацы, а перевода строк нет. Перевод строки в Word без образования нового абзаца осуществляется нажатием клавиш <Shift>+<Enter>, но там эта операция необязательная — абзацы могут иметь нулевой промежуток между собой, и тогда по внешнему виду результаты могут быть неотличимы (особенно если используется выравнивание влево или вправо, а не по ширине). А в браузерах абзац всегда отделяется от предыдущего промежутком, поэтому обойтись без отдельного знака перевода строки нельзя. Перевод строки в HTML обозначается тегом <br> и закрывающего тега не имеет. А новый абзац начинается с тега <?>, который имеет закрывающий тег </р>, хотя его использование в случае открывающего тега <р> без атрибутов необязательно.

Выравнивание текста производится с помощью атрибута align, например, так: <р alicn=center>. В современных браузерах нормально работает и привычное для русского глаза выравнивание по ширине (aligns us г. if у), однако на практике его используют редко и только для колонок текста достаточно большой ширины, потому что ииаче текст (без расстановки переносов) будет очень некрасивым. Кроме center и justify, атрибут align может, естественно, принимать значения left (по умолчанию) и right. Он также употребляется и с другими тегами (см. далее). Наконец, отступ абзаца (всего целиком, а не первой строки) задается тегом <blockquote> </blockquote>. Есть и отдельный тег <center> </center>, которым можно задать выравнивание по центру для целого блока, включая все его элементы.

Иногда перечисленного уже достаточно, чтобы сделать вполне читаемый текст. Пойдем дальше — атрибуты шрифта. Они устанавливаются с помощью тегов <font> </font> с нужными атрибутами. В число атрибутов может входить и название шрифта (программы от MS его всегда устанавливают)— а нам это надо? Если вы хотите сделать действительно компактный код, то нет, не надо. По умолчанию браузер (по крайней мере, в Windows) использует Times New Roman 12 кегля, и нет никакой нужды его специально объявлять. Специально следует устанавливать шрифт только, если вы хотите отобразить что-то именно конкретным шрифтом (например, Arial или Symbol), причем выбирать, разумеется, следует только из заведомо установленных в системе (и при оформлении странички для Сети не забывайте, что в отличных от Windows системах шрифт может определяться неадекватно"). А для установки иных свойств шрифта достаточно атрибутов size и color. Причем size (размер шрифта) можно устанавливать в абсолютных единицах (size=5), а можно в относительных (size=+2). В последних удобнее, т. к. абсолютная шкала в HTML не есть привычный нам кегль (шрифт 12 кегля соответствует size=3), и в относительных единицах мы точнее можем угадать, что получится. Цвет задается в точности так же, как для компонентов Delphi, в 24-битной модели RGB, причем можно использовать как константы- названия, так и прямое задание величины с предваряющим знаком в обоих случаях константа пишется в парных кавычках: color-"kooooff" или c0L0R="biue". Так, следующая конструкция:

<FONT COLOR="КFFO000" 31гЕ=+1>Увеличенный красный c/TONTxFONT COLOR="#FFOOOO,‘>Hopbfc^bHbai красный</FONTXFONT SIZE= -1> уменьшенный обычный</FONT>

воспроизведется, как (красный, я, конечно, отобразить здесь могу только серым):

Увеличенным красный нормальным красный уменьшенныйобмчпып После этого опять пойдет нормальный текст.

Теги с атрибутами (и не только <font>) можно дробить: запись <fon" coLOR="ltffoooo"><font size=+1> приведет к тому же результату, что и просто <font color= " # ffo о о о" size=+i>, но в первом случае закрывающих тега должно быть также два!

Для задания равномерного шрифта не требуется специально объявлять, например, Courier, а достаточно использовать теги <тт> </тт>. То есть фактически мы можем иметь дело только с двумя разновидностями шрифтов: пропорциональным и равномерным. Такой подход предпочтительнее не только с точки зрения компактности кода, но просто более грамотный, чем явное объявление шрифтов, которых в системе может и не оказаться. Для того чтобы вставить в текст специальные знаки (мы об этом упоминали в главе 5), следует использовать их представление в виде особых констант, начинающихся со знака например, неразрывный пробел обозначается, как &nbsp, знак градуса — sdeg и т. п. (полный их список имеется, например, на http://fgener.narod.ru/web/htniI/sintax_h.htm). Даже угловые скобки в тегах можно заменить на sit (то же, что <), &gt (то же, что >). Обратите внимание, что ввести можно любой символ, если набрать его номер с предваряющими знаками &# (этот номер в общем случае таблице ASCII не соответствует, см указанный ресурс). Введение специальных знаков в таком представлении делает их шрифтонезависимыми — в обычный кириллический текст, если это не Unicode, очень непросто ввести испанские или французские буквы с диакритическими знаками, а в HTML — запросто.

Дальше у нас по списку идут гиперссылки. Они делаются по следующему образцу: <а HREF="http: //bhv.ги">Издательство bhv</a>. В парных кавычках должен стоять URL (или адрес обычного файла, например, для загрузки), по- еле окончания открывающего тега и до закрывающего— текст (или иной объект), который будет выделен в качестве ссылки. В качестве атрибута тега <а> можно указать target=blank, например, так: <а href= "http://bhv.ru" target =_ыапк>Издательство bhv</a>. При щелчке на этой ссылке откроется сайт издательства в новом окне (или новой вкладке в Opera и FireFox).

Два важных частных случая употребления тега <а> относятся к локальной ссылке (переходе на метку) и ссылке на электронную почту. В первом случае ссылка выглядит таким образом: <а нн?р-"йр1">Ко.мментарии</л>, где "pi" обязательно существующая на той же странице локальная метка. Она задается вот такой записью: <а name="p1"> </а>, причем во избежание неприятностей, если метка стоит в конце страницы (как у нас в программе Trace), то какой-нибудь текст перед закрывающим тегом </а> должен быть (хотя бы пробел, как в данном случае). Сама метка в браузере никак не отображается. На метку, определенную таким способом, можно перейти с другой страницы, если указать се в конце адреса URL без пробела (см. опять же текст программы Trace в главе 13). А ссылка на электронную почту записывается так (на примере моего собственного адреса):

«А HREF="mailto:revich@homepc.ru">revich@homepc.ru</A>>.

Вторые угловые скобки просто отобразятся в браузере, т. е. результат будет выглядеть, как это обычно принято: <revicli@homenc.ru>. Далее мы покажем, как можно формировать подобные ссылки в любом компоненте Delphi, не только в браузере.

Чтобы украсить страничку, можно и нужно придать ей какой-то цвет фона — человеку гораздо комфортнее воспринимать черный текст на желтоватом или зеленоватом фоне, но не слишком, конечно, насыщенном, чем на белом. Неплохо также выглядят странички с цветным текстом на черном фоне, только во всех таких случаях надо обязательно соблюдать правило: если текст светлых тонов, то фон должен быть из темных, и наоборот. Ни в коем случае нельзя, например, шрифт цвета Margenta ($800080) располагать на черном фоне, в таком случае можно выбрать только цвет LightMargenta (SFF00FF) или близкий к нему, причем желательно выбирать из 216 гак называемых "безопасных" цветов (см. главу 10). Л сам цвет фона странички задается через атрибуты тега <body>: <bodv bgcolor= иftffffcc> (светло-желтый). Закрывающий тег </body> следует задать в самом конце текста. В атрибутах тега <body> можно установить еще много чего (цвет ссылок и текста по умолчанию, размер текста по умолчанию, фоновую картинку и т. п.), но нам здесь это не требуется.

И, наконец, о картинках. HTML-документ не является контейнером, как документы Word или PDF, и потому картинки должны всегда храниться отдельно. Во избежание сложностей они должны иметь один из четырех форматов: JPEG, GIF, PNG или BMP (последний является не очень законным для Web, но исправно отображается всеми современными браузерами). Отображение их на страничке производится включением тега по следующему образцу: <img src="1.jpg" hspace=10 vspace=10 height=467 width=359 align=leet>. Адрес файла рисунка "l. jpg" при необходимости может задаваться с путем к нему. Длину и ширину (width и height) можно и не задавать специально, но удобнее это делать явно, чтобы точнее подогнать рисунок (а его истинные размеры при этом должны примерно соответствовать установленным, во избежание загрузки лишних мегабайт или искажений при растяжке). Если не указать атрибут align, то картинка займет отдельное место на страничке, а текст начнется с нижнего правого края от нее, поэтому его лучше включать (разумеется, значение align=justify здесь не имеет смысла, зато, кроме перечисленных ранее, есть значения top и bottom, а значение middle предоставляет экзотическую возможность выровнять картинку посередине документа). Наконец, обычная ошибка всех начинающих (и даже не очень начинающих) состоит в игнорировании атрибутов hspace и vspace — если их не указать, то текст будет по сторонам картинки и сверху-снизу (в зависимости от значения align) примыкать к ней вплотную, что очень некрасиво. В данном случае мы указываем отступы в 10 пикселов. В заключение укажем для примера, как можно оформить картинку в виде ссылки: <а hree="http://bhv.ru"XIMC. SRC="bhviogo. jpg"x/a>. Здесь "bhviogo.jpg" — файл с логотипом издательства BHV, при щелчке на котором загрузится сайт www.bhv.ru. Атрибутов я здесь не указал, но они, конечно, также могут присутствовать.

Добавим еще для полноты картины, что в начале текста неплохо поставить такую конструкцию: <т1^?>название программы</т1Т1,Е>. Все, что заключено между данными тегами, будет отражено в заголовке браузера и наименовании окна, конечно, это может быть не только название программы. Разумеется, подобное оформление будет сказываться только при просмотре странички в настоящем браузере. Если этих тегов не ставить, то там будет демонстрироваться название файла. И при этом не следует забывать, что мы предотвращаем повторный запуск именно через наименование главного окна программы, потому строка заголовка здесь не должна быть идентична нашем) Application.Title — что обеспечить не так уж сложно, учитывая зависимость процедуры сравнения заголовков от регистра букв.

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

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

Источник: Ревнч Ю. В.  Нестандартные приемы программирования на Delphi. — СПб.: БХВ-Петербург, 2005. — 560 е.: ил.

По теме:

  • Комментарии