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

Author: Эксаревская М.Е.

15 downloads 405 Views 224KB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF

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

ɊȺȻɈɌȺ ȼ 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-ɪɟɞɚɤɬɨɪɟ ɫɥɟɞɭɸɳɟɟ: <html> <head> 5<br /> <br /> <title> Ⱦɨɦɚɲɧɹɹ ɫɬɪɚɧɢɱɤɚ Ɉɛɪɚɬɢɬɟ ɜɧɢɦɚɧɢɟ, ɱɬɨ ɧɚɡɜɚɧɢɟ HTML-ɞɨɤɭɦɟɧɬɚ – ɧɟ ɨɞɧɨ ɢ ɬɨ ɠɟ, ɱɬɨ ɧɚɡɜɚɧɢɟ (ɢɦɹ) HTML-ɮɚɣɥɚ. ɇɚɡɜɚɧɢɟ ɞɨɤɭɦɟɧɬɚ, ɜɤɥɸɱɟɧɧɨɟ ɜ ɷɥɟɦɟɧɬ , ɨɬɨɛɪɚɠɚɟɬɫɹ ɜ ɨɤɧɟ ɛɪɚɭɡɟɪɚ. ɂɦɹ ɮɚɣɥɚ ɢɞɟɧɬɢɮɢɰɢɪɭɟɬ ɞɨɤɭɦɟɧɬ ɧɚ ɠɟɫɬɤɨɦ ɞɢɫɤɟ. ɗɥɟɦɟɧɬ <body> ɫɨɞɟɪɠɢɬ ɜɫɺ, ɱɬɨ ɛɪɚɭɡɟɪ ɛɭɞɟɬ ɜɨɫɩɪɢɧɢɦɚɬɶ ɤɚɤ ɨɫɧɨɜɧɨɟ ɫɨɞɟɪɠɚɧɢɟ ɫɬɪɚɧɢɰɵ – ɬɟɤɫɬ, ɝɪɚɮɢɤɭ, ɡɚɝɨɥɨɜɤɢ, ɬɚɛɥɢɰɵ. Ɍɟɝɢ <html> ɢ </html> ɞɨɛɚɜɥɹɸɬ ɞɥɹ ɬɨɝɨ, ɱɬɨɛɵ ɜɫɟ web-ɛɪɚɭɡɟɪɵ ɦɨɝɥɢ ɪɚɫɩɨɡɧɚɬɶ, ɱɬɨ ɩɟɪɟɞ ɧɢɦɢ HTML-ɞɨɤɭɦɟɧɬ.ɗɥɟɦɟɧɬɵ <title>, <body>, <head>, <html> – ɷɥɟɦɟɧɬɵ-ɤɨɧɬɟɣɧɟɪɵ, ɫɨɞɟɪɠɚɳɢɟ ɛɥɨɤɢ ɬɟɤɫɬɚ ɢ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ ɦɟɠɞɭ ɨɬɤɪɵɜɚɸɳɢɦ ɢ ɡɚɤɪɵɜɚɸɳɢɦ ɬɟɝɚɦɢ. Ɉɞɢɧɨɱɧɵɟ (ɩɭɫɬɵɟ) ɷɥɟɦɟɧɬɵ ɜɵɩɨɥɧɹɸɬ ɨɫɨɛɭɸ ɮɭɧɤɰɢɸ. ɇɚɩɪɢɦɟɪ, <hr> ɜɫɬɚɜɥɹɟɬ ɧɚ web-ɫɬɪɚɧɢɰɭ ɝɨɪɢɡɨɧɬɚɥɶɧɭɸ ɥɢɧɢɸ. Ȼɥɨɱɧɵɟ ɷɥɟɦɟɧɬɵ ɩɨ ɭɦɨɥɱɚɧɢɸ ɧɚɱɢɧɚɸɬɫɹ ɫ ɧɨɜɨɣ ɫɬɪɨɤɢ ɢ ɨɬɞɟɥɹɸɬɫɹ ɫɧɢɡɭ ɫɬɪɨɤɨɣ. Ɍɚɤɢɟ ɷɥɟɦɟɧɬɵ ɦɨɝɭɬ ɫɨɞɟɪɠɚɬɶ ɤɚɤ ɞɪɭɝɢɟ ɛɥɨɱɧɵɟ ɷɥɟɦɟɧɬɵ, ɬɚɤ ɢ ɷɥɟɦɟɧɬɵ ɭɪɨɜɧɹ ɫɬɪɨɤɢ. Ȼɥɨɱɧɵɦɢ ɷɥɟɦɟɧɬɚɦɢ ɹɜɥɹɸɬɫɹ: ɚɛɡɚɰɵ <p>, ɬɚɛɥɢɰɵ <table>, ɡɚɝɨɥɨɜɤɢ <h1> – <h6>, ɫɩɢɫɤɢ <ul>, <ol>, <dl>, ɝɨɪɢɡɨɧɬɚɥɶɧɚɹ ɥɢɧɢɹ-ɪɚɡɞɟɥɢɬɟɥɶ <hr> ɢ ɞɪɭɝɢɟ. ȼɧɭɬɪɢɫɬɪɨɱɧɵɟ ɷɥɟɦɟɧɬɵ ɩɨ ɭɦɨɥɱɚɧɢɸ ɜɵɜɨɞɹɬɫɹ ɛɪɚɭɡɟɪɨɦ ɞɪɭɝ ɡɚ ɞɪɭɝɨɦ ɜ ɬɟɤɭɳɟɣ ɫɬɪɨɤɟ. ɗɬɨ ɪɢɫɭɧɤɢ, ɷɥɟɦɟɧɬɵ ɮɨɪɦ, ɨɛɵɱɧɵɣ ɬɟɤɫɬ. Web-ɛɪɚɭɡɟɪɵ ɢɝɧɨɪɢɪɭɸɬ ɦɧɨɠɟɫɬɜɟɧɧɵɟ ɩɪɨɛɟɥɵ ɢ ɩɟɪɟɧɨɫɵ ɫɬɪɨɤ. Ⱦɥɹ ɬɨɝɨ ɱɬɨɛɵ ɡɚɞɚɬɶ ɪɚɡɛɢɟɧɢɟ ɧɚ ɚɛɡɚɰɵ, ɧɭɠɧɨ ɢɫɩɨɥɶɡɨɜɚɬɶ ɷɥɟɦɟɧɬ <p>. ȿɝɨ ɡɚɤɪɵɜɚɸɳɢɣɫɹ ɬɟɝ ɧɟɨɛɹɡɚɬɟɥɟɧ, ɢ ɟɫɥɢ ɬɟɝɚ </p> ɧɟɬ, ɬɨ ɛɪɚɭɡɟɪ ɧɟ ɞɨɛɚɜɥɹɟɬ ɩɭɫɬɭɸ ɫɬɪɨɤɭ ɩɨɫɥɟ ɨɤɨɧɱɚɧɢɹ ɬɟɤɫɬɚ ɚɛɡɚɰɚ. Ⱦɥɹ ɩɟɪɟɧɨɫɚ ɫɬɪɨɤɢ ɢɫɩɨɥɶɡɭɟɬɫɹ ɩɭɫɬɨɣ ɷɥɟɦɟɧɬ <br>. ɉɪɢɦɟɪ <p> ɂɜɚɧɨɜ ɉɚɜɟɥ<br> ɭɥ. Ɉɫɬɭɠɟɜɚ 1–14 <br> 6<br /> <br /> ɝ. ȼɨɪɨɧɟɠ <br> </p> Ɉɱɟɧɶ ɱɚɫɬɨ ɞɥɹ ɡɚɩɢɫɢ ɩɨɥɟɡɧɨɣ ɢɧɮɨɪɦɚɰɢɢ ɢɫɩɨɥɶɡɭɟɬɫɹ ɤɨɦɦɟɧɬɚɪɢɣ. ɗɥɟɦɟɧɬ ɤɨɦɦɟɧɬɚɪɢɹ ɭɧɢɤɚɥɟɧ ɬɟɦ, ɱɬɨ ɡɚɫɬɚɜɥɹɟɬ ɛɪɚɭɡɟɪ ɢɝɧɨɪɢɪɨɜɚɬɶ ɜɫɟ ɬɨ, ɱɬɨ ɫɨɞɟɪɠɢɬɫɹ ɦɟɠɞɭ ɟɝɨ ɬɟɝɚɦɢ. ɋɢɧɬɚɤɫɢɫ ɤɨɦɦɟɧɬɚɪɢɹ: . ȿɫɥɢ ɜɵ ɩɢɲɢɬɟ ɧɚ ɪɭɫɫɤɨɦ ɹɡɵɤɟ, ɬɨ ɩɨɫɬɚɪɚɣɬɟɫɶ ɫɥɟɞɨɜɚɬɶ ɫɥɟɞɭɸɳɢɦ ɩɪɚɜɢɥɚɦ HTML-ɤɨɞɢɪɨɜɚɧɢɹ: xɞɥɢɧɧɨɟ ɬɢɪɟ ɤɨɞɢɪɭɣɬɟ ɫ ɩɨɦɨɳɶɸ ɫɢɦɜɨɥɶɧɨɝɨ ɩɪɢɦɢɬɢɜɚ «—»; xɤɨɪɨɬɤɨɟ ɬɢɪɟ ɢɫɩɨɥɶɡɭɣɬɟ ɞɥɹ ɨɛɨɡɧɚɱɟɧɢɹ ɡɧɚɤɚ «ɦɢɧɭɫ», ɤɨɬɨɪɨɟ ɤɨɞɢɪɭɟɬɫɹ ɤɚɤ «–»; xɞɟɮɢɫ ɩɪɨɫɬɨ ɜɜɨɞɢɬɫɹ ɫ ɤɥɚɜɢɚɬɭɪɵ; xɧɟɪɚɡɪɵɜɧɵɟ ɩɪɨɛɟɥɵ – xɤɚɜɵɱɤɢ – ««», «»». ɉɪɢɦɟɪ ɫɨɡɞɚɧɢɹ ɧɟɛɨɥɶɲɨɣ web-ɫɬɪɚɧɢɰɵ <html> <head> <title> Ɍɟɫɬɢɪɭɟɦ ɬɟɝɢ

ɇɚ ɷɬɨɣ ɫɬɪɚɧɢɰɟ ɦɵ ɡɚɤɪɟɩɥɹɟɦ ɡɧɚɧɢɟ ɧɟɤɨɬɨɪɵɯ ɨɫɧɨɜɧɵɯ ɷɥɟɦɟɧɬɨɜ HTML, ɪɚɫɫɦɨɬɪɟɧɧɵɯ ɪɚɧɧɟɟ. ɇɚɩɪɢɦɟɪ, ɷɬɨ — ɩɟɪɜɵɣ ɚɛɡɚɰ.

ȼɨ ɜɬɨɪɨɦ ɚɛɡɚɰɟ ɜɵ ɦɨɠɟɬɟ ɪɚɡɦɟɫɬɢɬɶ ɜɚɲ ɚɞɪɟɫ
ɂɜɚɧɨɜ ɉɚɜɟɥ
ɭɥ. Ɉɫɬɭɠɟɜɚ 1-14
ɝ. ȼɨɪɨɧɟɠ

Ⱥ ɜ ɷɬɨɦ ɦɟɫɬɟ ɛɭɞɟɬ <em> ɥɢɱɧɚɹ ɢɧɮɨɪɦɚɰɢɹ ɨ ɢɧɬɟɪɟɫɚɯ , ɩɨɷɬɨɦɭ ɬɭɬ ɢɫɩɨɥɶɡɭɟɬɫɹ ɝɨɪɢɡɨɧɬɚɥɶɧɚɹ ɥɢɧɢɹ

7

Ⱥɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɨɜ ɜ HTML ɇɚɡɧɚɱɟɧɢɟ ɚɬɪɢɛɭɬɨɜ ɜ HTML – ɡɚɞɚɧɢɟ ɷɥɟɦɟɧɬɭ ɨɩɪɟɞɟɥɟɧɧɵɯ ɫɜɨɣɫɬɜ. Ⱥɬɪɢɛɭɬ – ɷɬɨ ɩɚɪɚɦɟɬɪ ɷɥɟɦɟɧɬɚ, ɤɨɬɨɪɵɣ ɭɬɨɱɧɹɟɬ, ɤɚɤ ɷɬɨɬ ɷɥɟɦɟɧɬ ɞɨɥɠɟɧ ɛɵɬɶ ɨɛɪɚɛɨɬɚɧ ɛɪɚɭɡɟɪɨɦ. ɇɚɩɪɢɦɟɪ, ɜɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɥɟɜɨɦɭ ɤɪɚɸ ɢɥɢ ɩɨ ɩɪɚɜɨɦɭ. Ɉɛɳɚɹ ɫɯɟɦɚ ɷɥɟɦɟɧɬɚ ɫ ɢɫɩɨɥɶɡɨɜɚɧɢɟɦ ɚɬɪɢɛɭɬɨɜ ɦɨɠɟɬ ɛɵɬɶ ɡɚɩɢɫɚɧɚ ɜ ɫɥɟɞɭɸɳɟɦ ɜɢɞɟ: <ɨɬɤɪɵɜɚɸɳɢɣ ɬɟɝ ɚɬɪɢɛɭɬ_1 =”ɡɧɚɱɟɧɢɟ_1” ɚɬɪɢɛɭɬ_2 =”ɡɧɚɱɟɧɢɟ_2” … ɚɬɪɢɛɭɬ_n =ɡɧɚɱɟɧɢɟ_n> ɫɨɞɟɪɠɢɦɨɟ ɷɥɟɦɟɧɬɚ Ⱥɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɚ bgcolor ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɮɨɧɚ, ɧɚɩɪɢɦɟɪ . ɉɨ ɭɦɨɥɱɚɧɢɸ ɰɜɟɬ ɡɚɞɧɟɝɨ ɮɨɧɚ – ɛɟɥɵɣ. text ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɩɟɪɟɞɧɟɝɨ ɮɨɧɚ, ɬɨ ɟɫɬɶ ɬɟɤɫɬɚ, ɞɥɹ ɜɫɟɣ web ɫɬɪɚɧɢɰɵ, ɧɚɩɪɢɦɟɪ . background ɞɨɛɚɜɥɹɟɬ ɜ ɤɚɱɟɫɬɜɟ ɮɨɧɚ ɢɡɨɛɪɚɠɟɧɢɟ. ȿɝɨ ɡɧɚɱɟɧɢɟ URL ɝɪɚɮɢɱɟɫɤɨɝɨ ɮɚɣɥɚ. link ɡɚɞɚɟɬ ɰɜɟɬ ɫɫɵɥɨɤ ɧɚ web-ɫɬɪɚɧɢɰɟ (ɩɨ ɭɦɨɥɱɚɧɢɸ – ɫɢɧɢɣ #0000ff) vlink ɡɚɞɚɟɬ ɰɜɟɬ ɩɪɨɫɦɨɬɪɟɧɧɵɯ ɫɫɵɥɨɤ (ɩɨ ɭɦɨɥɱɚɧɢɸ – ɮɢɨɥɟɬɨɜɵɣ #800080) alink ɡɚɞɚɟɬ ɰɜɟɬ ɚɤɬɢɜɧɵɯ ɫɫɵɥɨɤ, ɬɨ ɟɫɬɶ ɬɟɯ, ɧɚ ɤɨɬɨɪɵɟ ɧɚɜɟɞɟɧ ɤɭɪɫɨɪ ɜ ɞɚɧɧɵɣ ɦɨɦɟɧɬ. bgproperties ɩɨɡɜɨɥɹɟɬ ɫɞɟɥɚɬɶ ɮɨɧɨɜɵɣ ɪɢɫɭɧɨɤ ɧɟɩɨɞɜɢɠɧɵɦ ɩɪɢ ɩɪɨɤɪɭɬɤɟ. ɂɦɟɟɬ ɟɞɢɧɫɬɜɟɧɧɨɟ ɡɧɚɱɟɧɢɟ “fixed” ɢ ɪɚɛɨɬɚɟɬ ɬɨɥɶɤɨ ɜ Internet Explorer. leftmargin, topmargin (ɞɥɹ Internet Explorer), marginwidth, marginheight (ɞɥɹ Netscape Navigator) – ɩɪɟɞɧɚɡɧɚɱɟɧɵ ɞɥɹ ɭɫɬɚɧɨɜɤɢ ɨɬɫɬɭɩɚ ɫɨɞɟɪɠɢɦɨɝɨ ɫɬɪɚɧɢɰɵ ɨɬ ɤɪɚɟɜ ɨɤɧɚ ɛɪɚɭɡɟɪɚ. 8

Ⱥɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɚ

Ɉɫɧɨɜɧɵɦ ɚɬɪɢɛɭɬɨɦ ɷɥɟɦɟɧɬɚ

ɹɜɥɹɟɬɫɹ ɚɬɪɢɛɭɬ ɝɨɪɢɡɨɧɬɚɥɶɧɨɝɨ ɜɵɪɚɜɧɢɜɚɧɢɹ align= left | center | right | justify, ɜɵɪɚɜɧɢɜɚɟɬ ɫɨɨɬɜɟɬɫɬɜɟɧɧɨ ɩɨ ɥɟɜɨɣ ɫɬɨɪɨɧɟ, ɩɨ ɩɪɚɜɨɣ ɫɬɨɪɨɧɟ ɢ ɩɨ ɲɢɪɢɧɟ. ɉɪɢɦɟɪ

ɗɬɨɬ ɚɛɡɚɰ ɩɪɢɠɚɬ ɤ ɥɟɜɨɦɭ ɤɪɚɸ ɨɤɧɚ.

Ⱥɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɚ

align ɨɩɪɟɞɟɥɹɟɬ ɝɨɪɢɡɨɧɬɚɥɶɧɨɟ ɜɵɪɚɜɧɢɜɚɧɢɟ ɥɢɧɢɢ. noshade, ɟɫɥɢ ɷɬɨɬ ɛɭɥɟɜ ɚɬɪɢɛɭɬ ɭɫɬɚɧɨɜɥɟɧ, ɥɢɧɢɹ ɨɬɨɛɪɚɠɚɟɬɫɹ ɨɞɧɢɦ ɰɜɟɬɨɦ, ɛɟɡ ɬɟɧɢ, ɤɨɬɨɪɚɹ ɨɬɨɛɪɚɠɚɟɬɫɹ ɩɨ ɭɦɨɥɱɚɧɢɸ. size ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɬɨɥɳɢɧɭ ɥɢɧɢɢ ɜ ɩɢɤɫɟɥɚɯ. width ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɥɢɧɢɢ ɜ ɩɢɤɫɟɥɚɯ ɢɥɢ ɩɪɨɰɟɧɬɚɯ. ɒɢɪɢɧɚ ɩɨ ɭɦɨɥɱɚɧɢɸ ɪɚɜɧɚ 100 %. color ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɥɢɧɢɢ. ɉɪɢɦɟɪ

Ɉɛɳɢɟ ɚɬɪɢɛɭɬɵ: x ɚɬɪɢɛɭɬ id – ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɢɞɟɧɬɢɮɢɤɚɬɨɪ ɷɥɟɦɟɧɬɚ. ɂɫɩɨɥɶɡɭɟɬɫɹ ɬɚɤɠɟ ɞɥɹ ɫɨɡɞɚɧɢɹ ɭɧɢɤɚɥɶɧɵɯ ɢɦɟɧ, ɧɚ ɤɨɬɨɪɵɟ ɫɫɵɥɚɸɬɫɹ ɝɢɩɟɪɫɫɵɥɤɢ, ɚ ɬɚɤɠɟ ɞɥɹ ɪɚɛɨɬɵ ɫɰɟɧɚɪɢɟɜ JavaScript ɢ ɜ ɧɟɤɨɬɨɪɵɯ ɞɪɭɝɢɯ ɫɥɭɱɚɹɯ. Ⱥɬɪɢɛɭɬ id ɦɨɠɟɬ ɛɵɬɶ ɨɩɪɟɞɟɥɟɧ ɞɥɹ ɜɫɟɯ ɷɥɟɦɟɧɬɨɜ, ɤɪɨɦɟ , , , , <meta>, <script> ɢ <style>; x ɚɬɪɢɛɭɬ class – ɢɫɩɨɥɶɡɭɟɬɫɹ ɜ ɨɫɧɨɜɧɨɦ ɞɥɹ ɫɬɢɥɟɣ CSS. ɗɬɨɬ ɚɬɪɢɛɭɬ ɨɬɧɨɫɢɬ ɷɥɟɦɟɧɬ ɤ ɨɩɪɟɞɟɥɟɧɧɨɦɭ ɤɥɚɫɫɭ ɷɥɟɦɟɧɬɨɜ, ɤɨɬɨɪɵɣ ɦɨɠɟɬ ɡɚɬɟɦ ɮɨɪɦɚɬɢɪɨɜɚɬɶɫɹ ɫ ɩɨɦɨɳɶɸ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ. ɗɥɟɦɟɧɬɵ <base>, <basefont>, <html>, <head>, <title>, <meta>, <param>, <script> ɢ <style> ɧɟ ɢɦɟɸɬ ɚɬɪɢɛɭɬɚ class; x ɚɬɪɢɛɭɬ title – ɫɨɞɟɪɠɢɬ ɨɩɢɫɚɧɢɟ ɷɥɟɦɟɧɬɚ, ɜ ɤɨɬɨɪɨɦ ɨɧ ɫɨɞɟɪɠɢɬɫɹ. ȼ Internet Explorer ɫɨɞɟɪɠɚɧɢɟ ɚɬɪɢɛɭɬɚ ɩɨɹɜɥɹɟɬɫɹ ɤɚɤ ɤɪɚɬɤɚɹ ɩɨɞɫɤɚɡɤɚ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɷɥɟɦɟɧɬ ɤɭɪɫɨɪɚ; x ɚɬɪɢɛɭɬ lang – ɨɩɪɟɞɟɥɹɟɬ ɹɡɵɤ ɚɬɪɢɛɭɬɨɜ, ɷɥɟɦɟɧɬɚ ɢ ɬɟɤɫɬɚ. Ɉɫɧɨɜɧɨɟ ɧɚɡɧɚɱɟɧɢɟ ɚɬɪɢɛɭɬɚ lang – ɩɨɦɨɱɶ ɫɪɟɞɫɬɜɚɦ ɨɛɪɚɛɨɬɤɢ 9<br /> <br /> ɤɨɪɪɟɤɬɧɨ ɩɪɟɞɫɬɚɜɢɬɶ ɢɧɮɨɪɦɚɰɢɸ, ɫɨɞɟɪɠɚɳɭɸɫɹ ɜ HTML- ɞɨɤɭɦɟɧɬɟ. Ɂɧɚɱɟɧɢɟɦ ɹɜɥɹɟɬɫɹ ɤɨɞ ɹɡɵɤɚ, ɧɚɩɪɢɦɟɪ: lang=”en” – ɚɧɝɥɢɣɫɤɢɣ; lang=”en-us” – ɚɦɟɪɢɤɚɧɫɤɢɣ ɚɧɝɥɢɣɫɤɢɣ; lang=”ru” – ɪɭɫɫɤɢɣ. ɇɟ ɩɨɞɞɟɪɠɢɜɚɟɬɫɹ ɷɥɟɦɟɧɬɚɦɢ <applet rel="nofollow">, <base>, <basefont>, <br>, <frame>, <frameset>, <iframe>, <param>, <script>; x ɚɬɪɢɛɭɬ dir – ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɧɚɩɪɚɜɥɟɧɢɟ ɬɟɤɫɬɚ. Ɂɧɚɱɟɧɢɟ «ltr», ɡɚɞɚɧɧɨɟ ɩɨ ɭɦɨɥɱɚɧɢɸ, ɭɤɚɡɵɜɚɟɬ ɧɚ ɨɛɵɱɧɵɣ ɩɨɪɹɞɨɤ ɜɵɜɨɞɚ – ɫɥɟɜɚ ɧɚɩɪɚɜɨ. ɂɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɩɨɞɞɟɪɠɤɢ ɨɫɨɛɟɧɧɨɫɬɟɣ ɧɚɩɢɫɚɧɢɹ ɬɟɤɫɬɚ ɜ ɪɚɡɧɵɯ ɹɡɵɤɚɯ. Ɏɨɪɦɚɬɢɪɨɜɚɧɢɟ ɢ ɫɢɫɬɟɦɚɬɢɡɚɰɢɹ ɬɟɤɫɬɚ Ɂɚɝɨɥɨɜɨɤ – ɷɬɨ ɷɥɟɦɟɧɬ-ɤɨɧɬɟɣɧɟɪ. Ɋɚɡɥɢɱɚɸɬ ɡɚɝɨɥɨɜɤɢ 6 ɭɪɨɜɧɟɣ, ɱɬɨ ɩɨɡɜɨɥɹɟɬ ɥɭɱɲɟ ɨɪɝɚɧɢɡɨɜɚɬɶ ɜɵɞɟɥɟɧɢɟ ɬɟɤɫɬɚ ɜɧɭɬɪɢ ɞɨɤɭɦɟɧɬɚ. <h1>Ɂɚɝɨɥɨɜɨɤ ɩɟɪɜɨɝɨ ɭɪɨɜɧɹ ɦɨɠɟɬ ɢɫɩɨɥɶɡɨɜɚɬɶɫɹ ɞɥɹ ɡɚɝɥɚɜɧɨɝɨ ɬɟɤɫɬɚ ɧɚ ɫɬɪɚɧɢɰɟ</h1> <h2> Ɂɚɝɨɥɨɜɨɤ ɜɬɨɪɨɝɨ ɭɪɨɜɧɹ ɦɨɠɟɬ ɢɫɩɨɥɶɡɨɜɚɬɶɫɹ ɞɥɹ ɩɨɞɡɚɝɨɥɨɜɤɚ</h2> <h3> Ⱦɥɹ ɡɚɝɨɥɨɜɤɨɜ ɧɟɛɨɥɶɲɢɯ ɩɚɪɚɝɪɚɮɨɜ ɬɟɤɫɬɚ</h3> <h4> Ɉɛɵɱɧɵɣ ɬɟɤɫɬ ɜɵɞɟɥɟɧɧɵɣ ɩɨɥɭɠɢɪɧɵɦ</h4> <h5> ȼɵɞɟɥɟɧ, ɧɨ ɦɟɧɶɲɟ ɨɛɵɱɧɨɝɨ ɬɟɤɫɬɚ</h5> <h6> ɋɚɦɵɣ ɦɚɥɟɧɶɤɢɣ</h6> Ʉ ɷɥɟɦɟɧɬɚɦ ɡɚɝɨɥɨɜɤɨɜ ɬɟɤɫɬɚ ɦɨɠɟɬ ɩɪɢɦɟɧɹɬɶɫɹ ɚɬɪɢɛɭɬ ɝɨɪɢɡɨɧɬɚɥɶɧɨɝɨ ɜɵɪɚɜɧɢɜɚɧɢɹ. ɂɫɩɨɥɶɡɨɜɚɧɢɟ ɡɚɝɨɥɨɜɤɨɜ ɩɨɡɜɨɥɹɟɬ ɫɨɡɞɚɬɶ ɛɨɥɟɟ ɫɬɪɭɤɬɭɪɢɪɨɜɚɧɧɵɣ ɞɨɤɭɦɟɧɬ, ɩɨɯɨɠɢɣ ɧɚ ɝɚɡɟɬɧɭɸ ɫɬɚɬɶɸ ɢɥɢ ɝɥɚɜɵ ɤɧɢɝɢ. Ɉɫɧɨɜɧɵɟ ɷɥɟɦɟɧɬɵ ɮɢɡɢɱɟɫɤɨɝɨ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɞɟɥɚɸɬ ɧɚɱɟɪɬɚɧɢɟ ɲɪɢɮɬɚ ɩɨɥɭɠɢɪɧɵɦ, ɤɭɪɫɢɜɧɵɦ ɢɥɢ ɜɵɞɟɥɹɸɬ ɟɝɨ ɩɨɞɱɟɪɤɢɜɚɧɢɟɦ: <b>, </b> – ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ, <i>, </i> – ɤɭɪɫɢɜɧɵɣ ɲɪɢɮɬ, <u>, </u> – ɩɨɞɱɟɪɤɧɭɬɵɣ ɬɟɤɫɬ, <tt>, </tt> – ɦɨɧɨɲɢɪɢɧɧɵɣ ɲɪɢɮɬ, 10<br /> <br /> <sub>, </sub> – ɧɢɠɧɢɣ ɢɧɞɟɤɫ, <sup>, </sup> – ɜɟɪɯɧɢɣ ɢɧɞɟɤɫ, <big>, </big> – ɲɪɢɮɬ ɛɨɥɶɲɟ ɛɚɡɨɜɨɝɨ, <small>, </small> – ɲɪɢɮɬ ɦɟɧɶɲɟɝɨ ɛɚɡɨɜɨɝɨ, <strike>, </strike> ɢɥɢ <s>, </s> – ɡɚɱɟɪɤɧɭɬɵɣ ɲɪɢɮɬ. Ɍɟɝɢ ɥɨɝɢɱɟɫɤɨɝɨ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɜ HTML: <em>, </em> – ɜɵɞɟɥɟɧɢɟ, ɡɧɚɱɢɦɵɣ ɬɟɤɫɬ, ɤɭɪɫɢɜɧɵɣ ɲɪɢɮɬ, <strong>, </strong> – ɫɢɥɶɧɨɟ ɜɵɞɟɥɟɧɢɟ, ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ. ɋɨɜɪɟɦɟɧɧɵɟ web-ɛɪɚɭɡɟɪɵ ɞɚɸɬ ɬɚɤɢɟ ɠɟ ɪɟɡɭɥɶɬɚɬɵ, ɤɚɤ ɢ <i><b> ɬɟɤɫɬ </b></i> ɉɪɢɦɟɪ. ɋɟɤɰɢɹ body ɮɚɣɥɚ. <body> <p> ɗɬɨ ɬɟɫɬ <b> ɠɢɪɧɨɫɬɢ </b><br> ɗɬɨ ɬɟɫɬ <strong> ɫɢɥɶɧɨɝɨ ɜɵɞɟɥɟɧɢɹ </strong> <br> </p> <p> ɗɬɨ ɬɟɫɬ <i> ɤɭɪɫɢɜɚ </i> <br> ɗɬɨ ɬɟɫɬ <strong> <em> ɫɨɱɟɬɚɧɢɹ ɜɵɞɟɥɟɧɢɹ ɢ ɫɢɥɶɧɨɝɨ ɜɵɞɟɥɟɧɢɹ </em> </strong> <br> </p> <p> ȼɨɬ ɬɚɤ <u> ɩɨɞɱɟɪɤɧɭɬɵɣ ɬɟɤɫɬ </u> ɜɵɝɥɹɞɢɬ ɜ ɷɬɨɦ ɛɪɚɭɡɟɪɟ <br> ȼɨɬ ɬɚɤ ɜɵɝɥɹɞɢɬ<tt> ɬɟɤɫɬ ɩɟɱɚɬɧɨɣ ɦɚɲɢɧɤɢ </tt> <br> </p> </body> «ɉɪɨɝɪɚɦɦɢɫɬɤɢɟ» HTML-ɬɟɝɢ: <code> </code> – ɩɪɨɝɪɚɦɦɧɵɣ ɤɨɞ, <kbd> </kbd> – ɤɥɚɜɢɚɬɭɪɚ, <samp> </samp> – ɩɪɢɦɟɪ, <var> </var> – ɩɟɪɟɦɟɧɧɚɹ. «Ɍɢɩɨɝɪɚɮɫɤɢɟ» HTML-ɬɟɝɢ: 11<br /> <br /> <cite> </cite> – ɛɢɛɥɢɨɝɪɚɮɢɱɟɫɤɚɹ ɰɢɬɚɬɚ, <blockquote> </blockquote> – ɛɥɨɤ ɬɟɤɫɬɚ, ɞɥɢɧɧɚɹ ɰɢɬɚɬɚ, <dfn> </dfn> – ɨɩɪɟɞɟɥɟɧɢɟ ɬɟɪɦɢɧɚ, <adress rel="nofollow"> </adress> – ɩɨɱɬɨɜɵɣ ɢɥɢ ɷɥɟɤɬɪɨɧɧɵɣ ɚɞɪɟɫ, <abbr rel="nofollow"> – ɚɛɛɪɟɜɢɚɬɭɪɚ, <acronym rel="nofollow"> – ɚɤɪɨɧɢɦ. ɗɥɟɦɟɧɬ <pre> ɫɥɭɠɢɬ ɞɥɹ ɬɨɝɨ, ɱɬɨɛɵ ɛɪɚɭɡɟɪ ɜ ɬɨɱɧɨɫɬɢ ɩɟɪɟɧɨɫɢɥ ɩɪɨɛɟɥɵ ɢ ɩɟɪɟɜɨɞɵ ɫɬɪɨɤɢ ɦɟɠɞɭ ɨɬɤɪɵɜɚɸɳɢɦ ɢ ɡɚɤɪɵɜɚɸɳɢɦ ɬɟɝɚɦɢ ɷɬɨɝɨ ɷɥɟɦɟɧɬɚ ɧɚ ɷɤɪɚɧ ɦɨɧɢɬɨɪɚ. ɗɥɟɦɟɧɬ <pre> ɨɱɟɧɶ ɩɨɥɟɡɟɧ, ɤɨɝɞɚ ɧɚ ɫɬɪɚɧɢɰɟ ɟɫɬɶ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɨɛɹɡɚɬɟɥɶɧɨ ɞɨɥɠɟɧ ɛɵɬɶ ɚɞɟɤɜɚɬɧɨ ɨɬɨɛɪɚɠɟɧ – ɧɚɩɪɢɦɟɪ, ɦɚɬɟɦɚɬɢɱɟɫɤɚɹ ɮɨɪɦɭɥɚ ɢɥɢ ɬɚɛɥɢɰɚ. Ɍɚɤ ɤɚɤ <pre> – ɛɥɨɱɧɵɣ ɷɥɟɦɟɧɬ, ɛɪɚɭɡɟɪ ɞɨɛɚɜɥɹɟɬ ɩɭɫɬɭɸ ɫɬɪɨɤɭ ɞɨ ɨɬɤɪɵɜɚɸɳɟɝɨ ɢ ɩɨɫɥɟ ɡɚɤɪɵɜɚɸɳɟɝɨ ɬɟɝɨɜ. ɗɬɨɬ ɷɥɟɦɟɧɬ ɦɨɠɧɨ ɢɫɩɨɥɶɡɨɜɚɬɶ ɞɥɹ ɫɨɡɞɚɧɢɹ ɩɭɫɬɵɯ ɫɬɪɨɤ, ɧɨ ɨɧ ɧɟ ɩɨɡɜɨɥɹɟɬ ɛɪɚɭɡɟɪɭ ɚɜɬɨɦɚɬɢɱɟɫɤɢ ɩɟɪɟɧɨɫɢɬɶ ɫɬɪɨɤɭ, ɟɫɥɢ ɫɬɪɨɤɚ ɬɟɤɫɬɚ ɜɧɭɬɪɢ ɤɨɧɬɟɣɧɟɪɚ <pre> ɩɪɟɜɵɲɚɟɬ ɪɚɡɦɟɪ ɷɤɪɚɧɚ. ȼ ɬɚɤɨɦ ɫɥɭɱɚɟ ɩɪɢɯɨɞɢɬɫɹ ɢɫɩɨɥɶɡɨɜɚɬɶ ɩɨɥɨɫɭ ɩɪɨɤɪɭɬɤɢ. ɉɪɢɦɟɪ. ɋɨɡɞɚɧɢɟ ɩɪɨɫɬɟɣɲɟɣ ɬɚɛɥɢɰɵ. <body> <pre> </pre> <hr> <hr> ɋɬɢɩɟɧɞɢɚɥɶɧɚɹ ɜɟɞɨɦɨɫɬɶ ɩɨ ɦɟɫɹɰɚɦ </hr> <pre> Ɏɚɦɢɥɢɢ əɧɜɚɪɶ Ɏɟɜɪɚɥɶ Ɇɚɪɬ Ⱥɩɪɟɥɶ ɂɜɚɧɨɜ 1000 1200 1300 1200 ɉɟɬɪɨɜ 1000 1200 1400 1300 ɋɢɞɨɪɨɜ 2500 2500 1000 1000 Ƚɨɥɭɛɟɜ 1000 1200 1000 1000 </pre><br /> <br /> 12<br /> <br /> ɋɨɡɞɚɧɢɟ ɫɩɢɫɤɨɜ ɗɥɟɦɟɧɬɵ ɫɩɢɫɤɚ ɹɜɥɹɸɬɫɹ ɤɨɧɬɟɣɧɟɪɚɦɢ. ɋɩɢɫɤɢ ɜ HTML ɜ ɨɛɳɟɦ ɜɢɞɟ ɨɪɝɚɧɢɡɭɸɬɫɹ ɩɨ ɫɥɟɞɭɸɳɟɣ ɫɯɟɦɟ: <ɬɢɩ ɫɩɢɫɤɚ>, <ɩɭɧɤɬ>, <ɩɭɧɤɬ>, <ɩɭɧɤɬ>, </ɬɢɩ ɫɩɢɫɤɚ>. Ɍɟɝ <ɩɭɧɤɬ> ɨɬɜɟɱɚɟɬ ɡɚ ɞɨɛɚɜɥɟɧɢɟ ɩɟɪɟɞ ɬɟɤɫɬɨɦ ɧɨɦɟɪɚ ɢɥɢ ɞɪɭɝɨɝɨ ɫɢɦɜɨɥɚ ɜ ɡɚɜɢɫɢɦɨɫɬɢ ɨɬ ɤɨɧɤɪɟɬɧɨɝɨ ɬɢɩɚ ɫɩɢɫɤɚ. Ⱦɥɹ ɨɪɝɚɧɢɡɚɰɢɢ ɧɭɦɟɪɨɜɚɧɧɵɯ ɫɩɢɫɤɨɜ ɜ HTML ɢɫɩɨɥɶɡɭɟɬɫɹ ɷɥɟɦɟɧɬ <ol>, ɚ ɞɥɹ ɧɟɧɭɦɟɪɨɜɚɧɧɵɯ – ɷɥɟɦɟɧɬ <ul>. Ʉɚɠɞɵɣ ɧɨɜɵɣ ɩɭɧɤɬ ɫɩɢɫɤɚ ɞɨɛɚɜɥɹɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <li>. ɉɪɢɦɟɪ <ol> <li> ɩɭɧɤɬ ɧɨɦɟɪ ɨɞɢɧ <li> ɩɭɧɤɬ ɧɨɦɟɪ ɞɜɚ <li> ɩɭɧɤɬ ɧɨɦɟɪ ɬɪɢ </ol> Ⱦɥɹ ɨɛɨɢɯ ɷɥɟɦɟɧɬɨɜ ɫɩɢɫɤɚ <ol> ɢ <ul> ɦɨɠɟɬ ɡɚɞɚɜɚɬɶɫɹ ɚɬɪɢɛɭɬ type ɫɨ ɫɥɟɞɭɸɳɢɦɢ ɡɧɚɱɟɧɢɹɦɢ: ɞɥɹ ɦɚɪɤɢɪɨɜɚɧɧɨɝɨ ɫɩɢɫɤɚ type=”disk” – ɫɢɦɜɨɥ ɦɚɪɤɟɪɚ type=”circle” – ɦɚɪɤɟɪ ɜ ɜɢɞɟ ɨɤɪɭɠɧɨɫɬɢ type=”square” – ɤɜɚɞɪɚɬɧɵɣ ɦɚɪɤɟɪ ɞɥɹ ɧɭɦɟɪɨɜɚɧɧɨɝɨ ɫɩɢɫɤɚ type=”1” – ɚɪɚɛɫɤɢɟ ɰɢɮɪɵ type=”A” –ɩɪɨɩɢɫɧɵɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ type=”a” – ɫɬɪɨɱɧɵɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ type=”I” – ɩɪɨɩɢɫɧɵɟ ɪɢɦɫɤɢɟ ɰɢɮɪɵ type=”i” – ɫɬɪɨɱɧɵɟ ɪɢɦɫɤɢɟ ɰɢɮɪɵ ɉɭɧɤɬ ɫɩɢɫɤɚ <li> ɦɨɠɟɬ ɫɨɞɟɪɠɚɬɶ ɚɬɪɢɛɭɬ value, ɤɨɬɨɪɵɣ ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɡɧɚɱɟɧɢɟ, ɫ ɤɨɬɨɪɨɝɨ ɧɚɱɢɧɚɟɬɫɹ ɧɭɦɟɪɚɰɢɹ ɞɚɧɧɨɝɨ ɫɩɢɫɤɚ. Ɇɵ ɦɨɠɟɦ 13<br /> <br /> ɧɚɱɚɬɶ ɫɩɢɫɨɤ ɫ ɰɢɮɪɵ 5, ɡɚɬɟɦ ɭɫɬɚɧɨɜɢɬɶ ɡɧɚɱɟɧɢɟ ɫɥɟɞɭɸɳɟɝɨ ɩɭɧɤɬɚ ɪɚɜɧɨɟ 6, ɚ ɬɪɟɬɶɟɝɨ ɩɨ ɩɨɪɹɞɤɭ ɩɭɧɤɬɚ – 10. <ol> <li value=”5”> <li value=”6”> <br> … <li value=”10”> <li> </ol> ɋɩɢɫɤɢ ɨɩɪɟɞɟɥɟɧɢɣ ɨɪɝɚɧɢɡɭɸɬɫɹ ɩɨ ɫɥɟɞɭɸɳɟɣ ɫɯɟɦɟ: <dl> <dt> <strong> Ɉɩɪɟɞɟɥɹɟɦɵɣ ɬɟɪɦɢɧ </strong> <dd> Ɉɩɪɟɞɟɥɟɧɢɟ </dl> ɋɨɜɫɟɦ ɧɟ ɨɛɹɡɚɬɟɥɶɧɨ ɢɫɩɨɥɶɡɨɜɚɬɶ ɨɛɚ ɬɟɝɚ (<dt> ɢ <dd>). ɂɫɩɨɥɶɡɭɹ ɬɨɥɶɤɨ ɬɟɝ <dd>, ɧɚɩɪɢɦɟɪ, ɦɵ ɩɨɥɭɱɢɦ ɜ ɪɟɡɭɥɶɬɚɬɟ ɫɩɢɫɨɤ ɬɨɥɶɤɨ ɛɟɡ ɫɢɦɜɨɥɨɜ ɦɚɪɤɟɪɚ: <dl> ɗɥɟɦɟɧɬɵ ɫɬɪɭɤɬɭɪɵ web-ɫɬɪɚɧɢɰɵ: <dd> Ʉɧɨɩɤɢ <dd> Ȼɚɧɧɟɪɵ <dd> Ⱥɥɶɬɟɪɧɚɬɢɜɧɚɹ ɧɚɜɢɝɚɰɢɹ <dd> Popup-ɨɤɧɚ </dl> ɉɪɢɦɟɪ. ɋɩɢɫɤɢ ɜɧɭɬɪɢ ɫɩɢɫɤɨɜ. <ul> <li> ȼɜɟɞɟɧɢɟ. <li> Ƚɥɚɜɚ 1 <ol> <li> ɉɚɪɚɝɪɚɮ 1.1 <li> ɉɚɪɚɝɪɚɮ 1.2 <li> ɉɚɪɚɝɪɚɮ 1.3 </ol> 14<br /> <br /> <li> Ƚɥɚɜɚ 2 <li> Ƚɥɚɜɚ 3 </ul> Ⱦɨɛɚɜɥɟɧɢɟ ɝɪɚɮɢɤɢ ɧɚ web-ɫɬɪɚɧɢɰɭ Ⱦɥɹ ɞɨɛɚɜɥɟɧɢɹ ɝɪɚɮɢɱɟɫɤɢɯ ɮɚɣɥɨɜ ɧɟɨɛɯɨɞɢɦɨ ɢɫɩɨɥɶɡɨɜɚɬɶ ɨɞɢɧɨɱɧɵɣ ɬɟɝ <img>, ɤɨɬɨɪɵɣ ɢɦɟɟɬ ɫɥɟɞɭɸɳɢɣ ɮɨɪɦɚɬ: <img src=”url ɝɪɚɮɢɱɟɫɤɨɝɨ ɮɚɣɥɚ”> ɢɥɢ <img src=”ɩɭɬɶ/ɢɦɹ_ɮɚɣɥɚ”> ɉɪɢɦɟɪ <hr> <p> ɇɭ, ɢ ɤɚɤ ɷɥɟɦɟɧɬ < img > ɞɟɣɫɬɜɭɟɬ? ȼɨɬ ɪɢɫɭɧɨɤ, ɤɨɬɨɪɵɣ ɞɨɥɠɟɧ ɛɵɬɶ ɩɨɤɚɡɚɧ ɜ ɛɪɚɭɡɟɪɟ :</p> <img src=”myimage.gif”> <hr> Ⱥɬɪɢɛɭɬ alt ɷɥɟɦɟɧɬɚ <img> ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɚɥɶɬɟɪɧɚɬɢɜɧɵɣ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɩɨɡɜɨɥɹɟɬ ɩɨɥɭɱɢɬɶ ɬɟɤɫɬɨɜɭɸ ɢɧɮɨɪɦɚɰɢɸ ɨɛ ɢɡɨɛɪɚɠɟɧɢɢ ɧɚ ɫɥɭɱɚɣ, ɟɫɥɢ ɛɪɚɭɡɟɪ ɧɟ ɫɦɨɠɟɬ ɟɝɨ ɨɬɨɛɪɚɡɢɬɶ. ɗɥɟɦɟɧɬ <img> ɫ ɚɬɪɢɛɭɬɨɦ <alt rel="nofollow"> ɢɦɟɟɬ ɫɥɟɞɭɸɳɢɣ ɜɢɞ: <img src=”URL ɝɪɚɮɢɱɟɫɤɨɝɨ ɮɚɣɥɚ” alt=”ɬɟɤɫɬ, ɨɩɢɫɵɜɚɸɳɢɣ ɝɪɚɮɢɱɟɫɤɢɣ ɮɚɣɥ”> ɉɪɢɦɟɪ <img src=”logo.png” alt=”ɥɨɝɨɬɢɩ ɤɨɦɩɚɧɢɢ”> ɂɫɩɨɥɶɡɭɹ ɚɬɪɢɛɭɬ align, ɜɵ ɦɨɠɟɬɟ ɜɵɪɨɜɧɹɬɶ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ ɩɨ ɜɟɪɯɧɟɦɭ ɤɪɚɸ, ɩɨ ɫɟɪɟɞɢɧɟ, ɩɨ ɧɢɠɧɟɦɭ ɤɪɚɸ ɢɡɨɛɪɚɠɟɧɢɹ. ɉɪɢɦɟɪ. <img src=”image1.gif” align=”texttop”> ȼɟɪɯɧɹɹ ɝɪɚɧɢɰɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɫɚɦɨɦɭ ɜɵɫɨɤɨɦɭ ɬɟɤɫɬɨɜɨɦɭ ɷɥɟɦɟɧɬɭ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ. align=”top” – ɜɟɪɯɧɹɹ ɝɪɚɧɢɰɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɫɚɦɨɦɭ ɜɵɫɨɤɨɦɭ ɷɥɟɦɟɧɬɭ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ; 15<br /> <br /> align=”middle” – ɫɟɪɟɞɢɧɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɛɚɡɨɜɨɣ ɥɢɧɢɢ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ; align=”absmiddle” – ɫɟɪɟɞɢɧɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɫɟɪɟɞɢɧɟ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ; align=”baseline” – ɢɡɨɛɪɚɠɟɧɢɟ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɛɚɡɨɜɨɣ ɥɢɧɢɢ ɬɟɤɫɬɚ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ; align=”bottom” – ɧɢɠɧɹɹ ɝɪɚɧɢɰɚ ɢɡɨɛɪɚɠɟɧɢɹ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɛɚɡɨɜɨɣ ɥɢɧɢɢ ɬɟɤɫɬɚ ɬɟɤɭɳɟɣ ɫɬɪɨɤɢ; align=”left” – ɢɡɨɛɪɚɠɟɧɢɟ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɥɟɜɨɦɭ ɤɪɚɸ ɨɤɧɚ; align=”right” – ɢɡɨɛɪɚɠɟɧɢɟ ɜɵɪɚɜɧɢɜɚɟɬɫɹ ɩɨ ɩɪɚɜɨɦɭ ɤɪɚɸ ɨɤɧɚ. Ⱥɬɪɢɛɭɬɵ height ɢ width ɢɫɩɨɥɶɡɭɸɬɫɹ ɞɥɹ ɩɟɪɟɨɩɪɟɞɟɥɟɧɢɹ ɜɵɫɨɬɵ ɢ ɲɢɪɢɧɵ ɪɢɫɭɧɤɚ ɜ ɩɢɤɫɟɥɹɯ ɢɥɢ ɩɪɨɰɟɧɬɚɯ. <img src=”URL” width=”ɱɢɫɥɨ” height=”ɱɢɫɥɨ”> Ⱦɥɹ ɢɡɦɟɧɟɧɢɹ ɪɚɦɤɢ ɪɢɫɭɧɤɚ (ɢɥɢ ɞɥɹ ɞɨɛɚɜɥɟɧɢɹ ɪɚɦɤɢ ɜɨɤɪɭɝ ɪɢɫɭɧɤɚ, ɧɟ ɹɜɥɹɸɳɟɝɨɫɹ ɝɢɩɟɪɫɫɵɥɤɨɣ) ɢɫɩɨɥɶɡɭɟɬɫɹ ɚɬɪɢɛɭɬ border ɷɥɟɦɟɧɬɚ <img>. Ɂɧɚɱɟɧɢɟɦ ɚɬɪɢɛɭɬɚ ɹɜɥɹɟɬɫɹ ɰɟɥɨɟ ɱɢɫɥɨ ɜ ɩɢɤɫɟɥɹɯ, ɚ ɫɚɦ ɚɬɪɢɛɭɬ ɢɦɟɟɬ ɫɥɟɞɭɸɳɢɣ ɮɨɪɦɚɬ: <img src=”image1.jpg” border=”25”> ɐɜɟɬ ɪɚɦɤɢ ɫɨɜɩɚɞɚɟɬ ɫ ɰɜɟɬɨɦ ɬɟɤɫɬɚ, ɡɚɞɚɧɧɵɦ ɫ ɩɨɦɨɳɶɸ ɫɬɢɥɹ ɢɥɢ ɚɬɪɢɛɭɬɚ text ɷɥɟɦɟɧɬɚ <body>. Ⱥɬɪɢɛɭɬɵ vspace ɢ hspace ɭɫɬɚɧɚɜɥɢɜɚɸɬ ɪɚɡɦɟɪ ɫɜɨɛɨɞɧɨɝɨ ɩɪɨɫɬɪɚɧɫɬɜɚ ɜɨɤɪɭɝ ɢɡɨɛɪɚɠɟɧɢɹ, ɱɬɨɛɵ ɬɟɤɫɬ ɧɟ «ɩɪɢɠɢɦɚɥɫɹ» ɤ ɧɟɦɭ ɜɩɥɨɬɧɭɸ. Ɏɨɪɦɚɬ ɚɬɪɢɛɭɬɨɜ ɢɦɟɟɬ ɫɥɟɞɭɸɳɢɣ ɜɢɞ: <img src=”URL” vspace=”ɱɢɫɥɨ ɜ ɩɢɤɫɟɥɚɯ” hspace=”ɱɢɫɥɨ ɜ ɩɢɤɫɟɥɚɯ”> vspace – ɧɚɥɢɱɢɟ ɫɜɨɛɨɞɧɨɝɨ ɩɪɨɫɬɪɚɧɫɬɜɚ ɜɜɟɪɯɭ ɢ ɫɧɢɡɭ ɨɬ ɢɡɨɛɪɚɠɟɧɢɹ hspace – ɧɚɥɢɱɢɟ ɫɜɨɛɨɞɧɨɝɨ ɩɪɨɫɬɪɚɧɫɬɜɚ ɫɥɟɜɚ ɢ ɫɩɪɚɜɚ ɨɬ ɢɡɨɛɪɚɠɟɧɢɹ. ɉɪɢɦɟɪ <html> <head> <title> EGO Page I I I Ⱥɬɪɢɛɭɬɵ ɷɥɟɦɟɧɬɚ < IMG> 16

Ɉ ɫɟɛɟ

Ɉɛɨ ɦɧɟ

”Ɇɨɹ ɉɪɢɜɟɬ, ɦɟɧɹ ɡɨɜɭɬ Ɇɚɲɚ.

ɉɪɢɦɟɪ. ȼɥɨɠɟɧɢɟ ɝɪɚɮɢɤɢ.

: ɗɬɨ ɩɟɪɜɵɣ ɩɭɧɤɬ; ɗɬɨ ɜɬɨɪɨɣ ɩɭɧɤɬ; ɗɬɨ ɬɪɟɬɢɣ ɩɭɧɤɬ; ɂ ɬɚɤ ɞɚɥɟɟ

Ƚɢɩɟɪɬɟɤɫɬ ɋɨɤɪɚɳɟɧɢɟ HTML ɨɡɧɚɱɚɟɬ «ɹɡɵɤ ɦɚɪɤɢɪɨɜɤɢ ɝɢɩɟɪɬɟɤɫɬɨɜ». ȼ ɨɬɥɢɱɢɟ ɨɬ ɨɛɵɤɧɨɜɟɧɧɨɝɨ ɬɟɤɫɬɚ, ɤɨɬɨɪɵɣ ɦɨɠɧɨ ɱɢɬɚɬɶ ɬɨɥɶɤɨ ɨɬ ɧɚɱɚɥɚ ɤ ɤɨɧɰɭ, ɝɢɩɟɪɬɟɤɫɬ ɩɨɡɜɨɥɹɟɬ ɨɫɭɳɟɫɬɜɥɹɬɶ ɦɝɧɨɜɟɧɧɵɣ ɩɟɪɟɯɨɞ ɨɬ ɨɞɧɨɝɨ ɮɪɚɝɦɟɧɬɚ ɬɟɤɫɬɚ ɤ ɞɪɭɝɨɦɭ. ɋɢɫɬɟɦɵ ɩɨɦɨɳɢ ɦɧɨɝɢɯ ɩɨɩɭɥɹɪɧɵɯ ɩɪɨɝɪɚɦɦɧɵɯ ɩɪɨɞɭɤɬɨɜ ɭɫɬɪɨɟɧɵ ɢɦɟɧɧɨ ɩɨ ɝɢɩɟɪɬɟɤɫɬɨɜɨɦɭ ɩɪɢɧɰɢɩɭ. ɉɪɢ ɧɚɠɚɬɢɢ ɥɟɜɨɣ ɤɧɨɩɤɨɣ ɦɵɲɢ ɧɚ ɧɟɤɨɬɨɪɵɣ ɜɵɞɟɥɟɧɧɵɣ ɮɪɚɝɦɟɧɬ ɬɟɤɭɳɟɝɨ ɞɨɤɭɦɟɧɬɚ ɩɪɨɢɫɯɨɞɢɬ ɩɟɪɟɯɨɞ ɤ ɧɟɤɨɬɨɪɨɦɭ ɡɚɪɚɧɟɟ ɧɚɡɧɚɱɟɧɧɨɦɭ ɞɨɤɭɦɟɧɬɭ ɢɥɢ ɮɪɚɝɦɟɧɬɭ ɞɨɤɭɦɟɧɬɚ. ȼ HTML ɩɟɪɟɯɨɞ ɨɬ ɨɞɧɨɝɨ ɮɪɚɝɦɟɧɬɚ ɬɟɤɫɬɚ ɤ ɞɪɭɝɨɦɭ ɡɚɞɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɦɟɬɤɢ ɜɢɞɚ: ɜɵɞɟɥɟɧɧɵɣ ɮɪɚɝɦɟɧɬ ɬɟɤɫɬɚ 17

ȼ ɤɚɱɟɫɬɜɟ ɩɚɪɚɦɟɬɪɚ [ɚɞɪɟɫ ɩɟɪɟɯɨɞɚ] ɦɨɝɭɬ ɢɫɩɨɥɶɡɨɜɚɬɶɫɹ ɧɟɫɤɨɥɶɤɨ ɬɢɩɨɜ ɚɪɝɭɦɟɧɬɨɜ. ɋɚɦɨɟ ɩɪɨɫɬɨɟ — ɷɬɨ ɡɚɞɚɬɶ ɢɦɹ ɞɪɭɝɨɝɨ HTML-ɞɨɤɭɦɟɧɬɚ, ɤ ɤɨɬɨɪɨɦɭ ɧɭɠɧɨ ɩɟɪɟɣɬɢ. ɉɪɢɦɟɪ ɉɟɪɟɣɬɢ ɤ ɨɝɥɚɜɥɟɧɢɸ Ɍɚɤɨɣ ɮɪɚɝɦɟɧɬ HTML-ɬɟɤɫɬɚ ɩɪɢɜɟɞɟɬ ɤ ɩɨɹɜɥɟɧɢɸ ɜ ɞɨɤɭɦɟɧɬɟ ɜɵɞɟɥɟɧɧɨɝɨ ɮɪɚɝɦɟɧɬɚ. Ɉɛɪɚɬɢɬɟ ɜɧɢɦɚɧɢɟ: ɟɫɥɢ ɜ ɚɞɪɟɫɟ ɩɟɪɟɯɨɞɚ ɧɟ ɭɤɚɡɚɧ ɤɚɬɚɥɨɝ, ɩɟɪɟɯɨɞ ɛɭɞɟɬ ɜɵɩɨɥɧɟɧ ɜɧɭɬɪɢ ɬɟɤɭɳɟɝɨ ɤɚɬɚɥɨɝɚ. ȿɫɥɢ ɜ ɚɞɪɟɫɟ ɩɟɪɟɯɨɞɚ ɧɟ ɭɤɚɡɚɧ ɫɟɪɜɟɪ, ɩɟɪɟɯɨɞ ɛɭɞɟɬ ɜɵɩɨɥɧɟɧ ɧɚ ɬɟɤɭɳɟɦ ɫɟɪɜɟɪɟ. ɂɡ ɷɬɨɝɨ ɫɥɟɞɭɟɬ ɨɞɧɨ ɨɱɟɧɶ ɜɚɠɧɨɟ ɩɪɚɤɬɢɱɟɫɤɨɟ ɫɨɨɛɪɚɠɟɧɢɟ. ȿɫɥɢ ɜɵ ɩɨɞɝɨɬɨɜɢɥɢ ɤ ɩɭɛɥɢɤɚɰɢɢ ɧɟɤɨɬɨɪɭɸ ɝɪɭɩɩɭ HTML-ɞɨɤɭɦɟɧɬɨɜ, ɤɨɬɨɪɵɟ ɫɫɵɥɚɸɬɫɹ ɞɪɭɝ ɧɚ ɞɪɭɝɚ ɬɨɥɶɤɨ ɩɨ ɢɦɟɧɢ ɮɚɣɥɚ ɢ ɧɚɯɨɞɹɬɫɹ ɜ ɨɞɧɨɦ ɤɚɬɚɥɨɝɟ ɧɚ ɜɚɲɟɦ ɤɨɦɩɶɸɬɟɪɟ, ɜɫɹ ɷɬɚ ɝɪɭɩɩɚ ɞɨɤɭɦɟɧɬɨɜ ɛɭɞɟɬ ɪɚɛɨɬɚɬɶ ɬɨɱɧɨ ɬɚɤ ɠɟ, ɟɫɥɢ ɟɟ ɩɨɦɟɫɬɢɬɶ ɜ ɥɸɛɨɣ ɞɪɭɝɨɣ ɤɚɬɚɥɨɝ ɧɚ ɥɸɛɨɦ ɞɪɭɝɨɦ ɤɨɦɩɶɸɬɟɪɟ, ɧɚ ɥɨɤɚɥɶɧɨɣ ɫɟɬɢ ɢɥɢ... ɧɚ ɂɧɬɟɪɧɟɬ! Ɍɚɤɢɦ ɨɛɪɚɡɨɦ, ɩɨɹɜɥɹɟɬɫɹ ɜɨɡɦɨɠɧɨɫɬɶ ɪɚɡɪɚɛɚɬɵɜɚɬɶ ɰɟɥɵɟ ɤɨɥɥɟɤɰɢɢ ɞɨɤɭɦɟɧɬɨɜ ɛɟɡ ɩɨɞɤɥɸɱɟɧɢɹ ɤ ɂɧɬɟɪɧɟɬ ɢ ɬɨɥɶɤɨ ɩɨɫɥɟ ɨɤɨɧɱɚɬɟɥɶɧɨɣ ɝɨɬɨɜɧɨɫɬɢ, ɩɨɞɬɜɟɪɠɞɟɧɧɨɣ ɢɫɩɵɬɚɧɢɹɦɢ, ɩɨɦɟɳɚɬɶ ɤɨɥɥɟɤɰɢɢ ɞɨɤɭɦɟɧɬɨɜ ɧɚ ɂɧɬɟɪɧɟɬ ɰɟɥɢɤɨɦ. ɇɚ ɩɪɚɤɬɢɤɟ, ɨɞɧɚɤɨ, ɱɚɫɬɨ ɛɵɜɚɟɬ ɧɟɨɛɯɨɞɢɦɨ ɞɚɬɶ ɫɫɵɥɤɭ ɧɚ ɞɨɤɭɦɟɧɬ, ɧɚɯɨɞɹɳɢɣɫɹ ɧɚ ɞɪɭɝɨɦ ɫɟɪɜɟɪɟ. ɇɚɩɪɢɦɟɪ, ɟɫɥɢ ɜɵ ɯɨɬɢɬɟ ɞɚɬɶ ɫɫɵɥɤɭ ɧɚ ɷɬɨ ɪɭɤɨɜɨɞɫɬɜɨ ɫɨ ɫɜɨɟɣ ɫɬɪɚɧɢɱɤɢ, ɜɚɦ ɩɪɢɞɟɬɫɹ ɜɜɟɫɬɢ ɜ ɫɜɨɣ HTML-ɞɨɤɭɦɟɧɬ ɩɪɢɦɟɪɧɨ ɬɚɤɨɣ ɮɪɚɝɦɟɧɬ: Ɇɨɹ ɫɬɪɚɧɢɱɤɚ ɉɪɢ ɧɟɨɛɯɨɞɢɦɨɫɬɢ ɦɨɠɧɨ ɡɚɞɚɬɶ ɩɟɪɟɯɨɞ ɧɟ ɩɪɨɫɬɨ ɤ ɧɟɤɨɬɨɪɨɦɭ ɞɨɤɭɦɟɧɬɭ, ɧɨ ɢ ɤ ɨɩɪɟɞɟɥɟɧɧɨɦɭ ɦɟɫɬɭ ɜɧɭɬɪɢ ɷɬɨɝɨ ɞɨɤɭɦɟɧɬɚ. Ⱦɥɹ ɷɬɨɝɨ ɧɟɨɛɯɨɞɢɦɨ ɫɨɡɞɚɬɶ ɜ ɞɨɤɭɦɟɧɬɟ, ɤ ɤɨɬɨɪɨɦɭ ɛɭɞɟɬ ɡɚɞɚɧ ɩɟɪɟɯɨɞ, ɧɟɤɨɬɨɪɭɸ ɨɩɨɪɧɭɸ ɬɨɱɤɭ, ɢɥɢ ɚɧɤɟɪ. ɉɪɢɦɟɪ Ⱦɨɩɭɫɬɢɦ, ɱɬɨ ɧɟɨɛɯɨɞɢɦɨ ɨɫɭɳɟɫɬɜɢɬɶ ɩɟɪɟɯɨɞ ɢɡ ɮɚɣɥɚ 1.html ɤ ɫɥɨɜɚɦ "ɉɟɪɟɯɨɞ ɡɚɤɨɧɱɟɧ" ɜ ɮɚɣɥɟ 2.html (ɮɚɣɥɵ ɧɚɯɨɞɹɬɫɹ ɜ ɨɞɧɨɦ

18

ɤɚɬɚɥɨɝɟ). ɉɪɟɠɞɟ ɜɫɟɝɨ, ɧɟɨɛɯɨɞɢɦɨ ɫɨɡɞɚɬɶ ɜɨɬ ɬɚɤɨɣ ɚɧɤɟɪ ɜ ɮɚɣɥɟ 2.html: ɉɟɪɟɯɨɞ ɡɚɤɨɧɱɟɧ ɋɥɨɜɚ "ɉɟɪɟɯɨɞ ɡɚɤɨɧɱɟɧ" ɩɪɢ ɷɬɨɦ ɧɢɤɚɤ ɧɟ ɛɭɞɭɬ ɜɵɞɟɥɟɧɵ ɜ ɬɟɤɫɬɟ ɞɨɤɭɦɟɧɬɚ. Ɂɚɬɟɦ, ɜ ɮɚɣɥɟ 1.html (ɢɥɢ ɜ ɥɸɛɨɦ ɞɪɭɝɨɦ) ɦɨɠɧɨ ɨɩɪɟɞɟɥɢɬɶ ɩɟɪɟɯɨɞ ɧɚ ɷɬɨɬ ɚɧɤɟɪ: ɉɟɪɟɯɨɞ ɤ ɚɧɤɟɪɭ AAA ɉɟɪɟɯɨɞ ɤ ɷɬɨɦɭ ɚɧɤɟɪɭ ɦɨɠɧɨ ɨɩɪɟɞɟɥɢɬɶ ɢ ɜɧɭɬɪɢ ɫɚɦɨɝɨ ɞɨɤɭɦɟɧɬɚ 2.html – ɞɨɫɬɚɬɨɱɧɨ ɬɨɥɶɤɨ ɜɤɥɸɱɢɬɶ ɜ ɧɟɝɨ ɜɨɬ ɬɚɤɨɣ ɮɪɚɝɦɟɧɬ: ɉɟɪɟɯɨɞ ɤ ɚɧɤɟɪɭ AAA ɇɚ ɩɪɚɤɬɢɤɟ ɷɬɨ ɨɱɟɧɶ ɭɞɨɛɧɨ ɩɪɢ ɫɨɡɞɚɧɢɢ ɛɨɥɶɲɢɯ ɞɨɤɭɦɟɧɬɨɜ. ȼ ɧɚɱɚɥɟ ɞɨɤɭɦɟɧɬɚ ɦɨɠɧɨ ɩɨɦɟɫɬɢɬɶ ɨɝɥɚɜɥɟɧɢɟ, ɫɨɫɬɨɹɳɟɟ ɢɡ ɫɫɵɥɨɤ ɧɚ ɚɧɤɟɪɵ, ɪɚɫɩɨɥɨɠɟɧɧɵɟ ɜ ɡɚɝɨɥɨɜɤɚɯ ɪɚɡɞɟɥɨɜ ɞɨɤɭɦɟɧɬɚ. ȼɨ ɢɡɛɟɠɚɧɢɟ ɧɟɞɨɪɚɡɭɦɟɧɢɣ ɪɟɤɨɦɟɧɞɭɟɬɫɹ ɡɚɞɚɜɚɬɶ ɢɦɟɧɚ ɚɧɤɟɪɨɜ ɥɚɬɢɧɫɤɢɦɢ ɛɭɤɜɚɦɢ. ɋɥɟɞɢɬɟ ɡɚ ɧɚɩɢɫɚɧɢɟɦ ɢɦɟɧ ɚɧɤɟɪɨɜ: ɛɨɥɶɲɢɧɫɬɜɨ ɛɪɚɭɡɟɪɨɜ ɨɬɥɢɱɚɸɬ ɛɨɥɶɲɢɟ ɛɭɤɜɵ ɨɬ ɦɚɥɟɧɶɤɢɯ. ȿɫɥɢ ɢɦɹ ɚɧɤɟɪɚ ɨɩɪɟɞɟɥɟɧɨ ɤɚɤ AAA, ɫɫɵɥɤɚ ɧɚ ɚɧɤɟɪ aaa ɢɥɢ AaA ɧɟ ɜɵɜɟɞɟɬ ȼɚɫ ɧɚ ɚɧɤɟɪ AAA, ɯɨɬɹ ɞɨɤɭɦɟɧɬ, ɫɤɨɪɟɟ ɜɫɟɝɨ, ɛɭɞɟɬ ɡɚɝɪɭɠɟɧ ɤɨɪɪɟɤɬɧɨ. ȼɨɡɦɨɠɧɵ ɫɫɵɥɤɢ ɢ ɧɚ ɞɪɭɝɢɟ ɜɢɞɵ ɪɟɫɭɪɫɨɜ: ȼɵɝɪɭɡɢɬɶ ɮɚɣɥ Ɍɚɤɚɹ ɫɫɵɥɤɚ, ɟɫɥɢ ɟɣ ɜɨɫɩɨɥɶɡɨɜɚɬɶɫɹ, ɡɚɩɭɫɬɢɬ ɩɪɨɬɨɤɨɥ ɩɟɪɟɞɚɱɢ ɮɚɣɥɨɜ ɢ ɧɚɱɧɟɬ ɜɵɝɪɭɡɤɭ ɮɚɣɥɚ file.ext, ɧɚɯɨɞɹɳɟɝɨɫɹ ɜ ɤɚɬɚɥɨɝɟ directory ɧɚ ɫɟɪɜɟɪɟ server, ɧɚ ɥɨɤɚɥɶɧɵɣ ɞɢɫɤ ɩɨɥɶɡɨɜɚɬɟɥɹ. ɉɨɫɥɚɬɶ ɩɢɫɶɦɨ ȿɫɥɢ ɩɨɥɶɡɨɜɚɬɟɥɶ ɫɨɜɟɪɲɢɬ ɩɟɪɟɯɨɞ ɩɨ ɬɚɤɨɣ ɫɫɵɥɤɟ, ɭ ɧɟɝɨ ɧɚ ɷɤɪɚɧɟ ɨɬɤɪɨɟɬɫɹ ɨɤɧɨ ɜɜɨɞɚ ɢɫɯɨɞɹɳɟɝɨ ɫɨɨɛɳɟɧɢɹ ɟɝɨ ɩɨɱɬɨɜɨɣ ɩɪɨɝɪɚɦɦɵ. ȼ ɫɬɪɨɤɟ To: ("Ʉɭɞɚ") ɨɤɧɚ ɩɨɱɬɨɜɨɣ ɩɪɨɝɪɚɦɦɵ ɛɭɞɟɬ ɭɤɚɡɚɧɨ [email protected]. ɉɪɢɦɟɪ 8 19

ɂɡɨɛɪɚɠɟɧɢɹ

ɂɡɨɛɪɚɠɟɧɢɟ ɦɨɠɧɨ ɜɫɬɪɨɢɬɶ ɨɱɟɧɶ ɩɪɨɫɬɨ:

Ʉɪɨɦɟ ɬɨɝɨ, ɢɡɨɛɪɚɠɟɧɢɟ ɦɨɠɧɨ ɫɞɟɥɚɬɶ "ɝɨɪɹɱɢɦ", ɬɨ ɟɫɬɶ ɨɫɭɳɟɫɬɜɥɹɬɶ ɩɟɪɟɯɨɞ ɩɪɢ ɧɚɠɚɬɢɢ ɧɚ ɢɡɨɛɪɚɠɟɧɢɟ:

Ɉɛɪɚɬɢɬɟ ɜɧɢɦɚɧɢɟ ɧɚ ɜɬɨɪɭɸ ɱɚɫɬɶ ɩɪɢɦɟɪɚ. ȿɫɥɢ ɫɫɵɥɤɚ ɧɚ ɢɡɨɛɪɚɠɟɧɢɟ ɧɚɯɨɞɢɬɫɹ ɦɟɠɞɭ ɦɟɬɤɚɦɢ ɢ , ɢɡɨɛɪɚɠɟɧɢɟ ɮɚɤɬɢɱɟɫɤɢ ɫɬɚɧɨɜɢɬɫɹ ɤɧɨɩɤɨɣ, ɩɪɢ ɧɚɠɚɬɢɢ ɧɚ ɤɨɬɨɪɭɸ ɩɪɨɢɫɯɨɞɢɬ ɩɟɪɟɯɨɞ ɩɨ ɫɫɵɥɤɟ. Ɍɚɛɥɢɰɵ Ɍɚɛɥɢɰɵ ɧɭɠɧɵ ɞɥɹ ɩɪɟɞɫɬɚɜɥɟɧɢɹ ɢɧɮɨɪɦɚɰɢɢ ɜ ɬɚɛɥɢɱɧɨɦ ɜɢɞɟ. Ⱦɨ ɧɚɫɬɨɹɳɟɝɨ ɜɪɟɦɟɧɢ ɦɵ ɢɦɟɥɢ ɞɟɥɨ ɫ ɞɨɤɭɦɟɧɬɚɦɢ, ɜ ɤɨɬɨɪɵɯ ɫɭɳɟɫɬɜɨɜɚɥ ɬɨɥɶɤɨ ɨɞɢɧ «ɩɨɬɨɤ» ɬɟɤɫɬɚ. ɇɚ ɩɪɚɤɬɢɤɟ ɢɧɨɝɞɚ ɨɱɟɧɶ ɯɨɱɟɬɫɹ ɪɚɫɩɨɥɨɠɢɬɶ ɬɟɤɫɬ ɜ ɧɟɫɤɨɥɶɤɨ ɤɨɥɨɧɨɤ. Ɍɚɛɥɢɰɚ ɦɨɠɟɬ ɜ ɷɬɨɦ ɩɨɦɨɱɶ. Ʉɪɨɦɟ ɬɨɝɨ, ɬɚɛɥɢɰɚ, ɫɨɫɬɨɹɳɚɹ ɢɡ ɨɞɧɨɣ ɹɱɟɣɤɢ, ɦɨɠɟɬ ɨɱɟɧɶ ɷɮɮɟɤɬɧɨ ɜɵɞɟɥɢɬɶ ɮɪɚɝɦɟɧɬ ɬɟɤɫɬɚ, ɧɚ ɤɨɬɨɪɵɣ ɜɵ ɯɨɬɢɬɟ ɨɛɪɚɬɢɬɶ ɜɧɢɦɚɧɢɟ ɱɢɬɚɬɟɥɹ. Ʉɚɤ ɭɫɬɪɨɟɧɚ ɬɚɛɥɢɰɚ ȼ ɭɫɬɪɨɣɫɬɜɟ ɬɚɛɥɢɰɵ ɥɟɝɱɟ ɜɫɟɝɨ ɪɚɡɨɛɪɚɬɶɫɹ ɧɚ ɩɪɨɫɬɨɦ ɩɪɢɦɟɪɟ. <Title>ɉɪɢɦɟɪ 10

ɉɪɨɫɬɟɣɲɚɹ ɬɚɛɥɢɰɚ

20

ɍ ɬɚɛɥɢɰɵ ɦɨɠɟɬ ɛɵɬɶ ɡɚɝɨɥɨɜɨɤ
ɉɟɪɜɚɹ ɫɬɪɨɤɚ, ɩɟɪɜɚɹ ɤɨɥɨɧɤɚ	ɉɟɪɜɚɹ ɫɬɪɨɤɚ, ɜɬɨɪɚɹ ɤɨɥɨɧɤɚ
ȼɬɨɪɚɹ ɫɬɪɨɤɚ, ɩɟɪɜɚɹ ɤɨɥɨɧɤɚ	ȼɬɨɪɚɹ ɫɬɪɨɤɚ, ɜɬɨɪɚɹ ɤɨɥɨɧɤɚ

Ɍɚɛɥɢɰɚ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ

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

ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɜɧɟɲɧɟɣ ɪɚɦɤɢ ɬɚɛɥɢɰɵ ɢ ɹɱɟɟɤ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, BORDER=4). ȿɫɥɢ ɚɬɪɢɛɭɬ ɧɟ ɭɫɬɚɧɨɜɥɟɧ, ɬɚɛɥɢɰɚ ɩɨɤɚɡɵɜɚɟɬɫɹ ɛɟɡ ɪɚɦɤɢ. CELLSPACING ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɪɚɦɤɚɦɢ ɹɱɟɟɤ ɬɚɛɥɢɰɵ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, CELLSPACING=2). CELLPADDING ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɪɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɪɚɦɤɨɣ ɹɱɟɣɤɢ ɢ ɬɟɤɫɬɨɦ ɜ ɩɢɤɫɟɥɚɯ (ɧɚɩɪɢɦɟɪ, CELLPADDING=10). Ɍɚɛɥɢɰɚ ɦɨɠɟɬ ɢɦɟɬɶ ɡɚɝɨɥɨɜɨɤ (), ɯɨɬɹ ɡɚɝɨɥɨɜɨɤ ɧɟ ɹɜɥɹɟɬɫɹ ɨɛɹɡɚɬɟɥɶɧɵɦ. Ɇɟɬɤɚ ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ . Ɇɟɬɤɚ ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɫɥɟɞɭɸɳɢɟ ɚɬɪɢɛɭɬɵ. 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="[ɢɦɹ]"> <OPTION VALUE="[ɡɧɚɱɟɧɢɟ 1]">[ɬɟɤɫɬ 1] <OPTION VALUE="[ɡɧɚɱɟɧɢɟ 2]">[ɬɟɤɫɬ 2] <OPTION VALUE="[ɡɧɚɱɟɧɢɟ n]">[ɬɟɤɫɬ n] </SELECT> Ɂɞɟɫɶ ɦɟɧɸ ɧɚɱɢɧɚɟɬɫɹ ɫ ɦɟɬɤɢ <SELECT> ɢ ɡɚɤɚɧɱɢɜɚɟɬɫɹ ɦɟɬɤɨɣ </SELECT>. Ɇɟɬɤɚ <SELECT> ɫɨɞɟɪɠɢɬ ɨɛɹɡɚɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ NAME, ɨɩɪɟɞɟɥɹɸɳɢɣ ɢɦɹ ɩɟɪɟɦɟɧɧɨɣ, ɤɨɬɨɪɭɸ ɝɟɧɟɪɢɪɭɟɬ ɦɟɧɸ. Ɇɟɬɤɚ <SELECT> ɦɨɠɟɬ ɬɚɤɠɟ ɫɨɞɟɪɠɚɬɶ ɚɬɪɢɛɭɬ MULTIPLE, ɩɪɢɫɭɬɫɬɜɢɟ ɤɨɬɨɪɨɝɨ ɩɨɤɚɡɵɜɚɟɬ, ɱɬɨ ɢɡ ɦɟɧɸ ɦɨɠɧɨ ɜɵɛɪɚɬɶ ɧɟɫɤɨɥɶɤɨ 28<br /> <br /> ɷɥɟɦɟɧɬɨɜ. Ȼɨɥɶɲɢɧɫɬɜɨ ɛɪɚɭɡɟɪɨɜ ɩɨɤɚɡɵɜɚɸɬ ɦɟɧɸ <SELECT MULTIPLE> ɜ ɜɢɞɟ ɨɤɧɚ, ɜ ɤɨɬɨɪɨɦ ɧɚɯɨɞɹɬɫɹ ɷɥɟɦɟɧɬɵ ɦɟɧɸ (ɜɵɫɨɬɭ ɨɤɧɚ ɜ ɫɬɪɨɤɚɯ ɦɨɠɧɨ ɡɚɞɚɬɶ ɚɬɪɢɛɭɬɨɦ SIZE=[ɱɢɫɥɨ]). Ɇɟɧɸ <SELECT> ɜ ɛɨɥɶɲɢɧɫɬɜɟ ɫɥɭɱɚɟɜ ɩɨɤɚɡɵɜɚɟɬɫɹ ɜ ɜɢɞɟ ɜɵɩɚɞɚɸɳɟɝɨ ɦɟɧɸ. Ɇɟɬɤɚ <OPTION> ɨɩɪɟɞɟɥɹɟɬ ɷɥɟɦɟɧɬ ɦɟɧɸ. Ɉɛɹɡɚɬɟɥɶɧɵɣ ɚɬɪɢɛɭɬ VALUE ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɡɧɚɱɟɧɢɟ, ɤɨɬɨɪɨɟ ɛɭɞɟɬ ɩɟɪɟɞɚɧɨ ɨɛɪɚɛɨɬɱɢɤɭ, ɟɫɥɢ ɜɵɛɪɚɧ ɷɬɨɬ ɷɥɟɦɟɧɬ ɦɟɧɸ. Ɇɟɬɤɚ <OPTION> ɦɨɠɟɬ ɜɤɥɸɱɚɬɶ ɚɬɪɢɛɭɬ checked, ɩɨɤɚɡɵɜɚɸɳɢɣ, ɱɬɨ ɞɚɧɧɵɣ ɷɥɟɦɟɧɬ ɨɬɦɟɱɟɧ ɩɨ ɭɦɨɥɱɚɧɢɸ. ɉɪɢɦɟɪ <SELECT NAME="selection"> <OPTION VALUE="option1" checked>ȼɚɪɢɚɧɬ 1 <OPTION VALUE="option2">ȼɚɪɢɚɧɬ 2 <OPTION VALUE="option3">ȼɚɪɢɚɧɬ 3 </SELECT> Ɍɚɤɨɣ ɮɪɚɝɦɟɧɬ ɨɩɪɟɞɟɥɹɟɬ ɦɟɧɸ ɢɡ ɬɪɟɯ ɷɥɟɦɟɧɬɨɜ: ȼɚɪɢɚɧɬ 1, ȼɚɪɢɚɧɬ 2 ɢ ȼɚɪɢɚɧɬ 3. ɉɨ ɭɦɨɥɱɚɧɢɸ ɜɵɛɪɚɧ ɷɥɟɦɟɧɬ ȼɚɪɢɚɧɬ 1. Ɉɛɪɚɛɨɬɱɢɤɭ ɛɭɞɟɬ ɩɟɪɟɞɚɧɚ ɩɟɪɟɦɟɧɧɚɹ selection, ɡɧɚɱɟɧɢɟ ɤɨɬɨɪɨɣ ɦɨɠɟɬ ɛɵɬɶ option1 (ɩɨ ɭɦɨɥɱɚɧɢɸ), option2 ɢɥɢ option3. ɗɥɟɦɟɧɬ <TEXTAREA> ɦɨɠɟɬ ɩɨɤɚɡɚɬɶɫɹ ɫɨɜɫɟɦ ɩɪɨɫɬɵɦ. ɇɚɩɪɢɦɟɪ: <TEXTAREA NAME=address ROWS=5 COLS=50> Ɂɞɟɫɶ – ȼɚɲ ɚɞɪɟɫ... ȼɫɟ ɚɬɪɢɛɭɬɵ ɨɛɹɡɚɬɟɥɶɧɵ. Ⱥɬɪɢɛɭɬ NAME ɨɩɪɟɞɟɥɹɟɬ ɢɦɹ, ɩɨɞ ɤɨɬɨɪɵɦ ɫɨɞɟɪɠɢɦɨɟ ɨɤɧɚ ɛɭɞɟɬ ɩɟɪɟɞɚɧɨ ɨɛɪɚɛɨɬɱɢɤɭ (ɜ ɩɪɢɦɟɪɟ – address). Ⱥɬɪɢɛɭɬ ROWS ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɜɵɫɨɬɭ ɨɤɧɚ ɜ ɫɬɪɨɤɚɯ (ɜ ɩɪɢɦɟɪɟ – 5). Ⱥɬɪɢɛɭɬ COLS ɭɫɬɚɧɚɜɥɢɜɚɟɬ ɲɢɪɢɧɭ ɨɤɧɚ ɜ ɫɢɦɜɨɥɚɯ (ɜ ɩɪɢɦɟɪɟ – 50). Ɍɟɤɫɬ, ɪɚɡɦɟɳɟɧɧɵɣ ɦɟɠɞɭ ɦɟɬɤɚɦɢ ɢ , ɩɪɟɞɫɬɚɜɥɹɟɬ ɫɨɛɨɣ ɫɨɞɟɪɠɢɦɨɟ ɨɤɧɚ ɩɨ ɭɦɨɥɱɚɧɢɸ. ɉɨɥɶɡɨɜɚɬɟɥɶ ɦɨɠɟɬ ɟɝɨ ɨɬɪɟɞɚɤɬɢɪɨɜɚɬɶ ɢɥɢ ɩɪɨɫɬɨ ɫɬɟɪɟɬɶ. 29 ȼɚɠɧɨ ɡɧɚɬɶ, ɱɬɨ ɪɭɫɫɤɢɟ ɛɭɤɜɵ ɜ ɨɤɧɟ ɩɪɢ ɩɟɪɟɞɚɱɟ ɨɛɪɚɛɨɬɱɢɤɭ ɦɨɝɭɬ ɛɵɬɶ ɤɨɧɜɟɪɬɢɪɨɜɚɧɵ ɜ ɫɨɨɬɜɟɬɫɬɜɭɸɳɢɟ ɢɦ ɫɢɦɜɨɥɶɧɵɟ ɨɛɴɟɤɬɵ. ɉɪɢɦɟɪ <Html> <Head> <Title>ɉɪɢɦɟɪ </Title> </Head> <H1>ɇɟɫɤɨɥɶɤɨ ɛɨɥɟɟ ɫɥɨɠɧɚɹ ɮɨɪɦɚ </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Ɋɚɫɫɤɚɠɢɬɟ ɧɟɦɧɨɝɨ ɨ ɫɟɛɟ... </H2> <P>Ɇɨɠɧɨ ɭɤɚɡɵɜɚɬɶ ɧɟɧɚɫɬɨɹɳɢɟ ɞɚɧɧɵɟ. Ɇɨɠɧɨ ɩɪɢɞɭɦɚɬɶ ɫɟɛɟ ɜɢɪɬɭɚɥɶɧɨɝɨ ɞɪɭɝɚ. </P> <P>ɂɦɹ: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Ɏɚɦɢɥɢɹ: <INPUT TYPE=text SIZE=40 NAME=ln><BR> ɉɨɥ: <INPUT TYPE=radio NAME=gender VALUE="male" checked>ɦɭɠɫɤɨɣ <INPUT TYPE=radio NAME=gender VALUE="female">ɠɟɧɫɤɢɣ<BR> ȼɨɡɪɚɫɬ: <INPUT TYPE=text SIZE=5 NAME=age> ɥɟɬ<BR> <INPUT TYPE=submit VALUE="Ɂɚɩɭɫɬɢɬɶ ɨɛɪɚɛɨɬɱɢɤ"> </P> </Form> </body> </HTML> ȼɜɟɞɟɧɢɟ ɜ CSS ɑɬɨ ɬɚɤɨɟ CSS (Cascading Style Sheets) ɢɥɢ, ɩɨ-ɪɭɫɫɤɢ, ɤɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ? ɋɬɢɥɢ – ɷɬɨ ɧɚɛɨɪɵ ɫɜɨɣɫɬɜ, ɤɨɬɨɪɵɟ ɦɵ ɦɨɠɟɦ 30<br /> <br /> ɩɪɢɫɜɨɢɬɶ ɦɧɨɝɢɦ ɷɥɟɦɟɧɬɚɦ (ɬɚɛɥɢɰɵ, ɫɫɵɥɤɢ ɢ ɬ. ɞ.), ɜɥɢɹɸɳɢɟ ɧɚ ɨɬɨɛɪɚɠɟɧɢɟ ɨɛɴɟɤɬɚ ɧɚ ɷɤɪɚɧɟ ɛɪɚɭɡɟɪɚ. Ɍɚɛɥɢɰɵ ɫɬɢɥɟɣ ɩɪɟɞɫɬɚɜɥɹɸɬ ɫɨɛɨɣ ɢɧɫɬɪɭɦɟɧɬ ɜɨɡɞɟɣɫɬɜɢɹ ɧɚ ɜɧɟɲɧɢɣ ɜɢɞ web-ɫɬɪɚɧɢɰɵ. Ɇɟɯɚɧɢɡɦ ɞɟɣɫɬɜɢɹ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɬɚɤɨɜ. ɋɬɪɭɤɬɭɪɚ HTML-ɞɨɤɭɦɟɧɬɚ ɪɚɡɦɟɱɚɟɬɫɹ ɫ ɩɨɦɨɳɶɸ ɬɟɝɨɜ, ɚ ɫɜɨɣɫɬɜɚ ɷɬɢɯ ɫɬɪɭɤɬɭɪɧɵɯ ɷɥɟɦɟɧɬɨɜ ɫɬɪɚɧɢɰɵ ɨɩɢɫɵɜɚɸɬɫɹ ɨɬɞɟɥɶɧɨ. Ʉɚɫɤɚɞɧɵɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS ɢɦɟɸɬ ɫɥɟɞɭɸɳɢɟ ɨɫɨɛɟɧɧɨɫɬɢ. 1. Ƚɢɛɤɨɫɬɶ ɩɨɞɤɥɸɱɟɧɢɹ. 2. Ʉɚɫɤɚɞɧɨɫɬɶ. 3. Ɂɚɜɢɫɢɦɨɫɬɶ ɨɬ ɫɪɟɞɵ ɩɪɟɞɫɬɚɜɥɟɧɢɹ. 4. ɇɚɫɥɟɞɨɜɚɧɢɟ. ɋɢɧɬɚɤɫɢɫ ɋɢɧɬɚɤɫɢɫ CSS ɜ ɨɛɳɟɦ ɜɢɞɟ ɢɦɟɟɬ ɫɥɟɞɭɸɳɭɸ ɮɨɪɦɭ: ɫɟɥɟɤɬɨɪ {ɨɩɪɟɞɟɥɟɧɢɟ} Ɉɩɪɟɞɟɥɟɧɢɟɦ ɫɬɢɥɹ ɧɚɡɵɜɚɟɬɫɹ ɩɚɪɚ «ɫɜɨɣɫɬɜɨ: ɡɧɚɱɟɧɢɟ». ȼ ɤɚɱɟɫɬɜɟ ɫɟɥɟɤɬɨɪɚ ɦɨɝɭɬ ɜɵɫɬɭɩɚɬɶ ɷɥɟɦɟɧɬɵ, ɤɥɚɫɫɵ ɢ ɨɞɢɧɨɱɧɵɟ ɨɛɴɟɤɬɵ. ȿɫɥɢ ɞɥɹ ɫɟɥɟɤɬɨɪɚ ɨɩɪɟɞɟɥɹɟɬɫɹ ɧɟɫɤɨɥɶɤɨ ɫɜɨɣɫɬɜ, ɨɧɢ ɞɨɥɠɧɵ ɪɚɡɞɟɥɹɬɶɫɹ ɬɨɱɤɨɣ ɫ ɡɚɩɹɬɨɣ. ɇɚɩɪɢɦɟɪ, ɨɩɪɟɞɟɥɢɦ ɫ ɩɨɦɨɳɶɸ CSS ɡɟɥɟɧɵɣ ɰɜɟɬ ɚɛɡɚɰɚ <p>: p {color: green} P – ɫɟɥɟɤɬɨɪ, {color: green} – ɨɩɪɟɞɟɥɟɧɢɟ ɫɬɢɥɹ ɞɥɹ ɷɬɨɝɨ ɫɟɥɟɤɬɨɪɚ, ɝɞɟ color – ɷɬɨ ɨɩɪɟɞɟɥɹɟɦɨɟ ɫɜɨɣɫɬɜɨ, ɚ green – ɡɧɚɱɟɧɢɟ ɷɬɨɝɨ ɫɜɨɣɫɬɜɚ. ȼɵɞɟɥɢɦ ɡɟɥɟɧɵɦ ɧɟ ɜɫɟ ɚɛɡɚɰɵ ɜ ɞɨɤɭɦɟɧɬɟ, ɚ ɬɨɥɶɤɨ ɚɛɡɚɰɵ ɤɥɚɫɫɚ green. p.green {color: green} <p class=”green”>ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ ɡɟɥɟɧɵɦ</p> Ⱦɥɹ ɜɵɞɟɥɟɧɢɹ ɜ ɬɟɤɫɬɟ ɬɨɥɶɤɨ ɨɞɧɨɝɨ ɚɛɡɚɰɚ ɢɡ ɦɧɨɠɟɫɬɜɚ ɫɥɟɞɭɟɬ ɩɪɢɫɜɨɢɬɶ ɟɦɭ ɭɧɢɤɚɥɶɧɵɣ ɢɞɟɧɬɢɮɢɤɚɬɨɪ: <p id=”green”> ɗɬɨ ɬɟɤɫɬ, ɤɨɬɨɪɵɣ ɦɵ ɫɞɟɥɚɥɢ ɡɟɥɟɧɵɦ</p> ɋɞɟɥɚɟɦ ɡɟɥɟɧɵɦ ɧɟ ɬɨɥɶɤɨ ɧɟɤɨɬɨɪɵɟ ɚɛɡɚɰɵ, ɧɨ ɢ ɡɚɝɨɥɨɜɤɢ, ɫɩɢɫɤɢ, ɚ ɬɚɤɠɟ ɥɸɛɵɟ ɞɪɭɝɢɟ ɷɥɟɦɟɧɬɵ. Ɉɩɢɫɵɜɚɟɦ ɤɥɚɫɫ: 31<br /> <br /> .green {color: green} Ɍɟɩɟɪɶ ɨɫɬɚɥɨɫɶ ɭɤɚɡɚɬɶ ɛɪɚɭɡɟɪɭ, ɱɬɨ ɞɚɧɧɵɣ ɷɥɟɦɟɧɬ ɨɬɧɨɫɢɬɫɹ ɤ ɤɥɚɫɫɭ green, ɢ ɨɧ ɜɵɞɟɥɢɬ ɟɝɨ ɡɟɥɟɧɵɦ ɰɜɟɬɨɦ. ɇɚɩɪɢɦɟɪ: <ol> <li class=”green”>Ɉɞɢɧ <li>Ⱦɜɚ <li class=”green”>Ɍɪɢ <li>ɑɟɬɵɪɟ </ol> Ɉɩɪɟɞɟɥɢɦ ɡɟɥɟɧɵɣ ɰɜɟɬ ɞɥɹ ɜɫɟɯ ɷɥɟɦɟɧɬɨɜ web-ɫɬɪɚɧɢɰɟ: body {color: green} ɗɥɟɦɟɧɬɵ <span> ɢ <div> ɗɥɟɦɟɧɬɵ <span> ɢ <div> ɲɢɪɨɤɨ ɢɫɩɨɥɶɡɭɸɬɫɹ ɜɦɟɫɬɟ ɫ ɫɟɥɟɤɬɨɪɚɦɢ ɤɥɚɫɫɨɜ. ɗɥɟɦɟɧɬ <span> ɩɪɟɞɧɚɡɧɚɱɟɧ ɞɥɹ ɪɚɛɨɬɵ ɫɨ ɫɬɪɨɤɨɜɵɦɢ ɷɥɟɦɟɧɬɚɦɢ, ɩɨɷɬɨɦɭ ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɢɡɦɟɧɟɧɢɹ ɨɬɞɟɥɶɧɵɯ ɫɢɦɜɨɥɨɜ ɢɥɢ ɢɯ ɧɚɛɨɪɨɜ, ɭɞɨɛɟɧ ɞɥɹ ɫɨɡɞɚɧɢɹ ɜɵɞɟɥɟɧɢɣ ɜ ɬɟɤɫɬɟ: ɛɭɤɜɢɰ, ɰɢɬɚɬ ɢ ɞɪ. ȼ ɬɨ ɠɟ ɜɪɟɦɹ, <div> ɩɨɡɜɨɥɹɟɬ ɩɪɢɦɟɧɢɬɶ ɫɬɢɥɶ ɫɪɚɡɭ ɤ ɰɟɥɨɦɭ ɛɥɨɤɭ ɢ ɱɚɫɬɨ ɢɫɩɨɥɶɡɭɟɬɫɹ ɞɥɹ ɫɨɡɞɚɧɢɹ ɫɥɨɟɜ. <head> <style type=”text/css”> .capital { font-size: 150%; color: red; } </style> </head> <body> <span class=”capital”>Ȼ</span>ɭɤɜɢɰɚ ɹɜɥɹɟɬɫɹ ɯɭɞɨɠɟɫɬɜɟɧɧɵɦ ɩɪɢɟɦɨɦ ɨɮɨɪɦɥɟɧɢɹ ɬɟɤɫɬɚ. </body> Ʉɨɧɬɟɤɫɬɧɵɟ ɫɟɥɟɤɬɨɪɵ ɉɪɢ ɫɨɡɞɚɧɢɢ web-ɫɬɪɚɧɢɰɵ ɱɚɫɬɨ ɩɪɢɯɨɞɢɬɫɹ ɜɤɥɚɞɵɜɚɬɶ ɨɞɧɢ ɷɥɟɦɟɧɬɵ ɜ ɞɪɭɝɢɟ. Ⱦɥɹ ɬɨɝɨ ɱɬɨɛɵ ɫɬɢɥɢ ɞɥɹ ɷɬɢɯ ɷɥɟɦɟɧɬɨɜ ɩɪɢɦɟɧɹɥɢɫɶ ɤɨɪɪɟɤɬɧɨ, ɦɨɠɧɨ ɨɩɢɫɚɬɶ ɫɟɥɟɤɬɨɪɵ, ɤɨɬɨɪɵɟ ɪɚɛɨɬɚɸɬ ɬɨɥɶɤɨ ɩɪɢ ɨɩɪɟɞɟɥɟɧɧɨɦ ɭɫɥɨɜɢɢ. Ɉɛɵɱɧɨɟ ɢɫɩɨɥɶɡɨɜɚɧɢɟ ɫɟɥɟɤɬɨɪɨɜ ɜɵɝɥɹɞɢɬ ɬɚɤ:<br /> <br /> 32<br /> <br /> 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 ɫɢɧɟɝɨ ɰɜɟɬɚ ɛɭɞɟɬ ɩɪɢɦɟɧɟɧ ɤ ɫɨɞɟɪɠɢɦɨɦɭ ɷɥɟɦɟɧɬɚ <i>, ɤɨɝɞɚ ɨɧ ɧɚɯɨɞɢɬɫɹ ɜɧɭɬɪɢ ɷɥɟɦɟɧɬɚ <b>. <html> <head> <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; } </style> </head> <body> <b>ɉɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ</b><br> <i>Ʉɭɪɫɢɜɧɵɣ ɲɪɢɮɬ</i><br> <b><i>ɉɨɥɭɠɢɪɧɵɣ ɤɭɪɫɢɜɧɵɣ ɲɪɢɮɬ Arial ɫɢɧɟɝɨ ɰɜɟɬɚ</i></b><br> <b><i>Ʉɭɪɫɢɜɧɵɣ ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ</i></b> </body> </html> Ƚɪɭɩɩɢɪɨɜɚɧɢɟ Ȼɨɥɶɲɢɧɫɬɜɨ ɢɫɩɨɥɶɡɭɟɦɵɯ ɜ CSS ɫɟɥɟɤɬɨɪɨɜ ɢɦɟɸɬ ɧɟɤɨɬɨɪɵɟ ɨɛɳɢɟ ɫɨɜɩɚɞɚɸɳɢɟ ɫɜɨɣɫɬɜɚ, ɧɚɩɪɢɦɟɪ, ɢɫɩɨɥɶɡɭɸɬ ɨɞɢɧ ɢ ɬɨɬ ɠɟ ɲɪɢɮɬ. ɋɟɥɟɤɬɨɪɵ ɝɪɭɩɩɢɪɭɸɬɫɹ ɩɟɪɟɱɢɫɥɟɧɢɟɦ ɢɯ ɢɦɟɧ ɱɟɪɟɡ ɡɚɩɹɬɭɸ. h1, h2, h3 { font-family: Arial, Helvetica, sansserif; } h1 { font-size: 160%; color: #000033; } 33<br /> <br /> h2 { font-size: 135%; color: #333333; } h3 { font-size: 120%; color: #990000; } ɇɚɫɥɟɞɨɜɚɧɢɟ ɇɚɫɥɟɞɨɜɚɧɢɟ – ɷɬɨ ɩɟɪɟɧɨɫ ɩɪɚɜɢɥ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɞɥɹ ɷɥɟɦɟɧɬɨɜɩɪɟɞɤɨɜ ɧɚ ɜɥɨɠɟɧɧɵɟ ɷɥɟɦɟɧɬɵ – ɩɨɬɨɦɤɢ. ȼ ɫɥɟɞɭɸɳɟɦ ɩɪɢɦɟɪɟ ɞɥɹ ɚɛɡɚɰɚ <p> ɡɚɞɚɧɨ ɮɨɪɦɚɬɢɪɨɜɚɧɢɟ, ɚ ɞɥɹ ɷɥɟɦɟɧɬɚ <em>, ɤɨɬɨɪɵɣ ɧɚɯɨɞɢɬɫɹ ɜɧɭɬɪɢ ɩɚɪɚɝɪɚɮɚ, – ɧɟɬ. ȼ ɷɬɨɦ ɫɥɭɱɚɟ ɜɥɨɠɟɧɧɵɣ ɷɥɟɦɟɧɬ ɧɚɫɥɟɞɭɟɬ ɫɜɨɣɫɬɜɚ ɪɨɞɢɬɟɥɶɫɤɨɝɨ ɷɥɟɦɟɧɬɚ. <html> <style type=”text/css”> p {text-align: justify; color: #6624ff; } strong { font-weight: bold; color: navy; } </style> <body> <p><strong>ɂɧɮɨɪɦɚɰɢɹ</strong>ɹɜɥɹɟɬɫɹ ɨɫɧɨɜɨɩɨɥɚɝɚɸɳɢɦ ɩɨɧɹɬɢɟɦ ɜ ɬɟɨɪɢɢ<em>ɦɚɪɤɟɬɢɧɝɨɜɵɯ ɢɫɫɥɟɞɨɜɚɧɢɣ</em>. </p> </body> </html> ɉɫɟɜɞɨɤɥɚɫɫɵ ɉɫɟɜɞɨɤɥɚɫɫɵ ɢɫɩɨɥɶɡɭɸɬɫɹ ɜ CSS, ɱɬɨɛɵ ɩɪɢɦɟɧɹɬɶ ɤ ɷɥɟɦɟɧɬɚɦ ɪɚɡɧɵɟ ɩɪɨɰɟɞɭɪɵ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɜ ɡɚɜɢɫɢɦɨɫɬɢ ɨɬ ɧɚɥɢɱɢɹ ɨɩɪɟɞɟɥɟɧɧɵɯ ɜɧɟɲɧɢɯ ɭɫɥɨɜɢɣ. ȼ ɧɚɫɬɨɹɳɟɟ ɜɪɟɦɹ ɩɫɟɜɞɨɤɥɚɫɫɵ ɢɫɩɨɥɶɡɭɸɬɫɹ ɬɨɥɶɤɨ ɞɥɹ ɫɫɵɥɨɤ. ɂɦɹ ɩɫɟɜɞɨɤɥɚɫɫ ɜ ɫɟɥɟɤɬɨɪɟ ɭɫɬɚɧɚɜɥɢɜɚɟɬɫɹ ɩɨɫɥɟ ɞɜɨɟɬɨɱɢɹ. Ⱥ: ɩɫɟɜɞɨɤɥɚɫɫ {ɫɜɨɣɫɬɜɨ: ɡɧɚɱɟɧɢɟ} ɉɫɟɜɞɨɤɥɚɫɫɵ ɞɥɹ ɫɫɵɥɨɤ ɦɨɝɭɬ ɩɪɢɧɢɦɚɬɶ ɫɥɟɞɭɸɳɢɟ ɡɧɚɱɟɧɢɹ: x<br /> <br /> active – ɚɤɬɢɜɧɚɹ ɫɫɵɥɤɚ;<br /> <br /> x<br /> <br /> link – ɧɟɩɨɫɟɳɟɧɧɚɹ ɫɫɵɥɤɚ;<br /> <br /> x<br /> <br /> hover – ɫɫɵɥɤɚ ɩɪɢ ɧɚɜɟɞɟɧɧɨɦ ɤɭɪɫɨɪɟ ɦɵɲɢ;<br /> <br /> x<br /> <br /> visited – ɩɨɫɟɳɟɧɧɚɹ ɫɫɵɥɤɚ.<br /> <br /> 34<br /> <br /> ɉɪɢɦɟɪ <html> <head> <style type=”text/css”> a: link { color: #003366; } a: visited { color: #660066; } a: hover { color: #800000; } a: active { color: #ff0000; } </style> </head> <body> \| <a href=# rel="nofollow">ɋɫɵɥɤɚ 1</a> \| <a href=# rel="nofollow">ɋɫɵɥɤɚ 2</a> </body> </html> ɉɫɟɜɞɨɤɥɚɫɫɵ ɫɨɱɟɬɚɸɬɫɹ ɫ ɫɟɥɟɤɬɨɪɚɦɢ, ɱɬɨ ɩɨɡɜɨɥɹɟɬ ɫɨɡɞɚɜɚɬɶ ɫɫɵɥɤɢ ɫ ɪɚɡɧɵɦɢ ɩɚɪɚɦɟɬɪɚɦɢ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ. <html> <head> <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 } </style> </head> <body link=#0000ff> \| <a href=link1.html rel="nofollow">ɋɫɵɥɤɚ 1</a> \| <a href=link2.html class=link1 rel="nofollow">ɋɫɵɥɤɚ 2</a> \| <a href=link3.html class=link2 rel="nofollow">ɋɫɵɥɤɚ 3</a> \| </body> </html> ȼ ɩɪɢɦɟɪɟ ɢɫɩɨɥɶɡɭɟɬɫɹ ɬɪɢ ɜɢɞɚ ɫɫɵɥɨɤ. ɉɟɪɜɵɣ ɬɢɩ ɩɨ ɭɦɨɥɱɚɧɢɸ, ɜɬɨɪɚɹ ɫɫɵɥɤɚ – ɡɟɥɟɧɚɹ, ɬɪɟɬɶɹ – ɫɢɧɹɹ. ȼɫɟ ɬɪɢ ɫɫɵɥɤɢ ɢɡɦɟɧɹɸɬ ɫɜɨɣ ɰɜɟɬ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɤɭɪɫɨɪɚ ɦɵɲɢ. 35<br /> <br /> ɉɨɞɤɥɸɱɟɧɢɟ ɤɚɫɤɚɞɧɵɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ ɋɭɳɟɫɬɜɭɟɬ ɬɪɢ ɨɫɧɨɜɧɵɯ ɫɩɨɫɨɛɚ ɜɤɥɸɱɟɧɢɹ ɬɚɛɥɢɰ ɫɬɢɥɟɣ ɜ web ɞɨɤɭɦɟɧɬɵ. ɗɬɨ ɦɨɝɭɬ ɛɵɬɶ ɝɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ, ɜɫɬɪɨɟɧɧɵɟ ɫɬɢɥɢ ɢ ɜɧɟɲɧɢɟ ɫɬɢɥɢ. Ƚɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ: ɷɥɟɦɟɧɬ <style> ɋ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <style> ɨɩɪɟɞɟɥɹɸɬɫɹ ɝɥɨɛɚɥɶɧɵɟ ɫɬɢɥɢ (global style sheets), ɬɨ ɟɫɬɶ ɫɬɢɥɢ ɞɥɹ ɜɫɟɣ ɬɟɤɭɳɟɣ web-ɫɬɪɚɧɢɰɵ. <style> – ɷɬɨ ɷɥɟɦɟɧɬ-ɤɨɧɬɟɣɧɟɪ, ɤɨɬɨɪɵɣ ɪɚɫɩɨɥɚɝɚɟɬɫɹ ɜ ɡɚɝɨɥɨɜɤɟ ɞɨɤɭɦɟɧɬɚ <head>. ȼ ɧɟɦ ɫɨɞɟɪɠɢɬɫɹ ɨɩɢɫɚɧɢɟ ɫɬɢɥɟɣ ɜɫɟɯ ɷɥɟɦɟɧɬɨɜ, ɤɨɬɨɪɵɟ ɛɭɞɭɬ ɩɪɢɫɭɬɫɬɜɨɜɚɬɶ ɧɚ ɞɚɧɧɨɣ web-ɫɬɪɚɧɢɰɟ. Ɉɩɢɫɚɧɢɟ ɫɬɢɥɟɣ ɥɭɱɲɟ ɜɥɨɠɢɬɶ ɜ HTML-ɤɨɦɦɟɧɬɚɪɢɢ. Ȼɚɡɨɜɵɣ ɮɨɪɦɚɬ ɞɥɹ ɩɨɞɤɥɸɱɟɧɢɹ ɫɬɢɥɟɣ ɫ ɩɨɦɨɳɶɸ ɷɥɟɦɟɧɬɚ <style> ɬɚɤɨɜ: <head> <title>ɇɚɡɜɚɧɢɟ ɞɨɤɭɦɟɧɬɚ</title> <style type=”MIME-ɬɢɩ”> ɋɟɥɟɤɬɨɪ_1 {ɨɩɪɟɞɟɥɟɧɢɟ} ɋɟɥɟɤɬɨɪ_2 {ɨɩɪɟɞɟɥɟɧɢɟ} … </style> </head> Ⱦɥɹ ɧɚɲɢɯ ɰɟɥɟɣ ɚɬɪɢɛɭɬ type ɜɫɟɝɞɚ ɛɭɞɟɬ ɩɪɢɧɢɦɚɬɶ ɡɧɚɱɟɧɢɟ «text/css». ɗɬɨ ɝɨɜɨɪɢɬ ɛɪɚɭɡɟɪɭ ɨ ɬɨɦ, ɱɬɨ ɜɵ ɛɭɞɟɬɟ ɢɫɩɨɥɶɡɨɜɚɬɶ ɜ ɤɚɱɟɫɬɜɟ ɹɡɵɤɚ ɫɬɢɥɟɣ ɢɦɟɧɧɨ CSS. ɋɟɥɟɤɬɨɪ ɦɨɠɟɬ ɛɵɬɶ ɥɸɛɵɦ ɷɥɟɦɟɧɬɨɦ HTML. ɗɥɟɦɟɧɬɵ ɦɨɝɭɬ ɛɵɬɶ ɪɚɡɛɢɬɵ ɧɚ ɤɥɚɫɫɵ class, ɢɦɟɬɶ ɢɞɟɧɬɢɮɢɤɚɬɨɪɵ id. <head> <title>ɋɬɪɚɧɢɰɚ ɫɨ ɫɬɢɥɹɦɢ</title> <style type=”text/css”><!-p.ital {font-style: italic} h1.red {color: red} --> </style> </head><br /> <br /> 36<br /> <br /> ȼ ɩɪɢɜɟɞɟɧɧɨɦ ɜɵɲɟ ɨɩɢɫɚɧɢɢ ɫɬɢɥɟɣ ɫɨɡɞɚɸɬɫɹ ɞɜɚ ɤɥɚɫɫɚ ɷɥɟɦɟɧɬɨɜ <p> ɢ <h1>. ɗɬɢ ɞɜɚ ɤɥɚɫɫɚ ɧɚɡɵɜɚɸɬɫɹ ital ɢ red. Ʉɥɚɫɫ ital ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɧɚɱɟɪɬɚɧɢɹ ɲɪɢɮɬɚ ɤɭɪɫɢɜɨɦ ɞɥɹ ɚɛɡɚɰɚ <p>. Ʉɥɚɫɫ red ɨɩɢɫɵɜɚɟɬ ɤɪɚɫɧɵɣ ɰɜɟɬ ɡɚɝɨɥɨɜɤɚ <h1>. ɑɬɨɛɵ ɷɬɢ ɤɥɚɫɫɵ ɩɨɹɜɢɥɢɫɶ ɜ HTML-ɞɨɤɭɦɟɧɬɟ, ɢɫɩɨɥɶɡɭɸɬ ɚɬɪɢɛɭɬ class ɞɥɹ ɫɨɨɬɜɟɬɫɬɜɭɸɳɟɝɨ ɷɥɟɦɟɧɬɚ: <p class=”red”>ɗɬɨɬ ɬɟɤɫɬ ɞɨɥɠɟɧ ɛɵɬɶ ɜɵɞɟɥɟɧ ɤɪɚɫɧɵɦ</p> <h1 class=”italic”>ɗɬɨɬ ɡɚɝɨɥɨɜɨɤ ɞɨɥɠɟɧ ɛɵɬɶ ɜɵɞɟɥɟɧ ɤɭɪɫɢɜɨɦ</h1> ɉɪɢɦɟɪ. ɉɨɞɤɥɸɱɟɧɢɟ ɝɥɨɛɚɥɶɧɵɯ ɫɬɢɥɟɣ ȼ ɢɞɟɚɥɟ ɜɫɟ ɫɜɨɣɫɬɜɚ ɷɥɟɦɟɧɬɨɜ web-ɫɬɪɚɧɢɰɵ ɞɨɥɠɧɵ ɛɵɬɶ ɨɩɢɫɚɧɵ ɫ ɩɨɦɨɳɶɸ ɫɬɢɥɟɣ. ȼɧɟɞɪɢɦ ɧɟɛɨɥɶɲɨɣ ɫɩɢɫɨɤ ɫɬɢɥɟɣ ɜ HTMLɫɬɪɚɧɢɰɭ. ȼɤɥɸɱɟɧɢɟ ɫɩɢɫɤɚ ɫɬɢɥɟɣ ɜ HTML-ɫɬɪɚɧɢɰɭ (style1.html): <html> <head> <title>ɉɪɢɦɟɪ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɫɩɢɫɤɚ ɫɬɢɥɟɣ CSS</title> <style type=”text/css”><!-BODY.back {background: “paper.gif” white} h2.ital {font-style: italic} h3.center {text-align: center} p.center {text-align: center} em {font: 14pt Arial; color: orange;}--> </style> </head> <body class=”back”> <h1>VasiaPup Ltd.</h1> <h2 class=”ital”>ɂɡɦɟɧɢ ɦɢɪ. Ɉɫɬɚɧɶɫɹ ɫɨɛɨɣ.</h2> <hr> <h3 class=”center”>Ɉ ɧɚɲɟɣ ɮɢɥɨɫɨɮɢɢ</h3> <p class=”center”> 37<br /> <br /> <em>ɇɟɫɬɢ ɞɨɛɪɨ ɜ ɦɢɪ</em> — ɷɬɨ ɪɚɞɨɫɬɶ, ɚ ɧɟ ɨɛɹɡɚɧɧɨɫɬɶ.</p> <p>Ⱦɟɥɚɣ ɜɫɟ, ɱɬɨ ɜ ɬɜɨɢɯ ɫɢɥɚɯ</p> </body> </html> ȼɧɟɲɧɢɟ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS Ɋɚɫɫɦɨɬɪɢɦ ɞɜɚ ɞɪɭɝɢɯ ɫɩɨɫɨɛɚ ɜɤɥɸɱɟɧɢɹ ɫɬɢɥɟɣ CSS ɜ HTMLɞɨɤɭɦɟɧɬ. ɇɚɱɧɟɦ ɫ ɜɧɟɲɧɢɯ, ɢɥɢ ɫɜɹɡɚɧɧɵɯ (linked style sheets), ɬɚɛɥɢɰ ɫɬɢɥɟɣ, ɫ ɩɨɦɨɳɶɸ ɤɨɬɨɪɵɯ ɦɨɠɧɨ ɨɩɪɟɞɟɥɹɬɶ ɫɜɨɣɫɬɜɚ ɷɥɟɦɟɧɬɨɜ ɫɪɚɡɭ ɧɟɫɤɨɥɶɤɢɯ ɫɬɪɚɧɢɰ ɫɚɣɬɚ. ɋɬɢɥɢ ɯɪɚɧɹɬɫɹ ɜ ɨɬɞɟɥɶɧɨɦ ɮɚɣɥɟ, ɤɨɬɨɪɵɣ ɦɨɠɟɬ ɛɵɬɶ ɢɫɩɨɥɶɡɨɜɚɧ ɞɥɹ ɥɸɛɵɯ web-ɫɬɪɚɧɢɰ. Ⱦɥɹ ɩɨɞɤɥɸɱɟɧɢɹ ɜɧɟɲɧɢɯ ɫɬɢɥɟɣ ɢɫɩɨɥɶɡɭɟɬɫɹ ɷɥɟɦɟɧɬ <link>. ɗɥɟɦɟɧɬ <link> ɋ ɩɨɦɨɳɶɸ ɚɬɪɢɛɭɬɚ rel ɩɨɞɤɥɸɱɚɸɬɫɹ ɜɧɟɲɧɢɟ ɫɬɢɥɢ, ɫɨɞɟɪɠɚɳɢɟɫɹ ɜ ɨɬɞɟɥɶɧɨɦ ɮɚɣɥɟ ɫ ɪɚɫɲɢɪɟɧɢɟɦ .css. Ɏɨɪɦɚɬ ɢɫɩɨɥɶɡɨɜɚɧɢɹ ɷɥɟɦɟɧɬɚ <link> ɜ ɞɚɧɧɨɦ ɫɥɭɱɚɟ ɬɚɤɨɜ: <link rel=”stylesheet” type=”text/css” href=”url”> ɉɟɪɜɵɟ ɞɜɚ ɚɬɪɢɛɭɬɚ ɫɨɨɛɳɚɸɬ ɛɪɚɭɡɟɪɭ, ɱɬɨ ɞɥɹ ɞɚɧɧɨɣ ɫɬɪɚɧɢɰɵ ɛɭɞɭɬ ɢɫɩɨɥɶɡɨɜɚɬɶɫɹ ɬɚɛɥɢɰɵ ɫɬɢɥɟɣ CSS. Ⱥɬɪɢɛɭɬ href ɫɨɞɟɪɠɢɬ URL ɩɨɞɤɥɸɱɚɟɦɨɝɨ ɮɚɣɥɚ ɫɬɢɥɟɣ. ɉɪɢɦɟɪ ɩɨɞɤɥɸɱɟɧɢɹ ɜɧɟɲɧɢɯ ɫɬɢɥɟɣ: <head> <title>Ɂɚɝɨɥɨɜɨɤ ɫɬɪɚɧɢɰɵ</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> ȿɫɥɢ ɞɥɹ ɫɚɣɬɚ ɢɫɩɨɥɶɡɭɟɬɫɹ ɨɞɢɧ ɮɚɣɥ ɨɩɢɫɚɧɢɹ ɫɬɢɥɟɣ, ɬɨ ɥɭɱɲɟ ɧɚɡɜɚɬɶ ɟɝɨ ɩɨ ɭɦɨɥɱɚɧɢɸ style.css ɢɥɢ default.css. Ɍɚɤɨɣ ɮɚɣɥ ɫɬɢɥɟɣ ɫɨɞɟɪɠɢɬ ɩɪɨɫɬɨɣ ɩɟɪɟɱɟɧɶ ɫɟɥɟɤɬɨɪɨɜ ɢ ɨɩɪɟɞɟɥɟɧɢɣ ɢɯ ɫɬɢɥɟɣ, 38<br /> <br /> ɡɚɩɢɫɚɧɧɵɯ ɩɨ ɩɪɚɜɢɥɚɦ ɫɢɧɬɚɤɫɢɫɚ 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} ɉɟɪɜɚɹ ɡɚɩɢɫɶ ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɲɪɢɮɬɚ ɜɫɟɝɨ ɞɨɤɭɦɟɧɬɚ. ɗɬɨɬ ɫɬɢɥɶ ɨɩɪɟɞɟɥɟɧ ɬɚɤɠɟ ɞɥɹ ɷɥɟɦɟɧɬɚ <td>. ȼɬɨɪɚɹ ɡɚɩɢɫɶ ɨɩɢɫɵɜɚɟɬ ɫɬɢɥɶ ɤɥɚɫɫɚ sample, ɤɨɬɨɪɵɣ ɞɨɥɠɟɧ ɨɬɨɛɪɚɠɚɬɶɫɹ ɦɨɧɨɲɢɪɢɧɧɵɦ ɲɪɢɮɬɨɦ ɫ ɨɬɫɬɭɩɨɦ ɜ 25 ɩɢɤɫɟɥɨɜ ɜɩɪɚɜɨ. Ⱦɚɥɟɟ ɨɩɪɟɞɟɥɟɧɨ ɢɡɦɟɧɟɧɢɟ ɰɜɟɬɚ ɞɥɹ ɡɚɝɨɥɨɜɤɨɜ ɩɟɪɜɨɝɨ ɢ ɜɬɨɪɨɝɨ ɭɪɨɜɧɟɣ ɢ ɞɥɹ ɩɪɨɫɦɨɬɪɟɧɧɵɯ ɫɫɵɥɨɤ. Ⱦɨɫɬɨɢɧɫɬɜɚ ɜɧɟɲɧɢɯ ɬɚɛɥɢɰ ɫɬɢɥɟɣ: 1) ɢɫɩɨɥɶɡɭɟɬɫɹ ɨɞɢɧ ɮɚɣɥ ɫ ɨɩɢɫɚɧɢɟɦ ɫɬɢɥɟɣ ɞɥɹ ɥɸɛɨɝɨ ɤɨɥɢɱɟɫɬɜɚ ɫɬɪɚɧɢɰ; ɜɨɡɦɨɠɧɨ ɬɚɤɠɟ ɩɪɢɦɟɧɟɧɢɟ ɷɬɨɝɨ ɮɚɣɥɚ ɧɚ ɞɪɭɝɢɯ ɫɚɣɬɚɯ; 2) ɮɚɣɥ ɫɬɢɥɟɣ ɦɨɠɧɨ ɢɡɦɟɧɹɬɶ ɛɟɡ ɦɨɞɢɮɢɤɚɰɢɢ web-ɫɬɪɚɧɢɰ; 3) ɩɪɢ ɢɡɦɟɧɟɧɢɢ ɨɩɢɫɚɧɢɹ ɫɬɢɥɹ ɜ ɨɞɧɨɦ ɦɟɫɬɟ ɫɬɢɥɶ ɚɜɬɨɦɚɬɢɱɟɫɤɢ ɩɪɢɦɟɧɹɟɬɫɹ ɤɨ ɜɫɟɦ ɷɥɟɦɟɧɬɚɦ ɧɚ ɜɫɟɯ webɫɬɪɚɧɢɰɚɯ; 4) ɮɚɣɥ ɫ ɨɩɢɫɚɧɢɟɦ ɫɬɢɥɟɣ ɩɪɢ ɩɟɪɜɨɣ ɡɚɝɪɭɡɤɟ web-ɫɚɣɬɚ ɧɚ ɥɨɤɚɥɶɧɨɦ ɤɨɦɩɶɸɬɟɪɟ ɩɨɦɟɳɚɟɬɫɹ ɜ ɤɷɲ, ɨɬɞɟɥɶɧɨ ɨɬ webɫɬɪɚɧɢɰ, ɛɥɚɝɨɞɚɪɹ ɱɟɦɭ ɡɚɝɪɭɡɤɚ ɫɬɪɚɧɢɰ ɫɚɣɬɚ ɩɪɨɢɫɯɨɞɢɬ ɛɵɫɬɪɟɟ. ɋɜɨɣɫɬɜɚ CSS ɋɜɨɣɫɬɜɚ ɲɪɢɮɬɚ ɋ ɩɨɦɨɳɶɸ CSS ɦɨɠɧɨ ɨɩɪɟɞɟɥɹɬɶ ɝɚɪɧɢɬɭɪɭ, ɪɚɡɦɟɪ, ɫɬɢɥɶ ɧɚɱɟɪɬɚɧɢɹ ɲɪɢɮɬɚ, ɪɟɝɢɫɬɪ ɲɪɢɮɬɚ ɢ ɬɨɥɳɢɧɭ. 1. ɋɩɢɫɨɤ ɝɚɪɧɢɬɭɪ ɲɪɢɮɬɚ. font-family: ɝɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ p {font-family: Arial, sans-serif} 39<br /> <br /> 2. ɇɚɱɟɪɬɚɧɢɟ ɲɪɢɮɬɚ. font-style: normal/italic/oblique p {font-style: italic} 3. Ɋɟɝɢɫɬɪ ɲɪɢɮɬɚ. font-variant: normal/small-caps p {font-variant: small-caps} Ɍɚɛɥɢɰɚ 1 ɋɜɨɣɫɬɜɚ ɲɪɢɮɬɚ CSS ɋɜɨɣɫɬɜɨ<br /> <br /> Ɂɧɚɱɟɧɢɟ<br /> <br /> Ɉɩɢɫɚɧɢɟ<br /> <br /> ɉɪɢɦɟɪ<br /> <br /> Ƚɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ Font-family<br /> <br /> Ƚɚɪɧɢɬɭɪɚ ɲɪɢɮɬɚ<br /> <br /> Ɉɩɪɟɞɟɥɹɟɬ ɫɩɢɫɨɤ ɝɚɪɧɢɬɭɪ ɲɪɢɮɬɚ ɜ ɩɨɪɹɞɤɟ ɭɦɟɧɶɲɟɧɢɹ ɩɪɢɨɪɢɬɟɬɚ<br /> <br /> P{fontfamily:Arial, sans-serif}<br /> <br /> ɇɚɱɟɪɬɚɧɢɟ ɲɪɢɮɬɚ Ɉɛɵɱɧɵɣ ɲɪɢɮɬ<br /> <br /> Normal Font-style Italic<br /> <br /> Ʉɭɪɫɢɜɧɵɣ ɲɪɢɮɬ Ʉɨɫɨɣ ɲɪɢɮɬ<br /> <br /> oblique<br /> <br /> Ɋɟɝɢɫɬɪ ɲɪɢɮɬɚ Font-variant<br /> <br /> Normal<br /> <br /> ɇɨɪɦɚɥɶɧɵɣ<br /> <br /> Small-caps<br /> <br /> Ɇɚɥɵɟ ɩɪɨɩɢɫɧɵɟ ɛɭɤɜɵ Ɍɨɥɳɢɧɚ ɲɪɢɮɬɚ<br /> <br /> Font-weight<br /> <br /> P{fontstyle:italic}<br /> <br /> Normal<br /> <br /> ɇɨɪɦɚɥɶɧɚɹ ɠɢɪɧɨɫɬɶ<br /> <br /> Lighter<br /> <br /> ɋɜɟɬɥɟɟ<br /> <br /> Bold<br /> <br /> ɉɨɥɭɠɢɪɧɵɣ<br /> <br /> Bolder<br /> <br /> ɀɢɪɧɟɟ<br /> <br /> 40<br /> <br /> P{fontvariant:smallcaps} P{fontweight:bold}<br /> <br /> 100–900<br /> <br /> 100-ɫɜɟɬɥɵɣ ɲɪɢɮɬ 400-ɧɨɪɦɚɥɶɧɵɣ ɲɪɢɮɬ 700-ɩɨɥɭɠɢɪɧɵɣ ɲɪɢɮɬ 900-ɫɚɦɵɣ ɠɢɪɧɵɣ Ɋɚɡɦɟɪ ɲɪɢɮɬɚ<br /> <br /> Font-size<br /> <br /> Normal<br /> <br /> ɇɨɪɦɚɥɶɧɵɣ ɪɚɡɦɟɪ<br /> <br /> Pt<br /> <br /> ɉɭɧɤɬɵ<br /> <br /> Px<br /> <br /> ɉɢɤɫɟɥɵ<br /> <br /> %<br /> <br /> ɉɪɨɰɟɧɬɵ<br /> <br /> P{fontsize:12pt}<br /> <br /> ɋɜɨɣɫɬɜɚ ɬɟɤɫɬɚ Ⱦɚɧɧɵɣ ɜɢɞ ɫɜɨɣɫɬɜ ɩɪɢɦɟɧɹɟɬɫɹ ɞɥɹ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɬɟɤɫɬɚ – ɜɵɪɚɜɧɢɜɚɧɢɹ, ɪɚɡɪɟɠɟɧɢɹ, ɭɫɬɚɧɨɜɤɢ ɪɟɝɢɫɬɪɚ ɬɟɤɫɬɚ, ɜɵɪɚɜɧɢɜɚɧɢɹ ɬɟɤɫɬɚ, ɪɚɫɫɬɨɹɧɢɹ ɦɟɠɞɭ ɛɭɤɜɚɦɢ ɢ ɬ. ɞ. 1. Ɇɢɧɢɦɚɥɶɧɚɹ ɜɵɫɨɬɚ ɫɬɪɨɤ. line-height: normal/1.5/120% 2. Ɉɮɨɪɦɥɟɧɢɟ ɬɟɤɫɬɚ. text-decoration: none/underline/overline/blink/line-through 3. ɂɧɬɟɪɜɚɥ ɦɟɠɞɭ ɫɬɪɨɤɚɦɢ. letter-spacing: 5px Ɍɚɛɥɢɰɚ 2 ɋɜɨɣɫɬɜɨ ɬɟɤɫɬɚ CSS ɋɜɨɣɫɬɜɨ<br /> <br /> Ɂɧɚɱɟɧɢɟ<br /> <br /> Line-height<br /> <br /> Normal (100%)<br /> <br /> Ɉɩɢɫɚɧɢɟ<br /> <br /> Ɇɢɧɢɦɚɥɶɧɚɹ ɜɵɫɨɬɚ Ɇɧɨɠɢɬɟɥɶ ɫɬɪɨɤ (ɜɵɫɨɬɚ ɫɬɪɨɤɢ – ɩɪɨɢɡɜɟɞɟɧɢɟ ɦɧɨɠɢɬɟɥɹ ɧɚ ɪɚɡɦɟɪ ɲɪɢɮɬɚ) 41<br /> <br /> ɉɪɢɦɟɪ Lineheight:normal Line-height:1.5 Lineheight:12px Line-<br /> <br /> Ɍɨɱɧɨ (ɜ ɟɞɢɧɢɰɚɯ ɞɥɢɧɵ)<br /> <br /> height:120 %<br /> <br /> % (ɨɬ ɪɚɡɦɟɪ ɲɪɢɮɬɚ) Ɉɮɨɪɦɥɟɧɢɟ ɬɟɤɫɬɚ<br /> <br /> Text-decoration<br /> <br /> Underline<br /> <br /> ɉɨɞɱɟɪɤɢɜɚɧɢɟ<br /> <br /> Overline<br /> <br /> ɑɟɪɬɚ ɧɚɞ ɬɟɤɫɬɨɦ<br /> <br /> Line-through<br /> <br /> ɉɟɪɟɱɟɪɤɢɜɚɧɢɟ<br /> <br /> blink<br /> <br /> Ɇɢɝɚɧɢɟ ɬɟɤɫɬɚ<br /> <br /> None<br /> <br /> Ɉɮɨɪɦɥɟɧɢɟ ɨɬɫɭɬɫɬɜɭɟɬ<br /> <br /> Textdecoration:none<br /> <br /> Ɋɟɝɢɫɬɪ ɬɟɤɫɬɚ<br /> <br /> Text-transform<br /> <br /> None<br /> <br /> Ɋɟɝɢɫɬɪ ɧɟ ɩɟɪɟɤɥɸɱɚɟɬɫɹ<br /> <br /> Capitalize<br /> <br /> ɇɚɱɚɥɶɧɵɟ ɛɭɤɜɵ ɫɥɨɜ ɩɪɟɨɛɪɚɡɭɸɬɫɹ ɜ ɡɚɝɥɚɜɧɵɟ<br /> <br /> uppercase<br /> <br /> ȼɫɟ ɩɪɨɩɢɫɧɵɟ<br /> <br /> Lowercase<br /> <br /> ȼɫɟ ɫɬɪɨɱɧɵɟ<br /> <br /> Texttransform:capita lize<br /> <br /> ȼɵɪɚɜɧɢɜɚɧɢɟ ɬɟɤɫɬɚ ɜ ɛɥɨɱɧɵɯ ɷɥɟɦɟɧɬɚɯ left<br /> <br /> ȼɵɪɚɜɧɢɜɚɧɢɟ ɜɥɟɜɨ<br /> <br /> Right<br /> <br /> ȼɵɪɚɜɧɢɜɚɧɢɟ ɜɩɪɚɜɨ<br /> <br /> Center<br /> <br /> ȼɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɰɟɧɬɪɭ<br /> <br /> justify<br /> <br /> ȼɵɪɚɜɧɢɜɚɧɢɟ ɩɨ ɲɢɪɢɧɟ<br /> <br /> Letter-spacing<br /> <br /> ȿɞɢɧɢɰɵ ɞɥɢɧɵ<br /> <br /> Ɋɚɫɫɬɨɹɧɢɟ ɦɟɠɞɭ ɛɭɤɜɚɦɢ<br /> <br /> Letterspacing:5px<br /> <br /> Word-spacing<br /> <br /> ȿɞɢɧɢɰɵ ɞɥɢɧɵ<br /> <br /> ɂɧɬɟɪɜɚɥ ɦɟɠɞɭ ɫɥɨɜɚɦɢ<br /> <br /> Wordspacing:5px<br /> <br /> Ɋɚɛɨɬɚ ɫ ɩɪɨɛɟɥɚɦɢ<br /> <br /> White-space:pre<br /> <br /> Text-align<br /> <br /> White-space<br /> <br /> 42<br /> <br /> Textalign:justify<br /> <br /> Normal<br /> <br /> Ʌɢɲɧɢɟ ɩɪɨɛɟɥɵ ɢɝɧɨɪɢɪɭɸɬɫɹ, ɫɬɪɨɤɢ ɩɟɪɟɧɨɫɹɬɫɹ ɚɜɬɨɦɚɬɢɱɟɫɤɢ<br /> <br /> Pre<br /> <br /> ȼɫɟ ɩɪɨɛɟɥɵ ɭɱɢɬɵɜɚɸɬɫɹ<br /> <br /> Nowrap<br /> <br /> Ɂɚɩɪɟɳɟɧ ɩɟɪɟɧɨɫ ɫɬɪɨɤ, ɥɢɲɧɢɟ ɩɪɨɛɟɥɵ ɢɝɧɨɪɢɪɭɸɬɫɹ Ɉɬɫɬɭɩ ɩɟɪɜɨɣ ɫɬɪɨɤɢ<br /> <br /> Text-indent<br /> <br /> ȿɞɢɧɢɰɵ ɞɥɢɧɵ<br /> <br /> Ɉɬɫɬɭɩ ɜ ɟɞɢɧɢɰɚɯ ɞɥɢɧɵ<br /> <br /> %<br /> <br /> ȼ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ<br /> <br /> Textindent:15px<br /> <br /> ɐɜɟɬ ɢ ɮɨɧ ɋɜɨɣɫɬɜɚ 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<br /> <br /> body { background-image: url (http://vasiapup.com/pictures/bg.gif); backgroundrepeat: repeat-y} ȼ ɷɬɨɦ ɩɪɢɦɟɪɟ ɮɨɧɨɜɵɣ ɪɢɫɭɧɨɤ ɩɨɜɬɨɪɹɟɬɫɹ ɩɨ ɜɟɪɬɢɤɚɥɢ. Ɍɚɛɥɢɰɚ 3 ɋɜɨɣɫɬɜɚ CSS ɞɥɹ ɭɩɪɚɜɥɟɧɢɹ ɰɜɟɬɨɦ ɢ ɮɨɧɨɦ ɋɜɨɣɫɬɜɨ color<br /> <br /> Backgroundcolor Backgroundimage<br /> <br /> Ɂɧɚɱɟɧɢɟ ɐɜɟɬ<br /> <br /> Ɉɩɢɫɚɧɢɟ<br /> <br /> ɉɪɢɦɟɪ<br /> <br /> ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɰɜɟɬ ɬɟɤɫɬɚ<br /> <br /> P{color:#999999}<br /> <br /> ɐɜɟɬ ɮɨɧɚ ɐɜɟɬ transparent<br /> <br /> ɋɩɥɨɲɧɨɣ ɰɜɟɬ ɉɪɨɡɪɚɱɧɵɣ ɮɨɧ Ɏɨɧɨɜɵɣ ɪɢɫɭɧɨɤ<br /> <br /> URL<br /> <br /> URL ɪɢɫɭɧɤɚ<br /> <br /> none<br /> <br /> ɇɟɬ ɪɢɫɭɧɤɚ<br /> <br /> BODY{ Background-color: #888888} BODY{Backgroundimage: url(pictures/bg.gif)}<br /> <br /> ɉɨɜɬɨɪɹɟɦɨɫɬɶ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ<br /> <br /> Backgroundrepeat<br /> <br /> Backgroundattachment<br /> <br /> Repeat<br /> <br /> ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɩɨ ɝɨɪɢɡɨɧɬɚɥɢ ɢ ɜɟɪɬɢɤɚɥɢ<br /> <br /> Repeat-x<br /> <br /> ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɬɨɥɶɤɨ ɩɨ ɝɨɪɢɡɨɧɬɚɥɢ<br /> <br /> Repeat-y<br /> <br /> ɉɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɬɨɥɶɤɨ ɩɨ ɜɟɪɬɢɤɚɥɢ<br /> <br /> No-repeat<br /> <br /> ɇɟ ɩɨɜɬɨɪɹɟɬ ɪɢɫɭɧɨɤ ɉɪɨɤɪɭɱɢɜɚɟɦɨɫɬɶ ɮɨɧɚ ɜɦɟɫɬɟ ɫ ɞɨɤɭɦɟɧɬɚɦɢ<br /> <br /> Scroll<br /> <br /> Ɏɨɧ ɩɪɨɤɪɭɱɢɜɚɟɬɫɹ<br /> <br /> fixed<br /> <br /> Ɏɨɧ ɧɟ ɩɪɨɤɪɭɱɢɜɚɟɬɫɹ 44<br /> <br /> {Background-repeat: repeat-y}<br /> <br /> BODY{ Backgroundimage: url(pictures/bg.gif) Backgroundattachment: fixed}<br /> <br /> ɉɪɨɰɟɧɬɵ ȿɞɢɧɢɰɵ ɞɥɢɧɵ Backgroundposition<br /> <br /> Top Center Bottom<br /> <br /> ɇɚɱɚɥɶɧɨɟ ɩɨɥɨɠɟɧɢɟ ɮɨɧɨɜɨɝɨ ɪɢɫɭɧɤɚ BODY{Backgroundɨɬɧɨɫɢɬɟɥɶɧɨ ɥɟɜɨɝɨ position: left top} ɜɟɪɯɧɟɝɨ ɭɝɥɚ ɛɥɨɤɚ<br /> <br /> Left Right ɋɫɵɥɤɢ CSS ɢɦɟɟɬ ɧɟɫɤɨɥɶɤɨ ɫɜɨɣɫɬɜ ɞɥɹ ɢɡɦɟɧɟɧɢɹ ɫɬɢɥɹ ɫɫɵɥɨɤ: a:link ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɧɟɩɨɫɟɳɟɧɧɨɣ ɫɫɵɥɤɢ, a:visited ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɩɨɫɟɳɟɧɧɨɣ ɫɫɵɥɤɢ, a:active ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɚɤɬɢɜɧɨɣ ɫɫɵɥɤɢ, a:hover ɨɩɪɟɞɟɥɹɟɬ ɫɬɢɥɶ ɞɥɹ ɫɫɵɥɤɢ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ. Ⱦɢɧɚɦɢɱɟɫɤɨɟ ɢɡɦɟɧɟɧɢɟ ɪɚɡɦɟɪɚ ɫɫɵɥɤɢ ȼ ɫɥɟɞɭɸɳɟɦ ɩɪɢɦɟɪɟ ɪɚɡɦɟɪ ɫɫɵɤɢ ɢɡɦɟɧɹɟɬɫɹ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ: <head> <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; } </style> </head> <body> <a href=” ” rel="nofollow">ɋɫɵɥɤɚ ɧɢɤɭɞɚ</a> </body><br /> <br /> 45<br /> <br /> ɂɡɦɟɧɟɧɢɟ ɰɜɟɬɚ ɩɨɞɱɟɪɤɢɜɚɧɢɹ ɉɪɢ ɩɨɦɨɳɢ CSS ɬɚɤɠɟ ɦɨɠɧɨ ɫɞɟɥɚɬɶ ɬɚɤ, ɱɬɨɛɵ ɰɜɟɬ ɫɫɵɥɤɢ ɩɪɢ ɧɚɜɟɞɟɧɢɢ ɧɚ ɧɟɟ ɤɭɪɫɨɪɚ ɦɵɲɢ ɨɫɬɚɜɚɥɫɹ ɧɟɢɡɦɟɧɧɵɦ, ɧɨ ɟɟ ɩɨɞɱɟɪɤɢɜɚɧɢɟ ɦɟɧɹɥɨ ɫɜɨɣ ɰɜɟɬ. <head> <style> a:link {color: blue; text-decoration: none} a:hover {color: red; text-decoration: underline} .link {color: blue} </style></head> <body> <a href=”” rel="nofollow"><span class=”link”> ɋɫɵɥɤɚ ɧɢɤɭɞɚ </span></a> </body> ɋɩɢɫɤɢ ɋ ɩɨɦɨɳɶɸ 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: <html> <head> <style type=”text/css”> li {list-style: square outside; color: purple; font-style: oblique } </style></head> 46<br /> <br /> <body> <ul>ɗɥɟɦɟɧɬ ɫɨɫɬɨɢɬ ɢɡ: <li>ɨɬɤɪɵɜɚɸɳɟɝɨ ɬɟɝɚ; <li>ɫɨɞɟɪɠɢɦɨɝɨ; <li>ɡɚɤɪɵɜɚɸɳɟɝɨ ɬɟɝɚ; </ul> </body> </html> Ɍɚɛɥɢɰɚ 4 ɋɜɨɣɫɬɜɚ ɫɩɢɫɤɨɜ CSS ɋɜɨɣɫɬɜɨ<br /> <br /> Ɂɧɚɱɟɧɢɟ<br /> <br /> List-style-type<br /> <br /> Ɉɩɢɫɚɧɢɟ<br /> <br /> ɉɪɢɦɟɪ<br /> <br /> ȼɢɞ ɦɚɪɤɟɪɚ<br /> <br /> Li {list-style: circle}<br /> <br /> Ⱦɥɹ ɧɟɧɭɦɟɪɨɜɚɧɧɨɝɨ ɫɩɢɫɤɚ Disc<br /> <br /> Ɇɚɪɤɟɪ<br /> <br /> Circle<br /> <br /> Ɉɤɪɭɠɧɨɫɬɶ<br /> <br /> Square<br /> <br /> Ʉɜɚɞɪɚɬ Ⱦɥɹ ɧɭɦɟɪɟɜɚɧɧɨɝɨ ɫɩɢɫɤɚ<br /> <br /> Decimal<br /> <br /> Ⱦɟɫɹɬɢɱɧɵɟ ɚɪɚɛɫɤɢɟ ɰɢɮɪɵ<br /> <br /> Decimalleading-zero<br /> <br /> Ⱦɟɫɹɬɢɱɧɵɟ ɰɢɮɪɵ ɫ ɞɨɛɚɜɥɟɧɢɟɦ ɧɭɥɹ ɜ ɧɚɱɚɥɟ<br /> <br /> Lower-roman<br /> <br /> Ɇɚɥɵɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ 47<br /> <br /> Upper-roman<br /> <br /> Ȼɨɥɶɲɢɟ ɥɚɬɢɧɫɤɢɟ ɛɭɤɜɵ<br /> <br /> Lower-alpha<br /> <br /> ɋɬɪɨɱɧɵɟ ɛɭɤɜɵ<br /> <br /> Upper-alpha<br /> <br /> ɉɪɨɩɢɫɧɵɟ ɛɭɤɜɵ<br /> <br /> none<br /> <br /> ɇɭɦɟɪɚɰɢɹ ɨɬɫɭɬɫɬɜɭɟɬ ɍɫɬɚɧɚɜɥɢɜɚɟɬ ɢɡɨɛɪɚɠɟɧɢɟ ɜ ɤɚɱɟɫɬɜɟ ɫɢɦɜɨɥɚ ɦɚɪɤɟɪɚ<br /> <br /> List-styleimage<br /> <br /> List-style position<br /> <br /> URL<br /> <br /> URL ɢɡɨɛɪɚɠɟɧɢɹ<br /> <br /> none<br /> <br /> ɇɟɬ ɢɡɨɛɪɚɠɟɧɢɹ<br /> <br /> Outside<br /> <br /> ɉɨɥɨɠɟɧɢɟ ɦɚɪɤɟɪɚ ɨɬɧɨɫɢɬɟɥɶɧɨ ɫɬɪɨɤ ɬɟɤɫɬɚ<br /> <br /> inside<br /> <br /> Li {list-styleimage:url(images/b ullet.gif)}<br /> <br /> Li {list-styleposition: inside}<br /> <br /> Ʉɭɪɫɨɪɵ ɋɩɨɦɨɳɶɸ ɫɬɢɥɟɣ CSS ɦɨɠɧɨ ɩɟɪɟɨɩɪɟɞɟɥɢɬɶ ɜɢɞ ɤɭɪɫɨɪɚ ɦɵɲɢ ɢ ɜɵɛɪɚɬɶ ɨɞɢɧ ɢɡ 15 ɜɨɡɦɨɠɧɵɯ ɜɚɪɢɚɧɬɨɜ: Cursor:default; Crosshair; Hand; Move; Text; Wait; Help; n-resize; ne-resize; e-resize; se-resize; s-resize; 48<br /> <br /> sw-resize; w-resize; nw-resize. ɋɢɧɬɚɤɫɢɫ ɩɟɪɟɨɩɪɟɞɟɥɟɧɢɹ ɤɭɪɫɨɪɚ ɩɪɨɫɬ. Ⱦɥɹ ɤɚɠɞɨɝɨ ɤɥɚɫɫɚ ɫɟɥɟɤɬɨɪɨɜ ɨɩɪɟɞɟɥɹɟɬɫɹ ɫɜɨɣ ɜɢɞ ɤɭɪɫɨɪɚ, ɡɚɬɟɦ ɷɬɨɬ ɤɥɚɫɫ ɞɨɛɚɜɥɹɟɬɫɹ ɧɚ ɫɬɪɚɧɢɰɭ. <html><head><style type=”text/css” > .move {cursor: move} .help {cursor: help} </style> </head> <body> <strong> <a href=” ” class=”move” rel="nofollow">ɉɟɪɟɦɟɫɬɢɬɟ ɦɟɧɹ</a> <br> <a href=” ” class=”help” rel="nofollow">FAQ</a> </b> </body> </html> Ȼɥɨɤɢ: ɝɪɚɧɢɰɵ, ɨɬɫɬɭɩɵ ɢ ɩɨɥɹ Ɍɚɛɥɢɰɚ 5 ɋɜɨɣɫɬɜɚ CSS ɞɥɹ ɮɨɪɦɚɬɢɪɨɜɚɧɢɹ ɝɪɚɧɢɰ ɢ ɩɨɥɟɣ ɋɜɨɣɫɬɜɨ<br /> <br /> Ɂɧɚɱɟɧɢɟ<br /> <br /> Ɉɩɢɫɚɧɢɟ<br /> <br /> Padding<br /> <br /> ȿɞɢɧɢɰɵ ɞɥɢɧɵ ɢɥɢ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ<br /> <br /> Ɉɬɫɬɭɩɵ ɨɬ ɝɪɚɧɢɰɵ ɷɥɟɦɟɧɬɚ ɞɨ ɟɝɨ ɫɨɞɟɪɠɢɦɨɝɨ<br /> <br /> Padding-top<br /> <br /> ɋɜɟɪɯɭ<br /> <br /> Padding-right<br /> <br /> ɋɩɪɚɜɚ<br /> <br /> Padding-bottom<br /> <br /> ɋɧɢɡɭ<br /> <br /> Padding-left<br /> <br /> ɋɥɟɜɚ 49<br /> <br /> Padding<br /> <br /> Ɉɞɢɧɚɤɨɜɵɟ ɞɥɹ ɜɫɟɯ ɫɬɨɪɨɧ<br /> <br /> Margin<br /> <br /> Ɋɚɡɦɟɪɵ ɩɨɥɟɣ<br /> <br /> Margin-top<br /> <br /> ɋɜɟɪɯɭ<br /> <br /> Margin-right Margin-bottom<br /> <br /> ȿɞɢɧɢɰɵ ɞɥɢɧɵ ɢɥɢ % ɨɬ ɲɢɪɢɧɵ ɛɥɨɤɚ<br /> <br /> ɋɩɪɚɜɚ ɋɧɢɡɭ<br /> <br /> Margin-left<br /> <br /> ɋɥɟɜɚ<br /> <br /> Margin<br /> <br /> Ɉɞɢɧɚɤɨɜɨɣ ɲɢɪɢɧɵ ɫɨ ɜɫɟɯ ɫɬɨɪɨɧ<br /> <br /> Border<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ<br /> <br /> Border-top-width<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ ɜɟɪɯɧɟɣ ɝɪɚɧɢɰɵ<br /> <br /> Border-rightwidth<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ ɩɪɚɜɨɣ ɝɪɚɧɢɰɵ<br /> <br /> Border-bottomwidth<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ ɧɢɠɧɟɣ ɝɪɚɧɢɰɵ<br /> <br /> Border-left- width<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ ɥɟɜɨɣ ɝɪɚɧɢɰɵ<br /> <br /> Border-width<br /> <br /> ɒɢɪɢɧɚ ɪɚɦɤɢ ɜɫɟɯ ɝɪɚɧɢɰ ɨɞɧɨɜɪɟɦɟɧɧɨ Thin<br /> <br /> Ɍɨɧɤɚɹ<br /> <br /> Medium<br /> <br /> ɋɪɟɞɧɟɣ ɬɨɥɳɢɧɵ<br /> <br /> Thick<br /> <br /> Ɍɨɥɫɬɚɹ<br /> <br /> ȿɞɢɢɧɰɵ ɞɥɢɧɵ Border-top- color<br /> <br /> Ɂɧɚɱɟɧɢɟ ɰɜɟɬɚ<br /> <br /> Border-rightcolor Border-bottomcolor Border-left-color Bolder-color 50<br /> <br /> ɐɜɟɬ ɪɚɦɤɢ ɞɥɹ ɝɪɚɧɢɰ<br /> <br /> transparent None Dotted Dashed Border-style<br /> <br /> Solid Double<br /> <br /> ɋɬɢɥɶ ɪɚɦɤɢ<br /> <br /> Groove Ridge Inset Outset Border-top Border-right Border-bottom Border-left Border<br /> <br /> ɒɢɪɢɧɚ, ɫɬɢɥɶ, ɰɜɟɬ<br /> <br /> Ɉɩɪɟɞɟɥɹɟɬ ɬɨɥɳɢɧɭ, ɫɬɢɥɶ ɢ ɰɜɟɬ ɤɚɠɞɨɣ ɝɪɚɧɢɰɵ<br /> <br /> ɒɢɪɢɧɚ, ɫɬɢɥɶ, ɰɜɟɬ<br /> <br /> Ɉɩɪɟɞɟɥɹɟɬ ɬɨɥɳɢɧɭ, ɫɬɢɥɶ ɢ ɰɜɟɬ ɜɫɟɣ ɪɚɦɤɢ<br /> <br /> Ɏɢɥɶɬɪɵ Ʉɚɠɞɵɣ ɬɢɩ ɮɢɥɶɬɪɚ ɩɪɟɨɛɪɚɡɭɟɬ ɨɛɴɟɤɬɵ, ɤɚɤ ɩɪɚɜɢɥɨ, ɬɟɤɫɬ ɢɥɢ ɝɪɚɮɢɤɭ, ɜ ɫɨɨɬɜɟɬɫɬɜɢɢ ɫ ɨɩɪɟɞɟɥɟɧɧɵɦ ɞɥɹ ɧɟɝɨ ɦɟɬɨɞɨɦ. ɋɢɧɬɚɤɫɢɫ ɜɢɡɭɚɥɶɧɵɯ ɮɢɥɶɬɪɨɜ: filter: ɢɦɹ_ɮɢɥɶɬɪɚ (ɩɚɪɚɦɟɬɪ1, ɩɚɪɚɦɟɬɪ2, ɩɚɪɚɦɟɬɪ3) ȿɫɥɢ ɤ ɨɛɴɟɤɬɭ ɩɪɢɦɟɧɹɟɬɫɹ ɧɟɫɤɨɥɶɤɨ ɮɢɥɶɬɪɨɜ, ɢɯ ɢɦɟɧɚ ɢ ɩɚɪɚɦɟɬɪɵ ɡɚɩɢɫɵɜɚɸɬɫɹ ɱɟɪɟɡ ɩɪɨɛɟɥ: filter: ɢɦɹ_ɮɢɥɶɬɪɚ_1 (ɩɚɪɚɦɟɬɪɵ) ɢɦɹ_ɮɢɥɶɬɪɚ_2(ɩɚɪɚɦɟɬɪɵ) Ɏɢɥɶɬɪ alpha Ɏɢɥɶɬɪ ɡɚɞɚɟɬ ɫɬɟɩɟɧɶ ɩɪɨɡɪɚɱɧɨɫɬɢ ɨɛɴɟɤɬɚ ɢ ɮɨɪɦɭ ɝɪɚɞɢɟɧɬɚ. ɋɢɧɬɚɤɫɢɫ: Filter: alpha(opacity,finishOpacity,style) ɉɚɪɚɦɟɬɪɵ ɮɢɥɶɬɪɚ: opacity – ɫɬɟɩɟɧɶ ɩɪɨɡɪɚɱɧɨɫɬɢ ɨɛɴɟɤɬɚ (ɨɬ 0 ɞɨ 100); 51<br /> <br /> 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<br /> <br /> 52<br /> <br /> ɉɟɪɟɜɨɞɢɬ ɰɜɟɬɨɜɭɸ ɝɚɦɦɭ ɪɢɫɭɧɤɚ ɜ ɲɤɚɥɭ ɫɟɪɨɝɨ ɰɜɟɬɚ. ɉɚɪɚɦɟɬɪɨɜ ɧɟ ɢɦɟɟɬ. ɋɢɧɬɚɤɫɢɫ: 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.<br /> <br /> 53<br /> <br /> ɍɱɟɛɧɨɟ ɢɡɞɚɧɢɟ<br /> <br /> ɗɫɤɚɪɟɜɫɤɚɹ Ɇɚɪɢɧɚ ȿɜɝɟɧɶɟɜɧɚ, ɒɚɲɤɢɧ Ⱥɥɟɤɫɚɧɞɪ ɂɜɚɧɨɜɢɱ, Ƚɥɭɲɚɤɨɜɚ Ɍɚɬɶɹɧɚ ɇɢɤɨɥɚɟɜɧɚ, ɓɟɬɢɧɢɧɚ Ɉɥɶɝɚ ɂɝɨɪɟɜɧɚ<br /> <br /> ɊȺȻɈɌȺ ȼ INTERNET ɂ ɋɈɁȾȺɇɂȿ WEB-ɋɌɊȺɇɂɐ ɍɱɟɛɧɨɟ ɩɨɫɨɛɢɟ ɞɥɹ ɜɭɡɨɜ<br /> <br /> Ɋɟɞɚɤɬɨɪ ȿ.ɋ. Ʉɨɬɥɹɪɨɜɚ<br /> <br /> ɉɨɞɩɢɫɚɧɨ ɜ ɩɟɱɚɬɶ 24.05.07. Ɏɨɪɦɚɬ 60×84/16. ɍɫɥ. ɩɟɱ. ɥ. 3,14. Ɍɢɪɚɠ 50 ɷɤɡ. Ɂɚɤɚɡ 967. ɂɡɞɚɬɟɥɶɫɤɨ-ɩɨɥɢɝɪɚɮɢɱɟɫɤɢɣ ɰɟɧɬɪ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ. 394000, ɝ. ȼɨɪɨɧɟɠ, ɩɥ. ɢɦ. Ʌɟɧɢɧɚ, 10. Ɍɟɥ. 208-298, 598-026 (ɮɚɤɫ) http://www.ppc.vsu.ru; e-mail: pp_center@typ.vsu.ru Ɉɬɩɟɱɚɬɚɧɨ ɜ ɬɢɩɨɝɪɚɮɢɢ ɂɡɞɚɬɟɥɶɫɤɨ-ɩɨɥɢɝɪɚɮɢɱɟɫɤɨɝɨ ɰɟɧɬɪɚ ȼɨɪɨɧɟɠɫɤɨɝɨ ɝɨɫɭɞɚɪɫɬɜɟɧɧɨɝɨ ɭɧɢɜɟɪɫɢɬɟɬɚ. 394000, ɝ. ȼɨɪɨɧɟɠ, ɭɥ. ɉɭɲɤɢɧɫɤɚɹ, 3. Ɍɟɥ. 204-133. 54<br /> <br /> </div> </div> </div> <div class="row hidden-xs"> <div class="col-md-12"> <h2></h2> <hr /> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-caching-oreilly-internet-series.html"> <img src="https://epdf.tips/img/300x300/web-caching-oreilly-internet-series_5a6a6858b7d7bc4e72d2f2b2.jpg" alt="Web Caching (O'Reilly Internet Series)" /> <h3 class="note-title">Web Caching (O'Reilly Internet Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-caching-oreilly-internet-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/enterprise-web-services-security-internet-series.html"> <img src="https://epdf.tips/img/300x300/enterprise-web-services-security-internet-series_5a3db3deb7d7bc7156001eac.jpg" alt="Enterprise Web Services Security (Internet Series)" /> <h3 class="note-title">Enterprise Web Services Security (Internet Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/enterprise-web-services-security-internet-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/reading-the-web-strategies-for-internet-inquiry.html"> <img src="https://epdf.tips/img/300x300/reading-the-web-strategies-for-internet-inquiry_5a63e1aab7d7bcea6639a093.jpg" alt="Reading the Web: Strategies for Internet Inquiry" /> <h3 class="note-title">Reading the Web: Strategies for Internet Inquiry</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/reading-the-web-strategies-for-internet-inquiry.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web.html"> <img src="https://epdf.tips/img/300x300/web_5b2bf317b7d7bcc370d6c03f.jpg" alt="Web" /> <h3 class="note-title">Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internet.html"> <img src="https://epdf.tips/img/300x300/internet_5adaaff4b7d7bc2903b6512e.jpg" alt="internet" /> <h3 class="note-title">internet</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internet.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms34c2f732b50db48a51f80b1b81d3a1b241042.html"> <img src="https://epdf.tips/img/300x300/modeling-the-internet-and-the-web-probabilistic-me_5a988c12b7d7bcb9448fbbca.jpg" alt="Modeling the Internet and the Web: Probabilistic Methods and Algorithms" /> <h3 class="note-title">Modeling the Internet and the Web: Probabilistic Methods and Algorithms</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms34c2f732b50db48a51f80b1b81d3a1b241042.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms0d9bb901918226c7a435b7a560fa553e33808.html"> <img src="https://epdf.tips/img/300x300/modeling-the-internet-and-the-web-probabilistic-me_5ab8445bb7d7bc3732d6ffb4.jpg" alt="Modeling the Internet and the Web: Probabilistic Methods and Algorithms" /> <h3 class="note-title">Modeling the Internet and the Web: Probabilistic Methods and Algorithms</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms0d9bb901918226c7a435b7a560fa553e33808.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internet-strategy-the-road-to-web-services-solutions.html"> <img src="https://epdf.tips/img/300x300/internet-strategy-the-road-to-web-services-solutio_5a6136c2b7d7bc2d30335213.jpg" alt="Internet Strategy: The Road to Web Services Solutions" /> <h3 class="note-title">Internet Strategy: The Road to Web Services Solutions</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internet-strategy-the-road-to-web-services-solutions.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/programming-web-services-with-xml-rpc-oreilly-internet-series.html"> <img src="https://epdf.tips/img/300x300/programming-web-services-with-xml-rpc-oreilly-inte_5a6136deb7d7bc2d30335215.jpg" alt="Programming Web Services with XML-RPC (O'Reilly Internet Series)" /> <h3 class="note-title">Programming Web Services with XML-RPC (O'Reilly Internet Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/programming-web-services-with-xml-rpc-oreilly-internet-series.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/semistructured-database-design-web-information-systems-engineering-and-internet-.html"> <img src="https://epdf.tips/img/300x300/semistructured-database-design-web-information-sys_5a5a9f5fb7d7bc3a1a97aa12.jpg" alt="Semistructured Database Design Web Information Systems Engineering and Internet Technologies" /> <h3 class="note-title">Semistructured Database Design Web Information Systems Engineering and Internet Technologies</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/semistructured-database-design-web-information-systems-engineering-and-internet-.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-portals-the-new-gateways-to-internet-information-and-services.html"> <img src="https://epdf.tips/img/300x300/web-portals-the-new-gateways-to-internet-informati_5a418d41b7d7bc7d5440dc3e.jpg" alt="Web Portals: The New Gateways to Internet Information and Services" /> <h3 class="note-title">Web Portals: The New Gateways to Internet Information and Services</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-portals-the-new-gateways-to-internet-information-and-services.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms.html"> <img src="https://epdf.tips/img/300x300/modeling-the-internet-and-the-web-probabilistic-me_5a67d382b7d7bccf694bac7c.jpg" alt="Modeling the Internet and the Web. Probabilistic Methods and Algorithms" /> <h3 class="note-title">Modeling the Internet and the Web. Probabilistic Methods and Algorithms</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internet-fraud-casebook-the-world-wide-web-of-deceit.html"> <img src="https://epdf.tips/img/300x300/internet-fraud-casebook-the-world-wide-web-of-dece_5a99ed12b7d7bc330804099d.jpg" alt="Internet Fraud Casebook: The World Wide Web of Deceit" /> <h3 class="note-title">Internet Fraud Casebook: The World Wide Web of Deceit</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internet-fraud-casebook-the-world-wide-web-of-deceit.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/sams-teach-yourself-internet-and-web-basics-all-in-one.html"> <img src="https://epdf.tips/img/300x300/sams-teach-yourself-internet-and-web-basics-all-in_5a4723bab7d7bcc45575a365.jpg" alt="Sams Teach Yourself Internet and Web Basics All in One" /> <h3 class="note-title">Sams Teach Yourself Internet and Web Basics All in One</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/sams-teach-yourself-internet-and-web-basics-all-in-one.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/ajax-rich-internet-applications-and-web-development-for-programmers.html"> <img src="https://epdf.tips/img/300x300/ajax-rich-internet-applications-and-web-developmen_5a46ea4bb7d7bced66f9de9a.jpg" alt="AJAX, Rich Internet Applications, and Web Development for Programmers" /> <h3 class="note-title">AJAX, Rich Internet Applications, and Web Development for Programmers</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/ajax-rich-internet-applications-and-web-development-for-programmers.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/sams-teach-yourself-internet-and-web-basics-all-in-one75706.html"> <img src="https://epdf.tips/img/300x300/sams-teach-yourself-internet-and-web-basics-all-in_5a4762f1b7d7bca7235483f4.jpg" alt="Sams Teach Yourself Internet and Web Basics All in One" /> <h3 class="note-title">Sams Teach Yourself Internet and Web Basics All in One</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/sams-teach-yourself-internet-and-web-basics-all-in-one75706.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internet-fraud-casebook-the-world-wide-web-of-deceit2802bb9cd6af93d70d622397bdc5e20c10365.html"> <img src="https://epdf.tips/img/300x300/internet-fraud-casebook-the-world-wide-web-of-dece_5a99ed37b7d7bc320817b183.jpg" alt="Internet Fraud Casebook: The World Wide Web of Deceit" /> <h3 class="note-title">Internet Fraud Casebook: The World Wide Web of Deceit</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internet-fraud-casebook-the-world-wide-web-of-deceit2802bb9cd6af93d70d622397bdc5e20c10365.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internetf94d4fdb14bf5911147624fcd2c9a8e745328.html"> <img src="https://epdf.tips/img/300x300/internet_5bec700eb7d7bcf71f8d4a8f.jpg" alt="Internet" /> <h3 class="note-title">Internet</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internetf94d4fdb14bf5911147624fcd2c9a8e745328.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/microsoft-expression-web-realisez-des-sites-internet-riches-et-ergonomiques.html"> <img src="https://epdf.tips/img/300x300/microsoft-expression-web-realisez-des-sites-intern_5a613710b7d7bc2d30335216.jpg" alt="Microsoft Expression Web : Réalisez des sites internet riches et ergonomiques" /> <h3 class="note-title">Microsoft Expression Web : Réalisez des sites internet riches et ergonomiques</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/microsoft-expression-web-realisez-des-sites-internet-riches-et-ergonomiques.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-content-delivery-web-information-systems-engineering-and-internet-technologi.html"> <img src="https://epdf.tips/img/300x300/web-content-delivery-web-information-systems-engin_5a46fd9bb7d7bcfe24b9d671.jpg" alt="Web Content Delivery (Web Information Systems Engineering and Internet Technologies Book Series)" /> <h3 class="note-title">Web Content Delivery (Web Information Systems Engineering and Internet Technologies Book Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-content-delivery-web-information-systems-engineering-and-internet-technologi.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/the-web-resource-space-model-web-information-systems-engineering-and-internet-te.html"> <img src="https://epdf.tips/img/300x300/the-web-resource-space-model-web-information-syste_5a6a57e1b7d7bc5013ce036a.jpg" alt="The Web Resource Space Model (Web Information Systems Engineering and Internet Technologies Book Series)" /> <h3 class="note-title">The Web Resource Space Model (Web Information Systems Engineering and Internet Technologies Book Series)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/the-web-resource-space-model-web-information-systems-engineering-and-internet-te.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/principles-of-internet-marketing-new-tools-and-methods-for-web-developers-web-te.html"> <img src="https://epdf.tips/img/300x300/principles-of-internet-marketing-new-tools-and-met_5a45cd9fb7d7bcef5e02397f.jpg" alt="Principles of Internet Marketing: New Tools and Methods for Web Developers (Web Technologies)" /> <h3 class="note-title">Principles of Internet Marketing: New Tools and Methods for Web Developers (Web Technologies)</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/principles-of-internet-marketing-new-tools-and-methods-for-web-developers-web-te.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/internet-world-internet-world-marz.html"> <img src="https://epdf.tips/img/300x300/internet-world-internet-world-marz_5b9900d2b7d7bcf827ac35ba.jpg" alt="internet world - internet world marz" /> <h3 class="note-title">internet world - internet world marz</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/internet-world-internet-world-marz.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-metrics.html"> <img src="https://epdf.tips/img/300x300/web-metrics_5ad2a074b7d7bc6307218708.jpg" alt="Web metrics" /> <h3 class="note-title">Web metrics</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-metrics.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/tholian-web5e1f64a47315de8a14632da482a0c04b71522.html"> <img src="https://epdf.tips/img/300x300/tholian-web_5be8d6a5b7d7bcfa1f2738a8.jpg" alt="Tholian Web" /> <h3 class="note-title">Tholian Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/tholian-web5e1f64a47315de8a14632da482a0c04b71522.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/moons-web886d14b285e0c9e3fbb6a5237a99e1ee92966.html"> <img src="https://epdf.tips/img/300x300/moons-web_5be985aeb7d7bcfa1f2751d2.jpg" alt="Moon's Web" /> <h3 class="note-title">Moon's Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/moons-web886d14b285e0c9e3fbb6a5237a99e1ee92966.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/spiral-web.html"> <img src="https://epdf.tips/img/300x300/spiral-web_5ae5f5c1b7d7bc277eaec9d5.jpg" alt="Spiral Web" /> <h3 class="note-title">Spiral Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/spiral-web.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/the-web8d7140901f4ab3f528283cd63b36ce3148964.html"> <img src="https://epdf.tips/img/300x300/the-web_5be9f816b7d7bcf41f4f797e.jpg" alt="The Web" /> <h3 class="note-title">The Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/the-web8d7140901f4ab3f528283cd63b36ce3148964.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/tangled-web.html"> <img src="https://epdf.tips/img/300x300/tangled-web_5be63109b7d7bcfa1f26e841.jpg" alt="Tangled Web" /> <h3 class="note-title">Tangled Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/tangled-web.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/tangled-webcbc86445f08234fc2fdc68aa8dd7a6c382586.html"> <img src="https://epdf.tips/img/300x300/tangled-web_5be9e471b7d7bcf41f4f74ec.jpg" alt="Tangled Web" /> <h3 class="note-title">Tangled Web</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/tangled-webcbc86445f08234fc2fdc68aa8dd7a6c382586.html">Read more</a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-xs-12"> <div class="panel-recommend panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Recommend Documents</h4> </div> <div class="panel-body"> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/web-caching-oreilly-internet-series.html"> <img src="https://epdf.tips/img/60x80/web-caching-oreilly-internet-series_5a6a6858b7d7bc4e72d2f2b2.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/web-caching-oreilly-internet-series.html"> Web Caching (O'Reilly Internet Series) </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/enterprise-web-services-security-internet-series.html"> <img src="https://epdf.tips/img/60x80/enterprise-web-services-security-internet-series_5a3db3deb7d7bc7156001eac.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/enterprise-web-services-security-internet-series.html"> Enterprise Web Services Security (Internet Series) </a> </label> <div class="note-meta"> <div class="note-desc">ENTERPRISE WEB SERVICES SECURITY LIMITED WARRANTY AND DISCLAIMER OF LIABILITY THE CD-ROM THAT ACCOMPANIES THE BOOK MA...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/reading-the-web-strategies-for-internet-inquiry.html"> <img src="https://epdf.tips/img/60x80/reading-the-web-strategies-for-internet-inquiry_5a63e1aab7d7bcea6639a093.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/reading-the-web-strategies-for-internet-inquiry.html"> Reading the Web: Strategies for Internet Inquiry </a> </label> <div class="note-meta"> <div class="note-desc">READING THE WEB Solving Problems in the Teaching of Literacy Cathy Collins Block, Series Editor Recent Volumes Teachi...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/web.html"> <img src="https://epdf.tips/img/60x80/web_5b2bf317b7d7bcc370d6c03f.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/web.html"> Web </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/internet.html"> <img src="https://epdf.tips/img/60x80/internet_5adaaff4b7d7bc2903b6512e.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/internet.html"> internet </a> </label> <div class="note-meta"> <div class="note-desc">ÖNSÖZ “De¤iflmeyen tek fley de¤iflimin kendisidir.” ‹nternet, insano¤lunun geçirdi¤i geliflim ve de¤iflimin sonucu ol...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms34c2f732b50db48a51f80b1b81d3a1b241042.html"> <img src="https://epdf.tips/img/60x80/modeling-the-internet-and-the-web-probabilistic-me_5a988c12b7d7bcb9448fbbca.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms34c2f732b50db48a51f80b1b81d3a1b241042.html"> Modeling the Internet and the Web: Probabilistic Methods and Algorithms </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms0d9bb901918226c7a435b7a560fa553e33808.html"> <img src="https://epdf.tips/img/60x80/modeling-the-internet-and-the-web-probabilistic-me_5ab8445bb7d7bc3732d6ffb4.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/modeling-the-internet-and-the-web-probabilistic-methods-and-algorithms0d9bb901918226c7a435b7a560fa553e33808.html"> Modeling the Internet and the Web: Probabilistic Methods and Algorithms </a> </label> <div class="note-meta"> <div class="note-desc">Modeling the Internet and the Web This Page Intentionally Left Blank Modeling the Internet and the Web Probabilisti...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/internet-strategy-the-road-to-web-services-solutions.html"> <img src="https://epdf.tips/img/60x80/internet-strategy-the-road-to-web-services-solutio_5a6136c2b7d7bc2d30335213.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/internet-strategy-the-road-to-web-services-solutions.html"> Internet Strategy: The Road to Web Services Solutions </a> </label> <div class="note-meta"> <div class="note-desc">i Internet Strategy: The Road to Web Services Solutions Matthew W. Guah Warwick University, UK Wendy L. Currie Warwick...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/programming-web-services-with-xml-rpc-oreilly-internet-series.html"> <img src="https://epdf.tips/img/60x80/programming-web-services-with-xml-rpc-oreilly-inte_5a6136deb7d7bc2d30335215.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/programming-web-services-with-xml-rpc-oreilly-internet-series.html"> Programming Web Services with XML-RPC (O'Reilly Internet Series) </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/semistructured-database-design-web-information-systems-engineering-and-internet-.html"> <img src="https://epdf.tips/img/60x80/semistructured-database-design-web-information-sys_5a5a9f5fb7d7bc3a1a97aa12.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/semistructured-database-design-web-information-systems-engineering-and-internet-.html"> Semistructured Database Design Web Information Systems Engineering and Internet Technologies </a> </label> <div class="note-meta"> <div class="note-desc">Semistructured Database Design Web Information Systems Engineering and Internet Technologies Book Series Series Edito...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://epdf.tips/report/-internet-web-" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "Работа в Internet и создание web-страниц: Учебное пособие"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"> Copyright © 2024 EPDF.TIPS. All rights reserved. About Us \| Privacy Policy \| Terms of Service \| Copyright \| DMCA \| Contact Us \| Cookie Policy Sign In Email Password Remember me Forgot password? Login with Facebook 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

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

Ɉ ɫɟɛɟ

Ɉɛɨ ɦɧɟ

ɂɡɨɛɪɚɠɟɧɢɹ

ɉɪɨɫɬɟɣɲɚɹ ɬɚɛɥɢɰɚ

ɉɪɨɫɬɟɣɲɚɹ ɮɨɪɦɚ