Частые ошибки при верстке сайтов. Имена файлов в проекте

Частые ошибки при HTML верстке сайтов. Имена файлов в проекте

Несколько простых правил соблюдая которые, вы избежите массу проблем со ссылками, изображениями, страницами, скриптами и стилями внутри проекта.

Часто можно встретить когда файлы носят названия вроде Image ФОТО forest.JPEG. Вставляя такое изображение на сайт можно допустить с десяток ошибок, в результате чего изображении не отобразиться. В этом названии файла я привел все возможные ошибки. Часть символов набрана заглавными буквами. Есть пробелы в названии файла. Расширение файла набрано заглавными. К тому же я привел расширение JPEG состоящее из 4-х букв, когда существует и просто jpg из 3 букв.

Вставляя такую картинку на сайт можно ошибиться с заглавными, пропустит пробел, указать расширение строчными и не заглавными, и в конце концов спутать JPEG и jpg.

Внимательно прочитайте все правила ниже и применяйте их в каждом проекте при верстке сайта.

Правила именования файлов в проекте

Эти правила относятся ко всем файлам в проекте. Без исключения. К HTML страницам, изображениям, файлам со стилями и скриптами, и даже к папкам (каталогам, директориям).

 

Допустимые символы

Имя файла может содержать следующие символы: латиница, цифры, символы - и _

 

Только латиница. (Только хардкор ;-))

Имя файла не может содержать кириллицу (буквы русского алфавита). Только латиница  и/или арабские цифры.

Неправильно: фото.jpg
Правильно: photo.jpg

Неправильно: котик003.jpg
Правильно: kotik003.jpg

 

Дефисы вместо пробелов

Вместо пробелов необходимо использовать символ дефиса - или нижнего подчеркивания _

Неправильно: photo forest.jpg
Правильно: photo-forest.jpg или photo_forest.jpg

Неправильно: favicon (5).ico
Правильно: favicon.ico

Неправильно: photo page.html
Правильно: photo-page.html

 

Только строчные символы

Имя файла и его расширения должно быть набрано строчными буквами. Никаких заглавных.

Неправильно: IMAGE.jpg image.JPG
Правильно: image.jpg

 

Используйте эти правила, запомните их, встройте на уровень подсознания, создайте новые нейронные связи, запишите на подкорку и вы избежите массу проблем.

P.S.

В большом проекте, может возникнуть потребность переименовать большое количество файлов, скажем изображений. В таком случае можно воспользоваться функцией массового переименования файлов которая есть в файл менеджерах, например в FreeCommander.

 

Данная статья написана для участников курса по созданию и HTML верстке сайтов, онлайн школы WebCademy.ru

  • winprg

    Hello Юрий
    пишу в первый пост сайта. Делается редактор текста, CudaText. Видел ваш обзор на Сублиме. Может можно как-то сделать обзор CudaText? в инете нет обзоров (кроме листингов) на русском. Алекс

    • День добрый. Честно говоря не вижу смысла обозревать CudaText. Внешне он не привлекателен, если бы был крутой внешний вид, интересная тема — меня бы это зацепило. По функциям тоже не сильно отличается от других редакторов. Для чего его использовать или для кого. Brackets например для верстальщиков. Sublime — универсальный. PHP storm — IDE. А тут неясно. В общем не цепляет он вот так с первого раза.

      • winprg

        В общем универсальный. как сублиме. А для чего -для замены Субл. CudaText open-source, free, под все платформы, даже Raspberry.