 |
Упражнение 2. Работа с текстом.
|
|
|
|
Упражнение 1. Создание шаблона HTML-документа.
Что такое HTML.
HTML (HyperText Markup Language) - язык управления программой, предназначенной для просмотра web-документов (браузером).
Основным элементом языка HTML является тэг - последовательность символов, заключенная между угловыми скобками. Тэги бывают двух видов - открывающие и закрывающие. Закрывающие тэги отличаются прямым слэшем «/» после первой угловой скобки, например:
<p> - тэг, открывающий абзац
</p> - тэг, закрывающий абзац
Некоторые тэги не имеют закрывающих тэгов, например тэг <br>, который сообщает браузеру о разрыве строки, или тэг <hr> - рисующий горизонтальную линию.
Для некоторых тэгов закрывающие тэги не обязательны, например для тэга абзаца <p>, закрывающий тэг не обязателен, но наличие его улучшает читабельность документа и придает ему структуру.
Тэги могут вкладываться друг в друга, например: <b><i>текст</i></b>. В этом случае важно соблюдать последовательность открытия и закрытия:
<тэг1><тэг2><тэг3>...</закрытие тэга3></закрытие тэга2></закрытие тэга1>
HTML-документ является обычным текстовым документом, который можно создать, просмотреть и отредактировать в текстовом редакторе.
HTML не реагирует на регистр символов, например, тэг открывающий таблицу может быть написан так- <TABLE>, или так- <table>, или скажем так- <tAbLe>. Лишние пробелы и переносы тоже не учитываются.
Можно написать
| <P> Красная строка. |
| Следующая строка</P> |
и все равно браузер выведет это так: Красная строка.Следующая строка.
(Есть единственное исключение- тэг <PRE>, после которого браузер начинает учитывать пробелы и переносы).
Создание документа.
|
|
|
Итак, создадим простейший документ, который потом можно будет использовать как шаблон для разных HTML-документов.
Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся декларацией
< !DOCTYPE >. В ней браузер почерпнет информацию о том какому стандарту соответствует документ.
Например, строка:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>
скажет браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.
Затем идут следующие строки:
< HTML > - необязательный элемент
< HEAD >-начало заголовка документа.
В заголовке располагаются метаданные - информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и другую информацию.
Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы - windows-1251.
<META http-equiv=«Content-Type» content=«text/html; charset=windows-1251»>
Следующие две строки нужны для индексации вашей страницы поисковыми системами.
<META NAME=«Description» content=«краткое описание страницы»>
<META NAME=«Keywords» content=«ключевые слова через запятую»>
Следующая строка укажет язык таблицы стилей CSS.
<META http-equiv=«Content-Style-Type» content=«text/css»>
Затем следуют описание стилей:
<STYLE type=«text/css»>
Зададим красный цвет ссылок.
A:link {COLOR: red; TEXT-DECORATION: none}
Зададим цвет посещенных ссылок.
A:visited {COLOR: maroon; TEXT-DECORATION: none}
Зададим цвет ссылки, при клике на ней мышью
A:active {COLOR: fuschia TEXT-DECORATION: none}
Зададим цвет ссылки, при наведении на нее мышью
A:hover {COLOR: black; TEXT-DECORATION: underline}
Зададим цвет фона документа, и параметры шрифта по умолчанию
BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt}
< /STYLE > -завершаем таблицу стилей.
Затем указывает титул документа - надпись, которая будет выводится в заголовке окна браузера.
|
|
|
< TITLE >Моя первая страничка< /TITLE >
< /HEAD >- завершаем заголовок.
После заголовка открываем тело документа
< BODY >
Здесь будет содержание нашего документа.
И наконец, завершаем тело документа и сам документ.
< /BODY >
< /HTML >
Ваш шаблон будет выглядить так:
| <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»> <HTML> <HEAD> <META http-equiv=«Content-Type» content=«text/html; charset=windows-1251»> <META NAME=«Description» content=«краткое описание страницы»> <META NAME=«Keywords» content=«ключевые слова через запятую «> <META http-equiv=«Content-Style-Type» content=«text/css»> <STYLE type=«text/css»> A:link {COLOR: red; TEXT-DECORATION: none} A:visited {COLOR: maroon; TEXT-DECORATION: none} A:active {COLOR: fuschia; TEXT-DECORATION: none} A:hover {COLOR: black; TEXT-DECORATION: underline} BODY {BACKGROUND: white; COLOR: black; FONT-FAMILY: Verdana,Arial,sans-serif; FONT-SIZE: 8pt} </STYLE> <TITLE>Моя первая страничка</TITLE> </HEAD> <BODY> </BODY> </HTML> |
Итак, шаблон создан. Теперь введите следующий текст в тело документа (внутри тэгов <BODY></BODY>
Например:
| <P>Мой первый HTML-документ |
| <A HREF=««>ссылка</A></P> |
Сохраните документ например как template.html и кликните на нем мышкой. Запустится браузер, в окне которого на белом фоне, черными буквами будет выведен наш текст и красными буквами ссылка, цвет которой изменится на черный, при наведении на нее курсором.
Упражнение 2. Работа с текстом.
ТЭГИ УПРАВЛЕНИЯ СТИЛЕМ ТЕКСТА
u Жирный шрифт (bold)
Для управления плотностью шрифта применяются теги:
<b> текст </b>
<strong> текст </strong>
Отличие тэга < b > от тэга < strong > в том, что тэг < b > указывает браузеру выводить текст жирным шрифтом, а тэг < strong > указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом - зависит от конкретного браузера.
| Пример |
| Действие тэга <strong> Действие тэга <b> |
u Курсив (italic)
Курсивный шрифт выводится с помощью тэгов:
< i >текст</ i >
< em >текст< /em >
| Пример |
| Курсив |
Примечание: тэг < em > обычно используется для выделения слова из текста, и в различных браузерах может работать по разному.
u Подчеркнутый шрифт (underline)
Выводится с помощью тэга:
< u >текст< /u >
| Пример |
| Подчеркнутый шрифт |
u Перечеркнутый шрифт (strike)
Выводится с помощью тэга:
< strike >текст</ strike >
|
|
|
| Пример |
u Надстрочный индекс (Superscript)
Выводится с помощью тэга:
< sup >текст</ sup >
| Пример |
| основной текст надстрочный индекс 23=8 |
u Подстрочный индекс (Subscript)
Выводится с помощью тэга:
< sub >текст</ sub >
| Пример |
| основной текст подстрочный индекс C2H5OH |
u Имитация стиля печатной машинки (Teletype)
< tt >текст</ tt >
| Пример |
| Teletype |
u Шрифт для вывода цитат (citation)
< cite >текст</ cite >
| Пример |
| основной текст цитата |
u Шрифт для вывода исходного текста программ (code)
Выводится с помощью тэга:
< code >текст</ code >
или
< samp >текст</ samp >
Отображается моноширинным шрифтом Courier.
| Пример |
| Обычный шрифт Шрифт для текстов программ |
u Шрифт для выделения переменной в программе
Выводится с помощью тэга:
< var >текст</ var >
| Пример |
| текст программы переменная |
u Шрифт для имитации ввода с клавиатуры
Выводится с помощью тэга:
< kbd >текст</ kbd >
Отображается моноширинным шрифтом Courier.
| Пример |
| Обычный шрифт Шрифт для имитации ввода с клавиатуры |
u Заголовки
Выводятся с помощью тэгов:
<h1>Самый большой заголовок</h1>
...
<h5>Самый маленький заголовок</h5>
| Пример |
| H1 H2 H3 H4 H5 |
u Блок с отступом
Выводится с помощью тэга:
< BLOCKQUOTE >текст</ BLOCKQUOTE >
| Пример |
| основной текст блок текста с отступом |
ТЭГИ УПРАВЛЕНИЯ ЦВЕТОМ И РАЗМЕРОМ ШРИФТА
u Задание базового шрифта
Размер, цвет и стиль шрифта по умолчанию задается с помощью тэга < BASEFONT > и не применяется к заголовкам
Если базовый шрифт не задан по умолчанию используется шрифт с размером 3
атрибуты элемента < BASEFONT >
color =(цвет).Цвет шрифта.
size =(целое число от 1 до 7). Размер шрифта
face =(список разделенных запятыми названий шрифтов).
| Пример |
| <BASEFONT SIZE="2"> Устанавливаем размер базового шрифта равным двум. |
u Увеличение размера шрифта
Выполняется с помощью тэга:
< big >текст</ big >
| Пример |
| основной текст Увеличенный текст |
u Уменьшение размера шрифта
Выполняется с помощью тэга:
< small >текст</ small >
|
|
|
| Пример |
| основной текст Уменьшенный текст |
u Управление размером шрифта с помощью тэга <FONT>
Размер шрифта меняется с помощью атрибута SIZE тэга < FONT >
| Пример |
| Текст программы: <font size="1">size=1</font> <font size="2">size=2</font> <font size="3">size=3</font> <font size="4">size=4</font> <font size="5">size=5</font> <font size="6">size=6</font> <font size="7">size=7</font> |
| Результат выполнения: |
| size=1 size=2 size=3 size=4 size=5 size=6 size=7 |
В атрибуте SIZE можно указывать размер шрифта относительно текущего размера SIZE
| Пример |
| Текст программы: |
| <font size="+1">size +1</font> <font size="+2">size +2</font> <font size="-3">size -3</font> |
| Результат выполнения: |
| size +1 size +2 size -3 |
u Управление цветом шрифта с помощью тэга <FONT>
Цвет шрифта меняется с помощью атрибута COLOR тэга < FONT >
| Пример |
| Текст программы: |
| <FONT COLOR="#FF0000">FONT COLOR="#FF0000"</FONT> <FONT COLOR="red">FONT COLOR="red"</FONT> |
Таблица соответствия названий цветов и значений RGB.
| Black | #000000 | Green | #008000 |
| Silver | #C0C0C0 | Lime(салат) | #00FF00 |
| Gray | #808080 | Olive | #808000 |
| White | FFFFFF | Yellow | #FFFF00 |
| Maroon (кирпич) | #800000 | Navy(темн.син) | #000080 |
| Red | #FF0000 | Blue (син.) | #0000FF |
| Purple(бордо) | #800080 | Teal(морская волна) | #008080 |
| Fuchsia(роз.) | #FF00FF | Aqua(голуб.) | #00FFFF |
u Задание шрифтов с помощью тэга <FONT>
Имя шрифта задается с помощью атрибута FACE тэга < FONT >
<font face="имя шрифта"></font>
Задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.
| Пример |
| Текст программы: |
| <font face="Impact", "Arial Cyr", "Arial", "MS Sans Serif"> текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере. </font> |
| Результат выполнения: |
| текст будет выведен шрифтом "Impact" при наличии его на вашем компьютере. |
ТЭГИ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА
u Вывод отформатированного текста
Выполняется с помощью тэга < pre >текст</ pre >
Текст, находящийся между этими тэгами будет выведен в том же виде, в котором вы его напечатали в документе, т.е. со всеми пробелами и переносами.
| Пример |
| Текст программы: |
| <PRE>Отформатированный текст</PRE> |
| Результат выполнения: |
| Отформатированный текст |
u Комментарии в программе
Комментарии вставляются в программу с помощью тэгов:
<!--комментарии-->
Для MSIE еще можно применять тэги:
< COMMENT >комментарии</ COMMENT >
Эти тэги предназначены для вставки в документ HTML строк комментария, которые не отображаются браузером.
| Пример |
| <!--многострочный комментарий--> |
u Переход на следующую строку
Принудительный перенос строки выполняется с помощью тэга <br>
|
|
|
| Пример |
| Текст программы: |
| Выполняем<br>переход на<BR>следующую строку |
| Результат выполнения: |
| Выполняем переход на следующую строку |
u Запрет переноса:
Тэги < nobr >текст</ nobr > указывает браузеру, что вывод текста между ними должен выполняться одной строкой.
Если строка не помещается в окно браузера, появляется горизонтальная линейка прокрутки.
u Управление выравниванием текста
Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга
< DIV >текст</ DIV >
Атрибут ALIGN может принимать значения:
ALIGN="LEFT" - выравнивание по левому краю
ALIGN="RIGHT" - выравнивание по правому краю
ALIGN="CENTER" - выравнивание по центру
ALIGN="JUSTIFY" - выравнивание по обеим краям
| Пример |
| Текст программы: |
| <DIV ALIGN="CENTER">Текст, выравненный по центру</DIV> |
| Результат выполнения: |
| Текст, выравненный по центру |
Вообще, атрибут ALIGN можно применять во многих тэгах, например:
< P ALIGN="JUSTIFY" >текст</ P > - выравнивание абзаца
< TD ALIGN="CENTER ">текст</ TD > - выравнивание текста в ячейке таблицы
< H1 ALIGN="CENTER" >текст</ H1 > - выравнивание заголовка
и т.д.
Отцентрировать блок текста можно также и с помощью тэга
< CENTER >текст</ CENTER >
u Горизонтальная разделительная линия
Вывод горизонтальной линии осуществляется с помощью тэга < hr >
В этом тэге можно применять атрибуты:
ALIGN=LEFT, CENTER, RIGHT - выравнивание линии.
NOSHADE - линия без тени.
SIZE - толщина линии в пикселях.
WIDTH - ширина линии.
| Пример |
| Текст программы: |
| <HR> <HR ALIGN="CENTER" SIZE="10" WIDTH="50%" NOSHADE> |
| Результат выполнения: |
| обычная линия: |
| линия шириной 10 пикселей, выравненная по центру, шириной 50 процентов от ширины страницы, без тени: |
|
|
|
