Просмотрите обновления
Задание цвета фона и текста
Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.
Внесите изменения в файл schedule.html:
<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT>
</P>
</BODY>
</HTML>
Для форматирования текста используются следующие элементы (табл. 1).
Таблица 1
N |
Наименование |
Теги |
Примечания |
1 |
Жирный |
<B></B> |
|
2 |
Усиленное выделение |
STRONG Пример:Я <STRONG>сильный</STRONG>, но легкий.
|
Текст будет выделен жирным шрифтом. Этот элемент предпочтительнее предыдущего. |
3 |
Курсив |
<I></I> |
|
4 |
Подчеркнутый |
<U></U> |
(часто не поддерживается) |
5 |
Перечеркнутый |
<STRIKE></STRIKE> Может использоваться более короткий тег <s> |
(часто не поддерживается) |
6 |
Увеличение шрифта относительно текущего |
<BIG></BIG> аналогичен по действию тегу <FONT SIZE="+1"> Текст, заключенный между начальным и конечным тегами, отображается увеличенным шрифтом (относительно текущего. |
|
7 |
Уменьшение шрифта относительно текущего |
Тег <SMALL> аналогичен по действию тегу <FONT SIZE="-1"> Текст, заключенный между начальным и конечным тегами, отображается уменьшенным шрифтом (относительно текущего). |
|
8 |
Объединение параметров текста |
Вложенные теги типа <i> <b> ВЫДЕЛЯЕМЫЙ ТЕКСТ </b> </i> позволяют одновременно выполнять несколько видов форматирования. Текст одновременно становится и жирным и наклонным. При использовании вложенных тегов необходимо, чтобы открывающие и закрывающие теги размещались в строгом порядке: <тег 1><тег 2><тег 3>Текст</тег 3> </тег 2></тег 1> |
|
9 |
Текст с новой строки |
<br> |
Перенос текста на новую строку без создания нового абзаца |
10 |
Текст с новой строки с пробелом в одну строку |
<p> </p> |
Строчки текста через строку |
11 |
Текст на кнопке |
<button> текст на кнопке </button> |
Кнопка с текстом |
12 |
Индексы |
<SUB></SUB> Теги формирования подстрочного и надстрочного текстов <sub> </sub> и <sup> </sup> позволяют, например, записать формулы: x23 H2O E=mc2 h=gt2/2 |
Верхний индекс |
|
<SUP></SUP>
|
Нижний индекс |
|
13 |
Печатная машинка |
<TT></TT> <TT>ПРИЕДУ ПОЕЗДОМ ТЧК ПОДРОБНОСТИ ПРИ ВСТРЕЧЕ ТЧК</TT> |
(изображается как шрифт фиксированной ширины) |
14 |
CODE, SAMP |
Данные элементы оформляют текст, находящийся между начальным и конечным тегами, как формулу или программный код. <CODE> n=((x*15-z/1.25)/4)^5 </CODE> |
|
15 |
Форматированый |
<PRE></PRE> Теги предварительного форматирования <pre> </pre>дают возможность сохранить формат набранного текста,например, сделать несколько пробелов между словами. Без использования рассматриваемого тега пробелы, отступы, табуляция и переводы строк браузером игнорируются. |
(сохранить формат текста как есть) |
16 |
Ширина |
<PRE WIDTH=?></PRE> |
(в символах) |
17 |
Центрировать |
<CENTER></CENTER> [*] |
(как текст, так и графика) |
18 |
Размещение текста |
<p align="center">Текст</p"> и <p align="right">Текст</p"> |
Текст размещается в разных частях страницы |
19 |
Мигающий |
<BLINK></BLINK> |
(наиболее осмеянный элемент) |
20 |
Текст как цитата |
<CITE></CITE> Цитируемый текст отображается курсивом. Как сказал классик:<BR> <CITE>"Любви все возрасты покорны"</CITE> |
|
21 |
Изменение размера шрифта в заголовках |
<h1><h1> Теги заголовков вида <h1> </h1>предназначены для изменения размера шрифта в заголовках |
|
22 |
Размер шрифта |
<FONT SIZE=?></FONT> |
(от 1 до 7) |
23 |
Изменить размер шрифта |
<FONT SIZE="+|-?"></FONT> |
|
24 |
Базовый размер шрифта |
<BASEFONT SIZE=?> |
(от 1 до 7; по умолчанию 3) |
25 |
Цвет шрифта |
<FONT COLOR="#$$$$$$"></FONT>
Цвет можно задавать как с помощью символьных меток типа red, green, так и с помощью шестнадцатеричного кода типа #008080, #FF0080. Теги определения цвета вида <font color=red> </font> и <font color=#008080> </font> используются для задания нужного цвета текста. |
|
26 |
Цвет фона |
Тег типа <body bgcolor="white" text="black" > позволяет задать цвет фона страницы и цвет текста (чернил). Следующий пример демонстрирует смену белого (white) фона страницы на желтый (yellow) фон. В данном случае был использован тег <body bgcolor="yellow" text="black">. Чтобы установить красный цвет текста следует использовать тег <body bgcolor="white" text="red"> |
|
27 |
Выбор шрифта |
<FONT FACE="***"></FONT> |
|
28 |
Многоколоночный текст |
<MULTICOL COLS=?></MULTICOL> |
|
29 |
Пробел между колонками |
<MULTICOL GUTTER=?></MULTICOL> |
(по умолчанию 10 точек) |
30 |
Ширина колонки |
<MULTICOL WIDTH=?></MULTICOL> |
|
31 |
Пустой блок |
<SPACER> |
|
32 |
Тип пустого блока |
<SPACER TYPE=horizontal| vertical|block> |
|
33 |
Величина пустого блока |
<SPACER SIZE=?> |
|
34 |
Размеры пустого блока |
<SPACER WIDTH=? HEIGHT=?> |
|
35 |
Выравнивание |
<SPACER ALIGN=left|right|center> |
|
36 |
Отображения текста, который пользователь должен набрать на клавиатуре |
<KBD></RBD> Чтобы войти в систему наберите <KBD>"GUEST"</KBD> заглавными буквами. |
|
37 |
Обозначение в тексте переменной |
<VAR></VAR> Переменная <VAR>IndexZ</VAR> равна 5. |
|
38 |
Отлиновки- горизонтальные линии |
Непарный тег <hr> обеспечивает создание горизонтальной разделительной линии. С помощью атрибута типа <hr hoshade size=10> можно изменять ширину разделительной линии. Ширина задается в пикселях. С помощью атрибута color можно изменять цвет отлиновки <hr hoshade size=5 color="#33CC33""> |
Отлиновки - горизонтальные линии, служащие для отделения одной части текста от другой. |
Дополнительные примеры
Пример 1. Добавим к тексту заголовок. Воспользуемся снова программой Блокнот и наберем новый текст.
<html>
<head>
<title>web-страница2</title>
</head>
<body>
<font size="5"><b>Сергей Соловьев</b><br>
родился 27 марта 1954 года<br>
<i>окончил в 1968 году среднюю школу №137
</i></font>
</body>
</html>
Файл сохраним как w2.html.
В этом примере текст заголовка помещается между тегами <title> </title>. Текст заголовка- web-cтраница 2.
<font size="5"><b>Сергей Соловьев</b><br> означает:
<font size="5"> - высота шрифта 5;
<b> - жирный шрифт;
<br> - переход на новую строку;
<i> - курсив.
Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 6).
Рис. 6. Web-страница с абзацами и разными шрифтами
Пример 2. Возьмем за основу предыдущий пример и используем форматирование текста. Пусть только каждая запись будет с новой строки. Файл сохраним как w3.html.
<html>
<head>
<title>web-страница3</title>
</head>
<body>
<font size="5">
Сергей Соловьев
<p>родился 27 марта 1954 года</p>
<i><p>окончил в 1968 году среднюю школу №137</p>
</i></font>
</body>
</html>
Если запустить Internet Explorer, то web-станица будет выглядеть следующим образом (рис. 7).
Рис. 6. Web- страница с записями через строку
Задание на самостоятельное выполнение.
Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях