Отправляет email-рассылки с помощью сервиса Sendsay

HTML. Хочу знать все!

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

1.793 подписчиков
-1 за неделю
←   Все выпуски   →

HTML. Хочу знать все!


Спонсор Рассылки: Клуб Желающих Создать и Развивать Свой Сайт.


Здравствуйте.

Меня зовут Алексей. Я руковожу Клубом Желающих Создать и Развивать Свой Сайт. Сегодня я приготовил для вас очередную подробрку материалов по HTML.

Теги html


Источник: http://htmlbook.ru

Тег ABBR

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Нет Нет Нет Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Тег <ABBR> указывает, что последовательность символов является аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.

По умолчанию, текст заключенный в контейнере <ABBR> подчеркивается пунктирной линией.

Синтаксис

<abbr>Текст</abbr>

Параметры

title
Добавляет всплывающую подсказку к тексту, в которой дается расшифровка аббревиатуры.

Закрывающий тег

Обязателен.

Пример 1. Добавление аббревиатуры на веб-страницу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Тег ABBR</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
ABBR {
  border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста аббревиатуры */
  color: navy; /* Темно-синий цвет текста */
}
</style>
</head>
<body>

<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr> обозначается протокол, с помощью которого любые внешние программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы.</p>

</body>
</html>


Языки HTML и CSS
250 секретов HTML и Web дизайн
Полный справочник по HTML CSS и JavaScript
HTML




Для нового сайта я рекомендую вам вот эту компанию платного хостинга

Задать свой вопрос: sitesozdatu(собака)yandex.ru





Самоучитель HTML и CSS Современные технологии
Полный справочник по HTML CSS и JavaScript
HTML Популярный самоучитель
Динамический HTML




FAQ по HTML (часть 2)


Источник: http://www.internet-technologies.ru

Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?


В стилях документа нужно прописать

<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>&nbsp;</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>&nbsp;</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-анимация - это последовательная смена картинок. Картинки можно сделать в любом редакторе, а сами анимации в специальных программах:

  1. Gif Construction Set:
    * Запустите 'Мастер' в Gif Construction Set:
    File / Animation Wizard... и нажмите Next и еще раз Next. Если вы хотите, чтобы ваша анимация после выполнения остановилась, то выбирайте Animate once and stop, а если хотите, чтобы она постоянно работала - Loop Indefinitely. Нажимайте Next.
    * Далее выберите качество изображения (фотореалистичное, рисованное).
    * Теперь надо выбрать промежуток времени между сменой кадров.
    * Теперь выбираете из каталогов GIF'ы для анимации.
    * Нажимайте Done.
    * Сохраните.
    * Для проверки нажмите View или просмотрите анимацию в браузере.
  2. MS GIF Animator:
    * Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.
    * Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и
    разместите их в нужном порядке, перетаскивая мышью, используя Clipboard или клавиши со стрелками на панели (они дублируются клавиатурными стрелками).
    * Для повторяющейся анимации включите опцию Animation / Looping. При этом можно задать количество повторов или включить опцию Repeat Forever для бесконечного повтора.
    * На закладке Image выставьте для _каждого_ кадра нужную задержку по времени (проверить анимацию можно, нажав кнопку Preview), метод рисования (как правило, используется либо Undefined, либо Leave) и наличие прозрачных областей в текущем кадре (и прозрачный цвет).
    * Сохраните.
  3. 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.



Задать свой вопрос: sitesozdatu(собака)yandex.ru





HTML Самоучитель
HTML и XHTML подробное руководство
Использование HTML JavaScript и CSS руководство Web дизайнера
Полный справочник по HTML CSS и JavaScript


Идеология HTML


Источник: http://www.internet-technologies.ru

Как работают профи


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

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

Но почему?


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

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

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

А как же оформление?


Язык HTML содержит достаточное количество элементов, позволяющих оформить документ по вашему вкусу. Если вас не устраивает способ оформления документа браузером (хочется изменить шрифт, предложенный по умолчанию, или сделать его помельче:) - добавьте HTML-тэги форматирования текста. Если и после этого внешний вид документа вас не устраивает, нанесите последний штрих: воспользуйтесь таблицами стилей (CSS).



Задать свой вопрос: sitesozdatu(собака)yandex.ru





Полный справочник по HTML CSS и JavaScript
100 Самоучитель по созданию WEBстраниц и WEBсайтов HTML и JavaScript
HTML 4 для чайников
HTML и CSS на 100


Полезные АудиоМатериалы


Поиск платного хостинга

Почему Платный хостинг php

Интернет магазин шаг 1

Архив Аудиоматериалов

Спонсор Рассылки: Клуб Желающих Создать и Развивать Свой Сайт.


В избранное