Тэг <font>…</font> - задает цвет текста в конкретной части документа, размер шрифта и вид шрифта и имеет следующие параметры:
· face - задает название шрифта, которым требуется отобразить текст в документе;
· size - задает высоту символов, которая может находиться в пределах от 1 до 7;
· color - задает цвет отображаемых символов, который задается в 16-ичном виде, описанном раньше.
Выполните следующий пример на использование тега <font>…</font>.
<html>
<body>
<p>А это шрифт : <font face="Arial" color=#00FF00 size=4>Arial</font>
<font size=7 color=#FF0000 >Size 7</font>
<font size=3 color=#0000FF >Size 3</font>
<font size=+2>Size +2</font>
<font size=-1>Size -1</font>
</body>
</html>
В этом примере отобразятся надписи различного цвета, высоты и шрифта. В двух предпоследних строчках используется в размере знак. Таким образом, указываются относительные размеры шрифта, например, если размер вашего шрифта был 5, то при записи +1 размер шрифта станет 6, и также с минусами. Но если был шрифт 3, и указано +5 или -4, то размер не будет 8 или -1, а будет максимальный и минимальный.
Тег <basefont> применяется для установки базового шрифта на странице. Параметры у него аналогичны <font> например: <basefont size=4 color=red face="Arial">. Тег <basefont> не должен иметь закрывающую скобку. Его лучше располагать в начале документа, но если нужно действие на определенном участке текста, то можно использовать внутри него. Так как этот тег определяет базовый шрифт, то в примере размер шрифта будет откладываться от 4. По умолчанию, если не используется <basefont>, базовый шрифт имеет размер 3.
1. Откройте созданную на предыдущем уроке страницу (файл index.html).
2. Окрасим слова «Добро пожаловать» красным цветом.
<html>
<head>
<title>Первый пример </title>
</head>
<body>
Здравствуйте, это моя первая страница. <br>
<font color="#CC0000"> Добро пожаловать! :) </font>
</body>
</html>
3. Сохраните изменения и просмотрите страницу с помощью обозревателя Internet Explorer.
4. Зададим цвет текста документа в открывающем теге <body>: <body text= "#336699">. Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font>…</font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head>
<title> Второй пример </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
5. Установим цвета фона в тэге <body>: <body bgcolor="#000000">. Для наглядности здесь прописан черный цвет (если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше прописывайте цвет фона в body). Поэкспериментируете с цветами в данном примере.
<html>
<head>
<title> Третий пример </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Тег <p>...</p> происходит от начальной буквы слова paragraph (параграф или абзац). Все содержимое этого элемента, помещенное внутри <p>...</p>, отделяется от другого содержимого страницы несколькими пустыми строками. Абзацы можно выравнивать по левому или правому краю, а также по центру. За это отвечает параметр align, который может принимать значения left - по левому краю(<p align="left">текст</p>), right - по правому краю (<p align="right">текст</p>) и center - по центру (<p align="center">текст</p>). Кроме этих выравнивании существует еще одно, которое поддерживает пока только Internet Explorer, это justify - выравнивание по ширине страницы.
По умолчанию все абзацы выравниваются по левому краю, если конечно этот параграф не является вложенным в другой блок, выравнивание которого другое.
Теперь введем на нашей первой страничке параграфы и посмотрим наглядно, что получится.
<html>
<head>
<title>Четвертый пример </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
</body>
</html>
Подставьте в параграф параметры со значениями left и right и посмотрите изменения на странице.
Теги <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, <h6>...</h6>. Определяют заголовки разных размеров и имеют огромное значение при создании html – документа. Различаются они размером букв, при этом <h1> - самые большие, а <h6> - самые мелкие. Заголовки, как и абзацы, можно выравнивать через параметр align.
Для страницы «Мой первый сайт» задайте заголовок третьего уровня.
<html>
<head>
<title>Пятый пример</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с разными целями их применения.
</p>
</body>
</html>
Теги <big>...</big> и <small>...</small> предназначены для сокращения записи тегов типа <font size=+1>...</font>, который заменяется тегом <big> увеличивающим размер текста на единицу. Аналогично тег <small> уменьшает текст на единицу относительно текущего размера.
Тег <sub>...</sub> и <sup>...</sup>. Элементы создания записей формул, в которых требуется написание индексов и степеней. Тег <sub>...</sub> определяет нижний индекс, а тег <sup>...</sup> - верхний.
Добавьте на страницу «Мой первый сайт» формулы 
или 
.
<html>
<head>
<title>Шестой пример</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с разными целями их применения.
</p>
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9
</body>
</html>
Тег <b>...</b> является сокращением от bold, отображает шрифт жирным шрифтом. Запись тега <b>...</b> производится следующим образом:
<p>А это <b>жирный шрифт</b></p>
Тег <i>...</i> отображает текст наклонным и происходит от слова Italic (наклонный шрифт). Пример применения тега <i>...</i>:
<p>А это <i>наклонный шрифт</i> и <b><i>жирный наклонный текст</i></b>
Тег <u>...</u> выводит подчеркнутый текст, находящийся между тегами <u>...</u>. Пример применения тега<u>…</u>:
<p><u>Подчеркнуть текст</u>
Тег <s>...</s> отображает текст зачеркнутым шрифтом. Пример использования тега <s>...</s>:
<p><s>Зачеркнутый текст</s>
Тег <tt>...</tt> выводит текст, находящийся между тегами с постоянной шириной символа (имитация телетайпного текста). Пример:
<p>Текст из <tt>ТЕЛЕТАЙПА</tt>
Тег <pre>...</pre> отображает с постоянной шириной символы, не пропускает пробелы, табуляции и переносы строк, тем самым оставляет первоначальное состояние текста. Пример применения тега <pre>...</pre>.
<pre> 1 2 3 4 5
это будет хорошо выглядеть
</pre>
Тег <div>...</div> создает новый раздел в документе и чаще всего применяется для задания выравнивания текста из больших кусков. Для этого используется параметр align, который задает выравнивание внутри раздела. Пример применения <div>...</div>.
<div align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>
При отсутствии данного элемента пришлось писать в каждом абзаце <p align=right>...., что естественно трудоемко.
Тег <blockquote>...</blockquote> используется для приведения цитат, и выделяется увеличенным отступом с двух сторон. Пример отображения цитат.
<blockquote> Пришел, увидел, победил <br>
(Ю. Цезарь) </blockquote>
Тег <hr> вычерчивает горизонтальные линии и имеет следующие параметры:
· align - определяет выравнивание линии в документе и имеет свои обычные значения. По умолчанию линия отображается шириной во все страницу, и поэтому ее выравнивание не будет заметно;
· noshade - этот атрибут используется для вывода линии в виде полосы одного цвета. По умолчанию она отображается в виде канавки;
· size - устанавливает высоту линии в пикселях; width - устанавливает ширину линии в пикселях или в процентах от ширины внешнего элемента. Пример использования тега <hr>.
<hr width=80% align=left>
<hr width=50% align=center size=10>
<hr width=150 align=right noshade>
Тег <br> произошел от слова break line и служит для переноса строки в языке Html. Помогает начать новую строку, не прибегая к тегу <p>, который дает большой отступ от предыдущей строки. Пример работы тега <br>:
<p>Пораз-<br>рываем стро-<br>ку
Тег <nobr>…</nobr> сообщает браузеру о том, что текст, который находится внутри него ни в коем случае нельзя переносить, даже если в окно на каждую строку может уместится не больше одного слова.
В конце рассмотрения приведем полный текст HTML-документа, который демонстрирует все элементы текстового оформления.
<html>
<head>
<title>Седьмой пример</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с разными целями их применения.
</p>
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9
<p>А это <b>жирный шрифт</b></p>
<p>А это <i>наклонный шрифт</i> и <b><i>жирный наклонный текст</i></b>
<p><u>Подчеркнуть текст</u>
<p><s>Зачеркнутый текст</s>
<p>Текст из <tt>ТЕЛЕТАЙПА</tt>
<pre> 1 2 3 4 5
это будет хорошо выглядеть </pre>
<div align=right> <p>Абзац справа 1 <p>Абзац справа 2 <p>Абзац справа 3 </div>
<blockquote> Пришел, увидел, победил <br> (Ю. Цезарь) </blockquote>
<hr width=80% align=left>
<hr width=50% align=center size=10>
<hr width=150 align=right noshade>
<p>Пораз-<br>рываем стро-<br>ку
</body>
</html>
Оформите страницу по образцу:
