کتاب

سرفصل مطالب کلاس اچتمل مقدماتی :
• مقدمه
در اين درس با ويژگيهای فايلهای اچتمل، اجزا تشکيل دهنده آن يعنی عناصر و تگ ها ( Elements & Tags ) و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.
• HTML & WWW
در اين درس با مفاهيم وب ( تار عنکبوت جهانی يا World Wide Web ) ، اينترنت، مرورگرها و استانداردهای وب آشنا خواهيد شد. همچنين با تفاوتهای مرورگرهای وب ( Web Browsers ) و سرويس دهنده های وب ( Web Servers ) آشنا خواهيد شد.
• عناصر ( Elements )
يک متن و يا فايل اچتمل از عناصر يا element ها تشکيل ميشود و برای ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها آشنا خواهيد شد.
• تگ های اصلی ( Basic Tags )
تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements های اچتمل هستند و يکی از بهترين روش های يادگيری اچتمل ديدن مثالها و تغيير آنها ميباشد. در اين فصل با تگ های پايه و مهم آشنا شده و با کمک اديتور اختصاصی ما و با امکانات فارسی نويسی آن به صورت آنلاين ميتوانيد به مطالعه و يادگيری مثالها بپردازيد.
• فــارسی نويسی
در اين درس با فارسی نويسی، فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسی اين سايت آشنا خواهيد شد.
• فرمت دهی ( Formatting )
وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا توپر و bold بودن و يا ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای formating آشنا خواهيد شد. همچنين ياد خواهيد گرفت که چگونه source يا اصل کدهای اچتمل يک صفحه يا page را ببينيد.
• نهادها ( Entities )
گروهي از نويسه های ( Character ) اچتمل مانند (<) و يا (>) دارای معنی خاصی ( مثلا نويسه < شروع يک تگ را نشان ميدهد. ) در استاندارد اچتمل بوده و برای نمايش آنها در صفحاتتان مستقيما قابل مصرف نميباشند. در اين فصل با اين نويسه ها آشنا شده و با کمک Character Entities چگونگی استفاده از اين گروه از نويسه ها را فرا خواهيد گرفت. • پيوندها ( Links ) در اين درس با پيوندها ( Links ) ، شناسه های مرتبط مخصوصا href و نحوه به کار گيری آنها آشنا خواهيد شد. • جداول ( Tables) در اين درس با مفاهيم جدول ( Table ) ، رديف يا row ، سلولها يا خانه ها، مرز يا border در جداول و عناصر مرتبط مخصوصا TABLE ، TD , TR آشنا خواهيد شد. • فريمها ( Frames ) در اين درس با مفاهيم فريم ( Frame ) و عناصر مربوطه مخصوصا Frame و Frameset آشنا خواهيد شد. • فهرستها ( Lists ) اين درس شما را با نحوه نمايش فهرستها ( List ) ، انواع فهرستها و تگ های مربوطه آشنا خواهد ساخت. • فرمها ( Forms ) از طريق استفاده از تگ های فرم ( form ) قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها خواهد پرداخت. • تصاوير ( Images ) در اين درس با عنصر img و چگونگی نمايش تصاوير و همچنين تنظيم محل آنها آشنا خواهيد شد. • پس زمينه ( Background ) در اين درس با چگونگی نمايش تصاوير و يا تعيين رنگ پس زمينه آشنا خواهيد شد. يک فايل HTML چيست؟ • HTML را "اچ تی ام ال" و يا اچتمل بخوانيد. • HTML برگرفته از حروف اول Hyper Text Markup Language ميباشد. • يک فايل HTML فايلی از نوع text ميباشد که متشکل از markup tag ها ميباشد. • مرورگر يا Browser از روی markup tag ها می فهمد که چگونه بايد صفحه را نمايش بدهد. • يک فايل HTML بايد دارای انشعاب htm و يا html باشد. • يک فايل HTML فايلی از نوع text ميباشد که با هر اديتور ساده ای قابل ايجاد است. • وظيفه اصلی تگ های اچتمل ( markup tags ) بيان چگونگی نمايش اطلاعات ميباشد. ________________________________________ ميخواهيد که يک فايل اچتمل بسازيد؟ اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:




This is my first html page. This text is bold


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


This is my first html page. This text is bold


*** نمونه ای از يک عنصر اچتمل:
This text is bold
عنصر اچتمل بالا با تگ شروع شده و با تگ پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ نمايش توپر يا bold متون است.
*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

This is my first homepage. This text is bold

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

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

...... شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.
مثالها :
مثالی ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.
پاراگرافهای ساده:
چگونگی نمايش متون با کمک تگ
و بصورت پاراگرافی
نمايش متون فارسی:
چگونگی نمايش متون فارسی. برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد.
مثالهای بيشتر:
________________________________________
سر تيترها (Headings)
سر تيترها با کمک تگ های

تا

تعيين ميشوند.

معرف بزرگترين سر تيتر و

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

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
________________________________________
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ
معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

This is a paragraph
This is another paragraph
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
________________________________________
سطر جديد (Line Breaks)
برای رفتن سر سطر جديد از تگ
استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ
از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا
) نميباشد.


This
is a para
graph with line breaks
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
________________________________________
کامنت ها در اچتمل (Comments)
برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

مثالی در مورد comments و نحوه استفاده از آن
________________________________________
چند نکته کاربردی:
توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.
از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.
برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.
فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.
برای ايجاد يک سطر جديد هيچگاه از يک تگ
خالی استفاده نکنيد و به جای آن از تگ
استفاده کنيد..
مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (
) و سرتيترها () نام برد.
تگ

---

يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
________________________________________
مثالهای بيشتر:
باز هم مثال پاراگرافها
اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.
ترازبندی پاراگراف ها
اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ
را در يک متن اچتمل نشان ميدهد.
سر تيترها
اين مثال نحوه استفاده از تگهای

....

را در يک متن اچتمل نشان ميدهد.
ترازبندی سر تيترها
اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
نمايش خطوط افقی
اين مثال نحوه نمايش خطوط افقی با استفاده از تگ
ميباشد.
استفاده از comment
اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.
تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )
________________________________________
تگهای اصلی
در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.

:
Start Tag Purpose کاربرد


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


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

-

Defines heading 1 to heading 6 تعريف سر تيترهای h1 تا h6

Defines a paragraph تعريف پاراگراف



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

---

Defines a horizontal rule نمايش خط افقی

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


مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسی بنويسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمايش دهم؟
________________________________________
دو نکته بسيار مهم در مورد فارسی نويسی:
• روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

در اينصورت مرورگر يا 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 کافی است که به يکی از شکلهای زير عمل شود:

سلام بر دنيای وب

سلام بر دنيای وب

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

, , ,
, , تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ

, , , ,

ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data ميباشند. محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد. مثال زير جدولی است با دو سطر و سه ستون : کد اچتمل جدولی با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3 رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3 جدولها و شناسه border و dir : • در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد. • در مثال بالا شناسه dir يا direction و مقدار rtl برای آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامی سلولهای جدول اعمال خواهذ شد. • ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون! ________________________________________ سرستون در جداول (Headings) سرستونها در جداول با کمک تگ

تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد: کد اچتمل جدولی با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر سرستون ا سرستون 2 سرستون 3 رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3 سرستون ا سرستون 2 سرستون 3 رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3 همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهای معمولی جداول تعريف ميشوند و فقط به جای td از th استفاده شده و لی در نمايش محتوای سر ستونها bold يا توپر نمايش داده خواهند شد. ________________________________________ خانه های خالی در جداول (Empty Cells) اگر محتوای خانه ای از يک جدول خالی باشد چه چيزی بايد نمايش داده شود؟ بسته به مرورگری که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالی جدول بدون مرز نمايش داده خواهد شد: کد اچتمل جدولی با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1 رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1 در اينگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد: کد اچتمل جدولی با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1 رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1 توجه داشته باشيد که اينبار مرزهای خانه خالی جدول بدرستی ترسيم گرديده اند. ________________________________________ چند نکته اساسی در مورد جداول: • در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادی از شناسه ها ميتوانيد استفاده کنيد که شرح همگی آنها از حوصله اين دوره مقدماتی خارج است و توصيه ميشود که از مثالهای زير و جدول واقع در انتهای اين صفحه برای مطالعه هر چه بيشتر در مورد جزئيات شناسه ها استفاده شود. • شناسه 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 کاربرد Defines a table تعريف جدول Defines a table row تعريف رديف ها در جداول Defines a table header تعريف سرستون در جداول Defines a table cell تعريف سلول يا خانه های يک جدول Defines a table caption تعريف عنوان جدول مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها فريمها ( Frames ) با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد. درس قبلی، درس بعدی ________________________________________ مثالها: مجموعه فريمهای عمودی مثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های frameset و frame مجموعه فريمهای افقی مثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های frameset و frame مثالهای بيشتر ________________________________________ فريمها (Frames) با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود.(به جز در موارد خاص) معايب استفاده از فريمها: • موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند. • چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است. • صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!! ________________________________________ تگ فريم ست (Frameset) • تگ به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد. • هر تگ مجموعه ای از رديفها يا ستونها را تعريف ميکند. • داخل هر فريم ميتواند frameset ديگری قرار دهيد. • با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد. • تگ درون تگهای و قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.) ________________________________________ تگ فريم (Frame) • کاربرد اصلی تگ تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود. مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد. برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا. ________________________________________ شناسه های cols و rows در تگ frameset شناسه مقدار شناسه کارکرد cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست مثالهای زير را در نظر بگيريد: مثال 2 مثال 1 نمايش توسط مرورگر نمايش توسط مرورگر در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت. در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است. در مورد شناسه rows دقيقا قراردادهای بالا برقرارند. ________________________________________ نکات کاربردی: * اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد. * اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند. * اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder ) * درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ جهت نمايش صفحه جايگزين استفاده شود. <br /> ________________________________________<br /> مثالهای بيشتر <br /> مجموعه فريمهای مرکب<br /> مثالی در مورد ايجاد مجموعه ای مرکب از فريمهای عمودی و افقی <br /> مثالی کاربردی در مورد فريمها<br /> در اين مثال کاربردی با کمک سه فريم امکان نمايش صفحات مختلف به آسانی فراهم ميشود. فريم افقی و بالائی سرتيتر و نام اصلی سايت را نمايش خواهد داد و فريم سمت راست لينکهای مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلی و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که برای اين مثال حداقل به يک فايل برای معرفی مجموعا فريمها(frameset) و سه صفحه اچتمل برای فريمهای بالائی، سمت چپ و راست احتياج خواهد بود. <br /> فريمهای شناور و يا درجا (Inline frame)<br /> مثالی در مورد فريمهای شناور و درجا (iframe)، فريمی درون يک صفحه اچتمل <br /> مثالی کاربردی در مورد فريمهای درجا (Inline frame)<br /> مثالی کاربردی در مورد فريمهای شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف <br /> شوخی با فريم های شناور<br /> مثالی در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها <br /> فريمها و پيوندهای نامگذاری شده<br /> مثالی کامل در مورد فريمها و پيوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سايتی ساده متشکل از چهار فايل اچتمل <br /> فريمها و پيوندهای نامگذاری شده کامل<br /> همان مثال بالا در صفحه کامل مرورگر با شناسه های کامل در تگ frame <br /> ________________________________________<br /> تگ های فريم<br /> Start Tag Purpose کاربرد<br /> <frameset><br /> Defines a set of frames تعريف مجموعه ای از فريم ها<br /> <br /> <frame><br /> Defines a sub window (a frame) تعريف يک فريم <br /> <br /> <noframes><br /> Defines a noframe section for browsers that do not handle frames تعريف جايگزين برای مرورگرهائي که از فريم ها پشتيبانی نميکنند. <br /> <br /> <iframe><br /> Defines an inline sub window (frame) تعريف فريم های درجا (inline) <br /> <br /> <br /> مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها <br /> <br /> فهرستها ( Lists )<br /> اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهای مرتب(ordered) ، نامرتب(unordered) و فهرستهای تعريفی(definition lists) و تگ های مربوطه يعنی li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. <br /> درس قبلی، درس بعدی <br /> ________________________________________<br /> مثالها: <br /> فهرستهای نامرتب <br /> مثالی بسيار ساده در مورد فهرستهای نامرتب <br /> فهرستهای مرتب <br /> مثالی در مورد فهرستهای مرتب و نحوه نمايش متون فارسی <br /> مثالهای بيشتر <br /> ________________________________________<br /> <br /> فهرستهای نامرتب(unordered list) <br /> فهرستهائی هستند از يک يا چند قلم اطلاعات که معمولا با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul>شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد. <br /> HTML code نمايش توسط مرورگر<br /> <ul><li>Red</li> <li>Blue</li> <li>Green</li> </ul> • Red <br /> • Blue <br /> • Green <br /> <br /> <ul dir="rtl" ><li>قهوه</li> <li>شير</li> <li>چای</li> </ul> • قهوه <br /> • شير <br /> • چای <br /> <br /> داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد. <br /> ________________________________________<br /> <br /> فهرستهای مرتب(ordered list) <br /> اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol>شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد. <br /> HTML code نمايش توسط مرورگر<br /> <ol><li>Red</li> <li>Blue</li> <li>Green</li> </ol> 1. Red <br /> 2. Blue <br /> 3. Green <br /> <br /> <ol dir="rtl" ><li>قهوه</li> <li>شير</li> <li>چای</li> </ol> 1. قهوه <br /> 2. شير <br /> 3. چای <br /> <br /> داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد. <br /> ________________________________________<br /> <br /> فهرستهای تعريفی(definition list) <br /> فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها. <br /> فهرستهای تعريفی با <dl>شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند. <br /> HTML code نمايش توسط مرورگر<br /> <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 <br /> Hypertext Transfer Protocol <br /> FTP <br /> File Transfer Protocol <br /> IP <br /> Internet Protocol <br /> <br /> <dl dir="rtl" ><dt >مقدمه</dt> <dd>خلاصه ای از مقدمه</dd> <dt>فصل 2</dt> <dd>خلاصه ای از فصل 1</dd> <dt>فصل 2</dt> <dd>خلاصه ای از فصل 2</dd> </dl> مقدمه <br /> خلاصه ای از مقدمه <br /> فصل 1 <br /> خلاصه ای از فصل 1 <br /> فصل 2 <br /> خلاصه ای از فصل 2 <br /> <br /> داخل تگهای تشريح يعنی <dd> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد. <br /> ________________________________________<br /> مثالهای بيشتر <br /> انواع فهرستهای مرتب<br /> مثالی در مورد فهرستهای مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست <br /> انواع فهرستهای نامرتب<br /> مثالی در مورد فهرستهای نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست <br /> فهرستهای تودرتو<br /> مثالی در مورد فهرستهای ترکيبی. اعضای فهرست ميتوانند از فهرستهای ديگر تشکيل شوند. <br /> فهرستهای تعريفی<br /> مثالی در مورد فهرستهای تعريفی به همراه استفاده از شناسه dir <br /> ________________________________________<br /> تگهای فهرست <br /> Start Tag Purpose کاربرد<br /> <ol>Defines an ordered list تعريف فهرستهای مرتب <ul>Defines an unordered list تعريف فهرستهای نامرتب <li><br /> Defines a list item تعريف يک آيتم و قلم از يک فهرست<br /> <br /> <dl>Defines a definition list تعريف فهرستهای تعريفی <dt><br /> Defines a definition term تعريف اصطلاح در فهرستهای تعريفی<br /> <br /> <dd><br /> Defines a definition description تعريف معنی و شرح اصطلاح در فهرستهای تعريفی<br /> <br /> <br /> مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها <br /> <br /> فرمها ( Forms )<br /> از طريق استفاده از عنصر <form>و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت. <br /> توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند. <br /> درس قبلی، درس بعدی <br /> ________________________________________<br /> مثالها: <br /> وروديهای متن يا Text fields <br /> مثالی ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ متن خواهند شد. <br /> وروديهای رمز عبور يا Password fields<br /> <br /> مثالی ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد. <br /> مثالهای بيشتر <br /> ________________________________________<br /> فرمها (Forms) <br /> تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form>معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون تگهای <form>و <form/>قرار ميگيرند. <br /> درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ... <br /> <br /> ________________________________________<br /> تگ Input <br /> به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند: <br /> text , checkbox , radio , password , hidden , submit , reset , button , file , image <br /> در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت: <br /> وروديهای متن (Text Fields) <br /> اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود. <br /> کد اچتمل نمايش توسط مرورگر<br /> <form>First name: <br /> <input type="text" name="firstname"><br /> <br><br /> Last name: <br /> <input type="text" name="lastname"><br /> </form> First name: <br /> Last name: <br /> <br /> <br /> <br /> <br /> <form dir="rtl" >نـــــــــــــــام:<br /> <input type="text" name="firstname"><br /> <br><br /> نام خانوادگی:<br /> <input type="text" name="lastname"><br /> </form> نـــــــــــــــام: <br /> نام خانوادگی: <br /> <br /> <br /> <br /> <br /> توجه داشته باشيد که تگ <form>چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد. <br /> وروديهای Radio Buttons <br /> اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد: <br /> کد اچتمل نمايش توسط مرورگر<br /> <form><input type="radio" name="sex" value="male"> Male<br /> <br><br /> <input type="radio" name="sex" value="female"> Female<br /> </form> Male <br /> Female <br /> <br /> <br /> <br /> <form dir="rtl"><input type="radio" name="sex" value="male"> مرد<br /> <br><br /> <input type="radio" name="sex" value="female"> زن<br /> </form> مرد <br /> زن <br /> <br /> <br /> <br /> همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است. <br /> وروديهای Checkboxes <br /> اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد: <br /> کد اچتمل نمايش توسط مرورگر<br /> <form><input type="checkbox" name="bike"><br /> I have a bike<br /> <br><br /> <input type="checkbox" name="car"><br /> I have a car<br /> </form> I have a bike <br /> I have a car <br /> <br /> <br /> <br /> <form dir="rtl"><input type="checkbox" name="bike"><br /> دوچرخه دارم<br /> <br><br /> <input type="checkbox" name="car"><br /> ماشين دارم<br /> </form> دوچرخه دارم <br /> ماشين دارم <br /> <br /> <br /> <br /> ________________________________________<br /> شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button) <br /> در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد. <br /> تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد. <br /> کد اچتمل نمايش توسط مرورگر<br /> <form name="input" action="form_action.cgi">Username: <br /> <input type="text" name="user"><br /> <input type="submit" value="Submit"><br /> </form> Username: <br /> <br /> <br /> <br /> <form name="input" action="form_action.cgi" dir="rtl">نام کاربر<br /> <input type="text" name="user"><br /> <input type="submit" value="Submit"><br /> </form> نام کاربر <br /> <br /> <br /> <br /> در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت. <br /> ________________________________________<br /> ورود متن فارسی در عناصری مانند Text field يا Text area: <br /> همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟ <br /> معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند: <br /> • استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل استفاده توسط دیگران نیست!! <br /> • استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است! <br /> مدرسه وب بر اساس دستورالعملهای "پروژه فارسی وب" از روش دوم استفاده کرده و از کد جاوا اسکریپت فراهم شده توسط این پروژه استفاده ميکند. مثال زير نحوه استفاده از کد فارسی ساز جاوا اسکریپتی مذکور را شرح خواهد داد: <br /> فارسی ساز جاوا اسکریپتی<br /> مثالی در مورد نحوه استفاده از فارسی ساز جاوا اسکریپتی در یک فرم متشکل از Textfield ها <br /> ________________________________________<br /> مثالهای بيشتر <br /> حالتهای مختلف ورودی Input<br /> در تگ input و با کمک شناسه type و مقادير مختلف برای آن ميتوان انواع مختلف اطلاعات را از وبگرد گرفت. <br /> Checkboxes<br /> مثالی در مورد نحوه تعريف فرمی متشکل از Checkbox ها <br /> Radiobuttons<br /> مثالی در مورد نحوه تعريف فرمی متشکل از Radiobutton ها <br /> فهرست کرکره ای ساده<br /> مثالی در مورد نحوه تعريف فرمی متشکل از drop down box ها <br /> فهرست کرکره ای ديگر<br /> مثالی در مورد نحوه تعريف فرمی متشکل از drop down box ها با تعيين پيش گزينه <br /> Textarea<br /> مثالی در مورد نحوه تعريف فرمی متشکل از Textarea ، ناحيه ای برای ورود بيش از يک سطر متن (نکته: استفاده از اديتور ما برای اين مثال امکان پذير نيست! اگر گفتيد چرا!؟) <br /> تعريف فرمی با کمک دکمه يا button<br /> مثالی در مورد نحوه تعريف فرمی با کمک دکمه يا button <br /> ترسيم مرز در اطراف فرم <br /> مثالی در مورد نحوه تعريف فرمی دلخواه و ترسيم مرزی بدور آن به همراه تعيين عنوانی برای فرم با کمک عنصر Fieldset <br /> ارسال ايميل با کمک فرمها<br /> مثالی در مورد نحوه ارسال ايميل با کمک فرمها <br /> ساختن فهرستی از سايتهای مورد علاقه<br /> مثالی در مورد نحوه استفاده از تگ فرم و منوهای کرکره ای و کمی جاوا اسکريپت برای ساخت فهرستی از سايتها <br /> ________________________________________<br /> تگهای فرم <br /> Start Tag Purpose کاربرد<br /> <form>Defines a form for user input تعريف فرم ورود اطلاعات<br /> <br /> <input><br /> Defines an input field تعريف ورودی از نوع Input <br /> <br /> <textarea><br /> Defines a text-area (a multi-line text input control) تعريف ورودی متن چند سطری يا text-area <br /> <br /> <label><br /> Defines a label to a control تعريف برچسب يا label <br /> <br /> <fieldset>Defines a fieldset تعريف fieldset <br /> <br /> <legend><br /> Defines a caption for a fieldset تعريف عنوان برای fieldset ها <br /> <br /> <select><br /> Defines a selectable list (a drop-down box) تعريف فهرستهای انتخابی يا drop-down box <br /> <br /> <optgroup><br /> Defines an option group تعريف option group ها <br /> <br /> <option><br /> Defines an option in the drop-down box تعريف گزينه ای از drop-down box ها <br /> <br /> <button><br /> Defines a push button تعريف دکمه فشاری، متفاوت با button تگ input <br /> <br /> <br /> مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها <br /> <br /> تصاوير ( Images )<br /> در اين درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمايش تصاوير و همچنين تنظيم محل آنها در سندهای اچتمل آشنا خواهيد شد. <br /> درس قبلی، درس بعدی <br /> ________________________________________<br /> مثالها: <br /> درج تصوير <br /> نحوه درج تصاوير با کمک تگ img <br /> درج تصويری واقع در فضای آدرسی ديگر <br /> درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر سايتها <br /> مثالهای بيشتر <br /> ________________________________________<br /> تگ img و شناسه src يا source <br /> در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست. <br /> مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند. <br /> شکل ساده درج يک تصوير: <br /> <img src="url"><br /> مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصوير يعنی me.jpg را بنويسيد و اگر تصوير در سايتی ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در اين url نام تصوير logo.gif بوده، در دايرکتوری images قرار داشته و روی وب سايت google.com قرار دارد. <br /> ________________________________________<br /> شناسه های width و height در تگ img <br /> کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد: <br /> <img src="http://www.google.com/images/logo.gif" width="276" height="110" > <br /> توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامی تصاوير مرورگر شروع به نمايش قالب و چارچوب کلی صفحه خواهد کرد.) <br /> ________________________________________<br /> شناسه Alt يا "alternate text" يا متن جايگزين <br /> اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمايش ميدهند، متن و text ی که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروی يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافی مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويری را با قيد متن جايگزين آن شرح ميدهد: <br /> <img src="images/AkseAlaki_88_31.jpg" alt="Fake Pic"><br /> <br /> <br /> ________________________________________<br /> وبلاگها و اضافه کردن تصاویر: <br /> اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید: <br /> • الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید. در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند :<br /> <img src="http://www.google.ca/images/hp0.gif" width=258 height=78 > <br /> در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست. <br /> • ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است. در این حالت چون اغلب سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایتی دیگر منتقل کنید. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید. بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید. <br /> ________________________________________<br /> چند نکته مهم: <br /> • اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير) <br /> • استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد. <br /> • لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد. <br /> • برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد. <br /> • برای ذخيره تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد. <br /> ________________________________________<br /> مثالهای بيشتر <br /> تصاوير زمينه <br /> مثالی در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body <br /> ترازبندی تصاوير <br /> اين مثال نحوه ترازبندی تصاوير در کنار متون را نشان ميدهد. <br /> تصاوير شناور در متن <br /> آزاد گذاشتن تصوير در سمت چپ يا راست <br /> نمايش تصاوير در ابعاد مختلف <br /> مثالی در مورد استفاده از شناسه های width و height و نمايش تصاوير در ابعاد مختلف <br /> نمايش متن جايگزين برای تصاوير <br /> مثالی در مورد استفاده از شناسه alt <br /> استفاده از تصاوير هنگام ايجاد پيوند ها <br /> مثالی در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها <br /> ايجاد image map ها <br /> مثالی در مورد ايجاد image map . در اين مثال هر بخش از نواحی تعريف شده قابل کليک بوده و به پيوندی اختصاصی اشاره ميکند. <br /> ________________________________________<br /> تگ های تصاوير<br /> Start Tag Purpose کاربرد<br /> <img><br /> Defines an image درج تصوير<br /> <br /> <map><br /> Defines an image map تعريف Image map يا ؟؟؟ <br /> <br /> <area><br /> Defines an area inside an image map تعريف ناحيه ای در داخل Image map <br /> <br /> <br /> مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها <br /> <br /> پس زمينه ( Background )<br /> در اين درس با چگونگی تعيين تصاوير و رنگ پس زمينه (Background) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه فاکتور بسيار مهمی در طراحی صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشی تعيين کننده در خوانا بودن صفحات دارد. <br /> درس قبلی، درس بعدی <br /> ________________________________________<br /> مثالها: <br /> رنگ متن و زمينه متناسب <br /> انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن کمک شايان توجهی خواهد کرد. <br /> رنگ متن و زمينه نامتناسب<br /> مثالی از انتخاب نامناسب رنگ متن و پس زمينه <br /> مثالهای بيشتر <br /> ________________________________________<br /> رنگ و تصوير زمينه در صفحات اچتمل: <br /> تگ <body> دارای دو شناسه مهم برای تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد. <br /> شناسه bgcolor برای رنگ پس زمينه (background color) <br /> شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتی مقدار هگزادسيمال (Hexadecimal) باشد. <br /> <body bgcolor="#000000"><br /> <body bgcolor="rgb(0,0,0)"><br /> <body bgcolor="black"><br /> در تمامی مثالهای بالا با کمک شناسه bgcolor رنگ زمينه صفحه "سياه" تعيين ميشود. <br /> شناسه Background برای تصوير پس زمينه: <br /> برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود. <br /> <body background="bg.gif"><br /> <body background="http://www.aviny.com/images/b_logo.gif"><br /> در مثال اول از آدرس دهی نسبی (relative) برای تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوری قرار گيرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضای وب ميتواند باشد. <br /> نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد : <br /> • هرتصويری با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد. <br /> • از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد. <br /> • از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد. <br /> • از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد. <br /> • در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد. <br /> • پر مصرف ترين رنگهای زمينه وب سايتها، رنگهای سفيد، سياه و خاکستری ميباشند. <br /> • اغلب سايتهای وب از تصاوير پس زمينه استفاده نمی کنند! مثلا همين سايت!!! <br /> ________________________________________<br /> نکته مهم در سازگاری با نسخه های جديد اچتمل و XHTML <br /> شناسه های bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند. <br /> ________________________________________<br /> مثالهای بيشتر<br /> استفاده مناسب از تصوير زمينه 1<br /> در اين مثال بدلیل استفاده از تصوير مناسب برای زمينه، نوشته های صفحه کاملا خوانا هستند. <br /> استفاده مناسب از تصوير زمينه 2<br /> در اين مثال در اثر استفاده از تصوير مناسب برای زمينه، نوشته های صفحه کاملا خوانا هستند. <br /> استفاده نامناسب از تصوير زمينه <br /> در اين مثال نوشته های صفحه خوانا نيستند. <br /> استفاده از تصوير زمينه با آدرس مطلق <br /> در اين مثال آدرس تصوير زمينه بصورت مطلق و کامل آورده شده است. <br /> تعيين رنگ زمينه با Style Sheet ها<br /> در اين مثال چگونگی استفاده از Style Sheet ها برای تعيين رنگ زمينه آورده شده است. <br /> قلم ها ( HTML Fonts )<br /> با وجودیکه هنوز بعضی از اچتمل کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون استفاده میکنند ولی در استاندارد جدید اچتمل (نسخه 4) و همچنین XHTML از تگ <font> پشتیبانی نمیشود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است. <br /> درس قبلی، استایل شیتها <br /> ________________________________________<br /> تگ <font><br /> در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ <font> برای تعیین نام قلم، رنگ و اندازه متون استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای زیر کاربرد تگ <font> خدابیامرز را نشان میدهند: <br /> کد اچتمل نمايش کد روبرو توسط مرورگر<br /> <p><font size="2" face="Verdana"><br /> This is a paragraph.<br /> </font><br /> </p> This is a paragraph. <br /> <br /> <p dir="rtl"><font size="1" face="Times" color="#FF9900"><br /> متنی با قلم Times و اندازه 1 و رنگ FF9900<br /> </font><br /> </p> متنی با قلم Times و اندازه 1 و رنگ FF9900 <br /> <br /> <p dir="rtl"><font size="2" face="Tahoma" color="red"><br /> این متنی با قلم Tahoma و اندازه 2 و رنگ قرمز <br /> </font><br /> </p> متنی با قلم Tahoma و اندازه 2 و رنگ قرمز <br /> <br /> شناسه های تگ <font> <br /> Attribute Example کاربرد<br /> size="number" size="2" تعیین اندازه قلم<br /> <br /> size="+number" size="+1" افزایش اندازه قلم <br /> <br /> size="-number" size="-1" کاهش اندازه قلم <br /> <br /> face="face-name" face="Times" تعیین نام قلم <br /> <br /> color="color-value" color="#eeff00" تعیین رنگ قلم <br /> <br /> color="color-name" color="red" تعیین رنگ قلم <br /> <br /> <br /> *** بیان مختصر عملکرد تگ <font> در این دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحی صفحات اچتمل توصیه نمیشود. <br /> ________________________________________<br /> دیگر از تگ <font> استفاده نکنید!<br /> تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در اچتمل استفاده شود. <br /> ________________________________________<br /> روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها: <br /> هر چند که مبحث و کلاسهای درس Style Sheet ها در "مدرسه وب" در دست تهیه بوده و امیدواریم که بزودی ارائه شوند ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود. مثالهای ساده زیر نحوه تعیین نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمایش خواهند گذاشت: <br /> تعیین نام قلم<br /> مثالی در مورد تعیین نام قلم در یک استیل درجا (inline)<br /> تعیین اندازه قلم<br /> مثالی در مورد تعیین اندازه قلم در یک استیل درجا (inline)<br /> تعیین رنگ قلم<br /> مثالی در مورد تعیین رنگ قلم در یک استیل درجا (inline)<br /> تعیین نام، اندازه و رنگ قلم<br /> مثالی در مورد تعیین نام، اندازه و رنگ قلم در یک استیل درجا (inline)<br /> مثال کاربردی در مورد Style Sheet ها<br /> مثالی در مورد نحوه تعریف استیلهای مختلف نمایش متون در جداول <br /> ________________________________________<br /> تگ <span> <br /> تگ <span> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir). <br /> بر خلاف تگ های <p>و <div>مرورگرها هیچ سطر جدیدی به اول یا آخر المان <span> اضافه نمی کنند. <br /> مثال: <br /> کد اچتمل نمايش کد روبرو توسط مرورگر<br /> <p>Some text <span style="color:#0000AF;">another text</span> again text...</p> Some text another text again text...<br /> <br /> <br /> <br /> id, class, title, style, dir, lang شناسه های استاندارد المان span <br /> <br /> <br /> مثالهائی از نحوه استفاده از المان span و Style sheet ها:<br /> روش قدیمی روش صحیح<br /> <font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span><br /> <br /> <font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span> <br /> <br /> <font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span> <br /> <br /> <font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span> <br /> <br /> ________________________________________<br /> تگ <div>تگ <div>سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <div>و <div/>قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir). <br /> بر خلاف تگ <span> مرورگرها یک سطر جدید به اول و آخر المان <div>اضافه می کنند. <br /> مثال: <br /> کد اچتمل نمايش کد روبرو توسط مرورگر<br /> <p>Some text <div style="color:#0000AF;">another text</div>again text...</p> Some text <br /> another text<br /> again text... <br /> <br /> <br /> <br /> id, class, title, style, dir, lang شناسه های استاندارد المان div <br /> <br /> تعیین جهت نمایش متون<br /> مثالی در مورد استفاده از تگ div و اعمال "جهت نمایش متون" به بخشی از صفحه اچتمل <br /> ________________________________________<br /> Start Tag Purpose کاربرد<br /> <div>Defines a division/section in a document تعریف بخش و ناحیه ای از صفحه اچتمل <br /> <br /> <span><br /> Defines a section in a document تعریف بخش و ناحیه ای از صفحه اچتمل <br /> <br /> مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها <br /> <br /> استایل شیتها ( Style Sheets )<br /> در نسخه جدید(4/0) اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است. در این نسخه توصیه میشود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه اچتمل منتقل شوند. بخشی از صقحات اچتمل که مربوط به نمایش، ترازبندی و فرمت دهی است، استایل شیت یا "Style Sheet" نامید شده و معمولا به صورت فایلی مجزا درون بخش <head> صفحات اچتمل معرفی میگردند. در این درس به صورت بسیار خلاصه با روشهای مختلف استفاده از استایل شیتها در صفحات اچتمل آشنا خواهید شد. <br /> درس قبلی، مثالهای اچتمل <br /> ________________________________________<br /> مثالها <br /> استیلها در اچتمل<br /> در این مثال نحوه تعریف استایل شیتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet) <br /> پیوندی بدون خط افقی زیری<br /> در این مثال نحوه ایجاد پیوندی بدون "خط افقی زیری" شرح داده شده است. (Inline Styles) <br /> اتصال به فایلهای استایل شیت خارجی<br /> در این مثال نحوه استفاده از تگ <link> جهت اتصال به فایلهای استایل شیت خارجی شرح داده خواهد شد. (External Style Sheet) <br /> ________________________________________<br /> چگونگی استفاده از استایل شیتها: <br /> مرورگرها از روی استیلهای تعریف شده توسط استایل شیتها به فرمت دهی و نمایش اطلاعات درون صفحه اچتمل میپردازند. تعریف و استفاده از استایل ها در صفحات اچتمل به سه روش مختلف ممکن میباشد: <br /> 1)استایل شیتهای خارجی (external style sheet) : <br /> در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. (باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار میگیرد، معرفی میشوند. <br /> در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد: <br /> <br /> <head><br /> <link rel="stylesheet" type="text/css" href="mystyle.css"><br /> </head><br /> <br /> 2)استایل شیتهای داخلی (Internal Style Sheet) : <br /> کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه اچتمل گذاشته میشود.مثال: <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </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> کد معادل مثال فوق با استفاده از استایل شیتها در این مثال شرح داده شده است.(هر چند که این مثال از تمامی امکانات استایل شیتها و ایجاد فایلی کاملا مستقل برای تعریف استایل استفاده نکرده است.) جمعه، چهاردهم آبان ماه 1389 نسخه قابل چاپ کد HTML اجرای کد HTML به وسیله برنامه مرورگر (Browser) مثالی ساده از يک صفحه اچتمل <html> <head> <title>My first HTML page</title> </head> <body> Hello World! </body> </html> Hello World! پاراگرافهای ساده با استفاده از عنصر p <html> <body> <p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p> <p>Paragraph elements are defined by the p tag.</p> </body> </html> This is a paragraph. This is a paragraph. This is a paragraph. Paragraph elements are defined by the p tag. نمايش متون فارسی <html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <div dir=rtl>سلام بی وفا </div> <p dir=rtl>سلام با وفا </p></body> </html> سلام بی وفا سلام با وفا مثال پاراگرافها و نحوه برخورد مرورگر با فاصله های اضافی <html> <body> <p>This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p>This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> <p>The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html> This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. ترازبندی پاراگراف ها با کمک شناسه align <html> <body> <P ALIGN="center">Text in</P><P ALIGN="center">Text in here is</P><P ALIGN="center">Text in here is pushed</P><P ALIGN="center">Text in here is pushed to the center</P> <p> <P ALIGN="left">The default attribute for paragraph's alignment is left alignmebt.</P> </body> </html> Text in Text in here is Text in here is pushed Text in here is pushed to the center The default attribute for paragraph's alignment is left alignmebt رفتن سر سطر جديد با کمک تگ br <html> <head> <title>Line Break test </title> </head> <body> <p>To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </p> <p>This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ... </p> </body> </html> To break lines in a paragraph, use the br tag. This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ... سر تيترها و تکهای h1 تا h6 <html> <head> <title>heading test</title> </head> <body> <h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6> <p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> </body> </html> This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that. ترازبندی سر تيترها با استفاده از شناسه align <html> <head> <title>heading test, Center</title> </head> <body> <h1 align="center">This is heading 1</h1> <p>The heading above is aligned to the center of this page. </p> </body> </html> This is heading 1 The heading above is aligned to the center of this page. نمايش خطوط افقی با کمک تگ hr <html> <head> <title>Horizontal rule test </title> </head> <body> <hr><p>The hr tag defines a horizontal rule:</p><hr><p>This is a paragraph</p><hr> </body> </html> ________________________________________ The hr tag defines a horizontal rule: ________________________________________This is a paragraph ________________________________________ نحوه استفاده از comment <!-- First comment Jan 27, 2002 --> <html> <head> <title>My Comment test </title></head> <body> <!-- This is a comment, you can't see me --> <p>This is a sample sentence using paragraph tag</p> <!-- and so is this one, which occupies more than one line --> </body> </html> This is a sample sentence using paragraph tag تعيين رنگ زمينه صفحه با کمک شناسه bgcolor در تگ body <html> <head> <title>Set Background Color test </title> </head> <body bgcolor="blue"> <p>This is a paragraph</p> </body> </html> This is a paragraph متن های فارسی با کمک شناسه dir <html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <h1 dir="rtl">نوشته راست به چپ </h1> <div dir="rtl">اين نوشته از راست به چپ چيده ميشود. </div> <p dir="rtl">اين نوشته از راست به چپ چيده ميشود. </p> <p>This is an English Paragraph.</p><p dir="ltr">This is an English Paragraph.</p> </body> </html> نوشته راست به چپ اين نوشته از راست به چپ چيده ميشود. اين نوشته از راست به چپ چيده ميشود. This is an English Paragraph. This is an English Paragraph. متون فارسی و لاتين در کنار هم <html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <div dir=rtl><p>اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است.</p> <p>اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد. </p></div> <br> <div dir=ltr><p>This a English Paragraph, ltr=Left to Right & rtl=Right to Left</p></div> <p>اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!!</p> </body> </html> اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است. اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد. This a English Paragraph, ltr=Left to Right & rtl=Right to Left اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!! شناسه dir در عنصر html <html dir="rtl"> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <p><b> به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود. </b> </p><p> ... مادر ليزا گفت: - آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن.. آنگاه دستهای خود را بشکل صليب رويهم نهاد و بفکر فرو رفت. زوسيما پرسيد: - از چيزی رنج می بری ؟ - از بی ايمانی. - از ايمان نداشتن به خدا - آه ! خير! خير! جرات نميکنم چنين فکری را به ذهن راه دهم ولی اين زندگی آينده که اينهمه درباره آن بحث ميکنند معمای بزرگی است! هيچکس نمی تواند به اين سوال پاسخ دهد... . - البته کشنده است ولی هيچ چيز را نميتوان اثبات کرد. با اينهمه می توان ايمان آورد. - چطور؟ به چه شکل ؟ - بر اثر عشق شديد و مثبت. سعی کن حتی المقدور همنوع خودت را دوست بداری وبتدريج که در اين عشق پيشرفت کردی بوجود خدا و جاودانی روح خودت ايمان خواهی آورد. هر گاه در ابراز عشق بديگران به مرحله ای برسی که خود را بکلی فراموش کنی آنگاه با نهايت اعتماد ايمان خواهی آورد. کمترين شکی به روح تو راه نخواهد يافت. تجربه اين حقيقت را اثبات کرده است. - عشق شديد و مثبت؟ اينهم خود مساله ای است! آنهم چه مساله دشواری ! من آنقدر انسانيت را دوست دارم که غالب اوقات فکر ميکنم از همه چيز خود حتی از ليزا چشم بپوشم و تارک دنيا شوم. ديدگان خود را مي بندم و بفکر فرو ميروم و خواب مي بينم و در اين لحظات در خود نيروی خارق العاده ای احساس ميکنم. هيچ زخمی، هيچ جراحتی مرا نمی ترساند. همه را با دست خود خواهم شست و خواهم بست. پرستار اين تيره بختان خواهم شد و حتی حاضرم زخمهای آنان را ببوسم. - جای شکرش باقی است.. باز هم خوب است که ذهن تو متوجه اين مسايل است و بموضوع های ديگری نمی انديشی. هر گاه بر حسب تصادف فرصتی پيش آيد تو ميتوانی کار نيکی انجام دهی. مادر ليزا با حرارت و حتی يک نوع آشفتگی گفت: - درست است ولی آيا ميتوانم بيش از اين چنين عمری را تحمل کنم؟ موضوع اساسی اين است. اين است مساله ای که مرا شکنجه می دهد. چشمهای خود را می بندم و از خودم می پرسم: " آيا ميتوانی مدت مديدی اين زندگی را ادامه دهی؟ اگر بيماری که زخمهايش را ميشويي بيدرنگ از تو سپاسگزاری نکند و برعکس فداکاری تو را ناديده انگارد و با هوسهايش ناراحتت کند، به تو پرخاش نمايد، از تو توقعات بيجا داشته باشد و (بطوريکه زياد برای اشخاص رنجيده پيش ميايد) عليه تو به مافوقت شکايت نمايد آنگاه چه خواهی کرد؟ آيا عشقت همچنان ادامه خواهد يافت؟" فکر کن من به چه نتايج دهشت انگيزی رسيده ام، اگر چيزی وجود داشته باشد که بيدرنگ آتش عشق"شديد و مثبت" مرا به انسانيت سرد کند ناسپاسی است. بعبارت ديگر من برای مزدی کار ميکنم و متوقعم که بيدرنگ حق خودم يعنی تمجيد و عشق در ازای عشقم دريافت دارم و در غير اينصورت قادر به دوست داشتن نخواهم بود. او جداَ نسبت بخود احساس تنفر شديدی می کرد. پس از اتمام سخنانش مانند حريفی چشم به پير دوخت و در انتظار اظهارات او ماند. زوسيما گفت: - اتفاقا چندی پيش پزشگی عين همين سخنان تو را ايراد ميکرد. وی مردی تقريبا سالمند و فوق العاده عاقل بود و با همان صراحتی که تو سخن ميگويی او هم صحبت ميکرد. گو اينکه سخنانش خالی از ظرافت نبود. ميگفت: " من انسانيت را بطور کلی دوست دارم ولی از خودم درشگفتم زيرا هر چه بيشتر بشريت را بطور کلی دوست ميدارم نسبت باشخاص بطور انفرادی کمتر مهر و محبت در دل احساس ميکنم. در خواب و عالم رويا غالبا برای خدمت به انسانيت آماده ميشوم و گاهی خود را برای فدا شدن در راه خدمت بنوع مهيا ميکنم با اينهمه حاضر نيستم دو روز با کسی در اطاقی زندگی کنم. اين حقيقت را بتجربه دريافته ام. بمحض اين که کسی را نزد خود مييابم احساس ميکنم که حس عزت نفس مرا جريحه دار ميسازد و آزاديم را به مخاطره ميافکند. بعيد نيست که پس از بيست و چهار ساعت نسبت به بهترين مرد جهان در دل احساس کين و عداوت نمايم و از يکی برای آنکه خيلی کند غذا ميخورد و از ديگری برای آنکه زکام است و مرتب بينی ميگيرد متنفر گردم. بمحض اينکه کسی دست به من بزند نسبت بهمه مردم احساس دشمنی ميکنم. اما اين نکته هم در عين حال کاملا صحيح است که هر قدر بيشتر نسبت به افراد احساس تنفر ميکنم آتش عشقم نسبت به انسانيت شعله ورتر ميگردد. " اما چه بايد کرد؟ در اين صورت تکليفم چيست؟ آيا نبايد مايوس شد؟ - خير! همين اندازه که احساس ناراحتی ميکنی خود مايه اميدواری است. تا جايی که ميسر است خوبی کن. اين نيکی بحساب تو منظور ميشود. تا کنون هم خيلی برای آن باين صراحت با من سخن گفتی که از راستگويی تو تمجيد کنم. بدون شبهه هرگز در راه عشق مثبت بجايی نخواهی رسيد. همه اينها تنها در رويا و خوابهای تو وجود خواهد داشت .و خود زندگی نيز همچون خوابی بسر خواهد رسيد و در اين صورت بدون شبهه ديگر بفکر حيات آينده نخواهی بود و سرانجام به يک صورتی آرامش خواهی يافت. - تو کاملا مرا مغلوب کردی. تنها حالا يعنی در همين لحظه که تو صحبت کردی دريافتم که در حقيقت منظورم جلب ستايش تو بود و تنها برای آن گفتم قادر به تحمل ناسپاسی نيستم که تو راستگويی مرا تقدير کنی. تو فکر مرا بيان کردی و منظور مرا دريافتی و هدفم را برای خودم شرح دادی. - راست می گويی؟ حالا پس از اين اعتراف خيال می کنم که تو راست ميگويی و قلب پاک داری. هرگاه بسعادت هم نايل نگردی دست کم بياد آور که راه راست را اختيار کرده ای و بهتر است هرگز از اين راه خارج نشوی. مخصوصا از هر دروغی بگريز و هرگز بخودت دروغ نگو. مراقب دروغگويی خودباش و در هر ساعت و هر لحظه به اين موضوع توجه کن. همچنين از ابراز نفرت نسبت به ديگران و خودت جداّ احتراز نما. بمحض اينکه يک آلودگی در خويشتن مشاهده کنی تنها علم بدان موجب تطهير تو ميگردد. از ترس هم بپرهيز گو اينکه ترس هم خود زاييده دروغگويی است. در تعقيب عشق هرگز از نقص و ناتوانی خودت نهراس و همچنين از اقدامات ناپسند خود نيز وحشت نداشته باش. بسيار متاسفم که نمی توانم مطلب سرورانگيزی را با تو در ميان نهم زيرا عشق حقيقی بمراتب دشوارتر و جانکاه تر از عشق رويايی است. عشق رويايی تشنه اقدامات شتاب آميز و فوری است که بتوانند آنرا ارضا نموده و توجه عمومی را جلب کنند و در اين موقع است که غالبا زندگی خود را در راه اين عشق فدا می کنند بشرط آنکه اين فداکاری ديری نپايد و اقدام هر چه زودتر صورت گيرد و همه آنرا مشاهده کنند و زبان به تحسين گشايند و حال آنکه عشق مثبت يعنی کار و تسلط بر نفس کاری بس دشوار است. وبهمين جهت برای بسياری از اشخاص اين عشق خود علمی دارد. اما بتو ميگويم از همان لحظه ای که با نهايت وحشت و نگرانی مشاهده کردی که با وجود تمام مساعی خود به مقصد نزديک نشده ای بلکه برعکس از هدف دورتر رفته ای در همين لحظه ناگهان به مراد می رسی و با نهايت صراحت احساس ميکنی که قدرت اعجاز انگيز باری تعالی که پيوسته بتو مهر ميورزيد و بطور اسرارانگيزی هدايتت ميکرد بر تو سايه افکنده است. ... <p> برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66 نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه " </TABLE></body></html> به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود. ... مادر ليزا گفت: - آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن.. آنگاه دستهای خود را بشکل صليب رويهم نهاد و بفکر فرو رفت. زوسيما پرسيد: - از چيزی رنج می بری ؟ - از بی ايمانی. - از ايمان نداشتن به خدا - آه ! خير! خير! جرات نميکنم چنين فکری را به ذهن راه دهم ولی اين زندگی آينده که اينهمه درباره آن بحث ميکنند معمای بزرگی است! هيچکس نمی تواند به اين سوال پاسخ دهد... . - البته کشنده است ولی هيچ چيز را نميتوان اثبات کرد. با اينهمه می توان ايمان آورد. - چطور؟ به چه شکل ؟ - بر اثر عشق شديد و مثبت. سعی کن حتی المقدور همنوع خودت را دوست بداری وبتدريج که در اين عشق پيشرفت کردی بوجود خدا و جاودانی روح خودت ايمان خواهی آورد. هر گاه در ابراز عشق بديگران به مرحله ای برسی که خود را بکلی فراموش کنی آنگاه با نهايت اعتماد ايمان خواهی آورد. کمترين شکی به روح تو راه نخواهد يافت. تجربه اين حقيقت را اثبات کرده است. - عشق شديد و مثبت؟ اينهم خود مساله ای است! آنهم چه مساله دشواری ! من آنقدر انسانيت را دوست دارم که غالب اوقات فکر ميکنم از همه چيز خود حتی از ليزا چشم بپوشم و تارک دنيا شوم. ديدگان خود را مي بندم و بفکر فرو ميروم و خواب مي بينم و در اين لحظات در خود نيروی خارق العاده ای احساس ميکنم. هيچ زخمی، هيچ جراحتی مرا نمی ترساند. همه را با دست خود خواهم شست و خواهم بست. پرستار اين تيره بختان خواهم شد و حتی حاضرم زخمهای آنان را ببوسم. - جای شکرش باقی است.. باز هم خوب است که ذهن تو متوجه اين مسايل است و بموضوع های ديگری نمی انديشی. هر گاه بر حسب تصادف فرصتی پيش آيد تو ميتوانی کار نيکی انجام دهی. مادر ليزا با حرارت و حتی يک نوع آشفتگی گفت: - درست است ولی آيا ميتوانم بيش از اين چنين عمری را تحمل کنم؟ موضوع اساسی اين است. اين است مساله ای که مرا شکنجه می دهد. چشمهای خود را می بندم و از خودم می پرسم: " آيا ميتوانی مدت مديدی اين زندگی را ادامه دهی؟ اگر بيماری که زخمهايش را ميشويي بيدرنگ از تو سپاسگزاری نکند و برعکس فداکاری تو را ناديده انگارد و با هوسهايش ناراحتت کند، به تو پرخاش نمايد، از تو توقعات بيجا داشته باشد و (بطوريکه زياد برای اشخاص رنجيده پيش ميايد) عليه تو به مافوقت شکايت نمايد آنگاه چه خواهی کرد؟ آيا عشقت همچنان ادامه خواهد يافت؟" فکر کن من به چه نتايج دهشت انگيزی رسيده ام، اگر چيزی وجود داشته باشد که بيدرنگ آتش عشق"شديد و مثبت" مرا به انسانيت سرد کند ناسپاسی است. بعبارت ديگر من برای مزدی کار ميکنم و متوقعم که بيدرنگ حق خودم يعنی تمجيد و عشق در ازای عشقم دريافت دارم و در غير اينصورت قادر به دوست داشتن نخواهم بود. او جداَ نسبت بخود احساس تنفر شديدی می کرد. پس از اتمام سخنانش مانند حريفی چشم به پير دوخت و در انتظار اظهارات او ماند. زوسيما گفت: - اتفاقا چندی پيش پزشگی عين همين سخنان تو را ايراد ميکرد. وی مردی تقريبا سالمند و فوق العاده عاقل بود و با همان صراحتی که تو سخن ميگويی او هم صحبت ميکرد. گو اينکه سخنانش خالی از ظرافت نبود. ميگفت: " من انسانيت را بطور کلی دوست دارم ولی از خودم درشگفتم زيرا هر چه بيشتر بشريت را بطور کلی دوست ميدارم نسبت باشخاص بطور انفرادی کمتر مهر و محبت در دل احساس ميکنم. در خواب و عالم رويا غالبا برای خدمت به انسانيت آماده ميشوم و گاهی خود را برای فدا شدن در راه خدمت بنوع مهيا ميکنم با اينهمه حاضر نيستم دو روز با کسی در اطاقی زندگی کنم. اين حقيقت را بتجربه دريافته ام. بمحض اين که کسی را نزد خود مييابم احساس ميکنم که حس عزت نفس مرا جريحه دار ميسازد و آزاديم را به مخاطره ميافکند. بعيد نيست که پس از بيست و چهار ساعت نسبت به بهترين مرد جهان در دل احساس کين و عداوت نمايم و از يکی برای آنکه خيلی کند غذا ميخورد و از ديگری برای آنکه زکام است و مرتب بينی ميگيرد متنفر گردم. بمحض اينکه کسی دست به من بزند نسبت بهمه مردم احساس دشمنی ميکنم. اما اين نکته هم در عين حال کاملا صحيح است که هر قدر بيشتر نسبت به افراد احساس تنفر ميکنم آتش عشقم نسبت به انسانيت شعله ورتر ميگردد. " اما چه بايد کرد؟ در اين صورت تکليفم چيست؟ آيا نبايد مايوس شد؟ - خير! همين اندازه که احساس ناراحتی ميکنی خود مايه اميدواری است. تا جايی که ميسر است خوبی کن. اين نيکی بحساب تو منظور ميشود. تا کنون هم خيلی برای آن باين صراحت با من سخن گفتی که از راستگويی تو تمجيد کنم. بدون شبهه هرگز در راه عشق مثبت بجايی نخواهی رسيد. همه اينها تنها در رويا و خوابهای تو وجود خواهد داشت .و خود زندگی نيز همچون خوابی بسر خواهد رسيد و در اين صورت بدون شبهه ديگر بفکر حيات آينده نخواهی بود و سرانجام به يک صورتی آرامش خواهی يافت. - تو کاملا مرا مغلوب کردی. تنها حالا يعنی در همين لحظه که تو صحبت کردی دريافتم که در حقيقت منظورم جلب ستايش تو بود و تنها برای آن گفتم قادر به تحمل ناسپاسی نيستم که تو راستگويی مرا تقدير کنی. تو فکر مرا بيان کردی و منظور مرا دريافتی و هدفم را برای خودم شرح دادی. - راست می گويی؟ حالا پس از اين اعتراف خيال می کنم که تو راست ميگويی و قلب پاک داری. هرگاه بسعادت هم نايل نگردی دست کم بياد آور که راه راست را اختيار کرده ای و بهتر است هرگز از اين راه خارج نشوی. مخصوصا از هر دروغی بگريز و هرگز بخودت دروغ نگو. مراقب دروغگويی خودباش و در هر ساعت و هر لحظه به اين موضوع توجه کن. همچنين از ابراز نفرت نسبت به ديگران و خودت جداّ احتراز نما. بمحض اينکه يک آلودگی در خويشتن مشاهده کنی تنها علم بدان موجب تطهير تو ميگردد. از ترس هم بپرهيز گو اينکه ترس هم خود زاييده دروغگويی است. در تعقيب عشق هرگز از نقص و ناتوانی خودت نهراس و همچنين از اقدامات ناپسند خود نيز وحشت نداشته باش. بسيار متاسفم که نمی توانم مطلب سرورانگيزی را با تو در ميان نهم زيرا عشق حقيقی بمراتب دشوارتر و جانکاه تر از عشق رويايی است. عشق رويايی تشنه اقدامات شتاب آميز و فوری است که بتوانند آنرا ارضا نموده و توجه عمومی را جلب کنند و در اين موقع است که غالبا زندگی خود را در راه اين عشق فدا می کنند بشرط آنکه اين فداکاری ديری نپايد و اقدام هر چه زودتر صورت گيرد و همه آنرا مشاهده کنند و زبان به تحسين گشايند و حال آنکه عشق مثبت يعنی کار و تسلط بر نفس کاری بس دشوار است. وبهمين جهت برای بسياری از اشخاص اين عشق خود علمی دارد. اما بتو ميگويم از همان لحظه ای که با نهايت وحشت و نگرانی مشاهده کردی که با وجود تمام مساعی خود به مقصد نزديک نشده ای بلکه برعکس از هدف دورتر رفته ای در همين لحظه ناگهان به مراد می رسی و با نهايت صراحت احساس ميکنی که قدرت اعجاز انگيز باری تعالی که پيوسته بتو مهر ميورزيد و بطور اسرارانگيزی هدايتت ميکرد بر تو سايه افکنده است. ... برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66 نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه " مثالی کامل در مورد استفاده از شناسه dir در عناصر مختلف <html> <head> <meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8"> </head> <body> <h3 dir="rtl">سر تيتر راست به چپ </h3> <div dir="rtl">راست به چپ با کمک عنصر div </div> <p dir="rtl">راست به چپ با کمک عنصر پاراگراف </p> <p><INPUT TYPE="text" NAME="" dir="rtl" Value="سلام قربان، حال شما چطوره؟"> <p> <INPUT TYPE="submit" dir="rtl" Value="ارســـــــــال"> <p><SELECT NAME="test" dir="rtl"> <OPTION VALUE="" SELECTED >فهرست راست به چپ در سمت پيش فرض <OPTION VALUE="">------------------------ <OPTION VALUE="">رديف 1 <OPTION VALUE="">رديف 2 <OPTION VALUE="">رديف 3 <OPTION VALUE="">رديف 4 <OPTION VALUE="">رديف 5 </SELECT> <p align=right><SELECT NAME="test" dir="rtl"> <OPTION VALUE="" SELECTED >فهرست راست به چپ در سمت راست <OPTION VALUE="">------------------------ <OPTION VALUE="">رديف 1 <OPTION VALUE="">رديف 2 <OPTION VALUE="">رديف 3 <OPTION VALUE="">رديف 4 <OPTION VALUE="">رديف 5 </SELECT> <p> <TABLE border="1"><TR dir="rtl"> <TD>abcdef</TD> <TD>ABC</TD> <TD dir="ltr">Forced Left to Right</TD> </TR> <TR> <TD dir="rtl">اين متن بايد از راست به چپ چيده شود.</TD> <TD>abcdefgh</TD> <TD dir="rtl">اين متن بايد از راست به چپ چيده شود.</TD> </TR> <TR> <TD >a</TD> <TD>ab</TD> <TD >abc</TD> </TR> </TABLE></body> </html> سر تيتر راست به چپ <br /> راست به چپ با کمک عنصر div <br /> راست به چپ با کمک عنصر پاراگراف <br /> <br /> <br /> <br /> <br /> <br /> abcdef ABC Forced Left to Right<br /> اين متن بايد از راست به چپ چيده شود. abcdefgh اين متن بايد از راست به چپ چيده شود.<br /> a ab abc<br /> <br /> <br /> <br /> C<br /> <br /> <br />