فرمت دهی  ( Formatting ):

وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخیم و bold بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای formating آشنا خواهيد شد:

<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>

مثالهای شکل دهی متون (Text Formatting) (به ضميمه دو  در انتهاي اين فصل مراجعه كنيد )
در مثالهای زير نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند:

شکل دهی متون
شکلهای مختلف نمايش متون با کمک عناصر b , strong , big , em , i , small , sub , sup

متون از قبل شکل دهی شده
نمايش متون از قبل شکل دهی شده با کمک عنصر pre يا pre Formatted
برای نمايش اشعار فارسی استفاده از عنصر pre بهترين انتخاب ميباشد.

عناصر ديگر شکل دهی متن
نمايش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins

نحوه ديدن سورس کدهای اچتمل (HTML Source)

·     اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.

·     اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.

·     اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!

چند نکته کاربردی:

1.    در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .

2.    به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .

3.    به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.

<U>version <STRONG>2.0</STRONG></U>

تگهای فرمت دهی متون

                                                                         درس قبلي  

فارسی نويسی

در اين درس با فارسی نويسی، فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسی اين سايت آشنا خواهيد شد. همچنين متاتگ http-equiv و شناسه dir نيز معرفی خواهد شد.

سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:

- چگونه فارسی بنويسم ؟

 - چگونه فارسی بخوانم؟

- چگونه صفحات اچتمل فارسی را نمايش دهم؟

دو نکته بسيار مهم در مورد فارسی نويسی:

·          روش کدگذاری UTF-8

اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 استفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند. نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگذاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگذاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

·      شناسه يا  attributeی به نام dir

جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

مثالهای زير نحوه ترازبندی متون فارسی را به نمايش ميگذارند و برای مطالعه بيشتر در مورد ترازبندی متون "راست به چپ" به ضميه يك مراجعه کنيد. (عناصر BDO ، Span و شناسه lang هم برای مطالعه مفيد ميباشند.)

مثالهای فارسی نويسی: ( براي ديدن مثالها به ضميمه يك در انتهاي فصل قبل مراجعه كنيد )

 مثال 1 : سلام بی وفا

به بخش head و تگ div توجه کنيد. متا تگ http-equiv نوع کدگذری را تعيين ميکند و در اينجا با کمک تگ div جهت نوشتن مطالب (از راست به چپ يا بلعکس) تعيين ميگردد. dir به معنای direction و جهت بوده و rtl مخفف right to left و ltr معادل left to right ميباشد.

مثال 2 : متن ها و پاراگراف بندی

به عناصر div و p توجه کنيد. با کمک شناسه dir جهت نوشتن مطالب (از راست به چپ يا بلعکس) تعيين ميگردد.
مثال 3 : متون فارسی و لاتين در کنار هم

مثالی کاملتر با راهنمای استفاده از عنصر div و شناسه dir آن

مثال 4 : شناسه dir در عنصر html

اگر شناسه dir را در عنصر html بکار ببريد جهت نمايش تمامی متون از راست به چپ شده و برای نوشتن از چپ به راست بايد به صورت موردی شناسه "dir="ltr را استفاده کنيد. همچنين در اين حالت ماسماسک! Scrool down مرورگر در سمت چپ صفحه نمايش داده خواهد شد. در صورت استفاده شناسه dir در عنصر body ماسماسک همان سمت راست خواهد ماند.

مثال 5 : مثال کامل

نحوه استفاده شناسه dir در عنصرهای مختلف

لازم به ذکر است که برای فارسی نويسی از کدهای java script موجود در اين آدرس که ابزارهای برنامه نويسی فراهم شده توسط شورای عالی انفورماتيك و دانشجويان دانشگاه صنعتی هستند، استفاده شده است و توصيه ميشود که پروژه farsiweb.info را فراموش نکرده زيرا که استاندارد آينده فارسی نويسی اينترنتی در ايران خواهد شد.

ضميمه يك : 

کد HTML	اجرای کد HTML به وسیله برنامه مرورگر (Browser)
مثالی ساده از يک صفحه اچتمل
<html> <head> <title>My first HTML page</title> </head> <body> Hello World! </body> </html>	Hello World!
پاراگرافهای ساده با استفاده از عنصر p
<html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>Paragraph elements are defined by the p tag.</p> </body> </html>	This is a paragraph. This is a paragraph. This is a paragraph. Paragraph elements are defined by the p tag.
نمايش متون فارسی
<html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <div dir=rtl> سلام بی وفا </div> <p dir=rtl> سلام با وفا </p> </body> </html>	سلام بی وفا سلام با وفا
سر تيترها و تکهای h1 تا h6
<html> <head> <title>heading test</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> </body> </html>	This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.
مثال پاراگرافها و نحوه برخورد مرورگر با فاصله های اضافی
<html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> <p> The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html>	This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
ترازبندی پاراگراف ها با کمک شناسه align
<html> <body> <P ALIGN="center">Text in</P> <P ALIGN="center">Text in here is</P> <P ALIGN="center">Text in here is pushed</P> <P ALIGN="center">Text in here is pushed to the center</P> <p> <P ALIGN="left">The default attribute for paragraph's alignment is left alignmebt.</P> </body> </html>	Text in Text in here is Text in here is pushed Text in here is pushed to the center   The default attribute for paragraph's alignment is left alignmebt
رفتن سر سطر جديد با کمک تگ br
<html> <head> <title>Line Break test </title> </head> <body> <p> To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </p> <p> This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ... </p> </body> </html>	To break lines in a paragraph, use the br tag. This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ...
ترازبندی سر تيترها با استفاده از شناسه align
<html> <head> <title>heading test, Center</title> </head> <body> <h1 align="center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. </p> </body> </html>	This is heading 1 The heading above is aligned to the center of this page.
نمايش خطوط افقی با کمک تگ hr
<html> <head> <title>Horizontal rule test </title> </head> <body> <hr> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph</p> <hr> </body> </html>	The hr tag defines a horizontal rule: This is a paragraph
نحوه استفاده از comment
<!-- First comment Jan 27, 2002 --> <html> <head> <title>My Comment test </title></head> <body> <!-- This is a comment, you can't see me --> <p>This is a sample sentence using paragraph tag</p> <!-- and so is this one, which occupies more than one line --> </body> </html>	This is a sample sentence using paragraph tag
تعيين رنگ زمينه صفحه با کمک شناسه bgcolor در تگ body
<html> <head> <title>Set Background Color test </title> </head> <body bgcolor="blue"> <p>This is a paragraph</p> </body> </html>	This is a paragraph
متن های فارسی با کمک شناسه dir
<html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <h1 dir="rtl"> نوشته راست به چپ </h1> <div dir="rtl"> اين نوشته از راست به چپ چيده ميشود. </div> <p dir="rtl"> اين نوشته از راست به چپ چيده ميشود. </p> <p>This is an English Paragraph.</p> <p dir="ltr">This is an English Paragraph.</p> </body> </html>	نوشته راست به چپ اين نوشته از راست به چپ چيده ميشود. اين نوشته از راست به چپ چيده ميشود. This is an English Paragraph. This is an English Paragraph.
متون فارسی و لاتين در کنار هم
<html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <div dir=rtl> <p>اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است.</p> <p>اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد. </p> </div> <br> <div dir=ltr> <p>This a English Paragraph, ltr=Left to Right & rtl=Right to Left</p> </div> <p>اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!!</p> </body> </html>	اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است. اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد.   This a English Paragraph, ltr=Left to Right & rtl=Right to Left اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!!
شناسه dir در عنصر html
<html dir="rtl"> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <p><b> به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود. </b></p> <p> ... مادر ليزا گفت: - آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست ؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن.. <p> برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66 نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه " </TABLE> </body> </html>	به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود. ... مادر ليزا گفت: - آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن..   برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66 نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه "
مثالی کامل در مورد استفاده از شناسه dir در عناصر مختلف
<html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <h3 dir="rtl">سر تيتر راست به چپ </h3> <div dir="rtl"> راست به چپ با کمک عنصر div </div> <p dir="rtl">راست به چپ با کمک عنصر پاراگراف</p> <p> <INPUT TYPE="text" NAME="" dir="rtl" Value="سلام قربان، حال شما چطوره؟"> <p> <INPUT TYPE="submit" dir="rtl" Value="ارســـــــــال"> <p> <SELECT NAME="test" dir="rtl"> <OPTION VALUE="" SELECTED > فهرست راست به چپ در سمت پيش فرض <OPTION VALUE="">---------------------- <OPTION VALUE="">رديف 1 <OPTION VALUE="">رديف 2 <OPTION VALUE="">رديف 3 <OPTION VALUE="">رديف 4 <OPTION VALUE="">رديف 5 </SELECT> <p align=right> <SELECT NAME="test" dir="rtl"> <OPTION VALUE="" SELECTED>فهرست راست به چپ در سمت راست  <OPTION VALUE="">----------------------- <OPTION VALUE="">رديف 1 <OPTION VALUE="">رديف 2 <OPTION VALUE="">رديف 3 <OPTION VALUE="">رديف 4 <OPTION VALUE="">رديف 5 </SELECT> <p> <TABLE border="1"> <TR dir="rtl"> <TD>abcdef</TD> <TD>ABC</TD> <TD dir="ltr">Forced Left to Right</TD> </TR> <TR> <TD dir="rtl"> اين متن بايد از راست به چپ چيده شود. </TD> <TD>abcdefgh</TD> <TD dir="rtl"> اين متن بايد از راست به چپ چيده شود. </TD> </TR> <TR> <TD >a</TD> <TD>ab</TD> <TD >abc</TD> </TR> </TABLE> </body></html>	سر تيتر راست به چپ راست به چپ با کمک عنصر div راست به چپ با کمک عنصر پاراگراف فهرست راست به چپ در سمت پيش فرض------------------------رديف 1رديف 2رديف 3رديف 4رديف 5 فهرست راست به چپ در سمت راست------------------------رديف 1رديف 2رديف 3رديف 4رديف 5   abcdef ABC Forced Left to Right اين متن بايد از راست به چپ چيده شود. abcdefgh اين متن بايد از راست به چپ چيده شود. a ab abc

تگ‌های اصلی  ( Basic Tags )

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements های اچتمل هستند و در اين فصل با عناصر و تگ های پايه و مهم:

<hr> , <br> , <h1> .... <h6> , , <p>
آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصی ما و با استفاده از امکانات فارسی نويسی آن به صورت آنلاين ميتوانيد به مطالعه و يادگيری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کليک روی دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.

مثالها : ( براي ديدن مثالها به ضميمه يك در انتهاي اين فصل مراجعه كنيد )

مثالی ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمايش متون با کمک تگ <p> و بصورت پاراگرافی

نمايش متون فارسی:

چگونگی نمايش متون فارسی. برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد.

سر تيترها (Headings)
سر تيترها با کمک تگ های <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

مثال بالا در صفحه مرورگر در  ضميمه يك نمايش داده شده است.

پاراگرافها (Paragraphs)

پاراگرافها با کمک تگ <p> معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

This is a paragraph

This is another paragraph

مثال بالا در صفحه مرورگر در  ضميمه يك نمايش داده شده است.

سطر جديد (Line Breaks)

برای رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نميباشد.

This
is a para
graph with line breaks

مثال بالا در صفحه مرورگر در  ضميمه يك نمايش داده شده است.

کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

مثالی در مورد comments و نحوه استفاده از آن (به ضميمه شماره يك مراجعه كنيد )

چند نکته کاربردی:

توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800 x600 و X768 1024 آن را امتحان کنيد.

از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.

فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد..

مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.

تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

مثالهای بيشتر: ( براي ديدن مثالها به ضميمه يك مراجعه كنيد )

باز هم مثال پاراگرافها

اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.

ترازبندی پاراگراف ها

اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.

( "align="center )

رفتن سر سطر جديد

اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.

سر تيترها

اين مثال نحوه استفاده از تگهای <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.

ترازبندی سر تيترها

اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.

( "align="center )

نمايش خطوط افقی

اين مثال نحوه نمايش خطوط افقی با استفاده از تگ <br> ميباشد.

استفاده از comment

اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.

تعيين رنگ زمينه صفحه

اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان ميدهد.

(Background Color)

( "bgcolor ="blue )

تگهای اصلی

در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.

عناصر  ( Elements )

يک فايل اچتمل متنی از نوع text است که از عناصر ( element ها ) تشکيل ميشود و برای ايجاد عناصر از تگ ها ( tags ) استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد.

تگ های اچتمل (HTML Tags)

·          با کمک تگ های اچتمل عناصر يا Elements ساخته ميشوند.

·          در زبان اچتمل حدود 80 عنصر تعريف شده است.

·          تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.

·          تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test<b/>

·          تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.

·          متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"

·     تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

This is my first html page. This text is bold

*** نمونه ای از يک عنصر اچتمل:

This text is bold

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

This is my first homepage. This text is bold

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

در مثال زير تگ <body> دارای چهار شناسه مختلف با نامهای border ، width ، height  ، align و مقادير 0 ، 100 ، 60  و center  ميباشد.

......

شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.

مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

درس قبلي                                                                                 درس بعدي

اين وبلاگ با آدرس و دامين جديد زير نيز قابل دسترسي مي‌باشد:

http://www.mahmoodi.dom.ir

HTML & WWW

در اين درس با مفاهيم وب، اينترنت، مرورگرها و استانداردهای وب آشنا خواهيد شد.

منظور از وب چيست؟

·          وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.

·          اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.

·          تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.

·          کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .

نحوه کارکرد وب چگونه است؟

·          اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.

·          اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.

·          برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.

·          دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.

·          مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.

مرورگرها چگونه به خواندن صفحات وب ميپردازند؟

·          يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند.

·          اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.

·     آدرس يک صفحه وب چيزی شبيه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.internet.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.

مرورگرها چگونه صفحات وب را نمايش ميدهند؟

·          چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.

·          مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.

·          وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشد.

·          يک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است! p> است.

چه کسانی استاندارد های وب را تعيين ميکند؟

·          تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.

·          World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.

·          HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.

·          آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

درس قبلي                                                                                      درس بعدي

مقدمه‌ای بر  HTML:

در اين درس با ويژگيهای فايلهای HTML ( اچتمل ) و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.

يک فايل HTML چيست؟

·          HTML را "اچ تی ام ال" و يا اچتمل بخوانيد.

·          HTML برگرفته از حروف اول Hyper ، Text ، Markup ، Language ميباشد.

·          يک فايل HTML فايلی از نوع text ميباشد که متشکل از markup tag ها ميباشد.

·          مرورگر يا Browser از روی markup tag ها می فهمد که چگونه بايد صفحه را نمايش بدهد.

·          يک فايل HTML بايد دارای انشعاب htm و يا html باشد.

·          يک فايل HTML فايلی از نوع text ميباشد که با هر اديتور ساده ای قابل ايجاد است.

·          وظيفه اصلی تگ های اچتمل ( markup tags ) بيان چگونگی نمايش اطلاعات ميباشد.

ميخواهيد که يک فايل اچتمل بسازيد؟

اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:

This is my first html page. This text is bold

سپس فايل را با نام مثلا test.html در درايو c:\ ذخيره کنيد.

برای ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافی است که از روی منوی File/Open file فايل بالا را از روی محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)

يکی از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روی کامپيوتر شما ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روی یک لينک فايلی شبيه فايل ذخيره شده توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد. ) .

توضيح مثال بالا

اولين تگ مثال بالا تگ <html> ميباشد. از روی اين تگ، مرورگر نوع متن يعنی اچتمل بودنش را يافته و از روی <html/> انتهای متن اچتمل را ميبابد.

متن بين تگ <head> و تگ <head/> اطلاعات شناسنامه ای يا "Header information" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهای <title> و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Title of page" ميباشد در بالای مرورگر نمايش داده خواهد شد.

متن بين تگ <body> و انتهای آن يعنی تگ <body/> تنها اطلاعاتی است که توسط مرورگرنمايش داده خواهند شد.

متن بين تگ <b> و انتهای آن يعنی تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد.

انشعاب فايل htm يا html ؟

اغلب مرورگرها هر دو نوع انشعاب را به خوبی ميشناسند ولی ترجيحا به هنگام ذخيره فايلهای اچتمل از html استفاده کنيد.( استفاده از انشعابهای سه حرفی مانند htm مربوط به قديم و سيستم عاملهائی چون DOS بودند.)

نکته ای در مورد اديتورهای اچتمل ( HTML Editors )

با وجوديکه با استفاده از اديتورهای اختصاصی اچتمل مانند FrontPage و يا Claris Home Page امکان نوشتن و طراحی صفحات اچتمل بصورت WYSIWYG يا "What You See Is What You Get" وجود دارد اما توصيه ميشود که از اديتورهای معمولی متن برای تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.

بيشترين سوالات پرسيده شده ( FAQ ) :

فايلم را درست کردم ولی هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟

مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.)

هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشکل کجاست؟

به خاطر بالا بردن سرعت، هميشه مرورگرها از نسخه های موجود در Cache يا حافظه موقت خود برای خواندن صفحات استفاده ميکنند.برای وادار کردن مرورگر به خواندن اصل صفحه کافی است که در مرورگرتان Refresh/Reload کنيد. در اينترنت اکسپلورر کليد F5 يا View/Refresh و در نت اسکيپ Ctrl+R يا View/Reload اينکار را انجام خواهند داد.

آيا ميتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟

بله، فقط اگر از استاندارد يونيکد برای فارسی نويسی استفاده ميکنيد، برای ديدن درست صفحات فارسی بايد از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنيد.

کجا ميتوان آخرين نسخه از مرورگرهای Internet Explorer و Netscape Navigator را داونلود کرد؟

Internet Explorer را از آدرس:

 http://www.microsoft.com/windows/products/winfamily/ie/default.mspx  و                                  Netscape Navigator را از آدرس:

 http://cd.netscape.com/netscape6/HandleHttpRequest?txnName=QuickBuy

 درس قبلي                                                                                 درس بعدي

با سلام بر خوانندگان و كاربران عزيز

مجموعه‌اي كه پيش رو داريد آموزش HTML بوده و برگرفته از سايت AVINY.COM و با آدرس :

 http://www.aviny.com/Learning/HTML/index.aspx

مي‌باشد. بر خود لازم مي‌دانم پيشاپيش از زحمات دست‌اندر كاران سايت شهيد آويني قدرداني نمايم كه اين آموزش مفيد را در حد مطلوب و خوبي ارائه كرده‌اند. براي اين كه اين مطالب به راحتي قابل وصول شود و كاربران بتوانند پس از قطع ارتباط با اينترنت و در برنامه‌هاي ديگري مثل ورد از آن استفاده كنند، مطالب را با كمي تغييرات و اصلاحاتي اندك و درج مثالها و نمونه‌ها در انتهاي هر فصل و حذف و اضافاتي، براي كاربران گرامي ارائه مي‌شود. لطفا نظرات و پيشنهادهاي خود را اعلام فرماييد. با توجه به فرصت كم و محدوديت‌هاي وبلاگ اگر ايراهايي ملاحظه فرموديد حتما اطلاع دهيد تا اصلاح شود.

عزيزانم براي بهره‌گيري بيشتر و مطلوب‌تر حتما از نرم‌افزارهاي طراحي و ويرايش وب، مثل FrontPage استفاده نماييد.

آرزوي موفقيت و بهره‌وري بيشتر و ارتقاي علمي شما را دارم .