Опубликовано: 23.10.2020
Актуальность HTML верстки очень высока. На всех фриланс-биржах всегда висит по 10-20 заказов на срочную верстку, также HTML+CSS+JS позволяют клепать пусть плохие, но приложения под Android и WinPhone. Да и любой компании нужен работающий сайт, а не только красивые дизайны. Что такое обычный проект для верстальщика? Это 5-10 страниц в psd/pdf (InDesign/illustrator), которые нужно очень качественно сверстать за 2-3 дня со всеми правками и спонтанными идеями клиента, подробнее тут Мониторинг серверов КСС.
Давайте сверстаем подвал для сайта и поймем, удастся ли получить удовольствие и деньги от процесса верстки своих же макетов.
Самое важное — заранее продумать структуру сайта, расставить div’ы в необходимой последовательности и с правильной вложенностью. Если вы верстаете страницу сразу, без дизайна (например, клепаете 5-10 лэндингов за рабочий день), то лучше набросать структуру хотя бы на листочке, иначе вы будете переверстывать страницы сайта по несколько раз.
Итак, начинаем верстать. Создаем пустой html документ со следующей шапкой.
И верстаем. Элементы бывают блочные (структурное форматирование), текстовые (строчные). Под элементом подразумевается конструкция вида < p> Заголовок< /p> . Сделать из блочного элемента строчный можно с помощью display: inline. Строчные элементы используются для оформления текста. Блочный элемент это прямоугольник с контентом. К блочным относятся контейнеры< div> , < h1> , < /h1> и др. Один блочный внутрь другого можно вложить, и это помогает реализовать большинство работ концептуальных дизайнера. Не надо вкладывать блочный элемент в строчный, это не соответствует стандартам. Ещё есть контейнер , который служит для определения строчных элементов документа, он поможет применить отдельный css к отдельной буковке.
Думаю, что наиболее важно рассмотреть display. Display это свойство, которое определяет, как элемент будет показан на странице. Самые распространенные и надежные значения это block, inline, list-item и none. Block делает элемент блочным, inline делает элемент строчным, inline-block делает элемент внутри блочным, но при этом он обтекается другими элементами страницы подобно строчному, list-item делает элемент блочным и добавляет маркеры списка, none прячет элемент (а hidden со свойством visibility позволит элемент скрыть, но оставить место пустым).