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>
ï»·»ñÁ,
áñáÝó
å³ñáõݳÏáõÃÛáõÝÁ
³íïáÙ³ï
ϵ»ñíÇ
Ï»ÝïñáÝ:
àõß³¹ñáõÃÛáõÝ
¹³ñÓñ»ù, áñ
á×»ñÇ
³ÕÛáõë³ÏáõÙ,
áñå»ë½Ç
áñáß»É
Ùdzݷ³ÙÇó
ÙÇ ù³ÝÇ
¿É»Ù»ÝïÝ»ñÇ
á×Á, Ù»Ýù
Ãí³ñÏ»É »Ýù
Ýñ³Ýùª
µ³Å³Ý»Éáí
ëïáñ³Ï»ïÝ»ñáí:
ºÃ»
ÑÇßáõÙ »ù
<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-Ç ÏáÝÏé»ï
¿É»Ù»ÝïÇ
³ÝáõÝÁ,
³ÛÉ
ÝßíáõÙ ¿
ÙdzÛÝ ¹³ëÇ
³Ýí³ÝáõÙÁ,
áñÁ
ó³Ýϳó³Í
¹»åùáõÙ
ëÏëíáõÙ ¿
Ï»ïÇó (µ³Ûó ¹³
ÙdzÛÝ
á×»ñÇ
³ÕÛáõë³ÏáõÙ.
³Û¹ ¹³ëÇÝ
÷³ë³ÃÕÃÇ
ï»ùëïáõÙ
¹ÇÙ»ÉÇëª
Ï»ïÁ ãÇ
¹ñíáõÙ):
Ø»ñ
ûñÇݳÏáõÙ
Ù»Ýù ¹³ë»ñÁ
ë³ÑÙ³ÝáõÙ
»Ýù ÙdzÛÝ <DIV>
¿É»Ù»ÝïÇ
ѳٳñ: ´³óÇ
¹ñ³ÝÇó,
³Û¹åÇëÇ
ë³ÑÙ³ÝáõÙÁ
»Ýó¹ñáõÙ
¿, áñ pdps ¹³ëÇ
¿É»Ù»ÝïÁ
ÏÝ»ñ¹ñíÇ epig
¹³ëÇ
¿É»Ù»ÝïÇ
Ù»ç: Ø»ñ pdps
ë³ÑÙ³ÝáõÙÁ
ϳñ»ÉÇ ¿
û·ï³·áñÍ»É
ÇÝã-áñ
áõñÇß
·ñáõÃÛ³Ý
ѳٳñ:
HTML-Ç
¿É»Ù»ÝïÝ»ñÇó
¨ ¹³ë»ñÇ
á׳ÛÇÝ
ѳïÏáõÃÛáõÝÝ»ñÇó
µ³óÇ, Ù»Ýù
ϳñáÕ »Ýù
ë³ÑٳݻÉ
ѳÏáõÃÛáõÝÝ»ñ
³ëå»ë
Ïáãí³Í
ǹ»ÝïÇýÇϳïáñÝ»ñÇ
ѳٳñ: HTML-Ç
ó³Ýϳó³Í
¿É»Ù»Ýï
ϳñáÕ ¿
áõÝ»Ý³É ID=
³ïñǵáõïÁª
Ýñ³
áõÝÇϳÉ
³ÝáõÝÁ
ïíÛ³É
÷³ëï³ÃÕÃáõÙ:
ºÃ» Ù»Ýù
áõ½áõÙ »Ýù
á×»ñÇ
³ÕÛáõëÏáõÙ
ë³ÑٳݻÉ
ѳïÏáõÃÛáõÝÝ»ñ
ID= ³ïñǵáõï
áõÝ»óáÕ
ï³ññÇ
ѳٳñ, ³å³
å»ïù ¿ ·ñ»Éª
#cool1
{ color: white; background-color: black; ):
²ñï³ùÇÝ
á׳ÛÇÝ
³ÕÛáõë³ÏÝ»ñ
à׳ÛÇÝ
³ÕÛáõë³ÏÝ»ñÇ
ÙÇ ³ÛÉ ß³ï
ѳñÙ³ñ
ѳïÏáõÃÛáõÝÁ
ϳ۳ÝáõÙ ¿
Ýñ³ÝáõÙ,
áñ Ù»Ýù
ϳñáÕ »Ýù
ÇÝã-áñ
ý³ÛÉáõÙ
·ïÝíáÕ
á׳ÛÇÝ
³ÕÛáõë³ÏÇ
û·ÝáõÃÛ³Ùµ
ï³É á×»ñÇ
ë³ÑÙ³ÝáõÙÝ»ñÁ
ÙÇ ù³ÝÇ
¿ç»ñÇ
ѳٳñ: ¸ñ³
ѳٳñ å»ïù
¿ á×»ñÇ
³ÕÛáõë³ÏÁ
·ñ»É
³é³ÝÓÇÝ
ý³ÛÉáõÙ (³é³Ýó
<STYLE> ¨ </STYLE> ï»·»ñÇ)
¨ ÑÇᯐ ³ÛÝ .css
ÁݹɳÛÝáõÙáí,
ÇëÏ Ñ»ïá
ϳå»É ³ÛÝ
µáÉáñ ³ÛÝ HTML
÷³ëï³ÃÕûÇ
Ñ»ï,
áñáÝóáõÙ
³ÛÝ
û·ï³·áñÍí»Éáõ
¿: úñÇݳϪ
»Ã»
³ÕÛáõë³Ïáí
ý³ÛÉÁ
ÏáãíáõÙ ¿
mainstyle.css, ³å³ ³Û¹
³ÕÛáõë³ÏÁ
û·ï³·áñÍáÕ
µáÉáñ HTML-÷³ï³ÃÕûñÇ
<HEAD> µ³ÅÝáõÙ
å»ïù ¿ ·ñ»É
Ñ»ï¨Û³É
ïáÕÁª
<LINK
REL="Stylesheet" HREF="mainstyle.css"
TYPE="text/css">
TYPE=
³ïñǵáõïÁ
Ýß»É
³ÝÑñ³Å»ßï
ã¿:
¶áÛáõÃÛáõÝ
áõÝÇ
³ñï³ùÇÝ
³ÕÛáõë³ÏÝ»ñÇ
§Ùdzóٳݦ
ÙÇ ³ÛÉ
»Õ³Ý³Ïª @import
Ññ³Ñ³Ý·Ç
û·ÝáõÃÛ³Ùµ:
¸³ ³ñíáõÙ
¿ Ñ»ï¨Û³É
Ï»ñåª
<STYLE
TYPE="text/css"> @import url (mainstyle.css);
</STYLE>
ê³Ï³ÛÝ
³Û¹
Ññ³Ñ³Ý·Ç
û·ï³·áñÍáõÙÁ
ݳËÁÝïñ»ÉÇ
ã¿, ù³ÝÇ áñ
ï³ñµ»»ñ
µñááõ½»ñÝ»ñ
ϳñáÕ »Ý
³ÛÝ
ѳëϳݳÉ
ï³ñµ»ñ Ï»ñå:
|