Записи Друзья Комментарии
Gestaltung
Аватар Gestaltung

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

 

 -Поиск по дневнику

Поиск сообщений в Gestaltung

 -Статистика

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


html

Пятница, 13 Июля 2007 г. 22:48 + в цитатник
vischenka1983 все записи автора HTML

Форматирование текста

          Зачеркнутый текст <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="//www.liveinternet.ru/users/642108" 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="http://home.tele2.fr/akvarelki/HTML/ros.gif"></MARQUEE>





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

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




          Синтаксис:
          <A class=link_main title="Дневник испанок" href="//www.liveinternet.ru/users/697649 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="//www.liveinternet.ru/users/642108" target="_blank" method="get"><input type="submit" value="Дневник Эль"></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>

          (* убрать)




Ссылки на HTML




















            Шпаргалка взята отсюда!


                  








Рубрики:  Уроки
Оформление
Метки:  

Процитировано 1 раз
Нравится

Lisenka007   обратиться по имени Пятница, 13 Июля 2007 г. 23:29 (ссылка)
спасибо, утащила себе =)
Ответить С цитатой В цитатник
Комментировать — К дневнику — Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте