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