Создание сайта html. Практика

Подготовка:

Создаю структуру наполнения сайта — схему расположения страниц/ разделов относительно друг друга.

Определяю: 

• иерархию — как связаны главная с подразделами;
• навигацию — система ссылок доступа к разделам — уровни меню;
• категории и подкатегории;
• файловая структура.

Плоская или глубокая структура — насколько глубоко страницы находятся в структуре. Для плоской структуры на большинство страниц легко попасть с главной или добраться за нескольких кликов, в то время как в глубокой структуре страницы могут находиться на большем удалении от главной.

Инструменты:

• Браузер,
• редактор исходного кода, иначе называют «текстовый редактор». Я пользуюсь средой разработки Geany,
• сайт caniuse для определения действующих нововведений html и css,
• сайт валидатор W3C(https://validator.w3.org/) для проверки правильности верстки и файла стилей.

Есть общие правила, которых нужно придерживаться.

Алгоритм действий на примере простого сайта-визитки

Под термином «визитка» понимают подачу основной информации о человеке или компании. 

Сайт-визитка дает общее представление. Содержит страницы:

• Главная — имя или название компании, вид деятельности, предложение.
• Контакты
• Продукт или услуга
• Юридическая информация

Самый простой вариант не предусматривает хранения больших объемов информации и взаимодействия с пользователем. 

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

Файлы и папки:

В папке с именем домена 

index.html — главная страница, 

contacts.html — обратная связь, контакты,

products.html — продукты или услуги,

documents.html - правовые документы: политика конфиденциальности, правила пользования,

директория images для изображений,

media — видео и аудио-ролики.

Навигация:

В шапке расположены ссылки: Главная, Продукты, Контакты. Ссылка становится неактивной, когда пользователь просматривает ее.

В подвале — ссылка на правовые документы, отметка об авторстве.

После того, как мы выяснили общие задачи, выполняем:

• Разработка макета.
• Разработка стилей.
• Верстка.
• Размещение файлов согласно структуры.
• Проверка правильности html и css.
• Правка.
• Выкладываем в Интернет. 

Таким образом можно сверстать сайт html небольшого объема. При большом количестве страниц, за основной язык программирования следует принять другой.