- •Язык разметки гипертекста - html
- •Практическая работа № 1. Создание простейшей Web-страницы
- •Практическая работа № 2. Форматирование абзацев.
- •Практическая работа № 3. Создание гиперссылок.
- •Практическая работа № 4. Использование изображений.
- •Практическая работа № 5. Усложненное форматирование текста.
- •Практическая работа № 6. Создание списков.
- •Практическая работа № 7. Создание таблиц.
- •Практическая работа № 8. Знакомство с фреймами.
- •Практическая работа № 9. Использование MicrosoftWord при разработке html-страниц.
Практическая работа № 5. Усложненное форматирование текста.
Цель работы: познакомиться с некоторыми элементами языка HTML, которые могут использоваться для форматирования текста документа, изучение воздействия этих элементов на отображение документа, выполнение вкладывание их друг в друга.
Размер основного шрифта устанавливается тегом:
<BASEFONT SIZE=размер_шрифта>
Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер основного шрифта по умолчанию устанавливается равным 3. Тег <FONT SIZE=размер_шрифта> используется для установки размера шрифта для отдельных фрагментов текста. Символ “+” (увеличивает) а символ “-“ (уменьшает) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3 , то тег <FONT SIZE=+2> устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта задается тег
<FONT FACE= «имя_шрифта» >
Имя шрифта может быть Arial, Sans Serif, Courier и т.д.
С помощью атрибута COLOR тега FONT можно задавать цвета шрифта
<FONT COLOR = «цвет»>
Перечень основных цветов: RED, LIGHTRED, BLEU, BROWN, YELLOW, GREEN, WHITE, BLACK, GRAY, AQUA, FUCHSIA, PURPLE, OLIVE, LIME, MAROON, NAVY, SILVER, TEAL.
Если эта работа выполняется не сразу после предыдущей, то откройте документ first.htm в программе Блокнот.
Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть произвольным (см.пред.практические работы.)
Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задаёт вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.
Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.
Введите теги: <P> <FONT SIZE="-2 "FACE="ARIAL" COLOR="GREEN">
Введите очередной абзац текста, закончив его тегом </FONT>.
В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), <I> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP> (верхний индекс).
В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).
Некоторые символы не выводятся браузерами на экран. Например, угловые скобки. Для вывода этих символов в HTML используются так называемые &-последовательности. Выглядят они так: < -выводит < (знак меньше) > - выводит >(знак больше) " - выводит ” (кавычки). Используйте эти три тега в своей работе.
Сохраните полученный документ под именем format.htm
Запустите обозреватель Internet Explorer (Пуск / Программы / Internet Explorer).
Дайте команду Файл / Открыть…. Щёлкните на кнопке Обзор… и откройте файл format.htm.
Изучите, как использованные элементы HTML влияют на способ отображения текста.
Вернитесь в программу Блокнот и измените, документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.
Ознакомимся с очень интересным графическим решением, которое может украсить Web-страничку – это бегущая строка.
<MARQUEE> бегущая строка </MARQUEE>
Разместите, этот тег в конце вашего файла перед тегом </BODY>. Посмотрите, как изменился вид вашей странички.
Теперь добавьте в открывающий тег некоторые из атрибутов, указанных в Таблице 2.
Таблица 2 |
|
direction=left - значение по умолчанию direction=right – движение слева направо |
behavior=scroll loop=3 - движение повторится 3 раза behavior=slide - строка один раз пробегает от правого края к левому и там остается behavior=alternate - строка как бы качается между правым и левым краем экрана |
width=n - ширина участка, занимаемого строкой height=n - высота участка, занимаемого строкой |
|
Тогда тег «бегущей строки» будет выглядеть так:
< MARQUEE DIRECTION=”RIGHT” BEHAVIOR=ALTERNATE WIDTH=500 HEIGHT=50 BGCOLOR=”GREEN”> бегущая строка</MARQUEE>
Подставьте в атрибуты тега различные значения – slide, scroll и т.д.
Теперь изменим размер и цвет шрифта бегущей строки. Добавьте перед открывающим тегом <MARQUEE> тег <FONT SIZE=20 COLOR=”YELLOW”>, а после закрывающего тега </MARQUEE> не забудьте поставить закрывающий тег для шрифта </FONT>.
Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.
Контрольные вопросы:
Какой тег задает основной размер шрифта, каковы его параметры?
Какой тег задает гарнитуру шрифта? Перечислите несколько параметров данного тега.
Какой тег задает цвет шрифта? Перечислите несколько параметров данного тега.
Какие теги определяют начертание шрифта?
Какие теги определяют текст в виде Нижнего\Верхнего шрифта?
Какие теги определяют выделение шрифта?
Какие символы Internet Explorer не выводит на экран? Приведите несколько примеров. Что использует в таком случае используется?
Приведите примеры вложенных в друг друга тегов, задающих форматирование текста.
Какой тег задает бегущую строку?
Какой тег задает направление движению бегущей строке?
Каковы атрибуты задающие величину участка бегущей строки?
Что означает атрибут BEHAVIOR и какие значения он принимает?
Какие еще атрибуты можно добавить в тег бегущей строки <MARQUEE> </MARQUEE>