Правила, местами обоснованные, местами негласные при создании проектов HTML и CSS
Приучим себя к порядку при создании даже самого маленького проекта. Эти правила в дальнейшем изрядно облегчат жизнь при работе с хостингом, заказчиком или в IT-компании.
Первый момент. Главная папка проекта.
При создании любого проекта (web, html, css) всегда создаем главную папку для проекта. Все файлы и папки проекта лежат внутри (папки, html-файлы, css-файлы, изображения, шрифты и прочее). Имя папки задается всегда латинскими символами и с маленькой буквы! Также нежелательны спецсимволы и тире ($, %,&, #, -, *) и пробелы. Нижнее подчеркивание допускается! Имя папки должно начинаться с буквы, а не с цифры (рекомендация).
Примеры правильных имен папок проектов:
- www (супер, если вы так назовете!)
- public_html (супер, если вы так назовете!)
- project
- my_project
- html_docs
- html_project
- my_html
Почему я пометил "супер, если вы так назовете!" некоторые из примеров имен папок проектов. Поясняю. На большинстве хостингов (сервисы для размещения сайтов в глобальной сети Интернет), таких как Beget, Zenon, HostLand - папки для публикации сайтов именно так и называются - www, public_html. Тем самым, мы как бы привыкаем уже работать с хостингом, и нам такие имена папок станут привычными и правильными.
Примеры неправильных имен папок проектов:
MyProject(полная печаль...)%МОЯ курсовая)))(полная печаль...)$Kursach&(полная печаль...)
Второй момент. Структура проекта.
При работе с проектом важно организовать (создать и правильно назвать) не только главную папку проекта, о которой говорилось выше, но и внутренние папки проекта. А они должны быть! Это сделает вашу работу более понятной, структурированной. Внутри главной папки проекта я рекомендую создать отдельные папки для стиля (стилей CSS), для изображений проекта и также для скриптов (java scrips). Здесь тоже существуют негласные но осмысленные правила. Все папки таже рекомендуется создавать маленькими (прописными) латинскими буквами без использования спецсимволов.
К примеру, как правило, для стилей CSS создается папка с именем css (как правило). Для папки с изображениями создается папка img, images и т.д. Для папки со скриптами создается папка js (как привило). Т.е. в итоге при создании правильной структуры проекта мы имеем главную папку проекта, внутри которой есть папки для изображений, стиля и скриптов. Имя папки должно начинаться с буквы, а не с цифры (рекомендация).
Привожу схему структуры так, как она должна правильно выглядеть в вашем компьютере для организации проекта:
Данная структура является правильной и рекомендованной. Она позволяет сразу грамотно оформить проект с точки зрения преподавателя, методических материалов, а самое главное - с точки зрения общепринятых мировых стандартов.
Если не придерживаться такой правильной и рекомендованной структуры, то согласитесь, такой проект будет выглядеть как мусорный бак, в который накидали сразу все - бутылки, пакеты, бумагу, остатки пищи и строительный мусор. Даже мусорные баки сейчас стараются разделять на стекло, пластик, бумагу и остальное...)))
Третий момент. Имена файлов проекта.
Имена html-файлов в проекте создаются и пишутся ВСЕ с маленьких букв и не имеют никаких спецсимволов! Это рекомендация, которая облегчит вам работу и касается как HTML-файлов, так и CSS-файлов. Главный файл HTML (стартовая страница) желательно имеет имя index.html. Как правило, все html-файлы проекта находятся в главной папке проекта (только в некоторых случаях они могут быть в подпапках).
index.html легко распознаётся на большинстве серверов как страница по умолчанию, поэтому многие разработчики предпочитают использовать index.html в качестве имени страницы по умолчанию.
Страница index.html — важная часть вашего веб-сайта. Это страница, которую серверы доставляют клиентам (устройствам), когда пользователи не указывают другую страницу.
Включив страницу index.html в свои проекты веб-разработки, вы поможете (к примеру) посетителям вашего сайта иметь хорошо спроектированный сайт и поможете защитить файлы в вашем каталоге от уязвимостей.
Правильные имена файлов HTML (если в проекте используются другие страницы, кроме главной):
- contacts.html (обычно используют для страницы с контактами, формой обратной связи и т.п.)
- about.html (обычно используют для страниц "О нас", "Обо мне" и т.д.)
- ourwork.html (обычно используют для страниц "Наши работы", "Портфолио" и т.д.)
То есть, как вы видите, страницам (html-файлам) дают некие осмысленные имена, написанные строчными буквами, латиницей, без всяких спецсимволов и заглавных букв. Нижнее подчеркивание допускается.
То же самое касается и css-файлов. Имена css-файлов задают строчными буквами, латиницей, без всяких спецсимволов, заглавных букв и пробелов. Допускается нижнее подчеркивание. Для простых проектов используют, как правило, один файл CSS, и дают ему понятное и популярное имя. Как я указывал выше, файл стиля рекомендую разместить в отдельную папку с именем css. Имя файла должно начинаться с буквы, а не с цифры (рекомендация).
На будущее. При работе с хостингом. В конце концов, даже если ваш сервер допускает использование специальных символов, это может быть не так, если потом вы решите перейти к другим хост-провайдерам.
Правильные имена файлов CSS:
- style.css (обычно используют такое имя)
- main.css
- default.css
- standart.css
- global.css
- color.css (обычно используют для цветовой схемы сайта)
- shema_green.css (пример использования для цветовой схемы сайта, в данном случае зеленой)
- vidget_calculator.css (пример для виджета калькулятора)
Но, бывает так, что в проекте используются несколько подключенных файлов CSS. Поясню для чего. Например в проекте есть много графиков и диаграмм, или же работают какие-либо сложные виджеты. Есть смысл стиль для таких моментов прописать в отдельном файле. Например, для диаграмм и графиков, я бы создал дополнительный файл CSS с именем diagrams.css, для калькуляторов онлайн - calculators.css. Как видите, я использовал осознанные имена файлов стиля, дабы потом не ломать голову, что и где прописано и для каких целей. К примеру, если вы будете использовать сторонний аудио-видеоплеер для медийного сайта (проекта), то комплекте плеера могут поставляться отдельные файлы стиля, которые будут иметь уникальный стиль со своим именем - media_player.css, и его нужно будет подключить для использования в проекте.
Пример с комментариями:
<!DOCTYPE html>
<html lang="ru">
<head>
<!--свой подключенный стиль проекта-->
<link rel="stylesheet" href="/css/style.css" />
<!--отдельный подключенный стиль плеера видео-->
<link rel="stylesheet" href="/css/video_player.css" />
</head>
<body>
</body>
</html>Как видите, в данном примере все пути к файлам стиля указаны в папку с именем css.
Изображения для проектов. Рекомендации к файлам.
Как вы поняли, изображения для проекта HTML рекомендуется размещать в отдельную папку с именем img, images, pic, pictures и т.д. Как назовете. Путь в коде HTML к изображениям будет выглядеть в зависимости от имени вашей папки:
<!--если папка названа img-->
<img src="img/cartinka.jpg" alt="Описание картинки">
<!--если папка названа images-->
<img src="images/cartinka.jpg" alt="Описание картинки">
<!--если папка названа pictures-->
<img src="pictures/cartinka.jpg" alt="Описание картинки">
<!--если папка названа pic-->
<img src="pic/cartinka.jpg" alt="Описание картинки">Теперь насчет имён фалов изображений. Постарайтесь имена давать не слишком длинные и осмысленные. Если вы сохраняете найденную картинку в интернете в папку проекта (например в папку img), сразу переименовывайте в осмысленное для вашего проекта назавание, сохраняя неизменным расширение файла (jpg, jpeg, png, webp, gif). Для чего переименование необходимо под вас (ваш проект)? К примеру, у вас проект связан с кораблями и вы готовите картинки под него. Ищете в интернете корабли (изображения), сохраняете в папку изображений проекта. Имя первого сохраняемого файла может быть следующее - Wjkl0786Qzxx_c8999900.jpg. Зачем оно такое страшное вам нужно? Сохраните как boat_1.jpg (к примеру). Следующий корабль в вашу подборку переименуйте при сохранении boat_2.jpg и т.д. Но потом, при верстке (написании кода HTML), вам же самим будет легче прописывать (например в карточки или галерею) эти изображения. Вы все равно (дабы избежать лишнего клацания по клавишам) будете копировать теги вставки картинок (<img>) от одного корабля, и применять к другому. Остается только лишь заменить в имени файла одну цифру.
<!--картинка корабля 1-->
<img src="img/boat_1.jpg" alt="Описание корабля 1">
<!--картинка корабля 2-->
<img src="img/boat_2.jpg" alt="Описание корабля 2">
<!--картинка корабля 3-->
<img src="img/boat_3.jpg" alt="Описание корабля 3">
<!--картинка корабля 4-->
<img src="img/boat_4.jpg" alt="Описание корабля 4">Это удобно, практично и экономит кучу времени. Согласитесь?
Немаловажно проводить подгонку изображений для проекта по размерам. Если в карточках каталога (товаров, работ и т.п.) используются одинаковые по ширине и высоте картинки, то потрудитесь в графическом редакторе (например в Photoshop) обработать эти изображения - подогнать под отинаковую высоту и ширину (в пикселях). Не забывайте оптимизировать графику для web. Не стоит использовать избражения по ширине больше 1024 пикселя для карточек или каталога (можно и меньше). Если по клику на миниатюры изображений должны открываться большие картинки, то обычно сохраняют в проект миниатюру изображения, и большое такое же изображение. Чтобы избежать нагромождения файлов в папке с изображениями (img, images и т.д.), создаются для упрощения жизни дополнительные подпапки в папке с картинками.
Это, конечно, отдельная статья и лекция - оптимизация графики для web-проектов, но все это следует учитывать!