Самоучитель по HTML, урок №4

В этом уроке самоучителя по HTML познакомлю вас с эфектами приминяемых к тексту.
Один из них самый нужный и интересный - тег-контейнер <font></font>,
С помощью его можно bpvtybnm размер, цвет, шрифт определёного участка текста, посмотрим примеры:

Изменить цвет текста отдельного участка можно припомощи атрибута color тега font вот так: <font color="#ff0000"></font> значения можно подставлять теже, что и к фону страницы.
Также можно скачать библиотеку цветов с сайта http://www.artlebedev.ru/tools/colors/) Посмотрим в действии:

        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        Это обычный текст,
        <font color="#ff0000"> этот красный</font>,
        <font color="green">а этот зелёный</font> 
        </body>
        </html>

Далее помотрим что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
Это обычный текст,
этот красный,
а этот зелёный
готово

При помощи атрибута size тега font можно изменить размер шрифта отдельного участка текста. <font size="+2"></font> Изминение размера текста, по отношению текста по умолчанию.
Этот атрибут принимает значения от "-2" до "+4" включительно. Размер "+0" задавать не обязательно, так как он по умолчанию. Посмотрим в действии:

моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
готово

При помощи атрибута fase тега font можно изменить шрифт отдельного участка текста.
<font fase="verdana"></font> Задаём шрифры текста, т.е. придаём более прикольный вид тексту: Посмотрим в действии:

        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        Это обычный текст,
        <font face="geneva">А это Times </font>,
        <font face="BancoDi" > А это Tahoma</font>

        </body>
        </html>

Далее помотрим что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|
Это обычный текст,
А это текст написанный шрифтом Times,
А это текст написанный шрифтом Tahoma
готово

Я привёл пример только двух шрифтов, на самом деле их сотни или даже тысячи!!!
  • Times;
  • Times New Roman;
  • Arial;
  • Helvetica;
  • Courier;
  • Verdana;
  • Tahoma;
  • Cosmic Sans;
  • Garamond

Просмотреть их более детально можно нажав на компьютере кнопку "пуск" ⇒ панель управления ⇒ шрифты.
НО ПОМНИТЕ, что те шрифты которые есть у вас, их может не быть у ваших посетителей, и браузер их просто проигнорирует. Так-же некоторые шрифты подходят только к латынским буквам, а с кирилицей игнорируются или на оборот! Теперь обощим весь тег <font ></font>, я демонстрировал по одному атрибуту хотя, можно его использовать и так: <font color="red" size="+1" face="geneva">...текст...</font>

До этого места я вам рассказывал что такое HTML, но ни слова о том что разновидностей HTML наверное десяток, скорее всего не разновидностей, а модификаций прогресса, например сначала был просто HTML, потом появился HTML-2, потом 3, 4, а сейчас рулит пятая версия. Например в первой было только текст и ссылки, дальше появислись шрифты, измнения цвета и размеров, картинки, формы, таблицы и так далее. С каждой новой версией добавлянили новые теги, а вот начиная с HTML-4.01 некоторые теги не рекомендуются к использованию, например тег center, в место него нужно использовать атрибут align. А в HTML-5 не то что center есть устаревшим, но и атрибут align, все центрирование происходит при помощи CSS(каскадных таблиц стилей). Таблицы стилей это вспомогательный язык для HTML. Так-же в HTML-5 устаревший тег FONT, в место него текст нужно помещять в тег P, DIV или SPAN, с первыми мы закомы ранее, а с последним поработаем познее.

В прошлом абзаце я рассказал что версий HTML много, на данном этапе вам волноваться не нужно, потому что на сегоднешний день работают версии HTML-3.2, HTML-4.01 и HTML-5. Каждом HTML-документе нужно указывать версию HTML, если этого не сделать, то браузер поймет что это HTML-3.2, а в этой версии не есть устаревшими тег center и атрибут align, а значит ни каких ошибок в коде мы не делаем.

Я не собираюсь на данном этапе учить вас CSS, но обстоятельства меня вынуждают. Вы занете что тег DIV может содержать внутри себя другие P и DIV, а вот тег P не может содержать в себе P и DIV, а почему так вы не знаете?. Все очень просто, теги делятся на три категории: блочные, строчные и смешаные. Например тег P есть блочным а блочный в блочный вставлять нельзя, тег FONT и CENTER есть строковыми, строковые теги помещаются как сами в себя так и в блоковые, но блоковые нельзя помещать внутрь строковых, а например тег DIV он смешанный может использоваться как блоковый так и строковый. Если вы ничего не поняли, это не важно, т.к. это нужно только тем кто изучает CSS...

Так-же забегу далеко-далеко вперёд и покажу пример из "CSS"(каскадные таблицы стилей):
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <div style="FONT-FAMILY: verdana, geneva, arial, sans-serif;
        FONT-SIZE: 12px">
        Всё содержание страницы
        </div>
        </body>
        </html>

Теперь разберём этот "div":
style - данный атрибут означает что мы применяем стиль
FONT-FAMILY - шрифты, обратите внимание на последовательность, если нет "verdana", то отображается "geneva", если нет "geneva" то отображается "arial", а если нет и "arial" то "sans-serif" - шрифт по умолчанию на вашем компьютере.
FONT-SIZE - высота текста в пикселях, советую самостоятельно поиграться с размером текста и шрифтами.

В HTML-5 есть устаревшими почти все атрибуты, которые изменяют цвет, размер, шрифты и многие другие, все это заменяют каскадные таблицы стилей. Я продемонстрировал тег-контейнер SPAN, он появился еще в HTML-3.2, но толом ни кем не использовался, потому что он сам по себе не выполняет ни каких действий, а вот начиная с HTML-5 он просто необходим, т.к. в нем можно использовать атрибут style , а с учетом того что он строковый, то ему вообще нет цены!!!
Все те значения атрибутаstyle можно использовать с любым тегом, в том числе и SPAN или даже BODY.

До этого момента я не расказал одного, что HTML язык довольно либерален, т.е. код можно писать так:<html>, а можно так <HTML>, и даже так:<HtMl>, обратите в нимание на буквы, они написаны: первый пример - строчными; второй - заглавными; третий - в перемешку, для HTML это без разницы, а для "CSS"(каскадные таблицы стилей) строгий синтаксис, самостоятельно расмотрите где какие символы писать, в том числе и знаки пунктуации...
Подбить итог хотел-бы следующим: мы закончили изучать цвета и размеры текста. Настоятельная рекомендация, при написании страниц не использовать едкие цвета типа ярко-зелёный и т.д. пожалейте глаза свои, друзей и других посетителей, размеры текста использользовать тоже этичные, по меньше тэгов <h1> и <h2>, в тоже время они должны быть обязательно, т.к. поисковые системы при индексации страниц обращают на них внимание как на "ключевые слова".
Ещё одна глава о тексте, тоже нудная, но нужная. Тяжело в учении - легко в бою!!! Согласны? Тогда вперёд!!!


Перейти к выбору следующей страницы