Цель: Закрепить навыки создания простейшего HTML документа содержащего теги форматирования текста и настройки цвета.
Самый простой и наиболее распространенный способ представления информации на Web-
странице, хотя далеко не единственный, – это текст. Вы можете создать текст, не уделяя особого внимания тому, как он будет выглядеть в окне браузера. Браузер отобразит его, используя свои настройки. Однако даже самый непритязательный пользователь хотел бы, чтобы заголовки как-то отличались от основного текста размером и шрифтом, чтобы можно было выделить абзацы, пропустить строку и т.д. Все это называется форматированием. При оформлении используются специальные теги. Рассмотрим некоторые из них. Все элементы, заключенные между тегами <CENTER>и</CENTER> будут находиться в центре окна браузера по ширине. Тег <BR>предписывает переход на новую строку. Тег <P> является тегом абзаца, переводит курсор на новую строку и еще одну строку пропускает. Если не использовать эти теги, то вид текста может оказаться совсем не таким, как мы его себе представляем.
Для выбора размера шрифта можно использовать теги логических стилей. Их всего шесть. Размер и толщина букв постепенно уменьшается от первого стиля к шестому. С помощью тегов логических стилей оформляются заголовки. Приведем пример программы и внешний вид различных логических стилей.
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов,
можно определять шрифты для каждого фрагмента текста с помощью специальных тегов. Самый простой способ – использование физических стилей. <B> Полужирный <U> Подчеркнутый <TT> Пишущая <I> Курсив <S> Вычеркнутый машинка
Для каждого тега физического стиля существует соответствующий закрывающий тег.
Приведем пример программы и внешний вид различных физических стилей. ХОД 1. Создайте на рабочем столе свою рабочую папку для хранения html-документов. 2. Запустите программу «Блокнот» (Пуск – Программы – Стандартные – Блокнот) 3. Создайте структуру html-документа по образцу: <html> <head><title></title></head> <body></body> </html> 4. Дайте название html-документу: Стихотворение М.Ю. Лермонтова. 5. Сохраните полученный документ с именем Работа с текстом.htm в своей рабочей папке. 6. Составьте текст html-документа, который отображал бы в окне браузера приведенное ниже стихотворение. Для этого: o напечатайте между метками <body> </body> текст стихотворения в столбик, o расставьте в нужных местах следующие метки для работы с текстом: <CENTER></CENTER>, <H1></H1>, <font face= ”Tahoma” ></font>, <B></B>, <I></I>, <U></U>, <BR>, <font face= ”Impact” ></font>, <HR> o выберите команду Файл – Сохранить
БЕЛЕЕТ ПАРУС ОДИНОКИЙ
Белеет парус одинокий
В тумане моря голубом. Что ищет он в стране далекой? Что кинул он в краю родном.
Играют волны, ветер свищет
И мачта гнется и скрипит. Увы, он счастия не ищет И не от счастия бежит.
7. Просмотрите документ в окне браузера. Для этого:
o закройте окно с текстом html-документа o откройте свою рабочую папку o запустите файл Работа с текстом .htm 8. Внесите изменения в текст html-документа. Для этого: o выберите в меню окна браузера команду Вид – В виде HTML o измените текст html-документа так, чтобы на светло-сером фоне с красным текстом выделенные слова выводились на экран различными цветами. Для этого используйте в соответствующих метках атрибуты цветовых оттенков 1способ: Bgcolor = #RRGGBB, Text = #RRGGBB, Color = #RRGGBB (RR – насыщенность красного GG – насыщенность зеленого цвета BB – насыщенность синего в диапазоне от 00 до FF) 2 способ: Bgcolor = ”***”, Text = ”***”, Color = ”***” (вместо звездочек напечатайте название цвета: BLACK, BLUE, PURPLE, RED, GREEN, GRAY, YELLOW, WHITE) o выберите команду Файл – Сохранить 9. Проверьте, как теперь будет выглядеть документ в окне браузера. Для этого:
o выберите в меню окна браузера команду Вид – Обновить или кнопку
10. Закройте все окна и выйдите на Рабочий стол.
Дефолт: <HTML> <HEAD> <TITLE>Стихотворение М.Ю. Лермонтова.</TITLE> </HEAD> <BODY> <H1 align="center"> Белеет Парус Одинокий </H1> <P align="center"> Белеет <B>парус</B> одинокий <BR> В тумане <I>моря</I> голубом. <BR> Что ищет он в <I><B>стране далекой</B></I>? <BR> Что кинул он <TT>в краю родном</TT>. <BR> <HR COLOR="Gray" SIZE="4"> </P> <FONT FACE="Impact" COLOR="black"> <P align="center"> Играют волны, ветер свищет<BR></FONT FACE> <U><I>И мачта гнется и скрипит.</I></U><BR> <B>Увы, он счастия не ищет</B><BR> И не от счастия бежит.<BR> </P> </FONT> </BODY> </HTML> Требование из 8ого <HTML> <HEAD> <TITLE>Стихотворение М.Ю. Лермонтова.</TITLE> </HEAD> <body bgcolor="#808080"; Text="#ff0000"> <H1 align="center"> Белеет Парус Одинокий </H1> <P align="center"> Белеет <font color='yellow'><B>парус</B></font> одинокий <BR> В тумане <font color='blue'><I>моря</I></font> голубом. <BR> Что ищет он в <font color='purple'><I><B>стране далекой</B></I></font>? <BR> Что кинул он <font color='green'><TT>в краю родном</TT></font>. <BR> <HR COLOR="Gray" SIZE="4"> </P> <FONT FACE="Impact" COLOR="black"> <P align="center"> Играют волны, ветер свищет<BR></FONT FACE> <font color='gray'><U><I>И мачта гнется и скрипит.</I></U></font><BR> <font color='yellow'><B>Увы, он счастия не ищет</B><BR></font> И не от счастия бежит.<BR> </P> </FONT> </BODY> </HTML>
