ΠΠΎΠ΄ css Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ. Π’Π΅Π³ΠΈ HTML Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² HTML
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ!!! ΠΠΎ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ. ΠΡΠΎ Π²ΠΎΠ²ΡΠ΅ Π½Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΠΎ Π²Π½Π°ΡΠ°Π»Π΅ Ρ Π±Ρ Ρ ΠΎΡΠ΅Π» Π²Π°ΠΌ Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π‘ΠΎΠ²Π΅Ρ: ΠΊΠΎΠ³Π΄Π° Π±ΡΠ΄Π΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ ΡΠ²Π»Π΅ΠΊΠ°ΠΉΡΠ΅ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎ ΠΎΡΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»Ρ ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ — ΡΠ΅ΠΊΡΡΠ°. ΠΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠΊΠ°Ρ
ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΈΡΠ°ΡΡ , Π° Π²Π·ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ .
ΠΡΠΈΡΡΡΠΏΠΈΠΌ.
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² html?
Π’Π°ΠΊ, ΠΊΠ°ΠΊ Ρ Π³ΠΎΠ²ΠΎΡΠΈΠ» — Π·Π΄Π΅ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅Ρ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ html ΠΊΠΎΠ΄.
kartinka
— ΡΡΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
jpg
— ΡΡΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ gif, png, bmp.
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π° Π² ΠΏΠ°ΠΏΠΊΠ΅ images, ΡΠΎΠ³Π΄Π° ΠΏΡΡΡ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ:
images — Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΏΠΊΠΈ, Π³Π΄Π΅ Π»Π΅ΠΆΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° «kartinka.
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π»Π΅ΠΆΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΡΠΎΠ³Π΄Π° ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ:
https://www.ΡΠ°ΠΉΡ — ΡΡΠΎ Π°Π΄ΡΠ΅Ρ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ :
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² htmlΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΊΠ»ΡΡΠΈΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ:
ΠΡΡΠΈΠ±ΡΡΡ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ
ALIGN
— ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
left — Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ ΡΠΏΡΠ°Π²Π°.
right — Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΡΠ΅ΠΊΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π΅Ρ ΡΠ»Π΅Π²Π°.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ
HSPACE
— ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
).
VSPACE
— ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ (Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
HEIGHT
— Π²ΡΡΠΎΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
).
WIDTH
— ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
).
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
TITLE — ΡΡΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ, Π΅ΡΠ»ΠΈ Π½Π°Π²Π΅ΡΡΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΊΠΈ.
title=»ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ — ΡΠ°ΠΉΡ!!! «>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
BORDER — ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΌΠΊΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. Π Π°ΠΌΠΊΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ΄Π΅Π»Π°Π΅ΡΠ΅ ΡΡΡΠ»ΠΊΠΎΠΉ. ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½ΡΠ»Π΅Π²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° BORDER , ΡΠ°ΠΌΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
Π Π΅ΡΠ»ΠΈ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ border Π½Π° 5:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ :
ΠΡΠ±ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ΠΎΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΡΠ΅Π³Π΅ body ΠΏΡΠΎΠΏΠΈΡΠΈΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ background .
ΠΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΡΠ½ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡ.
ΠΡΠΈΠΌΠ΅Ρ :
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ-ΡΠΊΠΎΡΡ Π² htmlΠ Π΅Π·ΡΠ»ΡΡΠ°Ρ :
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΊΠ°ΠΊ ΡΠΎΠ½
ΠΠ° ΡΡΠΎΠΉ Π½ΠΎΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΈ Π·Π°ΠΊΠΎΠ½ΡΠΈΡΡ ΡΠ΅ΠΌΡ «ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML», Π½ΠΎ Π·Π½Π°Ρ, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ Π²ΠΎΠΏΡΠΎΡ, Π° ΠΊΠ°ΠΊ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
ΠΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΡΠ½ΠΎ Π²ΡΠ΅. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΡΠΎΠΊΡ.
ΠΠ° Π²ΡΡΠ°Π²ΠΊΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π² HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠ΅Π³ ΠΈ Π΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡΡ, Π³Π»Π°Π²Π½ΡΠΌ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ src , Π·Π°Π΄Π°ΡΡΠΈΠΉ Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°ΡΡ, Π³Π΄Π΅ Π²Π·ΡΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ ΡΠ»ΡΡΠ°ΠΉ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ image.png ΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ):
Π Π°Π½ΡΡΠ΅ Ρ ΡΠ΅Π³Π° Π±ΡΠ» Π΅ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ — alt , Π½ΠΎ Ρ ΠΏΡΠΈΡ ΠΎΠ΄ΠΎΠΌ HTML 5 ΠΎΠ½ Π±ΡΠ» ΠΏΠ΅ΡΠ΅Π²Π΅Π΄ΡΠ½ Π² ΡΠ°Π·ΡΡΠ΄ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ . alt ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ²ΠΈΠ΄ΠΈΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π²Π΄ΡΡΠ³ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ. ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΎΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΡΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠ°Ρ .
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΡΠΎ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ Π² ΠΏΠΎΠ»Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π° Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π°. Π ΡΡΠ°ΡΡΡΡ, ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΈΡΡΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² width (ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ) ΠΈ height (ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²ΡΡΠΎΡΡ). Π Π°Π·ΠΌΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ Π»ΠΈΠ±ΠΎ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , Π»ΠΈΠ±ΠΎ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ . ΠΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΎΡΠ΅Π½Ρ ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΡΡΠΈΡΡΠ²Π°ΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π±Π·Π°ΡΠ°, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡΠ°Π²Π»Π΅Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°).
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π½Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ image.png Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ Β«ΠΡΠΎΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Β», ΡΠΈΡΠΈΠ½ΠΎΠΉ 420 ΠΈ Π΄Π»ΠΈΠ½ΠΎΠΉ 280 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ΄ Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ:
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΠ°ΡΡΠ°
Π ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΡΡΠ»ΠΊΠΎΠΉ, ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ HTML ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½Π΅ ΠΎΠ΄Π½Ρ ΡΡΡΠ»ΠΊΡ, Π° ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΡΠ»ΠΊΠ°Ρ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΠΌΠ΅ΡΡΠ° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎ ΡΠ°Π·Π½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-Π°Π΄ΡΠ΅ΡΠ°ΠΌ. ΠΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΡΠΎΠ² ΠΈΠ»ΠΈ Π½Π°Π³Π»ΡΠ΄Π½ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½Π½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ) ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ:
- — ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΡΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- — ΡΠ΅Π³ Π²Π½ΡΡΡΠΈ , ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΠΎΠ΄Π½Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ° ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΠΊΡΠΈΠ²Π½ΡΡ
ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ. Π‘Π²ΡΠ·ΠΊΠ° — ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠ²ΡΠ·ΠΊΠΈ
- shape — Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° , Π·Π°Π΄Π°ΡΡΠΈΠΉ ΡΠΎΡΠΌΡ ΡΡΡΠ»ΠΊΠΈ. ΠΠΊΡΠΈΠ²Π½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΊΡΡΠ³Π°.
- cords — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠΉ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡ. Π’Π°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ ΡΠ΅Π³Ρ . ΠΠ»Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡΠ³Π»ΠΎΠ², Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° — ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π²Π΅ΡΡΠΈΠ½, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΊΡΡΠ³, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π΅Π³ΠΎ ΡΠ΅Π½ΡΡΠ° ΠΈ ΡΠ°Π΄ΠΈΡΡ.
- usemap — Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° img , ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΊΠ°ΡΡΠΎΠΉ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π΅ΠΌΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΡΡΠΎ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½Π° ΠΊΠ°ΡΡΠ° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠ΅ΠΌ Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ, ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΡΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ map.jpg . ΠΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π΅ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ. Π©Π΅Π»ΡΠΎΠΊ Π½Π° Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ (Π·Π΅Π»ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ) ΠΎΡΠΊΡΠΎΠ΅Ρ ΡΠ°ΠΉΡ Β«ΠΠ΄Π½ΠΎΠΊΠ»Π°ΡΡΠ½ΠΈΠΊΠΈΒ», Π½ΠΈΠΆΠ½ΡΡ ΠΆΠ΅ ΡΠ°ΡΡΡ (ΡΠΈΠ½ΠΈΠΉ ΡΠ²Π΅Ρ) Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ Π½Π° Β«ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅Β». Π‘ΡΡΠ»ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅. ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π³ΠΈ.
1. ΠΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΊ Π±ΡΠ΄ΡΡΠ΅ΠΉ ΠΊΠ°ΡΡΠ΅ (ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ social), Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΏΠΈΡΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
2. ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΈΠΌ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² Paint, Photoshop ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΌ Π΄ΡΡΠ³ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΠΎ: ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΈ ΡΠ°Π²Π½Ρ ΠΈ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ (114 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) ΠΈ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ (384 ΠΏΠΈΠΊΡΠ΅Π»Ρ).
3. ΠΠ°ΡΠΈΠ½Π°Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ°ΡΡΡ: ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ΅Π³ ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ name Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° usemap ΡΠ°ΠΌΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ:
4. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² area ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ:
5. ΠΠ°ΠΊΡΡΠ²Π°Π΅ΠΌ ΠΊΠ°ΡΡΡ:
ΠΡΠΎΠ³ΠΎΠΌ ΡΠ°Π±ΠΎΡΡ ΡΡΠ°Π»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, ΡΠ΅Π»ΡΠΎΠΊ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°ΡΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Π΅Π΄ΡΡ ΠΊ ΠΎΡΠΊΡΡΡΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ, ΠΈ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠΉ HTMLΠΊΠΎΠ΄:
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΠ°ΡΡΠ°ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΡΠ» ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ, ΠΎΠ½ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΊΠ°ΡΡ. ΠΠ°Π»ΡΡΠ΅ — Π΄Π΅Π»ΠΎ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ HTML Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΡΠ»ΠΎΠΆΠ½ΡΠ΅ΡΡΡ.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ Π²Π½ΡΡΡΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ Π²ΠΈΠ΄ΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ , ΡΠΎΠΆΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π°Π΄ΡΠ΅Ρ ΡΠΌΠ°ΠΉΠ»ΠΈΠΊΠ° Π² ΡΠΎΡΠΌΠ°ΡΠ΅.gif:
Π Π²ΠΎΡ ΡΠΏΠΎΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ:
HTML: ΡΠ΅Π³ | |
---|---|
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif » alt=»ΡΠΌΠ°ΠΉΠ»ΠΈΠΊ»> | |
CSS: ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ | |
CSS: ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ | |
HTML: ΡΠ΅Π³ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ (Π±Π΅Π· URL) | |
CSS: Π±Π΅Π· URL | |
ΠΠ°ΠΊ ΡΠ·Π½Π°ΡΡ Π°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΠ°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ URL, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ.
Π ΠΈΡ.1 ΠΡΠ»ΠΈ Π½Π°Π²Π΅ΡΡΠΈ Π½Π° ΡΠΎΡΠΎ ΠΈ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, ΡΠΎ Π² Mozilla Firefox ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°ΠΊΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ - ΠΠ°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ (Π½Π° Π ΠΈΡ.1 cΠΌ. ΠΏΡΠ½ΠΊΡ Β«ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈΒ»; Π² Internet Explorer ΡΠΌ. ΠΏΡΠ½ΠΊΡ Β«Π‘Π²ΠΎΠΉΡΡΠ²Π°Β»), Π² ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π°Π΄ΡΠ΅Ρ ΡΠΈΡΡΠ½ΠΊΠ°,
- Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ ΠΏΡΠ½ΠΊΡΡ Β«ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡΒ».
Π ΠΈΡ.2 ΠΡΠ»ΠΈ Π² Mozilla Firefox Π½Π°Π²Π΅ΡΡΠΈ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ½ΠΊΡ Β«ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈΒ», ΡΠΎ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈΡ Π°Π΄ΡΠ΅Ρ, Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ (ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ alt), ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ ΠΌΠ°ΡΡΡΠ°Π± - ΠΠ°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ (Π½Π° Π ΠΈΡ. 1 cΠΌ. ΠΏΡΠ½ΠΊΡ Β«ΠΡΠΊΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅Β»). ΠΡΠΊΡΠΎΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΎΡΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡΠ΄Π΅Π»ΠΈΡΡ Π°Π΄ΡΠ΅Ρ ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΉΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°,
- Π½Π°ΠΆΠ°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Ctrl + C .
Π ΠΈΡ.3 Π’Π°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΠΌΠ°ΠΉΠ»ΠΈΠΊΠ°.
ΠΡ URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif - ΠΠ° ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ (ΡΠΌΠ°ΡΡΡΠΎΠ½, ΠΏΠ»Π°Π½ΡΠ΅Ρ) Π΄ΠΎΠ»Π³ΠΎ Π±Π΅Π· Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠ°Π»Π΅Ρ Π½Π°Π΄ ΡΠΎΡΠΎ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ (ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Β«ΠΡΠΎΡΠΌΠΎΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈΒ»). ΠΡΠΊΡΠΎΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΎΡΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ»Π³ΠΎ ΠΆΠ°ΡΡ Π½Π° Π°Π΄ΡΠ΅Ρ Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ ΠΈ Π²Π΅ΡΡ URL Π±ΡΠ΄Π΅Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ (Π² ΡΠ»ΡΡΠ°Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π²ΠΈΠ½ΡΡΡ Π½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅), ΡΡΠ»ΠΊΠ½ΡΡΡ Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΉΡΡ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡΒ».
- ΠΠ°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ. ΠΡΠΊΡΠΎΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΎΡΡ, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡΠ΄Π΅Π»ΠΈΡΡ Π°Π΄ΡΠ΅Ρ ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΉΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π°Π΄ΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° (ΡΠΌ. Π ΠΈΡ.3),
- Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ½ΠΊΡ Β«ΠΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡΒ».
- Π½Π°ΠΆΠ°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΊΠ»Π°Π²ΠΈΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ Ctrl + C .
ΠΠ°ΠΊ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΠ°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠΎΡΠΎ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ»Π°Π²ΠΈΡΡ ΠΌΡΡΠΊΠΈ, Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΡΠ»ΠΊΠ½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ (Π½Π° Π ΠΈΡ.1 cΠΌ. ΠΏΡΠ½ΠΊΡ Β«Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ…Β»), Π² ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΌΡΡ ΠΎΠΊΠ½Π΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΠ°ΠΏΠΊΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅, ΠΊΡΠ΄Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ½ ΡΠΈΡΡΠ½ΠΎΠΊ.
ΠΡΠ»ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΡΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ (ΡΠΌ. Π ΠΈΡ.3).
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
Π‘Π½Π°ΡΠ°Π»Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° Π½Π° Ρ ΠΎΡΡΠΈΠ½Π³ ΡΠ°ΠΉΡΠ°, Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡ (ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅, Google+ ΠΈ Ρ.ΠΏ.), Π―Π½Π΄Π΅ΠΊΡ.ΠΠΈΡΠΊ ΠΈΠ»ΠΈ ΠΡΠ³Π».ΠΠΈΡΠΊ , ΡΡΠΎΠ±Ρ Ρ ΡΠΈΡΡΠ½ΠΊΠ° ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΡΠ²ΠΎΠΉ Π°Π΄ΡΠ΅Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
ΠΡΠ»ΠΈ Π΅ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΡΠΎ ΠΎΡΠ΅ΡΡΠ΄Π½ΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ:
- ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΊΠΈ Π² ΡΠΎ ΠΌΠ΅ΡΡΠΎ, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ,
- Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ, ΠΏΠΎΡ ΠΎΠΆΡΡ Π½Π° ΠΈΠ»ΠΈ Π½Π° ,
- Π²ΡΠ±ΡΠ°ΡΡ ΡΠ°ΠΉΠ» Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°,
- Π΅ΡΠ»ΠΈ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ (ΠΎΠ½ ΠΆΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ).
ΠΡΠΎΠ³: ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΡΠ°Π²Π»Π΅Π½Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°, Π° ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ β Π·Π°Π³ΡΡΠΆΠ΅Π½Π° Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°. Π£ Π½Π΅Ρ ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠΉ Π°Π΄ΡΠ΅Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. Π ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«HTMLΒ» ΠΏΠΎΠΏΡΠ°Π²ΠΈΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ ΠΊΠΎΠ΄, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π½Π΅Π½ΡΠΆΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ, Π΄Π° ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ HTML ΠΈ CSS Π½Π΅ΡΡΠ°Π²Π½ΠΈΠΌΠΎ Π±ΠΎΠ»ΡΡΠΈΠ΅.
ΠΡΠ»ΠΈ URL ΡΠΆΠ΅ Π΅ΡΡΡ, Π½ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΌΠ°Π»ΠΎΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°, ΡΠΎ Π²ΡΡ ΠΆΠ΅ ΡΠ°ΠΊΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π»ΡΡΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, Π° ΠΏΠΎΡΠΎΠΌ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΡΠ°ΠΉΡΠ°, Π΅ΡΠ»ΠΈ Π΄Π°Π½Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π²Π»Π°Π΄Π΅Π»ΡΡΠ΅ΠΌ ΡΠΎΡΠΎ, Π΄Π°Π±Ρ Π½Π΅ Π½Π°ΡΡΡΠΈΡΡ Π°Π²ΡΠΎΡΡΠΊΠΈΠ΅ ΠΏΡΠ°Π²Π°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ
- Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΉΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π΄ΡΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠ°Ρ (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΏΡΠΎ Π·Π°ΠΏΡΠ΅Ρ Ρ ΠΎΡΠ»ΠΈΠ½ΠΊΠΈΠ½Π³Π° ).
- ΡΠ°ΠΉΡΡ Π½Π΅Π΄ΠΎΠ»Π³ΠΎΠ²Π΅ΡΠ½Ρ ΠΈ ΡΠΏΡΡΡΡ Π²ΡΠ΅ΠΌΡ Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ΠΌ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°, ΠΈΡΡΠ΅Π·Π½Π΅Ρ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, ΠΎΡΡΠ°Π²ΠΈΠ² Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅Π±Ρ Π² Π»ΡΡΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.
ΠΡΠ»ΠΈ Π½Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, ΡΠΎ ΠΎΡΠ΅ΡΡΠ΄Π½ΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ:
- ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠ°ΠΏΠΊΡ image ,
- ΡΠΎΠ·Π΄Π°ΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ image ΡΠ°ΠΉΠ».htaccess , ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ # Π·Π°ΠΊΡΡΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ http://ΡΠ°ΠΉΡ.ru/image/ Options -Indexes # Π·Π°ΠΊΡΡΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ http://ΡΠ°ΠΉΡ.ru/image/.htaccess order allow,deny deny from all
- Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π² ΠΏΠ°ΠΏΠΊΡ image ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, plain.gif (Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΠΌ Π²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π² ΡΡΡ ΠΏΠ°ΠΏΠΊΡ),
- Π½Π° HTML-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ URL Π²ΠΈΠ΄Π° http://ΡΠ°ΠΉΡ.ru/image/plain.gif , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, http://ΡΠ°ΠΉΡ.ru/image/plain.gif » alt=»ΡΠΌΠ°ΠΉΠ»ΠΈΠΊ»>
26.06.2015
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ!
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ ΡΡΠ΅ΡΠ΄Π½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ ΠΎΡΠ½ΠΎΠ²Ρ HTML.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML -Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ , ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΠΊΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π±ΡΠ΄Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ.
ΠΡΠ°ΠΊ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΠ΅, ΡΠ°ΠΊ ΠΈ ΠΎΠ±ΡΡΠ½ΡΠ΅. ΠΠ°ΠΊΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈ ΠΎΠ±ΡΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ?
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π°, Π½Π°Π²Π΅ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ΅ΠΊΡΡΠΎΠ²ΠΊΡ, ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Ρ.Π΄.
ΠΠ±ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡ ΠΎΡ ΡΠ΅Π±Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ (Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ΅ΠΊΡΡΠΎΠ²ΠΊΡ, ΡΠ°Π±Π»ΠΈΡΡ ΠΈ Ρ.Π΄.). ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΠΏΠΎΡΠΎΠΌ Π²ΡΠ΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅.
ΠΠ»Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ JPEG (JPG)
, GIF
ΠΈ PNG
.
β ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ Π² HTML
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΎΠ½ΠΎΠΌ, Π΄Π»Ρ ΡΠ΅Π³Π°
Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ Β«backgroundΒ» :Π’Π΅ΠΏΠ΅ΡΡ ΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΠ°ΠΉΠ» ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Β«fon.jpgΒ» ΡΡΠ΄ΡΡΠΊΠΎΠΌ Ρ HTML ΡΠ°ΠΉΠ»ΠΎΠΌ.
ΠΈ Π² HTML ΡΠ°ΠΉΠ» Π²ΡΡΠ°Π²ΡΡΠ΅ Π²ΠΎΡ ΡΡΠΎΡ ΠΊΠΎΠ΄:
Jpg»>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ:
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅
ΠΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅:
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅:
β ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML
Π§ΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ΅Π³ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ Β«srcΒ» , ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΡΡ ΠΈΠ»ΠΈ Π°Π΄ΡΠ΅Ρ ΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ»Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΡΡΠ°Π²ΡΡΠ΅ ΡΠ°ΠΉΠ» ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Β«kartinka.jpgΒ» ΡΡΠ΄ΡΡΠΊΠΎΠΌ Ρ HTML ΡΠ°ΠΉΠ»ΠΎΠΌ ΠΈ Π² HTML ΡΠ°ΠΉΠ»Π΅ ΠΏΡΠΎΠΏΠΈΡΠΈΡΠ΅ Π²ΠΎΡ ΡΡΠΎΡ ΠΊΠΎΠ΄:
ΠΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ HTML-ΡΡΡΠ°Π½ΠΈΡΠΊΠ° Π½Π° ΡΠ°ΠΉΡ ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΡΠΎ ΠΌΠΎΡ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π° ΡΠ°ΠΉΡ.Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ:
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ : Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π½Π° Π»Π°ΡΠΈΠ½ΠΈΡΠ΅, ΠΈΠ½Π°ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ.
ΠΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅:
ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅:
Π― Π΄ΡΠΌΠ°Ρ, Π²Ρ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Π²ΡΠ΅ ΠΏΠΎΠ½ΡΠ»ΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π²Π° ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΠΌΠ΅ΡΡΠ΅. Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ½, Π²ΡΡΠ°Π²ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ΅ΠΊΡΡ.
Jpg»>
β ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ Β« img Β» ΠΈΠ»ΠΈ Β« imagesΒ»?
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ Β«imgΒ» ΠΈΠ»ΠΈ Β«imagesΒ» , ΡΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΏΡΡΡ ΠΎΡ HTML ΡΠ°ΠΉΠ»Π° ΠΊ ΠΏΠ°ΠΏΠΊΠ΅ Β«imgΒ» ΠΈΠ»ΠΈ Β«imagesΒ» , Π° ΠΏΠΎΡΠΎΠΌ ΡΠΆΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡ ΡΠ°ΠΊ:
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³Π΅, ΡΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π°Π΄ΡΠ΅Ρ ΡΠ°ΠΉΡΠ° ΠΈ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ, ΠΏΠ°ΠΏΠΊΡ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. ΠΡ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π΅Π³ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠ΅Π΄ΡΠ΄ΡΡΠ°Ρ Π·Π°ΠΏΠΈΡΡ
Π‘Π»Π΅Π΄ΡΡΡΠ°Ρ Π·Π°ΠΏΠΈΡΡ
ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² html Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ .
ΠΡΠ»ΠΈ Π²ΡΠ΅ ΠΆΠ΅ Ρ Π²Π°Ρ Π½Π΅Ρ Notepad++ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π΅Π³ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ Π²Π°Ρ ΠΌΡΡΠ°Π΅Ρ Π²ΠΎΠΏΡΠΎΡ — ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² html Π² Π±Π»ΠΎΠΊΠ½ΠΎΡΠ΅?
ΠΡΠ²Π΅Ρ ΠΏΡΠΎΡΡ, ΡΠ°Π±ΠΎΡΠ° Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠ½ΠΎΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ Π»ΠΈΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ Π² Π½Π΅ΠΌ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° ΠΊΠΎΠ΄Π° ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ, Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΠΈ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° ΠΎΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² HTML ΡΡΡΠ°Π½ΠΈΡΠΊΡ
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΏΠΎ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΠ»ΠΈΠΊΡ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ°ΠΉΠ», ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΏΡΠ½ΠΊΡ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΡΠΌ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΏΠΎ Π½Π΅ΠΌΡ, Π΄Π°Π»Π΅Π΅ Β«Edit with Notepad++Β».
ΠΠ»Ρ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ΄Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π° ΡΠ΅ΡΡΠΎΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°.
Π§ΡΠΎΠ±ΡΠ²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² htmlΠΊΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΉ ΡΡΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π³img . ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΅Π³ΠΎ Π°ΡΡΠΈΠ±ΡΡ β ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΡΠΎΡΠΎ.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ°ΠΉΠ», Π½Π° ΠΆΠ΅ΡΡΠΊΠΎΠΌ, ΡΠ°ΠΊ ΠΈ ΡΡΡΠ»ΠΊΠ° Π½Π° ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π΅ Π² ΡΠ΅ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ±ΡΠ°ΠΌΠ»ΡΠ΅ΡΡΡ ΡΠ΅Π³Π°ΠΌΠΈp>p> .
ΠΠ»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠΎΡΠΎ, ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΊΡΡ ΡΡΡΠΎΠΊΡ:
.ΠΠΎΡ ΡΠ°ΠΊ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅:
Π Π²ΠΎΡ ΡΠ°ΠΊ Π΅Π΅ Π½Π°Π»ΠΈΡΠΈΠ΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
Src ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠ΄Π½ΠΎΠ³ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΉΠ» Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ html Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ.
ΠΡΠ»ΠΈ ΡΠΎΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΡΡΠ³ΠΎΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ, ΡΠΎ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΡΡ ΠΊ Π½Π΅ΠΌΡ, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΏΠ°ΠΏΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ html-ΡΠ°ΠΉΠ».
Π‘ΠΎΠ²Π΅Ρ! ΠΠ°ΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ, ΡΡΠΎ Π² ΠΏΡΡΠΈ ΠΊ Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ°ΠΉΠ»Ρ ΡΠΎΡΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΊΠΈΡΠΈΠ»Π»ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². Π ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΡΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»Π° Π²Π°ΠΆΠ΅Π½ ΡΠ΅Π³ΠΈΡΡΡ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ ΠΈΠ· ΡΠ΅ΡΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅, Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Π²ΠΈΠ½ΡΠ΅ΡΡΠ΅ΡΠ΅.
Π’Π°Π±Π»ΠΈΡΠ° ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΡΠΈ ΠΊ ΡΠ°ΠΉΠ»Ρ
Π§ΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π²Π° Π°ΡΡΠΈΠ±ΡΡΠ°:width ΠΈheight . ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠΎΡΠΌΠ»ΡΠ΅ΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°.
ΠΠΎΡΠ»Π΅ Π·Π½Π°ΠΊΠ° ΡΠ°Π²Π΅Π½ΡΡΠ²Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
ΠΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΠ΅ΡΠΊΠΎ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΎ Π² html ΠΏΠΎ ΡΠ΅Π½ΡΡΡ? ΠΠ»Ρ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ»ΡΠΆΠΈΡ align , ΠΎΡΠ½ΠΎΡΡΡΠΈΠΉ ΠΊ ΡΠ΅Π³Ρp .
ΠΠ»Ρ Π½Π΅Π³ΠΎ Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:center (ΡΠ΅Π½ΡΡ),left (Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ) ΠΈright (ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ).
ΠΠΎΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΏΡΠΈΠ»Π΅Π³Π°Π½ΠΈΠ΅ΠΌ ΠΊ ΡΠ΅Π½ΡΡΡ ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ.
ΠΠ°ΠΆΠ½ΠΎ! Π§ΡΠΎΠ±Ρ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ°, Π° Π½Π΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π°ΡΡΠΈΠ±ΡΡalignΠ½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ΅Π³Π΅img. ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Ρ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠ΅Π³Π°p.
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ°.
Π§ΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅ΠΊΡΡΠ΅, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΠΏΠΈΡΠ°ΡΡ ΡΠ΅Π³img (ΡΠΎ Π²ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ) Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π² .
ΠΠ»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΌΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ border Ρ ΡΠΈΡΠ»ΠΎΠ²ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΈΠ½Ρ ΡΠ°ΠΌΠΊΠΈ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
Π§ΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΎΡΡΡΡΠΏΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ vspace ΠΈhspace . ΠΡ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π΄ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ .
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡvspace Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
Π Π°Π·ΠΌΠ΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠΊΠ°ΠΆΠ΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ΅ Π΄Π²Π° ΠΏΠΎΠ»Π΅Π·Π½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° βalt ΠΈtitle . ΠΠ΅ΡΠ²ΡΠΉ Π·Π°Π΄Π°Π΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π‘ Π½ΠΈΠΌ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-ΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ Π½Π΅ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΈΡΡΡ, ΡΠΎ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠ΅ΠΊΡΡ.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» ΠΈΠ· Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π² ΠΊΠΎΠ΄Π΅.
Π’Π΅ΠΊΡΡ, ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ°title , Π±ΡΠ΄Π΅Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΏΡΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π ΠΊΠΎΠ΄Π΅ Π΅Π³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΡΠΎΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ².
ΠΠΎΡΠ»Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ:
Π’Π°Π±Π»ΠΈΡΠ° Π°ΡΡΠΈΠ±ΡΡΠΎΠ² ΡΠ΅Π³Π°
imgΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | |
src =ββ | Π£ΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΡ ΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ Π½Π° ΠΆΠ΅ΡΡΠΊΠΎΠΌ Π΄ΠΈΡΠΊΠ΅, ΡΠ°ΠΊ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ Π² ΡΠ΅ΡΠΈ (ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π°Π΄ΡΠ΅Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΆΠ΅ΡΡΠΊΠΎΠΌ Π΄ΠΈΡΠΊΠ΅). |
width =ββ; height=ββ | Π£ΠΊΠ°Π·Π°ΡΠ΅Π»ΠΈ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π·Π°Π΄Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½, ΡΠΎ Π²ΡΠΎΡΠΎΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ, Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠ΅ΡΠ²ΡΠΌ. Π§ΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. |
align= ββ | ΠΡΡΠΈΠ±ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:top, middle, bottom, left, right . |
border =ββ | ΠΠ°Π·Π½Π°ΡΠ°Π΅Ρ ΡΠ°ΠΌΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π§ΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠΎΠ»ΡΠΈΠ½Π΅ ΡΠ°ΠΌΠΊΠΈ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ . |
vspace =ββ; hspace=ββ | Π£ΠΊΠ°Π·Π°ΡΠ΅Π»ΠΈ ΠΎΡΡΡΡΠΏΠ° ΠΎΡ ΡΠΎΡΠ΅Π΄Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡΠΈ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π°ΡΡΠΈΠ±ΡΡ Π½Π°Π·Π½Π°ΡΠ°Π΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π΄ΠΎ ΡΠ΅ΠΊΡΡΠ°. |
alt =ββ | ΠΠ°Π·Π½Π°ΡΠ°Π΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΠΎΡΠ΅ΠΌΡ-ΡΠΎ Π½Π΅ ΠΏΡΠΎΠ³ΡΡΠ·ΠΈΠ»Π°ΡΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅. |
title =ββ | ΠΠ°Π΄Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅. | Π³ΠΎΠ»ΠΎΡ[ΠΎΠ²]
ΡΡΠΎ ΡΡΠΎ, Π·Π°ΡΠ΅ΠΌ Π½ΡΠΆΠ΅Π½ ΠΈ ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ
Π ΡΡΠΎΠΌ Π³Π°ΠΉΠ΄Π΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠΌ ΡΠ΅ΠΊΡΡΠ΅Β (alt-text): ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅, ΠΏΠΎΡΠ΅ΠΌΡ ΠΎΠ½ Π²Π°ΠΆΠ΅Π½ Π΄Π»Ρ SEO, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.Β ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΠΎΠ²Π΅ΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈΒ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ°.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ alt-ΡΠ΅ΠΊΡΡ ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Π½ΡΠΆΠ΅Π½
Alt-ΡΠ΅ΠΊΡΡ, ΠΈΠ»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ β ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡΒ alt, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML-ΠΊΠΎΠ΄Π΅.
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ alt-ΡΠ΅ΠΊΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ» ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ. ΠΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄, ΠΊΠΎΠ³Π΄Π° ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ Π±ΡΠ» Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅,Β alt-ΡΠ΅ΠΊΡΡ ΠΏΠΎΠΌΠΎΠ³Π°Π» ΠΏΠΎΠ½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π»Π°ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΡΠ°ΠΊΠΎΠ΅ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ΅Π΄ΠΊΠΎ, Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΈΠΌΡ Π°Π²ΡΠΎΡΠ° Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π·Π°Π³ΡΡΠ·ΠΈΠ²ΡΠ΅ΠΉΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ SEO-ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°ΠΉΡΠ°
Π‘Π΅Π³ΠΎΠ΄Π½Ρ alt-ΡΠ΅ΠΊΡΡ Π²Π°ΠΆΠ΅Π½ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΎΠ±ΠΎΡΠΎΠ²Β ΠΈ Π»ΡΠ΄Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ:
- ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π»ΡΠ΄ΡΠΌ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ:Β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°Β βΒ ΡΠ·Π½Π°ΡΡ ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ;
- ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌ ΡΠΎΠ±ΠΎΡΠ°ΠΌΒ ΠΏΠΎΠ½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SEO, Π΅Π³ΠΎ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, Π° Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΈΠΌ Π΄Π°ΠΆΠ΅ Π·Π»ΠΎΡΠΏΠΎΡΡΠ΅Π±Π»ΡΡΡ.
ΠΠΎΡΠ΅ΠΌΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΡΠ°ΠΊ Π²Π°ΠΆΠ΅Π½
ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ ΠΈ ΡΠ°ΠΉΡΡΒ ΡΠΈΠ»ΡΠ½ΠΎ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ.Β Π’ΡΡΠ΄Π½ΠΎ Π½Π°ΠΉΡΠΈ ΡΠ°ΠΉΡ Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ΅Π½.
Alt-ΡΠ΅ΠΊΡΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠΎΡΠΌΡ, Π΄Π΅Π»Π°Ρ Π΅Π³ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎΠΉ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΡΠ΄Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΠΈ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΎΠ±ΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ° Π½Π΅ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ.
ΠΠ°ΠΆΠ½ΠΎΡΡΡ Π΄Π»Ρ SEO
ΠΡΠ°Π²ΠΈΠ»ΡΠ½Π°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ alt-ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠ°Π½ΡΡ ΡΠ°ΠΉΡΠ° Π½Π° Π²ΡΡΠΎΠΊΠΎΠ΅ ΡΠ°Π½ΠΆΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅Β ΠΏΡΠΈ ΠΏΠΎΠΈΡΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Google. ΠΠ°, Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ β ΡΠ°ΠΊΡΠΎΡ ΡΠ°Π½ΠΆΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π² ΡΡΠΎΠΉ Π²ΡΠ΄Π°ΡΠ΅.
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½ΠΈΡΠΈ ΠΈ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠΈ ΡΠ°ΠΉΡΠ° ΡΡΠ°ΡΠΈΠΊ ΠΈΠ· ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ³ΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠΎΠ»Ρ Π² ΠΎΠ±ΡΠ΅ΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΡΠ΅ΡΠ΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈΒ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ°ΡΡΠΎ ΠΈΡΡΡ ΡΠΎΠ²Π°ΡΡ ΠΏΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, Π½Π΅ΠΆΠ΅Π»ΠΈ Π² ΠΎΠ±ΡΡΠ½ΠΎΠΌ ΠΏΠΎΠΈΡΠΊΠ΅.
ΠΠΎΠΈΡΠΊΠΎΠ²Π°Ρ Π²ΡΠ΄Π°ΡΠ° Google ΠΏΠΎ Π·Π°ΠΏΡΠΎΡΡ βapple watch 6βGoogle ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠ²Π°ΡΠΎΠ² (ΠΈΠ»ΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΡ Π²ΠΎΠΎΠ±ΡΠ΅) Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΠ΅ alt-ΡΠ΅ΠΊΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΡΠ΅ΡΠ΅ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ².
ΠΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠΎΠ²
- ΠΡΠ±ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²Π°: ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, Π»ΠΈΠ΄Ρ, ΡΡΠ°ΡΠΈΠΊ.
- ΠΠΎΠ΄Π±ΠΈΡΠ°Π΅ΠΌ Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Π΅ΠΉ!
ΠΠ°ΠΆΠ½ΠΎΡΡΡ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ
ΠΠΈΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ Π²ΡΠ΄Π°ΡΠ΅ ΠΏΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ β Π²Π°ΠΆΠ½Π°, Π½ΠΎ Π΅ΡΠ΅ Π²Π°ΠΆΠ½Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ. Π ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π³ΠΎΠ΄Ρ Π΅ΠΉ ΡΠ΄Π΅Π»ΡΡΡ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ. ΠΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠΎΠΌ Π²ΡΠ΅ΠΌ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π»ΡΠ΄ΡΠΌΠΈ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ.
ΠΡΠ»ΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΈΡ , Π° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ², Π²Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΡΠ΄ΡΠΌ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π²Π½ΠΈΠΊΠ½ΡΡΡ Π² Π΅Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ.
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Ρ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ SEO-Π°ΡΠ΄ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π΅ ΡΠΊΡΠΈΠ½ΡΠΎΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΊΡΠ°ΡΠ»ΠΈΠ½Π³ΠΎΠ²ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΠ΅ Π»ΡΡΡΠ΅ Π»ΠΈ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΊΡΠΈΠ½ΡΠΎΡΠ° Π²ΠΌΠ΅ΡΡΠΎ ΠΊΡΠ°ΡΠΊΠΎΠ³ΠΎ Β«SEO-Π°ΡΠ΄ΠΈΡΒ»? Π Π°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ .
ΠΡΠΈΠΌΠ΅ΡΡ alt-ΡΠ΅ΠΊΡΡΠ°
ΠΠ°ΡΠ½Π΅ΠΌ Ρ Ρ ΠΎΡΠΎΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Π² ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ SEO ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΊΡΠΈΠ½ΡΠΎΡΡ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ Google Search ConsoleΒ ΠΈ Screaming Frog. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
<img src=βgoogle-search-console-coverage-report.jpgβ alt=βΠΡΡΠ΅Ρ ΠΎΠ± ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ Π² Google Search Console ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΈ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡβ>
<img src=βgoogle-search-console.jpgβ alt=βΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Google Search Console ΠΎΡ Googleβ>
<img src=βscreaming-frog-html-pages.jpgβ alt=βΠ‘ΠΏΠΈΡΠΎΠΊ HTML-ΡΡΡΠ°Π½ΠΈΡ Π² Screaming Frogβ>
<img src=βscreaming-frogβ alt=βScreaming Frog Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π±ΠΎΡΡβ>
Π’Π°ΠΊΠΆΠ΅ ΡΡΠΎΠΈΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ Π½Π°Π΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΉΠ»Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠΉ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΠΊΡΠΎΡΠΎΠΌ ΡΠ°Π½ΠΆΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ ΡΡΠΎ Ρ ΠΎΡΠΎΡΠ°Ρ SEO-ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°.
ΠΡΡΡ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ alt-ΡΠ΅ΠΊΡΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΠ΅Π·ΠΌΠ΅ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² ΠΈ ΡΠΏΠ°ΠΌ.
ΠΠΎΡ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π² ΠΏΠ»ΠΎΡ ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ:
<img src=βgoogle-search-console-coverage-report.jpgβalt=βΠ±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ seo Π°ΡΠ΄ΠΈΡ, Π΄Π΅ΡΠ΅Π²ΡΠΉ seo Π°ΡΠ΄ΠΈΡ, ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡ seo Π°ΡΠ΄ΠΈΡΠ°, seo Π°ΡΠ΄ΠΈΡ, seo Π°ΡΠ΄ΠΈΡΡβ>
<img src=βgoogle-search-console.jpgβ alt=βgoogle seo, seo google, google, seo, google search console seoβ>
<img src=βscreaming-frog-html-pages.jpgβ alt=βseo Π°ΡΠ΄ΠΈΡΠΎΡ, seo Π°ΡΠ΄ΠΈΡ, seo Π°ΡΠ΄ΠΈΡΡβ>
<img src=βscreaming-frogβ alt=βseo Π°ΡΠ΄ΠΈΡβ>
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ Π΄Π°ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
Π’ΠΈΠΏΠΈΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΒ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΠ°Π±ΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ»ΡΡΠ΅Π²ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π½Π΅ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ²Π΅ΡΡΠΈΡΡ. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ Π² alt-ΡΠ΅ΠΊΡΡΠ΅:
- ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡΒ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΡΡΠΎΠ³ΠΎ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ alt-ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π³ΠΎ alt-ΡΠ΅ΠΊΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΡΠΎΠ±Π°ΠΊΠ°Β» ΠΊ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΡΠΎΠ±Π°ΠΊΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΎΠΊΡΠ°ΡΠ°, ΠΏΠΎΡΠΎΠ΄Ρ, ΡΡΠΎ ΠΆΠΈΠ²ΠΎΡΠ½ΠΎΠ΅ Π΄Π΅Π»Π°Π΅Ρ.
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°ΠΉΠ»Π° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, googleseachconsole ΠΈΠ»ΠΈ googleβsearch-console ΠΈΠ»ΠΈ photo2323. ΠΡΡΠ΄ Π»ΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅.
ΠΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΠ΅ΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ Telegram-ΠΊΠ°Π½Π°Π»Ρ!
- Π’Π΅ΠΏΠ΅ΡΡ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΈΡΠ°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΈΠ· ΠΌΠΈΡΠ° ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³Π° Π² ΠΌΠ΅ΡΡΠ΅Π½Π΄ΠΆΠ΅ΡΠ΅ Telegram Π½Π° ΡΠ²ΠΎΡΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π΅.
- ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° Π½Π°Ρ ΠΊΠ°Π½Π°Π».
Π‘ΠΎΠ²Π΅ΡΡ ΠΏΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ alt-ΡΠ΅ΠΊΡΡΠ°
- ΠΠ΅ Π²ΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ² Π² Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ. ΠΡΠΎ Π½Π΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π½ΠΆΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ.
- ΠΠΏΠΈΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄Π΅ΡΠ°Π»ΡΡ , Π½ΠΎ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ ΠΊΠΎΡΠΎΡΠΊΠΎ. ΠΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°, Π½ΠΎ Π²ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ ΠΈΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ.
- ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅ΠΊΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ . ΠΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² Π²ΠΈΠ΄Π΅ HTML-ΠΊΠΎΠ΄Π°.
- ΠΠ΅ ΠΏΠΈΡΠΈΡΠ΅ Β«ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅β¦Β». Google ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎΡΡΠΎ ΠΎΠΏΠΈΡΠΈΡΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅.
- Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΎΡΠΈΡΠ°Π² Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ.Β ΠΡΠΎ Π»ΡΡΡΠ΅Π΅ ΡΠΏΡΠ°ΠΆΠ½Π΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Ρ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡ.
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΡΡΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎΠΈΡ ΠΈ Π½Π΅ ΡΡΠΎΠΈΡ ΠΏΠΈΡΠ°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ. ΠΠΎ ΠΊΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ alt-ΡΠ΅ΠΊΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°? ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠΏΡΠΈΡ Β«ΠΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠΎΠ΄Β» ΠΈΠ»ΠΈ Β«ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΒ» (Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°). Π ΠΏΠ°Π½Π΅Π»ΠΈ Elements ΠΈΠ»ΠΈ Β«ΠΠ»Π΅ΠΌΠ΅Π½ΡΡΒ» ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡΡΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°, ΠΎΡΠ½ΠΎΡΡΡΠΈΠΉΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π Π½Π΅ΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ alt.
HTML-ΠΊΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² DevToolsΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΌΠ°ΡΡΠΎΠ²ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ, ΡΡΠΎΠΈΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π²ΡΠΌΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
ΠΠ»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Google Chrome ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Web Developer. ΠΠ°ΡΠ΅ΠΌ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ. ΠΠΊΡΠΈΠ²ΠΈΡΡΠΉΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² Images βΒ Display Alt Attributes. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ alt-ΡΠ΅ΠΊΡΡΠ° Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π΄Π°Π½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Web Developer ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ alt-ΡΠ΅ΠΊΡΡ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Screaming Frog ΠΈΠ»ΠΈ Sitebulb. ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡ Images.
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
SEO Π°Π½Π°Π»ΠΈΠ· ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠΎΠ² — ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ
ΠΡΠ΅ ΠΌΡΡΠ΅Π½ΠΈΡ Π½Π΅ Π·ΡΡ
ΠΠ°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°Β β ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΠΎΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π°. ΠΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΠΎΠΆΠ΅ Π²Π°ΠΆΠ½Π°Ρ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ°Ρ. ΠΠΎΠ΄ΠΎΠ±ΡΠ°Π² ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΡΠ½Π°Π±Π΄ΠΈΠ² ΠΈΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ alt-ΡΠ΅ΠΊΡΡΠΎΠΌ, Π²Ρ ΠΏΠΎΠ²ΡΡΠ°Π΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΡΠ°Π½ΡΡ Π½Π° Π±ΡΡΡΡΠΎΠ΅ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π² Π²ΡΠ΄Π°ΡΠ΅.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΡΠΏΡΠΎΡΠ°Π΅Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΈ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌΠΈ ΡΠΎΠ±ΠΎΡΠ°ΠΌΠΈ. Π ΡΠ΅ΠΌ ΠΏΡΠΎΡΠ΅ ΠΈΠΌ ΠΏΠΎΠ½ΡΡΡ ΡΡΡΡ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ, ΡΠ΅ΠΌ Π»ΡΡΡΠ΅ Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ ΠΏΠΎΠΈΡΠΊΠ°.
ΠΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° Π² Π’ΠΠ-10
- ΠΠΏΠ»Π°ΡΠ° ΠΏΠΎ Π΄Π½ΡΠΌ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ Π² Π’ΠΠ
- ΠΠΎΠ΄Π±ΠΈΡΠ°Π΅ΠΌ Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΡΠ΅Π°Π»ΡΠ½ΡΡ ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Π΅ΠΉ!
ΠΠΎΠ½Π²Π΅ΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² HTML CSS. ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² HTML CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ AI: Fronty
ΠΠ»Π΅ΠΌΠ΅Π½Ρ β1
AI-Powered Image to
HTML CSS Converter
Fronty AI ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄ HTML CSS .
Π ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΌΠΈΠ½ΡΡ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ HTML CSS-ΠΊΠΎΠ΄ ΠΈΠ· Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄!
- Π§ΠΈΡΡΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ — ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
- ΠΠΎΠ΄ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ!
β’ ΠΠ°Π³ΠΈΡ ΠΠ
β’ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°
β’ ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ β 2
Π Π΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
No-Code Editor
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΡ, Π±Π»ΠΎΠ³, ΡΠ»Π΅Π½Ρ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈ Π»ΡΠ±ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅. ΡΠΈΠΏΡ. ΠΠ°Ρ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΡΡΠΈΠ»Ρ.
- ΠΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ°ΠΉΡΠΎΠ²
- ΠΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
- ΠΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- ΠΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ²
β’ Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»ΡΠΌΠΈ
β’ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
β’ ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅
Π€ΡΠ½ΠΊΡΠΈΡ β3
ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ!
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΎΠ², Π·Π°ΠΏΡΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π½Π° Π½Π°ΡΠ΅ΠΌ Ρ
ΠΎΡΡΠΈΠ½Π³Π΅.
ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ
Π²ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Fronty.
- ΠΡΠΈΠΊΡΠ΅ΠΏΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Π΄ΠΎΠΌΠ΅Π½
- 99,8% Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π±Π΅Π·ΠΎΡΠΊΠ°Π·Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ ΠΎΡΡΠΈΠ½Π³Π°
- ΠΠΎΠ»ΡΡΠ°ΠΉΡΠ΅ ΡΠ΅Π·Π΅ΡΠ²Π½ΡΠ΅ ΠΊΠΎΠΏΠΈΠΈ Π² Π»ΡΠ±ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ
- ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄Π»Ρ SEO ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Π²Π΅Π±-ΡΠ°ΠΉΡ
- ΠΠ΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΡ ΠΌΠΈΡΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ
β’ ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π΄ΠΎΠΌΠ΅Π½
β’ ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ Π² ΠΏΡΡΠΌΠΎΠΌ ΡΡΠΈΡΠ΅
Fronty — ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² HTML-ΠΊΠΎΠ΄
ΠΠ΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ΄ HTML CSS Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°!
Ρ ΠΈΡΠΊΡΡΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΠΎΠΌ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² HTML Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΈΠ· Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΌΠΊΠ° ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ JPEG/PNG. ΠΡΠ΅Π³ΠΎ Π·Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΡΡ Π½Π°ΡΠ° ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΈΡΠΊΡΡΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΠ° Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ HTML CSS, ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½ Π½Π°ΡΠΈΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠΌ Π±Π΅Π· ΠΊΠΎΠ΄Π°.
ΠΠ°ΡΠ°ΡΡ
Π€ΡΠ½ΠΊΡΠΈΠΈ
Π½Π° Π±Π°Π·Π΅ ΠΠ
ΠΠΎΡΡΡΠΏΠ΅Π½ ΡΠ΅ΠΉΡΠ°Ρ
ΠΠΎΡΡΡΠΏΠ΅Π½ ΡΠ΅ΠΉΡΠ°Ρ
Π‘ΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ
Π‘ΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ
ΠΡΡΡΠ΅ΡΠΈΡΡΡΡ ΠΠ»ΠΈΠ΅Π½ΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½Ρ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°
Fronty AI ΡΠ΄Π΅Π»Π°Π΅Ρ Π²ΡΡ ΡΠ°Π±ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π²ΡΡΠΎΡΠ°ΠΉΡΠ΅Π΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΡΡΠΈΠΉ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ β Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡ!
- ΠΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
- ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
- SEO Π΄ΡΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ
- ΠΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ
- ΠΠΎΡΡΡΠΏΠ½ΡΠΉ
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Fronty Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΡΠ΅Π΄ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°Π±Π»ΠΎΠ½Π½ΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠΎΠΌΠΏΠ΅ΡΠ΅Π½ΡΠ½ΠΎΡΡΡ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΡ Fronty ΠΊΠΎΠΌΠ°Π½Π΄Π° Π½Π΅ΠΎΠ±ΡΠΊΠ½ΠΎΠ²Π΅Π½Π½Π°Ρ
ΠΠ°ΡΠ°Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Fronty Π±ΡΠ»ΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΏΡΠΈΠ½ΡΠ»ΠΈ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΏΡΠΎΡΠ΅ΡΡ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΠΎΠΌΡ ΡΠ΅ΡΠ²ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Fronty, Ρ ΠΌΠΎΠ³Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΈΠΌ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°ΠΌ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅, Π½ΠΎ ΠΈ ΠΊΠΎΠ΄!
+ 100K
Π‘Π°ΠΉΡ ΡΠΎΠ·Π΄Π°Π½
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Fronty ΡΠΎΠ·Π΄Π°Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ 100 ΡΡΡΡΡ ΡΠ°ΠΉΡΠΎΠ². ΠΠ°Ρ ΠΠ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π²ΠΎΠ΅Π²ΡΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.
#1
Π’ΠΎΠ²Π°Ρ Π΄Π½Ρ
Fronty ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° Product Hunt ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠΌ Π΄Π½Ρ.
Award
Golden Kitty Awards
Fronty ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠΎΠ±Π΅Π΄ΠΈΡΠ΅Π»Π΅ΠΉ Golden Kitty Awards. Π ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ Π²Ρ ΠΎΠ΄ΡΡ Google Pixel 2, iMac Pro, Telegram ΠΈ Ρ. Π΄.
+50k
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠΆΠ΅
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ CSS-ΠΊΠΎΠ΄Π° Fronty Π² HTML ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠ»ΡΡΡΠ°ΡΡΡΡ, ΡΡΠΎΠ±Ρ Π·Π°Π²ΠΎΠ΅Π²Π°ΡΡ Π΄ΠΎΠ²Π΅ΡΠΈΠ΅ Π»ΡΠ΄Π΅ΠΉ.
ΠΠΎΠ»Π΅Π·Π½ΡΠΉ Π Π΅ΡΡΡΡΡ
ΠΠΠΠ
25 ΡΠ½Π²Π°ΡΡ 2023 Π³.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ChatGPT: 5 ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΠ°ΠΊΡΠΎΠ² ΠΎ Π½Π΅ΠΌ
ΠΠΠΠ
17 ΡΠ½Π²Π°ΡΡ 2023 Π³.
Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Photoshop 2023: Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΠΠΠ
09 ΡΠ½Π²Π°ΡΡ 2023 Π³.
ΠΡΡΡΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ ΠΏΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌ Π² 2023 Π³ΠΎΠ΄Ρ: Π±Π»ΠΎΠ³ ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅
ΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² HTML
ΠΡΠ°ΠΊ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈβ¦
ΠΠΠΠΠΠΠΠ’Π!
ΠΠ½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ? Π Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ ΠΎΠ΄Π½ΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
ΠΠΎΡΠ΅ΠΌΡ Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ (ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ) ΠΈΠ·Π±Π΅Π³Π°ΡΡ
background-image
Π² CSSΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG, ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΈΡΡΠ²Π°Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»ΡΠ΄ΠΈ ΠΈΠΌΠ΅ΡΡ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ.
ΠΠ°Ρ ΡΠ°ΠΉΡ ΡΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ°ΡΠ°ΠΌΠΈ? (Π¨ΡΡΡβ¦ ΠΊΠ°ΠΆΠ΅ΡΡΡ)
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ: Β«Π! ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ, Ρ Π²ΡΡΡΠ½ΡΡ ΡΠΊΠ°ΠΆΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½ΠΎΠ² ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉΒ»:
Π§ΡΠΎ ΠΆ, Ρ ΡΡΠΈΠΌ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°. ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠ»ΠΎΠ²Π½ΠΎ, ΡΡΠΎ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° , Π½ΠΎ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ .
Π’Π°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ: Β«ΠΠ³Π°! Π― Π·Π½Π°Ρ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΡΡΡΠΊ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ, image-set
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉΒ»:
Π Π²Ρ Π±ΡΠ»ΠΈ Π±Ρ ΠΏΡΠ°Π²Ρ, Ρ ΡΡΠΎΠ³ΠΎ Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°. ΠΠΎ, Π²ΠΎΠΎΠ±ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, Π½ΡΠΆΠ½ΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π° , ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ°ΠΊ, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ°Π·Π΄ΡΡΡΠΉ CSS, ΡΠΎΡΠ΅ΡΠ°ΡΡΠΈΠΉ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΈ Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ»ΠΎΠΆΠ½ΡΠ΅ΡΡΡ, ΠΈ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΡΠ½ΠΎ Π·Π½Π°ΡΡ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅Π»ΠΈΠΊΠΎ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠΊΡΠ°Π½Π°, Π΄Π°ΠΆΠ΅ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°ΠΉΡΠ° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Π²ΡΠ΅ ΠΆΠ΅ ΡΡΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ°ΠΊΠΈΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°, ΡΠΎΡΠΌΠ°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΏΠΎΠΊΠΎΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ°, Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ΅ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π Π² Π΄ΠΎΠ²Π΅ΡΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³ΠΎ, Ρ Π½Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ°ΠΌΠΈ Π·Π°ΠΏΡΠΎΡΠΎΠ².
ΠΠ·Π±Π΅Π³Π°Π½ΠΈΠ΅ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ²
Π‘ ΡΠ΅Π³ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠ° Π½Π° src
ΠΏΡΡΠΌΠΎ Π² HTML. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ HTML-ΠΊΠΎΠ΄, ΠΎΡΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ Π½Π°ΡΠ°ΡΡ Π²ΡΠ±ΠΎΡΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ.
Π ΡΠ»ΡΡΠ°Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ( link rel="styleshset"
, ΠΊΠ°ΠΊ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ, Π²ΠΌΠ΅ΡΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ
Π²Π΅Π·Π΄Π΅) Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ HTML, ΠΏΠΎΠ»ΡΡΠΈΡΡ CSS ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
, ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π·Π°ΠΉΠΌΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Π΄Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΠΎΠΉΡΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ CSS, ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΊ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°ΠΌ. ΠΠΎ, ΡΠΈΡΠ°Ρ Π΄Π°Π»ΡΡΠ΅, Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Ρ ΡΠ΅Π³ΠΎΠΌ HTML img
, ΠΊΠΎΡΠΎΡΡΡ
, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅Ρ Ρ background-image
Π² CSS.
ΠΠΎΠ³Π΄Π° ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ, ΠΊΠ°ΠΊ ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ
, Π΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΡΠ°Π·Π±ΠΈΡΡ Π½Π° background-repeat
, Π½Π΅Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ (Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ Π·Π½Π°Ρ) Ρ ΡΠ΅Π³Π°ΠΌΠΈ img
.
ΠΠΎ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΠΎΠ»ΡΡΠ΅, ΡΠΊΠ°ΠΆΠ΅ΠΌ, 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ Π½Π΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ Π² CSS ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ img
ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ.
ΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Π»ΠΈΡΡ Π½Π° ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ background-image
Π² CSS, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΡΠ΅Π°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΡΡ
.
Π ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ HTML ΡΠ΅Π³ img
Π΄Π°Π΅Ρ Π½Π°ΠΌ ΡΡΠ΄ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΎΠ±Π΅ΠΆΠΈΠΌΡΡ ΠΏΠΎ Π½ΠΈΠΌ.
ΠΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ Π»Π΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π² ΡΠ΅Π³Π΅ img
Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ loading=lazy
:
ΠΡΠΎ ΡΠΆΠ΅ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π²Π°ΡΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ Π²ΡΠΈΠ³ΡΠ°Π»ΠΈ. Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π½Π΅Ρ Π΄Π°ΠΆΠ΅ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π Π΄Π°ΠΆΠ΅ Π»ΡΡΡΠ΅ β Ρ Π½Π΅Π³ΠΎ ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ JS ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π£ΡΡΠΈΡΠ΅ ΠΎΠ΄Π½Ρ Π²Π°ΠΆΠ½ΡΡ Π΄Π΅ΡΠ°Π»Ρ β Π² ΠΈΠ΄Π΅Π°Π»Π΅ Π½Π΅ Π»Π΅Π½ΠΈΡΠ΅ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Β«Π½Π°Π΄ ΡΠ³ΠΈΠ±ΠΎΠΌΒ» (ΡΠΎ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΡΠ°Π·Ρ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅). ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π±ΡΡΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π±ΡΠ΄ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
P.S.: loading=lazy
ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° iframe
π
ΠΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°
ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ srcset
Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΠ°ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ SVG, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π° ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°:
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ, ΡΠ΅ΠΌ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Ρ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
Π² CSS. , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ w
Π² img
srcset
.
Π§ΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π² ΡΡΠΎΠΌ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ . ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π΅ Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 2x, Ρ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ srcset
Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ Π·Π½Π°ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π°Ρ
Π²Π°ΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 400w
(ΡΠΎ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Ρ 2-ΠΊΡΠ°ΡΠ½ΠΎΠΉ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ). Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 1x Π·Π°Ρ
Π²Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 200w
.
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ Ρ ΡΠ΅Π³ΠΎΠΌ
picture
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ Π² Π½Π°ΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ .png
. ΠΡΠΎΡ ΡΠΎΡΠΌΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π»ΡΠ±ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π½ΠΎ ΠΏΠΎΡΡΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΡΠΌΠ°ΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ΄Π΅ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΊ Π½Π°ΡΠ΅ΠΌΡ img
ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π½Π°ΠΌ ΡΠΊΠ°Π·Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΈ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ webp, ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΡΡ ΠΈΡ
, ΡΠ΅ΡΠ΅Π· ΡΠ΅Π³ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°
:
ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ AVIF:
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠΈ ΡΡΠΎΡΠΎΠ½
ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ ΠΌΡ ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΡΠΈΠΌ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅ΡΠ°. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ ΡΠΎΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ
, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠΈΡΠΈΠ½Ρ
ΠΈ Π²ΡΡΠΎΡΡ
Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ ΡΠ°ΡΡΠΎ ΡΡΠΎ Ρ
ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ height
Π½Π° auto
Π² CSS, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π»ΠΎ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°:
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½
ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² CSS, ΡΡΠΎΠ±Ρ Π²ΡΠ΅Π³Π΄Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½. Π‘ ΡΡΠΎΠΉ ΠΎΠΏΡΠΈΠ΅ΠΉ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΡΠΎΡΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½:
ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½
ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΎΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ object-fit
ΠΈ object-position
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ
ΠΎΠΆΠΈ Π½Π° background-size
ΠΈ background-position
Π΄Π»Ρ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠ΅ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ decoding="async"
Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΊΠ°. MDN ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΠΎ ΡΠ΅ΡΡΡΡΠ°ΠΌ
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β fetchpriority
. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ΅Π½Ρ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ LCP.
ΠΠ»ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΠΈΠ·ΠΈΡΡ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΊΠ°ΡΡΡΠ΅Π»ΠΈ:
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉ
alt
text, kids ΠΠ° , alt
ΡΠ΅ΠΊΡΡ ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΠ°ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈ SEO, ΠΈ Π΅Π³ΠΎ Π½Π΅Π»ΡΠ·Ρ ΡΠΏΡΡΠΊΠ°ΡΡ ΠΈΠ· Π²ΠΈΠ΄Ρ:
ΠΠ»ΠΈ, Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΈΡΡΠΎ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ (ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Π°Π±ΡΡΡΠ°ΠΊΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ, ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π½ΠΎ ΠΏΠΎΠΌΠ΅ΡΠΈΡΡ ΠΈΡ
ΠΊΠ°ΠΊ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΡΠΎΠ»ΠΈ :
ΠΏΡΠ΅Π΄ΠΎΡΡΠ΅ΡΠ΅ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°
srcset
, ΡΠΏΠΎΠΌΡΠ½ΡΡΠΎΠ³ΠΎ Π²ΡΡΠ΅, Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΈΠ»ΡΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠΊΠΈ.ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π½Π°Π΅Ρ Π΅Π³ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°, ΡΠΌΠ½ΠΎΠΆΠ°Π΅Ρ Π΅Π³ΠΎ Π½Π° ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π² srcset.
ΠΠΎ Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ chrome, ΠΈΠΌΠ΅ΡΡ ΡΠΊΠ°Π½Π΅Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠ΅Ρ ΡΠ΅Π³ΠΈ img Π² HTML, ΡΡΠΎΠ±Ρ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ Π½Π°ΡΠ°ΡΡ ΠΈΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ.
ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π΅ΡΠ΅ Π΄ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°Ρ CSS Π΅ΡΠ΅ Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ΅Π½, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π½Π°Ρ Π½Π΅Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΈ ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄Π΅Π»Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΡΠΈΡΠ°Π΅Ρ, ΡΡΠΎ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ 100vw
β ΠΎΠ½ ΠΆΠ΅ ΠΏΠΎΠ»Π½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ Π³Π΄Π΅-ΡΠΎ ΠΎΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎ ΡΠ΅Π»ΠΎΠΉ ΠΏΠ°ΡΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΎΠ½ΠΈ Π΅ΡΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅. Π’Π°ΠΊ ΡΡΠΎ ΡΡΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ.
ΠΠ΄Π΅ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²:
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΠΎΠΊΠ½Π°, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (Π»ΠΈΠ±ΠΎ ΡΠΎΡΠ½ΠΎ, Ρ ΡΠΎΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 500px
, ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ 50vw
, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΎΠΊΠΎΠ»ΠΎ 50% ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π°).
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΊΡΠ°Π½ 900px
Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΠ΅ΡΠ²ΡΡ
Π΄Π²ΡΡ
ΠΊΠ°Π»ΡΠ·ΠΎΠ², Π° Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅Π·Π΅ΡΠ²Π½ΠΎΠΌΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ² ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ 50vw
.
ΠΡΠ°ΠΊ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ 50vw * 900px = 450px
, Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ΅ΠΌΠΈΡΡΡΡ ΠΊ ΡΠΈΡΠΎΠΊΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 450px
Π΄Π»Ρ Π΄ΠΈΡΠΏΠ»Π΅Ρ Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 1x
, 900px
, Π·Π°ΡΠ΅ΠΌ ΡΠΈΡΠΎΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΠΈ 2x
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ Ρ. Π΄. Π΄Π»Ρ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΌΠ°ΡΡΠ° Π² srcset
ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π³ΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π²ΡΠ±ΠΎΡΠΊΠΈ.
ΠΠΎΠ΄Π²Π΅Π΄Π΅ΠΌ ΠΈΡΠΎΠ³ΠΈ
Π£Ρ ΡΡ, Ρ ΠΎΡΠΎΡΠΎ, ΡΡΠΎ Π±ΡΠ»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ»ΠΎΠΆΠΈΠΌ Π²ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅.
ΠΠΎΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ:
ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ:ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½ΠΈΠΆΠ΅ ΡΠ³ΠΈΠ±Π°.
ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Π½Π°ΠΈΠ²ΡΡΡΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π°Π»ΠΈΡΡ loading="lazy"
ΠΈ decoding="async"
ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ fetchpriority="high"
, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΌ Π½Π°ΠΈΠ²ΡΡΡΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ LCP:
Π’Π°ΠΊΠΆΠ΅ Π΄Π»Ρ Π²Π΅ΠΊΡΠΎΡΠΎΠ² ΡΠ°ΠΊΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΠΊΠ°ΠΊ SVG, Π½Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠΎΡΠΌΠ°ΡΠΎΠ², ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅:
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ΄Π°Π»ΠΈΠ»ΠΈ ΡΠ΅Π³ΠΈ
ΠΈ
, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΠΈΠ»ΠΈ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ Π½Π°Π±ΠΎΡ
ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ²
, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½Ρ.
ΠΠ»Ρ SVG Ρ Π²ΡΡΠΎΠΊΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ΅ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ Π²ΡΡΠ΅ (ΡΠ΄Π°Π»ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ
ΠΈ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
, ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ fetchpriority="high"
Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ LCP)
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π°
5 ΠΡ Π΄Π°, Ρ ΠΏΠΎΡΡΠΈ Π·Π°Π±ΡΠ», ΡΡΠΎ ΠΌΡ Π½Π°ΡΠ°Π»ΠΈ ΡΡΡ ΡΡΠ°ΡΡΡ Ρ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ β ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π’Π΅ΠΏΠ΅ΡΡ, Ρ
ΠΎΡΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΠ°Ρ Π·Π΄Π΅ΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠ° ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠΈΠΏΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ½, ΠΏΠ΅ΡΠ΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ ΠΈ Ρ. Π΄.), Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π»ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS (Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ°). ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ), ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ img
Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
.
ΠΠΎΡ ΡΡΠ΅Π·Π°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΈ:
ΠΠ»ΠΎΡ ΠΎ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ HTML Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ?
ΠΠ° ΠΈ Π½Π΅Ρ, Π½ΠΎ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π½Π΅Ρ.
ΠΡΠΎΡΡΠΎ Π»Π΅Π³ΠΊΠΎ Π·Π°Π±ΡΡΡ, ΠΊΠ°ΠΊ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π² ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΅ Π½Π° Π±Π°ΠΉΡΡ). ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π±Π°ΠΉΡΠΎΠ² ΠΊ Π²Π°ΡΠ΅ΠΌΡ HTML ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ Π²Π°ΠΌ ΡΡΡΡΡΠΈ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ Π±Π°ΠΉΡΠΎΠ² Π½Π° ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ Π·Π° ΡΡΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΠΉ.
ΠΠΎ-Π²ΡΠΎΡΡΡ , Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ Π·Π°Π±ΡΠ²Π°ΡΡ, ΡΡΠΎ ΡΠΆΠ°ΡΠΈΠ΅ β ΡΡΠΎ Π²Π΅ΡΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π±ΡΡΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΈΠ·Π±ΡΡΠΎΡΠ½ΠΎΠΉ, ΡΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ gzip.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠ°Π·Π΄ΡΠ²Π°Π½ΠΈΠ΅ DOM ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡΡΠ²ΠΎ, Ρ Π±Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠ», ΡΡΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡΡ Π² Π²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·Ρ.
ΠΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ Π²Π°ΠΌ ΠΏΠΎΡΡΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ Π²ΡΠ΅ ΡΡΠΎ Π²ΡΡΡΠ½ΡΡ. Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ NextJS ΠΈ Qwik, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΠΊΠΈΠ΅ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ, ΠΊΠ°ΠΊ Cloudinary ΠΈ Builder.io, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠΎΡΠ°ΡΡ ΡΡΡ Π·Π°Π΄Π°ΡΡ, ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅: ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ (Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ) Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² Π²Π°ΠΌ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
Π Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
, Π²Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΎ Π²ΡΡΡΠ½ΡΡ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΈΡ
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π°ΠΌ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΠΏΡΡΠΌΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊ:
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠΉ ΠΌΠ½Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²
, β ΡΡΠΎ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ΄Π΅Π»Π°Π» Π΄Π»Ρ Builder. io, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ ΡΡΠ΅Π½Π°ΡΠΈΠΉ puppeteer Π² ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΡΠ΅ΠΆΠΈΠΌΠ΅ Π΄Π»Ρ Π°Π½Π°Π»ΠΈΠ·Π° ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ
ΡΠΊΡΠ°Π½Π° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ img
Π² HTML Π²ΠΌΠ΅ΡΡΠΎ CSS background-image
Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, ΡΠ΅Π³ΠΈ srcset
, picture
ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π²ΡΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ. ΠΠΎΠΌΠ½ΠΈΡΠ΅ ΠΎ Π²ΡΡΠΎΠΊΠΎΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠΎΠΌ ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΈ Π°ΡΡΠΈΠ±ΡΡΡ.
ΠΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, NextJS ΠΈΠ»ΠΈ Qwik) ΠΈ/ΠΈΠ»ΠΈ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Cloudinary ΠΈΠ»ΠΈ Builder.io), ΠΈ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π·Π°ΡΠΈΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ.
ΠΠ±ΠΎ ΠΌΠ½Π΅
ΠΡΠΈΠ²Π΅Ρ! Π― Π‘ΡΠΈΠ², Π³Π΅Π½Π΅ΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡ Builder.io.
Π― ΡΠΎΠ·Π΄Π°Π» ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Image
ΠΈ API ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΠΎΡΡΠ°ΡΠΈΠ» Π°Π±ΡΡΡΠ΄Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΈΡ
ΠΏΡΠΎΡΠΈΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° ΡΠΎΡΠ½ΡΡ
ΡΠ΅Π°Π»ΡΠ½ΡΡ
ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.