Полная новость
Как изучить CSS?
Как считают многие программисты изучить CSS (каскадной таблицы стилей) можно начав сразу с экспериментов. Это поможет легко привести к неправильному пониманию или ошибкам в последствии. В данной статье мы хотим вам открыть базовую концепцию CSS, которая иногда неправильно воспринимается. Мы поможем вам разобраться в вопросах, как правильно и чисто структурировать коды HTML и CSS.
Структурирование кода.
Многие из нас не задумываются о фундаменте того помещения, в котором мы живем или работаем. Но без прочности данного элемента не может существовать ни одно из строений. Любой документ также имеет свою структуру. В данной серии статей о CSS мы постараемся рассказать вам о современных методиках CSS, которые могут быть бесполезными без хорошо структурированного документа HTML.
В этой статье мы покажем вам, как хорошо структурировать и осмысливать код HTML при помощи методик CSS. Вы сможете научиться вкладывать смысл в документ, чтобы в дальнейшем облегчить себе работу над проектом.
Смысловая разметка.
В первые годы существования Интернета сеть была не более чем набор связанных между собой HTML документов. В дальнейшем язык HTML стал использоваться только в презентационных целях. Вместо заголовков разработчики стали широко применять атрибуты и полужирные шрифты, что позволяло создавать определенный визуальный эффект. Таблицы HTML предназначались для вывода табличных данных, но также их одновременно стали использовать для верстки страниц, а дескрипторы цитат стали применяться не по прямому назначению, а для создания пробелов. Со временем HTML потерял свой вразумительный вид и представлял навал дескрипторов.
Изначально HTML был разработан, как простой и легкий язык разметки. В последствии страницы интернета становились представительней и насыщенней, а код HTML становился громоздким и непонятным для непрофессионала. Чтобы выйти из этого положения разработчики программного обеспечения придумали такой инструмент, как WYSIWYG – что означает, «что видишь, то и получишь». Это визуальный редактор HTML кода страницы, которым может пользоваться даже человек не знающий HTML. Но, к сожалению, инструмент WYSIWYG не упростил ситуацию, а только усложнил её: они добавили в форму HTML большое количество ненужных дескрипторов, которые понять стало ещё сложнее. Уже в конце прошлого века современные web-страницы стали настолько громоздкими, что редактировать HTML код становилось довольно сложно, из-за риска нарушения целостности кода WYSIWYG. Ситуация усугублялась с каждым днем.
Так впервые появились таблицы CSS. Благодаря этому изобретению стало возможно управлять внешним видом страницы, не производя экспансию её, и отделить презентационные аспекты документа от его содержания. Это позволило отбросить презентационные и шрифтовые дескрипторы и сосредоточить свое внимание на верстке при помощи правил CSS, а не таблиц HTML. Разметка web-страницы опять упростилась, а дизайнеры опять стали интересоваться кодом документа.
В структуру документа вернулся смысл, то есть типы элементов стали соответствовать своему назначению. Появилась возможность избавиться от тяжелого преодоления стилей браузеров по умолчанию. Теперь дизайнер может визуально выделять заголовки в тексте, при этом, не делая их огромными и жирными. Списки теперь можно не разделять круглыми скобками, а цитаты можно сделать в любом стиле.
Разметку принято считать «смысловой» («семантической») если назначение ее элементов не вступает в противоречие с их назначением в спецификациях HTML. Смысловая разметка очень полезна для разработчика. Она легче чем презентационная разметка. Например вы решили изменить на странице цитату. Если все в коде сделано корректно, то достаточно в редакторе нажать сочетание клавиш Ctrl+Alt+F и ввести элемент блочной цитаты и система сама выделит ее. Если вы используете дескрипторы блочных цитат в качестве абзаца, то найти цитату будет немного сложней.
Смысловая разметка стала не только легко распознаваться человеком, но самими программами. Например, поисковые роботы легко распознают заголовки с дескриптором h1 и присваивают им самый высокий приоритет, чем другим элементам страницы. При этом многие сео-оптимизаторы используют заголовки как облегчающий элемент навигации по страницам сайта.
В данной статье мы хотим подчеркнуть, то что смысловая разметка предоставляет упрощенный способ присвоения стилей элементам различного типа. Она способствует структуризации и созданию каркаса, на которых основана страница. При помощи смысловой разметки разработчик может присвоить стиль непосредственно элементу, без применения идентификаторов, которые дополнительно засоряют код.
Вот синтаксис HTML, который содержит набор смысловых элементов:
• h1, h2,h3;
• ul, ol, dl;
• strong, em;
• blockquote, cite;
• abbr, acronym, code;
• fieldset, legend, label;
• caption, thead, tbody, tfoot.
Постарайтесь использовать данные дескрипторы каждый раз в том случае, если фрагмент страницы играет для этого значение.
Добавить комментарий
-
Russian GrayBox. Баг в PGP 7.1 Allsubmitter - программа внешней SEO оптимизации сайтов Текст и его автор. Накрутка групп и страничек в контакте. SEO WordPress - оптимизация ссылок Индексация ссылок Як зробити правильну SEO-статью? Стратегия низкобюджетного продвижения сайтов в поисковиках Особености поисковой оптимизации украинских компаний Как измерить имидж сайта? Семантичне ядро сайту Internet Relay Chat. Обзор модулей Drupal, которые помогают оптимизировать сайт. Бизнес в интернете. Обзор программ по проверке уникальности текстов. Как продавать информацию? Пользователь = запрос. Обход локскрина на Ipfone Модуляция энд демодуляция.
[21.12.2011] | |
Определение главного зеркала сайта с помощью панели Яндекс.Вебмастер (25) |
[21.12.2011] | |
UXcamp Dnepropetrovsk 2011 (0) |
[17.01.2012] | |
Дюжина ошибок сисадмина (0) |
[17.01.2012] | |
Компания с нуля (0) |
[22.01.2012] | |
Создаем сайт на MotoCMS (1) |
1