dl.fullsecurity.irdl.fullsecurity.ir/HTML-CSS.pdf · Learn HTML and CSS with w3schools 2012 1...

Learn HTML and CSS with w3schools 2012

1 Teaching by : H.shoja www.hshoja.ir

HTMLمقدمه اي بر

يا اچتمل و نحوه ايجاد يك فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد. HTMLدر اين درس با ويژگيهاي فايلهاي برداخته و واسطه HTML همگي يكي هستند و به نرم افزاري اطالق ميشود كه به نمايش صفحات Browser(يادآوري: مرورگر، بروزر و

كاربر با دنياي اينترنت است.)

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

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

ميباشد.

ها ميباشد. markup tag ميباشد كه متشكل از text فايلي از نوع HTMLيك فايل • ها مي فهمد كه چگونه بايد صفحه را نمايش بدهد. markup tag از روي Browserمرورگر يا • باشد. html و يا htm بايد داراي انشعاب HTMLيك فايل • ميباشد كه با هر ويرايشگر و اديتوري ساده اي قابل ايجاد است. text فايلي از نوع متن و HTMLيك فايل • ) بيان چگونگي نمايش اطالعات ميباشد. markup tagsوظيفه اصلي تگ هاي اچتمل ( •

ميخواهيد كه يك فايل اچتمل بسازيد؟

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

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

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



) كافي است كه از روي منوي Firefox تان ( معموال اينترنت اكسپلورر و يا Browerبراي ديدن فايل اچتمل باال در مرورگر يا File/Open file فايل باال را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه كنيد، مثال c:\test.html (

يكي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي كامپيوتر شما ذخيره شده باشند و يا اينكه روي سروري ديگر از اينترنت خوانده شوند. با كليك روي اين لينك فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان

توجه كنيد، مثال Addressخوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت http://www.khaterat.com/html/dars/test.html (

توضيح مثال باال

انتهاي متن >/html< ميباشد. از روي اين تگ، مرورگر نوع متن يعني اچتمل بودنش را يافته و از روي >html<اولين تگ مثال باال تگ اچتمل را ميبابد.

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

باالي مرورگر نمايش داده خواهد شد.

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

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

است قرار دارد. khaterat.com قرار گرفته و روي وب سروري كه ميزبان سايت dars بوده ، در شاخه test.htmlنام فايل

؟ html يا htmانشعاب فايل

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

) HTML Editorsنكته اي در مورد اديتورهاي اچتمل (

امكان نوشتن و طراحي صفحات Claris Home Page و يا FrontPageبا وجوديكه با استفاده از اديتورهاي اختصاصي اچتمل مانند وجود دارد اما توصيه ميشود كه از اديتورهاي معمولي "What You See Is What You Get" يا WYSIWYGاچتمل بصورت

متن براي تهيه صفحات خود استفاده كرده، عملكرد تگها را شناخته و هيچگاه بدون اينكه بدانيد كاربرد يك تگ چيست آنرا بكار نبريد. (اديتورها



همان برداشگرهاي متن هستند.)

) : FAQبيشترين سواالت پرسيده شده (

فايلم را درست كردم ولي هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشكل كجاست؟ كرده ايد.( نام و Open ) ذخيره كرده ايد. در ضمن مطمئن شويد كه همان فايل را html يا htmمطمئن شويد كه فايل را با انشعاب درست (

مرورگرتان چك كنيد.) Addressمسير فايل را در قسمت

هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشكل كجاست؟

يا حافظه موقت خود براي خواندن صفحات استفاده ميكنند.براي Cacheبه خاطر باال بردن سرعت، هميشه مرورگرها از نسخه هاي موجود در يا F5 كنيد. در اينترنت اكسپلورر كليد Refresh/Reloadوادار كردن مرورگر به خواندن اصل صفحه كافي است كه در مرورگرتان

View/Refresh و در فايرفاكس Ctrl+R يا View/Reload .اينكار را انجام خواهند داد

استفاده كنم؟ Firefox و Internet Explorerآيا ميتوانم از هر دو مرورگر Internet 5بله، فقط اگر از استاندارد يونيكد براي فارسي نويسي استفاده ميكنيد، براي ديدن درست صفحات فارسي بايد از نسخه

Explorer و به باال و در مورد Firefox و به باال استفاده كنيد. 1.0 از نسخه

را داونلود كنم؟ Firefox و Internet Explorerكجا ميتوانم آخرين نسخه از مرورگرهاي Internet Explorer اينجاست و Firefox .اينجا

ام را چگونه به روي اينترنت منتقل كنم؟HTMLفايهاي كه وظيفه انتقال فايلها در اينترنت را دارند كمك بگيريد. FTPبايد از نرم افزارهاي

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

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

.وب شبكه اي است متشكل از تمامي كامپيوترهاي دنيا، شبكه اي از شبكه ها ،اينترنت، وبWWW ،web يا World Wide Web .همگي يك چيزند .تمامي كامپيوترهاي وب ميتوانند با هم ارتباط داشته باشند كامپيوترهاي موجود در وب با كمك استاندارد ارتباطي يا پروتوكلHTTP . با هم ارتباط برقرار ميكنند

http://www.microsoft.com/windows/ie/default.mspx�

http://www.mozilla.com/firefox/�

http://www.mozilla.com/firefox/�



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

اطالعات صفحات وب داخل فايلهائي به نامWeb Pages) و يا متن هاي وب HTML documents .قرار دارند ( اين فايلها يا صفحات رويWeb Server .يا كامپيوترهاي سرويس دهنده وب ذخيره شده اند براي ديدن صفحات وب از نرم افزاري به نام مرورگر و ياWeb Browser .استفاده ميشود سرورهاي وب ياWeb Servers كامبيوترهاي هستند كه با كمك استاندارد ارتباطي HTTP به تبادل اطالعات با مرورگرها

)web Clients . .ميبردازند ( مرورگرهاي وب راWeb browsers يا web Clients . هم مينامند دو مرورگرInternet Explorer و Firefox .جزو معروفترين مرورگرها حساب ميشوند مرورگرInternet Explorer متعلق به شركت مايكروسافت و مرورگر Firefox متعلق به شركت Mozilla .ميباشد ّ مرورگرFirefox داراي امنيت بيشتري بوه و بصورت open Source ميباشد و نسبت به Internet Explorer برتر

محسوب ميشود. مرورگرInternet Explorer گاهي مختصرا IE .ناميده ميشود :اسامي بعضي از مرورگرهاي ديگر به قرار روبرو استMosaic, Netscape Navigator, Opera, Mozilla,

Safari(Mac computers) !اميدوارم كه شما طراح و برنامه نويس اولين مرورگر تمامآ فارسي باشيد

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

يك مرورگر با كمك يكRequest .درخواستي براي خواندن يك صفحه از وب سرور ميكند اينRequest يا درخواست بر اساس استاندارد ارتباطي يا پروتوكل HTTP .بوده و شامل آدرس صفحه مورد نظر ميباشد آدرس يك صفحه وب چيزي شبيهhttp://www.khaterat.com/www/htmlwww.php .است

است و Domain نام دومين يا www.khaterat.com نوع پروتوكل و يا استاندارد ارتباطي را تعيين ميكند، httpبخش //:/www/htmlwww.php .مسير و نام صفحه اي است كه بايد خوانده شود

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

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



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

تعيين استاندارد هاي وب ربطي به شركتهاي مايكروسافت و ياMozilla .ندارد World Wide Web Consortium يا W3C .متولي بين المللي تعيين استانداردهاي وب است HTML, CSS and XML .از مهمترين استانداردهاي تصويب شده وب ميباشند براي ديدن فهرست تمامي استاندارهاي تعريف شده توسطW3C به اين صفحه از دايرالمعارف WIKI :مراجعه كنيد W3C

) Elementsعناصر (

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

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

ساخته ميشوند. Elementsبا كمك تگ هاي اچتمل عناصر يا • عنصر تعريف شده است. 80در زبان اچتمل حدود • ساخته ميشوند. < و >) charتگ هاي اچتمل بوسيله دو نويسه ( • >b<test>/b<تگ هاي اچتمل معموال بصورت زوج ظاهر ميشوند، مانند • تگ پاياني نام دارد. >/b< تگ شروع و تگ دوم مثال >b<تگ اول در يك زوج تگ مثال • "test" ناميده ميشود، مثال element contentمتن بين تگ اول و تگ دوم در يك زوج تگ محتواي عنصر يا • case) بنويسيد و upper case) و يا بزرگ (lower 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>

http://en.wikipedia.org/wiki/W3c�

http://en.wikipedia.org/wiki/W3c�

http://www.w3.org/TR/html401/index/elements.html�

http://www.w3.org/TR/html401/index/elements.html�



</html>

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

<b>This text is bold</b>

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

*** مثال دوم از يك عنصر اچتمل :

<body> This is my first homepage. <b>This text is bold</b> </body>

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

>body< .يك فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد

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

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

تعيين ميكند براي نمونه اگر ميخواهيد كه رنگ زمينه صفحه اچتملتان سياه باشد كافي است كه به شكل زير عمل كنيد :

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

ميباشد. <table border="0" width="100" height="60" align="center" > ... </table>

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

نوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد. bgcolorشناسه " بنويسيد و اختيار دست شما است فقط در مواردي كه مقدار يك شناسه شامل نويسه ' و يا "مقدار يك شناسه را ميتوانيد داخل نويسه هاي

استفاده شود. 'هم ميشود بايد از نويسه

) Basic Tagsتگ هاي اصلي (

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



آشنا خواهيد شد . يكي از بهترين روش هاي يادگيري تگ هاي اچتمل ديدن مثالها و تغيير آنها ميباشد و با كمك اديتور اختصاصي ما و با استفاده از امكانات فارسي نويسي آن به صورت آنالين ميتوانيد به مطالعه و يادگيري مثالها پرداخته، كدهاي اچتمل را تغيير داده و با كليك روي

به مشاهده نتايج بپردازيد. "نمايش نتايج"دكمه

مثالها :

مثالي ساده از يك صفحه اچتمل تماما body در صفحه مرور گر نمايش داده شده و در واقع محتواي عنصر "Hello World!"در اين مثال بسيار ساده عبارت معروف

نمايش داده خواهد شد.

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

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

مثالهاي بيشتر:

)Headingsسر تيترها (

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

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

مثال باال در صفحه مرورگر بدين شكل نمايش داده خواهد شد.

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

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

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


)Line Breaksسطر جديد (

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

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


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

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

توجه كنيد! فقط يكي و آنهم در "!"نويس و ديگر افرادي كه احتماال در آينده با كد اچتمل كار خواهند كرد مفيد خواهد بود. (به محل نويسه ابتدا)



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

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

توجه داشته باشيد كه بدليل وجود مرورگرهاي متفاوت (اكسپلورر، نت اسكيپ، فايرفاكس، صفري،...) و به دليل تفاوت دقت نمايش صفحه نمايش كامپيوترها، صفحات اچتمل با اندكي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي كنيد كه صفحاتتان را نه تنها با

اكسپلورر كه معروفترين مرورگر است بلكه با فايرفاكس و نت اسكيپ و حتي مرورگرهاي كامپيوترهاي مكينتاش چك كرده و همچنين در دقت آن را امتحان كنيد. 1024X768 و 800x600هاي نمايش

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

شد.

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

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

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

http://khaterat.com/www/cgi-bin/mesal.php?fn=mesal8&lang=e�

http://khaterat.com/www/cgi-bin/mesal.php?fn=mesal8&lang=e�

http://khaterat.com/www/dars4.php�



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

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

مثالهاي بيشتر:

باز هم مثال پاراگرافها اين مثال بعضي از مقادير قراردادي عناصر پاراگراف را شرح ميدهد.

ترازبندي پاراگراف ها نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه align اي به نام attributeاين مثال نحوه تراز بندي يك پاراگراف را با كمك شناسه يا

نمايش داده خواهد شد. )"align="center (

رفتن سر سطر جديد را در يك متن اچتمل نشان ميدهد. >br<اين مثال نحوه استفاده از تگ

سر تيترها را در يك متن اچتمل نشان ميدهد. >h1< .... >h6<اين مثال نحوه استفاده از تگهاي

ترازبندي سر تيترها نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه align اي به نام attributeاين مثال نحوه تراز بندي يك سر تيتر را با كمك شناسه يا

نمايش داده خواهد شد. )"align="center (

نمايش خطوط افقي ميباشد. >br<اين مثال نحوه نمايش خطوط افقي با استفاده از تگ

commentاستفاده از در كدهاي اچتمل را نمايش ميدهد. commentاين مثال نحوه استفاده از

تعيين رنگ زمينه صفحه نشان ميدهد. bgcolor به نام body ) عنصر attributeاين مثال نحوه تعيين رنگ زمينه صفحه را با كمك يكي از شناسه هاي (

)Background Color ( )"bgcolor ="blue (

http://www.khaterat.com/www/cgi-bin/mesal.php?fn=mesal8&lang=e�

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

) در نسخه هاي آينده Deprecated موجود است و همچنين به شناسه هاي كنارگذاشته شده (Attributesعنصر فهرستي از شناسه ها يا اچتمل توجه داشته باشيد و سعي كنيد كه از آنها استفاده نكنيد.

:

Start Tag Purpose كاربرد

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

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

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

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

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

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

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

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

فارسي نويسي

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

درس قبلي، درس بعدي

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

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

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

بسيار خوبي براي فارسي سازي ميباشند:

http://www.w3.org/TR/html401/struct/global.html#edef-HTML�

http://www.w3.org/TR/html401/struct/global.html#edef-BODY�

http://www.w3.org/TR/html401/struct/global.html#edef-H1�

http://www.w3.org/TR/html401/struct/text.html#edef-P�

http://www.w3.org/TR/html401/struct/text.html#edef-BR�

http://www.w3.org/TR/html401/present/graphics.html#edef-HR�

http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.4�

http://www.w3.org/TR/html401/cover.html#minitoc�



* راهنماي فارسي سازي ويندوز

* قلم و صفحه كليد استاندارد *unicode.org

* پروزه فارسي وب FAQ* وبالگ فارسي

يو ني كد چيست؟

)هاي مختلف است. characterبه طور خالصه و با صرف نظر از بعضي از پيچيدگيها مي شود گفت يوني كد مجموعه اي بسيار بزرگ از نويسه (اين مجموعه تقريباً تمام نويسه هاي مورد استفاده در كامپيوتر در جهان را در خود دارد. از حرف سين الفباي فارسي گرفته تا حروف الفباي چيني

يكتا ٴو انواع و اقسام عالمت ها و حتي خط ميخي فارسي باستان. مهمترين خاصيت يوني كد اين است كه به هر كدام از اين نويسه ها يك شماره است در حالي كه كد يوني كد ي عربي U+06CCاختصاص مي دهد كه به آن كد يوني كد آن نويسه مي گويند. كد يوني كد ي فارسي

U+064A است. وقتي يك پرونده ذخيره مي شود اين كدها هستند كه ذخيره مي شوند نه شكل نويسه ها. بنابر اين تأثير اين مسأله اين است كه اگر پرونده اي با قالب يو ني كد ذخيره شود و در هر كجاي ديگر دنيا كه از يوني كد استفاده مي كند باز شود، همان نويسه ها درونش قرار

خواهند داشت.

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

UTF-8روش كدگزاري • اسنفاده شود و اين روشي است كه UTF-8اكيدا توصيه ميشود كه براي تايپ و نمايش متون فارسي از استاندارد يونيكد و روش كدگزاري

صفحات encoingمطالب اين سايت و اديتور آنالينش از آن استفاده ميكند. نكته مهم در نمايش صحيح متون فارسي تعيين نوع كدگزاري يا صفحات اچتمل به شكل زير استفاده شود: head در بخش http-equivفارسي است كه براي اينكار بايد از متاتگ خاصي به نام

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

) را تشخيص داده و ديگر مثال Encoding قبل از نمايش صفحه از روي متاتگ فوق نوع كدگزاري (Browserدر اينصورت مرورگر يا توسط بازديدكننده سايت نخواهد Encoing ) نوع View/Encoing/Unicode / UTF-8 : 5نيازي به تعيين دستي (دراكسپلورور

بود. dir ي به نام attributeشناسه يا •

) ميباشد. در مورد متون و Right To Leftيا ltr از چپ به راست (defaultسمت و جهت نمايش متون التين به صورت پيش فرض و يا همان dir ي به نام attribute تغيير دهيد. شناسه يا "راست به چپ"جمالت فارسي بايد با كمك روشي جهت نمايش پيش فرض را به

direction : اين كار را براي شما انجام ميدهد. اين شناسه داراي دو مقدار ممكن ميباشد

dir="ltr" , Left-to-right text. - چپ به راست dir="rtl" , Right-to-left text. - راست به چپ

http://www.unicode.org/�

http://www.unicode.org/�

http://khaterat.com/www/faq_weblog.php�

http://khaterat.com/www/faq_weblog.php�



كافي است كه به يكي از شكلهاي زير عمل شود: div يا p با كمك عناصر "سالم به دنياي وب!"مثال براي نمايش جمله فارسي

<p dir="rtl"> سالم به دنياي وب </p> <div dir="rtl"> سالم به دنياي وب </div>

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

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

به اين صفحه "راست به چپ"مثالهاي زير نحوه ترازبندي متون فارسي را به نمايش ميگذارند و براي مطالعه بيشتر در مورد ترازبندي متون هم براي مطالعه مفيد ميباشند.) lang و شناسه BDO ،Spanمراجعه كنيد. (عناصر

مثالهاي فارسي نويسي: : سالم ... 1مثال

سمت و جهت div نوع كدگزاري را تعيين ميكند و در اينجا با كمك تگ http-equiv توجه كنيد. متا تگ div و تگ headبه بخش معادل ltr و right to left مخفف rtl و جهت بوده و direction به معناي dirنوشتن مطالب (از راست به چپ يا بلعكس) تعيين ميگردد.

left to right .ميباشد

: متن ها و پاراگراف بندي 2مثال جهت نوشتن مطالب (از راست به چپ يا بلعكس) تعيين ميگردد. dir توجه كنيد. با كمك شناسه p و divبه عناصر

: متون فارسي و التين در كنار هم 3مثال

آن dir و شناسه divمثالي كاملتر با راهنماي استفاده از عنصر

html در عنصر dir : شناسه 4مثال بكار ببريد جهت نمايش تمامي متون از راست به چپ شده و براي نوشتن از چپ به راست بايد به صورت html را در عنصر dirاگر شناسه

مرورگر در سمت چپ صفحه نمايش داده Scrool down را استفاده كنيد. همچنين در اين حالت ماسماسك! dir="ltr"موردي شناسه ماسماسك همان سمت راست خواهد ماند. body در عنصر dirخواهد شد. در صورت استفاده شناسه

: مثال كامل 5مثال

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

: ... فقط تصور كن... 6مثال در جداول dirاستفاده از شناسه

http://www.khaterat.com/www/cgi-bin/mesal.php?fn=mesal18�




) Formattingفرمت دهي (

بودن، مورب يا ايتاليك بودن ) ميپردازند.(به ياد boldگروهي از تگ هاي اچتمل به فرمت دهي و تعيين شكل نمايش متون ( مثال ضخيم يا آشنا formating اچتمل اين خواص به استايل شيتها محول شده است.) در اين درس با اين گروه از تگهاي 4داشته باشد كه در نسخه

خواهيد شد:

<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 Formatted يا preنمايش متون از قبل شكل داده شده با كمك عنصر

بهترين انتخاب ميباشد. preبراي نمايش اشعار فارسي استفاده از عنصر

عناصر ديگر شكل دهي متن code , kbd , tt , samp , var , del , ins و ... با كمك عناصر deleted ،underlineنمايش متون

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

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

بعدي ميباشد. o ) اگر صفحه مورد نظر از مجموعه فريمهاFrameset استفاده كرده باشد براي ديدن سورس كد اصلي فريمها كافي است كه ابتدا با (

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

كرده و كد اچتمل هر فريم را جداگانه ببينيد. 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>

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


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

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

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

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

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

<strong> Defines strong text نمايش قوي يا همانBold

<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 از رده خارج


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

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

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

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

http://www.w3.org/TR/html401/present/graphics.html#edef-B�

http://www.w3.org/TR/html401/present/graphics.html#edef-BIG�

http://www.w3.org/TR/html401/struct/text.html#edef-EM�

http://www.w3.org/TR/html401/present/graphics.html#edef-I�

http://www.w3.org/TR/html401/present/graphics.html#edef-SMALL�

http://www.w3.org/TR/html401/struct/text.html#edef-STRONG�

http://www.w3.org/TR/html401/struct/text.html#edef-SUB�

http://www.w3.org/TR/html401/struct/text.html#edef-SUP�

http://www.w3.org/TR/html401/struct/text.html#edef-ins�

http://www.w3.org/TR/html401/struct/text.html#edef-del�

http://www.w3.org/TR/html401/struct/text.html#edef-CODE�

http://www.w3.org/TR/html401/struct/text.html#edef-KBD�

http://www.w3.org/TR/html401/struct/text.html#edef-SAMP�

http://www.w3.org/TR/html401/present/graphics.html#edef-TT�



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

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


Character Entities انتهاي يك تگ را < شروع يك تگ و نويسه >) داراي معني خاصي بوده ( مثال نويسه Characterدر استاندارد اچتمل گروهي از نويسه ها (

نشان ميدهد. ) و براي نمايش آنها در صفحاتتان مستقيما قابل مصرف نميباشند. در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج فرا خواهيد گرفت. Character Entitiesآنها را با كمك


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

entities :از سه قسمت تشكيل ميشود ) & (ampersand- نويسه 1 entity و سپس شماره عددي # يا نويسه entity- نام 2) ; (semicolon - و نهايتا نويسه 3

شماره 60 و entity نام lt استفاده كنيد. در اين مثال ;60#& يا از ;lt& دو روش وجود دارد، ميتوانيد از >براي مثال براي نمايش نويسه عددي آن ميباشد.

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

ميباشند. Case Sensitive ها به كوچك و بزرگي حروف حساس هستند و در واقع entityداشته باشيد كه

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

استفاده كنيد. ;nbsp&آنرا ناديده ميگيرند و براي نمايش فاصله هاي اضافي بايد از

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

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

non-breaking space

< less than < <

http://www.w3.org/TR/html401/struct/text.html#edef-VAR�

http://www.w3.org/TR/html401/struct/text.html#edef-PRE�





> greater than > >

& ampersand & &

" quotation mark " "

' apostrophe '

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

Result Description Entity Name Entity Number

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

§ section § §

© copyright © ©

® registered trademark ® ®

× multiplication × ×

÷ division ÷ ÷

سري به اين صفحه بزنيد. 4 ها در اچتمل Character entityبراي ديدن فهرست كل

) HTML Linksپيوندهاي اچتمل (

و نحوه به كار گيري آنها آشنا خواهيد شد، به ياد داشته A يا Anchor ) ، تگ هاي مربوطه مخصوصا تگ Linksدر اين درس با پيوندها ( باشيد كه با كمك پيوندها است كه صفحات وب به هم مرتبط ميشوند و همانند تاري نامرئي اطالعات و صفحات وب را به هم گره ميزنند.

تشريح خواهند شد. name و href، targetهمچنين شناسه هاي بسيار مهم


) در مقابل متن خطي Hyper Text) ميشوند. اصطالح ابرمتن (Linkدر محيط وب، صفحات اچتمل با كمك پيوندها به يكديگر متصل (

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

مثالها

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

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



مثالهاي بيشتر

href و شناسه Anchorتگ

استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، >a<براي ايجاد پيوند به صفحات ديگر از تگ فايلهاي صوتي يا حتي فيلم ها و ... اشاره كنند.(در واقع به هر آدرس اينترنتي)

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

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

ميباشد بكار رفته است. براي تعيين مقصد و يا آدرس url براي ايجاد پيوندي به صفحه اي ديگر كه آدرس اينترنتي آن >a<در مثال باال تگ ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس hyerlink reference كه همان hrefصفحه جديد از شناسه اي به نام

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

ولي ميتواند حتي يك تصوير باشد.

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

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

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

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

را google.com امكان تعيين مقصد پيوند جديد فراهم ميشود. در مثال باال پس از كليك روي پيوند، مرورگر سايت targetبا كمك شناسه و مقدار targetباز كرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد كه مرورگر پيوند را در پنجره اي جديد باز كند بايد از شناسه

"_blank" براي آن استفاده كنيد . مثال زير سبب باز شدن سايت google.com :در پنجره جديدي خواهد شد

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

Visit Google Siteخودتان آزمايش كنيد :

:Nameشناسه

http://www.google.com/�





ميتوانيد پيوندها را نام گذاري كنيد. پيوندهاي نامگذاري شده امكان حركت ميان قسمتهاي مختلف يك صفحه يا nameبا كمك شناسه page را فراهم ميكنند، مخصوصا وقتي كه محتواي يك صفحه زياد بوده و مرورگرفقط قادر به نمايش بخشي از محتواي صفحه ميباشد. در

كردن تمامي صفحه نيست و كافي است كه بازديدكننده روي Scrool downاينصورت مثال براي رفتن به آخر يك متن ديگر نيازي به پيوندي كه به آخر صفحه اشاره ميكند كليك كند.

مثال: برو باالي صفحه! استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:

- ايجاد يك پيوند نامگذاري شده (اين قسمت به عنوان لنگر كار خواهد كرد.) : 1فرم كلي يك پيوند نام گذاري شده به قرار زير است:

<a name="label">Text to be displayed</a>

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

ميپردازد: topنامگذاري شده با نام

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

مقصد و سپس نويسه url آن ابتدا hrefبراي دادن لينك به پيوندي نام گذاري شده، كافي است كه پيوندي معمولي ايجاد كرده و در قسمت اشاره ميكند: top و در نهايت نام پيوند نامگذاري شده را درج كنيد. مثال زير ايجاد پيوندي است كه به لينك نامگذاري شده اي به نام #

<a href="http://www.khaterat.com/www/index.cgi#top"> Goto Top! </a>

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

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

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

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

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

بيابيد؟!

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




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

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

گرفت.

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

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

برنامه هاي مربوط به ارسال و مديريت ايميل ها را نصب كرده باشد ميتواند به ارسال ايميل بپردازد.

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

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

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

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

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

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

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

سري به اين صفحه بزنيد. targetبراي مطالعه بيشتر در مورد شناسه

) Tablesجداول (

;p> <br> &nbsp>نمايش و چيدن اطالعاتي كه بصورت سطري و ستوني هستند مانند جدولي از اعداد و آمار تنها با استفاده از تگ هاي بسيار مشكل ميباشد و به همين دليل زبان اچتمل تگهاي خاصي را براي ساختن اطالعاتي كه ذاتا جدولي (سطري و ستوني) هستند در نظر

در جداول و تگ هاي مربوطه مخصوصا تگهاي border ) ، سلولها يا خانه ها، مرز و Tableگرفته است. در اين درس با المان جدول (



http://www.w3.org/TR/html401/struct/links.html#edef-A�



TABLE ،TD , TR آشنا خواهيد شد. توجه داشته باشيد كه جداول يكي از مهمترين المانهاي چيدمان و layout .ميباشند

مثالها:

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

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


جدولها

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

ميباشند. table data و table rowشده محتوي يك سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.

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

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

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

3، سلول 1رديف 2، سلول 1رديف 1، سلول 1رديف




</table>

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

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

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

نيست و به صورت پيش فرض اطالعات از چپ به راست چيده خواهند شد. dir=ltrاگر جدول حاوي متون التين است نيازي به قيد •

) >table><tr><td<Hi>/td></tr></table<ساده ترين جدول ممكن در اچتمل، جدولي است با يك سطر و يك ستون! ( •

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

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

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

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

3سرستون 2سرستون سرستون ا





</tr> </table>

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

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

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

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

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

2، سلول 1رديف 1، سلول 1رديف

1، سلول 2رديف

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

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

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

2، سلول 1رديف 1، سلول 1رديف

1، سلول 2رديف



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

چند نكته اساسي در مورد جداول:

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

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

قيد كنيد و نيازي به قيد آن در تمامي table براي تمامي خانه هاي يك جدول كافي است كه فقط شناسه مزبور را در تگ rtlرسيد.مثال براي تعيين مقدار را موردي تعيين كنيد. dirخانه هاي جدول نيست. البته ميتوانيد كه در مورد يك رديف خاص و يا يك خانه خاص شناسه


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

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

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

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

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

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




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

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

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

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

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

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

... فقط تصور كن... در جداول dirمثالي كاملتر و استفاده از شناسه

0Bتگهاي جداول 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 تعريف عنوان جدول


http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE�

http://www.w3.org/TR/html401/struct/tables.html#edef-TH�

http://www.w3.org/TR/html401/struct/tables.html#edef-TR�

http://www.w3.org/TR/html401/struct/tables.html#edef-TD�

http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION�



) Framesفريمها (

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

مثالها:

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

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


)Framesفريمها (

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

و متوسط را بسيار آسان ميكنند ولي استفاده از آنها در كارهاي حرفه اي توصيه نميشود.(به جز در موارد خاص)

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

موتورهاي جستجو با صفحات طراحي شده با فريمها مشكل دارند. • صفحاتي كه از فريمها استفاده ميكنند مشكل است. printچاپ و •صفحاتي كه از فريمها استفاده ميكنند معموال مبتدي بودن طراح سايت را نشان ميدهد!! •

آشنائي نداريد فريمها كمك خوبي خواهند بود. ASP يا PHPاگر ميخواهيد صفحات نسبتا ديناميك ساخته و با هيچ زبان اسكريپتي مانند ) مناسب به نظر Adminهمچنين فريمها براي ساختن سريع قسمتهائي از سايت كه عموم به آن دسترسي ندارند مانند قسمت مديريت (

ميرسند.

) Framesetتگ فريم ست (

• frameset يعني يك Set از frame ها يا مجموعه اي از چهار چوبها به تعريف فريمها و تقسيم بندي پنجره مرورگر ميپردازد. >frameset<تگ اصلي •



مجموعه اي از رديفها يا ستونها را تعريف ميكند. >frameset<هر تگ • ديگري قرار دهيد. framesetداخل هر فريم ميتواند • ابعاد و نسبت هر فريم تعيين ميگردد. cols و rowsبا كمك شناسه هاي • هنگام معرفي يك body قرار ميگيرد.(نيازي به قيد تگ >/html< و >html< درون تگهاي >frameset<تگ •

frameset (.نيست

) Frameتگ فريم (

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

درصد از 25 درصد و فريم دوم 75مثال زير مجموعه اي از فريمها را كه شامل دو فريم عمودي ميباشند معرفي ميكند. از سمت چپ فريم اول و درون "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براي نمايش مثال باال به سه فايل نياز داريد،

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

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

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

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

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

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



<frame src="frame_1.html"> </frameset> </html>

</frameset> </html>

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

پيكسل تعيين شده و بقيه عرض پنجره كه با عالمت * مشخص ميشود به فريم دوم 200در مثال يك عرض فريم اول از سمت راست اختصاص خواهد يافت.

در مثال دوم عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است. دقيقا قراردادهاي باال برقرارند. rowsدر مورد شناسه

نكات كاربردي:

) خواهند بود و براي جلوگيري از تغيير اندازه resize* اگر فريمهاي طراحي شده مرزهاي قابل مشاهده دارند توسط كاربر قابل تغيير اندازه ( نميتوانيد كه فريمها noresize استفاده شود. در اين مثال >frame< در داخل تگ noresizeفريمها توسط كاربر بايد از شناسه اي به نام

را تغيير اندازه بدهيد.

را برابر scrolling مقدار شناسه frame نشوند (حركت ميان محتويات صفحه توسط ماوس) بايد در تگ scroll* اگر ميخواهيد كه فريمها "no" قرار دهيد. (مقادير ممكن "yes" ،"no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll .نيستند

قرار دهيد. (مثال "0" را برابر frameborder مقدار شناسه frame* اگر ميخواهيد كه مرز بين فريمها نمايش داده نشوند بايد در تگ frameborder (

>noframes< پشتيباني نميكنند. براي اين موارد بايد از تگ frameset و frame* درصد بسيار كمي از مرورگرها از تگهاي مربوط به جهت نمايش صفحه جايگزين استفاده شود.

حساس هستند، مطمئن باشيد كه هيچ كاراكتر اضافي مانند frameset* بعضي از مرورگرها به اولين نويسه و شروع تعريف يك فايل space يا new link قبل از tag frameset .در ابتداي صفحه وجود ندارد


مجموعه فريمهاي مركب مثالي در مورد ايجاد مجموعه اي مركب از فريمهاي عمودي و افقي

مثالي كاربردي در مورد فريمها در اين مثال كاربردي با كمك سه فريم امكان نمايش صفحات مختلف به آساني فراهم ميشود. فريم افقي و باالئي سرتيتر و نام اصلي سايت را

را فراهم ميسازد و نهايتا فريم اصلي و navigationنمايش خواهد داد و فريم سمت راست لينكهاي مهم صفحه را در بر گرفته و امكان

http://khaterat.com/www/cgi-bin/frameset1.html�




http://www.khaterat.com/www/cgi-bin/mesal.php?fn=mesal67&item=11�










سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد كه براي اين مثال حداقل به يك فايل براي معرفي مجموعا ) و سه صفحه اچتمل براي فريمهاي باالئي، سمت چپ و راست احتياج خواهد بود. framesetفريمها(

) Inline frameفريمهاي شناور و يا درجا ()، فريمي درون يك صفحه اچتمل iframeمثالي در مورد فريمهاي شناور و درجا (

) Inline frameمثالي كاربردي در مورد فريمهاي درجا ( صفحه اچتمل مختلف 7) با كمك iframeمثالي كاربردي در مورد فريمهاي شناور و درجا (

شوخي با فريم هاي شناور بازديدكنندگان سايت به آنها \:cمثالي در مورد نمايش درايو لوكال (مثال

فريمها و پيوندهاي نامگذاري شده مثالي كامل در مورد فريمها و پيوندهاي نامگذاري شده و نحوه استفاده از آنها در طراحي سايتي ساده متشكل از چهار فايل اچتمل

فريمها و پيوندهاي نامگذاري شده كامل frameهمان مثال باال در صفحه كامل مرورگر با شناسه هاي كامل در تگ

تگ هاي فريم

Start Tag Purpose كاربرد <frameset> Defines a set of frames تعريف مجموعه اي از فريم ها

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

<noframes>

Defines a noframe section for browsers that do not handle frames

تعريف جايگزين براي مرورگرهائي كه از فريم ها پشتيباني نميكنند.

<iframe> Defines an inline sub window (frame) ) تعريف فريم هاي درجاinline(

) Listsفهرستها (

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

مثالها:

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



http://www.w3.org/TR/html401/present/frames.html#edef-FRAMESET�

http://www.w3.org/TR/html401/present/frames.html#edef-FRAME�

http://www.w3.org/TR/html401/present/frames.html#edef-NOFRAMES�

http://www.w3.org/TR/html401/present/frames.html#edef-IFRAME�



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


)unordered listفهرستهاي نامرتب(

فهرستهائي هستند از يك يا چند قلم اطالعات كه معموال با دايره اي كوچك و سياه رنگ در شروع نمايش داده ميشوند. يك فهرست از نوع مشخص ميگردد. >li< شروع شده و هر رقم اطالعات با تگ >ul<نامرتب با تگ

HTML code نمايش توسط مرورگر <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul>

• Red • Blue • Green

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

قهوه •شير • چاي •

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

)ordered listفهرستهاي مرتب(

اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقالم اطالعاتي از اعداد به جاي دايره هاي كوچك سياه مشخص >li< شروع شده و همانند فهرستهاي نامرتب هر رقم اطالعات با تگ >ol<رنگ استفاده ميكند. يك فهرست از نوع مرتب با تگ

ميگردد.

HTML code نمايش توسط مرورگر <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol>

1. Red 2. Blue 3. Green



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

قهوه .1شير .2 چاي .3

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

)definition listفهرستهاي تعريفي(

فهرست تعريفي فهرستي است از اصطالح ها و تشريح و توصيف آنها.

تعريف ميشوند. >dd< و >dt< شروع شده و هر ذوج اصطالح و تعريف مربوط به آن با تگهاي >dl<فهرستهاي تعريفي با

HTML code نمايش توسط مرورگر <dl> <dt>HTTP</dt> <dd>Hypertext Transfer Protocol</dd> <dt>FTP</dt> <dd>File Transfer Protocol</dd> <dt>IP</dt> <dd>Internet Protocol</dd> </dl>

HTTP Hypertext Transfer Protocol

FTP File Transfer Protocol

IP Internet Protocol

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

مقدمه خالصه اي از مقدمه

1فصل 1خالصه اي از فصل

2فصل 2خالصه اي از فصل

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


انواع فهرستهاي مرتب



جهت تعيين نوع نمايش فهرست typeمثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه

انواع فهرستهاي نامرتب جهت تعيين نوع نمايش فهرست typeمثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه

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

فهرستهاي تعريفي dirمثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه

تگهاي فهرست

Start Tag Purpose كاربرد <ol> Defines an ordered list تعريف فهرستهاي مرتب

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

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

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

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

<dd> Defines a definition description تعريف معني و شرح اصطالح در فهرستهاي تعريفي

) Formsفرمها (

و چند تگ مرتبط قادر به دريافت اطالعات از بازديدكنندگان صفحاتتان و يا تبادل اطالعات بين صفحات >form<از طريق استفاده از عنصر -check) ، چك باكسها (text fieldsمختلف خواهيد شد. با كمك اين گروه از تگ ها قادر به نمايش باكسهاي ورود اطالعات متن (

boxes) راديو باتونها ، (radio-buttons) و ... شده و همچنين امكان گذاشتن دكمه هاي ارسال (submit button و يا (reset را و ... به چگونگي ايجاد ارتباط با بازديدكنندگان و گرفتن اطالعات از آنها بصورت input و formخواهيد داشت. اين فصل با شرح تگ هاي

التين و يا فارسي خواهد پرداخت.

يا ASP ،perl ،PHP ،CFM ،JSP از قبيل cgiتوجه داشته باشيد كه براي پردازش اطالعات دريافتي از كاربر بايد با يكي از زبانهاي Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسكريپت Perl يا PHP .استفاده ميكنند


مثالها:

http://www.w3.org/TR/html401/struct/lists.html#edef-OL�

http://www.w3.org/TR/html401/struct/lists.html#edef-UL�

http://www.w3.org/TR/html401/struct/lists.html#edef-LI�

http://www.w3.org/TR/html401/struct/lists.html#edef-DL�

http://www.w3.org/TR/html401/struct/lists.html#edef-DT�

http://www.w3.org/TR/html401/struct/lists.html#edef-DD�



Text fieldsوروديهاي متن يا ها كاربران قادر به وارد كردن و تايپ اطالعات متني خواهند شد. text field ها . با كمك text fieldمثالي ساده در مورد ايجاد

Password fieldsوروديهاي رمز عبور يا

ها كاربران قادر به ورود رمز عبور يا پسورد خواهند شد، password field ها . با كمك password fieldمثالي ساده در مورد ايجاد براي نمايش اطالعات استفاده ميكنند. '*'مرورگرها براي امنيت اطالعات رمرزهاي عبور را رمزگذاري ميكنند و معموال از


)Formsفرمها (

تمامي عناصر و تگهائي كه تاكنون ديده ايد فقط به نمايش اطالعات پرداخته اند و هيچكدام به گرفتن و اخذ اطالعات از كاربر نپرداخته اند. معرفي ميشوند، طراح سايت را قادر به جمع آوري و اخذ اطالعات از بازديدكننده سايت خواهند كرد. عنصر فرم و >form<فرمها كه با تگ

گروهي از عناصر و تگهاي درون آن به دريافت و ارسال اطالعات به سمت وب سرور كمك خواهند پرداخت. ( تمامي تگهاي مربوط به فرمها قرار ميگيرند. ) >/form< و >form<درون تگهاي

)، عناصر ورود text fieldsدرون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يك سطري( و غيره. drop-down و منوهاي radio buttons و drop-down)، منوهاي Textareaمتنهاي چند سطري (

Inputتگ

به تعيين نوع type نام برد. در اين تگ شناسه اي به نام >input<به عنوان پر مصرف ترين تگ مربوط به ورود اطالعات بايد از تگ اطالعات ورودي اختصاص دارد. مقادير ممكن براي اين شناسه به قرار زيرند:

text , checkbox , radio , password , hidden , submit , reset , button , file , image هاي كاربردي خواهيم پرداخت: typeدر ادامه به شرح بعضي از

) Text Fieldsوروديهاي متن (

استفاده ميشود. "text"اگر ميخواهيد كه بازديدكننده اطالعاتي از قبيل متن، اعداد و ... را وارد كند از شناسه اي با مقدار

نمايش توسط مرورگر كد اچتمل<form> First name: <input type="text" name="firstname">

First name:





<br> Last name: <input type="text" name="lastname"> </form>

Last name:

<form dir="rtl" > :نـــــــــــــــام<input type="text" name="firstname"> <br> :نام خانوادگي<input type="text" name="lastname"> </form>

:نـــــــــــــــام

:نام خانوادگي

چيزي را به نمايش نخواهد گذاشت بلكه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال >form<توجه داشته باشيد كه تگ آن توجه داشته باشيد.الزم به يادآوري است كه اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن rtl و مقدار dirفارسي باال به شناسه

استفاده size كاراكتر را در نظر ميگيرند و اگر ميخواهيد كه اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام 20اندازه كنيد.

Radio Buttonsوروديهاي

استفاده كنيد: type براي شناسه "radio"اگر ميخواهيد كه بازديدكننده فقط يك گزينه را از بين چند گزينه محدود انتخاب كند، از مقدار

نمايش توسط مرورگر كد اچتمل<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

Male

Female

<form dir="rtl"> <input type="radio" name="sex" value="male"> مرد <br> <input type="radio" name="sex" value="female"> زن </form>

مرد

زن

همانطور كه مشاهده ميشود فقط امكان يكي از گزينه ها براي كاربر ميسر است.

Checkboxesوروديهاي

type براي شناسه "checkbox"اگر ميخواهيد كه بازديدكننده يك يا چند گزينه را از بين چندين گزينه محدود انتخاب كند، از مقدار استفاده كنيد:

نمايش توسط مرورگر كد اچتمل<form> <input type="checkbox" name="bike"> I have a bike

I have a bike



<br> <input type="checkbox" name="car"> I have a car </form>

I have a car

<form dir="rtl"> <input type="checkbox" name="bike"> دوچرخه دارم<br> <input type="checkbox" name="car"> ماشين دارم</form>

دوچرخه دارم

ماشين دارم

)Form's Action Attribute & Submit Button در فرمها ( Submit و دكمه Actionشناسه

استفاده ميشود و در اثر كليك كاربر بروي اين Submit Buttonدر فرمها براي ارسال اطالعات كسب شده از دكمه اي به نام ارسال يا ، اطالعات درون فرم توسط مرورگر به صفحه اي كه شما تعيين ميكنيد ارسال خواهند شد. براي تعيين مقصد ارسال "Submit"دكمه

صفحه اي است كه به دريافت url آدرس يا action استفاده كنيد. مقدار شناسه action از شناسه اي به نام formاطالعات بايد درون تگ مانند cgi برنامه ها و اسكريپت هائي نوشته شده با ربانهاي actionو سپس پردازش اطالعات دريافتي خواهد پرداخت. معموال فايلهاي بخش

ASP ،Perl ، PHP .و ... بوده و وظيفه آنها دريافت اطالعات فرمها و سپس پردازش آنها ميباشد

يا ارسال خواهد گرديد. Submit سبب نمايش دكمه type براي شناسه "submit"تعيين مقدار

نمايش توسط مرورگر كد اچتمل<form name="input" action="form_action.php"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

Username:

<form name="input" action="form_action.php" dir="rtl"> نام كاربر<input type="text" name="user"> <input type="submit" value="Submit"> </form>

نام كاربر

در مثال باال در باكس ورودي متن، كلمه اي را وارد كرده و دكمه ارسال را كليك كنيد. مرورگر به محض كليك دكمه ارسال، اطالعات درون تعيين شده است ارسال كرده و در اين مثال برنامه اي action) كه در شناسه URLفرم را كه در اين مثال متني ساده است به سمت آدرسي (

در سمت سرور به دريافت و پردازش اطالعات دريافتي خواهد پرداخت. form_action.php با نام PHPبه زبان

ميتواند آدرس اسكريپتي در هامان سايت و يا سايت ديگري باشد، همچنين ميتواند actionبه ياد داشته باشيد كه آدرس قيد شده در بخش آدرسي نسبي يا مطلق باشد.



:Text area يا Text fieldورود متن فارسي در عناصري مانند

dir مانند بسياري ديگر از المانها با كمك شناسه Textarea و Text fieldهمانطور كه در مثالهاي باال مشاهده كرديد در مورد المانهاي تعيين كنيد. ولي اگر كاربري ويندوز فارسي نداشته باشد، از كامپيوترهاي مكينتاش "از راست به چپ"ميتوان سمت و جهت ورود اطالعات را

استفاده كند و يا سيستمش را فارسي نكرده باشد قادر به ورود اطالعات به زبان فارسي نخواهد بود و نويسه هاي تايپ شده التين خواهند بود!، در اينگونه موارد چه بايد كرد؟

معموال برنامه نويسان وب براي فراهم ساختن امكان ورود متن فارسي از يكي از دو روش زير استفاده ميكنند: استفاده از اپلتهاي جاوا يا استفاده از فلش •استفاده از زبان جاوا اسكريپت •


Inputحالتهاي مختلف ورودي و مقادير مختلف براي آن ميتوان انواع مختلف اطالعات را از وبگرد گرفت. type و با كمك شناسه inputدر تگ

Checkboxes ها Checkboxمثالي در مورد نحوه تعريف فرمي متشكل از

Radiobuttons ها Radio buttonمثالي در مورد نحوه تعريف فرمي متشكل از

فهرست كركره اي ساده ها يا فهرستهاي كركره اي drop down boxمثالي در مورد نحوه تعريف فرمي متشكل از

فهرست كركره اي ديگر ها با تعيين پيش گزينه drop down boxمثالي در مورد نحوه تعريف فرمي متشكل از

Textarea ، ناحيه اي براي ورود بيش از يك سطر متن Textareaمثالي در مورد نحوه تعريف فرمي متشكل از

buttonتعريف فرمي با كمك دكمه يا buttonمثالي در مورد نحوه تعريف فرمي با كمك دكمه يا

ترسيم مرز در اطراف فرم Fieldsetمثالي در مورد نحوه تعريف فرمي دلخواه و ترسيم مرزي بدور آن به همراه تعيين عنواني براي فرم با كمك عنصر

ارسال ايميل با كمك فرمها

http://www.khaterat.com/www/cgi-bin/mesal.php?fn=mesal92&lang=e�



http://www.khaterat.com/www/mesal/mesal97.html�




مثالي در مورد نحوه ارسال ايميل با كمك فرمها

ساختن فهرستي از سايتهاي مورد عالقه مثالي در مورد نحوه استفاده از تگ فرم و منوهاي كركره اي و كمي جاوا اسكريپت براي ساخت فهرستي از سايتها

تگهاي فرم

Start Tag Purpose كاربرد <form> Defines a form for user input تعريف فرم ورود اطالعات

<input> Defines an input field تعريف ورودي از نوعInput

<textarea>

Defines a text-area (a multi-line text input control)

text-areaتعريف ورودي متن چند سطري يا

<label> Defines a label to a control تعريف برچسب ياlabel

<fieldset> Defines a fieldset تعريفfieldset

<legend> Defines a caption for a fieldset تعريف عنوان برايfieldsetها

<select> Defines a selectable list (a drop-down box) تعريف فهرستهاي انتخابي ياdrop-down box

<optgroup> Defines an option group تعريفoption groupها

<option> Defines an option in the drop-down box تعريف گزينه اي ازdrop-down boxها

<button> Defines a push button تگ buttonتعريف دكمه فشاري، متفاوت با

input

) Imagesتصاوير (

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

مثالها:

درج تصوير imgنحوه اضافه كردن تصوير به صفحات اچتمل با كمك تگ

درج تصويري واقع در فضاي آدرسي ديگر درج تصويري واقع در دايركتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها


http://www.w3.org/TR/html401/interact/forms.html#edef-FORM�

http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT�

http://www.w3.org/TR/html401/interact/forms.html#edef-TEXTAREA�

http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL�

http://www.w3.org/TR/html401/interact/forms.html#edef-FIELDSET�

http://www.w3.org/TR/html401/interact/forms.html#edef-LEGEND�

http://www.w3.org/TR/html401/interact/forms.html#edef-SELECT�

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTGROUP�

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION�

http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON�



source يا src و شناسه imgتگ

از نوع تگهاي خالي است، بدين معنا كه فقط داراي يك يا چند >img< تعريف ميكنند. تگ >img<در زبان اچتمل تصاوير را با كمك تگ نيست. >/img< بوده و داراي تگ انتهائي يا attributeشناسه و

تصوير ميباشد. تصاويري كه URL نام دارد و مقدار اين شناسه آدرس يا source يا srcمهمترين شناسه براي درج و تعريف يك تصوير مرورگر در يك صفحه وب نمايش ميدهد ميتوانند در همان دايركتوري صفحه اچتمل، در ديگر دايركتوريهاي همان سايت و يا در فضاي بيكران

وب قرار داشته باشند.

شكل ساده درج يك تصوير:

<img src="url">

آدرس اينترنتي تصوير ميباشد و مثال اگر تصويري كه قرار است كه در صفحه درج شود در همان دايركتوري قرار دارد و نامش urlمقدار test.jpg كافي است كه به جاي ، url فقط نام تصوير يعني test.jpg را بنويسيد و اگر تصوير در سايتي ديكر قرار دارد url كامل آنرا

است.در اين http://www.google.com/images/logo.gif ي برابر url داراي google.comبنويسيد. مثال تصوير لوگو سايت url نام تصوير logo.gif بوده، در دايركتوري images قرار داشته و روي وب سايت google.com .قرار دارد

img در تگ height و widthشناسه هاي

تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نكنيد، مرورگر ابتدا تصوير را لود height و widthكاربرد شناسه هاي كرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير

شكل و ابعاد آن بپردازيد و آنرا مثال كوچكتر، بزرگتر و يا كشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:

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

قيد كنيد، اينكار سبب كمك به مرورگر در تسريع شروع نمايش height و widthتوصيه ميشود كه حتما ابعاد تصوير را با كمك شناسه هاي صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند كه چه مقدار از صفحه نمايش بايد به تصوير مزبور اختصاص داده

شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب كلي صفحه خواهد كرد.)

يا متن جايگزين "alternate text" يا Altشناسه

textاگر مرورگر به هر دليلي نتواند كه يك تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد كه فقط متن را نمايش ميدهند، متن و



تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يك تصوير، متن altي كه با كمك شناسه اطالعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج alt نمايش داده خواهد شد. با كمك altتعيين شده توسط شناسه

تصويري را با قيد متن جايگزين آن شرح ميدهد:

<img src="images/madresehweb_88_31.jpg" alt="The web school!" >

وبالگها و اضافه كردن تصاوير:

اگر وبالگي داشته و ميخواهيد كه تصويري به آن اضافه كنيد دو حالت مختلف ممكن است كه پيش آيد: الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير كه در سايتي ديگر قرار دارد استفاده كنيد. در اين حالت از آدرس •

استفاده كنيد، مانند : srcمستقيم تصوير در شناسه >img src="http://www.google.ca/images/hp0.gif" width=258 height=78 <

قرار داشته و لزومي به ذخيره آن توسط شما نيست. google.caدر اين مثال تصوير روي سايت

ب) تصوير روي هارد كامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون بعضي سيستم هاي وبالگ امكان ذخيره • يا روشهاي ديگر به روي سايت يا هر وب سرور ديگري منتقل كنيد. FTPتصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با كمك

شركتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطالعات و تصاوير در اختيار شما قرار ميدهند و در يكي از سؤالهاي اين FAQ فهرست اين شركتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه كرده، سپس تصويرتان را Upload كرده (با كمك FTP يا

آدرس جديد تصوير را قيد كنيد. img از تگ srcروشهاس ديگر ) و سپس در شناسه

چند نكته مهم:

تصوير) 10 فايل را لود كند.( خود صفحه به عالوه 11 تصوير استفاده شده باشد، مرورگر بايد 10اگر در يك صفحه اچتمل از •استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده كنيد و به اندازه و حجم تصوير توجه داشته •

باشيد. ثانيه طول خواهد كشيد. 15 استفاده ميكند حداقل 28kbps كيلوبايت براي كسي كه از مودمي با سرعت 50لود تصويري با حجم • properities كرذه و سپس در بخش Right clickبراي ديدن مشخصات تصاوير در وب كافي است كه روي تصوير •

آدرس،ابعاد و ظرفيت تصوير را ببينيد. آنرا ذخيره "Save picture as" كرذه و سپس در بخش Right clickبراي ذخيره تصاوير در وب كافي است كه روي تصوير •

كنيد.


تصاوير زمينه



body در تگ backgroundمثالي در مورد نحوه تعيين تصاوير زمينه با كمك شناسه

ترازبندي تصاوير اين مثال نحوه ترازبندي تصاوير در كنار متون را نشان ميدهد.

تصاوير شناور در متن آزاد گذاشتن تصوير در سمت چپ يا راست

نمايش تصاوير در ابعاد مختلف و نمايش تصاوير در ابعاد مختلف height و widthمثالي در مورد استفاده از شناسه هاي

نمايش متن جايگزين براي تصاوير altمثالي در مورد استفاده از شناسه

استفاده از تصاوير هنگام ايجاد پيوند ها مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها

ها image mapايجاد . در اين مثال هر بخش از نواحي تعريف شده قابل كليك بوده و به پيوندي اختصاصي اشاره ميكند. image mapمثالي در مورد ايجاد

را ميتوانيد اينجا داونلود كنيد: FTPبرانامه اي خوب و متن باز براي Filezilla

تگ هاي تصاوير

Start Tag Purpose كاربرد <img> Defines an image درج تصوير

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

<area> Defines an area inside an image map تعريف ناحيه اي در داخلImage map


) Backgroundپس زمينه (

) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه عامل بسيار مهمي Backgroundدر اين درس با چگونگي تعيين تصاوير و رنگ پس زمينه ( در طراحي صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشي تعيين كننده در خوانا بودن صفحات دارد.


http://filezilla.sourceforge.net/�

http://www.w3.org/TR/html401/struct/objects.html#edef-IMG�

http://www.w3.org/TR/html401/struct/objects.html#edef-MAP�

http://www.w3.org/TR/html401/struct/objects.html#edef-AREA�





مثالها:

رنگ متن و زمينه متناسب انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن كمك زيادي خواهد كرد.

رنگ متن و زمينه نامتناسب مثالي از انتخاب نامناسب رنگ متن و پس زمينه


رنگ و تصوير زمينه در صفحات اچتمل:

داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه يك صفحه اچتمل، رنگ و يا يك تصوير ميتواند >body<تگ باشد.

) background color( براي رنگ پس زمينه bgcolorشناسه

) ، مقدار آن بر اساس استاندارد blue يا red رنگ پس زمينه را تعيين ميكند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل bgcolorشناسه RGB) و يا حتي مقدار هگزادسيمال Hexadecimal .باشد (

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

تعيين ميشود. "سياه" رنگ زمينه صفحه bgcolorدر تمامي مثالهاي باال با كمك شناسه

براي تصوير پس زمينه:Backgroundشناسه

يا URL استفاده ميشود.مقدار اين شناسه backgroundبراي تعيين تصويري كه به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه ) ميباشد.اگر ابعاد تصوير كوچكتر از ابعاد پنجره اصلي مرورگر باشد، تصوير زمينه تكثير خواهد شد تا حدي كه تمام imageآدر س تصوير (

صفحه نمايش از تصوير زمينه پوشانده شود.

<body background="bg.gif"> <body background="http://www.khaterat.com/images/bg.gif">

يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير URL) براي تعيين relativeدر مثال اول از آدرس دهي نسبي (



bg.gif) بايد در يك دايركتوري قرار گيرند. در مقابل مثال دوم از آدرس دهي مطلق absolute براي تعيين آدرس تصوير استفاده شده است (و همانطور كه ميدانيد آدرس تصوير در هر نقطه از فضاي وب و روي هر وب سروري ميتواند باشد.

اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميكنيد به نكات زير توجه كنيد : نكات مهم:

قابل استفاده به عنوان تصوير زمينه ميباشد. jpg و يا png, bmp, gifهرتصويري با فرمت • صفحه بشدت پايين loadتوصيه ميشود از تصاوير بزرگتر از ده كيلوبايت به عنوان تصوير پس زمينه استفاده نكنيد، در غير اين صورت سرعت •

خواهد آمد. از تصاوير زمينه هماهنگ با ديگرت صاوير و متون صفحه صفحه استفاده كنيد. •در رزولوشنهاي مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد. •پر مصرف ترين رنگهاي زمينه وب سايتها، رنگهاي سفيد، سياه و خاكستري ميباشند. •اغلب سايتهاي وب از تصاوير پس زمينه استفاده نمي كنند! مثال همين سايت!!! • مربوط به استاندارد قديمي اچتمل ميباشد. background و bgcolorتوجه داشته باشيد كه استفاده از شناسه هاي •

XHTMLنكته مهم در سازگاري با نسخه هاي جديد اچتمل و

پشتيباني نميشوند و در واقع از رده خارج XHTML اچتمل و 4 در نسخه >body< در تگ background و bgcolorشناسه هاي اچتمل و استاندارد جديد 4 ها را توصيه ميكند و در واقع در نسخه Style Sheet استفاده از W3Cمحسوب ميشوند. در عوض كنسرسيوم

XHTML تمامي اطالعات مربوط به نمايش يا presentation و layout بايد در style sheet .ها قرار گيرند

1B مثالهاي بيشتر

1استفاده مناسب از تصوير زمينه در اين مثال بدليل استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه كامال خوانا هستند.

2استفاده مناسب از تصوير زمينه در اين مثال در اثر استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه كامال خوانا هستند.

استفاده نامناسب از تصوير زمينه در اين مثال نوشته هاي صفحه خوانا نيستند.

استفاده از تصوير زمينه با آدرس مطلق در اين مثال آدرس تصوير زمينه بصورت مطلق و كامل آورده شده است.

ها Style Sheetتعيين رنگ زمينه با






ها براي تعيين رنگ زمينه آورده شده است. Style Sheetدر اين مثال چگونگي استفاده از

) HTML Fontsقلم ها (

در اين درس ياد خواهيد گرفت كه چگونه نوع قلم، اندازه و رنگ نوشته ها در صفحات اچتمل تعيين ميشوند. براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميكنند ولي در استاندارد جديد >font<با وجوديكه هنوز بعضي از اچتمل كاران از تگ

ها به عنوان جايگزين معرفي شده Style Sheet پشتيباني نميشود و استفاده از >font< از تگ XHTML) و همچنين 4اچتمل (نسخه است.

>font<تگ

face براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه >font< و قبلي تر زبان اچتمل از تگ 3.2در نسخه هاي خدابيامرز را نشان ميدهند: >font< معرف رنگ متن خواهد بود. مثالهاي زير كاربرد تگ color انداره قلم و شناسه sizeنام قلم ، شناسه

نمايش كد روبرو توسط مرورگر كد اچتمل <p> <font size="2" face="Verdana"> This is a paragraph. </font> </p>

This is a paragraph.

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

FF9900 و رنگ 1 و اندازه Timesمتني با قلم

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

و رنگ قرمز 2 و اندازه Tahomaمتني با قلم

>font<شناسه هاي تگ

Attribute Example كاربرد size="number" size="2" تعيين اندازه قلم

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

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

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

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

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



در اين دروس فقط جهت اطالع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود. >font<*** بيان مختصر عملكرد تگ

استفاده نكنيد!>font<ديگر از تگ

,World Wide Web Consortium از رده خارج محسوب ميشود و كنسرسيوم جهاني تعيين استانداردهاي وب (>font<تگ W3C اين تگ را از مجموعه تگهاي استاندارد اچتمل كنار گذاشته است و اكيدا توصيه ميشود كه از (Style Sheet ها براي تعريف هر گونه

) المانها در اچتمل استفاده شود. layout & Presentationخواص نمايشي و آرايشي (

ها: Style Sheetروش صحيح تعيين نام قلم، اندازه و رنگ متون با كمك

در دست تهيه بوده و اميدواريم كه بزودي ارائه شوند! "مدرسه وب" ها در Style Sheetهر چند كه سالها است كه مبحث و كالسهاي درس در بسياري از المانها كار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و styleولي تا قبل از آن استفاده از شناسه اي به نام

به نمايش خواهند گذاشت: styleرنگ متون را با كمك شناسه

تعيين نام قلم ) inlineمثالي در مورد تعيين نام قلم در يك استيل درجا (

تعيين اندازه قلم ) inlineمثالي در مورد تعيين اندازه قلم در يك استيل درجا (

تعيين رنگ قلم ) inlineمثالي در مورد تعيين رنگ قلم در يك استيل درجا (

تعيين نام، اندازه و رنگ قلم ) inlineمثالي در مورد تعيين نام، اندازه و رنگ قلم در يك استيل درجا (

ها Style Sheetمثال كاربردي در مورد مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول

>span<تگ قرار خواهند >/span< و >span< سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي كه درون تگهاي >span<تگ

http://www.khaterat.com/www/cgi-bin/mesal.php?fn=mesal_font5�



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

مثال: نمايش كد روبرو توسط مرورگر كد اچتمل

<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>

Some text another text again text...

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

ها:Style sheet و spanمثالهائي از نحوه استفاده از المان روش صحيح روش قديمي

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

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

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

<font color="#FF00FF" size="3">Hello!</font>

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

>div<تگ قرار خواهند گرفت >/div< و >div< سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي كه درون تگهاي >div<تگ

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

مثال:

كد اچتمل نمايش كد روبرو توسط

مرورگر

<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>

Some text

another text again text...

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

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

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

http://www.w3.org/TR/html401/struct/global.html#edef-DIV�



<span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل


) Style Sheetsاستايل شيتها (

) اچتمل امكان جداسازي كامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود كه 4/0در نسخه جديد(تمامي اطالعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل كه مربوط به نمايش،

صفحات >head< ناميد شده و معموال به صورت فايلي مجزا درون بخش "Style Sheet"ترازبندي و فرمت دهي است، استايل شيت يا اچتمل معرفي ميگردند. در اين درس به صورت بسيار خالصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.

درس قبلي، مثالهاي اچتمل

مثالها

استيلها در اچتمل ) Internal Style Sheet صفحات اچتمل شرح داده شده است. (>head<در اين مثال نحوه تعريف استايل شيتها درون بخش

پيوندي بدون خط افقي زيري ) Inline Styles شرح داده شده است. ("خط افقي زيري"در اين مثال نحوه ايجاد پيوندي بدون

اتصال به فايلهاي استايل شيت خارجي ) External Style Sheet جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (>link<در اين مثال نحوه استفاده از تگ

چگونگي استفاده از استايل شيتها:

مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطالعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممكن ميباشد:

) : external style sheet)استايل شيتهاي خارجي (1

در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است كه قرار است كه استايلي به بيش از يك صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يك وب سايت ميباشد و براي يك تغيير كلي در سايت كافي

است كه فايل استايل شيت كل سايت كه معموال يك فايل واحد است تغيير داده شود. (بايد توجه داشت كه در اين حالت تمامي صفحات سايت صفحات اچتمل head كه درون بخش >link<بايد به يك فايل استايل شيت واحد لينك شده باشند.) استايل شيتهاي خارجي توسط تگ

قرار ميگيرد، معرفي ميشوند. فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد: url نام و در حالت كلي link از تگ hrefدر مثال زير با كمك شناسه

http://www.w3.org/TR/html401/struct/global.html#edef-SPAN�





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

) : Internal Style Sheet)استايل شيتهاي داخلي (2

كاربرد اين روش در حالتهائي است كه صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن قرار گرفته و معموال نتيجه درون >/style< و >style<صفحه خواهد خورد. در اين حالت بايد كدهاي حاوي تعريف استايل درون تگ هاي

صفحه اچتمل گذاشته ميشود. مثال: headبخش

<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

) : Inline Styles)استايل شيتهاي درجا (3

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 كنار گذاشته شده.از استايل شيتها استفاده

شود.


http://www.w3.org/TR/html401/present/styles.html#edef-STYLE�

http://www.w3.org/TR/html401/struct/links.html#edef-LINK�





) : 4/0تغييرات در نسخه جديد اچتمل (هدف اوليه از طراحي زبان اچتمل ايجاد زباني براي تعريف اطالعات محض بدون در برداشتن جزئيات مربوط به ظاهر و نمايش بود ولي با ايجاد

محتوا و نمايش در Align و color و يا شناسه هائي مانند >font< زبان اچتمل و اضافه شدن تگهاي فرمت دهي مانند 3/2نسخه صفحات اچتمل ادغام گرديده و همين امر سبب بروز مشكالت عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشكل در

اچتمل توصيه بر جداسازي كامل اين دو گروه از اطالعات بوده و در نسخه هاي آينده اچتمل اين جداسازي اجباري خواهد گرديد و 4/0نسخه توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در كد اچتمل زير كه بر اساس نسخه

) با اطالعات نمايش يعني رنگ و "This is a paragraph" اچتمل ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي 3/2ترازبندي (رنك قرمز متن و ترازبندي در وسط صفحه) همزمان و در كنار هم آورده شده اند و اين ادغام امكان تغيير و توسعه كد را بسيار محدود

خواهد كرد:

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

كد معادل مثال فوق با استفاده از استايل شيتها در اين مثال شرح داده شده است.(هر چند كه اين مثال از تمامي امكانات استايل شيتها و ايجاد فايلي كامال مستقل براي تعريف استايل استفاده نكرده است.)

) Style Sheetsاستايل شيتها (

) اچتمل امكان جداسازي كامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود كه 4/0در نسخه جديد(تمامي اطالعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل كه مربوط به نمايش،

صفحات >head< ناميد شده و معموال به صورت فايلي مجزا درون بخش "Style Sheet"ترازبندي و فرمت دهي است، استايل شيت يا اچتمل معرفي ميگردند. در اين درس به صورت بسيار خالصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.

مثالها

استيلها در اچتمل ) Internal Style Sheet صفحات اچتمل شرح داده شده است. (>head<در اين مثال نحوه تعريف استايل شيتها درون بخش

پيوندي بدون خط افقي زيري ) Inline Styles شرح داده شده است. ("خط افقي زيري"در اين مثال نحوه ايجاد پيوندي بدون

اتصال به فايلهاي استايل شيت خارجي ) External Style Sheet جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (>link<در اين مثال نحوه استفاده از تگ

چگونگي استفاده از استايل شيتها:



مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطالعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممكن ميباشد:

) : external style sheet)استايل شيتهاي خارجي (1

در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است كه قرار است كه استايلي به بيش از يك صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يك وب سايت ميباشد و براي يك تغيير كلي در سايت كافي

است كه فايل استايل شيت كل سايت كه معموال يك فايل واحد است تغيير داده شود. (بايد توجه داشت كه در اين حالت تمامي صفحات سايت صفحات اچتمل head كه درون بخش >link<بايد به يك فايل استايل شيت واحد لينك شده باشند.) استايل شيتهاي خارجي توسط تگ

قرار ميگيرد، معرفي ميشوند. فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد: url نام و در حالت كلي link از تگ hrefدر مثال زير با كمك شناسه

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

) : Internal Style Sheet)استايل شيتهاي داخلي (2

كاربرد اين روش در حالتهائي است كه صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن قرار گرفته و معموال نتيجه درون >/style< و >style<صفحه خواهد خورد. در اين حالت بايد كدهاي حاوي تعريف استايل درون تگ هاي

صفحه اچتمل گذاشته ميشود. مثال: headبخش

<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

) : Inline Styles)استايل شيتهاي درجا (3

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

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

تگ هاي استايل




bodyشناسه هاي مهم تگ <body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز <body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز <body link=?> تعيين رنگ پيوندها بر اساس نام رنگ يا معادل هگز <body vlink=?> تعيين رنگ پيوندهاي بازديدشده بر اساس نام رنگ <body alink=?> تعيين رنگ پيوند فعال بر اساس نام رنگ يا معادل هگز تگهاي متن و نوشته <pre></pre> ) نمايش متن هاي از قبل فرمت شدهpreformatted( <hl></hl> ايجاد بزرگترين سر تيتر <h6></h6> ايجاد كوچكترين سر تيتر <b></b> ايجاد متن توپر <i></i> ايجاد متن مورب و ايتاليك <tt></tt> ايجاد متن از نوع تله تايپي <cite></cite> ايجادcitationمعموال ايتاليك <em></em> (توپر يا مورب) نمايش تاكيد شده متن <strong></strong> (توپر يا مورب) نمايش تاكيد شده متن <font size=?></font> 7 تا 1تعيين اندازه قلم از <font color=?></font> تعيين رنگ قلم بر اساس نام رنگ يا مقدار هگز آن پيوندها <a href="URL"></a> ايجاد پيوند <a href="mailto:EMAIL"></a> ايجاد پيوندي از نوعmailto <a name="NAME"></a> ايجاد پيوندي نامگذاري شده در يك سند <a href="#NAME"></a> ارجاع به يك پيوند نامگذاري شده فرمت دهي <p></p> ايجاد پاراگرافي جديد <p align=?> ترازبندي پاراگراف در سمتleft, right, or center <br> رفتن سر سطر جديد <blockquote> </blockquote> عنوان سازي متن <dl></dl> ايجاد فهرستهاي تعريفي <dt> ايجاد عنصري از يك فهرست تعريفي <dd> ايجاد شرح و توصيف يك عنصر فهرست تعريفي



<ol></ol> ايجاد فهرستهاي مرتب <li></li> ايجاد يك قلم اطالعاتي از يك فهرست <ul></ul> ايجاد فهرستي نامرتب <div align=?> تگي براي فرمت دهي بلوكي بزرگ از كدهاي اچتمل المانهاي گرافيكي <img src="name"> ايجاد يك تصوير <img src="name" align=?> ) تراز بندي تصويرleft, right, center; bottom, top,

middle ( <img src="name" border=?> تعيين ضخامت مرز يك تصوير <hr> درج خطي افقي <hr size=?> تعيين ارتفاع خط افقي <hr width=?> تعيين عرض خط بر اساس مقدار واقعي يا درصدي <hr noshade> ايجاد خطي افقي بدون سايه جداول <table></table> ايجاد جدول <tr></tr> ايجاد رديف در جداول <td></td> ايجاد خانه هاي جداول <th></th> ايجاد عنوان ستونهاي يك جدول شناسه هاي جداول <table border=#> تعيين مقدار ضخامت مرزهاي يك جدول <table cellspacing=#> تعيين فاصله بين خانه هاي جدول <table cellpadding=#> تعيين فاصله بين محتواي يك خانه و مرزهاي آن <table width=# or %> تعيين عرض جدول بر اساس پيكسل و يا درصدي <tr align=?> or <td align=?> ) تعيين ترازبندي خانه هاي جدولleft, center, right ( <tr valign=?> or <td valign=?> ) ترازبندي عمودي خانه هاي جدولtop, middle, bottom ( <td colspan=#> .تعيين تعداد ستون هائي كه بايد يكي شوند <td rowspan=#> .تعيين تعداد سطر هائي كه بايد يكي شوند <td nowrap> .باعث جلوگيري از شكسته شدن متن در خانه جدول ميشود فريمها <frameset></frameset> تعريف و ايجاد مجموعه اي از فريمها <frameset rows="value,value"> شناسه اي براي تعريف رديفهاي يك مجموعه فريم بر اساس اندازه



واقعي بر حسب پيكسل و يا ابعاد درصدي<frameset cols="value,value"> شناسه اي براي تعريف ستونها يك مجموعه فريم بر اساس اندازه

واقعي بر حسب پيكسل و يا ابعاد درصدي<frame> تعريف فريمي از مجموعه فريمها <noframes></noframes> تعيين متني كه بايد در صورت عدم پشتيباني مرورگر از فريمها بايد

نمايش داده شود. شناسه هاي فريمها <frame src="URL"> تعيين سند اچتمل داخل فريم <frame name="name"> تعيين نام براي يك فريم <frame marginwidth=#> تعيين عرض حاشيه راست و چپ فريم <frame marginheight=#> تعريف طول حاشيه باال و پايين فريم بر اساس پيكسل <frame scrolling=VALUE> تعيين اينكه فريمي ازScroll bar استفاده كند يا نه. مقادير

(حالت پيش فرض) auto و yes ،noممكن: <frame noresize> .سبب جلوگيري از تغيير اندازه يك فريم ميشود فرمها <form></form> ايجاد يك فرم <select multiple name="NAME" size=?></select>

ايجاد يك منوي كركره اي و تعيين تعداد اقالمي كه قبل از scrolling.نمايش داده خواهند شد

<option> تعيين هر يك از اقالم منو كركره اي <select name="NAME"></select> ايجاد منوي كركره اي <option> تعيين هر يك از اقالم منو كركره اي <textarea name="NAME" cols=40 rows=8></textarea>

ايجاد الماني براي ورود متن در بيش از يك خط با تعيين تعداد سطر و ستون ناحيه

<input type="checkbox" name="NAME"> ايجاد چك باكسي با تعيين متن و عنوان آن <input type="radio" name="NAME" value="x">

ايجاد راديو باتن با تعيين متن و عنوان آن

<input type=text name="foo" size=20> ايجاد الماني براي ورود متن با حداكثر يك سطر به همراه تعيين ابعاد بر اساس نويسه

<input type="submit" value="NAME"> ايجاد دكمه اي از نوع ارسال وSubmit <input type="image" border=0 name="NAME" src="name.gif">

ايجاد دكمه اي از نوع ارسال با كمك يك تصوير

<input type="reset"> ايجاد دكمه خالصي !! ياReset



مراجع و رفرنسها

فرهنگ لغت واژه هاي فني در وب

Anchor (لنگر كشتي) ،پيوند، لينك

Attribute شناسه، نشان، صفت

Browser, user agent مرورگر، شبكه نورد، بروزر

Caption عنوان ، سرلوحه

Character نويسه، كاراكتر، دخشه

Client سرويس گيرنده، مشتري ، ارباب رجوع

DHTML ،اچتمل ديناميكFAQ

Division, Div بخش، قسمت، دسته بندي

Download گرفتن اطالعات از وب سرور

Document سند، متني اچتمل

Edit ويرايش

Element المان، عنصر

Explorer جستجوگر، مكتشف

Extention انشعاب فايل

FAQ بيشترين سؤاالت پرسيده شده در مورد يك موضوع

Font قلم، خانواده حروف

Format قالب، فرمت

Frame قاب، چهارچوب

Frameset مجموعه اي از فريمها

FTP ) استانداردي براي مبادله فايلFile Transfer Protocol (

href ) آدرس متن مختلطhyerlink reference(

IP Internet Protocol

JavaScript جاوا اسكريپت، زباني براي اسكريپت نويسي

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

Hyper text ابر متن، متن مختلط

List فهرست

http://www.dhtml-zone.com/dhtmlfaq.asp�

http://www.dhtml-zone.com/dhtmlfaq.asp�

http://www.howstuffworks.com/web-server3.htm�

http://compnetworking.about.com/cs/protocolshttp/�

http://compnetworking.about.com/cs/protocolshttp/�



Link پيوند، لينك

Online آنالين، سرخط

Padding اليه گذاري، لفافه

Page, Web page صفحه، متن

Publish انتشار، بردن اطالعات روي وب سرور

Protocol استاندارد ارتباطي، فهرست پروتوكلهاي مهم در اينترنت

Robot نرم افزاري خودكار در وب

Site. Web site پايگاه، سايت

Script اسكريپت، دستخط، متن نمايشنامه

Spacing فاصله گذاري ، فاصله

Span محدوده، گستره، وجب

Target هدف و مقصد

Table جدول، آرايه

Tag تگ، برچسب

TCP/IP ) نوعي استاندارد ارتباطيTransmission Control Protocol/Internet Protocol (

Unicode استانداري براي محيط هاي چند زبانه

Upload بردن اطالعات روي وب سرور، معموال با كمك نرم افزارهايFTP.انجام ميپذيرد

URL آدرس اينترنتي، خالصه شدهUniform Resource Locator

User, Surfer كاربر، وبگرد، بازديدكننده

Weblog وب نويسي، تارنگاري

Webmaster مديريت سايت

Web Server .سرويس دهنده وب، نرم افزاري كه وظيفه اصليش دادن سرويس به درخواستهاي دريافت شده از وب ميباشد

Web, WWW وب، تار عنكبوت جهاني، خالصه شدهWorld Wide Web

w3school.comمنبع اصلي :

khaterat.comبرگرفته شده از سايت

http://compnetworking.about.com/gi/dynamic/offsite.htm?site=http%3A%2F%2Fpclt.cis.yale.edu%2Fpclt%2FCOMM%2FTCPIP.HTM�

http://compnetworking.about.com/gi/dynamic/offsite.htm?site=http%3A%2F%2Fpclt.cis.yale.edu%2Fpclt%2FCOMM%2FTCPIP.HTM�

http://www.wdvl.com/Internet/Protocols/URL.html�

http://www.wdvl.com/Internet/Protocols/URL.html�

dl.fullsecurity.irdl.fullsecurity.ir/HTML-CSS.pdf · Learn HTML and CSS with w3schools 2012 1...

Documents

Transcript of dl.fullsecurity.irdl.fullsecurity.ir/HTML-CSS.pdf · Learn HTML and CSS with w3schools 2012 1...