<a href="http://www.vasya-pupkin.ru/"><img src="http://www.vasya-pupkin.ru/images/vasya.gif" width="88" height="31" border="0" alt="Сайт Васи Пупкина"></a>

Если поместить этот код в данном виде на страницу, то браузер загрузит указанный в коде графический файл со ссылкой на установленный в теге <A> ресурс. Чтобы в браузере отображался сам код, нужно все левые угловые скобки в коде заменить на &lt;, а правые - на &gt; Вот как будет выглядеть код для отображения в браузере:

&lt;a href="http://www.vasya-pupkin.ru/"&gt;&lt;img src="http://www.vasya-pupkin.ru/images/vasya.gif" width="88" height="31" border="0" alt="Сайт Васи Пупкина"&gt;&lt;/a&gt;

Символы оформления документа:
К так называемым символам оформления веб-документов относятся значки авторского права, зарегистрированной торговой марки, символы иностранных валют, математические обозначения ("плюс-минус", "умножить" и др.) и прочие символы (См. пример). Приведенный пример может быть получен за счет вставки в код документа следующих конструкций:

&pound; - Фунт стерлингов

&reg; - Зарегистрированная торговая марка

&#177; - Знак "плюс-минус"

Как видно, первые два символа выводятся браузером с помощью специального тега: амперсанд (&) плюс соответствующее наименование, а последний - путем указания специального трехзначного кода (а также "решеточка" и тот же амперсанд). Это не значит, что значок английской национальной валюты и зарегистрированной марки можно получить только посредством теговой конструкции, а знак "плюс-минус" - кодового обозначения. Для каждого специального символа - будь это символ оформления документа, буква иностранного алфавита или символ отображения элементов HTML - существует два способа записи: теговый и кодовый. К примеру, конструкции &#167; и &sect; совершенно одинаково будут выводиться в окне браузера в виде значка параграфа (§).

Зная конструкции символов оформления, можно сильно облегчить жизнь веб-мастера: если вы верстаете в Блокноте, но вам обязательно нужно использовать угловые кавычки, не нужно заходить в текстовый редактор типа MS Word, вводить желаемый тип кавычек (очень часто Word по умолчанию отображает верхние кавычки), копировать их и, снова открыв окно NotePad'а, вставлять в документ. Просто указываете нужную теговую или кодовую конструкцию для нужного типа кавычек и дело в шляпе! А если на вашей странице размещены математические данные, то согласитесь, что уравнение, содержащее в качестве знака умножения букву "Х", с визуальной точки зрения, сильно уступает уравнению, где применяется специальная конструкция знака "умножить".

Говоря об уравнениях, следует сказать, что описываемые конструкции специальных символов не используются в отображении знака степени в математике и числа атомов в химическом соединении (соответственно, в химии). Для этого (а также для иных целей) предназначены теги-контейнеры <SUP></SUP> (верхний индекс) и <SUB></SUB> (нижний индекс) - (см. пример).

Буквы иностранных алфавитов:
Когда мы верстаем сайт на русском или английском языке, никаких затруднений с отображением букв в браузере, разумеется, не возникает. Все они есть на раскладке клавиатуры компьютера. Теперь представьте себе ситуацию: вам нужно сверстать сайт, к примеру, на португальском языке, алфавит которого содержит некоторые буквы, чье начертание характерно только лишь для данного языка (см. пример). Как вы будете выходить из такого положения?

Есть несколько вариантов. Первый заключается в том, чтобы добавить в раскладку клавиатуры новый язык, включить в Word'е поддержку португальского (или любом другом текстовом редакторе, имеющим многоязыковую поддержку) и, выбрав на Панели задач нужный значок, спокойно набирать текст. Спокойно ли? Вы забыли о конечной цели иностранного текста - быть интерпретированным (причем, корректно) браузером. Если вы, набрав текст на португальском в Word'е, скопируете и перенесете фрагмент в Блокнот, то текст отобразится без специальных символов, свойственных данному языку. В тексте примера на португальском языке видно, что некоторые буквы "с" и "а" пишутся с использованием специальных элементов вверху и внизу буквы (они называются "седиль" и "тильда", соответственно), чего никак нельзя достигнуть путем переноса текста из Word'а в программу верстки веб-документов, подобную Блокноту.

Второй вариант - прибегнуть к услугам визуальных веб-редакторов (FrontPage, Word 2000 и др.), которые включают мультиязыковую поддержку. Однако, последующая программная конвертация "чернового" текста в формат HTML может привести, во-первых, к некорректному отображению текста на веб-странице некоторыми моделями и версиями браузеров, а во-вторых, к генерации совершенно ненужного и бесполезного кода, только "раздувающего" конечный размер файла (как, например, в случае с Microsoft Word 2000).

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

elei&ccedil;&atilde;o

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

В завершении разговора о специальных символах, должен сообщить одну принципиальную вещь. Прежде всего она касается случаев с буквами иностранных алфавитов: в мета-определениях таких HTML-документов необходимо указывать кодировку ISO8859, иначе такой "вредный и капризный" браузер, как Netscape Navigator, начнет выдавать полную абракадабру вместо желанных спецсимволов. MS Internet Explorer, в отличие от своего коллеги по браузерному цеху, более неприхотлив и корректно отображает все специальные символы даже в русских кодировках (полный перечень всех специальных символов, а также их теговые и кодовые конструкции можно найти здесь).

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

Если вам нужно сделать между буквами небольшой отступ, равный одному печатному символу, то никаками приемами веб-дизайна можно не пользоваться: в программе верстки просто один раз нажмите клавишу "Пробел/Space" на вашей клавиатуре.

Когда отступ требуется гораздо больше, первый вариант уже не сработает: сколько бы вы не устанавливали пробелов с помощью соответствующей клавиши, браузер все-равно расценит пустое пространство как неразрывный пробел, равный длине одного печатного символа. В этом случае следует использовать специальный тег неразрывного пробела - &nbsp; (Non-Breaking Space). В большинстве случаев многократное указание данного тега практикуется с целью обозначения отступа "красной строки" параграфа, в остальных ситуациях нагромождение &nbsp; не оправдано.

Иногда с целью заострения внимания посетителей сайта на отдельных текстовых фрагментах нужно отделить один информационный блок от другого. Здесь многие веб-мастера допускают ошибку, пытаясь отделить разные смысловые текстовые блоки при помощи тега переноса строки <BR> или (что вообще противопоказано с точки зрения HTML-верстки) упомянутого выше тега &nbsp; (неразрывный пробел). В данной ситуации следует использовать тег параграфа <P></P> с указанием неразрывного пробела внутри. Теперь объясню по порядку, почему не рекомендуется применять прочие средства. Тег <BR> хорош, когда его мало: одно-двухкратное указание данного тега вполне оправдывает свое назначение - простой или двойной перенос строки. Злоупотребление <BR> может сказаться на корректном отображении страницы в различных браузерах (Netscape Navigator в ряде случаев может "прижать" последнюю строку к нижнему краю документа, несмотря на указание <BR> в конце последней строки; обособив текст тегами параграфа <P></P>, вы гарантированно получите желаемый гозонтальный пробел внизу страницы в любом браузере). Использовать же &nbsp; (который по сути предназначен для неразрывных пробелов в пределах одной строки) для горизонтального разделения текстовых блоков - это значит не иметь ни малейшего представления об HTML-средствах текстового форматирования и не экономить драгоценное время веб-мастера.

Другой и, пожалуй, наиболее распространенной ситуацией, требующей физического разделения объектов на странице, можно считать необходимость наличия "пустого" (т.е. без какого-либо визуального содержания) пространства между табличными формами, графикой и простым текстом. Например, мы имеем каркас сайта в виде прозрачной таблицы: в первой колонке идет навигация, в третьей - контент, а средняя колонка ничего не содержит и должна играть роль разделителя навигационного и информационного блоков. Как сделать, чтобы этот разделитель оставался зафиксированным с неизменяющимися шириной и высотой, независимо от размеров окна браузера, модели и версии самого браузера, разрешения экрана и количества используемых цветов на компьютере пользователя?

Первый вариант - установить конкретные значения ширины и высоты ячейки - сразу отпадает, ибо Netscape Navigator "не знает" такого атрибута таблицы, как HEIGHT. Даже если атрибут высоты нас не интересует, стопроцентной гарантией даже не послужит указание в пределах ячейки тега неразрывного пробела. Во-первых, в зависимости от положения такой ячейки на веб-странице и конкретной модели браузера (а также его версии, что тоже немаловажно), ширина разделительной ячейки может варьироваться; во-вторых, размеры пробела в разделительной ячейке (как, впрочем, и в остальных местах HTML-документа) будут расти параллельно размеру шрифта, установленному по умолчанию в браузере пользователя или обозначенному в таблице стилей CSS (т.е., размеры "пустой" ячейки при размере шрифта в 8 и 15 пикселей будут заметно отличаться); в-третьих, как быть, если требуемая ширина "пустой" ячейки гораздо меньше шрифтовых параметров?

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

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

Наиболее распространенной ошибкой при подготовке графических распорок является отсутствие прозрачной основы. Однако, следует помнить, что распорка с цветной основой, аналогичной, к примеру, цвету заднего фона страницы, может сослужить вам дурную службу: при цветовом режиме монитора High Color цветная распорка и background документа будут совпадать, чего никак нельзя будет утверждать при палитре в 256 цветов.

Алексей Петюшкин

Оглавление/Вверх

Дизайн-Студиям!

У Вас есть своя Дизайн-Студия, Вы ищите новых клиентов, только для Вас специальное предложение по сотрудничеству. Пишите.

Рассылки Вебмастера

Вас интересуют вопросы web-дизайна, скриптов, графики, и т.п.? Тогда у Вас есть возможность подписаться на рассылку "Веб-Дизайн, азы" (более 25000 подп.)

У Вас есть вопросы по софту вебмастера, скриптам, графике и т.п.? Эти вопросы Вы можете задать в рассылке "Веб-Дизайн. Вопросы и Ответы" и в следующем номере получить отеты на свои вопросы.

На эти рассылки Вы можете подписаться прямо сейчас (форма подписки внизу этой рассылки), а также на сайте http://dweb.ru/

Баннерная & Текстовая сеть TBE.

TBE (Tranzit Banner Exchage) - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Сеть основана на технологии BannerBankа. Поддерживаются типоразмеры баннеров 120х60, 468х60, 100х100, и Текстовые Блоки. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru/go/

Оглавление/Вверх

Подпишитесь: Рассылки Subscribe.Ru Веб-дизайн, азы Веб-дизайн. Вопросы и ответы. Веб-дизайн. От А до Я.

ICQ - Клуб Адрес Клуба http://dweb.ru/1/icq.htm Если у Вас возник вопрос по дизайну, графике, скриптам и т.п. То Вы в любой момент можете его задать на странице Клуба любому консультанту находящегося в on-лайне. Для тех, кто может, а главное хочет поделиться своими знаниями, Вы можете вступить в наш Клуб, для этого присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.

Оглавление/Вверх

Авторам

Вы хотите, чтобы ваши статьи были опубликованы в этой рассылке? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети TBE (от 3000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.