آموزش HTML : رسم خط افقی، تعیین نوع حروف متن، متن متحرک

بیشتر بدانید:

آموزش HTML: تعیین عناوین و پاراگراف متن

آموزش HTML: صفات عمومی دستورات

مقدمات اجرای دستورات و برنامه HTML

سلام  خدمت همراهان عزیز  یکشنبه ها با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .

رویداد ها

یکی از ویژگی های HTML جدید این است که می توان اسکریپت ها را به  فایل HTML  اضافه کرد .

تقریبا هر دستور HTML دارای رویداد هایی است . برای ایجاد وب پویا ، استفاده ازاین .رویداد الزامی است . اغلب این رویداد ها به عملکرد کاربر مربوط  می شوند . به عنوان مثال ، وقتی کاربر شیئی را کلیک می کند. به صفت رویداد (Onclick) مربوط می شود . بنابراین ، دستور زیر ، یک اسکریپت کوچک را به رویداد پاراگراف نسبت می دهد . که وقتی کاربر پاراگراف را کلیک کرد این رویداد اتفاق می افتد .

البته دقت داشته باشید که همه رویداد ها توسط  تمام مرورگرها پشتیبانی نمی شوند . رویدادها در اسکریپتها استفاده می شوند.

<P onclicK=”alert (‘Hi’)”> Press this paragraph. </P>

رسم خط افقی

برای رسم خط افقی در صفحه از دستور<HR> استفاده می شود . دستور <HR> خطی افقی را در موقعیت جاری صفحه  وب ترسیم می کند. دستور HR دارای صفحات ALIGN ، CLASS  ، STYLE  ، TITLE  ،NOSHADE ، COLOR و  WIDTH است. صفت SIZE ارتقاع خط افقی را برحسب پیکسل تعیین می کند . و صفت WIDTH پهنای خط را به صورت در صد یا پیکسل مشخص می کند .

COLOR رنگ خط را مشخص می کند که ممکن است با نام رنگ یا با فرمت مبنای 16 مشخص شود. صفت NOSHADE موجب می شود که خط افقی فاقد سایه باشد. دستورات زیر را ببینید:

 

<“HR ALIGN= “LEFT”NOSHADE SIZE = “1”WIDTH=”420> <“HR ALGN= “CENTER”WIDTH= “100%”SIZE =”3″COLOR= “#000000>

دستور اول خطی رسم می کند که از سمت چپ سطر تنظیم می شود ، سایه دار نیست ، ارتفاع آن یک اینچ و پهنای آن 420 اینچ است. دستور دوم خطی در وسط سطر ، با پهنای 100 در صد ، ارتفاع 3 اینچ و با رنگ “#000000” رسم می کند.

مثال

تهیه عنوان ، ترسیم خط افقی و پاراگراف بندی در طراحی صفحه . برای انجام این مثال ، مراحل زیر را انجام دهید:

1. در محیط ویندوز ، ویراستار Notepad را اجرا کنید.

2. این دستورات زیر را در آن تایپ کرده ، در فایل 32.htm  ذخیره نمایید.

3. از Notepad خارج شوید.

4 فایل 3-2.htm را به یک مرورگر مثل Internet Explorer  وارد کنید . اکنون صفحه  وب شما مانند ظاهر می شود.

دقت کنید که من همین مراحل را در کامپیوتر خودم انجام دادم و از برنامه Internet Explorer اگر اشکالی در دستورات HTML وجود داشته باشد . ممکن است این صفحه را به درستی مشاهده نکنید ، دستورات را مرور کرده در صورت وجود خطا آن را بر طرف کنید و ذخیره نمایید.

سپس دوباره آن را به مرورگر بیاورید.

همانطور که  در این شکل مشاهده می شود . فاصله سطر های متن در مرورگر زیاد است . برای نمایش فاصله سطرها می توان از دستورات </PRE><PRE> برای فرمت بندی متن استفاده کرد. این دستور را در ادامه خواهید دید.

روش بهتر برای تعیین فاصله سطرها ، استفاده از شیوه نامه ها که در مقالات بعدی آشنا می شوید.

تعیین نوع حروف متن :

برای تعیین نوع حروف متن از دستورات خاصی استفاده می شود. <B>  موجب می شود تا متن بعد از آن به صورت پررنگ نوشته شود. و </B>  انتهای آن را مشخص می کند . برای اینکه متن به صورت ایتالیک نوشته شود.

باید در بین (<I>) و (</I>) قرار گیرد. دستورات زیر را ببینید:

This is bold text . </B><B> <I> This is ltalic text.</I

دقت داشته باشید که این دستور نیز دارای صفات CLASS ، ID ، STYLE ، TITLE  است که همانند سایر دستورات مورد استفاده قرار می گیرند.

دستورات HTML می توانند به صورت تو در تومورد  استفاده قرار گیرند. به عنوان مثال ، اگر می خواهید متنی داشته باشید که سیاه و ایتالیک باشد . باید هردو دستور (<B>) و (<I>) را بروی آن اجرا کنید . دقت کنید که دستورات متداخل نباید یک دیگر را قطع کنند . دستور زیر را ببینید.

توضیحات در (HTML)

نوشتن توضیحات در فایل HTML از علامت <!– برای شروع و از علامت >– برای پایان توضیحات استفاده می شود:

<!—This is a simple  comment–>

متن چشمک زن

برای اینکه متنی در صفحه وب به صورت چشمک زن باشد آن را در بین <BLINK> و </BLINK> قرار دهید. دستور زیر ، متن مورد نظر را چشمک زن می کند . (توجه کنید که این دستور مربوط به مرور گر Netscape است)

<BLINK> this is a blinking text . </BLINK>

دستورات <BLINK> دارای صفات CLASS ، ID ، STYLE  است.

متن متحرک

با استفاده از دستورMARQUEE>  می توان متن متحرکی را ایجاد کرد. این دستور ابتدا توسط مایکروسافت ارائه شد ولی امروزه در Web TV نیز قابل استفاده است این دستور صفات متعددی دارد . که در ادامه بحث می شود.

صفت BEHAVIER حرکت متن را کنترل می کند مقدار ALTERNATE مشخص می کند که متن در طول مسیر یک بار از چپ به راست و بار دیگر از راست به چپ حرکت کند. مقدارSCROLL موجب می شود متن از یک سمت شروع به حرکت نماید.

و با رسیدن به انتهای طرف دیگر ، دوباره از همان سمت شروع به حرکت کند.

مقدار SLIDE موجب می شود تا متن در طول مسیر حرکت کند و وقتی که اولین کاراکتر آن به طرف دیگر رسید. متوقف شود.

BGCOLOR رنگ زمینه متن متحرک را مشخص می کند . صفت DIRECTION مشخص می کند. متن از چه جهتی حرکت کند . مقدار فرضی آن LEFT است مقادیر دیگر عبارتند ازDOWN  (پایین) RIGHT  (راست) و UP  (بالا) . مرورگر Web TV  مقادیر UP و DOWN را پشتیبانی نمی کند.

HEIGHT ارتفاع کادر حاوی متن را به پیکسل یا در صدی از پنجره ای که در آن نمایش داده می شود . مشخص می کند.

WIDTH عرض کادر حاوی متن را به پیکسل یا در صدی از پنجره ای که آن نمایش داده می شود. مشخص می کند.

HSPPACE مشخص می کند بین لبه کادر و محتویات آن در سطح افق چقدر فاصله باشد.

VSPACE مشخص می کند  بین لبه کادر و محتویات آن در سطح عمودی چقدر فاصله باشد.

LOOP مشخص می کند که متن چندبار حرکت کند. در حالت عادی ، بی نهایت بار حرکت می کند.

نکته:

مگر اینکه مقدار صفت BEHVIOR برار با SLIDE تعیین شود. اگر مقدار آن INFINITE باشد , متن بی نهایت بار حرکت می کند.

SCROLLAMOUNT مشخص می کند فاصله بین هر بار نمایش متن متحرک چند پیکسل باشد.

SCROLLDELAY مشخص می کند بین هر بار نمایش متن متحرک ، چند میلی ثانیه فاصله باشد.

دستورات زیر را ببینید:

نوشتن متن در چند سطر

اگر بخواهید متنهای مورد نظرتان را در چند سطر بنویسید از دستور <BR> استفاده کنید . متنی که پس از این دستور می آید.

در سطر بعدی قرار می گیرد . دستور زیر را ببینید:

This text split<BR>in two lines

اگر این دستور را در مرور گر اجرا کنید ، نتیجه زیر حاصل می شود.

This text splits

in two lines

یکی از صفات مهم این دستور ، CLEAR  است مقادیر این صفت عبارتند ازALL ، LEFT  ، NONE ، RIGHT البته این دستور صفات STYLE  و TITLE  نیز دارد .

که  همانند سایر دستورات است.

نکته:

صفت CLEAR  از درج فضای خالی عمودی جلوگیری می کند . به طوری که متن مورد نظر می تواند در مصاف با تصویر قرار گیرد . این مقدار LEFT این صفت ، متنی را که در اطراف تصویر تنظیم شده به چپ قرار دارد.

تا به حاشیه چپ حذف می کند. مقدار RIGHT متنی را که در اطراف تصویر تنظیم

شده به راست قرار دارد . تا به حاشیه راست حذف می کند .

مقدار ALL  متنها را آنقدر حذف می کند تا به حاشیه هر دو طرف برسد. مقدار پیش فرض

آن در مثالی را HTML4  برابر با NONE از مطالعه دستور IMG خواهید دید.

برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید:

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kia

تماس با ما:     https://arazpardazesh.com/contact