Особенности разработки и использования интернет-ресурсов Основы сайтостроительства

Язык HTML Язык разметки гипертекстовых документов HTML основан на совокупности команд, называемых тегами (от английского tag). HTML-тег записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Теги могут быть одиночными или парными. Парный тег состоит из открывающего и закрывающего. Закрывающий тег содержит ту же последовательность букв, но им предшествует косая черта:.

Разметка документа в формате HTML Разметка осуществляется с помощью управляющих конструкций, которые называются тегами (англ. tag – ярлык, признак). Каждый тег состоит из имени и необязательных атрибутов. Теги заключаются в угловые скобки. Содержимое скобок никогда не выводится в окне броузера.

Атрибуты тегов Атрибуты добавляются в тег для расширения или модификации его действия. Значения: могут быть чувствительны к регистру; имеют ограниченную длину в 1024 символа; должны заключаться в двойные или одинарные кавычки (за исключением случаев, когда значение состоит из одного слова или числа, только из букв (a-z), цифр (0-9), и специальных символов (точка или дефис)).

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

Вложенные теги В теги HTML могут помещаться другие HTML- теги для осуществления воздействия нескольких тегов на один элемент – вложение тегов. Пример использования вложенных тегов. Теги не могут перекрываться! Неверно: Пример неверного использования вложенных тегов.

Пример использования тегов Текст для примера Текст

Структура HTML-документа Документ в формате HTML образуют три основные части: строка, содержащая информацию о версии HTML; заголовочная часть (определяется тегом ); тело, непосредственно включающее содержание документа (определяется тегом или ).

Пример простейшего HTML-документа Простой документ Пример простого документа Проба пера.

Результат отображения документа в окне броузера

Структура сайта Последовательная (линейная) структура Иерархическая (древовидная) структура Структура сети (паутина)Структура системы координат

Организация файловой структуры сайта

Правила назначения имен файлов и папок сайта Cледует ограничиться цифрами и латинскими буквами; Рекомендуется использовать только нижний регистр; Имена должны быть короткими и интуитивно понятными; Главная страница в большинстве случае обязательно должна называться index.html (index.htm).

Компоновка и дизайн страниц

Пример компоновки и оформления страницы

Отрицательный пример оформления страницы

Организация навигационной панели

Организация гипертекстовых переходов Типы гипертекстовых ссылок: 1.Структурные. 2.Встроенные. 3.Ассоциативные.

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

Классификация веб- сайтов 1.Личные страницы (Home pages). 2.Корпоративные сайты. 3.Коммерческие сайты. 4.Контент-сайты. 5.Некоммерческие сайты.

Основные этапы разработки сайта 1.Анализ. 2.Выработка концепции. 3.Проектирование. 4.Создание дизайна. 5.Подготовка информационного наполнения. 6.Создание программных компонентов (если необходимо). 7."Верстка". 8.Отладка и тестирование. 9.Публикация. 10.Продвижение, поддержка и эволюция.

Состав команды разработчиков 1.Писатель. 2.Редактор. 3.Иллюстратор. 4.Дизайнер. 5.Верстальщик. 6.Веб-мастер. 7.Программист.

С чего начать? Цели, которые преследует сайт Целевая аудитория

Разработка информационного наполнения Краткость. Четкость формулировок. Удобочитаемость. Редакторская правка. Тестирование и отладка. Минимализация объема страниц. Главная страница – наиболее важная страница.

Представление информации в электронном виде Виды электронной информации: 1.Текстовая. 2.Графическая. 3.Звуковая. Типы электронной информации: 1.Статическая (неизменная). 2.Динамическая (изменяющаяся с течением времени). 3.Интерактивная (изменяющаяся при взаимодействии).

Предварительная оценка 1.Цели, которые преследует сайт. 2.Целевая аудитория. 3.Первое впечатление.

Основные критерии оценки сайта 1.Структура сайта. 2.Компоновка (дизайн) страниц. 3.Организация навигационной панели. 4.Организация гипертекстовых переходов. 5.Информационное наполнение. 6.Качество текста. 7.Качество иллюстраций. 8.Качество программных модулей (если есть). 9.Качество доступа. 10.Простота использования.

Специализированные HTML-редакторы Как правило используют технологию WYSIWYG (англ. What You See Is What You Get – что видишь, то и получаешь). К их достоинствам относятся: ускорение и упрощение процесса разработки; автоматизация многих рутинных операций; позволяют осуществлять быстрое макетирование; могут использоваться начинающими. Недостатки: не создают «чистого» кода (добавляют «фирменные» или избыточные элементы); могут автоматически изменять открываемый документ; полностью не избавляют от знания HTML, созданные в них документы как правило требуют ручной доводки.

Некоторые современные HTML-редакторы Adobe Dreamweaver; Adobe GoLive; Microsoft FrontPage Многие современные неспециализированные программные продукты так же позволяют сохранять документы в формате HTML. Например Microsoft Word. Однако результат как правило оставляет желать лучшего.

Рабочее окно программы Dreamweaver