Страна советов
Rambler's Top100
 главная мерфология pre-мудрости развлечения soft-ик новости aboutme

Маленькие хитрости 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 - завершить обтекание текстом изображения, выровненного по правому краю.


Определение Вейнберга


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

<< вернуться

Проекты

А в попугаях - гораздо длиннее
Получи Себе новый Праздник (ПСП)

Страна советов
Маленькие хитрости html, выбор редактора,
полезные программки

Мерфология
Знать это не обязательно, но почитать интересно

Короткие анекдоты
Для тех, кто торопится

Развлечения

Изысканные комплименты
и для женщин, и для мужчин

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

Страшилки
Новая концепция

Эксклюзив

История о том,
как три вектора один детерминант в нуль обратили
(страшная сказка)

Детский лепет
Забавные фразы, которые говорят дети

Офисный фольклор
Забавные фразы, которые говорят взрослые

Плов как искусство
Секреты настоящего блюда

Статистика

Rambler's Top100
Рейтинг@Mail.ru
 
Hosted by uCoz