ΠΠ½ΠΎΠΏΠΊΠ° ΡΠΈΡΡΠ½ΠΎΠΊ β ΠΠ°Π·Π΅ΡΠ½Π°Ρ Π³ΡΠ°Π²ΠΈΡΠΎΠ²ΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΡΠΎΡΠ΅ΡΡ Π½Π°Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ
31.07.2016
Π‘ΠΎΠ²Π΅ΡΡ Ρ
ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°
HTML ΠΊΠ½ΠΎΠΏΠΊΠ° β Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΠΉ ΠΏΠΎΠΌΠΎΡΠ½ΠΈΠΊ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ
ΠΠΎΡΡΠΈ Π²ΡΠ΅ Π»ΡΠ΄ΠΈ (Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ β ΠΌΠ΅Π½ΡΡΠ΅) Π»ΡΠ±ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΏΠΎΡΡΠ΄ΠΎΠΊ β ΡΡΠΎ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π½ΠΎ. Π£Π΄ΠΎΠ±Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ° ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅, Π½Π° ΡΠ°Π±ΠΎΡΠ΅, Π² ΠΊΠ²Π°ΡΡΠΈΡΠ΅. Π ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π·Π°Ρ ΠΎΠ΄ΠΈΡΡ Π½Π° Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΡΠΉ ΡΠ°ΠΉΡ, Π° ΡΠ°ΠΌ ΡΠΎΠΆΠ΅ β ΠΏΠΎΡΡΠ΄ΠΎΠΊ, Π²ΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈ ΠΏΡΠΎΡΡΠΎ.
ΠΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π΄ΡΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ (ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ) ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. Html ΠΊΠ½ΠΎΠΏΠΊΠ° β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΠΎΠ΅ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ Π΄Π»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΡΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² HTML?
ΠΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° HTML ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
1. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° input. Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<input type="button" value=Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅>
2. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° button:
<button>ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button> ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² <b>html</b> ΡΡΠ°Π·Ρ Π΄Π²ΡΠΌΡ ΡΡΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ½ΠΎΠΏΠΊΠ°</title> </head> <body> <form> <p><input type="button" value=" ΠΠ½ΠΎΠΏΠΎΡΠΊΠ°1 "></p> <p><button>ΠΠ½ΠΎΠΏΠΎΡΠΊΠ°2</button></p> </form> </body> </html>
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡΡΡ Π΄Π²Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ ΠΎΡΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈΡΡ Π΄Π²Π΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ html, ΠΊΠΎΠ΄ Π΄Π»Ρ Π½ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π½ΡΠΉ. ΠΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² html.
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΡΠΎΡΡΠΎΠΈΡ Π»ΠΈΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³Π° button β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΠ²ΠΎΠΉ Π½Π°Π±ΠΎΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΈ ΡΡΠΎ Π²ΡΠ΅ Π±ΡΠ΄Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ, Π° ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³Π° input Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΠΈΠ±ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π»ΠΈΠ±ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡ.
ΠΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΡΠ°ΡΡΠ΅ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Internet Explorer ΠΌΠΎΠ³ΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΡΠ΅Π³ button.
ΠΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ html
1. ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ° HTML
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠΎ ΡΡΡΠ»ΠΊΠΎΠΉ HTML (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Π²Π΅ΡΡ
Π΄Π»Ρ ΡΠ°ΠΉΡΠ° html ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°Π·Π°Π΄ html) ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΠ·Π΄Π°Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ»ΠΎΠΊ Β«ΡΠΊΠΎΡΠ΅ΠΉΒ». ΠΠ±ΡΡΠ½ΡΠΉ Β«ΡΠΊΠΎΡΡΒ» ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π²ΠΈΠ΄:
Π’Π°ΠΊΠΎΠΉ Β«ΡΠΊΠΎΡΡΒ» Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΡΡΠ°Π²Π»Π΅Π½ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²Ρ ΡΡΠΈΡΠ°Π΅ΡΠ΅ Π½ΡΠΆΠ½ΡΠΌ. ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ Β«ΡΠΊΠΎΡΡΒ», ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π°:
<a href="#ΠΈΠΌΡ ΡΠΊΠΎΡΡ">Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ</a>
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ Π½Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ ΠΊ Β«ΡΠΊΠΎΡΡΒ».
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²Π½ΠΈΠ·Ρ ΡΠ°ΠΉΡΠ° ΡΡΠΎΡΠ»Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π½Π° Π½Π°ΡΠ°Π»ΠΎ, Π° Π² Π½Π°ΡΠ°Π»Π΅ β Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π²Π½ΠΈΠ·:
<!DOCTYPE html> <html> <head> <title>Π―ΠΊΠΎΡΡ</title> </head> <body> <form> <a name="top"></a> <p><a href="#end">Π²Π½ΠΈΠ·</a></p> β¦ <p><a href="#top">Π²Π²Π΅ΡΡ </a></p> β¦ <a name="end"></a> </form> </body> </html>
ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
2. ΠΠ½ΠΎΠΏΠΊΠ° Submit
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΈΠΏΠ° Submit ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π²Π²Π΅Π΄ΡΠ½Π½ΠΎΠΉ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΌ ΡΠ°ΠΉΡΠ°, Π½Π° ΡΠ΅ΡΠ²Π΅Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ°Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΡ Π²Π²ΠΎΠ΄Π° ΠΏΠ°ΡΠΎΠ»Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
<p><input name="login"></p> <p><input type="submit"></p>
3. ΠΠ½ΠΎΠΏΠΊΠ° Reset
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΈΠΏΠ° Reset ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ ΡΠΎΡΠΌ (Π²ΠΎΠ·Π²ΡΠ°ΡΠ° ΠΈΡ Π² ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅). ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
<input type="reset" value="ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ">
4. HTML ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ
Π HTML ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠ°ΡΠ°ΡΡ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
<input type="image" src="ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ">"
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ:
<button> <img alt="" src="ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ" />ΠΠ°ΠΆΠΌΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΌΠ΅ΡΡΡΡΡ</button>
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ HTML ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²ΠΎΡ Π²ΡΠ΄ΡΠΌΠΊΡ: Π»ΡΠ±ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΠ΅ ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.
Π£Π΄Π°ΡΠΈ!
www.internet-technologies.ru
ΠΠ½ΠΎΠΏΠΊΠΈ | htmlbook.ru
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΠΎΠ½ΡΡΠ½ΡΡ ΠΈ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΠΎ ΠΈΡ Π²ΠΈΠ΄Ρ ΡΡΠ°Π·Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Ρ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΒ β ΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° Π½ΠΈΡ . ΠΠ° ΡΡΡΡ ΡΡΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠΎΡΠΌΠ°Ρ , ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΈ ΠΈΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠ΅ ΠΈ ΠΎΡΠΈΡΡΠΊΠ΅.
ΠΠ½ΠΎΠΏΠΊΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈΒ β Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <input> ΠΈ ΡΠ΅Π³Π° <button>.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²Π½Π°ΡΠ°Π»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅ΡΠ΅Π· <input> ΠΈ Π΅Π³ΠΎ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ.
<input type="button" Π°ΡΡΠΈΠ±ΡΡΡ>
ΠΡΡΠΈΠ±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1.
ΠΡΡΠΈΠ±ΡΡ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
name | ΠΠΌΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΡΠΌΡ ΠΌΠΎΠ³ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ. |
value | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° Π½Π΅ΠΉ. |
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 1.
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input type="button" value=" ΠΠ°ΠΆΠΌΠΈ ΠΌΠ΅Π½Ρ Π½Π΅ΠΆΠ½ΠΎ "></p>
</form>
</body>
</html>
ΠΡΠΎΠ±Π΅Π»Ρ Π² Π½Π°Π΄ΠΏΠΈΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° HTML, ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΈΡΠΎΠ³Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³Π° <button>. ΠΠ½ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <input>. ΠΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π½Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML Π²ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°Π±Π»ΠΈΡΡ. ΠΠ° ΡΠΈΡ.Β 2 ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π½ΡΠ΅ Π²ΠΈΠ΄Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>.
Π ΠΈΡ. 2. ΠΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ <button>
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
<button Π°ΡΡΠΈΠ±ΡΡΡ>ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² ΡΠ°Π±Π».Β 1, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ <input> Π°ΡΡΠΈΠ±ΡΡ value ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎ ΡΠ΅Π³ <img> Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π²Π½ΡΡΡΡ <button>, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅Β 2.
ΠΡΠΈΠΌΠ΅Ρ 2. Π ΠΈΡΡΠ½ΠΎΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ½ΠΎΠΏΠΊΠ°</title> </head> <body> <form> <p><button>ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ</button> <button> <img src="images/umbrella.gif" alt=""> ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ </button></p> </form> </body> </html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΏΡΠΈ ΡΡΠΎΠΌ , Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠΈΡΡΠ½ΠΊΠ°. Π Π°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° <button>, Π½ΠΎ ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΎΡΡΡΠΌ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π°, ΠΊΠ°ΠΊ Π² ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ <input>, ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π΅ ΡΠ΄Π°ΡΡΡΡ.
ΠΠ½ΠΎΠΏΠΊΠ° Submit
ΠΠ»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Submit. ΠΡ Π²ΠΈΠ΄ Π½ΠΈΡΠ΅ΠΌ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΠ±ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ action ΡΠ΅Π³Π° <form>. ΠΡΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠ°Ρ Π΅ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΡΠΎΡΠΌΡ, ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅, Π²Π²Π΅Π΄Π΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ Ρ Π½ΠΈΠΌΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² Π²ΠΈΠ΄Π΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. Π§ΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π°Π²ΡΠΎΡΠ° ΡΠ°ΠΉΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ΄ΠΎΠ±Π½Π°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΎΠΏΡΠΎΡΠΎΠ², ΡΠΎΡΡΠΌΠΎΠ², ΡΠ΅ΡΡΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²Π΅ΡΠ΅ΠΉ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Submit Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π³Π° <input> ΠΈΠ»ΠΈ <button>.
<input type="submit" Π°ΡΡΠΈΠ±ΡΡΡ>
<button type="submit">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
ΠΡΡΠΈΠ±ΡΡΡ ΡΠ΅ ΠΆΠ΅, ΡΡΠΎ ΠΈ Ρ ΡΡΠ΄ΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΡΠΈΠΌΠ΅ΡΒ 3).
ΠΡΠΈΠΌΠ΅Ρ 3. ΠΡΠΏΡΠ°Π²ΠΊΠ° Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input name="login"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
ΠΡΡΠΈΠ±ΡΡ name Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΠΏΠΈΡΠ°ΡΡ. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ value, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΡΠ΅ΠΊΡΡ, ΠΎΠ½ ΡΠ°Π·Π»ΠΈΡΠ°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π’Π°ΠΊ, Firefox ΠΏΠΈΡΠ΅Ρ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡ Π·Π°ΠΏΡΠΎΡΒ», IE β Β«ΠΠΎΠ΄Π°ΡΠ° Π·Π°ΠΏΡΠΎΡΠ°Β», Opera ΠΈ ChromeΒ β Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ». Π‘Π°ΠΌ ΡΠ΅ΠΊΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ.
ΠΠ½ΠΎΠΏΠΊΠ° Reset
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Reset Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ Π² ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π² ΠΏΠΎΠ»ΡΡ ΡΠΎΡΠΌΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΎΡΠΌ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π»ΡΡΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎ ΠΎΡΠΈΠ±ΠΊΠ΅ Π½Π° Π½Π΅Π΅ Π½Π΅ Π½Π°ΠΆΠ°ΡΡ, Π²Π΅Π΄Ρ ΡΠΎΠ³Π΄Π° ΠΏΡΠΈΠ΄ΡΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΡΠΌΡ Π·Π°Π½ΠΎΠ²ΠΎ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΎΡΡ ΠΈ ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
<input type="reset" Π°ΡΡΠΈΠ±ΡΡΡ>
<button type="reset">ΠΠ°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅</button>
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 4 ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΡΠΎΡΠΌΠ° Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΏΠΎΠ»Π΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΆΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π²Π΅Π΄ΡΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° value ΡΠ΅Π³Π° <input>. ΠΠΎΡΠ»Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΈΡΡΠΈΡΡΒ», Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΈ Π² Π½ΡΠΌ ΡΠ½ΠΎΠ²Π° ΠΏΠΎΡΠ²ΠΈΡΡΡ Π½Π°Π΄ΠΏΠΈΡΡ Β«ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡΒ».
ΠΡΠΈΠΌΠ΅Ρ 4. ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ ΡΠΎΡΠΌΡ
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ½ΠΎΠΏΠΊΠ°</title>
</head>
<body>
<form>
<p><input value="ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ"></p>
<p><input type="submit" value="ΠΡΠΏΡΠ°Π²ΠΈΡΡ">
<input type="reset" value="ΠΡΠΈΡΡΠΈΡΡ"></p>
</form>
</body>
</html>
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Reset Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ. ΠΡΠ»ΠΈ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΎΠΏΡΡΡΠΈΡΡ, ΠΈΠ½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ value, Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΡΠ΅ΠΊΡΡ Β«ΠΡΠΈΡΡΠΈΡΡΒ».
htmlbook.ru
ΠΠ½ΠΎΠΏΠΊΠΈ Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΠΎΠΊ-ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π±Π΅Π· ΡΠΎΡΠ»ΡΠΈ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ

ΠΠ΅ΠΊΡΠΎΡ
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΠ°ΠΉΠΊΠ±ΠΎΠΊΡ
ru.123rf.com
ΠΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. ΠΠ°ΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π² Photoshop.
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠ°ΡΡΠΊΠ°Π·Π°Π»Π° Π²Π°ΠΌ ΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΡΡΠΈΠ»Ρ WEB 2.0. Β Π Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅Β ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.
ΠΠ΄ΡΠΌ Π² Photoshop ΠΈ ΡΠΎΠ·Π΄Π°ΡΠΌ Π½ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ CTRL+N.
Π¨ΠΈΡΠΈΠ½Ρ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ 500px, Π²ΡΡΠΎΡΡ 300px.
ΠΠ° Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Β«ΠΎΠΊΠ½ΠΎΒ» ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Β«ΡΠ»ΠΎΠΈΒ», ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ F7.
Π£ Π½Π°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ:
Π‘Π»ΠΎΡ 1 Π΄Π°ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Β«ΡΠΎΠ½Β». Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π½ΡΠΆΠ½ΠΎ ΡΡΠ»ΠΊΠ½ΡΡΡ Π΄Π²Π° ΡΠ°Π·Π° ΠΌΡΡΠΊΠΎΠΉ ΠΏΠΎ Π‘Π»ΠΎΡ1.
!!! ΠΡΠ΅Π³Π΄Π° Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»ΠΎΡ! ΠΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½ΡΠΆΠ½ΡΠΉ Π²Π°ΠΌ ΡΠ»ΠΎΠΉ.
ΠΠ½ΠΎΠΏΠΊΡΒ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°Β ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π½Π° Π³ΠΎΠ»ΡΠ±ΠΎΠΌ ΡΠΎΠ½Π΅.
ΠΠ΅ΡΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΠ°Π»ΠΈΠ²ΠΊΠ°Β»
ΠΈ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΎΠ½ Π³ΠΎΠ»ΡΠ±ΡΠΌ Β ΡΠ²Π΅ΡΠΎΠΌ.
ΠΠ»Ρ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° ΡΠΊΠ°ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ColorMania.
Π‘Π°ΠΌΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 300px, Π²ΡΡΠΎΡΠΎΠΉ 100px.
ΠΠΊΠ»ΡΡΠ°Π΅ΠΌ Π»ΠΈΠ½Π΅ΠΉΠΊΡ: CTRL+R ΠΈΠ»ΠΈ Π½Π° Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΏΡΠ½ΠΊΡ Β«ΠΏΡΠΎΡΠΌΠΎΡΡΒ» ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Β«Π»ΠΈΠ½Π΅ΠΉΠΊΠΈΒ».
ΠΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅. ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π½Π° 100px ΠΈ Π½Π° 400px, Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ Π½Π° 100px ΠΈ Π½Π° 200px.
!!!ΠΠ°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΡΠΎΠ²Π΅ΡΡΡ Π²ΡΡΡΠ°Π²Π»ΡΡΡ Π²ΡΠ΅Π³Π΄Π°, ΡΡΠΎ ΠΏΡΠΈΡΡΠΈΡ Π²Π°Ρ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅ Π½Π°Π΄ web-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
ΠΠ΅ΡΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠΎ ΡΠΊΡΡΠ³Π»ΡΠ½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈΒ». ΠΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ»Π΅Π²Π°, Π±Π»ΠΈΠΆΠ΅ ΠΊ Π½ΠΈΠ·Ρ, ΠΈΠ»ΠΈ Π³ΠΎΡΡΡΠ°Ρ ΠΊΠ»Π°Π²ΠΈΡΠ° U.
ΠΠ²Π΅ΡΡ
Ρ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ: Π·Π°Π»ΠΈΠ²ΠΊΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π±Π΅Π»ΡΡ, ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ Π²ΡΠΊΠ»ΡΡΠ°Π΅ΠΌ.
Π Π°Π΄ΠΈΡΡ (ΡΠ°ΠΌ ΠΆΠ΅ Π½Π° Π²Π΅ΡΡ
Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ) Π΄Π΅Π»Π°Π΅ΠΌ 10px.
Π ΡΠ΅ΠΏΠ΅ΡΡ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΡΡΡΠΎΠ³ΠΎ ΠΏΠΎ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠΌ ΡΠΈΡΡΠ΅ΠΌ Π½Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
Π£ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΠ°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΎΡΠΊΠ»ΡΡΠ°Π΅ΠΌ CTRL+;
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Π² ΠΎΠΊΠ½Π΅ Β«ΡΠ»ΠΎΠΈΒ» ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ»ΠΎΠΉ, ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²ΡΠ²Π°Π΅ΠΌ ΡΡΠΎΡ ΡΠ»ΠΎΠΉ, ΡΡΠ»ΠΊΠ½ΡΠ² Π΄Π²Π° ΡΠ°Π·Π° Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ, Β ΠΈ Π΄Π°ΡΠΌ Π΅ΠΌΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β».
!!! ΠΡΠ΅Π³Π΄Π° Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ»ΠΎΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠ°ΠΊ Π²Ρ Π² Π½ΠΈΡ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ.
ΠΡΠ½ΠΎΠ²Π° Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π³ΠΎΡΠΎΠ²Π°, ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° cΠ΄Π΅Π»Π°ΡΡ ΠΈΠ· Π½Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π² ΡΡΠΈΠ»Π΅ WEB 2.0.
ΠΡΠ°ΠΊ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ.
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°.
ΠΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΠ»ΠΎΠΉ Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β», ΡΡΠ»ΠΊΠ½ΡΠ² ΠΏΠΎ Π½Π΅ΠΌΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΌΡΡΠΊΠΎΠΉ.
ΠΠ°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ fx ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΡΠ½ΠΊΡ Β«Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°Β»
Π£ Π½Π°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ΅ ΠΎΠΊΠ½ΠΎ:
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ Π½Π°ΠΆΠ°Π»ΠΈ Π½Π° ΠΎΠΊΠ½ΠΎ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, Ρ Π½Π°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°.
ΠΠΈΠΆΠ½ΠΈΠΉ ΡΠ²Π΅Ρ Π±Π΅ΡΡΠΌ ΡΡΠΌΠ½ΠΎ-ΡΠΈΠ½ΠΈΠΉ, Π²Π΅ΡΡ
Π½ΠΈΠΉ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ, Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π²Π΅Π·Π΄Π΅ OK ΠΈ Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ:
ΠΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΠ½Π° ΠΊΠ°ΠΊ-ΡΠΎ ΠΏΠ»ΠΎΡΠΊΠΎΠ²Π°ΡΠΎ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ΅Π½Ρ ΠΈ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ.
ΠΠ°ΠΆΠΈΠΌΠ°Π΅ΠΌ fx ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΡΡΠΈΠ»Ρ Β«ΡΠ΅Π½ΡΒ» ΠΈ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
Π Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ: fx -> ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°.
ΠΠ°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°Β ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΡ Π° ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΡΡ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅.
ΠΠ΅ΡΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Β«ΡΠ΅ΠΊΡΡΒ» ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π»Π°ΡΠΈΠ½ΡΠΊΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ Β«TΒ», ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ΅ΠΊΡΡΠ° Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
Π¨ΡΠΈΡΡ β Verdana, bold, 30px.
Β
Π ΠΏΠΈΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ Β«ΠΠΠΠΠΠΒ».
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊ ΡΠ΅ΠΊΡΡΡ ΡΡΠΈΠ»Ρ Β«ΡΠ΅Π½ΡΒ» Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°:
Π‘ΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ Π½Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅Β PhotoshopΒ (*.PSD;*.PDD).
ΠΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ.
ΠΠ°ΠΊ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΠ°ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS ΡΠΈΡΠ°ΠΉΡΠ΅ Π²ΠΎΡ Π·Π΄Π΅ΡΡ
www.fly-webmaster.ru
Π ΠΈΡΡΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π² Π€ΠΎΡΠΎΡΠΎΠΏ
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅- #Π¨Π°Π³ 1
- #Π¨Π°Π³ 2
- #Π¨Π°Π³ 3
- #Π¨Π°Π³ 4
- #Π¨Π°Π³ 5
- #Π¨Π°Π³ 6
- #Π¨Π°Π³ 7
- #Π¨Π°Π³ 8
- #Π¨Π°Π³ 9
- #Π¨Π°Π³ 10
- #Π¨Π°Π³ 11
- #Β Β ΠΠΎΠΏΡΠΎΡΡ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅Π±-ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠ½, ΠΏΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ»ΠΎΡΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΉ-ΠΌΠ°ΡΠΊΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ.
Π€ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
Π¨Π°Π³ 1
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ (Ctrl + N) ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1280 x 1024 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ².

Π¨Π°Π³ 2
ΠΠ°Π»Π΅ΠΉΡΠ΅ ΡΠΎΠ½ ΡΠ²Π΅ΡΠΎΠΌ #Π‘CCBCC ΠΈ ΠΊΠΈΡΡΡΡ (Brush Tool) (Π) Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· Π² ΡΠ΅Π½ΡΡΠ΅ ΡΠΎΠ½Π°, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΏΡΡΠ½ΠΎ. Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ½ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ.03

Π¨Π°Π³ 3
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ ( Rounded Rectangle Tool)Β (U) Π½Π°ΡΠΈΡΡΠΉΡΠ΅ ΡΠΈΠ³ΡΡΡ Ρ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ 180 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ²:

Π¨Π°Π³ 4
Π ΡΠΈΠ³ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΡ ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° (Gradient Overlay). ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅:

Π¨Π°Π³ 5
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΠ²Π°Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ (Elliptical Marquee tool)Β (M)Β Π½Π°ΡΠΈΡΡΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π»Π΅ΠΉΡΠ΅ Π΅Π³ΠΎ ΡΠ΅ΡΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ. Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅ Π΅Π³ΠΎ Π½Π° ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΠΈΠ³ΡΡΠ΅:

Π¨Π°Π³ 6
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΎ ΡΠ»ΠΎΡ Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΎΠΉ ΡΠΈΠ³ΡΡΡ (ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ Π‘Π»ΠΎΠΈ ΠΏΠΎ ΡΡΠΈΠ»ΡΠΌ ΡΠ»ΠΎΡ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ½ΠΊΡ Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΡΠ»ΠΎΡ. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ»ΠΎΠΉ Ρ ΡΠ΅ΡΠ½ΡΠΌ ΠΊΡΡΠ³ΠΎΠΌ, ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡ Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ Π‘Π»ΠΎΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ½ΠΊΡ ΠΠΊΠ»Π΅ΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΡΠ»ΠΎΡ).

Π¨Π°Π³ 7
Π’Π°ΠΊΠΆΠ΅, ΠΊ ΡΠ»ΠΎΡ Ρ ΠΊΡΡΠ³ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»Ρ Π’Π΅Π½Ρ (Drop shadow):

Π¨Π°Π³ 8
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΠ²Π°Π»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ (Elliptical Marquee tool)Β (M)Β Π½Π°ΡΠΈΡΡΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π»Π΅ΠΉΡΠ΅ Π΅Π³ΠΎ Π±Π΅Π»ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ.

Π¨Π°Π³ 9
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½Π°Ρ ΡΠΈΠ³ΡΡΠ° (CustomShapeTool) ΠΈ Π½Π°ΡΠΈΡΡΠΉΡΠ΅ ΡΠΈΠ³ΡΡΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ° Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ»ΠΎΠΉ-ΡΠΈΠ³ΡΡΡ.

Π¨Π°Π³ 10
ΠΠ° ΡΠ»ΠΎΠΉ Ρ ΠΊΠΎΠ½Π²Π΅ΡΡΠΎΠΌ Π²ΠΊΠ»Π΅ΠΉΡΠ΅ ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠ»ΠΎΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π½Π΅Π΅ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π»ΠΈ:

Π¨Π°Π³ 11
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π’Π΅ΠΊΡΡ (Text Type Tool)Β (T) Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅:

Π€ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
ΠΠ²ΡΠΎΡ: webdesign
photoshop-master.ru
ΠΠ°ΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ½ΠΎΠΏΠΊΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ³ΡΠ°ΡΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΎΠ»Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ Π²Π΅Π±-ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³Π΅. Π ΡΡΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ ΠΈ Π±ΡΡΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²Π°ΠΆΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π‘ΠΊΠ°ΡΠ°ΡΡ PSD
Π¨Π°Π³ 1
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ Π²ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡΡΠΈ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠ½Ρ.
ΠΡΠΊΡΠΎΠΉΡΠ΅ Photoshop, ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π½ΠΎΠ²ΡΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΠΏΠ°Π½Π΅Π»Ρ ΡΠ»ΠΎΠ΅Π² ΠΈ Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡ Alt, Π΄Π²Π°ΠΆΠ΄Ρ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΌΡΡΡΡ Π½Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ»ΠΎΠ΅ Π΄Π»Ρ ΡΠ°Π·Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΠ΅Π² ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈΠ»Ρ Gradient Overlay (Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°).
Π¨Π°Π³ 2
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ Π½Π°ΡΠ½Π΅ΠΌ ΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π΅ ΠΎΠΊΡΡΠ³Π»ΡΠ΅ ΡΠΎΡΠΌΡ Rectangle. Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π΄ΠΈΡΡ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 200px. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ»Π°Π²ΠΈΡΡ Alt ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΌΡΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (Π² ΡΠΎΡΠΊΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡΠΈΡ
) ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
Π¨Π°Π³ 3
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ ΠΏΠ΅ΡΠ²ΡΡ ΡΠΎΡΠΌΡ, ΠΏΠΎΠ²ΡΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΡΠ΅ΡΡ Π΅ΡΠ΅ ΡΠ°Π·, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΡΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅.
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ°Π²Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°ΡΠΌΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ (ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ ΠΊΡΠ°ΡΠ½ΡΠΌ).
Π¨Π°Π³ 4
ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΡΡ ΡΠΎΡΠΌΡ ΠΈ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΏΠ°Π½Π΅Π»Ρ layerstyles (ΡΡΠΈΠ»Ρ ΡΠ»ΠΎΡ) ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ:
Π¨Π°Π³ 5
Π’Π΅ΠΏΠ΅ΡΡ, Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΌΠ΅Π½ΡΡΡΡ ΡΠΎΡΠΌΡ ΠΈ, ΠΎΡΠΊΡΡΠ² ΠΏΠ°Π½Π΅Π»Ρ layerstyles (ΡΡΠΈΠ»Ρ
ΡΠ»ΠΎΡ), ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ:
Π¨Π°Π³ 6
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΡΡΠΈ Π³ΠΎΡΠΎΠ²Π°. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π’Π΅ΠΊΡΡ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΠΈΡΡ Bebas Neue. ΠΠ²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΏΠΎΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
makoveckij.ru
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ, Π½ΠΎ Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
ΠΠ»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π»ΡΡΡΠ΅ ΡΠ²Π΅ΡΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π·Π½Π°ΡΠΊΠΈ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΡΒ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΎΠ΄ΠΎΠ±Π½ΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΎΡΠ΅Π½Ρ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ Π²Β ΠΊΠΎΠ΄ CSS Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.Β ΠΡΠΈ ΠΊΠΎΠ΄Ρ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² ΡΠ°Π·Π½ΡΡ ΠΌΠ΅ΡΡΠ°Ρ , Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎΒ ΡΡΠΎΠΊΠ°:Β
Β
Β
Π ΡΡΠΈΡ ΡΠΏΠΈΡΠΊΠ°Ρ ΠΌΡ ΡΠΌΠΎΠ³Π»ΠΈ Π½Π°ΠΉΡΠΈ ΡΠ°Π·Π½ΡΠ΅ ΠΊΠΎΠ΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ Π½Π°Β Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΆΠ΅ Π²ΡΠ±ΡΠ°Π½Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ, ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ΄ CSS ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :before Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΒ ΠΊΠ»Π°ΡΡΠ°.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΒ ΡΠ°Π±ΠΎΡΡ
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅Β ΠΊΠ½ΠΎΠΏΠΊΠΈΒ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡΒ CSS3.
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΊΠΎΠ΄ CSS Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉΒ Π½ΠΈΠΆΠ΅:
.buttons { display: inline-block; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */ border: 1px solid #a1a1a1; padding: 0 2em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; border-radius: .2em; }Β
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°Β :beforeΒ
ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΒ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :before, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅Β ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΡΠ΅, ΡΡΠΎΒ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅ΠΉΡΠ°Ρ,Β β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :beforeΒ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΊΠΎΠ΄ CSS Π½ΠΈΠΆΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°Β Β :before:
.buttons:before { float: left; width: 1em; text-align: center; font-size: 1.7em; margin: 0 0.5em 0 -1em; padding: 0 .2em; pointer-events: none; }Β
Π’Π΅ΠΏΠ΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Β ΠΊΠΎΠ΄ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΒ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°Π΄Π°Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ :before, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΊΠ»Π°ΡΡΡ CSS Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Ρ ΠΎΡΠΈΠΌΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΠΈΠΆΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π½Π°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌΒ CSS.
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΒ ΡΠΎΡΠΌΠ°ΠΌΠΈ
ΠΠ½ΠΎΠΏΠΊΠ°, ΠΠΎΠ±Π°Π²ΠΈΡΡ, Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ, Π£Π΄Π°Π»ΠΈΡΡ, Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ, ΠΠΈΡΡΠΌΠΎ,Β ΠΡΠ΅ΡΡ.
ΠΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»ΡΒ ΡΠΎΡΠΌ:
/*Forms*/ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718";} .save:before { content: "\2714";} .email:before { content: "\2709";} .cross:before { content: "\2716"; }Β
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΒ Π²Π°Π»ΡΡΠ°ΠΌΠΈ
ΠΠΎΠ»Π»Π°Ρ, ΠΠ²ΡΠΎ, Π¦Π΅Π½Ρ,Β Π€ΡΠ½Ρ.Β
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ Π²Π°Π»ΡΡ Π½Π°Β ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ :
/*Currency*/ .dollar:before { content:"\0024"; } .euro:before { content:"\20AC"; } .pound:before { content: "\00A3"; } .cent:before { content: "\20B5"; }Β
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΒ ΡΠ΅ΠΌΠΏΠ΅ΡΠ°ΡΡΡΠΎΠΉ
Π¦Π΅Π»ΡΡΠΈΠΉ,Β Π€Π°ΡΠ΅Π½Π³Π΅ΠΉΡ
ΠΠ»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Π΄Π»Ρ ΡΠ΅ΠΌΠΏΠ΅ΡΠ°ΡΡΡΡ ΠΏΠΎ Π¦Π΅Π»ΡΡΠΈΡ ΠΈΒ Π€Π°ΡΠ΅Π½Π³Π΅ΠΉΡΡ:
/*Temp*/ .celsius:before { content: "\2103"; } .fahrenheit:before { content: "\2109"; }Β
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈΒ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ
Π§ΠΈΡΠ»ΠΎ ΠΏΠΈ, ΠΎΠ΄Π½Π° ΡΡΠ΅ΡΡ, Π΄Π²Π΅ ΡΡΠ΅ΡΠΈ, ΠΎΠ΄Π½Π° ΠΏΡΡΠ°Ρ, Π΄Π²Π΅ ΠΏΡΡΡΡ , ΡΡΠΈ ΠΏΡΡΡΡ , ΡΠ΅ΡΡΡΠ΅ ΠΏΡΡΡΡ , ΠΎΠ΄Π½Π° ΡΠ΅ΡΡΠ°Ρ, ΠΏΡΡΡ ΡΠ΅ΡΡΡΡ , ΠΎΠ΄Π½Π° Π²ΠΎΡΡΠΌΠ°Ρ, ΡΡΠΈ Π²ΠΎΡΡΠΌΡΡ , ΠΏΡΡΡ Π²ΠΎΡΡΠΌΡΡ , ΡΠ΅ΠΌΡ Π²ΠΎΡΡΠΌΡΡ , ΡΠ΅ΡΠ²Π΅ΡΡΡ, ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π°, ΡΡΠΈΒ ΡΠ΅ΡΠ²Π΅ΡΡΠΈ.
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ², ΡΡΠΎ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π½Π°ΠΌΒ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ:
/*Math & Factions*/ .pi:before { content: "\213C"; } .one_thrid:before { content: "\2153"; } .two_thrid:before { content: "\2154"; } .one_fifth:before { content: "\2155"; } .two_fifth:before { content: "\2156"; } .three_fifth:before { content: "\2157"; } .four_fifth:before { content: "\2158"; } .one_sixth:before { content: "\2159"; } .five_sixth:before { content: "\215A"; } .one_eighth:before { content: "\215B"; } .three_eighth:before { content: "\215C"; } .five_eighth:before { content: "\215D"; } .seven_eighth:before { content: "\215E"; } .quarter:before { content: "\00BC"; } .half:before { content: "\00BD"; } .three_quarter:before { content: "\00BE"; }Β
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΒ ΡΡΡΠ΅Π»ΠΎΡΠΊΠ°ΠΌΠΈ
Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²Π»Π΅Π²ΠΎ, Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²Π²Π΅ΡΡ , Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²ΠΏΡΠ°Π²ΠΎ, Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²Π½ΠΈΠ·, Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²Π»Π΅Π²ΠΎ Π²Π²Π΅ΡΡ , Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²ΠΏΡΠ°Π²ΠΎ Π²Π²Π΅ΡΡ , Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²Π»Π΅Π²ΠΎ Π²Π½ΠΈΠ·, Π‘ΡΡΠ΅Π»ΠΎΡΠΊΠ° Π²ΠΏΡΠ°Π²ΠΎ Π²Π½ΠΈΠ·,Β ΠΠ°Π»Π΅Π΅.
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΠΏΡΒ ΡΡΡΠ΅Π»ΠΎΡΠ΅ΠΊ:
/*Arrows*/ .next:before { content: "\279C"; } .left_arrow:before { content: "\2190"; } .up_arrow:before { content: "\2191"; } .right_arrow:before { content: "\2192"; } .down_arrow:before { content: "\2193"; } .up_left_arrow:before { content: "\2196"; } .up_right_arrow:before { content: "\2197"; } .down_left_arrow:before { content: "\2199"; } .down_right_arrow:before { content: "\2198"; }
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈΒ ΡΠΈΠΌΠ²ΠΎΠ»Π°ΠΌΠΈ
ΠΡΠ°Π²ΠΈΡΡΡ, ΠΠ²Π΅Π·Π΄Π°, ΠΡΠΊΡΠ°, ΠΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ, Π‘Π½Π΅Π³, Π§Π΅ΡΠ½ΠΎΠ΅ ΡΠΎΠ»Π½ΡΠ΅, ΠΠ±Π»Π°ΠΊΠΎ, ΠΠΎΠ½Ρ, Π‘Π½Π΅Π³ΠΎΠ²ΠΈΠΊ, Π§Π΅ΡΠ½Π°Ρ Π·Π²Π΅Π·Π΄Π°, ΠΠ΅Π»Π°Ρ ΠΠ²Π΅Π·Π΄Π°, Π§Π΅ΡΠ½ΡΠΉ ΡΠ΅Π»Π΅ΡΠΎΠ½, ΠΠΎΡΠΎΠΉ ΠΊΡΠ΅ΡΡ, ΠΠΎΡΡΡΠΈΠΉ Π½Π°ΠΏΠΈΡΠΎΠΊ, Π§Π΅ΡΠ΅ΠΏ, Π Π°Π΄ΠΈΠΎΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, ΠΠΈΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ, ΠΠΈΡ, ΠΠ½Ρ ΠΈΒ Π―Π½, Π₯ΠΌΡΡΠΎΠ΅ Π»ΠΈΡΠΎ, Π£Π»ΡΠ±Π°ΡΡΠ΅Π΅ΡΡ Π»ΠΈΡΠΎ, ΠΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ²Π΅ΡΡΡ Π»ΡΠ½Ρ, ΠΠΎΡΠ»Π΅Π΄Π½ΡΡ ΡΠ΅ΡΠ²Π΅ΡΡΡ Π»ΡΠ½Ρ, ΠΠ½Π²Π°Π»ΠΈΠ΄Π½Π°Ρ ΠΊΠΎΠ»ΡΡΠΊΠ°, ΠΠ΅ΡΠ΅ΡΠ°Π±ΠΎΡΠΊΠ°,Β ΠΠ΅ΡΠ΅ΡΠ°Π±ΠΎΡΠΊΠ° Π½Π° ΡΠ΅ΡΠ½ΠΎΠΌ ΡΠΎΠ½Π΅, ΠΠΎΡΠ°, ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅, ΠΡΠΆΡΠΊΠΎΠΉ ΠΈ ΠΆΠ΅Π½ΡΠΊΠΈΠΉ ΡΠΈΠΌΠ²ΠΎΠ»Ρ,Β ΠΠΎΠΆΠ½ΠΈΡΡ.
ΠΠ½Π°ΡΠΊΠΎΠ² ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ, Π½Π°ΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈΒ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
/*Symbols*/ .like:before { content: "\2764"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; } .watch:before { content: "\231A"; } .blacksun:before { content: "\2600"; } .cloud:before { content: "\2601"; } .umbrella:before { content: "\2602"; } .snowman:before { content: "\2603"; } .blackstar:before { content: "\2605"; } .whitestar:before { content: "\2606"; } .blackphone:before { content: "\260E"; } .whitephone:before { content: "\260F"; } .saltire:before { content: "\2613"; } .hot_drink:before { content: "\2615"; } .skull:before { content: "\2620"; } .radioactive:before { content: "\2622"; } .biohazard:before { content: "\2623"; } .peace:before { content: "\262E"; } .yingyang:before { content: "\262F"; } .frowning_face:before { content: "\2639"; } .smiling_face:before { content: "\263A"; } .first_quarter_moon:before { content: "\263D"; } .last_quarter_moon:before { content: "\263E"; } .wheelchair:before { content: "\267F"; } .recycle:before { content: "\267D"; } .recycle2:before { content: "\267C"; } .music_note:before { content: "\266C"; } .warning:before { content: "\26A0"; } .male_and_female:before { content: "\26A4"; } .scissors:before { content: "\2701"; } .airplane:before { content: "\2708"; } .snow:before { content: "\2042"; }
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π·Π½Π°ΡΠΊΠΈ Π²Β Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΠ²ΡΠΎΡ ΡΡΠΎΠΊΠ° PaulΒ Underwood
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
www.dejurka.ru
Leave a Comment