به تهرون 20 رای دهید

.

جدیدترین ها | December 2005 »

November 30, 2005 1688

آموزش HTML جلسه اول (مقدمه اي بر HTML)

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

--------------------------------------------------------------------------------

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

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

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

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

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

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

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

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

    • --------------------------------------------------------------------------------

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

    <html>

    <head>

    <title>Title of page</title>

    </head>

    <body>

    This is my first html page

    <b>This text is bold</b>

    </body>

     </html>


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


    --------------------------------------------------------------------------------

    توضيح مثال بالا
    اولين تگ مثال بالا تگ ميباشد. از روی اين تگ، مرورگر نوع متن يعنی اچتمل بودنش را يافته و از روی انتهای متن اچتمل را ميبابد.

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

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

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

    --------------------------------------------------------------------------------

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


    --------------------------------------------------------------------------------

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

    --------------------------------------------------------------------------------

    بيشترين سوالات پرسيده شده ( FAQ ) :
    فايلم را درست کردم ولی هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟
    مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.)

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

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

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

    منبع: Khaterat.com

    Posted by Farzin at 08:41 PM | | TrackBacks 0

    1690

    آموزش HTML جلسه دوم (WWW & HTML )

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

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

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

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

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

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

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

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

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

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

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

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

    • --------------------------------------------------------------------------------

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

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

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

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

    • --------------------------------------------------------------------------------

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

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

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

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

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

    • --------------------------------------------------------------------------------

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

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

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

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

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

    • منبع: Khaterat.com

    Posted by Farzin at 07:25 PM | | TrackBacks 0

    1691

    آموزش Html جلسه سوم : عناصر(Elements)

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

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

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

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

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

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

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

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

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

    • --------------------------------------------------------------------------------

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

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

    <html>

    <head>

    <title>Title of page</title>

    </head>

    <body>

    This is my first html page.

    <b>This text is bold</b>

    </body>

    </html>


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

    <b>This text is bold</b>

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

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

    <body>

    This is my first homepage.

    <b>This text is bold</b>

    </body>

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

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

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

    <body bgcolor="black">

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

    <table border="0" width="100" height="60" align="center" >

    ......

    </table>


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


    منبع: Khaterat.com

    Posted by Farzin at 06:53 PM | | TrackBacks 0

    1692

    آموزش Html جلسه چهارم: تگ های اصلی (Basic Tags)

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

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

    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h4>This is a heading</h4>
    <h5>This is a heading</h5>
    <h6>This is a heading</h6>






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

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








    <p>This is a paragraph</p> 
    
<p>This is another paragraph</p>







    سطر جديد (Line Breaks)




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








    <p>This <br> is a para<br>graph with line breaks</p>






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




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







     

    <-- This is a comment --!>






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




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




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




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




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




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




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






    تگهاي اصلي

    در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي
    مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که
    براي هر عنصر فهرستي از شناسه ها يا Attributes موجود است و
    همچنين به شناسه ه

    Posted by Farzin at 05:32 PM |

    November 28, 2005 1722

    آموزش HTML جلسه پنجم: (فارسی نویسی)

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

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

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

    --------------------------------------------------------------------------------

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

  • روش کدگزاري UTF-8

    • اکيدا توصيه ميشود که براي تايپ و تمايش متون فارسي از استاندارد يونيکد و روش کدگزاري UTF-8 استفاده شود و اين روشي است که مطالب اين سايت از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسي تعيين نوع کدگزاري يا encoding صفحات فارسي است که براي اينکار بايد از متاتگ خاصي به نام 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> , ...

    منبع: Khaterat.com

    Posted by Farzin at 08:21 PM | | TrackBacks 0

    1721

    آموزش HTML جلسه ششم: فرمت دهی (Formatting)

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

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

    --------------------------------------------------------------------------------

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

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

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

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

    --------------------------------------------------------------------------------

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

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

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

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

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

    --------------------------------------------------------------------------------

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

    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 نمايش متون از قبل فرمت شده

    منبع: Khaterat.com

    Posted by Farzin at 07:50 PM | | TrackBacks 0

    1720

    آموزش HTML جلسه هفتم: (Character Entities)

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


    --------------------------------------------------------------------------------

    Character Entities

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

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

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

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


    --------------------------------------------------------------------------------

    فهرست پرکاربردترين Character Entities ها

    Result (نمايش) Description (شرح) Entity Name (نام) Entity Number (شماره عددي)
      non-breaking space    
    < less than < <
    > greater than > >
    & ampersand & &
    " quotation mark " "
    ' apostrophe    '

    چند Character Entitie با کاربردهاي کمتر

    Result Description Entity Name Entity Number
    ? cent ? ?
    ? pound ? ?
    ? yen ? ?
    ? section ? ?
    ? copyright ? ?
    ? registered trademark ? ?
    ?/td> multiplication ?/td> ?/td>
    ?/td> division ?/td> ?/td>


    منبع: Khaterat.com

    Posted by Farzin at 07:28 PM | | TrackBacks 0

    November 27, 2005 1719

    آموزش HTML جلسه هشتم: پیوندهای اچتمل (Html Links)

    در اين درس با پيوندها ( Links ) ، تگ هاي مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيري آنها آشنا خواهيد شد. همچنين شناسه هاي بسيار مهم href ،target و name تشريح خواهند شد.


    --------------------------------------------------------------------------------

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

    --------------------------------------------------------------------------------

    تگ Anchor و شناسه href

    براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و ... اشاره کنند.

    فرم کلي يک پيوند به قرار زير است:

    <a href="url">Some Text</a>

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

    براي نمونه کد اچتمل زير پيوندي به سايت www.tehroon20.com ايجاد خواهد کرد:

    <a href="http://www.tehroon20.com">Visit tehroon20.com Site</a>

    و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روي پيوند توسط بازديدکننده، مرورگر به سايت tehroon20.com خواهد رفت.

    Visit tehroon20.com Site

    شناسه target در پيوندها:

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

    <a href="http://www.tehroon20.com/" target="_blank">Visit tehroon20.com Site</a>

    خوتان آزمايش کنيد : Visit tehroon20.com 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.tehroon20.com/index.htm#top"> Goto Top! </a>

    در اثر کليک روي پيوند بالا مرورگر مستقيما به ابتداي بخش top صفحه http://www.tehroon20.com/index.htm خواهد رفت.

    لگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد url نيست و فقط نويسه # و سپس نام پيوند کافي است:

    <a href="#top"> Goto Top! </a>

    --------------------------------------------------------------------------------

    چند نکته کاربردي در مورد پيوندها:

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

    Start Tag Purpose کاربرد عنصر Anchor
    <a> Defines an anchor تعريف يک پيوند يا Anchor در يک صفحه اچتمل
    Target Attributes کاربرد حالتهاي مختلف شناسه target
    target="_blank" مرورگر پيوند را در يک پنجره جديد باز ميکند.
    target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
    target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
    target="_top" مرورگر پيوند را در فريم مادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )


    منبع: Khaterat.com

    Posted by Farzin at 05:07 PM | | TrackBacks 0

    1718

    آموزش HTML جلسه نهم: جداول (Tables)

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

    جدولها

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

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

    کد اچتمل جدولی با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر 
    <table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
    رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
    رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

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

  • در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.

  • در مثال بالا شناسه dir يا direction و مقدار rtl برای آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامی سلولهای جدول اعمال خواهذ شد.

  • ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون!

    • --------------------------------------------------------------------------------

    سرستون در جداول (Headings)

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

    کد اچتمل جدولی با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر 
    <table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
    سرستون ا سرستون 2 سرستون 3
    رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
    رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

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

    خانه های خالی در جداول (Empty Cells)

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

    کد اچتمل جدولی با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر 
    <table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td></td>
</tr>
</table>
    رديف 1، سلول 1 رديف 1، سلول 2
    رديف 2، سلول 1  

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

    کد اچتمل جدولی با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر 
    <table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>&nbsp;</td>
</tr>
</table>
    رديف 1، سلول 1 رديف 1، سلول 2
    رديف 2، سلول 1  

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

    --------------------------------------------------------------------------------

    چند نکته اساسی در مورد جداول:

  • در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادی از شناسه ها ميتوانيد استفاده کنيد که شرح همگی آنها از حوصله اين دوره مقدماتی خارج است و توصيه ميشود که از مثالهای زير و جدول واقع در انتهای اين صفحه برای مطالعه هر چه بيشتر در مورد جزئيات شناسه ها استفاده شود.

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

    • --------------------------------------------------------------------------------

    تگهای جداول

    Start Tag Purpose کاربرد
    <table> Defines a table تعريف جدول
    <th> Defines a table header تعريف سرستون در جداول
    <tr> Defines a table row تعريف رديف ها در جداول
    <td> Defines a table cell تعريف سلول يا خانه های يک جدول
    <caption> Defines a table caption تعريف عنوان جدول


    منبع: Khaterat.com

    Posted by Farzin at 04:18 PM | | TrackBacks 0

    November 26, 2005 1699

    آموزش HTML جلسه دهم: فریمها (Frames)

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


    فريمها (Frames)

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

    معايب استفاده از فريمها:

  • موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.

  • چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است.

  • صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!

    • --------------------------------------------------------------------------------

    تگ فريم ست (Frameset)

  • تگ <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد.

  • هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند.

  • داخل هر فريم ميتواند frameset ديگری قرار دهيد.

  • با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.

  • تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)

    • --------------------------------------------------------------------------------

    تگ فريم (Frame)

  • کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

    • مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.

    <html>

    <frameset cols="75%,25%">

    <frame src="frame_left.html">

    <frame src="frame_right.html">

    </frameset>

    </html>

    برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.


    --------------------------------------------------------------------------------

    شناسه های cols و rows در تگ frameset

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

    مثالهای زير را در نظر بگيريد:

    مثال 2 مثال 1 
    <html>
<frameset cols="25%,50%,25%">
   <frame src="frame_3.html">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

    <html>
<frameset cols="*,200">
   <frame src="frame_2.html">
&nbs