Вёрстка сайта на основе HTML с нуля.

(Last Updated On: 09.03.2021)

Стоит ли говорить о том, что любую работу по созданию сайта, а тем более верстку, следует выполнять аккуратно, потому что в дальнейшем переделывать верстку будет весьма трудоемко.

Рыская по просторам Интернета, мы не обращаем внимания на код HTML (естественно, это не касается верстальщиков, которых интересует чужая работа).

Да и зачем такой интерес простому пользователю? А ведь код HTML является своеобразным зеркалом умений человека и какая использовалась вёрстка сайта-резиновая вёрстка сайта, блочная вёрстка сайта и т.д.

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

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

Чтобы код вашей страницы смотрелся аккуратно, «неискусственно» и достойно, чтобы вы могли легко сориентироваться, то изучите пункты, которые будут приведены ниже и старайтесь их придерживаться в процессе написания HTML:

    • Написание html-тэгов большими буквами – неправильно (BODY, TABLE, IMG). Это является первым признаком искусственной работы. В подобном коде сложно ориентироваться, т.к. большая часть кода на остальных сайтах пишется строчными буквами (body, table, img), что является общепринятым стандартом. Если html-код будет написан прописными буквами, то он будет признан невалидным html-валидатором.
    • Атрибуты следует записывать в кавычки (к примеру, align=»right»). Это придает коду некую аккуратность и полную совместимость с XML.
    • В процессе присвоения какого-либо значения (высоты, ширины) пикселя, не следует забывать это указывать (width=»8px»). К примеру, «height=21» — это ошибка, правильней писать «height=»21%»».
    • Существуют тэги, в которых отсутствует закрывающий тэг (hr, img, br),  однако в соответствии со стандартами W3C (людей, диктующих правила html), в подобных случаях следует закрывать тэг слэшем.
    • Лишние комментарии (обычно ими засоряют код программы) ни в коей мере не пойдут на пользу, а вот свои комментарии в дальнейшем помогут разобраться значительно быстрее. Тем более, если ресурсом будет заниматься кто-то другой.
    • Нужно постараться не оставлять java script и стили на странице. Их нужно вывести в отдельный файл, чтобы было легче что-то поменять, да и код существенно уменьшится (порой очень заметно).
    • Любой символ имеет замену. В любом справочнике по html имеется подробный список подобных подстановок. Крайне желательно ими воспользоваться, для избегания дальнейших проблем с просмотром во множестве браузеров.

Если вы хотите сделать действительно хороший и качественный сайт, то пользоваться специальными программами, которые созданы для клепания быстрых сайтов не стоит. Они будут чрезвычайно сильно засорять код, а из этого вряд ли когда выйдет что-то хорошее.

Рекомендуется воспользоваться редакторами для программистов, в которых код будет писаться самостоятельно, однако скорость работы будет заметно увеличена за счет дополнительных возможностей (проверка на валидность, подсветка кода, правильность по стандартам CSS и HTML).