Лекції по HTML

Оглавление
1.doc (3 стр.)
Скачать
1   2   3
Тема 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-сервера.

Определения

HTML расшифровывается как HyperText Markup Language, или язык гипертекстовой разметки.

Гипертекст (hypertext) – это особый текст, в котором есть ссылка на другую Web-страницу или документ.

Web-сайт – набор связанных одной темой Web-страниц.

Дескриптор – это основной элемент кодирования, принятый в стандарте HTML.

Контейнер – это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) дескрипторов.

Элемент HTML-документа – начальный и конечный дескрипторы контейнера вместе с заключенным между ними содержимым.

^ URL (Uniform Resource Locator), или унифицированный локатор ресурсов – это адрес Web-страницы,

Изображение-ссылка – это изображение на Web-странице, щелкнув на котором, можно открыть новую Web-страницу или службу Internet.
Таблица – Названия и числовые эквиваленты цветов

^ Название цвета

RGB-значение

Название цвета

RGB-значение

AQUA (Цвет морской волны)

#00FFFF

NAVY (Темно-синий)

#000080

BLACK (Черный)

#000000

OLIVE (Оливковый)

#808000

BLUE (Голубой)

#0000FF

PURPLE (Фиолетовый)

#800080

FUCHSIA (Фуксин)

#FF00FF

RED (Красный)

#FF0000

GRAY (Серый)

#808080

SILVER (Серебряный)

#C0C0C0

GREEN (Зеленый)

#008000

TEAL (Серо-зеленый)

#008080

LIME (Ярко-зеленый)

#00FF00

YELLOW (Желтый)

#FFFF00

MAROON (Темно-бордовый)

#800000

WHITE (Белый)

#FFFFFF



1 вариант

2 вариант

^ Задание №1 – 2 бала

Задание №1 – 2 бала

Дайте определение Web-сайта?

Дайте определение Web-страницы

^ Задание №2 – 2 бала

Задание №2 – 2 бала

Какой дескриптор используется для создания горизонтальной линии?

Какой дескриптор используется для создания заголовков? Сколько существует уровней заголовка?

^ Задание №3 – 2 бала

Задание №3 – 2 бала

Для чего используется атрибут BORDER в дескрипторе ?

Для чего используется атрибут ALIGN в дескрипторе ?

^ Задание №4 – 2 бала

Задание №4 – 2 бала

Какой дескриптор используется для создания строки таблицы?

Какой дескриптор используется для заголовков таблицы?

^ Задание №5 – 4 бала

Задание №5 – 4 бала

Приведите HTML-код таблицы: 1-й столбец: август, сентябрь, октябрь, 2-й столбец: 31, 30, 31

Приведите HTML-код таблицы: 1-й столбец: пн-пт, сб, вс, 2-й столбец: 8-19, 8-17, выходной




1 вариант

2 вариант

^ Задание №1 – 2 бала

Задание №1 – 2 бала

Дайте определение Web-сайта?

Дайте определение Web-страницы

^ Задание №2 – 2 бала

Задание №2 – 2 бала

Какой дескриптор используется для создания горизонтальной линии?

Какой дескриптор используется для создания заголовков? Сколько существует уровней заголовка?

^ Задание №3 – 2 бала

Задание №3 – 2 бала

Для чего используется атрибут BORDER в дескрипторе ?

Для чего используется атрибут ALIGN в дескрипторе ?

^ Задание №4 – 2 бала

Задание №4 – 2 бала

Какой дескриптор используется для создания строки таблицы?

Какой дескриптор используется для заголовков таблицы?

^ Задание №5 – 4 бала

Задание №5 – 4 бала

Приведите HTML-код таблицы: 1-й столбец: август, сентябрь, октябрь, 2-й столбец: 31, 30, 31

Приведите HTML-код таблицы: 1-й столбец: пн-пт, сб, вс, 2-й столбец: 8-19, 8-17, выходной




1 вариант

2 вариант

^ Задание №1 – 2 бала

Задание №1 – 2 бала

Дайте определение Web-сайта?

Дайте определение Web-страницы

^ Задание №2 – 2 бала

Задание №2 – 2 бала

Какой дескриптор используется для создания горизонтальной линии?

Какой дескриптор используется для создания заголовков? Сколько существует уровней заголовка?

^ Задание №3 – 2 бала

Задание №3 – 2 бала

Для чего используется атрибут BORDER в дескрипторе ?

Для чего используется атрибут ALIGN в дескрипторе ?

^ Задание №4 – 2 бала

Задание №4 – 2 бала

Какой дескриптор используется для создания строки таблицы?

Какой дескриптор используется для заголовков таблицы?

^ Задание №5 – 4 бала

Задание №5 – 4 бала

Приведите HTML-код таблицы: 1-й столбец: август, сентябрь, октябрь, 2-й столбец: 31, 30, 31

Приведите HTML-код таблицы: 1-й столбец: пн-пт, сб, вс, 2-й столбец: 8-19, 8-17, выходной


^ Тематическая контрольная работа

1 вариант

2 вариант

^ Задание №1 – 2 бала

Как расшифровывается HTML?

Дайте определение гипертекста

Задание №2 – 2 бала

Между какими дескрипторами помещается основная часть Web-страницы?

Какими дескрипторами начинается и заканчивается Web-страница?

^ Задание №3 – 2 бала

Дескриптор

предназначен для…


Дескриптор
предназначен для…

^ Задание №4 – 2 бала

Атрибут BGCOLOR используется для…

Атрибут ALIGN используется для…

^ Задание №5 – 4 бала

Приведите HTML-код для создания таблицы, состоящей из 2-х строк и 2-х столбцов. В первом столбце содержится фамилия, во втором- имя.

Приведите HTML-код для создания таблицы, состоящей из 2-х строк и 2-х столбцов. В первом столбце содержится название месяца, во втором- количество дней.




1 вариант

2 вариант

^ Задание №1 – 2 бала

Как расшифровывается HTML?

Дайте определение гипертекста

Задание №2 – 2 бала

Между какими дескрипторами помещается основная часть Web-страницы?

Какими дескрипторами начинается и заканчивается Web-страница?

^ Задание №3 – 2 бала

Дескриптор

предназначен для…


Дескриптор
предназначен для…

^ Задание №4 – 2 бала

Атрибут BGCOLOR используется для…

Атрибут ALIGN используется для…

^ Задание №5 – 4 бала

Приведите HTML-код для создания таблицы, состоящей из 2-х строк и 2-х столбцов. В первом столбце содержится фамилия, во втором- имя.

Приведите HTML-код для создания таблицы, состоящей из 2-х строк и 2-х столбцов. В первом столбце содержится название месяца, во втором- количество дней.





© lib.rushkolnik.ru
При копировании укажите ссылку.
обратиться к администрации