Тяжело ли сделать свою страницу Интернет? Окончание
Окончание. Начало в № 35
Как я уже говорил, язык HTML достаточно прост и удобен для создания документов именно с точки зрения людей совершенно не имеющих отношения к программированию. Для того, чтобы доказать это, давайте вместе создадим простую страницу с основными ее элементами. Может быть ее простота покажется чрезмерной, но и Москва не за один день строилась. В конце концов, если у вас возникнет желание сотворить шедевр, то литературы и различных пособий на эту тему даже в Минске море безбрежное. В этой статье я не пытаюсь рассказать все про создание страниц, а хочу лишь доказать, что это по плечу любому желающему.
Итак, собственная страница. Как и в любом другом деле лучше всего начинать с разработки общего плана. Во-первых, что, собственно, на ней будет. Это важно потому, что большие объемы текста (большие - это свыше двух десятков слов) значительно удобнее набрать в обычном текстовом редакторе. Например, в пресловутом Microsoft Word 97. Все-таки он именно на набор и ориентирован. Потом - рисунки. На мой взгляд, голый текст на экране смотрится крайне сиротливо. Даже если это очень интересный текст. Единственным оправданием отсутствия графики на странице является ее узкая специализация на тех аспектах, где картинки вовсе неуместны. Например, контракты или первоисточники законов. Во всех остальных случаях я считаю применение иллюстраций просто обязательной приправой, делающей результат чем-то действительно интересным и притягивающим внимание. Надеюсь, мы тут совместно делаем сайт для других путешественников киберпространства, а не для того, чтобы только самим любоваться да хвалить себя перед зеркалом? Когда более или менее ясно, что будет содержать страница, есть смысл подумать над дизайном. От того, насколько красиво получиться в итоге, зависит популярность вашего творения в целом. Я обычно включаю спокойную музыку, беру карандаш, блокнот и начинаю рисовать всякие варианты. Дело в том, что даже если под рукой обширная коллекция всяких вспомогательных элементов (кнопок, полосок и прочего) далеко не всегда результат получается именно такой, какой хотелось бы. По опыту собственных прогулок по чужим сайтам, могу с уверенностью заявить, что самыми классными смотрятся именно те места, авторы которых все (или почти все) сделали сами, а не увлекались плагиатом.
Когда план готов, можно и к делу перейти. В качестве примера воспользуемся одной моей старой заготовкой. Я давно уже собирался сделать страницу, посвященную одной из самых сильных и передовых подводных лодок в мире - SSN21 SEAWOLF. Тем более, что весь исходный материал под рукой.
В самом начале необходимо набрать текст, который впоследствии будет размещен на странице. Вы можете все это набрать, а я беру уже готовый текст. //фрагмент TxTDoc// Собственно говоря, его можно так и публиковать. Сохраняем текстовый документ в формате HTML, благо Word 97 такое позволяет, и все - документ готов. Правда, в этом случае он будет выглядеть, мягко говоря, скучно, //фрагмент TxTNN//. Тем не менее давайте посмотрим на исходный текст файла. Так как мы еще не искорежили его всякими дополнительными украшательствами, думаю, простое сравнение самого текста и того, что видно в броузере, значительно прояснит особенности структуры HTML документа. Он (в несколько сокращенном варианте) выглядит так: <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <META NAME="Generator" CONTENT="Microsoft Word97"> <TITLE>ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</TITLE> <META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot"> </HEAD> <BODY LINK="#0000ff" VLINK="#800080"> <FONT FACE="Times New Roman"><P ALIGN="CENTER">ПРОЕКТ SEAWOLF, КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</P> </FONT><P> </P> <FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Конкретные требования к проекту новой лодки были достаточно противоречивы. С одной стороны, учитывая тактику Советского Союза прикрывать свои ракетоносцы очень малошумящими торпедными лодками типа </FONT><B>Charlie</B><FONT FACE="Times New Roman"> и </FONT><B>Alfa</B><FONT FACE="Times New Roman">, надо было сконструировать малоразмерный подводный аппарат с высокими скоростями тихого хода (до 18 узлов), вооружить эту новую конструкцию только торпедным оружием и нацелить исключительно на перехват советских ПЛАРБ. Такой подход позволял получить эффективный инструмент сдерживания, а при необходимости - и уничтожения морского компонента ядерного оружия СССР. Стоимость этого варианта была значительно ниже проекта <B>Лос Анжелес</B> и сопоставима со стоимостью строительства соединения дизельных подводных лодок аналогичного уровня эффективности. Однако такой подход вынуждал иметь на вооружении флота дополнительный тип лодок, ориентированных на выполнение других задач. Например, уничтожение надводных кораблей противника, нанесение ударов по прибрежным объектам и обеспечения действий сил специального назначения флота. Подобные задачи могли быть выполнены только при наличии на борту подводной лодки крылатых ракет, зенитного ракетного вооружения, достаточного водоизмещения для принятия на борт диверсионных групп численностью до 60 человек со всем вооружением и снаряжением. Это в свою очередь диктовало необходимость уменьшения количества торпедных аппаратов и числа хранимых на борту торпед, а, значит, и существенно ухудшало возможности такой лодки при борьбе против советских ПЛАРБ </FONT></P>.
<FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Объединяло эти два подхода только одно: требования по автономности, скорости и радиусу боевого применения. Иных вариантов, кроме как ядерная силовая установка, попросту не было. Далеко не последнюю роль в выборе типа двигателя сыграл опыт успешного применения ядерных силовых установок в американском подводном флоте (проекты <B>Лос Анжелес</B> и <B>Огайо</B></FONT>).</P> </BODY> </HTML> Итак, документ состоит из следующих элементов.
В заголовке <HEAD> </HEAD> дается пояснительная информация про данную страницу. В частности, что она создана в кодировке (charset=windows-1251), что исходник написан в Word 97 (CONTENT="Microsoft Word 97) и что озаглавлено сие творение "ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА". Честно говоря, сам я все это редко заполняю. За меня заголовок оформляет Word, что позволяет экономить время. Заголовок, в принципе, можно вообще не заполнять, хотя это и считается дурным тоном. Однако если вам когда-нибудь придется договариваться с поисковой службой, чтобы там знали про вашу страницу, то никуда вам не деться. Дело в том, что поисковую программу совершенно не интересует полное содержание всего документа, она запоминает только заголовок. Запоминает и выдает по запросу пользователя. Таким образом, чем подробнее и информативнее составлен заголовок, тем чаще вас будут посещать по рекомендации поискового сервера.
Потом располагается само тело страницы <BODY> </BODY>. То, что расположено между этими двумя тагами, вы и видите на экране. Все, за исключением самих команд HTML, выделенных знаками "меньше" и "больше". Зато эти невидимые команды как раз и отвечают за оформление документа.
В самом начале страницы всегда описывается несколько принципиальных параметров. Прежде всего - цвет линков, т.е. каким цветом будут выделены фрагменты текста, связанные с другими документами: LINK="#0000ff" VLINK="#800080". LINK задает цвет до двойного клика, а LINK - после.
Сам цвет указывается в виде трех шестнадцатеричных цифр, означающих интенсивность трех базовых цветов: красного, зеленого и голубого. По умолчанию они принимают значение "синий" - до и "фиолетовый" - после. Кроме того, в начале страницы еще описывается фон самого документа. Это может быть просто цвет, например белый, но может быть и картинка: BACKGROUND="bgchalk.gif". В данном случае в качестве фона импользуется картинка bgchalk в формате GIF, которая находится в том же каталоге, что и сама страница.
При использовании фона, на мой взгляд, следует помнить о нескольких принципиальных моментах. Прежде всего - скорость чтения страницы. Если шедевр открывается тридцать минут, то скорее всего не найдется ни одного желающего так долго ждать, и во всей красе такую страницу вообще никто не увидит. Во вторых, стоит учитывать, как будут восприниматься текст и иллюстрации на этом вашем фоне. Слишком часто чрезмерно усложненный фон полностью скрывает и текст и полоски и саму страницу уродует. Даже если на таком сайте находится нечто ну о-о-очень интересное, я все равно предпочитаю переходить в какое-либо другое место, ибо собственные глаза дороже.
Дальше начинается собственно текст. Независимо от того, что это - название, обычный абзац или цитата, - броузер представляет его как набор абзацев с некоторыми характеристиками. Например, название <FONT FACE="Times New Roman"><P ALIGN="CENTER">ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</P></FONT> представляется как абзац, набранный шрифтом Times New Roman и расположенный по центру экрана (флажки <P> и </P> означают абзац, а параметр ALIGN - его выравнивание). Потом все повторяется заново. Наткнувшись на флажок /Р, броузер пропускает одну пустую строку с высотой, равной высоте символа, находящегося между флажками <P> и </P>, и приступает к формированию следующего абзаца.
<FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Конкретные требования к проекту новой лодки были достаточно противоречивыми. С одной стороны, учитывая тактику Советского Союза прикрывать свои ракетоносцы очень малошумящими торпедными лодками типа </FONT><B>Charlie</B><FONT FACE="Times New Roman"> и </FONT>
Все как в предыдущем случае, с той лишь разницей, что название выравнивалось по центру экрана (ALIGN="CENTER"), а сейчас - по левому краю (ALIGN="JUSTIFY"). Думаю, дальше идти не стоит, ибо все повторяется, как на ксерокопии. Свидетельством окончания документа служат флажки </BODY> (конец тела страницы) и </HTML> (конец всего документа в целом).
Как мне кажется, разобранный результат имеет ряд явных недостатков. Во-первых, текст слишком суховат. Все здорово, но надобно еще и воображение напрягать, заморскую субмарину представлять. А как ее представить, если в глаза ни разу не видел. Значит, придется нам сопроводить сей текст фотографией.
Делается это так. Выбираем самое подходящее место на странице и задаем команду: <img src="boats.jpg" alt="ssn21" width=100 height=68 border=2 align=middle>kg73611b.p> Этот флажок составной. В нем указывается не только, где взять картинку (src="boats.jpg"), но и как ее расположить в документе. alt="SSN21" означает, что если кто-то будет просматривать этот сайт исключительно в текстовом режиме, то вместо самой картинки на ее месте будет выведен текст SSN21. Может, это заинтересует и вызовет желание саму картинку посмотреть? Размеры картинки заданы параметрами width=100 height=68. Ну и align - выравнивание картинки. Результат выглядит следующим образом: Тем не менее мне очень не нравиться содеянное потому, что текст и сам по себе с экрана воспринимается хуже, чем с листа, так еще и почти все видимое пространство занято словами. Просто жуть. Тем не менее какие-либо действенные способы борьбы с этим безобразием в спецификации HTML не предусмотрены. Текст можно ровнять либо по одному из краев, либо по центру. Этого явно недостаточно для работы с документом. Однако отчаиваться рано. Как говориться, если гора не идет к Магомету, то Магомет идет к горе. Речь идет о такой маленькой хитрости, как применение таблиц. При оформлении страницы таблица играет двойную роль. С одной стороны, она является простым участком раз графленного пространства, с другой - чудесным инструментом форматирования всего документа в целом.
Таблица задается с помощью флажков <TABLE> и </TABLE>. Ряды данных задаются флажками <TR> </TR>, ячейки данных - флажками <TD> </TD> или <TH> </TH>. Полнокровная табличка получается в результате комбинации только этих трех флажков: <table><tr><td> data1.1 </td> <td> data1.2 </td> </tr><tr><td> data2.1 </td> <td> data2.2 </td> </tr></table> Выглядит эта конструкция так: data1.1 data1.2 data2.1 data2.2 Обратите внимание, что таблица состоит из рядов ячеек, т.е. ячейка обязательно должна быть частью ряда и не выходить за его границы. Посмотрите на конструкцию внизу. Сколько Вы видите ошибок?<table><td> data0 </td><tr> <td> data 1.1 </td> <td> </tr> data 1.2 </td></table>(Я вижу две) Можно ли все-таки действительно иметь разное число ячеек в разных рядах? Да, можно. Для этого надо указать параметр colspan во флажке <td>, т.е <td colspan = 2>. Аналогично указав параметр rowspan, можно объединить ячейки, соседствующие по вертикали: cell 1.1 colspan = 2 cell 2.1 cell 2.2 rowspan = 2 cell 3.1 Как выравниваются текст и картинки в ячейках таблицы? Двумя способами. Во-первых, для выравнивания по вертикали можно использовать параметр valign флажка <table>. Этот параметр поддерживается только MS Internet Explorer, и для совместимости с Netscape лучше использовать этот же параметр, но с флажками <td>, <tr> <th>. Во-вторых, по горизонтали - с помощью параметра align флажков <td>,<th> и <tr>: Из всего этого можно сделать только один вывод: если враг не сдается, его уничтожают. В приложении к нашему эксперименту это означает, что если нельзя форматировать сам текст, то что мешает загнать упрямые буквы в жесткие рамки таблицы и тем самым все равно добиться желаемого результата.
Вот я и пойду этим путем. Теперь наш исходный текст выглядит следующим образом. Под заголовок страницы вставляем таблицу, аналогичную последнему примеру. Один столбец. Три строки. В верхнюю ячейку вставляем картинку и ориентируем ее "по центру". В среднюю ячейку вставляем весь текст без каких-либо изменений. Нижняя ячейка пока остается свободной. В нее можно вставить свой адрес электронной почты, рисованные кнопки управления перемещением по дереву своих сайтов (если таковое присутствует) или какие-нибудь другие украшения. Выбирайте на собственный вкус. Я оставлю это место свободным, ибо пока еще не закончил собственные изображения кнопок. Да и не важно это сейчас. Кнопка для броузера - тот же рисунок, а как вставить рисунок, я уже говорил. Как это выглядит в Интернете, показывает следующий рисунок.
Вот, собственно, и все. Самая первая страница готова. Конечно, в таком виде ее еще рано выставлять на обозрение широкой публики, но все, что предстоит делать дальше, - всего лишь повторение пройденного. Можно еще и всяких заумностей добавить, например, модули activX или апплеты Java, но далеко не всегда они так уж необходимы. Да и книжек всяких в Минске более чем достаточно для желающих углубить свои познания в разработке сайтов Интернет.
Напоследок, хочу дать несколько общих практических советов. Не разукрашивайте свои страницы как павлинов. Если на экране прыгают шарику, лопатой машет землекоп, мерцают звезды, мелькают кадрами активные картинки и мигают десятки слов, то ничего, кроме сильного раздражения, такая работа не вызывает. Если есть возможность заменить одну большую картинку несколькими маленькими, - заменяйте. Наиболее простой способ (если уж очень хочется вывести на экран нечто очень большое) - разрезать большую картинку на несколько маленьких и вставить их в ячейки таблицы. Даже в этом случае сайт открывается несколько быстрее. И самое главное - не стремитесь с первых секунд крикнуть пришедшему: "Я - КРРРУТ!". Поверьте, не нужно иметь семь пядей во лбу, чтобы вычислить тип операционной системы у заглянувшего к вам серфера, тем более, что чаще всего такие "умные" страницы и оформлены жутко и ничего, кроме "воды", не содержат. Если на такой сайт кто и вернется во второй раз, то исключительно в компании с другом ради наглядной демонстрации "как делать не надо". Думаю, мы тут с вами совсем не ради такого эффекта потратили время?
Александр Запольскис
Итак, собственная страница. Как и в любом другом деле лучше всего начинать с разработки общего плана. Во-первых, что, собственно, на ней будет. Это важно потому, что большие объемы текста (большие - это свыше двух десятков слов) значительно удобнее набрать в обычном текстовом редакторе. Например, в пресловутом Microsoft Word 97. Все-таки он именно на набор и ориентирован. Потом - рисунки. На мой взгляд, голый текст на экране смотрится крайне сиротливо. Даже если это очень интересный текст. Единственным оправданием отсутствия графики на странице является ее узкая специализация на тех аспектах, где картинки вовсе неуместны. Например, контракты или первоисточники законов. Во всех остальных случаях я считаю применение иллюстраций просто обязательной приправой, делающей результат чем-то действительно интересным и притягивающим внимание. Надеюсь, мы тут совместно делаем сайт для других путешественников киберпространства, а не для того, чтобы только самим любоваться да хвалить себя перед зеркалом? Когда более или менее ясно, что будет содержать страница, есть смысл подумать над дизайном. От того, насколько красиво получиться в итоге, зависит популярность вашего творения в целом. Я обычно включаю спокойную музыку, беру карандаш, блокнот и начинаю рисовать всякие варианты. Дело в том, что даже если под рукой обширная коллекция всяких вспомогательных элементов (кнопок, полосок и прочего) далеко не всегда результат получается именно такой, какой хотелось бы. По опыту собственных прогулок по чужим сайтам, могу с уверенностью заявить, что самыми классными смотрятся именно те места, авторы которых все (или почти все) сделали сами, а не увлекались плагиатом.
Когда план готов, можно и к делу перейти. В качестве примера воспользуемся одной моей старой заготовкой. Я давно уже собирался сделать страницу, посвященную одной из самых сильных и передовых подводных лодок в мире - SSN21 SEAWOLF. Тем более, что весь исходный материал под рукой.
В самом начале необходимо набрать текст, который впоследствии будет размещен на странице. Вы можете все это набрать, а я беру уже готовый текст. //фрагмент TxTDoc// Собственно говоря, его можно так и публиковать. Сохраняем текстовый документ в формате HTML, благо Word 97 такое позволяет, и все - документ готов. Правда, в этом случае он будет выглядеть, мягко говоря, скучно, //фрагмент TxTNN//. Тем не менее давайте посмотрим на исходный текст файла. Так как мы еще не искорежили его всякими дополнительными украшательствами, думаю, простое сравнение самого текста и того, что видно в броузере, значительно прояснит особенности структуры HTML документа. Он (в несколько сокращенном варианте) выглядит так: <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <META NAME="Generator" CONTENT="Microsoft Word97"> <TITLE>ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</TITLE> <META NAME="Template" CONTENT="C:\PROGRAM FILES\MICROSOFT OFFICE\OFFICE\html.dot"> </HEAD> <BODY LINK="#0000ff" VLINK="#800080"> <FONT FACE="Times New Roman"><P ALIGN="CENTER">ПРОЕКТ SEAWOLF, КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</P> </FONT><P> </P> <FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Конкретные требования к проекту новой лодки были достаточно противоречивы. С одной стороны, учитывая тактику Советского Союза прикрывать свои ракетоносцы очень малошумящими торпедными лодками типа </FONT><B>Charlie</B><FONT FACE="Times New Roman"> и </FONT><B>Alfa</B><FONT FACE="Times New Roman">, надо было сконструировать малоразмерный подводный аппарат с высокими скоростями тихого хода (до 18 узлов), вооружить эту новую конструкцию только торпедным оружием и нацелить исключительно на перехват советских ПЛАРБ. Такой подход позволял получить эффективный инструмент сдерживания, а при необходимости - и уничтожения морского компонента ядерного оружия СССР. Стоимость этого варианта была значительно ниже проекта <B>Лос Анжелес</B> и сопоставима со стоимостью строительства соединения дизельных подводных лодок аналогичного уровня эффективности. Однако такой подход вынуждал иметь на вооружении флота дополнительный тип лодок, ориентированных на выполнение других задач. Например, уничтожение надводных кораблей противника, нанесение ударов по прибрежным объектам и обеспечения действий сил специального назначения флота. Подобные задачи могли быть выполнены только при наличии на борту подводной лодки крылатых ракет, зенитного ракетного вооружения, достаточного водоизмещения для принятия на борт диверсионных групп численностью до 60 человек со всем вооружением и снаряжением. Это в свою очередь диктовало необходимость уменьшения количества торпедных аппаратов и числа хранимых на борту торпед, а, значит, и существенно ухудшало возможности такой лодки при борьбе против советских ПЛАРБ </FONT></P>.
<FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Объединяло эти два подхода только одно: требования по автономности, скорости и радиусу боевого применения. Иных вариантов, кроме как ядерная силовая установка, попросту не было. Далеко не последнюю роль в выборе типа двигателя сыграл опыт успешного применения ядерных силовых установок в американском подводном флоте (проекты <B>Лос Анжелес</B> и <B>Огайо</B></FONT>).</P> </BODY> </HTML> Итак, документ состоит из следующих элементов.
В заголовке <HEAD> </HEAD> дается пояснительная информация про данную страницу. В частности, что она создана в кодировке (charset=windows-1251), что исходник написан в Word 97 (CONTENT="Microsoft Word 97) и что озаглавлено сие творение "ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА". Честно говоря, сам я все это редко заполняю. За меня заголовок оформляет Word, что позволяет экономить время. Заголовок, в принципе, можно вообще не заполнять, хотя это и считается дурным тоном. Однако если вам когда-нибудь придется договариваться с поисковой службой, чтобы там знали про вашу страницу, то никуда вам не деться. Дело в том, что поисковую программу совершенно не интересует полное содержание всего документа, она запоминает только заголовок. Запоминает и выдает по запросу пользователя. Таким образом, чем подробнее и информативнее составлен заголовок, тем чаще вас будут посещать по рекомендации поискового сервера.
Потом располагается само тело страницы <BODY> </BODY>. То, что расположено между этими двумя тагами, вы и видите на экране. Все, за исключением самих команд HTML, выделенных знаками "меньше" и "больше". Зато эти невидимые команды как раз и отвечают за оформление документа.
В самом начале страницы всегда описывается несколько принципиальных параметров. Прежде всего - цвет линков, т.е. каким цветом будут выделены фрагменты текста, связанные с другими документами: LINK="#0000ff" VLINK="#800080". LINK задает цвет до двойного клика, а LINK - после.
Сам цвет указывается в виде трех шестнадцатеричных цифр, означающих интенсивность трех базовых цветов: красного, зеленого и голубого. По умолчанию они принимают значение "синий" - до и "фиолетовый" - после. Кроме того, в начале страницы еще описывается фон самого документа. Это может быть просто цвет, например белый, но может быть и картинка: BACKGROUND="bgchalk.gif". В данном случае в качестве фона импользуется картинка bgchalk в формате GIF, которая находится в том же каталоге, что и сама страница.
При использовании фона, на мой взгляд, следует помнить о нескольких принципиальных моментах. Прежде всего - скорость чтения страницы. Если шедевр открывается тридцать минут, то скорее всего не найдется ни одного желающего так долго ждать, и во всей красе такую страницу вообще никто не увидит. Во вторых, стоит учитывать, как будут восприниматься текст и иллюстрации на этом вашем фоне. Слишком часто чрезмерно усложненный фон полностью скрывает и текст и полоски и саму страницу уродует. Даже если на таком сайте находится нечто ну о-о-очень интересное, я все равно предпочитаю переходить в какое-либо другое место, ибо собственные глаза дороже.
Дальше начинается собственно текст. Независимо от того, что это - название, обычный абзац или цитата, - броузер представляет его как набор абзацев с некоторыми характеристиками. Например, название <FONT FACE="Times New Roman"><P ALIGN="CENTER">ПРОЕКТ SEAWOLF КАК ОБРАЗ ТОРПЕДНОЙ ЛОДКИ КОНЦА ДВАДЦАТОГО ВЕКА</P></FONT> представляется как абзац, набранный шрифтом Times New Roman и расположенный по центру экрана (флажки <P> и </P> означают абзац, а параметр ALIGN - его выравнивание). Потом все повторяется заново. Наткнувшись на флажок /Р, броузер пропускает одну пустую строку с высотой, равной высоте символа, находящегося между флажками <P> и </P>, и приступает к формированию следующего абзаца.
<FONT FACE="Times New Roman"><P ALIGN="JUSTIFY">Конкретные требования к проекту новой лодки были достаточно противоречивыми. С одной стороны, учитывая тактику Советского Союза прикрывать свои ракетоносцы очень малошумящими торпедными лодками типа </FONT><B>Charlie</B><FONT FACE="Times New Roman"> и </FONT>
Все как в предыдущем случае, с той лишь разницей, что название выравнивалось по центру экрана (ALIGN="CENTER"), а сейчас - по левому краю (ALIGN="JUSTIFY"). Думаю, дальше идти не стоит, ибо все повторяется, как на ксерокопии. Свидетельством окончания документа служат флажки </BODY> (конец тела страницы) и </HTML> (конец всего документа в целом).
Как мне кажется, разобранный результат имеет ряд явных недостатков. Во-первых, текст слишком суховат. Все здорово, но надобно еще и воображение напрягать, заморскую субмарину представлять. А как ее представить, если в глаза ни разу не видел. Значит, придется нам сопроводить сей текст фотографией.
Делается это так. Выбираем самое подходящее место на странице и задаем команду: <img src="boats.jpg" alt="ssn21" width=100 height=68 border=2 align=middle>kg73611b.p> Этот флажок составной. В нем указывается не только, где взять картинку (src="boats.jpg"), но и как ее расположить в документе. alt="SSN21" означает, что если кто-то будет просматривать этот сайт исключительно в текстовом режиме, то вместо самой картинки на ее месте будет выведен текст SSN21. Может, это заинтересует и вызовет желание саму картинку посмотреть? Размеры картинки заданы параметрами width=100 height=68. Ну и align - выравнивание картинки. Результат выглядит следующим образом: Тем не менее мне очень не нравиться содеянное потому, что текст и сам по себе с экрана воспринимается хуже, чем с листа, так еще и почти все видимое пространство занято словами. Просто жуть. Тем не менее какие-либо действенные способы борьбы с этим безобразием в спецификации HTML не предусмотрены. Текст можно ровнять либо по одному из краев, либо по центру. Этого явно недостаточно для работы с документом. Однако отчаиваться рано. Как говориться, если гора не идет к Магомету, то Магомет идет к горе. Речь идет о такой маленькой хитрости, как применение таблиц. При оформлении страницы таблица играет двойную роль. С одной стороны, она является простым участком раз графленного пространства, с другой - чудесным инструментом форматирования всего документа в целом.
Таблица задается с помощью флажков <TABLE> и </TABLE>. Ряды данных задаются флажками <TR> </TR>, ячейки данных - флажками <TD> </TD> или <TH> </TH>. Полнокровная табличка получается в результате комбинации только этих трех флажков: <table><tr><td> data1.1 </td> <td> data1.2 </td> </tr><tr><td> data2.1 </td> <td> data2.2 </td> </tr></table> Выглядит эта конструкция так: data1.1 data1.2 data2.1 data2.2 Обратите внимание, что таблица состоит из рядов ячеек, т.е. ячейка обязательно должна быть частью ряда и не выходить за его границы. Посмотрите на конструкцию внизу. Сколько Вы видите ошибок?<table><td> data0 </td><tr> <td> data 1.1 </td> <td> </tr> data 1.2 </td></table>(Я вижу две) Можно ли все-таки действительно иметь разное число ячеек в разных рядах? Да, можно. Для этого надо указать параметр colspan во флажке <td>, т.е <td colspan = 2>. Аналогично указав параметр rowspan, можно объединить ячейки, соседствующие по вертикали: cell 1.1 colspan = 2 cell 2.1 cell 2.2 rowspan = 2 cell 3.1 Как выравниваются текст и картинки в ячейках таблицы? Двумя способами. Во-первых, для выравнивания по вертикали можно использовать параметр valign флажка <table>. Этот параметр поддерживается только MS Internet Explorer, и для совместимости с Netscape лучше использовать этот же параметр, но с флажками <td>, <tr> <th>. Во-вторых, по горизонтали - с помощью параметра align флажков <td>,<th> и <tr>: Из всего этого можно сделать только один вывод: если враг не сдается, его уничтожают. В приложении к нашему эксперименту это означает, что если нельзя форматировать сам текст, то что мешает загнать упрямые буквы в жесткие рамки таблицы и тем самым все равно добиться желаемого результата.
Вот я и пойду этим путем. Теперь наш исходный текст выглядит следующим образом. Под заголовок страницы вставляем таблицу, аналогичную последнему примеру. Один столбец. Три строки. В верхнюю ячейку вставляем картинку и ориентируем ее "по центру". В среднюю ячейку вставляем весь текст без каких-либо изменений. Нижняя ячейка пока остается свободной. В нее можно вставить свой адрес электронной почты, рисованные кнопки управления перемещением по дереву своих сайтов (если таковое присутствует) или какие-нибудь другие украшения. Выбирайте на собственный вкус. Я оставлю это место свободным, ибо пока еще не закончил собственные изображения кнопок. Да и не важно это сейчас. Кнопка для броузера - тот же рисунок, а как вставить рисунок, я уже говорил. Как это выглядит в Интернете, показывает следующий рисунок.
Напоследок, хочу дать несколько общих практических советов. Не разукрашивайте свои страницы как павлинов. Если на экране прыгают шарику, лопатой машет землекоп, мерцают звезды, мелькают кадрами активные картинки и мигают десятки слов, то ничего, кроме сильного раздражения, такая работа не вызывает. Если есть возможность заменить одну большую картинку несколькими маленькими, - заменяйте. Наиболее простой способ (если уж очень хочется вывести на экран нечто очень большое) - разрезать большую картинку на несколько маленьких и вставить их в ячейки таблицы. Даже в этом случае сайт открывается несколько быстрее. И самое главное - не стремитесь с первых секунд крикнуть пришедшему: "Я - КРРРУТ!". Поверьте, не нужно иметь семь пядей во лбу, чтобы вычислить тип операционной системы у заглянувшего к вам серфера, тем более, что чаще всего такие "умные" страницы и оформлены жутко и ничего, кроме "воды", не содержат. Если на такой сайт кто и вернется во второй раз, то исключительно в компании с другом ради наглядной демонстрации "как делать не надо". Думаю, мы тут с вами совсем не ради такого эффекта потратили время?
Александр Запольскис
Компьютерная газета. Статья была опубликована в номере 36 за 1997 год в рубрике интернет :: вебмастеру
