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

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

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

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

← Июнь 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

Автор

ImHoster.net

Статистика

1.793 подписчиков
-1 за неделю

← Все выпуски →

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

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

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

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

Теги html

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

Тег A

Браузер	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

XHTML:

1.0

1.1

Описание

Тег <A> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег <A> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения параметра href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

Параметры

href: Задает адрес документа, на который следует перейти.
name: Устанавливает имя якоря внутри документа.
target: Имя окна или фрейма, куда браузер будет загружать документ.
title: Добавляет всплывающую подсказку к тексту ссылки.

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

Обязателен.

Пример 1. Использование тега <A>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег А</title>
</head>
<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>
</html>

Описание параметров тега <A>

Параметр HREF

HTML:

3.2

XHTML:

1.0

1.1

Описание

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью параметра target.

Синтаксис

Обязательный параметр

Обязателен для ссылок.

Аргументы

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

Пример 2. Использование параметра href

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег А, параметр href</title>
</head>
<body>

<p><a href="../wormik/knob.html">Относительная ссылка</a></p>
<p><a href="http://www.htmlbook.ru/wormik/knob.html">Абсолютная ссылка</a></p>

</body>
</html>

Параметр NAME

HTML:

3.2

XHTML:

1.0

1.1

Описание

Параметр name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи параметра name тега <А>. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Между тегами <a name=...> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

Синтаксис

Обязательный параметр

Обязателен для якорей.

Аргументы

Любой текст с учетом регистра.

Значение по умолчанию

Нет.

Пример 3. Создание якоря с помощью параметра name

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<p><a href="#top">Наверх</a></p>

</body>
</html>

Параметр TARGET

HTML:

3.2

XHTML:

1.0

1.1

Описание

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target тега <А>. В XHTML применение этого параметра запрещено.

Синтаксис

Обязательный параметр

Нет.

Аргументы

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

_blank: Загружает страницу в новое окно браузера.
_self: Загружает страницу в текущее окно.
_parent: Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top: Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Значение по умолчанию

_self

Пример 4. Открытие ссылки в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег А, параметр target</title>
</head>
<body>

<p><a href="new.html" target="_blank">Открыть в новом окне</a></p>

</body>
</html>

Параметр TITLE

HTML:

3.2

XHTML:

1.0

1.1

Описание

Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке.

Синтаксис

Обязательный параметр

Нет.

Аргументы

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример 5. Создание всплывающей подсказки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег А, параметр title</title>
</head>
<body>

<p><a href="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>

</body>
</html>

Языки HTML и CSS

250 секретов HTML и Web дизайн

Полный справочник по HTML CSS и JavaScript

HTML

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

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

Самоучитель HTML и CSS Современные технологии

Полный справочник по HTML CSS и JavaScript

HTML Популярный самоучитель

Динамический HTML

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

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

Чтобы страничка не кэшировалась у клиента?

Для этого нужно прописать в HTTP-response со стороны сервера параметры
Expires, Pragma и Cache-control.

Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие <meta>:

Чтобы выровнять табличку по центру документа? И почему в NN и Opera не работает <table align="center">?

<table align="center"> - конструкция принципиально неверная. Параметр align в <table> предназначен для того, чтобы задать обтекание таблицы текстом, так же, как аналогичный параметр в <img>.

Правильно так:

Чтобы разместить текст, картинку или табличку в центре экрана?

Человек, который задает такой вопрос, не понимает, что такое 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 не должны показываться.

Первое решение с таблицей. Здесь есть надежда, что пустоты, не относящиеся к ячейкам, показаны не будут.

Второе решение тоже обходит противоестественные склонности браузеров. Картинки описываются без промежутков между тегами:

Чтобы убрать промежутки между ячейками в таблице, которая получилась в результате разрезки целой картинки на куски?

Пропишите в таблице параметры border="0" cellspacing="0" cellpadding="0"

Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.
Например, так:

<td><img src="kusok.gif" width="XXX" height="YYY" border="0"></td>
^ В местах, отмеченных галочками, пробелов нет!!! ^

Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без пробелов:

И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры

Чтобы форматировать текст по ширине?

В 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.

Чтобы убрать синюю рамку вокруг картинки-ссылки?

Точно так же, как убирают любую другую рамку вокруг любой другой картинки:

Чтобы убрать или задать отступы содержимого странички от краев окна браузера?

Для нулевых отступов X=Y=0

Грамотно также будет добавить в стили документа:

Чтобы при смене страниц сам URL не изменялся?

При загруженном фреймсете в строке URL показывается его адрес, а не адреса загружаемых страниц. Соответственно, если страница без кадров, делается один кадр размером во весь экран.

Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?

Стандарт позволяет пользоваться картами изображений. Полный формат описания карт поищите в стандарте. Обратите внимание, что при описании самой карты пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то есть здесь уже ссылка.

<img src="адрес_картинки" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

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

HTML Самоучитель

HTML и XHTML подробное руководство

Использование HTML JavaScript и CSS руководство Web дизайнера

Полный справочник по HTML CSS и JavaScript

Эффект буквицы

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

В типографических изданиях очень часто можно встретить буквицу – выделенную по размеру и цвету первую букву первого абзаца. Красиво так смотрится… Вот бы к себе такую на сайт! Некоторые ограничиваются использованием рисунков, но вдруг посетитель отключил показ картинок. Тогда не будет ни буквицы, ни красоты: от нее останется только пустой квадратик. Решением проблемы становится применение CSS.

First-letter

Псевдо-элемент first-letter как раз и занимается управлением первой буквы заданного блока. Он ищет первый элемент и присваивает ему указанные значения. Стиль написания очень прост.

Пример:

<Style type=text/css>
p:first-letter {font-size:200%; color: lime; float: left}
</Style>
<p>Очень даже стильный абзац</p>

В примере буква 'O' станет зеленой и увеличенной в два раза, при этом текст будет ее обтекать с правой стороны. Если предложение начинается с кавычки, то она вместе с буквой войдет в состав first-letter.
Помимо прочего псевдо-элемент можно использовать совместно с классами и идентификаторами.

Пример:

DIV.effect:first-letter {color: gold}
#Litera:first-letter {font-size:1.5; float:left}

First-line

Действует точно также, как и first-letter. Разница только в объектах выделения: first-line визуально изменяет первую строку в нужном вам блоке.

Пример:

<Style type=text/css>
p:first-line {font-variant: small-caps}
</Style>
<p>Слегка приподнятая строка,<br>
зато эта часть ни чем особенным не наделена.</p>

Первая строка в абзаце написана малыми прописными буквами: очень эффектное выделение начала статьи в каком-нибудь журнале.

"Было бы интересно использовать оба псевдо-класса в одном блоке" – скажете вы. И такое в CSS возможно. Надо всего лишь два раза определить элемент и украшенный в вашем стиле абзац не заставит себя ждать.

Пример:

<Style type=text/css>
DIV#beautiful:first-line {font-weight: bolder; color:#0f0}
DIV#beautiful:first-letter {font-size:16px; font-style: oblique; color:#f00}
</Style>
<div id=beautiful>Ваша статья самая<br> статьястая статья в мире.</div>

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

Полный справочник по HTML CSS и JavaScript

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

HTML 4 для чайников

HTML и CSS на 100

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

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

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

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

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

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

В избранное