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


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

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



Автономные WEB – документы используют язык HTML (язык разметки гипертекста). Гипертекст - расширенный текст, включающий дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.

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

Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <...>. Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления. При использовании парного тега в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа «/» перед ключевым словом. 

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

Существует два способа формирования документа HTML. Первый способ состоит в разметке существующего (или создаваемого) документа в ручную. Эту работу можно выполнять в текстовом редакторе или редакторе HTML. Второй способ основан на изучении работы текстового процессора. Информацию о форматировании документа рассматривают как «разметку», добавляемую в форматируемый документ. Для использования текстового процессора в таких случаях не требуется никаких знаний о формате документа и «языке разметки», изменения вносятся в документ автоматически. Простым редактором для языка HTML является Microsoft FrontPage.

 

1.1. Применение языка HTML

1.1.1.    Создание простейшей WEB – страницы

Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега      < HTML > и заканчиваться соответствующим закрывающимся тегом     </ HTML >. Внутри документа выделяются два основных раздела: раздел заголовкови тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами < HEAD > и         </ HEAD >. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом < TITLE >.

Основное содержание размещается в теле документа, которое ограничивается парным тегом < BODY >.

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

1. Запустите текстовый редактор Блокнот.

2. Введите следующий документ:

 

<HTML>

    <HEAD>

     <TITLE>Заголовок документа</TITLE>

   </HEAD>

    < BODY >

    Содержание

    документа

    </ BODY >

</ HTML >

 

3. Сохраните этот документ под именем Док_1. htm.

Примечание: перед сохранением убедитесь, что сброшен флажок Не показывать расширение для зарегистрированных типов файлов (Пуск – Настройка – Свойства папки – Вид).

4. Запустите программу Internet Explorer.

5. Откройте файл Док_1. htm. Просмотрите, как отображается простейший документ HTML.

 

1.1.2. Изучение приемов создания списков

1. Активизируйте программу Блокнот.

2. Удалите в файле Док_1. htm весь текст, находящийся между тегами < BODY > и </ BODY >.

3. После тега < BODY > вставьте в документ тег <OL TYPE=»1»>, который начинает упорядоченный список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом < LI >.

· Элемент 1

· Элемент 2

· Элемент 3

5. Завершите список при помощи тега </ OL >.

6. Сохраните полученный документ под именем Док_2. htm.

7. Просмотрите файл Док_2. htm в Internet Explorer

8. Вернитесь в программу Блокнот и измените значение атрибута: TYPE=»1» на  TYPE=»А».

9. Сохраните полученный документ под именем Док_2. htm.

10. В окне программы Internet Explorer нажмите кнопку Обновить.

11. Просмотрите файл Док_2. htm. Обратите внимание на изменение символа, с которого начинается элемент списка.

 

1.1.3. Создание гиперссылок

1. Откройте документ Док_1. htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами < BODY > и </ BODY >.

3. Введите после тега < BODY > фразу: Текст до ссылки.

4. Введите тег: < A HREF =”Док_2. htm ”>

5. Введите фразу: Ссылка.

6. Введите закрывающий тег </ A >

7. Введите фразу: Текст после ссылки.

8. Сохраните документ под именем Док_3. htm.

9. Откройте файл Док _3.htm в InternetExplorer. Убедитесь, что текст между тегами < A > и </ A > выделен как ссылка (цветом и подчеркиванием).

10. Щелкните на ссылке и убедитесь, что при этом загружается документ, на который указывает ссылка.

11. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к предыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

12. Закройте файл и программу.

 

1.1.4. Создание изображения и использование его на WEB – странице

1. Откройте программу Paint.

2. Задайте размеры рисунка 50х50 точек (РисунокАтрибуты).

3. Залейте рисунок зеленым цветом.

4. Инструментом Кисть нанесите произвольный красный рисунок на зеленый фон.

5. Сохраните рисунок под именем Рис. gif (в формате GIF) и закройте программу Paint.

6. Откройте файл Док _ 1. htm в программе Блокнот.

7. Удалите весь текст, находящийся между тегами < BODY > и </ BODY >.

8. Введите после тега < BODY > следующий текст:

Использование

изображения

на WEB-странице.

9. Установите текстовый курсор в начало введенного текста.

10. Введите тег < IMG SRC =”Рис. gif ” ALIGN =” BOTTOM ”>

11. Сохраните документ под именем Док _4. htm.

12. Запустите программу Internet Explorer.

13. Просмотрите файл Док_4. htm, обратите внимание на положение изображения.

14. Вернитесь в программу Блокнот и измените значение атрибута: ALIGN на ALIGN =” RIGHT ”.

15. Сохраните файл под старым именем и просмотрите в Internet Explorer. Обратите внимание на изменение расположения рисунка.

16. Закройте программы.

 

1.1.5. Создание описания фреймов

Язык HTML позволяет в рамках одной WEB – страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей – фреймов. Для этого страница описывается документом HTML особого рода, структура которого отличается от обычной структуры. Тело документа заменяется описанием фреймов, задаваемым парным тегом < FRAMESET >.

1. Запустите редактор Блокнот.

2. Введите следующий документ:

 

<HTML>

    <HEAD>

              <TITLE> Описание фреймов </TITLE>

    </HEAD>

    <FRAMESET ROWS=”20%,*”>

    <FRAME SRC=” Док _1.htm”>

    <FRAMESET COLS=”35%,45%”NORESIZE>

    <FRAME SRC=” Док _4.htm”>

    <FRAME SRC=” Док _3.htm”>

   

    </FRAMESET>

</HTML>

Открывающий тег FRAMESET должен содержать обязательный атрибут COLS = или ROWS =, определяющий способ разбиения окна. В первом случае окно разбивается вертикальными линиями, а во втором – горизонтальными. Значение любого из этих атрибутов – это перечисление через запятую размеры отдельных фреймов < FRAMESET COLS =»35%,45%» NORESIZE >. Последняя область может быть определена с помощью символа «*», что означает, что ей выделяется все оставшееся пространство.

Тег < FRAME > должен содержать обязательный атрибут SRC =, с помощью которого указывается, какой документ первоначально загружается в соответствующую область. Значение этого атрибута – абсолютный или относительный адрес URL нужного документа, например: < FRAME SRC =»Док_4. htm»>.

3. Сохраните файл под именем Док_5. htm и просмотрите документ в Internet Explorer. Просмотрите представление нескольких созданных ранее документов, в отдельных фреймах.

 

1.2. Установка связей в WEB - документах

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

· Обычных текстовых редакторов.

· Редакторов гипертекста.

· Средств публикации и конвертирования различных файлов в гипертекст.

В Web адресация данных осуществляется с помощью гиперссылок, которые используют формат URL. Формат URL задает как местонахождение данных, так и метод доступа (протокол). Протокол HTTP является стандартным для Web.

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

1.2.1. Добавление гиперссылок в базу данных

 

1.2.2. Связь формы с таблицей

1. Скопируйте файл Занятие_4. mdb в свою папку.

2. Откройте базу данных Занятие_4.mdb.

3. В окне базы данных откройте вкладку Формы.

4. Откройте форму Зарплата в режиме конструктора.

5. Щелкните на кнопке Добавление гиперссылки на панели инструментов. Появится диалоговое окно Добавление Гиперссылки.

6. В диалоговом окне Добавление Гиперссылки на панели Связать с щелкните на пункте Объектом в этой базе данных.

7. В списке объектов базы данных откройте таблицы и выделите таблицу Работник

8. Щелкните на кнопке ОК. Диалоговое окно закроется. В верхнем левом углу области формы Данные появится гиперссылка Работник.

9.  Укажите на гиперссылку Работник и, когда указатель примет форму ладони, перетащите ее в область примечание формы.

10. На панели инструментов конструктора форм щелкните на кнопке Вид. Форма Зарплата отобразится в режиме формы.

11. Щелкните на гиперссылке Работник. Откроется таблица Работник.

12. Закройте форму с сохранением изменений и таблицу.

 

1.2.3. Связь формы с документом Microsoft Office

1. Откройте форму Сотрудники в режиме конструктора.

2. Щелкните на кнопке Добавление гиперссылки на панели инструментов. Появится диалоговое окно Добавление Гиперссылки.

3. На панели Связать с щелкните на пункте Имеющимся файлом или Web – страницей.

4. В области Найдите щелкните на кнопке Файл. Появится диалоговое окно Связать с файлом.

5. В списке поля Папка выделите файл Выплаты.xls и нажмите кнопку ОК.

6. Диалоговое окно Связать с файлом закроется. Значение Выплаты.xls появится в полях Текст гиперссылки и Введите имя файла или Web-страницы.

7. Выделите значение в поле Текст гиперссылки и введите Сведения по расчету зарплаты.

8. Щелкните на кнопке ОК.

9. Перенесите гиперссылку Выплаты в положение правее поля имя.

10. Просмотрите полученную форму в режиме формы.

11. Щелкните на гиперссылке. Откроется окно Microsoft Excel, в котором отображается рабочий лист Выплаты.

12. Закройте окно Microsoft Exce l. Закройте форму Сотрудники с сохранением изменений.

1.2.4. Связь формы с адресатом электронной почты

1. Откройте форму Назначение в режиме конструктора.

2. Щелкните на кнопке Добавление гиперссылки на панели инструментов. Появится диалоговое окно Добавление Гиперссылки.

3. На панели Связать с щелкните на пункте Электронной почтой.

4. В поле Адрес электронной почты введите helpdesk@sweetlil.com. Перед вводимым текстом автоматически вставятся символы “maillo:”, и этот же текст отобразится в поле Текст наверху диалогового окна.

5. В поле Текст выделите значение «helpdesk@sweetlil.com» и введите Электронная почта Службы заказов специалистов.

6. В поле Тема введите Вопросы формы Заказчики и щелкните на кнопке ОК. Диалоговое окно Добавление гиперссылки закроется. В верхнем левом углу формы появится гиперссылка.

7. Перенесите гиперссылку в свободное место формы.

8. Просмотрите полученную форму в режиме формы и проверьте гиперссылку на электронную почту. Откроется окно Microsoft Outlook, в котором отобразится новое сообщение с темой «Вопросы формы Заказчики».

9. Закройте сообщение. Закройте форму Назначение с сохранением изменений.

1.3. Публикация объекта базы данных как WEB – страницы

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

При этом объект преобразуется в гипертекст с минимальным форматированием. Внешний вид объекта можно улучшить с помощью таких средств публикации web-страниц как Microsoft FrontPage, однако этот процесс требует значительных усилий. Гораздо проще осуществлять преобразование объекта базы данных в полноценный Web-документ, воспользовавшись Microsoft Excel и Microsoft Word для форматирования и публикации объекта базы данных.

 

1.3.1. Просмотр таблицы Access 2000 как Web-страницы

1. Перейдите на вкладку Таблицы и выделите таблицу Специальности

2. В меню Сервис укажите на команду связи с Office и щелкните на команде Публикация в MS Word. Откроется окно Microsoft Word, в котором отобразится таблица Специальности в формате RTF. Таблица содержит правильные данные, хотя некоторые из них не умещаются в столбцах.

3. В Microsoft Word в меню Файл выберите команду Предварительный просмотр Web - страницы. Откроется окно Web - браузера, в котором таблица Специальности отобразится как Web - страница. Все данные отображаются полностью.

4. Закройте Web - браузер. На экране снова появится окно Word с документом Специальности. rtf

1.3.2. Модификация таблицы Access 2000 для публикации в Web

1. В окне Word поместите указатель на верхнюю границу столбца Код и, когда указатель примет форму жирной стрелки, направленной вниз, щелкните. Столбец Код будет выделен. Удалите выделенный столбец.

2. Выделите столбец Специальность. В меню Таблица выполните команды АвтоподборПо ширине окна.

3. Выделите столбцы Часовая ставка и Премиальные и щелкните на кнопке По центру. Значения столбца будут отцентрированы.

4. Просмотрите результаты форматированния в режиме предварительного просмотра Webстраницы. В окне Webбраузера отразятся все изменения.

5. Закройте Webбраузер. На экране снова появится окно Word с документом Специальности. rtf.

 

1.3.3. Публикация таблицы Access 2000 как Web – страницы

1. В окне Word в меню Файл выполните команду Сохранить как Webстраницы. Появится диалоговое окно Сохранение документа со списком файлов, содержащихся в папке Мои документы.

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

3. Щелкните на кнопке Продолжить. Диалоговое окно закроется. Таблица Специальности отобразится в формате HTML.

4. Закройте Microsoft Word. В результате таблица Специальности опубликована как Web – страница Специальность. htm.

 

1.4. Страница доступа к данным

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

Страницы доступа имеют формат HTML. Они создаются в Access 2000 и отображаются в Microsoft Internet Explorer 5 или другом Web – браузере.

 

1.4.1. Создание страницы доступа с помощью Мастера

1. В окне базы данных на панели объектов щелкните на в к ладке Страницы.

2. В списке щелкните дважды на пункте Создание страницы доступа к данным с помощью мастера. Появится первое окно Мастера страниц.

3. В списке поля Таблицы и Запросы выделите Специальности. В списке Доступные поля поочередно щелкните дважды на всех полях, кроме поля Код. Щелкните на кнопке Далее.

4. Все перенесенные поля переместятся в список Выбранные поля, и появится второе окно Мастера страниц. Нажмите кнопку Далее.

5. В следующих двух окнах также щелкните на кнопке Далее.

6. Появится последнее окно мастера, где указано предлагаемое имя страницы. Измените его на название Специальности.

7. Убедитесь, что выделен вариант Изменить макет страницы, установите флажок в поле Применить тему к странице и щелкните на кнопке Готово Мастер запросов закроется, и появится диалоговое окно Тема.

8. В списке выделите любую тему. Убедитесь, что в полях Активная графика и Фоновый рисунок установлены флажки, и щелкните на кнопке ОК. Диалоговое окно Тема закроется. На экране в режиме конструктора отобразится страница доступа. 

9. Щелкните на тексте заголовка и введите: Требуемые специальности.

10. Щелкните под заголовком и введите: Просмотрите нашу информацию и Вы поймете, где Вас ждут!!!

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

1.4.2. Добавление Web - компоненты Microsoft Office

Набор Web – компонент Microsoft Office позволяет использовать в Web – документах возможности трех инструментов, входящих в комплект Microsoft Office 2000. С помощью компонент Сводная таблица, Диаграмма и Электронная таблица можно применять в Web – страницах такие средства, как функция и формулы Excel, оперативный анализ данных и автоматическое обновление таблиц и диаграмм.

 

1.4.2.1. Создание страницы доступа из существующей страницы

1. В окне базы данных откройте вкладку Страницы.

2. В списке страниц щелкните дважды на пункте Изменения существующей страницы. Появится диалоговое окно Поиск Web – страницы, содержащее список файлов.

3. Выделите файл Специальности. htm и щелкните на кнопке Открыть. Страница откроется в режиме конструктора страниц доступа.

Примечание: Когда документ в формате HTML открывается как страница, он превращается в формат DHTML и становится страницей доступа.

4. Щелкните на кнопке Панель элементов, если она отсутствует на экране.

5. На панели элементов щелкните на элементе Диаграмма и, когда он примет форму диаграммы щелкните на свободном месте. Появится первое окно Мастер диаграмм.

6. В списке типов выделите Круговая, а затем щелкните на кнопке Далее.

7. Во втором окне в списке Доступные таблицы выделите Специальности и щелкните на кнопке Далее.

8. В третьем окне выделите вариант Записи для легенды содержатся в нескольких столбцах и щелкните на кнопке Далее. Появится третье окно мастера диаграмм с неактивными полями.

9. В последнем окне щелкните на кнопке Добавить. Поля становятся активными с выделенным значением   в списке Ряды.

10. В списке поля Значения выделите Часовая ставка. В поле Образец отобразится цветная диаграмма

11. В поле Подписи оси Х выделите Специальность. Номера в цветных полях заменятся на названия специальностей.

12.  Щелкните на кнопке Готово. Мастер диаграмм закроется. На странице доступа появится диаграмма.

13. Закройте страницу доступа с сохранением изменений.

 



Поделиться:


Последнее изменение этой страницы: 2021-03-09; просмотров: 90; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.147.67.166 (0.074 с.)