ΠΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML β ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΠ° Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
ΠΡΠ΅ΠΆΠ΄Π΅, ΡΠ΅ΠΌ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π° Π²ΠΎΠΏΡΠΎΡ Β«ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML?Β», ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π½Π΅ ΡΡΠΎΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»ΡΡΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ ΡΠ΅ΡΡΡΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, Π½ΠΎ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ PNG, GIF ΠΈ JPEG, Π° Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΡ ΡΠ°Π±ΠΎΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ β Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Adobe Photoshop, ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΉ Π±ΠΎΠ³Π°ΡΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ Π²Π°ΠΆΠ½ΡΠΌ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
- ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML?
- ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML
- Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML
- ΠΠ°ΡΡΠΈΠ½ΠΊΠ°-ΡΡΡΠ»ΠΊΠ°
- ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² HTML?
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅Π³:
<img src=βxxxβ>,
Π³Π΄Π΅ xxx β Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΡΠ΅Π³ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ:
<img src=βimage.pngβ>
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΊΠΎΡΠΎΡΡΠ½ΠΎΠΉ ΠΈ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ Π΄ΠΎΠ±ΡΠ°Π»ΡΡ Π΅ΡΡ Π½Π΅ Π²ΠΎ Π²ΡΠ΅ ΡΠ³ΠΎΠ»ΠΊΠΈ Π·Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠ°, ΠΈ Π±ΡΠ²Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΡΡΡ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ. ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ½ΡΡΠΈΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ½ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΠΌΠΎΠΌΠ΅Π½Ρ Π΅Π³ΠΎ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ, Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ»ΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ°Π±ΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Β«Π±Π΅Π· ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊΒ». ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΎΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° alt ΡΠ΅Π³Π° <img>.
ΠΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΊ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</title> </head> <body> <p><img src="images/example.png" alt="ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ"></p> </body> </html>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ΅Π³ΠΈ height ΠΈ width, Π³Π΄Π΅ height β Π²ΡΡΠΎΡΠ°, Π° width β ΡΠΈΡΠΈΠ½Π°, ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΠΌΡΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ½Π°ΡΠ°Π»Π° Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΏΠΎΠ΄Π³ΠΎΡΠ°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ°ΠΌΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
Π ΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, Π° Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ , ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ height ΠΈ width Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π·Ρ, Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΡΠΎΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ (ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π΅Π½ ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ), ΡΠ°ΠΊ ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ (ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<img src=βexample.pngβ width=β60β height=β40β>
ΠΈΠ»ΠΈ
<img src=βexample.pngβ width=β50%β height=β10%β>
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π² ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² (ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ), Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΠΈΡ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅.
ΠΠ°ΠΊ ΠΈ ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΡΠ΅Π³Π°ΠΌ HTML, ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡ align, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
<img src=βexample.pngβ align=βtopβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π²ΡΡΠ΅ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample.pngβ align=βbottomβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample.pngβ align=βleftβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample.pngβ align=βrightβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°.
Π HTML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π³ <a>:
<a href=βΠ°Π΄ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠΈβ>ΠΠΌΡ ΡΡΡΠ»ΠΊΠΈ</a>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΡΡΠ»ΠΊΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ΅Π³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ΅Π³ΠΎΠΌ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<a href=βΠ°Π΄ΡΠ΅Ρ ΡΡΡΠ»ΠΊΠΈβ><img src=βΠ°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈβ></a>
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π²ΡΡΠ°Π²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠ΅ΡΠ΅Π°Π΄ΡΠ΅ΡΠΎΠ²ΡΠ²Π°ΡΡ Π½Π° Π»ΡΠ±ΠΎΠΉ Π°Π΄ΡΠ΅Ρ, Π·Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΠΏΠΎΠ»Π½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π½ΠΎ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ. ΠΠ»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π² ΡΠ΅Π³Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ background=βxxxβ, Π³Π΄Π΅ xxx β Π°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π²ΡΡΠ΅.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΊΡΡ ΡΠ΅ΠΊΡΡΡΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠΎΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ°ΠΏΠΊΠ΅ Ρ Π·Π°Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π·Π°ΡΠ°Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
<html> <head><title>Π‘ΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ</head></title> <body background=βimage.jpgβ> <h2> Π€ΠΎΠ½ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. </h2> </body> </html>
Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π·Π°Π΄Π°Π½Π°.
ΠΠ° ΡΡΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ΅Π³Π°Ρ ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°Ρ , Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° HTML ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°, ΠΈΡΡΠ΅ΡΠΏΠ°Π½Π°.
ΠΠ΅Π»Π°Π΅ΠΌ ΡΠ΄Π°ΡΠΈ!
ΠΠΈΡΠ°Π»ΠΈΠΉ Π§Π΅ΡΠΊΠ°ΡΠΎΠ²Π°Π²ΡΠΎΡ
ΠΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML β ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΠ° Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ²
ΠΡΠ΅ΠΆΠ΄Π΅, ΡΠ΅ΠΌ ΠΎΡΠ²Π΅ΡΠΈΡΡ Π½Π° Π²ΠΎΠΏΡΠΎΡ Β«ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML?Β», ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π½Π΅ ΡΡΠΎΠΈΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»ΡΡΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ ΡΠ΅ΡΡΡΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, Π½ΠΎ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ PNG, GIF ΠΈ JPEG, Π° Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΡ ΡΠ°Π±ΠΎΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ β Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Adobe Photoshop, ΠΎΠ±Π»Π°Π΄Π°ΡΡΠΈΠΉ Π±ΠΎΠ³Π°ΡΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π΄Π»Ρ ΡΠΆΠ°ΡΠΈΡ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ Π²Π°ΠΆΠ½ΡΠΌ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ.
- ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML?
- ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML
- Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² HTML
- ΠΠ°ΡΡΠΈΠ½ΠΊΠ°-ΡΡΡΠ»ΠΊΠ°
- ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² HTML?
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ΅Π³:
<img src=βxxxβ>,
Π³Π΄Π΅ xxx β Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΡΠ΅Π³ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ:
<img src=βimage.pngβ>
ΠΠ΄Π½Π°ΠΊΠΎ ΡΠΊΠΎΡΠΎΡΡΠ½ΠΎΠΉ ΠΈ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ Π΄ΠΎΠ±ΡΠ°Π»ΡΡ Π΅ΡΡ Π½Π΅ Π²ΠΎ Π²ΡΠ΅ ΡΠ³ΠΎΠ»ΠΊΠΈ Π·Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠ°, ΠΈ Π±ΡΠ²Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΡΡΡ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ. ΠΠ»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°Π΅Π² ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ½ΡΡΠΈΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ½ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΠΌΠΎΠΌΠ΅Π½Ρ Π΅Π³ΠΎ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ, Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ»ΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ°Π±ΠΎΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Β«Π±Π΅Π· ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊΒ». ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΎΠ½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° alt ΡΠ΅Π³Π° <img>.
ΠΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΊ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ</title> </head> <body> <p><img src="images/example.png" alt="ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ"></p> </body> </html>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ΅Π³ΠΈ height ΠΈ width, Π³Π΄Π΅ height β Π²ΡΡΠΎΡΠ°, Π° width β ΡΠΈΡΠΈΠ½Π°, ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΠΌΡΠ΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠ½Π°ΡΠ°Π»Π° Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΏΠΎΠ΄Π³ΠΎΡΠ°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ±ΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠ°ΠΌΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
Π ΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ, Π° Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ , ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ.
ΠΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ height ΠΈ width Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π·Ρ, Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΡΠΎΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ (ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π΅Π½ ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ), ΡΠ°ΠΊ ΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ (ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΊΡΠ°Π½Π°).
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
<img src=βexample.pngβ width=β60β height=β40β>
ΠΈΠ»ΠΈ
<img src=βexample.pngβ width=β50%β height=β10%β>
Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π² ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΈ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² (ΡΠΈΡΠΈΠ½Ρ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΡ), Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΠΈΡ Π² Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅.
ΠΠ°ΠΊ ΠΈ ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΡΠ΅Π³Π°ΠΌ HTML, ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ Π°ΡΡΠΈΠ±ΡΡ align, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
<img src=βexample.pngβ align=βtopβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π²ΡΡΠ΅ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample.pngβ align=βbottomβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample. pngβ align=βleftβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°;
<img src=βexample.pngβ align=βrightβ> β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ°.
Π HTML Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ»ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π³ <a>:
<a href=βΠ°Π΄ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠΈβ>ΠΠΌΡ ΡΡΡΠ»ΠΊΠΈ</a>
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΡΡΠ»ΠΊΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ΅Π³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ΅Π³ΠΎΠΌ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
<a href=βΠ°Π΄ΡΠ΅Ρ ΡΡΡΠ»ΠΊΠΈβ><img src=βΠ°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈβ></a>
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π²ΡΡΠ°Π²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠ΅ΡΠ΅Π°Π΄ΡΠ΅ΡΠΎΠ²ΡΠ²Π°ΡΡ Π½Π° Π»ΡΠ±ΠΎΠΉ Π°Π΄ΡΠ΅Ρ, Π·Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π² ΠΏΠΎΠ»Π½ΠΎΠΌ ΠΈΠ»ΠΈ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π½ΠΎ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ. ΠΠ»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΊΠ°ΠΊ ΡΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π² ΡΠ΅Π³Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ background=βxxxβ, Π³Π΄Π΅ xxx β Π°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π²ΡΡΠ΅.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΊΡΡ ΡΠ΅ΠΊΡΡΡΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠΎΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠ°ΠΏΠΊΠ΅ Ρ Π·Π°Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π·Π°ΡΠ°Π½Π΅Π΅ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ:
<html> <head><title>Π‘ΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ</head></title> <body background=βimage.jpgβ> <h2> Π€ΠΎΠ½ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ. </h2> </body> </html>
Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π·Π°Π΄Π°Π½Π°.
ΠΠ° ΡΡΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠ΅Π³Π°Ρ ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°Ρ , Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° HTML ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°, ΠΈΡΡΠ΅ΡΠΏΠ°Π½Π°.
ΠΠ΅Π»Π°Π΅ΠΌ ΡΠ΄Π°ΡΠΈ!
ΠΠΈΡΠ°Π»ΠΈΠΉ Π§Π΅ΡΠΊΠ°ΡΠΎΠ²Π°Π²ΡΠΎΡ
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ style.top ΠΈ style.left Π² JavaScript
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² style.left
ΠΈ style.top
Π² JavaScript. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ. ΠΠΎΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΡΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.document.getElementById('i1').style.left="200px"; document.getElementById('i1').style.top="100px";ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, ΠΌΡ ΠΏΠΎΠΏΡΡΠ°Π΅ΠΌΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π΄Π²ΠΈΠΆΡΡΠ΅Π³ΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β
ΠΠΎΠ΄ Π·Π΄Π΅ΡΡ
<Π³ΠΎΠ»ΠΎΠ²Π°>ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ style. top ΠΈ style.left