Файл: История создания и версии языков гипертекстовой разметки.pdf

Основная задача верстки в веб-дизайне – создание сайта на основе графического макета, т. е. изображения сайта, подготовленного в каком-либо графическом редакторе. Предпочтения отдаются редакторам, позволяющим работать с многослойными изображениями (AdobePhotoshop, GIMP и др.).

На основе графического макета создается html-макет сайта или темплейт (англ. template) – совокупность типичных страниц сайта, зачастую наполненных не содержательным контентом, а бессмысленным набором слов – т. н. «заполнитель» или «рыба» (классический пример – текст на псевдолатыни «Loremipsum...»).

Разработанный html-макет должен отвечать ряду требований:

– кроссбраузерность.

Готовая страница должна корректно отображаться в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+;

– валидность.

Это соблюдение стандартов W3C. Сайты, которые созданы при помощи валидной верстки, практически во всех браузерах выглядят одинаково. Проверка осуществляется на сайте http://validator.w3.org.

– семантическая верстка [5].

Верстка, где тэги используются в соответствии со структурой документа, то есть валидная верстка, которая соответствует рекомендациям W3C [9]. Например:

– заголовки оформляют с помощью тэгов от <h1> до <h6>;

– абзац <p>;

– список <ul> – ненумерованный, <ol> – нумерованный;

– <strong> – полужирным, <em> – курсивом;

– верстка блочная;

– в таблицах размещаем только табличные данные;

– и др.

Различают следующие виды вёрстки:

а) Фиксированная верстка.

В данном случае ширина страница задается определенным значением в пикселях. Высота страницы в этом случае, как правило, не задана и определяется по размеру содержимого страницы автоматически.

Учитывая большой разброс разрешений экранов в настоящее время – от 1024 до 2560 пикселей по горизонтали – при использовании фиксированных макетов возникает одна из проблем:

– на маленьких экранах сайт не помещается и появляется горизонтальная полоса прокрутки, что делает просмотр страницы очень неудобным;

– на больших экранах сбоку от содержимого страницы появляется пустое пространство, заполненное фоновым цветом или изображением. Такой недочет можно частично исправить, выровняв страницу по центру окна [2].

б) «Резиновая» верстка.

Этот вид верстки основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера – 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину.

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

При этом размера всего макета обычно имеет размер 100 % х 100 % (т. е. всѐ пространство клиентской части окна браузера), что приводит к необходимости вычисления браузером выражений вида 100 % – 250 пикселей.

Стандартных способов сделать это с помощью HTML и CSS до версий 5 и 3 соответственно не существует, что вынуждает разработчиков использовать различные трюки в виде картинок-«распорок», отрицательных отступов и т. д.

«Резиновый» макет обладает следующими признаками:

– ширина страницы равна ширине окна (или составляет определенный процент от неё) – сайт тянется по горизонтали;

– если ширина окна меньше определенной минимальной, то ширина сайта фиксируется и появляется горизонтальная полоса прокрутки;

– если сайт имеет блок, выровненный по нижнему краю, – т. е. «подвал» или footer, то этот блок должен располагаться внизу окна браузера когда содержимое страницы помещается в окне.

Если высота страницы больше высоты окна, то «подвал» уходит за пределы окна и появляется вертикальная полоса прокрутки;

в) Адаптивная верстка.

Самый сложный и редко используемый вид верстки, при котором размер элементов, их расположение и видимость на странице зависит от размера окна браузера.

Реализовать такой подход можно программно (например, с помощью Javascript) или с помощью медиа-запросов @mediaCSS3 [2-6].

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

Пока, наконец, не происходит один большой переход к одной колонке для мобильных устройств. Как только страница становится слишком узкой для начального состояния, широкоэкранная разметка адаптируется и превращается в вертикальную. Это достигается за счет перемещения двух небольших блоков справа под большой блок. Затем эта разметка принимает стандартный «мобильный» вид, в котором каждая часть содержимого укладывается ниже предыдущей [2].

г) Табличная вёрстка.

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

Преимущества таблиц:

– Создание колонок. Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках. Таблицы хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого [9];

– «Резиновый» макет. Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство. Также можно регулировать и высоту содержимого. Например, если текста немного, то «подвал» страницы может висеть в ее середине. Параметрами таблицы можно отрегулировать это так, что при небольшом тексте «подвал» плотно прилегает к нижнему краю окна браузера, независимо от размеров окна;

– «Склейка» изображений. Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение [2];

– Фоновые рисунки. В ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются декоративные линии, рамки самого разнообразного вида, добавляется тень под элементом;

– Выравнивание элементов. Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом [7];

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

Недостатки таблиц:

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

– Громоздкий код. Таблицы содержат сложную иерархическую структуру вложенных тегов, которая увеличивает объем кода, и повышает сложность изменения отдельных параметров [9];

– Плохая индексация поисковиками. За счет того, что текст располагается в отдельных ячейках таблицы, в коде он может находиться достаточно далеко друг от друга. Такая раздробленность информации, а также значительная вложенность тегов затрудняет правильное индексирование страницы поисковыми системами;

– Нет разделения содержимого и оформления. В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов [7];

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

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

Таблицы хорошо подходят в следующих обстоятельствах [2]:

– Высота колонок должна быть одинаковой. Таблицы помогают установить колонки одинаковой высоты при разном объеме содержимого колонок. Разумеется, подобный эффект можно наблюдать только в том случае, если для колонок применяется фоновая заливка или добавляется рамка;

– Макет должен занимать всю высоту окна браузера, независимо от объема информации. С помощью таблицы можно добиться эффекта, что нижняя часть страницы («подвал») выравнивается по нижнему краю окна браузера. Это имеет смысл в том случае, если объема данных не хватает для увеличения высоты документа. В противном случае часть страницы будет «висеть» в середине окна. Естественно, для документа достаточного объема его отображение происходит как обычно [2];

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

– Начинающим изучать веб-дизайн. Несмотря на то, что в профессиональной среде табличная верстка считается устаревшей, начинать изучение веб-дизайна проще именно с нее – логичность поведения и линейная зависимость сложности макета от количества ячеек делают табличную верстку оптимальной для новичков [9].

Если подходить критично к способам использования таблиц, то действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью.

2. Практические аспекты применения языков гипертекстовой разметки на примере создания электронного учебного пособия

2.1. Понятие и общая характеристика электронного учебного пособия

Для современного информационного общества в условиях модернизации образования необходима целенаправленная подготовка современного конкурентоспособных обучающихся. В учебном процессе средней профессиональной школы наиболее целесообразно использовать разнообразные формы информационно-коммуникативных технологий для глубокого и всестороннего обучения.

Одним из направлений этой работы преподавателя в настоящее время является создание электронных учебных пособий по дисциплинам, курсам и, в условиях внедрения ФГОС, модулям. Это обусловлено низкой обеспеченностью технических направлений высших учебных заведений специальной литературой, которая бы учитывала последние изменения и достижения производства.

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