Bucklet

4. à×ñÁ ûï³áñÍÉáí Web- ¿çñÇ Ó¨³íáñáõÙÁ

4.2 à×ñÇ ë³ÑÙ³ÝáõÙÁ Ñ³ïáõÏ ³ÕÛáõë³ÏáõÙ

ÆÝãåë ¹áõù ³ñ¹Ý ÝÏ³ïÉ ù, áñáß Ñ³ïÏáõÃÛáõÝÝñ ÝáõÛÝ ïñÇ Ñ³Ù³ñ ë³ÑÙ³ÝíáõÙ Ý ÙÇ ù³ÝÇ ³Ý³Ù: ²Û¹ Ñ³ïÏáõÃÛáõÝÝñÁ Ï³ñÉÇ ¿ ë³ÑÙ³ÝÉ HTML-Ç Ûáõñ³ù³ÝãÛáõñ ïÇ Ñ³Ù³ñ Ý³Ëáñáù ¨ Ñï³ÛáõÙ ¹ñ³Ýù ÏÏÇñ³éíÝ ïÇ ÝÏ³ïÙ³Ù ³íïáÙ³ï Ïñåáí:

î³ñññÇ á×ñ

à×ñÇ ³ÕÛáõë³ÏÁ ëáíáñ³³ñ ïÕ³¹ñíáõÙ ¿ HTML ÷³ëï³ÃÕÃÇ íñÝ³ñáõÙª <HEAD> ³ÅÝáõÙ: ²ÛÝ ïÕ³¹ñíáõÙ ¿ <STYLE> ¨ </STYLE> ïñÇ ³ñ³ÝùáõÙ: à×ñÇ ³ÕÛáõë³ÏÇ ëÇÝï³ùëÇëÁ Ñï¨Û³ÉÝ ¿ª ¹áõù ñáõÙ ù HTML ï³ññÇ ³ÝáõÝÁ, áñÇ Ñ³Ù³ñ áñáßíáõÙ ¿ á×Á, ÇëÏ ¹ñ³ÝÇó Ñïá ñáõÙ ù á×Ç ë³ÑÙ³ÝÙ³Ý ÉáÏÁª íñóí³Í Ó¨³íáñ ÷³Ï³ÍñÇ Ùç: Øñ ûñÇÝ³ÏáõÙ Ï³ñÉÇ ¿ ñÉ ³Ûëåëª

<STYLE> BODY { background-color: #BABAA0; color: rgb(29,29,24); }

</STYLE>

¸ñ³ÝÇó Ñïá HTML ÷³ëï³ÃÕÃÇ ïùëïáõÙ ³í³Ï³Ý ¿ ÝßÉ <BODY> ïÁ ¨ Ýñ³ ÝÏ³ïÙ³Ù ³íïáÙ³ï ÏÏÇñ³éíÝ ïùëïÇ ¨ ýáÝÇ áõÛÝñÇ ïíÛ³ÉÝñÁ:

Øñ ûñÇÝ³ÏáõÙ ÙÝù ñÏáõ ³Ý³³Ù Ñ³í³ë³ñóÝáõÙ ¿ÇÝù íñÝ³ÇñÝñÁ ÏÝïñáÝáí: ¸ñ³ ÷áË³ñÝ á×ñÇ ³ÕÛáõë³ÏáõÙ Ï³ñÉÇ ¿ áõÕÕ³ÏÇ ñÉª

H1,H2 { text-align: center; }

¨ ¹ñ³ÝÇó Ñïá ïùëïáõÙ áõÕÕ³ÏÇ ÝßÉ <H1> ¨ <H2> ïñÁ, áñáÝó å³ñáõÝ³ÏáõÃÛáõÝÁ ³íïáÙ³ï ÏñíÇ ÏÝïñáÝ: àõß³¹ñáõÃÛáõÝ ¹³ñÓñù, áñ á×ñÇ ³ÕÛáõë³ÏáõÙ, áñåë½Ç áñáßÉ ÙÇ³Ý³ÙÇó ÙÇ ù³ÝÇ ¿ÉÙÝïÝñÇ á×Á, ÙÝù Ãí³ñÏÉ Ýù Ýñ³Ýùª ³Å³ÝÉáí ëïáñ³ÏïÝñáí:

ºÃ ÑÇßáõÙ ù <BODY> ïáõÙ ÙÝù áõÝÇÝù ¨ë ñù ³ïñÇáõïª LINK=, ALINK=, VLINK=. Ýñ³Ýó ÷áË³ñÝ Ï³ñÉÇ ¿ áñáßÉ á×ñÁ <A> ¿ÉÙ³ÝïÇ ï³ññ åëí¹á¹³ëñÇ Ñ³Ù³ñ: ¸³ ³ñíáõÙ ¿ Ñï¨Û³É Ïñåª

A:link,A:visited { color: #634438; } A:active { color: black; }

ÆÝãåë ïëÝáõÙ ù <A> ¿ÉÙÝïÇ Ñ³Ù³ñ áñáßí³Í ¿ ñù åëí¹á¹³ëª link-ÑÇåñÑÕáõÙÝñÇ Ñ³Ù³ñ, visited- ³ÛóÉí³Í ÑÇåñÑÕáõÙÝñÇ Ñ³Ù³ñ ¨ active- ³ÏïÇí ÑÕáõÙÝñÇ Ñ³Ù³ñ:

Øñ ûñÇÝ³ÏáõÙ ÙÝù ñÏáõ ³Ý³Ù áñáßÉ Ýù ÝáõÛÝ á×Á ÑáñÇ½áÝ³Ï³Ý ÍÇ Ñ³Ù³ñ: ²íÉÇ Ñßï ¿ á×ñÇ ³ÕÛáõë³ÏáõÙ ñÉª

HR { margin-top: 24px; width: 75%; }

¨ Ñïá ÷³ëï³ÃÕÃÇ ïùëïáõÙ áõÕÕ³ÏÇ ¹ÝÉ <HR> ïÁ:

¸³ëñÇ á×ñÁ

ØÝù ÝáõÛÝåë Ï³ñáÕ Ýù áõÝÝ³É ÝáõÛÝ ¿ÉÙÝïÇ ÙÇ ù³ÝÇ á×³ÛÇÝ ï³ññ³Ï: CSS-áõÙ ¹ñ³Ýù ³Ýí³ÝíáõÙ Ý ¹³ëñ: àñåë½Ç ³Û¹ ¹³ëñÁ Çñ³ñÇó ï³ññÉ, Ñ³ñÏ³íáñ ¿ ï³É CLASS= ³ïñÇáõïÁ: öáñÓÝù ³Û¹ ³ÝÉ <DIV> ¿ÉÙÝïÇ ûñÇÝ³ÏÇ íñ³: ¸³ ³ñíáõÙ ¿ Ñï¨Û³É Ïñåª

<DIV CLASS="epig">...</DIV> <DIV CLASS="pdps">...</DIV> <DIV

CLASS="ab">...</DIV>

¸³ëñÇ ³ÝáõÝÝñÁ ÁÝïíáõÙ Ý Ï³Ù³Û³Ï³Ý: à×ñÇ ³ÕÛáõëÏáõÙ ³Û¹ ¹³ëñÁ Ï³ñÉÇ ¿ áñáßÉ Ñï¨ÛÉ Ïñåª

DIV.epig { text-align: justify; font-size: smaller; width: 130; }

DIV.pdps { font-style: italic;

text-align: right; }

DIV.ab { text-align: justify;

text-indent: 2em; }

àõñÇß ¿ÉÙÝïÝñÁ (ÁÝ¹ áñáõÙª Ñ³Ù³ñÛ³ áÉáñÁ) ÝáõÛÝåë Ï³ñáÕ Ý áõÝÝ³É CLASS= ³ïñÇáõïÁ:

ºÃ Ñ³ñÏ³íáñ ¿, áñ ¹³ëÇ ë³ÑÙ³ÝáõÙÁ Ñ³ë³ÝÉÇ ÉÇÝÇ áÉáñ ¿ÉÙÝïÝñÇÝ, ³å³ ³ÛÝ Ï³ñÉÇ ¿ ë³ÑÙ³ÝÉ Ñï¨Û³É Ïñåª

pdps { font-style: italic;

text-align: right; }

²ÛëÇÝùÝ, ë³ÑÙ³ÝÉáõó ãÇ ÝßíáõÙ HTML-Ç ÏáÝÏéï ¿ÉÙÝïÇ ³ÝáõÝÁ, ³ÛÉ ÝßíáõÙ ¿ ÙÇ³ÛÝ ¹³ëÇ ³Ýí³ÝáõÙÁ, áñÁ ó³ÝÏ³ó³Í ¹åùáõÙ ëÏëíáõÙ ¿ ÏïÇó (³Ûó ¹³ ÙÇ³ÛÝ á×ñÇ ³ÕÛáõë³ÏáõÙ. ³Û¹ ¹³ëÇÝ ÷³ë³ÃÕÃÇ ïùëïáõÙ ¹ÇÙÉÇëª ÏïÁ ãÇ ¹ñíáõÙ):

Øñ ûñÇÝ³ÏáõÙ ÙÝù ¹³ëñÁ ë³ÑÙ³ÝáõÙ Ýù ÙÇ³ÛÝ <DIV> ¿ÉÙÝïÇ Ñ³Ù³ñ: ´³óÇ ¹ñ³ÝÇó, ³Û¹åÇëÇ ë³ÑÙ³ÝáõÙÁ ÝÃ³¹ñáõÙ ¿, áñ pdps ¹³ëÇ ¿ÉÙÝïÁ ÏÝñ¹ñíÇ epig ¹³ëÇ ¿ÉÙÝïÇ Ùç: Øñ pdps ë³ÑÙ³ÝáõÙÁ Ï³ñÉÇ ¿ ûï³áñÍÉ ÇÝã-áñ áõñÇß ñáõÃÛ³Ý Ñ³Ù³ñ:

HTML-Ç ¿ÉÙÝïÝñÇó ¨ ¹³ëñÇ á×³ÛÇÝ Ñ³ïÏáõÃÛáõÝÝñÇó ³óÇ, ÙÝù Ï³ñáÕ Ýù ë³ÑÙ³ÝÉ Ñ³ÏáõÃÛáõÝÝñ ³ëåë Ïáãí³Í Ç¹ÝïÇýÇÏ³ïáñÝñÇ Ñ³Ù³ñ: HTML-Ç ó³ÝÏ³ó³Í ¿ÉÙÝï Ï³ñáÕ ¿ áõÝÝ³É ID= ³ïñÇáõïÁª Ýñ³ áõÝÇÏ³É ³ÝáõÝÁ ïíÛ³É ÷³ëï³ÃÕÃáõÙ: ºÃ ÙÝù áõ½áõÙ Ýù á×ñÇ ³ÕÛáõëÏáõÙ ë³ÑÙ³ÝÉ Ñ³ïÏáõÃÛáõÝÝñ ID= ³ïñÇáõï áõÝóáÕ ï³ññÇ Ñ³Ù³ñ, ³å³ åïù ¿ ñÉª

#cool1 { color: white; background-color: black; ):

²ñï³ùÇÝ á×³ÛÇÝ ³ÕÛáõë³ÏÝñ

à×³ÛÇÝ ³ÕÛáõë³ÏÝñÇ ÙÇ ³ÛÉ ß³ï Ñ³ñÙ³ñ Ñ³ïÏáõÃÛáõÝÁ Ï³Û³ÝáõÙ ¿ Ýñ³ÝáõÙ, áñ ÙÝù Ï³ñáÕ Ýù ÇÝã-áñ ý³ÛÉáõÙ ïÝíáÕ á×³ÛÇÝ ³ÕÛáõë³ÏÇ ûÝáõÃÛ³Ù ï³É á×ñÇ ë³ÑÙ³ÝáõÙÝñÁ ÙÇ ù³ÝÇ ¿çñÇ Ñ³Ù³ñ: ¸ñ³ Ñ³Ù³ñ åïù ¿ á×ñÇ ³ÕÛáõë³ÏÁ ñÉ ³é³ÝÓÇÝ ý³ÛÉáõÙ (³é³Ýó <STYLE> ¨ </STYLE> ïñÇ) ¨ ÑÇßÉ ³ÛÝ .css ÁÝ¹É³ÛÝáõÙáí, ÇëÏ Ñïá Ï³åÉ ³ÛÝ áÉáñ ³ÛÝ HTML ÷³ëï³ÃÕÃÇ Ñï, áñáÝóáõÙ ³ÛÝ ûï³áñÍíÉáõ ¿: úñÇÝ³Ïª Ã ³ÕÛáõë³Ïáí ý³ÛÉÁ ÏáãíáõÙ ¿ mainstyle.css, ³å³ ³Û¹ ³ÕÛáõë³ÏÁ ûï³áñÍáÕ áÉáñ HTML-÷³ï³ÃÕÃñÇ <HEAD> ³ÅÝáõÙ åïù ¿ ñÉ Ñï¨Û³É ïáÕÁª

TYPE= ³ïñÇáõïÁ ÝßÉ ³ÝÑñ³Åßï ã¿:

áÛáõÃÛáõÝ áõÝÇ ³ñï³ùÇÝ ³ÕÛáõë³ÏÝñÇ ÙÇ³óÙ³Ý ÙÇ ³ÛÉ Õ³Ý³Ïª @import Ññ³Ñ³ÝÇ ûÝáõÃÛ³Ù: ¸³ ³ñíáõÙ ¿ Ñï¨Û³É Ïñåª

<STYLE TYPE="text/css"> @import url (mainstyle.css); </STYLE>

ê³Ï³ÛÝ ³Û¹ Ññ³Ñ³ÝÇ ûï³áñÍáõÙÁ Ý³ËÁÝïñÉÇ ã¿, ù³ÝÇ áñ ï³ññ ñááõ½ñÝñ Ï³ñáÕ Ý ³ÛÝ Ñ³ëÏ³Ý³É ï³ññ Ïñå: