loading...
آموزش ها
تبلیغات ویزه
        sms.mida-co.ir



       
       
M:A بازدید : 276 پنجشنبه 10 اسفند 1391 نظرات (0)
در اين درس با فارسي نويسي، فارسي سازي و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسي اين سايت آشنا خواهيد شد. همچنين متاتگ 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 را فراموش نکرده زيرا که استاندارد آينده فارسي نويسي اينترنتي در ايران خواهد شد.
M:A بازدید : 209 پنجشنبه 10 اسفند 1391 نظرات (0)
وظيفه گروهي از تگ هاي اچتمل فرمت دهي و تعيين شکل نمايش متون ( مثلا ضخيم و 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 نمايش متون از قبل فرمت شده
M:A بازدید : 271 پنجشنبه 10 اسفند 1391 نظرات (0)
در استاندارد اچتمل گروهي از نويسه ها (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; ÷
M:A بازدید : 266 پنجشنبه 10 اسفند 1391 نظرات (0)
در اين درس با پيوندها ( 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 خواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد 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" مرورگر پيوند را در فريم مادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )
تبلیغات

تعداد صفحات : 48

درباره ما
Profile Pic
سلام نیاز به همکار:از دوستانی که در برنامه نویسی یا وبلاگ نویسی سررشته دارند دعوت به همکاری در سایت آموزشها می شود لطفا با ما تماس بکیرید و شماره بگذارید.(در قسمت تماس با ما)
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • نظرسنجی
    ازکدام بخش بیشتر خوشتان آمد
    خلاصه آمار
    آمار سایت
  • کل مطالب : 610
  • کل نظرات : 63
  • افراد آنلاین : 133
  • تعداد اعضا : 91
  • آی پی امروز : 385
  • آی پی دیروز : 83
  • بازدید امروز : 1,362
  • باردید دیروز : 167
  • گوگل امروز : 0
  • گوگل دیروز : 1
  • بازدید هفته : 1,362
  • بازدید ماه : 3,720
  • بازدید سال : 79,578
  • بازدید کلی : 750,534
  • کدهای اختصاصی

    رنک الکسا

    وضعیت آب و هوا

    پیچک

    ديكشنري آنلاين
    نرخ ارز