7. Оптимизация кода для поисковых систем и стандарты доступности (использование нужных тегов, неиспользование устаревших тегов) 92

8. Заключение 97

9. Приложение 98

9.1 Таблица поддержки email-клиентами свойств CSS. 98

9.2 Краткая таблица CSS- фильтров. 101

1. Введение

Данное учебное пособие предназначено для повышения уровня знаний читателя в области создания HTML-документов. Оно состоит, главным образом, из обзора и обобщения основных тем, касающихся веб-разработки клиентской части приложений. Это не справочник, а скорее некий путеводитель, позволяющий новичку или более опытному пользователю усвоить главные принципы разработки HTML/XHTML документов. Фактически, здесь упомянуто все, о чем должен знать каждый профессиональный HTML-верстальщик. Причиной появления данного учебного пособия является разноуровневая подготовка людей, претендующих на должность профессионального HTML-верстальщика а также отсутствие централизованно изложенных главных принципов создания веб-страниц, которые бы отвечали современным требованиям веб-разработки.

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

Работая с данным учебным пособием читателю также придется почерпнуть некоторые базовые знания HTML из других источников, например из справочника по HTML. Работа будет более эффективна, если вы уже знакомы с базовыми понятиями HTML.

Касательно терминов, следует отметить, что в данной работе часто встречается слово «браузер». Здесь и далее под «браузером» следует понимать известные браузеры, а также другие клиентские программы доступа в Интернет (user agents).

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

Все, что здесь описано для HTML, в равной степени касается и XHTML.

2. Понимание html

Ни для кого не секрет, что каждый человек имеет свою точку зрения на все, что его окружает. Соответственно, и HTML тоже каждый может понимать по-разному. Данная глава поможет обрести наиболее прагматичное представление о том, что же представляет собой этот язык разметки и чем он является. Впоследствии, такое видение HTML будет, безусловно, полезным не только при верстке веб-страниц, но и при программировании на JavaScript.

1. Предназначение и цели современного html

В условиях стремительного развития технологий, целью современного HTML, на текущий момент, являются как минимум две задачи. Во-первых – это правильное отображение веб-страницы в браузере, а во-вторых – возможность правильного ее индексирования поисковыми системами. Остановимся, и рассмотрим каждую из этих задач более подробно.

Отображение веб-страницы в браузере с помощью языка разметки HTML является его основной задачей, для которой, собственно, он и был создан. Изначальной идеей также было связывание этих страниц между собой с помощью гиперссылок. Отсюда и происходит его название – HyperText Markup Language, что означает – язык разметки гипертекста. Он стал языком передачи визуальной информации – текста и изображений – по каналам связи Интернет, при помощи специального протокола передачи данных. Этот протокол имеет название HTTP и является является аббревиатурой от HyperText Transport Protocol – протокол передачи гипертекста. Таким образом, HTML стал связующим звеном между человеком, генерирующим идею – визуальную информацию, и человеком, который эту информацию получает – пользователем Интернет.

С течением времени, количество пользователей Интернет увеличивалось, росло также и количество веб-сайтов. Появилась новая задача, которая требовала немедленного решения – дать возможность людям находить нужную им информацию и делать это как можно проще. Поисковые серверы взяли на себя эту ответственность и предлагали пользователям то, что они ищут доступным и простым способом – поиском по ключевому слову. Помимо такого поиска они также предлагают информацию, сгруппированную по каталогам, но, согласитесь, невозможно внести все обилие Интернет ресурсов в один даже самый что ни на есть изощренный каталог. У таких систем должен был быть способ добычи информации из сети, и этот способ был найден.

По аналогии с человеком, без устали просматривающим страницу за страницей, владельцы поисковых систем придумали поисковых роботов – программы, которые проходят страницы, одну за другой, добывая информацию и собирая ее в базу данных сервера. Но робот – это не человек, он не воспринимает информацию визуально как мы – с браузера. Все, что ему доступно, это все тот же HTML-код страницы, но не интерпретированный браузером в красивую и цветную картинку, а в его чистом виде – никаких изображений – только текст, разделенный тегами*.

Теперь можно догадаться, что чем более простым и понятным будет ваш HTML-код для поискового робота, тем больше у вас есть шансов попасть в нужную ячейку базы данных поискового сервера, а соответственно и в результат поиска для человека, жаждущего найти информацию, находящуюся именно на вашем сайте! Это и есть вторая задача HTML.

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

В эволюции Интернет следует отметить еще один очень важный момент. По мере его развития, также развивались и компании-разработчики браузеров, т.е. программ просмотра HTML-страниц. Одни браузеры приходили на смену другим, общее их количество росло, количество их различных версий также увеличивалось. И все бы ничего, но каждый браузер имеет свои характерные особенности реализации (существует такая неизбежная особенность в мире программирования). Как следствие, одни и те же HTML-документы в разных браузерах отображались по-разному. Эта разница была невелика, но она сильно мешала разработчикам. Казалось, что создать веб-страницу одинаково отображающуюся в разных браузерах было уже практически невозможно. Царил хаос, когда каждая компания-разработчик предлагала свои уникальные и характерные только для их браузера особенности, выставляя их как изюминку маркетинговой политики, пытаясь завоевать безграничный рынок Интернет. По этой и по множеству других причин, крупные компании, имеющие отношение к информационным технологиям, решили создать организацию, которая бы следила за четким соблюдением общепринятых стандартов и правил, и что самое главное, сама бы эти стандарты пропагандировала. Так был создан консорциум всемирной паутины WWW – W3 Consortium, или сокращенно W3C.

Сейчас, что бы ни делалось для Интернет, должно соответствовать стандартам W3C, и это правильно. Именно эти стандарты предусматривают правила создания HTML-документов, их доступность, четкое разделение в них смысловой нагрузки от отображения, а также многое другое. W3C положил конец хаосу, и вместо разделения и разобщения пользователей и разработчиков, он стал их объединять!

Как видите, двойственная задача HTML оправдывает себя, предлагая ряд преимуществ. Но это также предполагает дополнительную ответственность на веб-разработчиков, которые должны прилагать больше усилий при создании документов. Так что если кто-то считает, что HTML это пустяковое дело, то он ошибается. Создание правильных и доступных веб-документов – это целое искусство!