Правила грамотной верстки сайтов
Автор: Земсков Юрий
В этой статье хотелось бы рассказать о некоторых, известных мне правилах верстки, обращая внимание также и на их html-реализацию.
Вот элементарный пример неправильного отображения пробела:
У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т. д. |
Пробел, как вам известно, используется для разделения слов в тексте. Также пробелом отделяется слово со знаком препинания от следующего за ним слова, поэтому следует писать примерно так:
У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т._д. |
Хм... надеюсь, не надо объяснять, что символ "_" поставлен для наглядности, а не потому что так надо :) К тому же представился случай рассказать о неразрывном пробеле ( ). Неразрывный пробел, как и понятно из его названия, не позволяет браузеру "разделить" на странице соединенную этим пробелом фразу, поэтому наш предыдущий пример в html-коде лучше всего записать так, чтобы "д." случайно не оказалась на другой строке:
У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т. д. |
Такая запись позволит избежать разрыва сокращения "и т. д.". Также можно использовать (если по-другому никак не получается) для выравнивания и позиционирования элементов html-страницы, т. к. любое количество обычных пробелов, следующих друг за другом, браузерами отображается как один пробел, а каждый неразрывный немного отодвигает при отображении страницы следующие за ним элементы.
Начну с того, что дефис и тире - это разные вещи. Дефис разделяет между собой части одного слова, а тире - слова в предложении. Дефис не отделяется пробелами от соседних символов, а длинное тире отделяется.
Веб-дизайн - очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят "Китикет", каждая порция которого дает дизайнеру 2-3 тысячи килокалорий... |
Уф, пример получился глупый, но зато удалось воплотить в нем все виды дефисов и тире. В html это выглядит так:
Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий… |
Пожалуй, стоит немного разъяснить:
Для дефиса (-) нет html-кода, он ставится клавишей "-", ну эта которая еще служит как знак вычитания и находится рядом с клавишей "+" :) Еще раз напомню, что дефис разделяет части сложносоставного слова.
Длинное тире (—) разделяет слова в предложении и
отделяется от этих слов пробелами. Да, кстати, маленькое домашнее задание:
подумайте почему в примере используется код:
"Веб-дизайн — очень)"
а не:
"Веб-дизайн — очень…"?
Короткое тире (–) разделяет числа и само не отделяется от них пробелами.
С этим тоже вроде разобрались. Думаю, что не так уж и тяжело набрать "—" вместо нажатия клавиши "-". Знайте, ваши тяжкие муки и страдания в этом случае не пройдут даром, текст будет более читабелен, да и сайт станет выглядеть солиднее.
Существует 2 вида кавычек:
Кавычки-"лапки":
выглядят: "
html-код: "
Кавычки-елочки»:
левая и правая кавычки: « »
html-код: « и » для левой и правой соответственно.
По правилам русской типографии однозначно принято употреблять кавычки-"елочки". Но в интернете пока безоговорочно властвуют кавычки-"лапки". Почему бы это? Может потому что для "лапок" есть соответствующая клавиша, которая прекрасно работает в WYSWYG html-редакторах, а "елочки" надо перелопачивать вручную. Одним словом, лень победила общепризнанные правила, неважно, что от этого страдает престиж сайта.
Подождите! Не стоит выбрасывать кавычки-"лапки" на задворки истории! Если вначале или в конце цитаты встречаются внутренние и внешние кавычки, то они должны визуально различаться:
Один сетевой графоман недавно написал редчайший бред: «Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят "Китикет"». |
Ну и напоследок еще несколько известных мне правил:
Вот, пожалуй, и все. Тем, кто заинтересовался этой темой, советую просмотреть приведенные ниже ссылки. Думаю пригодится :)