Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...

Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...

Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...

Интересное:

Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...

Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...

Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Цель и место размещения документа Web

2020-04-01

223

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 3Следующая ⇒

Реферат

СОЗДАНИЕ WEB-ДОКУМЕНТА

Содержание

1. Подготовка к созданию Web-документа

1.1 Цель и место размещения документа Web

2. Язык гипертекстовой разметки

2.1 Структура текста Web-документа

2.2 Гипертекстовые ссылки

2.3 Редакторы Web-документов

3. Создание документов в стандарте HTML

3.1 Заголовки

3.2 Форматирование, изменение стилей

3.3 Списки

Подготовка к созданию Web-документа

Цель и место размещения документа Web

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

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

В результате работа многих пользователей стала иметь большее отношение к Сети, чем они того сами, может быть желали. Так, одним из способов самовыражения стало размещение личных страничек в Internet. Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций. Подтверждение этому легко найти, выйдя на просторы киберпространства.

Язык гипертекстовой разметки.

Сценарий и структура Web-документа

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

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

Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде всего, это <HTML></html>

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

Также основным тегом является <HEAD></head>

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

<BODY></body>

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

Без этих тегов невозможно создать ни одну Web-cтраницу. Более подробно эти и другие теги мы рассмотрим в параграфе 2.1.

Гипертекстовые ссылки

Одним из самых важных элементов языка, обеспечивающим создание гиперссылок, является:

<A></a>

Чаще всего используется такой шаблон:

Произвольный текст <A href=’’Адрес ссылки’’>текст для щелчка</a >

Или такой:

<A href=’’Адрес ссылки’’> <IMG src=’’Ссылка на рисунок’’></a>

Первый шаблон применяется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Internet, файл на локальном диске или метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. Именно на нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на рисунок, который находиться на локальном диске, она обязательно должна начинаться со слова “file”, то есть содержать указание на схему доступа:

file: //Диск: \Путь к файлу или

file: ///Диск: /Путь к файлу

Подобно многим другим элементам языка, элемент А требует использование атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:

href=’’URL’’

или

href=’’Протокол: //Адрес ссылки’’

Например:

href=’’http: //www. netscape. com’’

Кодовое слово, стоящее вначале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из “разновидностей” Internet. В этом смысле можно сказать, что Internet - это как бы несколько сетей в одной. У каждой из них существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Их можно использовать для связи голосом, передачи факсов, межкомпьютерной связи и т.д.

WWW, как самая современная система, должна обеспечивать совместимость с более ранними, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например, ftp). Существуют следующие схемы доступа: file - доступ к файлу на локальном диске; ftp - доступ к архивам файлов при помощи протокола передачи файлов (file transfer protocol); gopher - доступ к системе Gopher; http - доступ к WWW; mailto - отправка сообщений по электронной почте; news - доступ к новостям USENET; nntp - доступ к новостям USENET с использованием протокола NNTP; telnet - подключение по протоколу telnet; wais - подключение к системе WAIS.

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

<A href=’’mailto: alexs@pccenter. ru’’></a>

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

<A name=’’Метка’’></a>

Редакторы Web-документов

Как только мировой компьютерной общественности стало ясно, что система Gopher не является последним этапом развития Internet и отныне придется работать с гипертекстом, многие фирмы начали разработку специализированных редакторов, позволяющих создавать HTML-документы. Эти программы сразу же завоевали популярность, несмотря на то, что гипертекстовую структуру можно получить и в самом обычном редакторе, работающем с текстом в MS-DOS.

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

В этом параграфе мы рассмотрим основные редакторы Web-документов.

HoTMetaL PRO 3.0.

Редактор гипертекстаHoTMetaL был одним из первых программных продуктов подобного рода. Основная цель редактора заключалась в том, чтобы красиво прорисовывать на экране изображение тегов. Здесь сказались преимущества графического интерфейса Windows перед интерфейсом командной строки MS-DOS. В среде Windows гипертекст в своем естественном виде лучше читается и редактируется. Одновременно фирмы-разработчики развивали в своих программах возможность анализа синтаксиса HTML, что помогало пользователю избежать некоторых ошибок, таких, например, как неправильное вложение документов.

В 1997 году фирма SoftQuard разработала редакторHoTMetaL PRO версии 3.0. в рабочей области создана заготовка Web-страницы. Теги отмечены особым образом и хорошо заметны. На панелях редактора размещено большое количество кнопок. Следовательно, разработчики продукта предполагают, что пользователь должен активно их использовать во время создания страниц. Останавливаться на подробном обзоре кнопок мы не будем, так как они не представляют особой сложности для изучения.

Кратко рассмотрим создание гипертекстового документа путем сравнения.

Возьмем, к примеру, популярный редактор Word. Все, кто с ним работал, прекрасно знают о форматировании текста при помощи стилей. Если вы захотите понять, что представляет собой тот или иной стиль, вам надо будет раскрыть окно с описанием стиля. Параметров много: и тех, которые вы используете, и тех, которые вам безразличны. В самом документе подобная информация скрыта от пользователя. Все, кто работал с этим редактором знают о его “своеволии”: часто программа сама, не спрашивая разрешения, проводит ряд операций по форматированию текста, и пользователь не всегда может отследить эти “правки” и понять причины их возникновения.

Гипертекстовый документ создается совершенно по иному принципу. Здесь тоже можно использовать понятие стиля: это совместное использование элементов форматирования FONT, B, I, BQ и им подобным. Существенное же отличие от обычного Word-документа состоит как раз в том, что пользователь может увидеть все параметры оформления и область их действия прямо в HTML-документе. Изменить их может только он сам, путем редактирования текста документа. Дает ли это какое-нибудь преимущество? Думаю, что в некоторых случаях работать с файлом в формате гипертекста намного удобнее и легче, чем с таким же файлом в формате традиционного редактора для Windows.

Отдельно следует упомянуть использование кириллицы в HoTMetaL. Если пользователь выбирает для ввода не английский язык, то редактор автоматически преобразует введенные буквы в спецсимволы. Разумеется, разработчики редактора не предусматривали возможность использования кириллицы. Просто русские буквы занимают в кодовой таблице место “экзотических” букв из разных языков. В языке может использоваться латинский алфавит и некоторые его “расширения”. При вводе русского текста символы прорисовываются обычным образом, но исходный код записывается по особому: буква А обозначается как À буква Б - как Á и т.д. Для броузеров с установленными русскими шрифтами это не имеет значения: кириллица в любом случае будет воспроизведена верно. Если вы используете HoTMetaLв работе, но создаете документы с кириллицей, набирайте русский текст в другой программе, например, в режиме просмотра источника в броузере.

HotDog Professional 3

Редактор гипертекстаHotDogсоздан фирмой Sausage Software. От других его выгодно отличает обилие инструментов, подпрограмм и сервисных возможностей. Такой инструмент можно рекомендовать тем пользователям, которые много и серьезно работают со своими Web-страницами. Версия 3 редактора разработана в 1996 году и предназначена для работы в среде Windows 95.

Окно редактора разделены на две области. Слева расположена панель так называемого “менеджера ресурсов” (resource manager). Он выполняет в редакторе те же функции, что и Проводник в Windows 95, то есть организует наглядный доступ к папкам и файлам. Вкладка Pages позволяет увидеть документы, открытые в редакторе. Вкладка Files обеспечивает просмотр папок на дискете. Пользователь может применять технологию Drag and Drop, то есть перетаскивать файлы при помощи мыши. Вкладка Faves служит для просмотра избранных источников информации. Вкладка WWW обеспечивает просмотр сайтов и наглядное представление их структуры. Если менеджер ресурсов занимает слишком много места на экране, его можно отключить при помощи меню View.

В правой части окна редактора размещаются окна с HTML-документами. Каждое из них содержит несколько вкладок. Вкладка HTML позволяет вывести документ в режиме исходного кода. Вкладка Rover обеспечивает просмотр документа при помощи встроенного броузера.

Основное окно редактора содержит несколько вкладок. Каждая из них позволяет выполнять определенный тип операций редактирования. Смена вкладки означает только смену набора инструментов; окно документа при этом остается неизменным. Многие кнопки присутствуют на нескольких вкладках.

Кнопки форматирования напоминают используемые в текстовых редакторах. И те, и другие имеют похожие значки и выполняют одни и те же по смыслу операции. Но в данном случае механизм форматирования другой. Он заключается в создании соответствующего элемента HTML и помещении выделенного фрагмента страницы внутри этого элемента. Форматировать можно не только текст, но и рисунки, гиперссылки и другие конструкции гипертекста.

Netscape Editor

Netscape Editor создан как составная часть броузера Netscape Navigator Gold 3.0. Поэтому в программе в меню File существуют две команды: Open File in Browser (открыть файл в броузере) и Open File in Editor (открыть файл в редакторе). Пользователю не нужно задумываться в каком режиме открыт документ. Оба они легко переключаются при помощи кнопок, выведенных на панель инструментов.

В NetscapeEditor гипертекстовый документ представлен в том же формате, что и в броузере. То есть код HTML не виден полностью. Во время редактирования документа пользователь должен выделять фрагменты или выбирать отдельные объекты для того, чтобы к ним можно было применить операции форматирования. Форматирование в большинстве случаев заключается в создании новых элементов или изменении атрибутов уже существующих. Щелкнув правой кнопкой на объекте и выбрав из контекстного меню Properties, можно перейти к окну свойств элемента (объекта) и изменить их, заполняя соответствующие поля. Недостатком редактора является автоматическое (во время сохранения) преобразование кириллицы в спецсимволы. Редактор весьма терпимо относится к параллельному редактированию открытого документа. Если в последний внесены изменения с помощью другого приложения, то Netscape Editor фиксирует этот факт и предлагает загрузить файл заново, чтобы увидеть текущие изменения.

Microsoft Word 97

Последовательность фирмы Microsoft во внедрении средств работы с Internet в офисные приложения создает удобства, в первую очередь, для российских пользователей. В отличии от англоязычных гипертекстовых редакторов, русифицированные программы не преобразуют кириллицу в спецсимволы. Приложения MS Office 97 могут использоваться для генерации Web-страниц. Источниками информации служат файлы в формате этих программ. Естественно, что на вид страниц влияет специализация каждого приложения. MS Word 97, являясь текстовым редактором, обеспечивает создание гипертекстовых документов традиционного формата и общего назначения.

Основным инструментом для создания HTML-документов в Word 97 является мастер Web-страниц. Он запускается во время создания нового файла. Пользователю предлагается выбрать тему Web-страницы. На втором шаге предлагается выбрать стиль оформления страницы. На этом работа мастера заканчивается, и пользователю предоставляется возможность заполнить документ полезной информацией.

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

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

Полученный документ сохраняется обычным образом, и ему присваивается расширение html. Иногда в созданном таким способом документе возникает проблема со шрифтом. В этом случае можно перевести документ в режим просмотра кода командой Вид->Источник HTML. Необходимо убедиться, что внутри элемента META присутствует опция, задающая “нашу” кодовую страницу:

charset=windows-1251

Если указана другая кодовая страница, то надо исправить этот фрагмент и сохранить файл. Просматривая код HTML, можно убедиться, как влияет на документ способ его создания.

На упомянутой выше вкладке Webpages имеется шаблон “Новая Web-страница”, которому соответствует файл HTML. DOT. Он позволяет создать пустой файл, и пользователь должен заполнить его информацией от начала до конца.

В Word 97 не предусмотрены специальные инструмент для форматирования Web-страниц, но можно использовать те, что предназначены для обычного редактирования. Многие кнопки позволяют создавать адекватные эффекты в гипертексте. Это, в первую очередь, инструменты, позволяющие форматировать текст: выделение полужирным и курсивом, изменение размера и цвета букв, создание эффекта подчеркивания и т.п. Удается создавать и абзацные отступы таким же способом, как это делается в Netscape Editor. Только в данном случае используется элемент DIR.

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

Заголовки

В примере для заголовка используются теги <H1></h1>.

Существует шесть уровней заголовков, которые обозначаются Н1... Н6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Представление об относительных размерах заголовков в них дает рис. 3.1. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:

align=’’left’’ align=’’center’’ align=’’right’’

Заголовок 1

Заголовок 2

Списки

Списки (list) были добавлены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста, прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу берет на себя программа. Если список добавляется новыми пунктами или укорачивается, нумерации корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружочки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, “фирменный вид”. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют использовать атрибуты), а другие задают его внутреннюю структуру. Существует несколько разновидностей списков.

<UL><LI></ul>

Самый простой ненумерованный список (unordered list). Его шаблон представлен ниже:

<UL> <LI> Пункт 1 списка <LI> Пункт 2 списка <LI> Пункт 3 списка </ul><UL>

Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 3.3.

Пункт 1 списка

Пункт 2 списка

Пункт 3 списка

Рис. 3.3. Ненумерованный список.

<OL><LI></ol> Структура нумерованного списка похожа на предыдущую:

<OL type=’’I’’> <LI> Пункт 1 <LI> Пункт 2 <LI> Пункт 3 <LI> Пункт 4 </ol>

Нумерованный список использует другой внешний тег: OL. В этом случае каждый пункт нумеруется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита. На рис. 3.4. показан пример списка, соответствующего приведенному выше листингу.

Пункт

Определение пункта

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

Пункт

Определение пункта

Пункт

Определение пункта

Рис. 3.5. Список с определениями

Другой способ создания сложных списков - использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список. В том случае, когда структура списка ясна, удобно воспользоваться шаблоном. В нем должны быть указаны все пункты на всех уровнях. Доработка такого шаблона сводиться к вписыванию конкретных строк текста в соответствующие пункты. Ниже дан пример такого шаблона:

<UL> <LI> Пункт 1 <OL> <LI> Пункт 1.1

<LI> Пункт 1.2

</ol> <LI> Пункт 2 <OL> <LI> Пункт 2.1

<LI> Пункт 2.2

</ol> <LI> Пункт 3 <OL> <LI> Пункт 3.1

<LI> Пункт 3.2

</ol> </ul>

В нем нумерованные списки размещены внутри пунктов ненумерованного списка. Рис 3.6. дает представление о том, как выглядит такая конструкция.

- Пункт 1

Пункт 1.1

Пункт 1.2

- Пункт 2

Пункт 2.1

Пункт 2.2

- Пункт 3

Пункт 3.1

Пункт 3.2

Рис. 3.6.

Реферат

СОЗДАНИЕ WEB-ДОКУМЕНТА

Содержание

1. Подготовка к созданию Web-документа

1.1 Цель и место размещения документа Web

2. Язык гипертекстовой разметки

2.1 Структура текста Web-документа

2.2 Гипертекстовые ссылки

2.3 Редакторы Web-документов

3. Создание документов в стандарте HTML

3.1 Заголовки

3.2 Форматирование, изменение стилей

3.3 Списки

Подготовка к созданию Web-документа

Цель и место размещения документа Web

12 3 Следующая ⇒

Поделиться с друзьями:

Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...

Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...

Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...