HTML. Хочу знать ВСЕ!

Добрый вечер всем!

Наверное у многих из вас сейчас не вечер, но когда я отправлял этот выпуск был вечер. Так что кому-то доброе утро, кому-то добрый день, ну а кому-то доброй ночи. Больше чем уверен, что многие читают этот выпуск именно ночью. Я сам много времени провожу в интернете именно по ночам, потому что днем не всегда есть время и возможность подключиться к сети.

Небольшое лирическое отступление

Как у вас сегодня настроение? Думаю что все нормально.

Целью этой рассылки я бы хотел сделать новые знакомства, общение. Так что пишите мне письма, будем знакомиться. Кроме web-строительства я еще интересуюсь электронным бизнесом. Особенно буду признателен за интересные предложения в плане сотрудничества, разработка возможно совместных проектов. В общем пишите побольше, я всегда рад новым знакомствам. Ведь интернет, как я считаю нужен прежде всего для общения (ну и конечно для бизнеса :-)). В свою очередь тоже хочу порекомендовать вам один очень хороший интернет-проект, который может помочь вам заработать немало денег. Я имею ввиду проект En101. Если еще не слышали о таком, то рекомендую посмотреть: ЗДЕСЬ

Также хотелось бы выслушать ваше мнение об этой рассылке, например что бы вам хотелось допустим видеть в ней того чего сейчас нет.

Несколько мнений я уже слышал, мне сказали (кстати справедливо), что эта рассылка не подходит для новичков, так как очень мало примеров и слишком все так сказать умным языком написано. Я с этим полностью согласен, в дальнейшем буду писать попроще, чтобы было понятно и новичкам в области HTML-кодирования.

Еще хочу выразить свое личное мнение об языке HTML. Возможно оно кого-нибудь успокоит, кто еще этого не понял. На самом деле, это все так просто, что просто смешно, когда некоторые хвастаются тем, что пишут сайты так сказать с чистого листа в блокноте без различных HTML-редакторов. HTML - это всего-лишь несколько десятков элементов и раза в 4-5 больше атрибутов. Причем запоминать их все необходимости нет вообще никакой. Достаточно просто понимать, как и какие элементы нужно применять в каждом конкретном случае. Ну и не помешает иметь под рукой пару тройку хороших книжек или справочников.

А со временем, когда вы будете уже создавать свои страницы, эти элементы будут сами собой запоминаться в вашей голове механической памятью. И залягут там так прочно, что если ночью вас разбудить с фонарем в лицо, то вы в течении 15 секунд в алфавитном порядке перечислите их все. По крайней мере у меня об HTML сложилось именно такое мнение. Помню когда сам его изучал, мне казалось что это настолько сложно, какие-то там теги, таблицы. Потом, как я почитал первые страниц 20 из книги меня просто разобрало в смех от того, что некоторые называют HTML языком программирования. На самом деле это обычный язык разметки текста (гипертекста). Даже документы Word'а например .doc устроены намного сложнее чем HTML-страницы.

Сегодня в выпуске

• Элементы, определяющие стиль шрифта: TT, I, B, BIG, SMALL, STRIKE, S и U
• Элементы управления шрифтами: FONT и BASEFONT
• Как стать мастером Web-дизайна за 15 минут

Элементы, определяющие стиль шрифта

Элемент TT используется для представления текста моноширинным шрифтом (таким как у пишущей машинки). Т.е. текст заключенный между тегами <TT> и </TT> будет выглядеть вот так:

Моноширинный шрифт, как у пишушей машинки. По-моему не очень красиво.

(Если вместо угловой закрывающей скобки у тегов вы видите 3 непонятных символа (это может быть например в программе THE BAT!), то сохраните эту страницу на диск, и откройте с диска.)

Если какой-нибудь отрывок текста нужно сделать курсивом, то достаточно разместить его между тегами <I> и </I>.

Это пример курсивного шрифта.

Для того чтобы выделить текст полужирным шрифтом, используется элемент B.

Пример полужирного текста, который заключен между тегами <B> и </B>.

Элемент BIG представляет текст большим шрифтом, а элемент SMALL соответственно маленьким:

Этот текст заключен между тегами <BIG> и </BIG>. А этот между тегами <SMALL> и </SMALL>.

В некоторых случаях бывает необходимо сделать текст перечеркнутым. Как раз для этого предназначены элементы S и STRIKE.

Этот текст заключен между тегами <S> и </S>. А этот между тегами <STRIKE> и </STRIKE>.

Как видите никакой разницы между ними нет, так что можно использовать и тот и другой для перечеркивания текста.

Ну и наконец элемент U служит для представления текста подчеркнутым (сокр. от UNDERLINE - подчеркнутый).

Так выглядит текст расположенный между тегами <U> и </U>.

Можно совмещать эти элементы, например если нужно отобразить текст полужирным курсивом, то необходимо заключить его между тегами элементов B и I. И выглядеть это будет вот так:

Полужирный текст курсивом

Для всех приведенных выше элементов наличие начального и конечного тега является обязательным, т.е. нельзя пропускать конечный тег, как например для элемента P.

Для элементов, определяющих стиль шрифта предусмотрены следующие атрибуты:

id, class - идентификаторы в пределах документа.

lang - информация о языке.

dir - направление текста.

title - заголовок элемента.

style - встроенная информаци о стиле.

Из всех приведенных выше элементов нежелательными являются только три: U, S и STRIKE. Но все равно рекомендуется вместо всех них использовать таблицы стилей. С использованием таблиц стилей можно достичь большего разнообразия эффектов.

Например, в следующем примере определяется правило для отображения текста в абзацах полужирным подчеркнутым курсивом в зеленой точечной рамке на белом фоне:

<HEAD>
 <STYLE type="text/css">
    P {background-color: #FFFFFF;    //белый цвет фона
       font-style: italic;           //курсив
       font-weight: bold;            //полужирный
       text-decoration: underline;   //подчеркнутый
       border-style: dotted;         //стиль рамки - точечный
       border-color: green}          //цвет рамки - зеленый
 </STYLE>
</HEAD>
<BODY>
 <P>...Текст...
</BODY>

И ВЫГЛЯДЕТЬ ОН БУДЕТ ВОТ ТАК...

Если вы не видите вокруг этого абзаца зеленой точечной рамки, значит ваш броузер не поддерживает это значение. Также причина может быть в том, что вы читаете это письмо в почтовой программе, попробуйте в таком случае сохранить его на диск и открыть в броузере.

Такого эффекта можно достичь только с помощью таблиц стилей, поэтому надеюсь вы понимаете, почему предпочтительнее использовать именно их.

Элементы управления шрифтами: FONT и BASEFONT

Элемент BASEFONT устанавливает базовый размер шрифта.

Элемент FONT изменяет размер и цвет шрифта для текста его содержимого. Изменения размера шрифта с помощью элемента FONT производятся относительно базового размера, установленного элементом BASEFONT. Если элемент BASEFONT не используется, по умолчанию базовым является размер 3.

Проще говоря, элемент BASEFONT устанавливает шрифт для всего документа HTML. А чтобы определить шрифт для какого-нибудь определенного отрывка текста, используется элемент FONT.

Атрибуты:

size - Устанавливает размер шрифта. Может принимать целое число от 1 до 7, как фиксированный размер шрифта. Или может быть представлен как относительное изменение размера шрифта. Например +1 означает шрифт на 1 размер больше чем базовый, -3 соответственно на три размера меньше.

color - Устанавливает цвет текста.

face - Этот атрибут определяет список разделенных запятыми названий шрифтов, поиск которых агент пользователя должен выполнить в порядке приоритета. Например, если первого в списке шрифта в системе нет, то используется второй и так далее. Если не установлен ни один из шрифтов приведенных в списке, то тогда используется шрифт по умолчанию.

Атрибуты, определяемые в другом месте:

id, class - идентификаторы в пределах документа.

lang - информация о языке.

dir - направление текста.

title - заголовок элемента.

style - встроенная информаци о стиле.

В следующей примере для отрывка текста устанавливается шрифт Verdana, размера 3 и красного цвета:

<BODY>
 <P><FONT face="Verdana" size="3" color="red">Текст</FONT>
</BODY>

Элементы FONT могут быть вложенными. Например если нужно в синем тексте вставить одно слово красным, то можно сделать так:

<BODY>
 <P><FONT face="Verdana" size="3" color="blue">Этот текст будет синим 
 <FONT color="red">Этот красным</FONT> А этот опять синим</FONT>
</BODY>

Так как элементы FONT и BASEFONT являются нежелательными, то лучше вместо них использовать таблицы стилей.

В следующем примере показано, как такого же эффекта (Verdana, 3, красный) можно достичь с помощью CSS:

<HEAD>
 <STYLE type="text/css">
    P {font-family: Verdana;      //шрифт - Verdana
       color: red;                //цвет текста - красный
       font-size: 12px}           //размер 12 пикселей
 </STYLE>
</HEAD>
<BODY>
 <P>...Текст...
</BODY>

Как стать мастером Web-дизайна за 15 минут.

Я не знаю, возможно вы уже слышали, что есть замечательная программа под названием MINI-SITE GENERATOR PRO. Так вот с помощью этой программы создать свой сайт может даже человек, который никогда не слышал, что такое HTML, и думает, что сайты это специальные программы, которые создаются ведущими компаниями по производству программного обеспечения, такими как Microsoft. Может это конечно сильно сказано, но с помощью этой программы создать сайт действительно легко. Все что нужно сделать, это ввести нужный текст в определенные поля и нажать кнопку СГЕНЕРИРОВАТЬ. И профессионально выполненный, по всем правилам дизайна, рентабельный мини-сайт готов. После этого можно смело размещать его в сети, и не бояться, что вам будут приходить письма вида: "Друг, тебя кто учил сайты-то делать вообще? Я чуть со стула не упал когда открыл твой сайт в своем броузере."

Особенно полезна эта программа для тех, кто занимается электронной коммерцией и использует принцип так называемого "письма-убийцы". Даже если вы не занимаетесь электронной коммерцией, то с помощью этой программы вы также сможете открыть свой бизнес в сети, причем буквально за пару часов. Как это сделать расскажу чуть позже.

Программа MINI-SITE GENERATOR PRO состоит из 7 мощных генераторов с примерами:

• Генератор Рекламного Письма
• Генератор Страницы Заказа
• Генератор Страницы Доставки
• Генератор Попандера
• Генератор Анонс Бокса
• Генератор Бешенного Ценника
• Генератор Вымогателя Подписки

Если некоторые из этих понятий вам незнакомы, то в самой программе есть подробное описание всего этого в простой доступной форме. Разобраться сможет каждый.

В общем по своему опыту могу сказать что достоинств у этой программы очень много. А недостаток всего один. Она стоит денег. Так как такую информацию никто бесплатно вам нигде не предоставит. Я сам искал ее на различных сайтах бесплатного софта, но нигде не нашел. Так что пришлось купить.

Но скажу честно, я не пожалел что купил ее. Кстати ее цена в сети в основном составляет 5 долларов. Но автор разрешает продавать и по цене не ниже 4.7 доллара.

Теперь о том, как же с ней можно заработать денег.

Каждый, кто покупает эту программу, совершенно бесплатно получает право на ее перепродажу. Т.е. вы буквально за несколько дней сможете вернуть себе потраченные деньги, да еще сверх того неплохо заработать на ее продаже. Причем мини-сайт для заказа можно легко создать с помощью этой же самой программы.

Например мой сайт (который кстати тоже создан с помощью MINI-SITE GENERATOR PRO) выглядит вот так:
http://www.nbusiness.ru/pay/mn/

На нем можно почитать более подробную информацию об этой программе.

Вообще, как человек по натуре не жадный, я сразу установил цену на нее 130 рублей. И с моего сайта она продается за 130 рублей, хотя сам покупал ее за 5 долларов.

В общем я тут подумал, и решил. Почему бы не сделать приятный сюрприз для читателей моей рассылки.

По этой ссылке можно купить эту программу всего за 99 рублей:
http://www.nbusiness.ru/pay/mn/ms.htm

Но, это между нами. Эта ссылка будет доступна только в этом выпуске рассылки и больше нигде.

Ну вот думаю, что на этой ноте мы на сегодня и закончим.

До скорых встреч!

С уважением,
Виталий Прохоренко

Пишите: n_biz@mail.ru.

Copyright © Виталий Прохоренко, 2005.