Сегодняшний урок посвящен формам. Для создания форм нам будут нужны такие теги как <form>, <textarea>, <input> и некоторые др. Пример простой формы:

Код этой формы:
<form><textarea></textarea></form>
Пример формы для ввода пароля:

Код для ее выполнения:<input type="password">
Вот так выполняются кнопки на html
<input type="submit" value="Отправить"/>
Результат:

Другой пример:

Код:
<input type="reset" value="Cбросить"/>
Хочу напомнить, что чтобы формы и кнопки работали, нужен скрипт на каком-либо языке программирования и это уже не ко мне. Где их достать или как написать самому, можно найти в Сети. А более подробную информацию о формах можно прочитать здесь.

Сегодня немного об использовании тега div. Писать много не буду, так как моего опыта вебмастера для этого явно не хватает. Поделюсь лишь своим наблюдением.
Тег этот применяют, чтобы выделить какую-либо часть страницы, а также для верстки веб-страницы (так как табличная верстка увеличивает "вес" кода). При этом если не указать размеры тег занимает все пространство поперек страницы, заставляя остальные элементы, следующие после него "сползать" вниз. Табличная верстка, при всех своих недостатках, все-таки более привычна (впрочем, я пока не решаюсь использовать собственный шаблон, ни на таблицах, ни на div).
О верстке же веб-страницы с помощью тега div почитать можно здесь. На сегодня все, следующий урок будет посвящен формам.

Сегодня учимся делать таблицу. В предыдущих версиях html таблица использовалась для каркаса веб-страницы. Сейчас верстать страницу рекомендуется c помощью тега <div>, потому что страница с таблицей медленнее загружается. Но на Ucoz например шаблоны сайтов сверстаны с помощью таблиц. Пример таблицы:Таблица описывается парным тегом <table> и </table> С <table> начинается таблица, а </table> таблица заканчивается.
<table> </table>
Затем описываем строку таблицы. Для создания строки в таблице используется парный тег <tr> </tr> Если у нас таблица состоит из одной строки, то будет так:
<table>
<tr> </tr>
</table>
Если таблица состоит из 3 строк, то делаем так:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
Далее. В каждой строке должна быть хотя бы 1 ячейка, то есть кроме строки, надо описать еще один столбец. Столбцы в HTML описываются с помощью тегов <td> и </td>, которые должны находиться между тегами <tr> и </tr> То есть, если в таблице 1 строка и 1 столбец, то таблица будет описана так:
<table>
<tr><td> </td></tr>
</table>
Содержимое ячеек пишется только между тегами <td> и </td>. Порядок расположения тегов такой : сначала пишите теги таблицы, затем теги строки, затем теги ячеек. Также таблице можно придать цвет, вставить изображение (незаполненная таблица видна не будет). Фон таблице можно задать так:
<table width="300" border="1" height="150">
<tr>
<td width="50" bgcolor="aqua"> </td>
<td> </td>
</tr>
</table>
Результат:

Кстати, этот способ считается несколько устаревшим, в HTML.4.1. внешний вид таблицы задается таблицей стилей.
Если хотите фоном таблицы сделать изображение, то писать нужно так:
<td background="image.jpg">
В следующий раз поговорим о верстке с помощью div.
P.S. Если вас интересует верстка веб-страницы с помощью таблицы, то почитать об этом можно здесь.

Сегодня поговорим о списках. Списки делятся на нумерованные и ненумерованные. Если нужно создать нумерованный список, то сначала нужно определится с типом счетчика и откуда начинать отсчет.
type — вид счетчика: 1 — обычные цифры
A — большие латинские буквы
a — маленькие латинские буквы
I — большие римские цифры
i — маленькие римские цифры
start — устанавливает число, с которого будет начинаться отсчет. Например:
<ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
<li>Пятый</li>
</ol>
Должно получиться вот так:

1. Первый
2. Второй
3. Третий
4. Четвертый
5. Пятый

2. Первый
3. Второй
4. Третий
5. Четвертый
6. Пятый

• Первый
• Второй
• Третий
• Четвертый
• Пятый

Определение

Значение

Значение

Значение

Значение

Сегодня учимся делать ссылки. Стандартная ссылка выглядит примерно так: <a href="index.html" >Условная страница</a> Чтобы страница открылась в новом окне нужно написать так:
<a href=" http://www.google.ru/"target_"blank">Условная страница</a>. Так нужно делать в тех случаях, когда ссылка ведет на другой сайт. В данном примере ссылка ведет на главную страницу Гугла.
Во избежание "излишнего" интереса поисковых систем ссылку нужно оформить так:
<noindex> <a href="index.html"target_"blank" rel="nofollow">Условная страница</a></noindex>.
В таком случае Яндекс и Гугл не проиндексируют ее. Ссылку можно сделать в виде любого фото или картинки. Вот так:<noindex><a href="http://www.google.ru/" target="_blank" title="Google"rel="nofallow"></noindex><img src="http://1mybiz.moy.su./Georgina.jpg" border="0" width="25%" height="25%" alt="Ссылка" title="Google"/></a>.
Должно получиться так:

Здесь сначала указываем путь, т.е. электронный адрес, то, что страница должна открыться в новом окне, затем указываем адрес картинки, отсутствие рамки (если не указать, рамка вокруг картинки будет), размеры изображения, альтернативный текст и всплывающую подсказку. Как придать ссылке нужный вид я расскажу, когда буду писать о таблице стилей. А на сегодня все.

Этот урок посвятим вставке изображений. Чтобы вставить изображение на веб-страницу, будь-то картинка или фото нужно написать так:
<img src="http://1mybiz.moy.su./Georgina.jpg" align="left" border="0" width="25%" height="25%" hspace="0" vspace="0" alt="Фото цветка" title="Георгина"/>. В результате должно получиться вот так:

Разберем подробнее. Сначала мы указываем путь до изображения <img src="http://1mybiz.moy.su./Georgina.jpg"/>. Затем позиционируем изображение на странице (в этом примере слева align="left"). Затем указываем, что вокруг фото не должно быть рамки border="0" (если изображение является ссылкой, подробнее, когда буду писать о ссылках). Указываем размеры в пикселях или процентах (желательно). Задаем вертикальные и горизонтальные отступы вокруг фото hspace="0" vspace="0". Пишем альтернативный текст alt, на тот случай если у пользователя отключены изображения, и можно написать всплывающую подсказку title. На сегодня все. До встречи.

Этот урок хочу посвятить цвету и фону страницы. Сначала общие рекомендации. Я уже писала об этом, цвета нужно подбирать, руководствуясь не личными вкусами, а для удобства посетителей. Уважайте плоховидящих и дальтоников!
Фон страницы можно задать в теге <body>:<body syle="background:#C0C0C0;"> или с помощью таблицы стилей (о ней я буду писать позже). Фоном может быть и картинка. Установить ее можно с помощью тега Body: <body syle="background:#C0C0C0 url(/images/bg.gif);">. Здесь мы видим как указание цвета, так и фоновую картинку. Если вдруг фоновая картинка не будет найдена, то установится заданный цвет. P.S. В конце совет: рекомендуется в корневой папке сразу создать папку images. В нее класть все изображения и картинки. Расположение следует вести от корня сайта: /images/bg.gif. Не нужно писать так: "http://www.site.ru/images/bg.gif" или так "../../images/bg.gif" (при переделке сайта возникнут определенные трудности).

Основное содержание веб-страниц это текст. Для него используются теги <p>, <br/> и некоторые другие. Разберем их подробнее. Для абзаца используется тег <p> и </p> соответственно. Абзац можно разместить в центре страницы, справа или слева, выровнять по ширине:

<p align="left">Текст слева</p>

<p align="center">Текст в центре</p>

<p align="right">Текст справа</p>

<p align="justify">Текст выровненный по ширине</p>

Для перевода строк тег <br/>. Чтобы создать разрыв во всю строку нужно написать так:
<br clear="all"/>Разрыв строки
Чтобы текст был жирным теги <b> или <strong>.
<b>Жирный текст</b> или <strong>Жирный текст</strong>
Для курсива теги <em> или <i>.
<em>Текст курсивом</em>
<i>Текст курсивом</i>
Перечеркнуть текст можно так:<s>Перечеркнутый текст</s>
Или так:<strike>Перечеркнутый текст</strike>
Тексту можно придать размер: <span style="font-size:30px;">Текст можно увеличить</span>
Также тексту можно придать цвет:
<span style="color:#FF0000;">Красный текст</span>
На сегодня все. До следующих встреч.

Продолжаем осваивать html. С чего начинается веб-страница? С заголовка. Для него используются теги <h > и </h>. Стандартные заголовки бывают шести размеров.

<h1>Заголовок H1</h1>

<h2>Заголовок H2</h2>

<h3>Заголовок H3</h3>

<h4>Заголовок H4</h4>

<h5>Заголовок H5</h5>

<h6>Заголовок H6</h6>

Даже самый маленький заголовок < h6 > можно сделать больше чем < h1 >. Например, вот так:

<h6 style="font-size:30"> Заголовок</h6>

Чтобы придать заголовку определенный цвет нужно написать так:

<h1 style="color:#dd0000> Заголовок H1</h1>

Кстати, для подбора цветов для вашей страницы удобно использовать таблицу базовых цветов. О том, как правильно сочетать цвета прочитать можно здесь.
Чтобы выровнять заголовок на странице нужно использовать align="center/left/right". Вот так:

<h2 align="center">Заголовок</h2>

И напоследок совет: рекомендую изучать html-код различных веб-страниц. Меню - Вид - Исходный код. И желаю успехов!

Сегодня я хочу поговорить о том как собственно пишется веб-страница на html. Пишем основу:< html >-начинается страница, затем < head > т.е. " голова ", здесь Вы будете писать т.н. служебную информацию, но сейчас останавливаться на этом не будем, на этом этапе это не нужно. Затем пишем < title > далее название страницы и закрываем тег . Кстати на html 4.1 все теги ( т.е. знаки на котором пишется код) закрываются, вот так < />. Далее закрываем тег < /head >.Открываем тег < body > т.е. тело. Тут Вы будете писать текст, вставлять изображения и ссылки. Затем закрываем тег < /body >. И наконец закрываем тег < /html>- т.е. заканчиваем веб-страницу. В готовом виде ваша страница будет выглядеть так. < !DOCtype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< title >Моя страница< /title>
< /head >
< body > Здесь будет текст и другое.
< /body >
< /html > P.S. При написании этого урока, записывая код, я делала отступы, иначе Вы видели бы только текст, без тегов. В норме кода не должно быть видно. На сегодня все. До свидания.

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

Начало

Реклама... Кажется она повсюду... Она " глядит " на нас с экранов телевизоров, с билбордов, доносится из радио, мы натыкаемся на нее в газетах и журналах, а иногда, благодаря стараниям профессионалов рекламы в самых неожиданных местах и необычном виде. И, так же как и в оффлайновой жизни, не оставляет она нас и в Интернете. Но применительно к рекламе в Интернете нас интересуют два момента: как привлечь потенциальных покупателей, и поисковые системы. Если первый момент применителен к обычной жизни, то второй специфичен. Казалось бы, делай, что хочешь, был бы результат. Ан нет... От того, какой способ рекламы вы выберите, будет зависеть, не только то сможете ли вы заинтересовать потенциальных клиентов, но и попадет ли ваш сайт в бан. Однажды это случилось со мной... Поясняя причину случившегося, служба поддержки Яндекса, прислала мне несколько ссылок, благодаря которым я узнала про отношение Яндекса к popunder, clickunder и bodyclick рекламе и продвижению сайта с помощью SEO-ссылок. В двух словах, отрицательное. Яндекс намерен сайты использующие подобные виды рекламы понижать в ранжировании. А использующие iframe и вовсе банить, как меня, еще недавно. Не верите? Почитайте http://help.yandex.ru/webmaster/?id=995342; http://webmaster.ya.ru/replies.xml?item_no=325&ncrnd=2022; http://webmaster.ya.ru/replies.xml?item_no=3772; http://webmaster.ya.ru/replies.xml?item_no=4967&ncrnd=1743. Если и после этого вы считаете что, вас это не коснется, можете последовать моему примеру. Вставьте скрипт iframe, на страницы вашего сайта, по одному на каждую, и подождите, максимум пару месяцев. Затем, когда ваш сайт исчезнет из поисковой выдачи, можете с искренним удивлением вопрошать Платона Щукина:" За что?!!! ". Не хотите? Тогда хорошо подумайте, прежде чем выбрать тот или иной способ заработка, и как всегда, удачи!

Сегодня продолжая разговор о партнерских программах, хочу рассказать о тех, в которых участвую сама. Перебрала я их не одну, некоторые не подошли по тематике сайта, другим не подошел мой сайт, расположенный на бесплатном хостинге, а также небольшая посещаемость. Иногда только после регистрации я узнавала, что рекламные материалы написаны на PHP. От некоторых партнерок пришлось отказаться после нескольких месяцев бесплодных, а точнее бесплатных вишений баннеров и ссылок. По ним, судя по статистике, не было ни одного клика! На сегодняшний день я участвую вот в этих программах: одна из первых, в которых я приняла участие moneymaster.ru. Автор сайта обещает научить как сделать сайт за 5 минут!. Конечно, "по-взрослому" сайты за столь короткое время не создаются, но для тех, кто не смыслит в html ничего, этот букварь сайтостроения вполне подойдет. Кстати, именно этот сайт стал, для меня когда-то полного "чайника" в этом вопросе, той отправной точкой, после которой я стала самостоятельно изучать html. Условия программы: выплаты порядка 30% от продажи книг производятся на ваш аккаунт в RBKmoney (для России) или в систему Z-Payment (для всех). Следующая партнерка Интернет-магазин goodbody.ru. Ассортимент по принципу "всяко-разно". Присоединится к партнерской программе магазина можно здесь Партнерка Goodbody.RU: спортивные товары, мелкая бытовая техника, одежда.
Еще один крупный Интернет-магазин Gimi.ru. Также если сочтете уместным для своего сайта, то можете попробовать еще один магазин, по доставке цветов на дом florist.ru. Недавно я зарегистрировалась еще в нескольких партнерских программах показавшихся мне интересными, по продаже электронных книг, курсов на DVD. Теперь жду результатов. Первая из них курсы на DVD. Из этих курсов можно научится обращению Scype, как завести электронные деньги и т.п. Еще одна партнерка по продаже электронных книг посвященных сайтостроению, заработку в Интернете и др.Webdom.biz И, наконец, партнерка курса Киберсант-Партнерinfo-DVD.ru. Внимательно прочитайте условия этих партнерских программ и если они вам подходят, регистрируйтесь, и желаю удачи!

Среди различных способов заработка на сайте большое место занимают партнерские программы. Как не прогадать, найти действительно выгодную партнерку? Во-первых, она должна быть интересна посетителям вашего сайта. Поинтересуйтесь в Интернете, что пользуется наибольшим спросом. Во-вторых, партнерская программа должна подходить тематике вашего сайта (необязательно, но желательно). Еще до того как решите участвовать в той или иной программе, проверьте своих будущих партнеров. Рекомендуется, воспользоваться их услугами, купить что-нибудь, например. Также обязательно почитайте отзывы о них в Интернете. Просто наберите: отзывы о ... Далее адрес. Пообщаетесь на форумах вебмастеров forum.searchengines.ru,talk.maulnet.ru,mastertalk.ru. Но и вы в свою очередь будьте достойным партнером. Внимательно читайте условия партнерской программы, честно выполняйте их, не мошенничайте! Не думайте, что хитрее всех. Помните, что попавшихся на нарушении условий заносят в "черный список" и потом будет трудно найти партнеров. Успехов вам!

Сегодня я хочу рассказать об ошибках, которые привели мой сайт к бану. К сожалению, по неопытности, по "неграмотности" я с самого начала совершила грубейшие ошибки. Во-первых, вначале я не стала использовать теги description и keywords, а когда их все-таки вставила, то впала в другую крайность. В описании страницы у меня было написано: "Кулинарный сайт, содержит коллекцию рецептов, от закусок до выпечки". И так на всех страницах! Причиной бана это, конечно, не стало, но на позиции в поисковых системах повлияло. Свою следующую ошибку я совершила, когда, искала способы заработка на своем сайте. Не имея опыта, решила начать с "простенького". Наткнувшись на одном из сайтов Ucoz, на описание партнерской программы, по продаже своего трафика и решив, что "свои плохого не посоветуют", немного поколебавшись, зарегистрировалась и вставила злосчастный код iframe на страницы сайта. Гром грянул только полгода спустя! За это время я даже ухитрилась начать работу с биржей Liex, даже не подозревая, что нарушаю их правила, которые я бегло просмотрела и простодушно решила, что я ничего такого "противозаконного" не делаю! Затем я занялась регистрацией своего сайта в каталогах и рейтингах, так как до этого решила, что хватит того, что поисковые роботы уже посещают мой сайт, спохватилась же только когда увидела, что это мало влияет на посещаемость. Но даже это первое время я делала довольно бестолково, ограничиваясь в описании страницы поисковыми словами! Как-то весной я увидела в админке опцию сервиса U.to, немного почитав, что это полезно для поисковой оптимизации и плохо понимая, что представляет собой этот сервис, решила все-таки им воспользоваться, руководствуясь, тем же принципом, что и в случае с кодом iframe. Незадолго до бана, я решила воспользоваться сервисом 1ps, до этого я раскручивала свой сайт сама. Хотя в анкете я указала, что не хочу добавлять свой сайт в каталоги, требующие обратную ссылку, среди немногочисленных каталогов, ответивших мне, были просьбы об обратной ссылке на их сайт. Вздохнув, хотя у меня и не было специальной html-страницы для ссылок, я раскидала эти ссылки, не закрыв их от индексации (обычно каталоги и рейтинги против этого), по разным страницам сайта. А через несколько дней попала в бан поисковой системы Яндекс... Когда я написала в службу поддержки Яндекс, то сначала последовал стандартный ответ, смысл, которого я не поняла. И только затем мне объяснили, что причиной является код iframe. Эту проблему удалось решить сразу. К тому времени я сама, разочаровавшись, сворачивала этот проект, и на страницах сайта остались всего лишь три скрипта. Но и после этого Яндекс отказался включить мой сайт в поиск, прислав в последнем письме "букет" из ссылок (http://help.yandex.ru/webmaster/?id=995342; http://webmaster.ya.ru/replies.xml?item_no=325&ncrnd=2022; http://webmaster.ya.ru/replies.xml?item_no=3772; http://webmaster.ya.ru/replies.xml? item_no=4967&ncrnd=1743), мотивируя это тем, что контент моего сайта неуникален. К сожалению, обвинение в неуникальности я поняла буквально, мол, в Интернете без меня хватает подобного контента. Я даже проверила с помощью специального сервиса свой сайт на уникальность, и удивилась, обнаружив, всего лишь несколько процентов совпадений с другими кулинарными сайтами! Я просто уже не знала что делать! Стала подумывать, что если дела и дальше так пойдут, то мой сайт "прикроет" хостинг или я сама не выдержу этой ситуации и удалю запорченный проект. От это поступка удержало лишь то, что все это время мой сайт пусть немного, но посещали с закладок. Выйти из бана помог случай. В конце сентября пришло сообщение из биржи Liex о недоступности моего сайта. Я прочла описание ошибки, но не поняла, по какой причине отсутствуют ссылки в статье, которые там вообще-то должны быть. Обратилась за разъяснением. Мне ответили, что причина в сервисе U.to, который, являясь редиректом, перенаправляет на другой сайт. Пришлось срочно удалять ссылки этого сервиса, которые были во всех кнопках и счетчиках более 30-ти страниц сайта! Хорошо я на тот момент удалила всю рекламу с сайта, иначе работы было бы гораздо больше! После чего я обратилась в службу поддержки Яндекса, наконец-то сообразив, что, возможно из-за этого контент моего сайта был сочтен неуникальным! Вскоре мне ответили, что теперь с моим сайтом все в порядке и в течение двух недель он будет включен в поиск! Уже через несколько дней начались переходы с Яндекса... Знай, я раньше, в чем именно причина бана все проблемы были бы решены уже давно! Зато теперь, умудренная опытом я строю планы на будущее. Думаю, в каком направлении развиваться дальше!