Основы верстки. Простые правила верстки макетов сайта для веб-дизайнера
Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml
Официальный паблик в ВК: https://vk.com/zametkinapolyah
Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov
Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkinapolyahru
Помощь проекту:
WMR: R288272666982
WMZ: Z293550531456
Яндекс.Деньги: 410011531129223
О заголовках: http://zametkinapolyah.ru/verstka-sajtov/zagolovki-v-html-naznachenie-html-zagolovkov-i-ix-ispolzovanie-v-dokumentax.html
Про абзацы: http://zametkinapolyah.ru/verstka-sajtov/html-paragrafy-i-html-abzacy-ix-naznachenie-i-ispolzovanie-v-dokumentax.html
О списках: http://zametkinapolyah.ru/verstka-sajtov/html-spiski-i-vidy-spiskov-v-html-markirovannyj-html-spisok-numerovannyj-html-spisok-mnogourovnevye-spiski-v-html.html
Про HTML атрибуты: http://zametkinapolyah.ru/verstka-sajtov/vidy-html-atributov-atributy-sobytij-ili-html-sobytiya-universalnye-html-atributy.html
О видах тегов: http://zametkinapolyah.ru/verstka-sajtov/sintaksis-html-html-tegi-parnye-html-tegi-odinochnye-html-tegi-chto-takoe-html-teg.html
Хотелось бы дать несколько простых советов начинающим верстальщикам, эти советы по началу можно даже использовать как пошаговое руководство при создании и оформлении HTML шаблонов при помощи CSS:
Язык HTML очень иерархичен и это хорошо, за счет этого мы можем делить HTML документ на части: логические и визуальные. Один из способов разделить документ на логические разделы – это HTML заголовки, используйте заголовки не только для того, чтобы показать важность текста, но и для разбиения документа на разделы и помните, что заголовков у вас целых шесть уровней.
Не забывайте о комфорте своих посетителей, текст удобнее читать когда он разбит на параграфы и абзацы, а не одну большую портянку, используйте для этих целей элемент p.
HTML списки особенно удобно использовать тогда, когда у вас есть связанные данные, например, вы пишите какой-то алгоритм действий. Также при помощи списков можно создавать меню или содержание статьи.
Не забывайте о списках определений, они очень удобны, если ваша статья имеет огромное количество терминов и их определений.
Интернет это такая штука, где многие цитируют многих, язык HTML обладает целым набором тегов для того, чтобы указать что и кого вы цитируете и даже когда эта цитата появилась, не забывайте об этих тегах.
У любого сайта есть владелец или автор, не выдумывайте велосипед и используйте тег address для того, чтобы указать контактную информацию автора сайта или компании, о услугах которой рассказывает сайт.
Забудьте про HTML атрибуты, изменяющие вид HTML элементов, не используйте лишние и пустые HTML элементы для оформления и не забывайте о запрещенных тегах.
В HTML есть два замечательных элемента: div и span. Они существуют только лишь потому, что не для каждого элемента веб-страницы есть смысловой тег (вы же помните, что практически у каждого тега есть смысл и назначение), используйте вышенаписанные элементы для такого контента, к которому нет соответствующего тега. Например часть строки можно оформить при помощи span.
Стандарт HTML имеет парные теги с необязательным закрывающим тегом, но не стоит этим пользоваться – всегда пишите закрывающий тег у парного тега с необязательным закрывающим тегом, как минимум, ваш код будет понятнее и читабельнее.
И помните, что правильность кода всегда можно проверить при помощи валидатора, главное, после того как будут обнаружены ошибки, не поленитесь их исправить, поисковые системы скажут вам за этом свое небольшое, но все же «спасибо».
Кирилл Антонов
Канал для начинающего веб-разработчика. Здесь ты найдешь различные видео уроки о технологиях и программном обеспечение, которые используют веб-разработчики.
Последние сообщения
127 полезных и бесплатных онлайн академий
23.04.2019
Ресурсы для objective-C программистов
21.03.2018