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

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

 

 -÷итатник

17 идей использовани€ кофе и кофейной гущи в быту - (1)

...

идеи применени€ кондиционера дл€ волос, которые сэконом€т ваши деньги и нервы - (1)

...

"Ќе дл€ себ€, √осподь, не дл€ себ€..." - (4)

  Ќе дл€ себ€, √оспо...

ƒрузь€, прошу процитировать этот пост.ќчень нужна семье помощь. - (2)

∆утка€ трагеди€, боль и отча€ние. Ёто не развод на деньги. —емь€ действительно очень пострадала. ќче...

Ќе могла промолчать! - (15)

”важаемые читатели и друзь€ моего дневника! ќчень не хотела делать этот пост, но мои друзь€ мен€ уг...

 -–убрики

 -—ообщества

”частник сообществ (¬сего в списке: 2) –ецепты_домохоз€ек ћо€_кулинарна€_книга

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 20.01.2009
«аписей: 8260
 омментариев: 252897
Ќаписано: 282381

ќчень полезна€ HTML-Ўѕј–√јЋ ј

ƒневник

ѕ€тница, 16 —ент€бр€ 2011 г. 04:00 + в цитатник
—оветую всем сохранить ее в закладки,чтобы всегда была под рукой.
¬ ней есть все,что нужно и начинающим и уже опытным пользовател€м.
» даже кто не умеет делать рамочки,здесь есть все,чтобы за 5 минут сотворить рамку.
”дачи!
  •  
    •  
      •  

          «ачеркнутый текст <s> “≈ —“ </s> — “≈ —“
          ѕодчЄркнутый текст<u> “≈ —“ </u> — “≈ —“
          ѕолужирный текст<b> “≈ —“ </b> — “≈ —“
          ѕолужирный крупный <big> “≈ —“ </big> — “≈ —“
           урсивный текст<i> “≈ —“ </i> — “≈ —“
          ћаленький текст<small> “≈ —“ </small> — текст
          Ќеразрывный пробел &*nbsp; (* убрать)
          —носка вверху <sup> сноска</sup>
          “≈ —“ сноска
          —носка внизу <sub> сноска</sub>
          “≈ —“ сноска
          ќтступ <blockquote> текст</blockquote> —
          отступ от отстального текста
          вот так

          ”дарéние (тэг ставим после нужной буквы) — &*#769; (* убрать)
          “екст с подсказкой:
          ѕодведи курсор к тексту!
          <q title="текст подсказки"> ѕодведи курсор к тексту!</q>


манипул€ции с курсором


  •  
    •  
      •  
        •  
          •  
            •  

              • Ќаведите курсор на текст! Ёто default.

              • Ќаведите курсор на текст! Ёто auto.

              • Ќаведите курсор на текст! Ёто text.

              • Ќаведите курсор на текст! Ёто crosshair.

              • Ќаведите курсор на текст! Ёто e-resize.

              • Ќаведите курсор на текст! Ёто w-resize.

              • Ќаведите курсор на текст! Ёто n-resize.

              • Ќаведите курсор на текст! Ёто s-resize.

              • Ќаведите курсор на текст! Ёто ne-resize.

              • Ќаведите курсор на текст! Ёто sw-resize.

              • Ќаведите курсор на текст! Ёто nw-resize.

              • Ќаведите курсор на текст! Ёто se-resize.

              • Ќаведите курсор на текст! Ёто wait.

              • Ќаведите курсор на текст! Ёто hand.

              • Ќаведите курсор на текст! Ёто pointer.

              • Ќаведите курсор на текст! Ёто help.

              • Ќаведите курсор на текст! Ёто move.

        • — помощью стилей можно переопределить вид курсора и выбрать один из п€тнадцати доступных вариантов.



  •  
    •  
      •  
          ≈сли вы желаете переопределить курсор мыши дл€ всей веб-страницы целиком, а не только дл€ ссылок, воспользуйтесь селектором BODY:
          <html>

          <head>

          <style type="text/css">

          body { cursor: crosshair }

          </style>

          </head>




  •  
    •  
      •  
          “акже можно задать разный вид курсора дл€ отдельных областей веб-страницы, использу€ теги DIV или SPAN:
          Ќа этом тексте курсор примет вид перекресть€.

          —интаксис:
          <span style="cursor:crosshair">Ќа этом тексте курсор примет вид перекресть€.</span>

          ¬нимание!

          ѕрежде чем воспользоватьс€ возможностью переделать вид курсора, решите, а будет ли он использоватьс€ к месту.
          ћногих пользователей подобные изменени€ могут ввести в заблуждение:
          когда, например, вместо традиционной «руки», по€вл€ющейс€ при наведении
          на ссылку, возникает нечто другое.
          ¬ большинстве случаев лучше оставить все по умолчанию.



“ег SPAN


  •  
    •  
      •  
          “ег SPAN
          предназначен дл€ определени€ встроенных элементов документа. »наче
          говор€, Ёлемент SPAN определ€ет контейнер дл€ внутреннего текста.
          ¬ отличие от блочных элементов, таких как TABLE, P или DIV, с помощью
          тега SPAN можно выделить часть информации внутри других тегов и
          установить дл€ нее свой стиль.
          Ќапример, внутри параграфа (тега P) можно изменить цвет и размер первой
          буквы, если добавить начальный и конечный тег SPAN и определить дл€
          него стиль текста.
          ¬от несколько примеров применени€ этого тега:
          „≈–Ќџ… “≈ —“ ѕ≈–≈„≈– Ќ”“  –ј—Ќќ… Ћ»Ќ»≈…
          <span style="color:red;text-decoration:line-through;"><span
          style="color:black">„≈–Ќџ… “≈ —“ ѕ≈–≈„≈– Ќ”“  –ј—Ќќ…
          Ћ»Ќ»≈…</span></span>



  •  
    •  
      •  
          —»Ќ»… “≈ —“ ѕ≈–≈„≈– Ќ”“ ∆≈Ћ“ќ… Ћ»Ќ»≈…
          <span style="color:YELLOW;text-decoration:line-through;"><span
          style="color:BLUE">—»Ќ»… “≈ —“ ѕ≈–≈„≈– Ќ”“ ∆≈Ћ“ќ…
          Ћ»Ќ»≈…</span></span>



  •  
    •  
      •  
           ќ–»„Ќ≈¬џ… “≈ —“ ѕќƒ„≈– Ќ”“ ќ–јЌ∆≈¬ќ… Ћ»Ќ»≈…
          <span style="color:darkorange;text-decoration:underline;"><span
          style="color:brown"> ќ–»„Ќ≈¬џ… “≈ —“ ѕќƒ„≈– Ќ”“ ќ–јЌ∆≈¬ќ…
          Ћ»Ќ»≈…</span></span>



  •  
    •  
      •  
          ќ–јЌ∆≈¬џ… “≈ —“ ¬ —≈–ќ… –јћ ≈
          <span style="border:1px solid darkgray;"><span
          style="color:orange;">ќ–јЌ∆≈¬џ… “≈ —“ ¬ —≈–ќ…
          –јћ ≈</span></span>



  •  
    •  
      •  
          «≈Ћ≈Ќјя ——џЋ ј   на мой дневник   ѕќƒ„≈– Ќ”“ј  –ј—Ќџћ ÷¬≈“ќћ
          «≈Ћ≈Ќјя ——џЋ ј<a href="http://arnusha.ru/"
          target="_blank" style="color:red;text-decoration:underline;"><span
          style="color:green;">   на мой дневник  
          </span></a>ѕќƒ„≈– Ќ”“ј  –ј—Ќџћ ÷¬≈“ќћ



  •  
    •  
      •  
          коро сказка сказываетс€...
          <span style = "font-size: 100px;"><FONT FACE="Comic Sans
          MS"><FONT
          COLOR="#FF0000">—</FONT></FONT></span>коро сказка
          сказываетс€...
          ƒ а не скоро дело делаетс€...
          <span style = "font-size: 100px;"><FONT FACE="Monotype
          Corsiva"><FONT COLOR="#0000FF">ƒ</FONT></span> а не
          скоро дело делаетс€...</FONT>
          ¬ зависимости от того, где мы пропишем второй закрывающий тег </font>,
          текст после нашей "буквицы" будет набран таким же шрифтом или вернетс€ в
          свое исходное состо€ние, обусловленное стилем страницы. ¬о втором
          предложении этот тег поставлен только после многоточи€, а в первом
          после буквы "—".


Ѕегуща€ строка


  •  
    •  
      •  

          1. <MARQUEE>¬аш текст</MARQUEE>
          ¬от так!
          2. <MARQUEE style="HEIGHT: 50px" direction=up>¬аш текст</MARQUEE>
          или так
          3. <MARQUEE style="HEIGHT: 50px" direction=down>¬аш текст</MARQUEE>
          ну и вот так
          4. <MARQUEE style="WIDTH: 200px" direction=right>¬аш текст</MARQUEE>
          или даже так
          5. <MARQUEE style="WIDTH: 200px" direction=left>¬аш текст</MARQUEE>
          а уж так!
          6. <MARQUEE style="WIDTH: 200px" behavior=alternate>¬аш текст</MARQUEE>
          и так можем
          ѕеременные:
          HEIGHT высота "окошка", в котором двигаетс€ текст;
          WIDTH рассто€ние, на которое перемещаетс€ текст.
          ћожно ли уменьшить скорость прокрутки при использовании тега marquee?
          “ак вот, дл€ этого необходимо в открывающий тег добавить параметр scrollamount="’", где ’ — скорость прокрутки от 1 до 9.
          –езультат будет выгл€деть так:
          <MARQUEE style="WIDTH: 200px" direction=right scrollamount="’">



  •  
    •  
      •  

          “ег <marquee> заставл€ет двигатьс€ не только текст, но всЄ, к чему он относитс€.
          ѕример:


  •  
    •  
      •  

          —интаксис: <MARQUEE><img src="ros.gif"></MARQUEE>



–аботаем с графикой


  •  
    •  
      •  
        •  
          •  
            •  

        • „тобы превратить изображение в ссылку:

          —интаксис:
          <A class=link_main title="ƒневник Arnusha"
          href="http://arnusha.ru/ target="_blank"
          ><img src=bab.gif BORDER="0"></A>



  •  
    •  
      •  
        •  
          •  
            •  
                ѕо-моему, это камели€
        • ≈сли нужно просто
          дать по€снение к своей картинке, то дл€ того, чтобы получить всплывающую
          строку, нужно вписать тэг ALT="ѕо€снение"

          —интаксис: <img src=kam.gif ALT="ѕо-моему, это камели€" >



  •  
    •  
      •  
        •  
          •  
        • »зображение-ссылка, открывающа€с€ в новом окне:

          —интаксис: <a href="1.html" target="_blank"><img src="okno.gif" border=0></img></a>



  •  
    •  
      •  
          “екст между двум€ картинками:

Ёто такой красивый ирис
а это такой красивый подсолнух
"...Ѕабочки рассказывали ей свои секреты, а ÷веты наперебой звали
покачатьс€ вместе на тонких стебельках.
Ќо у нее был друг.   самому большому и красивому ÷ветку на пол€не
торопилась она каждое утро, чтобы вместе полюбоватьс€ прозрачными
капельками росы, в которых отражаетс€ весь мир!..."
  •  
    •  
      •  
          —интаксис:
          <IMAGE ALIGN="LEFT" VALIGN="MIDDLE" SRC="адрес картинки"
          ALT="комментарий">
          <IMAGE ALIGN="RIGHT" VALIGN="MIDDLE" SRC="адрес картинки"
          ALT="комментарий">
          “екст между двум€ картинками.
          јтрибут ALT - это маленький всплывающий комментарий, но в данном случае можно обойтись и без него.



  •  
    •  
      •  
          ‘он под сообщением:
          ј
          у нас наступило лето...
          «атопило нас €рким светом, и жара. “олько ранним утром с побережь€
          приносит бриз.ј в ћоскве - снова дождь по крышам; будто чь€-то улыбка
          свыше, будто радость пригоршней щедрой - звонко с тучки на тучку -
          вниз...“ех, на дождь кто ворчит, не слушай, а смелей - босиком по лужам,
          подставл€€ ладони брызгам, переливчатым, как алмаз. ”лыбнись случайным
          прохожим; ну а вдруг нарисует дождик , пусть пунктиром, пусть неумело -
          там, под стру€ми, вместе нас?

          —интаксис:
          <table width=100% border="0" cellspacing="8" cellpadding="0"
          background="URL"><tr><td><font color=#FFFFFF font
          face=georgia font size=3>¬аш текст
          сообщени€</font></td></tr></table>
          • ¬место URL подставл€ем адрес фоновой картинки
          • Ќа свой вкус и усмотрение мен€ем цвет, размер и начертание текста


Ћинии и рамочки


  •  
    •  
      •  
          –исуем линии:
          1.

          2.

          3.

          —интаксис:
          1.<HR>
          2.<HR size=3 color=#FF0000>
          3.<HR size=6 color=#00B344>
          ѕеременные:
          SIZE толщина линии
          COLOR цвет линии



  •  
    •  
      •  

          Ћинии бывают вс€кими:
          1.

          2.

          3.

          —интаксис:
          1. <hr color="red" width="50%" size="9" style="border: dotted 5pt; border-color: red ">
          2. <hr color="black" width="50%" size="5" style="border: dashed 5pt; border-color: Forestgreen ">
          3. <hr color="blue" width="50%" size="7" style="border: dotted 5pt; border-color: red ">
          ѕеременные:
          WIDTH длина линии в процентах по отношению к экрану
          SIZE размер элементов
          DASHED пунктирна€ лини€
          DOTTED точечна€ лини€
          COLOR цвет элементов



  •  
    •  
      •  
          –исуем рамочки:
          1.
          2.
          3.
          —интаксис:
          1. <blockquote style="border:3px #00B344 dashed; padding: 15px;
          margin:0px 0px 0px 0px;">«десь будет ¬аш текст</blockquote>
          2. <blockquote style="background-color: #FFE4B5; border:3px #BC8F8F
          solid; padding: 10px; margin:0px 0px 0px 0px;">«десь будет ¬аш
          текст</blockquote>
          3.<blockquote style="border:3px #DA70D6 solid; padding: 5px;
          margin:0px 0px 0px 0px;">«десь будет ¬аш текст</blockquote>
          ѕеременные:
          border:3px #ff0000 толщина рамки в пиксел€х и еЄ цвет
          background-color: #ffff00 цвет фона рамки
          dashed пунктир
          solid непрерывна€
          padding отступ текста от рамки внутри
          margin отступ от текста снаружи (если рамка находитс€ внутри текста)



  •  
    •  
      •  

          ¬ рамки можно помещать не только текст, но и картинки:


          —интаксис:
          <blockquote style="background-color: #E0FFFF; border:3px #87CEEB
          solid; padding: 15px; margin:0px 0px 0px 0px;"><img src=pp.gif
          BORDER="0">ѕервый поцелуй!</blockquote>


» така€ рамочка


  •  
    •  
      •  

          —интаксис:
          <FIELDSET><LEGEND align="center"><B><font
          color=#FFA500>» така€
          рамочка</font></B></LEGEND></FIELDSET>
          ѕараметр align выравнивает относительно одной из сторон документа,
          значени€: left, right, или center


–азноцветные рамочки


  •  
    •  
      •  
          —интаксис:
          <blockquote style="BORDER-LEFT: #F70000 3px solid; padding: 15px;
          BORDER-TOP: #119931 3px solid; padding: 15px; BORDER-BOTTOM: #E3AF40 3px
          solid; padding: 15px;BORDER-RIGHT: #924E96 3px solid" padding:
          15px></blockquote>
          padding отступ текста от рамки внутри.

      • я
        принесла тебе пол€ну. Ќа завтрак. ѕока несла ее, все откусывали от нее
        по чуть-чуть и не верили вкусу земл€ники. ’орошо, что на пол€не сидел
        тушканчик. ќн-то и объ€сн€л всем, что в мире нет ничего особенного, что
        это просто девочка несет пол€ну на завтрак своему другу. Ћесную. —
        земл€никой. Ќу и что. Ќе всем же кофе в постель.





  •  
    •  
      •  
          ћожно добавить картинку:

  •  
    •  
      •  
          —интаксис дл€ картинки:
          <img src="k.jpg" align="right">


      • ѕотом
        достать смешные акварели, изрисовать в нелепые цвета. ѕотом себ€ в
        оранжевый покрасить. “ы будешь – —олнце, вечное, всегда. » возле солнца –
        ангелы и бесы, песочницы, гитары, звон монет, коты и кастаньеты,
        апельсины, смешные дети, сильные мужчины. » в центре – твой улыбчивый
        портрет.




 нопочки


  •  
    •  
      •  
        •  
          •  

  •  
    •  
      •  

          —интаксис:
          <BUTTON title="“екст-по€сн€лка к кнопке"><TABLE
          border=5><TBODY><TR><TD><CENTER><FONT
          color=#BA55D3 size=4>Ќазвание
          кнопки</FONT></CENTER></TD></TR></TBODY></TABLE></BUTTON>



  •  
    •  
      •  
        •  
          •  
            •  
              •  

        •  нопочка-посылалка:
          —интаксис:
          <form action="http://arnusha.ru/"
          target="_blank" method="get"><input type="submit"
          value="ƒневник Arnusha"></form>



  •  
    •  
      •  

          ÷ветна€ кнопочка с картинкой

          —интаксис:
          <form action="URL" method="get"><button style="BACKGROUND:
          #8080ff; WIDTH: 150px" type="submit"><img src="URL
          картинки"></button></form>


Ќекоторые специальные символы


  •  
    •  
      •  

          Ќекоторые символы не вход€т в базовую часть таблицы кодов ASCII.   ним
          относ€тс€ буквы алфавитов части европейских €зыков, математические и
          некоторые другие символы.
          Ќекоторые символы, введенные в HTML документ будут интерпретироватьс€
          не так, как задумал автор. Ёто, например, символы "<" и ">",
          используемые дл€ указани€ тегов.
          ¬ этих случа€х можно вводить нужные символы с помощью специальных кодов.
           оды начинаютс€ с символа "амперсанд"(&). «а ним следует
          название символа, либо его числовой код в дес€тичной или
          шестнадцатеричной системе. «авершает код символ "точка с зап€той" ;
          ѕишу разреженно, чтобы можно было прочитать код:
          & quot; - двойна€ кавычка "
          & amp; - амперсанд &
          & lt; - знак 'меньше' <
          & gt; - знак 'больше' >
          & nbsp; - неразрывный пробел
          ќбща€ пунктуаци€:
          & ndash; - тире –
          & mdash; - длинное тире —
          & lsquo; - лева€ одиночна€ кавычка ‘
          & rsquo; - права€ одиночна€ кавычка ’
          & sbquo; - нижн€€ одиночна€ кавычка ‚
          & ldquo; - лева€ двойна€ кавычка “
          & rdquo; - права€ двойна€ кавычка ”
          & bdquo; - нижн€€ двойна€ кавычка „
          » даже карточные масти:
          & spades; - знак масти 'пики' ♠
          & clubs; - знак масти 'трефы' ♣
          & hearts; - знак масти 'червы' ♥
          & diams; - знак масти 'бубны' ♦



  •  
    •  
      •  
          ѕример:

          ♣   ♣   ♥   ♥


          —интаксис:
          <aligh=center><font color="red" size=7>&*clubs;   &*clubs;   &*hearts;   &*hearts;</font>
          (* убрать)

Arnusha

–убрики:  ѕолезности
”роки

ћетки:  

HTML & CSS - сери€ 1

ƒневник

ѕонедельник, 30 ћа€ 2011 г. 05: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 цвета.

„итать далее...
–убрики:  ѕолезности
”роки

ћетки:  

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

ƒневник

—реда, 04 ћа€ 2011 г. 04:56 + в цитатник
ј вот еще одна маленька€ хитрость.
¬ы хотите поставить рамочку или картинку или часики по центру, а они ну никак не встают
и даже, если ¬ы применили теги
<center></center>.
Ќе буду заморачивать долго голову; почему так происходит,
ј просто скопируйте вот этот код
<div align="center">
и вставьте его в самом начале кода своей рамочки или картинки
¬от они и в центре!¬се так просто!!
≈сли надо поставить картинку слева или справа,
то в коде вместо center поставьте теги left и right
» еще раз о NTML-кодах
буквально дл€ новичков и не только...





—пасибо NATALKA
–убрики:  ѕолезности
”роки

ћетки:  

 —траницы: [1]