PDA

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


Behzad AZ
12-01-2010, 12:21 PM
ه نام خدا
سلام دوستان
این هم آموزش HTML
______________________________________________
مقدمه اي بر HTML
در اين درس با ويژگيهاي فايلهاي HTML يا اچتمل و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.
يک فايل HTML چيست؟
• HTML را "اچ تي ام ال" و يا اچتمل بخوانيد.
• HTML برگرفته از حروف اول Hyper Text Markup ******** ميباشد.
• يک فايل 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" وجود دارد اما توصيه ميشود که از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.
________________________________________
بيشترين سوالات پرسيده شده ( 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 و به بالا استفاده کنيد.
Behzad AZ
12-01-2010, 12:21 PM
قسمت دوم

در اين درس با مفاهيم وب، اينترنت، مرورگرها و استانداردهاي وب آشنا خواهيد شد.
منظور از وب چيست؟
 وب شبکه اي است متشکل از تمامي کامپيوترهاي دنيا، شبکه اي از شبکه ها.
 اينترنت، وب، 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%2 F) نام دومين يا Domain است و faq.html نام صفحه اي است که بايد خوانده شود.

________________________________________
مرورگرها چگونه صفحات وب را نمايش ميدهند؟
 چگونگي نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
 مرورگرها از روي دستورالعملهاي داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
 وظيفه اصلي تگ هاي اچتمل ( HTML tags ) بيان چگونگي نمايش اطلاعات ميباشد.
 يک تگ اچتمل چيزي شبيه <p> اين تگ پاراگراف است! </p> است.

________________________________________
چه کساني استاندارد هاي وب را تعيين ميکند؟
 تعيين استاندارد هاي وب ربطي به شرکتهاي مايکروسافت و يا نت اسکيپ ندارد.
 World Wide Web Consortium يا W3C متولي تعيين استانداردهاي وب است.
 HTML, CSS and XML از مهمترين استانداردهاي تصويب شده وب ميباشند.
 آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .
Behzad AZ
12-01-2010, 12:21 PM
قسمت سوم

يک فايل اچتمل متني از نوع 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)
مثال بخش مقدمه را در نظر بگيريد:
<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:21 PM
http://patoghu.com/forum/images/icons/icon1.png


قسمت چهارم

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements هاي اچتمل هستند و در اين فصل با عناصر و تگ هاي پايه و مهم:
<hr> , <br> , <h1> .... <h6> , <!-- comment --> , <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 را در نظر نگرفته و محتوي آنها را نمايش نخواهد داد و فقط شرح و توضيحات براي برنامه نويس و ديگر افرادي که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکي و آنهم در ابتدا)
<!-- This is a comment -->
مثالي در مورد comments و نحوه استفاده از آن
________________________________________
چند نکته کاربردي:
توجه داشته باشيد که بدليل وجود مرورگرهاي متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتي مرورگرهاي کامپيوترهاي مکينتاش چک کرده و همچنين در دقت هاي نمايش 800x600 و 1024X768 آن را امتحان کنيد.
از نظر فاصله و سطر بندي، متني که در صفحه اديتورتان تايپ ميکنيد با چيزي که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله هاي اضافي (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) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.


:
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




مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
Behzad AZ
12-01-2010, 12:22 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 ماسماسک همان سمت راست خواهد ماند.

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

________________________________________
لازم به ذکر است که براي فارسي نويسي از کدهاي java script موجود در اين آدرس که ابزارهاي برنامه نويسي فراهم شده توسط شوراي عالي انفورماتيك و دانشجويان دانشگاه صنعتي هستند، استفاده شده است و توصيه ميشود که پروژه farsiweb.info را فراموش نکرده زيرا که استاندارد آينده فارسي نويسي اينترنتي در ايران خواهد شد.
Behzad AZ
12-01-2010, 12:22 PM
http://patoghu.com/forum/images/icons/icon1.png


قسمت ششم

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

o اگر ميخواهيد که سورس کدهاي اچتمل صفحات وب را ببينيد کافي است که در منوي View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوري باز کرده و قابل ذخيره توسط شما براي استفاده هاي بعدي ميباشد.
o اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد براي ديدن سورس کد اصلي فريمها کافي است که ابتدا با کمک روش بالا به مشاهده سورس کدهاي اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلي فريمها قرار دارند.) و سپس براي ديدن کد اچتمل اختصاصي هر صفحه بايد پس از "Right Click" روي هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
o اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوي Tools/Internet Options.../Security/Custom Level مرورگرهاي اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!
________________________________________
چند نکته کاربردي:
I. در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
II. به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
III. به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر 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 از رده خارج



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 - فهرست عناصر - فهرست شناسه ها
Behzad AZ
12-01-2010, 12:22 PM
قسمت هفتم

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

1- نويسه ampersand (&)
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:22 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 و يا ... در همين صفحه در دو مورد از پيوندهاي نامگذاري شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!
* اگر مرورگر نتواند يک پيوند نامگذاري شده را بيابد ابتداي صفحه مقصد را نمايش خواهد داد.
________________________________________
مثالهاي بيشتر

باز کردن پيوند در پنجره اي جديد
اين مثال نحوه ايجاد پيوندهائي که در پنجره اي جديد باز ميشوند را نشان ميدهد. در اين حالت بازديدکنندگان سايتتان را از دست نخواهيد داد.
ارجاع به قسمت ديگري از صفحه
با کمک اين مثال نحوه تعريف پيوندهاي نام گذاري شده را فراگرفته و چگونگي ارجاع به قسمتهاي مختلف يک صفحه اچتمل را فرا خواهيد گرفت.
رهائي از شر فريم ها
اين مثال کاربرد شناسه 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" مرورگر پيوند را در فريم مادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )
Behzad AZ
12-01-2010, 12:23 PM
قسمت نهم

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ هاي مربوطه مخصوصا تگهاي Frame و Frameset آشنا خواهيد شد.
________________________________________
مثالها:

مجموعه فريمهاي عمودي
مثالي در مورد ايجاد مجموعه فريمهاي عمودي توسط تگ هاي frameset و frame
مجموعه فريمهاي افقي
مثالي در مورد ايجاد مجموعه فريمهاي افقي توسط تگ هاي frameset و frame
مثالهاي بيشتر
________________________________________

فريمها (Frames)
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتواي هر فريم هم ميتواند هر صفحه يا وب سايتي باشد. هر چند که فريمها طراحي سايتهاي کوچک و متوسط را بسيار آسان ميکنند ولي استفاده از آنها در کارهاي حرفه اي توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
• موتورهاي جستجو با صفحات طراحي شده با فريمها مشکل دارند.
• چاپ و print صفحاتي که از فريمها استفاده ميکنند مشکل است.
• صفحاتي که از فريمها استفاده ميکنند معمولا مبتدي بودن طراح سايت را نشان ميدهد!!
________________________________________
تگ فريم ست (Frameset)
• تگ <frameset> به تعريف فريمها و تقسيم بندي پنجره مرورگر ميپردازد.
• هر تگ <frameset> مجموعه اي از رديفها يا ستونها را تعريف ميکند.
• داخل هر فريم ميتواند frameset ديگري قرار دهيد.
• با کمک شناسه هاي rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
• تگ <frameset> درون تگهاي <html> و <html/> قرار ميگيرد.(نيازي به قيد تگ body هنگام معرفي يک frameset نيست.)
________________________________________
تگ فريم (Frame)
• کاربرد اصلي تگ <frame> تعيين source يا نام صفحه اي است که بايد در فريم ها نمايش داده شود.
مثال زير مجموعه اي از فريمها را که شامل دو فريم عمودي ميباشند معرفي ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.
<html>
<frameset cols="75%,25%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</html>
براي نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.
________________________________________
شناسه هاي cols و rows در تگ frameset
شناسه مقدار شناسه کارکرد
cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست


rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست


مثالهاي زير را در نظر بگيريد:
مثال 2 مثال 1
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_3.html">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
<html>
<frameset cols="*,200">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>

نمايش توسط مرورگر
نمايش توسط مرورگر

در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهاي بالا برقرارند.
________________________________________
نکات کاربردي:
* اگر فريمهاي طراحي شده مرزهاي قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و براي جلوگيري از تغيير اندازه فريمها توسط کاربر بايد از شناسه اي به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.
* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )
* درصد بسيار کمي از مرورگرها از تگهاي مربوط به frame و frameset پشتيباني نميکنند. براي اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
________________________________________
مثالهاي بيشتر
مجموعه فريمهاي مرکب
مثالي در مورد ايجاد مجموعه اي مرکب از فريمهاي عمودي و افقي
مثالي کاربردي در مورد فريمها
در اين مثال کاربردي با کمک سه فريم امکان نمايش صفحات مختلف به آساني فراهم ميشود. فريم افقي و بالائي سرتيتر و نام اصلي سايت را نمايش خواهد داد و فريم سمت راست لينکهاي مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلي و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که براي اين مثال حداقل به يک فايل براي معرفي مجموعا فريمها(frameset) و سه صفحه اچتمل براي فريمهاي بالائي، سمت چپ و راست احتياج خواهد بود.
فريمهاي شناور و يا درجا (Inline frame)
مثالي در مورد فريمهاي شناور و درجا (iframe)، فريمي درون يک صفحه اچتمل
مثالي کاربردي در مورد فريمهاي درجا (Inline frame)
مثالي کاربردي در مورد فريمهاي شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخي با فريم هاي شناور
مثالي در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها
فريمها و پيوندهاي نامگذاري شده
مثالي کامل در مورد فريمها و پيوندهاي نامگذاري شده و نحوه استفاده از آنها در طراحي سايتي ساده متشکل از چهار فايل اچتمل
فريمها و پيوندهاي نامگذاري شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه هاي کامل در تگ frame
________________________________________
تگ هاي فريم
Start Tag Purpose کاربرد
<frameset>
Defines a set of frames تعريف مجموعه اي از فريم ها


<frame>
Defines a sub window (a frame) تعريف يک فريم


<noframes>
Defines a noframe section for browsers that do not handle frames تعريف جايگزين براي مرورگرهائي که از فريم ها پشتيباني نميکنند.


<iframe>
Defines an inline sub window (frame) تعريف فريم هاي درجا (inline)
Behzad AZ
12-01-2010, 12:23 PM
قسمت دهم

اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(ordered) ، نامرتب(unordered) و فهرستهاي تعريفي(definition lists) و تگ هاي مربوطه يعني li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. مثالها:

فهرستهاي نامرتب
مثالي بسيار ساده در مورد فهرستهاي نامرتب
فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب و نحوه نمايش متون فارسي
مثالهاي بيشتر
________________________________________

فهرستهاي نامرتب(unordered list)
فهرستهائي هستند از يک يا چند قلم اطلاعات که معمولا با دايرهاي کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
• Red
• Blue
• Green


<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ul>
• قهوه
• شير
• چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________

فهرستهاي مرتب(ordered list)
اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتي از اعداد به جاي دايره هاي کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهاي نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
1. Red
2. Blue
3. Green


<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ol>
1. قهوه
2. شير
3. چاي


داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________

فهرستهاي تعريفي(definition list)
فهرست تعريفي فهرستي است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهاي تعريفي با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهاي <dt> و <dd> تعريف ميشوند.
HTML code نمايش توسط مرورگر
<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol


<dl dir="rtl" >
<dt >مقدمه</dt>
<dd>خلاصه اي از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 2</dd>
</dl>
مقدمه
خلاصه اي از مقدمه
فصل 1
خلاصه اي از فصل 1
فصل 2
خلاصه اي از فصل 2



داخل تگهاي تشريح يعني <dd> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
________________________________________
مثالهاي بيشتر
انواع فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
انواع فهرستهاي نامرتب
مثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
فهرستهاي تودرتو
مثالي در مورد فهرستهاي ترکيبي. اعضاي فهرست ميتوانند از فهرستهاي ديگر تشکيل شوند.
فهرستهاي تعريفي
مثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه dir
________________________________________
تگهاي فهرست
Start Tag Purpose کاربرد
<ol>
Defines an ordered list تعريف فهرستهاي مرتب


<ul>
Defines an unordered list تعريف فهرستهاي نامرتب


<li>
Defines a list item تعريف يک آيتم و قلم از يک فهرست


<dl>
Defines a definition list تعريف فهرستهاي تعريفي


<dt>
Defines a definition term تعريف اصطلاح در فهرستهاي تعريفي


<dd>
Defines a definition description تعريف معني و شرح اصطلاح در فهرستهاي تعريفي
Behzad AZ
12-01-2010, 12:23 PM
قسمت یازدهم

در اين درس با تگ img ، شناسه src و alt ، تگهاي Map و Area و چگونگي نمايش تصاوير و همچنين تنظيم محل آنها در سندهاي اچتمل آشنا خواهيد شد.
مثالها:

درج تصوير
نحوه درج تصاوير با کمک تگ img
درج تصويري واقع در فضاي آدرسي ديگر
درج تصويري واقع در دايرکتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها
مثالهاي بيشتر
________________________________________
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.
مهمترين شناسه براي درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويري که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوري صفحه اچتمل، در ديگر دايرکتوريهاي همان سايت و يا در فضاي بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:

<img src="url">
مقدار url آدرس اينترنتي تصوير ميباشد و مثلا اگر تصويري که قرار است که در صفحه درج شود در همان دايرکتوري قرار دارد و نامش me.jpg ، کافي است که به جاي url فقط نام تصوير يعني me.jpg را بنويسيد و اگر تصوير در سايتي ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com داراي url ي برابر http://www.google.com/images/logo.gif (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.google.com%2Fi mages%2Flogo.gif) است.در اين url نام تصوير logo.gif بوده، در دايرکتوري images قرار داشته و روي وب سايت google.com قرار دارد.
________________________________________
شناسه هاي width و height در تگ img
کاربرد شناسه هاي width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:

<img src="http://www.google.com/images/logo.gif" width="276" height="110" >

توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه هاي width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب کلي صفحه خواهد کرد.)
________________________________________
شناسه Alt يا "alternate text" يا متن جايگزين
اگر مرورگر به هر دليلي نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد که فقط متن را نمايش ميدهند، متن و text ي که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويري را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/ganjafzar.gif" alt="Iran Developers!" >


________________________________________
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگي داشته و ميخواهيد که تصويري به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
• الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير که در سايتي ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روي سايت google.ca قرار داشته و لزومي به ذخيره آن توسط شما نيست.


• ب) تصوير روي هارد کامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون اغلب سيستم هاي وبلاگ امکان ذخيره تصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهاي ديگر به روي سايتي ديگر منتقل کنيد. شرکتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و در يکي از سؤالهاي اين FAQ فهرست اين شرکتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه کرده، سپس تصويرتان را Upload کرده (با کمک FTP يا روشهاس ديگر ) و سپس در شناسه src از تگ img آدرس جديد تصوير را قيد کنيد.
________________________________________
چند نکته مهم:
• اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
• استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
• لود تصويري با حجم 50 کيلوبايت براي کسي که از مودمي با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
• براي ديدن مشخصات تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
• براي ذخيره تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
________________________________________
مثالهاي بيشتر
تصاوير زمينه
مثالي در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندي تصاوير
اين مثال نحوه ترازبندي تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالي در مورد استفاده از شناسه هاي width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين براي تصاوير
مثالي در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالي در مورد ايجاد image map . در اين مثال هر بخش از نواحي تعريف شده قابل کليک بوده و به پيوندي اختصاصي اشاره ميکند.
________________________________________
تگ هاي تصاوير
Start Tag Purpose کاربرد
<img>
Defines an image درج تصوير


<map>
Defines an image map تعريف Image map يا ؟؟؟


<area>
Defines an area inside an image map تعريف ناحيه اي در داخل Image map
Behzad AZ
12-01-2010, 12:24 PM
قسمت دوازدهم

با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.
________________________________________
تگ <font>
در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p> This is a paragraph.


<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p> متني با قلم Times و اندازه 1 و رنگ FF9900


<p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p> متني با قلم Tahoma و اندازه 2 و رنگ قرمز


شناسه هاي تگ <font>
Attribute Example کاربرد
size="number" size="2" تعيين اندازه قلم


size="+number" size="+1" افزايش اندازه قلم


size="-number" size="-1" کاهش اندازه قلم


face="face-name" face="Times" تعيين نام قلم


color="color-value" color="#eeff00" تعيين رنگ قلم


color="color-name" color="red" تعيين رنگ قلم




*** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.
________________________________________
ديگر از تگ <font> استفاده نکنيد!
تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.
________________________________________
روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:
هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:
تعيين نام قلم
مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)
تعيين اندازه قلم
مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)
تعيين رنگ قلم
مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)
تعيين نام، اندازه و رنگ قلم
مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)
مثال کاربردي در مورد Style Sheet ها
مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول

________________________________________
تگ <span>
تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p> Some text another text again text...





id, class, title, style, dir, lang شناسه هاي استاندارد المان span




مثالهائي از نحوه استفاده از المان span و Style sheet ها:
روش قديمي روش صحيح
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>


<font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>


<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>


<font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>




________________________________________
تگ <div>
تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.
مثال:

کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p> Some text
another text
again text...






id, class, title, style, dir, lang شناسه هاي استاندارد المان div



تعيين جهت نمايش متون
مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل

________________________________________

Start Tag Purpose کاربرد
<div>
Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل


<span>
Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
Behzad AZ
12-01-2010, 12:24 PM
قسمت سیزدهم

در نسخه جديد(4/0) اچتمل امکان جداسازي کامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات اچتمل معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.
________________________________________
مثالها

استيلها در اچتمل
در اين مثال نحوه تعريف استايل شيتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)
پيوندي بدون خط افقي زيري
در اين مثال نحوه ايجاد پيوندي بدون "خط افقي زيري" شرح داده شده است. (Inline Styles)
اتصال به فايلهاي استايل شيت خارجي
در اين مثال نحوه استفاده از تگ <link> جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (External Style Sheet)
________________________________________
چگونگي استفاده از استايل شيتها:
مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممکن ميباشد:
1)استايل شيتهاي خارجي (external style sheet) :
در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات اچتمل قرار ميگيرد، معرفي ميشوند.
در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>




2)استايل شيتهاي داخلي (Internal Style Sheet) :
کاربرد اين روش در حالتهائي است که صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه اچتمل گذاشته ميشود.مثال:






3)استايل شيتهاي درجا (Inline Styles) :
کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:




<p style="color: red; margin-left: 20px">
This is a paragraph
</p>



________________________________________
تگ هاي استايل
Start Tag Purpose کاربرد
<style>
Defines a style in a document تعريف استيلها درون يک سند


<link>
Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي


<font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.


<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.


<center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.


مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
________________________________________
تغييرات در نسخه جديد اچتمل (4/0) :
هدف اوليه از طراحي زبان اچتمل ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات اچتمل ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 اچتمل توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده اچتمل اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد اچتمل زير که بر اساس نسخه 3/2 اچتمل ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:


<p align="center"><font color="red">This is a paragraph</font></p>


کد معادل مثال فوق با استفاده از استايل شيتها در اين مثال شرح داده شده است.(هر چند که اين مثال از تمامي امکانات استايل شيتها و ايجاد فايلي کاملا مستقل براي تعريف استايل استفاده نکرده است.)
Behzad AZ
12-01-2010, 12:24 PM
قسمت چهاردهم


HTML Reference
NAME W3C HTML NS MSIE DESCRIPTION



A HTML40
NS3+
MSIE3+
anchor


ABBR HTML40
abbreviated form (e.g., WWW, HTTP, etc.)


ACRONYM HTML40



ADDRESS HTML40
NS3+
MSIE3+
information on author


APPLET HTML40
NS3+
MSIE3+
Java applet


AREA HTML40
NS3+
MSIE3+
client-side image map area


B HTML40
NS3+
MSIE3+
bold text style


BASE HTML40
NS3+
MSIE3+
document base URI


BASEFONT HTML40
NS3+
MSIE3+
base font for the page
Behzad AZ
12-01-2010, 12:25 PM
BDO HTML40
MSIE5+
I18N BiDi over-ride


BGSOUND MSIE3+
background sound


BIG HTML40
NS3+
MSIE3+
enlarge text style


BLINK NS3+
blinking text


BLOCKQUOTE HTML40
NS3+
MSIE3+
long quotation


BODY HTML40
NS3+
MSIE3+
document body


BR HTML40
NS3+
MSIE3+
forced line break


BUTTON HTML40
MSIE4+
push button


CAPTION HTML40
NS3+
MSIE3+
table caption
Behzad AZ
12-01-2010, 12:25 PM
CENTER HTML40
NS3+
MSIE4+
shorthand for DIV align=center


CITE HTML40
NS3+
MSIE3+
citation font format


CODE HTML40
NS3+
MSIE3+
computer code fragment


COL HTML40
MSIE3+
table column


COLGROUP HTML40
MSIE3+
table column group


COMMENT MSIE3+
comment ignored by the browser


DD HTML40
NS3+
MSIE3+
definition description
Behzad AZ
12-01-2010, 12:25 PM
DEL HTML40
MSIE4+
deleted text


DFN HTML40
MSIE3+
instance definition


DIR HTML40
NS3+
MSIE3+
directory list


DIV HTML40
NS3+
MSIE3+
generic ********/style container


DL HTML40
NS3+
MSIE3+
definition list


DT HTML40
NS3+
MSIE3+
definition term


EM HTML40
NS3+
MSIE3+
emphasis
Behzad AZ
12-01-2010, 12:25 PM
EMBED NS3+
MSIE3+
embeds external object in HTML


FIELDSET HTML40
MSIE4+
form control group


FONT HTML40
NS3+
MSIE3+
local change to font


FORM HTML40
NS3+
MSIE3+
interactive form


FRAME HTML40
NS3+
MSIE3+
subwindow


FRAMESET HTML40
NS3+
MSIE3+
window subdivision


H1 HTML40
NS3+
MSIE3+
heading
Behzad AZ
12-01-2010, 12:26 PM
H2 HTML40
NS3+
MSIE3+
heading


H3 HTML40
NS3+
MSIE3+
heading


H4 HTML40
NS3+
MSIE3+
heading


H5 HTML40
NS3+
MSIE3+
heading


H6 HTML40
NS3+
MSIE3+
heading


HEAD HTML40
NS3+
MSIE3+
document head
Behzad AZ
12-01-2010, 12:26 PM
HR HTML40
NS3+
MSIE3+
horizontal rule


HTML HTML40
NS3+
MSIE3+
document root element


I HTML40
NS3+
MSIE3+
italic text style


IFRAME HTML40
MSIE3+
inline subwindow


ILAYER NS4+
positioning content


IMG HTML40
NS3+
MSIE3+
Embedded image


INPUT HTML40
NS3+
MSIE3+
form control/field


INS HTML40
MSIE4+
inserted text
Behzad AZ
12-01-2010, 12:26 PM
ISINDEX HTML40
NS3+
MSIE4+
single line prompt


KBD HTML40
NS3+
MSIE3+
text to be entered by the user


KEYGEN NS4+
for use in web-based certificate management systems


LABEL HTML40
MSIE4+
form field label text


LAYER NS4+
positioning content


LEGEND HTML40
MSIE4+
fieldset legend


LI HTML40
NS3+
MSIE3+
list item


LINK HTML40
NS4+
MSIE3+
a media-independent link
Behzad AZ
12-01-2010, 12:26 PM
MAP HTML40
NS3+
MSIE3+
client-side image map


MARQUEE MSIE3+
scrolling text field


MENU HTML40
NS3+
MSIE3+
menu list


META HTML40
NS3+
MSIE3+
generic metainformation


MULTICOL NS3+
multiple column formatting


NOBR NS3+
MSIE3+
ensures that a line of text does not wrap to the next line


NOEMBED NS3+
alternative text for embedded objects
Behzad AZ
12-01-2010, 12:27 PM
NOFRAMES HTML40
NS3+
MSIE3+
alternate content container for non frame-based rendering


NOLAYER NS3+
positioning content


NOSCRIPT HTML40
NS3+
MSIE3+
alternate content container for non script-based rendering


OBJECT HTML40
NS4+
MSIE3+
generic embedded object


OL HTML40
NS3+
MSIE3+
ordered list


OPTGROUP HTML40
option group


OPTION HTML40
NS3+
MSIE3+
selectable choice


P HTML40
NS3+
MSIE3+
paragraph


PARAM HTML40
NS3+
MSIE3+
named property value


PLAINTEXT NS3+
MSIE3+
text format
Behzad AZ
12-01-2010, 12:27 PM
PRE HTML40
NS3+
MSIE3+
preformatted text


Q HTML40
MSIE4+
sets apart a quotation in text


S HTML40
NS2+
MSIE3+
strike-through text style


SAMP HTML40
MSIE3+
sample program output, scripts, etc.


SCRIPT HTML40
NS3+
MSIE3+
script statements


SELECT HTML40
NS3+
MSIE3+
option selector


SERVER NS3+
specifies server-side ********** statements
Behzad AZ
12-01-2010, 12:27 PM
SMALL HTML40
NS3+
MSIE3+
small text style


SPACER NS3+
inserts a space in a document


SPAN HTML40
NS4+
MSIE3+
generic ********/style container


STRIKE HTML40
NS3+
MSIE3+
strike-through text


STRONG HTML40
NS3+
MSIE3+
strong emphasis
Behzad AZ
12-01-2010, 12:27 PM
STYLE HTML40
NS4+
MSIE3+
style info


SUB HTML40
NS3+
MSIE3+
subscript


SUP HTML40
NS3+
MSIE3+
superscript


TABLE HTML40
NS3+
MSIE3+
table


TBODY HTML40
MSIE4+
table body


TD HTML40
NS3+
MSIE3+
table data cell


TEXTAREA HTML40
NS3+
MSIE3+
multi-line text field
Behzad AZ
12-01-2010, 12:27 PM
TFOOT HTML40
MSIE4+
table footer


TH HTML40
NS3+
MSIE3+
table header cell


THEAD HTML40
MSIE4+
table header


TITLE HTML40
NS3+
MSIE3+
document title


TR HTML40
NS3+
MSIE3+
table row


TT HTML40
NS3+
MSIE3+
teletype or monospaced text style
Behzad AZ
12-01-2010, 12:27 PM
U HTML40
NS3+
MSIE3+
underlined text style


UL HTML40
NS3+
MSIE3+
unordered list


VAR HTML40
NS3+
MSIE3+
instance of a variable or program argument
Behzad AZ
12-01-2010, 12:28 PM
قسمت پانزدهم


تگهاي اصلي (Basic Tags)
<html></html> ايجاد سندي اچتمل
<head></head> ايجاد اطلاعات شناسنامه اي سند مانند عنوان و ...
<body></body> ايجاد بدنه و قسمت قابل مشاهده سند اچتمل


تگهاي ناحيه Header
<title></title> تعيين عنوان سند


شناسه هاي مهم تگ body
<body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز
<body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز
<body link=?> تعيين رنگ پيوندها بر اساس نام رنگ يا معادل هگز
<body vlink=?> تعيين رنگ پيوندهاي بازديدشده بر اساس نام رنگ
<body alink=?> تعيين رنگ پيوند فعال بر اساس نام رنگ يا معادل هگز


تگهاي متن و نوشته
<pre></pre> نمايش متن هاي از قبل فرمت شده (preformatted)
<hl></hl> ايجاد بزرگترين سر تيتر
<h6></h6> ايجاد کوچکترين سر تيتر
<b></b> ايجاد متن توپر
<i></i> ايجاد متن مورب و ايتاليک
<tt></tt> ايجاد متن از نوع تله تايپي
<cite></cite> ايجاد citation معمولا ايتاليک
<em></em> نمايش تاکيد شده متن (توپر يا مورب)
<strong></strong> نمايش تاکيد شده متن (توپر يا مورب)
<font size=?></font> تعيين اندازه قلم از 1 تا 7
<font color=?></font> تعيين رنگ قلم بر اساس نام رنگ يا مقدار هگز آن
Behzad AZ
12-01-2010, 12:28 PM
پيوندها
<a href="URL"></a> ايجاد پيوند
<a href="mailto:EMAIL"></a> ايجاد پيوندي از نوع mailto
<a name="NAME"></a> ايجاد پيوندي نامگذاري شده در يک سند
<a href="#NAME"></a> ارجاع به يک پيوند نامگذاري شده
Behzad AZ
12-01-2010, 12:28 PM
فرمت دهي
<p></p> ايجاد پاراگرافي جديد
<p align=?> ترازبندي پاراگراف در سمت left, right, or center
<br> رفتن سر سطر جديد
<blockquote> </blockquote> عنوان سازي متن
<dl></dl> ايجاد فهرستهاي تعريفي
<dt> ايجاد عنصري از يک فهرست تعريفي
<dd> ايجاد شرح و توصيف يک عنصر فهرست تعريفي
<ol></ol> ايجاد فهرستهاي مرتب
<li></li> ايجاد يک قلم اطلاعاتي از يک فهرست
<ul></ul> ايجاد فهرستي نامرتب
<div align=?> تگي براي فرمت دهي بلوکي بزرگ از کدهاي اچتمل
Behzad AZ
12-01-2010, 12:28 PM
المانهاي گرافيکي
<img src="name"> ايجاد يک تصوير
<img src="name" align=?> تراز بندي تصوير (left, right, center; bottom, top, middle)
<img src="name" border=?> تعيين ضخامت مرز يک تصوير
<hr> درج خطي افقي
<hr size=?> تعيين ارتفاع خط افقي
<hr width=?> تعيين عرض خط بر اساس مقدار واقعي يا درصدي
<hr noshade> ايجاد خطي افقي بدون سايه
Behzad AZ
12-01-2010, 12:29 PM
جداول
<table></table> ايجاد جدول
<tr></tr> ايجاد رديف در جداول
<td></td> ايجاد خانه هاي جداول
<th></th> ايجاد عنوان ستونهاي يک جدول
Behzad AZ
12-01-2010, 12:29 PM
شناسه هاي جداول
<table border=#> تعيين مقدار ضخامت مرزهاي يک جدول
<table cellspacing=#> تعيين فاصله بين خانه هاي جدول
<table cellpadding=#> تعيين فاصله بين محتواي يک خانه و مرزهاي آن
<table width=# or %> تعيين عرض جدول بر اساس پيکسل و يا درصدي
<tr align=?> or <td align=?> تعيين ترازبندي خانه هاي جدول (left, center, right)
<tr valign=?> or <td valign=?> ترازبندي عمودي خانه هاي جدول (top, middle, bottom)
<td colspan=#> تعيين تعداد ستون هائي که بايد يکي شوند.
<td rowspan=#> تعيين تعداد سطر هائي که بايد يکي شوند.
<td nowrap> باعث جلوگيري از شکسته شدن متن در خانه جدول ميشود.
Behzad AZ
12-01-2010, 12:29 PM
فريمها
<frameset></frameset> تعريف و ايجاد مجموعه اي از فريمها
<frameset rows="value,value"> شناسه اي براي تعريف رديفهاي يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frameset cols="value,value"> شناسه اي براي تعريف ستونها يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frame> تعريف فريمي از مجموعه فريمها
<noframes></noframes> تعيين متني که بايد در صورت عدم پشتيباني مرورگر از فريمها بايد نمايش داده شود.
Behzad AZ
12-01-2010, 12:29 PM
شناسه هاي فريمها
<frame src="URL"> تعيين سند اچتمل داخل فريم
<frame name="name"> تعيين نام براي يک فريم
<frame marginwidth=#> تعيين عرض حاشيه راست و چپ فريم
<frame marginheight=#> تعريف طول حاشيه بالا و پايين فريم بر اساس پيکسل
<frame scrolling=VALUE> تعيين اينکه فريمي از Scroll bar استفاده کند يا نه. مقادير ممکن: yes، no و auto (حالت پيش فرض)
<frame noresize> سبب جلوگيري از تغيير اندازه يک فريم ميشود.
Behzad AZ
12-01-2010, 12:30 PM
فرمها
<form></form> ايجاد يک فرم
<select multiple name="NAME" size=?></select> ايجاد يک منوي کرکره اي و تعيين تعداد اقلامي که قبل از scrolling نمايش داده خواهند شد.
<option> تعيين هر يک از اقلام منو کرکره اي
<select name="NAME"></select> ايجاد منوي کرکره اي
<option> تعيين هر يک از اقلام منو کرکره اي
<textarea name="NAME" cols=40 rows=8></textarea> ايجاد الماني براي ورود متن در بيش از يک خط با تعيين تعداد سطر و ستون ناحيه
<input type="checkbox" name="NAME"> ايجاد چک باکسي با تعيين متن و عنوان آن
<input type="radio" name="NAME" value="x"> ايجاد راديو باتن با تعيين متن و عنوان آن
<input type=text name="foo" size=20> ايجاد الماني براي ورود متن با حداکثر يک سطر به همراه تعيين ابعاد بر اساس نويسه
<input type="submit" value="NAME"> ايجاد دکمه اي از نوع ارسال و Submit
<input type="image" border=0 name="NAME" src="name.gif"> ايجاد دکمه اي از نوع ارسال با کمک يک تصوير
<input type="reset"> ايجاد دکمه خلاصي !! يا Reset
Behzad AZ
12-01-2010, 12:30 PM
قسمت شانزدهم

________________________________________
Anchor پيوند، لينک، (لنگر كشتي)
Attribute شناسه، نشان، صفت
Browser, user agent مرورگر، شبکه نورد، بروزر
Caption عنوان ، سرلوحه
Character نويسه، کاراکتر، دخشه
Client سرويس گيرنده، مشتري ، ارباب رجوع
DHTML اچتمل ديناميک، FAQ

Division, Div بخش، قسمت، دسته بندي
Download گرفتن اطلاعات از وب سرور
Document سند، متني اچتمل
Edit ويرايش
Element المان، عنصر
Explorer جستجوگر، مكتشف
Extention انشعاب فايل
FAQ بيشترين سؤالات پرسيده شده در مورد يک موضوع
Font قلم، خانواده حروف
Format قالب، فرمت
Frame قاب، چهارچوب
Frameset مجموعه اي از فريمها
FTP استانداردي براي مبادله فايل (File Transfer Protocol)
href آدرس متن مختلط (hyerlink reference)
IP Internet Protocol
Behzad AZ
12-01-2010, 12:30 PM
********** جاوا اسکريپت، زباني براي اسکريپت نويسي

HTTP استاندارد تبادل ابر متن ها (Hypertext Transfer Protocol)

Hyper text ابر متن، متن مختلط
List فهرست
Link پيوند، لينک
Online آنلاين، سرخط
Padding لايه گذاري، لفافه
Page, Web page صفحه، متن
Publish انتشار، بردن اطلاعات روي وب سرور
Protocol استاندارد ارتباطي، فهرست پروتوکلهاي مهم در اينترنت

Robot نرم افزاري خودکار در وب
Site. Web site پايگاه، سايت
Script اسکريپت، دستخط، متن نمايشنامه
Spacing فاصله گذاري ، فاصله
Span محدوده، گستره، وجب
Target هدف و مقصد
Table جدول، آرايه
Tag تگ، برچسب
TCP/IP نوعي استاندارد ارتباطي (Transmission Control Protocol/Internet Protocol)

Unicode استانداري براي محيط هاي چند زبانه
Upload بردن اطلاعات روي وب سرور، معمولا با کمک نرم افزارهاي FTP انجام ميپذيرد.
URL آدرس اينترنتي، خلاصه شده Uniform Resource Locator

User, Surfer کاربر، وبگرد، بازديدکننده
Weblog وب نويسي، تارنگاري
Webmaster مديريت سايت
Web Server سرويس دهنده وب، نرم افزاري که وظيفه اصليش دادن سرويس به درخواستهاي دريافت شده از وب ميباشد.
Web, WWW وب، تار عنکبوت جهاني، خلاصه شده World Wide Web
Behzad AZ
12-01-2010, 12:30 PM
سايتهائي مرجع براي يادگيري اچتمل :

1) Welcome to HTML School
2) Getting Started
3) Authoring HTML Basics
4) Getting started with HTML
5) A Beginner's Guide to HTML
6) HTML Tutorial
7) HTML Tag Quick Reference Guide
HTML FAQ Knowledge Base
9) HTML 4.01 Specification
Behzad AZ
12-01-2010, 12:31 PM
قسمت هفدهم

چنانچه قصد داريد برنامه نويسي را شروع كنيدمناسب است كه به نكات زير توجه نماييد.
? در دنياي اينترنت از پروتكل هاي مختلف (پروتكل-Protocol- زبان قابل فهم بين كامپيوترها است)استفاده ميشود. دو پروتكل زير بيشترين كاربرد را در كار يك برنامه نويس دارد.
1- پروتكل HTTP (Hyper text Transfer Protocol)
عمدتا از اين پروتكل براي ارسال درخواستها و پاسخها كه بين مرورگر –Browser- وسرور وب انجام ميشود استفاده مي گردد . ابتدا مرورگر درخواستي را براي سرور مي فرستد . سرور درخواست را بررسي كرده وجواب آن را براي مرورگر ارسال ميكند . web server مشهور IISوApachi ميباشد.
2- پروتكل FTP (File Transfer Protocol)
هنگاميكه بخواهيد فايلهاي آماده شده براي سايت را به مكان اصلي آنها بر روي يك سرور وب (web host) منتقل كنيد كه اين سرور از لحاظ مكاني دور از دسترس شما قرار دارد (مثلا شما در ايران هستيد وسرور شما در كانادا مي باشد ) از اين پرووتكل براي رد وبدل فايلها بين كامپيوترها استفاده مي كنيد . ابزارهايي براي اين كار تهيه شده است.
? اسكريپت نويسي (كدهاي برنامه نويسي است كه شما در كنار HTML هاي خود قرار مي دهيد تا كيفيت وتوان سايت را افزايش دهند )كه معمولا براي يك سايت صورت مي گيرد به دو دسته زير تقسيم ميشوند.
1- اسكريپت نويسي طرف مرورگر (Client) كه عمدتا با زبان ********** نوشته ميشود . علت استفاده از اين زبان ، پشتيباني اكثر مروگر ها از آن ميباشد. زبان ديگر اسكريپت نويسي طرف مرورگر VBScript است كه فقط مرورگر Internet Explorer با آن مي تواند كار كند .
برنامه اي كه شما مي نويسيد توسط مرورگر اجرا خواهد شد . اين برنامه ها نمي توانند كاري خارج از محيط مرورگر انجام دهند (مثلا نميتوانند فايلي ساخته يا فايلي را از روي هارد كاربر پاك كنند)
2- اسكريپت نويسي طرف سرور (Server) كه قابليتهاي آن بسيار بيشتر از نوع قبلي است و بر روي كامپيوتر سرور web اجرا مي شوند و نتايج آنها به صورت html يا xml براي مرورگر استفاده مي شود .مثلا اگر بخواهيد از بانكهاي اطلاعاتي در سايت خود استفاده كنيد يا e-mail كاربران را دريافت كرده و در بانك خود ذخيره كنيد يا e-mail هايي را براي كاربران خود بفرستيد ، با يستي از اسكريپت طرف سرور استفاده كنيد. براي نوشتن اين اسكريپتها زبانهاي مختلفي وجود دارد كه از جمله آنها موارد زير هستند.
- ASP (Active Server Page) بر روي كامپيوترهاي ويندوز و سرور وب
IIS (Internet Information Server) كار ميكند .
- JPS (Java Server Page) بر روي كامپيوترهاي ويندوز و IIS يا Unixو Linux و Apachi (سرور وب) كار مي كند.
- PHP بر روي كامپيوترهاي ويندوز و IIS و Unixو Linux و Apachi كار مي كتد .
- Perl بر روي كامپيوترهاي ويندوز و IIS و Unixو Linux و Apachi كار مي كتد .
- CFML (Cold Fusion Markup Languege) كه با سرور Cold Fusion محصول شركت ماكرومديا كار مي كند و بر روي كامپيوترهاي ويندوز وUnix قابل استفاده است.
در بررسي هاي انجام شده نشان مي دهد كه اگر بخواهيد يك كار مشخص را با زبانهاي فوق بنويسيد بيشترين حجم كد نويسي را در PHP و كمترين حجم كدنويسي را در CFML خواهيد داشت.
هنگام انتخاب زبان دقت به نكته زير بسيار بسيار مهم است.
چون برنامه هايي كه مي نويسيد بر روي سرور وب (Web Host) اجرا خواهند شد لذا بايستي مطمئن شويد كه سرور نهايي اينترنت شما از كداميك از اين زبانها پشتيباني ميكند.
در بين اين زبانها ASP و PHP در ايران بيشتر استفاده شده است. چون ويندوز وIIS وASP محصول شرمت مايكروسافت هستند لذا با هم بيشتر سازگار بوده و سرعت بيشتري نسبت PHP روي ويندوز و IIS ارائه مي دهند. ولي PHP بر روي سرور Unixو Linux و Apachi با كارايي بسيار بالايي كار مي كند. ASP نميتواند روي سرورهاي Linux و Apachi كار مي كند.
نكته: علاوه بر زبانهاي اسكريپت نويسي طرف سرور ، امكان استفاده از فايلهايي باينري CGI كه همان DLL ها وEXE ها هستند نيز وجود دارد.
اين نوع از فايلها چون Visual Cttو Visual Basicو Delphi و مانند اينها ساخته شده و در سرور وب نصب مي شوند. اين روش قديمي بوده و در حال حاضر كاربرد كمي دارد.
قوانين اصلي براي تهيه يك سايت:
1- بايستي ابتدا تحليل وتراحي شده و به خوبي سازماندهي شود . تعيين ساختار سايت و اهداف آن قدم اول خواهد بود .
2- طراحي صفحات بايستي به گونه اي باشد كه كاربر سريعا به موضوع مورد نظر برسد.
3- بگونه اي طراحي شود كه امكان Update سايت براي شما يا مدير سايت راحتر باشد.
4- روشهاي مختلفي براي حركت بين صفحات (navigation) را در اختيار بازديد كننده قرار دهد.
5- از درج ليستها و منوهاي با طول رياد خودداري شود.
نكات فني :
1- ساختار روبرو نمونه اي از ساختار مناسب براي يك سايت چند زبانه است.
2- تا جايي كه ممكن است سايت را Flat طراحي كنيد تا آدرس دهي كوتاه شده و FTP آن راحتتر شود.
3- از فهرستهاي مجازي –Virtual Directory- استفاده كنيد.
4- تقسيم بندي فايل بستگي به كاربرد ومحتويات آن دارد . مثلا تقسيم بندي فيزيكي بر اساس محصولات يا بر اساس نوع محتويات مانند Sample , Reference , Resource
براي ساخت Virtual Directory مراحل زير را طي كنيد.
1- برنامه Internet Services Managerرا از آدرسControl Panel\Administrative Tools اجرا كنيد.
2- منويVirtual Directory IIS\Default Web Site\New\ را اننتخاب كنيد.
3- نام فهرست مجازي را وارد كنيد.
4- آدرس فيزيكي مرتبط با نام مجازي را مشخص كنيد.
5- مجوزهاي دسترسي به اين فهرست را تعيين كنيد.
براي اطلاعات بيشتر به help برنامه IIS مراجعه كنيد.
مثلا نام مجازي فهرست D:\Site\ Download را Download مي گذاريد. براي اشاره به فايلهاي درون اين مسير از URL زير استفاره مي كنيد.

http://localhost/ (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Flocalhost%2F) Download/…

Frame يا بدون فريم:
مزاياي استفاده از فريم ها
1- navigate بين صفحات را آسان كرده و يك نقطه مرجع براي كل سايت بوجود مي آورد.
2- صفحه را به چند بخش تقسيم مي كند و ميتواند طراحي وساخت صفحات را ساده نمايد.
3- سبب Loud شدن سريعتر صفحات مي شود چرا كه بعضي ازبخشهاي صفحه نياز به Loud مجدد ندارد.
4- بهترين را ه براي ساخت Control Panel است.
معايب استفاده از فريم ها
1- بخشهايي از صفحه بصورت ثابت درآمده و از فضاي فعال صفحه مي كاهد.
2- گاهي اوقات پيچيدگي برنامه نويسي طرف سرور و طرف مرورگر را افزايش مي دهد.
3- براي اولين بار كه كاربر به سايت وصل ميشود بار بيشتري را روي سرور قرار مي دهد چرا كه در آن واحد چندين فايل html يا asp وغيره بايستي براي مرورگر فرستاده مي شود .
4- فريم ها با همه مرورگرها سازگار نيستند.
براي آنكه بتوان در مرورگرهايي كه امكان نمايش فريم ها را ندارند امكاناتي را فراهم نمود مي توان به صورت زير يك HTML تهيه كرد.
.
.

.
<Frameset …>
</ Frameset>
<NoFrames>

متن مورد نظر براي مرورگرهايي كه امكان كار با فريم ها را ندارند ويك Link براي رفتن به صفحه بدون فريم

</ NoFrames>

براي ايجاد سايت دو نسخه از آن نياز است يا بهتر است دو نسخه باشد.
1- نسخه اول كه نسخه آزمايشي بوده و بر روي كامپيوتر محلي خود ساخته ميشود. هر گونه تغيير وتحولي را ابتدا روي اين نسخه انجام داده و وقتي صفحه اي كامل شد يا بخشي از سايت تكميل گرديد به مكان اصلي آن سرور Remote است انتقال دهيد.
2- نسخه نهايي كه در سرور اصلي قرار ميگيرد و بازديدكنندگان ازآن استفاده مي كنند در بيشتر حالات اين سرور دور از دسترس قرار دارد.
براي انتقال نسخه آزمايشي يا صفحات تكميل شده به سرور اصلي (remote) از FTP استفاده مي شود.
ابزارهايي كه معمولا براي FTP استفاده ميكنند شامل WS-FTP و Cute-FTP و Windows Commander و Explorer ويندوز مي باشد.
بعضي از برنامه ها مانند Front Page و remote r مي تواند يك سايت remoteرا خوانده و ساختار آن را ايجاد نموده و سپس با تغيير هر فايل آن را به سرور اصلي FTP كنند.
براي FTP كردن حداقل سه پارامتر زير نيازاست.
1- نام سرور ftp مانند ftp.yahoo.com
2- نام كاربر Username
3- رمز عبور Password
ابزارهاي مورد استفاده در طراحي صفحات
معروفترين ابزارها براي ساخت فايلهاي css , ********** , asp , html وغيره موارد زير هستند. البته FrontPage در زمينه html توانايي زيادي داردولي در بقيه موارد ضعف دارد.
1- Front Page
2- Dreamweavermx
3- Code Charge
4- ASP Edite
كدام مرورگر ؟
با بررسي هاي انجام شده و آمارهاي موجود در اينترنت بيشترين مرورگر استفاده شده در اينترنت Internet Explorer با نسخه هاي 6.0 , 5.0 , 4.0 مي باشد كه حدود 75% كاربران را پوشش مي دهد. 25% بقيه را Netscape و Opera وغيره هستند.
با توجه به اينكه ********** و استفاده از امكانات خاص اسكريپت نويسي (DOM) در اين مرورگرها متفاوت است لذا بنظر مي رسد اگر بنظر مي رسد اگر سرمايه گذاري براي Internet Explorer شود نتيجه بهتري خواهد داشت . البته بعضي ها كدهاي **********را براي انواع مرورگرها مي نويسند تا بر روي همه آنها كار كند . اين زحمت زيادي به دنيال خواهد داشت.
بعضي از tag هاي خاص كه در بخش <HEADE> صفحه html قرار مي گيرند.
1- تك META يكي از tag هاي مهم اين بخش از صفحه Html است . اولين نوع آن ، نوع كاراكترهاي درون صفحه را تعيين ميكند.


<META HTTP-EQUIV = "Content-Type" CONTENT="text/html;charset= window-1256">


سبب مي شود صفحه html داراي داده هاي سازگار با Codepage استاندارد 1256 شود. اين كد پيج براي صفحاتي بكار مي روند كه داده هاي آن فارسي يا عربي استاندارد Unicode هستند.
براي تايپ اين نوع حروف مي توانيد از ويندوزها ي2000 يا XP كه صفحه كليد فارسي يا عربي دارند استفاده كنيد. چنانچه به اين روش عمل كنيد ، صفحات توليد شده شما بر روي هر نوع كامپيوتري كه ازسيستم Unicode استاندارد پشتيباني مي كنند قابل ديدن خواهد بود بدون آنكه نياز به نصب فونت باشد براي صفحات انگليسي از windows-1252 استفاده مي شود.
2- مدل دوم META سبب ميشود تا صفحه شما در موتورهاي جستجو مانند yahoo يا google بدرستي ايندكس شوند و هنگام جستجو جوابهاي صحيح توليد شود.


<META NAME ="KEYWORDS" LANG= "EN" CONTENT="food , travel , family">


آنچه درون CONTENT مي آيد كليدواژه هاي مربوط به متون صفحه است.
3- مدل سوم META سبب مي شود صفحه شما بطور اتوماتيك بعد از n ثانيه مجدد Load شده و Refreshشود.


<META NAME = "REFRESH" CONTENT="10 , http://MySite/file.htm">


شماره 10 تعيين مي كند ككه بعد از 10 ثانيه صفحه جاري ، جاي خود را به صفحه اي با آدرس URL ذكر شده بدهد.
در پايان اميد است اين نكات به طراحي شما كمك كرده باشد.
با آرزوي موفقيت
Behzad AZ
12-01-2010, 12:31 PM
قسمت هجدهم(آخر)


تمامي tag هاي HTML خواصي دارند كه بوسيله آنها مي توان نحوه نمايش آنها را تغيير داده يا تنظيم نمود . از جمله اين خواص (Attributes) ميتوان به فونت ، رنگ ، مكان نمايش وغيره اشاره نمود. اين attribute ها از سه طريق زير قابل تعريف هستند.
1- هنگامي كه HTML tag نوشته مي شود attribute هاي آن ذكر شود. مثال:


<IMG SRC = "cone . gif">


2- بوسيله CSS بخشي از attribute ها قابل تنظيم هستند. مثال:


<p style = "font family : Arial" > This is a sample </p>


اين روش به سه شكل قابل اجرا مي باشد كه بعدا توضيح داده مي شود.
3- بوسيله ********** وبرنامه نويسي مي توان خواص (Property) ها هر شي موجود در صفحه HTML را تغيير داد. با توجه به اينكه در محيط مرورگر (browser) همه چيز به عنوان شي (object) در نظر گرفته مي شود لذا قابليت اشاره به خواص شي به خواندن يا نوشتن آنها فراهم شده است. اين بحث به Document Object Model (DOM) معروف است كه در فصل ********** توضيح داده خواهد شد.
مزاياي استفاده از CSS چيست؟
1- سبب مي شود تا به راحتي بتوان شكل و شمايل صفحه HTML يا تمام صفحات يك سايت را با سرعت هر چه بيشتر تغيير داد. به عبارت ديگر ميتوان يك مركز كنترل به وجود آورد.
2- اگر از CSS به نحو خوبي استفاده شود سبب كاهش حجم صفحات سايت و كمتر شدن حجم download صفحات براي كاربران مي گردد. در نتيجه سرعت سايت بيشتر شده و كارايي آن افزايش مي يابد.
3- ميتواند سرعت توليد صفحات HTML را افزايش دهد. اين كار بوسيله ساخت الگوها(Template) و استفاده مكرر از آنها عملي مي شود.
CSS و Browser
مرورگرهاي موجود كه عمدتا Internet Explorer و Netscape و Opera هستند سعي كرده اند تا از استانداردهاي CSS1 و CSS2 استفاده كنند.ولي بهر حال اختلافاتي با هم دارند. آنچه كه از اين به بعد توضيح داده مي شود در ارتباط با IE 4.0 به بعد مي باشد. اين نوع مرورگرها ونسخه هاي بعدي آن بيشترين نوع مرورگرهاي استفاده شده در سطح اينترنت هستند.
انواع Style Sheets
CSS به سه روش زير مي تواند با صفحات HTML بكار رود.
1- Inline Style Sheets ، در اين حالت style مورد نظر به يك tag خاص اضافه شده و تنها بر روي محتويات همان tag تاثير مي گذارد. اين نوع Style Sheets از اولويت اول برخوردار بوده و دو روش ديگر را خنثي مي كند. مثال :

<p style ="font: 12pt Arial">
Inline Style Sheets Test
</p>


2- Embeded Style Sheets : در اين حالت CSS ها در يك محل در فايل HTML جمع شده ومي تواند تعاريف ساده يا پيچيده داشته باشد. ميزان تعريف CSS ها بستگي به نياز شما دارد . اين روش از اولويت كمتري نسبت به روش قبل برخوردار بوده ولي اولويت آن نسبت به روش بعدي (Linked Style Sheets) بيشتر است و تعاريف آن را خنثي مي كند. مثال:




اين style در بخش <HEADE>…</HEADE> صفحه HTML قرار مي ******د.
3- Linked Style Sheets: در اين روش تمام تعاريف CSS در فايلي با پسوند (.CSS) قرار ميگيرد. سپس هر فايلي كه نيازبه اين تعاريف دارد آنرا بصورت زير به خود متصل مي كند


<link rel = "style sheet" href = "My Style.css" type = "text/css">


اين tag در محدوده <HEADE>…</HEADE> صفحه HTML مورد نظر قرار مي گيرد .
فايل My Style.css ميتواند مشابه زير باشد.


BODY{background : # FFFFFF : color : # FFFFOO : margin-top : 10px ; margin-left : 0.75in ; margin-right : 0.75in}
P { font-family : 12pt Arial , Times , Serif ;}
H1 {Color : # OOFFFF }
H2 {Color : # FFOOFF }
H3 {Color : # OOFFOO }


نحوه نگارش CSS
براي نوشتن يك تعريف Style Sheets بايستي اول براي مرورگر تعيين نمود كه اين تعاريف را بر روي كدام tag يا كدام دسته از tag ها اعمال كند. لذا انتخاب كننده (Selector) مطرح ميشود.
مدل اول از Selector ها اصطلاحا type selector مي نامند. در اين حالت بر روي عناصر خاصي از HTML اعمال مي شوند. بعنوان مثال


H1 {font family : Arial }
H2 {font-color : blue }
P {font-family : Times , Serif , font-size : 10pt


در اين مثالها P, H1 , H2 بعنوان Selector هستند وآنچه كه درون علامتهاي {} است تعاريفي است كه بر روي tag هاي نوع Selector اعمال مي شود. مثالهاي ديگر :


H1, H2 , H3 {font-family : Arial , Times , Serif}
H4 , H5 , H6 {Color : blue ;font-weight : bold}


مدل دوم از Selector ها را اصطلاحا Attribute Selector مي نامند . در اين حالت يكسري Attribute هايي به tag هاي HTML اضافه شده وبراي آن tag كار خاصي انجام ميدهد. در اين مثال ALT يك Attribute است كه به IMG tag اضافه شده است.


<IMG SRC = "jpboton.jpg" ALT = "Button for Jumping">


از ديگر حالتهاي اين مدل مي توان به ID و CLASS اشاره كرد.
Class Attribute گروهي از عناصر هستند كه همه آنها داراي مقدار مشابهي براي Attribute CLASS خود مي باشند. هر tag اي كه در محدوده و باشد مي تواند يك كلاس داشته باشد. وقتي به يك عنصر ، كلاس داده شود تمام نمونه هاي آن عنصر مي توانند از كلاس استفاده كنند. مثال:



<style>
Spanish {font-family :"American Type writer" , zar}
English {font-family : Arial , Helvetica , Sanserif }
<style> </
<P class = "spanish"> Estas palabras se expersen en Espanoles </p>
<P class = "english"> This word are expressed in English </p>



اين نوع از كلاسها ميتوانند به هر tag اي اضافه شوند.


<H1 class = "Spanish"> Bienvenidos </H1>
<H3 class = "English"> Welcome </H3>


چنانچه بخواهيد انواعي از كلاسهاي يك tag خاص (مثلا H1) را داشته باشيد مي توانيد به صورت زير عمل كنيد.


H1.blue {font-color : blue}
H1.red { font-color : red}
H1.green { font-color : green}


و به صورت زير ميتوان از آنها استفاده كرد.


<H1 class = "blue"> Water </H1>
<H1 class = "red"> Blood </H1>
<H1 class = "green"> Leaf </H1>


براي آنكه بتوان يك كلاس را به چندين tag هاي مختلف اعمال كرد بايستي از ذكر نام tag هنگام تعبيف كلاس خود داري كرد. در مثال زير اولين اولين كلاس فقط به tag هاي H3 اعمال مي شود ولي كلاس دوم به هر نوع tag اي كه از اين كلاس استفاده كند اعمال مي گردد.


H3. English {font-family : Arial , Times , Serif ; font-size : 12pt}
. English { font-family : Arial , Times , Serif ; font-size : 12pt}


بهترين مدل از CSS در كلاس پياده سازي مي شود و قدرت انعطاف زيادي دارد. به راحتي ميتواند طداحي را تغيير دهد.
ID Attribute طراحي شده است تا فقط بر روي يك عنصر اعمال شود. بايستي يك ID selector را همانند روش class تعريف كرد ولي در ابتداي تعريف آن يك علامت # و به دنبال آن نام مي آيد.


# reserved {color : black}
<em id ="reserved">word</em>


در مورد كلاسها يك نوع خاص به نام شبه كلاس Pseudo-class نيز وجود دارد. اين نوع از كلاسها ، اشاره به زير مجموعه هاي يك tag مي كنند. مثلا در مورد لينك (A) شبه كلاسهاي زير وجود دارد.


A : link {color : green }
A : visited {color : red }
A : active {color : blue }


مدل ديگري ازSelector ها را اصطلاحا Contextual Selector مي نامند. گاهي اوقات لازم است يك style هنگامي به يك عنصر اعمال شود كه داراي عنصر parent خاصي باشد.
مثلا مي خواهيد به <P>هاي درون <DIV> يك style خاصي اضافه كنيد. كه نبايستي به <P>هاي خارج از <DIV> اضافه شود. اين مدل از Selector ها به صورت زير تعريف مي شوند.
به تمام tag هاي <P> اعمال مي شود . P{font-Size : 12pt}
فقط به tag هاي <P> درون <DIV> اعمال مي شود. DIV P{ font-Size : 10pt}
به متون EM درون OL و درون P اعمال مي شود. P OL EM { font-weight : bold}
به متون EM درون H1 يا درون H2 اعمال ميشود. H1 EM , H2 EM {font-color : red}
در مورد attribute , font هاي زير وجود دارد.


Font-Style , font-weight , line-height , font-variant , font font-family, font-Size ,



در مورد رنگ حالتها زير قابل استفاده است.


H1 { font-color : rgb (80 , 200 , 200)}
H1 { font-color : rgb (# 5DC8FA)}
H1 { font-color : rgb (31% , 78% , 98%)}
H1 { font-color : # 2030FF}

آدرس چند سايت در ارتباط با طراحي وب


HTML Help by The Web Design Group (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.htmlhelp.com%2 F)
Welcome to MicroVision Development (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.mvd.com%2F)
Web Development and Design Tutorials, Tips and Reviews - WebReference.com (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.webreference.c om%2F)
TAPPI Website - Home (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.tappi.org%2F)
http://www.fontsite.com/ (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.fontsite.com%2 F)
http://www.virtual-coach.com/ (http://patoghu.com/forum/redirector.php?url=http%3A%2F%2Fwww.virtual-coach.com%2F)

جدول زير ارث بري برخي از CSS attribute را نشان مي دهد. آنهايي كه ارث مي برندچنانچه در محدوده يك parent tag (مانند BODY) قرار گيرند از آن ارث برده و خود را هماهنگ مي كنند.
موارد كه ارث مي برند شامل


Color , font , font-family, font-Size , font-weight , line-height , font-variant ,
Letter-spacing , line-height , text-align , text-internet , text transform
Word-spacing , list-style , list-style-position , list-style-type , white-space.

مواردي كه ارث نمي برند شامل :
Margin , margin-left (-right ,-top , -bottom), padding , padding-left (-right ,-top , -bottom), text-decoration , vertical-align , background , background-attachment , background-color , background-image , background-position , background-repeat , border , border-color , border-left (-right ,-top , -bottom) , border-left-width (-right- ,-top- , -bottom-) , border-style , border-width , clear , display , float , height , width.
توليد CSS ها بوسيله ابزارها
برنامه هاي مختلفي هستند كه ابزار توليدCSS را دارند. از مهمترين آنها موارد زير هستند.


1- Microsoft Front Page
2- Macromedia Dream Weaver
3- Adobe Go Live
4- Web Express
5- Home Site
6- *** Metal
7- *** Dog
8- Adobe Page Mill
9- Symantec visual page
10- Top Style Pro