Маленькие хитрости HTML

• При необходимости передать символ & можно воспользоваться объектом &

• Символьные объекты (такие, как é, ¹, ¾, ¿ и т.п.) можно прописывать в «длинном» виде.
  Пример: — — длинное тире

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

• Нет перевода строки между дескрипторами <nobr></nobr> (но не для всех случаев)

• Красивые кавычки - например, пиво «Жигулёвское» - &laquo;Жигулёвское&raquo;

• Простые кавычки можно получить так - &quot; - пиво "Жигулёвское"

• <<< >>>
  При необходимости отобразить эти символы - соответственно &lt;&lt;&lt; и &gt;&gt;&gt;

• Увеличение интервала между абзацами - <p><br>
  Но две таких хитрости подряд уже не проходят, а если очень надо, можно употребить невидимый текст.

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

• Отступ можно сделать и так - &nbsp; &nbsp; &nbsp; &nbsp;

• Переход
  или ссылка на место, отличное от начала страницы.
  <a href="c8.htm#phot">Народный фотограф</a>
  Адрес в теле документа, на который идёт ссылка, может иметь такой вид:
  <a name="phot"></a>

• Ссылки внутри документа
  Путь к <a href="#mit">счастью</a>
  <a name="mit"></a>
  Место, куда указывает ссылка, отмечает строка, показанная выше. Таких ссылок можно сделать сколько угодно, вводя новые имена меток.

• Открытие ссылки в новом окне - делается параметром target
  <a href="example.htm" target="_blank"></a>

• Быстрая загрузка изображений
  Чтобы большая картинка сразу появлялась при открытии страницы, ее можно загрузить предварительно. На странице, с которой обычно попадают на страницу с большим изображением, вставьте
  <img src="image.gif" height=1 width=1>
  Картинка загружается, но остается невидимой. Этот тэг надо вставлять в самом конце body-части, чтобы загрузка не мешала показу самой странички.

• Размер файла изображения
  в формате gif обычно меньше, чем jpg - используется ограниченный набор цветов.
  Мне попадались простенькие баннеры jpg 468х80 размером по 20 кбайт. Это плохо! Простым переводом в gif получалось в два раза меньше (хотя и это много).
  Формат gif прекрасно сжимает рисунки с малым количеством цветов. А лучше - попробуйте оба варианта и выбирайте наиболее приемлемый для каждого случая.

• Всплывающие подсказки для рисунков:
  <img src="image.gif" border=0 width=88 height=31 vspace=5 alt="Наша кнопка">
  (наведите указатель на рисунок)

• Всплывающие подсказки для текстовых ссылок:
  <a href="../adviser.html" title="в раздел Страна советов">&lt;&lt; вернуться</a>
  Будет выглядеть так (наведите указатель на ссылку): << вернуться

• Текст в прямоугольнике
  Формируется как таблица размером 1х1 (одна строка и один столбец).
  <table border=0 cellpadding=8 cellspacing=0 width=65%>
  <tr><td bgcolor=#fefecd>Текст</td></tr></table>

  При организации ссылок в указанном адресе следует различать БОЛЬШИЕ и маленькие буквы (слова Files и files - разные слова)

• Текст в прямоугольнике с окантовкой
  Формируется как таблица размером 3х5 (три строки и пять столбцов). Текст - в третьем столбце.
  Столбцы 2 и 4 нужны для отступа слева и справа. Имеют смысл при выравнивании по левому или правому краю, при выравнивании текста по центру их можно не вставлять.
  <table width=65% border=0 cellspacing=0 cellpadding=0 bgcolor=#fefecd>
  <TR><TD bgcolor=#999999 height=1 colspan=5></TD></TR>
  <TR><TD bgcolor=#999999 width=1></TD><TD width=10></TD>
  <TD align=center><br>Текст<p></TD>
  <TD width=10></TD><TD bgcolor=#999999 width=1></TD></TR>
  <TR><TD bgcolor=#999999 height=1 colspan=5></TD></TR>
  </table>

  		Мои любимые анекдоты. Неприличных нет.

• Относительная адресация
  Абсолютная: <a href="http://www.example.ru/files/file.html">Абсолютная ссылка</a>
  Относительная: <a href="files/file.html">Относительная ссылка</a> - осуществляется относительно базового ресурса - удобно при переносе сайта на новое место.

• Ссылки на другую папку
  - на папку уровнем выше: <a href="../index.html">Главная страница</a>
  - на вложенную папку: <a href="files/next.htm">Другая страница</a>

• Скачать файл
  Файл копируется из сети по обычной ссылке: <a href="file.zip">Скачать файл</a>

• Тонкие линии
  Для отображения тонкой линии можно делать таблицы с колонкой или строкой размером в 1 точку, выделив её цветом.
  Колонка: width=1. Cтрока: heigth=1.
  Тонкая горизонтальная линия: <hr size=1>

• Не менять размер шрифта
  <font style="font-size:10px;">Неизменный шрифт</font>
  <div style="font-size:10px;">То же в пределах раздела</div>
  Для Internet Explorer 4 единицы измерения - pt(пункты) или px(пиксели).
  Для Netscape 4 - отрабатываются только px.
  Совет: используйте эту возможность там, где это действительно надо.

• Добавить в избранное
  <span style=cursor:hand onclick='window.external.AddFavorite(top.location.href,top.document.title);'><u>Добавить в избранное</u></span>

• Тема в e-mail
  Чтобы прописать тему сообщения в форме отправки e-mail, надо к ссылке, по которой открывается бланк письма, добавить то, что выделено жирным шрифтом.
  <a href=mailto:your_name@mail.ru?subject=тема_сообщения>Написать письмо</a>

• Предпросмотр фотографий
  При показе фоток разумно сначала демонстрировать небольшое изображение, а полноразмерную картинку открывать по щелчку по маленькой. Код для этого:
  <a href="" onclick="window.open('http://_путь_к_большой_photomax.jpg', 'image', 'toolbar=no, menubar=no, width=925, height=640, resizable=yes, scrollbars=yes'); return false;"><img src="photos/photomini.jpg" width="105" height="75" border=0 alt="Комментарий"></a>

  Открывается в новом окне того габарита, который вы сами укажете. Параметры yes/no установите по своему разумению.

• Завершение обтекания изображения текстом
  После того, как в браузерах появилась возможность обтекания изображения текстом (параметр align элемента img), понадобился дополнительный параметр clear.
  <br clear=...> - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
  all - завершить обтекание изображения текстом;
  left - завершить обтекание текстом изображения, выровненного по левому краю;
  right - завершить обтекание текстом изображения, выровненного по правому краю.

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

<< вернуться