Работа в Internet и создание web-страниц: Учебное пособие

ɎȿȾȿɊȺɅɖɇɈȿ ȺȽȿɇɌɋɌȼɈ ɉɈ ɈȻɊȺɁɈȼȺɇɂɘ ȽɈɋɍȾȺɊɋɌȼȿɇɇɈȿ ɈȻɊȺɁɈȼȺɌȿɅɖɇɈȿ ɍɑɊȿɀȾȿɇɂȿ ȼɕɋɒȿȽɈ ɉɊɈɎȿɋɋɂɈɇȺɅɖɇɈȽɈ ɈȻɊȺɁɈȼȺɇɂə «ȼɈɊɈɇȿɀɋɄɂɃ ȽɈɋɍȾȺɊɋɌȼȿɇɇɕɃ ɍɇɂȼȿɊɋɂɌȿɌ»

ɊȺȻɈɌȺ ȼ INTERNET ɂ ɋɈɁȾȺɇɂȿ WEB-ɋɌɊȺɇɂɐ ɍɱɟɛɧɨɟ ɩɨɫɨɛɢɟ ɞɥɹ ɜɭɡɨɜ

ɂɡɞɚɬɟɥɶɫɤɨ-ɩɨɥɢɝɪɚɮɢɱɟɫɤɢɣ ɰɟɧɬɪ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ 2007

ɍɬɜɟɪɠɞɟɧɨ ɧɚɭɱɧɨ-ɦɟɬɨɞɢɱɟɫɤɢɦ 26 ɞɟɤɚɛɪɹ 2006 ɝ., ɩɪɨɬɨɤɨɥ ʋ 4

ɫɨɜɟɬɨɦ

ȼȽɍ

ɮɚɤɭɥɶɬɟɬɚ

ɉɆɆ

Ⱥɜɬɨɪɵ: Ɇ.ȿ. ɗɤɫɚɪɟɜɫɤɚɹ, Ⱥ.ɂ. ɒɚɲɤɢɧ, Ɍ.ɇ. Ƚɥɭɲɚɤɨɜɚ, Ɉ.ɂ. ɓɟɬɢɧɢɧɚ

ɇɚɭɱɧɵɣ ɪɟɞɚɤɬɨɪ ɂ.Ȼ. Ʉɪɵɠɤɨ

ɍɱɟɛɧɨɟ ɩɨɫɨɛɢɟ ɩɨɞɝɨɬɨɜɥɟɧɨ ɧɚ ɤɚɮɟɞɪɟ ɜɵɱɢɫɥɢɬɟɥɶɧɨɣ ɦɚɬɟɦɚɬɢɤɢ ɢ ɩɪɢɤɥɚɞɧɵɯ ɢɧɮɨɪɦɚɰɢɨɧɧɵɯ ɬɟɯɧɨɥɨɝɢɣ ɮɚɤɭɥɶɬɟɬɚ ɉɆɆ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ. Ɋɟɤɨɦɟɧɞɭɟɬɫɹ ɞɥɹ ɫɬɭɞɟɧɬɨɜ 4 ɢ 5 ɤɭɪɫɨɜ ɞ/ɨ ɮɚɤɭɥɶɬɟɬɚ ɉɆɆ.

Ⱦɥɹ ɫɩɟɰɢɚɥɶɧɨɫɬɢ: 010500 (510200) – ɉɪɢɤɥɚɞɧɚɹ ɦɚɬɟɦɚɬɢɤɚ ɢ ɢɧɮɨɪɦɚɬɢɤɚ ɋȾɆ. 04 2

ȼɜɟɞɟɧɢɟ Ɋɚɫɩɪɨɫɬɪɚɧɟɧɢɟ ɂɧɬɟɪɧɟɬ-ɬɟɯɧɨɥɨɝɢɣ ɜ ɫɨɜɪɟɦɟɧɧɨɦ ɦɢɪɟ ɞɨɫɬɢɝɥɨ ɜɵɫɨɱɚɣɲɟɝɨ ɭɪɨɜɧɹ. ɉɪɢ ɷɬɨɦ ɛɨɥɶɲɨɟ ɡɧɚɱɟɧɢɟ ɩɪɢɨɛɪɟɬɚɸɬ ɧɟ ɬɨɥɶɤɨ ɫɬɚɬɢɱɟɫɤɢɟ web-ɫɬɪɚɧɢɰɵ ɢ ɢɧɮɨɪɦɚɰɢɨɧɧɵɟ web-ɫɚɣɬɵ, ɧɨ ɢ ɩɨɥɧɨɰɟɧɧɵɟ web-ɩɪɢɥɨɠɟɧɢɹ, ɞɚɸɳɢɟ ɜɨɡɦɨɠɧɨɫɬɶ ɞɨɫɬɭɩɚ ɤ ɧɟɨɛɯɨɞɢɦɵɦ ɪɟɫɭɪɫɚɦ ɩɪɚɤɬɢɱɟɫɤɢ ɢɡ ɥɸɛɨɣ ɬɨɱɤɢ ɡɟɦɧɨɝɨ ɲɚɪɚ, ɧɟ ɬɪɟɛɭɹ ɩɪɢ ɷɬɨɦ ɨɬ ɩɨɥɶɡɨɜɚɬɟɥɟɣ ɧɢɤɚɤɨɝɨ ɫɩɟɰɢɚɥɶɧɨɝɨ ɩɪɨɝɪɚɦɦɧɨɝɨ ɨɛɟɫɩɟɱɟɧɢɹ, ɤɪɨɦɟ ɫɬɚɧɞɚɪɬɧɨɝɨ web-ɛɪɚɭɡɟɪɚ. Ɉɫɧɨɜɨɣ ɫɨɡɞɚɧɢɹ ɤɚɤ ɫɬɚɬɢɱɟɫɤɢɯ web-ɫɬɪɚɧɢɰ, ɬɚɤ ɢ ɞɢɧɚɦɢɱɟɫɤɢɯ ɩɪɢɥɨɠɟɧɢɣ, ɹɜɥɹɟɬɫɹ ɝɢɩɟɪɬɟɤɫɬɨɜɵɣ ɹɡɵɤ ɪɚɡɦɟɬɤɢ HTML, ɤɨɧɫɬɪɭɤɰɢɢ ɤɨɬɨɪɨɝɨ ɢɧɬɟɪɩɪɟɬɢɪɭɸɬɫɹ web-ɛɪɚɭɡɟɪɨɦ. ȼ ɧɚɫɬɨɹɳɟɦ ɭɱɟɛɧɨ-ɦɟɬɨɞɢɱɟɫɤɨɦ ɩɨɫɨɛɢɢ ɪɚɫɫɦɚɬɪɢɜɚɸɬɫɹ ɨɫɧɨɜɧɵɟ ɷɥɟɦɟɧɬɵ ɢ ɤɨɧɫɬɪɭɤɰɢɢ ɹɡɵɤɚ HTML, ɢɫɩɨɥɶɡɭɟɦɵɟ ɞɥɹ ɫɨɡɞɚɧɢɹ HTML-ɫɬɪɚɧɢɰ. ɉɨɞɪɨɛɧɨ ɨɩɢɫɵɜɚɸɬɫɹ ɫɩɨɫɨɛɵ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɬɟɤɫɬɚ, ɩɪɟɞɫɬɚɜɥɟɧɢɹ ɫɩɢɫɤɨɜ ɢ ɬɚɛɥɢɰ, ɝɪɚɮɢɤɢ, ɝɢɩɟɪɫɫɵɥɨɤ, ɨɪɝɚɧɢɡɚɰɢɹ ɮɨɪɦ ɜɜɨɞɚ ɧɚ ɨɫɧɨɜɟ HTML. ȼɬɨɪɚɹ ɱɚɫɬɶ ɩɨɫɨɛɢɹ ɩɨɫɜɹɳɟɧɚ ɪɚɫɫɦɨɬɪɟɧɢɸ ɦɟɯɚɧɢɡɦɚ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ CSS, ɨɛɟɫɩɟɱɢɜɚɸɳɟɝɨ ɝɢɛɤɨɫɬɶ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɫɬɪɚɧɢɰ ɢ ɛɵɫɬɪɵɣ ɫɩɨɫɨɛ ɢɡɦɟɧɟɧɢɹ ɞɢɡɚɣɧɚ ɢ ɜɧɟɲɧɟɝɨ ɜɢɞɚ ɫɬɪɚɧɢɰɵ. ɇɚ ɨɫɧɨɜɟ ɦɚɬɟɪɢɚɥɚ, ɩɪɢɜɟɞɟɧɧɨɝɨ ɜ ɞɚɧɧɨɦ ɩɨɫɨɛɢɢ, ɫɬɭɞɟɧɬɵ ɨɫɜɨɹɬ ɜɫɟ ɨɫɧɨɜɧɵɟ ɚɫɩɟɤɬɵ ɫɨɡɞɚɧɢɹ HTML ɫɬɪɚɧɢɰ, ɱɬɨ ɛɭɞɟɬ ɹɜɥɹɬɶɫɹ ɛɚɡɨɣ ɞɥɹ ɢɡɭɱɟɧɢɹ ɢɦɢ ɛɨɥɟɟ ɫɥɨɠɧɵɯ ɂɧɬɟɪɧɟɬ-ɬɟɯɧɨɥɨɝɢɣ, ɬɚɤɢɯ ɤɚɤ ɫɨɡɞɚɧɢɟ web-ɩɪɢɥɨɠɟɧɢɣ. ɋɬɪɭɤɬɭɪɚ ɹɡɵɤɚ HTML ɗɥɟɦɟɧɬɵ HTML HTML ɹɜɥɹɟɬɫɹ ɩɪɢɥɨɠɟɧɢɟɦ ɹɡɵɤɚ SGML, ɩɨɷɬɨɦɭ ɭɧɚɫɥɟɞɨɜɚɥ ɧɟɤɨɬɨɪɵɟ ɫɬɪɭɤɬɭɪɧɵɟ ɟɞɢɧɢɰɵ ɢ ɛɚɡɨɜɵɟ ɤɨɧɫɬɪɭɤɰɢɢ. ɗɥɟɦɟɧɬ HTML – ɷɬɨ ɛɚɡɨɜɵɣ ɫɬɪɭɤɬɭɪɧɵɣ ɛɥɨɤ HTML-ɞɨɤɭɦɟɧɬɚ, ɤɨɬɨɪɵɣ ɪɚɡɦɟɳɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɬɟɝɨɜ. HTML-ɷɥɟɦɟɧɬ ɩɨɱɬɢ ɜɫɟɝɞɚ ɫɨɫɬɨɢɬ ɢɡ: x x

ɨɬɤɪɵɜɚɸɳɟɝɨɫɹ ɬɟɝɚ, ɜ ɤɨɬɨɪɨɦ ɪɚɫɩɨɥɚɝɚɸɬɫɹ ɧɚɡɜɚɧɢɟ ɢ ɚɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɚ; ɫɨɞɟɪɠɢɦɨɝɨ; 3

x ɡɚɤɪɵɜɚɸɳɟɝɨ ɬɟɝɚ. ɗɥɟɦɟɧɬɵ, ɨɛɪɚɡɨɜɚɧɧɵɟ ɩɨ ɷɬɨɣ ɫɯɟɦɟ, ɧɚɡɵɜɚɸɬ ɷɥɟɦɟɧɬɚɦɢɤɨɧɬɟɣɧɟɪɚɦɢ. ɂɫɤɥɸɱɟɧɢɟɦ ɹɜɥɹɸɬɫɹ ɨɞɢɧɨɱɧɵɟ, ɢɥɢ ɩɭɫɬɵɟ, ɷɥɟɦɟɧɬɵ, ɤɨɬɨɪɵɟ ɩɪɟɞɫɬɚɜɥɟɧɵ ɬɨɥɶɤɨ ɨɞɧɢɦ, ɨɬɤɪɵɜɚɸɳɢɦ, ɬɟɝɨɦ. ɇɚɡɜɚɧɢɹ ɷɥɟɦɟɧɬɨɜ HTML ɧɟ ɱɭɜɫɬɜɢɬɟɥɶɧɵ ɤ ɪɟɝɢɫɬɪɭ (ɜ ɹɡɵɤɟ XHTML ɬɟɝɢ ɦɨɝɭɬ ɛɵɬɶ ɬɨɥɶɤɨ ɧɢɠɧɟɝɨ ɪɟɝɢɫɬɪɚ). Ɍɢɩɵ ɞɚɧɧɵɯ ɋɨɞɟɪɠɢɦɨɟ ɷɥɟɦɟɧɬɨɜ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɜ ɫɟɛɹ ɪɚɡɥɢɱɧɵɟ ɬɢɩɵ ɞɚɧɧɵɯ. Ɍɟɤɫɬɨɜɵɟ ɫɬɪɨɤɢ. ɉɪɟɞɫɬɚɜɥɹɸɬ ɫɨɛɨɣ ɩɨɫɥɟɞɨɜɚɬɟɥɶɧɨɫɬɶ ɫɢɦɜɨɥɨɜ (ɛɭɤɜɵ, ɰɢɮɪɵ, ɡɧɚɤɢ ɩɭɧɤɬɭɚɰɢɢ, ɦɚɬɟɦɚɬɢɱɟɫɤɢɟ ɡɧɚɤɢ ɢ ɬ. ɞ.). ȼ ɩɪɨɰɟɫɫɟ ɨɛɪɚɛɨɬɤɢ ɫɬɪɨɤɨɜɵɯ ɞɚɧɧɵɯ ɛɪɚɭɡɟɪ ɢɝɧɨɪɢɪɭɟɬ ɫɢɦɜɨɥɵ ɩɟɪɟɜɨɞɚ ɫɬɪɨɤɢ, ɢ ɧɟɫɤɨɥɶɤɨ ɩɨɞɪɹɞ ɢɞɭɳɢɯ ɩɪɨɛɟɥɨɜ ɡɚɦɟɧɹɸɬɫɹ ɨɞɧɢɦ. ɋɢɦɜɨɥɶɧɵɟ ɨɛɴɟɤɬɵ. ɂɫɩɨɥɶɡɭɸɬɫɹ ɜ HTML-ɞɨɤɭɦɟɧɬɟ ɞɥɹ ɤɨɞɢɪɨɜɚɧɢɹ ɫɢɦɜɨɥɨɜ, ɤɨɬɨɪɵɟ ɨɬɫɭɬɫɬɜɭɸɬ ɜ ɞɚɧɧɨɣ ɤɨɞɢɪɨɜɤɟ, ɧɚ ɤɥɚɜɢɚɬɭɪɟ. ȼɫɟ ɫɢɦɜɨɥɶɧɵɟ ɨɛɴɟɤɬɵ ɧɚɱɢɧɚɸɬɫɹ ɡɧɚɤɨɦ ɚɦɩɟɪɫɚɧɞɚ «&» ɢ ɡɚɤɚɧɱɢɜɚɸɬɫɹ ɬɨɱɤɨɣ ɫ ɡɚɩɹɬɨɣ. ɋɢɦɜɨɥɵ ɤɨɞɢɪɭɸɬɫɹ ɫ ɩɨɦɨɳɶɸ ɛɭɤɜɟɧɧɵɯ ɫɨɱɟɬɚɧɢɣɥɢɬɟɪɚɥɨɜ ɢɥɢ ɫ ɩɨɦɨɳɶɸ ɰɢɮɪ (ɞɨɛɚɜɥɹɟɬɫɹ ɫɢɦɜɨɥ «#»). ɉɪɢɦɟɪ > – ɡɧɚɤ «ɛɨɥɶɲɟ» — – ɡɧɚɤ ɬɢɪɟ. ɐɜɟɬ. Ⱥɬɪɢɛɭɬɵ ɦɧɨɝɢɯ ɷɥɟɦɟɧɬɨɜ HTML ɨɩɪɟɞɟɥɹɸɬ ɰɜɟɬ ɤɚɤɨɝɨ-ɥɢɛɨ ɷɥɟɦɟɧɬɚ web-ɫɬɪɚɧɢɰɵ. Ⱦɥɹ ɤɨɞɢɪɨɜɚɧɢɹ ɢɫɩɨɥɶɡɭɟɬɫɹ ɰɜɟɬɨɜɚɹ ɫɢɫɬɟɦɚ RGB. əɪɤɨɫɬɶ ɤɚɧɚɥɨɜ ɤɪɚɫɧɨɝɨ, ɡɟɥɟɧɨɝɨ ɢ ɫɢɧɟɝɨ ɰɜɟɬɨɜ ɜ HTML ɡɚɞɚɟɬɫɹ ɩɨ ɫɥɟɞɭɸɳɟɣ ɫɯɟɦɟ: #rrggbb, ɝɞɟ rr, gg, bb – ɱɢɫɥɚ ɨɬ 0 ɞɨ 255 (ɜ ɲɟɫɬɧɚɞɰɚɬɟɪɢɱɧɨɣ ɫɢɫɬɟɦɟ ɫɱɢɫɥɟɧɢɹ). ȼ HTML ɩɪɟɞɭɫɦɨɬɪɟɧɵ ɬɟɤɫɬɨɜɵɟ ɤɨɧɫɬɚɧɬɵ ɰɜɟɬɚ. ɉɪɢɦɟɪ color= ”#FF0000” – ɤɪɚɫɧɵɣ; color=“#EE82EE” – ɮɢɨɥɟɬɨɜɵɣ; color=“violet” – ɮɢɨɥɟɬɨɜɵɣ. MIME-ɬɢɩɵ ɞɚɧɧɵɯ. MIME – ɷɬɨ ɫɨɤɪɚɳɟɧɢɟ ɞɥɹ Multipurpose Internet Mail Extentions (ɦɧɨɝɨɰɟɥɟɜɵɟ ɪɚɫɲɢɪɟɧɢɹ ɞɥɹ ɢɧɬɟɪɧɟɬ-ɩɨɱɬɵ). 4

ɂɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɨɩɢɫɚɧɢɹ ɬɢɩɨɜ ɞɚɧɧɵɯ, ɫɨɞɟɪɠɚɳɢɯɫɹ ɜ ɞɨɤɭɦɟɧɬɟ. MIME-ɬɢɩ ɞɚɧɧɵɯ ɭɤɚɡɵɜɚɟɬɫɹ ɫɥɟɞɭɸɳɢɦ ɨɛɪɚɡɨɦ: «ɬɢɩ ɮɚɣɥɚ/ɮɨɪɦɚɬ» ɢ ɞɥɹ ɚɬɪɢɛɭɬɚ type ɢɦɟɟɬ, ɧɚɩɪɢɦɟɪ, ɬɚɤɨɣ ɜɢɞ: type = “text/css”. ȿɞɢɧɢɰɵ ɢɡɦɟɪɟɧɢɹ Ⱥɛɫɨɥɸɬɧɵɟ. Ɇɨɠɧɨ ɪɚɡɞɟɥɢɬɶ ɧɚ ɞɜɟ ɝɪɭɩɩɵ: x ɪɟɚɥɶɧɵɟ ɟɞɢɧɢɰɵ. ɂɫɩɨɥɶɡɭɸɬɫɹ, ɤɨɝɞɚ ɬɨɱɧɨ ɢɡɜɟɫɬɧɵ ɩɚɪɚɦɟɬɪɵ ɭɫɬɪɨɣɫɬɜɚ, ɨɛɪɚɛɚɬɵɜɚɸɳɟɝɨ HTML-ɫɬɪɚɧɢɰɭ; x «ɩɨɥɢɝɪɚɮɢɱɟɫɤɢɟ» ɟɞɢɧɢɰɵ. ɉɪɢɦɟɧɹɸɬɫɹ ɜ ɬɢɩɨɝɪɚɮɫɤɨɦ ɞɟɥɟ ɞɥɹ ɭɫɬɚɧɨɜɤɢ ɤɟɝɥɹ ɲɪɢɮɬɚ, ɟɝɨ ɧɚɱɟɪɬɚɧɢɹ ɢ ɬ. ɩ. Ɉɬɧɨɫɢɬɟɥɶɧɵɟ. ɗɬɢ ɟɞɢɧɢɰɵ ɢɡɦɟɪɟɧɢɹ ɭɫɬɚɧɚɜɥɢɜɚɸɬ ɪɚɡɦɟɪ ɨɬɧɨɫɢɬɟɥɶɧɨ ɤɚɤɨɣ-ɥɢɛɨ ɢɡɜɟɫɬɧɨɣ ɜɟɥɢɱɢɧɵ. Ʉ ɟɞɢɧɢɰɚɦ ɢɡɦɟɪɟɧɢɹ ɷɬɨɣ ɝɪɭɩɩɵ ɨɬɧɨɫɹɬɫɹ: em, ex, px, %. ɉɨ ɭɦɨɥɱɚɧɢɸ ɜɫɟ ɪɚɡɦɟɪɵ ɜ HTML-ɤɨɞɟ ɭɫɬɚɧɚɜɥɢɜɚɸɬɫɹ ɜ ɩɢɤɫɟɥɹɯ. ɗɬɨ ɨɡɧɚɱɚɟɬ, ɱɬɨ ɡɚɩɢɫɶ width=”100” ɛɪɚɭɡɟɪ ɜ ɛɨɥɶɲɢɧɫɬɜɟ ɫɥɭɱɚɟɜ ɨɛɪɚɛɨɬɚɟɬ ɤɚɤ «ɲɢɪɢɧɚ – 100 ɩɢɤɫɟɥɟɣ». Ɉɞɧɚɤɨ ɪɚɡɦɟɪɵ ɜ ɩɢɤɫɟɥɹɯ ɥɭɱɲɟ ɡɚɞɚɜɚɬɶ ɹɜɧɨ, ɧɚɩɪɢɦɟɪ: width=”100px”. ɋɨɡɞɚɧɢɟ web-ɫɬɪɚɧɢɰɵ ɢ ɜɜɨɞ ɬɟɤɫɬɚ Ɇɨɠɧɨ ɩɢɫɚɬɶ HTML-ɤɨɞ, ɢɫɩɨɥɶɡɭɹ ɨɛɵɱɧɵɣ ɬɟɤɫɬɨɜɵɣ ɪɟɞɚɤɬɨɪ, ɬɚɤɨɣ ɤɚɤ Notepad, ɩɪɨɫɬɨ ɧɚɛɢɪɚɹ ɬɟɤɫɬ ɢ ɫɨɯɪɚɧɹɹ ɟɝɨ ɫ ɩɨɦɨɳɶɸ ɤɨɦɚɧɞɵ «ɋɨɯɪɚɧɢɬɶ ɤɚɤ» ɫ ɪɚɫɲɢɪɟɧɢɟɦ .htm ɢɥɢ .html. Ⱦɥɹ ɩɪɨɫɦɨɬɪɚ ɮɚɣɥɚ ɨɬɤɪɨɣɬɟ ɟɝɨ ɜ ɨɤɧɟ ɛɪɚɭɡɟɪɚ. ȿɫɥɢ ɜ HTML-ɮɚɣɥ ɜɧɨɫɹɬɫɹ ɢɡɦɟɧɟɧɢɹ ɢ ɧɚɞɨ ɩɨɫɦɨɬɪɟɬɶ, ɤɚɤ ɨɧɢ ɩɨɜɥɢɹɸɬ ɧɚ ɜɧɟɲɧɢɣ ɜɢɞ web-ɫɬɪɚɧɢɰɵ, ɮɚɣɥ ɫɧɚɱɚɥɚ ɧɭɠɧɨ ɫɨɯɪɚɧɢɬɶ, ɚ ɡɚɬɟɦ ɨɬɤɪɵɬɶ ɜ ɛɪɚɭɡɟɪɟ. ȿɫɥɢ HTML-ɞɨɤɭɦɟɧɬ ɭɠɟ ɡɚɝɪɭɠɟɧ ɜ ɨɤɧɨ ɛɪɚɭɡɟɪɚ, ɟɝɨ ɧɭɠɧɨ ɨɛɧɨɜɢɬɶ (ɨɩɰɢɹ «Ɉɛɧɨɜɢɬɶ», ɤɥɚɜɢɲɚ F5). HTML-ɞɨɤɭɦɟɧɬ ɹɜɧɨ ɪɚɡɛɢɜɚɟɬɫɹ ɧɚ ɞɜɟ ɱɚɫɬɢ – head (ɡɚɝɨɥɨɜɨɤ) ɢ body (ɬɟɥɨ). ɋɨɡɞɚɬɶ ɡɚɝɨɥɨɜɨɤ HTML-ɞɨɤɭɦɟɧɬɚ ɢ ɞɚɬɶ ɞɨɤɭɦɟɧɬɭ ɧɚɡɜɚɧɢɟ ɦɨɠɧɨ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɨɜ ɢ . Ⱦɥɹ ɷɬɨɝɨ ɧɚɛɟɪɢɬɟ ɜ ɜɚɲɟɦ HTML-ɪɟɞɚɤɬɨɪɟ ɫɥɟɞɭɸɳɟɟ: 5

Ⱦɨɦɚɲɧɹɹ ɫɬɪɚɧɢɱɤɚ Ɉɛɪɚɬɢɬɟ ɜɧɢɦɚɧɢɟ, ɱɬɨ ɧɚɡɜɚɧɢɟ HTML-ɞɨɤɭɦɟɧɬɚ – ɧɟ ɨɞɧɨ ɢ ɬɨ ɠɟ, ɱɬɨ ɧɚɡɜɚɧɢɟ (ɢɦɹ) HTML-ɮɚɣɥɚ. ɇɚɡɜɚɧɢɟ ɞɨɤɭɦɟɧɬɚ, ɜɤɥɸɱɟɧɧɨɟ ɜ ɷɥɟɦɟɧɬ , ɨɬɨɛɪɚɠɚɟɬɫɹ ɜ ɨɤɧɟ ɛɪɚɭɡɟɪɚ. ɂɦɹ ɮɚɣɥɚ ɢɞɟɧɬɢɮɢɰɢɪɭɟɬ ɞɨɤɭɦɟɧɬ ɧɚ ɠɟɫɬɤɨɦ ɞɢɫɤɟ. ɗɥɟɦɟɧɬ ɫɨɞɟɪɠɢɬ ɜɫɺ, ɱɬɨ ɛɪɚɭɡɟɪ ɛɭɞɟɬ ɜɨɫɩɪɢɧɢɦɚɬɶ ɤɚɤ ɨɫɧɨɜɧɨɟ ɫɨɞɟɪɠɚɧɢɟ ɫɬɪɚɧɢɰɵ – ɬɟɤɫɬ, ɝɪɚɮɢɤɭ, ɡɚɝɨɥɨɜɤɢ, ɬɚɛɥɢɰɵ. Ɍɟɝɢ ɢ ɞɨɛɚɜɥɹɸɬ ɞɥɹ ɬɨɝɨ, ɱɬɨɛɵ ɜɫɟ web-ɛɪɚɭɡɟɪɵ ɦɨɝɥɢ ɪɚɫɩɨɡɧɚɬɶ, ɱɬɨ ɩɟɪɟɞ ɧɢɦɢ HTML-ɞɨɤɭɦɟɧɬ.ɗɥɟɦɟɧɬɵ , , , – ɷɥɟɦɟɧɬɵ-ɤɨɧɬɟɣɧɟɪɵ, ɫɨɞɟɪɠɚɳɢɟ ɛɥɨɤɢ ɬɟɤɫɬɚ ɢ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ ɦɟɠɞɭ ɨɬɤɪɵɜɚɸɳɢɦ ɢ ɡɚɤɪɵɜɚɸɳɢɦ ɬɟɝɚɦɢ. Ɉɞɢɧɨɱɧɵɟ (ɩɭɫɬɵɟ) ɷɥɟɦɟɧɬɵ ɜɵɩɨɥɧɹɸɬ ɨɫɨɛɭɸ ɮɭɧɤɰɢɸ. ɇɚɩɪɢɦɟɪ, ɜɫɬɚɜɥɹɟɬ ɧɚ web-ɫɬɪɚɧɢɰɭ ɝɨɪɢɡɨɧɬɚɥɶɧɭɸ ɥɢɧɢɸ. Ȼɥɨɱɧɵɟ ɷɥɟɦɟɧɬɵ ɩɨ ɭɦɨɥɱɚɧɢɸ ɧɚɱɢɧɚɸɬɫɹ ɫ ɧɨɜɨɣ ɫɬɪɨɤɢ ɢ ɨɬɞɟɥɹɸɬɫɹ ɫɧɢɡɭ ɫɬɪɨɤɨɣ. Ɍɚɤɢɟ ɷɥɟɦɟɧɬɵ ɦɨɝɭɬ ɫɨɞɟɪɠɚɬɶ ɤɚɤ ɞɪɭɝɢɟ ɛɥɨɱɧɵɟ ɷɥɟɦɟɧɬɵ, ɬɚɤ ɢ ɷɥɟɦɟɧɬɵ ɭɪɨɜɧɹ ɫɬɪɨɤɢ. Ȼɥɨɱɧɵɦɢ ɷɥɟɦɟɧɬɚɦɢ ɹɜɥɹɸɬɫɹ: ɚɛɡɚɰɵ

, ɬɚɛɥɢɰɵ

, ɡɚɝɨɥɨɜɤɢ – , ɫɩɢɫɤɢ

, , , ɝɨɪɢɡɨɧɬɚɥɶɧɚɹ ɥɢɧɢɹ-ɪɚɡɞɟɥɢɬɟɥɶ ɢ ɞɪɭɝɢɟ. ȼɧɭɬɪɢɫɬɪɨɱɧɵɟ ɷɥɟɦɟɧɬɵ ɩɨ ɭɦɨɥɱɚɧɢɸ ɜɵɜɨɞɹɬɫɹ ɛɪɚɭɡɟɪɨɦ ɞɪɭɝ ɡɚ ɞɪɭɝɨɦ ɜ ɬɟɤɭɳɟɣ ɫɬɪɨɤɟ. ɗɬɨ ɪɢɫɭɧɤɢ, ɷɥɟɦɟɧɬɵ ɮɨɪɦ, ɨɛɵɱɧɵɣ ɬɟɤɫɬ. Web-ɛɪɚɭɡɟɪɵ ɢɝɧɨɪɢɪɭɸɬ ɦɧɨɠɟɫɬɜɟɧɧɵɟ ɩɪɨɛɟɥɵ ɢ ɩɟɪɟɧɨɫɵ ɫɬɪɨɤ. Ⱦɥɹ ɬɨɝɨ ɱɬɨɛɵ ɡɚɞɚɬɶ ɪɚɡɛɢɟɧɢɟ ɧɚ ɚɛɡɚɰɵ, ɧɭɠɧɨ ɢɫɩɨɥɶɡɨɜɚɬɶ ɷɥɟɦɟɧɬ

. ȿɝɨ ɡɚɤɪɵɜɚɸɳɢɣɫɹ ɬɟɝ ɧɟɨɛɹɡɚɬɟɥɟɧ, ɢ ɟɫɥɢ ɬɟɝɚ

ɧɟɬ, ɬɨ ɛɪɚɭɡɟɪ ɧɟ ɞɨɛɚɜɥɹɟɬ ɩɭɫɬɭɸ ɫɬɪɨɤɭ ɩɨɫɥɟ ɨɤɨɧɱɚɧɢɹ ɬɟɤɫɬɚ ɚɛɡɚɰɚ. Ⱦɥɹ ɩɟɪɟɧɨɫɚ ɫɬɪɨɤɢ ɢɫɩɨɥɶɡɭɟɬɫɹ ɩɭɫɬɨɣ ɷɥɟɦɟɧɬ
. ɉɪɢɦɟɪ

ɂɜɚɧɨɜ ɉɚɜɟɥ
ɭɥ. Ɉɫɬɭɠɟɜɚ 1–14
6

ɝ. ȼɨɪɨɧɟɠ


Ɉɱɟɧɶ ɱɚɫɬɨ ɞɥɹ ɡɚɩɢɫɢ ɩɨɥɟɡɧɨɣ ɢɧɮɨɪɦɚɰɢɢ ɢɫɩɨɥɶɡɭɟɬɫɹ ɤɨɦɦɟɧɬɚɪɢɣ. ɗɥɟɦɟɧɬ ɤɨɦɦɟɧɬɚɪɢɹ ɭɧɢɤɚɥɟɧ ɬɟɦ, ɱɬɨ ɡɚɫɬɚɜɥɹɟɬ ɛɪɚɭɡɟɪ ɢɝɧɨɪɢɪɨɜɚɬɶ ɜɫɟ ɬɨ, ɱɬɨ ɫɨɞɟɪɠɢɬɫɹ ɦɟɠɞɭ ɟɝɨ ɬɟɝɚɦɢ. ɋɢɧɬɚɤɫɢɫ ɤɨɦɦɟɧɬɚɪɢɹ:

Ɍɚɛɥɢɰɚ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ . Ɇɟɬɤɚ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɧɟɫɤɨɥɶɤɨ ɚɬɪɢɛɭɬɨɜ. ALIGN ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɪɚɫɩɨɥɨɠɟɧɢɟ ɬɚɛɥɢɰɵ ɩɨ ɨɬɧɨɲɟɧɢɸ ɤ ɩɨɥɹɦ ɞɨɤɭɦɟɧɬɚ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: ALIGN=LEFT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɥɟɜɨ), ALIGN=CENTER (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ), ALIGN=RIGHT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɩɪɚɜɨ). WIDTH ɒɢɪɢɧɚ ɬɚɛɥɢɰɵ. ȿɟ ɦɨɠɧɨ ɡɚɞɚɬɶ ɜ ɩɢɤɫɟɥɹɯ (ɧɚɩɪɢɦɟɪ, WIDTH=400) ɢɥɢ ɜ ɩɪɨɰɟɧɬɚɯ ɨɬ ɲɢɪɢɧɵ ɫɬɪɚɧɢɰɵ (ɧɚɩɪɢɦɟɪ, WIDTH=80%). BORDER 21

ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɜɧɟɲɧɟɣ ɪɚɦɤɢ ɬɚɛɥɢɰɵ ɢ ɹɱɟɟɤ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, BORDER=4). ȿɫɥɢ ɚɬɪɢɛɭɬ ɧɟ ɭɫɬɚɧɨɜɥɟɧ, ɬɚɛɥɢɰɚ ɩɨɤɚɡɵɜɚɟɬɫɹ ɛɟɡ ɪɚɦɤɢ. CELLSPACING ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɪɚɦɤɚɦɢ ɹɱɟɟɤ ɬɚɛɥɢɰɵ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, CELLSPACING=2). CELLPADDING ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɪɚɦɤɨɣ ɹɱɟɣɤɢ ɢ ɬɟɤɫɬɨɦ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, CELLPADDING=10). Ɍɚɛɥɢɰɚ ɦɨɠɟɬ ɢɦɟɬɶ ɡɚɝɨɥɨɜɨɤ ( ... ), ɯɨɬɹ ɡɚɝɨɥɨɜɨɤ ɧɟ ɹɜɥɹɟɬɫɹ ɨɛɹɡɚɬɟɥɶɧɵɦ. Ɇɟɬɤɚ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɚɬɪɢɛɭɬ ALIGN. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: (ɡɚɝɨɥɨɜɨɤ ɩɨɦɟɳɚɟɬɫɹ ɧɚɞ ɬɚɛɥɢɰɟɣ) ɢ (ɡɚɝɨɥɨɜɨɤ ɩɨɦɟɳɚɟɬɫɹ ɩɨɞ ɬɚɛɥɢɰɟɣ). Ʉɚɠɞɚɹ ɫɬɪɨɤɚ ɬɚɛɥɢɰɵ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ . Ɇɟɬɤɚ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɫɥɟɞɭɸɳɢɟ ɚɬɪɢɛɭɬɵ. ALIGN ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɜɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɹɱɟɣɤɚɯ ɫɬɪɨɤɢ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: ALIGN=LEFT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɥɟɜɨ), ALIGN=CENTER (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ), ALIGN=RIGHT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɩɪɚɜɨ). VALIGN ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɜɟɪɬɢɤɚɥɶɧɨɟ ɜɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɹɱɟɣɤɚɯ ɫɬɪɨɤɢ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: VALIGN=TOP (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɜɟɪɯɧɟɦɭ ɤɪɚɸ), VALIGN=MIDDLE (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ), VALIGN=BOTTOM (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɧɢɠɧɟɦɭ ɤɪɚɸ). Ʉɚɠɞɚɹ ɹɱɟɣɤɚ ɬɚɛɥɢɰɵ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ . Ɇɟɬɤɚ

ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ	ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɫɥɟɞɭɸɳɢɟ ɚɬɪɢɛɭɬɵ. NOWRAP ɉɪɢɫɭɬɫɬɜɢɟ ɷɬɨɝɨ ɚɬɪɢɛɭɬɚ ɨɡɧɚɱɚɟɬ, ɱɬɨ ɫɨɞɟɪɠɢɦɨɟ ɹɱɟɣɤɢ ɞɨɥɠɧɨ ɛɵɬɶ ɩɨɤɚɡɚɧɨ ɜ ɨɞɧɭ ɫɬɪɨɤɭ. COLSPAN ɍɫɬɚɧɚɜɥɢɜɚɟɬ «ɪɚɡɦɚɯ» ɹɱɟɣɤɢ ɩɨ ɝɨɪɢɡɨɧɬɚɥɢ. ɇɚɩɪɢɦɟɪ, COLSPAN=3 ɨɡɧɚɱɚɟɬ, ɱɬɨ ɹɱɟɣɤɚ ɩɪɨɫɬɢɪɚɟɬɫɹ ɧɚ ɬɪɢ ɤɨɥɨɧɤɢ. 22 ROWSPAN ɍɫɬɚɧɚɜɥɢɜɚɟɬ «ɪɚɡɦɚɯ» ɹɱɟɣɤɢ ɩɨ ɜɟɪɬɢɤɚɥɢ. ROWSPAN=2 ɨɡɧɚɱɚɟɬ, ɱɬɨ ɹɱɟɣɤɚ ɡɚɧɢɦɚɟɬ ɞɜɟ ɫɬɪɨɤɢ. ɇɚɩɪɢɦɟɪ, ALIGN ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɜɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɹɱɟɣɤɟ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: ALIGN=LEFT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɥɟɜɨ), ALIGN=CENTER (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ), ALIGN=RIGHT (ɜɵɪɚɜɧɢɜɚɧɢɟ ɜɩɪɚɜɨ). VALIGN ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɜɟɪɬɢɤɚɥɶɧɨɟ ɜɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɹɱɟɣɤɟ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: VALIGN=TOP (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɜɟɪɯɧɟɦɭ ɤɪɚɸ), VALIGN=MIDDLE (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ), VALIGN=BOTTOM (ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɧɢɠɧɟɦɭ ɤɪɚɸ). WIDTH ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɹɱɟɣɤɢ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, WIDTH=200). HEIGHT ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɜɵɫɨɬɭ ɹɱɟɣɤɢ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, HEIGHT=40). ȿɫɥɢ ɹɱɟɣɤɚ ɬɚɛɥɢɰɵ ɩɭɫɬɚ, ɜɨɤɪɭɝ ɧɟɟ ɧɟ ɪɢɫɭɟɬɫɹ ɪɚɦɤɚ. ȿɫɥɢ ɹɱɟɣɤɚ ɩɭɫɬɚ, ɚ ɪɚɦɤɚ ɧɭɠɧɚ, ɜ ɹɱɟɣɤɭ ɦɨɠɧɨ ɜɜɟɫɬɢ ɫɢɦɜɨɥɶɧɵɣ ɨɛɴɟɤɬ   (non-breaking space – ɧɟɪɚɡɪɵɜɚɸɳɢɣ ɩɪɨɛɟɥ). əɱɟɣɤɚ ɩɨ-ɩɪɟɠɧɟɦɭ ɛɭɞɟɬ ɩɭɫɬɨɣ, ɚ ɪɚɦɤɚ ɜɨɤɪɭɝ ɧɟɟ ɛɭɞɟɬ. Ʌɸɛɚɹ ɹɱɟɣɤɚ ɬɚɛɥɢɰɵ ɦɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɜ ɫɟɛɟ ɞɪɭɝɭɸ ɬɚɛɥɢɰɭ. Ɏɨɪɦɚ Ɏɨɪɦɚ – ɷɬɨ ɢɧɫɬɪɭɦɟɧɬ, ɫ ɩɨɦɨɳɶɸ ɤɨɬɨɪɨɝɨ HTML-ɞɨɤɭɦɟɧɬ ɦɨɠɟɬ ɩɨɫɥɚɬɶ ɧɟɤɨɬɨɪɭɸ ɢɧɮɨɪɦɚɰɢɸ ɜ ɧɟɤɨɬɨɪɭɸ ɡɚɪɚɧɟɟ ɨɩɪɟɞɟɥɟɧɧɭɸ ɬɨɱɤɭ ɜɧɟɲɧɟɝɨ ɦɢɪɚ, ɝɞɟ ɢɧɮɨɪɦɚɰɢɹ ɛɭɞɟɬ ɧɟɤɨɬɨɪɵɦ ɨɛɪɚɡɨɦ ɨɛɪɚɛɨɬɚɧɚ. ɋɨɡɞɚɬɶ ɮɨɪɦɭ ɝɨɪɚɡɞɨ ɩɪɨɳɟ, ɱɟɦ ɬɭ «ɬɨɱɤɭ ɜɧɟɲɧɟɝɨ ɦɢɪɚ», ɜ ɤɨɬɨɪɭɸ ɮɨɪɦɚ ɛɭɞɟɬ ɩɨɫɵɥɚɬɶ ɢɧɮɨɪɦɚɰɢɸ. ȼ ɤɚɱɟɫɬɜɟ ɬɚɤɨɣ «ɬɨɱɤɢ» ɜ ɛɨɥɶɲɢɧɫɬɜɟ ɫɥɭɱɚɟɜ ɜɵɫɬɭɩɚɟɬ ɩɪɨɝɪɚɦɦɚ, ɧɚɩɢɫɚɧɧɚɹ ɧɚ Perl ɢɥɢ ɋ++. ɉɪɨɝɪɚɦɦɵ, ɨɛɪɚɛɚɬɵɜɚɸɳɢɟ ɞɚɧɧɵɟ, ɩɟɪɟɞɚɧɧɵɟ ɮɨɪɦɚɦɢ, ɱɚɫɬɨ ɧɚɡɵɜɚɸɬ CGI-ɫɤɪɢɩɬɚɦɢ. ɋɨɤɪɚɳɟɧɢɟ CGI (Common Gateways Interface) ɨɡɧɚɱɚɟɬ «ɨɛɳɟɩɪɢɧɹɬɵɣ ɢɧɬɟɪɮɟɣɫ ɲɥɸɡɨɜ». ɇɚɩɢɫɚɧɢɟ CGI-ɫɤɪɢɩɬɨɜ ɜ 23 ɛɨɥɶɲɢɧɫɬɜɟ ɫɥɭɱɚɟɜ ɬɪɟɛɭɟɬ ɯɨɪɨɲɟɝɨ ɡɧɚɧɢɹ ɫɨɨɬɜɟɬɫɬɜɭɸɳɟɝɨ ɹɡɵɤɚ ɩɪɨɝɪɚɦɦɢɪɨɜɚɧɢɹ ɢ ɜɨɡɦɨɠɧɨɫɬɟɣ ɨɩɟɪɚɰɢɨɧɧɨɣ ɫɢɫɬɟɦɵ Unix. ȼ ɩɨɫɥɟɞɧɟɟ ɜɪɟɦɹ ɨɩɪɟɞɟɥɟɧɧɨɟ ɪɚɫɩɪɨɫɬɪɚɧɟɧɢɟ ɩɨɥɭɱɢɥ ɹɡɵɤ PHP/FI, ɢɧɫɬɪɭɤɰɢɢ ɤɨɬɨɪɨɝɨ ɦɨɠɧɨ ɜɫɬɪɚɢɜɚɬɶ ɩɪɹɦɨ ɜ HTML-ɞɨɤɭɦɟɧɬɵ (ɞɨɤɭɦɟɧɬɵ ɩɪɢ ɷɬɨɦ ɫɨɯɪɚɧɹɸɬɫɹ ɜ ɜɢɞɟ ɮɚɣɥɨɜ ɫ ɪɚɫɲɢɪɟɧɢɟɦ *.pht ɢɥɢ *.php). Ɏɨɪɦɵ ɩɟɪɟɞɚɸɬ ɢɧɮɨɪɦɚɰɢɸ ɩɪɨɝɪɚɦɦɚɦ-ɨɛɪɚɛɨɬɱɢɤɚɦ ɜ ɜɢɞɟ ɩɚɪ [ɢɦɹ ɩɟɪɟɦɟɧɧɨɣ]=[ɡɧɚɱɟɧɢɟ ɩɟɪɟɦɟɧɧɨɣ]. ɂɦɟɧɚ ɩɟɪɟɦɟɧɧɵɯ ɫɥɟɞɭɟɬ ɡɚɞɚɜɚɬɶ ɥɚɬɢɧɫɤɢɦɢ ɛɭɤɜɚɦɢ. Ɂɧɚɱɟɧɢɹ ɩɟɪɟɦɟɧɧɵɯ ɜɨɫɩɪɢɧɢɦɚɸɬɫɹ ɨɛɪɚɛɨɬɱɢɤɚɦɢ ɤɚɤ ɫɬɪɨɤɢ, ɞɚɠɟ ɟɫɥɢ ɨɧɢ ɫɨɞɟɪɠɚɬ ɬɨɥɶɤɨ ɰɢɮɪɵ. Ʉɚɤ ɭɫɬɪɨɟɧɚ ɮɨɪɦɚ Ɏɨɪɦɚ ɨɬɤɪɵɜɚɟɬɫɹ ɦɟɬɤɨɣ ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ . HTML-ɞɨɤɭɦɟɧɬ ɦɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɜ ɫɟɛɟ ɧɟɫɤɨɥɶɤɨ ɮɨɪɦ, ɨɞɧɚɤɨ ɮɨɪɦɵ ɧɟ ɞɨɥɠɧɵ ɧɚɯɨɞɢɬɶɫɹ ɨɞɧɚ ɜɧɭɬɪɢ ɞɪɭɝɨɣ. HTML-ɬɟɤɫɬ, ɜɤɥɸɱɚɹ ɦɟɬɤɢ, ɦɨɠɟɬ ɪɚɡɦɟɳɚɬɶɫɹ ɜɧɭɬɪɢ ɮɨɪɦ ɛɟɡ ɨɝɪɚɧɢɱɟɧɢɣ. Ɇɟɬɤɚ ɦɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɬɪɢ ɚɬɪɢɛɭɬɚ, ɨɞɢɧ ɢɡ ɤɨɬɨɪɵɯ ɹɜɥɹɟɬɫɹ ɨɛɹɡɚɬɟɥɶɧɵɦ. ȼɨɬ ɷɬɢ ɚɬɪɢɛɭɬɵ. ACTION Ɉɛɹɡɚɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ. Ɉɩɪɟɞɟɥɹɟɬ, ɝɞɟ ɧɚɯɨɞɢɬɫɹ ɨɛɪɚɛɨɬɱɢɤ ɮɨɪɦɵ. METHOD Ɉɩɪɟɞɟɥɹɟɬ, ɤɚɤɢɦ ɨɛɪɚɡɨɦ (ɢɧɚɱɟ ɝɨɜɨɪɹ, ɫ ɩɨɦɨɳɶɸ ɤɚɤɨɝɨ ɦɟɬɨɞɚ ɩɪɨɬɨɤɨɥɚ ɩɟɪɟɞɚɱɢ ɝɢɩɟɪɬɟɤɫɬɨɜ) ɞɚɧɧɵɟ ɢɡ ɮɨɪɦɵ ɛɭɞɭɬ ɩɟɪɟɞɚɧɵ ɨɛɪɚɛɨɬɱɢɤɭ. Ⱦɨɩɭɫɬɢɦɵɟ ɡɧɚɱɟɧɢɹ: METHOD=POST ɢ METHOD=GET. ȿɫɥɢ ɡɧɚɱɟɧɢɟ ɚɬɪɢɛɭɬɚ ɧɟ ɭɫɬɚɧɨɜɥɟɧɨ, ɩɨ ɭɦɨɥɱɚɧɢɸ ɩɪɟɞɩɨɥɚɝɚɟɬɫɹ METHOD=GET. ENCTYPE Ɉɩɪɟɞɟɥɹɟɬ, ɤɚɤɢɦ ɨɛɪɚɡɨɦ ɞɚɧɧɵɟ ɢɡ ɮɨɪɦɵ ɛɭɞɭɬ ɡɚɤɨɞɢɪɨɜɚɧɵ ɞɥɹ ɩɟɪɟɞɚɱɢ ɨɛɪɚɛɨɬɱɢɤɭ. ȿɫɥɢ ɡɧɚɱɟɧɢɟ ɚɬɪɢɛɭɬɚ ɧɟ ɭɫɬɚɧɨɜɥɟɧɨ, ɩɨ ɭɦɨɥɱɚɧɢɸ ɩɪɟɞɩɨɥɚɝɚɟɬɫɹ ENCTYPE=application/x-www-form-urlencoded. 24 ɉɪɨɫɬɟɣɲɚɹ ɮɨɪɦɚ Ⱦɥɹ ɬɨɝɨ, ɱɬɨɛɵ ɡɚɩɭɫɬɢɬɶ ɩɪɨɰɟɫɫ ɩɟɪɟɞɚɱɢ ɞɚɧɧɵɯ ɢɡ ɮɨɪɦɵ ɨɛɪɚɛɨɬɱɢɤɭ, ɧɭɠɟɧ ɤɚɤɨɣ-ɬɨ ɨɪɝɚɧ ɭɩɪɚɜɥɟɧɢɹ. ɋɨɡɞɚɬɶ ɬɚɤɨɣ ɨɪɝɚɧ ɭɩɪɚɜɥɟɧɢɹ ɨɱɟɧɶ ɩɪɨɫɬɨ: ȼɫɬɪɟɬɢɜ ɬɚɤɭɸ ɫɬɪɨɱɤɭ ɜɧɭɬɪɢ ɮɨɪɦɵ, ɛɪɚɭɡɟɪ ɧɚɪɢɫɭɟɬ ɧɚ ɷɤɪɚɧɟ ɤɧɨɩɤɭ ɫ ɧɚɞɩɢɫɶɸ Submit, ɩɪɢ ɧɚɠɚɬɢɢ ɧɚ ɤɨɬɨɪɭɸ ɜɫɟ ɢɦɟɸɳɢɟɫɹ ɜ ɮɨɪɦɟ ɞɚɧɧɵɟ ɛɭɞɭɬ ɩɟɪɟɞɚɧɵ ɨɛɪɚɛɨɬɱɢɤɭ, ɨɩɪɟɞɟɥɟɧɧɨɦɭ ɜ ɦɟɬɤɟ . ɇɚɞɩɢɫɶ ɧɚ ɤɧɨɩɤɟ ɦɨɠɧɨ ɡɚɞɚɬɶ ɬɚɤɭɸ, ɤɚɤɚɹ ɧɪɚɜɢɬɫɹ, ɩɭɬɟɦ ɜɜɟɞɟɧɢɹ ɚɬɪɢɛɭɬɚ Value="[ɇɚɞɩɢɫɶ]", ɧɚɩɪɢɦɟɪ: ɉɪɢɦɟɪ <Title>ɉɪɢɦɟɪ ɉɪɨɫɬɟɣɲɚɹ ɮɨɪɦɚ ɇɚɞɩɢɫɶ, ɧɚɧɟɫɟɧɧɭɸ ɧɚ ɤɧɨɩɤɭ, ɦɨɠɧɨ ɩɪɢ ɧɟɨɛɯɨɞɢɦɨɫɬɢ ɩɟɪɟɞɚɬɶ ɨɛɪɚɛɨɬɱɢɤɭ ɩɭɬɟɦ ɜɜɟɞɟɧɢɹ ɜ ɨɩɪɟɞɟɥɟɧɢɟ ɤɧɨɩɤɢ ɚɬɪɢɛɭɬɚ NAME=[ɢɦɹ] ɉɪɢɦɟɪ ɉɪɢ ɧɚɠɚɬɢɢ ɧɚ ɬɚɤɭɸ ɤɧɨɩɤɭ ɨɛɪɚɛɨɬɱɢɤ ɜɦɟɫɬɟ ɫɨ ɜɫɟɦɢ ɨɫɬɚɥɶɧɵɦɢ ɞɚɧɧɵɦɢ ɩɨɥɭɱɢɬ ɢ ɩɟɪɟɦɟɧɧɭɸ button ɫɨ ɡɧɚɱɟɧɢɟɦ «ɇɚɱɚɬɶ ɪɚɛɨɬɭ!». ȼ ɮɨɪɦɟ ɦɨɠɟɬ ɛɵɬɶ ɧɟɫɤɨɥɶɤɨ ɤɧɨɩɨɤ ɬɢɩɚ submit ɫ ɪɚɡɥɢɱɧɵɦɢ ɢɦɟɧɚɦɢ ɢ/ɢɥɢ ɡɧɚɱɟɧɢɹɦɢ. Ɉɛɪɚɛɨɬɱɢɤ, ɬɚɤɢɦ ɨɛɪɚɡɨɦ, ɦɨɠɟɬ ɞɟɣɫɬɜɨɜɚɬɶ ɩɨ-ɪɚɡɧɨɦɭ ɜ ɡɚɜɢɫɢɦɨɫɬɢ ɨɬ ɬɨɝɨ, ɤɚɤɭɸ ɢɦɟɧɧɨ ɤɧɨɩɤɭ submit ɧɚɠɚɥ ɩɨɥɶɡɨɜɚɬɟɥɶ. 25 Ʉɚɤ ɮɨɪɦɚ ɫɨɛɢɪɚɟɬ ɞɚɧɧɵɟ ɋɭɳɟɫɬɜɭɸɬ ɢ ɞɪɭɝɢɟ ɬɢɩɵ ɷɥɟɦɟɧɬɨɜ . Ʉɚɠɞɵɣ ɷɥɟɦɟɧɬ ɞɨɥɠɟɧ ɜɤɥɸɱɚɬɶ ɚɬɪɢɛɭɬ NAME=[ɢɦɹ], ɨɩɪɟɞɟɥɹɸɳɢɣ ɢɦɹ ɷɥɟɦɟɧɬɚ (ɢ, ɫɨɨɬɜɟɬɫɬɜɟɧɧɨ, ɢɦɹ ɩɟɪɟɦɟɧɧɨɣ, ɤɨɬɨɪɚɹ ɛɭɞɟɬ ɩɟɪɟɞɚɧɚ ɨɛɪɚɛɨɬɱɢɤɭ). ɂɦɹ ɞɨɥɠɧɨ ɡɚɞɚɜɚɬɶɫɹ ɬɨɥɶɤɨ ɥɚɬɢɧɫɤɢɦɢ ɛɭɤɜɚɦɢ. Ȼɨɥɶɲɢɧɫɬɜɨ ɷɥɟɦɟɧɬɨɜ ɞɨɥɠɧɵ ɜɤɥɸɱɚɬɶ ɚɬɪɢɛɭɬ Value="[ɡɧɚɱɟɧɢɟ]", ɨɩɪɟɞɟɥɹɸɳɢɣ ɡɧɚɱɟɧɢɟ, ɤɨɬɨɪɨɟ ɛɭɞɟɬ ɩɟɪɟɞɚɧɨ ɨɛɪɚɛɨɬɱɢɤɭ ɩɨɞ ɷɬɢɦ ɢɦɟɧɟɦ. Ⱦɥɹ ɷɥɟɦɟɧɬɨɜ ɢ , ɨɞɧɚɤɨ, ɷɬɨɬ ɚɬɪɢɛɭɬ ɧɟ ɨɛɹɡɚɬɟɥɟɧ, ɩɨɫɤɨɥɶɤɭ ɡɧɚɱɟɧɢɟ ɫɨɨɬɜɟɬɫɬɜɭɸɳɟɣ ɩɟɪɟɦɟɧɧɨɣ ɦɨɠɟɬ ɜɜɨɞɢɬɶɫɹ ɩɨɥɶɡɨɜɚɬɟɥɟɦ ɫ ɤɥɚɜɢɚɬɭɪɵ. Ɉɫɧɨɜɧɵɟ ɬɢɩɵ ɷɥɟɦɟɧɬɨɜ . TYPE=text Ɉɩɪɟɞɟɥɹɟɬ ɨɤɧɨ ɞɥɹ ɜɜɨɞɚ ɫɬɪɨɤɢ ɬɟɤɫɬɚ. Ɇɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɞɨɩɨɥɧɢɬɟɥɶɧɵɟ ɚɬɪɢɛɭɬɵ SIZE=[ɱɢɫɥɨ] (ɲɢɪɢɧɚ ɨɤɧɚ ɜɜɨɞɚ ɜ ɫɢɦɜɨɥɚɯ) ɢ MAXLENGTH=[ɱɢɫɥɨ] (ɦɚɤɫɢɦɚɥɶɧɨ ɞɨɩɭɫɬɢɦɚɹ ɞɥɢɧɚ ɜɜɨɞɢɦɨɣ ɫɬɪɨɤɢ ɜ ɫɢɦɜɨɥɚɯ). ɉɪɢɦɟɪ Ɉɩɪɟɞɟɥɹɟɬ ɨɤɧɨ ɲɢɪɢɧɨɣ 20 ɫɢɦɜɨɥɨɜ ɞɥɹ ɜɜɨɞɚ ɬɟɤɫɬɚ. ɉɨ ɭɦɨɥɱɚɧɢɸ ɜ ɨɤɧɟ ɧɚɯɨɞɢɬɫɹ ɬɟɤɫɬ ɂɜɚɧ, ɤɨɬɨɪɵɣ ɩɨɥɶɡɨɜɚɬɟɥɶ ɦɨɠɟɬ ɪɟɞɚɤɬɢɪɨɜɚɬɶ. Ɉɬɪɟɞɚɤɬɢɪɨɜɚɧɧɵɣ (ɢɥɢ ɧɟɨɬɪɟɞɚɤɬɢɪɨɜɚɧɧɵɣ) ɬɟɤɫɬ ɩɟɪɟɞɚɟɬɫɹ ɨɛɪɚɛɨɬɱɢɤɭ ɜ ɩɟɪɟɦɟɧɧɨɣ user. TYPE=password Ɉɩɪɟɞɟɥɹɟɬ ɨɤɧɨ ɞɥɹ ɜɜɨɞɚ ɩɚɪɨɥɹ. Ⱥɛɫɨɥɸɬɧɨ ɚɧɚɥɨɝɢɱɟɧ ɬɢɩɭ text, ɬɨɥɶɤɨ ɜɦɟɫɬɨ ɫɢɦɜɨɥɨɜ ɜɜɨɞɢɦɨɝɨ ɬɟɤɫɬɚ ɩɨɤɚɡɵɜɚɟɬ ɧɚ ɷɤɪɚɧɟ ɡɜɟɡɞɨɱɤɢ (*). ɉɪɢɦɟɪ Ɉɩɪɟɞɟɥɹɟɬ ɨɤɧɨ ɲɢɪɢɧɨɣ 20 ɫɢɦɜɨɥɨɜ ɞɥɹ ɜɜɨɞɚ ɩɚɪɨɥɹ. Ɇɚɤɫɢɦɚɥɶɧɨ ɞɨɩɭɫɬɢɦɚɹ ɞɥɢɧɚ ɩɚɪɨɥɹ – 10 ɫɢɦɜɨɥɨɜ. ȼɜɟɞɟɧɧɵɣ ɩɚɪɨɥɶ ɩɟɪɟɞɚɟɬɫɹ ɨɛɪɚɛɨɬɱɢɤɭ ɜ ɩɟɪɟɦɟɧɧɨɣ pw. TYPE=radio 26 Ɉɩɪɟɞɟɥɹɟɬ ɪɚɞɢɨɤɧɨɩɤɭ. Ɇɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɞɨɩɨɥɧɢɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ checked (ɩɨɤɚɡɵɜɚɟɬ, ɱɬɨ ɤɧɨɩɤɚ ɩɨɦɟɱɟɧɚ). ȼ ɝɪɭɩɩɟ ɪɚɞɢɨɤɧɨɩɨɤ ɫ ɨɞɢɧɚɤɨɜɵɦɢ ɢɦɟɧɚɦɢ ɦɨɠɟɬ ɛɵɬɶ ɬɨɥɶɤɨ ɨɞɧɚ ɩɨɦɟɱɟɧɧɚɹ ɪɚɞɢɨɤɧɨɩɤɚ. ɉɪɢɦɟɪ 9600 ɛɢɬ/ɫ 14400 ɛɢɬ/ɫ 28800 ɛɢɬ/ɫ Ɉɩɪɟɞɟɥɹɟɬ ɝɪɭɩɩɭ ɢɡ ɬɪɟɯ ɪɚɞɢɨɤɧɨɩɨɤ, ɩɨɞɩɢɫɚɧɧɵɯ 9600 ɛɢɬ/ɫ, 14400 ɛɢɬ/ɫ ɢ 28800 ɛɢɬ/ɫ. ɉɟɪɜɨɧɚɱɚɥɶɧɨ ɩɨɦɟɱɟɧɚ ɩɟɪɜɚɹ ɢɡ ɤɧɨɩɨɤ. ȿɫɥɢ ɩɨɥɶɡɨɜɚɬɟɥɶ ɧɟ ɨɬɦɟɬɢɬ ɞɪɭɝɭɸ ɤɧɨɩɤɭ, ɨɛɪɚɛɨɬɱɢɤɭ ɛɭɞɟɬ ɩɟɪɟɞɚɧɚ ɩɟɪɟɦɟɧɧɚɹ modem ɫɨ ɡɧɚɱɟɧɢɟɦ 9600. ȿɫɥɢ ɩɨɥɶɡɨɜɚɬɟɥɶ ɨɬɦɟɬɢɬ ɞɪɭɝɭɸ ɤɧɨɩɤɭ, ɨɛɪɚɛɨɬɱɢɤɭ ɛɭɞɟɬ ɩɟɪɟɞɚɧɚ ɩɟɪɟɦɟɧɧɚɹ modem ɫɨ ɡɧɚɱɟɧɢɟɦ 14400 ɢɥɢ 28800. TYPE=checkbox Ɉɩɪɟɞɟɥɹɟɬ ɤɜɚɞɪɚɬ, ɜ ɤɨɬɨɪɨɦ ɦɨɠɧɨ ɫɞɟɥɚɬɶ ɩɨɦɟɬɤɭ. Ɇɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɞɨɩɨɥɧɢɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ checked (ɩɨɤɚɡɵɜɚɟɬ, ɱɬɨ ɤɜɚɞɪɚɬ ɩɨɦɟɱɟɧ). ȼ ɨɬɥɢɱɢɟ ɨɬ ɪɚɞɢɨɤɧɨɩɨɤ, ɜ ɝɪɭɩɩɟ ɤɜɚɞɪɚɬɨɜ ɫ ɨɞɢɧɚɤɨɜɵɦɢ ɢɦɟɧɚɦɢ ɦɨɠɟɬ ɛɵɬɶ ɧɟɫɤɨɥɶɤɨ ɩɨɦɟɱɟɧɧɵɯ ɤɜɚɞɪɚɬɨɜ. ɉɪɢɦɟɪ ɉɟɪɫɨɧɚɥɶɧɵɟ ɤɨɦɩɶɸɬɟɪɵ Ɋɚɛɨɱɢɟ ɫɬɚɧɰɢɢ ɋɟɪɜɟɪɵ ɥɨɤɚɥɶɧɵɯ ɫɟɬɟɣ ɋɟɪɜɟɪɵ ɂɧɬɟɪɧɟɬ Ɉɩɪɟɞɟɥɹɟɬ ɝɪɭɩɩɭ ɢɡ ɱɟɬɵɪɟɯ ɤɜɚɞɪɚɬɨɜ. ɉɟɪɜɨɧɚɱɚɥɶɧɨ ɩɨɦɟɱɟɧɵ ɜɬɨɪɨɣ ɢ ɱɟɬɜɟɪɬɵɣ ɤɜɚɞɪɚɬɵ. ȿɫɥɢ ɩɨɥɶɡɨɜɚɬɟɥɶ ɧɟ ɩɪɨɢɡɜɟɞɟɬ ɢɡɦɟɧɟɧɢɣ, ɨɛɪɚɛɨɬɱɢɤɭ ɛɭɞɭɬ ɩɟɪɟɞɚɧɵ ɞɜɟ ɩɟɪɟɦɟɧɧɵɟ: comp=WS ɢ comp=IS. 27 TYPE=hidden Ɉɩɪɟɞɟɥɹɟɬ ɫɤɪɵɬɵɣ ɷɥɟɦɟɧɬ ɞɚɧɧɵɯ, ɤɨɬɨɪɵɣ ɧɟ ɜɢɞɟɧ ɩɨɥɶɡɨɜɚɬɟɥɸ ɩɪɢ ɡɚɩɨɥɧɟɧɢɢ ɮɨɪɦɵ ɢ ɩɟɪɟɞɚɟɬɫɹ ɨɛɪɚɛɨɬɱɢɤɭ ɛɟɡ ɢɡɦɟɧɟɧɢɣ. Ɍɚɤɨɣ ɷɥɟɦɟɧɬ ɢɧɨɝɞɚ ɩɨɥɟɡɧɨ ɢɦɟɬɶ ɜ ɮɨɪɦɟ, ɤɨɬɨɪɚɹ ɜɪɟɦɹ ɨɬ ɜɪɟɦɟɧɢ ɩɨɞɜɟɪɝɚɟɬɫɹ ɩɟɪɟɪɚɛɨɬɤɟ, ɱɬɨɛɵ ɨɛɪɚɛɨɬɱɢɤ ɦɨɝ ɡɧɚɬɶ, ɫ ɤɚɤɨɣ ɜɟɪɫɢɟɣ ɮɨɪɦɵ ɨɧ ɢɦɟɟɬ ɞɟɥɨ. Ⱦɪɭɝɢɟ ɜɨɡɦɨɠɧɵɟ ɜɚɪɢɚɧɬɵ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɜɵ ɜɩɨɥɧɟ ɦɨɠɟɬɟ ɩɪɢɞɭɦɚɬɶ ɫɚɦɢ. ɉɪɢɦɟɪ Ɉɩɪɟɞɟɥɹɟɬ ɫɤɪɵɬɭɸ ɩɟɪɟɦɟɧɧɭɸ version, ɤɨɬɨɪɚɹ ɩɟɪɟɞɚɟɬɫɹ ɨɛɪɚɛɨɬɱɢɤɭ ɫɨ ɡɧɚɱɟɧɢɟɦ 1.1. TYPE=reset Ɉɩɪɟɞɟɥɹɟɬ ɤɧɨɩɤɭ, ɩɪɢ ɧɚɠɚɬɢɢ ɧɚ ɤɨɬɨɪɭɸ ɮɨɪɦɚ ɜɨɡɜɪɚɳɚɟɬɫɹ ɜ ɢɫɯɨɞɧɨɟ ɫɨɫɬɨɹɧɢɟ. ɉɨɫɤɨɥɶɤɭ ɩɪɢ ɢɫɩɨɥɶɡɨɜɚɧɢɢ ɷɬɨɣ ɤɧɨɩɤɢ ɞɚɧɧɵɟ ɨɛɪɚɛɨɬɱɢɤɭ ɧɟ ɩɟɪɟɞɚɸɬɫɹ, ɤɧɨɩɤɚ ɬɢɩɚ reset ɦɨɠɟɬ ɢ ɧɟ ɢɦɟɬɶ ɚɬɪɢɛɭɬɚ name. ɉɪɢɦɟɪ Ɉɩɪɟɞɟɥɹɟɬ ɤɧɨɩɤɭ Ɉɱɢɫɬɢɬɶ ɩɨɥɹ ɮɨɪɦɵ, ɩɪɢ ɧɚɠɚɬɢɢ ɧɚ ɤɨɬɨɪɭɸ ɮɨɪɦɚ ɜɨɡɜɪɚɳɚɟɬɫɹ ɜ ɢɫɯɨɞɧɨɟ ɫɨɫɬɨɹɧɢɟ. ɉɨɦɢɦɨ ɷɥɟɦɟɧɬɨɜ , ɮɨɪɦɵ ɦɨɝɭɬ ɫɨɞɟɪɠɚɬɶ ɦɟɧɸ <SELECT> ɢ ɩɨɥɹ ɞɥɹ ɜɜɨɞɚ ɬɟɤɫɬɚ . Ɇɟɧɸ <SELECT> ɢɡ n ɷɥɟɦɟɧɬɨɜ ɜɵɝɥɹɞɢɬ ɩɪɢɦɟɪɧɨ ɬɚɤ: <SELECT NAME="[ɢɦɹ]"> [ɬɟɤɫɬ 1] [ɬɟɤɫɬ 2] [ɬɟɤɫɬ n] Ɂɞɟɫɶ ɦɟɧɸ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ <SELECT> ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ . Ɇɟɬɤɚ <SELECT> ɫɨɞɟɪɠɢɬ ɨɛɹɡɚɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ NAME, ɨɩɪɟɞɟɥɹɸɳɢɣ ɢɦɹ ɩɟɪɟɦɟɧɧɨɣ, ɤɨɬɨɪɭɸ ɝɟɧɟɪɢɪɭɟɬ ɦɟɧɸ. Ɇɟɬɤɚ <SELECT> ɦɨɠɟɬ ɬɚɤɠɟ ɫɨɞɟɪɠɚɬɶ ɚɬɪɢɛɭɬ MULTIPLE, ɩɪɢɫɭɬɫɬɜɢɟ ɤɨɬɨɪɨɝɨ ɩɨɤɚɡɵɜɚɟɬ, ɱɬɨ ɢɡ ɦɟɧɸ ɦɨɠɧɨ ɜɵɛɪɚɬɶ ɧɟɫɤɨɥɶɤɨ 28 ɷɥɟɦɟɧɬɨɜ. Ȼɨɥɶɲɢɧɫɬɜɨ ɛɪɚɭɡɟɪɨɜ ɩɨɤɚɡɵɜɚɸɬ ɦɟɧɸ <SELECT MULTIPLE> ɜ ɜɢɞɟ ɨɤɧɚ, ɜ ɤɨɬɨɪɨɦ ɧɚɯɨɞɹɬɫɹ ɷɥɟɦɟɧɬɵ ɦɟɧɸ (ɜɵɫɨɬɭ ɨɤɧɚ ɜ ɫɬɪɨɤɚɯ ɦɨɠɧɨ ɡɚɞɚɬɶ ɚɬɪɢɛɭɬɨɦ SIZE=[ɱɢɫɥɨ]). Ɇɟɧɸ <SELECT> ɜ ɛɨɥɶɲɢɧɫɬɜɟ ɫɥɭɱɚɟɜ ɩɨɤɚɡɵɜɚɟɬɫɹ ɜ ɜɢɞɟ ɜɵɩɚɞɚɸɳɟɝɨ ɦɟɧɸ. Ɇɟɬɤɚ ɨɩɪɟɞɟɥɹɟɬ ɷɥɟɦɟɧɬ ɦɟɧɸ. Ɉɛɹɡɚɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ VALUE ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɡɧɚɱɟɧɢɟ, ɤɨɬɨɪɨɟ ɛɭɞɟɬ ɩɟɪɟɞɚɧɨ ɨɛɪɚɛɨɬɱɢɤɭ, ɟɫɥɢ ɜɵɛɪɚɧ ɷɬɨɬ ɷɥɟɦɟɧɬ ɦɟɧɸ. Ɇɟɬɤɚ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɚɬɪɢɛɭɬ checked, ɩɨɤɚɡɵɜɚɸɳɢɣ, ɱɬɨ ɞɚɧɧɵɣ ɷɥɟɦɟɧɬ ɨɬɦɟɱɟɧ ɩɨ ɭɦɨɥɱɚɧɢɸ. ɉɪɢɦɟɪ <SELECT NAME="selection"> ȼɚɪɢɚɧɬ 1 ȼɚɪɢɚɧɬ 2 ȼɚɪɢɚɧɬ 3 Ɍɚɤɨɣ ɮɪɚɝɦɟɧɬ ɨɩɪɟɞɟɥɹɟɬ ɦɟɧɸ ɢɡ ɬɪɟɯ ɷɥɟɦɟɧɬɨɜ: ȼɚɪɢɚɧɬ 1, ȼɚɪɢɚɧɬ 2 ɢ ȼɚɪɢɚɧɬ 3. ɉɨ ɭɦɨɥɱɚɧɢɸ ɜɵɛɪɚɧ ɷɥɟɦɟɧɬ ȼɚɪɢɚɧɬ 1. Ɉɛɪɚɛɨɬɱɢɤɭ ɛɭɞɟɬ ɩɟɪɟɞɚɧɚ ɩɟɪɟɦɟɧɧɚɹ selection, ɡɧɚɱɟɧɢɟ ɤɨɬɨɪɨɣ ɦɨɠɟɬ ɛɵɬɶ option1 (ɩɨ ɭɦɨɥɱɚɧɢɸ), option2 ɢɥɢ option3. ɗɥɟɦɟɧɬ ɦɨɠɟɬ ɩɨɤɚɡɚɬɶɫɹ ɫɨɜɫɟɦ ɩɪɨɫɬɵɦ. ɇɚɩɪɢɦɟɪ: Ɂɞɟɫɶ – ȼɚɲ ɚɞɪɟɫ... ȼɫɟ ɚɬɪɢɛɭɬɵ ɨɛɹɡɚɬɟɥɶɧɵ. Ⱥɬɪɢɛɭɬ NAME ɨɩɪɟɞɟɥɹɟɬ ɢɦɹ, ɩɨɞ ɤɨɬɨɪɵɦ ɫɨɞɟɪɠɢɦɨɟ ɨɤɧɚ ɛɭɞɟɬ ɩɟɪɟɞɚɧɨ ɨɛɪɚɛɨɬɱɢɤɭ (ɜ ɩɪɢɦɟɪɟ – address). Ⱥɬɪɢɛɭɬ ROWS ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɜɵɫɨɬɭ ɨɤɧɚ ɜ ɫɬɪɨɤɚɯ (ɜ ɩɪɢɦɟɪɟ – 5). Ⱥɬɪɢɛɭɬ COLS ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɨɤɧɚ ɜ ɫɢɦɜɨɥɚɯ (ɜ ɩɪɢɦɟɪɟ – 50). Ɍɟɤɫɬ, ɪɚɡɦɟɳɟɧɧɵɣ ɦɟɠɞɭ ɦɟɬɤɚɦɢ ɢ , ɩɪɟɞɫɬɚɜɥɹɟɬ ɫɨɛɨɣ ɫɨɞɟɪɠɢɦɨɟ ɨɤɧɚ ɩɨ ɭɦɨɥɱɚɧɢɸ. ɉɨɥɶɡɨɜɚɬɟɥɶ ɦɨɠɟɬ ɟɝɨ ɨɬɪɟɞɚɤɬɢɪɨɜɚɬɶ ɢɥɢ ɩɪɨɫɬɨ ɫɬɟɪɟɬɶ. 29 ȼɚɠɧɨ ɡɧɚɬɶ, ɱɬɨ ɪɭɫɫɤɢɟ ɛɭɤɜɵ ɜ ɨɤɧɟ ɩɪɢ ɩɟɪɟɞɚɱɟ ɨɛɪɚɛɨɬɱɢɤɭ ɦɨɝɭɬ ɛɵɬɶ ɤɨɧɜɟɪɬɢɪɨɜɚɧɵ ɜ ɫɨɨɬɜɟɬɫɬɜɭɸɳɢɟ ɢɦ ɫɢɦɜɨɥɶɧɵɟ ɨɛɴɟɤɬɵ. ɉɪɢɦɟɪ <Title>ɉɪɢɦɟɪ ɇɟɫɤɨɥɶɤɨ ɛɨɥɟɟ ɫɥɨɠɧɚɹ ɮɨɪɦɚ Ɋɚɫɫɤɚɠɢɬɟ ɧɟɦɧɨɝɨ ɨ ɫɟɛɟ... Ɇɨɠɧɨ ɭɤɚɡɵɜɚɬɶ ɧɟɧɚɫɬɨɹɳɢɟ ɞɚɧɧɵɟ. Ɇɨɠɧɨ ɩɪɢɞɭɦɚɬɶ ɫɟɛɟ ɜɢɪɬɭɚɥɶɧɨɝɨ ɞɪɭɝɚ. ɂɦɹ: Ɏɚɦɢɥɢɹ: ɉɨɥ: ɦɭɠɫɤɨɣ ɠɟɧɫɤɢɣ ȼɨɡɪɚɫɬ: ɥɟɬ ȼɜɟɞɟɧɢɟ ɜ CSS ɑɬɨ ɬɚɤɨɟ CSS (Cascading Style Sheets) ɢɥɢ, ɩɨ-ɪɭɫɫɤɢ, ɤɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ? ɋɬɢɥɢ – ɷɬɨ ɧɚɛɨɪɵ ɫɜɨɣɫɬɜ, ɤɨɬɨɪɵɟ ɦɵ ɦɨɠɟɦ 30 ɩɪɢɫɜɨɢɬɶ ɦɧɨɝɢɦ ɷɥɟɦɟɧɬɚɦ (ɬɚɛɥɢɰɵ, ɫɫɵɥɤɢ ɢ ɬ. ɞ.), ɜɥɢɹɸɳɢɟ ɧɚ ɨɬɨɛɪɚɠɟɧɢɟ ɨɛɴɟɤɬɚ ɧɚ ɷɤɪɚɧɟ ɛɪɚɭɡɟɪɚ. Ɍɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɪɟɞɫɬɚɜɥɹɸɬ ɫɨɛɨɣ ɢɧɫɬɪɭɦɟɧɬ ɜɨɡɞɟɣɫɬɜɢɹ ɧɚ ɜɧɟɲɧɢɣ ɜɢɞ web-ɫɬɪɚɧɢɰɵ. Ɇɟɯɚɧɢɡɦ ɞɟɣɫɬɜɢɹ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɬɚɤɨɜ. ɋɬɪɭɤɬɭɪɚ HTML-ɞɨɤɭɦɟɧɬɚ ɪɚɡɦɟɱɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɬɟɝɨɜ, ɚ ɫɜɨɣɫɬɜɚ ɷɬɢɯ ɫɬɪɭɤɬɭɪɧɵɯ ɷɥɟɦɟɧɬɨɜ ɫɬɪɚɧɢɰɵ ɨɩɢɫɵɜɚɸɬɫɹ ɨɬɞɟɥɶɧɨ. Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS ɢɦɟɸɬ ɫɥɟɞɭɸɳɢɟ ɨɫɨɛɟɧɧɨɫɬɢ. 1. Ƚɢɛɤɨɫɬɶ ɩɨɞɤɥɸɱɟɧɢɹ. 2. Ʉɚɫɤɚɞɧɨɫɬɶ. 3. Ɂɚɜɢɫɢɦɨɫɬɶ ɨɬ ɫɪɟɞɵ ɩɪɟɞɫɬɚɜɥɟɧɢɹ. 4. ɇɚɫɥɟɞɨɜɚɧɢɟ. ɋɢɧɬɚɤɫɢɫ ɋɢɧɬɚɤɫɢɫ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɢɦɟɟɬ ɫɥɟɞɭɸɳɭɸ ɮɨɪɦɭ: ɫɟɥɟɤɬɨɪ {ɨɩɪɟɞɟɥɟɧɢɟ} Ɉɩɪɟɞɟɥɟɧɢɟɦ ɫɬɢɥɹ ɧɚɡɵɜɚɟɬɫɹ ɩɚɪɚ «ɫɜɨɣɫɬɜɨ: ɡɧɚɱɟɧɢɟ». ȼ ɤɚɱɟɫɬɜɟ ɫɟɥɟɤɬɨɪɚ ɦɨɝɭɬ ɜɵɫɬɭɩɚɬɶ ɷɥɟɦɟɧɬɵ, ɤɥɚɫɫɵ ɢ ɨɞɢɧɨɱɧɵɟ ɨɛɴɟɤɬɵ. ȿɫɥɢ ɞɥɹ ɫɟɥɟɤɬɨɪɚ ɨɩɪɟɞɟɥɹɟɬɫɹ ɧɟɫɤɨɥɶɤɨ ɫɜɨɣɫɬɜ, ɨɧɢ ɞɨɥɠɧɵ ɪɚɡɞɟɥɹɬɶɫɹ ɬɨɱɤɨɣ ɫ ɡɚɩɹɬɨɣ. ɇɚɩɪɢɦɟɪ, ɨɩɪɟɞɟɥɢɦ ɫ ɩɨɦɨɳɶɸ CSS ɡɟɥɟɧɵɣ ɰɜɟɬ ɚɛɡɚɰɚ : p {color: green} P – ɫɟɥɟɤɬɨɪ, {color: green} – ɨɩɪɟɞɟɥɟɧɢɟ ɫɬɢɥɹ ɞɥɹ ɷɬɨɝɨ ɫɟɥɟɤɬɨɪɚ, ɝɞɟ color – ɷɬɨ ɨɩɪɟɞɟɥɹɟɦɨɟ ɫɜɨɣɫɬɜɨ, ɚ green – ɡɧɚɱɟɧɢɟ ɷɬɨɝɨ ɫɜɨɣɫɬɜɚ. ȼɵɞɟɥɢɦ ɡɟɥɟɧɵɦ ɧɟ ɜɫɟ ɚɛɡɚɰɵ ɜ ɞɨɤɭɦɟɧɬɟ, ɚ ɬɨɥɶɤɨ ɚɛɡɚɰɵ ɤɥɚɫɫɚ green. p.green {color: green} ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ ɡɟɥɟɧɵɦ Ⱦɥɹ ɜɵɞɟɥɟɧɢɹ ɜ ɬɟɤɫɬɟ ɬɨɥɶɤɨ ɨɞɧɨɝɨ ɚɛɡɚɰɚ ɢɡ ɦɧɨɠɟɫɬɜɚ ɫɥɟɞɭɟɬ ɩɪɢɫɜɨɢɬɶ ɟɦɭ ɭɧɢɤɚɥɶɧɵɣ ɢɞɟɧɬɢɮɢɤɚɬɨɪ: ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ ɡɟɥɟɧɵɦ ɋɞɟɥɚɟɦ ɡɟɥɟɧɵɦ ɧɟ ɬɨɥɶɤɨ ɧɟɤɨɬɨɪɵɟ ɚɛɡɚɰɵ, ɧɨ ɢ ɡɚɝɨɥɨɜɤɢ, ɫɩɢɫɤɢ, ɚ ɬɚɤɠɟ ɥɸɛɵɟ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ. Ɉɩɢɫɵɜɚɟɦ ɤɥɚɫɫ: 31 .green {color: green} Ɍɟɩɟɪɶ ɨɫɬɚɥɨɫɶ ɭɤɚɡɚɬɶ ɛɪɚɭɡɟɪɭ, ɱɬɨ ɞɚɧɧɵɣ ɷɥɟɦɟɧɬ ɨɬɧɨɫɢɬɫɹ ɤ ɤɥɚɫɫɭ green, ɢ ɨɧ ɜɵɞɟɥɢɬ ɟɝɨ ɡɟɥɟɧɵɦ ɰɜɟɬɨɦ. ɇɚɩɪɢɦɟɪ: Ɉɞɢɧ Ⱦɜɚ Ɍɪɢ ɑɟɬɵɪɟ Ɉɩɪɟɞɟɥɢɦ ɡɟɥɟɧɵɣ ɰɜɟɬ ɞɥɹ ɜɫɟɯ ɷɥɟɦɟɧɬɨɜ web-ɫɬɪɚɧɢɰɟ: body {color: green} ɗɥɟɦɟɧɬɵ <span> ɢ ɗɥɟɦɟɧɬɵ <span> ɢ ɲɢɪɨɤɨ ɢɫɩɨɥɶɡɭɸɬɫɹ ɜɦɟɫɬɟ ɫ ɫɟɥɟɤɬɨɪɚɦɢ ɤɥɚɫɫɨɜ. ɗɥɟɦɟɧɬ <span> ɩɪɟɞɧɚɡɧɚɱɟɧ ɞɥɹ ɪɚɛɨɬɵ ɫɨ ɫɬɪɨɤɨɜɵɦɢ ɷɥɟɦɟɧɬɚɦɢ, ɩɨɷɬɨɦɭ ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɢɡɦɟɧɟɧɢɹ ɨɬɞɟɥɶɧɵɯ ɫɢɦɜɨɥɨɜ ɢɥɢ ɢɯ ɧɚɛɨɪɨɜ, ɭɞɨɛɟɧ ɞɥɹ ɫɨɡɞɚɧɢɹ ɜɵɞɟɥɟɧɢɣ ɜ ɬɟɤɫɬɟ: ɛɭɤɜɢɰ, ɰɢɬɚɬ ɢ ɞɪ. ȼ ɬɨ ɠɟ ɜɪɟɦɹ, ɩɨɡɜɨɥɹɟɬ ɩɪɢɦɟɧɢɬɶ ɫɬɢɥɶ ɫɪɚɡɭ ɤ ɰɟɥɨɦɭ ɛɥɨɤɭ ɢ ɱɚɫɬɨ ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɫɨɡɞɚɧɢɹ ɫɥɨɟɜ. <style type=”text/css”> .capital { font-size: 150%; color: red; } <span class=”capital”>Ȼɭɤɜɢɰɚ ɹɜɥɹɟɬɫɹ ɯɭɞɨɠɟɫɬɜɟɧɧɵɦ ɩɪɢɟɦɨɦ ɨɮɨɪɦɥɟɧɢɹ ɬɟɤɫɬɚ. Ʉɨɧɬɟɤɫɬɧɵɟ ɫɟɥɟɤɬɨɪɵ ɉɪɢ ɫɨɡɞɚɧɢɢ web-ɫɬɪɚɧɢɰɵ ɱɚɫɬɨ ɩɪɢɯɨɞɢɬɫɹ ɜɤɥɚɞɵɜɚɬɶ ɨɞɧɢ ɷɥɟɦɟɧɬɵ ɜ ɞɪɭɝɢɟ. Ⱦɥɹ ɬɨɝɨ ɱɬɨɛɵ ɫɬɢɥɢ ɞɥɹ ɷɬɢɯ ɷɥɟɦɟɧɬɨɜ ɩɪɢɦɟɧɹɥɢɫɶ ɤɨɪɪɟɤɬɧɨ, ɦɨɠɧɨ ɨɩɢɫɚɬɶ ɫɟɥɟɤɬɨɪɵ, ɤɨɬɨɪɵɟ ɪɚɛɨɬɚɸɬ ɬɨɥɶɤɨ ɩɪɢ ɨɩɪɟɞɟɥɟɧɧɨɦ ɭɫɥɨɜɢɢ. Ɉɛɵɱɧɨɟ ɢɫɩɨɥɶɡɨɜɚɧɢɟ ɫɟɥɟɤɬɨɪɨɜ ɜɵɝɥɹɞɢɬ ɬɚɤ: 32 B { font-family: Arial; font-weight: bold; color: #0000ff; } I { font-style: italic; } Ʉɨɧɬɟɤɫɬɧɵɣ ɫɟɥɟɤɬɨɪ ɫɨɫɬɨɢɬ ɢɡ ɩɪɨɫɬɵɯ ɫɟɥɟɤɬɨɪɨɜ, ɪɚɡɞɟɥɟɧɧɵɯ ɩɪɨɛɟɥɨɦ. B I { font-family: Arial; font-weight: bold; color: #0000ff; font-style: italic; } ɉɪɢɦɟɪ ɀɢɪɧɵɣ ɤɭɪɫɢɜɧɵɣ ɲɪɢɮɬ Arial ɫɢɧɟɝɨ ɰɜɟɬɚ ɛɭɞɟɬ ɩɪɢɦɟɧɟɧ ɤ ɫɨɞɟɪɠɢɦɨɦɭ ɷɥɟɦɟɧɬɚ , ɤɨɝɞɚ ɨɧ ɧɚɯɨɞɢɬɫɹ ɜɧɭɬɪɢ ɷɥɟɦɟɧɬɚ . <style type=”text/css”> B { font-weight: bold; } I { font-style: italic; } B I { font-family: Arial; font-weight: bold; color: #0000ff; font-style: italic; } ɉɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ Ʉɭɪɫɢɜɧɵɣ ɲɪɢɮɬ ɉɨɥɭɠɢɪɧɵɣ ɤɭɪɫɢɜɧɵɣ ɲɪɢɮɬ Arial ɫɢɧɟɝɨ ɰɜɟɬɚ Ʉɭɪɫɢɜɧɵɣ ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ Ƚɪɭɩɩɢɪɨɜɚɧɢɟ Ȼɨɥɶɲɢɧɫɬɜɨ ɢɫɩɨɥɶɡɭɟɦɵɯ ɜ CSS ɫɟɥɟɤɬɨɪɨɜ ɢɦɟɸɬ ɧɟɤɨɬɨɪɵɟ ɨɛɳɢɟ ɫɨɜɩɚɞɚɸɳɢɟ ɫɜɨɣɫɬɜɚ, ɧɚɩɪɢɦɟɪ, ɢɫɩɨɥɶɡɭɸɬ ɨɞɢɧ ɢ ɬɨɬ ɠɟ ɲɪɢɮɬ. ɋɟɥɟɤɬɨɪɵ ɝɪɭɩɩɢɪɭɸɬɫɹ ɩɟɪɟɱɢɫɥɟɧɢɟɦ ɢɯ ɢɦɟɧ ɱɟɪɟɡ ɡɚɩɹɬɭɸ. h1, h2, h3 { font-family: Arial, Helvetica, sansserif; } h1 { font-size: 160%; color: #000033; } 33 h2 { font-size: 135%; color: #333333; } h3 { font-size: 120%; color: #990000; } ɇɚɫɥɟɞɨɜɚɧɢɟ ɇɚɫɥɟɞɨɜɚɧɢɟ – ɷɬɨ ɩɟɪɟɧɨɫ ɩɪɚɜɢɥ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɞɥɹ ɷɥɟɦɟɧɬɨɜɩɪɟɞɤɨɜ ɧɚ ɜɥɨɠɟɧɧɵɟ ɷɥɟɦɟɧɬɵ – ɩɨɬɨɦɤɢ. ȼ ɫɥɟɞɭɸɳɟɦ ɩɪɢɦɟɪɟ ɞɥɹ ɚɛɡɚɰɚ ɡɚɞɚɧɨ ɮɨɪɦɚɬɢɪɨɜɚɧɢɟ, ɚ ɞɥɹ ɷɥɟɦɟɧɬɚ <em>, ɤɨɬɨɪɵɣ ɧɚɯɨɞɢɬɫɹ ɜɧɭɬɪɢ ɩɚɪɚɝɪɚɮɚ, – ɧɟɬ. ȼ ɷɬɨɦ ɫɥɭɱɚɟ ɜɥɨɠɟɧɧɵɣ ɷɥɟɦɟɧɬ ɧɚɫɥɟɞɭɟɬ ɫɜɨɣɫɬɜɚ ɪɨɞɢɬɟɥɶɫɤɨɝɨ ɷɥɟɦɟɧɬɚ. <style type=”text/css”> p {text-align: justify; color: #6624ff; } strong { font-weight: bold; color: navy; } <strong>ɂɧɮɨɪɦɚɰɢɹɹɜɥɹɟɬɫɹ ɨɫɧɨɜɨɩɨɥɚɝɚɸɳɢɦ ɩɨɧɹɬɢɟɦ ɜ ɬɟɨɪɢɢ<em>ɦɚɪɤɟɬɢɧɝɨɜɵɯ ɢɫɫɥɟɞɨɜɚɧɢɣ. ɉɫɟɜɞɨɤɥɚɫɫɵ ɉɫɟɜɞɨɤɥɚɫɫɵ ɢɫɩɨɥɶɡɭɸɬɫɹ ɜ CSS, ɱɬɨɛɵ ɩɪɢɦɟɧɹɬɶ ɤ ɷɥɟɦɟɧɬɚɦ ɪɚɡɧɵɟ ɩɪɨɰɟɞɭɪɵ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɜ ɡɚɜɢɫɢɦɨɫɬɢ ɨɬ ɧɚɥɢɱɢɹ ɨɩɪɟɞɟɥɟɧɧɵɯ ɜɧɟɲɧɢɯ ɭɫɥɨɜɢɣ. ȼ ɧɚɫɬɨɹɳɟɟ ɜɪɟɦɹ ɩɫɟɜɞɨɤɥɚɫɫɵ ɢɫɩɨɥɶɡɭɸɬɫɹ ɬɨɥɶɤɨ ɞɥɹ ɫɫɵɥɨɤ. ɂɦɹ ɩɫɟɜɞɨɤɥɚɫɫ ɜ ɫɟɥɟɤɬɨɪɟ ɭɫɬɚɧɚɜɥɢɜɚɟɬɫɹ ɩɨɫɥɟ ɞɜɨɟɬɨɱɢɹ. Ⱥ: ɩɫɟɜɞɨɤɥɚɫɫ {ɫɜɨɣɫɬɜɨ: ɡɧɚɱɟɧɢɟ} ɉɫɟɜɞɨɤɥɚɫɫɵ ɞɥɹ ɫɫɵɥɨɤ ɦɨɝɭɬ ɩɪɢɧɢɦɚɬɶ ɫɥɟɞɭɸɳɢɟ ɡɧɚɱɟɧɢɹ: x active – ɚɤɬɢɜɧɚɹ ɫɫɵɥɤɚ; x link – ɧɟɩɨɫɟɳɟɧɧɚɹ ɫɫɵɥɤɚ; x hover – ɫɫɵɥɤɚ ɩɪɢ ɧɚɜɟɞɟɧɧɨɦ ɤɭɪɫɨɪɟ ɦɵɲɢ; x visited – ɩɨɫɟɳɟɧɧɚɹ ɫɫɵɥɤɚ. 34 ɉɪɢɦɟɪ <style type=”text/css”> a: link { color: #003366; } a: visited { color: #660066; } a: hover { color: #800000; } a: active { color: #ff0000; } | ɋɫɵɥɤɚ 1 | ɋɫɵɥɤɚ 2 ɉɫɟɜɞɨɤɥɚɫɫɵ ɫɨɱɟɬɚɸɬɫɹ ɫ ɫɟɥɟɤɬɨɪɚɦɢ, ɱɬɨ ɩɨɡɜɨɥɹɟɬ ɫɨɡɞɚɜɚɬɶ ɫɫɵɥɤɢ ɫ ɪɚɡɧɵɦɢ ɩɚɪɚɦɟɬɪɚɦɢ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ. <style> a.link1 { font-size: 12px; color: green } a.link1:hover { color: red } a.link2 { font-size: 14px; color: blue } a.link2:hover { color: red } | ɋɫɵɥɤɚ 1 | ɋɫɵɥɤɚ 2 | ɋɫɵɥɤɚ 3 | ȼ ɩɪɢɦɟɪɟ ɢɫɩɨɥɶɡɭɟɬɫɹ ɬɪɢ ɜɢɞɚ ɫɫɵɥɨɤ. ɉɟɪɜɵɣ ɬɢɩ ɩɨ ɭɦɨɥɱɚɧɢɸ, ɜɬɨɪɚɹ ɫɫɵɥɤɚ – ɡɟɥɟɧɚɹ, ɬɪɟɬɶɹ – ɫɢɧɹɹ. ȼɫɟ ɬɪɢ ɫɫɵɥɤɢ ɢɡɦɟɧɹɸɬ ɫɜɨɣ ɰɜɟɬ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɤɭɪɫɨɪɚ ɦɵɲɢ. 35 ɉɨɞɤɥɸɱɟɧɢɟ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ ɋɭɳɟɫɬɜɭɟɬ ɬɪɢ ɨɫɧɨɜɧɵɯ ɫɩɨɫɨɛɚ ɜɤɥɸɱɟɧɢɹ ɬɚɛɥɢɰ ɫɬɢɥɟɣ ɜ web ɞɨɤɭɦɟɧɬɵ. ɗɬɨ ɦɨɝɭɬ ɛɵɬɶ ɝɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ, ɜɫɬɪɨɟɧɧɵɟ ɫɬɢɥɢ ɢ ɜɧɟɲɧɢɟ ɫɬɢɥɢ. Ƚɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ: ɷɥɟɦɟɧɬ <style> ɋ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <style> ɨɩɪɟɞɟɥɹɸɬɫɹ ɝɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ (global style sheets), ɬɨ ɟɫɬɶ ɫɬɢɥɢ ɞɥɹ ɜɫɟɣ ɬɟɤɭɳɟɣ web-ɫɬɪɚɧɢɰɵ. <style> – ɷɬɨ ɷɥɟɦɟɧɬ-ɤɨɧɬɟɣɧɟɪ, ɤɨɬɨɪɵɣ ɪɚɫɩɨɥɚɝɚɟɬɫɹ ɜ ɡɚɝɨɥɨɜɤɟ ɞɨɤɭɦɟɧɬɚ . ȼ ɧɟɦ ɫɨɞɟɪɠɢɬɫɹ ɨɩɢɫɚɧɢɟ ɫɬɢɥɟɣ ɜɫɟɯ ɷɥɟɦɟɧɬɨɜ, ɤɨɬɨɪɵɟ ɛɭɞɭɬ ɩɪɢɫɭɬɫɬɜɨɜɚɬɶ ɧɚ ɞɚɧɧɨɣ web-ɫɬɪɚɧɢɰɟ. Ɉɩɢɫɚɧɢɟ ɫɬɢɥɟɣ ɥɭɱɲɟ ɜɥɨɠɢɬɶ ɜ HTML-ɤɨɦɦɟɧɬɚɪɢɢ. Ȼɚɡɨɜɵɣ ɮɨɪɦɚɬ ɞɥɹ ɩɨɞɤɥɸɱɟɧɢɹ ɫɬɢɥɟɣ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <style> ɬɚɤɨɜ: ɇɚɡɜɚɧɢɟ ɞɨɤɭɦɟɧɬɚ <style type=”MIME-ɬɢɩ”> ɋɟɥɟɤɬɨɪ_1 {ɨɩɪɟɞɟɥɟɧɢɟ} ɋɟɥɟɤɬɨɪ_2 {ɨɩɪɟɞɟɥɟɧɢɟ} … Ⱦɥɹ ɧɚɲɢɯ ɰɟɥɟɣ ɚɬɪɢɛɭɬ type ɜɫɟɝɞɚ ɛɭɞɟɬ ɩɪɢɧɢɦɚɬɶ ɡɧɚɱɟɧɢɟ «text/css». ɗɬɨ ɝɨɜɨɪɢɬ ɛɪɚɭɡɟɪɭ ɨ ɬɨɦ, ɱɬɨ ɜɵ ɛɭɞɟɬɟ ɢɫɩɨɥɶɡɨɜɚɬɶ ɜ ɤɚɱɟɫɬɜɟ ɹɡɵɤɚ ɫɬɢɥɟɣ ɢɦɟɧɧɨ CSS. ɋɟɥɟɤɬɨɪ ɦɨɠɟɬ ɛɵɬɶ ɥɸɛɵɦ ɷɥɟɦɟɧɬɨɦ HTML. ɗɥɟɦɟɧɬɵ ɦɨɝɭɬ ɛɵɬɶ ɪɚɡɛɢɬɵ ɧɚ ɤɥɚɫɫɵ class, ɢɦɟɬɶ ɢɞɟɧɬɢɮɢɤɚɬɨɪɵ id. ɋɬɪɚɧɢɰɚ ɫɨ ɫɬɢɥɹɦɢ <style type=”text/css”> 36 ȼ ɩɪɢɜɟɞɟɧɧɨɦ ɜɵɲɟ ɨɩɢɫɚɧɢɢ ɫɬɢɥɟɣ ɫɨɡɞɚɸɬɫɹ ɞɜɚ ɤɥɚɫɫɚ ɷɥɟɦɟɧɬɨɜ ɢ . ɗɬɢ ɞɜɚ ɤɥɚɫɫɚ ɧɚɡɵɜɚɸɬɫɹ ital ɢ red. Ʉɥɚɫɫ ital ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɧɚɱɟɪɬɚɧɢɹ ɲɪɢɮɬɚ ɤɭɪɫɢɜɨɦ ɞɥɹ ɚɛɡɚɰɚ . Ʉɥɚɫɫ red ɨɩɢɫɵɜɚɟɬ ɤɪɚɫɧɵɣ ɰɜɟɬ ɡɚɝɨɥɨɜɤɚ . ɑɬɨɛɵ ɷɬɢ ɤɥɚɫɫɵ ɩɨɹɜɢɥɢɫɶ ɜ HTML-ɞɨɤɭɦɟɧɬɟ, ɢɫɩɨɥɶɡɭɸɬ ɚɬɪɢɛɭɬ class ɞɥɹ ɫɨɨɬɜɟɬɫɬɜɭɸɳɟɝɨ ɷɥɟɦɟɧɬɚ: ɗɬɨɬ ɬɟɤɫɬ ɞɨɥɠɟɧ ɛɵɬɶ ɜɵɞɟɥɟɧ ɤɪɚɫɧɵɦ ɗɬɨɬ ɡɚɝɨɥɨɜɨɤ ɞɨɥɠɟɧ ɛɵɬɶ ɜɵɞɟɥɟɧ ɤɭɪɫɢɜɨɦ ɉɪɢɦɟɪ. ɉɨɞɤɥɸɱɟɧɢɟ ɝɥɨɛɚɥɶɧɵɯ ɫɬɢɥɟɣ ȼ ɢɞɟɚɥɟ ɜɫɟ ɫɜɨɣɫɬɜɚ ɷɥɟɦɟɧɬɨɜ web-ɫɬɪɚɧɢɰɵ ɞɨɥɠɧɵ ɛɵɬɶ ɨɩɢɫɚɧɵ ɫ ɩɨɦɨɳɶɸ ɫɬɢɥɟɣ. ȼɧɟɞɪɢɦ ɧɟɛɨɥɶɲɨɣ ɫɩɢɫɨɤ ɫɬɢɥɟɣ ɜ HTMLɫɬɪɚɧɢɰɭ. ȼɤɥɸɱɟɧɢɟ ɫɩɢɫɤɚ ɫɬɢɥɟɣ ɜ HTML-ɫɬɪɚɧɢɰɭ (style1.html): ɉɪɢɦɟɪ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɫɩɢɫɤɚ ɫɬɢɥɟɣ CSS <style type=”text/css”> VasiaPup Ltd. ɂɡɦɟɧɢ ɦɢɪ. Ɉɫɬɚɧɶɫɹ ɫɨɛɨɣ. Ɉ ɧɚɲɟɣ ɮɢɥɨɫɨɮɢɢ 37 <em>ɇɟɫɬɢ ɞɨɛɪɨ ɜ ɦɢɪ — ɷɬɨ ɪɚɞɨɫɬɶ, ɚ ɧɟ ɨɛɹɡɚɧɧɨɫɬɶ. Ⱦɟɥɚɣ ɜɫɟ, ɱɬɨ ɜ ɬɜɨɢɯ ɫɢɥɚɯ ȼɧɟɲɧɢɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS Ɋɚɫɫɦɨɬɪɢɦ ɞɜɚ ɞɪɭɝɢɯ ɫɩɨɫɨɛɚ ɜɤɥɸɱɟɧɢɹ ɫɬɢɥɟɣ CSS ɜ HTMLɞɨɤɭɦɟɧɬ. ɇɚɱɧɟɦ ɫ ɜɧɟɲɧɢɯ, ɢɥɢ ɫɜɹɡɚɧɧɵɯ (linked style sheets), ɬɚɛɥɢɰ ɫɬɢɥɟɣ, ɫ ɩɨɦɨɳɶɸ ɤɨɬɨɪɵɯ ɦɨɠɧɨ ɨɩɪɟɞɟɥɹɬɶ ɫɜɨɣɫɬɜɚ ɷɥɟɦɟɧɬɨɜ ɫɪɚɡɭ ɧɟɫɤɨɥɶɤɢɯ ɫɬɪɚɧɢɰ ɫɚɣɬɚ. ɋɬɢɥɢ ɯɪɚɧɹɬɫɹ ɜ ɨɬɞɟɥɶɧɨɦ ɮɚɣɥɟ, ɤɨɬɨɪɵɣ ɦɨɠɟɬ ɛɵɬɶ ɢɫɩɨɥɶɡɨɜɚɧ ɞɥɹ ɥɸɛɵɯ web-ɫɬɪɚɧɢɰ. Ⱦɥɹ ɩɨɞɤɥɸɱɟɧɢɹ ɜɧɟɲɧɢɯ ɫɬɢɥɟɣ ɢɫɩɨɥɶɡɭɟɬɫɹ ɷɥɟɦɟɧɬ . ɗɥɟɦɟɧɬ ɋ ɩɨɦɨɳɶɸ ɚɬɪɢɛɭɬɚ rel ɩɨɞɤɥɸɱɚɸɬɫɹ ɜɧɟɲɧɢɟ ɫɬɢɥɢ, ɫɨɞɟɪɠɚɳɢɟɫɹ ɜ ɨɬɞɟɥɶɧɨɦ ɮɚɣɥɟ ɫ ɪɚɫɲɢɪɟɧɢɟɦ .css. Ɏɨɪɦɚɬ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɷɥɟɦɟɧɬɚ ɜ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɬɚɤɨɜ: ɉɟɪɜɵɟ ɞɜɚ ɚɬɪɢɛɭɬɚ ɫɨɨɛɳɚɸɬ ɛɪɚɭɡɟɪɭ, ɱɬɨ ɞɥɹ ɞɚɧɧɨɣ ɫɬɪɚɧɢɰɵ ɛɭɞɭɬ ɢɫɩɨɥɶɡɨɜɚɬɶɫɹ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS. Ⱥɬɪɢɛɭɬ href ɫɨɞɟɪɠɢɬ URL ɩɨɞɤɥɸɱɚɟɦɨɝɨ ɮɚɣɥɚ ɫɬɢɥɟɣ. ɉɪɢɦɟɪ ɩɨɞɤɥɸɱɟɧɢɹ ɜɧɟɲɧɢɯ ɫɬɢɥɟɣ: Ɂɚɝɨɥɨɜɨɤ ɫɬɪɚɧɢɰɵ ȿɫɥɢ ɞɥɹ ɫɚɣɬɚ ɢɫɩɨɥɶɡɭɟɬɫɹ ɨɞɢɧ ɮɚɣɥ ɨɩɢɫɚɧɢɹ ɫɬɢɥɟɣ, ɬɨ ɥɭɱɲɟ ɧɚɡɜɚɬɶ ɟɝɨ ɩɨ ɭɦɨɥɱɚɧɢɸ style.css ɢɥɢ default.css. Ɍɚɤɨɣ ɮɚɣɥ ɫɬɢɥɟɣ ɫɨɞɟɪɠɢɬ ɩɪɨɫɬɨɣ ɩɟɪɟɱɟɧɶ ɫɟɥɟɤɬɨɪɨɜ ɢ ɨɩɪɟɞɟɥɟɧɢɣ ɢɯ ɫɬɢɥɟɣ, 38 ɡɚɩɢɫɚɧɧɵɯ ɩɨ ɩɪɚɜɢɥɚɦ ɫɢɧɬɚɤɫɢɫɚ CSS. ɇɭɠɧɨ ɩɪɨɫɬɨ ɫɨɡɞɚɬɶ ɜ ɥɸɛɨɦ ɬɟɤɫɬɨɜɨɦ ɪɟɞɚɤɬɨɪɟ ɮɚɣɥ ɢ ɫɨɯɪɚɧɢɬɶ ɟɝɨ ɫ ɪɚɫɲɢɪɟɧɢɟɦ .css. ɉɪɢɦɟɪ ɫɨɞɟɪɠɢɦɨɝɨ ɮɚɣɥɚ style.css: body, td { font-family: Arial, Helvetica, sansserif; font-size: 10pt } .sample { font: italic 10pt “Courier New”, Courier, monospace; margin-left: 25px } h1, h2 { color: #990000 } a:visited {color: #6495ED} ɉɟɪɜɚɹ ɡɚɩɢɫɶ ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɲɪɢɮɬɚ ɜɫɟɝɨ ɞɨɤɭɦɟɧɬɚ. ɗɬɨɬ ɫɬɢɥɶ ɨɩɪɟɞɟɥɟɧ ɬɚɤɠɟ ɞɥɹ ɷɥɟɦɟɧɬɚ	. ȼɬɨɪɚɹ ɡɚɩɢɫɶ ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɤɥɚɫɫɚ sample, ɤɨɬɨɪɵɣ ɞɨɥɠɟɧ ɨɬɨɛɪɚɠɚɬɶɫɹ ɦɨɧɨɲɢɪɢɧɧɵɦ ɲɪɢɮɬɨɦ ɫ ɨɬɫɬɭɩɨɦ ɜ 25 ɩɢɤɫɟɥɨɜ ɜɩɪɚɜɨ. Ⱦɚɥɟɟ ɨɩɪɟɞɟɥɟɧɨ ɢɡɦɟɧɟɧɢɟ ɰɜɟɬɚ ɞɥɹ ɡɚɝɨɥɨɜɤɨɜ ɩɟɪɜɨɝɨ ɢ ɜɬɨɪɨɝɨ ɭɪɨɜɧɟɣ ɢ ɞɥɹ ɩɪɨɫɦɨɬɪɟɧɧɵɯ ɫɫɵɥɨɤ. Ⱦɨɫɬɨɢɧɫɬɜɚ ɜɧɟɲɧɢɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ: 1) ɢɫɩɨɥɶɡɭɟɬɫɹ ɨɞɢɧ ɮɚɣɥ ɫ ɨɩɢɫɚɧɢɟɦ ɫɬɢɥɟɣ ɞɥɹ ɥɸɛɨɝɨ ɤɨɥɢɱɟɫɬɜɚ ɫɬɪɚɧɢɰ; ɜɨɡɦɨɠɧɨ ɬɚɤɠɟ ɩɪɢɦɟɧɟɧɢɟ ɷɬɨɝɨ ɮɚɣɥɚ ɧɚ ɞɪɭɝɢɯ ɫɚɣɬɚɯ; 2) ɮɚɣɥ ɫɬɢɥɟɣ ɦɨɠɧɨ ɢɡɦɟɧɹɬɶ ɛɟɡ ɦɨɞɢɮɢɤɚɰɢɢ web-ɫɬɪɚɧɢɰ; 3) ɩɪɢ ɢɡɦɟɧɟɧɢɢ ɨɩɢɫɚɧɢɹ ɫɬɢɥɹ ɜ ɨɞɧɨɦ ɦɟɫɬɟ ɫɬɢɥɶ ɚɜɬɨɦɚɬɢɱɟɫɤɢ ɩɪɢɦɟɧɹɟɬɫɹ ɤɨ ɜɫɟɦ ɷɥɟɦɟɧɬɚɦ ɧɚ ɜɫɟɯ webɫɬɪɚɧɢɰɚɯ; 4) ɮɚɣɥ ɫ ɨɩɢɫɚɧɢɟɦ ɫɬɢɥɟɣ ɩɪɢ ɩɟɪɜɨɣ ɡɚɝɪɭɡɤɟ web-ɫɚɣɬɚ ɧɚ ɥɨɤɚɥɶɧɨɦ ɤɨɦɩɶɸɬɟɪɟ ɩɨɦɟɳɚɟɬɫɹ ɜ ɤɷɲ, ɨɬɞɟɥɶɧɨ ɨɬ webɫɬɪɚɧɢɰ, ɛɥɚɝɨɞɚɪɹ ɱɟɦɭ ɡɚɝɪɭɡɤɚ ɫɬɪɚɧɢɰ ɫɚɣɬɚ ɩɪɨɢɫɯɨɞɢɬ ɛɵɫɬɪɟɟ. ɋɜɨɣɫɬɜɚ CSS ɋɜɨɣɫɬɜɚ ɲɪɢɮɬɚ ɋ ɩɨɦɨɳɶɸ CSS ɦɨɠɧɨ ɨɩɪɟɞɟɥɹɬɶ ɝɚɪɧɢɬɭɪɭ, ɪɚɡɦɟɪ, ɫɬɢɥɶ ɧɚɱɟɪɬɚɧɢɹ ɲɪɢɮɬɚ, ɪɟɝɢɫɬɪ ɲɪɢɮɬɚ ɢ ɬɨɥɳɢɧɭ. 1. ɋɩɢɫɨɤ ɝɚɪɧɢɬɭɪ ɲɪɢɮɬɚ. font-family: ɝɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ p {font-family: Arial, sans-serif} 39 2. ɇɚɱɟɪɬɚɧɢɟ ɲɪɢɮɬɚ. font-style: normal/italic/oblique p {font-style: italic} 3. Ɋɟɝɢɫɬɪ ɲɪɢɮɬɚ. font-variant: normal/small-caps p {font-variant: small-caps} Ɍɚɛɥɢɰɚ 1 ɋɜɨɣɫɬɜɚ ɲɪɢɮɬɚ CSS ɋɜɨɣɫɬɜɨ Ɂɧɚɱɟɧɢɟ Ɉɩɢɫɚɧɢɟ ɉɪɢɦɟɪ Ƚɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ Font-family Ƚɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ Ɉɩɪɟɞɟɥɹɟɬ ɫɩɢɫɨɤ ɝɚɪɧɢɬɭɪ ɲɪɢɮɬɚ ɜ ɩɨɪɹɞɤɟ ɭɦɟɧɶɲɟɧɢɹ ɩɪɢɨɪɢɬɟɬɚ P{fontfamily:Arial, sans-serif} ɇɚɱɟɪɬɚɧɢɟ ɲɪɢɮɬɚ Ɉɛɵɱɧɵɣ ɲɪɢɮɬ Normal Font-style Italic Ʉɭɪɫɢɜɧɵɣ ɲɪɢɮɬ Ʉɨɫɨɣ ɲɪɢɮɬ oblique Ɋɟɝɢɫɬɪ ɲɪɢɮɬɚ Font-variant Normal ɇɨɪɦɚɥɶɧɵɣ Small-caps Ɇɚɥɵɟ ɩɪɨɩɢɫɧɵɟ ɛɭɤɜɵ Ɍɨɥɳɢɧɚ ɲɪɢɮɬɚ Font-weight P{fontstyle:italic} Normal ɇɨɪɦɚɥɶɧɚɹ ɠɢɪɧɨɫɬɶ Lighter ɋɜɟɬɥɟɟ Bold ɉɨɥɭɠɢɪɧɵɣ Bolder ɀɢɪɧɟɟ 40 P{fontvariant:smallcaps} P{fontweight:bold} 100–900 100-ɫɜɟɬɥɵɣ ɲɪɢɮɬ 400-ɧɨɪɦɚɥɶɧɵɣ ɲɪɢɮɬ 700-ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ 900-ɫɚɦɵɣ ɠɢɪɧɵɣ Ɋɚɡɦɟɪ ɲɪɢɮɬɚ Font-size Normal ɇɨɪɦɚɥɶɧɵɣ ɪɚɡɦɟɪ Pt ɉɭɧɤɬɵ Px ɉɢɤɫɟɥɵ % ɉɪɨɰɟɧɬɵ P{fontsize:12pt} ɋɜɨɣɫɬɜɚ ɬɟɤɫɬɚ Ⱦɚɧɧɵɣ ɜɢɞ ɫɜɨɣɫɬɜ ɩɪɢɦɟɧɹɟɬɫɹ ɞɥɹ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɬɟɤɫɬɚ – ɜɵɪɚɜɧɢɜɚɧɢɹ, ɪɚɡɪɟɠɟɧɢɹ, ɭɫɬɚɧɨɜɤɢ ɪɟɝɢɫɬɪɚ ɬɟɤɫɬɚ, ɜɵɪɚɜɧɢɜɚɧɢɹ ɬɟɤɫɬɚ, ɪɚɫɫɬɨɹɧɢɹ ɦɟɠɞɭ ɛɭɤɜɚɦɢ ɢ ɬ. ɞ. 1. Ɇɢɧɢɦɚɥɶɧɚɹ ɜɵɫɨɬɚ ɫɬɪɨɤ. line-height: normal/1.5/120% 2. Ɉɮɨɪɦɥɟɧɢɟ ɬɟɤɫɬɚ. text-decoration: none/underline/overline/blink/line-through 3. ɂɧɬɟɪɜɚɥ ɦɟɠɞɭ ɫɬɪɨɤɚɦɢ. letter-spacing: 5px Ɍɚɛɥɢɰɚ 2 ɋɜɨɣɫɬɜɨ ɬɟɤɫɬɚ CSS ɋɜɨɣɫɬɜɨ Ɂɧɚɱɟɧɢɟ Line-height Normal (100%) Ɉɩɢɫɚɧɢɟ Ɇɢɧɢɦɚɥɶɧɚɹ ɜɵɫɨɬɚ Ɇɧɨɠɢɬɟɥɶ ɫɬɪɨɤ (ɜɵɫɨɬɚ ɫɬɪɨɤɢ – ɩɪɨɢɡɜɟɞɟɧɢɟ ɦɧɨɠɢɬɟɥɹ ɧɚ ɪɚɡɦɟɪ ɲɪɢɮɬɚ) 41 ɉɪɢɦɟɪ Lineheight:normal Line-height:1.5 Lineheight:12px Line- Ɍɨɱɧɨ (ɜ ɟɞɢɧɢɰɚɯ ɞɥɢɧɵ) height:120 % % (ɨɬ ɪɚɡɦɟɪ ɲɪɢɮɬɚ) Ɉɮɨɪɦɥɟɧɢɟ ɬɟɤɫɬɚ Text-decoration Underline ɉɨɞɱɟɪɤɢɜɚɧɢɟ Overline ɑɟɪɬɚ ɧɚɞ ɬɟɤɫɬɨɦ Line-through ɉɟɪɟɱɟɪɤɢɜɚɧɢɟ blink Ɇɢɝɚɧɢɟ ɬɟɤɫɬɚ None Ɉɮɨɪɦɥɟɧɢɟ ɨɬɫɭɬɫɬɜɭɟɬ Textdecoration:none Ɋɟɝɢɫɬɪ ɬɟɤɫɬɚ Text-transform None Ɋɟɝɢɫɬɪ ɧɟ ɩɟɪɟɤɥɸɱɚɟɬɫɹ Capitalize ɇɚɱɚɥɶɧɵɟ ɛɭɤɜɵ ɫɥɨɜ ɩɪɟɨɛɪɚɡɭɸɬɫɹ ɜ ɡɚɝɥɚɜɧɵɟ uppercase ȼɫɟ ɩɪɨɩɢɫɧɵɟ Lowercase ȼɫɟ ɫɬɪɨɱɧɵɟ Texttransform:capita lize ȼɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɛɥɨɱɧɵɯ ɷɥɟɦɟɧɬɚɯ left ȼɵɪɚɜɧɢɜɚɧɢɟ ɜɥɟɜɨ Right ȼɵɪɚɜɧɢɜɚɧɢɟ ɜɩɪɚɜɨ Center ȼɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ justify ȼɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɲɢɪɢɧɟ Letter-spacing ȿɞɢɧɢɰɵ ɞɥɢɧɵ Ɋɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɛɭɤɜɚɦɢ Letterspacing:5px Word-spacing ȿɞɢɧɢɰɵ ɞɥɢɧɵ ɂɧɬɟɪɜɚɥ ɦɟɠɞɭ ɫɥɨɜɚɦɢ Wordspacing:5px Ɋɚɛɨɬɚ ɫ ɩɪɨɛɟɥɚɦɢ White-space:pre Text-align White-space 42 Textalign:justify Normal Ʌɢɲɧɢɟ ɩɪɨɛɟɥɵ ɢɝɧɨɪɢɪɭɸɬɫɹ, ɫɬɪɨɤɢ ɩɟɪɟɧɨɫɹɬɫɹ ɚɜɬɨɦɚɬɢɱɟɫɤɢ Pre ȼɫɟ ɩɪɨɛɟɥɵ ɭɱɢɬɵɜɚɸɬɫɹ Nowrap Ɂɚɩɪɟɳɟɧ ɩɟɪɟɧɨɫ ɫɬɪɨɤ, ɥɢɲɧɢɟ ɩɪɨɛɟɥɵ ɢɝɧɨɪɢɪɭɸɬɫɹ Ɉɬɫɬɭɩ ɩɟɪɜɨɣ ɫɬɪɨɤɢ Text-indent ȿɞɢɧɢɰɵ ɞɥɢɧɵ Ɉɬɫɬɭɩ ɜ ɟɞɢɧɢɰɚɯ ɞɥɢɧɵ % ȼ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ Textindent:15px ɐɜɟɬ ɢ ɮɨɧ ɋɜɨɣɫɬɜɚ CSS, ɩɪɟɞɧɚɡɧɚɱɟɧɧɵɟ ɞɥɹ ɭɩɪɚɜɥɟɧɢɹ ɰɜɟɬɨɦ, – ɰɜɟɬ ɬɟɤɫɬɚ, ɰɜɟɬ ɮɨɧɚ, ɮɨɧɨɜɵɣ ɪɢɫɭɧɨɤ, ɩɨɜɬɨɪɹɟɦɨɫɬɶ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ, ɩɪɨɤɪɭɱɢɜɚɟɦɨɫɬɶ ɮɨɧɚ ɜɦɟɫɬɟ ɫ ɞɨɤɭɦɟɧɬɨɦ. 1. ɐɜɟɬ ɬɟɤɫɬɚ. p {color: #999999} 2. ɐɜɟɬ ɮɨɧɚ. Background-image: url/none 3. ɉɪɨɤɪɭɱɢɜɚɟɦɨɫɬɶ ɮɨɧɚ. Background-attachment: scroll/fixed ɍɫɬɚɧɨɜɤɚ ɰɜɟɬɚ ɮɨɧɚ ɢ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ ɐɜɟɬ ɮɨɧɚ ɨɩɪɟɞɟɥɹɟɬɫɹ ɡɧɚɱɟɧɢɟɦ ɫɜɨɣɫɬɜɚ background-color, ɚ ɢɡɨɛɪɚɠɟɧɢɟ, ɤɨɬɨɪɨɟ ɢɫɩɨɥɶɡɭɟɬɫɹ ɜ ɤɚɱɟɫɬɜɟ ɮɨɧɚ, ɡɚɞɚɟɬɫɹ ɫɜɨɣɫɬɜɨɦ background-image. body {background-color: #98560F; backgroundimage: url(http://vasiapup.com/pictures/bg.gif)} ȿɫɥɢ ɡɚɞɚɧɨ ɮɨɧɨɜɨɟ ɢɡɨɛɪɚɠɟɧɢɟ, ɬɨ ɫɜɨɣɫɬɜɨ background-repeat ɨɩɪɟɞɟɥɹɟɬ ɟɝɨ ɩɨɜɬɨɪɹɟɦɨɫɬɶ: 43 body { background-image: url (http://vasiapup.com/pictures/bg.gif); backgroundrepeat: repeat-y} ȼ ɷɬɨɦ ɩɪɢɦɟɪɟ ɮɨɧɨɜɵɣ ɪɢɫɭɧɨɤ ɩɨɜɬɨɪɹɟɬɫɹ ɩɨ ɜɟɪɬɢɤɚɥɢ. Ɍɚɛɥɢɰɚ 3 ɋɜɨɣɫɬɜɚ CSS ɞɥɹ ɭɩɪɚɜɥɟɧɢɹ ɰɜɟɬɨɦ ɢ ɮɨɧɨɦ ɋɜɨɣɫɬɜɨ color Backgroundcolor Backgroundimage Ɂɧɚɱɟɧɢɟ ɐɜɟɬ Ɉɩɢɫɚɧɢɟ ɉɪɢɦɟɪ ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɬɟɤɫɬɚ P{color:#999999} ɐɜɟɬ ɮɨɧɚ ɐɜɟɬ transparent ɋɩɥɨɲɧɨɣ ɰɜɟɬ ɉɪɨɡɪɚɱɧɵɣ ɮɨɧ Ɏɨɧɨɜɵɣ ɪɢɫɭɧɨɤ URL URL ɪɢɫɭɧɤɚ none ɇɟɬ ɪɢɫɭɧɤɚ BODY{ Background-color: #888888} BODY{Backgroundimage: url(pictures/bg.gif)} ɉɨɜɬɨɪɹɟɦɨɫɬɶ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ Backgroundrepeat Backgroundattachment Repeat ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɩɨ ɝɨɪɢɡɨɧɬɚɥɢ ɢ ɜɟɪɬɢɤɚɥɢ Repeat-x ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɬɨɥɶɤɨ ɩɨ ɝɨɪɢɡɨɧɬɚɥɢ Repeat-y ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɬɨɥɶɤɨ ɩɨ ɜɟɪɬɢɤɚɥɢ No-repeat ɇɟ ɩɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɉɪɨɤɪɭɱɢɜɚɟɦɨɫɬɶ ɮɨɧɚ ɜɦɟɫɬɟ ɫ ɞɨɤɭɦɟɧɬɚɦɢ Scroll Ɏɨɧ ɩɪɨɤɪɭɱɢɜɚɟɬɫɹ fixed Ɏɨɧ ɧɟ ɩɪɨɤɪɭɱɢɜɚɟɬɫɹ 44 {Background-repeat: repeat-y} BODY{ Backgroundimage: url(pictures/bg.gif) Backgroundattachment: fixed} ɉɪɨɰɟɧɬɵ ȿɞɢɧɢɰɵ ɞɥɢɧɵ Backgroundposition Top Center Bottom ɇɚɱɚɥɶɧɨɟ ɩɨɥɨɠɟɧɢɟ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ BODY{Backgroundɨɬɧɨɫɢɬɟɥɶɧɨ ɥɟɜɨɝɨ position: left top} ɜɟɪɯɧɟɝɨ ɭɝɥɚ ɛɥɨɤɚ Left Right ɋɫɵɥɤɢ CSS ɢɦɟɟɬ ɧɟɫɤɨɥɶɤɨ ɫɜɨɣɫɬɜ ɞɥɹ ɢɡɦɟɧɟɧɢɹ ɫɬɢɥɹ ɫɫɵɥɨɤ: a:link ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɧɟɩɨɫɟɳɟɧɧɨɣ ɫɫɵɥɤɢ, a:visited ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɩɨɫɟɳɟɧɧɨɣ ɫɫɵɥɤɢ, a:active ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɚɤɬɢɜɧɨɣ ɫɫɵɥɤɢ, a:hover ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɫɫɵɥɤɢ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ. Ⱦɢɧɚɦɢɱɟɫɤɨɟ ɢɡɦɟɧɟɧɢɟ ɪɚɡɦɟɪɚ ɫɫɵɥɤɢ ȼ ɫɥɟɞɭɸɳɟɦ ɩɪɢɦɟɪɟ ɪɚɡɦɟɪ ɫɫɵɤɢ ɢɡɦɟɧɹɟɬɫɹ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ: <style type=”text/css”> a:link { text-decoration: none } a.visited { text-decoration: none } a.active { text-decoration: none } a.hover {font-size: 24; font-weight: bold; color: navy; } ɋɫɵɥɤɚ ɧɢɤɭɞɚ 45 ɂɡɦɟɧɟɧɢɟ ɰɜɟɬɚ ɩɨɞɱɟɪɤɢɜɚɧɢɹ ɉɪɢ ɩɨɦɨɳɢ CSS ɬɚɤɠɟ ɦɨɠɧɨ ɫɞɟɥɚɬɶ ɬɚɤ, ɱɬɨɛɵ ɰɜɟɬ ɫɫɵɥɤɢ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ ɦɵɲɢ ɨɫɬɚɜɚɥɫɹ ɧɟɢɡɦɟɧɧɵɦ, ɧɨ ɟɟ ɩɨɞɱɟɪɤɢɜɚɧɢɟ ɦɟɧɹɥɨ ɫɜɨɣ ɰɜɟɬ. <style> a:link {color: blue; text-decoration: none} a:hover {color: red; text-decoration: underline} .link {color: blue} <span class=”link”> ɋɫɵɥɤɚ ɧɢɤɭɞɚ ɋɩɢɫɤɢ ɋ ɩɨɦɨɳɶɸ CSS ɦɨɠɧɨ ɫɨɡɞɚɬɶ ɧɭɦɟɪɨɜɚɧɧɵɟ ɢ ɧɟɧɭɦɟɪɨɜɚɧɧɵɟ ɫɩɢɫɤɢ. ɋɜɨɣɫɬɜɚ ɷɥɟɦɟɧɬɨɜ, ɩɪɟɞɧɚɡɧɚɱɟɧɧɵɟ ɞɥɹ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɫɩɢɫɤɨɜ. 1. ȼɢɞ ɦɚɪɤɟɪɚ. list-style-type: disc/circle/square/decimal/lower-roman/upperroman/lower-alpha/upper-alpha/none 2. ɍɫɬɚɧɨɜɤɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜ ɤɚɱɟɫɬɜɟ ɦɚɪɤɟɪɚ. list-style-image: url/none 3. ɉɨɥɨɠɟɧɢɟ ɦɚɪɤɟɪɚ ɨɬɧɨɫɢɬɟɥɶɧɨ ɫɬɪɨɤ ɬɟɤɫɬɚ. list-style-position: outside/inside ɉɪɢɦɟɪ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɫɜɨɣɫɬɜ ɫɩɢɫɤɚ ɫ ɩɨɦɨɳɶɸ CSS: <style type=”text/css”> li {list-style: square outside; color: purple; font-style: oblique } 46 ɗɥɟɦɟɧɬ ɫɨɫɬɨɢɬ ɢɡ: ɨɬɤɪɵɜɚɸɳɟɝɨ ɬɟɝɚ; ɫɨɞɟɪɠɢɦɨɝɨ; ɡɚɤɪɵɜɚɸɳɟɝɨ ɬɟɝɚ; Ɍɚɛɥɢɰɚ 4 ɋɜɨɣɫɬɜɚ ɫɩɢɫɤɨɜ CSS ɋɜɨɣɫɬɜɨ Ɂɧɚɱɟɧɢɟ List-style-type Ɉɩɢɫɚɧɢɟ ɉɪɢɦɟɪ ȼɢɞ ɦɚɪɤɟɪɚ Li {list-style: circle} Ⱦɥɹ ɧɟɧɭɦɟɪɨɜɚɧɧɨɝɨ ɫɩɢɫɤɚ Disc Ɇɚɪɤɟɪ Circle Ɉɤɪɭɠɧɨɫɬɶ Square Ʉɜɚɞɪɚɬ Ⱦɥɹ ɧɭɦɟɪɟɜɚɧɧɨɝɨ ɫɩɢɫɤɚ Decimal Ⱦɟɫɹɬɢɱɧɵɟ ɚɪɚɛɫɤɢɟ ɰɢɮɪɵ Decimalleading-zero Ⱦɟɫɹɬɢɱɧɵɟ ɰɢɮɪɵ ɫ ɞɨɛɚɜɥɟɧɢɟɦ ɧɭɥɹ ɜ ɧɚɱɚɥɟ Lower-roman Ɇɚɥɵɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ 47 Upper-roman Ȼɨɥɶɲɢɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ Lower-alpha ɋɬɪɨɱɧɵɟ ɛɭɤɜɵ Upper-alpha ɉɪɨɩɢɫɧɵɟ ɛɭɤɜɵ none ɇɭɦɟɪɚɰɢɹ ɨɬɫɭɬɫɬɜɭɟɬ ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɢɡɨɛɪɚɠɟɧɢɟ ɜ ɤɚɱɟɫɬɜɟ ɫɢɦɜɨɥɚ ɦɚɪɤɟɪɚ List-styleimage List-style position URL URL ɢɡɨɛɪɚɠɟɧɢɹ none ɇɟɬ ɢɡɨɛɪɚɠɟɧɢɹ Outside ɉɨɥɨɠɟɧɢɟ ɦɚɪɤɟɪɚ ɨɬɧɨɫɢɬɟɥɶɧɨ ɫɬɪɨɤ ɬɟɤɫɬɚ inside Li {list-styleimage:url(images/b ullet.gif)} Li {list-styleposition: inside} Ʉɭɪɫɨɪɵ ɋɩɨɦɨɳɶɸ ɫɬɢɥɟɣ CSS ɦɨɠɧɨ ɩɟɪɟɨɩɪɟɞɟɥɢɬɶ ɜɢɞ ɤɭɪɫɨɪɚ ɦɵɲɢ ɢ ɜɵɛɪɚɬɶ ɨɞɢɧ ɢɡ 15 ɜɨɡɦɨɠɧɵɯ ɜɚɪɢɚɧɬɨɜ: Cursor:default; Crosshair; Hand; Move; Text; Wait; Help; n-resize; ne-resize; e-resize; se-resize; s-resize; 48 sw-resize; w-resize; nw-resize. ɋɢɧɬɚɤɫɢɫ ɩɟɪɟɨɩɪɟɞɟɥɟɧɢɹ ɤɭɪɫɨɪɚ ɩɪɨɫɬ. Ⱦɥɹ ɤɚɠɞɨɝɨ ɤɥɚɫɫɚ ɫɟɥɟɤɬɨɪɨɜ ɨɩɪɟɞɟɥɹɟɬɫɹ ɫɜɨɣ ɜɢɞ ɤɭɪɫɨɪɚ, ɡɚɬɟɦ ɷɬɨɬ ɤɥɚɫɫ ɞɨɛɚɜɥɹɟɬɫɹ ɧɚ ɫɬɪɚɧɢɰɭ. <style type=”text/css” > .move {cursor: move} .help {cursor: help} <strong> ɉɟɪɟɦɟɫɬɢɬɟ ɦɟɧɹ FAQ Ȼɥɨɤɢ: ɝɪɚɧɢɰɵ, ɨɬɫɬɭɩɵ ɢ ɩɨɥɹ Ɍɚɛɥɢɰɚ 5 ɋɜɨɣɫɬɜɚ CSS ɞɥɹ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɝɪɚɧɢɰ ɢ ɩɨɥɟɣ ɋɜɨɣɫɬɜɨ Ɂɧɚɱɟɧɢɟ Ɉɩɢɫɚɧɢɟ Padding ȿɞɢɧɢɰɵ ɞɥɢɧɵ ɢɥɢ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ Ɉɬɫɬɭɩɵ ɨɬ ɝɪɚɧɢɰɵ ɷɥɟɦɟɧɬɚ ɞɨ ɟɝɨ ɫɨɞɟɪɠɢɦɨɝɨ Padding-top ɋɜɟɪɯɭ Padding-right ɋɩɪɚɜɚ Padding-bottom ɋɧɢɡɭ Padding-left ɋɥɟɜɚ 49 Padding Ɉɞɢɧɚɤɨɜɵɟ ɞɥɹ ɜɫɟɯ ɫɬɨɪɨɧ Margin Ɋɚɡɦɟɪɵ ɩɨɥɟɣ Margin-top ɋɜɟɪɯɭ Margin-right Margin-bottom ȿɞɢɧɢɰɵ ɞɥɢɧɵ ɢɥɢ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ ɋɩɪɚɜɚ ɋɧɢɡɭ Margin-left ɋɥɟɜɚ Margin Ɉɞɢɧɚɤɨɜɨɣ ɲɢɪɢɧɵ ɫɨ ɜɫɟɯ ɫɬɨɪɨɧ Border ɒɢɪɢɧɚ ɪɚɦɤɢ Border-top-width ɒɢɪɢɧɚ ɪɚɦɤɢ ɜɟɪɯɧɟɣ ɝɪɚɧɢɰɵ Border-rightwidth ɒɢɪɢɧɚ ɪɚɦɤɢ ɩɪɚɜɨɣ ɝɪɚɧɢɰɵ Border-bottomwidth ɒɢɪɢɧɚ ɪɚɦɤɢ ɧɢɠɧɟɣ ɝɪɚɧɢɰɵ Border-left- width ɒɢɪɢɧɚ ɪɚɦɤɢ ɥɟɜɨɣ ɝɪɚɧɢɰɵ Border-width ɒɢɪɢɧɚ ɪɚɦɤɢ ɜɫɟɯ ɝɪɚɧɢɰ ɨɞɧɨɜɪɟɦɟɧɧɨ Thin Ɍɨɧɤɚɹ Medium ɋɪɟɞɧɟɣ ɬɨɥɳɢɧɵ Thick Ɍɨɥɫɬɚɹ ȿɞɢɢɧɰɵ ɞɥɢɧɵ Border-top- color Ɂɧɚɱɟɧɢɟ ɰɜɟɬɚ Border-rightcolor Border-bottomcolor Border-left-color Bolder-color 50 ɐɜɟɬ ɪɚɦɤɢ ɞɥɹ ɝɪɚɧɢɰ transparent None Dotted Dashed Border-style Solid Double ɋɬɢɥɶ ɪɚɦɤɢ Groove Ridge Inset Outset Border-top Border-right Border-bottom Border-left Border ɒɢɪɢɧɚ, ɫɬɢɥɶ, ɰɜɟɬ Ɉɩɪɟɞɟɥɹɟɬ ɬɨɥɳɢɧɭ, ɫɬɢɥɶ ɢ ɰɜɟɬ ɤɚɠɞɨɣ ɝɪɚɧɢɰɵ ɒɢɪɢɧɚ, ɫɬɢɥɶ, ɰɜɟɬ Ɉɩɪɟɞɟɥɹɟɬ ɬɨɥɳɢɧɭ, ɫɬɢɥɶ ɢ ɰɜɟɬ ɜɫɟɣ ɪɚɦɤɢ Ɏɢɥɶɬɪɵ Ʉɚɠɞɵɣ ɬɢɩ ɮɢɥɶɬɪɚ ɩɪɟɨɛɪɚɡɭɟɬ ɨɛɴɟɤɬɵ, ɤɚɤ ɩɪɚɜɢɥɨ, ɬɟɤɫɬ ɢɥɢ ɝɪɚɮɢɤɭ, ɜ ɫɨɨɬɜɟɬɫɬɜɢɢ ɫ ɨɩɪɟɞɟɥɟɧɧɵɦ ɞɥɹ ɧɟɝɨ ɦɟɬɨɞɨɦ. ɋɢɧɬɚɤɫɢɫ ɜɢɡɭɚɥɶɧɵɯ ɮɢɥɶɬɪɨɜ: filter: ɢɦɹ_ɮɢɥɶɬɪɚ (ɩɚɪɚɦɟɬɪ1, ɩɚɪɚɦɟɬɪ2, ɩɚɪɚɦɟɬɪ3) ȿɫɥɢ ɤ ɨɛɴɟɤɬɭ ɩɪɢɦɟɧɹɟɬɫɹ ɧɟɫɤɨɥɶɤɨ ɮɢɥɶɬɪɨɜ, ɢɯ ɢɦɟɧɚ ɢ ɩɚɪɚɦɟɬɪɵ ɡɚɩɢɫɵɜɚɸɬɫɹ ɱɟɪɟɡ ɩɪɨɛɟɥ: filter: ɢɦɹ_ɮɢɥɶɬɪɚ_1 (ɩɚɪɚɦɟɬɪɵ) ɢɦɹ_ɮɢɥɶɬɪɚ_2(ɩɚɪɚɦɟɬɪɵ) Ɏɢɥɶɬɪ alpha Ɏɢɥɶɬɪ ɡɚɞɚɟɬ ɫɬɟɩɟɧɶ ɩɪɨɡɪɚɱɧɨɫɬɢ ɨɛɴɟɤɬɚ ɢ ɮɨɪɦɭ ɝɪɚɞɢɟɧɬɚ. ɋɢɧɬɚɤɫɢɫ: Filter: alpha(opacity,finishOpacity,style) ɉɚɪɚɦɟɬɪɵ ɮɢɥɶɬɪɚ: opacity – ɫɬɟɩɟɧɶ ɩɪɨɡɪɚɱɧɨɫɬɢ ɨɛɴɟɤɬɚ (ɨɬ 0 ɞɨ 100); 51 finishOpacity – ɩɪɢɦɟɧɹɟɬɫɹ ɩɪɢ ɝɪɚɞɢɟɧɬɧɨɣ ɡɚɥɢɜɤɟ (ɨɬ 0 ɞɨ 100); style – ɨɩɪɟɞɟɥɹɟɬ ɬɢɩ ɝɪɚɞɢɟɧɬɧɨɣ ɡɚɥɢɜɤɢ ɢ ɢɦɟɟɬ ɫɥɟɞɭɸɳɢɟ ɡɧɚɱɟɧɢɹ: 0 – ɡɚɥɢɜɤɚ ɨɬɫɭɬɫɬɜɭɟɬ; 1 – ɩɪɨɡɪɚɱɧɨɫɬɶ ɢɡɦɟɧɹɟɬɫɹ ɜɞɨɥɶ ɥɢɧɢɢ; 2 – ɩɪɨɡɪɚɱɧɨɫɬɶ ɢɡɦɟɧɹɟɬɫɹ ɩɨ ɤɪɭɝɭ; 3 – ɩɪɨɡɪɚɱɧɨɫɬɶ ɢɡɦɟɧɹɟɬɫɹ ɩɨ ɩɪɹɦɨɭɝɨɥɶɧɢɤɭ. Ɏɢɥɶɬɪ blur ɋɨɡɞɚɟɬ ɷɮɮɟɤɬ ɪɚɡɦɵɬɢɹ. ɋɢɧɬɚɤɫɢɫ: filter: blur (add,direction,strength) ɉɚɪɚɦɟɬɪɵ ɮɢɥɶɬɪɚ: add – 1 – ɢɫɯɨɞɧɨɟ ɢɡɨɛɪɚɠɟɧɢɟ ɢɥɢ ɬɟɤɫɬ ɞɨɛɚɜɥɹɸɬɫɹ ɜ ɪɟɡɭɥɶɬɚɬɟ ɩɪɟɨɛɪɚɡɨɜɚɧɢɹ, 0 – ɧɟ ɞɨɛɚɜɥɹɸɬɫɹ; direction – ɨɩɪɟɞɟɥɹɟɬ ɧɚɩɪɚɜɥɟɧɢɟ ɪɚɡɦɵɬɢɹ ɜ ɝɪɚɞɭɫɚɯ ɨɬ 0 ɞɨ 315 ɫ ɲɚɝɨɦ 45 ɝɪɚɞɭɫɨɜ. Ɇɨɠɧɨ ɡɚɞɚɜɚɬɶ ɧɚɩɪɚɜɥɟɧɢɟ ɫ ɩɨɦɨɳɶɸ ɫɥɨɜ: top – 0 ɝɪɚɞɭɫɨɜ; top right – 45 ɝɪɚɞɭɫɨɜ; right – 90 ɝɪɚɞɭɫɨɜ; bottom – 180 ɝɪɚɞɭɫɨɜ; default left – 270 ɝɪɚɞɭɫɨɜ; top left – 315 ɝɪɚɞɭɫɨɜ. strength – ɨɩɪɟɞɟɥɹɟɬ ɫɢɥɭ ɪɚɡɦɵɬɢɹ ɜ ɰɟɥɵɯ ɱɢɫɥɚɯ. Ɏɢɥɶɬɪ chroma Ⱦɟɥɚɟɬ ɨɞɧɨɰɜɟɬɧɵɟ ɭɱɚɫɬɤɢ ɨɛɴɟɤɬɚ ɩɪɨɡɪɚɱɧɵɦɢ. ɋɢɧɬɚɤɫɢɫ: filter: chroma(color) ȿɞɢɧɫɬɜɟɧɧɵɣ ɩɚɪɚɦɟɬɪ ɞɚɧɧɨɝɨ ɮɢɥɶɬɪɚ ɡɚɞɚɟɬ ɰɜɟɬ, ɤɨɬɨɪɵɣ ɧɚɞɨ ɫɞɟɥɚɬɶ ɩɪɨɡɪɚɱɧɵɦ. Ɏɢɥɶɬɪ gray 52 ɉɟɪɟɜɨɞɢɬ ɰɜɟɬɨɜɭɸ ɝɚɦɦɭ ɪɢɫɭɧɤɚ ɜ ɲɤɚɥɭ ɫɟɪɨɝɨ ɰɜɟɬɚ. ɉɚɪɚɦɟɬɪɨɜ ɧɟ ɢɦɟɟɬ. ɋɢɧɬɚɤɫɢɫ: filter:gray Ɏɢɥɶɬɪ invert ɋɨɡɞɚɟɬ «ɧɟɝɚɬɢɜ» – ɢɧɜɟɪɬɢɪɭɟɬ ɨɬɬɟɧɨɤ, ɧɚɫɵɳɟɧɧɨɫɬɶ ɢ ɹɪɤɨɫɬɶ ɨɛɴɟɤɬɚ. ɉɚɪɚɦɟɬɪɨɜ ɧɟ ɢɦɟɟɬ. ɋɢɧɬɚɤɫɢɫ: filter: invert Ɏɢɥɶɬɪ xray Ⱦɟɥɚɟɬ «ɪɟɧɝɟɧɨɜɫɤɢɣ ɫɧɢɦɨɤ» ɨɛɴɟɤɬɚ. ɉɚɪɚɦɟɬɪɨɜ ɧɟ ɢɦɟɟɬ. ɋɢɧɬɚɤɫɢɫ: filter: xray Ɏɢɥɶɬɪ shadow ɉɨɡɜɨɥɹɟɬ ɫɨɡɞɚɬɶ ɢɥɥɸɡɢɸ ɬɟɧɢ ɨɬ ɨɛɴɟɤɬɚ. ɋɢɧɬɚɤɫɢɫ: filter: shadow (color, direction) ɉɚɪɚɦɟɬɪɵ: color – ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɬɟɧɢ; direction – ɨɩɪɟɞɟɥɹɟɬ ɧɚɩɪɚɜɥɟɧɢɟ ɷɮɮɟɤɬɚ. Ɏɢɥɶɬɪ mask ɂɦɢɬɢɪɭɟɬ ɜɵɞɟɥɟɧɢɟ ɬɟɤɫɬɚ ɦɵɲɶɸ. ɋɢɧɬɚɤɫɢɫ: Filter: mask(color) ɉɚɪɚɦɟɬɪɵ: color – ɰɜɟɬ ɜɵɞɟɥɟɧɢɹ. Ɏɢɥɶɬɪ glow ɉɨɡɜɨɥɹɟɬ ɫɨɡɞɚɬɶ ɷɮɮɟɤɬ ɫɜɟɱɟɧɢɹ ɜɨɤɪɭɝ ɨɛɴɟɤɬɚ. ɋɢɧɬɚɤɫɢɫ: filter: glow (color, strength) ɉɚɪɚɦɟɬɪɵ: color – ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɫɜɟɱɟɧɢɹ; strength – ɢɧɬɟɧɫɢɜɧɨɫɬɶ ɫɜɟɱɟɧɢɹ ɨɬ 0 ɞɨ 100. 53 ɍɱɟɛɧɨɟ ɢɡɞɚɧɢɟ ɗɫɤɚɪɟɜɫɤɚɹ Ɇɚɪɢɧɚ ȿɜɝɟɧɶɟɜɧɚ, ɒɚɲɤɢɧ Ⱥɥɟɤɫɚɧɞɪ ɂɜɚɧɨɜɢɱ, Ƚɥɭɲɚɤɨɜɚ Ɍɚɬɶɹɧɚ ɇɢɤɨɥɚɟɜɧɚ, ɓɟɬɢɧɢɧɚ Ɉɥɶɝɚ ɂɝɨɪɟɜɧɚ ɊȺȻɈɌȺ ȼ INTERNET ɂ ɋɈɁȾȺɇɂȿ WEB-ɋɌɊȺɇɂɐ ɍɱɟɛɧɨɟ ɩɨɫɨɛɢɟ ɞɥɹ ɜɭɡɨɜ Ɋɟɞɚɤɬɨɪ ȿ.ɋ. Ʉɨɬɥɹɪɨɜɚ ɉɨɞɩɢɫɚɧɨ ɜ ɩɟɱɚɬɶ 24.05.07. Ɏɨɪɦɚɬ 60×84/16. ɍɫɥ. ɩɟɱ. ɥ. 3,14. Ɍɢɪɚɠ 50 ɷɤɡ. Ɂɚɤɚɡ 967. ɂɡɞɚɬɟɥɶɫɤɨ-ɩɨɥɢɝɪɚɮɢɱɟɫɤɢɣ ɰɟɧɬɪ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ. 394000, ɝ. ȼɨɪɨɧɟɠ, ɩɥ. ɢɦ. Ʌɟɧɢɧɚ, 10. Ɍɟɥ. 208-298, 598-026 (ɮɚɤɫ) http://www.ppc.vsu.ru; e-mail: [email protected] Ɉɬɩɟɱɚɬɚɧɨ ɜ ɬɢɩɨɝɪɚɮɢɢ ɂɡɞɚɬɟɥɶɫɤɨ-ɩɨɥɢɝɪɚɮɢɱɟɫɤɨɝɨ ɰɟɧɬɪɚ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ. 394000, ɝ. ȼɨɪɨɧɟɠ, ɭɥ. ɉɭɲɤɢɧɫɤɚɹ, 3. Ɍɟɥ. 204-133. 54 Web Caching (O'Reilly Internet Series) Read more Reading the Web: Strategies for Internet Inquiry Read more Web Read more internet Read more Modeling the Internet and the Web: Probabilistic Methods and Algorithms Read more Modeling the Internet and the Web: Probabilistic Methods and Algorithms Read more Internet Strategy: The Road to Web Services Solutions Read more Programming Web Services with XML-RPC (O'Reilly Internet Series) Read more Semistructured Database Design Web Information Systems Engineering and Internet Technologies Read more Web Portals: The New Gateways to Internet Information and Services Read more Modeling the Internet and the Web. Probabilistic Methods and Algorithms Read more Internet Fraud Casebook: The World Wide Web of Deceit Read more Sams Teach Yourself Internet and Web Basics All in One Read more AJAX, Rich Internet Applications, and Web Development for Programmers Read more Sams Teach Yourself Internet and Web Basics All in One Read more Internet Fraud Casebook: The World Wide Web of Deceit Read more Internet Read more Microsoft Expression Web : Réalisez des sites internet riches et ergonomiques Read more Web Content Delivery (Web Information Systems Engineering and Internet Technologies Book Series) Read more The Web Resource Space Model (Web Information Systems Engineering and Internet Technologies Book Series) Read more Principles of Internet Marketing: New Tools and Methods for Web Developers (Web Technologies) Read more internet world - internet world marz Read more Tholian Web Read more Moon's Web Read more Spiral Web Read more The Web Read more Tangled Web Read more Tangled Web Read more Moon's Web Read more Recommend Documents Web Caching (O'Reilly Internet Series) Reading the Web: Strategies for Internet Inquiry READING THE WEB Solving Problems in the Teaching of Literacy Cathy Collins Block, Series Editor Recent Volumes Teachi... Web internet ÖNSÖZ “De¤iflmeyen tek fley de¤iflimin kendisidir.” ‹nternet, insano¤lunun geçirdi¤i geliflim ve de¤iflimin sonucu ol... Modeling the Internet and the Web: Probabilistic Methods and Algorithms Modeling the Internet and the Web: Probabilistic Methods and Algorithms Modeling the Internet and the Web This Page Intentionally Left Blank Modeling the Internet and the Web Probabilisti... Internet Strategy: The Road to Web Services Solutions i Internet Strategy: The Road to Web Services Solutions Matthew W. Guah Warwick University, UK Wendy L. Currie Warwick... Programming Web Services with XML-RPC (O'Reilly Internet Series) Semistructured Database Design Web Information Systems Engineering and Internet Technologies Semistructured Database Design Web Information Systems Engineering and Internet Technologies Book Series Series Edito... Web Portals: The New Gateways to Internet Information and Services i Web Portals: The New Gateways to Internet Information and Services Arthur Tatnall Victoria University, Australia ID... × Report "Работа в Internet и создание web-страниц: Учебное пособие" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close