Создание, раскрутка и поддержка Вашего сайта (материалы сборника “Бизнес, Секс, Автомобиль...”)

Как правильно сверстать сайт

Правила грамотной верстки
сайта.


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

Пробел.

Пробел, как вам известно, используется для разделения слов в тексте. Также пробелом отделяется слово со знаком препинания от следующего за ним слова, поэтому следует писать примерно так:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т._д.

Хм… надеюсь, не надо объяснять, что символ «_» поставлен для наглядности, а не потому что так надо.  К тому же представился случай рассказать о неразрывном пробеле ( ). Неразрывный пробел, как и понятно из его названия, не позволяет браузеру «разделить» на странице соединенную этим пробелом фразу, поэтому наш предыдущий пример в html-коде лучше всего записать так, чтобы «д.» случайно не оказалась на другой строке:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т. д.

Такая запись позволит избежать разрыва сокращения «и т. д.». Также   можно использовать (если по-другому никак не получается) для выравнивания и позиционирования элементов html-страницы, т. к. любое количество обычных пробелов, следующих друг за другом, браузерами отображается как один пробел, а каждый неразрывный немного отодвигает при отображении страницы следующие за ним элементы.

Дефис и тире.

Начну с того, что дефис и тире - это разные вещи. Дефис разделяет между собой части одного слова, а тире - слова в предложении. Дефис не отделяется пробелами от соседних символов, а длинное тире отделяется.

Веб-дизайн - очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Уф, пример получился глупый, но зато удалось воплотить в нем все виды дефисов и тире. В html это выглядит так:

Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Пожалуй, стоит немного разъяснить:

Для дефиса (-) нет html-кода, он ставится клавишей «-», ну эта которая еще служит как знак вычитания и находится рядом с клавишей «+» :) Еще раз напомню, что дефис разделяет части сложносоставного слова.

Длинное тире (—) разделяет слова в предложении и отделяется от этих слов пробелами. Да, кстати, маленькое домашнее задание: подумайте, почему в примере используется код:

«Веб-дизайн — очень…» а не:  «Веб-дизайн — очень…»?

Короткое тире (–) разделяет числа и само не отделяется от них пробелами.

С этим тоже вроде разобрались. Думаю, что не так уж и тяжело набрать «—» вместо нажатия клавиши «-». Знайте, ваши тяжкие муки и страдания в этом случае не пройдут даром, текст будет более читабелен, да и сайт станет выглядеть солиднее.

Кавычки.

Существует 2 вида кавычек:

Кавычки-«лапки»: выглядят: " html-код: "

Кавычки-«елочки»: левая и правая кавычки: « » html-код: « и » для левой и правой соответственно.

По правилам русской типографии однозначно принято употреблять кавычки-«елочки». Но в интернете пока безоговорочно властвуют кавычки-«лапки». Почему бы это? Может потому что для «лапок» есть соответствующая клавиша, которая прекрасно работает в WYSWYG html-редакторах, а «елочки» надо перелопачивать вручную. Одним словом, лень победила общепризнанные правила, неважно, что от этого страдает престиж сайта.

Подождите! Не стоит выбрасывать кавычки-«лапки» на задворки истории! Если вначале или в конце цитаты встречаются внутренние и внешние кавычки, то они должны визуально различаться:

Один сетевой графоман недавно написал редчайший бред: «Веб-дизайн - очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят "Китикет"».

Разное.

Ну и напоследок еще несколько известных мне правил:

В конце заголовков точка не ставится, но если там стоят другие знаки препинания, то они сохраняются.

Многоточие  обозначается  не  тремя  точками,  а  кодом  …  Мелочь, конечно, но все-таки…

Не стоит писать «Вы», «Ваш» и т.п. Такие обращения используются в переписке, вряд ли сайт может сойти за личную переписку. Так что подобные вещи выглядят довольно смешно. Лучше пишите «вы», «ваш»…

Знаки copyright и registered - это не буквы «с» и «r» в скобках, а коды © и ® соответственно.

Вот, пожалуй, и все. Думаю пригодится :)

Автор: Земсков Юрий (yura@computerlibrary.info)
Дата публикации: 23/03/2003

Оставьте свой комментарий к статье!

На странице "Книги - бесплатно" Вы можете СВОБОДНО скачать некоторые материалы раздела "Бонус" немедленно.







Комментарии:

Комментариев еще нет. Вы будете первым!



Ваш комментарий к статье: Правила комментирования:

Имя (обязательно)
E-mail (не показывается, обязательно)
Защита от спама: введите сумму цифр 8+7= ? (обязательно)


Поиск по сайту:



Новые статьи
прямо в Ваш почтовый ящик!

В каждом выпуске ссылка
на БЕСПЛАТНОЕ скачивание
одной из книг раздела "Бонус".

Просто заполните
приведенную ниже форму!







[ В раздел ]  [ Вверх ]  

[ Главная ] [ Разделы сборника ] [ Бонус ] [ Заказ сборника ] [ Контакты ]
Copyright © 2007 - 2016 by Геннадий Нестеров