Но я все откладывал эту заметку на-потом. Ждал. Ну мало ли. Вдруг чего случится плохое. У нас на Зиусе, знаете ли, есть принципы. И два основных гласят: 1) честность дороже любых денег, 2) давать самое лучшее™. Даю:

Вот лучший хостинг-провайдер с полностью бесплатным траффиком.

Искал я его относительно долго: пару-тройку дней. Суть здесь в том, что большинство существующих хост-провайдеров на словах декларируют "бесплатный трафик", а на деле - пускают в ход оговорки типа: "бесплатный, при условии соотношения исходящий/входящий не более ...", "бесплатный, при условии соотношения российский/зарубежный не более ...". Для меня это было неприемлемо. По двум причинам:

1. Поисковые боты Зиуса активно используют именно входящий трафик (для анализа обновлений сайта, следует предварительно скачать его содержимое в базу данных).
2. Пресловутые DDoS-атаки (коих Зиус за истекший период с честью вынес пару-тройку) потребляют неимоверное количество именно входящего трафика, увеличивая упомянутое выше соотношение. Иными словами, ваш проектируемый бюджет живет до первой DDoS.

В общем, еще раз: Зиус работает на серверах хорошего хостинг-провайдера. На VPS. Можете оценить скорость. И это при том, что тариф не самый дорогой из существующих, а в фоновом режиме постоянно работают роботы Зиуса.

Кстати, хороший пример: два широко-известных скрипта сопоставимой (практически одинаковой) функциональности - Узнайте, сколько тысячников читают вас (на момент написания был недоступен) и Узнай у кого в друзьях из Золотой Тысячи ты находишься. Сравните время исполнения срипта. Наш - работает на нашем VPS(VDS), где работает другой - не знаю, лень смотреть. Думаю, выводы очевидны.

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

Я веб-мастер с многолетним стажем. Я помню бета-версии phpBB. Я писал плагины для форума phpBB2, для CMS XOOPS, для движка интернет-магазина oscommerce.com. Я понимаю о чем пишу, когда пишу что хостинг подходит для нормальной работы. К моим словам стоит прислушаться.

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

Что еще надо веб-мастеру - я не знаю.

Роман, администратор проекта.

Очень подробная статистика. Не тормозит. Счетчик не видим посетителям.

Зиус рекомендует.

Комбинированный холодильник высотой 2,00 м с электронным управлением на LCD дисплее.

...В режиме Action Freeze происходит снижение температуры морозильной камеры со стандартного рекомендованного значения -18С до -25С, что обеспечивает особенно быстрое замораживание, предотвращая разрыв клеток продуктов, сохраняя, тем самым, клеточный сок и вкусовые качества продуктов...

Производство: Швеция.

Сайт производителя: http://electrolux.ru/

Приобрести на www.telelux.ru

Для просмотра содержимого интернета разумный человек начала XXI века использует Firefox потому что:

• Firefox проще и понятнее в настройке и использовании чем остальные браузеры, включая Internet Explorer.
• При этом Firefox функциональнее остальных браузеров.
• Firefox отображает веб-страницы корректно, в соответствием с международными стандартами и замыслом создателей этих страниц.
• Firefox быстр.
• Firefox защищает вас от злоумышленников в сети.
• Firefox имеет такой внешний вид, какой угоден его пользователю.
• Firefox расширяем. Вы можете дополнить его практически любой нужной вам функциональностью. И это может дать значительную экономию вашего времени. И это действительно так и есть.

Я сейчас хочу написать очень искренне и без единой капли пустого пафоса:

Я НЕ ПОНИМАЮ ЗАЧЕМ ПОЛЬЗОВАТЬСЯ ДРУГИМИ БРАУЗЕРАМИ, ЕСЛИ ЕСТЬ ЛУЧШИЙ.

Я действительно не понимаю какой в этом смысл. Единственное что мне приходит в голову - это то, что многие люди просто не знают о существовании Firefox-а. Давайте поможем им.

Вы можете:

1. Дополнить список достоинств лучшего в мире браузера. Некоторые из них будут внесены, как обновления, в текущий текст.
2. Продублировать у себя этот текст полностью и/или разместить баннер, ведущий на эту страницу.
3. Установить Firefox на свой компьютер, если вы еще не сделали это, и убедиться в том, что всё написанное выше - чистая правда.

Баннер:

Код баннера:

<a href="http://xeus.ru/firefox.html"><img src="http://xeus.ru/images/best/ff_8_ex.png" alt="Firefox - лучший" style="width:350px; height:98px; border:0;" /></a>

Зиус_Студия - сообщество веб-разработчиков. Если вам нужно развернуть представительство в интернете - свяжитесь со мной через форму на 3eus.ru или отправьте письмо по одному из указанных ниже адресов электронной почты.

Роман, администратор проекта "Зиус - портал лидеров".

Если вы уже знакомы с основами HTML и вам требуется не учебник, а справочник по HTML - просто перейдите в конец страницы к справочнику-шпаргалке по основам HTML.

Написано специально для проекта "Зиус". Копирование учебника запрещено. Все предложения и замечания приветствуются здесь.

Насколько я понимаю, тема "как мне разместить баннер в моем блоге?" или "как вставить кнопку в ЖЖ?" - тема вечная. Ну а коли так, то ниже по тексту - HTML-справочник-учебник. Простой и полезный, как и всё на Зиусе. Справочник будет находиться по этому адресу всегда - смело добавляйте в избранное и ставьте на него ссылки - это надежно, это навсегда и это лучшее что можно найти в сети.

Важное примечание: ниже по тексту будет множество примеров html-кода и примеров того, как он отображается в программе которой вы просматриваете интернет. Для максимального усвоения ниже-изложенного материала я рекомендую все приведенные в учебнике примеры повторять в ваших блогах прямо по ходу изучения материала. Если у вас еще нет своего блога, вы можете завести его себе в сервисе блогов - livejournal.com (на регистрацию уйдет 2-3 минуты) - этот сервис идеально подходит для наших с вами целей, ибо предоставляет пользователям максимальную свободу в применении html-кода при создании веб-страниц.

Итак, начнем. Во-первых:

HTML - язык разметки. На этом языке создатель веб-страницы объясняет программе, с помощью которой вы просматриваете её содержимое, как эта страница должна выглядеть. Размечает для неё содержимое при помощи тегов.

Тег (от англ. tag - метка). Тэги - это метки, метки - это теги. Например мы можем пометить текст меткой strong:

<strong> Strong переводится с английского как "сильный", "мощный". Этим тегом помечается текст который нужно выделить жирным шрифтом </strong>

и тогда текст, помеченный таким образом, в окончательном варианте отобразится так:

Strong переводится с английского как "сильный", "мощный". Этим тегом помечается текст который нужно выделить жирным шрифтом

Обратите внимание на то, что один тег открывает, а другой закрывает выделяемый текст, и их написание отличается наличием символа   /  в закрывающем теге. Это правило существует во избежание путаницы при разметке веб-страниц, где число тегов может достигать сотен и даже тысяч. В данном случае, эти теги как бы говорят нам: от сюда и до сюда текст выделяется жирным шрифтом. То есть от <strong> и до </strong>. Именно по символу   /  программа, с помощью которой вы просматриваете интернет, и отличает открывающий тег от закрывающего.

Для раскрытия темы: мы сейчас говорим об HTML-тегах, но HTML это лишь один из языков разметки. Существует и достаточно популярен, например, так называемый BB-code - язык разметки для форумов. На этом языке выделение жирным шрифтом выглядит примерно так:

[b] Этот текст на форуме отобразится жирным шрифтом [/b]

Как видите, скобки здесь не угловые а квадратные, и вместо strong - символ b, но суть осталась та же: есть открывающий тег, есть закрывающий тег, и есть текст между ними. Думаю с этим понятно.

Часто-используемые для разметки текста HTML-теги:

<strong>Жирный шрифт</strong> - текст помеченный таким образом отобразится браузером (программой для просмотра веб-страниц) так: Жирный шрифт.

<em>Наклонный шрифт</em> - отобразится так: Наклонный шрифт.

<u>Подчеркнутый шрифт</u> - отобразится так: Подчеркнутый шрифт.

<s>Перечеркнутый шрифт</s> - отобразится так: Перечеркнутый шрифт .

Теги можно комбинировать, например:

<strong><em>Жирный наклонный шрифт</em></strong> - отобразится так: Жирный наклонный шрифт.

Обратите внимание на то, что теги буд-то вложены друг в друга. То есть текст окруженный тегом <em> вложен в тег <strong>. Это правильный способ комбинировать теги. Как матрешки - одно в другом.

Разметка заголовков.

Вы можете пометить какую-либо часть текста, как заголовок. Например:

<h4>Это заголовок четвертого уровня</h4> - выглядит как:

Это заголовок четвертого уровня

Относительно заголовков надо запомнить две вещи:

1. Существует 6 уровней заголовков. Причем заголовок 1-го уровня - наибольший по размеру шрифта, а заголовок 6-го уровня - наименьший.
2. Заголовки всегда отображаются на отдельной строке.

Потренируйтесь в своих блогах заключать текст в теги от <h1>Ваш текст</h1>, до <h6>Ваш текст</h6>, и посмотрите на что это будет похоже.

Цвет текста.

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

Мы пойдем путем правильности. И сразу пример.

Текст помеченный вот таким образом: <span style="color:red">Очень красный текст</span> отобразится как Очень красный текст, а <span style="color:green">Зеленый текст</span> как Зеленый текст.

Почему так случилось? Давайте разберемся с "Очень красным текстом".

Во-первых я взял текст - Очень красный текст.

Во-вторых я его пометил тегом span (не забываем что HTML - это язык разметки, и мы с вами метим с его помощью текст). То есть разместил этот текст между <span> и </span> и таким образом этот самый текст пометил. Тег span - это особенный тег, в отличие от большинства других тегов он не указывает браузеру каким образом отображать тот или иной текст, он лишь сообщает что текст заключенный в нем помечен и к этому тексту можно( и нужно :) применить стиль.

Стиль - набор свойств помеченного текста. То есть когда мы задаем для текста стиль, мы:

1. Помечаем текст.
2. Определяем свойства которыми должен обладать помеченный текст. Делаем мы это при помощи атрибута style.

Посмотрите на пример еще раз: <span style="color:red">Очень красный текст</span>. Как можно видеть, конструкция style="color:red" расположена внутри угловых скобок ограничивающих тег span. И если сформулировать всё это правильно, то это будет звучать как "тег span имеет атрибут style со свойством color имеющим значение red". В каком-то смысле атрибут конечно тоже является свойством, но для нас вся эта семантика не очень важна. Для нас намного важнее то, что внутри любого тега мы можем поместить атрибут style, с помощью которого затем задать различные свойства. В приведенном выше примере это свойство - цвет текста.

И в продолжение темы стиля. Несколько выше я упоминал о "правильности" разметки. Ну так вот, если не вдаваться в подробности, то "делать текст подчеркнутым" с помощью тега <u> не совсем "правильно". Это работает, это по-своему удобно и наглядно, но... В общем, если вы из тех людей (к которым отношусь и я), которые любят чтобы "всё было по правилам", то вы можете вместо конструкции

<u>Подчеркнутый текст</u>

написать

<span style="text-decoration:underline">Подчеркнутый текст</span>

результат будет тот же самый:

Подчеркнутый текст

Вы можете задать сразу несколько свойств внутри одного стиля, разделяя их точкой-с-запятой. Например:

<span style="text-decoration:underline; color:red">Подчеркнутый красный текст</span>

отобразится как

Подчеркнутый красный текст

Еще раз о том что я сделал:

1. С помощью тега span отметил часть текста.
2. Поместил внутри тега атрибут style.
3. Задал этому атрибуту свойства text-decoration и color, которым присвоил значения underline и red соответственно.

На самом деле тема стилей не то чтобы необъятна, но очень и очень велика, и потому просто суммируем изученное:

<h4>Это заголовок</h4> для текста, который <s>выглядит</s> <span style="text-decoration:line-through">или если правильно</span> <strong>отображается</strong> <span style="color:blue">разным <em>начертанием</em></span> и <span style="text-decoration:underline; color:green">разным цветом</span>

вот так это отобразится:

Теперь вы это умеете! :)

Ах да. Чуть было не забыл про

БОЛЬШИЕ КРАСНЫЕ БУКВЫ =))

Вы можете сделать их через стиль, задав ему нужные нам свойства font-size и color, а так же опционально font-weight, чтобы это выглядело примерно так:

<span style="font-size:24px; color:red; font-weight:800">БОЛЬШИЕ КРАСНЫЕ БУКВЫ =))</span>

Можете задать свойству font-size значение не 24px а 96px, а текст "БОЛЬШИЕ КРАСНЫЕ БУКВЫ =))" заменить на что-нибудь, на что хватит вашей фантазии :)

Те же самые "БОЛЬШИЕ КРАСНЫЕ БУКВЫ" вы можете сделать и без внедрения стиля:

<font size="5" color="red"><strong>БОЛЬШИЕ КРАСНЫЕ БУКВЫ =))</strong></font>

Результат будет идентичен предыдущему, но такая разметка будет "неправильной" ибо тег font, как и теги u и s, считается "устаревшим". Я привел здесь этот вариант только потому, что как мне кажется он более удобен для запоминания. То есть я вполне допускаю что вы забудете добавить эту страницу в свои закладки (разместить на неё ссылку у себя в блоге, сохранить на жесткий диск, и пр.) и конечно же вы не запомните с первого раза про всякие там стили, атрибуты и свойства :) Зато может быть запомните что <font size="5">такой текст отобразится большим шрифтом</font>. Тут кстати основное правило есть: чтобы запомнить - нужно применять. Начните применять изученное прямо сейчас - это хороший подход к теме.

На самом деле если вы прочли и усвоили все вышенаписанное настолько, что можете это применять, то можете считать вы уже знаете основы HTML. Хотя лукавлю конечно :) Основа HTML это совсем не "БОЛЬШИЕ КРАСНЫЕ БУКВЫ", основа и суть HTML это

Гиперссылки.

Буквы "HT" в аббревиатуре HTML это начальные буквы слов Hyper Text, гипертекст, то есть Больше-Чем-Просто-Текст (это, конечно, некая поэтическая вольность с моей стороны, но суть передана). Это самое Hyper обозначает ни больше ни меньше, как способность текста расширяться путем ветвления. И это самое раширение ветвлением происходит именно при помощи гиперссылок.

Гиперссылки - основа HTML и основа Интернета. Если не будет гиперссылок - не будет Интернета. Интернет может обойтись без БОЛЬШИХ КРАСНЫХ БУКВ, но без гиперссылок ему не обойтись. Чтобы Интернет мог существовать, мы все должны ставить ссылки. Ссылки - это наше всё. Ставить ссылки это важно и это очень просто. Cсылка на этот справочник-учебник выглядит так:

<a href="http://xeus.ru/hypertext.html">Справочник-учебник по основам HTML (краткое руководство)</a>

и отобразится в вашем браузере (программе, с помощью которой вы просматриваете веб-страницы в интернете) как:

Справочник-учебник по основам HTML (краткое руководство)

Коротко и ясно. Разберем почему так всё неожиданно хорошо и просто получилось (усложним то есть ;) Итак:

1. Я написал текст "Справочник-учебник по основам HTML (краткое руководство)"
2. Этот текст я пометил тегом a, который означает что помеченный им текст не просто текст, а Нечто-Большее-Чем-Просто-Отображаемый-Текст, а конкретнее - гиперссылка на этот замечательный учебник. Тем самым мы как бы говорим браузеру: это не просто фраза из нескольких слов, это целый учебник и справочник в одном флаконе, надо просто посмотреть по ссылке указанной в...
3. ...в атрибуте href тега a. В нашем случае этот атрибут имеет значение http://xeus.ru/hypertext.html, которое является адресом данной страницы в сети Интернет.

Я уже говорил что применение - основа понимания. Поставьте эту ссылку у себя в блоге прямо сейчас.

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

<a href="http://xeus.ru/hypertext.html"><strong>Справочник-учебник по основам HTML (краткое руководство)</strong></a>

Отобразится такой текст, в соответствии с обрамляющим его тегом strong, жирным шрифтом:

Справочник-учебник по основам HTML (краткое руководство)

При оформлении веб-страниц часто приходится решать задачу отображения ссылок не синим шрифтом с подчеркиванием (так по умолчанию отображаются ссылки в большинстве браузеров), а как-то еще. Давайте отобразим текст приведенной в примере выше ссылки черным шрифтом без подчеркивания.

<a href="http://xeus.ru/hypertext.html"><span style="color:black; text-decoration:none;">Справочник-учебник по основам HTML (краткое руководство).</span></a>

Вот как отобразится такая ссылка: Справочник-учебник по основам HTML (краткое руководство). Визуально такая гиперссылка совершенно неотличима от окружающего её текста (в данном случае это так и есть, но если основной текст на вашей веб-странице отображается белыми буквами на черном фоне, то увидеть такую ссылку будет попросту невозможно).

Хочу обратить ваше внимание на то, что я задал свойству text-decoration атрибута style значение none, и тем самым как бы сообщил браузеру, что шрифт для этой гиперссылки должен быть оформлен "никак" :) То есть никак не оформлен. А если я сделаю значение свойства color равным white,

<a href="http://xeus.ru/hypertext.html"><span style="color:white; text-decoration:none;">Справочник-учебник по основам HTML (краткое руководство).</span></a>

то наша ссылка станет выглядеть так: Справочник-учебник по основам HTML (краткое руководство). Вы суслика видите? А он есть :) Белый шрифт на белом фоне.

Тема гиперссылок в основном раскрыта. Здесь, конечно, много чего еще можно написать про гиперссылки, но формат этого мини-учебника не предусматривает это самое "много чего". Наша цель - применимость. И к настоящему моменту вы уже умеете:

1. создавать гиперссылки (гиперссылки - основа интернета)
2. оформлять текст в них нужным вам образом (дополнительные справочные данные я приведу ниже по тексту в разделе "Справочник основ HTML")
3. писать текст БОЛЬШИМИ КРАСНЫМИ БУКВАМИ.

В принципе, этого вполне достаточно для создания популярного интернет-ресурса. Но чтобы ваш ресурс стал мега-популярным, вы должны научиться размещать на нем фотографии и картинки.

Фотографии и картинки в контексте HTML.

И если уж говорить о популярности и фотографиях, то безусловно следует говорить о фотографиях котят и новорожденных ежиков. Я понятия не имею почему так. Я знаю только что так оно и есть: фотографии котят и новорожденных ежиков чрезвычайно популярны. К сожалению у меня под рукой нет ни котенка, ни новорожденного ежика. Зато есть белый и очень ленивый кот (скорее даже молодой котик - ему еще нет и года, но есть все атрибуты кота - наглость, ленность и начальная степень ожирения). Собственно вот:

Я разместил изображение Коти (его зовут Котя :) на этой странице при помощи следующего html-кода:

<img src="http://xeus.ru/images/kotya_350.jpg" alt="Котя" />

Первое на что хочу обратить внимание: тег img - не парный, то есть одиночный, то есть нет ни открывающего, ни закрывающего, а есть просто тег img, который говорит браузеру: "в месте веб-страницы помеченном мной (тегом img) следует отобразить изображение, расположенное по адресу указанному в атрибуте src, а если это по каким-то причинам невозможно, то вместо изображения следует отобразить текст, являющийся значением атрибута alt".

Второе: символ  /  расположен перед закрывающей угловой скобкой тега img. В принципе, для тега img вы можете обойтись вообще без этого символа - большинство браузеров отобразит изображение и без него (и без атрибута alt тоже). То есть я мог написать просто: <img src="http://xeus.ru/images/kotya_350.jpg"> - результат был бы тот же - наглая кошачья морда на экране. Но если вы хотите использовать правильный html - нужно использовать и атрибут alt и закрывающий слэш (так называется в данной ситуации символ  /  ).

Думаю всё понятно здесь. Разместим кнопку со ссылкой на этот учебник:

Для её размещения я использовал html-код:

<a href="http://xeus.ru/hypertext.html"><img src="http://xeus.ru/images/buttons/uchebnik_html.png" width="88" height="31" alt="Справочник-учебник по основам HTML" /></a>

Всё что я сделал для того чтобы превратить изображение в кнопку со ссылкой - просто поместил (вложил) тег img (можно сказать и проще: "разместил изображение") внутри тега a, наподобие того, как мы это делали с тегами для разметки текста, вкладывая их один в другой. Не все теги разрешено помещать внутри других тегов, но в-целом, многократно вложенные один в другой теги - явление обычное.

Обратите внимание на дополнительные атрибуты width и height тега img. Они говорят браузеру о том, какова должна быть ширина и высота отображаемого изображения. Иногда эти атрибуты могут быть действительно полезны, но в данном случае я разместил их скорее по традиции и для того чтобы показать вам что они вообще существуют.

Завершающий штрих: добавим в тег img атрибут border и установим ему нулевое значение.

Это, как видите, убирает синюю линию вокруг кнопки, которой браузер по умолчанию обрамляет изображения, служащие ссылками. Для ясности приведу код:

<a href="http://xeus.ru/hypertext.html"><img src="http://xeus.ru/images/buttons/uchebnik_html.png" border="0" width="88" height="31" alt="Справочник-учебник по основам HTML" /></a>

В этом примере html-кода, нет ничего непонятного для вас, не так ли? Если я прав - значит мы сделали это™ . Теперь для вас основные элементы html-разметки не просто какие-то закорючки и скобочки, а вполне осмысленные символы, имеющие значение и смысл. И вы, изучив этот мини-учебник, узнали нечто большее, чем просто "как вставить кнопку в блог" - вы поняли суть HTML. По крайней мере я искренне на это надеюсь. И коли так, то мы потратили время с пользой. Ниже по тексту я разместил "Справочник основ HTML" в стиле "как сделать...", где в сжатом виде разместил уже изученные и дополнительные к ним данные, относящиеся к основам разметки веб-страниц при помощи языка HTML.

Вы можете оставить комментарий к данному учебнику. Именно с учетом ваших комментариев и будет развиваться учебник дальше. Мне действительно интересно какие темы требуют дополнительного раскрытия на страницах учебника. Что вам понравилось, что было полезным, что изложено недостаточно ясно (этот момент особенно важен).

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

<p>Первый абзац.</p><p>Второй абзац.</p>

отобразится так:

То есть браузер воспринимает и отображает текст, размещенный между открывающим и закрывающим тегами p, как отдельный абзац. Кстати, в большинстве случаев нет ничего страшного в отсутствии закрывающего тега - </p> - ваш браузер понимает что текущий абзац заканчивается там, где начинается следующий :) То есть конструкция

<p>Первый абзац.<p>Второй абзац.

отобразится так же, как и предыдущая, хотя по строгим правилам все парные теги надо закрывать. То есть по возможности стараться следовать первому примеру.

И совсем уж в завершение темы: перевод строки производится одиночным тегом br:

Первая строка<br />Вторая строка<br />Третья строка

выглядит это так:

Первая строка
Вторая строка
Третья строка

И как вы можете догадаться, тег br будет корректно интерпретирован браузером даже будучи написанным и без завершающего  / , то есть как: <br>. Примеры "неправильного но работающего" написания этих тегов я привожу чтобы вы не растерялись встретившись с ними в каком-либо html-коде, а встретитесь вы обязательно, потому как бОльшая часть интернета размечена именно "неправильным" образом :)

Справочник основ HTML.

Написано специально для проекта "Зиус". Копирование учебника запрещено. Все предложения и замечания приветствуются здесь.

Это справочник по основам HTML, могущий служить как дополнением к выше-изложенному учебнику, так и самостоятельным мини-руководством по разметке веб-страниц. Тем не менее, предполагается что вы знакомы с основными концепциями и треминами языка HTML, рассмотренными выше.

Справочник построен в стиле howto, то есть "как сделать чтобы...". Для улучшения восприятия информации, пояснений к коду - минимум, иногда и вовсе без них. Справочник далеко не всеобъемлющ. Зато он максимально применим и практичен. В особенности это касается блоггеров :)

Везде в справочнике HTML-код расположен внутри парного тега textarea, сделано так потому, что

1. В отличие от учебника данный справочник не преследует цель научить вас чему-либо - это просто шпаргалка, из которой вы можете скопировать html-конструкцию, подставить в неё свои значения и разместить у себя в блоге.
2. Размещение кода внутри textarea предотвращает разночтения в интерпретации, возможные при копировании html-кода в различные программы. Это наиболее простой способ обойти эту проблему и уверен, что вы уже неоднократно видели такую реализацию в сети.

С него и начнем пожалуй :)

Такое "окошечко" сделано при помощи такого кода: <textarea cols="35" rows="5">Такое "окошечко" сделано при помощи такого кода:</textarea>

cols - ширина поля (это "окошечко" принято называть - поле или поле ввода) в символах или буквах, т.е. в данном случае 35 букв в ширину.
rows - высота видимой части поля измеряемая количеством строк. Если текст не умещается полностью в видимой части поля, тогда появляется полоса прокрутки.
cols и rows - параметры (атрибуты) не обязательные, вы можете написать просто: <textarea>ваш любой текст</textarea> - браузер сам подставит значения по умолчанию.

Если для вашего кода достаточно одной строки, то вместо textarea вы можете воспользоваться и более компактной конструкцией:

Браузер отобразит текст, являющийся значением параметра value, а соответственно параметр size - ширина поля выраженная в символах.

Для отображения открывающей угловой скобки -  <  - служит html-код
Закрывающая угловая скобка -  >  - отобразится кодом

Суммируя: для того чтобы сделать запись в своем блоге в стиле "поставьте-на-этот-пост-много-много-ссылок", вам нужно использовать в конце записи следующий код (на примере данного учебника):

<textarea>&lt;a href=&quot;http://xeus.ru/hypertext.html&quot;&gt;Учебник-справочник HTML.&lt;/a&gt;</textarea>

Просто скопируйте код из этого поля и поменяйте значения http://xeus.ru/hypertext.html и Учебник-справочник HTML. на какие-то свои. Хотя, конечно, использовать параметы cols и rows, чтобы сделать код полностью видимым и избежать полос прокрутки - предпочтительнее.

Чтобы сделать простую таблицу (скажем, в 2 колонки и 2 ряда :) используем html-код:

<table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr></table>

получим:

Чтобы сделать более-менее визуально-пристойную таблицу следует написать что-то вроде:

<table cellpadding="3" cellspacing="1" style="background-color:#000000"><tr><td style="background-color:#ffffff">1.1</td><td style="background-color:#cccccc">1.2</td></tr><tr><td style="background-color:#cccccc">2.1</td><td style="background-color:white">2.2</td></tr></table>

Действительно, намного читабельнее:

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

Форматирование текста.

Результат.	HTML-код.
Жирный шрифт	<strong>Жирный шрифт</strong>
Курсив	<em>Курсив</em>
Подчеркнутый шрифт	<span style="text-decoration:underline;">Подчеркнутый шрифт</span>
Перечеркнутый шрифт	<span style="text-decoration:line-through;">Перечеркнутый шрифт</span>
Моноширинный шрифт	<span style="font-family:monospace;">Моноширинный шрифт</span>
БОЛЬШИЕ КРАСНЫЕ БУКВЫ	<span style="font-size:24px; color:#ff0000;">БОЛЬШИЕ КРАСНЫЕ БУКВЫ</span>
БОЛЬШИЕ КРАСНЫЕ БУКВЫ	<marquee direction="right"><span style="font-size:24px; color:#ff0000;">БОЛЬШИЕ КРАСНЫЕ БУКВЫ</span></marquee>
	<input type="button" value="КНОПКА КОТОРАЯ НИЧЕГО НЕ ДЕЛАЕТ" />
Простая ссылка на справочник HTML	<a href="http://xeus.ru/hypertext.html#howtohtml">Простая ссылка на <strong>справочник</strong> HTML</a>
Непростая ссылка на учебник HTML	<a href="http://xeus.ru/hypertext.html" style="color:#000000; text-decoration:none;">Непростая ссылка на учебник HTML</a>
- картинка со ссылкой.	<a href="http://xeus.ru/hypertext.html"><img src="http://xeus.ru/images/buttons/uchebnik_html.png" border="0" alt="Справочник-учебник по основам HTML" /></a>

Обсуждение данного справочника происходит в комментариях. Именно на основе ваших замечаний и предложений происходит развитие этого учебника и справочника.

Также, вы можете поучаствовать в развитии проекта, рассказав о нем в своем блоге:

Справочник-учебник основ HTML - <a href="http://xeus.ru/hypertext.html"><strong>Справочник-учебник основ HTML</strong></a>

отдельно ссылка на справочник:

Краткий справочник HTML - <a href="http://xeus.ru/hypertext.html#howtohtml"><strong>Краткий справочник HTML</strong></a>

кнопка и юзербар:

- <a href="http://xeus.ru/hypertext.html"><img src="http://xeus.ru/images/buttons/uchebnik_html.png" border="0" alt="Справочник-учебник по основам HTML" /></a>

- <a href="http://xeus.ru/hypertext.html"><img src="http://xeus.ru/images/userbars/uchebnik_html_1.png" border="0" alt="Справочник-учебник по основам HTML" /></a>

Написано специально для проекта "Зиус". Копирование учебника запрещено. Все предложения и замечания приветствуются здесь.

*Примечание Зиуса. Говоря простым языком, торрент-трекер - сайт на котором вы без особых проблем можете найти и скачать с хорошей скоростью множество новых фильмов, музыки и программ.