Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
Всегда под рукойаналогов нет ^_^
Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Без заголовка |
Украшаем и оживляем картинку. |
|
спасибо ЮЛИИ КОВАЛЕНКО
Метки: генератор разное полезное |
генератор метатегов |
|
Название сайта Не более 70 символов. |
|
|
Описание сайта Используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тэга пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет. Рекомендуемая длина не более 120 символов. |
|
|
Ключевые слова Meta-тэг используется поисковыми машинами для оценки релевантности. Вводить через запятую. Не более 250 символов. |
|
|
Тема сайта Описание тематики сайта для поисковых систем. |
|
| Автор сайта (страницы) | |
| Авторские права | |
| Владелец сайта | |
| E-mail издателя | |
| Адрес сайта издателя | |
| E-mail автора/веб-мастера | |
|
Этот тэг управляет кэшированием в HTTP/1.0. При истечении "срока годности" документ будет считаться "просроченным" и броузер будет заново обращаться к источнику, чтобы его обновить. Формат даты должен быть оформлен по стандарту RFC850. Пример: Thu, 20 May 2010 06:46:37 GMT Если не знаете, что писать, не изменяйте это поле. |
|
|
Кодировка страницы Используется браузерами для определения кодировки. Если язык вашей страницы - русский, то рекомендуем выбрать "windows-1251". |
|
|
Язык страницы Используется поисковыми машинами при индексировании. |
|
Управление индексацией поисковых роботов.
|
|
Указание поисковым роботам по поводу индексации страницы и ссылок на ней
|
|
|
Тип документа Определяет цели страницы |
|
|
Состояние документа Если его значение отлично от "Document", то поисковые системы не будут его индексировать. Предназначен для использования в крупных проектах, с множеством документов разного типа. |
|
|
Частота индексации страницы Это значение указывает, как часто обновляется страница и как часто поисковый робот должен заходить на нее, чтобы увидеть обновление. |
|
Управление кэшированием
|
|
| Запретить кэширование страницы | |
|
Основной URL определяет какой документ следует индексировать, чтобы не обрабатывать "зеркала". |
|
|
Автоматическое обновление документа через заданное количество секунд Дополнительная возможность - автоматическая загрузка другого документа. Если нужно просто обновить документ, то URL указывать не обязательно. Формат: 30; URL=http://www.domain.com/page.htm |
|
| Отношения между документами | |
|
Иконка favicon.ico Ссылка на файл favicon.ico. |
|
|
Связь с внешним файлом CSS Ссылки на файлы стилей (каждую с новой строки), содержимое которых будет использовано при обработке html-документа браузером. |
|
|
|
Новостная лента сайта в формате XML (RSS) Ссылка на RSS-ленту и заголовок новостной ленты. |
|
Связь с внешним файлом JS Ссылки на файлы Javascript (каждую с новой строки), которые будут использоваться при обработке html-документа браузером. |
|
|
HTML-код: |
|
Метки: генератор |
Генератор метатэгов |
|
Название сайта Не более 70 символов. |
|
|
Описание сайта Используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тэга пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет. Рекомендуемая длина не более 120 символов. |
|
|
Ключевые слова Meta-тэг используется поисковыми машинами для оценки релевантности. Вводить через запятую. Не более 250 символов. |
|
|
Тема сайта Описание тематики сайта для поисковых систем. |
|
| Автор сайта (страницы) | |
| Авторские права | |
| Владелец сайта | |
| E-mail издателя | |
| Адрес сайта издателя | |
| E-mail автора/веб-мастера | |
|
Этот тэг управляет кэшированием в HTTP/1.0. При истечении "срока годности" документ будет считаться "просроченным" и броузер будет заново обращаться к источнику, чтобы его обновить. Формат даты должен быть оформлен по стандарту RFC850. Пример: Thu, 20 May 2010 06:46:37 GMT Если не знаете, что писать, не изменяйте это поле. |
|
|
Кодировка страницы Используется браузерами для определения кодировки. Если язык вашей страницы - русский, то рекомендуем выбрать "windows-1251". |
|
|
Язык страницы Используется поисковыми машинами при индексировании. |
|
Управление индексацией поисковых роботов.
|
|
Указание поисковым роботам по поводу индексации страницы и ссылок на ней
|
|
|
Тип документа Определяет цели страницы |
|
|
Состояние документа Если его значение отлично от "Document", то поисковые системы не будут его индексировать. Предназначен для использования в крупных проектах, с множеством документов разного типа. |
|
|
Частота индексации страницы Это значение указывает, как часто обновляется страница и как часто поисковый робот должен заходить на нее, чтобы увидеть обновление. |
|
Управление кэшированием
|
|
| Запретить кэширование страницы | |
|
Основной URL определяет какой документ следует индексировать, чтобы не обрабатывать "зеркала". |
|
|
Автоматическое обновление документа через заданное количество секунд Дополнительная возможность - автоматическая загрузка другого документа. Если нужно просто обновить документ, то URL указывать не обязательно. Формат: 30; URL=http://www.domain.com/page.htm |
|
| Отношения между документами | |
|
Иконка favicon.ico Ссылка на файл favicon.ico. |
|
Метки: генератор |
Палитра цветов с кодировкой |
Палитра цветов с кодировкой
Метки: учебник по Html для чайников |
Ступенька 50-ая. |
Ступенька 50-ая.
В этой главе мы будем создавать форму посложнее - форму опроса. Допустим, вы ведущий популярного сайта о кино. Ваш спонсор предлагает вам разместить у вас на сайте опрос, чтобы выяснить, какие фильмы и актеров предпочитают люди, которые любят смотреть кино. В качестве приза - одному из заполнивших анкету достанется путешествие в выбранную им страну.
Вот такую анкету вы предложите заполнить вашим посетителям:
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script">
</form> |
|
<form name="anketa" method="post" action="http://mysite.ru/script">
<b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"> </form> |
|
|
|
<form name="anketa" method="post" action="http://mysite.ru/script">
<b>Ф.И.О.</b><br> <input type=text name="fio" size=37 maxlength=100><br><br> <b>Ваш е-майл:</b><br> <input type=text name="email" size=37 maxlength=80 value="@"><br><br> <input type=submit value="Отправить анкету"><input type=reset value="Отмена"> </form> |
|
|
|
|
|
<b>Вы:</b>
Мужчина<input type=radio name="sex" value="man"> Женщина<input type=radio name="sex" value="woman"> <br><br> |
|
|
|
<b>Какие фильмы вы любите смотреть?</b><br>
<input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes"> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
|
<b>Какие фильмы вы любите смотреть?</b><br>
<input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes" checked> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<b>Из этих актеров вам больше нравится:</b><br>
<select name="actor"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
|
<b>Из этих актеров вам больше нравится:</b><br>
<select name="actor" size="4"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br> |
Метки: учебник по Html для чайников |
Ступенька 49-ая. |
Ступенька 49-ая.
В этой главе мы будем разбираться с формой поиска, но мы не будем создавать ее с нуля, мы возьмем готовую форму и поучимся разбирать готовую форму для наших целей.
Форма у нас будет не простая. Форму поиска мы возьмем с Яндекса. Эта поисковая система позволяет вам делать поиск по вашему сайту через нее, но для этого нужно, чтобы ваш сайт был зарегистрирован в Яндексе, и поисковая система уже знала все, или почти все страницы вашего сайта.
Не обязательно на вашем сайте использовать форму от Яндекса, другие поисковики тоже вам дают возможность осуществлять поиск по вашему сайту через них, однако, мне милее Яндексовский поиск, если вы со мной не согласны, то потом можете зайти на сайты других поисковых систем и взять у них коды их форм. Если ваш хостер вам дает возможность устанавливать скрипты на вашем сайте, то вы можете скачать готовый скрипт с готовой формой и установить его, но мы сейчас с вами не разбираем процесс установки скрипта, а разбираем построение форм, опять же, именно поэтому форма от Яндекса как нельзя лучше подходит нам для нашего урока.
Вот так наша форма выглядит:
На первый взгляд тут всего два элемента формы (кнопка и строка для ввода текста), и форма кажется простой. Однако, все несколько сложнее, чем кажется. Посмотрите на код нашей формы:
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="Народные сайты"> </form> |
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
</form> |
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input type=text name="text" size=18 value="" maxlength=80> </form> |
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> </form> |
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> </form> |
|
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<input type=text name="text" size=18 value="" maxlength=80> <input type=submit value="искать"> <input type=hidden name="serverurl" value="http://narod.ru"> <input type=hidden name="server_name" value="ETO_NAROD"> </form> |
|
action?name=value&name=value&name=value.
|
|
http://www.yandex.ru:8081/yandsearch?text=HTML&serverurl=http://narod.ru&server_name=ETO_NAROD
|
Метки: учебник по Html для чайников |
Ступенька 48-ая. |
Ступенька 48-ая.
Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты.
Есть два варианта изучения форм: 1 - рассмотреть все элементы форм подряд, 2 - рассмотреть создание форм на конкретных примерах. Мы с вами пойдем по второму пути и начнем с такой вот формы:
В данной форме присутствуют следующие элементы: поле для ввода некой информации (имя), поле для ввода текста (комментарий), кнопка отправки и кнопка сброса информации.
Давайте представим, что наш хостер (компания, предоставившая нам место под страничку) не дает нам возможности использовать скрипты, поэтому мы не можем привязать данную форму к скрипту гостевой книги, чтобы при нажатии на кнопку отправки данные из формы сразу же добавились на наш сайт. Однако, мы хотим, чтобы наш посетитель мог отправить нам свой отзыв, поэтому мы укажем в этой форме, чтобы данные из нее отправлялись на наш е-майл, как это делать, мы уже знаем:
|
<form action="mailto:vasya@mail.ru">
</form> |
|
<form action="mailto:vasya@mail.ru">
<input type=text name=firstname> </form> |
|
|
|
<form action="mailto:vasya@mail.ru">
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"> </form> |
|
|
|
|
|
<form action="mailto:vasya@mail.ru">
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> <textarea name="comments"></textarea> </form> |
|
<form action="mailto:vasya@mail.ru">
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea name="comments"></textarea> </form> |
|
|
|
<form action="mailto:vasya@mail.ru">
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea> </form> |
|
|
|
<form action="mailto:vasya@mail.ru">
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit> </form> |
|
|
|
<form action="mailto:vasya@mail.ru">
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit> <input type=reset> </form> |
|
|
|
<form action="mailto:vasya@mail.ru">
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit value="ОК"> <input type=reset value="Отмена"> </form> |
|
|
|
<form action="mailto:vasya@mail.ru" method=post>
Ваше имя:<br> <input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br> Ваш комментарий:<br> <textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br> <input type=submit value="ОК"> <input type=reset value="Отмена"> </form> |
Метки: учебник по Html для чайников |
Ступенька 47-ая. |
Ступенька 47-ая.
В этой главе мы начнем разговор о формах. Каждый из вас наверняка, как пользователь интернет, хоть раз да видел или заполнял какую-либо форму. Вот как она выглядит:
Не пытайтесь нажимать на кнопки и ставить курсор на поля формы, это картинка :)
Все вы знаете, что формы создаются средствами html - это верно. Однако, это служит возникновению одного большого заблуждения: многие считают, что достаточно научится создавать формы средствами html, чтобы у них на сайте появилась, например, гостевая книга - это не верно.
Форма - это лишь каркас. При помощи html мы лишь определяем, что тут у нас будет поле формы, а вот тут у нас будет кнопка, а на кнопке будет такая надпись, и т.д. Однако, чтобы при нажатии на кнопку формы ваше сообщение добавилось в гостевую книгу нужна иная технология - нужна некая программа, скрипт, который мы должны привязать к нашей форме.
Подробнее о скриптах и с чем их едят вы можете почитать в разделе Программирование на нашем сайте. А мы же с вами будем учиться в нашем учебнике только тому, как размечать формы средствами html.
Формы вводятся в документ при помощи тега <form></form>:
|
<form>
</form> |
|
<form action="mailto:vasya@mail.ru">
</form> |
Метки: учебник по Html для чайников |
Ступенька 46-ая. |
Ступенька 46-ая.
Итак, на нашу елку (html) мы можем повесить шарики и игрушки (объекты - картинки, музыка, фильмы и т.д.), можем приладить электрические гирлянды и другую мишуру (CSS), но также мы можем внедрить в нашу елку целый инородный механизм - скрипты - которые заставят нашу елочку плясать, петь, и делать, что нам угодно.
Скрипт - это некий механизм, программа, специальная программа для веб. Как объекты и CSS, скрипты не являются частью html, это другие технологии, которые мы привязываем к нашему документу при помощи специальных тэгов или их атрибутов. Скрипты (программы) бывают как простыми (выпадение нового окна без тулбаров и меню, выпадающее меню, кнопки "назад-вперед" и т.д), так и сложными (гостевая книга, счетчик, форум, голосование, чат и т.д.).
Подробнее о скриптах, где их взять, как с ними обращаться, где найти учебную литературу по скриптам, и все остальное расскажет вам раздел Программирование на нашем сайте. Моя же задача в рамках данного учебника научить вас некоторым способам внедрения скриптов в наш html-документ.
Итак, как и в случае с CSS код скрипта может внедряться непосредственно в код вашего html-документа при помощи специального тэга SCRIPT:
|
<html>
<head> <title>Документ со скриптом</title> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> |
|
<html>
<head> <title>Документ со скриптом</title> <script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> |
|
<html>
<head> <title>Документ со скриптом</title> </head> <body> <a name="ist"></a> <a href="ist2.html#ist" onclick='open("big.html", "displayWindow1", "width=780, height=540, status=no, toolbar=no, menubar=no");'><img src="small.gif"></a> </body> </html> |
Метки: учебник по Html для чайников |
Ступенька 45-ая. |
Ступенька 45-ая.
Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
|
<head>
<link href="special.css" rel="stylesheet" type="text/css"> </head> |
|
P.special {
color : red; } |
|
<html>
<head> <title>Документ с CSS</title> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
|
<html>
<head> <title>Документ с CSS</title> <style type="text/css"> P.special { color : red; } </style> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
|
<html>
<head> <title>Документ с CSS</title> </head> <body> <p style="color: red">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не задали для него стиля.</p> </body> </html> |
Метки: учебник по Html для чайников |
