• Авторизация


HTML шпаргалка 17-02-2014 02:00 к комментариям - к полной версии - понравилось!

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

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="http://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="ros.gif"></MARQUEE>


 

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

 


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




Синтаксис:
<A class=link_main title="Дневник испанок" href="http://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 отступ от текста снаружи (если рамка находится внутри текста)

 


• Можно изменить толщину рамки: для этого замените цифру 2 на другую цифру: border:2px

• Внутренний фон #FFFFFF (белый), можно поменять на любой другой цвет.

• Чтобы изменить цвет рамки нужно вместо #FF0000 (красный), написать цвет кода из таблицы:

Коды цветов для HTML.

Флешка с кодами:
Жмите на любой цвет, а в окошке справа копируйте код нужного вам цвета.

 

[показать]Первый поцелуй!


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


Синтаксис: 

<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://www.liveinternet.ru/users/642108" target="_blank" method="get"><input type="submit" value="Дневник Эль"></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>

(* убрать)

 

Ссылки на HTML


 

 

 



 

 

Благодарность

 

[показать]

 



Замечательных девушек — 



[показать]

    и    

которые очень помогли в создании этой шпаргалки!

Благодарность

 

[показать]

 



Замечательных девушек — 



[показать]

    и    

которые очень помогли в создании этой шпаргалки!

 

вверх^ к полной версии понравилось! в evernote
Комментарии (1):
Со_Со 17-02-2014-10:07 удалить
Спасибо за цитирование! [500x386]


Комментарии (1): вверх^

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

Дневник HTML шпаргалка | самаНеСВОЯ - Заметки для жизни .... | Лента друзей самаНеСВОЯ / Полная версия Добавить в друзья Страницы: раньше»