Как структурировать свой HTML для хорошего повторного использования кода и обслуживания?

У меня ограниченный фон для кодирования собственных приложений с использованием таких языков, как С++, C и Java, но теперь я пытаюсь проникнуть в веб-разработку. Хотя большинство из них довольно простые и чистые, у меня возникает несколько проблем с пониманием того, как я могу создавать веб-сайты и webapps, которые хорошо выполняют повторное использование существующего кода там, где это применимо. Насколько я понимаю, при использовании таких вещей, как JavaScript, CSS и PHP, вы можете просто импортировать скрипты из других файлов для использования в любом html файле, что очень полезно. Но мне сложно понять, как это можно сделать с HTML, возможно ли это?

Например, скажем, у меня есть одностраничный веб-сайт с "заголовком" и рядом уникального контента ниже (например, логотип stackoverflow, кнопки и меню в верхней части этой страницы). Но теперь я хочу расширить свой веб-сайт и добавить 3 новых страницы, которые имеют сходный макет и имеют ту же самую "панель заголовка" вверху. Один из способов добиться этого - просто скопировать тот, который содержит эту часть кода, и вставить его в page2.html, page3.html и page4.html; уникальный код для каждой страницы будет отдельным, и он будет работать нормально. Проблема, с которой я сталкиваюсь в этом подходе, заключается в том, что очень больно изменять содержимое "заголовка" без прохождения нескольких страниц HTML, и вероятность создания странных несоответствий в дизайне/контенте становится высокой. Я предполагаю, что "stackoverflow.com/info/ask" и "stackoverflow.com/tags" не содержат дубликатов, копировать и вставлять код для элементов в верхней части страницы, но я не уверен как добиться этого из-за моего ограниченного опыта HTML.

Итак, есть ли способ "включить" или "импортировать" HTML-код ради чистого повторного использования кода на нескольких страницах? Является ли эта функциональность встроенной в HTML или мне нужно глубже вникать в такие вещи, как JavaScript и PHP, чтобы создавать хорошо структурированные веб-сайты? Я искал ответ на этот вопрос, и несколько человек предложили iframes, но затем почти сразу предложили против их использования в современном веб-дизайне. Что может быть хорошим подходом?

Ответ 1

Теперь можно добавить фрагменты кода, но в нем отсутствует надлежащая поддержка браузера. Он называется html-templates. В будущем это позволит вам создавать собственные html-шаблоны, чтобы избежать дублирования кода. Но на данный момент.. не родной HTML, только другие технологии (основанные на PHP, основанные на Javascript, на основе Ruby и не на основе).

Ответ 2

Если вы используете Dreamweaver, у него есть система шаблонов для HTML без необходимости использования определенных серверных языков.

В противном случае это звучит как (и чтобы это упростилось без использования CMS или полной системы шаблонов, таких как Smarty), вы хотите использовать PHP для включения фиксированных блоков в свой код, таких как верхний и нижний колонтитулы сайта.

Например, в верхней части каждого файла вашего сайта вы можете иметь следующий PHP-код для вставки файла header.php в эту позицию:

<?php  include "header.php"; ?>

Надеюсь, это поможет в качестве отправной точки:)

Ответ 3

Для повторного использования кода вам нужно будет использовать PHP или фреймворк JavaScript.

Я бы рекомендовал более позднюю, особенно http://angularjs.org/, которая является удивительной. Чтобы создавать веб-приложения, используя представления (и другие компоненты), вы можете повторно использовать свой код.

Стоит проверить, и с вашим фоном у вас не должно быть никаких проблем.

Приветствия.

Ответ 4

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

Теперь я бы использовал JQuery - плагин javascript для загрузки всех данных HTML из header.html в div заголовка. Код JQuery для него выглядел бы как-то вроде этого, жаль, что прошло какое-то время и у нас нет доступа к инструментам прямо сейчас.

$(document).ready(function(){
   $('#header').load("header.html");
});

Для PHP вы можете написать файл функций и: include "functions.php"; PHP также поддерживает OOP, и вы можете делать внутри него классы и методы повторного использования.

Ответ 5

Я бы рекомендовал "google" для "Лучшие методы HTML" и попробуйте некоторые результаты, например: http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/

Ответ 6

есть много способов сделать это. Поместите код CSS и Java- Script в центральные файлы, которые вы ссылаетесь в своих файлах HTML, - это хороший старт.

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

Недавно я начал использовать Jekyll (http://jekyllrb.com/), в основном вы создаете шаблоны для страниц, с заголовком, навигацией и дизайном в центре файлы.

Сами страницы содержат только контент, а Jekyll генерирует домашнюю страницу.

Andy