• Авторизация
Дневник Irysik-2006 Лента друзей - Дневник - Полная версия


Обязательно пригодится всем!!!!! 19-06-2007 15:18 к комментариям - к полной версии - понравилось!

Это цитата сообщения Cool_Cat Оригинальное сообщение

Без заголовка

Шпаргалка HTLM

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



[показать]
Форматирование текста



          Зачеркнутый текст <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>










          Скоро сказка сказывается...

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




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





          Если нужно просто дать пояснение к своей картинке, то для того, чтобы получить всплывающую строку, нужно вписать тэг 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 отступ от текста снаружи (если рамка находится внутри текста)
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Обязательно пригодится всем!!!!! | Irysik-2006 - ~Ируся~ | Лента друзей Irysik-2006 / Полная версия Добавить в друзья Страницы: раньше»