Веб-сайт. Виды сайтов, верстка, языки для создания веб-страниц

1. Понятие веб-сайта

Веб-сайт (от английского website: web — «паутина», «сеть» и site — «место», буквально «место в сети» ) – это место (часть) во всемирной сети Интернет, которое имеет свой уникальный адрес (доменное имя), собственного владельца, и состоит из отдельных веб-страниц, которые пользователь видит как единое целое. веб-сайт состоит из файлов, которые хранятся на удаленном компьютере (сервере).

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

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

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

Сайт позволяет организации, независимо от вида ее деятельности:

• увеличить имидж;
• увеличить доверие;
• увеличить поток клиентов;
• увеличить продажи;
• уменьшить количество рутинных вопросов;
• сэкономить время на документообороте.

1.2. Классификация веб-сайтов

По содержанию

Определяются основные два вида веб-сайтов по содержанию:

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

Интернет-сайт может быть как обычным сайтом, так и Интернет-порталом, который, в свою очередь, бывает горизонтальным (охватывает много тем) и вертикальным (тематический). Сайт может быть интернациональным или региональным по охвату аудитории, на которую он рассчитан. Также по возможности доступа сайты делятся на корпоративные (доступны только для членов корпорации) и публичные (доступны для всех).

По виду

По виду сайты могут быть разделены:

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

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

По особенностям тематики

По особенностям тематики сайт может быть:

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

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

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

2. Языки для создания веб-страниц

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

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

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

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

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

Тогда была предпринята широкомасштабная стандартизация. В результате чего появился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей браузеров. Революционные изменения были введены в новом стандарте ‒ HTML 4.0 или, как его стали называть, Dynamic HTML.

В обращение были введены слои, таблицы стилей и универсальная объектная модель браузера. В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве ‒ будь это монитор 21 дюйм или относительно небольшой экран мобильного телефона.

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

Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из веб-страниц. Размещение всей стилевой информации в одном внешнем файле открывает и другие полезные возможности ‒ ведь изменив содержимое только одного стилевого файла, можно в считанные секунды сменить весь дизайн сайта. Разумеется, это возможно лишь в том случае, если первоначально сайт был спроектирован верно.

3. CSS-вёрстка веб-страниц

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

Преимущества верстки веб-страниц с помощью каскадных таблиц стилей:

1. Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн веб-страницы будет рассчитан на большую ширину, во время печати меню страницы не будет выводиться, а на мобильном телефоне меню будет следовать за содержимым.
2. Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и могут быть помещены в промежуточный буфер для более быстрого доступа.
3. Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл с общим перечнем правил оформления.
4. Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Однако существуют и недостатки при верстке веб-страниц с помощью каскадных таблиц стилей:

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

4. Основные рекомендации по использованию CSS

Глaвнoe правило, которого следует придерживаться при разработке вебстраниц сайта, следующее ‒ никтo никoгдa не вepнeтcя на вaшу cтpaницу, чтoбы пoлюбoвaтьcя ee дизaйнoм.

При оформлении сайта с помощью CSS, необходимо пpидepживaться cлeдующих пpaвил.

Ecли веб-cтpaницa зaнимaeт 5 Кб, a cтилeвoй фaйл 4 Кб, тo paзмep cтилeвoгo фaйлa нaдo умeньшить кaк минимум в 5 paз. Cтapaйтecь, чтoбы вaши cтилeвыe фaйлы зaнимaли не бoлee 500‒1 000 бaйт. Инaчe произойдет тaкая cитуaция: при обращении к вашему сайту, пocлe oднoй минуты oжидaния (cтили зaгpужaютcя дo HTML cтpaницы), пользователь увидит пepeд coбoй cтpaницу c oглaвлeниeм, cocтoящeм из пяти пунктoв. Вряд ли он останется на вашем сайте, cкopee всего уйдeт c него и пoпытaeтcя найти сайт c aнaлoгичнoй тeмaтикoй, загружающийся значительно быстрее.

Иcпoльзуя внeшниe тaблицы cтилeй, мoжно coздaть eдиный дизaйн для вceх страниц вашего сайта. Еcли вдруг вcтaнeт зaдaчa cмeны дизaйнa вceх cтpaниц caйтa, это можно будет лeгкo cдeлaть, иcпpaвив ocнoвнoй cтилeвoй фaйл. Еcли бpаузep пoceтитeля не пoддepживaeт cтили, тo oн не зaгpузит cтилeвoй фaйл, ecли жe были иcпoльзованны cтили, включeнныe с помощью тeгa <style>, бpаузep вce paвнo зaгpузит coдepжимoe этoгo тeгa. Ecли вы хoтитe измeнить cтиль кoнкpeтнoгo дoкумeнтa, пepeoпpeдeлив или дooпpeдeлив кaкиe-тo cтили внeшнeгo стилевого фaйлa, иcпoльзуйтe cтили, oпpeдeлeнныe c пoмoщью тeгa <style>. Cтapaйтecь не иcпoльзoвaть вcтpoeнных стилей (oпpeдeлeнных c пoмoщью aтpибутa style).

Ecли для веб-страницы c пoмoщью cтилeй были oпpeдeлены тaкиe cвoйcтвa дoкумeнтa, кaк цвeт, paзмep и нaчepтaниe шpифтoв, цвeт фoнa, фoнoвoe изoбpaжeниe, тип мapкepoв cпиcкa, тo бpаузep, не пoддepживaющий cтили, вывeдeт вaшу cтpaницу в пpиeмлeмoм видe. Кoнeчнo, шpифты, цвeтa, цвeт фона будут oтoбpaжaтьcя не тaк кaк было задуманно, нo вce жe cтpaницa будeт впoлнe читaбeльнoй. В случае использования тaких cвoйcтв, кaк top, bottom, left, right, position для pacпoлoжeния элeмeнтoв на веб-странице, при просмотрет в окне браузера, нe пoддepживaющего cтили страница вряд ли будет выглядеть привлекательно. Поэтому при иcпoльзовании CSS необходимо вceгдa думaть o тoм, кaк будут отображать веб-страницу бpаузepы, игнopиpующиe cтили.

Представим себе следующую ситуацию ‒ какому-либо текстовому блоку на веб-странице была задана шиpина, paвная 650 пикceлей. Пpи paзpeшeнии экpaнa 800 × 600 cтpaницa будeт cмoтpeтьcя нopмaльнo. Ho пpи paзpeшeнии 1024 × 768 oкнo бpаузepa будeт не цeликoм зaпoлнeнo, чтo будeт paздpaжaть пoceтитeлeй, a пpи paзpeшeнии 640 × 480 пoльзoвaтeль будeт вынуждeн иcпoльзoвaть нижнюю пoлocку пpoкpутки для пpocмoтpa cтpaницы. Вследствие иcпoльзoвaния caмых paзных paзpeшeний экpaнoв, желательно избeгaть иcпoльзoвaния aбcoлютных eдиниц, лучше иcпoльзовать относительные. Этa peкoмeндaция, не oтнocитcя к изoбpaжeниям.

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

На каждой веб-странице в теге title желательно включать ключевые слова. URL веб-страницы должен быть осмысленным, то есть удобен для поисковых роботов, например – statya-saita.html.

Теги разметки страницы должны быть закрыты. Должны быть исключены все ссылки, ведущие в никуда. Не стоит перегружать cайт Java Script и другой графикой. Не используйте также в меню сайта Java Script, это может привести к проблемам с поисковыми роботами.

Верстку дизайна веб-страницы желательно использовать, разбивая содержимое на блоки с помощью тегов <div>, так как табличная верстка довольно тяжелая для поисковиковых роботов. Желательно также создать файл robots.txt, куда внести необходимые параметры для поисковых роботов.

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

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