-Всегда под рукой

 -Подписка по e-mail

 

 -Цитатник

Анечка (Anushka_M, спасибо огромное!!! - (4)

ПОЗДРАВЛЯЮ С ДНЕМ РОЖДЕНИЯ НИНОЧКУ!(Arnusha) Милая милая Ниночка! С опозданием,но от всего ...

Спасибо от души TAISA_ANDRYEVEVA! - (10)

СВЕТЛОГО, ДОБРОГО ПРАЗДНИКА, С ДНЕМ РОЖДЕНИЯ, НИНОЧКА - Arnusha!!! Пусть будет крепким з...

Любочка (laplared), благодарю тебя подружка моя!!!!!!!!!!! - (2)

Поздравляю Ниночку (Arnusha) с днём рождения   ...

Лолочка (Lola_malvina), золотце, спасибо!!!!!! - (3)

С днём Рождения, Ниночка!(Аrnusha) Прими мои самые теплые поздравления с Днем Рождения! В э...

Верочка (Дневник_Девы), огромное спасибо! - (4)

Поздравляю с Днем рождения , Ниночка! (Arnusha)

 -Рубрики

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.01.2009
Записей: 10370
Комментариев: 294988
Написано: 330214

Выбрана рубрика Уроки .


Другие рубрики в этом дневнике: Это интересно(290), ЦВЕТЫ(346), цветовые коды(13), Худ.галерея(369), хлеб(48), Фоны текстуры(231), Флора и фауна(65), Флеш-часики(202), Флеш-плееры(47), Флеш-картинки(172), украшалочки для дневников и постов(321), торты'пирожные'печенье(123), Тесты(11), творожная/сырная выпечка(66), Супы(23), Стихи и проза(284), Смайлики(89), свечи(21), Салаты и закуски(119), С днём рождения(25), Рукоделие(105), Рецепты ЗОЖ(248), Рассказы и притчи(31), Рамочки-золото,серебро(17), рамочки для постов(1061), рамочки для поздравлений(73), рамочки для записей(20), рамочки бордюрные(393), рамочки 'черный фон'(37), рамочки 'цветочный фон'(192), рамочки 'фон цвета фуксии'(15), рамочки 'фон красный и бордо'(56), рамочки 'фон желтый оранжевый'(26), рамочки 'фон валентинки'(18), рамочки 'фиолетовый и розовый фон'(108), рамочки 'синие голубые'(109), рамочки 'светлый фон'(70), рамочки 'Рождество'(65), рамочки 'осенний фон'(105), рамочки 'музыкальный фон'(16), рамочки 'коричневый и бежевый фон'(80), рамочки 'зимний фон'(255), рамочки 'зеленый фон'(114), рамочки 'весенний фон'(67), рамочки 'блокноты'(19), рамочки '8 Марта'(27), рамки друзей(71), рамки 'приват'(21), Разделители для текста(154), Приколы и юмор(71), Православие(46), пончики(0), Полезные советы(285), Полезные сайты(21), Полезные программы(84), Полезности(124), позируют дети png(22), поздравления(156), пожелания(32), пирожки'булочки'пироги(151), персонажи png(60), пельмени'манты'вареники(2), пейзажи png(121), пасхальные элементы(28), открытки(358), осень 'пейзажи'(68), они хотят жить(58), общество(397), обои для рабочего стола(203), новый год и рождество(242), новости и политика(111), натюрморты(14), мысли вслух(203), мы помним(61), музыкальные открытки(32), музыка всех поколений(281), Мужчины,пары(17), мои рамочки с коллажом(331), мои рамочки для текста(1774), мои поздравления(59), мои обращения(69), личное(175), лето 'пейзажи'(34), кумиры(54), кулинарная книга(1336), креатив,фантазии(12), красочные фразы для комментов(90), красота и здоровье(97), котоматрица(67), коллажи(21), кнопки переходы (8), клипарт(808), кино'мультфильмы(25), кексы'маффины (98), картинки с движущейся водой(6), информеры(10), интернет(58), интересные фото(217), зима 'пейзажи'(45), заготовки,элементы png(129), заготовки 'для коллажей'(22), домашние животные(120), для меня 'приват'(24), декоративные элементы(290), декор из скрап.наборов(170), декор для дизайна(517), девушки png(194), дары природы десерт(31), выпечка(1082), вторые блюда(140), видеоролики про животных(45), видеоролики(90), весна 'пейзажи'(51), в мире животных(26), беляши'чебуреки'блины(16), анимация(462), аватары(29), sos(36), MORE(4)

Почти все о тексте,шрифте...Урок.

Дневник

Воскресенье, 17 Июля 2011 г. 08:11 + в цитатник


ИТАК...

Полужирный текст

Выделение текста курсивом

Подчёркнутый текст

Зачёркнутый текст

маленький текст маленький текст
Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

Что нужно сделать,чтобы фото или картинка открывалась в новом окне.Урок.

Дневник

Пятница, 15 Июля 2011 г. 08:06 + в цитатник

Это несложно!
1. Загружаем фотографию на Яндекс.Фотки,или на другой фотохостинг.В данном случае пример с Яндекс.Фотками.И шаблон кода актуален везде.
2. Переходим на страницу фотографии, справа от фото в меню "В другом размере" выбираем размер превью. Важно: размер превью по горизонтали должен быть менее 600px (иначе картинка полностью не уместится на страничке).
3. После загрузки фото в выбранном размере кликаем по строке "Код для вставки на сайт или в блог" и копируем куда-нибудь ссылку из нижнего окошка. Это будет первая ссылка.
4. Вновь переходим на страницу фотографии, в меню "В другом размере" выбираем "Оригинал". Фото в полном размере откроется в новом окне, ссылку на эту картинку копируем из адресной строки браузера. Это вторая ссылка.
5. На своей странице или в клубе создаём новый пост и в HTML-режиме пишем следующий код:
<a href="вторая ссылка"><img src="первая ссылка"></a>

Теперь при клике по маленькой картинке в вашем посте в этом же окне будет загружаться большая картинка.

Чтобы большая картинка загружалась в новом окне, код должен быть таким:
<a href="вторая ссылка" target="_blank"><img src="первая ссылка"></a>


Arnusha
Рубрики:  Полезности
Уроки

Метки:  

Как поменять код флеш-картинки(на Ли.ру) на html-код для других сайтов.Урок.

Дневник

Вторник, 12 Июля 2011 г. 07:26 + в цитатник
Последнее время на Ли.ру выставляется много постов с флеш-картинками.Но под картинками стоят коды,которые работают только на Ли.ру,больше нигде.А у многих есть еще странички на других сайтах,на Я.ру,на Майл.ру и так далее.И очень хочется там тоже поделиться этой красотой,но коды не позволяют этого делать.Ко мне много обращаются за помощью или разъяснением,как поменять код,чтобы можно было делиться флешками на других сайтах.И я решила опять вам помочь в этом вопросе,попробую объяснить.Но пока вы будете изучать все это,и привыкать к кодам,я пока буду выставлять по два кода под флешками,один для Ли.ру,другой HTML-код.ИТАК,
перед вами флеш-картинка,часики и плеер,я их уменьшила в размере,чтобы они стояли в ряд.Под ними коды,которые работают здесь.





В каждой флешке,как и в открытке есть адрес,возьмем для примера адрес первой флеш-картинки.Вот он:

http://www.xcwhw.cn/fla/bb/th/1.swf


В коде на Ли.ру перед адресом стоят размеры флешки-высота и ширина,вот смотрите:

[flash=500,500,http://www.xcwhw.cn/fla/bb/th/1.swf]



Теперь внимание:чтобы поменять код в этом случае,нужен вот такой код,шаблон:

<embed src="АДРЕС ФЛЕШКИ,ЧАСИКОВ,ПЛЕЕРА"width="ширина"height="высота">


Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

Как загрузить или взять аудиофайл с муз.сайта "Просто плеер".Урок.

Дневник

Воскресенье, 10 Июля 2011 г. 14:29 + в цитатник




Для тех,кто хочет поделиться с окружающими какой-нибудь песней собственного сочинения или другой аудиозаписью,найти в интернете,например,создан сайт под названием "Просто плеер" (prostopleer.com).
На главной его странице



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



Чтобы найти нужную вам песню,достаточно нажать на "НАЙТИ" и перед вами появятся песни на выбор,остается только выбрать,что вам подходит.
Чтобы взять код или ссылку нужной композиции,вам надо кликнуть на изображение шестеренки справа от названия песни.
В открывшемся меню выбрать либо "Ссылку на файл",чтобы послать например,другу,либо кликнуть на "Код для вставки".


Кстати,ссылку на файл,можно послать по почте,для этого вы должны скопировать ссылку и отправить по электронной почте.
А этот код,вы тоже скопируйте и можете вставлять к себе на странички,делать музыкальные открытки и вставлять нужно в простом редакторе.



А чтобы предварительно прослушать песню,кликните на треугольник слева от названия песни.
Удачи вам!!!


Arnusha

Рубрики:  Полезности
Уроки

Метки:  

Как быстро взять картинку без кода и вставить в нужное место.Урок!

Дневник

Суббота, 09 Июля 2011 г. 08:04 + в цитатник
Этот урок поможет новичкам быстро без сохранения в комп взять любую картинку или разделитель...
А так как у меня постоянно спрашивают как это сделать и если посты с открытками без кодов,
то я решила напомнить,как это делается..
 (180x140, 35Kb)


ВСТАВЛЯЕМ КАРТИНКУ - БЫСТРО И ПРОСТО!
Я для этого использую такой код:
<img src="АДРЕС КАРТИНКИ"/>

Адрес любой картинки узнать совсем несложно:
1. Кликните по понравившемуся изображению ПРАВОЙ клавишей мышки.
2. Выпадет табличка, в которой нужно выбрать строчку "СВОЙСТВА ИЗОБРАЖЕНИЯ".
3. Далее ЛЕВОЙ клавишей мышки кликаем на этой строке.
4. Появляется еще одна табличка, в которой указан "АДРЕС ИЗОБРАЖЕНИЯ".
5. Его нужно скопировать (ставим курсор на эту строчку: помечаем - Ctrl+А , затем копируем - Ctrl+С).
6. Все - теперь можно вставлять в код - Ctrl+V.(либо ПРАВОЙ клавишей мышки,в окошке нажмите на слово ВСТАВИТЬ)

Вставляем этот адрес вставляем вместо слов АДРЕС КАРТИНКИ.
Кавычки должны остаться и между ними и адресом НЕ ДОЛЖНО БЫТЬ ПРОБЕЛА!
Получиться должно так:
<p><img src="//s16.radikal.ru/i191/1004/93/84eede09f45d.gif"/></p>

А теперь уже готовый код копируем и вставляем туда,
куда вам хочется!В комментарии,в посты и так далее...

Все это проделываем в HTLM-режиме!

А шаблон кода для вставки картинок советую сохранить себе где-нибудь в компе в текстовом редакторе (сделать шпаргалку). А потом просто вставлять туда все, что вам нужно. А затем уже готовый код с адресом нужного изображения вставлять туда, куда вам хочется!Еще напоминаю,как сделать картинку или текст посередине.Вот код:

<center>ВАШ ТЕКСТ ИЛИ КАРТИНКА</center>


**************
Непосредсвенно на ЛиРу, если у вас большой пост или много фоток в посте, можно его убрать под кат, посередине поста ставите:

[more=ТЕКСТ ДЛЯ ПЕРЕХОДА], при нажатии на который, посетитель вашего дневника перейдет в ваш дневник непосредственно на пост целиком.
***************
Еще информация для новичков здесь - как сделать, скажем, в комментариях или в сообщении ник какого-нибудь пользователя Лиру ссылкой на его дневник - вот такой Arnusha.
Это очень просто - нужно открыть квадратную скобку, написать user=и вставить точный ник, который вы хотите сделать ссылкой.
Вот как это выглядит:
 (166x60, 3Kb)
Удачи!


Arnusha
Рубрики:  Уроки

Метки:  

Защита от копирования

Дневник

Суббота, 09 Июля 2011 г. 07:49 + в цитатник
Защита картинки от копирования..

урок от  ~Элен Дарси~

≈Защита картинки от копирования≈

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

в компе


в интернете

теперь рисуем
таблицу с заданными параметрами.
<table border="0" width="364" height="287"align="center" 
cellpadding="0" cellspacing="0"
background="
адрес картинки в интернете">
  <tr>
     <td
width="364" height="287">..........</td>
  </tr>
</table>
Заменяем
слова "адрес картинки в интернете" на url-адрес вашей картинки. У нас с
вами получилась таблица, фон в которой ваша картинка,нуждающаяся в
защите от копирования. Теперь вместо точек вставляем еще одну таблицу.
Далее вы можете перейти в фотошоп и создать там новый документ размером
1х1 px с прозрачным фоном и сохранить в формате *.gif. А можете не
париться и
использовать уже готовую картинку, которую я для вас сделала и сохранила на радикале с адресом //i015.radikal.ru/1003/52/90321814cff8.gif (именно его мы и вставим адресом фона вложеной таблицы). Получился вот такой код
<table border="0" width="364" height="287"  align="center" 
background="адрес картинки в интернете "
cellpadding="0" cellspacing="0">
  <tr>
      <td width="364" height="287">
<table border="0" width="364" height="287"
background="//i015.radikal.ru/1003/52/90321814cff8.gif";
cellpadding="0" cellspacing="0">
  <tr>
     <td width="364" height="287">&nbsp;</td>
  </tr>
</table>
      </td>
    </tr>
</table>
Сохраняем в блоге или сообществе. Выглядит обычно, но попробуйте сохранить мою картинку.
 
 

Помните! Гораздо важнее содержание блога, нежели его оформление.


Arnusha
Рубрики:  Полезности
Уроки

Метки:  

Красивый и оригинальный СЛАЙД-ШОУ!!!

Дневник

Среда, 22 Июня 2011 г. 07:52 + в цитатник

КРАСИВЫЕ И ОРИГИНАЛЬНЫЕ СЛАЙД_ШОУ!!!




Код этой красоты:



Автор натюрмортов
© lovelysweet

Кому интересно,как и где сделать красивые СЛАЙД шоу-читайте дальше
Рубрики:  Полезные программы
Уроки

Метки:  

Делаем баннер за 5 секунд!

Дневник

Суббота, 18 Июня 2011 г. 04:47 + в цитатник

Быстрый генератор баннера

Для этого используем "Быстрый генератор баннера".
Для начала вы должны выбрать картинку для баннера, записать её размеры
(ширину и высоту) и её адрес (если берёте через Радикал, то ссылка под №1)

.Затем запишите адрес своего блога (или адрес той страницы, на которую будет указывать ваша картинка).
Придумайте надпись, которая будет видна при наведении мышки на картинку.
Переходим на http://reginochka-design.narod.ru/delaembanner.html и
заполняем все строчки.
Жмём ПОЛУЧИТЬ КОД. В окошке над кнопкой появится код.
Правой кнопкой мыши выделяем его, а затем копируем и вставляем в формате
HTML к себе в запись.
У меня получился вот такой баннер.И если подвести курсор,то можно прочитать приглашение в гости!!!
Очень удобно и быстро!!!Удачи!!!




Arnusha
Рубрики:  Полезности
Уроки

Метки:  

КАРТИНКА В УГЛУ ЗАПИСИ.УРОК 2

Дневник

Вторник, 14 Июня 2011 г. 05:17 + в цитатник

Недавно я выставляла урок,когда нужно в рамочках или просто в записи поставить картинку в уголок ...но вверху.Сейчас перед вами два образца:где в первом случае в рамочке картинка как бы расположена "слева" и "справа" где-то посередине текста,он как бы обтекает картинку...А во втором примере,картинка аналогично,но внизу "слева" и "справа".Понятно,да?
Под картинками привожу коды и тех и других образцов.Коды вместе с кодом рамочки,со стихом.Я подумала,что вам так будет легче понять,как все должно располагаться,где что должно стоять.Ведь в основном мы имеем дело с картинками именно в рамочках.Кому не понятно,спрашивайте.Удачи!!!

Смысл жизни нашей - это путь тернистый,
И в нем означен доблестный завет:
Жить надо так,чтобы еще при жизни
В сердцах людей оставить добрый след.

Ну а когда исчезну я с планеты
И млечной пылью растворюсь во мгле -
В цветенье трав иль в полыханье лета
Хочу остаться с вами на Земле.

 
В чем жизни смысл?
В любой ее минуте.
А может,в том,что вертится Земля...
Но на переднем плане почему-то
Я ставлю счастье на повестку дня.

"О счастье мы всегда лишь вспоминаем,
А счастье всюду.Может быть,оно
Вот этот сад осенний за сараем
И чистый воздух,льющийся в окно".


Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

КАРТИНКА В УГЛУ ЗАПИСИ.УРОК.

Дневник

Суббота, 11 Июня 2011 г. 05:31 + в цитатник
Хочу вам показать один урок.
Когда нужно в рамочках или просто в записи поставить
картинку или уголок так,чтобы они стояли не просто слева
или справа,а находились именно в углу вашей записи.
Ниже вы видите пример,как это будет выглядеть,а под
примером Вы видите коды.Все просто,но в тоже время и
нужно!Думаю,что разберетесь.Но это будет выглядеть намного
лучше,чем картинка "справа" и "слева".


Смысл жизни нашей - это путь тернистый,
И в нем означен доблестный завет:
Жить надо так,чтобы еще при жизни
В сердцах людей оставить добрый след.

Ну а когда исчезну я с планеты
И млечной пылью растворюсь во мгле -
В цветенье трав иль в полыханье лета
Хочу остаться с вами на Земле.

 
В чем жизни смысл?
В любой ее минуте.
А может,в том,что вертится Земля...
Но на переднем плане почему-то
Я ставлю счастье на повестку дня.

"О счастье мы всегда лишь вспоминаем,
А счастье всюду.Может быть,оно
Вот этот сад осенний за сараем
И чистый воздух,льющийся в окно".



Arnusha

Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 5

Дневник

Вторник, 07 Июня 2011 г. 04:02 + в цитатник

Серия 1

Серия 2

Серия 3

Серия 4



Гиперссылки

Ссылка на http://...

Большинство ссылок в Интернете ведут на какую нибудь веб-страницу с адресом наподобие http://site.ru или http://site.ru/index.html.

Расширение
.html указывает на то, что мы имеем дело с файлом формата HTLM. Однако
cсылка может привести нас к документу практически любого формата: .jpg,
.doc, .pdf, .mp3, .zip... перечислять все было бы долго и бессмысленно.
Иногда она может оказаться прямой ссылкой на скачивание файла (возможно,
не вполне желательного).

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

Для этого используем парный тег <a...>...</a>. Напишем, например, следующее:

<a href="http://yandex.ru" title="Яндекс" target="_blank">Найдётся всё!</a>

Вот наша ссылка:

Найдётся всё!

Теперь - что здесь к чему.

http://yandex.ru
- тот адрес в сети, куда мы хотим отправить наших посетителей. Без
подобного указания наш тег вообще не будет работать. То, что идёт
дальше, писать не обязательно, но иногда полезно.

title="Яндекс" - всплывающая подсказка. Если здесь ничего не писать, то такой подсказки не будет.

target="_blank"
- указание браузеру открыть ссылку в отдельном окне (вкладке). По
умолчанию ссылка открывается в том же окошке, в котором находился
посетитель, просматривая Вашу страницу. Впоследствии, если он захочет
продолжить просмотр, ему придётся возвращаться назад.

Как удобнее открывать ссылки - дело вкуса. Казалось бы, новые окна (вкладки) хороши. Но часто их становится слишком много.

Между тегами <a...> и </a>
мы пишем то, что будет видеть посетитель страницы. Кстати, это не
обязательно должен быть текст - можно использовать изображение. Для
того, чтобы использовать картинку в качестве ссылки, напишем, например,

<a href="http://yandex.ru" title="Яндекс" target="_blank"><img src="http://www.promolive.ru/images/content/logo-yandex.gif"></a>

Получим вот такой результат:

Если
мы хотим, чтобы изображение менялось при наведении указателя мыши,
необходимо использовать скрипт (на Ярушке он не работает).

Стили
гиперссылок на Яндексе заданы довольно жёстко. Цвет (а также вид, размер
шрифта и т.д.) самой гиперссылки ещё можно поменять. Делается это путём
добавления в тег <a...> аттрибута style (о нём шла речь в предыдущих сериях). Для примера поменяем только цвет, сделав его зелёным. Напишем:

<a href="http://yandex.ru" title="Яндекс" target="_blank" style="color:green">Найдётся всё!</a>

Получим:

Найдётся всё!

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

Ссылка на любое место на Вашей страничке*

Для
того, чтобы сослаться на определённое место на Вашей страничке, сначала
на этом месте надо установить "якорь". Например, мы пишем статью из
нескольких частей. Заголовок части 1 поместим внутри контейнера <a...>...</a>:

<a name="part 1">Часть 1. Вместо предисловия</a>

Если в имени якоря не используется пробел, то можно обойтись без кавычек: name=part1.

Далее пойдёт текст этой самой первой части. Добавим сюда часто используемый для тестирования текст "Lorem ipsum"** (чтобы ничего не придумывать). Вот как будет выглядеть наша первая часть:

Часть 1. Вместо предисловия

Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

А теперь мы хотим получить
возможность вернуться к началу нашей части 1. На том месте, откуда мы
хотим сделать такой переход, пишем следующее:

<a href="#part 1">читать часть 1</a>

Получаем
гиперссылку, ничем принципиально не отличающуюся от "обычной" (к ней
применимо всё, что говорилось выше, в том числе - про возможность
добавить всплывающую подсказку, стиль и заставить открываться в новом
окне):

читать часть 1

Кликнув на этой ссылке, перейдём к началу части 1.



*На Я.ру работает в пределах одной записи.

**Lorem ipsum
- название классического текста-«рыбы». «Рыба» - слово из жаргона
дизайнеров, обозначает условный, зачастую бессмысленный текст,
вставляемый в макет страницы. Lorem ipsum представляет
собой искажённый отрывок из философского трактата Цицерона «О пределах
добра и зла», написанного в 45 году до нашей эры на латинском языке.
Впервые этот текст был применен для набора шрифтовых образцов
неизвестным печатником в XVI веке (информация из Википедии).

Другие виды ссылок

Вероятно, Вы встречали на некоторых сайтах ссылки вида "пишите мне". Подобная ссылка устроена следующим образом:

<a href="mailto:address@yandex.ru">пишите мне</a>

Вот она: пишите мне

При
клике на этой ссылке, скорее всего, запустится Яндекс-почта
(проверьте). А вот при нажатии колёсика мыши запускается почтовый
клиент.

В настоящее время подобные ссылки без специальных приёмов
маскировки практически не используются: дело в том, что роботы легко
находят содержащиеся в ссылках почтовые адреса, и они попадают в базы
для рассылки спама.

В некоторых случаях могут использоваться и другие гиперссылки, например, использующие протокол ftp. Вероятнее всего, они Вам не понадобятся. В них нет ничего сложного (всего лишь один протокол заменяется другим).
Источник Проксима



Arnusha

Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 4

Дневник

Суббота, 04 Июня 2011 г. 07:28 + в цитатник

Серия 1

Серия 2

Серия 3

Списки. Пример наследования свойств

Списки
с нумерацией либо различными значками - маркерами ("кружочками",
"квадратиками" и т.п.) хорошо знакомы из MS Word. Если в списке ведётся
нумерация, он называется нумерованным. В противном случае мы имеем дело с
ненумерованным списком. Рассмотрим сначала его.

Ненумерованный список

Выглядеть наш список будет так:

  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • /s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png" target="_blank">//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png);">следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)

В случае, если картинка по каким-либо причинам не загрузится, список будет выглядеть так:

  • элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)

Теперь - код. Для списка с бабочками он имеет вид:

<ul style="padding:0 0 0 25px"><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">элемент списка...</li><li style="list-style-position:outside; list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png')
; list-style-type:circle">следующий элемент
списка...</li><li style="list-style-position:outside;
list-style-image:url('//s50.radikal.ru/i130/1007/71/ebc2001fe6bd.png') ; list-style-type:circle">следующий элемент списка...</li></ul>


Наш список из трёх элементов заключён внутри тегов <ul style="padding:0 0 0 25px">...</ul>.

ul расшифровывается как unordered list - ненумерованный список. padding:0 0 0 25px нужен для того, чтобы наша бабочка не "улетела" за левую границу видимой области. Можно было бы также написать padding-left:25px

Далее. Каждый элемент списка находится внутри контейнера <li style="list-style-position:outside; list-style-image:url('URL_картинки'); list-style-type:circle">...</li>. Обращаю внимание на то, что URL_картинки не заключается в кавычки.

list-style-position:outside говорит о том, что маркер находится за границами списка. Если бы вместо этого было list-style-position:inside, то маркер попал бы "внутрь" списка:

  • элемент
    списка (а это набор совершенно бессмысленных слов, нужный только для
    того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
  • следующий
    элемент списка (а это набор совершенно бессмысленных слов, нужный
    только для того, чтобы показать, как наш список будет выглядеть)
В принципе, можно было не писать list-style-position:outside, поскольку маркер устанавливается за границами списка по умолчанию.

list-style-image:url('URL_картинки') указывает на картинку, которая будет играть в нашем списке роль маркера (во втором примере этой записи нет).

list-style-type:circle стоит в первом примере на тот случай, если картинка не загрузится, и указывает тип предпочитаемого нами маркера: circle
(окружность). Если бы мы не написали этого, и к тому же картинка не
загрузилась бы, то на месте окружностей стоял был тип маркета,
используемый по умолчанию (disc). Кроме окружности и диска, маркер для ненумерованного списка может принимать вид квадрата (square) или вообще исчезать (none).

В третьем примере (там, где маркер стоит внутри списка) свойство list-style-type не задано, и по умолчанию маркер принимает форму диска.

Внутри одного списка можно задавать разные варианты оформления пунктов, например:

  • пункт списка
  • ещё один пункт списка
  • ещё один пункт списка
  • ещё один пункт списка

Код нашего кривого списка выглядит так:

<ul><li
style="list-style-type:circle">пункт списка</li><li
style="list-style-type:disc">ещё один пункт списка</li><li
style="list-style-type:none">ещё один пункт списка</li><li
style="list-style-type:square">ещё один пункт
списка</li></ul>


Что
делать, если мы хотим оформить цифры в виде картинок? Поступить точно
так же, как при составлении списка, с которого мы начинали:

  1. /s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png" target="_blank">//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png);">первый элемент списка
  2. /s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png" target="_blank">//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png);">второй элемент списка
  3. /s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png" target="_blank">//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png);">третий элемент списка

Код будет аналогичным, только картинки для разных элементов списка надо брать разные (опустим list-style-position:outside и тип маркера, которым мы хотим заменить, в случае чего, наши картинки):

<ol style="padding:0 0 0 25px"><li style="list-style-image:url('//s56.radikal.ru/i153/1007/7b/7f10dfb95c69.png')">первый элемент списка</li><li style="list-style-image:url('//s001.radikal.ru/i194/1007/b6/dda52ff8f3d2.png')">второй элемент списка</li><li style="list-style-image:url('//s004.radikal.ru/i206/1007/2d/cda348ffa7ba.png')">третий элемент списка</li></ol>


Пожалуй, единственное заметное отличие нумерованного списка (заключённого между тегами <ol>...</ol>) от ненумерованного (заключённого между тегами <ul>...</ul>)
состоит в том, что в первом случае в качестве маркера по умолчанию
подставляется диск, а во втором - арабская (десятичная) цифра - значение
decimal.

Списки можно вкладывать друг в друга, например, так:

  1. пункт списка
    • элемент вложенного списка
    • ещё один элемент вложенного списка
    • ещё один элемент вложенного списка
  2. ещё один пункт списка
  3. ещё один пункт списка

Код этого списка имеет вид:

<ol><li>пункт
списка</li><ul style="padding:0 0 0 20px"><li
style="list-style-type:circle">элемент вложенного
списка</li><li style="list-style-type:circle">ещё один
элемент вложенного списка</li><li
style="list-style-type:circle">ещё один элемент вложенного
списка</li></ul><li>ещё один пункт
списка</li><li>ещё один пункт списка</li></ol>


Наследование

В
CSS хорошо известно такое правило, как наследование. Оно означает, что
дочерний элемент будет иметь те же свойства, что и родительский элемент.

На примере списков мы как раз сталкиваемся с наследованием.Рассмотрим нумерованный список, в котором мы решили выделить цифры каким-нибудь другим шрифтом. Вот что у нас получится:
  1. первый пункт списка
  2. второй пункт списка

Код этого списка имеет вид:

<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold">первый пункт
списка</li><li style="color:maroon; font-family:Verdana;
font-size:18px; font-style:italic; font-weight:bold">второй пункт
списка</li></ol>


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

  1. первый пункт списка
  2. второй пункт списка

Код в этом случае имеет вид:

<ol><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">первый пункт списка</span></li><li
style="color:maroon; font-family:Verdana; font-size:18px;
font-style:italic; font-weight:bold"><span style="color:black;
font-family:arial, sans-serif; font-size:.7em; font-style:normal;
font-weight:normal">второй пункт
списка</span></li></ol>


Не забывайте закрывать тег <span> для каждого пункта списка. Контейнер <span...>...</span> является в этом примере дочерним элементом, а контейнер <li...>...</li> - родительским элементом.

Примечание.

Свойства основного текста на Ярушке:

font-family:arial, sans-serif;

font-size:.7em (.7em - сокращение, можно было бы записать 0.7em);

font-style:normal;

font-weight:normal;

color - зависит от настроек Вашей страницы.



 


Источник Проксима
Arnusha

Под катом про нумерованный список
Рубрики:  Уроки

Метки:  

Для новичков работа в радикале.

Дневник

Суббота, 04 Июня 2011 г. 07:23 + в цитатник

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

Так вот существуют окошки в которых вы должны внести свои поправки
1.Коды: я пользуюсь
    6. HTML: картинка в тексте
    1.адрес картинки в разных случаях
2. Полноразмерное изображение
здесь ставите с переходом если хотите что бы ваша картинка привела туда где вы указали
в окошке рядом,(существующий адрес удалите и вставьте свой),так же можно сделать кнопку.
самое
главное не забывайте рядышком тут же в этой опции вставить адрес вашей
страници в интернете(на картинке окошко написано сюда адрес)!
если вы
не хотите перехода,а просто картинку в комментарий или пост или
обращение, поставьте не кликабельное,и в развёрнутой закладке в первом
окне выбирайте 6 позицию,копируйте и вставляйте куда вы запланировали!
Желаю удачи !!!

Спасибо © ljagu6e4ka.ya.ru


Arnusha
Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 3

Дневник

Четверг, 02 Июня 2011 г. 06:59 + в цитатник
HTML & CSS - серия 3

Серия 1

Серия 2



Выравнивание текста в абзаце

На время забудем про style,
который мы использовали при оформлении текста, и вернёмся к "чистому"
HTML. Посмотрим, как можно выровнять текст в абзаце. Сразу же перечислим
все варианты, которых немного.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по ширине абзаца, т.е. как бы "подтягивается" к его краям: <р align="justify">. Добавим сюда ещё предложение для наглядности.

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по правому краю: <р align="right">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по центру: <р align="center">

Выравнивание текста в этом абзаце задаётся при помощи свойства (атрибута) align тега <p>. В данном случае текст выравнивается по левому краю: <р align="left">

В последнем случае align="left" можно было бы и не писать, поскольку выравнивание текста по левому краю производится по умолчанию.

Выровнять абзац по центру можно также с помощью парного тега <center>:

Получается такой же результат, что и в приведённом выше примере, но в данном случае используется конструкция <center><p>текст абзаца</p></center>

С помощью тега <center> можно также выравнивать по центру любые другие объекты, например, изображения:

<center><img src="URL_картинки"></center>

URL_картинки (http://...) копируем из адресной строки браузера.

Отступы

Вы ещё не соскучились по style? Сейчас самое время его вспомнить.

В этом абзаце задана "красная строка",то есть отступ первой строки от левого края, который в данном случае равен 20px: <p style="text-indent:20px">текст абзаца</p>

Отступ может быть и отрицательным. В этом случае мы получим "висящую" строку. Однако, если просто написать text-indent:-20px, то мы "потеряем" часть текста:

В этом абзаце задано значение text-indent:-20px, и вот какое безобразие получилось.

Поступим несколько по-другому. Подвинем весь наш абзац на 20px вправо и снова зададим text-indent:-20px:

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

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

В этом абзаце используется text-indent:-20px и дополнительно padding:0 0 0 20px: <p style="padding:0 0 0 20px; text-indent:-20px">текст абзаца</p>.

Возникает вопрос про paddingmargin),
которые необходимы при позиционировании текста и других объектов
(изображений, "встроенных" объектов, блочных элементов и т.д.) Но это -
достаточно большая тема, поэтому расскажу в другой раз. Сейчас только
замечу, что в нашем примере вместо padding:0 0 0 20px можно было бы написать padding-left:20px.


 


Источник Проксима

Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 2

Дневник

Среда, 01 Июня 2011 г. 08:14 + в цитатник
HTML & CSS - серия 2
Предыдущая серия - вот:
серия 1
В этих уроках, а также на сайтах htmlbook.ru, postroika.ru, zvirec.com, htmlka.com
и многих других достаточно много информации, причём она толково
изложена. Тем не менее я решила продолжить свои рассказы, чтобы тоже
быть более-менее последовательной.
Кстати, Вы не заметили, что я пишу уже и о CSS (style - это оттуда)? Но об этом - чуть позже.

Форматирование текста: использование тега <span> и атрибута style (2)

Напомню, что про тег <span> и аттрибут style шла речь в прошлый раз.
Было показано, как c их помощью задать цвет, гарнитуру (вид) шрифта, а
также размер шрифта, его вес (насыщенность), стиль (напр. наклонный) и
вариант (капитель). В конце в качестве примера мы получили вот такой
шрифт:

 

наш шрифт<span
style="color:green; font-family:Verdana; font-size:150%;
font-weight:bold; font-style:italic; font-variant:small-caps">наш
шрифт</span>

 

Расстояние между буквами, словами и строчками

Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

HTML & CSS - серия 1

Дневник

Понедельник, 30 Мая 2011 г. 09:35 + в цитатник
Пост писался для Яндекса в основном,всего их 5 серий.
Но там много полезного и для Ли.ру,и потому решила выбрать
у автора,что здесь будет полезно и показать вам!Все 5 серий
полезны как для начинающих,так и для опытных пользователей.
Сегодня 1 серия о самых простых тегах.Еще раз спасибо Проксима.

Заголовки
Для
оформления заголовков используются теги <h1>...<h6>
С этим думаю всем понятно,это не сложно.Далее
Гарнитура (вид) и цвет шрифта

Здесь есть два способа. Второй будет описан позднее. Первый - используется тег

<font>

с атрибутами face и color, соответственно:

шрифт Verdana

<font face="Verdana">шрифт Verdana</font>


красный шрифт

<font color="red">красный шрифт</font>


шрифт цвета MidnightBlue

<font color="MidnightBlue">шрифт цвета MidnightBlue</font>


шрифт цвета MidnightBlue

<font color="#191970">шрифт цвета MidnightBlue</font>


Цвет имеет название и цифровое значение, как видно в этом примере
(MidnightBlue=#191970). О цветах можно написать очень много, но я
остановлюсь на одной ссылке:

Подбор цвета. Для использования подходят web-safe и web-smart цвета.

Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

Как расположить картинку между текстом...

Дневник

Среда, 25 Мая 2011 г. 04:07 + в цитатник
КАРТИНКА МЕЖДУ ТЕКСТОМ



Я тебя никому не отдам -
Замерзающий плакал котенок,
Умудренный не по годам,
Рыл он снег серебристый под кленом.

Навсегда я останусь с тобой,
Я спасу нас обоих от стужи,
Потому что под этой луной
Мне никто больше в мире не нужен,

Я сейчас закопаю нас в снег,
Там тепло, отогреются лапки,
Мимо быстро прошел человек,
В зимней куртке и пуховой шапке.
А потом все опять расцветет,
Будет солнце сиять над землей,
И никто никогда не поймет,
Что пришлось пережить нам с тобой.

Ты держись, не смотри, что я мал,
Что в кровь изодрались лапки,
Я не выдохся, просто устал,
Ничего, нам помогут боги,
Рядом с ним, на седом полотне,
Еще теплое тело лежало,
А из глаз, по мохнатой щеке,
Золотая слезинка бежала.


ЗДЕСЬ КОД


ТЕКСТ МЕЖДУ КАРТИНКАМИ
ЕЩЁ
Рубрики:  Полезности
Уроки

Метки:  

Шпаргалка под рукой...

Дневник

Вторник, 24 Мая 2011 г. 03:58 + в цитатник

Чтобы выделить слова более жирным шрифтом, напишите

<B>жирный текст внутри такой штучки</B>


чтобы наклонить текст,поступайте

<I>почти точно так же</I>

если буквы должны быть большими или маленькими, то пусть будут
<BIG>большими</BIG> или <SMALL>маленькими</SMALL>


Ссылка делается примерно так:
<A HREF="http://адрес">ссылка</A>


а картинка:
<IMG SRC="адрескартинки">


Вот вам простой пример:
Читать далее...
Рубрики:  Полезности
Уроки

Метки:  

Еще раз о движущемся тексте и изображении..

Дневник

Понедельник, 09 Мая 2011 г. 04:50 + в цитатник
Все коды работают только в html-режиме
КОД

Справа налево +ссылка

Здесь расшифровка кода
<теги scrollamount = "2" scrolldelay = "50" onmouseover = "this.stop ();" onmouseout = "this.start ();" высота = "20" BGCOLOR = "# CCFFCC" ширина = "550 "стиль =" границы: 2px # 0000FF; выравнивания текста: центр; семейство шрифтов: Arial; цвет: # 0000FF; Размер шрифта: 12pt; шрифта: жирный; стиль шрифта: курсив "Направление =" справа ">Справа налево +ссылка

КОД

Слева направо

расшифровка
< scrollamount = "2" scrolldelay = "50" onmouseover = "this.stop ();" onmouseout = "this.start ();" высота = "20" BGCOLOR = "# FFFFCC" ширина = "550 "стиль =" границы: 2px пунктирной # 008000; выравнивания текста: центр; семейство шрифтов: Arial; цвет: # FF0000; Размер шрифта: 10pt; "Направление =" слева "> Слева направо

КОД

Чередование вправо,влево+если мышку подвести,ссылка будет кликабельна

Расшифровка кода.
< scrollamount = "2" scrolldelay = "50" onmouseover = "this.stop ();" onmouseout = "this.start ();" высота = "20" BGCOLOR = "# F0D4A0" ширина = "550 "стиль =" границы: 12px хребта # 00FFFF; выравнивания текста: центр; семейство шрифтов: Arial; цвет: # 000000, размер шрифта: 8pt; шрифта: жирный; стиль шрифта: курсив "поведения =" альтернативный ">Чередование вправо,влево+если мышку подвести,ссылка будет кликабельна
<<<<<>>>>>
Рубрики:  Полезности
Уроки

Метки:  

Всё о HTML...начинающим и не только...

Дневник

Среда, 04 Мая 2011 г. 08:56 + в цитатник
А вот еще одна маленькая хитрость.
Вы хотите поставить рамочку или картинку или часики по центру, а они ну никак не встают
и даже, если Вы применили теги
<center></center>.
Не буду заморачивать долго голову; почему так происходит,
А просто скопируйте вот этот код
<div align="center">
и вставьте его в самом начале кода своей рамочки или картинки
Вот они и в центре!Все так просто!!
Если надо поставить картинку слева или справа,
то в коде вместо center поставьте теги left и right
И еще раз о NTML-кодах
буквально для новичков и не только...





Спасибо NATALKA
Рубрики:  Полезности
Уроки

Метки:  

 Страницы: 9 ... 7 6 [5] 4 3 ..
.. 1