88 секретов и советов по работе с Adobe Photoshop 1. Нажмите Tab, чтобы скрыть панель инструм...
Полезные ссылки. - (0)полезные ссылки Предлогаю ссылочки,нужные и полезные для оформления блога и не только.Этими...
Часто применяемые формулы HTML для вашего блога. - (0)Часто применяемы формулы HTML для вашего блога ...
Разделители с кодами. - (0)Разделители Vovkin <img src=" //img1.liveinternet.ru/images/attach/c/1//49/954...
Разделители для текста горизонтальные - (0)Разделители для текста горизонтальные ...
HTML коды - бесплатно |
http://translate.google.ru/translate?hl=ru&langpair=en%7Cru&u=http://www.quackit.com/html/html_generators/html_code_generator.cfm HTML Codes - Free from Quackit.com HTML коды - бесплатно из Quackit.com
|
|
88 секретов и советов по работе с Adobe Photoshop |
|
|
Полезные ссылки. |
|
Серия сообщений "Где можно создать бесплатно сайт, блог и т.д.?":
Часть 1 - Полезные ссылки.
|
|
Часто применяемые формулы HTML для вашего блога. |
|
|
Разделители с кодами. |
Vovkin
<img src=" //img1.liveinternet.ru/images/attach/c/1//49/954/499546 02_75039d54ce4e.gif"; width="443" height="89" />
<img src=" //img1.liveinternet.ru/images/attach/c/1//49/950/499501 78_068.gif"; width="400" height="62" />
|
Метки: разделители. коды.линеечки.полезности.для сайта. |
Разделители для текста горизонтальные |
|
Метки: разделители. текст. горизонтальные. |
Начинающим Ли.Ру.шникам и не только |
ДЛЯ ОФОРМЛЕНИЯ ДНЕВНИКОВ...
|
Метки: html.фоны.блестяшки.таблица. цвет в html. |
Это просто клад-3 |
|
|
Разделители с кодами. |
|
|
Интересные кнопки. |
|
|
Как создать сообщение с большим количеством картинок? |
Давно просили, наконец руки дошли...
Очередное дополнение в
Внимание! Для создания таких сообщений используется "расширенный редактор".
Как всегда напишу простую инструкцию вида "шаг за шагом". Для большей наглядности прилагаются картинки.
|
|
Свободный WYSIWYG редактор для сайтов и CMS + файловый менеджер для него |
|
|
Ссылки в HTML-документах |
Ссылки в HTML-документахПосле того, как мы научились помещать в HTML-страницу изображения, пора изучить основу гипертекстового пространства — ссылки. Ссылки бывают разные: ссылка с одной страницы сайта на другую, ссылка на страницу другого сайта, ссылка на ящик электронной почты, ссылка на закачку файла, ссылка в виде картинки. Тег AДля создания и использования гипертекстовых ссылок используется тег <a>. Этот тег является самым необходимым элементом. Без него гиперткст (HTML) и, собственно, Интернет просто немыслим. Гипертекстовая ссылкаНо, как и все в HTML, сделать ссылку довольно просто. Используем тег <a> с одним единственным атрибутом href (сокр. от hypertext reference - гипертекстовая ссылка). Пример: <a href="http://www.ulotrix.ru">Ссылка на сайт Ulotrix.ru</a>
Результат в браузере: Как видете, все, что расположено внутри тега <a>, становится видно в окне браузера. Этот текст называется анкор (ancor) или, в переводе, якорь. А атрибут href задает адрес ресурса и\или имя файла, который браузер должен открыть. Обратите внимание: закрывающий тег обязателен. Ссылка на страницу в пределах одного сайтаСделать ссылку на страницу Вашего сайта еще проще. Но давайте вначале сделаем две не сложные вещи. Если Вы делали все так, как я вам советовал, то сейчас у Вас в папке www находятся папка images и файл index.html. Давайте в папке www создадим еще один файл с именем page_1.html (пользуясь инструкцией по ссылке выше). Впишите в него минимальный набор тегов. Между тегами <title> напишите к примеру "Тестовая страница", а между тегами <body> —"Проверка ссылок". Это первая не сложная вещь. Вторая — в папке www создадим еще одну папку с именем archives (архивы) и поместим в нее какой нибудь архив (с расширением rar или zip). А теперь, собственно , ссылка. Если страница, на которую ведет ссылка, расположена в одной папке с исходной, то код выглядет так: <a href="page_1.html">Ссылка на тестовую страницу</a>
Т.е. в значении атрибута href просто пишем имя файла. Если мы создадим подпапку subfolder и в нее поместим нашу Тестовую страницу (файл page_1.html), то в значении атрибута href нужно будет указать еще и имя папки. Т.е прописать путь к файлу: <a href="subfolder/page_1.html">Ссылка на тестовую страницу</a>
Обратная ссылка на нашу Первую страницу с Тестовой страницы, находящейся в папке subfolser будет выглядеть так: <a href="../index.html">Обратная ссылка на Первую страницу</a>
Таким образом, две точки и слеш "../" перед именем файла указывают на то, что файл находится в папке, расположенной на уровень выше от позиции файла, с которого делается ссылка. Очень полезен атрибут target. По умолчанию страница, на которую ведет ссылка, открывается в том же самом окне браузера. Но очень часто нужно, чтобы страница открывалась в новом окне или новой вкладке (в зависимости от настроек Вашего браузера). Для этого ссылке нужно придать атрибут target со значением _blank. И еще один не обязательный атрибут title. Он добавляет поясняющий текст к ссылке в виде всплывающей подсказки при наведении на нее курсора. Пример кода: <a href="http://www.ulotrix.ru" target="_blank">Ссылка на сайт Ulotrix.ru, откроется в новом окне.</a><br>
<br> <a href="http://www.ulotrix.ru" title="Создаем сайт и ...зарабатываем">Ссылка на сайт Ulotrix.ru, при наведении курсора появится заголовок.</a> Результат: Ссылка на сайт Ulotrix.ru, откроется в новом окне.
Ссылка на сайт Ulotrix.ru, при наведении курсора появится заголовок. Ссылка в виде картинки (или картинка в виде ссылки)А как сделать ссылку в виде картинки? Тоже очень просто. Для этого пишем тег ссылки со всеми неоходимыми атрибутами, а на место анкора (текста ссылки) вставляем изображение. Например: <a href="http://ulotrix.ru" title="Сайт Ulotrix.ru" target="_blank"><img src="images/visitka.jpg" width="100" height="67" border="0"></a>
Результат:  Когогда делается картинка в виде ссылки, то по умолчанию вокруг картинки появляется не очень красивая рамка. Чтобы эту рамку убрать, прописываем атрибут border со значением ноль. Ссылка на закачку файлаСсылка на закачку файла ничем не отличается от обычной ссылки. В арибуте href просто прописываем путь к файлу, который мы хотим дать для скачивания. Такой файл обычно архивируют. Пример: <a href="archives/your_file.rar" target="_blank" title="Книга">Скачать файл</a>
Если Вы в атрибуте href укажете имя файла, который Вы поместили в папку archives (как я Вам советовал), то после клика по этой ссылкеу Вас начнется скачивание этого файла. Ссылка на адрес электронной почтыЕсли Вы хотите чтобы у Вас на сайте была ссылка, нажимая на которую у пользователя сразу загружается почтовая программа и он сможет написать Вам письмо, то нужно сделать ссылку вот с таким, примерно, кодом: <a href="mailto:admin@ulotrix.ru">Написать мне письмо</a>
В раузере мы будем видеть: Как видите, в значении атрибута href нужно написать mailto, двоеточие и адрес получателя. При нажатии на такую ссылку запустится почтовая программа, в поле "Кому" будет стоять указанный в ссылке адрес. Цвета ссылокПо умолчанию браузеры непосещенные ссылки показывают синим цветом, посещенные — фиолетовым, а активные ссылки (в момент нажатия на нее) — красным. Если такие цвета не подходят под основной дизайн сайта или страницы, цвета ссылок можно изменить. Для этого нужно придать специальные атрибуты тегу <body>. Цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Таблица базовых цветов. В скобках — RGB-значение цвета.
Если Вам этих цветов недостаточно, более точно подобрать RGB-значение можно здесь. Например, если тегу <body> придать следующие атрибуты и их значения: <body link="red" vlink="black" alink="green">
то все ссылки на данной странице будут красного цвета, уже посещенные — черными, а активные ссылки — зелеными. Ну вот, на этом с ссылками закончим. Эксперементируйте, и Вы очень быстро все поймете. Про атрибут rel со значением nofollow, а также тег <noindex> читайте в отдельной статье. На следующей странице будем разбираться с таблицами в HTML >> Дорогой читатель, сохрани для себя эту статью и поделись ссылкой с друзьями:
|
|
|
Copyright © 2010 Игорь Ерофеев ulotrix.ru Создаем сайт и зарабатываем. Контакты |
|
|
Где можно создать бесплатно сайт, блог и т.д.? |
|
|
Делаем полупрозрачную картинку |
|
UPD: Добавил готовый PSD, и результат.
|
|
Подробное описание клавиш клавиатуры |
|
|
Золотые разделители |
        |
|
Метки: линейки.разделители.html. коды. |
