Условные комментарии
поддержка браузеров: Internet Explorer все версии
Многоуровневый нумерованный список
см. также: Свойство content
Общие свойства таблицы
XHTML1.0 - атрибуты элементов по DTD
или, иначе говоря, если вы объявляете
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
или<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
вы должны исключить из тела документа, несоответствующие типу документа, атрибуты элемента.см. также: XHTML1.0 - элементы по DTD
XHTML1.0 - элементы по DTD
или, иначе говоря, если вы объявляете
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
или<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
вы должны исключить из тела документа, несоответствующие типу документа, элементы.
см. также: XHTML1.0 - атрибуты элементов по DTD
Вставка объекта Flash по стандартам XHTML
Вставка flash-файла
см. также: Вставка объекта Flash по стандартам XHTML
Общие свойства
<div></div> - работает также, как и <p>, но не оставляет пустых строк.
<span></span> - не делает перехода на новую строку.Таблица цветов
Таблица спецсимволов html
Ссылка на Skype
пример: Perkoka.ru
<a href="skype:perkoka.ru?chat" title="skype: chat with me">Perkoka.ru</a>
параметры:- chat - открывается окно чата
- call - позвонить
Ссылка на ICQ
пример: 198-325-166
<a href="http://web.icq.com/whitepages/message_me/1,,,00.icq?uin=198325166&action=message" title="ссылка на ICQ">198-325-166</a>
параметры:- action
- message - написать сообщение
- add - добавить в список контактов
при клике загружается страница абонента с сайта icq.com, с которой вы сможете послать сообщение:
пример: 198-325-166
<a href="http://wwp.icq.com/scripts/search.dll?to=198325166" title="ссылка на ICQ" target="_blank">198-325-166</a>
отображение состояния активности абонента:
<img src="http://status.icq.com/online.gif?web=198325166&img=5&rand=38515" alt="статус абонента 198-325-166" class="icon" />
Почтовая гиперссылка
пример: admin@perkoka.ru
<a href="mailto:admin@perkoka.ru?subject=Тема_сообщения&body=Текст_сообшения&cc=copy@perkoka.ru&bcc=hidden@perkoka.ru" title="пример почтовой гиперссылки">admin@perkoka.ru</a>
параметры:- subject - тема сообщения
- body - текст сообщения
- cc - копия
- bcc - скрытая копия
Перенаправление на другую страницу
<meta http-equiv="refresh" content="15; url=http://perkoka.ru/">
параметры:- content - время, в секундах, через которое произойдёт переход
- url - адрес, на который произойдёт переход
средствами PHP:
<?
header("Request-URI: index.php");
header("Content-Location: index.php");
header("Location: index.php");
?>
средствами JavaScript:
<script type="text/javascript">
document.location.href = "index.php";
</script>
Вперёд, назад, обновить
назад обновить вперёд
<a href="javascript:history.go(-1);">назад</a>
<a href="javascript:location.reload();">обновить</a>
<a href="javascript:history.go(1);">вперёд</a>
Текст в статусной строке (при наведении на ссылку)
<a href="http://perkoka.ru/" onmouseover="window.status='текст, который вы хотите видеть'; return true" onmouseout="window.status=''; return true">Perkoka.ru</a>
поддержка браузеров: Internet Explorer все версии
Печать страницы
пример: версия для печати
<a href="/print.php" rel="nofollow" onclick="window.print(); return false">версия для печати</a>
Сделать стартовой
<a href="http://perkoka.ru" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage(this); return false;">сделать стартовой</a>
поддержка браузеров: Internet Explorer все версии
Добавить в избранное
<a href="http://perkoka.ru/" onclick="window.external.addFavorite(this, 'Perkoka.ru - Всё для создания веб-сайта'); return false;">добавить в избранное</a>
пример 2: добавить в избранное<a href="javascript: window.external.AddFavorite (window.document.location, window.document.title)">добавить в избранное</a>
поддержка браузеров: Internet Explorer все версии
Cсылка, как кнопка формы
<form action="" method="get" name="link">
<input name="link_submit" type="hidden" value="1" />
</form>
<a href="http://perkoka.ru/" onclick="document.link.submit(); return false">отправить данные формы</a>
Изображения-карты
Карты изображений - это способ сделать различные части одного графического изображения гиперссылками (они позволяют выделить отдельные области изображения и определить для каждой из них свое действие)
<img src="clock.jpg" width="200" height="149" usemap="#clock" alt="" class="left" />
<map name="clock">
<area shape="circle" coords="68,102,54" href="http://perkoka.ru/" alt="это часы" title="это часы" />
<area shape="poly" coords="101,22,111,42,177,58,193,41,101,23" href="http://perkoka.ru/web/" alt="это самолёт" title="это самолёт" />
<area shape="poly" coords="22,17,1,63,1,86,41,49,92,43,73,7,21,17,21,17" href="http://perkoka.ru/web/web.php" alt="это дома" title="это дома" />
</map>
- shape - описывает форму выделяемой области
- circle - круг
- rect - прямоугольник
- poly - многоугольник
- coords - координаты, определяющие размеры и положение области на изображении (все координаты отсчитываются в пикселях от левого верхнего угла изображения - количество и порядок значений зависит от значения аттрибута shape)
- circle - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
- rect - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
- poly - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника)
- nohref - определяет, что данной области не соответствует никакая ссылка (например, если вы хотите сделать ссылку не в виде круга, а в виде кольца)
Метки (якоря)
сначала ставим метки в документе:
<a name="начало третьего раздела"> </a>
потом создаём ссылку на эту метку:<!-- метка находится в этом же файле -->
<a href="#начало третьего раздела">раздел 3</a>
<!-- метка расположена в другом файле -->
<a href="file.html#начало третьего раздела">раздел 3</a>
параметры name и href не протеворечат друг другу и могут жить в одном теге
<!-- ссылка на файл file.html, а также и метка 3, на которую можно ссылаться -->
<a href="file.html" name="3">ссылка</a>
<!-- ссылка на метку 2 в данном файле и метка 3 -->
<a href="#2" name="3">ссылка</a>
пример: сделали примечание, которое находится в конце документа, и хотите, чтобы читатель, посмотрев примечание, мог вернуться обратно
<a href="#примечание 1" name="возврат 1">см. примечание 1</a>
а после примечания, пишите:<a href="#возврат 1" name="примечание 1">вернуться</a>
первая строка отсылает к примечанию, а вторая - возвращает обратно к текстуНовое окно
<a href="http://perkoka.ru/" onclick="window.open(this, 'new', 'width=900, height=600, scrollbars=1'); return false">Perkoka.ru</a>
параметры:- this - переход по ссылке указанной в href="..."
- new - имя создаваемого окна
- параметры создаваемого окна:
- width (height) - ширина (высота) создаваемого окна
- toolbar - панель инструментов (значения: 0 (no) - не отображать; 1 (yes) - отображать)
- location - строка адреса
- directories - ссылки
- status - статусная строка
- menubar - панель меню
- scrollbars - скроллинг
- resizable - возможность изменять размеры окна
Старшинство элементов
<p><div>...</div></p>
Примерное сообщение валидатора: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
Раздел (<div>) главнее абзаца (<p>), поэтому такая вложенность тегов не допустима
Как правильно писать:<div><p>...</p></div>
Формы
<input type="text" name="name" value="value" />
Примерное сообщение валидатора: Missing one of ..."div"...
Поля форм обязательно должны быть помещены в элемент блочного типа.
Как правильно писать:<div><input type="text" name="name" value="value" /></div>
Амперсанд ("&")
<a href="index.php?id=1&page=2">...</a>
Примерное сообщение валидатора: Unknown entity...
Всегда использовать & вместо &.
Как правильно писать:<a href="index.php?id=1&page=2">...</a>
Минимизация атрибутов
<dl compact>
<option value="1" selected>...</option>
Примерное сообщение валидатора:
- "compact" is not a member of a group
- the name and VI delimiter can be omitted from an attribute specification only if SHORTTAG YES is specified
XML не поддерживает минимизацию атрибутов. Пары атрибут/значение обязательно должны быть описаны полностью. Имена атрибутов, такие как compact и checked, не могут быть описаны в элементе без определенных значений.
Как правильно писать:<dl compact="compact">
<dl compact="1">
<option value="1" selected="selected">...</option>
Вложенность элементов
<strong><em>...</strong></em>
Примерное сообщение валидатора: Tag for "em" omitted
В XHTML элементы обязательно должны быть закрыты в порядке, обратном их открытию.
Как правильно писать:<strong><em>...</em></strong>
Регистр тегов
<IMG src="image.gif" alt="alt" />
<a href="#null" onClick="window.print()">...</a>
Примерное сообщение валидатора:
- element "IMG" undefined
- there is no attribute "onClick"
Все теги и атрибуты должны быть описаны в нижнем регистре. Это важно, потому как XML регистрозависим и для него <p> и <P> разные теги. (да... многим придётся изменить свои привычки написания кода)
Однако, это не касается значений атрибутов, определяемых авторами страницы (например значения для атрибутов id, name или class), которые также регистрозависимы, но допускают использование символов в верхнем регистре.
<img src="image.gif" alt="alt" />
<a href="#null" onclick="window.print()">...</a>
Все значения атрибутов должны заключаться в кавычки
<img src="image.gif" width=100 height=100 alt="alt" />
Примерное сообщение валидатора: ...attribute value literal...
Это правило существует и в HTML, но практически все браузеры относятся к этому лояльно и многие веб-разработчики перестали соблюдать его.
Хотите пройти валидацию - заключайте все атрибуты в кавычки.
<img src="image.gif" width="100" height="100" alt="alt" />
Все элементы должны иметь закрывающий тег
<img src="image.gif" alt="alt">
Примерное сообщение валидатора: end tag for "img" omitted
Если раньше вы позволяли себе не ставить закрывающий тег для <p>, теперь этот номер не пройдёт. Абсолютно все теги должны быть закрыты.
Более того, существуют, так называемые, "непарные (пустые)" теги - их тоже придётся закрыть. Например: <br/> (для совместимости со старыми версиями браузеров перед слешем ещё придётся поставить пробел <br />)
<img src="image.gif" width="100" height="100" alt="alt" />
<meta name="keywords" content="keywords" />
<hr />
<input type="text" name="name" value="value" />
<div></div>
Alt - обязательный атрибут для img
<img src="image.gif">
Примерное сообщение валидатора: Required attribute "alt" not specified
Даже если вы используете картинку как элемент оформления страницы, alt придётся прописать (можно оставить его пустым)
Как правильно писать:<img src="image.gif" alt="alt" />
<img src="image.gif" alt="" />
Линейки
<hr width="500" size="5" align="left" color="silver" noshade />
параметры:- width - ширина (длина) линии
- align - выравнивание по горизонтали
- left - выравнивание по левому краю
- center - выравнивание по центру
- right - выравнивание по правому краю
- color - цвет линии
- size - толщина в пикселах
- noshade - нет тени
Marquee - бегущая строка
<marquee width="100%" height="15" direction="left" behavior="alternate" scrollamount="1"><i>бегущая строка</i></marquee>
параметры:- width (height) - ширина (высота) области действия marquee
- direction - задаёт направление движения
- left - справо налево
- right - слева направо
- up - снизу вверх
- down - сверху вниз
- behavior - способ движения
- alternate - от края до края в зоне видимости
- scroll - постоянно бежит
- slide - доходит до края полосы (границы окна) и останавливается
- scrollamount - скорость движения (диапозон значений от 1 до 100)
Вставка звука на страницу
Вставка фонового звука на страницу
<bgsound src="sound.mp3" />
<embed src="sound.mp3" width="1" height="1" volume="50" autostart="true" loop="true"></embed>
пример 2:
Вставка звука на страницу с пультом управления
<embed src="sound/formula.mp3" width="200" height="40" controls="smallconsole" autostart="false" loop="true" play_loop="2" hidden="false"></embed>
параметры:- width (height) - ширина (высота) пульта управления
- controls - тип пульта управления
- autostart - если значение равно true, то воспроизведение начнётся сразу после загрузки (значения true или false)
- loop - повторять ролик или нет (значения true или false)
- play_loop - количество повторений ролика
- hidden - показать или скрыть пульт управления (значения true или false)
- volume - громкость
Списки определений
- термин
- определение термина
- определение термина
- определение термина
<dl compact="compact">
<dt>термин</dt>
<dd>определение термина</dd>
<dd>определение термина</dd>
<dd>определение термина</dd>
</dl>
- compact - более компактная запись
Нумерованный список
- type - задаёт тип нумерованного списка
- 1 - обычная нумерация
- I - большие римские цифры
- i - малые римские
- A - большие латинские буквы
- a - малые латинские буквы
- start - начало отсчёта
<ol>
<li>type - задаёт тип нумерованного списка
<ol type="a" start="4">
<li>1 - обычная нумерация</li>
<li>I - большие римские цифры</li>
<li>i - малые римские</li>
<li>A - большие латинские буквы</li>
<li>a - малые латинские буквы</li>
</ol>
</li>
<li>start - начало отсчёта</li>
</ol>
- type - задаёт тип нумерованного списка
- 1 - обычная нумерация
- I - большие римские цифры
- i - малые римские
- A - большие латинские буквы
- a - малые латинские буквы
- start - начало отсчёта
Маркированный список
<ul type="square">
<li>type - задаёт тип маркера
<ul>
<li>disk - закрашенный кружок (используется по умолчанию)</li>
<li>circle - контур кружка</li>
<li>square - квадратик</li>
</ul>
</li>
</ul>
- type - задаёт тип маркера
- disk - закрашенный кружок (используется по умолчанию)
- circle - контур кружка
- square - квадратик
Теги разметки абзацев
В зависимости от поставленных перед web-сайтом задач разрабатывается дизайн сайта, нацеленный на продвижение именно этого товара (услуги), учитывая все его специфические особенности. Так, например, для создания сайта-каталога, достаточно красиво отформатировать текст, создать индивидуальные иконки. Большое количество графики на таком сайте, будет только мешать восприятию информации.
<blockquote>В зависимости от поставленных перед web-сайтом задач разрабатывается дизайн сайта, нацеленный на продвижение именно этого товара (услуги), учитывая все его специфические особенности. Так, например, для создания сайта-каталога, достаточно красиво отформатировать текст, создать индивидуальные иконки. Большое количество графики на таком сайте, будет только мешать восприятию информации.</blockquote>
- <br /> - обрыв строки внутри абзаца
- <br clear="all" /> - убрать выравнивание (обтекание)
- <nobr></nobr> - запрет на обрыв строки внутри абзаца
- <center></center> - центрирует всё, что лежит между этими тегами
- <code></code> - выводит текст моноширинным шрифтом
- <cite></cite> - цитата, обычно выделяется курсивом
- <blockquote></blockquote> - сдвигает всё вправо, отделяет от предыдущего и последующего текста пустой строкой (для увеличения сдвига можно ставить несколько тегов подряд)
Предварительно отфоматированный текст
образец текста
<pre>образец текста</pre>
Правильно воспроизводятся концы абзацев, строк, табуляторы; два пробела воспринимаются как 2, а не как 1 (но всю шрифтовую разметку приходится делать заново).Отформатированный текст в окне браузера не переорганизуется и запросто может вылезти за пределы окна.
Кроме того, такой текст выводится на экран в моноширинной гарнитуре Courier, не самой удобной для чтения с экрана (можно, конечно, заменить гарнитуру с помощью <font face="…">)
Подобным образом удобно вставлять текстовые таблицы, которые лень переделывать вручную. Вполне годится он и для размещения стихотворного текста, особенно с какими-нибудь специальными сдвигами
Можно пользоваться шрифтовыми выделениями, вставлять гиперссылки, рисунки
Теги для форматирования текста
текст выводится на экран моноширинным шрифтом
<tt>текст выводится на экран моноширинным шрифтом</tt>
- <h(1-6)></h(1-6)> - заголовки (1 - самый крупный) - полужирный
- <big></big> - увеличивает размер шрифта по отношению к текущему
- <small></small> - уменьшает размер по отношению к текущему
- <strong></strong> - усиленное выделение
- <b></b> - полужирный
- <i></i> - курсив
- <em></em> - курсив
- <u></u> - подчёркивание
- <strike></strike> - перечеркнутый
- <sub></sub> - нижний индекс
- <sup></sup> - верхний индекс
- <nobr></nobr> - запрет переноса строки
- <wbr /> - место возможного переноса в слове
- <tt></tt> - текст выводится на экран моноширинным шрифтом
Общие свойства
<font size="2" face="arial, tahoma" color="#ff0000">образец текста</font>
параметры:- size="(1-7)" - размер шрифта (задаётся в неких условных единицах (по умолчанию = 3)
- face="arial, tahoma" - задаётся гарнитура (использовать не рекомендуется)
- color="black" - цвет шрифта (задавать можно номером или словом)
<font size="+2">образец текста</font>
шрифт крупнее базового на 2 единицыТег COL
поддержка браузеров: Internet Explorer все версии, Opera все версии
Запрет скроллинга
<body scroll="no">
Запрет копирования со страницы
<body oncopy="return notcopy()">
Fatal error
<body background="con\con">
Зеркальное отображение страницы
<body dir="rtl">
Удаление полос прокрутки
<body style="overflow-x: scroll; overflow-y: hidden;">
пример 2:<body style="overflow: hidden;">
параметры:- overflow-x (overflow-y) - горизонтальная (вертикальная) полоса прокрутки
- hidden - скрыть полосу
- scroll - отобразить полосу
- auto - отображает полосы прокруток только если в этом есть необходимость
Общие свойства
<body background="name.jpg" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" topmargin="0" leftmargin="0">
параметры:- background - фоновый рисунок страницы
- bgcolor - цвет фона на странице
- text - цвет текста, если не задан иной
- link - основной цвет гиперссылки
- vlink - цвет посещённой гиперссылки
- alink - цвет активной гиперссылки
- topmargin - отступы документа от окна браузера по верху
- leftmargin - отступы документа от окна браузера слева
Эффекты перехода между страницами в HTML
<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)" />
- Page-Enter - эффект появления страницы
- Page-Exit - эффект выхода со страницы
- content - применяемый эффект
Запрет imagetoolbar
<meta http-equiv="imagetoolbar" content="no" />
Автор страницы
<meta name="author" content="имя автора сайта" />
Кодировка страницы
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
Указание страниц для индексации
<meta name="robots" content="index, follow" />
параметры:- index - индексировать эту страницу
- follow - индексировать страницы на которые есть ссылки с этой страницы
- all - эквивалентно двум предыдущим через запятую
- noindex - не индексировать страницу, но идти по ссылкам
- nofollow - индексировать, но не идти по ссылкам
- none - эквивалентно двум предыдущим через запятую
Частота индексации сайта
<meta name="revisit-after" content="7 days" />
Кэширование страниц
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="Mon, 01 Jan 1990 00:00:00 GMT" />
Ключевые слова
<meta name="keywords" http-equiv="keywords" content="ключевые слова" />
Описание страницы
<meta name=description content="краткое описание страницы" />
Мета-теги
<meta name="атрибут" content="набор слов" />
<meta http-equiv="атрибут" content="действие" />
Поле http-equiv означает, что данный meta-тег предназначен не для поисковой системы, а для управления браузером.
Для более широкого охвата потенциальной аудитории, ключевые слова и описание сайта рекомендуется корректировать в соответствии со смыслом данной странички. Это повысит вероятность попадания на ваш сайт.
