Практическое руководство по HTML .
--------------------------------------------------------------------------------
Часто задаваемые вопросы (FAQ) по HTML
Источник: www.webmastak.com
Автор: CompDocs www.docs.com.ru
Чтобы страничка не кэшировалась у клиента?
Для этого нужно прописать в HTTP-response со стороны сервера параметры
Expires, Pragma и Cache-control.
Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие
<meta>:
<meta http-equiv="Expires" content="Thu, Jan 1 1970 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
Чтобы выровнять табличку по центру документа?
И почему в NN и Opera не работает <table align="center">?
<table align="center"> - конструкция принципиально неверная. Параметр align в
<table> предназначен для того, чтобы задать обтекание таблицы текстом, так же,
как аналогичный параметр в <img>.
Правильно так:
<div style="align:center"><table>
....
</table></div>
Чтобы разместить текст, картинку или табличку в центре экрана?
Человек, который задает такой вопрос, не понимает, что такое HTML. Ему нужно
хотя бы поверить в то, что никакого экрана у его клиента нет, что HTML - не
привязанный к платформе язык, что браузер для слепых не показывает буквы, а
читает их, и так далее.
Для тех, кто упорствует в ереси, есть решение с таблицей. Трудность в том, что
никакого атрибута HEIGHT в стандарте нет, поэтому его реализация - это
индивидуальные затеи браузера. Поэтому решение, которое предлагается здесь,
нарочито неправильно и нестандартно.
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
Текст, картинка или табличка в центре экрана
</td>
</tr>
</table>
Чтобы междy каpтинками не было пpомежyтков?
Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту
и показывают CR LF так, как бог на душу положит. Обычно - как пробел, хотя в
стандарте и сказано, что CR LF не должны показываться.
Первое решение с таблицей. Здесь есть надежда, что пустоты, не относящиеся к
ячейкам, показаны не будут.
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src=...></td>
<td><img src=...></td>
</tr>
</table>
Второе решение тоже обходит противоестественные склонности браузеров. Картинки
описываются без промежутков между тегами:
<img src=...><img src=...><img src=...><br><img src=...><img src=...>
Чтобы убрать промежутки между ячейками в таблице, которая
получилась в результате разрезки целой картинки на куски?
Пропишите в таблице параметры border="0" cellspacing="0" cellpadding="0"
Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.
Например, так:
<td><img src="kusok.gif" width="XXX" height="YYY" border="0"></td>
^ В местах, отмеченных галочками, пробелов нет!!! ^
Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без
пробелов:
<td><a href="..."><img ...></a></td>
И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.
Чтобы форматировать текст по ширине ?
В HTML 4 появилось еще одно значение для атрибута ALIGN абзаца. Третьими
браузерами не поддерживается.
<p align="justify">
Ваш текст
</p>
Можно также использовать CSS:
P{text-align:justify;}
Как встроить свои шрифты в страничку?
Это делается разными методами в IE и NN и может вызвать большие проблемы в
разных операционных системах и разных кодировках.
Рекомендуется вместо этого использовать стандартные font-family: serif (шрифт
с засечками типа Times), sans-serif (рубленый, типа Arial) и monospace
(моноширинный шрифт типа Courier). Не рекомендуется использовать fantasy и
cursive - в IE это также может вызвать проблемы с кодировками, а в NN просто
игнорируется.
Для небольших кусочков текста (заголовки, кнопки, спецсимволы) можно
воспользоваться картинками, разумеется, с указанием параметра ALT.
Чтобы убрать синюю рамку вокруг картинки-ссылки?
Точно так же, как убирают любую другую рамку вокруг любой другой картинки:
<img border="0" ...>
Чтобы убрать или задать отступы содержимого странички от краев
окна браузера?
<body leftmargin="X" topmargin="Y" rightmargin="X" bottommargin="Y"
marginwidth="X" marginheight="Y">
Для нулевых отступов X=Y=0
Грамотно также будет добавить в стили документа:
<style type="text/css"><!--
body{margin:0px;padding:0px;}
--></style>
Чтобы при смене страниц сам URL не изменялся?
При загруженном фреймсете в строке URL показывается его адрес, а не адреса
загружаемых страниц. Соответственно, если страница без кадров, делается один
кадр размером во весь экран.
Чтобы при нажатии на определенную область картинки происходил переход
на один адрес, а при нажатии в другой области - на другой?
Стандарт позволяет пользоваться картами изображений. Полный формат описания
карт поищите в стандарте. Обратите внимание, что при описании самой карты
пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то
есть здесь уже ссылка.
<img src="адрес_картинки" usemap="#имя_карты">
<map name="имя_карты">
...
</map>
Обязательно ли использовать кавычки в значениях атpибyтов?
Кавычки можно опyскать, если значение атpибyта:
* содеpжит только английские бyквы, цифpы, точки и тиpе
* начинается с бyквы
Некоторые считают, что если браузеры не обращают внимание на кавычки, то можно
кавычки не писать. Да, если вы пользуетесь языками браузеров, можно кавычки не
писать. Если вы пользуетесь языком HTML, писать их необходимо.
Кроме того, кавычки нужно писать, чтобы придать своей страничке совместимость
с XHTML
Как вставлять комментарии в HTML?
<!-- это комментарий -->
<!-- это тоже,
только занимает больше одной линии -->
Не допускается пробел между "<!" и "--", но разрешен пробел между "--" и ">".
Типичная ошибка - использование цепи дефисов ("---") в пределах комментария.
Нужно избегать помещения двух или более смежных дефисов внутри комментариев.
Довольно частая проблема - использование оператора уменьшения на единицу в
блоке JavaScript (myVar--), вместо этого используйте оператор "-=" (myVar-=1)
Говорят, для поисковиков надо прописать ключевые слова. Что это?
Один из вариантов <meta>, определяющий ключевые слова или краткое описание
документа. Некоторые поисковые роботы обращают на них внимание, а некоторые не
обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.
Слова - <meta name="Keywords" content="слово слово слово ...">
Описание - <meta name="Descripton" content="описание документа">
В чем отличия <b> и <strong>, <i> и <em> ?
Вообще говоря, никакой браузер не обязан вебмастеру показывать жирные или
курсивные шрифты. Например, у консольного браузера их нет. Это уже элементы
верстки, а HTML предназначен не для верстки, а для логической разметки.
<b> и <i> - тэги физического выделения, то есть вы принудительно заставляете
выделять текст каким-то видом шрифта. <strong> и <em> - тэги логического
выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов,
так, как удобно его пользователю. <em> означает выделение, а <strong> означает
усиленное выделение.
Резюме: если вам нужно выделить текст, пользуйтесь <em>. Если вам нужно не
выделить текст, а сделать его курсивом, пользуйтесь <i>.
Как сделать таблицу с большим количеством
произвольно объединенных по вертикали и горизонтали ячеек?
1. Начертить схему таблицы.
2. Провести до конца пунктирными линиями не доходящие до краев перегородки.
3. Написать HTML-код таблицы, представив, что пунктирные линии - это сплошные.
Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями
прописать в той ячейке, что находится сверху и слева.
5. Добавить в <td> каждой такой ячейки ROWSPAN и COLSPAN с параметрами,
равными количеству ячеек, объединяемых по вертикали и горизонтали
соответственно.
6. Удалить пустые пары <td></td>.
Как сделать буквицу в начале абзаца без применения картинок?
>Например, так:
/ вот и начался
/__ мой новый
/ абзац!
<table border="0" cellspacing="6" cellpadding="0" align="left">
<tr>
<td bgcolor="#000000"><font size="7" color="#FFFFFF"
style="font-family:sans-serif;font-size:300%;"><b> А </b></font></td>
</tr>
</table>вот и начался мой новый абзац!
Буквица - буква между двумя в <td>.
Параметры bgcolor в <td>, color, size и style в <font> задавать по вкусу ;)
Как окружить табличку рамкой нужного цвета?
Это возможно, но если просто прописать bordercolor, то в NN рамка будет
объемная, а в IE - монотонная.
Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table>
параметры bordercolorlight="#RRGGBB" и bordercolordark="#RRGGBB", которые
нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ экрана
в графический редактор и узнав RGB-цвет светлых и темных "граней" рамки.
Чтобы рамка была монотонной и в IE, и в NN, делаем так:
<table border="0" cellspacing="0" cellpadding="...толщина бордера..."
bgcolor="...цвет бордера...">
<tr>
<td><table width="100%" border="0" bgcolor="...цвет фона...">
...Наша табличка...
</table></td>
</tr>
</table>
Как "разлиновать" табличку тонкими линиями нужного цвета?
<table border="0" cellspacing="0" cellpadding="0" bordercolor="...цвет
линий...">
<tr>
<td><table width="100%" cellspacing="...толщина линий..." border="0">
<tr bgcolor="...цвет фона первой строки...">
...первая строка...
</tr>
<tr bgcolor="...цвет фона второй строки...">
...вторая строка...
</tr>
....
</table></td>
</tr>
</table>
Я, к сожалению, употребил тег, который поддерживается только
в браузере NNN. Что же увидят пользователи других браузеров?
В стандарте можно прочитать, что пользовательские агенты должны игнорировать
неизвестные им теги. Браузеры так и делают.
Чтобы HTML-документ выводился в некоторую область внутри
другого HTML-документа (например, в <div> или в ячейку таблицы)?
Чтобы <iframe> показывался в Netscape 4.x?
По стандартам HTML 4.0, для встраивания внешних HTML-документов нужно
использовать тег <iframe>. Он имеет такие атрибуты:
src="...URL..." - URL встраиваемого документа
name="..." - имя для того, чтобы прописывать его, как target для
ссылок, которые должны будут загружаться в этот iframe.
width="WWW" - ширина
height="HHH" - высота
marginwidth="XXX" - отступы содержимого iframe от левого и правого
края
marginheight="YYY" - то же, но от верхнего и нижнего края
scrolling="yes|no|auto" - задает наличие или отсутствие полосы
прокрутки. При значении auto полоса прокрутки появляется при
необходимости, если встраиваемый документ не влезает в размер iframe.
В общем случае, отключать скроллинг не рекомендуется.
Тег <iframe> обязательно требует закрывающего тега (</iframe>). Внутри
<iframe>...</iframe> прописывается контент для браузеров, не
поддерживающих этот тег.
К сожалению, NN4 не поддерживает <iframe>. Однако в нем есть иная
возможность встроить один документ в другой, причем так, чтобы внешние
ссылки на <iframe> работали корректно.
Для этого в <head> своей странички вставьте скрипт:
<script language="JavaScript" type="text/javascript"><!--
function chIframe(lnk) {
if (document.layers){
if (document.layers[lnk.target]) {
if (document.layers[lnk.target].origX==undefined) {
document.layers[lnk.target].origX=
document.layers[lnk.target].pageX;
document.layers[lnk.target].origY=
document.layers[lnk.target].pageY;
}
with (document.layers[lnk.target]) {
left=origX;
clip.left=-origX;
top=origY;
clip.top=-origY;
src=lnk.href;
}
}
return false;
} else return true;
}
//--></script>
А iframe пропишите так:
<iframe name="myIframe" src="myiframe.html" width="X" height="Y">
<div id="myIframe"
style="position:relative;width:X;height:Y;include-source:url('myiframe.html');">
Ваш браузер не поддерживает вложения HTML-документов.
ажмите <a href="page1.html" target="myIframe">сюда</a>,
чтобы увидеть документ в новом окне.
</div>
</iframe>
Если вы хотите, чтобы ваша ссылка изменяла содержимое iframe,
пропишите ее так:
<a href="newpage.html" target="myIframe" onClick="return chIframe(this);">
Чтобы был абзацный отступ?
P{margin-top:0;text-indent:5em;}
Как подавить подчеркивание ссылок в некоторых местах?
<HEAD>
<STYLE type="text/css"><!--
a.noneline {text-decoration: none;}
--></STYLE>
</HEAD>
После чего применяем этот стиль: <A HREF="ссылка" CLASS="noneline">
Как сделать неподчеркнутые ссылки везде?
<HEAD>
<STYLE type="text/css"><!--
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
--></STYLE>
</HEAD>
Чтобы при наведении мышки на текст с ссылкой
он поменял цвет или стал подчеркнутым?
<HEAD>
<STYLE type="text/css"><!--
a:hover {color:#RRGGBB;text-decoration:underline;}
--></STYLE>
</HEAD>
Этот код не будет работать в NN4.x.
Чтобы фоновая картинка не размножалась по горизонтали
(по вертикали) при увеличении разрешения экрана?
В стилях документа нужно прописать
<style type="text/css"><!--
body{
background-image:url("...URL картинки...");
background-repeat:...параметр...;
}
--></style>
Допустимые значения параметра:
no-repeat - подавляет размножение
repeat-x - размножение только по горизонтали
repeat-y - размножение только по вертикали
Для совместимости со старыми версиями браузеров рекомендуется
пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF)
или совпадающим со значением BGCOLOR в <BODY> монотонным (для JPG) фоном
полосы, доведя разрешение картинки в нужном направлении как минимум до
2048 пикселов. "Вес" картинки при этом увеличится незначительно,
поскольку монотонный фон хорошо сжимается.
Чтобы задать фоновую картинку для ячейки таблицы?
Параметр background для <td> не рекомендован стандартами HTML и не
поддерживается в Opera. Пользуемся стилями:
<td style="background-image:URL('bg.gif');">
Если мы хотим, чтобы фон не "размножался" по вертикали или горизонтали, то
добавляем в style параметр background-repeat, как описано в ответе на
предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми
браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.
Если внутри ячейки c фоном мы собираемся использовать таблицы, то в
соответствующих тегах <table> нужно указывать background="" для совместимости
с NN.
Как сделать так. чтобы фон странички оставался неподвижным при
прокрутке?
Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном
выполняется медленнее.
Если уж ни в какую без этого не обойтись, то вот пример странички с
неподвижным фоном в IE3+, NN4+ и Opera:
<html>
<head>
<title>Страничка с неподвижным фоном</title>
<style type="text/css">
<!--
body{background-image:URL('back.gif');background-attachment:fixed;
margin:0px;padding:0px;}
#body{position:absolute;z-index:1;width:100%;}
-->
</style>
<script language="JavaScript1.2">
<!--
var oldScrollX=0;
var oldScrollY=0;
var NN=(((document.layers)?true:false) &&
navigator.appVersion.charAt(0)=="4");
function fixBg() {
if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){
document.layers['bg'].left=oldScrollX=window.pageXOffset;
document.layers['bg'].top=oldScrollY=window.pageYOffset;
}
}
function makeBg() {
if (NN) {
document.layers['bg'] = new Layer(window.innerWidth);
document.layers['bg'].left = 0;
document.layers['bg'].top = 0;
document.layers['bg'].height = window.innerHeight;
document.layers['bg'].background.src = 'back.gif';
document.layers['bg'].visibility = 'show';
document.layers['bg'].zIndex = 0;
document.layers['bg'].document.open();
document.layers['bg'].document.write('<table width="100%" '+
'height="105%" border="0" cellspacing="0" cellpadding="0">'+
'<tr><td> </td></tr></table>')
document.layers['bg'].document.close();
setInterval("fixBg();",100);
}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"
marginwidth="0" marginheight="0" background="back.gif"
bgproperties="fixed" onLoad="makeBg();"><script language="JavaScript1.2"><!--
if (NN) document.write('<div id="body">')
//--></script>
....
....
....
Baш HTML
....
....
....
<script language="JavaScript1.2"><!--
if (NN) document.write('</div><table height="NNNN">'+
// ^^^^
//Здесь пишем высоту странички в пикселах при разрешении 640x480
'<tr><td> </td></tr></table>');
//--></script></body>
</html>
Как сделать так, чтобы при наведении мышки какой-либо отличный
от ссылки элемент (скажем, ячейка таблицы) поменял оформление
(например, фоновый цвет)
Категорически не рекомендуется пользоваться скриптами типа
<td onMouseOver="...">
В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и
к любому другому элементу. о, к сожалению, IE не поддерживает эту
возможность. Поэтому поступаем так - пишем в стилях:
td{...styles...;behavior:url('td.htc');} /* работает в IE4+ */
td:hover{background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */
И создаем файл td.htc, в котором пишем:
<public:attach event="onmouseover" onevent="color()"/>
<public:attach event="onmouseout" onevent="restore()"/>
<script language="JavaScript" type="text/javascript"><!--
function color() {runtimeStyle.backgroundColor='#RRGGBB';}
function restore() {runtimeStyle.backgroundColor='';}
Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.
Разумеется, можно использовать td.className:hover и td#idName:hover
для подсветки ячеек определенного стиля или конкретной ячейки.
Что такое чересстрочная и прогрессивная графика,
почему она лучше обычной и как ее создать?
Чересстрочная графика - это механизм, позволяющий показать грубое приближение
к общему виду картинки до ее полной загрузки. Сохранять в этом формате
всячески рекомендуется, поскольку пользователь сразу получает общее
представление о картинке и при необходимости может отменить ее загрузку,
нажать на ссылку и т.п.
Для создания чересстрочной графики вам понадобится графический редактор,
поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется
"File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace".
Для формата JPEG есть функциональный аналог чересстрочной графики - формат
Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню
"Save a Copy...", и в опциях JPEG отметить пункт Progressive. Интересно, что
прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто
"весит" меньше, чем стандартный :)
Как создать прозрачную графику?
Для создания прозрачной графики вам понадобится графический редактор,
поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется
"File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который
должен стать прозрачным.
Таким образом, прежде чем сохранять картинку, нужно окрасить всю прозрачную
область в один цвет. PhotoShop, конечно, позволяет сделать прозрачными и
несколько цветов, но при этом эти несколько цветов становятся одним.
Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать
пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями
альфа-канала, бyдет пpозpачной. Сохpанять обычным способом.
Есть и программы типа GIF Constructor Set, которые помогают определить один из
цветов палитры GIF как прозрачный.
Как создать анимацию?
GIF-анимация - это последовательная смена картинок. Картинки можно сделать в
любом редакторе, а сами анимации в специальных программах:
а) Gif Construction Set:
* Запустите 'Мастер' в Gif Construction Set:
File / Animation Wizard... и нажмите Next и еще раз Next. Если вы
хотите, чтобы ваша анимация после выполнения остановилась, то
выбирайте Animate once and stop, а если хотите, чтобы она постоянно
работала - Loop Indefinitely. Нажимайте Next.
* Далее выберите качество изображения (фотореалистичное, рисованное).
* Теперь надо выбрать промежуток времени между сменой кадров.
* Теперь выбираете из каталогов GIF'ы для анимации.
* Нажимайте Done.
* Сохраните.
* Для проверки нажмите View или просмотрите анимацию в браузере.
б) MS GIF Animator:
* Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.
* Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и
разместите их в нужном порядке, перетаскивая мышью, используя
Clipboard или клавиши со стрелками на панели (они дублируются
клавиатурными стрелками).
* Для повторяющейся анимации включите опцию Animation / Looping.
При этом можно задать количество повторов или включить опцию
Repeat Forever для бесконечного повтора.
* На закладке Image выставьте для _каждого_ кадра нужную задержку
по времени (проверить анимацию можно, нажав кнопку Preview), метод
рисования (как правило, используется либо Undefined, либо Leave) и
наличие прозрачных областей в текущем кадре (и прозрачный цвет).
* Сохраните.
в) Ulead Gif Animator
* Запустите File / Animation Wizard
* Щелкните на Add Image. Выберите нужные файлы (выбирать можно
сразу несколько файлов - если у вас они будут стоять не в том
порядке, в котором нужно, вы потом сможете поменять их местами).
* Щелкаем "Далее". Появится выбор типа вашего изображения:
Text-Oriented (Don't Dither) - состоят из текста
Photo-Oriented (Dither) - содержат картинки
* Нажимаем "Далее". Можете выбрать глобальное время задержки или
сделать это потом отдельно для каждого кадра.
* Нажимаем "Далее". Нажимаем "Готово". Стрелками [вверх] и [вниз]
можете менять позицию кадра в анимации. В поле Delay можно
установить свою задержку для каждого кадра
* Жмем F12. Сохраните.
Можно ли оптимизировать графику (уменьшить размер)?
Да, и для этого есть два основных способа.
Первый связан с форматом GIF и палитрованной графикой. По умолчанию
используется палитра в 256 цветов. Но если вы _внимательно_ посмотрите на свои
картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой
одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того,
горизонтальные последовательности одинаковых точек архивируются в GIF лучше,
чем вертикальные :-). А если уменьшить неиспользуемые поля...
Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один
- меняйте степень сжатия. Можно также попробовать поиграть с параметром
Baseline.
Наконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец
файла GIF Constructor Set. Это тоже можно вырезать.
Лучшее средство работы с форматами и масштабирования - Image Alchemy. Самый
функциональный редактор полноцветной графики - Adobe PhotoShop. Лучшая работа
с масками - Aldus PhotoStyler.
| 
