تعیین عناوین در متن

عناوین متنها در HTML به 6 دسته تقسیم می‌شوند. دسته اول با دستور H1، دسته دوم با دستور H2 و ... و دسته ششم با دستور H6 تعیین می‌شوند. حروف عنوان H1 از همه بزرگتر و حروف عنوان H6 از همه کوچکتر است

عناوین متنها در HTML به 6 دسته تقسیم می‌شوند. دسته اول با دستور H1، دسته دوم با دستور H2 و ... و دسته ششم با دستور H6 تعیین می‌شوند. حروف عنوان H1 از همه بزرگتر و حروف عنوان H6 از همه کوچکتر است. برای تعیین اندازه عنوان برای یک متن، باید آن را در بین <Hn> و </Hn> قرار دهید که n یکی از مقادیر 1 تا 6 است. دستور زیر را ببینید:

<H1> welcome to HTML </H>

این دستور موجب می‌شود تا متن welcome to HTML با تیتر درشت، یعنی عنوان H1 در سمت چپ سطر (در حالت عادی در سمت چپ قرار می‌گیرد) ظاهر شود.

برای تعیین موقعیت عنوان در یک سطر، از صفت ALIGN استفاده می‌شود:

  RIGHTیاLEFT   یا ALIGN = CENTER 

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

<H6 ALIGN = CENTER> Heading number six <H6>

این دستور، متن Heading number six را در وسط سطر با عنوان شماره 6چاپ می‌کند. برای تغییر شیوه‌نامه از صفت STYLE استفاده می‌شود. این صفت می‌تواند نوع فونت و اندازه آن را تعیین کند. دستور زیر را ببینید. 

<H5 STYLE = "font-family:Arial;font-size:18pt"> important text. </H5>

این دستور، نوع فونت را Arial واندازه آن را 18pt تعریف می‌کند (با شیوه‌نامه‌ها در فصل 5 آشنا می‌شوید).

پاراگراف‌بندی متن

متنها در HTML به همان صورتی که تایپ می‌شوند، ظاهر می‌گردند. برای تعیین شروع و پایان پاراگراف از دستورات <P> و </P> استفاده می‌گردد. <P> شروع پاراگراف و </P> پایان پاراگراف را مشخص می‌کند. صفات ALIGN، TITLE، CLASS، ID و STYLE نیز در این دستور قابل استفاده‌اند.

<P ALIGN = RIGHT TITLE = "Introduction Paragraph">

This is the introductory paragraph for a very long paper about nothing. </P>

تشزیح چهار صفت اصلی در دستور <P>

قبلاً راجع‌به صفات ID، CLASS، STYLE و TITLE بحث کردیم ولی چون هنوز دستوراتی را مطالعه نکرده بودیم، نمی‌توانستیم مثالهایی را مشاهده کنیم. اکنون که چند دستور ساده HTML را شناختیم، این صفات را با استفاده از دستور <P> که یک دستور ساده است، تشریح می‌کنیم. دستور زیر را ببینید:

<P ID = "FirstParagraph"> This is the first paragraph text. </P>

بدین ترتیب، نام این پاراگراف FirstParagraph انتخاب شد. از طریق شیوه‌نامه‌ها (فصل 5) و زبانهای اسکریپتی می‌توان به این نام مراجعه و از نام استفاده کرد.

صفت CLASS، کلاس یا کلاسهایی را مشخص می‌کند که یک دستور به آن کلاسها تعلق دارد. دستور زیر، نام FirstParagraph را برای یک پاراگراف انتخاب می‌کند و همچنین مشخص می‌کند که این پاراگراف به کلاسی به نام important تعلق دارد:

<P ID = " FirstParagraph" CLASS = "important">

This is the first paragraph text.

</P>

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

صفت STYLE برای افزودن شیوه‌نامه به یک دستور بکار می‌رود. دستور زیر، اندازه فونت پاراگراف را 18 نقطه (pt) در نظر می‌گیرد. فعلاً نگران چگونگی کاربرد آن نباشید، زیرا در ادامه آن را خواهید فهمید:

<P STYLE = "Font-size:18pt"> This is the first paragraph text. </P>

صفت TITLE یک متن کمکی را برای یک دستور در نظر می‌گیرد. یعنی با استفاده از این صفت می‌توان متنی را تعیین کرد که هرگاه علامت ماوس به خروجی یک دستور منتقل شود. آن متن در صفحه ظاهر می‌شود و راجع‌به آن خروجی توضیح می‌دهد. دستر زیر را ببینید:

<P TITLE = "Introductory paragraph">

This is the first paragraph text.

</P>

با اجرای این دستور هر وقت علامت ماوس بر روی این پاراگراف قرار گرفت متن کمکی "Introductory paragraph" ظاهر می‌شود. 

یکی دیگر از صفاتی که می‌تواند مفید واقع شود، صفت DIR است. این صفت مشخص می‌کند که جهت نوشتن و خواندن متن از چپ به راست باشد یا از راست به چپ. می‌دانید که متنهای فارسی از راست به چپ ولی متنهای انگلیسی از چپ به راست نوشته می‌شوند. مقادیر این صفت عبارتند از: "LTR" (چپ به راست) و "RTL" (راست به چپ). دستور زیر را ببینید:

 </P>این یک متن فارسی است<P DIR = "RTL"> 

این دستور موجب می‌شود تا جمله «این یک متن فارسی است» از راست به چپ نوشته شود.

رویدادها

یکی از ویژگیهای HTML جدید این است که می‌توان اسکریپتها را به فایل HTML اضافه کرد. تقریباً هر دستور HTML دارای رویدادهایی است. برای ایجاد وب پویا، استفاده از این رویداد الزامی است. اغلب این رویدادها به عملکرد کاربر مربوط می‌شوند. به عنوان مثال، وقتی کاربر شیئی را کلیک می‌کند، به صفت رویداد onclick مربوط می‌شود. بنابراین، دستور زیر، یک اسکریپت کوچک را به رویداد پاراگراف نسبت می‌دهد که وقتی کاربر پاراگراف را کلیک کرد این رویداد اتفاق می‌افتد. البته دقت داشته باشید که همه رویدادها توسط تمام مرورگرها پشتیبانی نمی‌شوند. رویدادها در اسکریپتها استفاده می‌شوند. 

<P onclick="alert ('Hi')" > Press this paragraph. </P>

رسم خط افقی 

برای رسم خط افقی در صفحه از دستور <HR> استفاده می‌شود. دستور <HR> خط افقی را در موقعیت جاری صفحه وب ترسیم می‌کند.

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

<HR ALIGN = "LEFT" NOSHADE SIZE = "1" WIDTH = "420">

<HR ALIGN = "CENTER" WIDTH = "100%" SIZE = "3" COLOR = "#000000">

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

مثال 2- 3

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

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

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

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

4.فایل 3-2.htm را به یک مرورگر مثل Internet Explorer وارد کنید. اکنون صفحه وب شما مانند شکل 3-3 ظاهر می‌شود (دقت کنید که من همین مراحل را در کامپیوتر خودم انجام دادم و از برنامه Internet Explorer استفاده کردم). اگر اشکالی در دستورات HTML وجود داشته باشد، ممکن است این صفحه را به درستی مشاهده نکنید، دستورات را مرور کرده، در صورت وجود خطا آن را برطرف کنید و ذخیره نمایید. سپس آن را دوباره به مرورگر بیاورید.

 شروع برنامه<HTML>            

شروع عنوان <HEAD>            

<TITLE> first example in HTML </TITLE>

پایان عنوان</HEAD>           

<BODY BGCOLOR= "white">

<H1> Welcome to HTML </H1>

رسم خط افقی             <HR>

<H3> This is a simple sample.

<P> You can put in lots of text if you want to.</P>

<P> In fact, you could keep on typing and </P>

</P> make up more sentences and continue on and on. </P></H3>

</BODY>

</HTML>

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

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

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

<B> Tis is bold text. </B>

<I> This is italic text. </I>

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

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

<B> <I> This is nested. </I> </B>

نمونه‌ای از دستورات تو در تو که همدیگر را قطع می‌کنند بصورت زیر است:

  

<B> <I> This is nested. </B> </I>

 

 

صفات عمومی دستورات HTML

شکل کلی دستورات و برنامه HTML

انواع صفحات وب

تنظیم محتویات

توجه به مخاطب

 

مشاهده تمامی مقالات