IX Международная студенческая научная конференция Студенческий научный форум - 2017

Всемирная паутина полна интернет-ресурсов, которые отличаются друг от друга тематикой, назначением и многими другими характеристиками.

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

В настоящее время для создания web-страниц в Интернет можно воспользоваться языком гипертекстовой разметки HTML и таблицами каскадных стилей CSS.

HTML (Hyper Text Markup Language)это язык гипертекстовой разметки предназначен для создания web-страниц.

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

С помощью HTML можно легко создать красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

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

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

Любой HTML документ состоит из обычного текста и разметочных тэгов.

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

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

HTML тэги обычно используются в паре, например: . Первый тэг называется начальным тэгом, а второй конечным тэгом.

Для того, чтобы создать HTML документ необходимо:

1. Открыть любой текстовый редактор (например блокнот встроенный в Windows);

2. Набрать произвольный текст и разметить его HTML тэгами;

3. Cохранить файл с расширением .htm или .html.

Если открыть созданный файл с помощью веб-браузера он будет отображен как веб-страница.

На сегодняшнее время самой последней версией языка гипертекстовой разметки HTML является HTML5 это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 г.(предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 г. браузерами оперативно осуществлялась поддержка, а разработчиками - использование рабочего стандарта (HTML Living Standard). Цель разработки HTML5 - улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.

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

Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

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

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками.

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

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

• Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.

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

• Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.

• Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

• Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.

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

Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на движках Gecko (Mozilla Firefox и др.), WebKit (Safari, Arora, Google Chrome) и Presto (Opera).

Бывший когда-то самым распространённым браузером Internet Explorer 6 поддерживает CSS далеко не полностью.

Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок.

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.

Для проверки поддержки браузером веб-стандартов (в том числе и различных частей стандарта CSS) был разработан тест Acid. Его вторая версия называется Acid2, а третья, соответственно, Acid3.

На сегодняшнее время самой последней версией CSS является CSS3. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.

Таким образом, для разработки сайта веб-дизайнеру необходимо освоить язык html, а также использовать таблицы каскадных стилей CSS.

Список использованных источников

1. Мэтью, М. HTML5. Недостающее руководство / С. Таранушенко – СПб.: БХВ-Петербург, 2016. - 480 с.

2. Учебник HTML [Электронный ресурс] Режим доступа: http://kpolyakov.spb.ru/school/html/html.htm Дата обращения: 23.01.2017

3. Учебник основы HTML и CSS [Электронный ресурс] Режим доступа: http://www.webremeslo.ru/html/glava0.html Дата обращения: 23.01.2017

4. Фримен, Э. Фримен, Э. Изучаем HTML, XHTML и CSS / В. Черник – СПб.: Питер, 2016. - 720 с.

Код для цитирования: Скопировать