СОЗДАНИЕ web-СТРАНИЦ И...

ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

САНКТ-ПЕТЕРБУРГСКИЙ ТОРГОВО-ЭКОНОМИЧЕСКИЙ ИНСТИТУТ

КАФЕДРА КОМПЬЮТЕРНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

СОЗДАНИЕ WEB-СТРАНИЦ ИWEB-САЙТОВ

МЕТОДИЧЕСКИЕ УКАЗАНИЯК ПРАКТИЧЕСКИМ ЗАНЯТИЯМ

(электронная версия от 12.03.2010)

Санкт-Петербург2010

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

Автор-составитель - Египко Виктор Николаевич, кандидат технических наук, доцент кафедры компьютерных и информационных технологий Санкт-Петербургского торгово-экономического института.

В пособии использованы материалы, подготовленные И.С. Кноп.

© Египко В.Н., 2010

СОДЕРЖАНИЕВВЕДЕНИЕ

ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB -СТРАНИЦ

ТРЕБОВАНИЯ, ПРЕДЪЯВЛЯЕМЫЕ К WEB -САЙТУ ПРЕДПРИЯТИЯ

ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКИХ ЗАНЯТИЙ

Задание 1. Формирование структуры Web -страницы

Задание 2. Разметка простых списков

Задание 3. Разметка многоуровневого списка

Задание 4. Разметка таблиц

Задание 5. Вставка рисунков

Задание 6. Создание диалоговой формы

Задание 7. Создание многофреймовой структуры

Задание 8. Формирование главной страницы с гиперссылками

Задание 9. Использование каскадных таблиц стилей

Задания 10-20. Комплексные решения

ЛИТЕРАТУРА

ПРИЛОЖЕНИЕ 1. ОСНОВНЫЕ ТЕГИ И АТРИБУТЫ HTML

ПРИЛОЖЕНИЕ 2. WEB-ТЕХНОЛОГИЯ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ

ПРИЛОЖЕНИЕ 3. Специальные символы

ПРИЛОЖЕНИЕ 4. Основные особенности языка гипертекстовой разметкиXHTML

ВВЕДЕНИЕ

World Wide Web (WWW, 3W, Web) – «Всемирная паутина» представляет собой самый популярный информационный ресурс Internet, на основе которого создаются Web-сайты и порталы различного назначения, домашние страницы (home page) – «хомяки» частных лиц, функционирует бесплатная электронная почта Web-mail, реализуется электронная коммерция, ведутся форумы, «живые» дневники-блоги и пр. Web – это непрерывно расширяющаяся распределенная гипертекстовая база данных, отдельные документы (файлы) в которой называются страницами (pages).

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

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

ПРОГРАММНЫЕ СРЕДСТВА РАЗРАБОТКИ WEB-СТРАНИЦ

Web-страницы создаются, точнее размечаются, с помощью специализированных языковых средств, классическим из которых является HTML (Hyper Text Mark up Language) – язык разметки гипертекста. Операторы HTML называются тегами, основные из которых приведены в Приложении 1.

В настоящее время HTML все еще считается основой WWW, хотя статус официальных рекомендаций консорциума W3C(WWW Consortium – www.w3c.org) уже приобрел язык разметки XHTML (подмножество более гибкого языка разметки документов XML).

В процессе создания Web-страниц могут применяться разнообразные программные инструменты:1. Текстовые (символьные) редакторы общего назначения типа Блокнота,

встроенного текстового редактора операционной системы MS Windows.2. Специализированные текстовые HTML-редакторы, в средах которых

используется цветовое выделение тегов, атрибутов и их значений, а также выполняется синтаксический контроль языковых конструкций (например, русифицированный, свободно распространяемый UniRed, Bred, HtmlPad FisherMan, CoffeCup HTML Editor,…).

3. Визуальные Web-редакторы, использующие принцип WYSIWYG, одни из которых ориентированны на массового пользователя, а другие – на профессионалов Web-мастеринга (MS FrontPage, Web Studio, Dreamweaver, Golive CS, …).

4. Некоторые браузеры, имеющие встроенные HTML-редакторы и/или визуальные редакторы (например, SeaMonkey).

5. Программы типа CMS (Content Management System - система управления контентом), основное назначение которых – управление текущим содержанием опубликованных Web-сайтов (CMS Xoops, NetCat, …).

6. Офисные программы типа MS Office, предоставляющие возможность разработки и сохранения документов в формате «Web-страницы».

7. Web-конструкторы (визуальные on-line редакторы), использующие шаблоны в условиях бесплатного хостинга на известных сайтах (www.narod.ru, www.sitecity.ru, www.boom.ru, www.tripod.com, …).

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

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

Кроме того, в теоретической части дисциплины студентов следует кратко информировать о современных тенденциях развития стандартов программных средств для создания Web-страниц: XHTML, Java-апплеты, скрипты-сценарии (на JavaScript, VBScript), технологии CSS, SSI, CGI, PHP, Perl, Macromedia Flash и пр.

ТРЕБОВАНИЯ, ПРЕДЪЯВЛЯЕМЫЕ К WEB-САЙТУ ПРЕДПРИЯТИЯ

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

Вначале следует четко сформулировать цель и требования к создаваемому Web-сайту. Web-сайты можно условно разделить на

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

К Web-сайтам информационного типа может быть предъявлен ряд традиционных требований (рекомендаций), которые целесообразно разделить на три группы: требования к контенту (содержанию), к оформлению (дизайну) и к исполнению кода отдельных Web-страниц.

Требования, предъявляемые к контенту Web-сайта1. Содержание сайта, в первую очередь, должно представлять интерес для потенциального посетителя, привлекать внимание читателя своей «изюминкой».2. Стиль изложения должен следовать принципу KISS (Keep It Simple, Stupid – будь проще, глупышка), то есть описание должно вестись более простым языком без литературного украшательства и использования научных и технических терминов.3. Текст страниц сайта должен быть тщательно выверен с целью исключения грамматических ошибок и опечаток. Страницы не должны содержать устаревшего или просроченного материала.4. Особые требования предъявляются к главной странице сайта, откуда посетитель начинает навигацию по сайту. В верхней части страницы должно находиться название и краткое назначение сайта. Желательно, чтобы кроме основного содержания, главная страница имела бы ссылки на гостевую книгу, раздел «ЧаВо» с ответами на часто задаваемые вопросы и счетчик посещений.

Рекомендации по дизайну Web-сайта1. Оформление Web-сайта должно быть выдержано в едином стиле, с одинаковым цветовым решением всех страниц, с одними и теми же правилами оформления текста.2. При этом следует использовать одну, максимум две, шрифтовые гарнитуры.3. На каждой странице объем текста не должен занимать менее 50% окна браузера.4. Предпочтительно верстку текста производить в две колонки, в редких случаях в три колонки, что способствует более быстрому восприятию текста.5. В пространстве страницы типового сайта можно выделить четыре функциональные области: «шапку», панель навигации, блок основного текста и «подвал». «Шапка» традиционно располагается сверху и кроме названия сайта может содержать логотип предприятия или иной графический символ, размещаемый традиционно слева. Если разделов на сайте немного, то навигационную панель располагают горизонтально сверху, под названием сайта или раздела. При большем числе разделов целесообразней расположить панель навигации вертикально слева. «Подвал» страницы, уравновешивая ее

«шапку», может содержать выходные и контактные данные, даты создания и последнего обновления сайта, а также показания счетчика посещений. 6. Дополнительно на главной странице могут быть выделены зоны для новостной ленты, баннерной рекламы и пр.7. Объём страницы не должен быть более двух-трёх экранов по вертикали. Появление горизонтальной линии прокрутки недопустимо.8. Между ёмкими текстовыми блоками следует вставлять таблицы и списки (для "отдыха" глаз). Абзацы текста исполнять с отбивкой.

Рекомендации по исполнению кода Web-сайта1. Основным требованием по исполнению кода Web-страниц является их «легкость», способствующая быстрой загрузке страниц на компьютер посетителя сайта, который может быть подключен к Internet по низкоскоростной телефонной линии режима dial-up. В таких случаях время загрузки не должно превышать пяти секунд. Считается при этом, что размер каждой страницы сайта не должен превышать примерно 30 килобайт. При большем объеме страницы в процессе ее загрузки следует предусмотреть вывод на экран предупреждающего сообщения. Минимизация объема страниц может быть достигнута выполнением разработчиком сайта трудоемкой процедуры «ручной» оптимизации HTML-кода страниц (в случае, если применялись визуальные средства разработки и неэкономичные форматы графических фрагментов).2. Наиболее популярная модульная сетка для размещения объектов на страницах сайтов и проектов с умеренным объемом содержания (и наиболее легкая в реализации) - это сетка из двух колонок, пропорции которой рассчитываются следующим образом:во-первых, с учетом наиболее популярного по статистике разрешения экрана на сегодняшний день – 1024х768; во-вторых, с учетом того, чтобы при разрешении экрана 800х600 не появлялась горизонтальная полоса прокрутки (для этого суммарная ширина всех колонок не должна превышать 770 px-пикселей);в-третьих, с учетом того, что колонка, которая определена как модуль для отображения собственно информации была больше, чем колонка, которая определена как модуль-навигационное меню. Таким образом, пропорция выбирается 150px+620px или же 200px+550px. Получается сетка из двух колонок, причем в меньшей предполагается расположить навигационное меню, а в большей - содержание.3. Не следует включать в сайт делового назначения флэш-ролики, звуковые и видеоклипы. Следует также избегать использования крупных графических изображений.4. Для того чтобы сайт был доступен самой широкой аудитории, следует придерживаться принципа «отставания на один шаг» от последних версий браузеров и языковых средств создания сайтов.5. Для придания Web-страницам свойства интерактивности, например, для реализации диалога с посетителем сайта используют скрипты-сценарии,

записанные на специальном языке программирования. Такие скрипты могут выполняться как на стороне клиента, так и на стороне сервера. В Internet сейчас наблюдается тенденция к снижению использования клиентских скриптов. Чаще скрипты выполняются на стороне сервера с возвращением пользователю соответствующего сгенерированного HTML-файла.6. Подготавливая сайт к посещению программными роботами поисковых серверов, следует включать в заголовочную область главной страницы так называемые метатеги, содержащие краткое описание сайта и ключевые слова.7. Теги внешних гиперссылок рекомендуется дополнять атрибутом target=”_blank” с целью открытия Web-страниц в новом окне браузера, то есть с возможностью последующего удержания посетителя на страницах сайта предприятия.

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

Средства, используемые при создании Web-сайтов, перечислены во введении.

Типовая последовательность разработки Web-сайта (еще до его опубликования) состоит из следующих этапов: 1) создание макета сайта в целом с распределением публикуемой информации по отдельным страницам; 2) проработка системы внутренней навигации; 3) верстка отдельных Web-страниц; 4) программирование различных сервисов; 5) тестирование сайта на локальном компьютере; 6) подбор доменного имени сайта.

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

Выбор для Web-сайта доменного имени (основы URL) – весьма ответственный этап, от которого в большой степени зависит успех всего проекта. Требования к такому имени очевидны. Имя сайта должно быть коротким, легко запоминаемым, однозначным в написании и произношении. Оно должно быть логически связано с наименованием выпускаемой продукции, спектром предоставляемых услуг или видом предлагаемых товаров. Лучший вариант – совпадение с названием предприятия или его аббревиатурой. К тому же, доменное имя должно быть уникальным в рамках того старшего домена (чаще это «ru»), в котором планируется его регистрация.

Имя Web-сайта в настоящее время формируется только из букв латинского алфавита и единственно допустимого разделителя «дефиса». При этом используют англоязычные слова (аббревиатуры) или транслитерацию

сочетаний букв русского алфавита. Встречаются и весьма оригинальные решения, например, «река» → «peka» или «семья» → «7ya».

Подготовка к публикации Web-сайта, публикация и его продвижение («раскрутка») требует участия заказчика проекта в решении следующих вопросов.

Во-первых, это выбор варианта хостинга (конечно, более качественного платного) и фирмы-хостера. Во-вторых, размещение сайта на сервере хостера и завершение его отладки. В-третьих, выбор вида старшего домена для предстоящей регистрации (“ru” или тематического и какого конкретно). В-четвертых, регистрация Web-сайта в известных поисковых системах и каталогах, возможно, использование баннерной рекламы и других приемов привлечения посетителей сайта. В-пятых, сопровождение сайта с использованием программ типа CMS (интерфейс редактора) и дальнейшее непрерывное развитие Web-сайта предприятия (интерфейс разработчика).

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

ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКИХ ЗАНЯТИЙ

Задание 1. Формирование структуры Web-страницыИспользуя теги HTML (см. Приложение 1 «О сновные теги и атрибуты

html » ), создать в среде текстового редактора базовую структуру "пустой" Web-страницы с наименованием (титулом) Структура, именем файла struktur.htm и содержанием (телом) Пустая страница.

Задание 2. Разметка простых списковСоздать на основе файла struktur.htm файл spisok.htm c содержанием в

виде упорядоченного и неупорядоченного списков:

ИНФОРМАЦИОННЫЕ РЕСУРСЫ INTERNET

Ресурсы режима "off-line"1. E-mail/Web-mail2. Группы новостей -UseNet/NewsGroup 3. Списки рассылки - Mailing Listing

Ресурсы режима "on-line"• "Всемирная паутина" - WWW• Архивы файлов - FTP• "Чат" ("болтовня") - IRC• "Электронный пейджер" - ICQ

Задание 3. Разметка многоуровневого спискаПреобразовать списки задания 2 в один двухуровневый список с

сохранением результата в файле spisok2.htm:

ИНФОРМАЦИОННЫЕ РЕСУРСЫ INTERNET

I. Ресурсы режима "off-line"1. E-mail/Web-mail2. Группы новостей -UseNet/NewsGroup 3. Списки рассылки - Mailing Listing

II. Ресурсы режима "on-line"1. "Всемирная паутина" - WWW2. Архивы файлов - FTP3. "Чат" ("болтовня") - IRC4. "Электронный пейджер" – ICQ

Задание 4. Разметка таблицСоздать на основе файла struktur.htm два файла tabl1.htm и tabl2.htm c

содержанием в виде соответствующих таблиц:

Прайс-лист Параметры ПКНаименование

товара Цена Модель ПК Параметры

Монитор 6 900 р. CPU RAM Принтер 4 500 р. Для офиса Celeron 256М

Для дома Р4 512М

Задание 5. Вставка рисунковСоздать на основе файла struktur.htm файл ris.htm c содержанием в

виде четырех произвольных рисунков (по два рисунка в каждой из двух строк), файлы которых следует предварительно скопировать в дочернюю папку images. В начале страницы предусмотреть вывод общей поясняющей надписи, например, «Коллекция картинок». Над каждым из четырех рисунков также должна быть соответствующая надпись.

Задание 6. Создание диалоговой формыСоздать на основе файла struktur.htm файл forma.htm c диалоговой

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

Дополнительно добавить многострочное текстовое поле.

Задание 7. Создание многофреймовой структурыСоздать на основе файла struktur.htm страницу фреймовой структуры

(удалив тег body) – файл frames.htm со следующим простым содержанием фреймов:

Страница 1

Страница 2

Страница 3 Страница 4

Задание 8. Формирование главной страницы с гиперссылкамиСоздать на основе файла struktur.htm главную страницу сайта - файла

index.htm согласно рекомендуемому ниже макету. Страница должна содержать логотип учебного проекта, соответствующий заголовок, навигационную панель с гиперссылками на все ранее созданные Web-страницы и русскоязычный поисковик, а также гиперссылку для отправки посетителем сайта сообщения электронной почты. Основной текст можно скопировать из первых разделов данного пособия. Включить в страницу выходные данные. Предусмотреть также место для баннера. Следовать рекомендациям по дизайну страниц, изложенным в разделе «Введение».

УЧЕБНЫЙ WEB-САЙТстудентки группы 1301

Старалкиной И.Л.

Cписки

Таблицы

Рисунки

Форма

Фреймы

Поиск в Internet

Пишите нам

Что такое WWW?World Wide Web

(WWW, 3W, Web) – «Все-мирная паутина» пред-ставляет собой самый популярный информаци-онный ресурс Internet, на основе которого создаются Web-сайты и порталы различного назначения, домашние страницы (home page) – «хомяки» частных лиц, функционирует бес-платная электронная почта Web-mail, реализуется электронная коммерция, ведутся форумы, «живые» дневники-блоги и пр. Web – это непрерывно рас-ширяющаяся распределен-ная гипертекстовая база данных, отдельные доку-менты (файлы) в которой называются страницами (pages).

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

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

Последнее обновление: 09.12.2009 © Старалкина И.Л., 2009

ПОЕХАЛИ!!!

Задание 9. Использование каскадных таблиц стилейИспользуя технологию каскадных таблиц стилей (см. Приложение 2

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

Задания 10-20. Комплексные решенияПриведенные ниже задания могут быть использованы для итогового

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

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

Рекомендуется разместить части Web-страницы с помощью тегов разметки таблицы, первоначально задав толщину ее рамок в несколько пикселей. По окончании разметки толщину рамок следует обнулить (или удалить атрибут border).

Задание 10

1. Логотип компании АТЛАНТ должен быть ссылкой на сайт компании (http://www.atlant.ru.)

2. Рисунки называются logoatlant.gif и comp.gif соответственно.3. Строка «БЕСПЛАТНО В КОМПЬЮТЕРНЫХ МАГАЗИНАХ ГОРОДА»

должна бежать по экрану.4. Цвет фона сделать розовым.

Задание 11

1. Логотип компании АТЛАНТ должен быть ссылкой на сайт компании (http://www.atlant.ru).

2. Рисунки называются logoatlant.gif и avto.gif соответственно.3. Строка «БЕСПЛАТНО НА АВТОЗАПРАВКАХ» должна бежать по

экрану.4. Цвет фона сделать светло-зеленым.

Задание 12


2. Рисунки называются logoatlant.gif и opt.gif соответственно.3. Строка «БЕСПЛАТНО В КРУПНЫХ СУПЕРМАРКЕТАХ» должна

бежать по экрану.4. Цвет фона сделать желтым

Задание 13


2. Рисунки называются logoatlant.gif и sport.gif соответственно.3. Строка «БЕСПЛАТНО В КРУПНЫХ СПОРТИВНЫХ МАГАЗИНАХ»

должна бежать по экрану.4. Цвет фона сделать светло-голубым.

Задание 14


2. Рисунки называются logoatlant.gif и texno.gif соответственно.3. Строка «БЕСПЛАТНО В КРУПНЫХ УНИВЕРМАГАХ» должна бежать

по экрану.4. Цвет фона сделать серым.

Задание 15

1. Логотип компании КЕЙ должен быть ссылкой на сайт компании (http://www.key.ru/).

2. Рисунок называются logo_key.gif.3. Строка «СКИДКИ ПО ДИСКОНТНОЙ КАРТЕ» должна бежать по

экрану.4. Цвет фона сделать светло-голубым.

Задание 16

1. Логотипы компаний должны быть ссылками на сайты компаний

(http://www.webplus.ru), (http://rol.ru) и (http://www.dux.ru/) соответственно.2. Рисунки называются webplus.gif, rol.gif и dux.gif соответственно.3. Строка «РЕКЛАМНАЯ АКЦИЯ» должна бежать по экрану.4. Цвет фона сделать светло-зеленым.

Задание 17


2. Рисунки называются logoatlant.gif и str.gif соответственно.3. Строка «БЕСПЛАТНО В КРУПНЫХ СУПЕРМАРКЕТАХ» должна

бежать по экрану.4. Цвет фона сделать серым.

Задание 18

1. Логотип компании ПЯТЕРОЧКА должен быть ссылкой на сайт компании (http://www.5e.ru).

2. Рисунок называется 5e.gif.3. Строка «ИНТЕРЕСНАЯ РАБОТА, ДРУЖНЫЙ КОЛЛЕКТИВ» должна

бежать по экрану.4. Цвет фона сделать рыжим.

Задание 19

1. Логотипы компаний должны быть ссылками на сайты компаний (http://www.atlant.ru), (http://www.master.ru) и (http://www.lanck.ru/) соответственно.

2. Рисунки называются int.gif, master.gif и lanck.gif соответственно.3. Строка «РЕКЛАМНАЯ АКЦИЯ» должна бежать по экрану.4. Цвет фона сделать светло-сиреневым.

Задание 20

1. Логотип компании ICEBERG должен быть ссылкой на сайт компании (http://www.iceberg.spb.ru).

2. Рисунок называется icberg.jpg.3. Строка «РЕКЛАМНАЯ АКЦИЯ» должна бежать по экрану.4. Цвет фона сделать серым.

ЛИТЕРАТУРА

1. Хейл Д. Освой самостоятельно HTML и XHTML. 10 минут на урок: Пер. с англ. – М: Изд. дом «Вильямс, 2005.

2. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0 – СПб.: БХВ-Петербург, 2003.

3. Дунаев В.В. Основы Web-дизайна. Самоучитель. – СПб.: БХВ-Петербург, 2006.

4. Хейз Д. Освой самостоятельно HTML. 10 минут на урок. 4-е изд. Пер. с англ. – М.: ООО «И.Д. Вильямс», 2005.

5. Чиртик А.А. HTML. Популярный самоучитель. – СПб.: Питер, 2006.6. Дригалкин В.В. HTML в примерах. Как создать свой Web-сайт.

Самоучитель. - М.: Издательский дом «Вильямс», 2003.7. Симонович С.В., Евсеев Г.А., Алексеев Г.А. Специальная информатика:

Учебное пособие. - М.: АСТПРЕСС; Инфорком-Пресс, 1998.8. Холмогоров В. Интернет-маркетинг. Краткий курс. 2-е издание. - СПб.:

Питер, 2002.

ПРИЛОЖЕНИЕ 1

ОСНОВНЫЕ ТЕГИ И АТРИБУТЫ HTML

Синтаксис парного тега:<тег атрибут1="значение1" атрибут2="значение2"… >

Область действия тега </тег> Пример:<font size="6" color="#00ff00">Символы зеленого цвета</font>

Ниже при описании тегов используются следующие шрифтовые выделения:

• наименования тегов имеют жирное начертание;• наименования атрибутов – жирное и курсивное начертание;• значения атрибутов (в кавычках) – курсивное начертание.

Ниже используются также следующие условные обозначения: символ «|» разделяет допустимые значения в списке, из которого следует выбрать лишь одно значение; цифры «1, 2, …, 9» в значениях атрибутов тегов символизируют десятичное значение; символ «*» соответствует доле, дополняющей соответствующий интервал размещения на экране до 100%.

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

1. Теги структуры web-страницы<html> <head> <title>Название документа, наблюдаемое в области наименования окна браузера </title> метатеги, описание стилей и пр. </head> <body> Основное содержание страницы </body></html>

2. Атрибуты цветового оформления документа (для тега body)text="#rrggbb" - задание цвета основного текста документа с использованием шестнадцатеричных констант (от 00 до ff), задающих интенсивность красного (rr), зеленого (gg) и синего (bb) цветов. Вместо

констант можно использовать стандартные названия цветов: orange, red, yellow, tan, silver, navy, green, gold, marine, linen, pink, violet, white, teal...bgcolor=”#rrggbb” - задание цвета основного фона документаПример: <body text="#ff0000" bgcolor="navy">Красные символы на синем фоне</body>background="URL" – задание фонового рисунка, размноживаемого браузером по экрану в бесстыковочном видеПример:<body background="images/stone.gif">

3. Теги и атрибуты задания шрифтов<basefont> - задание атрибутов основного шрифта<font> - задание атрибутов локального шрифтаsize= "1...7 | ± 1" - атрибут размера шрифта абсолютного/относительного(7 - максимальный размер)color="цвет" - атрибут задания цвета шрифта (см. п. 2)<b> - полужирный шрифт; <i> - курсив; <u> - с подчеркиваниемПример: <basefont size="7" color="navy"> - синий шрифт максимального размера<font size="6" color="#00ff00" > <i>Символы зеленые курсивом</i></font>

4. Теги оформления абзацев<p> - тег начала абзаца (с пропуском пустой строки перед абзацем)<center>Центрируемый объект - выравнивание текста и пр. объектов по центру экрана<br /> - одиночный тег переноса на следующую строку<hr size="9" width="99%" align="left | center | right" /> - одиночный тег горизонтальной линии с атрибутами, задающими соответственно толщину линии в пикселях, относительную ширину<h1> … <h6> - теги выделения заголовков от самого крупного до самого мелкого<div> - начало раздела (секции, блока)<pre> - «преформатированный» текст с сохранением символов пробела, перевода строк и позиций табуляции

5. Теги формирования списков<ul> - начало неупорядоченного (маркированного) списка<ol type="1|A|a|I|i"> - начало упорядоченного (нумерованного) списка с атрибутом, задающим вид номера (по умолчанию нумерация - арабскими цифрами, прописная буква “i” соответствует нумерации римскими цифрами)<lh>Заголовок списка – начало заголовка списка

<li> Элемент списка - пометка начала элемента списка упорядоченного или неупорядоченного<dl> - начало списка определений<dt>Термин - начало определяемого термина<dd>Определение терминаПример: <ol type="I"> <lh><b>Состав группы:</b></lh> <li>Иванов</li>

<li>Петров</li> <li>Сидоров</li>

</ol> соответствует списку:

Состав группы:I. ИвановII.ПетровIII.Сидоров

6. Теги формирования таблиц<table ...> - тег разметки таблицы в целомwidth="99%" - атрибут задания относительной ширины таблицы на экранеborder="9" - атрибут задания толщины внешней рамки в пикселяхcellspacing="9" – атрибут, определяющий расстояние между рамками ячеек (в пикселях)cellpadding="9" – атрибут, определяющий расстояние между областью содержания и внутренними рамками ячеек (в пикселях)<caption> - вложенный тег выделения наименования таблицы (по умолчанию с центровкой)<tr> - вложенный тег начала строки таблицы<th> - вложенный тег начала ячейки с наименованием столбца/строки таблицы с полужирным начертанием и центровкой<td> - вложенный тег начала содержимого отдельной ячейки (по умолчанию с левым выравниванием)rowspan="9" - атрибут объединения заданного числа ячеек в столбце (для тегов td и th)colspan="9" - то же в строкеalign="left | center | right" - атрибут способа выравнивания в ячейке таблицы по горизонтали

Пример:<table width="33%" border="5"> <caption> <b>Туристские маршруты</b> </caption> <tr> <th>Маршрут<th>Стоимость <tr> <td>Париж <td align="right">$450 <tr> <td>Будапешт <td align="right">$390</table>соответствует таблице:

Туристские маршрутыМаршрут Стоимость

Париж $450 Будапешт $390

7. Тег вставки рисунка<img src="url | относительный_адрес_графического_файла" … /> - одиночный тег вставки рисунка с обязательным атрибутом src со значением-адресом файла рисунка в сети или относительным адресом на диске данного сервераwidth="99% | 99" – атрибут относительного или абсолютного (в пикселях) размера изображения по ширине экрана height="99% | 99" - то же по высотеalt="Текст" – атрибут текста комментария, появляющегося в рамке рисунка при блокировке приема графических файлов (для ускорения приема документа) или в виде всплывающей подсказки (в последних версиях браузеров)hspace="99" – расстояние по горизонтали между изображением и содержимым страницы (в пикселях)vspace="99" – то же по вертикалиПример: <img src="photodeda.jpg" width="200" height="100" alt="Фото дедушки" />

8. Теги описания многостраничной структуры на экране<frameset cols="11%,22%,* "| rows="33%,44%,* " > - тег начала описания многофреймовой (многостраничной) структуры с одним из обязательных атрибутов: cols - для разделения экрана на указанные в значениях атрибута области по вертикалиrows - то же по горизонтали (данный тег заменяет тег body)

<frame src="имя_файла_HTML-страницы" /> - обязательный одиночный тег с также обязательным атрибутом src, который определяет документ, загружаемый в очередную область экранаПример: <frameset cols="33%, * " > <frame src="page1.htm" /> <frame src="page2.htm" /> </frameset>разделение экрана на две области по вертикали шириной соответственно 33% и 67%

9. Тег гиперссылки и якоря<a href="url | #метка-якорь">Щелкните здесь</a> - тег описания гиперссылки с обязательным атрибутом href определения перехода по указанному в значении атрибута Web-ресурсу (внутреннему или внешнему) или к метке-якорю в текущем документе<a name="метка-якорь">Здравствуйте!</a> - пометка "принимающего" якоря, указывающего место в текущем документе, к которому необходимо перейтиПримеры: <a href="page2.htm">К странице 2</a> - гиперссылка для перехода к началу страницы 2 – файлу в текущей папке<a href="http://www.yandex.ru">Поиск на Яндексе</a> - гиперссылка для перехода к внешнему ресурсу - поисковику Яндекс<a href="#m1"> Щелкните здесь для перехода к Оглавлению</a> ...<a name="m1">Оглавление </a> - организация перехода по гиперссылке "Щелкните..." к якорю с именем m1target="_blank" – атрибут, обеспечивающий открытие ресурса в новом окне браузера

Использование адреса E-mail в качестве гиперссылки<a href="mailto: почтовый_адрес">Текст приглашения</a>Дополнения к значению атрибута href:?subject - тема письма&body - текстовое содержание письма&cc - список адресов для отправки копий письма&bcc - список адресов для отправки скрытых копий письмаПример:<a href="mailto: [email protected] ?subject=Отзыв посетителя сайта &body=Я хочу сообщить вам следующее: …" >Пишите нам</a>

10. Тег бегущей строки<marquee> - тег начала бегущей строки с атрибутами задающими:behavior="scroll | slide | alternate" - эффект пробега, вползания или вползания с прыжками взад-вперед

direction="left | right" - направление перемещения текстаheight="99" - высоту в пикселях или в процентах от высоты экрана для области бегущей строкиwidth - то же для ее ширины hspace – ширину в пикселях левого и правого полей между областью строки и окружениемvspace – то же сверху и снизуbgcolor="цвет" - цвет области бегущей строки (теги цвета текста должны охватывать данный тег)scrollamount="99" – скорость перемещения текста (минимальнаяскорость - 1)Пример:<marquee behavior="scroll" direction="right" height="20" bgcolor="red">Бегущий текст</marquee>

11. Теги форм<form action="url_обработчика" method="post | get"> - тег начала формы с указанием адреса программы-обработчика формы и выбором метода передачи данных из формы;<input type="значение" ... /> - вложенный в форму одиночный тег для ввода пользователем различного рода данных. Значения атрибута type определяют: • text - поле для однострочного текста;Пример:<input type="text" size="20" name="user" value="Подсказка" />• password - поле для скрытого ввода пароля с ограничением его

максимальной длины;Пример:<input type="password" name="pw" maxlength="10" />• radio - кнопку переключателя (кнопку зависимой фиксации), с

обязательным указанием одного и того же имени применительно к нескольким кнопкам;

Пример:<input type="radio" name="qu" value="yes" checked />Да<br /><input type="radio" name ="qu" value="no" />Нет• checkbox - флажок (кнопку независимой фиксации);Пример: <input type= "checkbox" name="n1" value="f1" />Люблю мясо<br /><input type= "checkbox" name="n2" value="f2" />Люблю фрукты• submit - кнопку запуска процесса передачи информации из формы на сервер;Пример: <input type="submit" value="OK" />• reset - кнопку очистки формы (приведения в исходное состояние);Пример: <input type="reset" value="Очистка формы" /><select name="имя"> - начало раскрывающегося списка-выбора;

Пример: <select name="vybor"> <option value="opt1" selected>До 50 лет <option value="opt2">50 лет и старше </select><textarea name="имя" rows="9" cols="99">Текст по умолчанию</textarea>Пример: <textarea name="tex" rows="5" cols="55"> Вводите здесь </textarea>

12. Теги внедрения мультимедийных объектов<bgsound /> – одиночный тег вставки звукового объектаsrc – обязательный атрибут для указания url мультимедийного объектаloop – атрибут, определяющий, сколько раз будет проигрываться звуковой файл (значение атрибута infinite задает режим бесконечного проигрывания файла)Пример:<bgsound src="music.mid" loop="infinite" /><embed> – одиночный тег внедрения звукового или мультимедийного объектаsrc – обязательный атрибут для указания url мультимедийного объектаavtostart – булевый атрибут, определяющий условие автозапуска звукового файла при открытии web-страницыПример:

<embed src="clip.avi" width="200" height="200" avtostart="false">Примечание: Простой способ вставки мультимедийного объекта – использование тега гиперссылки a. Пример:

<a href="music.wav">Щелкните здесь, чтобы прослушать музыку </a>

<object> – перспективный парный тег внедрения произвольного объекта, рекомендуемый консорциумом W3C вместо тегов bgsound и embed.

13. Теги определения типа документа, использованного языка разметки, его версии и национального языка

<!DOCTYPE...> - тег первой строки HTML-документа с объявлением версии языка разметки (в XHTML – единственный тег, набираемый прописными символами)

Современные версии языков гипертекстовой разметки web-страниц поддерживают следующие типы документов:

• Strict – «строгий» тип документа, ориентированный на использование браузеров последних версий, поддерживающих технологию CSS и язык разметки XHTML;

• Frameset – тип документа на основе фреймов;• Transitional – «переходный», т.е. нестрогий тип документа для не самых

последних версий браузеров (рекомендуемый для использования в настоящее время).

Пример начала web-страницы типа Transitional:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml : lang="ru" >…В последней строке примера значение атрибута lang определяет язык, на котором излагается основное содержание документа. Указание национального языка требуется для однозначного распознавания языка браузером и для повышения эффективности взаимодействия с поисковыми системами. При необходимости вставки в русскоязычный текст фрагмента на английском языке используется прием:

<p lang="en-US">English text</p>

14. МетатегиМетатеги содержат в себе справочную и управляющую информацию о

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

<meta http-equiv="content-type"content="text/html charset=кодировка">,

где кодировка: Windows-1251, KOI8-R, utf-8, iso-8859-1.Данный метатег предназначен для указания браузеру посетителя сайта вида русскоязычной кодировки, в которой исполнено содержание сайта. При отсутствии этого тега в окне браузера может наблюдаться нечитаемая последовательность букв русского алфавита и прочих знаков.

<meta name="keywords"content=”Ключевые слова для роботов поисковых систем”>,

где ключевые слова должны разделяться запятыми или пробелами, а общее число символов не должно превышать 800. Не допускается повторение ключевых слов.

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

<meta name="description"content="Краткое описание сайта">,

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

(в данном примере предполагается, что файл таблицы стилей находится в той же папке, что и web-страница)

Синтаксис основного варианта описания стиля в файле таблицы стилей следующий:

тег{свойство_1: значение_1; свойство_2: значение_2; …}Пример: p{font-family: verdana, helvetica; font-size: 16pt; font-weight: bolder}

Данный пример предполагает, что все абзацы, охваченные тегом <p>, во всех web-страницах будут оформлены шрифтом Verdana (а при его отсутствии – шрифтом Helvetica), размером 16 пунктов и жирным начертанием.

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

Способ внедрения таблицы стилей в саму web-страницу (embedded) требует включения описания стилей в тег <style>, который вкладывается в тег страницы <head>:

<head>…<style type="text/css"> Описание стилей</style>

</head>Таким способом можно воспользоваться для определения стилей сразу

нескольких элементов, но в пределах лишь одной страницы.Встраивание стилей непосредственно в теги страницы (inline)

производится таким образом:<tag style="…">

Пример: <h1 style="font-family:verdana; text-align:left"> Этот метод нежелателен, так как он приводит к потере одного из

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

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

ТаблицаНаименования и значения свойств стилей

Наименование свойства

Примеры значений свойств Пояснения

font-family arial, helvetica, sans-serif, verdana, …

наименование шрифта

font-size 99pt, 99px, 99mm, 99cm размер шрифта в пунктах, пикселях, миллиметрах, сантиметрах

font-weight bold, bolder начертание шрифта: полужирное, жирное

font-style italic начертание шрифта - курсив

text-decoration underline, blink, none подчеркивание текста снизу, с мерцанием или без подчеркивания (для гиперссылки)…

text-indent 99pt, … отступ первой строки текста

text-align left, right, center, justify выравнивание текста слева, справа, по центру, по ширине

height 99, 99% высота элементаwidth 99, 99% ширина элементаborder-style solid, double, groove, ridge,

insert, outsetстиль линии рамки: сплошная, двойная, вдавленная, выпуклая, содержимое вдавленное, содержимое выпуклое

border-width thin, medium, thick толщина линии рамки: тонкая, средняя, толстая

border-color color, #aabbcc цвет линии рамкиmarginmargin-topmargin-rightmargin-bottommargin-left

99, 99% отступ от границ страницы

padding 99, 99% отступ от границ ячейкиvertical-align top, middle, bottom расположение элемента по

вертикали: по верху, посередине, по низу

line-height 99% управляет интервалами между строками текста

list-style-type circle, disk, square, none задание типа маркера списка в виде: черного круга, полого круга, квадрата – или без маркера

color color, #aabbcc цвет объекта в виде слова или 16-ой константы

background-color

то же цвет фона для объекта

background-image

url("url") фоновая картинка с указанным адресом

background-attachment

scroll, fixed прокручивание содержимого страницы вместе с фоном или с закреплением фона

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

.класс{свойство_1: значение_1; свойство_2: значение_2; …}илитег.класс{свойство_1: значение_1; свойство_2: значение_2; …}Использование такого стиля в теле web-страницы должно иметь вид:<тег class="класс">

Примеры: .c1{font-size: 16pt; color: #0000ff; text-align: center}td.c2{vertical-align: top; background-image: url("images/fon.gif")}

Данным примерам соответствуют фрагменты тела web-страницы:<h2 class="c1"> … <p class="c1"> …<td class="c1"> …<td class="c2">Для изменения традиционного стиля гиперссылок (подчеркнутый текст

синего цвета) в таблице стилей используются следующие варианты обозначения тегов:

a:link – неактивизированная ссылка;a:visited – ранее активизированная ссылка;a:active – ссылка, активизированная в данный момент;a:hover – ссылка, на которой в данный момент находится указатель

мыши.При этом к гиперссылкам могут быть применены следующие свойства

из вышерасположенной таблицы свойств стилей: background-color, color, font-… и text-decoration.

ПРИЛОЖЕНИЕ 3Таблица

СПЕЦИАЛЬНЫЕ СИМВОЛЫ В HTMLСимвол Код

Торговая марка - ™ &regCopyright &copy< &lt> &gtНеразрывный пробел &nbsp


ОСНОВНЫЕ ОСОБЕННОСТИ ЯЗЫКА ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ XHTML

Язык разметки web-страниц XHTML (eXtensible HTML) – это последняя, более строгая и хорошо структурированная версия HTML, имеющая статус официальной рекомендации консорциума W3C (WWW Consortium – www.w3c.org). XHTML имеет такие особенности:1. Необходимо, чтобы все теги были набраны в нижнем регистре.

Единственным исключением является тег объявления типа документа DOCTYPE.

2. Наличие закрывающих тегов обязательно.3. Должен строго соблюдаться принцип вложенности тегов: тег открытый

последним должен закрываться первым.4. Одиночные теги должны иметь вид <tag … />, например, <br />.5. Значения атрибутов должны обязательно заключаться в кавычки.6. Сделан однозначный выбор в пользу логического форматирования в

сочетании с таблицами стилей CSS.7. Недопустимы булевы атрибуты (без присвоения значений). Например,

вместо <option selected> следует использовать запись <option selected=”selected”>.

8. В XHTML версии 1.1 упразднены типы документов Transitional и Frameset, а теги <img> и <embed> заменены на <object>.

9. Символы комментария < ! - - … - -> применять не рекомендуется, т.к. их содержание может быть неправильно истолковано браузерами последних поколений. В такие комментарии принято включать, в частности, описание встроенных стилей (для совместимости со старыми версиями браузеров, которые не поддерживают технологию CSS).

10.Поддерживается технология каскадных таблиц стилей второго поколения CSS2, что позволяет создавать аппаратно-зависимые стили. С их помощью можно определять специфические стили представления страниц, которые будут автоматически применяться при их выводе на экран монитора ПК (тип screen), на печать (тип print), на экран

карманного компьютера (тип handheld), при интерпретации речевым синтезатором (тип aural) и т.д.

Для проверки web-страниц на соответствие новым стандартам гипертекстовой разметки следует воспользоваться валидатором W3C (validator.w3.org).

СОЗДАНИЕ web-СТРАНИЦ И...

Documents