Bucklet

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

4.1 Ò¨í³íáñáõÙ STYLE ³ïñÇáõïÇ ûÝáõÃÛ³Ù

HTML 4-áõÙ ¿çñÇÇ Ó¨³íáñÙ³Ý Ñ³Ù³ñ Ý³Ë³ïëí³Í ¿ ÙÇ Ýáñ Ñ½áñ ÙÇçáóª CSS (á×ñÇ Ï³ëÏ³¹³ÛÇÝ ³ÕÛáõë³ÏÝñ), áñÁ ÷áË³ñÇÝáõÙ ¿ Ó¨³íáñÙ³ÝÁ íñ³ñáÕ Ñ³Ù³ñÛ³ áÉáñ ïñÁ:

CSS-Á Ï³ñÉÇ ¿ ûï³áñÍÉ åñÇÙÇïÇí Ïñåª ÝñÙáõÍÉáí HTML Ïá¹Ç Ùç STYLE= ³ïñÇáõïÁ, Çñ Ñ³Ù³å³ï³ëË³Ý ³ñÅùÝñáí: ²ÛÝ Ï³ñÉÇ ûï³áñÍÉ ñÃ áÉáñ ïñÇ Ñï: ¸Çï³ñÏÝù STYLE= ³ïñÇáõïÁª ûï³áñÍÉáí äáÕáë äáÕáëÛ³ÝÇ Web-¿çÇ ûñÇÝ³ÏÁ:

<H1 ALIGN="center">äáÕáë äáÕáëÛ³ÝÇ Web-¿çÁ</H1> -Ç

÷áË³ñÝ Ï³ñÉÇ ¿ ñÉ

<H1 STYLE="text-align: center"> äáÕáë äáÕáëÛ³ÝÇ Web-¿çÁ </H1>

ØÛáõë ÉáÏáõÙ ÙÝù ûï³áñÍÉ ¿ÇÝù <FONT> ïÁª

<FONT SIZE="+1"><B>äáÕáë äáÕáëÛ³ÝÁ </B> ëáíáñáõÙ ¿ ï³ëñáñ¹ ¹³ë³ñ³ÝáõÙ<BR>

êÇñáõÙ ¿ ÏáÙåÛáõïñ³ÛÇÝ Ë³Õáñ ¨ ýáõïáÉ<BR><BR>

äáÕáëÁ áõÝÇ ß³ï ÁÝÏñÝñ<BR>

¸áõù Ï³ñáÕ ù Ï³ñ¹³É, Ã ÇÝã å³ï³Ñó ÙÇ ³Ý³Ù Ýñ³Ýó Ñï

<BR> 

</FONT>

²ÛëïÕ <FONT> ïÇ ÷áË³ñÝ ÙÝù ÝáõÛÝåë Ï³ñáÕ Ýù ûï³áñÍÉ STYLE= ³ïñÇáõïÁª ÏåóÝÉáí ³ÛÝ <DIV> ïÇÝª

ÆÝãåë ïëÝáõÙ ù font-size: Ñ³ïÏáõÃÛ³Ý ³ñÅùÁ ï³ññíáõÙ ¿ <FONT> ïÇ SIZE= ³ïñÇáõïÇ ³ñÅùÇó: àñåë½Ç Ñ³ñ³ñ³Ï³Ý ÙÍ³óÝÉ ßñÇýïÇ ã³÷ëÁ ûï³áñÍáõÙ Ý larger ³ñÅùÁ, ÇëÏ ÷áùñ³óÝÉáõ Ñ³Ù³ñª smaller ³ñÅùÁ: ´³óÇ ¹ñ³ÝÇó Ï³ñÉÇ ¿ ï³É ßÇýïÇ ã³÷ëÇ ÷á÷áËáõÃÛáõÝÁ ïáÏáëÝñáíª font-size: 120%, Ï³Ù ¿É ï³É ßñÇýïÇ ³ó³ñÓ³Ï ã³÷ëÁª xx-small, x-small, small, medium, large, x-large ¨ xx-large, Ï³ñÉÇ ¿ Ý³¨ ÝßÉ ßñÇýïÇ ã³÷ëÁ åÇùëÉÝñáíª font-size: 18px;, Ï³Ù áõñÇß ÙÇ³íáñÝñáí:

´³óÇ <FONT>-Çó ³Ûë ÉáÏáõÙ ÙÝù ûï³áñÍÉ Ýù Ý³¨ <B> ïÁ. CSS-áõ Ýñ³Ý Ñ³Ù³å³ï³ëË³ÝáõÙ ¿ font-weight: bold; Ñ³ïÏáõÃÛáõÝÁ: ê³Ï³ÛÝ

<B>äáÕáë äáÕáëÛ³Ý</B>

ÙÝù ãÝù Ï³ñáÕ ñÉª

<DIV STYLE="font-weight: bold;">äáÕáë äáÕáÛ³Ý</DIV>,

ù³ÝÇ áñ ³Û¹ ¹åùáõÙ ³Ûë ñáõÃÛ³ÝÁ Ñ³çáñ¹áÕ ïùïÁ ÏñíÇ Ýáñ ïáÕÇó: ¸ñ³ Ñ³Ù³ñ <DIV> ïÇ ÷áË³ñÝ ÙÝù Ïûï³áñÍÝù <SPAN> ïÁª

<SPAN STYLE="font-weight: bold;"> äáÕáë äáÕáëÛ³Ý </SPAN>

²Ûë ïÁ ³é³Ýó ³ïñÇ¹áõïÝñÇ ûï³áñÍÉÁ ³ÝÇÙ³ëï ¿, ù³ÝÇ áñ ¹³ áã ÙÇ ¿ýÏï ãÇ ï³ÉÇë: ²ÙÝÇó Ñ³×³Ë ³ÛÝ ûï³áñÍíáõÙ ¿ ÑÝó STYLE=, Ï³Ù ¿É CLASS=, ID= ¨ LANG= ³ïñÇáõïÝñáí: font-weight Ñ³ïÏáõÃÛáõÝÁ (ßñÇýïÇ Ã³íáõÃÛáõÝÁ) Ï³ñáÕ ¿ ÁÝ¹áõÝÉ áã ÙÇ³ÛÝ bold ¨ normal ³ñÅùÝñÁ: Üñ³Ý Ï³ñÉÇ ¿ íñ³ñÉ ó³ÝÏ³ó³Í Ãí³ÛÇÝ ³ñÅù 100-Çó 900, ÁÝ¹ áñáõÙ 400-Á ¹³ ÝáõÛÝÝ ¿, ÇÝã normal, ÇëÏ 700ª bold: Î³ñÉÇ ¿ Ý³¨ ûï³áñÍÉ bolder ¨ lighter Ñ³ñ³ñ³Ï³Ý ³ñÅùÝñÁ:

²Ûë ïùëï³ÛÇÝ ÉáÏÇó Ñïá Ùñ ¿çáõÙ Íí³Í ¿ñ ÑáñÇ½áÝ³Ï³Ý ÇÍª <HR> WIDTH= ³ïñÇáïáí, áñÇ ÷áË³ñÝ ûï³áñÍíáõÙ ¿ width á×³ÛÇÝ Ñ³ïÏáõÃÛáõÝÝÁª

ºÃ ÑÇßáõÙ ù, ïùëïÇ ¨ ÍÇ ÙÇç¨ ¹³ï³ñÏ ïáÕ ÃáÕÝÉáõ Ñ³Ù³ñ ÙÝù ûï³áñÍóÇÝù <BR>  : CSS-áõÙ áÛáõÃÛáõÝ áõÝÇ margin Ñ³ïÏáõÃÛáõÝÁ, áñÇ ûÝáõÃÛ³Ù Ï³ñÉÇ ¿ ï³É ³ó³Ï ¿ÉÙÝïÇ áÉáñ ÏáÕÙñÇó, ³óÇ ¹ñ³ÝÇó Ï³ñÉÇ ¿ ûï³áñÍÉª margin-top, margin-bottom, margin-left, margin-right Ûáõñ³ù³ÝãÛáõñ áõÕÕáõÃÛ³Ý Ñ³Ù³ñ: ø³ÝÇ áñ ÙÝù áõ½áõÙ ¿ÇÝù Ñé³óÝÉ ÇÍÁ ïùëïÇó Ùáï³íáñ³åë ÙÏ ïáÕÇ ã³÷ëáí, ³å³ ñÝùª

margin - top Ñ³ïÏáõÃÛ³Ù áñáßí³Í ³ó³ÏÁ Ï³½ÙáõÙ ¿ 24 åÇùëÉ:

ä³ïÙí³ÍùÇ íñÝ³ÇñÁ ñÝù ÏÝïñáÝ, Ù½ ³ñ¹Ý Í³ÝáÃ text-align Ñ³ïÏáõÃÛ³Ý ûÝáõÃÛ³Ù:

ØÝù ÝáõÛåë áõÝÝù ÝÃ³íñÝ³Çñ, áñÁ ñí³Í ¿ ÏáõñëÇíáí: <I> ïÁ ÷áË³ñÇÝÝù font-style: italic; á×³ÛÇÝ Ñ³ïÏáõÃÛáõÝáí ûï³áñÍÉáí <SPAN> ïÁª

´³óÇ normal (ëáíáñ³Ï³Ý) ¨ italic (ÏáõñëÇí) ³ñÅùÝñÇó ³Ûë Ñ³ïÏáõÃÛáõÝÁ Ï³ñáÕ ¿ ÁÝ¹áõÝÉ oblique (Ãù ßñÇýï) ³ñÅùÁ: Âù ßñÇýïÇ ¨ ÏáõñëÇíÇ ï³ññáõÃÛáõÝÁ Ï³Û³ÝáõÙ ¿ Ýñ³ÝáõÙ, áñ ÏáõñëÇíÇ ï³éñÁ áõÝÝ ³ÛÉ ñÉ³Ó¨:

à×³ÛÇÝ ¹Çñù³¹ñáõÙ

²ÛÅÙ ³ÝóÝÝù ³Ùë³ÃíÇÝª

<P ALIGN="right" FONT SIZE="-1">20 ²åñÇÉÇ <BR>

</FONT></P>

ALIGN= ³ïñÇáõïÇ ¨ <FONT> ¨ <I> ïñÇ ÷áË³ñÝ ÏÇñ³éÝù ³ñ¹Ý Í³ÝáÃª

<P STYLE="text-align: right; font-size: smaller; ">20 ²åñÇÉÇ <BR>

Øñ ¹åùáõÙ ¹³ ÃáõÛÉ³ïñÉÇ ¿, ù³ÝÇ áñ ñáõÃÛáõÝÁ Ï³ñ× ¿, ³Ûó Ã ³ÛÝ ÉÇÝñ ñÏ³ñ, ûñÇÝ³Ï ¹³ ÉÇÝñ áã Ã ³Ùë³ÃÇí, ³ÛÉ ÇÝã-áñ Ýñ³Í³Ï³Ý ñáõÃÛáõÝª

²Ûë ³ÙÝÁ ïÕÇ ¿ñ áõÝóÉ ²åñÇÉÇ 20-ÇÝ, ñ ÙÇÝã¨ ùÝÝáõÃÛáõÝÝñÁ ÙÝ³óÉ ¿ñ ÁÝ¹Ñ³ÙÝÁ ÙÏ ß³³Ã ¨ áÉáñ áõëáõóÇãÝñÁ ¨ ïÝûñÝÁ ÙÝáõÙ ¿ÇÝ ¹åñáóáõÙ ÙÇÝã¨ áõß ñÏá

<BR>

<SPAN STYLE="font-style: italic; "> å³ïÙí³ÍùÁ ß³ñ³¹ñí³Í ¿ äïñáëÇ ÏáÕÙÇó </SPAN></P>

²ñ¹ÛáõÝùÁ óáõÛó ¿ ïñí³Í Ý³ÏñáõÙ: ê³Ï³ÛÝ Ù½ åïù ¿, áñ ñáõÃÛáõÝÁ ÙÝ³ ¿Ïñ³ÝÇ ³ç Ù³ëáõÙ: ÐÝ³ñ³íáñ ¿ ÇÑ³ñÏ HTML-Ç ïñÁ ûï³áñÍÉáí ïÕ³¹ñÉ ³Û¹ ïùëï ³ÕÛáõë³ÏáõÙ, Ï³Ù ¿É ³Å³ÝÉ ïáÕñÇ <BR> ïÇ ûÝáõÃÛ³Ù, ³Ûó ¹³ ÏñÇ ï³ññ ³ñ¹ÛáõÝùÝñÇ ï³ññ É³ÛÝáõÃÛ³Ý å³ïáõÑ³ÝÝñáõÙ: CSS-Á ûï³áñÍÉáí, Ï³ñÉÇ ¿ ÏÇñ³éÉ ÉáÏÇ ³ÛÝåÇëÇ Ñ³ïÏáõÃÛáõÝÝñ, ÇÝãåÇëÇÝÝ Ý width ¨ height (É³ÛÝáõÃÛáõÝ ¨ ³ñÓñáõÃÛáõÝ)ª

<BR>

<SPAN STYLE="font-style: italic;">(å³ïÙí³ÍùÁ ß³ñ³¹ñí³Í ¿ äïñáëÇ ÏáÕÙÇó) </SPAN>

</DIV>

</FONT>

ÆÝãåë ïëÝáõÙ ù, ÉáÏÇ ÝñëáõÙ ïùëïÁ Ñ³í³ë³ñóí³Í ¿ ñÏáõ ÏáÕÙÇó, ÇëÏ ³ÙáÕç ÉáÏÁ ³ñ¹Ý ñí³Í ¿ ¿çÇ ³ç ÏáÕÙÁ:

¸Çï³ñÏÝù ÙÇ ³ÛÉ Ñ³ïÏáõÃÛáõÝª position, ³ÛÝ áñáßáõÙ ¿ ¹Çñù³¹ñÙ³Ý ïÇåÁª ³ó³ñÓ³Ï Ï³Ý Ñ³ñ³ñ³Ï³Ý: ºÃ ûï³áñÍíáõÙ ¿ Ñ³ñ³ñ³Ï³Ý ¹Çñù³¹ñáõÙÁ (relative), ³å³ ¹ÇñùÁ ïñíáõÙ ¿ ³ÛÝ ¹ÇñùÇ ÝÏ³ïÙ³Ù, áñÁ Ï½³ÕóÝñ ¿ÉÙ³ÝïÁ, Ã áã ÙÇ ³íÉáñ¹ óáõóáõÙ ãÉÇÝñ: ´³ó³ñÓ³Ï (absolute) ¹Çñù³¹ñáõÙÁ Ýß³Ý³ÏáõÙ ¿, áñ ¹ÇñùÁ ïñíáõÙ ¿ ñááõ½ñÇ å³ïáõÑ³ÝÇ íñÇÝ Ó³Ë ³ÝÏÛ³Ý ÝÏ³ïÙ³Ù³: ´³óÇ ¹ñ³ÝÇó áÛáõÃÛáõÝ áõÝÝ static ¨ fixed ³ñÅùÝñÁ: static-Á Ýß³Ý³ÏáõÙ ¿ áñ ¿ÉÙÝïÁ ãÇ ¹Çñù³¹ñíáõÙ, ÇëÏ fixedª áñ ¿ÉÙÝïÁ ÙÝáõÙ ¿ ³Û¹ ¹ÇñùáõÙ ¨ ãÇ ïÕ³÷áËíáõÙ ¿çÇ ³ÙáÕç å³ñáõÝ³ÏáõÃÛ³Ý Ñï:

position Ñ³ïÏáõÛ³Ý Ñï ß³ï ëñï Ï³åí³Í Ý Ý³¨ top ¨ left Ñ³ïÏáõÃÛáõÝÝñÁ, áñáÝù áñáßáõÙ Ý ¿ÉÙÝïÇ ßÕáõÙÁ å³ïáõÑ³ÝÇ íñÇÝ Ó³Ë ³ÝÏÛáõÝÇóª ÇÝãù³Ý ÙÍ ÉÇÝÇ top Ñ³ïÏáõÃÛ³Ý ³ñÅùÁ, ³Û¹ù³Ý Ýñù¨ ÏïÝíÇ ¿ÉÙÝïÁ: úñÇÝ³Ïª top: -18px; Ýß³Ý³ÏáõÙ ¿ áñ ¿ÉÙÝïÁ ßÕí³Í ¿ íñÇÝ Ó³Ë ³ÝÏÛ³Ý ÝÏ³ïÙ³Ù 18 åÇùëÉáí ¹åÇ Ýñù¨:

ä³ññáõÃÛ³Ý ³ó³Ï

ä³ññáõÃÛ³Ý ³ó³ÏÁ ëï³Ý³Éáõ Ñ³Ù³ñ ÙÝù ûï³áñÍÉ Ýù ÙÇ ù³ÝÇ ³Ý³Ýç³ï ³ó³ÏÝñ (  ). CSS-Ç text-indent Ñ³ïÏáõÃÛ³Ý ûÝáõÃÛ³Ù Ï³ñÉÇ ¿ ë³ÑÙ³ÝÉ å³ññáõÃÛ³Ý ³ó³Ï ó³Ý³Ï³ó³Í ÙÇ³íáñÝñáõÙ: ê³Ï³ÛÝ ³Û¹ ¹åùáõÙ ÑÝ³ñ³íáñ ãÇ ÉÇÝÉáõ å³ññáõÃÛáõÝÝñÁ ³Å³ÝÉ <BR> ïÇ ûÝáõÃÛ³Ù ù³ÝÇ áñ ³ÛÝ ãÇ Ñ³ëÏ³Ý³ ³ó³ÏÁ: ä³ññáõÃÛáõÝÝñÁ Ï³ñÉÇ ¿ ³Å³ÝÉ <P> ïÇ ûÝáõÃÛ³Ù, ë³Ï³ÛÝ áñåë½Ç Ëáõë³÷Ýù ïáÕÇ ³ó ÃáÕáõÙÇó ÙÝù Ïûï³áñÍÝù <DIV> ïÁª

²ÛëïÕ ÙÝù ³ó³ÏÁ ë³ÑÙ³ÝÉ Ýù ïíÛ³É ßñÇýïÇ 2 ³ÙÝ³É³ÛÝ ëÇÙíáÉÝñÇÝ Ñ³í³ë³ñ:

ä³ïÙí³ÍùÇó Ñïá ÝáñÇó Íí³Í ¿ ÑáñÇ½áÝ³Ï³Ý ÇÍ:

îëÝÝù Ã ÇÝã ¿ ëï³óíáõÙª

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> äáÕáë äáÕáëÛ³ÝÇ Web ¿çÁ.</TITLE>

</HEAD>

<BODY STYLE="background-color: #BABAAO; color: rgb (29,29,24);"

LINK="#634438" VLINK="#634438" ALINK="Black" >

<H1 STYLE="text-align: center;"> äáÕáë äáÕáëÛ³ÝÇ Web ¿çÁ </H1>

<A HREF="#skazka"> «Îáïñí³Í å³ïáõÑ³ÝÁ «å³ïÙí³Íù </A> 

</DIV>

<BR>

<SPAN STYLE="font-weight: bold;,> äáÕáë äáÕáëÛ³ÝÁ </SPAN> ëáíáñáõÙ ¿ ï³ëñáñ¹ ¹³ë³ñ³ÝáõÙ<BR>

êÇñáõÙ ¿ ÏáÙåÛáõïñ³ÛÇÝ Ë³Õñ ¨ ýáõïÁé.<BR><BR>

äáÕáëÁ áõÝÇ ß³ï ÁÝÏñÝñ <BR>

¸áõù Ï³ñáÕ ù Ï³ñ¹³É, Ã ÇÝã å³ï³Ñó ÙÇ ³Ý³Ù Ýñ³Ýó Ñï </DIV>

<H2 STYLE="text-align: center;"> <A NAME="patmvacq"> Îáïñí³Í å³ïáõÑ³ÝÁ </A><HR>

<SPAN STYLE="font-style: italic; "> å³ïÙí³Íù </SPAN></H2> <DIV

STYLE"text-align: right;">

20 ²åñÇÉÇ

</DIV> </DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2em;"> ØÇ ³Ý³Ù äáÕáëÁ Çñ ÁÝÏñÝñÇ Ñï ýáõïáÉ ¿ÇÝ Ë³ÕáõÙ ¹åñáóÇ ³ÏáõÙ..(å³ïÙí³ÍùÁ ß³ñáõÝ³ÏíáõÙ ¿)..¨ ³ÙÝ ÇÝã É³í íñç³ó³í </DIV>

</FONT>

</BODY>

</HTML>