Изначально я сосредоточился на JavaScript и его фреймворке, думая, что HTML не так важен. Но очень скоро я оказался неправ. Я понял, что хорошее знание HTML и CSS также не менее важно.

Поскольку все, что мы видим в сети, в конечном итоге отображается в виде блоков HTML, я почувствовал необходимость поделиться своим способом структурирования HTML-страниц.

Обычно нам предоставляется визуальное оформление страницы. Итак, начнем с одного:

Вышеупомянутый дизайн принадлежит некой компании по дизайну интерьеров с чистым и элегантным дизайном. Теперь, когда у нас есть VD (визуальный дизайн), обычно нашим следующим шагом является начало написания кода. Но тут все начинает идти не так.

Мы можем быть уверены в своих навыках, но все же мы всегда должны тщательно продумывать дизайн.

Самый первый и важный шаг - правильно разработать дизайн.

Давайте рассмотрим приведенный выше дизайн. Здесь страница разделена на несколько разделов, и каждый раздел имеет уникальный дизайн.

  • На странице четыре основных горизонтальных раздела.
  • Первый раздел имеет заголовок с логотипом и кнопками навигации. В этом разделе также есть фоновое изображение с сообщением в центре.
  • Второй раздел имеет сплошной цвет фона с текстовым содержимым в центре.
  • Третий раздел разделен на две вертикальные части. Первая часть (левая часть) содержит текст, а вторая часть (правая часть) - изображение.
  • Четвертый раздел разделен на три вертикальные части. Первая и третья части (крайняя левая и крайняя правая) имеют белый фон с изображением и текстовым содержимым. Вторая (средняя часть) имеет черный фон с изображением и текстовым содержимым.

Второй шаг - это каркас дизайна в виде представления блока HTML с помощью подхода TLF (верхний левый поток).

Возьмем первый раздел страницы.

Подход TLF работает следующим образом:

  • Сначала разделите дизайн по горизонтали.
  • Затем разделите горизонтальные части по вертикали.

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

В приведенном выше разделе

  • Самый внешний родитель - это родитель с синей рамкой.
  • Его можно разделить по горизонтали на два основных подраздела: один с заголовком, а другой с текстовым содержимым. Итак, мы разделяем их пурпурной рамкой. (Топ в подходе TLF).
  • В блоке заголовка дизайн не может быть дополнительно разделен по горизонтали. Итак, ищем вертикальные деления.
  • Его можно разделить по вертикали на три части. Мы разделили их желтой рамкой (слева в подходе TLF).
    1. Логотип
    2. Блок кнопок навигации
    3. Кнопка CTA
  • Теперь снова переходим к блоку с логотипом и смотрим, можно ли его разделить по горизонтали. Нет. Можно ли его разделить по вертикали? Нет. Это означает, что блок логотипа является окончательным, и мы переходим к следующему блоку (подход Left в TLF).
  • Смотрим на блок кнопок навигации и смотрим, можно ли его разделить по горизонтали. Нет. Можно ли его разделить по вертикали? да.
  • Мы разделяем их как текстовые блоки с белой рамкой (подход Left в TLF).
  • Смотрим на CTA-блок, который дальше делить нельзя. На этом каркас нашего заголовка завершен.
  • То же можно повторить и для блока текстового содержимого.

Правильный способ использования подхода TLF - посмотреть, можно ли разделить проектный блок по горизонтали. Если ДА, разделите. Если НЕТ, посмотрите, можно ли разделить проектный блок по вертикали. Повторяйте то же самое, пока все блоки дизайна не будут покрыты.

Наконец, пришло время кодирования.

Мы успешно структурировали вышеуказанный дизайн в форме HTML.

Еще несколько моментов могут улучшить процесс структурирования. Они следующие

  • Всегда используйте комментарии (нам легко запомнить в будущем и понять другим)
  • Используйте правильные семантические HTML-теги.
  • Избегайте использования устаревших HTML-тегов.
  • Подтвердите свой HTML-код.
  • Избегайте использования нежелательных HTML-элементов.
  • Всегда используйте декларацию DOCTYPE.

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

Спасибо за ваше драгоценное время. Надеюсь, вам понравилось это читать!

Кроме того, это мой самый первый пост, поэтому предложения и благодарности приветствуются.

Больше контента на plainenglish.io