Интернет — это глобальная компьютерная сеть, охватывающая весь мир. Сегодня Интернет имеет более 400 миллионов абонентов в более чем 150 странах мира. Ежемесячно размер сети увеличивается на 7-10%. Интернет образует как бы ядро, обеспечивающее связь различных информационных сетей, принадлежащих различным учреждениям во всем мире, одна с другой.
Интернет состоит из множества локальных и глобальных сетей, принадлежащих различным компаниям и предприятиям, связанных между собой различными линиями связи. Интернет можно представить себе в виде мозаики сложенной из небольших сетей разной величины, которые активно взаимодействуют одна с другой, пересылая файлы, сообщения и т.п.
Причина, по которой сеть Интернет стала столь популярна, заключается в стандартизации процессов обмена данными (протоколов).
Актуальность дипломного проекта
1) Интернет дает прекрасную возможность фокусировать воздействие на конкретную узкопрофильную, целевую аудиторию, в которой заинтересована организация, выделять подгруппы в этой аудитории для составления более персонализированных обращений; порой даже учитывать индивидуальные особенности и характеристики каждого посетителя.
Обобщая данные разных исследований по изучению Интернет-аудиторий, большой процент аудитории Интернета составляют активные слои населения, которые участвуют в процессе принятия решений.
2) Коммуникация в Интернете интерактивна. Это подразумевает возможность активного взаимодействия между сторонами. Интерактивность означает возможность вступать в прямой диалог с аудиторией, а также то, что представители данной аудитории также могут общаться между собой. Кроме всего прочего интерактивность позволяет получать обратную связь, адекватно анализировать сложившуюся ситуацию и своевременно реагировать в случае необходимости.
3) Предрасположенность пользователей Интернета к получению информации способствует более позитивному восприятию и высокой усвояемости материала.
4) Это глобальный виртуальный электронный рынок, не имеющий каких-либо территориальных или временных ограничений. Электронное коммуникативное пространство в отличие от печатного или эфирного практически не ограничено. Здесь может быть размещено сколько угодно много информации, объем которой не будет ограничен рамками эфирного времени передачи или количеством печатных знаков.
Особенности сети Интернет как средства распространения информации
... привлекает в Интернет миллионы пользователей. 1. Интернет как средство информации 1.1 Понятие Интернет как СМИ. Средство массовой информации -- средство распространения информации, характеризующееся: обращенностью к массовой аудитории, общедоступностью, корпоративным характером производства и распространения информации. К средствам массовой информации относятся: пресса,радио,телевидение; ...
5) Сравнительно невысокая стоимость коммуникации среди остальных СМИ.
6) Наличие у организации корпоративного Web-сайта сегодня считается не просто делом престижа, но необходимостью, даже если ее деятельность не связана с информационными технологиями и продажей товаров в Интернете. В Сети при упоминании организации в статьях или новостях ссылки делаются на корпоративный сайт. На сегодняшний день уже не встает вопрос: нужен сайт или не нужен, но очень актуальна тема, как сделать сайт максимально эффективным с точки зрения успешной коммуникации и поддержания благоприятного имиджа.
Web-сайты и их необходимость
Свое «представительство», собственную Web-страничку в сети имеет сегодня практически каждая крупная организация, фирма или компания. В Интернет расположены «электронные» варианты многих тысяч газет и журналов, через Сеть вещают сотни радиостанций и телекомпаний. Трудно найти какую-либо область человеческой деятельности, которая не была бы представлена в Интернет во всей своей полноте сотнями и тысячами «страничек». [1]
Web-технология полностью перевернула наши представления о работе с информацией, да и с компьютером вообще. Оказалось, что традиционные параметры развития вычислительной техники производительность, пропускная способность, емкость запоминающих устройств не учитывали главного «узкого места» системы интерфейса с человеком. Устаревший механизм взаимодействия человека с информационной системой сдерживал внедрение новых технологий и уменьшал выгоду от их применения. И только когда интерфейс между человеком и компьютером был упрощен до естественности восприятия обычным человеком, последовал беспрецедентный взрыв интереса к возможностям вычислительной техники.
С развитием технологий гипертекстовой разметки в Интернете стало появляться всё больше сайтов, тематика которых была совершенно различной — от сайтов крупных компаний, повествующих об успехах компании и её провалах, до сайтов маленьких фирм, предлагающих посетить их офисы в пределах одного города.
Сеть дает любому человеку практически бесплатную возможность оповестить многомиллионную аудиторию о предлагаемых им услугах или продукции. Интернет уравнивает частных лиц, фирмы средней руки и крупные корпорации: у всех есть одинаковые возможности для привлечения покупателей. Не надо платить тысячи и даже миллионы долларов за мгновения рекламы на телевидении, не надо покупать полосы в газетах — ваша страничка в Интернет будет функционировать круглосуточно, без перерывов. [6]
Все более популярной становится электронная торговля, позволяющая пользователю совершить покупку практически любого товара в любой точке планеты. По Интернет вы можете заказать и получить новые программные продукты, послать букет цветов любимой девушке и даже приобрести автомобиль. А также узнать последние результаты торгов на биржах всего мира, осведомиться о курсе акций той или иной компании и провернуть с ними сделку. Для крупных фирм и корпораций Сеть стала идеальной средой для проведения всевозможных операций и расчетов, а также торговли по схеме business-to-business, совещаний в реальном времени. Впрочем, заработать на Сети может не только крупная фирма, но и практически любой человек, создавший свою страничку. [1]
Но организации, деятельность которых не связана непосредственно с программированием и дизайном, не могут создать себе Web-сайт самостоятельно. Для того, чтобы успешно конкурировать и зарабатывать во всемирной сети компании прибегают к услугам Web-мастеров и веб-студий.
Глобальная сеть Интернет: протоколы, системы доступа
Компании соблазняют быстрота, дешевизна, удобство для проведения совместных работ, доступные программы, уникальная база данных сети Интернет. При низкой стоимости услуг пользователи могут получить доступ к коммерческим и ... заказчиков и пользователей в пропускной способности и просто в подключении к локальным и глобальным сетям растут с каждым днем. Для их удовлетворения производителям приходится ...
Internet развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Internet превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей.
Сегодня, путешествуя по Internet, можно найти много очень хорошо выполненных сайтов, которые быстро загружаются, привлекательны на вид, имеют четко разграниченную по разделам информацию и удобные функции навигации. Такие сайты просто приглашают вас посетить их, расслабиться, задержаться на некоторое время, развлечься и узнать что-то новое.
Если пользователь задерживается на каком-либо сайте на длительное время и даже не осознает этого, то, по всей видимости, такой сайт очень хорошо продуман. Понимание движения информационных потоков — это первый шаг в создании функционального, удобного в работе сайта. Если понять, как работает эта концепция, и применять ее при создании сайта, то тем самым есть возможность опередить большинство других разработчиков.
Тема дипломного проекта: Разработка информационного Web-сайта с использованием новейших средств разработки.
Объект исследования: Web-сайт «Юридическая компания «Корпоративный эксперт»».
Предмет — создание структуры Web-сайта.
Цель — создание Web-сайта для «Юридической компании «Корпоративный эксперт»».
Дипломный проект является важным этапом подготовки квалифицированных специалистов. Данный дипломный проект основан на базе ТОО «Юридическая компания «Корпоративный Эксперт» на должности Web-программиста. Работа проходила в офисе предприятия и на дому.
Internet превратился из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей.
Через пару лет, по прогнозам специалистов, около 80 процентов семей будут использовать его ежедневно. Телевидение и радиоприемники не заменены компьютерами, они имеют мощный процессор, большую память и фактически сами в некотором отношении являются компьютерами.
Это будет время, когда любой человек, владеющий компьютером, сможет «скачать» с его помощью статьи, иллюстрации, видео- или аудиоинформацию по любой интересующей его теме. Он сможет получить эту информацию тогда, когда он этого пожелает. Через какое-то время системы искусственного интеллекта — параллельный машинный перевод, а также идентификация и распознавание голоса сломают последние национальные и языковые барьеры и сделают возможным свободный транснациональный обмен информацией.
Каждый уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.
Цели и задачи дипломного проекта
В настоящей работе необходимо осуществить разработку и создание WEB-сайта для «Юридической компании «Корпоративный эксперт».
В процессе выполнения работы изучить вопросы использования Интернет технологий, приложений обучающего характера.
Разработка проекта по созданию веб-сайта и оценка его эффективности
... проектами и стандарты зрелости управления проектами, разработать проект по созданию сайта РИВЦ «Уфа». Для достижения поставленных целей необходимо решить следующие задачи: провести анализ необходимой литературы, определить этапы разработки сайта, разработать устав проекта, расписание проекта, ...
Реализовать WEB-сайт для «Юридической компании «Корпоративный эксперт» структурированным, обладающим эргономичным дизайном, а также отвечающим задачам, поставленным заказчиком.
Задачи необходимые для решения задания:
- ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;
- изучить программный инструментарий, применяемый для разработки и создания Web-сайтов;
- выявить и учесть методы и способы представления на Web-страницах различных видов информации, не препятствующие их доступности;
- ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;
- определиться со структурой Web-страниц;
- выбрать стратегию разработки и создания Web-сайта.
- разработать план по написания Web-сайта.
- создать Web-сайт для компании.
Задачи необходимые для дальнейшего развития:
- ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в дальнейших разработках;
- изучить программный инструментарий, применяемый для разработки и создания Web-сайтов;
- выбрать несколько стратегических путей для разработки и создания Web-сайтов. web сайт инструментарий интернет
- изучить принципы посещаемости Web-сайтов и возможность увеличить посещаемость Web-страниц.
Практическая ценность дипломного проекта
Получение информационного Web-сайта способствующего увеличению рейтинга компании среди конкурентов, увеличению клиентской базы и за счет выше перечисленного увеличение прибыли компании.
Общие требования к оформлению работы
ГОСТ 7.32-2001 «Отчет о научно-исследовательской работе. Структура и правила оформления»
По ГОСТ 7.32-2001 текст печатается на одной стороне листа белой бумаги формата А4 через полтора интервала. Цвет шрифта — черный. Размер шрифта (кегль) — не менее 12. Обычная практика — кегль 14. ГОСТ не определяет тип шрифта, но обычно — Times New Roman.
ГОСТ 7.32-2001 заголовки структурных элементов работы располагают в середине строки без точки в конце и печатают заглавными буквами без подчеркивания. Каждый структурный элемент следует начинать с новой страницы.
По ГОСТ 7.32-2001 заголовок СОДЕРЖАНИЕ пишется заглавными буквами посередине строки.
Содержание включает введение, наименование всех глав, параграфов, пунктов, заключение, список использованных источников и наименование приложений с указанием номеров страниц, с которых начинаются эти элементы работы.
Структура проекта. Дипломный проект состоит из введения, основной части из 4-х глав, заключения, списка использованных источников (73), Web-ресурсов (10), глоссария и приложений (3).
Общим объемом в101 страницу, из них 74 страницы основного текста. В основной текст входит 13 таблиц и 10 из 15 рисунков. В приложения «В» входит 5 из 15рисунков.
Во введении обосновывается актуальность, практическая значимость определяются цели и задачи проекта.
В первой главе рассматриваются современные технологии создания веб -порталов и проводится их сравнительный анализ.
» Разработка веб-сайта для школы»
... web-сайта образовательного учреждения 27 2.1 Методика разработки сайта школы 31 2.2 Разработка структуры сайта 31 3 Разработка веб-сайта КГУ «Средней школы №15 села Трудовое». 35 3.1 Задачи и цели сайта 37 ...
Во второй главе проводится анализ предприятия, и формулируются требования к веб — сайту. Разработана формальная модель структуры всего сайта. На основе данной модели реализован программный продукт. Выполняется полная установка настройка сервера портала.
В третьей главе подсчитано технико-экономическое обоснование дипломного проекта.
В четвертой главе рассматривается охран труда и безопасность жизнедеятельности.
В Заключении даются краткие выводы, к которым пришел автор при работе над каждой главой проекта и проекта в целом.
В списке используемых источников и литературы приведен перечень веб — страниц, которые были использованы при работе над проектом, а так же список печатных изданий Российских и зарубежных авторов.
В глоссарии содержатся слова и термины, которые упоминаются в проекте.
В приложении «А» содержится код главной страницы сайта, в приложении «Б» содержится код CSS, в приложении «В» содержатся скриншоты проекта.
1. Современные технологии разработки Web-сайтов
1.1 Web-сайт, общие понятия
Web-сайт (англ. Website, от web -«паутина» и site — «место») — в компьютерной сети объединённая под одним адресом (Доменным именем или IP-адресом) совокупность документов частного лица или организации. По умолчанию подразумевается, что сайт располагается в сети Интернет. Все Web-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к Web-сайтам на серверах был специально разработан протокол HTTP. Web-сайты иначе называют Интернет-представительством человека или организации. Когда говорят «своя страничка в Интернет», то подразумевается целый Web-сайт или личная страница в составе чужого сайта. Кроме Web-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов. [3]
Изначально Web-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин Web -приложение — готовый программный комплекс для решения задач Web-сайта. Web -приложение входит в состав Web-сайта, но Web-приложение без данных, сайтом является только технически.
В большинстве случаев в Интернете одному Web-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (Web-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com).
Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/, иногда используется доменное имя третьего уровня: my-site-name.example.com. [6]
Аппаратные сервера для хранения Web-сайтов называются Web-серверами. Сама услуга хранения называется Web-хостингом. Раньше каждый сайт хранился на своём собственном сервере, но с ростом Интернета технологическим улучшением серверов на одном компьютере стало возможно размещение множества сайтов (виртуальный хостинг).
Сейчас сервера для хранения только одного сайта называются выделенными (англ. dedicated).
Разработка web сайта
... Конечно, можно вводить HTML-код, скрипты или DHTML-код, но это не нужно делать при работе с FrontPage. Цель курсовой работы Основные принципы создания сайтов Интернет Интернет — Веб-дизайн ... инструменты разработки для Web. Всемирная паутина (или просто паутина) облегчает пользование Интернетом, всемирной компьютерной сетью, созданной в конце 1960-х годов. Изначально, работа с Интернетом (в ...
Один и тот же сайт может быть доступен по разным адресам и хранится на разных серверах. Копия оригинального сайта в таком случае называется зеркалом. Существует так же понятие оффлайновая версия сайта — это копия сайта, которая может быть просмотрена на любом компьютере без подключения к компьютерной сети и использования серверного ПО. [36]
1.1.1 Классификация Web-сайтов
По доступности сервисов:
Открытые — все сервисы полностью доступны для любых посетителей.
Полуоткрытые — для доступа необходимо зарегистрироваться (обычно бесплатно).
Закрытые — полностью закрытые служебные сайты организаций (в том числе корпоративные сайты), личные сайты частных лиц. Такие сайты доступны для узкого круга людей. Доступ новым людям обычно даётся через т. н. инвайты (приглашения).
По природе содержимого:
Статические — всё содержимое заранее подготавливается. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.
Динамические — содержимое генерируется специальными скриптами (программами) на основе других данных из любого источника.
По физическому расположению:
Внешние сайты сети Интернет.
Локальные сайты — доступны только в пределах локальной сети. Это могут как корпоративные сайты организаций, так как и сайты частных лиц в локальной сети провайдера.
По схеме представления информации, её объёму и категории решаемых задач можно выделить следующие типы web-ресурсов:
Интернет-представительства владельцев (торговля и услуги не связанные напрямую с Интернетом):
— Сайт-визитка — содержит самые общие данные о владельце сайта (организация или индивидуальный предприниматель).
Вид деятельности, история, прайс-лист, контактные данные, реквизиты, схема проезда. Специалисты размещают своё резюме. То есть подробная визитная карточка.
— Каталог продукции — в каталоге присутствует подробное описание товаров/услуг, сертификаты, технические и потребительские данные, отзывы экспертов и т. д. На таких сайтах размещается информация о товарах/услугах, которую невозможно поместить в прайс-лист.
— Интернет-магазин — web-сайт с каталогом продукции, с помощью которого клиент может заказать нужные ему товары. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу до расчётов с помощью пластиковых карт.
- Промо-сайт — сайт о конкретной торговой марке или продукте, на таких сайтах размещается исчерпывающая информация о бренде, различных рекламных акциях (конкурсы, викторины, игры и т. п.).
- Сайт-квест — Интернет-ресурс, на котором организовано соревнование по разгадыванию последовательности взаимосвязанных логических загадок.
Информационные ресурсы:
Тематический сайт — web-сайт, предоставляющий исчерпывающую информацию о какой-либо теме.
Тематический портал — это очень большой web-ресурс, который предоставляет исчерпывающую информацию по определённой тематике. Порталы похожи на тематические сайты, но дополнительно содержат средства взаимодействия с пользователями и позволяют пользователям общаться в рамках портала (форумы, чаты) — это среда существования пользователя.
Проектирование и создание современного web-сайта
... им в своей практике; определиться Web-страниц; выбрать стратегию разработки и создания Web-сайта. 1. СОВРЕМЕННЫЕ ИНТЕРНЕТ-ТЕХНОЛОГИИ 1.1. ... и RealAudio 3.0). Также создано много новых фирменных HTML-тегов, которые используются только в WebTV. Поскольку WebTV выводит ... и размещение специальных (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также ...
Веб-сервис — обычно решает конкретную пользовательскую задачу напрямую связанную с сетью Интернет:
- Поисковые сервисы — например, Яндекс, Google.
- Почтовый сервис.
- Веб-форумы.
- Блоговый сервис.
- Фото хостинг — например, Flickr, ImageShack, Panoramio, Photobucket.
- Хранение видео — например, YouTube, RuTube.
- Доска объявлений.
- Каталогсайтов — например, OpenDirectoryProject
По отношению к посетителю:
- Вовлекающий сайт.
- Безразличный к посетителю.[37]
1.1.2 Проектирование и разработка Web-сайта
Проектирование и разработка Web-сайта включают следующие этапы:
1 этап — определение целей создания сайта
Это самый важный этап в создании сайта, потому что нельзя добиться цели, если её нет или если она определена неправильно. От целей будет зависеть весь дальнейший процесс создания вашего сайта, каждый его этап. Поэтому к постановке цели нужно подходить с максимальной серьёзностью.
2 этап — проведение исследований по теме
Прежде, чем преступить к разработке, необходимо проанализировать тему, изучить сайты потенциальных конкурентов. В дальнейшем это поможет в создании собственной концепции.
3 этап — определение типа сайта, разработка ТЗ и структуры
На этом этапе разработчик совместно с заказчиком составляет ТЗ (техническое задание) на создание сайта. Техническое задание, как минимум, должно включать следующие пункты:
Тип сайта (портал, промо, визитка, корпоративный, магазин и т.д.)
Функционал сайта (поиск, каталог, лента новостей и т.д.)
Стиль дизайна (строгий, веселый, мрачный и т.д.)
Структура сайта (какие страницы должны быть на сайте)
Структура страниц (какие блоки должны быть на страницах и в каком виде)
При составлении ТЗ обязательно нужно помнить о целях создания сайта. Если какая-нибудь функция сайта не способствует достижению поставленных целей — необходимо от неё отказаться: на сайте она будет лишней.
4 этап — разработка макета дизайна сайта
Этот этап делится на несколько под этапов:
Генерация идей дизайна. Набор идей предоставляется заказчику в виде эскизов с текстовыми пояснениями.
Разработка предварительного макета дизайна главной страницы.
Исправление замечаний заказчика (если есть), доработка макета до завершенного вида.
Разработка внутренних страниц по аналогичному алгоритму.
В макете должны быть прорисованы все блоки, которые будут на сайте. Если к моменту разработки дизайна текстовые и графические материалы ещё не готовы, можно использовать любую информацию для заполнения, но нельзя оставлять в макете «пустые» места.
Каждый шаг разработки макета дизайна должен выполняться в соответствии с ТЗ и целями сайта.
5 этап — HTML-CSS вёрстка
В зависимости от целей и задач сайта, верстка должна удовлетворять некоторым требованиям. Обычно эти требования такие:
Кроссбраузерность — страницы должны одинаково отображаться в разных браузерах (Mozilla Firefox, Google Chrome, Opera, Internet Explorer, Safari и т.д.).
Гибкость вёрстки — возможность легко добавлять/удалять информацию на страницы.
Быстрота обработки кода браузером
Валидность — соответствие стандартам
Семантическая корректность — логичное и правильное использование элементов HTML
6 этап — заполнение сайта контентом (информацией)
На этом этапе очень важен качественный, профессиональный копирайтинг. Все материалы сайта, будь то тексты или графика, также должны вписываться в общую концепцию сайта, соответствовать его целям и задачам.
7 этап — тестирование сайта и исправление ошибок
Тестирование сайта может проводить как разработчик, так и заказчик. Наилучший вариант — это совместное тестирование.
8 этап — публикация сайта в интернете
На этом этапе сайт размещается на выбранном доменном имени, регистрируется в крупных поисковиках и каталогах.
9 этап — продвижение сайта и реклама в интернете
Когда сайт полностью готов к работе — нужно привлекать на него посетителей. Для «раскрутки» сайта можно воспользоваться контекстной или баннерной рекламой, SEO, SMO и другими методами.[15]
Многие Web-дизайнеры сходятся во мнении, что одна из главных проблем Web-дизайна — многообразие браузеров и платформ, каждая из которых по-разному поддерживает HTML и сценарии. С выпуском каждого нового браузера улучшаются их характеристики и возможности, но это не означает, что более ранние версии при этом исчезают. В большинстве своем люди не склонны гнаться за новейшим и лучшим. Одни довольствуются тем, что у них имеется, а другие, вероятнее всего, работают на компьютерах фирм или учреждений, которые выбрали браузеры за них.
В Web-дизайне нет жестких правил. Поскольку главная задача — сделать содержимое страницы доступным для максимального количества пользователей, то для продвижения вперед одинаково важны и эксперимент, и использование новых технологий с учетом существующих реалий. Залог успеха дизайнерского решения лежит в понимании потребностей аудитории и в четком представлении, как сайт будет использован. [24]
1.2 Язык разметки гипертекстовых страниц HTML
Язык разметки гипертекстовых страниц (HTML — Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.
Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium).
Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.
На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут, как входить, так и не входить в состав действующей спецификации HTML.
Информации о тегах HTML Compendium (краткое руководство по HTML) создано Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте compendium.org.[27]
Инструментарий редактирования HTML. Документы HTML являются обычными текстовыми ASCII-файлами. Это означает, что для их создания можно использовать любой текстовый редактор, даже с минимальными возможностями. Существуют средства редактирования, разработанные специально для написания HTML. Они позволяют экономить время, так как содержат клавиши быстрого доступа для выполнения повторяющихся операций, например, задания начальных установок документов, таблиц или просто применения стилей к тексту. Редакторы HTML отличаются от авторского WYSIWYG-инструментария (рассматриваемого далее) тем, что требуют знания правил составления HTML вручную, редакторы лишь упрощают и ускоряют этот процесс.
Пользователям Windows определенно следует проверить Home Site, мощный и недорогой редактор HTML компании Allaire Corporation. В нем имеются средства для выделения цветами синтаксических конструкций HTML, функция FTP, контроль синтаксиса и правописания, много файловый поиск и замещение. Кроме того, он содержит специальные команды и шаблоны для создания более сложных элементов (фреймов, сценариев Java Script и DHTML).
Информация и демонстрационная программа для загрузки находятся по адресу httр://www.allaire.com/.[32]
При работе на компьютерах Macintosh обращают внимание на BBEdit, коммерческий HTML-редактор компании Bare Bones Software, Inc. Он действительно имеет вес среди Web-разработчиков для для компьютеров Macintosh. В его состав входят удобные и быстрые HTML-инструменты, много файловый поиск и замена, встроенная FTP-функция, поддержка 13 языков программирования, построитель таблиц, контроль синтаксиса HTML и еще множество функций. Дополнительные сведения и демонстрационную программу можно найти по адресу http://www.bbedit.com.
Наиболее популярными в настоящее время WYSIWYG-редакторами являются: Macromedia Dreamweaver, Golive Cyber Studio (только для компьютеров Macintosh), Microsoft Front Page, File Maker Claris, Home Page, Adobe Page Mill.[44]
Теги HTML. Документ HTML содержит текст (содержимое страницы) и встроенные теги — инструкциями о структуре, внешнем виде и функции содержимого. Документ HTML разделяется на две основные части: заголовок — head и тело — body. Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).
Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок <>. Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег <BODY BGCOLOR=white> будет работать так же, как <bodybgcolor=white>. Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL.[11]
Контейнеры. Большинство тегов являются контейнерами. Это означает, что у них имеется начальный (открывающий или стартовый) и конечный (закрывающий) теги. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции. Например:
- The weather is <I>gorgeous</I>today.
Результат: The weather is gorgeous today.
Конечный тег имеет то же имя, что и начальный, но перед ним стоит слеш (/).
Его можно рассматривать как «выключатель» тега. Конечный тег никогда не содержит атрибутов.
В некоторых случаях конечный тег не обязателен, и браузер определяет конец тега из контекста. Чаще всего опускают конечный тег <р> (абзац).
Браузеры раньше поддерживали этот тег без соответствующего завершения, поэтому многие авторы Web привыкли использовать краткую форму. Это разрешено не всем тегам, и не все браузеры прощают их отсутствие. Поэтому, если есть сомнения, включается в текст закрывающий тег. Это особенно важно, когда в документе используются каскадные таблицы стилей.
Автономные теги. Некоторые теги не имеет завершающих тегов, потому что они используются для размещения отдельных (автономных) элементов на странице. Одним из них является тег изображения <img>, он просто помещает графику в поток страницы. Другие автономные теги — это разрыв строки (<br>
- , горизонтальная линия (<hr>
- и теги, содержащие информацию о документе и не влияющие на содержимое, выводимое на экран, такие как <meta>
- и <base>.[24]
Атрибуты. Атрибуты добавляются втег для расширения или модификации его действий. К одному тегу можно добавить несколько атрибутов. Если атрибуты тега следуют после имени тега, они разделяются одним или несколькими пробелами. Порядок следования не важен. Большинство атрибутов имеют значения, которые следуют за знаком равенства (=), находящимся после имени атрибута. Длина значений ограничена 1024 символами. Значения могут быть чувствительны к регистру. Иногда значения должны находиться в кавычках (двойных или одинарных).
Правила записи значения следующие:
- если значение представляет собой одно слово или число и состоит только из букв (a-z), цифр (0-9) и специальных символов (точка <.>
- или дефис<
- >), то можно поместить его после знака равенства без кавычек;
— если значение содержит несколько слов, разделенных запятыми или пробелами, или содержит специальные символы, отличные от точки или дефиса, тогда его необходимо поместить в кавычки. Например, URL требуют кавычек, потому что они содержат символы «://». Также кавычки необходимы при задании значений цветов с использованием формата «#rrggbb».
Чтобы избежать ошибок используйте кавычки всегда для всех значений.
В теги HTML могут помещаться другие HTML-теги для осуществления воздействия нескольких тегов на один элемент. Это называется вложением, и, что бы правильно его осуществить, начальный и конечный теги вложенного тега должны обязательно находиться между начальным и конечным тегами внешнего тега, например:
- The Weather is <B><I>gorgeous</I></B>
- today.
Результат: The weather is gorgeous today.
Часто встречающейся ошибкой является перекрытие тегов. Хотя часть браузеров отображают содержимое, отмеченное таким образом, многие не разрешают нарушать правило, поэтому важно размешать теги правильно. Следующий пример показывает неверное вложение тегов (тег<В> закрывается перед закрытием <I>):
- Theweatheris<B><I>gorgeous</B></I>today — данная информация, игнорируемая браузерами.
Информация, игнорируемая браузерами.
Виды игнорируемых тегов:
- разрывы строк. Символы конца строк в документе HTML игнорируются. Текст и элементы будут переноситься до тех пор, пока в потоке текста документа не встретится тег <р>
- или <br>. Разрывы строк выводятся, если текст обозначен как текст с заданным форматом (<рrе>);
- символы табуляции и множественные пробелы. Когда браузер встречает в документе HTML символ табуляции и несколько последовательных символов пробела, он выводит только один пробел. Таким образом, если документ содержит: «far, faraway», браузер выведет «far, faraway». Дополнительные пробелы можно добавить в текстовый поток, используя символ неразрывного пробела (Snbsp;
- . Кроме того, все пробелы выводятся, если текст является форматированным (находится в тегах <рrе>);
- множественные <р>
- теги. Последовательность тегов <р>, не прерываемых текстом, всеми браузерами интерпретируется как избыточная. Содержимое будет выводиться так, как если бы был только один тег <р>. Большинство браузеров выведет несколько тегов <Br>
- в виде нескольких переходов на новую строку;
- нераспознаваемые теги. Если браузер не понимает тег или тот был неверно задан, то браузер его просто игнорирует. В зависимости от тега и браузера это может привести к различным результатам. Либо браузер ничего не выведет, или он может отобразить содержимое тега как обычный текст;
- текст в комментариях.
Браузеры не выводят текст между специальными элементами <! и ->, которые используются для обозначения комментариев. После символов начала комментария и перед символами окончания обязательно должен находиться пробел. В сам комментарий можно помещать практически все. Комментарии нельзя вкладывать. [41]
Обеспечение доступности Web-страницы
При разработке Web-страницы фиксированного размера, вероятно, придется выбирать для нее размер экрана. Страница должна быть доступна (и правильно отображаться) для максимально возможного числа пользователей. Идея проста: необходимо определить наиболее часто используемое разрешение дисплея и разработать страницу таким образом, чтобы страница гарантированно заполняла все рабочее пространство.
Большинство дизайнеров рекомендуют разрабатывать страницы в формате 640×480, чтобы при просмотре пользователям не пришлось применять горизонтальную прокрутку. Горизонтальная прокрутка всегда затрудняет восприятие, поэтому дизайнеры традиционно ее отвергают.
Все большее число разработчиков считает стандартным разрешение 800×600. И совсем единицы разрабатывают страницы для еще более высоких разрешений. Конечно, ваше решение будет, в первую очередь, зависеть от аудитории. Например, если сайт ресурсов для дизайнеров графики, то считаем, что они имеют дисплеи, по крайней мере, с разрешением 800×600 или выше, в соответствии, с чем и разрабатывается страница.
Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху.
Пользователи с ограниченными возможностями зрения могут использовать специальные устройства для увеличения изображения, находящегося на экране. В этом случае к дизайну не предъявляется никаких специальных требований. Многие люди с проблемами зрения используют текстовые браузеры (такие как Lynx) вместе с программным обеспечением, которое громко читает содержимое страницы. В любом случае основное внимание уделяется структуре документа и его тексту. Графическое содержимое может быть просто утеряно.[61]
Средства HTML 4.0. Спецификация HTML 4.0 вводит ряд новых атрибутов и тегов, созданных специально для того, чтобы сделать Web-документы доступными для более широкого круга пользователей. Кратко о некоторых новых возможностях HTML 4.0. (Расширенный список возможностей размещен на сайте http://www.w3.org/WAI/References/HTML4-access, а полные спецификации данной версии — на сайте .
HTML 4.0 предлагает следующие новые возможности, обеспечивающие доступность:
- дальнейшее разделение структуры документа и его внешнего представления. Информацию о стиле HTML 4.0 предлагает размещать в каскадных таблицах стилей;
- навигационная помощь, например, клавиши доступа и индексирование порядка табуляции для доступа к элементам страницы с использованием только клавиатуры;
- рекомендации, касающиеся новой клиентской карты-изображения, объединяющей графические и текстовые ссылки;
- новые теги <abbr>
- и <acronym>, которые помогают речевым и другим устройствам интерпретировать аббревиатуры и акронимы;
- возможность логически группировать строки и столбцы таблиц, снабжать их заголовками, резюме и длинными описаниями содержимого, облегчая интерпретацию таблиц;
- возможность группировать элементы управления формами и создавать длинные списки выбора, более ясные для восприятия. Элементы форм также доступны через клавиши табуляции и быстрого доступа;
- улучшенный механизм создания альтернативного текста.
Атрибут alt теперь обязателен для тега <img>. Чтобы обеспечить связь с более длинными текстовыми пояснениями к изображениям, введен атрибут longdesc.
Для добавления информации о любом элементе, можно использовать атрибут title.[63]
1.3 Основы CSS
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт Arial и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.
CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:
- использование различных расширений HTML;
- применение изображений вместо текста;
- использование рисунков для контроля пустого пространства, так называемые распорки;
- использование таблиц для верстки веб-страниц;
- написание программных скриптов вместо использования HTML.
Эти техники значительно увеличивают сложность разработки веб-страниц, предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющих.
Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
С помощью CSS определяются стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые описаны в таблице 1. [20]
Таблица 1 — Атрибуты CSS для управления шрифтами
|
Свойство |
Значение |
Описание |
Пример |
|
|
font-family |
имя шрифта |
Задает список шрифтов |
P {font-family: Arial, serif} |
|
|
font-style |
normal italic oblique |
Нормальный шрифт Курсив Наклонный шрифт |
P {font-style: italic} |
|
|
font-variant |
normal small-caps |
Капитель (особые прописные буквы) |
P {font-variant: small-caps} |
|
|
font-weight |
normal lighter bold bolder 100-900 |
Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный |
P {font-weight: bold} |
|
|
font-size |
normal pt px % |
нормальный размер пункты пикселы проценты |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
|
Средства CSS. Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
В первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. — то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала.
Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил «улучшенные теги», которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом defacto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции — представлять информацию на любом устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей браузеров. Революционные изменения были введены в новом стандарте — HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель браузера.
В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве — будь это 21″ дисплей или маленький черно-белый экран сотового телефона.
Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается революционность подхода. Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили.
При показе странички конкретному устройству задействуется соответствующая случаю таблица стилей. Для сотового телефона и дисплея компьютера они, разумеется, должны быть разными. В первом случае используется минимальное оформление, которое позволяет представить информацию наиболее оптимально и компактно. Во втором же случае имеется все богатство шрифтового и цветового оформления.
Таблица стилей пишется всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.
Размещение всей стилевой информации в одном внешнем файле открывает и другие полезные возможности — ведь изменив содержимое только одного стилевого файла, можно в считанные секунды сменить весь дизайн сайта. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован, верно.[20]
CSS2 (Cascading Style Sheets, Level 2) — самая последняя рекомендация по каскадным таблицам стилей, предоставляет механизмы для улучшенной интерпретации страниц неграфическими и не визуальными устройствами. Усовершенствования включают:
- механизмы, с помощью которых созданная пользователем таблица стилей может заменить все таблицы стилей более высоких уровней в каскаде. Это дает конечному пользователю возможность полностью управлять отображением. Пользователь получает возможность создавать настраиваемые таблицы стилей для вывода страниц в соответствии со специальными требованиями;
- специализированная поддержка для загружаемых шрифтов — таким образом уменьшается тенденция помещать текст в графику для улучшения внешнего вида страницы;
- механизмы позиционирования и выравнивания, которые отделяют содержимое от внешнего представления. Эти таблицы стилей должны исключить некорректное использование тегов HTML для создания особых эффектов отображения. Теги HTML можно использовать для логической структуризации документа, делая его более простым для интерпретации не визуальными посредниками;
- средства управления для звукового вывода доставленной по Web информации;
- улучшенные средства навигации, такие как цифровые маркеры, которые можно добавлять в документ в целях ориентации.[22]
1.4 Представление текста на Web-страницах
При создании профессиональной графики для Web используется текст со сглаженными краями. Сглаживание — это легкая размытость на неровных краях, сглаживающая переходы между цветами. Не сглаженные края, напротив, выглядят зазубренными и ступенчатыми. Исключением из этого общего правила является текст очень малого размера, (10 пунктов и меньше), применение сглаживания делает его практически неразличимым. Текст малых размеров будет выглядеть намного лучше без сглаживания.
Два комплекта шрифтов. При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет использован при отображении.
Пропорциональный шрифт — иначе «шрифт переменной ширины» для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная «W» занимает больше места в строке по горизонтали, чем прописная «I». Такие гарнитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.
Web-браузеры для большинства текстов на Web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer).
Но это всего лишь общее правило.
Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает не больше места, чем прописная «I». Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.
Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа Courier.
Текст в изображениях. Дизайнеры быстро поняли, что самый верный способ абсолютного контроля над шрифтами — поместить текст в изображение. Можно часто видеть заголовки, подзаголовки и объявления, выполненные в виде файлов GIF. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы.[59]
Таблица 2 — Результат использования различных параметров шрифтов
Таблица 3 — Результат использования различных параметров текста
Преимущества использования графики вместо HTML-текста абсолютно очевидны:
- можно определять тип шрифта, размер, интерлиньяж, промежуток между буквами, цвет и выравнивание — все атрибуты, которые вызывают сложности только в HTML;
- страница будет одинакова при выводе во всех графических браузерах.
Но у этого метода имеется ряд недостатков:
- изображение загружается дольше, чем текст, т.к. графические файлы обычно на несколько порядков больше, чем HTML-тексты, имеющие то же содержание;
- в неграфических браузерах содержание утрачивается.
Пользователи, которые не могут (или не хотят) просматривать графику, не увидят и текста. Альтернативный текст (используется атрибут Alt) на месте графического изображения помогает, но его возможности ограничены и это не всегда надежный способ отождествления отсутствующей графической информации;
- информацию, находящуюся в изображении, нельзя индексировать или организовать ее поиск. В результате исключаются из документа важные части информации.
Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a MacOS — 72 точек/дюйм. Мониторы Multi Scan допускают более высокое разрешение.
Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и при печати (например, 12 пт Times на экране выглядит так же, как 12 пт Times на бумаге).
Для шрифтов Microsoft подобное соглашение не выполняется, и размер шрифта при выводе на экран больше, что облегчает чтение с дисплея. В результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в 16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров Масintosh увидят текст почти неразборчивым, так как он будет отображен шрифтом размером всего 6,75 пт).[47]
Таблица 4 — Свойства CSS для управления видом текста
1.5 Представление графики на Web-страницах
На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее — краткий обзор «большой тройки» онлайновых графических форматов.
