Если мы нажмем в браузере правую кнопку мыши и выберем “Просмотреть HTML-код”, то увидим что-то подобное:
Это и есть сверстанная веб-страница.
Виды верстки
Табличная.
Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц Блочная. HTML-документ представлен как совокупность блоков Верстка сайта - с чего начать Прежде всего, необходимо иметь макет дизайна, который обычно рисуется в Photoshop дизайнером. Верстальщик получает уже готовый макет. Внимательно рассмотрите предоставленный макет. Продумайте, с чего начать верстку. Помните, что все стили (размеры и виды шрифтов, заголовков, абзацев, картинок и т.п.) нужно выносить в отдельный файл. Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку. Выпишите шрифты, которые необходимо будет отразить в CSS. Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML - это будущая сверстанная страница сайта, CSS - файл стилей. Начинайте с шапки - пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д. Стратегия верстки: с левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала “одевайте” в HTML шапку сайта (слева-направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно. Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы (можно это делать параллельно с версткой). Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа “verh_shapki”, “cherny_shrift_konec” и т.п. Закрывайте все теги, проверяйте правильность их вложения. Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей - дополняет его, дорабатывает и т.п. Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п.). Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован. Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа Изучите страницу на валидность (отсутствие ошибок в коде). Какая верстка считается качественной Блочная - с применением Адаптивная. кроссбраузерная - страница ведет себя корректно в разных браузерах и на мобильных гаджетах. Валидная - без ошибок в коде. Текстовая. То, что можно сверстать в виде текста - не верстается “картинкой”. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик. Код минимально короткий, все стили вынесены в отдельный файл. Все содержимое в html и css прописано строчными буквами. Для тега CSS используется преимущественно. То есть если можно обойтись без JS - то динамика описывается в CSS. То же самое для картинок. Если спецэффекты для шрифта можно “наложить” при помощи CSS, то используется текст, а не картинка. JS файлы подключены внизу кода. Если вы подключаете их в head, то это плохо сказывается на скорости загрузки веб-страницы. JS файлы объединены в один, по возможности. Навигация по сайту реализована списками (ul, li) - поисковая система быстрее понимает такую навигацию. Правильная работа с заголовками. Для того чтобы у SEO-специалиста в будущем не было проблем, указывайте H1-H6 заголовки только в контентной части сайта. Размещайте заголовки по принципу: первым идет H1, потом по убыванию другие виды заголовков.. В настоящее время такая верстка считается устаревшей.
(картинки) обязательно указаны высота и ширина изображения.