Π‘ΠΊΡΡΡΠΈΠ΅ ΠΈ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²
ΠΠ° Web-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΡ ΡΠ΅Π³ΠΈ HTML ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ ΡΡΠΈΠ»Ρ CSS, ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΈΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΡΠΈΠ»Ρ. Π§Π°ΡΡΠΎ Π΅Π³ΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ Π² ΠΎΡΠ²Π΅Ρ Π½Π° ΡΠ΅Π»ΡΠΎΠΊ ΠΌΡΡΡΡ β ΡΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Web-ΡΡΡΠ°Π½ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΌΠ΅Π½Π΅Π΅ Π³ΡΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌΠΈ.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈ ΠΌΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ Π½Π΅ΡΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π½Π° ΡΠ²ΠΎΠΈΡ Web-ΡΡΡΠ°Π½ΠΈΡΠΊΠ°Ρ . Π₯ΠΎΡΡ Π±Ρ Π² ΡΠ°ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅.
β Π’Π΅ΠΊΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠ²ΡΠΆΠ΅ΠΌ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΊΠ»Π°ΡΡ sample. ΠΡΠΎΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΊΠ»Π°ΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ»ΡΠΆΠΈΡΡ Π΄Π²ΡΠΌ ΡΠ΅Π»ΡΠΌ: Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΎΠ½ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΊΠ°ΠΊ "Π²ΠΌΠ΅ΡΡΠΈΠ»ΠΈΡΠ΅" Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π²ΠΎ-Π²ΡΠΎΡΡΡ , ΠΎΠ½ Π·Π°Π΄Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΡΠΎΠ±ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΡΠ΅Π΄ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Web-ΡΡΡΠ°Π½ΠΈΡΡ.
β ΠΡΠΎΠ±ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ ΡΠ°ΠΌΠΊΡ.
β ΠΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡΠΎ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠ° (Ρ Π½Π°Ρ β Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ "ΠΡΠΈΠΌΠ΅Ρ: " ΡΠ΅ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ).
β ΠΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΌΡΡΡΡ Π½Π° ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ (Ρ. Π΅. ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅) Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ ΠΈΠ»ΠΈ ΡΠ½ΠΎΠ²Π° ΡΠΊΡΡΠ²Π°ΡΡΡΡ.
β ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠΎΡΠΎΠΌΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ²Π΅Ρ Π΅Π³ΠΎ ΡΠ°ΠΌΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ β ΡΠΎΡΠΌΡ ΠΊΡΡΡΠΎΡΠ° Π² Π²ΠΈΠ΄Π΅ "ΡΠΊΠ°Π·ΡΡΡΠ΅Π³ΠΎ ΠΏΠ΅ΡΡΡΠ°". Π’Π°ΠΊ ΠΌΡ Π΄Π°Π΄ΠΈΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Web-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° ΡΠ΅Π»ΡΠΊΠΈ ΠΌΡΡΡΡ.
β ΠΠ° Web-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠΈ Web-ΡΡΠ΅Π½Π°ΡΠΈΡ.
ΠΡΠΊΡΠΎΠ΅ΠΌ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ main.css ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π΅Π΅ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ:
sample { padding: 5px; border: thin dotted #B1BEC6 }
sample >:first-child { margin: 0px 0px; cursor: pointer }
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΠΈΠ»Ρ β ΡΡΠΎ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΊΠ»Π°ΡΡ sample, ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΊΠ°ΠΊ "Π²ΠΌΠ΅ΡΡΠΈΠ»ΠΈΡΠ΅" Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΠ½ Π·Π°Π΄Π°Π΅Ρ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ ΡΠ°ΠΌΠΊΠΈ.
ΠΡΠΎΡΠΎΠΉ ΡΡΠΈΠ»Ρ Π·Π°Π΄Π°Π΅Ρ Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠ° Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π½ΡΠ»Π΅Π²ΡΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ (ΡΡΠΎΠ±Ρ ΡΠ±ΡΠ°ΡΡ Π½Π΅Π½ΡΠΆΠ½ΠΎΠ΅ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π²ΡΡΠ΅ ΠΈ Π½ΠΈΠΆΠ΅ Π΅Π³ΠΎ) ΠΈ ΡΠΎΡΠΌΡ ΠΊΡΡΡΠΎΡΠ° Π² Π²ΠΈΠ΄Π΅ "ΡΠΊΠ°Π·ΡΡΡΠ΅Π³ΠΎ ΠΏΠ΅ΡΡΡΠ°".
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΠΎΠ΅ΠΌ ΡΠ°ΠΉΠ» Web-ΡΡΠ΅Π½Π°ΡΠΈΡ main.js ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π² Π΅Π³ΠΎ Π½Π°ΡΠ°Π»Π΅, ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠ·ΠΎΠ²ΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π° onReady ΠΎΠ±ΡΠ΅ΠΊΡΠ° Ext, ΠΊΠΎΠ΄ Π»ΠΈΡΡΠΈΠ½Π³Π° 16.9.
ΠΠΈΡΡΠΈΠ½Π³ 16.9
function showHideSample(e, t) {
var elDiv = Ext.fly(t). parent(".sample");
var ceSampleText = elDiv.select("*:not(:first-child)"); ceSampleText.setVisibilityMode(Ext.Element.DISPLAY); ceSampleText.toggle();
}
function prepareSamples() {
var ceSamples = Ext.select(".sample");
ceSamples.each(function(el, cl, ind){ var elH6 = el.child(":first"); elH6.on("click", showHideSample); elH6.on("mouseover", function(e, t) {
Ext.get(this). parent("DIV"). addClass("hovered");
});
elH6.on("mouseout", function(e, t) { Ext.get(this). parent("DIV"). removeClass("hovered");
});
var ceSampleText = el.select("*:not(:first-child)");
ceSampleText.setDisplayed(false);
});
}
ΠΡ ΠΎΠ±ΡΡΠ²ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ showHideSample ΠΈ prepareSamples. ΠΠ΅ΡΠ²Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ click Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈ Π² ΠΎΡΠ²Π΅Ρ Π½Π° ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΠΊΡΡΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ: ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ Web-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΊΡΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡ ΠΊ Π½ΠΈΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠΎΠ΄ ΡΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΠΎΡΡΡΠΎΡΠ½ΠΎ. Π Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΡΠ½ΠΊΡΠΈΠΈ prepareSamples.
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π²ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΌ ΡΡΠΈΠ»Π΅Π²ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ sample, Ρ. Π΅. ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²:
var ceSamples = Ext.select(".sample");
ΠΠ°ΡΠ΅ΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π΄Π°Π»Π΅Π΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ:
ceSamples.each(function(el, cl, ind){
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΠΎΡΠΎΠΌΠΎΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°:
var elH6 = el.child(":first");
ΠΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΊ Π½Π΅ΠΌΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΠΎΠ±ΡΡΠΈΡ click ΡΡΠ½ΠΊΡΠΈΡ
showHideSample:
elH6.on("click", showHideSample);
ΠΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΠΊ Π½Π΅ΠΌΡ ΡΡΠ½ΠΊΡΠΈΡ β ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ mouseover, ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΌ ΠΆΠ΅ ΠΈ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌ:
elH6.on("mouseover", function(e, t) { Ext.fly(this). parent("DIV"). addClass("hovered");
});
ΠΡΠ° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ»ΡΡΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅, Ρ. Π΅. ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΈ ΠΏΡΠΈΠ²ΡΠΆΠ΅Ρ ΠΊ Π½Π΅ΠΌΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΊΠ»Π°ΡΡ hovered.
ΠΠ΅ Π·Π°Π±ΡΠ²Π°Π΅ΠΌ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ-ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ mouseout, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΊΠ»Π°ΡΡ hovered:
elH6.on("mouseout", function(e, t) { Ext.fly(this). parent("DIV"). removeClass("hovered");
});
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° (Π½Π΅ ΡΠ²Π»ΡΡΡΠΈΠ΅ΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ):
var ceSampleText = el.select("*:not(:first-child)");
Π ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΈΡ :
ceSampleText.setDisplayed(false);
});
ΠΠ° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ β ΡΡΠ½ΠΊΡΠΈΡ showHideSample.
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅:
var elDiv = Ext.fly(t). parent(".sample");
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ ΠΏΠΎΡΠΎΠΌΠΊΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π·Π΄Π΅ΡΡ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΡΠ°ΠΌ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ.
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ-ΠΏΠΎΡΠΎΠΌΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π½Π΅ ΡΠ²Π»ΡΡΡΠΈΠ΅ΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ:
var ceSampleText = elDiv.select("*:not(:first-child)");
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π°ΡΡΠΈΠ±ΡΡ ΡΡΠΈΠ»Ρ display, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΈΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ (ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠΊΡΡΡΡ, ΠΈ ΡΠΊΡΡΠ²Π°Π΅ΠΌ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΎΡΠΊΡΡΡΡ):
ceSampleText.setVisibilityMode(Ext.Element.DISPLAY);
ceSampleText.toggle();
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π΄Π΅ΡΡ ΠΌΠ΅ΡΠΎΠ΄ toggle ΠΏΡΠΎΡΠ΅, ΡΠ΅ΠΌ setDisplayed β Π½Π°ΠΌ Π½Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ, ΠΎΡΠΊΡΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Web-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π΅Ρ. ΠΡΠ°Π²Π΄Π°, ΠΏΠ΅ΡΠ΅Π΄ ΡΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ ΡΡΠΈΠ»Ρ display, Π½ΠΎ ΡΡΠΎ ΠΌΠ΅Π»ΠΎΡΠΈ.
ΠΡΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π²ΡΠ·ΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΈ prepareSamples Π² ΡΠ°ΠΌΡΠΉ ΠΊΠΎΠ½Π΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Π΅ΠΌΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄Ρ onReady ΠΎΠ±ΡΠ΅ΠΊΡΠ° Ext:
prepareSamples();
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΊΡΠΎΠ΅ΠΌ Π»ΡΠ±ΡΡ Web-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ΅Π³Π° HTML ΠΈΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° ΡΡΠΈΠ»Ρ CSS, ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΡΠ΅ΠΊΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΌ ΡΡΠΈΠ»Π΅Π²ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ sample. ΠΠΈΡΡΠΈΠ½Π³ 16.10 ΠΈΠ»Π»ΡΡΡΡΠΈΡΡΠ΅Ρ HTML-ΠΊΠΎΠ΄ Web-ΡΡΡΠ°Π½ΠΈΡΡ t_audio.htm.
ΠΠΈΡΡΠΈΠ½Π³ 16.10
<DIV CLASS="sample">
<H6>ΠΡΠΈΠΌΠ΅Ρ:</H6>
<PRE><AUDIO SRC="sound.wav" CONTROLS></AUDIO></PRE>
<H6>Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:</H6>
<AUDIO SRC="sound.wav" CONTROLS></AUDIO>
</DIV>
ΠΠ½Π΅ΡΠ΅ΠΌ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅ Web-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ ΠΈΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
Π§ΡΠΎ Π΄Π°Π»ΡΡΠ΅?
Π ΡΡΠΎΠΉ Π³Π»Π°Π²Π΅ ΠΌΡ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Web-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π½Π° Π½Π°ΡΠΈΡ Web-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π½Π°ΡΡΠΎΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΎΠΉ ΠΏΡΠ½ΠΊΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ, Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠ½ΠΊΡΠ°, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΎΡΠΊΡΡΡΠΎΠΉ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Web-ΡΡΡΠ°Π½ΠΈΡΠ΅, Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ ΡΠ΅Π»ΡΠΊΠΎΠ² Π½Π° Π²ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅ ΠΏΡΠ½ΠΊΡΠΎΠ². ΠΡ Π·Π°ΡΡΠ°Π²ΠΈΠ»ΠΈ Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π² ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠΊΠ½Π° Web- ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Ρ. Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΈ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Π§Π°ΡΡΡ IV Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΡΠ°ΠΌΡΠΌ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°ΠΌ Π² Web-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ Web- ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ: ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠΌΡ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΈ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅. Π£ΠΆΠ΅ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π³Π»Π°Π²Π΅ ΠΌΡ Π½Π°ΡΡΠΈΠΌΡΡ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Web-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ· ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ext Core Π½Π°ΠΌ Π² ΡΡΠΎΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ.
Π§ΠΠ‘Π’Π¬ 4. ΠΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠΠΠΠ 17. ΠΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ ΠΌΡ Π½Π°ΡΠ°Π»ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ Web-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ: ΠΈΠ·ΡΡΠΈΠ»ΠΈ ΡΠ·ΡΠΊ JavaScript, ΠΏΡΠ°Π²ΠΈΠ»Π° Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Web-ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Ext Core ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠΈΡ Web-ΡΡΡΠ°Π½ΠΈΡ, ΠΏΡΠΈΡΠ΅ΠΌ Π²Π΅ΡΡΠΌΠ° ΡΠ°Π·Π²ΠΈΡΠΎΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π½Π°Ρ Web- ΡΠ°ΠΉΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. Π‘ΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π±Π»ΠΎΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ Π½Π° Web-ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΠ»ΠΎΡΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ "Π³ΠΎΡΡΡΠΈΠΌΠΈ" ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ β Π²ΡΠ΅ ΡΡΠΎ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ. ΠΠΎ ΡΠΆΠ΅ Π½ΠΈΠΊΠΎΠ³ΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π΅ ΡΠ΄ΠΈΠ²Π»ΡΠ΅Ρ. Π Π‘Π΅ΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Web-ΡΠ°ΠΉΡΠΎΠ², ΡΠ΅Π³ΠΎΠ»ΡΡΡΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌΠΈ "ΡΡΡΠΊΠΎΠ²ΠΈΠ½Π°ΠΌΠΈ". ΠΡΠ΅ ΡΡΠΎ β ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΏΡΠΎΠΉΠ΄Π΅Π½Π½ΡΠΉ ΡΡΠ°ΠΏ Π² ΡΠ°Π·Π²ΠΈΡΠΈΠΈ Web-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ Π½ΠΎΠ²ΠΎΠ΅. ΠΡΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ΅Π΅. ΠΡΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅. Π ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ΡΡΡΠ΅Π΅ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ Π²ΡΠ³ΠΎΠ΄Ρ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ β ΠΈΠ½Π°ΡΠ΅ Π³ΡΠΎΡ Π΅ΠΌΡ ΡΠ΅Π½Π°. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ, Π½Π°Ρ ΠΎΠ΄ΡΡΠΈΠΌΠΈΡΡ Π½Π° ΠΏΠ΅ΡΠ΅Π΄Π½Π΅ΠΌ ΠΊΡΠ°Π΅ Web-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ Π½Π° Π½Π°ΡΠΈΡ Web-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ , Π²ΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΠΎ-Π²ΡΠΎΡΡΡ , Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²-ΡΡΠ΅ΡΡΠΈΡ , ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ Π΄Π°Π½Π½ΡΡ . Π ΠΎΡ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΠΎΠ»ΡΠ·Ρ. ΠΠ°Π½Π½Π°Ρ Π³Π»Π°Π²Π° ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ β ΡΠ°ΠΌΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.
ΠΠΎΠ½ΠΎΠ»ΠΈΡΠ½ΡΠ΅ ΠΈ Π±Π»ΠΎΡΠ½ΡΠ΅ Web-ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ± ΡΡΠΎΠΌ ΡΠΆΠ΅ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ Π² Π³Π»Π°Π²Π΅ 10, ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΠΎΠΉ Π±Π»ΠΎΡΠ½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ½ΠΎΠΌΡ Web-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ. ΠΠ°ΡΡΠ°Π»Π° ΠΏΠΎΡΠ° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΠΎΠΏΡΠΎΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΎΡΠΊΡΠΎΠ΅ΠΌ Π»ΡΠ±ΡΡ Π½Π°ΡΡ Web-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, index.htm, Π² Web-ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Π΅. Π§ΡΠΎ ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌ? ΠΠ°Π±ΠΎΡ Π±Π»ΠΎΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Web-ΡΠ°ΠΉΡΠ°, ΠΏΠΎΠ»ΠΎΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΠ± Π°Π²ΡΠΎΡΡΠΊΠΈΡ ΠΏΡΠ°Π²Π°Ρ . ΠΡΠ΅ ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Web- ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ Π² Π΅Π΅ HTML-ΠΊΠΎΠ΄Π΅.
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° HTML-ΠΊΠΎΠ΄ ΡΡΠΎΠΉ Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΎΡΠΊΡΠΎΠ΅ΠΌ Π΅Π΅ Π² ΠΠ»ΠΎΠΊΠ½ΠΎΡΠ΅. ΠΠ°, Π΅Π΅ HTML-ΠΊΠΎΠ΄ Π²Π΅Π»ΠΈΠΊβ¦ ΠΠ΅ΠΌΠ°Π»ΠΎ ΠΌΠ΅ΡΡΠ° ΠΎΡΠ²Π΅Π΄Π΅Π½ΠΎ ΠΊΠΎΠ΄Ρ, ΡΠΎΠ·Π΄Π°ΡΡΠ΅ΠΌΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Web-ΡΡΡΠ°Π½ΠΈΡΡ: ΡΠ°ΠΌ ΠΈ Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠΈΡΠ°ΡΠ°, ΠΈ ΡΠΏΠΈΡΠΎΠΊ, ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ°Π±Π»ΠΈΡΠ°.