» مقالات تجارت الکترونیک » مقالات هایبرد » تغییر فونت متن

تغییر فونت متن

تغییر فونت متن

14296  تعداد بازدید  |  چهارشنبه 3 تیر ماه 1394

با استفاده از دستورات و می‌توان اندازه، رنگ و فونت متن را تغییر داد. البته با استفاده از شیوه‌های نگارش می‌توان عملکرد بهتری را ارائه کرد. سه صفت مهم این دستور عبارتند از FACE، COLOR و SIZE.




با استفاده از دستورات <FONT> و </FONT> می‌توان اندازه، رنگ و فونت متن را تغییر داد. البته با استفاده از شیوه‌های نگارش می‌توان عملکرد بهتری را ارائه کرد. سه صفت مهم این دستور عبارتند از FACE، COLOR و SIZE. صفت FACE نام فونت را تعیین می‌کند. به عنوان مثال، FACE="Helvetica" فونت Helvetica را انتخاب می‌کند. صفت COLOR رنگ متنی را که با این فونت نوشته می‌شود تعیین می‌کند. به عنوان مثال، COLOR ="RED" رنگ قرمز را برای متن تعیین می‌کند. صفت SIZE اندازه فونت را تعیین می‌کند. مقدار آن می‌تواند بصورت عددی یا نسبی تعیین شود. اگر بصورت عددی تعیین شود، از 1 تا 7 است که مقدار پیش‌فرض آن 3 است. + و – اندازه فونت را نسبت به اندازه فعلی افزایش یا کاهش می‌دهند. مقدار افزایش یا کاهش در بازه 1+ تا 6+ یا 1- تا 6- است. به عنوان مثال، SIZE="6" اندازه فونت را 6 در نظر می‌گیرد. دستور زیر را ببینید:
<FONT FACE = "Arial" SIZE = "4" COLOR = "RED"> This is an example of font.
</FONT>
این دستور متن  This is an example of font. را با فونت Arial، اندازه 4 و رنگ قرمز در صفحه وب می‌نویسد.
متن فاقد فرمت
گاهی فضای خالی، tab و انتقال به سطر جدید، آنقدر مهم است که رفتار پیش‌فرض HTML نسبت به آنها، منجر به بی‌نظمی در متن می‌شود. به عنوان مثال، اگر هنگام تایپ متنی، بین کلمات بیش از یک فاصله وجود داشته باشد، مرورگرها تمام آن فاصله‌ها را به یک فاصله تبدیل می‌کنند. در واقع، ممکن است عملاً به آن چند فضای خالی نیاز باشد. فرض کنید کد منبع برنامه یا اشعاری باید در صفحات وب قرار گیرند. در این موارد، فضای خالی، انتقال به سطر جدید و tab باید دقیقاً به همان شکلی که در این مستندات وجود دارند، مورد استفاده قرار گیرند تا معنای آنها حفظ شود. برای این منظور از دستورات <PRE> و </PRE> استفاده می‌شود. متنی که در بین <PRE> و </PRE> قرار می‌گیرد، فضای خالی، انتقال به سطر جدید و tab را حفظ می‌کنند. اگر طول متن از عرض صفحه مرورگر بیشتر باشد، نیاز به جابجایی سطر است. معمولاً مرورگرها این نوع متنها را با فونتهای خاصی مثل کوریر نمایش می‌دهند. فونتهایی مثل سیاه‌بودن حروف، ایتالیک یا پیوندها نیز می‌توانند در <PRE> مورد استفاده قرار گیرند.
مثال 3-3
استفاده از دستور <PRE> برای تنظیم متنها در صفحات وب.
در این مثال، متن چشمک‌زن، متن متحرک، و حروف با فونتهای مختلف مورد استفاده قرار گرفته‌اند. نتیجه اجرای این دستورات در شکل 4-3 آمده است.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> PER Example </TITLE>
</HEAD>
<BODY>
<PRE> <H4>
This is  P   R   E   F   O   R   M   A   T   T   E   D
     T
         E
               X   
                     T.
SPACE                 are ok! So are
             RETURNS!
</PRE>
<P>
This is NOT  P   R   E   F   O   R   M   A   T   T   E   D
     T
         E
               X   
                     T.
SPACE                 AND
RETURNS are lost.
</P>
<B> This text is bold. </B> <I> This text is Italic. </I><BR>
<BLINK> This text is blinking text. </BLINK>
<MARQUEE BEHAVIOR = "SCROLL" BGCOLOR = "BLUE">
<FONT FACE = "Helvetica" SIZE = "3"> This text is marquee. </FONT>
</MARQUEE> <PRE> This is a simple sample.
You can put in lots of text if you want to.
In fact, you could keep on typing and
Make up more sentences and continue on and on. <H4> </PRE>
</BODY>
</HTML>







ایجاد پیوند در HTML
با مفهوم پیوندها در فصلهای گذشته آشنا شدید. اصولاً پیوندها موضوعات مهمی در طراحی صفحات وب هستند که شیوه ایجاد آنها را مطرح خواهیم کرد. شکل 5-3 نمونه‌ای از پیوندها را نشان می‌دهد. پیوندها معمولاً متمایز از سایر متنهای موجود در صفحه وب هستند و گاهی نیز زیر آنها خط کشیده شده است.
توجه به این نکته مهم است که پیوندها به مقصدهایی مراجعه می‌کنند که ممکن است در همان کامپیوتر یا در کامپیوتری موجود باشد که کیلومترها با آن کامپیوتر فاصله دارد. کامپیوتر راه دور باید به اینترنت متصل باشد. برای ایجاد پیوند در HTML از دستورات <A> و </A> استفاده می‌شود. هر آنچه که بین این دو دستور قرار می‌گیرد به عنوان یک پیوند تلقی می‌شود. اما برای تعیین مقصد از صفت HREF این دستور استفاده می‌شود. بدین ترتیب، نحوه کاربرد آن بصورت زیر خواهد بود:
<A HREF = "URL"> sample link </A>
"URL" می‌تواند آدرس یک وب‌سایت باشد که در کامپیوتر دیگری قرار دارد و یا می‌تواند نام فایلی باشد که در همان کامپیوتر واقع است. دستورات زیر را ببینید:
<A HREF = "http://www.gooya.com/"> External link </A>
<A HREF = "c:\home.htm"> Internal link. </A>
دستور اول به یک وب‌سایت با آدرس www.gooya.com مراجعه می‌کند که نام این پیوند External link است. یعنی در صفحه وب چنانچه بر روی متن External link کلیک شود به آن سایت مراجعه خواهد شد. دستور دوم متن Internal link را به عنوان پیوند انتخاب می‌کند که مقصد آن فایل c:\home.htm است.
با استفاده از این دستور می‌توان با بخشی از صفحه وب پیوند برقرار کرد. یعنی به نقطه خاصی از صفحه وب مراجعه کرد. برای این منظور باید برای آن بخش از صفحه وب نامی را انتخاب کنید. این نام توسط NAME از دستور <A> تعیین می‌شود. نام متشکل از حروف است که باید منحصربفرد باشد. پس از اینکه نامی برای بخشی از صفحه انتخاب شد، برای مراجعه به آن بخش، باید حرف # را در جلوی نام آن بخش قرار دهید. دستورات زیر را ببینید:
<A NAME = "jump"> jump target </A>
<H5> jump </H5>
       -->متن مربوط به<!—jump    
<A HREF = "#jump"> local jump within document </A>
<A HREF = "http://www.company.com/document#jump"> Remote jump within document </A>
<A HREF = "first.htm#jump"> another file </A>
دستور اول برای بخشی از صفحه نام jump را انتخاب می‌کند، دستور دوم عنوان jump را می‌نویسد و دستور سوم یک توضیحات است که می‌گوید متن مربوط به jump نوشته شود. دستور چهارم می‌گوید که متن local jump within document به عنوان پیوند تلقی شود که هرگاه بر روی آن کلیک شود، به بخشی از صفحه با نام jump منتقل شود. یعنی وقتی مرورگر به علامت # برخورد می‌کند، به دنبال بخشی می‌گردد که با آن مشخص شده است و سپس کاربر را به آنجا می‌برد.
دستور پنجم مشخص می‌کند که بخش نامگذاری شده می‌تواند در یک کارگزار وب دیگری باشد. دستور ششم مشخص می‌کند که بخش نامگذاری شده ممکن است در فایل دیگری بر روی همان کامپیوتر موجود باشد، بطوری که با کلیک کردن بر روی پیوند another file کاربر به بخشی از صفحه منتقل می‌گردد که در فایل first.htm قرار دارد. پس از مطالعه بخش بعدی، مثالی در این خصوص ارائه خواهد شد.