Учебник HTML. FAQ

Главная Учебник HTML Учебник CSS Web- mastering
Раскрутка Полезности FAQ Index



Наиболее часто задаваемые вопросы

Альтернативный текст к картинкам приводит к расползанию, если не указан размер, а если его указывать, то текст обрезается и теряется весь смысл.

Если Вы укажете альтернативный текст не как обычно, а при помощи атрибута title, тогда при отключении графики не будет надписи, приводящей к расползанию, а при наведении курсора на картинку, появится выпадающая подсказка. Не самый лучший, но все же выход.
<IMG src="URL" width=25 height=25 title="альтернативный текст">
Пример: наведите курсор

Как организовать автоматическую пересылку посетителей на другую страницу?

Вставьте где-нибудь между тэгами <HEAD> и </HEAD> такую конструкцию:
<META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/index.html">
В этом случае цифра 5 означает задержку по времени, если хотите осуществлять пересылку без задержек, то укажите ее равной 0, а вместо указанного URL укажите свой.

Как защитить исходник страницы от просмотра посетителей и запретить копирование графики?

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

Как организовать отправку себе на e-mail результат заполнения полей формы?

Первый способ заключается в том, чтобы отправить данные серверу, там их примет и обработает сценарий CGI, затем он перенаправит данные по указанному адресу и даже может отправить копии по другим, указаным адресам. Если Вы не располагаете собственным сервером, или у Вашего провайдера нет такого сценария, то обратитесь по адресу:
http://www.webclub.ru/free/sendform
Второй же способ описывается в примере

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

Пример того как это сделать описывается здесь

Как сделать, чтобы при клике на ссылку менялось содержимое сразу двух, или более фреймов?

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

<A href="page1.html" target="frame1" onClick="window.frame2.location.href('page2.html')">Ссылка</A>

Как вставлять один и тот же кусок кода в разные места сайта?

При помощи сценария CGI, SSI-директив, или если к ним нет доступа, то при помощи Java Script, для этого необходимо создать текстовый файл file.js, следующего вида:

<!--
document.writeln('код')
//-->

Здесь код замените на то содержимое, которое хотите вставлять, (в одну строчку, либо применяется конкатенация строк), а там, где необходимо вставить содержимое, напишите:
<SCRIPT type="text/javascript" src ="URL"></SCRIPT>

Как отлючить появление рамки вокруг ссылки при нажатии на кнопку мыши?

Вставьте onFocus="this.blur()" в начальный тэг ссылки. Например:

<A href="URL" onFocus="this.blur()">ссылка</A>

Как отлючить размножение картинки фона "черепицей"?

При помощи таблиц стилей CSS, а именно при помощи {background-repeat: no-repeat;}, тогда таблица стилей должна иметь следующий вид:

<STYLE>
body {background-repeat: no-repeat;}
</STYLE>
подробнее об этом свойстве читайте здесь

Как запретить браузеру посетителя сохранять документы сайта и изображения в кэш?

Способ обработки документов задается в "головной" части документа, между тегами <HEAD> и </HEAD> при помощи META-тэгов, в данном случае их используют с атрибутами: Expires, Cache-Control и pragma. Подробнее об этом можно прочесть здесь
НО! Не от одних META-тэгов зависит поведение браузера. А именно, в меню браузера: Вид>Свойства_обозревателя>Общие>Временные файлы Интернета>Настройка> может быть выставлен один из вариантов проверки наличия обновленных объектов, относящихся к страницам:

Естественно, что эти настройки имеют для браузера более высокий приоритет, чем META-тэги. И если у Вас на сайте располагаются, например изменяющиеся диаграммы, исполненые как обновляемые .gif-изображения, а у посетителя настроен браузер так, что объекты не проверяются на предмет обновления, то увидеть изменения он сможет только после принудительного обновления страницы, т.е. путем нажатия на кнопку "обновить".

Обычная ссылка на файлы .doc или .pdf открывает их прямо в окне браузера...

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

Как на одной странице разместить текст на нескольких языках?

Если это заголовки или небольшой объем текста, то иногда можно использовать оптимизированные .gif-изображения, но правильнее будет использовать метод, описанный здесь

Как запустить на компьютере посетителя .exe-файл?

При помощи обычной ссылки, например:

<a href="URL/file.exe">Пример</a>

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

Как вставить фоновую картинку в ячейку таблицы или в элемент формы?

Сама таблица так же, как и её ячейка вполне допускают использование атрибута background внутри тэга, например:

<TABLE background="URL">
<TD background="URL">

А в случае с формой придется использовать стили, например:

<textarea style="background-image:url(file.gif)"></textarea">

Как сделать, чтобы при клике на ссылку в ячейке таблицы HTML-файл загружался в другую ячейку?

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

<TABLE border=1>
<TR>
<TD>
<a href="file2.html" target="myname">Ссылка</a>
<TD>
<IFRAME src="file1.html" name="myname">
</TABLE">

Как задать "красную строку" в абзаце?

Иногда в начало строки вставляют прозрачное .gif-изображение, или ряд пробелов &nbsp;, но правильно будет - при помощи таблиц стилей CSS:

<STYLE>
P { text-indent: 0.5in;}
</STYLE>

Как задать буквицу?

Способов может быть несколько.
При помощи .gif-изображения буквы, например:

<P> <IMG src="t.gif" align="left" alt="T">екст абзаца....</P>

При помощи тэга FONT и его атрибута size, например:

<P> <FONT size=5>Т</FONT>екст абзаца....</P>

Используя стили, например:

<P> <span style="float:left; font-size:150%; font-weight:bold;">Т</span>екст абзаца....</P>

Используя специальный псевдоэлемент, который определяет стиль для первой буквы в строке.
Пример:
P:first-letter { font-size: 150%; font-style: italic; font-weight: bold; float: left }

Как сделать, чтобы текст прокручивался а фон оставался на месте?

В стилях указать body {background: fixed;}, либо в самом тэге на странице:

<BODY bgproperties=fixed>

Как указывать относительные ссылки?

Каким редактором лучше пользоваться?

Ответ зависит от того, какова Ваша конечная цель. Если Вы новичок и при этом хотите ограничиться лишь созданием одной-двух страничек, не вникая в HTML, тогда выбирайте любой из WYSIWYG-редакторов, например MS Frontpage. Если Вы новичок, но горите желанием стать знатоком, тогда Ваши инструменты это MS Notepad и хороший справочник по HTML, потому, что только работая головой и "ручками" можно закрепить знания и приобрести достаточный опыт.

В данном случае имеется ввиду любой текстовый редактор, по возможностям сравнимый с MS Notepad. В итоге Вы скорее всего остановитесь на чем-нибудь типа Home Site, или Dream Wiewer, но лишь для того, чтобы избавить себя от рутинной работы и успевать в конкретные сроки, при этом иметь в активе хороший справочник по HTML, а в "закладках" ссылку на сайт типа этого. Хотя на деле происходит так, что после "стараний" различных редакторов мастеру, тем не менее, все-равно приходится оптимизировать код, т.е. удалять лишние тэги и исправлять прочие ошибки, теряя при этом время.

Как создавать браузеро-независимые таблицы стилей?

Прежде всего необходимо помнить, что не все из рекомендуемых к использованию свойств стилей поддерживаются, при этом те из них, поддержка которых внедрена в современные браузеры имеют различный синтаксис для Internet Explorer и Netscape Navigator.
Например:
Для Internet Explorer

<STYLE>
p {font-family:"Impact, sans-serif"; font-size:12; color:green}
</STYLE>

Здесь свойство font-family имеет общие кавычки, и пишется раздельно через дефис, так же, как и font-size

Теперь то же самое для Netscape Navigator

<STYLE>
p {fontfamily:"Impact", "sans-serif"; fontsize:12; color:green}
</STYLE>

Здесь fontfamily имеет отдельные кавычки, и пишется слитно без дефиса, так же, как и fontsize

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

<STYLE>
p {font-family:"Impact, sans-serif"; font-size:12; color:green}
p {fontfamily:"Impact", "sans-serif"; fontsize:12; color:green}
</STYLE>

В этом коде Internet Explorer проигнорирует вторую строку, а Netscape Navigator - первую. И если вспомнить и учесть, что ссылки на подключаемую внешнюю таблицу стилей пишутся тоже по-разному <LINK href=... и <LINK src=..., то получим работоспособный вариант.

Как украсить ссылки на странице?

<STYLE>
A:Link{ Color: #0044ff; font-weight:bold ; text-decoration: none; font-size: 100%; font-family: Arial;}
A:Visited{ Color: #0088ee; font-weight:bold ; text-decoration: none; font-size: 100%; font-family: Arial;}
A:Active{ Color: aqua; font-weight:bold ; text-decoration: none; font-size: 100%; font-family: Arial;}
A:Hover{ Color: #000088; font-weight:bold ; text-decoration: none; font-size: 100%; font-family: Arial;}
</STYLE>

Здесь A:Link - это стиль ссылки, A:Visited - это стиль посещенной ссылки, A:Active - это стиль активной ссылки, и A:Hover - стиль ссылки при наведении на нее курсора.

Как сделать многострочный альтернативный текст к рисунку или ссылке?

Подобно тому как в тексте Вы задаете перенос строки при тэгом <BR>, в альтернативном тексте используется символ &#010;

<A href="file.html" title="Строка1&#010;Строка2">Ссылка</A>
<IMG src="file.gif" alt="Строка1&#010;Строка2">

Оба примера: Ссылка или Строка1
Строка2

Как загрузить страницу не во фрейм, а во все окно?

<A href="file.html" target="_top">Ссылка</A>

Как загрузить страницу в новом окне?

<A href="file.html" target="_blank">Ссылка</A>

Как выложить на сайте mp3-файлы для скачивания?

Правильнее для этих целей использовать FTP-протокол, но если надо именно на сайте, тогда так:

<A href="http://www.домен.ru/file.mp3">Скачать</A>

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

Как задать фоновое звучание?

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

<BGSOUND SRC="http://URL/file.mid" loop="infinite">
или
<SCRIPT LANGUAGE="javascript">
<!--
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer")
{ Cmd = "<BGSOUND SRC=http://URL/file.mid loop=infinite>" }
else { Cmd = "<EMBED SRC=http://URL/file.mid HIDDEN=true>" }
document.write( Cmd )
//-->
</SCRIPT>

Как поменять фон у ячейки таблицы?

Пусть смена цвета происходит при наведении курсора, тогда:

<TD onMouseOver="this.bgColor='#ffffff'">

Как ячейки таблицы слепить вместе, без пробелов?

Необходимо представить ее в таком виде:

<TABLE rules=none border="0" cellspacing="0" cellpadding="0">
...
</TABLE>

Как задать "резиновый" дизайн, одинаково приспособленный под любое разрешение экрана?

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

<STYLE>
h1 { font:130%;}
body {margin: 10%; padding: 5%;}
table {width: 75%;}
...
</STYLE>

Как расположить текст на сайте коллонками?

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

Как задать фон для заголовков?

При помощи стилей:

<STYLE>
h1 {background-color: #000099;}
</STYLE>

Либо задать стиль для класса, который можно будет применить уже к любому участку текста:

<STYLE>
.bckgr {background-color: #000099;}
</STYLE>
......
<SPAN class="bckgr">Любой текст или заголовок</SPAN>

Как задать подгружаемый шрифт на странице?

Для этого необходимо указать путь до файла .eot так, как это описано здесь. Для того, чтобы создать такой шрифт существуют специальные утилиты, причем как всегда это бывает - разные у NN и IE. Вторая из них распространяется бесплатно и скачать ее можно отсюда. Однако применение таких шрифтов не всегда может быть полезным, т.к. браузеру пользователя дополнительно придется подгружать файл размером около 50-100 kB.

Как быстро и эффективно научиться создавать сайты?

Почаще заглядывайте на http://www.w3.org и в этот учебник, пишите код ручками в Notepad или ему подобных текстовых редакторах, чаще обменивайтесь опытом с коллегами на форумах, не стесняйтесь задавать самые банальные вопросы. В сети есть достаточное колличество тематических форумов, где без раздражения ответят на любой Ваш вопрос, остаточно лишь четко следовать, заведенным на форуме, правилам поведения.

Обычно на каждом из форумов сформировалась постоянная аудитория наиболее опытных завсегдатев форума, которые охотно оказывают квалифицированную помощь новичкам. Вот, например, ссылки на очень неплохие форумы:
http://www.xpoint.ru/cgi-bin/forum.cgi?action=topic&id=3
http://forum.spylog.ru/list.phtml?f=9
Кроме того, больше практикуйтесь в написании кода, ибо только с практикой приходит осознание и опыт.

Как разместить текст поверх картинки?

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

<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:1">
<IMG src="file.gif">
</DIV>
<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:2">
text
</DIV>

Как организовать предварительную загрузку невидимых элементов страницы?

К такой уловке часто прибегают, когда на сайте необходимо задать динамическую смену изображений, например смена картинки при наведении на нее курсора. Для достижения моментального эффекта, изображение необходимо сначала подгрузить:

<DIV style="position:absolute; display:none">
<IMG src="URL/file.gif">
</DIV>

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

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

Как вставить временное содержание, пока идет загрузка страницы?

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

<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:1">
Ждите, идёт загрузка таблицы .....
</DIV>
<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:2">
<TABLE>
...
</TABLE>
</DIV>

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

Как сделать невозможным загрузку одного фрейма, без фреймсета?

Средствами HTML никак, но можно вставить такой скрипт:

<SCRIPT language="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.html";
//-->
</SCRIPT>

Здесь подразумевается, что фреймсет назван как index.html

Как сделать невозможным загрузку страницы в чужой фреймсет?

Средствами HTML никак, но можно вставить такой скрипт:

<SCRIPT language="JavaScript">
<!--
if (parent.frames.length !=0) {
window.top.location.href="file.html"
}
//-->
</SCRIPT>

Здесь подразумевается, что file.html это название того файла, куда переадресовывается посетитель.

Как защитить от СПАМеров почтовый адрес, расположеный на сайте?

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

<A href="mailto:NOSPAMname@domen.ru">name@domen.ru</A>

Тогда пользователь, решивший отправить Вам сообщение должен будет просто удалить NOSPAM из адреса, чтобы успешно отправить письмо, и естественно что СПАМ-бот до этого не "додумается". Однако один тот факт, что такой способ используется крайне редко, уже говорит о его некотором неудобстве, поэтому попробуйте "обмануть" СПАМ-бот следующим образом:

<SCRIPT language="JavaScript">
<!--
document.write('<A href="mailto:name' + '@' + 'domen.ru">' + 'Наша почта</A>')
//-->
</SCRIPT>

Как сделать кнопку возврата к предыдущей странице?

Средствами HTML никак, но можно вставить такой скрипт:

<A href="javascript:history.back()" onMouseOver="window.status='Back';return true">Назад</A>




Главная Учебник HTML Учебник CSS Web- mastering
Раскрутка Полезности FAQ Index

Сайт создан в системе uCoz