<BR> или <NOBR>
Тег <br> означает форсированный (вручную) перенос строки. При верстке веб-страничек этим тегом приходится пользоваться очень часто. Например, для того, чтобы создать немаркированный вертикальный список:
Раз<br>
Два<br>
Три<br>
После обработки этого текста браузером, пользователь увидит:
Раз
Два
Три
Очень удобно создавать вертикальные цепочки из картинок. Линий "склейки" видно не будет, а у пользователя создастся впечатление непрерывности графической вставки.
У этого тега есть еще одно применение. Очень часто верстальщики используют его в качестве распорки. Устанавливают пару тегов
| |
Парный тег <nobr> является идеологически противоположным тегу <br>. Текст (да и не только текст) заключенный в конструкцию <nobr></nobr> не переносится на другую строку ни при каких условиях. Рассмотрим простой пример:
В примере (а) инициалы оторваны от фамилии. Так делать ни в коем случае нельзя. Выходов из подобной ситуации два. Или писать имя и отчество полностью (Александр Сергеевич), или воспользоваться возможностями тега <nobr> (пример (б)). В HTML код этого участка текста выглядит следующим образом:
Почему <nobr>А. С. Пушкин</nobr>
писал матерные стишки?
Перевести текст, заключенный в тег <nobr>, на другую строку все-таки можно. Сделать это можно опять-таки с помощью тега <br>. Так что в борьбе "<br> или <nobr>" верх одерживает <br>!
" " или ?
В спецификации HTML указано, что два и более пробелов, стоящих подряд, не будут учитываться браузерами при формировании итогового изображения. А ведь нередко нужно оставить какое-то место пустым, не прибегая при этом к махинациям со свойствами таблицы или всяким прозрачным gif'ам. На помощь приходят спецсимволы. И из их числа. Еще его называют неразрывным пробелом. Он играет роль простого пробела, с одной лишь разницей — "разорвать" его нельзя. Поясню: если поставить этот символ между словами, то браузер "подумает", что это одно слово, и перенесет всю конструкцию на следующую строку. Вернемся к нашему примеру:
Почему А. С. Пушкин
писал матерные стишки?
Зритель увидит примерно то же самое, что и в примере (б).
Помимо инициалов, неразрывный пробел используется внутри сокращений: "т. д.", "т. п.", "т. е." и прочих. Между знаками "№" и "§" и числами, к ним относящимися (например, № 1). Между числовыми значениями и единицами измерения (1 Мб). Также неразрывный пробел используется для отделения версий программ от названия. Например, Windows 98 или Windows XP.
Еще одна немаловажная деталь. Так как неразрывный пробел все-таки является символом, то можно смело менять его кегль (жирность, наклон). В результате, будет меняться отделяемое им расстояние. По умолчанию кегль равен основному размеру шрифта на странице. Поэтому я не рекомендую использовать этот символ для "распорок". Все-таки, шрифты это такая штука, которая неизвестно как себя поведет на компьютере пользователя.
АС Пушкин — книжка про летчиков
Начинающие веб-верстальщики довольно часто делают ошибку в написании инициалов. Казалось бы, совсем несложный элемент. А как только его не коверкают:
|
А.С.Пушкин (без пробелов)
А.С. Пушкин (пробел перед "Пушкин")
Пушкин А.С. (все наоборот)
Александр Сергеевич П. (сократили не то, что нужно)
...и еще около десятка различных вариантов. Самым забавным мне кажется: А. Пушкин С. Вот и понимайте, как хотите.
А ларчик просто открывался. Требовалось всего-то запомнить пару правил:
1. Инициалы — не аббревиатура. Не стоит прижимать Имя к Отчеству, а Имя с Отчеством к Фамилии. "Дайте простору" (но не больше одного пробела).
2. Фамилия неразрывна с Именем и Отчеством. Поэтому, как и в первом примере, следует следить за корректностью построения слов.
Теперь немного практики. Как же добиться желаемого эффекта? Во-первых, использовать опыт предыдущего примера. Во-вторых, помнить, что сначала идет И., затем, через неразрывный пробел, О., и лишь потом, через тот же самый , идет Ф. И никак не наоборот.
В последнее время мне часто попадаются на глаза книги, где в заголовках пишут И.О. Фамилия. То есть с одним пробелом между Именем-Отчеством и Фамилией. Не берусь спорить о корректности этого метода. Мой вам совет, придерживайтесь консервативных, классических норм. Ваши работы от этого ничего не потеряют, а наоборот, приобретут профессиональный и "ухоженный" вид.
Тире или дефис
Наверняка вы знаете разницу
|
Теперь о дефисе. Этот знак препинания ставится в сложных словах и выражениях (красно-белый или вице-президент). Вставляется без помощи каких-либо подстановок — прямо с клавиатуры.
Из-за того, что в некоторых шрифтах напрочь отсутствуют разновидности этих знаков препинания, верстальщики начали ошибочно заменять нужные им тире на дефисы (знак минус также очень часто заменяется дефисом, а это неправильно).
Верстайте правильно, читатели это оценят.
Кавычки как национальная особенность
С кавычками дело обстоит гораздо сложнее и, что называется, запущеннее. Мало кто точно знает, где какие нужно ставить. Давайте разберемся.
Итак, существует четыре типа кавычек: <<елочки>>, "лапки", “английские двойные” и ‘английские одинарные’. В русских текстах традиционно применяются "елочки". В английских текстах используются “английские двойные”. Чтобы обозначить вложенные кавычки, очень часто применяют смесь типов кавычек. Так, к примеру, для "кавычек „внутри“ кавычек" в русском тексте используют „лапки“. В английском языке для обозначения внешних кавычек используют “английские двойные”, а для внутренних — ‘английские одинарные’.
Не стоит также забывать мнемонические (на данный момент самые надежные) подстановки: « ("), „ („), “ (“), ” (”), ‘ (‘) и ’ (’).
Еще один немаловажный нюанс. Как быть с форматированием текста (цвет, жирность, наклон и прочее)? Довольно простой, надо сказать, вопрос. Никакое форматирование текста не касается кавычек (это "жирный" текст), если только весь текст не выдержан в едином стиле (к примеру, "это жирный красный текст").
А вот со знаками препинания все просто. В русских текстах принято выносить все знаки за "кавычки"! В английских же, наоборот, "вносят!"
Другой ALTернативы нет
Теперь немножко углубимся в дебри HTML. Думаю, о свойстве alt тега <img> знают все. Чего только не говорили о нем, чего только не писали... В целом, я придерживаюсь теории, что этот параметр должен быть внутри каждого тега <img>. Но стоит ли его каждый раз чем-то заполнять? Вот тут сразу становится видно, кто подходит к делу с умом, а кто еще с чем-то. Пустовать этот параметр не должен в трех случаях. Первый, если на картинке имеется текстовая информация (например, пункт меню, логотип, кнопка). Ее следует продублировать в поле alt:
|
|
К значению параметра alt нужно относиться серьезно. В случаях, не перечисленных выше, заполнять этот параметр не надо. Повторяю: не надо! Особое внимание хочу обратить на популярные распорки gif 1x1. Не надо ничего писать в поле alt. Просто оставьте его пустым — alt="".
Главное, никогда не забывайте вносить этот параметр. Путь он даже будет "пустой". Это важно, так как при выключенной графике браузеры автоматом вставляют слово "Рисунок" на место alt-текста. И это не есть хорошо. Сами посудите, тот же самый gif размером 1 на 1 пиксель растягивается до габаритов 80 на 10 пикселов. Подобные курьезы способны напрочь отбить у пользователей желание посещать вашу страничку. Так что держите ухо востро и alt наготове.
* * *
Теперь, ради тренировки, откройте HTML-код вашей домашней странички и в соответствии с тем, что вы прочитали в статье, подправьте ее. Выглядеть она будет на порядок лучше.
Надеюсь, я смог вас обучить некоторым важным нюансам профессиональной HTML-верстки. Будут предложения по продолжению... пишите. Как говорится, </html>.
P.S. При написании статьи были использованы материалы из "Веб-дизайн: книга Дмитрия Кирсанова", "Символ-Плюс", 2001 г.