آموزش html از مبتدی تا پیشرفته [بایگانی] - مرکز تخصصی آموزش کامپیوتر و اینترنت آریا دانلود

PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش html از مبتدی تا پیشرفته

Behzad AZ

12-01-2010, 12:32 PM

مقدمه اي بر 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 استفاده کنند. ) و متن زير را در آن تايپ کنيد:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

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

براي ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافي است که از روي منوي File/Open file فايل بالا را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)
يکي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي کامپيوتر شما ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روي اين لينک فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد، مثلا http://www.khaterat.com/html/dars/test.html (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.khaterat.com%2 Fhtml%2Fdars%2Ftest.html) )
توضيح مثال بالا

اولين تگ مثال بالا تگ <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" وجود دارد اما توصيه ميشود که از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.

Behzad AZ

12-01-2010, 12:32 PM

بيشترين سوالات پرسيده شده ( 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 اينجاست و Netscape Navigator اينجا.

Behzad AZ

12-01-2010, 12:33 PM

http://patoghu.com/forum/images/icons/icon1.png

در اين درس با مفاهيم وب، اينترنت، مرورگرها واستانداردهاي وب آشنا خواهيد شد.
منظور از وب چيست؟
وب شبکه اي است متشکلاز تمامي کامپيوترهاي دنيا، شبکه اي از شبکه ها.
اينترنت، وب، 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.khaterat.com/faq.html (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.khaterat.com%2 Ffaq.html) است. بخش //:http نوع پروتوکل و يااستاندارد ارتباطي را تعيين ميکند، www.khaterat.com (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.khaterat.com) نام دومين يا Domain است و faq.html نام صفحه اي است که بايد خوانده شود.
مرورگرها چگونهصفحات وب را نمايش ميدهند؟
چگونگي نمايش يک صفحه وب بصورت مستتر در آن وجوددارد.
مرورگرها از روي دستورالعملهاي داخل صفحات وب و با کمک تگ ها به نمايشصفحات ميپردازند.
وظيفه اصلي تگ هاي اچتمل ( HTML tags ) بيان چگونگي نمايشاطلاعات ميباشد.
يک تگ اچتمل چيزي شبيه <p> اين تگ پاراگراف است! </p> است.
چه کساني استاندارد هاي وب را تعيين ميکند؟
تعييناستاندارد هاي وب ربطي به شرکتهاي مايکروسافت و يا نت اسکيپ ندارد.
World Wide Web Consortium يا W3C متولي تعيين استانداردهاي وب است.
HTML, CSS and XML ازمهمترين استانداردهاي تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

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

Behzad AZ

12-01-2010, 12:33 PM

در زبان اچتمل حدود 80عنصر تعريف شده است.
تگ هاي اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
تگ هاي اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
تگ اول در يک زوج تگ مثلا <b> تگشروع و تگ دوم مثلا <b/> تگ پاياني نام دارد.
متن بين تگ اول و تگدوم در يک زوج تگ محتواي عنصر يا element content ناميده ميشود، مثلا "test"
تگهاي اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. براي مثال دو تگ <b> و <B> معادل هم هستند ولي شديدا توصيه ميشود که به خاطر سازگاري با XHTML از حروف کوچکاستفاده شود.
عناصر اچتمل (HTML Elements)

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

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

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

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

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

<body>
This is my first homepage. <b>This text is bold</b>
</body>
عنصر اچتملبالا با تگ <body> شروع شده و با تگ <body/> پايان مي يابد. همانطور که ميبينيد گاهي يک عنصر حاوي يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلي يا body يک متن اچتمل است.لازم به يادآوري است کهتنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهدشد.
شناسه هاي يک تگ (Tag Attributes)

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

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

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

Behzad AZ

12-01-2010, 12:33 PM

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

مثالها :

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

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

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

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

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفي ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالي قبل و بعد از آن اضافه خواهد کرد.

<p>This is a paragraph</p>
<p>This is another paragraph</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

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

<p>This <br> is a para<br>graph with line breaks</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
کامنت ها در اچتمل (Comments)

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


مثالي در مورد comments و نحوه استفاده از آن
چند نکته کاربردي:

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

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

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

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

Behzad AZ

12-01-2010, 12:33 PM

براي ايجاد يک سطر جديد هيچگاه از يک تگ <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) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.

:
Start Tag Purpose کاربرد

<html> Defines a html document نشان شروع متن اچتمل

<body> Defines the document's body تعيين بدنه و قسمت اصلي صفحه اچتمل

<h1>-<h6> Defines heading 1 to heading 6 تعريف سر تيترهاي h1 تا h6

<p> Defines a paragraph تعريف پاراگراف

<br> Inserts a single line break رفتن سر خط جديد

<hr> Defines a horizontal rule نمايش خط افقي

<!--> Defines a comment in the HTML source code نوشتن شرح و comment

Behzad AZ

12-01-2010, 12:33 PM

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

سؤالات مربوط به فارسي نويسي را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسي بنويسم ؟
- چگونه فارسي بخوانم؟
- چگونه صفحات اچتمل فارسي را نمايش دهم؟

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

* راهنماي فارسي سازي ويندوز
* استفاده از استانداردِ يونيکد
* وبلاگ فارسي FAQ
دو نکته بسيار مهم در مورد فارسي نويسي:

روش کدگزاري 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 ماسماسک همان سمت راست خواهد ماند.

Behzad AZ

12-01-2010, 12:34 PM

مثال 5 : مثال کامل
نحوه استفاده شناسه dir در عنصرهايمختلف

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

وظيفه گروهي از تگ هاي اچتمل فرمت دهي و تعيين شکل نمايش متون ( مثلا ضخيم و 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) و سپس مراحل بالا را تکرار کنيد!!!

چند نکته کاربردي:
در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.

<U>version <STRONG>2.0</STRONG></U>
تگهاي فرمت دهي متون
Start Tag Purpose کاربرد

<b> Defines bold text نمايش توپر

<big> Defines big text نمايش در اندازه بزرگ

<em> Defines emphasized text نمايش بصورت تاکيد شده

<i> Defines italic text نمايش ايتاليک يا کج

<small> Defines small text نمايش در اندازه کوچک

<strong> Defines strong text نمايش قوي ؟!

<sub> Defines subscripted text نمايش پايين تر از خط افقي

<sup> Defines superscripted text نمايش بالاتر از خط افقي

<ins> Defines inserted text نمايش به صورت خط زير

<del> Defines deleted text نمايش به صورت خط خورده

<s> Deprecated. Use <del> instead از رده خارج

<strike> Deprecated. Use <del> instead از رده خارج

<u> Deprecated. Use styles instead از رده خارج

Behzad AZ

12-01-2010, 12:34 PM

Start Tag Purpose کاربرد

<code> Defines computer code text نمايش کدهاي برنامه نويسي

<kbd> Defines keyboard text نمايش متن بصورت صفحه کليدي

<samp> Defines sample computer code نمايش کدهاي نمونه برنامه نويسي

<tt> Defines teletype text نمايش تله تايپ

<var> Defines a variable نمايش متغييرها

<pre> Defines preformatted text نمايش متون از قبل فرمت شده

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

در استاندارد اچتمل گروهي از نويسه ها (Character) داراي معني خاصي بوده ( مثلا نويسه < شروع يک تگ و نويسه > انتهاي يک تگرا نشان ميدهد. ) و براي نمايش آنها در صفحاتتان مستقيما قابل مصرف نميباشند. دراين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهيد گرفت.

Character Entities
در اچتمل بعضي از نويسهها داراي معني خاصي بوده و براي نمايش آنها در صفحاتتان بايد از character entities ها استفاده کنيد. يک character entities از سه قسمت تشکيل ميشود:

1- نويسه ampersand (&amp
2- نام entity يا نويسه # و سپس شماره عددي entity
3 - و نهايتا نويسه semicolon (
براي مثال براي نمايش نويسه > دو روش وجود دارد، بايد از &lt; يا از < استفاده کنيد. در اين مثال lt نام entity و 60 شماره عددي آن ميباشد.

مزيت استفاده از نام entity در مقابل استفاده از شماره عددي آن سهولتيادآوري آن از روي نامش ميباشد و عيب آن اين است که تمامي مرورگرها نام گذاريهايموجود براي Entity ها را قبول ندارند ولي در عوض همگي شماره هاي عددي entity ها رابخوبي ميشناسند. توجه داشته باشيد که entity ها به کوچک و بزرگي حروف حساس هستند ودر واقع Case Sensitive ميباشند.

پر کاربردترين character entity در اچتمل،نويسه فاصله يا Space يا Blank ميباشد و نام رسمي آن non-breaking space ميباشد. همانطور که ميدانيد مرورگرها فاصله هاي اضافي را در نظر نگرفته (truncate spaces) ومثلا از 10 نويسه فاصله، 9 تاي آنرا ناديده ميگيرند و براي نمايش فاصله هاي اضافيبايد از &nbsp; استفاده کنيد.
فهرست پرکاربردترين Character Entities ها

Result (نمايش) Description (شرح) Entity Name (نام) Entity Number (شماره عددي)

non-breaking space &nbsp;

< less than &lt; <

> greater than &gt; >

& ampersand &amp; &

" quotation mark &quot; "

' apostrophe '

چند Character Entitie باکاربردهاي کمتر
Result Description Entity Name Entity Number

¢ cent &cent; ¢

£ pound &pound; £

¥ yen &yen; ¥

§ section &sect; §

© copyright &copy; ©

® registered trademark &reg; ®

× multiplication &times; ×

÷ division &divide

Behzad AZ

12-01-2010, 12:34 PM

در اين درس با پيوندها ( Links ) ، تگ هاي مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيري آنها آشنا خواهيد شد. همچنين شناسه هاي بسيار مهم href ،target و name تشريح خواهند شد.
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطي (Linear) قرار دارد. در يک متن معمولي خواندن به شکل خطي و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصري معلوم الحال! به نام A يا Anchor ميسر ميگردد.

مثالها

ايجاد پيوندها با کمک متن
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را در يک متن اچتمل نشان ميدهد.

ايجاد پيوندها با کمک تصاوير
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را با کمک يک تصوير (image) نشان ميدهد.
تگ Anchor و شناسه href

براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و ... اشاره کنند.
فرم کلي يک پيوند به قرار زير است:
<a href="url">Some Text</a>

در مثال بالا تگ <a> براي ايجاد پيوندي به صفحه اي ديگر که آدرس اينترنتي آن url ميباشد بکار رفته است. براي تعيين مقصد و يا آدرس صفحه جديد از شناسه اي به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتي صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــي (و يا تصويري ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روي آن کليک خواهد کرد ميان تگهاي <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولي ميتواند حتي يک تصوير باشد.

براي نمونه کد اچتمل زير پيوندي به سايت google.com ايجاد خواهد کرد:
<a href="http://www.google.com/">Visit Google Site</a>

و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روي پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.
Visit Google Site
شناسه target در پيوندها:

با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روي پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه اي جديد باز کند بايد از شناسه target و مقدار "_blank" براي آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدي خواهد شد:
<a href="http://www.google.com/" target="_blank">Visit Google Site</a>

خوتان آزمايش کنيد : Visit Google Site
شناسه Name :

با کمک شناسه name ميتوانيد پيوندها را نام گذاري کنيد.پيوندهاي نامگذاري شده امکان حرکت ميان قسمتهاي مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا براي رفتن به آخر يک متن ديگر نيازي به Scrool down کردن تمامي صفحه نيست و کافي است که بازديدکننده روي پيوندي که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاري شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلي يک پيوند نام گذاري شده به قرار زير است:
<a name="label">Text to be displayed</a>

وظيفه شناسه name تعيين نام براي پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتيني ميتواند باشد. در فرم کلي بالا، نام پيوند label و متني که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاري شده با نام top ميپردازد:

<a name="top">Here is top of my page!</a>
2- ايجاد يک پيوند به پيوند نامگذاري شده ديگر:

براي دادن لينک به پيوندي نام گذاري شده، کافي است که پيوندي معمولي ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاري شده را درج کنيد. مثال زير ايجاد پيوندي است که به لينک نامگذاري شده اي به نام top اشاره ميکند:
<a href="http://www.khaterat.com/www/index.cgi#top"> Goto Top! </a>

در اثر کليک روي پيوند بالا مرورگر مستقيما به ابتداي بخش top صفحه http://www.khaterat.com/www/index.cgi (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.khaterat.com%2 Fwww%2Findex.cgi) خواهد رفت.

لگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد url نيست و فقط نويسه # و سپس نام پيوند کافي است:
<a href="#top"> Goto Top! </a>
چند نکته کاربردي در مورد پيوندها:

* يکي از کاربردهاي رايج پيوندهاي نام گذاري شده در صفحات و متوني ميباشد که فهرست و يا ليستي از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ... در همين صفحه در دو مورد از پيوندهاي نامگذاري شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!

* اگر مرورگر نتواند يک پيوند نامگذاري شده را بيابد ابتداي صفحه مقصد را نمايش خواهد داد.
مثالهاي بيشتر

باز کردن پيوند در پنجره اي جديد
اين مثال نحوه ايجاد پيوندهائي که در پنجره اي جديد باز ميشوند را نشان ميدهد. در اين حالت بازديدکنندگان سايتتان را از دست نخواهيد داد.

Behzad AZ

12-01-2010, 12:34 PM

ارجاع به قسمت ديگري ازصفحه
با کمک اين مثال نحوه تعريف پيوندهاي نام گذاري شده را فراگرفته و چگونگيارجاع به قسمتهاي مختلف يک صفحه اچتمل را فرا خواهيد گرفت.

رهائي از شرفريم ها
اين مثال کاربرد شناسه target و مقدار top_ و نحوه رهائي از فريم ها راشرح خواهد داد.

نحوه ايجاد يک پيوند mailto
اين مثال نحوه ايجاد يکپيوند از نوع mailto براي باز کردن برنامه مديريت ايميل ها را نشان ميدهد. در اينحالت اگر بازديدکننده سايت برنامه هاي مربوط به ارسال و مديريت ايميل ها را نصبکرده باشد ميتواند به ارسال ايميل بپردازد.

مثالي کاملتر در مورد mailto
مثال از ارسال ايميل با امکان تعيين مقادير cc ، bcc، subject و body

Start Tag Purpose کاربرد عنصر Anchor
<a> Defines an anchor تعريف يک پيوند يا Anchor در يک صفحه اچتمل

Target Attributes کاربردحالتهاي مختلف شناسه target

target="_blank" مرورگر پيوند را در يک پنجرهجديد باز ميکند.

target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)

target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)

target="_top" مرورگر پيوند را در فريممادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )

برايمطالعه بيشتر در مورد شناسه target سري به اين صفحه بزنيد.
در اين درس با المان جدول ( Table ) ، سلولها يا خانه ها، مرز و border در جداول و تگ هاي مربوطه مخصوصا تگهاي TABLE ، TD , TR آشنا خواهيد شد. توجه داشته باشيد که جداول يکي از مهمترين المانهاي آرايش و layout ميباشند.
مثالها:

جداول، آرايه ها
مثال ساده اي براي ايجاد جداول

مرز جداول
نقش شناسه border در تعيين مرز جداول

مثالهاي بيشتر
جدولها

براي تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوي يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.

مثال زير جدولي است با دو سطر و سه ستون :

کد اچتمل جدولي با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

جدولها و شناسه border و dir :

در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزي با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامي سلولهاي جدول اعمال خواهذ شد.
ساده ترين جدول ممکن در اچتمل، جدولي است با يک سطر و يک ستون!
سرستون در جداول (Headings)

Behzad AZ

12-01-2010, 12:35 PM

سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:

کد اچتمل جدولي با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهاي معمولي جداول تعريف ميشوند و فقط به جاي td از th استفاده شده و لي در نمايش محتواي سر ستونها bold يا توپر نمايش داده خواهند شد.
خانه هاي خالي در جداول (Empty Cells)

اگر محتواي خانه اي از يک جدول خالي باشد چه چيزي بايد نمايش داده شود؟ بسته به مرورگري که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالي جدول بدون مرز نمايش داده خواهد شد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td></td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1

در اينگونه موارد براي رفع مشکل کافي است که از non-breaking space (&nbsp يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>&nbsp;</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1

Behzad AZ

12-01-2010, 12:35 PM

توجه داشته باشيد کهاينبار مرزهاي خانه خالي جدول بدرستي ترسيم گرديده اند.
چند نکته اساسي در موردجداول:

در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادي از شناسه هاميتوانيد استفاده کنيد که شرح همگي آنها از حوصله اين دوره مقدماتي خارج است وتوصيه ميشود که از مثالهاي زير و جدول واقع در انتهاي اين صفحه براي مطالعه هر چهبيشتر در مورد جزئيات شناسه ها استفاده شود.
شناسه dir قابل استفاده در بسيارياز تگها ( مثلا table ، tr ، td ، th ) ميباشد. با کمک شناسه dir و مقدار rtl برايآن، جهت نمايش متون فارسي از "راست به چپ" تعيين ميگردد. توجه داشته باشيد که مقدارشناسه dir به صورت موروثي از table به tr و th و از tr و th به td خواهد رسيد.مثلابراي تعيين مقدار rtl براي تمامي خانه هاي يک جدول کافي است که فقط شناسه مزبور رادر تگ table قيد کنيد و نيازي به قيد آن در تمامي خانه هاي جدول نيست. البتهميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص شناسه dir را موردي تعيين کنيد.
مثالهاي بيشتر

مرز در جداول
اين مثال کاربرد شناسه border را درنمايش جداول نشان ميدهد.

تعيين جهت نمايش متن در خانه هاي يک جدول
اينمثال کاربرد شناسه dir است در تعيين جهت نمايش متن در خانه هاي يک جدول.

عنوان جداول و تگ caption
مثالي در مورد تگ caption در تعريف جداول

توسعه سطري يا ستوني در جداول
مثالي در مورد شناسه هاي colspan و rowspan در جداول

جدولي با محتويات مختلف
محتوي يک خانه جدول تقريباميتواند هر عنصر اچتملي باشد.

فاصله گذاري بين خانه هاي جداول
اين مثالنحوه ايجاد فاصله بين خانه هاي جدول را نشان ميدهد.(cellspacing)

لايهگذاري خانه هاي جدول
اين مثال نحوه ايجاد فاصله خالي بين خانه هاي جدول و مرزآنها را نشان ميدهد.(cellpadding)

تعيين رنگ زمينه يا تصوير زمينه کل يکجدول
تعيين رنگ زمينه يا تصوير زمينه سراسري جداول با کمک شناسه هاي bgcolor و background

تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه ازجدول
تعيين رنگ زمينه يا تصوير زمينه در خانه هاي جداول با کمک شناسه هاي bgcolor و background

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

شناسه frame در جداول
مثالي در مورد کاربرد شناسه "frame" در المان table جهت تعيينشکل مرز جداول.

تراز بندي محتوا در خانه هاي جداول
اين مثال نحوهترازبندي محتواي خانه هاي جداول با کمک شناسه "align" و "valign" را نشان ميدهد.
تگهاي جداول
Start Tag Purpose کاربرد
<table> Defines a table تعريف جدول

<th> Defines a table header تعريف سرستون درجداول

<tr> Defines a table row تعريف رديف ها در جداول

<td> Defines a table cell تعريف سلول يا خانه هاي يک جدول

<caption> Defines a table caption تعريف عنوان جدول