- •Введение в язык html
- •1. Понятие о html
- •2. Понятие о гипертексте
- •3. Понятие о html-файле
- •4. Понятие о тегах языка html
- •5. Структурные теги
- •6. Создание шаблона html-документа и первой Web-страницы
- •Тема 2: Основная часть Web-страницы План
- •1. Использование заголовков
- •2. Символы разрыва абзаца и разрыва строк
- •4. Форматирование текста с помощью стилей
- •5. Добавление линий и комментариев
- •Тема 3: Создание таблиц План
- •1. Начальный этап создания кода таблиц
- •2. Создание строк и столбцов таблицы
- •3. Выбор типа таблицы
- •4. Выравнивание данных в ячейках таблицы по горизонтали и вертикали
- •5. Окрашивание таблиц и рамок
- •Тема 4: Создание списков План
- •1. Списки как инструмент структурирования. Типы списков
- •2. Нумерованные списки
- •3. Маркированные списки
- •4. Списки определений
- •5. Вложение и комбинирование списков
- •Тема 5: Использование фреймов План
- •1. Идея использований фреймов
- •2. Создание фреймов
- •3. Загрузка страниц в фреймы
- •4. Настройка фреймов
- •Тема 6: Гипертекстовые ссылки План
- •1. Типы гиперссылок
- •2. Понятие об url и их использование
- •3. Создание гиперссылок на другие Web-страницы
- •4. Создание внутренних ссылок в документе
- •5. Создание ссылок на ресурсы мультимедиа и на адреса электронной почты
- •6. Загрузка страниц в различные фреймы
- •Тема 7: Графика в Web План
- •2. Выравнивания текста относительно изображения
- •3. Плавающие изображения. Поля вокруг изображений
- •4. Определение ширины и высоты изображения
- •5. Обтекание изображений текстом
- •Тема 8: Использование графики, цвета и текста План
- •1. Добавление на Web-страницы цветных фоновых изображений
- •2. Добавление на Web-страницы графических фоновых изображений
- •3. Изменение цвета текста и гиперссылок
- •4. Добавление кнопок перемещения
- •Тема 9: Мультимедиа План
- •1. Понятие о гипермедиа-ссылках
- •2. Создание гипермедиа-ссылок
- •4. Создание бегущей строки
- •5. Воспроизведение видеофайлов в окне Internet Explorer
- •Тема 10: Средства создания html-файлов План
- •1. Стандартные html-редакторы
- •1. Стандартные html-редакторы
- •Определения
- •Проверочная работа
- •Проверочная работа
5. Воспроизведение видеофайлов в окне Internet Explorer
Internet Explorer имеет встроенные возможности воспроизведения видеофайлов в формате AVI, для чего используется специальное расширение дескриптора <IMG>. Приведенный ниже пример команды предусматривает воспроизведение видеофайла типа AVI:
<IMG DYNSRC="videofile.avi">.
Для атрибута DYNSRC предусмотрена возможность использования небольшого числа параметров, однако все они являются очень важными. Можно определить, когда должно начаться воспроизведение файла. Значение FILEOPEN указывает на необходимость начала воспроизведения файла, как только данные страницы будут полностью получены; значение MOUSEOVER предусматривает начало воспроизведения файла после того, как пользователь поместит указатель мыши на видеоизображение.
Другой важный параметр позволяет вывести на экран элементы управления. Они размещаются под окном воспроизведения и предоставляют пользователю возможность вмешиваться в процесс воспроизведения. По умолчанию элементы управления не выводятся, и, чтобы отобразить их на экране, следует указать атрибут CONTROLS как показано ниже:
<IMG DYNSRC="videofile.avi" CONTROLS>.
Ниже приведен листинг примера использования звукового сопровождения и видеофайла на HTML-странице:
<HTML>
<HEAD>
<TITLE>Пример использования мультимедиа</TITLE>
</HEAD>
<BODY>
<BGSOUND SRC="TOWN.MID" LOOP=1>
<FONT Size=6>
<MARQUEE SCROLLAMOUNT=10>Наведите указатель мыши на рисунок для просмотра видеоролика</MARQUEE>
<IMG DYNSRC="FishTank.avi">
</BODY>
</HTML>
Тема 10: Средства создания html-файлов План
1. Стандартные html-редакторы
2. Microsoft FrontPage
Для создания любого HTML-документа вполне достаточно простого текстового редактора, такого как Блокнот (Notepad). Однако большинство разработчиков считают, что предпочтительнее использовать специализированный HTML-редактор, обеспечивающий автоматический контроль ошибок и другие полезные функции.
1. Стандартные html-редакторы
Стандартные HTML-редакторы являются самостоятельными приложениями, предназначенными для подготовки HTML-документов, которые не требуют дополнительных программных средств. Существует два основных типа редакторов – текстовые и графические (типа WYSIWYG – What You See Is What You Get, или "Что видите, то и получаете"). При работе с текстовыми редакторами HTML-код выводится в виде обычного текста, а HTML-дескрипторы выделяются, например, другим цветом.
Графические редакторы позволяют создавать макет страницы с помощью мыши. При этом на экране вы сразу же будете видеть результат таким, каким увидят создаваемую страницу посетители сервера. Как и следовало ожидать, во многих HTML-редакторах используются оба типа интерфейса, между которыми можно легко переключаться.
Таблица – Аргументы "за" и "против" использования специализированных HTML-редакторов
|
Достоинства |
Недостатки |
|
Удобные интерфейс и рабочая область с панелями инструментов |
Отсутствие общего однотипного интерфейса требует от пользователя изучения каждой программы |
|
Отображение в режиме WYSIWYG и специализированные панели инструментов |
Интерфейс некоторых редакторов очень напоминает интерфейсы текстовых процессоров. К сожалению, не все средства форматирования HTML поддерживаются всеми программами, поэтому документы могут выглядеть по-разному в различных браузерах |
|
Условно-бесплатные и бесплатные программы предусматривают возможность обратной связи пользователей с их авторами |
Чтобы отобразить окончательный вид документа, его следует загрузить в браузер |
|
Невысокая цена |
Постоянное обновление и отсутствие поддержки прежних версий |
Поскольку графические редакторы могут полностью скрывать от пользователя собственно HTML-текст, может сложиться впечатление, что изучать язык HTML не нужно. Однако изучение языка остается очень важным моментом, особенно в том случае, если потребуется профессиональная разработка HTML-документов, написание вручную и отладка программ и сценариев.
Графические редакторы обеспечивают более эстетичный подход к созданию документов, позволяя сосредоточиться на их макетировании и форматировании.
Таблица – Достоинства и недостатки графических HTML-редакторов
|
Достоинства |
Недостатки |
|
Графическое представление позволяет лучше отобразить созданный макет страницы |
Используется большой объем дискового пространства для работы с дескрипторами и шрифтами, а также для их отображения |
|
Встроенный синтаксический контроль |
|
|
Для режима предварительного просмотра не нужен внешний браузер |
Интерпретация страницы внутренним браузером не всегда корректна |
Обычные текстовые редакторы
Одной из главных причин, по которым разработчики предпочитают использовать текстовые редакторы, состоит в том, что с их помощью гораздо проще вносить в документ любые изменения, которые приходится делать практически постоянно. Те, кто используют текстовые редакторы, также утверждают, что эти редакторы позволяют им несравненно проще манипулировать текстом документа и обеспечивают более гибкий и творческий подход при помещении в документ программного текста. Кроме того, текстовые редакторы позволяют очень просто вносить в документ коды динамического HTML.
Таблица – Достоинства и недостатки текстовых редакторов
|
Достоинства |
Недостатки |
|
Быстрое обновление экрана |
Начинающим пользователям часто требуется обращаться к дополнительным источникам со справочными материалами |
|
Специализированные редакторы обеспечивают ввод открывающих и закрывающих дескрипторов, предоставляя пользователю возможность просто заполнить их данными |
Большинству редакторов недостает средств синтаксического контроля |
|
Пользователь имеет возможность использовать собственные дескрипторы |
В поставку редакторов включен небольшой объем справочной информации по созданию HTML-кода |
2. Microsoft FrontPage
Самым популярным инструментом разработки Web-серверов и управления ими является приложение Microsoft FrontPage. С выходом последней версии возможности этого приложения существенно расширились. Оно предоставляет практически адекватную браузерам графическую среду разработки Web-страниц, а также обеспечивает интеграцию с приложениями пакета Microsoft Office на основе технологии Drag-and-Drop. В программе предусмотрено использование шаблонов типовых Web-страниц и графических инструментов, а также управление создаваемыми Web-серверами с помощью FrontPage Explorer.
Программа FrontPage будет особенно полезна тем Web-дизайнерам, которые заинтересованы в применении новейшей Web-технологии фирмы Microsoft, такой как VBScript и элементы управления ActiveX. Кроме того, предусмотрена поддержка Java, JavaScript. Главным преимуществом FrontPage являются его средства управления Web-серверами. Функции управления обеспечивают контроль над всеми аспектами создаваемых серверов, включая автоматическое обновление URL-связей между начальной страницей и ее дочерними страницами.
Кроме того, функция Themes в FrontPage позволяет изменять характеристики (или темы) всего сервера. Это особенно полезно, если требуется стандартизировать используемую тему или внешний вид страниц создаваемого сервера, однако нежелательно изменять или переформатировать каждую страницу в отдельности.
Приложение FrontPage состоит из нескольких взаимосвязанных компонентов, образующих единый инструмент создания Web-серверов и управления ими. Одним из самых мощных компонентов является редактор FrontPage Editor. Именно в этом редакторе создаются составляющие Web-сервер страницы. В FrontPage новым для редактора является наличие в его окне трех вкладок, обеспечивающих просмотр создаваемого HTML-текста в трех представлениях. Первое представление – это обычное графическое WYSISYG-отображение создаваемого документа. В этом случае имеется возможность вводить в него текст с клавиатуры, перетаскивать в документ графические объекты, определять обычные и вставлять графические гиперссылки, форматировать общий макет страницы и помещать на нее другие компоненты FrontPage. Компоненты FrontPage – это элементы, которые являются созданными в Microsoft небольшими сценариями предназначенными для выполнения специфических функций на Web-страницах.
Поскольку FrontPage является графическим WYSISYG-инструментом, его редактор также позволяет просматривать и изменять реальный вид создаваемых Web-страниц. Кроме того, можно увидеть все компоненты на странице в виде HTML-текста, причем допускается его редактирование вручную. Для этих целей служит вкладка HTML.
Вкладка Preview является третьей вкладкой окна редактора FrontPage. Именно на ней можно увидеть реальный вит созданной Web-страницы таким, каким он будет после пересылки через Internet.
Редактор FrontPage позволяет создавать таблицы, листы стилей, использовать анимацию, изменять фон, помещать на страницу элементы управления ActiveX, Java-аплеты и еще много другое с максимальными удобствами.
Другим мощным компонентом FrontPage является программа FrontPage Explorer, позволяющая визуально контролировать схему создаваемого Web-сервера. На основе предоставляемой визуальной информации можно четко определять, что и как происходит на сервере, т.е. разработчик может управлять всеми гиперссылками, связанными с начальной страницей сервера.
Работая в окне FrontPage Explorer в режиме Navigation или Hyperlinks, можно легко перемещать и изменять взаимосвязи страниц Web-сервера.