Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Рисунок 10 – Вкладка Язык окна Свойства страницы
После сохранения изменений параметров HTML-документа соответствующим образом изменяется и код документа, что можно наблюдать
на вкладке HTML.
Создание гиперссылок в Microsoft FrontPage 2003
Чтобы создать ссылку, отметьте объект, который вы хотите включить
в ссылку, после чего щелкните на кнопке Гиперссылка панели инструментов или активизируйте команду Гиперссылка меню Вставка. Откроется диалоговое окно Создать
Рисунок 11 – Окно Добавление гиперссылки
гиперссылку (рис. 11).
21
В этом окне можно задавать гиперссылку:
на страницу web-сайта, который открыт в данный момент в MS
FrontPage (для этого нужно выбрать ее из списка);
на внешний web-сервер, заполнив строку URL самостоятельно;
на адрес электронной почты, используя кнопку;
на конкретное место документа. Для этого в определенном месте
страницы создается закладка
: выделяется текст, выполняется команда
Вставка – Закладка, в появившемся диалоговом окне вводится имя закладки.
Технология работы
Работа в программе Блокнот
1. Запустите Блокнот.
2. Введите:
<HTML>
<HEAD>
<TITLE> Пример HTML-документа </TITLE>
</HEAD>
<BODY>
Web-технологии
</BODY>
</HTML>
3. Сохраните документ под именем index.htm в своей рабочей папке.
4. Просмотрите сохраненный документ в браузере Internet Explorer.
При открытии в
браузере исходный документ будет иметь следую-
щий вид (рис. 12).
Рисунок 12 – Пример простейшего HTML-документа
22
Мы видим, что текст, набранный нами между тегами <TITLE>
и </TITLE>, отобразился в заголовке окна, а то, что написано внутри
<BODY>, – в самом окне браузера.
5. Рассмотрим пример использования абсолютных ссылок в HTML-
документе. Введите:
<HTML>
<HEAD>
<TITLE> Создание ссылок </TITLE>
</HEAD>
<BODY>
<A HREF="http: //www.yandex.ru" >Поисковая система Яндекс</A>
</BODY>
</HTML>
6. Сохраните документ под именем index.htm в своей рабочей папке и
просмотрите сохраненный документ в браузере Internet Explorer.
Работа в Microsoft FrontPage 2003
1. Создайте новый документ в MS FrontPage, используя в качестве ис-
ходного варианта Создание новой обычной страницы.
2. В качестве названия введите «Новый Документ».
3. Задайте остальные параметры созданной страницы:
отступы от границ по 2 см;
цвет фона, текста;
кодировку – кириллица.
4. Переключитесь на вкладку Конструктор
и введите следующий текст
Библиотека – это учреждение, организующее сбор, хранение, общественное пользование произведениями печати. Библиотеки получили развитие
с ХV века, после изобретения книгопечатания. В ХIХ веке были организованы публичные библиотеки. В России монастырские библиотеки появились
в ХI–ХII веках, первые светские – в ХVIII веке. Первая крупная публичная
библиотека открыта в
Санкт-Петербурге в 1814 году.
5. В тексте создайте внешнюю гиперссылку на Государственную пуб-
личную научно-техническую библиотеку России http://ellib.gpntb.ru
23
6. Переключитесь на вкладку Код и, проанализировав HTML-теги, вы-
делите те, которые были добавлены HTML-редактором при установ-
ке параметров страницы.
7. Используя их, создайте аналогичный документ в программе Блок-
нот.
Обратите внимание, что добавленный текст должен располагать-
ся между тегами <BODY>.
Контрольные вопросы
1. Что значит тег?
2. Какова структура НТМL-документа
?
3. Опишите назначение тега <TITLE>?
4. Как добавить гиперссылку в документ HTML?
5. Какие вкладки содержит окно программы Microsoft FrontPage 2003? По-
ясните их назначение.
Лабораторная работа № 2
Форматирование текста
4 часа
Цель работы: овладение основными приемами размещения и редак-
тирования текстовых объектов на страницах сайта.
Задачи работы:
1) ознакомиться с тегами логического и физического
форматирова-
ния текста;
2) ознакомиться с тегами управления разрывами и переноса строк;
3) ознакомиться с тегами добавления комментариев, специальных
символов.
Формируемые компетенции:
готовность к овладению основными методами, способами и сред-
ствами получения, хранения, переработки информации, наличие навыков
работы с компьютером как средством управления информацией (ОК-12);
готовность к овладению перспективными методами библиотечно-
информационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
24
В результате выполнения лабораторной работы студент должен:
знать:
теги физического и логического форматирования текста (ПК-4);
теги управления разрывами и переноса строк, добавления коммен-
тариев, специальных символов (ОК-12, ПК-4);
уметь:
форматировать HTML-документы (ОК-12, ПК-4);
владеть:
основными приемами размещения и редактирования текстовых
объектов на страницах сайта (ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать HTML-страницу с отформатированным текстом.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
Как и в MS Word, основой структуры
текста в HTML является абзац.
Для выделения абзаца служит тег <P>, который закрывать необязательно.
В теге <P> можно указать способ выравнивания текста абзаца в виде
<P align="опция выравнивания">.
Для выравнивания текста абзаца по левому краю, правому, по центру
или по ширине следует использовать значения LEFT, RIGHT, CENTER,
JUSTIFY.
При использовании тега <P> между абзацами пропускается строка,
а сам абзац начинается без отступа слева (т.е. без «красной строки»).
Для принудительного перехода на новую строку используется тег
<BR>, при этом пропуска строки нет.
Для создания неразрывной строки используется тег <NOBR>. В этом
случае браузер не будет переносить строку, даже если она выходит за границы экрана, при этом появится горизонтальная полоса прокрутки.
Если же возникает необходимость разбиения данной строки на две,
но в строго определенном месте, следует использовать тег <WBR>.
Для выделения различных частей документа используются горизонтальные линии, отчетливо показывающие границы между разделами.
Горизонтальную линию можно создать с помощью одиночного тега
<HR>. Этот тег рисует затененную горизонтальную линию вдоль экрана
25
браузера. Рассмотрим атрибуты тега <HR>. Атрибут WIDTH задает длину
линии. Его значение можно указать в пикселях или в процентном отношении к ширине окна браузера. Для задания высоты линии используется атрибут SIZE (задается в пикселах). Цвет разделительной линии задается атрибутом COLOR.
Форматирование текста может быть физическим и логическим. Теги
физического форматирования определяют формат отображения, указанного в них фрагмента текста в окне браузера. При физическом форматировании текста задаются параметры его отображения, акцент делается не
на контексте содержимого, а на визуальном представлении. Однако все
браузеры поддерживают тот или иной способ выделения текста.
Логические теги предназначены для расстановки логических ударений, выделения логических частей, подчеркивания сути высказываний, к примеру, для выделения цитат, программного кода, аббревиатур.
Фрагменты с логическим форматированием отображаются браузерами
на экране определенным образом, заданным по умолчанию.
Логическое форматирование
Заголовки в HTML структурируют текст, составляющий тело документа. Каждый уровень заголовка соответствует определенному уровню
детализации.
В HTML определено 6 уровней заголовков: от Н1 до Н6. Текст, заключенный между тегами <Н1></Н1>, получается большим – это основной заголовок (6–24 пт). Если текст окружен тегами <Н2></Н2>, то он
выглядит несколько меньше (подзаголовок) (5–18 пт); текст внутри
<НЗ></НЗ> еще меньше (4–14 пт) и так далее (H4 – 3 (12 пт); H5 – 2
(10 пт)) до <Н6></Н6> – 1 (8 пт).
Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице 1.
Таблица 1 – Теги логического форматирования
Теги Применение Результат
<CITE> </CITE>
<CITE> Используется для
выделения цитат или названий книг и статей </CITE>
26
Используется для выде-
ления цитат или назва-
ний книг и статей
Теги Применение Результат
г
г
<CODE> Применяется для
<CODE>
</CODE>
вывода небольшого фрагмента программного кода
</CODE>
<EM> Используется для
<EM> </EM>
выделения важных фрагментов текста </EM>
<KBD> Выделяет текст,
<KBD> </KBD>
вводимый пользователем с
клавиатуры </KBD>
<SAMP>
</SAMP>
<SAMP> Используется для
выделения текста примера
</SAMP>
<ABBR></ABBR> <ABBR> Используется для
отметки аббревиатур
</ABBR>
<STRONG>
<STRONG> Используется
Применяется для
вывода небольшо
куска программно
о
о
кода
Используется
для выделения важных
фрагментов текста
Выделяет текст,
вводимый пользователем с клавиатуры
Используется
для выделения
текста примера
Используется
для отметки
аббревиатур
Используется
</STRONG>
для выделения очень важных фрагментов текста
</STRONG>
<VAR> </VAR> <VAR> Используется для
отметки имен переменных
</VAR>
<DEL> </DEL> <DEL> Используется для
отметки удаленного текста
</DEL>
<INS> </INS> <INS> Используется для
отметки вставленного текста </INS>
<DFN></DFN> <DFN>Используется для
выделения
определений</DFN>
Для выделения длинных цитат из основного текста в HTML сущест-
для выделения
очень важных
фрагментов текста
Используется
для отметки имен
переменных
Используется
для отме
удаленного те
тки
кста
Используется
для отметки
вставленного текста
Используется
для выделения
определений
вует тег <BLOCKQUOTE> </BLOCKQUOTE>. Этот элемент является контейнером и может содержать любые форматирующие теги. При этом имеет
место смещение текста цитаты вправо.
27
Физическое форматирование
В таблице 2 представлены теги физического форматирования.
Таблица 2 – Теги физического форматирования
Теги Применение Результат
<B> </B> <B>Полужирный</B>
<I> </I> <I>Курсив</I>
Полужирный
Курсив
<U> </U> <U>Подчеркнутый</U> Подчеркнутый
<S> </S> <S>Зачеркнутый</S> Зачеркнутый
<SUP>…</SUP> Верхний индекс<SUP>х</SUP> Верхний индексх
<SUB>…</SUB> Нижний индекс<SUB>х</SUB> Нижний индекс
<BIG>Увеличение шрифта на
Увеличение шрифта
<BIG> </BIG>
<SMALL>
</SMALL>
один размер</BIG>
<SMALL> Уменьшение шрифта
на один размер</SMALL>
на один размер
Уменьшение шриф-
та на один размер
Размерами и начертанием шрифта можно управлять с помощью тега
<FONT FACE= "Шрифт" SIZE= "Размер" COLOR= "ЦВЕТ">.
Атрибут FACE позволяет указать тип шрифта, которым программа
х
просмотра выводит текст. Если указанного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию. Этот атрибут позволяет указать как один, так и несколько шрифтов
(через
запятую). Весь список будет просмотрен слева направо и первый из
имеющихся на машине пользователя будет использован для вывода документа.
Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Размер может быть как абсолютной величиной (SIZE=5),
так и относительной (SIZE= +2). Во втором примере текущий размер
шрифта увеличивается на 2.
В таблице
3 указано соответствие типичных размеров шрифта
в пунктах значениям атрибута SIZE.
Атрибут COLOR устанавливает цвет шрифта, который может быть
задан как в формате RGB, так и указанием имени (Приложение 1).
28
Таблица 3 – Типичные размеры шрифта в пунктах,
эквивалентные значениям элемента <FONT SIZE>
<FONT SIZE= "n"> Размер шрифта в пунктах
1 8
2 10
3 12
4 14
5 18
6 24
7 36
Специальные символы
Для представления специальных символов в документе HTML, таких
как знаки >, <, торговая марка, знак копирайта, плюс-минус, используются
специальные коды, состоящие из символа амперсанда (&) и следующего
за ним имени символа или его десятичного или шестнадцатеричного значения. Заканчиваться специальный символ должен знаком «точка с запятой».
В таблице 4 представлен перечень наиболее часто встречаемых специальных символов.
Таблица 4 – Специальные символы в HTML
Числовой код Именная замена Символ Описание
#034; quot;
#038; amp;
#060; lt;
#062; gt;
#160; nbsp;
#169; copy;
“ Символ кавычки
Амперсанд
< Знак «больше»
> Знак «меньше»
Неразрывный пробел
Копирайт
#174; reg;
#177; plusmn;
#171; laquo;
#187; raquo;
29
Зарегистрированная
торговая марка
Плюс-минус
« Левая угловая кавычка
» Правая угловая кавычка
Работа с текстом в Microsoft FrontPage 2003
Работа с текстом в программе MS FrontPage 2003 в режиме Конструктор аналогична работе с текстом в программе Microsoft Office Word.
Заполнить web-страницу текстом можно несколькими способами.
1) Печать текста с клавиатуры начинается с того места, где установлен
курсор, при достижении правой границы web-страницы текст будет
автоматически переходить на другую строку. Для начала
нового
абзаца необходимо нажать клавишу Enter.
2) Копирование и вставка текста осуществляется стандартными
методами через буфер обмена командами Правка – Копировать,
Правка – Вставить. Копируемый фрагмент текста может быть взят
из любого другого приложения.
3) Команда Вставка – Файл позволяет в диалоговом окне выбрать до-
кумент, который будет полностью перенесен на web-страницу.
всех случаях любое форматирование текста выполняется с помо-
Во
щью тегов языка HTML, которые автоматически генерируются программой, их можно увидеть в режиме Код или С разделением. Этим объясняются искажения в форматировании текста при переносе его из других
приложений.
Для редактирования текстового фрагмента необходимо воспользоваться командами панели инструментов Форматирование и меню
Формат.
При этом основные параметры текста (название шрифта, его размер,
цвет) определяются атрибутами тега <FONT>, а остальные задаются с помощью дополнительного набора тегов.
Команды меню Формат для форматирования текста:
Шрифт – открывает диалоговое окно для изменения шрифта, начер-
тания, размера, цвета, видоизменения (вкладка Шрифт) и интервала
между символами, положения по
вертикали (вкладка Межзнаковый
интервал).
Абзац – открывает диалоговое окно для установки выравнивания,
отступов, интервалов между абзацами, интервалов между строками в
абзаце.
Команды меню Вставка служат для добавления элементов на web-
страницу в место, указанное курсором.
Символ – открывает диалоговое окно для ввода символов, которых
нет на клавиатуре.
30
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]